/* ══════════════════════════════════════════════════════════════════════
   WRITING SCHOOL · design system
   Anime/cartoon delivery from SHAPE, not from a novelty typeface: heavy
   ink outlines, halftone screens, speech bubbles, bevelled panels. One
   family (Inter) throughout so weight carries the hierarchy and nothing
   ever competes for legibility. Code and answers use one mono face.
   ══════════════════════════════════════════════════════════════════ */

:root{
  --ink:#241a2e;
  --paper:#fffaf2;
  --card:#ffffff;
  --tint:#fdf2e6;
  --line:#e6d8ea;

  --rose:#e8467c;
  --sky:#3aa6e0;
  --sun:#f5b52a;
  --leaf:#5fb85f;
  --plum:#8a5cc4;
  --clay:#d9744a;

  --txt:#241a2e;
  --txt-2:#544364;
  --dim:#8a7a96;
  --ok:#2f8a4a;
  --ok-bg:#e8f6ec;
  --no:#c2384f;
  --no-bg:#fdeef0;

  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;

  /* ONE depth scale */
  --pop-0:2px 2px 0 var(--ink);
  --pop-1:4px 4px 0 var(--ink);
  --pop-2:7px 7px 0 var(--ink);
  --bevel:inset 3px 3px 0 rgba(255,255,255,.85), inset -3px -3px 0 rgba(36,26,46,.13);
  --bevel-sm:inset 2px 2px 0 rgba(255,255,255,.8), inset -2px -2px 0 rgba(36,26,46,.11);
  --bevel-in:inset 3px 3px 0 rgba(36,26,46,.24), inset -2px -2px 0 rgba(255,255,255,.6);

  --rail:1180px;
  --gut:20px;
  --radius:18px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font);background:var(--paper);color:var(--txt);
  font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(rgba(36,26,46,.055) 1px, transparent 1px);
  background-size:13px 13px;
}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--sky);outline-offset:2px;border-radius:5px}
.wrap{max-width:var(--rail);margin:0 auto;padding:0 var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h1,h2,h3,h4{margin:0;font-weight:900;letter-spacing:-.028em;line-height:1.12}

/* ══ NAV ═════════════════════════════════════════════════════════════ */
.nav{position:sticky;top:0;z-index:60;background:rgba(255,250,242,.95);
  backdrop-filter:blur(10px);border-bottom:3px solid var(--ink)}
.nav-in{display:flex;align-items:center;gap:14px;height:62px}
.brand{display:flex;align-items:center;gap:10px;flex:none}
.brand .mk{width:36px;height:36px;flex:none}
.brand .wm{font-weight:900;font-size:19px;letter-spacing:-.04em;white-space:nowrap}
.brand .wm i{font-style:normal;color:var(--rose)}
.nlinks{display:flex;gap:3px;margin-left:6px}
.nlinks a{padding:7px 12px;border-radius:9px;font-weight:800;font-size:13.5px;color:var(--txt-2);
  border:2px solid transparent;transition:.14s}
.nlinks a:hover{background:var(--tint);border-color:var(--line);color:var(--txt)}
.nlinks a.on{background:var(--sun);border-color:var(--ink);color:var(--ink);box-shadow:var(--pop-0)}
.nsearch{margin-left:auto;position:relative;max-width:250px;flex:1}
.nsearch input{width:100%;height:38px;padding:0 12px;border-radius:11px;border:2.5px solid var(--line);
  background:var(--card);font-weight:600;font-size:14px;color:var(--txt);box-shadow:var(--bevel-sm)}
.nsearch input:focus{border-color:var(--sky);outline:none}
.npill{display:inline-flex;align-items:center;gap:7px;flex:none;padding:6px 12px;border-radius:999px;
  border:2.5px solid var(--ink);background:var(--card);font-weight:900;font-size:12.5px;
  box-shadow:var(--bevel-sm),var(--pop-0);white-space:nowrap}
.npill .lv{background:var(--ink);color:var(--sun);border-radius:6px;padding:1px 7px;font-size:11px}
.npill.streak{background:var(--sun)}

/* ══ HERO ════════════════════════════════════════════════════════════ */
.hero{padding:44px 0 30px;text-align:center;position:relative}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:900;
  letter-spacing:.16em;text-transform:uppercase;background:var(--sun);border:3px solid var(--ink);
  border-radius:999px;padding:5px 15px;box-shadow:var(--bevel-sm),var(--pop-0);margin-bottom:16px}
.eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--leaf);border:1.5px solid var(--ink)}
.hero h1{font-size:clamp(34px,6vw,64px);letter-spacing:-.038em;margin:0 0 16px}
.hero h1 em{font-style:normal;color:var(--rose)}
.hero .sub{font-size:clamp(15px,2vw,19px);color:var(--txt-2);max-width:60ch;margin:0 auto 24px;font-weight:500}
.hero .sub b{color:var(--txt);box-shadow:inset 0 -.5em 0 rgba(245,181,42,.45)}
.ctas{display:flex;gap:11px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;border:3px solid var(--ink);border-radius:13px;
  padding:11px 22px;font-size:15px;font-weight:900;background:var(--card);
  box-shadow:var(--bevel),var(--pop-1);transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:var(--bevel),var(--pop-2)}
.btn:active{transform:translate(2px,2px);box-shadow:var(--bevel-in),var(--pop-0)}
.btn-go{background:var(--rose);color:#fff;box-shadow:var(--bevel-sm),var(--pop-1)}
.btn-alt{background:var(--sky);color:#fff;box-shadow:var(--bevel-sm),var(--pop-1)}
.btn-sun{background:var(--sun)}
.btn.sm{padding:8px 15px;font-size:13.5px;border-width:2.5px}

/* ══ CAST RAIL ═══════════════════════════════════════════════════════ */
.cast{padding:8px 0 4px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
/* drawn twice so translating exactly one set wraps seamlessly */
.cast-track{display:flex;gap:16px;width:max-content;padding-left:16px;
  animation:march var(--march,60s) linear infinite;will-change:transform}
.cast:hover .cast-track,.cast:focus-within .cast-track,.cast-track.held{animation-play-state:paused}
@keyframes march{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(0px - var(--advance,2000px)),0,0)}}
.face{flex:none;width:92px;text-align:center;cursor:pointer}
.face .ring{width:78px;height:78px;margin:0 auto;border-radius:50%;padding:3px;
  background:var(--rg,linear-gradient(135deg,var(--rose),var(--sun)));transition:transform .18s;
  transform:rotate(-2.5deg)}
.face:nth-child(even) .ring{transform:rotate(2.5deg)}
.face:hover .ring{transform:scale(1.12) rotate(0)}
.face .rin{width:100%;height:100%;border-radius:50%;background:var(--card);padding:2px;
  border:2.5px solid var(--ink);box-shadow:var(--bevel-sm);overflow:hidden}
.face .rin svg{width:100%;height:100%;border-radius:50%}
.face .nm{font-size:10.5px;font-weight:800;color:var(--txt-2);margin-top:6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.face .pc{font-size:10px;font-weight:900;color:var(--rose)}
.face.done .pc{color:var(--ok)}

/* ══ SECTIONS ════════════════════════════════════════════════════════ */
.sec{padding:34px 0 6px}
.kick{display:inline-block;font-size:10.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  background:var(--card);border:2.5px solid var(--ink);border-radius:7px;padding:2px 10px;
  box-shadow:var(--bevel-sm),var(--pop-0);margin-bottom:11px}
.sec h2{font-size:clamp(22px,3.4vw,34px);margin:0 0 8px}
.sec .lede{color:var(--txt-2);max-width:66ch;margin:0 0 20px;font-weight:500}

/* ══ STAT BAND ═══════════════════════════════════════════════════════ */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:20px 0 4px}
@media(max-width:680px){ .stats{grid-template-columns:repeat(2,1fr)} }
.stat{background:var(--card);border:3px solid var(--ink);border-radius:16px;padding:15px 12px;
  text-align:center;box-shadow:var(--bevel),var(--pop-1)}
.stat .v{font-size:32px;font-weight:900;letter-spacing:-.04em;line-height:1}
.stat:nth-child(1) .v{color:var(--rose)} .stat:nth-child(2) .v{color:var(--sky)}
.stat:nth-child(3) .v{color:var(--leaf)} .stat:nth-child(4) .v{color:var(--plum)}
.stat .k{font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--dim);margin-top:4px}

/* ══ LANE CARDS ══════════════════════════════════════════════════════ */
.lanes{display:grid;grid-template-columns:repeat(auto-fill,minmax(302px,1fr));gap:17px}
.lane{background:var(--card);border:3px solid var(--ink);border-radius:var(--radius);overflow:hidden;
  cursor:pointer;display:flex;flex-direction:column;text-align:left;width:100%;
  box-shadow:var(--bevel),var(--pop-1);transition:transform .16s,box-shadow .16s}
