:root{--ink:#26402e;--page:#F1F8EE;--green:#4d9a40;--leaf:#3f8f4e;--sun:#F2B705;--sky:#46b3d6;--muted:#6f8a72;--card:#fff;--line:#dbe7d6;--ok:#2Fae60;--bad:#E0584A}
  *{box-sizing:border-box;margin:0;padding:0}
  body{font-family:'Atkinson Hyperlegible',sans-serif;background:var(--page);color:var(--ink);line-height:1.55}
  .jp{font-family:'Zen Kaku Gothic New',sans-serif}
  button{font-family:inherit;cursor:pointer}
  a{color:inherit}
  :focus-visible{outline:3px solid var(--green);outline-offset:2px;border-radius:8px}

  .topbar{position:sticky;top:0;z-index:20;background:#fff;display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--line)}
  .topbar .x{color:var(--muted);font-weight:700;font-size:20px;text-decoration:none;flex-shrink:0}
  .pbar{flex:1;height:12px;background:#e3ede0;border-radius:999px;overflow:hidden}
  .pbar>i{display:block;height:100%;width:0;background:var(--green);border-radius:999px;transition:width .35s ease}

  main{max-width:620px;margin:0 auto;padding:22px 16px 60px;min-height:70vh}
  .screen{animation:fade .25s ease}
  @keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  .stepname{display:inline-block;background:#eaf6e6;color:var(--leaf);font-weight:700;font-size:13px;border-radius:999px;padding:5px 14px;margin:0 auto 16px;text-align:center}
  .center{text-align:center}

  /* goal */
  .goal{text-align:center;padding:24px 10px}
  .goal .em{font-size:64px}
  .goal .small{color:var(--muted);font-weight:700;letter-spacing:.1em;font-size:13px;margin-top:8px}
  .goal h1{font-family:'Fredoka',sans-serif;font-weight:700;font-size:clamp(26px,7vw,36px);margin:8px 0;line-height:1.3}
  .goal .en{color:var(--muted);font-size:15px}
  .btn-primary{background:var(--green);color:#fff;border:none;border-radius:999px;padding:15px 40px;font-size:18px;font-weight:700;font-family:'Fredoka',sans-serif;box-shadow:0 8px 18px rgba(77,154,64,.35);margin-top:26px}
  .btn-primary:hover{filter:brightness(1.05)}

  /* flip cards */
  .subhead{font-family:'Fredoka',sans-serif;font-weight:600;color:var(--leaf);font-size:16px;text-align:center;margin:22px 0 10px}
  .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
  .flip{background:transparent;border:none;padding:0;perspective:900px;height:160px}
  .flip .inner{position:relative;width:100%;height:100%;transition:transform .5s;transform-style:preserve-3d}
  .flip.flipped .inner{transform:rotateY(180deg)}
  .flip .face{position:absolute;inset:0;backface-visibility:hidden;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px;box-shadow:0 5px 12px rgba(46,70,51,.12)}
  .flip .front{background:#fff;border:2px solid var(--line)}
  .flip .front .emo{font-size:46px}
  .flip .front .w{font-family:'Fredoka',sans-serif;font-weight:600;font-size:19px;margin-top:6px}
  .flip .front .tap{font-size:11px;color:var(--muted);margin-top:3px}
  .flip .back{background:var(--leaf);color:#fff;transform:rotateY(180deg);text-align:center;gap:8px}
  .flip .back .jpw{font-size:22px;font-weight:700}
  .flip .back .listen{background:rgba(255,255,255,.22);border:none;color:#fff;border-radius:999px;padding:7px 14px;font-weight:700;font-size:14px}
  .flip.sent{height:140px}
  .flip.sent .front .w{font-size:17px;padding:0 6px}
  .flip.sent .back .jpw{font-size:18px;padding:0 8px}

  .nav-next{display:block;margin:26px auto 0;background:var(--green);color:#fff;border:none;border-radius:999px;padding:13px 30px;font-weight:700;font-size:16px}
  .hint{text-align:center;color:var(--muted);font-size:14px;margin-bottom:16px}

  /* matching */
  .match{display:flex;gap:14px}
  .match .col{flex:1;display:flex;flex-direction:column;gap:10px}
  .mchip{background:#fff;border:2px solid var(--line);border-radius:14px;padding:14px 10px;font-weight:700;font-size:17px;text-align:center;transition:all .12s}
  .mchip.sel{border-color:var(--sky);background:#e7f6fb}
  .mchip.matched{border-color:var(--ok);background:#e8f8ee;color:var(--ok);opacity:.7;cursor:default}
  .mchip.bad{border-color:var(--bad);background:#fdeceb;animation:shake .3s}
  @keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

  /* ordering */
  .answer-row{min-height:58px;border:2px dashed var(--line);border-radius:14px;padding:10px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;margin-bottom:16px;background:#fff}
  .answer-row.right{border-color:var(--ok);background:#e8f8ee;border-style:solid}
  .answer-row.wrong{border-color:var(--bad);background:#fdeceb;border-style:solid}
  .bank{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
  .tile{background:#fff;border:2px solid var(--line);border-radius:12px;padding:11px 15px;font-weight:700;font-size:17px}
  .tile:hover{border-color:var(--green)}
  .tile.used{opacity:.3;pointer-events:none}
  .order-q{text-align:center;color:var(--muted);font-size:14px;margin-bottom:10px}

  /* reading (input) */
  .read p{font-size:19px;line-height:1.95}
  .read .word{cursor:pointer;border-radius:5px;padding:0 1px}
  .read .word:hover{background:#fff3c4}
  .read .word.speaking{background:var(--sun);color:#fff}
  .read .tgt{font-weight:700;background:#fff3c4;border-radius:5px;padding:0 3px}
  .listen-btn{background:var(--sky);color:#fff;border:none;border-radius:999px;padding:13px 24px;font-weight:700;font-size:16px;display:block;margin:8px auto 18px}
  .box{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:0 6px 16px rgba(46,70,51,.08)}
  .qq{font-weight:700;font-size:17px;margin:18px 0 8px;text-align:center}
  .opt{display:block;width:100%;text-align:left;background:#fff;border:2px solid var(--line);border-radius:12px;padding:13px 16px;margin:8px 0;font-size:16px;font-weight:700}
  .opt:hover{border-color:var(--green)}
  .opt.right{background:#e8f8ee;border-color:var(--ok)}
  .opt.wrong{background:#fdeceb;border-color:var(--bad)}
  .opt.reveal{border-color:var(--ok);box-shadow:0 0 0 3px rgba(47,174,96,.25)}
  .opt[disabled]{cursor:default}

  /* task (your turn) */
  .task-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 18px;box-shadow:0 6px 16px rgba(46,70,51,.08);text-align:center}
  .task-card .prompt-jp{font-size:22px;font-weight:700;margin-bottom:4px}
  .task-card .prompt-note{color:var(--muted);font-size:14px;margin-bottom:16px}
  .task-card .say{background:var(--sun);color:#5b4500;border:none;border-radius:999px;padding:13px 22px;font-weight:700;font-size:16px}
  .task-card .model{margin-top:16px;font-size:21px;font-weight:700;color:var(--leaf);display:none}
  .task-card .model.show{display:block;animation:fade .25s ease}
  .task-card .listen2{background:rgba(70,179,214,.16);border:none;color:var(--sky);border-radius:999px;padding:8px 16px;font-weight:700;font-size:14px;margin-top:8px}
  .task-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}
  .ghost{background:#fff;border:2px solid var(--line);border-radius:999px;padding:11px 20px;font-weight:700;font-size:15px;color:var(--ink)}

  /* feedback overlay */
  #fx{position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;pointer-events:none}
  #fx.show{display:flex}
  #fx .badge{width:120px;height:120px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:70px;color:#fff;animation:pop .3s ease}
  #fx .badge.ok{background:var(--ok)}
  #fx .badge.bad{background:var(--bad)}
  @keyframes pop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}

  /* results */
  .results{text-align:center;padding:14px 6px}
  .results .em{font-size:60px}
  .results h2{font-family:'Fredoka',sans-serif;font-weight:700;font-size:28px;margin:6px 0}
  .stars{font-size:54px;letter-spacing:6px;margin:10px 0}
  .stars .off{opacity:.22}
  .results .pctline{color:var(--muted);font-size:16px}
  .results .msg{margin:14px 0 4px;font-size:17px;font-weight:700}
  .results .play{background:var(--sky);color:#fff;border:none;border-radius:999px;padding:14px 26px;font-weight:700;font-size:16px;font-family:'Fredoka',sans-serif;margin-top:18px;display:inline-block;text-decoration:none}
  .results .later{display:block;margin:14px auto 0;color:var(--muted);font-size:15px;font-weight:700;background:none;border:none;text-decoration:underline}
  footer{text-align:center;color:var(--muted);font-size:13px;padding:24px}

  /* general tappable words + dialogue bubbles */
  .word{cursor:pointer;border-radius:5px;padding:0 1px}
  .word:hover{background:#fff3c4}
  .word.speaking{background:var(--sun);color:#fff}
  .tgt{font-weight:700;background:#fff3c4;border-radius:5px;padding:0 3px}
  .dlg{display:flex;flex-direction:column;gap:10px}
  .dlg .turn{max-width:86%;padding:10px 14px;border-radius:16px;font-size:18px;line-height:1.7;box-shadow:0 3px 8px rgba(46,70,51,.08)}
  .dlg .turn .who{font-size:12px;font-weight:700;color:var(--muted);margin-bottom:3px}
  .dlg .turn.s0{align-self:flex-start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:5px}
  .dlg .turn.s1{align-self:flex-end;background:#eaf6e6;border:1px solid #cfe6c7;border-bottom-right-radius:5px}

  /* booking modal (shown after a checkpoint is passed) */
  .book-ov{position:fixed;inset:0;background:rgba(46,70,51,.55);display:flex;align-items:center;justify-content:center;padding:24px;z-index:9999;animation:bookfade .25s ease}
  @keyframes bookfade{from{opacity:0}to{opacity:1}}
  .book-card{background:#fff;border-radius:22px;max-width:380px;width:100%;padding:30px 26px 24px;text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.32);animation:bookpop .3s ease}
  @keyframes bookpop{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
  .book-em{font-size:54px;line-height:1}
  .book-card h3{font-family:'Fredoka','Zen Kaku Gothic New',sans-serif;color:#3f8f4e;font-size:23px;margin:8px 0 10px}
  .book-card p{font-family:'Zen Kaku Gothic New',sans-serif;color:#5f7a63;font-size:15px;line-height:1.75;margin-bottom:20px}
  .book-go{display:block;background:#4d9a40;color:#fff;font-weight:700;padding:15px;border-radius:14px;font-size:17px;font-family:'Fredoka','Zen Kaku Gothic New',sans-serif;text-decoration:none}
  .book-go:hover{background:#43883a}
  .book-later{display:block;width:100%;background:none;border:none;color:#9bb09e;font-size:14px;padding:12px 8px 2px;cursor:pointer;font-family:'Zen Kaku Gothic New',sans-serif}
</style>

/* ================================================================
   LSN-V2 DESIGN LAYER — lesson design unification (tune 4 §5,
   Drew-ruled, creative freedom / farm-immersion precedent).
   Scoped under body.lsn-v2 (added by the engine on SPEC:2 pages) so
   the frozen v1 rendering paths are untouched.

   THE LANGUAGE — "the atelier desk": LessonDeck's washi/atelier
   vocabulary (cream paper, kraft hairlines, deep leaf green, hanko
   warmth) IS the reference grade alongside the island and farm, so
   the unification extends ITS language to every stage instead of
   inventing an eighth look. Decision log:
   docs/lesson-design-unification.md.
   - Ground: warm washi cream (was pale mint) — the island/farm floor.
   - ONE card anatomy: paper gradient + kraft border + inner hairline,
     every stage; stage identity = the chip header (emoji + label),
     never a wholesale color change.
   - ONE button language: primary action = deep leaf pill (the deck's
     こたえを見る); secondary = paper ghost; the sun-yellow .say and
     sky-blue .listen-btn are retired from v2 (sun stays a small-accent
     color, e.g. hanko/star moments — never a button fill).
   - ONE bubble language: paper tiles with kraft borders for tiles AND
     options; states: right = leaf tint, wrong = warm red tint (state
     colors are feedback semantics and stay).
   - The pink goes: no decorative pink/blue surfaces survive; the only
     warm-red left is the wrong-state tint, which is semantics.
   - Mastery gold is NEVER used here (GOLD LAW: box-6 mastery only).
   - prefers-reduced-motion: all layer motion collapses.
   ================================================================ */
body.lsn-v2{background:#FAF5EA}
.lsn-v2 .stepname{background:#FFFDF6;border:1px solid #DCCFB8;color:#2E6349;box-shadow:0 2px 0 rgba(53,47,44,.05)}
.lsn-v2 main .hint{color:#75685A}
.lsn-v2 .task-card{background:linear-gradient(180deg,#FFFEFA,#FBF7EC);border:1px solid #D8CCB6;border-radius:18px;box-shadow:0 1px 0 rgba(53,47,44,.08),0 10px 22px rgba(53,47,44,.08);position:relative}
.lsn-v2 .task-card:before{content:"";position:absolute;inset:10px;border:1px solid rgba(159,136,99,.26);border-radius:12px;pointer-events:none}
.lsn-v2 .task-card>*{position:relative}
.lsn-v2 .task-card .model{color:#2E6349}
.lsn-v2 .say,.lsn-v2 .nav-next,.lsn-v2 .btn-primary{background:linear-gradient(180deg,#3B7658,#2E6349);color:#fff;border:1px solid #285A42;border-radius:999px;box-shadow:0 3px 0 #214D38,0 8px 16px rgba(46,99,73,.16);font-weight:800;min-height:48px}
.lsn-v2 .say:active,.lsn-v2 .nav-next:active{transform:translateY(2px);box-shadow:0 1px 0 #214D38}
.lsn-v2 .ghost,.lsn-v2 .listen2,.lsn-v2 .listen-btn,.lsn-v2 .results .later{background:#FFFDF6;border:1.5px solid #CBBFA5;color:#2E6349;border-radius:999px;min-height:44px;font-weight:800;box-shadow:0 2px 0 rgba(53,47,44,.07);text-decoration:none}
.lsn-v2 .tile,.lsn-v2 .opt{background:#FFFDF6;border:1.5px solid #DCCFB8;border-radius:12px;color:var(--ink);box-shadow:0 2px 0 rgba(53,47,44,.05)}
.lsn-v2 .tile:hover,.lsn-v2 .opt:hover{border-color:#3F8F4E}
.lsn-v2 .opt.right,.lsn-v2 .tile.right{background:#EDF6E8;border-color:#3F8F4E}
.lsn-v2 .opt.wrong{background:#FBEFE9;border-color:#C96A50}
.lsn-v2 .answer-row{background:#FFFEF9;border-color:#DCCFB8}
.lsn-v2 .answer-row.right{background:#EDF6E8;border-color:#3F8F4E}
.lsn-v2 .answer-row.wrong{background:#FBEFE9;border-color:#C96A50}
.lsn-v2 .dlg .turn.s0{background:#FFFDF6;border:1px solid #DCCFB8}
.lsn-v2 .dlg .turn.s1{background:#EDF3E7;border:1px solid #CFE0C9}
.lsn-v2 .vn-row{background:#F5EFE1;border:1px solid #E2D6C0;border-radius:999px;padding:8px 14px;display:flex;align-items:center;gap:10px;margin-top:12px}
.lsn-v2 .vn-track{flex:1;height:8px;background:#E8DEC8;border-radius:999px;overflow:hidden}
.lsn-v2 .vn-fill{display:block;height:100%;width:0;background:#3F8F4E}
.lsn-v2 .ex-gloss{margin:3px 0 0;font-size:12px;color:#75685A;text-align:left;font-weight:700}
.lsn-v2 .dlg .ex-gloss{text-align:inherit}
.lsn-v2 .lsn-in{min-height:48px;border:2px solid #D6C7AD;border-radius:12px;padding:8px 12px;font:700 16px "Zen Maru Gothic","Hiragino Sans",sans-serif;background:#FFFDF6;color:var(--ink)}
.lsn-v2 .lsn-in:focus-visible{outline:3px solid #B45445;outline-offset:2px}
.lsn-v2 .prompt-jp{color:var(--ink)}
.lsn-v2 .results .play{background:linear-gradient(180deg,#3B7658,#2E6349);border:1px solid #285A42;box-shadow:0 3px 0 #214D38}
@media(prefers-reduced-motion:reduce){
  .lsn-v2 *,.lsn-v2 *:before,.lsn-v2 *:after{transition:none!important;animation:none!important}
  .lsn-v2 .say:active,.lsn-v2 .nav-next:active{transform:none}
}

/* ============================================================
   THE SPEAK STEP (founder ruling 2026-09-05) — engine-wide, both tracks.
   Lives HERE, not in a track skin, because there is one speak screen and the
   ruling is about that screen. The `.bz` surface re-colours these three
   variables and nothing else (business-beats.js CSS_V3).
   NO RED ANYWHERE IN THIS BLOCK — a learner who has not said it yet is shown
   what to say, not marked wrong. --bad must never appear below.
   ============================================================ */
.spk-target{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 8px;margin:14px 0 4px;
  font-size:17px;font-weight:700;line-height:1.5;min-height:26px}
/* the mask: a dot per letter, in the line's own colour at low weight, so the
   shape of the sentence is legible before a word of it is. */
.spk-target .sw{color:var(--speak-mask,#b9cdbb);letter-spacing:.06em;transition:color .12s,transform .12s}
.spk-target .sw.lit{color:var(--speak-lit,var(--leaf));letter-spacing:0;transform:translateY(-1px)}
.spk-miss{margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
.spk-miss .spk-say{font-size:13px;color:var(--muted);margin-bottom:6px}
.spk-miss .spk-line{font-size:19px;font-weight:700;line-height:1.45;color:var(--speak-lit,var(--leaf))}
.spk-miss .spk-acts{display:flex;gap:10px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.hint.ok{color:var(--ok)}
@media(prefers-reduced-motion:reduce){ .spk-target .sw{transition:none} .spk-target .sw.lit{transform:none} }

/* Hobby coastal presentation — 2026-09-11.
   Only authored Hobby lessons receive .hobby-coast. This layer changes no
   content, screen order, interaction, scoring or save contract. The existing
   island's cream/navy/sea palette replaces the older atelier presentation. */
body.hobby-coast{
  /* LESSON SHELL TOKENS (founder ruling 2026-09-16; outputs/app-completion/activation/shell-mock/tokens.json).
     Track identity is these values only; Hobby's are today's coast colours. */
  --lesson-band:#087c97;--lesson-band-deep:#16516a;--lesson-band-wash:#3b86b4;
  --lesson-paper:#fff9e9;--lesson-rim:#b9c2b3;--lesson-edge:#d8d6bf;--lesson-accent:#5dae4e;--lesson-ink:#192c43;
  --ink:var(--lesson-ink);--muted:#506875;--page:#edf4f3;--card:var(--lesson-paper);
  --line:#c3cbbb;--green:var(--lesson-band);--leaf:var(--lesson-band-deep);--sky:var(--lesson-band);
  --ok:#33764b;--bad:#b44939;--coast-paper:var(--lesson-paper);--coast-rim:var(--lesson-rim);
  --coast-edge:var(--lesson-edge);--coast-sea:var(--lesson-band);--coast-deep:var(--lesson-band-deep);
  --coast-font:'Atkinson Hyperlegible','Zen Kaku Gothic New',system-ui,sans-serif;
  --speak-mask:#718b91;--speak-lit:#33764b;
  background:linear-gradient(180deg,var(--lesson-band-wash) 0,var(--lesson-band-wash) 156px,#edf4f3 156px,#edf4f3 100%);
  background-attachment:fixed;color:var(--ink);font-family:var(--coast-font);
  min-height:100svh;line-height:1.6;
}
body.hobby-coast[data-track="business"]{
  --lesson-band:#355473;--lesson-band-deep:#253f5b;--lesson-band-wash:#355473;
  --lesson-paper:#fff7ea;--lesson-rim:#bead9c;--lesson-edge:#d9d2c6;--lesson-accent:#f6c65b;
}
/* TOEIC (Andrew's C4 and C2, carried by the 11 Oct 2026 21:15 move onto the one engine): Hobby's tokens throughout;
   terracotta #B8563C on the header wash and the step pill's ring only — never a button fill. */
body.hobby-coast[data-track="toeic"]{--lesson-band-wash:#B8563C}
body.hobby-coast[data-track="toeic"] .stepname{border-color:#B8563C;box-shadow:0 0 0 2px #B8563C}
body.hobby-coast[data-track="toeic"] footer .ets{display:block;margin-top:4px;font-size:11px;opacity:.8}
/* the gap-fill step: the taught sentence with its blank */
.hobby-coast .gap-sent{display:block;font-weight:600;line-height:1.7}
.hobby-coast .gap-blank{display:inline-block;min-width:4.5em;border-bottom:2px solid currentColor;margin:0 3px}
.hobby-coast .topbar{
  background:var(--coast-paper);color:var(--ink);border:1px solid var(--coast-rim);
  border-radius:17px;box-shadow:0 4px 0 rgba(20,54,71,.18);
  margin:calc(12px + env(safe-area-inset-top)) auto 0;
  width:calc(100% - 24px);max-width:596px;padding:7px 12px;gap:14px;
  top:calc(8px + env(safe-area-inset-top));
}
.hobby-coast .topbar .x{
  display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;
  border:1px solid var(--coast-rim);border-radius:12px;color:var(--ink);
  background:#fffdf5;box-shadow:0 2px 0 var(--coast-edge);font-size:19px;
}
.hobby-coast .pbar{height:12px;border:1px solid #b4c8c7;background:#dde9e5;box-shadow:inset 0 2px 2px #254d5710}
.hobby-coast .pbar>i{background:var(--coast-sea);box-shadow:inset 0 2px 0 #ffffff40}
.hobby-coast main{max-width:620px;padding:26px 18px 40px;min-height:calc(100svh - 154px)}
.hobby-coast .stepname{
  width:fit-content;max-width:100%;margin:0 auto 22px;padding:8px 20px;
  background:var(--coast-paper);color:var(--ink);border:1px solid var(--coast-rim);
  border-radius:13px;box-shadow:0 3px 0 #22566d35;font-size:15px;font-weight:700;
}
.hobby-coast :is(button,input,textarea){font-family:var(--coast-font)}
.hobby-coast :is(button,a,input,textarea,[tabindex]):focus-visible{
  outline:3px solid #096b96;outline-offset:4px;
}
.hobby-coast :is(.goal h1,.results h2,.subhead){font-family:var(--coast-font);color:var(--ink);letter-spacing:0;font-weight:700}
.hobby-coast .goal{
  margin-top:2px;padding:30px 22px 34px;background:var(--coast-paper);
  border:1px solid var(--coast-rim);border-radius:24px;
  box-shadow:0 6px 0 var(--coast-edge),0 16px 28px #204e6514;
}
.hobby-coast .goal h1{font-size:clamp(26px,6.6vw,34px);line-height:1.4;margin:16px 0 12px;text-wrap:balance}
.hobby-coast .goal .em{font-size:56px}
.hobby-coast .goal :is(.small,.en){color:var(--muted);font-size:15px}
.hobby-coast :is(.hint,.ldm-hint){font-size:14px;line-height:1.7;color:var(--muted)}
.hobby-coast .screen>.hint{background:#f5f9f5;border-radius:12px;padding:10px 14px;margin-bottom:16px}
.hobby-coast :is(.task-card,.box,.book-card){
  background:var(--coast-paper);border:1px solid var(--coast-rim);border-radius:22px;
  box-shadow:0 5px 0 var(--coast-edge),0 12px 22px #28475910;
}
.hobby-coast .task-card{padding:24px 20px}
.hobby-coast .task-card:before{border:0}
.hobby-coast .task-card :is(.model,.prompt-jp){color:var(--ink)}
.hobby-coast :is(.say,.nav-next,.btn-primary,.results .play,.book-go),
.hobby-coast .ld :is(.ld-reveal,.ld-tg-ok){
  background:var(--coast-sea);color:#fff;border:1px solid var(--coast-deep);
  border-radius:14px;box-shadow:inset 0 2px 0 #ffffff25,0 4px 0 var(--coast-deep);
  min-height:50px;font-family:var(--coast-font);font-weight:700;letter-spacing:0;
}
.hobby-coast :is(.say,.nav-next,.btn-primary,.results .play,.book-go):active,
.hobby-coast .ld :is(.ld-reveal,.ld-tg-ok):active{
  transform:translateY(2px);box-shadow:inset 0 1px 0 #ffffff25,0 2px 0 var(--coast-deep);
}
.hobby-coast :is(.ghost,.listen2,.listen-btn,.results .later),
.hobby-coast .ld :is(.ld-next,.ld-listen button){
  background:var(--coast-paper);color:var(--ink);border:1px solid var(--coast-rim);
  border-radius:14px;box-shadow:0 3px 0 var(--coast-edge);min-height:46px;
  font-family:var(--coast-font);font-weight:700;
}
.hobby-coast :is(.tile,.opt,.mchip),.hobby-coast .ldm .ldm-t{
  background:#fffdf4;color:var(--ink);border:1.5px solid var(--coast-rim);
  border-radius:14px;box-shadow:0 3px 0 var(--coast-edge);min-height:48px;
  font-family:var(--coast-font);font-size:17px;line-height:1.45;
}
.hobby-coast .ldm{gap:12px;max-width:480px;padding:0}
.hobby-coast .ldm .ldm-col{min-width:0;gap:13px}
.hobby-coast .ldm .ldm-t{overflow-wrap:anywhere;padding:13px 9px}
.hobby-coast .ldm .ldm-t.sel,.hobby-coast .mchip.sel{
  background:#e2f2f3;border-color:var(--coast-sea);box-shadow:0 3px 0 #88bbc3,0 0 0 2px #087c9718;
}
.hobby-coast :is(.opt.right,.tile.right,.mchip.matched),.hobby-coast .ldm .ldm-t.ok{
  background:#edf5e8;color:#285f3c;border-color:#75a681;box-shadow:0 3px 0 #bed2b6;
}
.hobby-coast :is(.opt.wrong,.mchip.bad),.hobby-coast .ldm .ldm-t.bad{
  background:#fbeee6;color:#933f31;border-color:#c77c63;box-shadow:0 3px 0 #e4c2b3;
}
.hobby-coast .opt.reveal{border-color:#75a681;box-shadow:0 0 0 3px #33764b25}
.hobby-coast .answer-row{background:#e3eeeb;border-color:#9fb6b5;box-shadow:inset 0 2px 4px #31565d0d;border-radius:16px;min-height:66px}
.hobby-coast .answer-row.right{background:#edf5e8;border-color:#75a681}
.hobby-coast .answer-row.wrong{background:#fbeee6;border-color:#c77c63}
.hobby-coast .dlg .turn{border-radius:17px;box-shadow:0 3px 0 #bbcbbb70}
.hobby-coast .dlg .turn.s0{background:var(--coast-paper);border:1px solid var(--coast-rim);border-bottom-left-radius:5px}
.hobby-coast .dlg .turn.s1{background:#e2f1ee;border:1px solid #a8c7c2;border-bottom-right-radius:5px}
.hobby-coast .dlg .turn .who{font-size:13px;color:var(--muted)}
.hobby-coast :is(.word:hover,.tgt,.read .tgt){background:#dbeeed;color:#16516a}
.hobby-coast :is(.word.speaking,.read .word.speaking){background:var(--coast-sea);color:#fff}
.hobby-coast .vn-row{background:#e4ede8;border-color:#bed1c7;border-radius:14px}
.hobby-coast .vn-track{background:#cbded9}.hobby-coast .vn-fill{background:var(--coast-sea)}
.hobby-coast .lsn-in,.hobby-coast .ld .ld-tg input{
  background:#fffdf4;border:2px solid #a4b7af;border-radius:13px;color:var(--ink);
  min-width:0;max-width:100%;min-height:50px;font:700 17px/1.4 var(--coast-font);
}
.hobby-coast :is(.ex-gloss,.task-card .prompt-note){color:var(--muted);font-size:14px}
.hobby-coast .ld,.hobby-coast .ld.ld-hobby{
  --ld-ink:var(--lesson-ink);--ld-back:var(--coast-paper);--ld-back-deep:var(--coast-rim);--ld-well:#e5efdf;
  --ld-ring:#cfddc4;--ld-accent2:var(--coast-deep);--ld-accent:var(--coast-sea);
  color:var(--ink);font-family:var(--coast-font);max-width:420px;padding:0 4px;margin:6px auto 0;
}
.hobby-coast .ld .ld-dots{gap:10px;margin:2px 0 22px}
.hobby-coast .ld .ld-dots:before{background:#c3d5d3}
.hobby-coast .ld .ld-dot{width:12px;height:12px;border-color:#9eb8ba;background:#f8fbf5;box-shadow:none}
.hobby-coast .ld .ld-dot.on{background:var(--coast-sea);border-color:var(--coast-sea);box-shadow:none}
.hobby-coast .ld .ld-dot.now{background:#fff9e9;border-color:var(--coast-sea);box-shadow:0 0 0 3px #087c9724}
.hobby-coast .ld .ld-cw{rotate:0deg}
.hobby-coast .ld :is(.ld-under,.ld-under2){border-radius:23px;border-color:var(--coast-rim);box-shadow:none;transform:translate(0,6px);background:#e5dfc7}
.hobby-coast .ld .ld-under2{transform:translate(0,3px);background:#f1e9d2}
.hobby-coast .ld .ld-face{
  background:var(--coast-paper);color:var(--ink);border:1px solid var(--coast-rim);
  border-radius:23px;box-shadow:0 5px 0 var(--coast-edge),0 16px 28px #244b6017;
  padding:45px 24px 30px;gap:20px;
}
.hobby-coast .ld .ld-front:before,.hobby-coast .ld .ld-back:after{
  inset:8px;border:1px solid #ffffffd9;border-radius:17px;
}
.hobby-coast .ld .ld-front:after{background:none}
.hobby-coast .ld :is(.ld-cast,.ld-curl,.ld-sw,.ld-sei,.ld-washi){display:none}
.hobby-coast .ld .ld-hanko{
  left:17px;top:16px;width:auto;height:auto;padding:4px 8px;border:1px solid #c0d2c9;
  border-radius:8px;background:#e8f0e5;color:#476458;font-size:11px;font-weight:700;
  letter-spacing:0;transform:none;box-shadow:none;mix-blend-mode:normal;
}
.hobby-coast .ld .ld-well{
  border-radius:28px;width:132px;height:120px;background:#e8f0e2;
  box-shadow:inset 0 2px 0 #fff,0 3px 0 #cddcc4;
}
.hobby-coast .ld .ld-well:before,.hobby-coast .ld .ld-well:after{display:none}
.hobby-coast .ld .ld-emo{font-size:64px;filter:none}
.hobby-coast .ld .ld-init{font-family:var(--coast-font);color:var(--coast-deep);letter-spacing:0;font-size:54px}
.hobby-coast .ld .ld-w{
  font-family:var(--coast-font);font-size:clamp(28px,7.7vw,38px);line-height:1.16;
  color:var(--ink);font-weight:700;letter-spacing:-.015em;text-shadow:none;overflow-wrap:anywhere;padding:0 8px;
}
.hobby-coast .ld .ld-jp{
  font-family:'Zen Kaku Gothic New',system-ui,sans-serif;font-size:clamp(25px,7vw,34px);
  color:var(--ink);line-height:1.5;letter-spacing:0;text-shadow:none;padding:0 8px;
}
.hobby-coast .ld .ld-ex{font-size:16px;background:#e8f1ec;border:1px solid #c6d6c9;color:var(--ink);box-shadow:none;max-width:100%}
.hobby-coast .ld .ld-reg button{background:#e5eeea;color:var(--ink);border-color:#b3c7bc;min-height:44px;font-size:14px}
.hobby-coast .ld .ld-reg button.on{background:var(--coast-sea);color:white}
.hobby-coast .ld :is(.ld-reveal,.ld-next){font-size:18px;letter-spacing:0;margin-top:20px;padding:12px 14px}
.hobby-coast .ld .ld-reveal:before{display:none}
.hobby-coast .ld :is(.ld-hint,.ld-tg-hint,.ld-tg-skip){color:var(--muted);font-family:var(--coast-font);font-size:14px;transform:none}
.hobby-coast .ld .ld-hint{background:transparent;border:0;line-height:1.6}
.hobby-coast .ld .ld-tg-skip{min-height:44px}
.hobby-coast .ld .ld-tg-hint.bad{color:var(--bad)}
.hobby-coast .ldm-cap{background:#edf5e8;border-color:#bed2b6;color:#285f3c;border-radius:14px;font-family:var(--coast-font);box-shadow:0 2px 0 #d0dfc5}
.hobby-coast .results{
  background:var(--coast-paper);border:1px solid var(--coast-rim);border-radius:23px;
  box-shadow:0 5px 0 var(--coast-edge);padding:28px 20px;
}
.hobby-coast .book-card :is(h3,p){font-family:var(--coast-font);color:var(--ink)}
.hobby-coast .book-later{font-family:var(--coast-font);color:var(--muted);min-height:44px}
.hobby-coast footer{font-size:12px;color:#506875;padding:20px 16px 24px}
@media(hover:hover){
  .hobby-coast :is(.tile,.opt,.mchip):not(:disabled):hover,.hobby-coast .ldm .ldm-t:not(.ok):hover{border-color:var(--coast-sea)}
  .hobby-coast :is(.btn-primary,.say,.nav-next):not(:disabled):hover{filter:brightness(1.05)}
}
@media(max-width:360px){
  .hobby-coast main{padding-inline:12px}
  .hobby-coast .task-card{padding:20px 14px}
  .hobby-coast .ldm{gap:9px}.hobby-coast .ldm .ldm-t{font-size:16px}
}
@media(max-height:700px){
  .hobby-coast main{padding-top:20px}.hobby-coast .stepname{margin-bottom:18px}
  .hobby-coast .ld .ld-stage{height:286px}.hobby-coast .ld .ld-face{gap:14px;padding:40px 18px 24px}
  .hobby-coast .ld .ld-well{width:104px;height:94px}.hobby-coast .ld .ld-emo{font-size:49px}
}
@media(prefers-reduced-motion:reduce){
  .hobby-coast *,.hobby-coast *:before,.hobby-coast *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .hobby-coast :is(.say,.nav-next,.btn-primary,.results .play,.book-go):active,
  .hobby-coast .ld :is(.ld-reveal,.ld-tg-ok):active{transform:none}
}
/* Beat the deck's injected focus selector without changing error feedback. */
.hobby-coast .ld :is(.ld-tg input,button,.ld-cw):focus-visible,
.hobby-coast .ldm .ldm-t:focus-visible,.hobby-coast .lsn-in:focus-visible{
  outline:3px solid #096b96;outline-offset:3px;
}

/* Shimago identity: the existing Bobo portrait stays attached to the header.
   It is decorative; lesson position comes from the authored lesson ID. */
body.hobby-coast{
  background:linear-gradient(180deg,#3285aa 0,#3285aa 188px,#eef4f2 188px,#eef4f2 100%);
  background-attachment:fixed;
}
body.hobby-coast[data-track="business"],body.hobby-coast[data-track="toeic"]{
  background:linear-gradient(180deg,var(--lesson-band-wash) 0,var(--lesson-band-wash) 188px,#eef4f2 188px,#eef4f2 100%);
}
.hobby-coast .topbar{
  display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:10px 13px;
  padding:11px 14px 12px;border-radius:20px;
  box-shadow:inset 0 2px 0 #fffef7,0 5px 0 #18597433,0 8px 18px #123f5910;
}
.hobby-coast .topbar .x{grid-column:1;grid-row:1;background:#fffcf2;border-radius:13px}
.hobby-coast .hobby-brand{display:flex;align-items:center;justify-content:center;gap:9px;min-width:0}
.hobby-coast .hobby-brand-portrait{
  flex:0 0 37px;width:37px;height:37px;border-radius:12px;border:1px solid #d7c3a0;
  background:#e1eee8 url('assets/characters/bobo-v2/bobo-bust.webp') center / contain no-repeat;
  box-shadow:0 2px 0 #d3ceb3;position:relative;
}
.hobby-coast .hobby-wordmark{
  color:var(--ink);font-size:14px;font-weight:700;letter-spacing:.15em;line-height:1.25;
}
.hobby-coast .hobby-wordmark small{
  display:block;font-size:12px;font-weight:400;letter-spacing:.025em;color:#476575;margin-top:3px;
}
.hobby-coast .hobby-location{
  font-size:12px;line-height:1.4;color:#476575;white-space:nowrap;padding:6px 8px;
  border:1px solid #d4d5c2;border-radius:9px;background:#f6f0df;font-variant-numeric:tabular-nums;
}
.hobby-coast .pbar{grid-column:1/-1;grid-row:2;height:9px;border-color:#b6cbc5;background:#dfe9e2}
.hobby-coast .pbar>i{box-shadow:inset 0 2px 0 #ffffff35}
.hobby-coast main{padding-top:23px;min-height:calc(100svh - 182px)}
.hobby-coast .stepname{
  border-radius:12px;padding:8px 19px;margin-bottom:22px;
  box-shadow:inset 0 1px 0 #fff,0 3px 0 #1c546e33;font-size:15px;
}
.hobby-coast :is(.task-card,.box,.goal,.results){
  border-color:#bfc7b5;box-shadow:inset 0 2px 0 #fffef8,0 5px 0 #d7d5bd,0 14px 28px #1b4b6110;
}
.hobby-coast .ld .ld-face{border-color:#bfc7b5;box-shadow:inset 0 2px 0 #fffef8,0 5px 0 #d7d5bd,0 14px 28px #1b4b6114}
.hobby-coast .ld .ld-front:before,.hobby-coast .ld .ld-back:after{
  border-color:#e6dec6;border-radius:17px;inset:10px;
}
.hobby-coast .ld .ld-front:after{
  content:'SHIMAGO';background:none;inset:auto 24px 19px auto;width:auto;height:auto;
  color:#50767e;opacity:.65;font:700 10px/1 var(--coast-font);letter-spacing:.18em;
}
.hobby-coast .ld .ld-hanko{
  top:20px;left:20px;padding:6px 9px;background:#f8ecdf;border:1px solid #d5aa91;
  color:#975840;border-radius:8px;letter-spacing:.06em;font-size:11px;line-height:1.2;
}
.hobby-coast .ld .ld-well{
  background:linear-gradient(155deg,#edf3df,#e0eddc);border:1px solid #d2dfc5;
  box-shadow:inset 0 2px 0 #fffaf0,0 3px 0 #cbd9c0;
}
.hobby-coast .ld .ld-dots{margin-bottom:23px}
.hobby-coast :is(.btn-primary,.say,.nav-next),.hobby-coast .ld :is(.ld-reveal,.ld-tg-ok){
  background:linear-gradient(180deg,#087f99,#08748e);border-color:#16516a;
  box-shadow:inset 0 2px 0 #ffffff25,0 4px 0 #16516a;
}
.hobby-coast :is(.tile,.opt),.hobby-coast .ldm .ldm-t{transition:background .14s,border-color .14s,box-shadow .14s,transform .14s}
.hobby-coast .tile:not(.used):active,.hobby-coast .ldm .ldm-t:not(.ok):active{transform:translateY(2px)}
.hobby-coast footer{color:#57717a;font-size:12px;letter-spacing:.025em}
@media(max-width:360px){
  .hobby-coast .topbar{gap:9px;padding-inline:11px;grid-template-columns:40px minmax(0,1fr) auto}
  .hobby-coast .topbar .x{min-width:40px;min-height:40px}
  .hobby-coast .hobby-brand{gap:7px}.hobby-coast .hobby-brand-portrait{width:31px;height:31px;flex-basis:31px}
  .hobby-coast .hobby-wordmark{font-size:13px;letter-spacing:.10em}
  .hobby-coast .hobby-wordmark small{font-size:12px;letter-spacing:0}
  .hobby-coast .hobby-location{padding:5px;font-size:12px}
}
@media(prefers-reduced-motion:reduce){
  .hobby-coast .tile:not(.used):active,.hobby-coast .ldm .ldm-t:not(.ok):active{transform:none}
}
/* Revealed phrases use the same quiet inset surface as the listening tray. */
.hobby-coast .task-card .model{
  background:#edf4ec;border:1px solid #b7cbbc;border-radius:14px;
  color:var(--ink);box-shadow:inset 0 1px 0 #fff;line-height:1.5;
}
body.hobby-coast .goal .em{
  border:1px solid #bacbbd;background:#fffdf4;box-shadow:0 3px 0 #d3ddc9;
}

/* Japanese learner polish: adult-friendly interface type and a small,
   data-derived stage marker. English practice remains the visual focus. */
body.hobby-coast{
  --coast-jp:'Zen Kaku Gothic New','Hiragino Sans','Yu Gothic',system-ui,sans-serif;
  line-break:strict;
}
.hobby-coast .stepname{
  padding:7px 16px 7px 8px;font-family:var(--coast-jp);font-size:16px;
  line-height:1.5;letter-spacing:.02em;
}
.hobby-coast .hobby-step-count{
  display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;
  min-width:51px;min-height:32px;margin-right:12px;padding:4px 8px;
  background:#dfede7;border:1px solid #c2d6cb;border-radius:8px;color:#225a61;
  font:700 14px/1.4 var(--coast-font);font-variant-numeric:tabular-nums;letter-spacing:.03em;
}
.hobby-coast .hobby-step-label{vertical-align:middle}
.hobby-coast .hobby-instruction-part{display:inline-block;max-width:100%}
body.hobby-coast :is(.hint,.ldm-hint,.order-q,.goal .small,.goal .en,.results .msg){
  font-family:var(--coast-jp);font-size:16px;line-height:1.75;font-weight:400;
  letter-spacing:.015em;overflow-wrap:anywhere;
}
body.hobby-coast main :is(.hint,.ldm-hint,.order-q){color:var(--muted)}
body.hobby-coast main .hint.ok{color:var(--ok)}
.hobby-coast .screen>.hint{
  margin:0 auto 20px;padding:11px 16px;max-width:40em;border:1px solid #e0e9e1;
  background:#f7faf6;border-radius:13px;text-wrap:pretty;
}
.hobby-coast .ldm-hint{margin:0 auto 20px;text-wrap:balance}
.hobby-coast .order-q{text-align:center;margin:0 auto 20px}
.hobby-coast .task-card .prompt-jp{
  font-family:var(--coast-jp);font-size:clamp(22px,5.6vw,26px);line-height:1.6;
  font-weight:700;letter-spacing:.01em;text-wrap:pretty;
}
.hobby-coast .task-card .prompt-note{margin:10px 0 18px;font-variant-numeric:tabular-nums}
.hobby-coast #pfTap{
  width:fit-content;margin:22px auto 2px;padding:8px 16px;
  border:1px dashed #a4bdb6;border-radius:10px;background:#f2f5ec;
}
.hobby-coast .ld .ld-hanko{
  font-family:var(--coast-jp);font-size:14px;font-weight:700;letter-spacing:.08em;
  padding:6px 10px;transform:none;
}
.hobby-coast .ld .ld-jp{font-family:var(--coast-jp);line-height:1.5;letter-spacing:.02em}
.hobby-coast .ld :is(.ld-reveal,.ld-next,.ld-listen button,.ld-tg-skip){
  font-family:var(--coast-jp);font-weight:700;
}
.hobby-coast .ld .ld-listen button{font-size:16px;min-height:48px}
.hobby-coast .ld :is(.ld-tg-hint,.ld-hint,.ld-tg-skip){
  font-family:var(--coast-jp);font-size:16px;line-height:1.6;font-weight:400;
}
.hobby-coast .ld .ld-tg-hint{margin-top:12px}
.hobby-coast .ld .ld-tg-skip{text-underline-offset:4px;margin-top:5px}
.hobby-coast .ld .ld-tg-ok{min-width:56px}
.hobby-coast :is(.tile,.opt,.ldm-t){line-height:1.5}
.hobby-coast .results .msg{max-width:26em;margin:20px auto}
@media(max-width:360px){
  .hobby-coast .stepname{margin-bottom:18px}
  .hobby-coast .screen>.hint{padding:10px 12px}
  .hobby-coast .ld .ld-tg{margin-top:16px}
}

/* GOAL SCREEN RETIRED (2026-09-16): the promise is one quiet line above step 1 */
.lesson-promise{margin:-6px auto 16px;max-width:520px;text-align:center;font-size:13.5px;line-height:1.6;color:var(--muted)}
.hobby-coast .lesson-promise{font-family:var(--coast-jp)}

/* THE STEP PILL STAYS IN VIEW (founder ruling 2026-09-22): sticky just under the sticky header on every step.
   --lesson-pill-top is measured by the engine's shell mount; the fallback fits the 390 header.
   mobile.css sets overflow-x:hidden on html AND body, which turns body into its own scroll container: on desktop
   engines the header then never sticks (the document scrolls), and where body becomes the scroller (the iPhone walk)
   the header sticks but the pill slides beneath it. overflow-x:clip still stops sideways scroll and creates no scroll
   container, so the header and the pill stick the same way in every engine. */
html:has(> body.hobby-coast),body.hobby-coast{overflow-x:clip}
.hobby-coast .stepname{position:sticky;top:var(--lesson-pill-top,112px);z-index:19}
/* NOTHING SLIDES UNDER THE HEADER CARD IN VIEW (founder findings 2026-09-23, 1). The header card is sticky; a screen taller
   than the phone (the end card with its miss list) scrolled up beneath it, and the party-popper circle showed around and
   under the card as if the two collided. The page's own top band now stands behind the stuck header — the body's background,
   inherited, so it is the same pixels as the band at rest — from the top edge to just above the step pill, above the lesson
   content and below the header (20) and the pill (19). Taps pass through; the ✓ badge and dialogs stay above it. */
body.hobby-coast::before{content:"";position:fixed;left:0;right:0;top:0;height:calc(var(--lesson-pill-top,112px) - 4px);
  z-index:18;pointer-events:none;background:inherit}
/* THE HEARD TRANSCRIPT (founder ruling 2026-09-22): what was heard (or typed), word by word against the target —
   matches green, misses grey. Never gold (mastery-only), never red (no penalty colour on the speak screen). */
/* もういちど見ておこう — THE END SCREEN'S MISS LIST (founder findings 2026-09-23, 6). Every miss from the graded steps
   (listening, build, recall, speech) with its right answer and ▶; a speech miss shows what was heard beside the target,
   matches green, misses grey. Japanese chrome; no red, and no gold (mastery-only). The body/two-class selectors outrank
   the Business stage's folded .bz * reset. */
body .lesson-misses{margin:18px auto 6px;max-width:460px;text-align:left;background:#fffdf7;border:1px solid var(--line,#dbe7d6);border-radius:16px;padding:14px 14px 6px}
.lesson-misses .lm-head{font-weight:700;font-size:17px;color:var(--ink,#26402e);margin:0 0 4px}
.lesson-misses .lm-item{padding:10px 0;border-top:1px solid #ece6d8}
.lesson-misses .lm-head+.lm-item{border-top:none}
.lesson-misses .lm-kind{font-size:11.5px;letter-spacing:.06em;color:var(--muted,#6f8a72);margin:0 0 2px}
.lesson-misses .lm-jp,.lesson-misses .lm-q{font-size:13.5px;color:var(--muted,#6f8a72);line-height:1.5;margin:0 0 4px}
.lesson-misses .lm-ans{display:flex;align-items:center;justify-content:space-between;gap:10px}
.lesson-misses .lm-en{font-weight:700;font-size:15.5px;color:#1f5f3d;line-height:1.45;overflow-wrap:anywhere}
.lesson-misses .lm-en b{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.lesson-misses .lm-play{flex:0 0 auto;min-width:44px;min-height:44px;border-radius:999px;border:1.5px solid var(--line,#c3cbbb);background:#fff;color:var(--ink,#26402e);font-size:15px;padding:0 14px;cursor:pointer}
.lesson-misses .lm-heard{margin:6px 0 0;font-size:14.5px;line-height:1.55}
.lesson-misses .lm-lbl{display:block;font-size:11.5px;letter-spacing:.04em;color:#7a857f;margin:0 0 2px}
.lesson-misses .hw{font-weight:700}
.lesson-misses .hw.hit{color:#33764b}
.lesson-misses .hw.miss{color:#8a938d}
.spk-heard{margin:12px auto 2px;text-align:center}
.spk-heard-lbl{font-size:12px;letter-spacing:.04em;color:#7a857f;margin-bottom:4px}
.spk-heard-words{font-size:18px;font-weight:700;line-height:1.55;word-break:break-word}
.spk-heard .hw.hit{color:#2E7D4F}
.spk-heard .hw.miss{color:#9AA39F}

/* Sam uses the same mochi citizen as the island; placement keeps its Bobo narrator. */
.vn-speaker-portrait{display:block;flex:0 0 68px;width:68px;height:68px;object-fit:contain;filter:drop-shadow(0 3px 2px #33482d18)}