/* v2, laid out after duolingo.com: a mascot hero, short bold headings, chunky buttons, alternating rows,
   one light band, one dark band and a big closing call. Colours are the app's own. */
:root {
  --teal: #0b7a68; --teal-low: #075c4e; --teal-ink: #0a3f37; --mint: #e3f3ee; --yellow: #f5b82e;
  --text: #2b2b33; --grey: #5f6670; --line: #e6e4df; --white: #fff; --cream: #f7f5f1;
}
* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body { margin: 0; background: var(--white); color: var(--text); font: 700 18px/1.5 Nunito, -apple-system, system-ui, sans-serif; -webkit-font-smoothing: antialiased }
img { max-width: 100%; height: auto; display: block }
a { color: var(--teal) }
h1, h2 { font-weight: 900; line-height: 1.12; letter-spacing: -.01em; margin: 0 0 16px; color: var(--teal) }
h1 { font-size: clamp(32px, 4.4vw, 46px); color: var(--text) }
h2 { font-size: clamp(30px, 4vw, 44px) }
p { margin: 0 0 16px; color: var(--grey) }
.wrap { width: min(1040px, 100% - 32px); margin: 0 auto }

.b { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 30px; border: 0; border-radius: 16px; background: var(--teal); color: #fff; font: 900 17px/1 Nunito, system-ui, sans-serif; text-decoration: none; box-shadow: 0 5px 0 var(--teal-low); cursor: pointer; transition: transform .08s, box-shadow .08s }
.b:active { transform: translateY(5px); box-shadow: 0 0 0 var(--teal-low) }
.b.o { background: #fff; color: var(--teal); box-shadow: 0 5px 0 var(--line), inset 0 0 0 2px var(--line) }
.b.o:active { box-shadow: 0 0 0 var(--line), inset 0 0 0 2px var(--line) }
.b.y { background: var(--yellow); color: var(--teal-ink); box-shadow: 0 5px 0 #c98f12 }
.b svg { width: 22px; height: 22px }
.b:focus-visible, a:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px }
.stack { display: grid; gap: 16px; width: min(340px, 100%) }

.top { position: sticky; top: 0; z-index: 9; background: #fff; border-bottom: 2px solid var(--line) }
.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 70px }
.logo { display: flex; align-items: center; gap: 10px; font-size: 24px; font-weight: 900; color: var(--teal); text-decoration: none; letter-spacing: -.02em }
.logo img { width: 38px; height: 38px; border-radius: 10px }
.top .b { min-height: 44px; padding: 0 18px; font-size: 15px; box-shadow: 0 4px 0 var(--teal-low) }

/* Hero: Cubby in a ring of chores on the left, the line and two buttons on the right. */
.hero .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; min-height: calc(100svh - 150px); padding: 40px 0 }
.hero-art { position: relative; aspect-ratio: 1; max-width: 480px; justify-self: center; width: 100% }
.hero-art .bear { position: absolute; left: 50%; top: 52%; width: 56%; transform: translate(-50%, -50%) }
.bub { position: absolute; width: 19%; aspect-ratio: 1; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 0 rgba(0, 0, 0, .06); animation: bob 5s ease-in-out infinite }
.bub img { width: 62% }
@keyframes bob { 50% { transform: translateY(-10px) } }
.hero-copy { text-align: center; justify-self: center }
.hero-copy h1 { max-width: 460px; margin: 0 auto 28px }
.hero-copy .stack { margin: 0 auto }

.rooms { border-top: 2px solid var(--line); border-bottom: 2px solid var(--line) }
.rooms .wrap { display: flex; gap: 8px; overflow-x: auto; padding: 14px 0; scrollbar-width: none; justify-content: space-between }
.rooms .wrap::-webkit-scrollbar { display: none }
.rooms a { display: flex; align-items: center; gap: 8px; flex: none; padding: 6px 8px 6px 4px; border-radius: 12px; color: var(--grey); text-decoration: none; font-size: 13px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; min-height: 44px }
.rooms a:hover { background: var(--cream) }
.rooms .dot { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center } .rooms .dot img { width: 22px }

.row .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding: 110px 0 }
.row.flip .art { order: 2 }
.row .copy { max-width: 440px }
.art { position: relative; display: flex; justify-content: center }
.art .phone { width: min(280px, 70%); border-radius: 38px; border: 7px solid #fff; box-shadow: 0 0 0 2px var(--line), 0 24px 50px rgba(20, 40, 36, .12); overflow: hidden }
.art .side { position: absolute; width: 38%; bottom: -6%; right: 2% }
.row.flip .art .side { right: auto; left: 2% }
.art .solo { width: min(320px, 80%) }

.band { background: var(--mint); overflow: hidden }
.band .wrap { position: relative; text-align: center; padding: 110px 0 120px }
.band h2 { color: var(--teal-ink) }
.band .get { display: flex; gap: 24px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 28px }
.band .fl { position: absolute; width: 74px; aspect-ratio: 1; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 0 rgba(0, 0, 0, .06); animation: bob 6s ease-in-out infinite }
.band .fl img { width: 62% }
.qr { display: none; align-items: center; gap: 12px; color: var(--teal-ink); font-size: 15px; text-align: left; line-height: 1.3 }
.qr svg { width: 96px; height: 96px; background: #fff; padding: 8px; border-radius: 16px }
@media (hover: hover) and (min-width: 900px) { .qr { display: flex } }

.plus { background: var(--teal-ink); color: #fff }
.plus .wrap { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; padding: 100px 0 }
.plus h2 { color: var(--yellow) }
.plus p { color: #cfe3de }
.plus ul { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 10px }
.plus li { display: flex; gap: 12px; align-items: center; font-weight: 800 }
.plus li::before { content: ""; width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a3f37' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center/16px no-repeat }
.plus .art img { width: min(300px, 70%) }

.end { text-align: center }
.end .wrap { padding: 120px 0 140px; position: relative }
.end h2 { font-size: clamp(36px, 5.4vw, 60px); margin-bottom: 32px }
.end .bear { width: 200px; margin: 0 auto 24px }

.faq .wrap { max-width: 760px; padding: 0 0 100px }
.faq h2 { text-align: center; margin-bottom: 28px }
.faq details { border: 2px solid var(--line); border-radius: 16px; padding: 4px 20px; margin: 12px 0 }
.faq summary { cursor: pointer; font-weight: 900; min-height: 54px; display: flex; align-items: center; color: var(--text) }
.faq details p { margin-top: 0 }

footer { background: var(--teal); color: #fff; position: relative; margin-top: 90px }
footer .peek { position: absolute; left: 50%; top: -150px; width: 150px; transform: translateX(-50%) }
footer::before { content: ""; position: absolute; left: 0; right: 0; top: -40px; height: 42px; background: var(--teal); border-radius: 50% 50% 0 0 / 100% 100% 0 0 }
footer .wrap { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; padding: 64px 0 56px }
footer h3 { color: #fff; font-size: 18px; font-weight: 900; margin: 0 0 12px }
footer a { display: flex; align-items: center; min-height: 36px; color: #d6efe9; text-decoration: none; font-weight: 700 }
footer a:hover { color: #fff }
footer .small { grid-column: 1 / -1; border-top: 2px solid rgba(255, 255, 255, .15); padding-top: 24px; color: #bfe3da; font-size: 14px }

@media (prefers-reduced-motion: reduce) { .bub, .band .fl { animation: none } .b { transition: none } }
@media (max-width: 800px) {
  .hero .wrap, .row .wrap, .plus .wrap { grid-template-columns: 1fr; gap: 28px }
  .hero .wrap { min-height: 0; padding: 24px 0 48px }
  .hero-art { max-width: 340px }
  .row .wrap { padding: 64px 0; text-align: center }
  .row .copy { margin: 0 auto }
  .row .art, .row.flip .art { order: 2 }
  .art .side { width: 30%; bottom: -4% }
  .art .solo { width: 58% }
  .plus .art img { width: 46% }
  .rooms .wrap { justify-content: flex-start }
  .band .wrap, .plus .wrap { padding: 72px 0 }
  .band .fl { display: none }
  .plus { text-align: center } .plus ul { justify-content: center; text-align: left }
  .end .wrap { padding: 72px 0 100px }
  footer .wrap { grid-template-columns: 1fr 1fr; padding-top: 72px }
  footer .peek { width: 130px; top: -138px }
  .top .b { display: none }
}

/* Cubby's dance: one bar is 1.2 s. He bounces on every beat, sways on the bar, taps his feet. */
.dance { display: block; width: 100%; height: auto; overflow: visible; cursor: pointer; -webkit-tap-highlight-color: transparent }
.dance g, .dance ellipse, .dance path { transform-box: view-box }
.d-bear { transform-origin: 100px 192px; animation: d-bounce 1.2s ease-in-out infinite }
.d-head { transform-origin: 100px 145px; animation: d-head 1.2s ease-in-out infinite }
.d-footL { transform-origin: 76px 190px; animation: d-foot .6s ease-in-out infinite }
.d-footR { transform-origin: 124px 190px; animation: d-foot .6s ease-in-out infinite; animation-delay: -.3s }
.d-earL { transform-origin: 62px 62px; animation: d-ear 1.2s ease-in-out infinite }
.d-earR { transform-origin: 138px 62px; animation: d-ear 1.2s ease-in-out infinite reverse }
.d-tail { transform-origin: 122px 147px; animation: d-tail .6s ease-in-out infinite }
.d-shadow { transform-origin: 100px 193px; animation: d-shadow .6s ease-in-out infinite }
.d-tw { transform-origin: center; transform-box: fill-box !important; animation: d-tw 1.2s ease-in-out infinite }
.dance.jump .d-jump { transform-origin: 100px 150px; animation: d-jump .9s cubic-bezier(.3, .7, .4, 1) }
@keyframes d-bounce {
  0%, 50%, 100% { transform: translateY(0) rotate(0) scale(1.03, .96) }
  25% { transform: translateY(-14px) rotate(-6deg) scale(.98, 1.03) }
  75% { transform: translateY(-14px) rotate(6deg) scale(.98, 1.03) }
}
@keyframes d-head { 0%, 100% { transform: rotate(0) } 25% { transform: rotate(7deg) } 75% { transform: rotate(-7deg) } }
@keyframes d-foot { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-5px) rotate(-6deg) } }
@keyframes d-ear { 0%, 100% { transform: rotate(0) } 25% { transform: rotate(-10deg) } 75% { transform: rotate(8deg) } }
@keyframes d-tail { 0%, 100% { transform: rotate(-8deg) } 50% { transform: rotate(14deg) } }
@keyframes d-shadow { 0%, 100% { transform: scale(1); opacity: .1 } 50% { transform: scale(.78); opacity: .06 } }
@keyframes d-tw { 0%, 100% { transform: scale(.5) rotate(0); opacity: .4 } 50% { transform: scale(1.15) rotate(45deg); opacity: 1 } }
@keyframes d-jump {
  0% { transform: none } 30% { transform: translateY(-48px) scaleX(1) } 50% { transform: translateY(-58px) scaleX(-1) }
  70% { transform: translateY(-30px) scaleX(1) } 88% { transform: translateY(0) scale(1.06, .92) } 100% { transform: none }
}
@media (prefers-reduced-motion: reduce) { .dance *, .dance.jump .d-jump { animation: none !important } }

/* The other Cubbys each do one small thing of their own: scrub, nod off, show the jar, look about, hug, peek. */
.act-spray { transform-origin: 50% 100%; animation: a-scrub 1.4s ease-in-out infinite }
.act-focus { transform-origin: 50% 100%; animation: a-nod 2.4s ease-in-out infinite }
.act-sleepy { transform-origin: 50% 100%; animation: a-breathe 3.6s ease-in-out infinite }
.act-jar { transform-origin: 50% 100%; animation: a-hop 1.8s ease-in-out infinite }
.act-curious { transform-origin: 50% 100%; animation: a-look 3s ease-in-out infinite }
.act-hug { transform-origin: 50% 100%; animation: a-hop 1.4s ease-in-out infinite }
footer .peek { animation: a-peek 4s ease-in-out infinite }
@keyframes a-scrub { 0%, 100% { transform: rotate(-4deg) } 50% { transform: rotate(4deg) translateY(-4px) } }
@keyframes a-nod { 0%, 100% { transform: rotate(0) } 30% { transform: rotate(-3deg) translateY(-3px) } 60% { transform: rotate(2deg) } }
@keyframes a-breathe { 0%, 100% { transform: scale(1, 1) } 50% { transform: scale(1.03, .97) } }
@keyframes a-hop { 0%, 100% { transform: translateY(0) scale(1.02, .98) } 40% { transform: translateY(-16px) scale(.98, 1.02) } 60% { transform: translateY(-16px) } }
@keyframes a-look { 0%, 100% { transform: rotate(0) } 25% { transform: rotate(-6deg) } 70% { transform: rotate(5deg) } }
@keyframes a-peek { 0%, 100% { transform: translate(-50%, 0) } 50% { transform: translate(-50%, -12px) } }
@media (prefers-reduced-motion: reduce) { [class*="act-"], footer .peek { animation: none } }

/* ---------- the printable maker ---------- */
.mk .wrap.mk-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; padding: 40px 0 80px }
.mk h1 { font-size: clamp(30px, 4vw, 40px) }
.mk-bar { display: flex; margin: 0 0 28px; counter-reset: x }
.mk-bar button { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 64px; padding: 0; border: 0; background: none; font: 800 15px Nunito, system-ui; color: var(--grey); cursor: pointer }
/* The line joining each step to the one before it; teal once that step is reached. */
.mk-bar button + button::before { content: ""; position: absolute; top: 17px; right: calc(50% + 24px); left: calc(-50% + 24px); height: 4px; border-radius: 2px; background: var(--line) }
.mk-bar button[aria-current="step"]::before, .mk-bar button.done::before { background: var(--teal) }
.mk-bar .n { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 3px solid var(--line); background: #fff; font-weight: 900; font-size: 17px; color: var(--grey) }
.mk-bar .l { display: flex; flex-direction: column; align-items: center; line-height: 1.15 }
.mk-bar .l small { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #8b9098 }
.mk-bar button[aria-current="step"] .n { background: var(--teal); border-color: var(--teal); color: #fff; box-shadow: 0 3px 0 var(--teal-low) }
.mk-bar button[aria-current="step"] .l { color: var(--teal-ink) }
.mk-bar button.done .n { background: var(--mint); border-color: var(--teal); color: transparent; position: relative }
.mk-bar button.done .n::after { content: ""; position: absolute; width: 13px; height: 7px; border: solid var(--teal); border-width: 0 0 3.5px 3.5px; transform: translateY(-2px) rotate(-45deg) }
.mk-bar button.done .l { color: var(--teal) }
.mk-bar button:disabled { opacity: .5; cursor: default }
.seg { display: flex; gap: 8px }
.seg button, .mk-rooms button, .mk-themes button { min-height: 48px; padding: 0 16px; border: 2px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 3px 0 var(--line); font: 800 16px Nunito, system-ui; color: var(--text); cursor: pointer; display: flex; align-items: center; gap: 10px }
.seg button { flex: 1; justify-content: center }
.seg button[aria-pressed="true"], .mk-rooms button[aria-pressed="true"], .mk-themes button[aria-pressed="true"] { border-color: var(--teal); background: var(--mint); box-shadow: 0 3px 0 var(--teal); color: var(--teal-ink) }
.mk-who { margin-bottom: 20px }
.mk-rooms { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px }
.mk-rooms button { padding: 6px 12px 6px 6px; min-height: 56px; text-align: left }
.dot { width: 40px; height: 40px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; background: #eef3f1 } .dot img { width: 26px }
.mk-go { display: flex; align-items: center; gap: 20px; margin-top: 24px; flex-wrap: wrap }
.mk-go .b { min-width: 180px }
.b:disabled { opacity: .45; cursor: default; transform: none }
.link { background: none; border: 0; font: 900 16px Nunito, system-ui; color: var(--teal); min-height: 44px; cursor: pointer; text-decoration: underline; text-underline-offset: 4px }
.mk-room { margin-bottom: 24px }
.mk-room h3 { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 900; margin: 0 0 8px }
.mk-chore { display: flex; align-items: center; gap: 12px; padding: 8px 4px; border-bottom: 2px solid var(--line); cursor: pointer }
.mk-chore input { position: absolute; opacity: 0; pointer-events: none }
.mk-chore .t { flex: 1; min-width: 0 } .mk-chore .t b { display: block; font-weight: 800; line-height: 1.25 } .mk-chore small { color: var(--grey); font-size: 14px }
.mk-chore .box { width: 30px; height: 30px; border-radius: 9px; border: 2px solid #cfccc6; flex: none; display: flex; align-items: center; justify-content: center }
.mk-chore input:checked ~ .box { background: var(--teal); border-color: var(--teal) }
.mk-chore input:checked ~ .box::after { content: ""; width: 14px; height: 8px; border: solid #fff; border-width: 0 0 3px 3px; transform: translateY(-2px) rotate(-45deg) }
.mk-chore input:focus-visible ~ .box { outline: 3px solid var(--yellow); outline-offset: 2px }
.mk-chore.own .dot { background: #f1efeb }
.mk-chore .x { width: 44px; height: 44px; border: 0; background: none; font-size: 26px; color: var(--grey); cursor: pointer }
.mk-add { display: flex; gap: 8px; margin-top: 10px }
.mk-add input, .fld input { flex: 1; min-width: 0; min-height: 48px; padding: 0 14px; border: 2px solid var(--line); border-radius: 14px; font: 700 16px Nunito, system-ui; color: var(--text); background: #fff }
.mk-add input:focus, .fld input:focus { outline: none; border-color: var(--teal) }
.mk-add .b { min-height: 48px; padding: 0 20px; box-shadow: 0 4px 0 var(--line), inset 0 0 0 2px var(--line) }
.fld { display: grid; gap: 8px; margin-bottom: 18px } .fld > span { font-weight: 900 }
.mk-themes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px }
.mk-themes button { padding: 0 10px; font-size: 15px } .mk-themes i { width: 22px; height: 22px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .12); flex: none }
.mk-blank { display: flex; align-items: center; gap: 12px } .mk-blank b { min-width: 24px; text-align: center; font-size: 20px }
.b.sm { min-height: 44px; min-width: 44px; padding: 0; font-size: 22px }
.mk-prev { position: sticky; top: 90px }
#preview { position: relative; overflow: hidden; width: 100%; border-radius: 6px; box-shadow: 0 0 0 2px var(--line), 0 18px 40px rgba(20, 40, 36, .12) }
#sheet { transform-origin: 0 0 }

/* The sheet is drawn at print size in CSS pixels; --s shrinks its type so a long list stays on one page. */
.sheet { --s: 1; position: relative; overflow: hidden; background: #fff; color: #2b2b33; font-family: Nunito, -apple-system, system-ui, sans-serif; padding: 36px 40px 30px; display: flex; flex-direction: column; -webkit-print-color-adjust: exact; print-color-adjust: exact }
.sh-band { position: absolute; left: 0; right: 0; top: 0; height: 170px; background: var(--band) }
.th-ink .sh-band { border-bottom: 3px solid #2b2b33 }
.sh-head { position: relative; flex: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; height: 150px; margin-bottom: 34px }
.sh-head h1 { font-size: calc(40px * min(var(--s), 1.15)); line-height: 1.05; font-weight: 900; color: #2b2b33; margin: 0 0 6px }
.sh-head p { margin: 0; font-size: 17px; font-weight: 800; color: var(--ink) }
.sh-cubby { height: 160px; width: auto; margin: 0 -6px -18px 0; align-self: flex-end }
.th-ink .sh-cubby { filter: grayscale(1) contrast(1.1) }
.kid .sh-cubby { height: 176px }
.sh-body { position: relative; flex: 1; min-height: 0; overflow: hidden }
.sh-grid { columns: 2; column-gap: 18px }
.kid .sh-grid { columns: 1 }
.sh-grid.one { columns: 1 }
.sh-room { break-inside: avoid; border: 2px solid #e8e5df; border-radius: 16px; padding: calc(12px * var(--s)) 14px calc(6px * var(--s)); margin-bottom: calc(14px * var(--s)) }
.sh-room h2 { font-size: calc(18px * var(--s)); font-weight: 900; margin: 0 0 4px; color: var(--ink) }
.sh-row { display: flex; align-items: center; gap: 10px; padding: calc(6px * var(--s)) 0; border-top: 1.5px solid #f0eeea; font-size: calc(15px * var(--s)); font-weight: 700 }
.sh-row:first-of-type { border-top: 0 }
.sh-ic { --z: 30px; width: calc(var(--z) * var(--s)); height: calc(var(--z) * var(--s)); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none } .sh-ic img { width: 68% }
.sh-ic-empty { border: 2px dashed #cfccc6 }
.sh-t { flex: 1; min-width: 0; line-height: 1.2 }
.sh-min { font-style: normal; font-size: calc(12px * var(--s)); color: #7a808a; white-space: nowrap }
.sh-tick { width: calc(22px * var(--s)); height: calc(22px * var(--s)); border: 2.5px solid #9a968f; border-radius: 50%; flex: none }
.sh-star { width: calc(26px * var(--s)); height: calc(26px * var(--s)); flex: none; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round }
.sh-line { display: block; border-bottom: 2px solid #c9c5be; height: 1.2em; width: 100% }
.kid .sh-row { font-size: calc(18px * var(--s)) }
.kid .sh-ic { width: calc(var(--z) * var(--s) * 1.3); height: calc(var(--z) * var(--s) * 1.3) }
.sh-week { width: 100%; border-collapse: separate; border-spacing: 0; font-size: calc(15px * var(--s)); font-weight: 700 }
.sh-week th { font-size: calc(13px * min(var(--s), 1.3)); font-weight: 900; color: var(--ink); padding: 0 0 8px; text-transform: uppercase; letter-spacing: .04em }
.sh-week td { border-top: 1.5px solid #ebe8e3; padding: calc(7px * var(--s)) 0; text-align: center; vertical-align: middle }
.sh-week td .sh-tick, .sh-week td .sh-star { display: inline-block; vertical-align: middle }
.sh-week .sh-name { text-align: left; width: 44%; padding-right: 8px } .sh-week .sh-name > div { display: flex; align-items: center; gap: 10px }
.sh-week .sh-name span:not(.sh-ic) { flex: 1; line-height: 1.2 }
.sh-reward { flex: none; position: relative; margin-top: 12px; border: 2.5px solid var(--ink); border-radius: 18px; padding: 12px 16px; display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: center; font-size: 17px }
.sh-reward b { color: var(--ink) } .sh-reward span { font-weight: 800 }
.sh-stars { grid-column: 1 / -1; display: flex; justify-content: space-between } .sh-stars .sh-star { width: 34px; height: 34px }
.sh-empty { color: #7a808a; text-align: center; margin-top: 80px; font-size: 18px }
.sh-foot { flex: none; position: relative; display: flex; justify-content: space-between; margin-top: 14px; font-size: 12px; color: #7a808a } .sh-foot b { color: var(--ink) }

/* Print only the sheet: everything else leaves the layout, so the sheet is the one page. */
@media print {
  html, body { margin: 0; background: #fff }
  body > :not(main), main > :not(.mk), .mk-side { display: none !important }
  .mk .wrap.mk-in { display: block; width: auto; padding: 0 }
  .mk-prev { display: block !important; position: static }
  #preview { height: auto !important; box-shadow: none; border-radius: 0; overflow: visible }
  #preview { height: 0 !important }
  #sheet { position: fixed; left: 0; top: 0; transform: none !important }
}
@media (max-width: 800px) {
  .mk .wrap.mk-in { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 24px }
  .mk-prev { min-width: 0 }
  .mk-prev { position: static; display: none }
  body[data-step="3"] .mk-prev { display: block; order: -1 }
  .mk-themes { grid-template-columns: repeat(2, 1fr) }
}

/* ---------- printable pages ---------- */
.pr .wrap.pr-in { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding: 48px 0 72px }
.crumb { margin: 0 0 8px; font-size: 15px } .crumb a { text-decoration: none; font-weight: 800 }
.pr h1, .pr-index h1 { font-size: clamp(34px, 4.6vw, 50px) }
.lead { font-size: 20px; color: var(--grey); margin-bottom: 28px }
.small { font-size: 15px; margin-top: 18px }
.paper { margin: 0; justify-self: center; max-width: 440px; transform: rotate(1.5deg) }
.paper img { border-radius: 6px; box-shadow: 0 0 0 1px var(--line), 0 24px 50px rgba(20, 40, 36, .16) }
.how .wrap { max-width: 760px; padding: 0 0 56px } .how ol { padding-left: 24px; font-size: 19px } .how li { margin: 8px 0; color: var(--grey) }
.how h2, .more h2 { text-align: center }
.more .wrap { padding: 0 0 96px }
.pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px }
.pcard { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--text); font-weight: 900; font-size: 17px; line-height: 1.25 }
.pcard img { border-radius: 10px; box-shadow: 0 0 0 2px var(--line); transition: transform .15s }
.pcard:hover img { transform: translateY(-4px) }
.pcard.make { justify-content: center; align-items: center; text-align: center; aspect-ratio: 600 / 776; border: 3px dashed var(--teal); border-radius: 10px; background: var(--mint); padding: 16px }
.pcard.make .plus { font-size: 56px; line-height: 1; color: var(--teal) } .pcard.make span:last-child { font-weight: 700; color: var(--grey); font-size: 15px }
.pr-index .wrap { padding: 48px 0 96px }
@media (max-width: 800px) {
  .pr .wrap.pr-in { grid-template-columns: 1fr; gap: 32px; padding: 24px 0 48px }
  .paper { max-width: 300px; transform: none }
  .pgrid { grid-template-columns: repeat(2, 1fr); gap: 14px }
}