.lane:hover{transform:translate(-4px,-4px);box-shadow:var(--bevel),9px 9px 0 var(--ink)}
.lane:active{transform:translate(1px,1px);box-shadow:var(--bevel-in),var(--pop-0)}
/* scene(0) < halftone(1) < pill(2) */
.lane-top{position:relative;height:142px;border-bottom:3px solid var(--ink);overflow:hidden;isolation:isolate}
.lane-top .scene{position:absolute;inset:0;z-index:0}
.lane-top .scene svg{width:100%;height:100%}
.lane-top::after{content:'';position:absolute;inset:0;z-index:1;opacity:.13;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.95) 1.3px,transparent 1.3px);background-size:10px 10px}
.lane-top .pill{position:absolute;z-index:2;top:10px;right:11px;font-size:12px;font-weight:900;
  background:var(--card);border:2.5px solid var(--ink);border-radius:999px;padding:2px 11px;
  box-shadow:var(--pop-0)}
.lane-top .gl{position:absolute;z-index:2;left:11px;top:10px;font-size:22px;
  filter:drop-shadow(2px 2px 0 rgba(0,0,0,.3))}
.lane-b{padding:15px 16px 16px;display:flex;flex-direction:column;flex:1;gap:7px}
.lane-w{font-size:10.5px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--rose)}
.lane-n{font-size:20px;font-weight:900;letter-spacing:-.03em}
.lane-bl{font-size:13.5px;color:var(--txt-2);font-weight:500;line-height:1.5}
.lane-vs{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:800;color:var(--txt-2);
  margin-top:auto;padding-top:8px}
.lane-vs .mini{width:30px;height:30px;border-radius:50%;border:2.5px solid var(--ink);overflow:hidden;flex:none;
  box-shadow:var(--bevel-sm)}
.lane-vs .x{color:var(--rose);font-weight:900}
.lane-bar{height:9px;background:var(--tint);border:2.5px solid var(--ink);border-radius:6px;overflow:hidden;
  box-shadow:var(--bevel-in)}
