/* Fizz Math. Components read only tokens; each [data-style][data-theme] pair below sets them.
   --w0 to --w5 color the worlds of whatever chapter is open, so chapters never pick colors themselves. */
:root{
  --bg:#0e1124;--bg2:#161a36;--card:#1b2042;--card2:#232a55;--ink:#f5f6ff;--muted:#a6abd6;--line:#323a72;--strong:#fff;
  --accent:#8b6cff;--good:#2ee6b0;--bad:#ff6b81;--warn:#ffc35c;--field:#0b0e20;--grid:#262d5c;--axis:#7a82bd;--kbd:#0004;--on-c:#0b0e20;
  --glow1:#2a2170;--glow2:#0f4d4a;--shadow:0 20px 50px #0007;--title:linear-gradient(90deg,#c8b8ff,#7cf5d2);--grade:linear-gradient(135deg,#ffe08a,#ff8bd1 50%,#8b6cff);
  --w0:#2ee6b0;--w1:#5cc8ff;--w2:#ff8bd1;--w3:#ffc35c;--w4:#a98bff;--w5:#ff9a62;--cmix:100%;
  --fz1:#9b7bff;--fz2:#2ee6b0;--fz-ink:#17123a;--fz-cheek:#ff8bd1;
  --font:ui-rounded,"SF Pro Rounded","Nunito","Segoe UI",system-ui,-apple-system,sans-serif;--display:var(--font);
  --r:20px;--r-sm:14px;--bw:1px;
  font-family:var(--font);
}
[data-style="normal"][data-theme="light"]{
  --bg:#f6f3ee;--bg2:#fbf9f5;--card:#fff;--card2:#f1eef8;--ink:#1d1b33;--muted:#5d5a78;--line:#e2dcef;--strong:#14122a;
  --accent:#6d4aff;--good:#0f9f74;--bad:#e0435e;--warn:#c27a00;--field:#faf8ff;--grid:#e7e3f3;--axis:#8d88ad;--kbd:#1d1b3312;--on-c:#fff;
  --glow1:#e6dcff;--glow2:#d4f4ec;--shadow:0 14px 34px #2d1f6a1a;--title:linear-gradient(90deg,#6d4aff,#0f9f74);--grade:linear-gradient(135deg,#f59e0b,#db2777 50%,#6d4aff);
  --w0:#10b981;--w1:#0ea5e9;--w2:#ec4899;--w3:#f59e0b;--w4:#8b5cf6;--w5:#f97316;--cmix:70%;
}
[data-style="halloween"]{
  --display:Rockwell,"Roboto Slab","Arial Black",Impact,serif;
  --fz1:#fb923c;--fz2:#c2410c;--fz-ink:#1c1917;--fz-cheek:#fde68a;
}
[data-style="halloween"][data-theme="dark"]{
  --bg:#150b21;--bg2:#1c0f2c;--card:#231536;--card2:#2e1c46;--ink:#f6eeff;--muted:#c9b8de;--line:#3f2b59;--strong:#fff;
  --accent:#f97316;--good:#84cc16;--bad:#f43f5e;--warn:#fbbf24;--field:#120a1c;--grid:#2c1d42;--axis:#8f78b3;--kbd:#0006;--on-c:#150b21;
  --glow1:#4c1d95;--glow2:#7c2d12;--title:linear-gradient(90deg,#fdba74,#f97316 45%,#c084fc);--grade:linear-gradient(135deg,#fde047,#f97316 50%,#a855f7);
  --w0:#84cc16;--w1:#f97316;--w2:#c084fc;--w3:#fbbf24;--w4:#f43f5e;--w5:#2dd4bf;--cmix:100%;
}
[data-style="halloween"][data-theme="light"]{
  --bg:#f7ecd8;--bg2:#fbf3e4;--card:#fffaf0;--card2:#f6e7cc;--ink:#2a1433;--muted:#664655;--line:#e7d2ae;--strong:#1c0a24;
  --accent:#c2410c;--good:#4d7c0f;--bad:#be123c;--warn:#b45309;--field:#fffdf7;--grid:#efdfc2;--axis:#a08a6d;--kbd:#2a143314;--on-c:#fff;
  --glow1:#fed7aa;--glow2:#e9d5ff;--shadow:0 14px 34px #4a2a0f1f;--title:linear-gradient(90deg,#c2410c,#7e22ce);--grade:linear-gradient(135deg,#ea580c,#7e22ce);
  --w0:#65a30d;--w1:#ea580c;--w2:#7e22ce;--w3:#d97706;--w4:#be123c;--w5:#0f766e;--cmix:80%;
}
[data-style="crayon"]{
  --font:"Chalkboard SE","Marker Felt","Comic Sans MS","Segoe Print","Bradley Hand",cursive;--display:var(--font);
  --r:20px 7px 18px 9px/8px 18px 9px 20px;--r-sm:14px 5px 12px 6px/6px 12px 5px 14px;--bw:2px;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .15 .07 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
[data-style="crayon"][data-theme="light"]{
  --bg:#fbf6e9;--bg2:#fffdf6;--card:#fffdf6;--card2:#f6efdc;--ink:#2b2a4c;--muted:#56536f;--line:#3a3358b8;--strong:#1d1c3a;
  --accent:#2457c5;--good:#2a9d4b;--bad:#e63946;--warn:#d99a00;--field:#fffef9;--grid:#e6dcc3;--axis:#8c8160;--kbd:#2b2a4c12;--on-c:#fff;
  --shadow:3px 4px 0 #3a33583d;--title:none;--grade:none;
  --w0:#2a9d4b;--w1:#2f6fdf;--w2:#e63946;--w3:#d99a00;--w4:#8e44ad;--w5:#f77f00;--cmix:85%;
  --fz1:#f2b705;--fz2:#f77f00;--fz-ink:#2b2a4c;--fz-cheek:#e63946;
}
[data-style="crayon"][data-theme="dark"]{
  --bg:#1c3a2f;--bg2:#24473a;--card:#24473a;--card2:#2c5444;--ink:#f4f1e6;--muted:#c5d6cc;--line:#f4f1e69e;--strong:#fff;
  --accent:#f7e07a;--good:#a8e6a3;--bad:#f6a5b4;--warn:#f9be85;--field:#1f4134;--grid:#335c4c;--axis:#c5d6cc;--kbd:#0003;--on-c:#1c3a2f;
  --shadow:3px 4px 0 #0d211a;--title:none;--grade:none;
  --w0:#a8e6a3;--w1:#9ad0f5;--w2:#f6a5b4;--w3:#f7e07a;--w4:#cbb0f5;--w5:#f9be85;--cmix:100%;
  --fz1:#f7e07a;--fz2:#f9be85;--fz-ink:#1c3a2f;--fz-cheek:#f6a5b4;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .16 -.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;min-height:100%;color:var(--ink);background:radial-gradient(1200px 700px at 15% -10%,var(--glow1) 0,transparent 60%),radial-gradient(900px 600px at 110% 10%,var(--glow2) 0,transparent 55%),var(--bg);background-attachment:fixed}
body{min-height:100vh}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit}
:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 70%,transparent);outline-offset:2px}
#app{max-width:820px;margin:0 auto;padding:20px 18px 60px;position:relative;z-index:1}
.math{font-family:"STIX Two Math","Cambria Math","Times New Roman",serif;font-style:italic;letter-spacing:.2px;white-space:nowrap}
.math.big{display:block;font-size:1.45em;margin:14px 0 4px;text-align:center;white-space:normal}
b{color:var(--strong)}
.muted{color:var(--muted)}
/* World color as text: full strength on dark pages, mixed toward the ink on light ones so it stays readable. */
[style*="--c"]{--c-ink:color-mix(in srgb,var(--c) var(--cmix),var(--ink))}

