@font-face {
  font-family: "Lexend";
  src: url("../fonts/lexend-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}

:root {
  --bg: #0f0e24;
  --bg-2: #171538;
  --ink: #eeeafb;
  --ink-soft: #b9b3d9;
  --ink-faint: #8a84ad;
  --glass: rgba(255, 255, 255, 0.06);
  --glass-2: rgba(255, 255, 255, 0.1);
  --edge: rgba(255, 255, 255, 0.13);
  --violet: #7c5cff;
  --violet-2: #9b82ff;
  --cyan: #3fd8f0;
  --good: #4ade80;
  --warm: #fbbf24;
  --fix: #ff8a5c;
  --paper: #fbf8f1;
  --paper-ink: #1c1b22;
  --p-orange: #ff7a3d;
  --p-purple: #8b5cf6;
  --p-lime: #a3e635;
  --p-yellow: #facc15;
  --r: 28px;
  /* spacing scale */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  /* type scale: labels 16, secondary 18, body 20, controls 22, headings 28 */
  --t-label: 16px; --t-small: 18px; --t-body: 20px; --t-control: 22px; --t-head: 28px;
  --tap: 64px;
  --tap-big: 84px;
  --gut: max(16px, env(safe-area-inset-left));
  --spring: cubic-bezier(.16, 1, .3, 1);   /* smooth ease-out (expo), no bounce */
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Lexend", Verdana, system-ui, sans-serif;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  word-spacing: 0.12em;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; letter-spacing: inherit; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.qin:focus-visible { outline: none; }
input { caret-color: var(--cyan); }
::selection { background: rgba(124, 92, 255, .45); color: #fff; }

/* Night sky: slow glow blobs like the MemoryOS hero */
.sky { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background: radial-gradient(120% 80% at 50% -10%, #241f5c 0%, var(--bg) 60%); }
.sky i { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .45; }
.sky i:nth-child(1) { width: 60vmax; height: 60vmax; left: -15vmax; top: -20vmax; background: #5b3df5; animation: drift 26s ease-in-out infinite alternate; }
.sky i:nth-child(2) { width: 45vmax; height: 45vmax; right: -15vmax; top: 20vh; background: #1aa6c9; opacity: .28; animation: drift 32s ease-in-out infinite alternate-reverse; }
.sky i:nth-child(3) { width: 40vmax; height: 40vmax; left: 20vw; bottom: -25vmax; background: #8e3df5; opacity: .3; animation: drift 38s ease-in-out infinite alternate; }
@keyframes drift { to { transform: translate(6vmax, 4vmax) scale(1.08); } }

#app { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column;
  padding: max(14px, env(safe-area-inset-top)) var(--gut) max(14px, env(safe-area-inset-bottom)); }

.glass { background: var(--glass); border: 1px solid var(--edge); border-radius: var(--r);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 20px 60px rgba(5, 3, 30, .45), inset 0 1px 0 rgba(255,255,255,.08); }

/* ---------- Buttons ---------- */
.btn { min-height: var(--tap); padding: 0 28px; border-radius: 20px; border: 1px solid var(--edge);
  background: var(--glass-2); font-weight: 600; font-size: var(--t-control); display: inline-flex; align-items: center;
  justify-content: center; gap: 12px; cursor: pointer; transition: transform .15s var(--ease), background .2s; }
.btn:active { transform: scale(.96); }
.btn.primary { min-height: var(--tap-big); font-size: 24px; border: none; color: #fff;
  background: linear-gradient(180deg, #8d72ff, #6a48f5); box-shadow: 0 10px 30px rgba(108, 76, 255, .45), inset 0 1px 0 rgba(255,255,255,.3); }
.btn.big { min-height: var(--tap-big); font-size: var(--t-control); }
.btn img { width: 34px; height: 34px; }
.icon-btn { width: var(--tap); height: var(--tap); border-radius: 50%; border: 1px solid var(--edge); background: var(--glass-2);
  display: grid; place-items: center; cursor: pointer; padding: 0; flex: none; }
.icon-btn:active { transform: scale(.94); }
.icon-btn svg { width: 28px; height: 28px; }
.icon-btn img { width: 36px; height: 36px; }

/* ---------- Home ---------- */
.home { flex: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--s5); min-height: 0; }
.home-left { display: flex; flex-direction: column; gap: var(--s4); min-height: 0; justify-content: flex-start; }
.brand { display: flex; align-items: center; gap: var(--s3); font-weight: 700; font-size: var(--t-control); color: var(--ink-soft); margin-bottom: calc(var(--s3) * -1); }
.brand img { width: 44px; height: 44px; }
.hero-title { font-size: clamp(38px, 5vw, 56px); line-height: 1.12; font-weight: 700; margin: 0; letter-spacing: 0; }
.hero-title em { font-style: normal; color: var(--violet-2); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.stat { padding: 16px 18px; text-align: left; }
.stat b { display: block; font-size: 38px; line-height: 1.1; font-weight: 700; }
.stat span { font-size: var(--t-small); color: var(--ink-soft); }
.stat b.cyan { color: var(--cyan); }
.stat b.violet { color: var(--violet-2); }
.home-actions { display: flex; flex-direction: column; gap: var(--s3); }
.home-actions .row { display: flex; gap: var(--s3); }
.home-actions .row .btn { flex: 1; }
.home-right { min-height: 0; display: flex; flex-direction: column; padding: var(--s5); gap: var(--s3); }
.home-right h2 { margin: 0; font-size: var(--t-small); font-weight: 600; color: var(--ink-soft); display: flex; justify-content: space-between; }
.mastery-map { flex: 1; min-height: 0; display: grid; place-items: center; }
.mastery-map svg { max-height: 100%; max-width: 100%; }
.legend { display: flex; gap: var(--s2) var(--s4); font-size: var(--t-small); color: var(--ink-soft); flex-wrap: wrap; }
.legend i { display: inline-block; width: 14px; height: 14px; border-radius: 4px; margin-right: 6px; vertical-align: -1px; }

.settings-row { display: flex; gap: var(--s2); flex-wrap: wrap; }
.chip { min-height: 48px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--edge); background: var(--glass);
  font-size: var(--t-small); cursor: pointer; color: var(--ink-soft); }
.chip.on { background: rgba(124, 92, 255, .25); color: var(--ink); border-color: rgba(155, 130, 255, .6); }

/* ---------- Session ---------- */
.topbar { display: flex; align-items: center; gap: var(--s4); margin-bottom: var(--s4); }
.progress { flex: 1; height: 16px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.progress i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--violet), var(--cyan));
  box-shadow: 0 0 18px rgba(63, 216, 240, .6); transition: width .5s var(--ease); }
.stars { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 22px; min-width: 76px; }
.stars img { width: 34px; height: 34px; }

.stage { flex: 1; min-height: 0; perspective: 1800px; display: flex; }
.card { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--s5); padding: var(--s5);
  transform-style: preserve-3d; }
.card.wide-map { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
.card.enter { animation: cardIn .45s var(--ease) both; }
@keyframes cardIn { from { opacity: 0; transform: translateY(26px) scale(.98); } }
.card.flip { animation: flip .6s var(--ease); }
@keyframes flip { 0% { transform: rotateY(0); } 50% { transform: rotateY(90deg); } 51% { transform: rotateY(-90deg); } 100% { transform: rotateY(0); } }

.paper { min-height: 0; display: grid; place-items: center; padding: 6px; position: relative; overflow: hidden; }
.paper svg { width: 100%; height: 100%; display: block; }

.side { display: flex; flex-direction: column; gap: var(--s5); min-height: 0; overflow: hidden; }
.prompt { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }
.prompt h3 { margin: 0; font-size: var(--t-head); line-height: 1.25; font-weight: 600; text-wrap: balance; }
.status { margin: 0; font-size: var(--t-control); font-weight: 700; line-height: 1.3; }
.status.ok { color: var(--good); }
.status.fix { color: var(--fix); }
.word { font-size: 40px; font-weight: 700; letter-spacing: .1em; }
.word .t { color: var(--warm); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.hook { margin: 0; font-size: var(--t-body); color: var(--ink-soft); line-height: 1.45; }
.hook b { color: var(--ink); }
@keyframes bob { 50% { transform: translateY(-5px) rotate(-3deg); } }
.spacer { flex: 1; }
.grades { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.grades .btn { min-height: var(--tap-big); flex-direction: column; gap: 2px; font-size: 20px; padding: 0 10px; }
.grades .btn small { font-size: var(--t-label); font-weight: 400; color: var(--ink-soft); }
.g-no { background: rgba(255,255,255,.07); }
.g-mid { background: rgba(251, 191, 36, .16); border-color: rgba(251, 191, 36, .45) !important; }
.g-yes { background: rgba(74, 222, 128, .18); border-color: rgba(74, 222, 128, .5) !important; }

/* typed answer */
.typed { min-height: 76px; border-radius: 18px; background: rgba(0,0,0,.25); border: 2px solid var(--edge);
  display: flex; align-items: center; padding: 0 18px; font-size: 38px; font-weight: 700; letter-spacing: .12em; flex-wrap: wrap; }
.typed .caret { width: 3px; height: 40px; background: var(--cyan); margin-left: 4px; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.typed.bad { border-color: var(--fix); animation: wiggle .4s; }
.typed.good { border-color: var(--good); box-shadow: 0 0 24px rgba(74,222,128,.4); }
@keyframes wiggle { 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }
.diff { font-size: 38px; font-weight: 700; letter-spacing: .12em; display: flex; flex-wrap: wrap; }
.diff span.ok { color: var(--good); }
.diff span.miss { color: var(--fix); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.diff span.extra { color: var(--fix); text-decoration: line-through; opacity: .7; }
.diff-label { font-size: var(--t-label); color: var(--ink-soft); }
.side.tight { gap: var(--s3); }
.you-wrote { display: flex; align-items: baseline; gap: var(--s3); }
.you-wrote .diff-label { flex: 0 0 96px; }
.you-wrote .diff { font-size: clamp(26px, 2.8vw, 32px); letter-spacing: .08em; }
.typed-diff { font-size: 28px; }
.typed-diff span.ok { color: var(--ink); }

/* letter pad */
.pad { display: grid; gap: 8px; }
.pad .r { display: flex; gap: 8px; justify-content: center; }
.key { flex: 1 1 0; max-width: 74px; height: clamp(46px, 6.8vh, 62px); border-radius: 14px; border: 1px solid var(--edge); background: rgba(255,255,255,.1);
  font-size: 26px; font-weight: 600; cursor: pointer; padding: 0; box-shadow: 0 3px 0 rgba(0,0,0,.35); }
.key:active, .key.hit { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.35); background: rgba(124,92,255,.45); }
.key.wide { max-width: 200px; flex: 2 1 0; font-size: var(--t-body); }
.key.go { background: linear-gradient(180deg, #8d72ff, #6a48f5); border: none; color: #fff; }
.key.hint { background: rgba(63, 216, 240, .16); border-color: rgba(63,216,240,.4); }

/* ---------- Full sheet ---------- */

/* ---------- Meet / end ---------- */
.center-col { flex: 1; display: grid; place-items: center; text-align: center; }
.end-card { padding: 40px 48px; max-width: 640px; display: flex; flex-direction: column; gap: 18px; align-items: center; }
.end-card img.big { width: 120px; height: 120px; animation: pop .7s var(--spring) both; }
.end-card h2 { margin: 0; font-size: 40px; }
.end-card p { margin: 0; color: var(--ink-soft); font-size: 21px; }
@keyframes pop { from { transform: scale(.3) rotate(-20deg); opacity: 0; } }

/* sparkle burst */
.burst { position: fixed; pointer-events: none; z-index: 50; width: 0; height: 0; }
.burst i { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); animation: fly .9s var(--ease) forwards; }
.burst i:nth-child(3n) { background: var(--violet-2); box-shadow: 0 0 12px var(--violet-2); }
.burst i:nth-child(3n+1) { background: var(--p-yellow); box-shadow: 0 0 12px var(--p-yellow); }
@keyframes fly { to { transform: translate(var(--x), var(--y)) scale(.2); opacity: 0; } }
.ring { position: fixed; pointer-events: none; z-index: 49; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%;
  border: 3px solid var(--cyan); animation: ring .8s var(--ease) forwards; }
@keyframes ring { to { transform: scale(6); opacity: 0; } }

/* map bits */
.pulse { animation: pulse 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes pulse { 50% { transform: scale(1.7); opacity: .5; } }
.lead { animation: dash 1.2s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -24; } }
.state-fill { transition: fill .5s; }


/* ---------- Home walkthrough ---------- */
.home-info { position: relative; padding: var(--s5); display: flex; flex-direction: column; gap: var(--s5); animation: cardIn .35s var(--ease) both; }
.home-info .close { position: absolute; top: var(--s4); right: var(--s4); width: 48px; height: 48px; }
/* the State label row is as tall as the close button, so the name + speaker row sits clear below it */
.home-info .info-group:first-child > .info-label { min-height: 40px; display: flex; align-items: center; padding-right: 64px; }
.sel-state { fill: rgba(124, 92, 255, .5); stroke: #3fd8f0; stroke-width: 3; stroke-linejoin: round; }

/* ---------- Modes ---------- */
.title { flex: 1; font-weight: 600; font-size: 24px; }
.title span { color: var(--ink-soft); font-weight: 400; font-size: 18px; margin-left: 8px; }
.btn.primary.quiz { background: linear-gradient(180deg, #3fd8f0, #1aa6c9); box-shadow: 0 10px 30px rgba(26, 166, 201, .4), inset 0 1px 0 rgba(255,255,255,.3); color: #06222b; }
.mode-grid { flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; align-content: center; max-width: 1100px; width: 100%; margin: 0 auto; }
.mode-card { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 28px; min-height: 260px; text-align: left; cursor: pointer; transition: transform .2s var(--ease); }
.mode-card:active { transform: scale(.97); }
.mode-card img { width: 72px; height: 72px; filter: drop-shadow(0 8px 14px rgba(0,0,0,.4)); }
.mode-card b { font-size: 28px; }
.mode-card span { font-size: 18px; color: var(--ink-soft); line-height: 1.45; }

.pick { cursor: pointer; transition: fill .2s, fill-opacity .2s; }
.pick:hover, .pick:active { fill: rgba(124, 92, 255, .35); fill-opacity: 1; }
.info { display: flex; flex-direction: column; gap: var(--s5); }
.info-group { display: flex; flex-direction: column; gap: var(--s2); }
.info-group .info-label { margin-bottom: calc(var(--s1) * -1); }
.info-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.info-divider { border: none; height: 1px; margin: 0; background: var(--edge); }
.row-label { white-space: nowrap; }
.tip { display: inline-block; line-height: 1.35; padding: 6px var(--s3); border-radius: 12px; background: var(--glass-2); border: 1px solid var(--edge); color: var(--ink); font-weight: 600; font-size: var(--t-small); letter-spacing: .03em; }
.info-group .word { font-size: clamp(28px, 3vw, 40px); line-height: 1.15; letter-spacing: .06em; min-width: 0; }
.info-row .icon-btn { flex: none; }
.info-label { font-size: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; }
.word.cap { color: var(--cyan); }
.say { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: var(--s3); font-size: var(--t-small); color: var(--ink-soft); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); min-width: 0; }
.say-word { display: inline-flex; flex-wrap: nowrap; gap: 5px; }
.syl { padding: 4px 11px; border-radius: 10px; border: 1px solid var(--edge); background: var(--glass-2);
  color: var(--ink); font-size: 21px; font-weight: 500; letter-spacing: .05em; line-height: 1.3; }
.syl.stress { border-color: rgba(63, 216, 240, .6); background: rgba(63, 216, 240, .16); font-weight: 700; }
.tips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.tips b { padding: 6px var(--s3); border-radius: 12px; background: var(--glass-2); border: 1px solid var(--edge); color: var(--ink); font-weight: 600; font-size: var(--t-small); letter-spacing: .03em; }
.btn[disabled] { opacity: .35; }


/* ---------- Quiz: map left, typed answer lines right ---------- */
.quiz { flex: 1; min-height: 0; display: flex; padding: 14px 20px 14px 10px; position: relative; }
.quiz-map { flex: none; height: 100%; display: flex; overflow: hidden; border-radius: 16px; }
.quiz-map svg { height: 100%; width: auto; max-width: 52vw; display: block; }
.quiz-gap { flex: 0 0 clamp(40px, 7vw, 110px); }
.quiz-col { flex: 1; min-width: 0; display: grid; grid-template-rows: auto repeat(17, 1fr); align-items: end; padding: 4px 0 6px; }
.qhead { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); font-size: var(--t-label); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600; padding: 0 0 2px 4px; }
.qrow { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; border-radius: 8px; transition: background .25s; }
.qrow.on { background: rgba(63, 216, 240, .07); }
.quiz-leads { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.qstate { vector-effect: non-scaling-stroke; stroke-width: 1.4px; cursor: pointer; transition: fill .3s, stroke .3s; }
.qstate.on { fill: rgba(124, 92, 255, .42); stroke: #3fd8f0; stroke-width: 2.2px; }
.qstate:active, .qstate.hov { fill: rgba(124, 92, 255, .22); stroke: rgba(255,255,255,.85); }
.qstate.on.hov { fill: rgba(124, 92, 255, .5); stroke: #3fd8f0; }
.qrow.hov .qin, .qrow.hov .qres { border-bottom-color: #c4b5ff; background: rgba(124, 92, 255, .1); }
.qcell { position: relative; min-width: 0; }
.qcell .qin { padding-right: 42px; transition: border-color .2s, background .2s; }
.qclear, .qok { position: absolute; right: 2px; bottom: 4px; width: 32px; height: 32px; display: none; place-items: center; border-radius: 50%; }
.qclear { border: none; background: rgba(255,255,255,.12); color: var(--ink-soft); padding: 0; cursor: pointer; }
.qclear::after { content: ""; position: absolute; inset: -8px; }          /* 48px touch target */
.qclear svg, .qok svg { width: 18px; height: 18px; }
.qcell[data-st="typing"] .qclear { display: grid; }
.qcell[data-st="bad"] .qclear { display: grid; background: #ef4444; color: #fff; box-shadow: 0 0 0 3px rgba(239,68,68,.25); }
.qcell[data-st="bad"] .qin { border-bottom-color: #ef4444; background: rgba(239, 68, 68, .1); }
.qcell[data-st="ok"] .qok { display: grid; background: #22c55e; color: #06220f; pointer-events: none; }
.qcell[data-st="ok"] .qin { border-bottom-color: var(--good); color: #bbf7d0; }
.qcell.pop .qok { animation: okpop .35s var(--spring); }
@keyframes okpop { from { transform: scale(.3); opacity: 0; } }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ink-soft); font-weight: 500; font-size: 18px; min-height: 48px; padding: 0 14px; }
.qin { width: 100%; min-width: 0; height: clamp(30px, 4.6vh, 40px); background: transparent; border: none; border-bottom: 2px solid rgba(255,255,255,.75);
  border-radius: 6px 6px 0 0; color: var(--ink); font: 600 20px/1 "Lexend", Verdana, sans-serif; letter-spacing: .03em; padding: 0 6px;
  outline: none; -webkit-appearance: none; }
.qin:focus { border-bottom-color: var(--cyan); background: rgba(124, 92, 255, .22); }
.qres { height: clamp(30px, 4.6vh, 40px); display: flex; align-items: flex-end; gap: 6px; padding: 0 6px 4px; border-bottom: 2px solid rgba(255,255,255,.3);
  font-weight: 600; font-size: 18px; white-space: nowrap; overflow: hidden; }
.qres.ok { color: var(--good); }
.qres.no s { color: var(--fix); font-weight: 400; font-size: var(--t-label); }
.qres.no b { color: #c4b5ff; }
.score { font-size: var(--t-small); color: var(--ink-soft); white-space: nowrap; }
.score b { font-size: 28px; color: var(--cyan); margin-right: 6px; }
.btn.slim { min-height: var(--tap); font-size: 20px; }

@media (orientation: portrait), (max-width: 860px) {
  body { overflow-y: auto; }
  .home { display: flex; flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .home-left { flex: none; justify-content: flex-start; }
  .home-right { flex: none; height: 62vh; }
  .card, .card.wide-map { grid-template-columns: 1fr; grid-template-rows: minmax(300px, 1fr) auto; overflow-y: auto; }
  }
@media (max-width: 600px) {
  .stats { grid-template-columns: 1fr 1fr 1fr; }
  .stat b { font-size: 28px; }
    .key { height: 54px; font-size: 22px; }
  .grades .btn small { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- Print: plain worksheet ---------- */
#print-root { display: none; }
@media print {
  @page { size: letter landscape; margin: 0.35in; }
  body { background: #fff; overflow: visible; }
  .sky, #app { display: none !important; }
  #print-root { display: block; color: #000; }
  #print-root svg { width: 100%; height: 7.1in; }
  #print-root h1 { font: 600 16pt Verdana, sans-serif; margin: 0 0 6pt; }
  #print-root .pg { page-break-after: always; }
}

/* ---------- State card: player-card hero + say/spell rows ---------- */
.sc { container-type: inline-size; position: relative; border-radius: 22px; overflow: hidden; flex: none; }
.sc .star { font-size: .7em; margin-right: .35em; vertical-align: .12em; }
.sc .t { color: inherit; text-decoration: underline; text-decoration-color: currentColor; text-decoration-thickness: 4px; text-underline-offset: 6px; }
.sc .sl { font-size: var(--t-label); font-weight: 600; letter-spacing: .04em; color: rgba(255,255,255,.62); }
.shape { display: block; width: 100%; height: 100%; color: rgba(255,255,255,.75); }
.pc { color: #fff; border: 1px solid color-mix(in srgb, var(--c) 55%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 85%, transparent) 0%, color-mix(in srgb, var(--c) 30%, transparent) 16%, color-mix(in srgb, var(--c) 8%, transparent) 34%, transparent 60%), #17142e; }
.pc-hero { padding: var(--s5) var(--s5) var(--s4); color: #fff; }
.pc-hero .shape { height: clamp(72px, 12vh, 140px); }
.pc-name { padding-top: var(--s3); text-align: center; }
.pc-state { font-size: min(44px, calc((100cqi - 48px) / (var(--n) * .7))); font-weight: 800; line-height: 1.05; letter-spacing: .04em; }
.pc-cap { margin-top: var(--s1); font-size: var(--t-head); font-weight: 700; letter-spacing: .04em; }
.fp-strip { display: grid; }
.fp-strip > div { border-top: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s2) var(--s3); padding: var(--s3) var(--s5); }
.fp-strip > div + div { border-top: 1px solid rgba(255,255,255,.1); }
.fp-rows { display: flex; flex-direction: column; }
.fp-row { display: grid; grid-template-columns: 40% 1fr; gap: var(--s4); align-items: center; padding: var(--s3) var(--s5); border-top: 1px solid rgba(255,255,255,.08); }

.fp-row span { font-size: var(--t-label); color: rgba(255,255,255,.65); font-weight: 600; }
.fp-row b { font-size: var(--t-small); line-height: 1.35; }
.hear-bar { width: 100%; min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: 0 var(--s5); border: none; border-top: 1px solid rgba(255,255,255,.16); background: transparent; color: #fff;
  font-size: var(--t-control); font-weight: 600; cursor: pointer; }
.hear-bar svg { width: 28px; height: 28px; }
.hear-bar:active { background: color-mix(in srgb, var(--c) 22%, var(--deep)); }
.home-info:has(.sc) { padding: 0; background: transparent; border: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.home-info:has(.sc) .close { z-index: 3; background: rgba(15,14,36,.55); }

.pc.compact .pc-hero { padding: var(--s5) var(--s5) var(--s4); color: #fff; }
.pc.compact .pc-name { padding-top: 0; }
.side .sc { flex: 0 1 auto; min-height: 0; }

/* home: brand row on top, card fills the right column */
.home-head { flex: none; margin-bottom: var(--s4); }
.home-head .brand { margin: 0; }
.home-info { padding: 0; animation: none; }
/* shorter card on flashcards: the color fades out before the rows start */
.pc.compact { background: linear-gradient(180deg, color-mix(in srgb, var(--c) 70%, transparent) 0%, color-mix(in srgb, var(--c) 15%, transparent) 30%, transparent 55%), #17142e; }
/* syllable boxes keep a dark base so white text stays readable over the fading color */
.pc .syl { background: rgba(15, 12, 36, .55); border-color: rgba(255,255,255,.18); }
.pc .syl.stress { background: rgba(15, 12, 36, .7); border-color: rgba(63, 216, 240, .7); }
.pc .sl, .pc .fp-row span { color: rgba(255,255,255,.78); }

.pc .t { text-decoration-color: var(--c); }
.pc-state, .pc-cap { text-shadow: 0 2px 10px rgba(0,0,0,.35); }

/* ---------- Home: one screen, map left, card right, actions top right ---------- */
.home-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s4); }
.home-nav { display: flex; align-items: center; gap: var(--s3); }
.home-nav .btn.slim { min-height: 56px; padding: 0 var(--s5); font-size: var(--t-control); }
.home-nav .btn img { width: 28px; height: 28px; }
.home-nav .chip { min-height: 56px; }
.home { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; }
.home-map { min-height: 0; height: 100%; display: flex; flex-direction: column; gap: var(--s2); }
.home-map .hint { margin: 0; font-size: var(--t-small); color: var(--ink-soft); }
.home-map .mastery-map { flex: 1; min-height: 0; display: grid; place-items: center; }
.home-map .mastery-map svg { max-height: 100%; max-width: 100%; }
.home-card { min-height: 0; padding-top: calc(var(--t-small) * 1.5 + var(--s2)); }
.home-card .pc { border: none; }
@media (orientation: portrait), (max-width: 860px) {
  .home-nav .btn.slim { padding: 0 var(--s4); }
  .home { align-items: stretch; }
  .home-map { flex: none; height: 56vh; }
  .home-map .mastery-map svg { height: 100%; width: auto; }
  .home-card { flex: none; padding-top: 0; }
}

/* home card: no background, centered vertically, close to the map */
.home { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s3); align-items: stretch; }
.home-card { padding-top: 0; display: flex; align-items: center; }
.home-card .pc, .home-card .pc.compact { background: none; border: none; box-shadow: none; width: 100%; max-width: 520px; }
.home-card .pc-hero, .home-card .hear-bar { background: none; }
.home-card .pc-hero { padding: 0 var(--s5) var(--s4); text-align: left; }
.home-card .pc-name { text-align: left; }
.home-card .pc-state { text-shadow: none; }
.home-card .pc-cap { text-shadow: none; }
.home-card .hear-bar:active { background: rgba(255,255,255,.06); }
@media (orientation: portrait), (max-width: 860px) {
  .home-card { display: block; }
  .home-card .pc { max-width: none; }
}
@media (orientation: landscape) and (min-width: 861px) {
  .home-map .mastery-map { place-items: center end; padding-right: var(--s5); }
}

/* home info: names large and centered, pronunciation centered under each */
.hi { width: 100%; max-width: 600px; display: flex; flex-direction: column; gap: var(--s6); container-type: inline-size; }
.hi-pair { display: flex; flex-direction: column; align-items: center; gap: var(--s3); text-align: center; }
.hi-name { white-space: normal; text-wrap: balance; overflow-wrap: normal; font-size: min(96px, calc(100cqi / 9)); font-weight: 800; line-height: 1.05; letter-spacing: .03em; color: #fff; }
.hi-name.cap { white-space: nowrap; font-size: min(60px, calc(100cqi / 14.5)); }
.hi-name .star { font-size: .55em; margin-right: .3em; vertical-align: .2em; }
.hi .chips { justify-content: center; }
.hi .syl { font-size: var(--t-control); padding: 6px 14px; background: rgba(15, 12, 36, .55); border-color: rgba(255,255,255,.18); }
.hi .syl.stress { background: rgba(15, 12, 36, .7); border-color: rgba(63, 216, 240, .7); }
.hi-rows { border-top: 1px solid rgba(255,255,255,.12); }
.hi-rows .fp-row { padding-left: 0; padding-right: 0; }
.hi .hear-bar { background: none; padding: 0; border-top: 1px solid rgba(255,255,255,.12); margin-top: calc(var(--s5) * -1); }

/* ---------- One screen, three tabs ---------- */
.tabs { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--glass); border: 1px solid var(--edge); }
.tab { min-height: 52px; padding: 0 var(--s5); border: none; border-radius: 999px; background: transparent; color: var(--ink-soft);
  font-size: var(--t-control); font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .2s, color .2s; }
.tab.on { background: linear-gradient(180deg, #8d72ff, #6a48f5); color: #fff; box-shadow: 0 6px 18px rgba(108, 76, 255, .4); }
.tab:not(.on):active { background: var(--glass-2); }

.shell { flex: 1; min-height: 0; position: relative; display: grid; grid-template-columns: var(--mw, 380px) var(--pw, 600px);
  justify-content: center; column-gap: 32px; }
.shell-map { position: relative; width: var(--mw, 380px); height: var(--mh, 100%); align-self: center; }
.shell-map > svg, .shell-map .quiz-map, .shell-map .quiz-map svg { display: block; width: 100%; height: 100%; }
.shell-map .hint { position: absolute; top: 0; left: 0; margin: 0; font-size: var(--t-small); color: var(--ink-soft); white-space: nowrap; }
.shell-panel { width: var(--pw, 600px); min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: var(--s5); }
.shell-leads { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }

/* every state name the same size (set by layout()) */
.hi { max-width: none; gap: var(--s5); }
.hi-name { font-size: var(--hn, 96px) !important; white-space: normal !important; text-wrap: balance; letter-spacing: 0 !important; line-height: 1.02; }
.hi-name.cap { font-size: calc(var(--hn, 96px) * .62) !important; white-space: nowrap !important; }

/* practice panel */
.pp { display: flex; flex-direction: column; gap: var(--s5); }
.pp.enter { animation: cardIn .4s var(--ease) both; }
.pp .prompt h3 { font-size: var(--t-head); }
.pp .grades .btn { min-height: var(--tap-big); }

/* quiz panel */
.mode-quiz .shell-panel { justify-content: stretch; gap: var(--s3); }
.qbar { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 56px; }
.qbar-btns { display: flex; gap: var(--s2); }
.mode-quiz .quiz-col { flex: 1; min-height: 0; }
.mode-quiz .quiz-map { overflow: hidden; border-radius: 16px; }

@media (orientation: portrait) {
  .shell { grid-template-columns: var(--pw, 100%); grid-template-rows: var(--mh) auto; row-gap: var(--s4); overflow-y: auto; }
  .shell-map { justify-self: center; }
  .home-nav { flex-wrap: wrap; justify-content: flex-end; }
}

/* =========== Direction B: The Poster =========== */
@property --wc { syntax: "<color>"; inherits: true; initial-value: #8b5cf6; }
@property --wd { syntax: "<color>"; inherits: true; initial-value: #241056; }
:root { transition: --wc .7s var(--ease), --wd .7s var(--ease); }
body { background: var(--wd); }
.sky { background:
    radial-gradient(70% 60% at 24% 46%, color-mix(in srgb, var(--wc) 55%, transparent) 0%, transparent 70%),
    radial-gradient(90% 80% at 85% 110%, color-mix(in srgb, var(--wc) 30%, transparent) 0%, transparent 60%),
    linear-gradient(165deg, color-mix(in srgb, var(--wd) 80%, #000) 0%, var(--wd) 45%, color-mix(in srgb, var(--wd) 60%, #000) 100%); }
.sky i { display: none; }
/* fine grain so the color feels printed */
.sky::after { content: ""; position: absolute; inset: 0; opacity: .18; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.tab.on { background: #fff; color: #17142e; box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.tabs, .chip { background: rgba(0,0,0,.22); border-color: rgba(255,255,255,.14); }

.state-fill { fill: rgba(255,255,255,.07); stroke: rgba(255,255,255,.5); }
.lifted { animation: liftIn .55s var(--spring) both; transform-box: fill-box; transform-origin: center; pointer-events: none; }
@keyframes liftIn { from { transform: translateY(10px) scale(.96); opacity: .4; } }

.mode-tell .shell-panel { position: relative; }
.poster { position: relative; height: 100%; display: flex; align-items: center; }
.poster-shape { position: absolute; right: -14%; top: 50%; width: 92%; height: 92%; transform: translateY(-50%) rotate(-7deg);
  z-index: 0; pointer-events: none; animation: shapeIn .8s var(--ease) both; }
@keyframes shapeIn { from { opacity: 0; transform: translateY(-46%) rotate(-12deg) scale(.9); } }
.poster-info { position: relative; z-index: 1; align-items: flex-start; }
.poster-info .hi-name { text-align: left; text-shadow: 0 6px 30px rgba(0,0,0,.35); }
.poster-info .w { display: inline-block; animation: wordUp .5s var(--ease) both; animation-delay: calc(var(--i) * 70ms); }
@keyframes wordUp { from { opacity: 0; transform: translateY(28px); } }
.cap-pill { display: inline-flex; align-items: center; gap: .35em; padding: .18em .7em .22em; border-radius: 999px;
  background: var(--c); color: var(--on); font-weight: 800; font-size: calc(var(--hn, 96px) * .52); line-height: 1.15;
  box-shadow: 0 14px 40px color-mix(in srgb, var(--c) 45%, transparent), inset 0 2px 0 rgba(255,255,255,.35);
  animation: wordUp .5s var(--ease) .14s both; }
.cap-pill .star { font-size: .6em; }
.mode-tell .hi-pair, .poster-info { gap: var(--s5); }

/* =========== B2: motion lab =========== */
.mask { display: inline-block; vertical-align: bottom; }
.flood { position: fixed; inset: 0; z-index: 0; pointer-events: none; will-change: clip-path; }
.tap-ring { position: fixed; z-index: 3; pointer-events: none; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.85); animation: tapRing .6s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes tapRing { to { transform: scale(5); opacity: 0; } }
.fly-clone { position: fixed; z-index: 0; pointer-events: none; transform-origin: 0 0; filter: drop-shadow(0 18px 24px rgba(0,0,0,.45)); }
.fly-clone svg { display: block; width: 100%; height: 100%; }

/* picker: bottom right, out of the way of the names */
.mpick { position: fixed; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 20; display: flex; align-items: center; gap: 6px;
  padding: 6px; border-radius: 999px; background: rgba(10,8,24,.62); border: 1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: opacity .2s; }
.mpick.off { opacity: 0; pointer-events: none; }
.mp-arrow { width: 52px; height: 52px; border-radius: 50%; border: none; background: #facc15; color: #1b1230; font-size: 34px; font-weight: 800; line-height: 1; cursor: pointer; padding: 0 0 4px; }
.mp-label { min-width: 230px; max-width: 300px; display: flex; flex-direction: column; padding: 0 6px; line-height: 1.25; }
.mp-label b { font-size: 18px; color: #fff; }
.mp-label span { font-size: 14px; color: rgba(255,255,255,.7); }
.mp-replay { min-height: 52px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.1); color: #fff; font-size: 18px; font-weight: 600; cursor: pointer; }
.mp-arrow:active, .mp-replay:active { transform: scale(.94); }

/* 1 Fly out: the copy does the travelling, so the big shape doesn't run its own entrance */
body[data-motion="fly"] .poster-shape, body[data-motion="all"] .poster-shape { animation: none; }

/* 3 Sticker slap: name rises out of a slot, capital tag slaps down, shape spins in, one shine */
body[data-motion="slap"] .mask, body[data-motion="all"] .mask { overflow: hidden; padding: 0 .04em .14em; margin-bottom: -.14em; }
body[data-motion="slap"] .w, body[data-motion="all"] .w { animation: slotUp .55s cubic-bezier(.2,.9,.2,1) both; animation-delay: calc(var(--i) * 60ms); }
@keyframes slotUp { from { transform: translateY(108%); } }
body[data-motion="slap"] .cap-pill, body[data-motion="all"] .cap-pill { position: relative; overflow: hidden; transform: rotate(-2deg);
  animation: slap .46s cubic-bezier(.2,.9,.3,1.25) .2s both; }
@keyframes slap { 0% { opacity: 0; transform: scale(1.4) rotate(-9deg); } 55% { opacity: 1; transform: scale(.94) rotate(-1deg); } 100% { transform: scale(1) rotate(-2deg); } }
body[data-motion="slap"] .cap-pill::after, body[data-motion="all"] .cap-pill::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.55) 48%, transparent 66%); transform: translateX(-110%);
  animation: shine .7s ease-out .62s forwards; }
@keyframes shine { to { transform: translateX(110%); } }
body[data-motion="slap"] .poster-shape { animation: spinIn .8s cubic-bezier(.2,.9,.25,1) both; }
@keyframes spinIn { from { opacity: 0; transform: translateY(-50%) rotate(-34deg) scale(.6); } }

/* 4 Card flip: the right side turns over like a trading card */
body[data-motion="flip"] .mode-tell .shell-panel { perspective: 1600px; }
body[data-motion="flip"] .poster { transform-origin: 0% 50%; animation: cardTurn .6s cubic-bezier(.2,.85,.25,1) both; backface-visibility: hidden; }
@keyframes cardTurn { from { transform: rotateY(-95deg); opacity: .2; } 60% { opacity: 1; } }
body[data-motion="flip"] .w, body[data-motion="flip"] .cap-pill, body[data-motion="flip"] .poster-shape { animation: none; }

@media (prefers-reduced-motion: reduce) { .fly-clone, .flood, .tap-ring { display: none; } }

/* ---------- state flag: drops onto the capital, then waves ---------- */
/* the flag sits on top of the names when they overlap (Don's call) */
.sflag { position: absolute; z-index: 2; width: 0; height: 0; pointer-events: none; }
.sf-drop { position: absolute; left: 0; bottom: 0; transform-origin: 0 100%; animation: flagDrop 1.25s both; }
/* falls with gravity (stretching in flight), squashes hard on impact, springs up tall, then wobbles
   down to rest. The foot of the pole stays planted on the ground the whole time. */
@keyframes flagDrop {
  0% { transform: translateY(-110vh) scale(1, 1); animation-timing-function: cubic-bezier(.55, 0, .9, .45); }
  44% { transform: translateY(0) scale(.92, 1.14); animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
  54% { transform: translateY(0) scale(1.22, .66); animation-timing-function: cubic-bezier(.45, 0, .35, 1); }
  66% { transform: translateY(0) scale(.9, 1.16); animation-timing-function: cubic-bezier(.45, 0, .35, 1); }
  77% { transform: translateY(0) scale(1.08, .9); animation-timing-function: cubic-bezier(.45, 0, .35, 1); }
  87% { transform: translateY(0) scale(.97, 1.04); animation-timing-function: cubic-bezier(.45, 0, .35, 1); }
  100% { transform: translateY(0) scale(1, 1); } }
.sf-pole { position: absolute; left: -1.5px; bottom: 0; width: 3px; height: calc(var(--fh) * 2.1); border-radius: 2px;
  background: linear-gradient(90deg, #8a6a2a, #f3dc8a 45%, #b48a32); box-shadow: 1px 0 3px rgba(0,0,0,.35); }
.sf-ball { position: absolute; left: -4px; bottom: calc(var(--fh) * 2.1 - 2px); width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6c8, #e8b923 55%, #8a6512); }
/* the cloth's top-left corner sits at the top of the pole; the canvas has a margin for the folds */
.sf-cloth { position: absolute; left: 1px; bottom: calc(var(--fh) * 1.1); width: var(--fw); height: var(--fh); filter: drop-shadow(0 5px 6px rgba(0,0,0,.4)); }
.sf-gl { position: absolute; left: calc(var(--fw) / .86 * -.02); top: calc(var(--fh) / .77 * -.06); display: block; }
.sf-shadow { position: absolute; left: -11px; top: -4px; width: 22px; height: 8px; border-radius: 50%; background: rgba(0,0,0,.45);
  filter: blur(2px); animation: shadowIn .7s both; }
@keyframes shadowIn { 0% { transform: scale(.2); opacity: 0; } 44% { transform: scale(1); opacity: 1; } 54% { transform: scale(1.5, 1.2); } 66% { transform: scale(.9); } 77% { transform: scale(1.1); } 100% { transform: scale(1); } }
.sf-ring { position: absolute; left: -12px; top: -5px; width: 24px; height: 10px; border-radius: 50%; border: 2px solid #fff; opacity: 0;
  transform-origin: 50% 35%; animation: landRing .7s cubic-bezier(.2, .8, .2, 1) .55s; }
@keyframes landRing { from { opacity: .9; transform: scale(.4); } to { opacity: 0; transform: scale(3); } }
/* the base spot lies flat on the map: an ellipse, lit on top, a darker rim below */
.sf-dot { position: absolute; left: -7px; top: -3px; width: 14px; height: 6px; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 35%, #fff 0%, #f1ecff 55%, #b9aee0 100%);
  box-shadow: 0 1.5px 0 rgba(40, 20, 90, .55), 0 0 0 2.5px rgba(255,255,255,.22); }
/* rings pulse out from the base, lying flat on the ground. Perspective: each ring grows more toward
   the viewer than away (origin near its back edge), its back is thinner and partly hidden, its front
   thicker and brighter, so the back edges bunch together and the front edges spread out. */
.sf-pulse { position: absolute; left: -7px; top: -3px; width: 14px; height: 6px; border-radius: 50%;
  border: 1.6px solid rgba(255,255,255,.95); border-top-width: .8px; opacity: 0; transform-origin: 50% 30%;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.3) 0%, rgba(0,0,0,.55) 40%, #000 75%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.3) 0%, rgba(0,0,0,.55) 40%, #000 75%);
  animation: basePulse 4.2s cubic-bezier(.12, .5, .3, 1) infinite; }
.sf-pulse:nth-child(1) { animation-delay: 1s; }
.sf-pulse:nth-child(2) { animation-delay: 2.4s; }
.sf-pulse:nth-child(3) { animation-delay: 3.8s; }
@keyframes basePulse { 0% { opacity: .8; transform: scale(1); } 100% { opacity: 0; transform: scale(5.4); } }

/* =========== Poster look on Practice and Take the Quiz =========== */
/* buttons: white pill like the active tab; secondary = dark glass that sits on any state color */
.btn { background: rgba(0,0,0,.24); border-color: rgba(255,255,255,.18); }
.btn.primary { background: #fff; color: #17142e; box-shadow: 0 12px 32px rgba(0,0,0,.32), inset 0 -3px 0 rgba(23,20,46,.12); }
.icon-btn { background: rgba(0,0,0,.24); border-color: rgba(255,255,255,.18); }
.pp .prompt h3 { font-size: 34px; font-weight: 800; line-height: 1.15; text-shadow: 0 4px 20px rgba(0,0,0,.3); }
.pp .hook { color: rgba(255,255,255,.75); }
.grades .btn { background: rgba(0,0,0,.28); border: 1.5px solid rgba(255,255,255,.18) !important; }
.grades .btn small { color: rgba(255,255,255,.7); }
.g-mid { border-color: rgba(251,191,36,.7) !important; }
.g-yes { background: #fff !important; color: #17142e; border-color: #fff !important; }
.g-yes small { color: rgba(23,20,46,.65) !important; }

/* practice reveal: the Tell Me poster, sized to leave room for the grade buttons */
.pp-poster { height: min(52vh, 440px); }
.pp-poster .poster-shape { width: 80%; height: 100%; right: -10%; }

/* spelling: keys and the typed box in dark glass, the go key white */
.key { background: rgba(0,0,0,.26); border-color: rgba(255,255,255,.16); box-shadow: 0 3px 0 rgba(0,0,0,.35); }
.key:active, .key.hit { background: rgba(255,255,255,.28); }
.key.go { background: #fff; color: #17142e; }
.key.hint { background: rgba(0,0,0,.26); border-color: rgba(255,255,255,.55); }
.typed { background: rgba(0,0,0,.3); border-color: rgba(255,255,255,.2); }

/* quiz: lines and the focused box in white; the state being answered glows in its puzzle color */
.qstate { fill: rgba(255,255,255,.07); stroke: rgba(255,255,255,.5); transition: fill .45s, stroke .3s; }
.qstate.on { stroke: #fff; stroke-width: 2.4px; filter: drop-shadow(0 6px 10px rgba(0,0,0,.45)); }
.qin:focus { border-bottom-color: #fff; background: rgba(255,255,255,.14); }
.qrow.on { background: rgba(255,255,255,.07); }
.qrow.hov .qin, .qrow.hov .qres { border-bottom-color: #fff; background: rgba(255,255,255,.08); }
.qhead { color: rgba(255,255,255,.65); }
.score b { color: #fff; }

/* per-state nudges for the big poster shape (the flag follows, since it's placed from the shape's capital).
   Uses the separate "translate" property so it doesn't fight the shape's transform animations. */
.poster-shape[data-code="PA"] { translate: -100px 15px; }
.poster-shape[data-code="MA"] { translate: -30px -30px; }