.lane-bar>div{height:100%;background:linear-gradient(180deg,var(--leaf),#3f9440);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.4);transition:width .5s ease-out}

/* ══ DIFFICULTY ══════════════════════════════════════════════════════ */
.diff{display:inline-flex;align-items:center;gap:6px;flex:none;font-size:10px;font-weight:900;
  letter-spacing:.08em;text-transform:uppercase;border:2px solid var(--ink);border-radius:999px;
  padding:2px 9px;box-shadow:var(--bevel-sm);white-space:nowrap;cursor:help}
.diff .d{font-size:8.5px;letter-spacing:1px}
.diff-starter{background:#e8f6ec;color:#2f6d2b}
.diff-steady{background:#fff4d6;color:#8a5a12}
.diff-deep{background:#fbe2e2;color:#9a2f2f}

/* ══ EPISODE LIST ════════════════════════════════════════════════════ */
.eps{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:12px}
.ep{display:flex;gap:11px;align-items:flex-start;text-align:left;width:100%;
  background:var(--card);border:2.5px solid var(--ink);border-radius:13px;padding:11px 13px;cursor:pointer;
  box-shadow:var(--bevel-sm),var(--pop-0);transition:transform .12s,box-shadow .12s}
.ep:hover{transform:translate(-2px,-2px);box-shadow:var(--bevel-sm),var(--pop-1)}
.ep .no{font-size:13px;font-weight:900;color:var(--rose);flex:none;min-width:26px}
.ep .t{font-size:13.5px;font-weight:800;line-height:1.35;min-width:0}
.ep .dwrap{display:block;margin-top:6px}
.ep .st{margin-left:auto;flex:none;font-size:14px}
.ep.done{background:var(--ok-bg);border-color:var(--ok)}
.ep.done .no{color:var(--ok)}

/* ══ LESSON PAGE ═════════════════════════════════════════════════════ */
.lesson{max-width:790px;margin:0 auto}
.plate{position:relative;border:3px solid var(--ink);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--bevel),var(--pop-2);margin-bottom:22px;min-height:220px;display:flex;isolation:isolate}
.plate .scene{position:absolute;inset:0;z-index:0}
.plate .scene svg{width:100%;height:100%}
.plate .scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(36,26,46,0) 34%,rgba(36,26,46,.72) 74%,rgba(36,26,46,.93))}
.plate .meat{position:relative;z-index:2;margin-top:auto;padding:18px 22px;color:#fff}
.plate .row{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.plate .series{font-size:10.5px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
  background:var(--sun);color:var(--ink);border:2.5px solid var(--ink);border-radius:6px;padding:1px 9px}
.plate .no{font-size:10.5px;font-weight:900;letter-spacing:.09em;color:#ffd9ea}
.plate h1{font-size:clamp(23px,4vw,36px);color:#fff}

/* the speech bubble the cast teaches through */
.bubble{position:relative;background:var(--card);border:3px solid var(--ink);border-radius:20px;
  padding:16px 19px;box-shadow:var(--bevel),var(--pop-1);margin:0 0 20px 0}
.bubble::after{content:'';position:absolute;left:34px;bottom:-17px;width:0;height:0;
  border-left:11px solid transparent;border-right:17px solid transparent;border-top:17px solid var(--ink)}
.bubble .who{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.bubble .who .av{width:38px;height:38px;border-radius:50%;border:2.5px solid var(--ink);overflow:hidden;
  flex:none;box-shadow:var(--bevel-sm)}
.bubble .who .nm{font-size:12px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;color:var(--rose)}
.bubble p{margin:0;font-weight:600}

.panel{background:var(--card);border:3px solid var(--ink);border-radius:var(--radius);padding:18px 20px;
  box-shadow:var(--bevel),var(--pop-1);margin-bottom:18px}
.panel h3{font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);margin-bottom:11px}
.panel p{margin:0 0 12px}
.panel p:last-child{margin-bottom:0}
.panel b{background:linear-gradient(transparent 64%, rgba(245,181,42,.5) 64%)}
.pts{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.pts li{display:flex;gap:10px;align-items:flex-start;font-weight:600;font-size:14.5px}
.pts li::before{content:'★';color:var(--sun);font-size:15px;flex:none;line-height:1.5}
.pts.bad li::before{content:'✕';color:var(--no)}
.panel.villain{background:var(--no-bg);border-color:var(--no)}
.panel.villain h3{color:var(--no)}
.panel.chal{background:#eef6fd;border-color:var(--sky)}
.panel.chal h3{color:var(--sky)}

/* ══ THE PRACTICE ENGINE ═════════════════════════════════════════════ */
.drills{border:3px solid var(--ink);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--bevel),var(--pop-2);margin-bottom:20px;background:var(--card)}
.dr-top{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--ink);color:#fff}
.dr-top h3{font-size:14px;letter-spacing:.08em;text-transform:uppercase;flex:1}
.dr-top .cnt{font-family:var(--mono);font-size:13px;color:var(--sun);font-weight:700}
.dr-body{padding:18px 20px}
.dr-q{font-size:17px;font-weight:800;margin:0 0 14px;line-height:1.45}
.dr-given{font-family:var(--mono);font-size:15px;background:var(--tint);border:2.5px solid var(--line);
  border-radius:11px;padding:11px 13px;margin:0 0 14px;box-shadow:var(--bevel-in);font-weight:600}
.opts{display:grid;gap:9px}
.opt{display:flex;gap:11px;align-items:flex-start;text-align:left;width:100%;
  background:var(--card);border:2.5px solid var(--line);border-radius:12px;padding:11px 14px;
  font-weight:600;font-size:15px;transition:.13s;box-shadow:var(--bevel-sm)}
.opt:hover:not(:disabled){border-color:var(--sky);transform:translateX(3px)}
.opt .k{font-family:var(--mono);font-weight:700;color:var(--dim);flex:none}
.opt.right{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}
.opt.wrong{background:var(--no-bg);border-color:var(--no);color:var(--no)}
.opt:disabled{cursor:default}
.toks{display:flex;flex-wrap:wrap;gap:7px}
.tok{border:2.5px solid var(--line);border-radius:9px;padding:6px 11px;font-weight:700;
  background:var(--card);box-shadow:var(--bevel-sm);font-size:15px;transition:.12s}
.tok:hover:not(:disabled){border-color:var(--sky);transform:translateY(-2px)}
.tok.right{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}
.tok.wrong{background:var(--no-bg);border-color:var(--no);color:var(--no)}
.fixbox{display:flex;gap:9px;flex-wrap:wrap}
.fixbox input{flex:1;min-width:220px;font-family:var(--mono);font-size:15px;padding:11px 13px;
  border:2.5px solid var(--line);border-radius:11px;background:var(--card);color:var(--txt);
  box-shadow:var(--bevel-in);font-weight:600}
.fixbox input:focus{border-color:var(--sky);outline:none}
.verdict{margin-top:14px;border-radius:12px;padding:12px 14px;font-weight:600;font-size:14.5px;
  border:2.5px solid;display:none}
.verdict.show{display:block}
.verdict.ok{background:var(--ok-bg);border-color:var(--ok);color:#1e5c33}
.verdict.no{background:var(--no-bg);border-color:var(--no);color:#8a2436}
.verdict b{display:block;font-size:15px;margin-bottom:3px;letter-spacing:.03em;text-transform:uppercase}
.dr-foot{display:flex;align-items:center;gap:10px;padding:12px 16px;border-top:2.5px solid var(--line);
  background:var(--tint);flex-wrap:wrap}
.dr-foot .sp{margin-left:auto}
.dr-done{text-align:center;padding:26px 20px}
.dr-done .big{font-size:46px;font-weight:900;letter-spacing:-.04em;line-height:1}
.dr-done .big.ok{color:var(--ok)} .dr-done .big.mid{color:var(--sun)} .dr-done .big.no{color:var(--no)}

/* ══ TASK LIST ═══════════════════════════════════════════════════════ */
.tasks{border:3px solid var(--ink);border-radius:var(--radius);padding:16px 18px;background:var(--card);
  box-shadow:var(--bevel),var(--pop-1);margin-bottom:20px}
.task{display:flex;gap:11px;align-items:flex-start;padding:9px 11px;border:2.5px solid var(--line);
  border-radius:11px;margin-bottom:8px;cursor:pointer;background:var(--card);transition:.12s;
  text-align:left;width:100%;font-weight:700;font-size:14.5px}
.task:hover{border-color:var(--sky)}
.task.done{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}
.task .bx{width:21px;height:21px;border:2.5px solid var(--ink);border-radius:6px;flex:none;
  display:flex;align-items:center;justify-content:center;font-size:13px;background:var(--card)}
.task.done .bx{background:var(--ok);color:#fff;border-color:var(--ok)}
.task .xp{margin-left:auto;font-size:11px;font-weight:900;color:var(--sun);flex:none}
.task.done .xp{color:var(--ok)}

/* ══ NAV BETWEEN LESSONS ═════════════════════════════════════════════ */
.lnav{display:flex;gap:10px;justify-content:space-between;margin:22px 0 8px;flex-wrap:wrap}
.crumb{font-size:12.5px;font-weight:700;color:var(--dim);margin-bottom:14px}
.crumb a{color:var(--rose)} .crumb a:hover{text-decoration:underline}

/* ══ FOOTER ══════════════════════════════════════════════════════════ */
.foot{margin-top:50px;border-top:3px solid var(--ink);background:var(--tint);padding:26px 0 34px}
.foot-in{display:flex;gap:22px;flex-wrap:wrap;justify-content:space-between;font-size:13px;
  font-weight:600;color:var(--txt-2)}
.foot a{color:var(--rose);font-weight:800}

/* ══ MISC ════════════════════════════════════════════════════════════ */
.empty{padding:40px 20px;text-align:center;color:var(--dim);font-weight:700}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(18px);z-index:200;
  padding:11px 20px;border-radius:12px;background:var(--sun);color:var(--ink);border:3px solid var(--ink);
  box-shadow:var(--pop-1);font-weight:900;font-size:13.5px;opacity:0;pointer-events:none;transition:.22s}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.xpfloat{position:fixed;left:50%;top:32%;transform:translateX(-50%);z-index:190;pointer-events:none;
  font-weight:900;font-size:26px;color:#fff;background:var(--rose);border:3px solid var(--ink);
  border-radius:14px;padding:5px 20px;box-shadow:var(--pop-2);animation:xpf 1.4s ease-out forwards}
@keyframes xpf{0%{opacity:0;transform:translateX(-50%) translateY(14px) scale(.6)}
  22%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
  100%{opacity:0;transform:translateX(-50%) translateY(-46px) scale(1)}}

@media(max-width:820px){
  .nlinks{display:none}
  /* the header row must be allowed to shrink, or brand + search + two pills
     add up to 404px on a 375px screen and the whole page scrolls sideways */
  .nav-in{gap:9px}
  .nsearch{max-width:none;min-width:0;flex:1 1 80px}
  .brand .wm{font-size:16px}
}
@media(max-width:560px){
  .npill.streak{display:none}   /* the streak still shows on #/progress */
  .brand .wm i{display:none}
}
@media(max-width:640px){
  :root{--gut:14px}
  .lanes{grid-template-columns:1fr}
  .eps{grid-template-columns:1fr}
  .npill .lvname{display:none}
  .sec h2{font-size:22px}
}
@media (prefers-reduced-motion: reduce){
  .cast{-webkit-mask-image:none;mask-image:none;overflow-x:auto}
  .cast-track{animation:none!important;width:auto;transform:none}
  .cast-track .face.clone{display:none}
  .xpfloat{animation:none}
  *{transition-duration:.001ms!important}
}
@media print{
  .nav,.cast,.drills,.tasks,.lnav,.foot{display:none}
  body{background:#fff}
  .panel,.bubble,.plate{box-shadow:none;border-width:1.5px}
}

/* ══════════════════════════════════════════════════════════════════════
   ENGINE ADDITIONS · drill kinds beyond the original three
   ══════════════════════════════════════════════════════════════════ */
.fixbox .unit{align-self:center;font-family:var(--mono);font-weight:800;color:var(--dim);
  font-size:14px;padding:0 2px}
.hint{font-size:13px;color:var(--dim);font-weight:600;margin:0 0 10px}
.listenbox{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.listenbox .hint{margin:0}
.orderpick{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.ordertray{min-height:46px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  border:2.5px dashed var(--line);border-radius:12px;padding:8px 10px;background:var(--tint)}
.ordertray .ph{color:var(--dim);font-size:13px;font-weight:600;font-style:italic}
.ordertray .tok{box-shadow:none;border-color:var(--ok);background:var(--ok-bg);color:var(--ok)}
.tok:disabled{opacity:.55}
.novoice{background:var(--no-bg);border:2.5px solid var(--no);border-radius:12px;padding:12px 14px;
  margin-bottom:12px;font-size:13.5px;font-weight:600;color:#8a2436;line-height:1.55}
.novoice b{display:block;margin-bottom:4px}

/* ══════════════════════════════════════════════════════════════════════
   LANE SKINS · the environment changes when you enter a lane
   Six visual worlds. Each one changes the background, the panel texture,
   the border treatment and the accent — and NEVER the typeface. One
   family throughout is what stops the family of schools looking like six
   unrelated sites, so the variety has to come from surface, not letters.

   A skin is applied by the engine as body[data-skin] plus two lane colour
   variables, so any lane in any school can wear any world.
   ══════════════════════════════════════════════════════════════════ */
body{transition:background-color .35s ease, background-image .35s ease}
:root{ --lane-a:var(--rose); --lane-b:var(--sky); }

/* the accent picks up the lane's own colours inside a lane or lesson */
body[data-skin] .kick,
body[data-skin] .lane-w,
body[data-skin] .bubble .who .nm{ color:var(--lane-a) }
body[data-skin] .eyebrow{ background:var(--lane-b) }
body[data-skin] .btn-go{ background:var(--lane-a) }
body[data-skin] .btn-alt{ background:var(--lane-b) }
body[data-skin] .ep .no{ color:var(--lane-a) }
body[data-skin] .plate .series{ background:var(--lane-b) }

/* ── COMIC · halftone dots and a hard printed panel ─────────────────── */
body[data-skin="comic"]{
  background-color:var(--paper);
  background-image:radial-gradient(color-mix(in srgb, var(--lane-a) 26%, transparent) 1.6px, transparent 1.6px);
  background-size:11px 11px;
}
body[data-skin="comic"] .panel,
body[data-skin="comic"] .bubble{ border-width:3.5px; box-shadow:var(--bevel),6px 6px 0 var(--ink) }
body[data-skin="comic"] .plate{ box-shadow:var(--bevel),9px 9px 0 var(--ink) }

/* ── MANGA · screentone hatching, high contrast, tight ink ──────────── */
body[data-skin="manga"]{
  background-color:#fbfbfd;
  background-image:repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--ink) 7%, transparent) 0 1px, transparent 1px 6px);
}
body[data-skin="manga"] .panel,
body[data-skin="manga"] .bubble,
body[data-skin="manga"] .lane,
body[data-skin="manga"] .ep{ border-radius:6px; border-width:3px; box-shadow:5px 5px 0 var(--ink) }
body[data-skin="manga"] .plate{ border-radius:6px }
body[data-skin="manga"] .diff{ border-radius:4px }

/* ── ANIME · speed lines from the corner, bright sky wash ───────────── */
body[data-skin="anime"]{
  background-color:#f6fbff;
  background-image:
    repeating-conic-gradient(from 30deg at 12% 0%,
      color-mix(in srgb, var(--lane-b) 15%, transparent) 0deg 0.6deg, transparent 0.6deg 3deg),
    linear-gradient(180deg, color-mix(in srgb, var(--lane-b) 14%, transparent), transparent 46%);
}
body[data-skin="anime"] .panel,
body[data-skin="anime"] .bubble{ border-radius:22px }
body[data-skin="anime"] .lane{ border-radius:22px }
body[data-skin="anime"] .plate{ border-radius:24px }

/* ── ARCADE · dark cabinet, scanlines, neon edge ────────────────────── */
body[data-skin="arcade"]{
  background-color:#0e1018; color:#e8eef8;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 3px),
    radial-gradient(900px 460px at 50% -8%, color-mix(in srgb, var(--lane-a) 34%, transparent), transparent 70%);
}
body[data-skin="arcade"]{ --txt:#e8eef8; --txt-2:#aab6cc; --dim:#7d8ba0; --card:#171b26;
  --tint:#1e2431; --line:#2b3446; --ink:#05070c; --paper:#0e1018 }
body[data-skin="arcade"] .panel,
body[data-skin="arcade"] .bubble,
body[data-skin="arcade"] .lane,
body[data-skin="arcade"] .ep,
body[data-skin="arcade"] .drills,
body[data-skin="arcade"] .tasks{ background:#171b26; color:#e8eef8;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--lane-b) 34%, transparent), 5px 5px 0 #05070c }
body[data-skin="arcade"] .opt,
body[data-skin="arcade"] .tok,
body[data-skin="arcade"] .fixbox input{ background:#1e2431; color:#e8eef8; border-color:#2b3446 }
body[data-skin="arcade"] .panel b{ background:none; color:var(--lane-b) }
body[data-skin="arcade"] .nav{ background:rgba(14,16,24,.94) }

/* ── CLASSROOM · chalkboard green, ruled paper panels ───────────────── */
body[data-skin="classroom"]{
  background-color:#20362c;
  background-image:
    radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 40%);
  background-size:6px 6px, 100% 100%;
  --txt:#f2f6f1; --txt-2:#cdd9cd; --dim:#9db09d;
}
body[data-skin="classroom"] .panel,
body[data-skin="classroom"] .bubble,
body[data-skin="classroom"] .drills,
body[data-skin="classroom"] .tasks,
body[data-skin="classroom"] .lane,
body[data-skin="classroom"] .ep{
  background:#fffdf4; color:var(--ink);
  background-image:repeating-linear-gradient(180deg, transparent 0 27px,
    color-mix(in srgb, var(--lane-b) 22%, transparent) 27px 28px);
  box-shadow:var(--bevel),5px 5px 0 rgba(0,0,0,.35);
}
body[data-skin="classroom"] .nav{ background:rgba(32,54,44,.95) }
body[data-skin="classroom"] .nsearch input{ background:#fffdf4 }

/* ── SKETCH · off-white pad, pencil grid, hand-drawn edges ──────────── */
body[data-skin="sketch"]{
  background-color:#fdfbf6;
  background-image:
    linear-gradient(color-mix(in srgb, var(--ink) 6%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ink) 6%, transparent) 1px, transparent 1px);
  background-size:24px 24px, 24px 24px;
}
body[data-skin="sketch"] .panel,
body[data-skin="sketch"] .bubble,
body[data-skin="sketch"] .lane,
body[data-skin="sketch"] .ep{
  border-radius:14px 20px 15px 22px / 20px 14px 22px 16px;   /* wobbled, hand-drawn */
  box-shadow:3px 4px 0 color-mix(in srgb, var(--ink) 55%, transparent);
}
body[data-skin="sketch"] .plate{ border-radius:18px 26px 20px 24px / 24px 18px 26px 20px }

/* the skin badge in the lane header, so the world has a name */
.skinchip{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:900;
  letter-spacing:.12em;text-transform:uppercase;padding:2px 9px;border-radius:999px;
  border:2px solid var(--ink);background:var(--lane-b);color:var(--ink);box-shadow:var(--pop-0)}

@media (prefers-reduced-motion: reduce){ body{transition:none} }

/* ══════════════════════════════════════════════════════════════════════
   SAGA MAP · the primary way through a lane
   A winding path of lesson nodes, the way a saga game lays out levels.
   Nodes carry measured state: cleared, current, or locked, with stars
   earned from real drill accuracy rather than for turning up.
   The flat catalogue still exists — it is just no longer the front door.
   ══════════════════════════════════════════════════════════════════ */
.saga{position:relative;margin:8px auto 0;max-width:760px;padding:10px 0 30px}
.saga svg.trail{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.saga .node{position:absolute;z-index:1;width:88px;margin-left:-44px;text-align:center;
  cursor:pointer;background:none;border:0;padding:0}
.saga .node .disc{width:66px;height:66px;margin:0 auto;border-radius:50%;
  border:4px solid var(--ink);background:var(--card);box-shadow:var(--bevel),0 5px 0 var(--ink);
  display:flex;align-items:center;justify-content:center;font-weight:900;font-size:21px;
  transition:transform .15s, box-shadow .15s;position:relative}
.saga .node:hover .disc{transform:translateY(-3px);box-shadow:var(--bevel),0 8px 0 var(--ink)}
.saga .node:active .disc{transform:translateY(2px);box-shadow:var(--bevel),0 2px 0 var(--ink)}
.saga .node.done .disc{background:linear-gradient(180deg,var(--leaf),#3f9440);color:#fff}
.saga .node.now .disc{background:linear-gradient(180deg,var(--sun),#e0a02c);color:var(--ink);
  animation:pulseNode 1.8s ease-in-out infinite}
@keyframes pulseNode{0%,100%{box-shadow:var(--bevel),0 5px 0 var(--ink),0 0 0 0 rgba(245,181,42,.55)}
  50%{box-shadow:var(--bevel),0 5px 0 var(--ink),0 0 0 13px rgba(245,181,42,0)}}
.saga .node.lock .disc{background:var(--tint);color:var(--dim);border-color:var(--line);
  box-shadow:inset 2px 2px 0 rgba(0,0,0,.08)}
.saga .node.lock{cursor:not-allowed}
.saga .node .stars{margin-top:5px;font-size:12px;letter-spacing:1px;color:var(--sun);height:14px}
.saga .node .stars .off{color:var(--line)}
.saga .node .cap{display:block;font-size:10.5px;font-weight:800;color:var(--txt-2);line-height:1.25;
  margin-top:2px;max-height:26px;overflow:hidden}
.saga .node.lock .cap{color:var(--dim)}
.saga .flag{position:absolute;z-index:2;left:50%;transform:translateX(-50%);
  font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;
  background:var(--lane-a,var(--rose));color:#fff;border:2.5px solid var(--ink);border-radius:999px;
  padding:3px 12px;box-shadow:var(--pop-0);white-space:nowrap}

.saga-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 6px}
.saga-head .prog{flex:1;min-width:160px;height:12px;background:var(--tint);border:2.5px solid var(--ink);
  border-radius:7px;overflow:hidden;box-shadow:var(--bevel-in)}
.saga-head .prog>div{height:100%;background:linear-gradient(180deg,var(--leaf),#3f9440);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.4);transition:width .5s ease-out}
.saga-head .tally{font-weight:900;font-size:13px;white-space:nowrap}
.saga-head .tally .s{color:var(--sun)}

/* the world map on the front page — lanes as a journey, not a grid */
.worldmap{position:relative;max-width:900px;margin:0 auto;padding:6px 0 24px}
.worldmap svg.trail{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.wnode{position:absolute;z-index:1;width:190px;margin-left:-95px;text-align:center;
  background:none;border:0;padding:0;cursor:pointer}
.wnode .badge{width:92px;height:92px;margin:0 auto;border-radius:50%;border:4px solid var(--ink);
  overflow:hidden;box-shadow:var(--bevel),0 6px 0 var(--ink);transition:transform .16s}
.wnode:hover .badge{transform:translateY(-4px) scale(1.04)}
.wnode .badge svg{width:100%;height:100%}
.wnode .wname{display:block;font-weight:900;font-size:14px;margin-top:8px;letter-spacing:-.02em}
.wnode .wmeta{display:block;font-size:11px;font-weight:800;color:var(--dim)}
.wnode .wbar{width:110px;height:8px;margin:6px auto 0;background:var(--tint);border:2px solid var(--ink);
  border-radius:5px;overflow:hidden}
.wnode .wbar>div{height:100%;background:var(--leaf)}
.wnode.complete .badge{box-shadow:var(--bevel),0 6px 0 var(--ink),0 0 0 5px var(--leaf)}

@media(max-width:620px){
  .saga .node{width:74px;margin-left:-37px}
  .saga .node .disc{width:56px;height:56px;font-size:18px}
  .wnode{width:150px;margin-left:-75px}
  .wnode .badge{width:76px;height:76px}
}