/* top bar */
.top{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.brand{display:flex;align-items:center;gap:8px;font:800 18px var(--display);letter-spacing:.3px;text-decoration:none}
.brand .fizz{width:36px;height:40px}
.sp{flex:1}
.pill{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:var(--card);border:var(--bw) solid var(--line);font-weight:700;font-size:14px;white-space:nowrap}
.pill .flame{width:10px;height:14px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:linear-gradient(#ffd36b,#ff6b3d);box-shadow:0 0 10px #ff8a3d}
.pill.cold .flame{background:var(--line);box-shadow:none}
.iconbtn{width:38px;height:38px;border-radius:12px;border:var(--bw) solid var(--line);background:var(--card);display:grid;place-items:center;font-size:17px;padding:0}
.iconbtn svg{width:20px;height:20px}
.dots{display:flex;gap:4px;flex-wrap:wrap;margin:0 0 14px}
.dots i{width:14px;height:8px;border-radius:4px;background:var(--line);opacity:.7}
.dots i.now{background:var(--accent);box-shadow:0 0 8px var(--accent);opacity:1}
.dots i.s1{background:var(--good);opacity:1}.dots i.s2{background:var(--warn);opacity:1}.dots i.s0{background:var(--bad);opacity:1}

/* style menu */
.sm-wrap{position:relative}
.sm-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:20;min-width:200px;padding:8px;border-radius:16px;background:var(--card);border:var(--bw) solid var(--line);box-shadow:var(--shadow);display:grid;gap:6px;animation:pop .18s ease}
.sm-menu[hidden]{display:none}
.sm-head{font-size:12px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);padding:6px 8px 2px}
.sm-item{display:flex;align-items:center;gap:10px;width:100%;padding:8px;border:0;border-radius:10px;background:none;text-align:left;font-weight:700}
.sm-item:hover,.sm-item:focus-visible{background:var(--card2);outline:none}
.sm-icon{width:24px;height:24px;display:grid;place-items:center;flex:none}
.sm-icon svg{width:22px;height:22px}
.sm-aa{font:800 14px var(--font)}
.sm-check{width:16px;height:16px;margin-left:auto;opacity:0}
.sm-item[aria-checked="true"] .sm-check{opacity:1;color:var(--accent)}

/* cards */
.card{background:linear-gradient(180deg,var(--card),var(--bg2));border:var(--bw) solid var(--line);border-radius:var(--r);padding:24px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.card::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:var(--c,var(--accent))}
.chip{display:inline-block;padding:5px 11px;border-radius:999px;background:color-mix(in srgb,var(--c,var(--accent)) 22%,transparent);color:var(--c-ink,var(--accent));font-weight:800;font-size:13px;letter-spacing:.3px}
.qhead{display:flex;align-items:center;gap:10px;margin-bottom:12px;color:var(--muted);font-size:14px;flex-wrap:wrap}
.prompt{font-size:20px;line-height:1.5}
.visual{display:flex;justify-content:center;margin:16px 0 4px}
.ans{margin-top:18px}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opts.one{grid-template-columns:1fr}
.opt{display:flex;align-items:center;gap:12px;text-align:left;padding:14px 16px;border-radius:var(--r-sm);background:var(--card2);border:2px solid transparent;font-size:17px;transition:transform .12s,border-color .2s,background .2s}
.opt:hover:not(:disabled){transform:translateY(-2px);border-color:var(--c,var(--accent))}
.opt kbd{flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:var(--kbd);font:700 13px ui-monospace,monospace;color:var(--muted)}
.opt.right{border-color:var(--good);background:color-mix(in srgb,var(--good) 18%,var(--card2))}
.opt.wrong{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 14%,var(--card2));opacity:.75}
.opt:disabled{cursor:default}
.numrow{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:700;flex-wrap:wrap}
.numrow input{width:220px;max-width:100%;font:inherit;padding:12px 16px;border-radius:var(--r-sm);border:2px solid var(--line);background:var(--field);color:var(--ink);outline:none}
.numrow input:focus{border-color:var(--c,var(--accent))}
.numrow .unit{color:var(--muted);font-size:18px}
.tip{color:var(--muted);font-size:13px;margin-top:8px}
.actions{display:flex;align-items:center;gap:10px;margin-top:20px;flex-wrap:wrap}
.actions.center{justify-content:center}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 20px;border-radius:var(--r-sm);border:var(--bw) solid var(--line);background:var(--card2);font-weight:800;font-size:16px;text-decoration:none;font-family:var(--display)}
.btn.primary{background:linear-gradient(135deg,var(--c,var(--accent)),color-mix(in srgb,var(--c,var(--accent)) 60%,#000));border-color:transparent;color:#fff;box-shadow:0 8px 20px color-mix(in srgb,var(--c,var(--accent)) 40%,transparent)}
.btn.big{padding:16px 26px;font-size:18px}
.btn:disabled{opacity:.45;cursor:default}
.btn.ghost{background:transparent}

/* coach */
.coach{display:flex;gap:14px;align-items:flex-start;margin-top:18px;padding:14px 16px;border-radius:16px;background:color-mix(in srgb,var(--field) 70%,transparent);border:var(--bw) solid var(--line);animation:pop .35s ease}
.coach.good{border-color:color-mix(in srgb,var(--good) 60%,transparent)}
.coach.oops{border-color:color-mix(in srgb,var(--warn) 60%,transparent)}
.coach.learn{border-color:color-mix(in srgb,var(--bad) 55%,transparent)}
.coach .fizz{width:58px;height:68px;flex:none}
.coach .body{font-size:16px;line-height:1.55;min-width:0}
.coach .body p{margin:4px 0}
.coach .ansv{padding:2px 8px;border-radius:8px;background:color-mix(in srgb,var(--good) 25%,transparent);font-weight:800}
.coach svg.plane{display:block;max-width:230px;margin-top:10px}
@keyframes pop{from{transform:translateY(8px) scale(.98);opacity:0}to{transform:none;opacity:1}}
.shake{animation:shake .4s}
@keyframes shake{20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}

/* graphs, mapping diagrams, tables */
svg.plane{width:100%;max-width:330px;height:auto}
.pbg{fill:var(--field)}
.grid{stroke:var(--grid);stroke-width:1}
.axis{stroke:var(--axis);stroke-width:1.6}
.tick{fill:var(--muted);font-size:11px;font-family:ui-monospace,monospace}
.axl{fill:var(--muted);font-size:12px}
.curve{fill:none;stroke:var(--c-ink,var(--accent));stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.curve.ghost{stroke:var(--axis);stroke-dasharray:6 6;stroke-width:2.4}
.curve.target{stroke:var(--warn);stroke-dasharray:9 7;stroke-width:4;opacity:.9}
.curve.user{stroke:var(--good);transition:d .15s}
.curve.test{stroke:var(--bad);stroke-dasharray:5 5;stroke-width:2.4}
.curve.zero{stroke:var(--axis);stroke-width:1.6;stroke-dasharray:4 4}
.pt{fill:var(--c-ink,var(--accent));stroke:var(--field);stroke-width:1.5}
.pt.key{fill:var(--warn)}
.pt.hit{fill:var(--bad)}
svg.map{width:100%;max-width:340px}
.oval{fill:var(--field);stroke:var(--line);stroke-width:2}
.mapt{fill:var(--ink);font-size:17px;font-weight:700}
.maph{fill:var(--muted);font-size:12px}
.arr{stroke:var(--c-ink,var(--accent));stroke-width:2.2}
.arh{fill:var(--c-ink,var(--accent))}
table.tbl{border-collapse:collapse;margin:12px auto 0;font-size:18px}
.tbl th,.tbl td{border:var(--bw) solid var(--line);padding:8px 16px;text-align:center}
.tbl th{background:var(--card2);color:var(--muted);font-weight:700}

/* slider match */
.match{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:18px;align-items:center}
.sl{display:grid;gap:14px}
.sl label{display:grid;gap:6px;font-weight:800}
.sl label span{display:flex;justify-content:space-between}
.sl input[type=range]{width:100%;accent-color:var(--good)}
.eq{font-size:22px;text-align:center;padding:10px;border-radius:12px;background:var(--field)}
@media (max-width:640px){.match{grid-template-columns:1fr}.opts{grid-template-columns:1fr}.prompt{font-size:18px}.hero{flex-direction:column;text-align:center}}

/* home and chapter map */
.hero{display:flex;gap:20px;align-items:center;margin:8px 0 24px}
.hero .fizz{width:110px;height:128px;flex:none;animation:bob 3s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-8px) rotate(-3deg)}}
.title{margin:0 0 6px;font:900 38px/1.1 var(--display);background:var(--title);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{margin:0;color:var(--muted);font-size:17px;line-height:1.5}
.crumbs{display:flex;gap:8px;font-size:14px;color:var(--muted);margin:-4px 0 4px}
.crumbs a{color:var(--muted)}
.course h2{margin:8px 0 2px;font:900 24px var(--display)}
.course>p{margin:0 0 14px}
.chapters{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.chapter{display:flex;gap:12px;align-items:center;padding:14px;border-radius:var(--r-sm);background:var(--card);border:var(--bw) solid var(--line);text-decoration:none;transition:transform .12s,border-color .2s}
a.chapter:hover{transform:translateY(-2px);border-color:var(--c)}
.chapter .chn{width:40px;height:40px;flex:none;border-radius:12px;display:grid;place-items:center;font-weight:900;background:var(--c,var(--line));color:var(--on-c);transform:rotate(-6deg)}
.chapter .cht{display:grid;gap:4px;font-size:15px;line-height:1.3}
.chapter.soon{opacity:.62}
.chapter.soon .chn{background:var(--card2);color:var(--muted)}
.tag{justify-self:start;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:800;background:color-mix(in srgb,var(--c,var(--accent)) 20%,transparent);color:var(--c-ink,var(--accent))}
.tag.good{background:color-mix(in srgb,var(--good) 20%,transparent);color:var(--good)}
.tag.soon{background:var(--card2);color:var(--muted)}
.map-path{position:relative;display:grid;gap:14px;margin:22px 0}
.island{display:flex;align-items:center;gap:16px;padding:16px 18px;border-radius:18px;background:var(--card);border:var(--bw) solid var(--line);width:min(560px,100%);position:relative}
.island:nth-child(even){margin-left:auto}
.island .num{width:52px;height:52px;flex:none;border-radius:16px;display:grid;place-items:center;font-weight:900;font-size:16px;color:var(--on-c);background:var(--c);transform:rotate(-6deg);box-shadow:0 8px 20px color-mix(in srgb,var(--c) 45%,transparent)}
.island h3{margin:0;font:800 18px var(--display)}
.island small{color:var(--muted)}
.stars{display:inline-flex;gap:3px;margin-top:4px;vertical-align:middle}
.stars i{width:14px;height:14px;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);background:var(--line)}
.stars i.on{background:var(--warn)}
.cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.soon-card{text-align:center;display:grid;justify-items:center;gap:6px}
.soon-card .fizz{width:90px;height:104px}
.soon-card h2{margin:6px 0 0;font:900 22px var(--display)}

/* intro */
.wname{margin:4px 0 0;font:900 28px var(--display)}
.ideas{list-style:none;padding:0;margin:16px 0;display:grid;gap:10px}
.ideas li{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:var(--r-sm);background:var(--card2);font-size:17px;line-height:1.45}
.ideas li::before{content:"";flex:none;width:12px;height:12px;margin-top:6px;border-radius:4px;transform:rotate(45deg);background:var(--c)}
.example{padding:14px 16px;border-radius:var(--r-sm);border:2px dashed color-mix(in srgb,var(--c) 60%,transparent);font-size:16px;line-height:1.55}
.example b{color:var(--c-ink)}

/* finish */
.finish{text-align:center}
.grade{font:900 110px/1 var(--display);margin:6px 0;background:var(--grade);-webkit-background-clip:text;background-clip:text;color:transparent}
.score{font-size:20px;font-weight:800}
.cheer{font-size:17px}
.rows{display:grid;gap:10px;margin:18px 0;text-align:left}
.row{display:grid;grid-template-columns:170px 1fr 90px;gap:12px;align-items:center}
.bar{height:12px;border-radius:6px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;background:var(--c);border-radius:6px;transition:width 1s ease}
.endfizz{display:flex;justify-content:center}.endfizz .fizz{width:96px;height:112px;animation:bob 3s ease-in-out infinite}
.practice{text-align:left}
.missed{margin:8px 0 0;padding-left:18px;color:var(--muted);line-height:1.7}
@media (max-width:640px){.row{grid-template-columns:1fr 70px}.row .bar{grid-column:1/-1;grid-row:2}}

/* Fizz */
.fz-s1{stop-color:var(--fz1)}.fz-s2{stop-color:var(--fz2)}
.fz-fx{fill:#fff}
.fz-eye{fill:#fff}
.fz-pupil{fill:var(--fz-ink)}
.fz-line{stroke:var(--fz-ink);stroke-width:3.2;fill:none;stroke-linecap:round}
.fz-cheek{fill:var(--fz-cheek);opacity:.55}
.fz-hat{display:none}
.fz-brim,.fz-cone{fill:#1c1917}
.fz-band{fill:#7e22ce}
[data-style="halloween"] .fz-hat{display:inline}
[data-style="halloween"] .fz-fx{fill:#1c1917}
[data-style="crayon"] .fz-body{stroke:var(--fz-ink);stroke-width:2.6;stroke-dasharray:60 2 40 3}
[data-style="crayon"] .fz-fx{fill:var(--fz-ink)}

/* confetti */
.conf{position:fixed;left:var(--x);top:var(--y);width:9px;height:14px;border-radius:2px;background:var(--k);pointer-events:none;z-index:50;animation:fly var(--t,900ms) cubic-bezier(.2,.7,.3,1) forwards}
@keyframes fly{to{transform:translate(var(--dx),var(--dy)) rotate(var(--rot));opacity:0}}

/* ---------- Halloween ---------- */
[data-style="halloween"] body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='220' viewBox='0 0 260 220'%3E%3Cg fill='%237e22ce' fill-opacity='.45'%3E%3Cpath d='M40 40c6-6 12-6 16 0 2-4 6-5 8-3 2-2 6-1 8 3 4-6 10-6 16 0-6 0-10 4-12 8-3-3-7-2-9 1-2-3-6-4-9-1-2-3-4-4-6-4-2-4-6-4-12-4z'/%3E%3Cpath d='M180 140c5-5 10-5 13 0 2-3 5-4 6-2 2-2 5-1 6 2 3-5 8-5 13 0-5 0-8 3-10 7-2-3-6-2-7 1-2-3-5-3-7-1-2-3-4-3-5-3-2-3-5-4-9-4z'/%3E%3C/g%3E%3C/svg%3E") 0 0/260px 220px}
[data-style="halloween"][data-theme="light"] body::before{opacity:.35}
[data-style="halloween"] body::after{content:"";position:fixed;top:0;right:0;width:180px;height:180px;z-index:0;pointer-events:none;opacity:.5;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180' fill='none' stroke='%23a78bfa' stroke-width='1.2'%3E%3Cpath d='M180 0 90 90M180 0 120 110M180 0 60 60M180 0 150 120M180 0 40 20'/%3E%3Cpath d='M160 20q-10 6-20-2M140 40q-16 8-32-4M120 60q-22 10-44-6M100 80q-28 12-56-8M150 30q4 12 12 16M130 52q6 18 18 24M110 74q8 22 24 32'/%3E%3C/svg%3E") no-repeat right top/180px}
[data-style="halloween"][data-theme="light"] body::after{opacity:.4;filter:hue-rotate(-20deg) brightness(.6)}
[data-style="halloween"] .card::before{height:6px;background:repeating-linear-gradient(90deg,var(--c,var(--accent)) 0 18px,#1c1917 18px 24px)}
[data-style="halloween"] .island .num,[data-style="halloween"] .chapter .chn{border-radius:45% 45% 40% 40%/55% 55% 45% 45%}
[data-style="halloween"] .pill .flame{background:radial-gradient(circle at 50% 70%,#fde68a,#f97316 60%,#7c2d12);border-radius:40% 40% 45% 45%}
[data-style="halloween"] .btn.primary{color:#fff;text-shadow:0 1px 0 #0005}

/* ---------- Crayon ---------- */
[data-style="crayon"][data-theme="light"] body{background:var(--grain),linear-gradient(90deg,transparent 54px,#e6394630 54px 56px,transparent 56px),repeating-linear-gradient(180deg,transparent 0 31px,#6f9fd62e 31px 32px),var(--bg);background-attachment:fixed}
[data-style="crayon"][data-theme="dark"] body{background:var(--grain),radial-gradient(42% 26% at 16% 24%,#ffffff14,transparent 70%),radial-gradient(36% 20% at 74% 62%,#ffffff10,transparent 72%),radial-gradient(120% 90% at 50% 40%,transparent 60%,#0b1c1566),var(--bg);background-attachment:fixed}
[data-style="crayon"][data-theme="dark"] body::after{content:"";position:fixed;inset:0;z-index:30;pointer-events:none;border:8px solid #8b5a2b;border-image:repeating-linear-gradient(90deg,#9a6533 0 7px,#8a5829 7px 11px,#a8723d 11px 19px,#7d4f24 19px 22px) 8;box-shadow:inset 0 0 0 1px #5e3a1a,inset 0 0 22px #00000059}
[data-style="crayon"] .card,[data-style="crayon"] .island,[data-style="crayon"] .chapter{background:var(--grain),var(--card)}
[data-style="crayon"] .card::before{height:7px;inset:6px 14px auto 14px;border-radius:6px 2px 7px 3px;opacity:.85}
[data-style="crayon"] .title{color:var(--ink)}
[data-style="crayon"] .title span{color:var(--w0)}
[data-style="crayon"] .title span:nth-child(6n+2){color:var(--w1)}
[data-style="crayon"] .title span:nth-child(6n+3){color:var(--w2)}
[data-style="crayon"] .title span:nth-child(6n+4){color:var(--w3)}
[data-style="crayon"] .title span:nth-child(6n+5){color:var(--w4)}
[data-style="crayon"] .title span:nth-child(6n){color:var(--w5)}
[data-style="crayon"] .title span{display:inline-block;transform:rotate(calc((var(--i) * 37 % 9 - 4) * 1deg))}
[data-style="crayon"] .grade{color:var(--bad);text-shadow:3px 3px 0 color-mix(in srgb,var(--warn) 60%,transparent)}
[data-style="crayon"] .btn.primary{background:var(--c,var(--accent));color:var(--on-c);border:2px solid var(--line);box-shadow:var(--shadow)}
[data-style="crayon"] .opt{border:2px solid color-mix(in srgb,var(--line) 45%,transparent)}
[data-style="crayon"] .opt.right{border-color:var(--good)}[data-style="crayon"] .opt.wrong{border-color:var(--bad)}
[data-style="crayon"] .chip,[data-style="crayon"] .tag{border-radius:var(--r-sm)}
[data-style="crayon"] b{text-decoration:underline wavy color-mix(in srgb,var(--c,var(--accent)) 55%,transparent);text-underline-offset:4px;text-decoration-thickness:1.5px}
[data-style="crayon"] .math b,[data-style="crayon"] .chapter b,[data-style="crayon"] .sl b{text-decoration:none}
[data-style="crayon"] .curve{stroke-width:3.6;stroke-dasharray:none}
[data-style="crayon"] .curve.target{stroke-dasharray:12 6}
[data-style="crayon"] .stars i.on{background:var(--warn)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
::view-transition-old(root),::view-transition-new(root){animation-duration:.25s}