/* NET10 — premium & playful, mobile-only. Chunky "pressable" surfaces, warm palette, Spark the guide. */
:root {
  --bg: #fff8ef; --bg2: #fff1df; --surface: #ffffff; --ink: #1f1a3d; --muted: #77738f; --line: #efe6da;
  --accent: #6a4df4; --accent-d: #4f34d6; --accent-ink: #ffffff; --accent-soft: #efeaff;
  --sun: #ffc531; --sun-d: #e3a300; --sun-soft: #fff4cc;
  --good: #19b67e; --good-d: #0f9264; --good-soft: #ddf7ec; --bad: #ff5c62; --bad-d: #dc3e45; --bad-soft: #ffe7e6;
  --mid: #c27c00; --mid-soft: #fff1cf; --gold: #e19b00; --gold-soft: #fff4d4; --fire: #ff6a2b;
  --xpg1: #ffc531; --xpg2: #ff6a2b; --cardline: #f1e8dc;
  --r: 24px; --gap: 14px; --press: 0 4px 0 var(--cardline);
  --font: "Nunito", "Fredoka", "Segoe UI Variable Display", "Segoe UI", Roboto, system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15122b; --bg2: #1c1838; --surface: #221e42; --ink: #f2f0ff; --muted: #a6a2c4; --line: #322d5a;
    --accent: #8f78ff; --accent-d: #6a52e6; --accent-ink: #ffffff; --accent-soft: #2c2658;
    --sun: #ffc93e; --sun-d: #d79c00; --sun-soft: #3a321a;
    --good: #35d394; --good-d: #1fa874; --good-soft: #163a2e; --bad: #ff6f74; --bad-d: #d9474d; --bad-soft: #3d2030;
    --mid: #f2c14e; --mid-soft: #3a3016; --gold: #ffc93e; --gold-soft: #332a17; --cardline: #2d2852;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { font: 16px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; font-weight: 700; }
h1 { font-size: 1.65rem; line-height: 1.15; margin: 4px 0 14px; font-weight: 900; letter-spacing: -.02em; }
h2 { font-size: 1.1rem; margin: 0 0 10px; font-weight: 850; letter-spacing: -.01em; }
h3 { font-size: 1rem; margin: 0 0 8px; font-weight: 800; }
h4 { margin: 12px 0 6px; font-size: .95rem; font-weight: 800; }
p { margin: 8px 0; }
.muted { color: var(--muted); }
.small { font-size: .875rem; } .tiny { font-size: .76rem; }
.good { color: var(--good); } .bad { color: var(--bad); } .mid { color: var(--mid); }

/* ---------------------------------------------------------------- shell */
main { max-width: 520px; margin: 0 auto; padding: 8px 18px calc(104px + env(safe-area-inset-bottom)); }
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 18px; padding-top: calc(10px + env(safe-area-inset-top)); max-width: 520px; margin: 0 auto; background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.brand { font-weight: 900; color: var(--ink); letter-spacing: -.03em; font-size: 1.2rem; }
.brand span { color: var(--accent); }
.hud { display: flex; gap: 6px; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; min-height: 0; padding: 0 11px; border-radius: 999px; background: var(--surface); border: 2px solid var(--cardline); color: var(--ink); font-weight: 900; font-size: .88rem; font-variant-numeric: tabular-nums; box-shadow: 0 2px 0 var(--cardline); }
.chip.fire { color: var(--muted); } .chip.fire.on { color: var(--fire); }
.chip.snd { padding: 0 8px; cursor: pointer; }
.lvl { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 8px; font-weight: 900; font-size: .72rem; color: #fff; background: linear-gradient(135deg, var(--xpg1), var(--xpg2)); flex: none; }
.chip.xp { padding-left: 5px; }
.tabbar { position: fixed; z-index: 20; left: 50%; transform: translateX(-50%); bottom: calc(10px + env(safe-area-inset-bottom)); width: calc(100% - 24px); max-width: 496px; display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px; border-radius: 26px; background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 2px solid var(--cardline); box-shadow: 0 10px 30px rgba(31,26,61,.12); }
.tabbar a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 7px 0 6px; color: var(--muted); font-size: .66rem; font-weight: 800; border-radius: 18px; transition: background .2s, color .2s; }
.tabbar svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tabbar a.on { color: var(--accent); background: var(--accent-soft); }
.tabbar a.on svg { stroke-width: 2.5; }
.nbadge { position: absolute; top: 2px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--bad); color: #fff; font-size: .62rem; line-height: 18px; text-align: center; font-weight: 900; border: 2px solid var(--surface); }
.nbadge:empty { display: none; }
body.focus .tabbar, body.focus .top { display: none; }
body.focus main { padding-top: calc(12px + env(safe-area-inset-top)); padding-bottom: calc(170px + env(safe-area-inset-bottom)); }
.back { display: inline-block; margin: 0 0 6px; font-weight: 800; font-size: .95rem; }

/* ---------------------------------------------------------------- building blocks */
.card { background: var(--surface); border-radius: var(--r); padding: 18px; margin-bottom: var(--gap); border: 2px solid var(--cardline); box-shadow: var(--press); }
.label { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 4px; font-weight: 900; }
.rowh { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.rowh h1, .rowh h2 { margin-bottom: 10px; }
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: var(--sun-soft); color: var(--ink); font-weight: 900; font-size: .8rem; }
button, .filebtn { font: inherit; border: 2px solid var(--cardline); background: var(--surface); color: var(--ink); border-radius: 16px; padding: 10px 16px; cursor: pointer; min-height: 48px; font-weight: 800; touch-action: manipulation; box-shadow: 0 3px 0 var(--cardline); transition: transform .08s, box-shadow .08s; }
button:disabled { opacity: .45; cursor: default; }
button:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 0 0 var(--cardline); }
button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); box-shadow: 0 5px 0 var(--accent-d); }
button.primary:active:not(:disabled) { box-shadow: 0 1px 0 var(--accent-d); transform: translateY(4px); }
button.ghost { background: transparent; box-shadow: none; }
.big-btn { display: block; width: 100%; font-size: 1.08rem; min-height: 56px; border-radius: 18px; font-weight: 900; letter-spacing: .01em; }
.big-btn.go { background: var(--good); border-color: var(--good); color: #fff; box-shadow: 0 5px 0 var(--good-d); }
.big-btn.warn { background: var(--bad); border-color: var(--bad); color: #fff; box-shadow: 0 5px 0 var(--bad-d); }
.wide { display: block; width: 100%; margin-top: 10px; }
.links { display: flex; gap: 4px 18px; flex-wrap: wrap; margin-top: 12px; }
button.link, label.link { background: none; border: 0; box-shadow: none; padding: 6px 0; min-height: 36px; color: var(--accent); font-weight: 800; font-size: .92rem; cursor: pointer; }
label.link.under, button.link.under { display: block; width: 100%; text-align: center; margin: 8px 0 0; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.row > button { flex: 1; }
.filebtn { display: inline-flex; align-items: center; justify-content: center; flex: 1; }
.filebtn input { display: none; }
label { display: block; margin: 0 0 14px; font-weight: 800; font-size: .92rem; }
label.inline { display: inline-flex; gap: 8px; align-items: center; font-weight: 700; margin: 0 14px 12px 0; }
input, select, textarea { font: inherit; font-size: 16px; color: var(--ink); background: var(--bg); border: 2px solid var(--cardline); border-radius: 14px; padding: 12px 14px; width: 100%; margin-top: 6px; font-weight: 600; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
label.inline input { width: auto; margin: 0; accent-color: var(--accent); }
textarea { resize: vertical; }
.ok, .warn, .note, .flag, .slim { border-radius: 16px; padding: 11px 14px; margin: 10px 0; font-size: .9rem; font-weight: 600; }
.ok { background: var(--good-soft); } .warn { background: var(--mid-soft); } .note { background: var(--accent-soft); } .flag { background: var(--bad-soft); font-size: .86rem; }
.slim { margin: 0 0 var(--gap); }
.tag { font-size: .72rem; background: var(--accent-soft); color: var(--accent); border-radius: 6px; padding: 1px 6px; }
details > summary { cursor: pointer; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details.more > summary { display: flex; justify-content: space-between; align-items: center; font-weight: 850; }
details.more > summary::after { content: "›"; color: var(--muted); font-size: 1.4rem; line-height: 1; transition: transform .2s; }
details.more[open] > summary::after { transform: rotate(90deg); }
details.more[open] > summary { margin-bottom: 12px; }
.chips { display: flex; gap: 8px; overflow-x: auto; margin: 0 -18px 14px; padding: 2px 18px 4px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips a, .tabs a { flex: none; padding: 8px 15px; border-radius: 999px; background: var(--surface); border: 2px solid var(--cardline); color: var(--muted); font-size: .88rem; font-weight: 850; white-space: nowrap; }
.chips a.on, .tabs a.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.empty { text-align: center; padding: 40px 10px; color: var(--muted); font-weight: 700; }
.list { list-style: none; margin: 0; padding: 0; }
.list li a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 2px dashed var(--line); color: var(--ink); font-weight: 750; font-size: .95rem; }
.list li:last-child a { border-bottom: 0; }
.lr { display: flex; flex-direction: column; align-items: flex-end; flex: none; }
.linkcard { display: flex; justify-content: space-between; align-items: center; color: var(--ink); font-weight: 850; }
.linkcard span:last-child { color: var(--muted); font-size: 1.4rem; line-height: 1; }

/* bars */
.bar { margin: 14px 0; }
.bl { display: flex; justify-content: space-between; font-size: .92rem; font-weight: 800; }
.bt2 { height: 12px; background: var(--bg2); border-radius: 8px; overflow: hidden; margin-top: 6px; }
.bt2 i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), #9b86ff); border-radius: 8px; }
.xpbar { height: 12px; border-radius: 8px; background: var(--bg2); overflow: hidden; flex: 1; }
.xpbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--xpg1), var(--xpg2)); border-radius: 8px; transition: width .6s cubic-bezier(.2,.8,.2,1); box-shadow: inset 0 -3px 0 rgba(0,0,0,.08); }

/* ---------------------------------------------------------------- Spark + speech bubbles */
.mascot { display: block; overflow: visible; filter: drop-shadow(0 6px 10px rgba(255,122,42,.25)); }
.mascot.bob { animation: bob 3s ease-in-out infinite; }
.mascot.pop-in { animation: popin .6s cubic-bezier(.2,1.6,.4,1) both; margin: 0 auto 4px; }
.bubble { position: relative; background: var(--surface); color: var(--ink); border: 2px solid var(--cardline); border-radius: 18px; padding: 10px 14px; font-weight: 800; font-size: .95rem; box-shadow: 0 3px 0 var(--cardline); }
.bubble::before { content: ""; position: absolute; left: -9px; top: 50%; width: 14px; height: 14px; background: inherit; border-left: 2px solid var(--cardline); border-bottom: 2px solid var(--cardline); transform: translateY(-50%) rotate(45deg); }
.bubble.big { font-size: 1.02rem; margin: 6px auto 18px; max-width: 300px; text-align: center; }
.bubble.big::before { left: 50%; top: -9px; transform: translateX(-50%) rotate(135deg); }

/* ---------------------------------------------------------------- onboarding */
.ob { min-height: calc(100vh - 190px); display: flex; flex-direction: column; }
.obtop { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.obtop .x { width: 40px; height: 40px; min-height: 0; padding: 0; border-radius: 14px; font-size: 1.5rem; line-height: 1; flex: none; }
.obtop span.x { display: inline-block; }
.obdots { flex: 1; display: flex; gap: 6px; }
.obdots i { flex: 1; height: 8px; border-radius: 6px; background: var(--line); transition: background .3s; }
.obdots i.on { background: var(--accent); }
.obdots i.cur { background: linear-gradient(90deg, var(--accent), #a796ff); }
.obbody { flex: 1; animation: slidein .35s cubic-bezier(.2,.9,.3,1); }
.obhero { text-align: center; padding-top: 8px; }
.obhero .mascot { margin: 0 auto 6px; }
.obtitle { font-size: 2.1rem; margin: 6px 0 8px; }
.obtitle span { background: linear-gradient(90deg, var(--accent), var(--fire)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.obhead { display: flex; align-items: center; gap: 14px; margin: 6px 0 20px; }
.obhead .mascot { flex: none; }
.obhead .bubble { flex: 1; font-size: 1.05rem; }
.feat { display: flex; gap: 14px; align-items: flex-start; background: var(--surface); border: 2px solid var(--cardline); box-shadow: var(--press); border-radius: 20px; padding: 14px; margin-bottom: 12px; }
.feat b { display: block; font-weight: 900; }
.feat span:not(.fic) { display: block; font-size: .87rem; color: var(--muted); font-weight: 600; line-height: 1.4; margin-top: 2px; }
.fic { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 15px; font-size: 1.4rem; }
.f1 { background: var(--accent-soft); } .f2 { background: var(--sun-soft); } .f3 { background: var(--good-soft); } .f4 { background: var(--bad-soft); }
.choices { display: grid; gap: 10px; }
.choice { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 12px 14px; min-height: 66px; border-radius: 20px; background: var(--surface); }
.choice.sel { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 4px 0 var(--accent); }
.cic { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; background: var(--bg2); font-size: 1.3rem; }
.choice.sel .cic { background: var(--surface); }
.ctx { flex: 1; min-width: 0; }
.ctx b { display: block; font-weight: 900; font-size: 1rem; }
.ctx span { display: block; color: var(--muted); font-size: .82rem; font-weight: 650; line-height: 1.35; }
.cbadge { flex: none; font-size: .66rem; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; color: var(--accent-d); background: var(--sun); padding: 4px 8px; border-radius: 999px; }
.obnote { margin-top: 16px; padding: 12px 14px; border-radius: 16px; background: var(--sun-soft); font-size: .88rem; font-weight: 650; }
.bigin { font-size: 1.3rem; font-weight: 800; padding: 16px 18px; border-radius: 18px; background: var(--surface); }
.obstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 18px 0 10px; }
.obstats div { background: var(--surface); border: 2px solid var(--cardline); box-shadow: var(--press); border-radius: 18px; padding: 12px 4px; display: flex; flex-direction: column; }
.obstats b { font-size: 1.3rem; font-weight: 900; color: var(--accent); }
.obstats span { font-size: .7rem; color: var(--muted); font-weight: 800; }
.ob .more { text-align: left; margin-top: 12px; }

/* ---------------------------------------------------------------- home */
.hello { display: flex; align-items: center; gap: 12px; margin: 4px 2px 14px; }
.hello h1 { margin: 0; font-size: 1.45rem; }
.av { flex: none; width: 46px; height: 46px; border-radius: 16px; display: grid; place-items: center; font-weight: 900; font-size: 1.2rem; color: #fff; background: linear-gradient(135deg, var(--accent), #b29bff); box-shadow: 0 4px 0 var(--accent-d); }
.hero2 { position: relative; overflow: hidden; border-radius: 28px; padding: 18px 18px 16px; margin-bottom: var(--gap); color: #fff; background: radial-gradient(120% 90% at 100% 0%, #9b80ff 0%, transparent 55%), linear-gradient(150deg, #6a4df4 0%, #5233d8 60%, #4024b8 100%); box-shadow: 0 6px 0 #3a1fa8, 0 18px 40px rgba(82,51,216,.3); }
.hero2::after { content: ""; position: absolute; right: -40px; bottom: -60px; width: 180px; height: 180px; border-radius: 50%; background: rgba(255,255,255,.07); }
.h2top { display: flex; justify-content: space-between; align-items: flex-start; }
.h2day { font-size: 2.6rem; font-weight: 900; line-height: 1; letter-spacing: -.03em; }
.h2day span { font-size: 1.2rem; opacity: .6; }
.h2sub { font-size: .85rem; opacity: .8; font-weight: 700; margin-top: 4px; }
.hero2 .bubble { background: rgba(255,255,255,.16); color: #fff; border-color: transparent; box-shadow: none; margin: 8px 0 14px; font-size: .9rem; }
.hero2 .bubble::before { display: none; }
.h2goal { position: relative; z-index: 1; }
.h2gl { font-size: .85rem; font-weight: 700; opacity: .9; margin-bottom: 6px; } .h2gl b { font-size: 1.15rem; opacity: 1; }
.h2bar { height: 14px; border-radius: 10px; background: rgba(255,255,255,.18); overflow: hidden; }
.h2bar i { display: block; height: 100%; border-radius: 10px; background: linear-gradient(90deg, var(--sun), #ff9b3d); box-shadow: inset 0 -3px 0 rgba(0,0,0,.12); transition: width .8s cubic-bezier(.2,.8,.2,1); }
.h2streak { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: .82rem; font-weight: 800; }
.h2streak .sdots { flex: 1; margin: 0; }
.sdots { display: flex; gap: 5px; margin: 8px 0 10px; }
.sdots i { flex: 1; height: 8px; border-radius: 4px; background: rgba(127,127,160,.25); }
.hero2 .sdots i { background: rgba(255,255,255,.2); }
.sdots i.on, .hero2 .sdots i.on { background: var(--sun); }
.sdots i.today { box-shadow: 0 0 0 2px rgba(255,255,255,.85); }
.upnext .ntop { display: flex; gap: 14px; align-items: center; }
.nic { flex: none; width: 54px; height: 54px; border-radius: 18px; display: grid; place-items: center; font-size: 1.6rem; background: var(--accent-soft); }
.nic.t-diagnostic { background: var(--sun-soft); } .nic.t-review { background: var(--good-soft); } .nic.t-mock { background: var(--bad-soft); }
.ntitle { font-size: 1.15rem; font-weight: 900; line-height: 1.25; }
.upnext p { margin: 10px 0 0; }
.upnext .big-btn { margin-top: 14px; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin-bottom: var(--gap); }
.tiles.three { grid-template-columns: repeat(3, 1fr); }
.tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding: 14px 16px; border-radius: 22px; background: var(--surface); color: var(--ink); min-height: 0; font-weight: 600; }
.tic { position: absolute; right: 12px; top: 12px; font-size: 1.3rem; }
.tile b { font-size: 1.8rem; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tile span:not(.tic) { font-size: .8rem; color: var(--muted); font-weight: 750; }
.tile em { font-style: normal; font-size: .76rem; font-weight: 900; color: var(--accent); margin-top: 6px; }
.tile.hot { background: linear-gradient(160deg, #fff4ec, var(--surface)); border-color: #ffd9c2; box-shadow: 0 3px 0 #ffd0b3; }
.tile.hot b, .tile.hot em { color: var(--fire); }
.tile:disabled { opacity: 1; } .tile:disabled em { color: var(--muted); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tile.hot { background: var(--surface); border-color: #5a3326; box-shadow: 0 3px 0 #5a3326; } }
.quests .rowh h2 { margin: 0; }
.chesttag { font-size: .8rem; font-weight: 900; padding: 4px 10px; border-radius: 999px; background: var(--sun-soft); }
.chesttag.open { background: var(--good-soft); color: var(--good-d); }
.quest { display: flex; align-items: center; gap: 12px; padding: 12px 0 2px; }
.qi { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 13px; background: var(--bg2); font-size: 1.15rem; }
.quest.done .qi { background: var(--good); color: #fff; font-weight: 900; }
.qb { flex: 1; min-width: 0; }
.qt { font-weight: 800; font-size: .92rem; }
.quest.done .qt { color: var(--muted); }
.qbar { height: 10px; border-radius: 6px; background: var(--bg2); overflow: hidden; margin-top: 6px; }
.qbar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--sun), var(--fire)); }
.quest.done .qbar i { background: var(--good); }
.qn { flex: none; font-weight: 900; font-size: .82rem; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 42px; text-align: right; }
.quest.done .qn { color: var(--good); }
.chest { font-size: 4.2rem; animation: wiggle 1s ease-in-out 2; }
.blocks { list-style: none; padding: 0; margin: 0; }
.blocks li { display: flex; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 2px dashed var(--line); font-size: .93rem; font-weight: 700; }
.blocks li:last-child { border-bottom: 0; }
.ic { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--bg2); font-size: 1rem; }
li.done .ic { background: var(--good); color: #fff; font-weight: 900; }
.bt { flex: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; }
.bt a { color: var(--ink); font-weight: 750; }
.bt .tstars { margin-left: 6px; }
.bm { color: var(--muted); font-size: .8rem; white-space: nowrap; font-weight: 800; font-variant-numeric: tabular-nums; }
li.done .bt, li.done .bt a { color: var(--muted); }
li.missed .bm { color: var(--bad); }

/* ---------------------------------------------------------------- journey map */
.jsub { margin: -4px 2px 6px; }
.journey { position: relative; margin: 0 0 var(--gap); }
.jpath { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.jpath .jbg { fill: none; stroke: var(--line); stroke-width: 14; stroke-linecap: round; }
.jpath .jfg { display: none; }
.jnode { position: absolute; transform: translate(-50%, -50%); width: 76px; height: 76px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; box-shadow: none; }
.jnode:active:not(:disabled) { transform: translate(-50%, -46%); }
.jring { position: absolute; inset: -6px; border-radius: 50%; background: conic-gradient(var(--sun) calc(var(--f) * 1%), transparent 0); opacity: .9; }
.jnode.future .jring, .jnode.done .jring { display: none; }
.jcore { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; font-weight: 900; font-size: 1.5rem; color: var(--muted); background: var(--surface); border: 3px solid var(--cardline); box-shadow: 0 6px 0 var(--cardline); }
.jnode.done .jcore { background: linear-gradient(160deg, #ffd65c, var(--sun-d)); color: #fff; border-color: var(--sun-d); box-shadow: 0 6px 0 #b98300; font-size: 1.8rem; }
.jnode.today .jcore { background: linear-gradient(160deg, #8f78ff, var(--accent)); color: #fff; border-color: var(--accent-d); box-shadow: 0 6px 0 var(--accent-d); }
.jnode.today::before { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 3px solid var(--accent); opacity: .35; animation: pulse 2s ease-out infinite; }
.jnode.past .jcore { color: var(--bad); border-color: #ffc9c5; }
.jspark { position: absolute; top: -40px; left: 50%; transform: translateX(-50%); animation: bob 3s ease-in-out infinite; }
.jlbl { position: absolute; top: 50%; transform: translateY(-50%); width: 120px; text-align: left; pointer-events: none; }
.jlbl.r { left: calc(100% + 14px); } .jlbl.l { right: calc(100% + 14px); text-align: right; }
.jlbl b { display: block; font-weight: 900; font-size: .95rem; color: var(--ink); }
.jlbl span { display: block; font-size: .76rem; color: var(--muted); font-weight: 750; }
.sheetlist { text-align: left; max-height: 50vh; overflow: auto; margin-top: 8px; padding-right: 4px; }

/* ---------------------------------------------------------------- topic */
.topichead { text-align: center; margin: 4px 0 14px; }
.topichead h1 { margin: 4px 0 6px; font-size: 1.4rem; }
.dots9 { display: flex; gap: 5px; margin: 10px 0 4px; }
.dots9 i { flex: 1; height: 8px; border-radius: 4px; background: var(--line); }
.dots9 i.on { background: var(--good); } .dots9 i.cur { background: var(--accent); }
.pages, .docs, .fb { padding-left: 20px; font-size: .9rem; margin: 6px 0; }
.pages li, .docs li { margin: 4px 0; }
.pages li.done { color: var(--muted); text-decoration: line-through; }
.fb li { margin-bottom: 10px; }
.cols { padding-left: 18px; font-size: .9rem; }
.mission ul { padding-left: 20px; }
.aar { border-top: 2px dashed var(--line); padding-top: 8px; margin-top: 8px; }
.aar p { margin: 3px 0; font-size: .9rem; }

/* practice */
.quick { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin-bottom: var(--gap); }
.qcard { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 16px; border-radius: 22px; background: var(--surface); font-size: 1.7rem; text-align: left; min-height: 0; }
.qcard:nth-child(1) { background: var(--accent-soft); } .qcard:nth-child(2) { background: var(--sun-soft); } .qcard:nth-child(3) { background: var(--good-soft); } .qcard:nth-child(4) { background: var(--bad-soft); }
.qcard b { font-size: 1rem; margin-top: 8px; font-weight: 900; }
.qcard span { font-size: .8rem; color: var(--muted); font-weight: 750; }

/* mistakes */
.err > summary { display: flex; flex-direction: column; gap: 4px; }
.etitle { font-weight: 800; font-size: .95rem; line-height: 1.35; }
.err[open] > summary { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 2px dashed var(--line); }
.err.conf { border-left: 6px solid var(--bad); }
.err .row select, .err .row input { flex: 1; min-width: 140px; margin: 0; }
.err > div { margin: 6px 0; font-size: .92rem; }

/* me */
.rankcard { text-align: center; background: linear-gradient(180deg, var(--sun-soft), var(--surface) 65%); }
.avatar { position: relative; width: 96px; margin: 0 auto 6px; }
.avatar .mascot { margin: 0 auto; }
.avatar .rk-badge { position: absolute; right: -6px; bottom: 0; width: 38px; height: 38px; font-size: 1rem; border-radius: 12px; border: 3px solid var(--surface); }
.rankcard .rk-name { font-size: 1.5rem; margin: 2px 0 10px; }
.rankcard .xpbar { margin: 0 auto 6px; max-width: 280px; }
.stats4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 16px; }
.stats4 div { display: flex; flex-direction: column; background: var(--surface); border: 2px solid var(--cardline); border-radius: 16px; padding: 8px 2px; }
.stats4 b { font-size: 1.15rem; font-weight: 900; }
.stats4 span { font-size: .68rem; color: var(--muted); font-weight: 800; }
.rk-badge { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; transform: rotate(-4deg); color: #fff; font-size: 1.5rem; font-weight: 900; background: linear-gradient(135deg, var(--xpg1), var(--xpg2)); box-shadow: 0 4px 0 #c44a14; margin: 0 auto 6px; }
.rk-badge.xl { width: 84px; height: 84px; font-size: 2.3rem; border-radius: 24px; margin: 4px auto 10px; animation: popin .6s cubic-bezier(.2,1.4,.4,1); }
.badges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.bdg { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border-radius: 16px; background: var(--bg); border: 2px solid var(--cardline); box-shadow: 0 2px 0 var(--cardline); min-height: 0; font-weight: 600; }
.bdg .bi { font-size: 1.6rem; filter: grayscale(1); opacity: .4; }
.bdg .bn { font-size: .64rem; line-height: 1.2; color: var(--muted); text-align: center; font-weight: 800; }
.bdg.on { background: var(--gold-soft); border-color: #ffd97a; box-shadow: 0 3px 0 #f2c54a; }
.bdg.on .bi { filter: none; opacity: 1; }
.bdg.on .bn { color: var(--ink); }
.xprules { list-style: none; padding: 0; margin: 12px 0 4px; }
.xprules li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 2px dashed var(--line); font-size: .92rem; font-weight: 700; }
.xprules li > b { color: var(--gold); white-space: nowrap; font-weight: 900; }
.rules > summary { display: flex; justify-content: space-between; } .rules > summary::after { content: "›"; color: var(--muted); }

/* ---------------------------------------------------------------- session (focus mode) */
.sesshead { display: flex; align-items: center; gap: 12px; margin: 0 0 6px; }
.sesshead .x { width: 40px; height: 40px; min-height: 0; padding: 0; border-radius: 50%; border: 0; box-shadow: none; background: transparent; color: var(--muted); font-size: 1.3rem; flex: none; }
.sprog { flex: 1; height: 16px; border-radius: 10px; background: var(--line); overflow: hidden; }
.sprog i { position: relative; display: block; height: 100%; border-radius: 10px; background: linear-gradient(90deg, var(--good), #48e0a4); transition: width .5s cubic-bezier(.2,.8,.2,1); }
.sprog i::after { content: ""; position: absolute; left: 8px; right: 8px; top: 4px; height: 4px; border-radius: 3px; background: rgba(255,255,255,.4); }
.combo { font-weight: 900; color: var(--muted); font-variant-numeric: tabular-nums; }
.combo:empty { display: none; }
.combo.hot { color: var(--fire); }
.combo.bump { animation: bump .35s ease-out; }
.sxp { font-weight: 900; font-size: .9rem; color: var(--gold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ssub { font-size: .8rem; color: var(--muted); margin: 0 4px 14px 52px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.ssub b { color: var(--ink); font-weight: 850; }
.intro { font-size: .9rem; color: var(--muted); margin: -4px 4px 12px; font-weight: 650; }
.qmeta { display: flex; justify-content: space-between; gap: 10px; font-size: .74rem; color: var(--muted); margin-bottom: 8px; font-weight: 700; }
.qmeta > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stem { font-size: 1.1rem; line-height: 1.5; margin: 4px 0 16px; font-weight: 800; }
.passage { background: var(--bg); border-radius: 14px; padding: 10px 12px; margin-bottom: 12px; font-size: .92rem; max-height: 300px; overflow: auto; }
.passage summary { color: var(--muted); font-weight: 800; }
.opts { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.opt { width: 100%; text-align: left; display: flex; gap: 12px; align-items: center; padding: 12px 14px; min-height: 58px; border-radius: 18px; font-weight: 700; box-shadow: 0 4px 0 var(--cardline); }
.opt b { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; border: 2px solid var(--cardline); font-size: .82rem; color: var(--muted); }
.opt.sel { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 4px 0 var(--accent); }
.opt.sel b { border-color: var(--accent); background: var(--accent); color: #fff; }
.opts.static li { border: 2px solid var(--cardline); border-radius: 18px; padding: 12px 14px; display: flex; gap: 10px; font-size: .95rem; font-weight: 700; }
.opts.static li b { flex: none; }
.opts li.right, .tbl tr.right td { background: var(--good-soft); border-color: var(--good); }
.opts li.wrong, .tbl tr.wrong td { background: var(--bad-soft); border-color: var(--bad); }
.opts li.glow { animation: glow 1.2s ease-out; }
.vnote { margin: 14px 0 4px; padding: 10px 12px; border-radius: 14px; background: var(--bg); font-size: .88rem; font-weight: 650; }
/* bottom dock */
.dock { position: fixed; z-index: 15; left: 50%; transform: translateX(-50%); bottom: 0; width: 100%; max-width: 520px; padding: 14px 18px calc(16px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 2px solid var(--cardline); border-radius: 26px 26px 0 0; box-shadow: 0 -10px 30px rgba(31,26,61,.08); }
.dock.fbk { animation: sheet .35s cubic-bezier(.2,1.1,.3,1); }
.dock.fbk.good { background: var(--good-soft); border-color: transparent; }
.dock.fbk.bad { background: var(--bad-soft); border-color: transparent; }
.fbrow { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.fbrow .mascot { flex: none; filter: none; }
.dock .verdict { flex: 1; margin: 0; padding: 0; background: none; font-size: 1.35rem; font-weight: 900; line-height: 1.1; }
.dock .verdict small { display: block; font-size: .82rem; font-weight: 800; opacity: .8; margin-top: 3px; }
.dock .verdict.good { color: var(--good-d); } .dock .verdict.bad { color: var(--bad-d); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dock .verdict.good { color: var(--good); } :root:not([data-theme="light"]) .dock .verdict.bad { color: var(--bad); } }
.dlabel { font-size: .8rem; font-weight: 850; color: var(--muted); margin-bottom: 10px; text-align: center; }
.seg { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; }
.seg button { min-height: 54px; border-radius: 16px; font-weight: 900; }
.seg button[data-c="sure"], .seg button[data-v="1"] { background: var(--good); border-color: var(--good); color: #fff; box-shadow: 0 5px 0 var(--good-d); }
.conf.off .seg button { opacity: .35; pointer-events: none; }
.card .conf { margin-top: 16px; }
.verdict { font-weight: 850; margin: 14px 0; padding: 14px 16px; border-radius: 18px; font-size: 1.02rem; }
.verdict.good { background: var(--good-soft); color: var(--good-d); } .verdict.bad { background: var(--bad-soft); color: var(--bad-d); } .verdict.mid { background: var(--mid-soft); color: var(--mid); }
.verdict.pop { animation: pop .45s cubic-bezier(.2,1.6,.4,1); }
.verdict.shake { animation: shake .4s ease-in-out; }
.vxp { float: right; color: var(--gold); font-weight: 900; font-variant-numeric: tabular-nums; font-size: 1rem; }
.dock .vxp { float: none; display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: var(--surface); font-size: .85rem; vertical-align: middle; }
.explain { border-left: 4px solid var(--accent); padding: 2px 12px; margin: 12px 0; font-size: .95rem; font-weight: 600; }
.explain p { margin: 4px 0; }
.hint { background: var(--bg); border-radius: 14px; padding: 10px 12px; margin: 10px 0; font-size: .9rem; }
.hint > div { margin: 2px 0; }
.topicfix { margin-top: 10px; }
.timer { font-variant-numeric: tabular-nums; font-weight: 900; color: var(--muted); text-align: right; font-size: .85rem; margin: -6px 4px 8px; }
.timer.over { color: var(--bad); }
.page { font-size: 1rem; line-height: 1.65; }
.page .ph { font-weight: 900; margin-top: 12px; }
.page .pl { margin: 1px 0; }
.two { display: grid; grid-template-columns: 1fr; gap: 12px; }
.mine { background: var(--bg); border-radius: 14px; padding: 10px 12px; white-space: pre-wrap; font-size: .92rem; min-height: 60px; }
mark { background: var(--sun-soft); color: inherit; padding: 0 2px; border-radius: 4px; }
.rubric { margin: 12px 0; font-size: .9rem; }
.rubric span { display: inline-block; margin: 2px; padding: 2px 8px; border-radius: 8px; font-weight: 700; }
.rubric .hit { background: var(--good-soft); } .rubric .miss { background: var(--line); }
.stagedone { text-align: center; }
.stagedone .big-btn { margin-top: 14px; }
.sbigpct { font-size: 2.6rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.tbl { width: 100%; border-collapse: collapse; font-size: .9rem; margin: 6px 0 10px; display: block; overflow-x: auto; }
.tbl th, .tbl td { text-align: left; padding: 8px; border-bottom: 2px dashed var(--line); vertical-align: top; }
.tbl th { color: var(--muted); font-weight: 800; }
.match select { margin: 0; }
.palette { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 6px; margin-bottom: 12px; }
.palette button { min-height: 40px; padding: 0; font-size: .82rem; border-radius: 12px; }
.palette .ans { background: var(--accent-soft); }
.palette .flg { border-color: var(--sun-d); }
.palette .cur { border-color: var(--accent); }
.src { white-space: nowrap; } .cite { color: var(--muted); font-weight: 700; }
.hero { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: var(--gap); }
.hero > div { background: var(--surface); border: 2px solid var(--cardline); border-radius: 20px; padding: 12px; }
.big { font-size: 1.35rem; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; }
.grid2 { display: grid; gap: var(--gap); margin-bottom: var(--gap); } .grid2 > .card { margin-bottom: 0; }

/* ---------------------------------------------------------------- rewards */
.reward { text-align: center; }
.rewardcard { background: linear-gradient(180deg, var(--sun-soft), var(--surface) 70%); }
.mtitle { font-size: 1.7rem; margin: 2px 0 6px; font-weight: 900; }
.stars { display: inline-flex; gap: 4px; }
.stars i { font-style: normal; color: var(--line); }
.stars i.on { color: var(--sun); text-shadow: 0 3px 0 var(--sun-d); }
.stars.big { font-size: 2.8rem; margin: 4px 0; } .stars.big i.on { animation: starin .5s cubic-bezier(.2,1.6,.4,1) both; animation-delay: var(--d); }
.stars.sm { font-size: .74rem; gap: 0; } .stars.sm i.on { text-shadow: none; }
.tstars { white-space: nowrap; }
.rstats { display: flex; justify-content: center; gap: 10px; margin: 14px 0; }
.rstats div { flex: 1; max-width: 110px; display: flex; flex-direction: column; background: var(--surface); border: 2px solid var(--cardline); border-radius: 18px; padding: 10px 4px; box-shadow: var(--press); }
.rstats b { font-size: 1.6rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.rstats b.countup { color: var(--gold); }
.rstats span { font-size: .72rem; color: var(--muted); font-weight: 800; }
.bonus { list-style: none; padding: 0; margin: 8px auto; text-align: left; }
.bonus li { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 2px dashed var(--line); font-size: .92rem; font-weight: 750; }
.bonus b { color: var(--gold); font-weight: 900; }

/* toasts, confetti, bottom sheet */
#fx-toasts { position: fixed; top: calc(12px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; width: min(92vw, 380px); }
.toast { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 9px 20px; border-radius: 20px; background: var(--ink); color: var(--bg); box-shadow: 0 12px 30px rgba(0,0,0,.2); animation: tin .4s cubic-bezier(.2,1.6,.4,1); transition: opacity .35s, transform .35s; line-height: 1.25; }
.toast b { font-size: 1rem; font-weight: 900; }
.toast span { font-size: .76rem; opacity: .9; font-weight: 700; }
.toast.good { background: var(--good); color: #fff; box-shadow: 0 4px 0 var(--good-d), 0 12px 30px rgba(0,0,0,.15); }
.toast.gold { background: linear-gradient(135deg, var(--xpg1), var(--xpg2)); color: #fff; box-shadow: 0 4px 0 #c44a14, 0 12px 30px rgba(0,0,0,.15); }
.toast.bad { background: var(--bad); color: #fff; box-shadow: 0 4px 0 var(--bad-d), 0 12px 30px rgba(0,0,0,.15); }
.toast.mid { background: var(--mid); color: #fff; }
.toast.out { opacity: 0; transform: translateY(-10px); }
#fx-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 70; }
#fx-modal { position: fixed; inset: 0; z-index: 65; display: none; align-items: flex-end; justify-content: center; background: rgba(21,18,43,.55); backdrop-filter: blur(4px); }
#fx-modal.on { display: flex; }
.mbox { position: relative; background: var(--surface); border-radius: 30px 30px 0 0; padding: 22px 20px calc(20px + env(safe-area-inset-bottom)); width: 100%; max-width: 520px; text-align: center; animation: sheet .45s cubic-bezier(.2,1.1,.3,1); max-height: 92vh; overflow: auto; }
.mbox .grab { display: block; width: 44px; height: 5px; border-radius: 4px; background: var(--line); margin: -8px auto 14px; }
.mbox .big-btn { margin-top: 16px; }
.mbox .mascot { margin: 0 auto 4px; }

@keyframes pop { 0% { transform: scale(.88); opacity: .3; } 100% { transform: scale(1); opacity: 1; } }
@keyframes popin { 0% { transform: scale(.3) translateY(20px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes shake { 0%,100% { transform: translateX(0); } 20%,60% { transform: translateX(-6px); } 40%,80% { transform: translateX(6px); } }
@keyframes glow { 0% { box-shadow: 0 0 0 0 rgba(25,182,126,.55); } 100% { box-shadow: 0 0 0 12px rgba(25,182,126,0); } }
@keyframes bump { 40% { transform: scale(1.45); } }
@keyframes starin { 0% { transform: scale(0) rotate(-90deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes tin { 0% { transform: translateY(-16px) scale(.85); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes sheet { 0% { transform: translate(var(--tx, 0), 100%); } 100% { transform: translate(var(--tx, 0), 0); } }
@keyframes slidein { 0% { transform: translateX(24px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes pulse { 0% { transform: scale(.85); opacity: .5; } 100% { transform: scale(1.25); opacity: 0; } }
@keyframes wiggle { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-12deg) scale(1.1); } 75% { transform: rotate(12deg) scale(1.1); } }
.dock.fbk { --tx: -50%; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* splash while data loads */
.splash { min-height: 80vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.sbrand { font-size: 2.2rem; font-weight: 900; letter-spacing: -.03em; margin-top: 6px; } .sbrand span { color: var(--accent); }
.sdots3 { display: flex; gap: 8px; margin: 18px 0 6px; } .sdots3 i { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); animation: bob 1s ease-in-out infinite; } .sdots3 i:nth-child(2) { animation-delay: .15s; } .sdots3 i:nth-child(3) { animation-delay: .3s; }

/* flow polish */
.blocks li.tap { cursor: pointer; border-radius: 14px; transition: background .15s; }
.blocks li.tap:active { background: var(--accent-soft); }
.blocks .go { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: .7rem; }
#nx.auto { position: relative; overflow: hidden; }
#nx.auto::after { content: ""; position: absolute; left: 0; bottom: 0; height: 5px; width: 100%; background: rgba(255,255,255,.55); transform-origin: left; animation: autofill 1.7s linear forwards; }
@keyframes autofill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.stagechips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 10px 0 4px; }
.stagechips span { padding: 5px 10px; border-radius: 999px; font-size: .78rem; font-weight: 800; background: var(--surface); border: 2px solid var(--cardline); }
.stagechips span.ok b { color: var(--good-d); } .stagechips span.lo b { color: var(--bad-d); }
.reward .mascot { margin-bottom: 10px !important; }
.intro { background: var(--accent-soft); color: var(--ink); border-radius: 14px; padding: 10px 14px; margin: 0 0 12px; }.page p.pl { margin: 0 0 10px; }

/* ---------------------------------------------------------------- smart lessons */
:root { --h1: #6a4df4; --h1s: #efeaff; --h2: #0f9b78; --h2s: #ddf5ec; --h3: #e0582f; --h3s: #ffe9e0; --h4: #c98a00; --h4s: #fff2cc; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --h1: #b3a4ff; --h1s: #2c2658; --h2: #4fd8ad; --h2s: #163a2e; --h3: #ff9a76; --h3s: #3d2420; --h4: #ffd166; --h4s: #3a3016; } }
.viewtog { display: flex; gap: 6px; margin: 0 0 12px; }
.viewtog button { flex: 1; min-height: 40px; padding: 6px 10px; font-size: .86rem; border-radius: 14px; box-shadow: none; }
.viewtog button.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.lesson { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.lcard { background: var(--surface); border: 2px solid var(--cardline); border-radius: 22px; padding: 16px; box-shadow: var(--press); animation: slidein .3s ease both; }
.lk { font-size: .68rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.snap { background: linear-gradient(160deg, var(--accent-soft), var(--surface) 70%); }
.lh { font-size: 1.2rem; font-weight: 900; line-height: 1.25; margin-bottom: 6px; }
.lsteps { margin: 4px 0 8px; padding-left: 20px; font-size: .88rem; font-weight: 700; color: var(--muted); }
.lmeta { font-size: .76rem; font-weight: 800; color: var(--muted); margin-top: 8px; }
.lsec { font-size: .95rem; font-weight: 900; margin: 6px 4px -2px; color: var(--ink); }
.lchips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.pc { font-size: .8rem; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: var(--bg2); }
.pc.h1 { background: var(--h1s); color: var(--h1); } .pc.h2 { background: var(--h2s); color: var(--h2); } .pc.h3 { background: var(--h3s); color: var(--h3); } .pc.h4 { background: var(--h4s); color: var(--h4); }
.pc.w { background: var(--accent-soft); color: var(--accent); font-style: italic; } .pc.f { background: var(--sun-soft); color: var(--ink); }
.cl { font-size: .7rem; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-top: 10px; }
.ent .eh { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.ent .eh b { font-size: 1.05rem; font-weight: 900; display: block; line-height: 1.2; }
.ent .life { display: inline-block; margin-top: 3px; font-size: .74rem; font-weight: 900; padding: 2px 8px; border-radius: 999px; background: var(--sun-soft); }
.av { flex: none; width: 44px; height: 44px; border-radius: 15px; display: grid; place-items: center; font-weight: 900; font-size: .95rem; }
.av.h1 { background: var(--h1s); color: var(--h1); } .av.h2 { background: var(--h2s); color: var(--h2); } .av.h3 { background: var(--h3s); color: var(--h3); } .av.h4 { background: var(--h4s); color: var(--h4); }
.et, .lp { font-size: .98rem; line-height: 1.6; font-weight: 600; margin: 0; }
.attrs, .lbul { margin: 0; padding-left: 0; list-style: none; }
.attrs li, .lbul li { position: relative; padding: 6px 0 6px 22px; font-size: .95rem; font-weight: 600; line-height: 1.5; border-bottom: 2px dashed var(--line); }
.attrs li:last-child, .lbul li:last-child { border-bottom: 0; }
.attrs li::before, .lbul li::before { content: ""; position: absolute; left: 4px; top: 14px; width: 9px; height: 9px; border-radius: 3px; background: var(--accent); transform: rotate(45deg); }
.kv { font-size: .92rem; margin-top: 8px; font-weight: 600; } .kv b { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
b.yr { font-weight: 900; color: var(--h3); background: var(--h3s); padding: 0 5px; border-radius: 6px; }
b.nm { font-weight: 900; color: var(--accent); }
q.qt { quotes: none; font-style: italic; font-weight: 800; background: var(--sun-soft); padding: 0 4px; border-radius: 5px; }
.callout { background: var(--sun-soft); border-color: var(--sun); }
.callout .lk { color: var(--mid); }
.groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.grp { border-radius: 16px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.grp:nth-child(odd):last-child { grid-column: 1 / -1; }
.grp b { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 900; margin-bottom: 2px; }
.grp span { font-weight: 800; font-size: .92rem; color: var(--ink); }
.grp em { font-style: normal; font-size: .76rem; font-weight: 650; color: var(--ink); opacity: .85; margin-top: 4px; }
.grp.h1 { background: var(--h1s); color: var(--h1); } .grp.h2 { background: var(--h2s); color: var(--h2); } .grp.h3 { background: var(--h3s); color: var(--h3); } .grp.h4 { background: var(--h4s); color: var(--h4); }
.tl { display: block; margin: 2px 0 6px; overflow: visible; }
.tl-axis { stroke: var(--line); stroke-width: 3; stroke-linecap: round; }
.tl-tick { font-size: 10px; font-weight: 800; fill: var(--muted); font-family: var(--font); }
.tl-life { fill: var(--h1s); stroke: var(--h1); stroke-width: 1.5; }
.tl-lt { font-size: 10.5px; font-weight: 900; fill: var(--h1); font-family: var(--font); }
.tl-stem { stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 2 3; }
.tl-dot { fill: var(--h3); stroke: var(--surface); stroke-width: 2; } .tl-dot.f { fill: var(--h4); }
.tl-ev { font-size: 11px; font-weight: 800; fill: var(--ink); font-family: var(--font); }
.hooks { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.hook { font-size: .88rem; font-weight: 750; padding: 9px 12px; border-radius: 14px; background: var(--sun-soft); line-height: 1.4; }
.ytab { list-style: none; margin: 0; padding: 0 0 0 6px; border-left: 3px solid var(--line); }
.ytab li { position: relative; display: flex; gap: 10px; padding: 8px 0 8px 10px; }
.ytab li::before { content: ""; position: absolute; left: -9px; top: 16px; width: 12px; height: 12px; border-radius: 50%; background: var(--h3); border: 2px solid var(--surface); }
.yb { flex: none; font-weight: 900; font-size: .85rem; color: var(--h3); background: var(--h3s); border-radius: 8px; padding: 2px 7px; height: fit-content; margin-top: 1px; }
.ytab b { display: block; font-weight: 900; font-size: .95rem; line-height: 1.3; }
.ytab .who { display: block; font-size: .8rem; font-weight: 800; color: var(--accent); }
.ytab p { margin: 3px 0 0; font-size: .84rem; color: var(--muted); font-weight: 600; line-height: 1.4; }
.rowcard { border-top: 2px dashed var(--line); padding: 10px 0 4px; }
.rowcard:first-of-type { border-top: 0; padding-top: 0; }
.rowcard b { font-weight: 900; font-size: 1rem; display: block; }
.rowcard .rtags { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.rowcard p { margin: 2px 0 0; font-size: .9rem; font-weight: 600; line-height: 1.5; }
.qo { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 6px; }
.qo li { border: 2px solid var(--cardline); border-radius: 14px; padding: 8px 12px; font-weight: 700; font-size: .92rem; }
.qo li b { color: var(--muted); margin-right: 6px; }
.qcardx details summary { font-weight: 850; color: var(--accent); padding: 6px 0; }
.chk { background: linear-gradient(160deg, var(--h2s), var(--surface) 75%); border-color: var(--good-soft); }
.chk .lk { color: var(--good-d); }
.cq { font-weight: 850; font-size: 1rem; line-height: 1.4; margin-bottom: 10px; }
.copts { display: grid; gap: 8px; }
.copt { text-align: left; min-height: 46px; font-weight: 750; font-size: .92rem; border-radius: 14px; }
.copt.right { background: var(--good-soft); border-color: var(--good); color: var(--good-d); }
.copt.wrong { background: var(--bad-soft); border-color: var(--bad); color: var(--bad-d); }
.chk.done .copt:not(.right):not(.wrong) { opacity: .5; }
.cfb { font-size: .86rem; font-weight: 800; margin-top: 8px; color: var(--muted); }
.srcline { margin: 0 4px 8px; }
/* master timeline */
.mtl { position: relative; margin: 6px 0 14px; }
.dec { display: flex; gap: 10px; }
.dy { flex: none; width: 52px; font-weight: 900; font-size: .82rem; color: var(--muted); padding-top: 8px; text-align: right; }
.dl { flex: 1; min-width: 0; border-left: 3px solid var(--line); padding: 4px 0 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.te { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 8px; padding: 8px 10px; border-radius: 14px; background: var(--surface); border: 2px solid var(--cardline); }
.te::before { content: ""; position: absolute; left: -21px; top: 14px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--bg); }
.te.h1::before { background: var(--h1); } .te.h2::before { background: var(--h2); } .te.h3::before { background: var(--h3); } .te.h4::before { background: var(--h4); }
.te .ty { grid-row: span 2; font-weight: 900; font-size: .8rem; color: var(--h3); }
.te .tt { font-weight: 700; font-size: .9rem; line-height: 1.3; }
.te .ta { font-size: .74rem; color: var(--muted); font-weight: 750; }
.te.k { border-color: var(--good); } .te.k .tt { font-weight: 900; }
.links a.link { font-weight: 800; font-size: .92rem; padding: 6px 0; }

/* ---------------------------------------------------------------- Spark Breaks settings */
.bkhero .mascot.bob .lg1, .bkhero .mascot.bob .lg2 { animation: leg .3s ease-in-out infinite alternate; transform-origin: 60px 110px; }
@keyframes leg { from { transform: rotate(-25deg); } to { transform: rotate(25deg); } }
.tgl { position: relative; width: 58px; height: 34px; min-height: 0; padding: 0; border-radius: 999px; background: var(--line); border: 0; box-shadow: inset 0 2px 0 rgba(0,0,0,.06); flex: none; }
.tgl i { position: absolute; top: 3px; left: 3px; width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.2); transition: left .2s; }
.tgl.on { background: var(--good); } .tgl.on i { left: 27px; }
.tgl:active:not(:disabled) { transform: none; }
.bstat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.bstat div { background: var(--bg); border: 2px solid var(--cardline); border-radius: 16px; padding: 8px 4px; text-align: center; }
.bstat b { display: block; font-size: 1.3rem; font-weight: 900; color: var(--accent); }
.bstat span { font-size: .7rem; font-weight: 800; color: var(--muted); }
.perms { list-style: none; margin: 0; padding: 0; }
.perm { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 2px dashed var(--line); }
.perm:last-child { border-bottom: 0; }
.perm .pi { flex: none; width: 32px; height: 32px; border-radius: 11px; display: grid; place-items: center; font-weight: 900; background: var(--mid-soft); color: var(--mid); }
.perm.ok .pi { background: var(--good); color: #fff; }
.perm div { flex: 1; min-width: 0; } .perm b { display: block; font-weight: 850; font-size: .95rem; } .perm span { display: block; font-size: .8rem; color: var(--muted); font-weight: 650; }
.perm button.small { min-height: 38px; padding: 6px 14px; font-size: .85rem; }
.appchips { display: flex; flex-wrap: wrap; gap: 8px; }
.appc { min-height: 40px; padding: 6px 14px; border-radius: 999px; font-size: .9rem; font-weight: 800; box-shadow: none; }
.appc.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

.bkflow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; }
.bkflow div { background: var(--surface); border: 2px solid var(--cardline); box-shadow: var(--press); border-radius: 18px; padding: 10px 8px; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.bkflow span { font-size: 1.4rem; }
.bkflow b { font-size: .85rem; font-weight: 900; line-height: 1.2; }
.bkflow em { font-style: normal; font-size: .7rem; color: var(--muted); font-weight: 700; line-height: 1.25; }

/* ================================================================ Material 3 (Expressive) layer
   Google Sans Flex (bundled, offline) · M3 type scale · tonal surfaces · pill buttons · state layers */
@font-face { font-family: "Google Sans Flex"; font-style: oblique 0deg 10deg; font-weight: 100 1000; font-display: swap;
  src: url(../fonts/gsf-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Google Sans Flex"; font-style: oblique 0deg 10deg; font-weight: 100 1000; font-display: swap;
  src: url(../fonts/gsf-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --font: "Google Sans Flex", "Roboto Flex", Roboto, "Segoe UI", system-ui, sans-serif;
  /* M3 tonal surfaces (warm-tinted) */
  --surface: #ffffff; --s-low: #fdf6ee; --s-mid: #f7efe6; --s-high: #f1e8de; --outline: #e4d9cc; --outline-v: #efe6db;
  --on-surface-v: #5f5a6e; --shadow1: 0 1px 2px rgba(30,25,60,.08), 0 1px 3px 1px rgba(30,25,60,.05); --shadow2: 0 1px 2px rgba(30,25,60,.1), 0 2px 6px 2px rgba(30,25,60,.07);
  --press: var(--shadow1); --cardline: transparent;
  --r: 28px; --gap: 12px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --surface: #221e3c; --s-low: #1b1832; --s-mid: #25213f; --s-high: #2e2a4a; --outline: #3d3860; --outline-v: #332e52; --on-surface-v: #c4bfd8;
  --shadow1: 0 1px 2px rgba(0,0,0,.4); --shadow2: 0 2px 6px rgba(0,0,0,.45); --cardline: transparent; } }

/* ---- type: one variable family, real weights, rounded display styles */
body { font-family: var(--font); font-weight: 400; font-size: 16px; line-height: 1.5; letter-spacing: .005em; font-variation-settings: "ROND" 30; }
h1, h2, h3, .obtitle, .mtitle, .gtitle, .h2day, .ntitle, .lh, .rk-name, .sbigpct, .gbig, .big, .tile b, .stats4 b, .rstats b, .obstats b, .bstat b, .gstats b, .brand { font-variation-settings: "ROND" 100; }
h1 { font-size: 1.75rem; line-height: 2.25rem; font-weight: 650; letter-spacing: -.01em; }
h2 { font-size: 1.125rem; line-height: 1.5rem; font-weight: 600; letter-spacing: 0; }
h3, h4 { font-weight: 600; }
.obtitle { font-size: 2.25rem; line-height: 2.6rem; font-weight: 700; letter-spacing: -.02em; }
.mtitle, .gtitle { font-weight: 700; letter-spacing: -.01em; }
.h2day { font-weight: 700; } .h2sub, .gsub { font-weight: 400; }
.ntitle { font-weight: 600; font-size: 1.15rem; }
.label, .lk, .dk, .cl, .kv b { font-weight: 600; letter-spacing: .1em; font-size: .7rem; }
.muted, .tiny, .small { font-weight: 400; }
.bubble { font-weight: 500; }
.stem, .gq, .cq { font-weight: 500; line-height: 1.55; }
.lp, .et, .attrs li, .lbul li, .page { font-weight: 400; line-height: 1.65; }
.lbul li b, .rowcard b, .ent .eh b, .bdg.on .bn, .qt, .etitle { font-weight: 600; }
.tile b, .stats4 b, .rstats b, .obstats b, .bstat b, .gstats b, .sbigpct, .gbig { font-weight: 700; font-variant-numeric: tabular-nums; }
.tile span:not(.tic), .stats4 span, .rstats span, .obstats span, .bstat span, .gstats span, .bm, .qn { font-weight: 500; }
.chip { font-weight: 600; }
/* literary titles in italics, as print convention has it */
.pc.w, .ytab b, .te .tt, .tl-ev, q.qt, .rowcard > b { font-style: oblique 10deg; }
.feat b, .perm b, .choice .ctx b, .quest .qt, .list li a span:first-child { font-weight: 600; }
.feat span:not(.fic), .perm span, .ctx span, .vnote, .gfact { font-weight: 400; }

/* ---- surfaces */
body, html { background: var(--bg); }
.card, .lcard, .feat, .tile, .qcard, .choice, .obstats div, .stats4 div, .rstats div, .bstat div, .gstats div, .bkflow div { border: 0; box-shadow: var(--shadow1); }
.card { border-radius: 28px; padding: 20px; }
.lcard { border-radius: 24px; }
.tile, .qcard { border-radius: 24px; }
.hero2 { border-radius: 32px; box-shadow: var(--shadow2); }
.upnext { background: var(--surface); }
.snap { background: linear-gradient(160deg, var(--accent-soft), var(--surface) 70%); }
.stats4 div, .rstats div, .bstat div, .gstats div, .obstats div { background: var(--s-low); box-shadow: none; border-radius: 20px; }
.list li a, .blocks li, .xprules li, .bonus li, .attrs li, .lbul li, .perm, .aar, .rowcard, .gmiss li { border-bottom-style: solid; border-bottom-width: 1px; border-color: var(--outline-v); }

/* ---- buttons: M3 pill shapes + state layer (no 3D press) */
button, .filebtn { border-radius: 999px; border: 1px solid var(--outline); box-shadow: none; font-weight: 600; letter-spacing: .01em; position: relative; overflow: hidden; transition: background .2s, transform .15s cubic-bezier(.2,0,0,1), border-radius .2s; }
button:active:not(:disabled) { transform: scale(.97); box-shadow: none; }
button.primary { box-shadow: none; border: 0; }
button.primary:active:not(:disabled) { box-shadow: none; transform: scale(.97); border-radius: 18px; }
.big-btn { border-radius: 999px; min-height: 56px; font-weight: 650; font-size: 1.05rem; box-shadow: none; }
button.primary.big-btn { box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 30%, transparent); }
.big-btn.go, .big-btn.warn { box-shadow: none; border: 0; }
.seg button { border-radius: 999px; box-shadow: none; border-width: 1px; font-weight: 600; }
.seg button[data-c="sure"], .seg button[data-v="1"] { box-shadow: none; border: 0; }
.opt, .gopt { border-radius: 20px; border: 1px solid var(--outline); box-shadow: none; font-weight: 500; background: var(--surface); }
.opt.sel { box-shadow: inset 0 0 0 2px var(--accent); border-color: var(--accent); }
.opt b, .gopt b { border-radius: 999px; border-width: 1px; font-weight: 600; }
.opts.static li { border-width: 1px; border-radius: 20px; font-weight: 500; }
.choice { border-radius: 24px; }
.choice.sel { box-shadow: inset 0 0 0 2px var(--accent); }
.chips a, .tabs a, .appc { border-radius: 10px; border-width: 1px; font-weight: 500; }
.chips a.on, .tabs a.on { background: var(--accent-soft); color: var(--accent); border-color: transparent; font-weight: 600; }
.appc.on { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.appc.on::before, .chips a.on::before { content: "✓ "; }
.copt { border-radius: 16px; }
.pill, .chesttag { font-weight: 600; }
/* ripple (state layer) */
.ripple { position: absolute; border-radius: 50%; transform: scale(0); background: currentColor; opacity: .16; pointer-events: none; animation: ripple .5s cubic-bezier(.2,0,0,1) forwards; }
@keyframes ripple { to { transform: scale(2.6); opacity: 0; } }

/* ---- navigation bar (M3): pill indicator behind the active icon */
.tabbar { border: 0; border-radius: 28px; padding: 8px 4px; background: color-mix(in srgb, var(--s-mid) 92%, transparent); box-shadow: var(--shadow2); }
.tabbar a { background: none !important; font-size: .72rem; font-weight: 500; gap: 4px; padding: 4px 0; }
.tabbar a svg { width: 64px; height: 32px; padding: 4px 20px; border-radius: 999px; transition: background .25s cubic-bezier(.2,0,0,1); box-sizing: border-box; }
.tabbar a.on { color: var(--ink); font-weight: 700; }
.tabbar a.on svg { background: var(--accent-soft); color: var(--accent); }
.nbadge { left: calc(50% + 8px); top: 0; }
.top { background: color-mix(in srgb, var(--bg) 90%, transparent); }
.chip { border: 0; box-shadow: none; background: var(--s-mid); }

/* ---- inputs (M3 outlined) */
input, select, textarea { border-radius: 14px; border: 1px solid var(--outline); background: var(--surface); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }

/* ---- no scrollbars, no text selection (except where you type) */
* { scrollbar-width: none; }
*::-webkit-scrollbar { display: none; width: 0; height: 0; }
html, body { overscroll-behavior: none; }
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea, [contenteditable] { -webkit-user-select: text; user-select: text; }
img, svg { -webkit-user-drag: none; }

/* ---- diagnostic starting map */
.dmap { margin: 6px 0 14px; }
.dmap .dk { margin: 8px 0 4px; color: var(--muted); text-transform: uppercase; }
.dmap a.pc { text-decoration: none; }

.av, .rk-badge, .lvl { box-shadow: none; }
.pc, .copt, .appc, .grp span, .ytab .who, .yb, .tile em, .chesttag { font-weight: 600; }
.copt { font-weight: 500; }
.cq { font-weight: 600; }
.gopt, .opt { font-weight: 500; }
.verdict, .dock .verdict { font-weight: 700; font-variation-settings: "ROND" 100; }
.bl { font-weight: 600; }

/* ================================================================ Spark: furry character (fur texture + eye/mouth sprite strips) */
.mascot.fluff { position: relative; display: block; flex: none; width: var(--s); height: calc(var(--s) * .96); filter: none; overflow: visible; }
.fluff i { position: absolute; display: block; font-style: normal; }
.fluff .fl-shadow { left: 16%; right: 16%; bottom: -3%; height: 9%; border-radius: 50%; background: radial-gradient(closest-side, rgba(60, 30, 90, .28), transparent); }
.fluff .fl-squash { position: absolute; inset: 0; transform-origin: 50% 94%; animation: flbreath 3.4s ease-in-out infinite; animation-delay: var(--dl); }
.fluff .fl-body, .fluff .fl-tuft {
  background:
    radial-gradient(ellipse 60% 50% at 34% 24%, rgba(255, 255, 255, .34), transparent 70%),
    radial-gradient(ellipse 90% 60% at 50% 104%, rgba(74, 34, 120, .38), transparent 70%),
    url(../img/fur.webp) center / calc(var(--s) * 1.25) repeat;
}
.fluff .fl-body { left: 4%; right: 4%; top: 10%; bottom: 3%; border-radius: 50% 50% 46% 46% / 56% 56% 44% 44%; }
.fluff .fl-tuft { left: 43%; top: 2%; width: 15%; height: 17%; border-radius: 50% 50% 35% 35% / 65% 65% 35% 35%; transform: rotate(-10deg); }
.fluff .fl-shade { left: 4%; right: 4%; top: 10%; bottom: 3%; border-radius: 50% 50% 46% 46% / 56% 56% 44% 44%; box-shadow: inset 0 calc(var(--s) * -.05) calc(var(--s) * .12) rgba(90, 50, 140, .28); }
.fluff .fl-blush { top: 57%; width: 19%; height: 12%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 140, 150, .62), rgba(255, 140, 150, 0)); }
.fluff .fl-blush.l { left: 15%; } .fluff .fl-blush.r { right: 15%; }
.fluff .fl-eyes { left: 30%; width: 40%; top: 33%; aspect-ratio: 200 / 123; background: url(../img/eyes.webp) no-repeat; background-size: 1600% 100%; background-position: calc((var(--e) * 2 + var(--side)) * 100% / 31) 0; }
.fluff .fl-mouth { left: 42.5%; width: 15%; top: 57%; aspect-ratio: 120 / 83; background: url(../img/mouth.webp) no-repeat; background-size: 1600% 100%; background-position: calc(var(--m) * 100% / 15) 0; }
/* life: blink + an occasional glance (frames: 2 half · 3 closed · 8 glance) */
.fluff.a-blink .fl-eye { animation: flblink 4.6s steps(1, end) infinite; animation-delay: var(--dl); }
@keyframes flblink {
  0%, 38% { background-position: calc((var(--e) * 2 + var(--side)) * 100% / 31) 0; }
  40% { background-position: calc((16 + var(--side)) * 100% / 31) 0; } 47% { background-position: calc((var(--e) * 2 + var(--side)) * 100% / 31) 0; }
  90% { background-position: calc((4 + var(--side)) * 100% / 31) 0; } 92% { background-position: calc((6 + var(--side)) * 100% / 31) 0; }
  94% { background-position: calc((4 + var(--side)) * 100% / 31) 0; } 96%, 100% { background-position: calc((var(--e) * 2 + var(--side)) * 100% / 31) 0; }
}
.fluff.a-think .fl-eye { animation: flthink 5s steps(1, end) infinite; animation-delay: var(--dl); }
@keyframes flthink { 0%, 45% { background-position: calc((26 + var(--side)) * 100% / 31) 0; } 50%, 85% { background-position: calc((22 + var(--side)) * 100% / 31) 0; } 90%, 100% { background-position: calc((26 + var(--side)) * 100% / 31) 0; } }
.fluff.a-cheer .fl-squash { animation: flhop .55s cubic-bezier(.3, 0, .4, 1) infinite alternate; }
.fluff.a-cheer .fl-mouth { animation: flcheer .55s steps(1, end) infinite; }
@keyframes flcheer { 0%, 49% { background-position: calc(14 * 100% / 15) 0; } 50%, 100% { background-position: calc((6 + var(--side)) * 100% / 31) 0; } }
.fluff.a-calm .fl-squash { animation-duration: 4.4s; }
@keyframes flbreath { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.035, .965); } }
@keyframes flhop { 0% { transform: translateY(0) scale(1.06, .94); } 100% { transform: translateY(-12%) scale(.96, 1.04); } }
/* running in (Spark Break): bouncy roll */
.runner .fluff .fl-squash { animation: flhop .26s ease-in-out infinite alternate; }
.runner .fluff { transform: rotate(-6deg); }
.fbrow .fluff, .obhead .fluff, .avatar .fluff { filter: none; }
@media (prefers-reduced-motion: reduce) { .fluff * { animation: none !important; } }

/* ================================================================ outline icons (Tabler) */
.ico { width: 1.15em; height: 1.15em; vertical-align: -0.2em; flex: none; stroke-width: 1.9; }
.ic .ico, .nic .ico, .fic .ico, .cic .ico, .qi .ico, .bi .ico, .pi .ico { width: 55%; height: 55%; vertical-align: middle; }
.tile .tic .ico { width: 22px; height: 22px; color: var(--accent); }
.tile.hot .tic .ico { color: var(--fire); }
.qcard .ico { width: 28px; height: 28px; color: var(--accent); }
.feat .fic .ico { width: 24px; height: 24px; }
.f1 .ico { color: var(--accent); } .f2 .ico { color: var(--gold); } .f3 .ico { color: var(--good); } .f4 .ico { color: var(--fire); }
.nic .ico { color: var(--accent); }
.choice .cic .ico { color: var(--accent); }
.bkflow span .ico { width: 26px; height: 26px; color: var(--accent); }
.chip .ico { width: 16px; height: 16px; }
.chip.fire .ico { color: inherit; }
.stars .ico { width: 1em; height: 1em; vertical-align: -0.12em; }
.stars i.on .ico { fill: currentColor; }
.bdg .bi .ico { width: 26px; height: 26px; }
.bdg.on .bi .ico { color: var(--gold); fill: color-mix(in srgb, var(--gold) 25%, transparent); }
.jcore .ico { width: 30px; height: 30px; }
.quest.done .qi .ico, li.done .ic .ico { color: #fff; }
.lk .ico, .label .ico { width: 13px; height: 13px; vertical-align: -0.15em; }
.appc .ico { width: 18px; height: 18px; vertical-align: -0.25em; }
.viewtog .ico, .links .ico, .big-btn .ico, .linkcard .ico, .list .ico { width: 18px; height: 18px; vertical-align: -0.25em; margin-right: 4px; }
.hook .ico { color: var(--gold); width: 16px; height: 16px; margin-right: 4px; }
.chest .ico { width: 72px; height: 72px; color: var(--gold); }

.fluff .fl-eyes { left: 25%; width: 50%; top: 34%; }
.fluff .fl-mouth { left: 42%; width: 16%; top: 59%; }
.fluff .fl-tuft { left: 44%; top: 1%; width: 11%; height: 19%; border-radius: 50% 50% 30% 30% / 70% 70% 30% 30%; transform: rotate(-14deg); }

.fluff .fl-eyes { display: none; }
.fluff .fl-eye { top: 35%; width: 21%; aspect-ratio: 100 / 123; background: url(../img/eyes.webp) no-repeat; background-size: 3200% 100%; background-position: calc((var(--e) * 2 + var(--side)) * 100% / 31) 0; }
.fluff .fl-eye.l { left: 26%; --side: 0; } .fluff .fl-eye.r { right: 26%; --side: 1; }

/* ================================================================ question layouts (js/qfmt.js) */
.qx { display: flex; flex-direction: column; gap: 10px; }
.qx p { margin: 0; }
.qx-intro, .qx-plain { font-weight: 500; }
.qx-prompt { font-size: .86rem; font-weight: 500; color: var(--on-surface-v, var(--muted)); font-style: italic; }
.qx-lab { flex: none; display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 5px; margin-right: 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-d); font-size: .74rem; font-weight: 700; font-style: normal; vertical-align: 1px; }
.qx-lab.r { background: var(--sun-soft); color: var(--mid); }
/* Match List I / List II: two columns, each row reads across */
.qx-match { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: .93rem; font-weight: 500; line-height: 1.4; border-radius: 16px; overflow: hidden; background: var(--s-low, var(--bg2)); }
.qx-match th { text-align: left; padding: 8px 10px; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--on-surface-v, var(--muted)); background: var(--s-high, var(--line)); }
.qx-match td { vertical-align: top; padding: 9px 10px; border-top: 1px solid var(--outline-v, var(--line)); overflow-wrap: break-word; hyphens: auto; }
.qx-match td + td, .qx-match th + th { border-left: 1px solid var(--outline-v, var(--line)); }
.qx-match td { display: table-cell; }
.qx-match td .qx-lab { float: left; margin-top: -1px; }
/* Assertion / Reason, Statement I / II */
.qx-box { border-radius: 16px; padding: 10px 12px; background: var(--s-low, var(--bg2)); border-left: 4px solid var(--accent); }
.qx-box + .qx-box { border-left-color: var(--sun); }
.qx-box b { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--on-surface-v, var(--muted)); margin-bottom: 3px; }
.qx-box p { font-weight: 500; font-size: .96rem; line-height: 1.45; }
/* statements (a) (b) … and sequences to arrange */
.qx-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.qx-list li { display: flex; align-items: flex-start; gap: 0; padding: 8px 10px; border-radius: 14px; background: var(--s-low, var(--bg2)); font-size: .95rem; font-weight: 500; line-height: 1.4; }
.qx-list li .qx-lab { margin-top: -1px; }
.qx-list.ord li { border-left: 3px dashed var(--sun); }
.qx-broken { font-size: .85rem; font-weight: 600; color: var(--bad-d); background: var(--bad-soft); padding: 8px 10px; border-radius: 12px; }
.stem.small .qx { gap: 6px; } .stem.small .qx-match { font-size: .82rem; }
/* answers shown as pairs a→IV and sequences d › c › a › b (inside option buttons too) */
.qx-pairs { display: inline-flex; flex-wrap: wrap; gap: 4px 6px; }
.qx-pairs > span { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px 2px 3px; border-radius: 999px; background: var(--s-mid, var(--bg2)); font-weight: 600; font-size: .86rem; white-space: nowrap; }
.qx-pairs b, .qx-seq b { all: unset; display: inline-grid; place-items: center; min-width: 20px; height: 20px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-d); font-size: .74rem; font-weight: 700; }
.qx-pairs i { font-style: normal; color: var(--mid); font-weight: 700; }
.qx-seq { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.qx-seq i { font-style: normal; color: var(--muted); font-weight: 700; }
.opt .ot, .gopt span { min-width: 0; }
.opt .ot b, .gopt span b { width: auto; border: 0; }
.opt.sel .qx-pairs > span, .gopt.right .qx-pairs > span { background: rgba(255,255,255,.55); }
.opt .qx-pairs b, .opt .qx-seq b, .gopt .qx-pairs b, .gopt .qx-seq b,
.gopt.right .qx-pairs b, .gopt.right .qx-seq b, .gopt.wrong .qx-pairs b, .gopt.wrong .qx-seq b,
.opt.sel .qx-pairs b, .opt.sel .qx-seq b { width: auto; min-width: 20px; height: 20px; border: 0; border-radius: 999px; background: var(--accent-soft); color: var(--accent-d); font-size: .74rem; }
/* compact pairs: four fit on one line at phone width */
.qx-pairs { gap: 4px; }
.qx-pairs > span { gap: 2px; padding: 1px 7px 1px 2px; font-size: .82rem; }
.opt .qx-pairs b, .opt .qx-seq b, .gopt .qx-pairs b, .gopt .qx-seq b, .gopt.right .qx-pairs b, .gopt.wrong .qx-pairs b, .opt.sel .qx-pairs b { min-width: 18px; height: 18px; font-size: .7rem; }
.qx-match td { word-break: normal; overflow-wrap: break-word; hyphens: manual; }

/* ================================================================ complete library + reader */
.libsum .bstat { margin-bottom: 8px; }
.libsum p { line-height: 1.9; }
.ptag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: .74rem; font-weight: 600; white-space: nowrap; background: var(--s-mid, var(--bg2)); color: var(--on-surface-v, var(--muted)); }
.ptag .ico { width: 14px; height: 14px; }
.ptag.plan { background: var(--accent-soft); color: var(--accent-d); }
.ptag.only { background: var(--good-soft); color: var(--good-d); }
.ptag.rep { background: var(--sun-soft); color: var(--mid); }
.libgrp summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; }
.libgrp summary::-webkit-details-marker { display: none; }
.lgname { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lring { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--accent) calc(var(--p) * 1%), var(--s-high, var(--line)) 0); }
.lring span { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); font-size: .68rem; font-weight: 700; }
.libdocs { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.libdocs a { display: grid; grid-template-columns: 1fr; gap: 3px; padding: 10px 4px; border-top: 1px solid var(--outline-v, var(--line)); color: inherit; text-decoration: none; }
.ldn { font-weight: 600; font-size: .92rem; line-height: 1.3; }
.lonly { color: var(--good-d); font-weight: 600; }
.lbar { height: 4px; border-radius: 4px; background: var(--s-high, var(--line)); overflow: hidden; }
.lbar i { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.dochead h1 { font-size: 1.3rem; line-height: 1.25; margin: 6px 0 8px; }
.dmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 10px; }
.pnav { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.pnav input[type=range] { flex: 1; min-width: 0; accent-color: var(--accent); }
.pnav button { width: 40px; height: 40px; padding: 0; border-radius: 50%; font-size: 1.3rem; flex: none; }
.pnum { font-size: .8rem; color: var(--muted); white-space: nowrap; min-width: 58px; text-align: right; }
.pnum b { color: var(--ink); font-size: .95rem; }
.lsform input[type=search] { width: 100%; box-sizing: border-box; font: inherit; font-size: 1rem; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--outline, var(--line)); background: var(--surface); color: var(--ink); margin-bottom: 10px; }
.lshits { list-style: none; padding: 0; margin: 10px 0; display: flex; flex-direction: column; gap: 8px; }
.lshits a { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow1, none); color: inherit; text-decoration: none; }
.lsd { font-size: .74rem; font-weight: 700; color: var(--accent-d); }
.lss { font-size: .88rem; line-height: 1.45; }
.lss mark { background: var(--sun-soft); color: inherit; border-radius: 4px; padding: 0 2px; }
/* extra-material session bar in the reader */
.xqbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 6px; padding: 8px 12px; border-radius: 14px; background: var(--accent-soft); color: var(--accent-d); font-size: .82rem; font-weight: 600; }
.xqbar span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xqprog { height: 4px; border-radius: 4px; background: var(--s-high, var(--line)); overflow: hidden; margin-bottom: 8px; }
.xqprog i { display: block; height: 100%; background: var(--accent); }
.sdots i { min-width: 6px; }
.journey .jnode { overflow: visible; }
.chip.srch { padding: 0; width: 38px; justify-content: center; }

/* ================================================================ figures from the source PDFs */
.figs { display: flex; flex-direction: column; gap: 10px; margin: 12px 0 4px; }
.figlbl { display: flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--on-surface-v, var(--muted)); }
.fig { margin: 0; border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid var(--outline-v, var(--line)); }
.fig img { display: block; width: 100%; height: auto; cursor: zoom-in; }
.fig figcaption { display: flex; align-items: center; gap: 5px; padding: 6px 10px; font-size: .7rem; color: var(--muted); background: var(--s-low, var(--bg2)); }
.fig figcaption .ico { width: 13px; height: 13px; }
.figq { padding: 10px 12px; }
.figq summary { font-size: .8rem; font-weight: 700; color: var(--accent-d); cursor: pointer; display: flex; align-items: center; gap: 6px; }
.figq .figs { margin-top: 8px; }
.zoomov { position: fixed; inset: 0; z-index: 100; background: rgba(15, 12, 30, .92); display: flex; flex-direction: column; }
.zoomov .zwrap { flex: 1; overflow: auto; display: flex; align-items: center; justify-content: center; padding: 56px 8px 8px; -webkit-overflow-scrolling: touch; }
.zoomov .zwrap img { max-width: 100%; height: auto; border-radius: 8px; background: #fff; cursor: zoom-in; }
.zoomov .zwrap.big { align-items: flex-start; justify-content: flex-start; }
.zoomov .zwrap.big img { max-width: none; width: 220%; cursor: zoom-out; }
.zoomov .zclose { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; padding: 0; border-radius: 50%; background: rgba(255,255,255,.15); color: #fff; border: 0; display: grid; place-items: center; z-index: 2; }
.zoomov .zhint { text-align: center; color: rgba(255,255,255,.7); font-size: .74rem; padding: 8px 0 calc(12px + env(safe-area-inset-bottom)); }
.figmiss { font-size: .8rem; color: var(--muted); background: var(--s-low, var(--bg2)); padding: 10px 12px; border-radius: 12px; display: flex; gap: 6px; align-items: center; }
.fig.gone { display: none; }

/* ================================================================ Smart view: swipeable card stack */
body.stackmode { overflow: hidden; overscroll-behavior: none; }
.stk { outline: none; display: flex; flex-direction: column; gap: 8px; }
.stk-bar { display: flex; gap: 3px; padding: 0 2px; }
.stk-bar i { flex: 1; height: 4px; border-radius: 4px; background: var(--s-high, var(--line)); transition: background .25s; }
.stk-bar i.seen { background: color-mix(in srgb, var(--accent) 35%, var(--s-high, var(--line))); }
.stk-bar i.on, .stk-bar i.cur { background: var(--accent); }
.stk-deck { position: relative; perspective: 1400px; touch-action: none; user-select: none; -webkit-user-select: none; }
.scard { position: absolute; inset: 0; transform-origin: 50% 0; transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .35s ease; will-change: transform; }
.scard.drag { transition: none; }
.scard-in { height: 100%; overflow-y: auto; overscroll-behavior: contain; border-radius: 24px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.scard-in::-webkit-scrollbar { display: none; }
.scard-in > .lcard { min-height: 100%; margin: 0; box-sizing: border-box; box-shadow: 0 1px 2px rgba(30,25,60,.08), 0 6px 18px rgba(30,25,60,.08); }
.scard.cur { z-index: 5; transform: none; opacity: 1; }
.scard.n1 { z-index: 4; transform: translateY(12px) scale(.95); opacity: .95; }
.scard.n2 { z-index: 3; transform: translateY(22px) scale(.9); opacity: .6; }
.scard.fut { z-index: 1; transform: translateY(26px) scale(.86); opacity: 0; pointer-events: none; }
.scard.past { z-index: 6; transform: translateY(-104%) rotateX(28deg) scale(.92); opacity: 0; pointer-events: none; }
.scard:not(.cur) .scard-in { overflow: hidden; }
.stk-nav { display: flex; align-items: center; justify-content: center; gap: 14px; }
.stk-b { width: 34px; height: 34px; padding: 0; border-radius: 50%; font-size: 1.2rem; line-height: 1; background: var(--surface); }
.stk-b:disabled { opacity: .35; }
.stk-n { font-size: .76rem; font-weight: 700; color: var(--muted); min-width: 52px; text-align: center; }
.stklinks { justify-content: center; margin: 0; }
.stklinks .link { font-size: .8rem; }
.figcard .figs { margin-top: 4px; }
.endcard { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; }
.endcard .endic { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--good-soft); color: var(--good-d); }
.endcard .endic .ico { width: 34px; height: 34px; }
.endcard h3 { margin: 4px 0 0; }
/* the dock button fills as the cards are seen */
.progbtn { background: linear-gradient(90deg, var(--accent) var(--prog, 0%), color-mix(in srgb, var(--accent) 38%, var(--surface)) var(--prog, 0%)) !important; transition: background .3s; }
.progbtn.ready { animation: pready 1.6s ease-in-out infinite; }
@keyframes pready { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); } 50% { box-shadow: 0 0 0 8px transparent; } }

/* ================================================================ vertical timeline */
.vtl { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 8px; }
.vtl-key { display: flex; flex-wrap: wrap; gap: 6px; }
.vk { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: .74rem; font-weight: 700; background: var(--s-low, var(--bg2)); }
.vk i { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.vk em { font-style: normal; font-weight: 600; opacity: .75; }
.vtl-list { list-style: none; margin: 0; padding: 0; position: relative; }
.vtl-list::before { content: ""; position: absolute; left: 51px; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: var(--s-high, var(--line)); }
.vrow { display: grid; grid-template-columns: 44px 16px 1fr auto; align-items: start; column-gap: 6px; position: relative; }
.vy { font-size: .8rem; font-weight: 800; text-align: right; padding-top: 2px; font-variant-numeric: tabular-nums; }
.vdot { width: 12px; height: 12px; border-radius: 50%; margin-top: 4px; background: var(--accent); box-shadow: 0 0 0 3px var(--surface); z-index: 1; justify-self: center; }
.vdot.m { width: 8px; height: 8px; margin-top: 6px; background: var(--muted); }
.vbody { display: flex; flex-direction: column; gap: 3px; padding-bottom: 8px; min-width: 0; }
.ve { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: .9rem; line-height: 1.3; }
.ve b { font-weight: 700; font-style: italic; }
.ve.fx { opacity: .7; }
.vw { font-size: .72rem; font-weight: 700; }
.vm { font-size: .74rem; font-weight: 600; color: var(--muted); }
.vlanes { display: flex; gap: 3px; align-self: stretch; }
.vlanes .ln { width: 4px; border-radius: 0; margin: -1px 0; background: transparent; }
.vlanes .ln.on { background: currentColor; opacity: .5; }
.vlanes .ln.top { border-top-left-radius: 4px; border-top-right-radius: 4px; margin-top: 6px; opacity: .8; }
.vlanes .ln.end { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; margin-bottom: 8px; opacity: .8; }
.vgap { text-align: left; padding: 2px 0 8px 64px; }
.vgap span { display: inline-block; font-size: .7rem; font-weight: 700; color: var(--muted); background: var(--s-low, var(--bg2)); padding: 2px 8px; border-radius: 999px; border: 1px dashed var(--outline, var(--line)); }
/* author colours: names and lanes in colour, work titles in ink with a coloured edge */
.ve b.c0, .ve b.c1, .ve b.c2, .ve b.c3, .ve b.c4, .ve b.c5 { border-left: 3px solid currentColor; padding-left: 6px; }
.ve b { color: var(--ink); }
.ve b.c0 { border-left-color: #6a4df4; } .ve b.c1 { border-left-color: #e0631e; } .ve b.c2 { border-left-color: #0f9264; } .ve b.c3 { border-left-color: #c2307a; } .ve b.c4 { border-left-color: #1d7fc4; } .ve b.c5 { border-left-color: #b38600; }
.c0 { color: #6a4df4; } .c1 { color: #e0631e; } .c2 { color: #0f9264; } .c3 { color: #c2307a; } .c4 { color: #1d7fc4; } .c5 { color: #b38600; }

/* ================================================================ timeline rail (lesson cards + Full timeline page) */
.tl2 { list-style: none; margin: 6px 0 4px; padding: 0; }
.tl2 > li { display: grid; grid-template-columns: 46px 22px minmax(0, 1fr); column-gap: 8px; align-items: stretch; }
.tl2-y { text-align: right; font-size: .8rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.25; padding-top: 7px; color: var(--ink); }
.tl2-rail { position: relative; }
.tl2-rail::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--s-high, var(--line)); border-radius: 2px; }
.tl2 > li:first-child .tl2-rail::before { top: 10px; }
.tl2 > li:last-child .tl2-rail::before { bottom: calc(100% - 14px); }
.tl2-dot { position: absolute; left: 50%; top: 9px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--surface); }
.tl2-dot.c0, .tl2-dot.c1, .tl2-dot.c2, .tl2-dot.c3, .tl2-dot.c4, .tl2-dot.c5 { background: currentColor; }
.tl2-dot.h1 { background: var(--h1); } .tl2-dot.h2 { background: var(--h2); } .tl2-dot.h3 { background: var(--h3); } .tl2-dot.h4 { background: var(--h4); }
.tl2 .minor .tl2-dot { width: 8px; height: 8px; margin-left: -4px; top: 11px; background: var(--surface); border: 2px solid currentColor; box-shadow: none; }
.tl2 .minor .tl2-y { font-weight: 600; color: var(--muted); font-size: .74rem; }
.tl2-body { padding: 5px 0 10px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tl2-ev { display: flex; flex-direction: column; gap: 1px; line-height: 1.3; }
.tl2-ev b { font-size: .92rem; font-weight: 700; font-style: oblique 10deg; color: var(--ink); }
.tl2-ev.fx b { font-weight: 600; opacity: .8; }
.tl2-who { font-size: .74rem; font-weight: 700; }
.tl2-mark { font-size: .78rem; font-weight: 700; line-height: 1.3; padding-top: 2px; }
.tl2-mark span { font-weight: 500; color: var(--muted); }
/* a long gap: dashed rail and a quiet note */
.tl2-gap .tl2-rail::before { background: repeating-linear-gradient(to bottom, var(--s-high, var(--line)) 0 4px, transparent 4px 8px); }
.tl2-gap .tl2-body { padding: 4px 0 8px; }
.tl2-gap em { font-style: normal; font-size: .7rem; font-weight: 700; color: var(--muted); }
/* Full timeline page: decade markers and cards */
.tl2.big .tl2-dec .tl2-y { font-size: .9rem; font-weight: 900; color: var(--accent-d); padding: 10px 0 4px; }
.tl2-ring { position: absolute; left: 50%; top: 12px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--surface); border: 3px solid var(--accent); }
.tl2-dec .tl2-body { border-bottom: 1px dashed var(--outline-v, var(--line)); margin: 0 0 6px; padding: 0; align-self: center; }
.tl2-card { padding: 8px 12px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow1, none); border-left: 4px solid var(--accent); display: flex; flex-direction: column; gap: 2px; }
.tl2-card.h1 { border-left-color: var(--h1); } .tl2-card.h2 { border-left-color: var(--h2); } .tl2-card.h3 { border-left-color: var(--h3); } .tl2-card.h4 { border-left-color: var(--h4); }
.tl2-card b { font-size: .9rem; font-weight: 700; font-style: oblique 10deg; line-height: 1.3; }
.tl2-card span { font-size: .74rem; font-weight: 600; color: var(--muted); }
.tl2-card.k { box-shadow: 0 0 0 2px var(--good); }
.tl2-card.k b { font-weight: 900; }
.tl2.big .tl2-body { padding: 4px 0 8px; }
.tl2.big .tl2-y { padding-top: 12px; }
.tl2.big .tl2-dot { top: 14px; }
/* memory lines under a lesson timeline */
.hooks2 { margin-top: 8px; padding: 10px 12px; border-radius: 14px; background: var(--sun-soft); display: flex; flex-direction: column; gap: 6px; }
.hooks2 .h2l { display: flex; align-items: center; gap: 6px; font-size: .7rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--mid); }
.hooks2 .h2l .ico { width: 15px; height: 15px; }
.hooks2 .h2i { font-size: .84rem; font-weight: 600; line-height: 1.4; padding-left: 10px; border-left: 2px solid color-mix(in srgb, var(--mid) 45%, transparent); }
.tl2-rail::before { background: color-mix(in srgb, var(--accent) 28%, var(--s-high, #efe6da)); }
.tl2-gap .tl2-rail::before { background: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--accent) 28%, var(--s-high, #efe6da)) 0 4px, transparent 4px 8px); }
/* merged lesson cards: several short entries read as one card */
.lcard.merged { display: flex; flex-direction: column; gap: 10px; }
.lcard.merged > .lsec { margin: 0 0 -2px; }
.lcard.merged .sub { display: flex; flex-direction: column; gap: 6px; }
.lcard.merged .sub > .lk { margin-bottom: 0; }
.lsep { border: 0; height: 1px; margin: 2px 0; background: var(--outline-v, var(--line)); }

/* ================================================================ lesson screen (card stack, mockup layout) */
.lhead { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; }
.lhead .lback, .lhead .lmore { flex: none; width: 40px; height: 40px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink); display: grid; place-items: center; box-shadow: none; }
.lhead .ico { width: 24px; height: 24px; }
.ltitle { flex: 1; min-width: 0; font-weight: 800; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lprog { display: flex; align-items: center; gap: 10px; margin: 0 4px 12px; }
.lbar { flex: 1; height: 10px; border-radius: 999px; background: var(--s-high, var(--line)); overflow: hidden; }
.lbar i { display: block; height: 100%; border-radius: 999px; background: var(--good); transition: width .4s ease; }
.lxp { flex: none; font-size: .74rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-d); }
.stk.bare { gap: 0; }
.ldock { position: fixed; z-index: 15; left: 50%; transform: translateX(-50%); bottom: 0; width: 100%; max-width: 520px; box-sizing: border-box; display: flex; gap: 12px; padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--bg) 70%, transparent); }
.ldock .lprev { flex: none; width: 64px; height: 64px; min-height: 0; padding: 0; border-radius: 50%; border: 0; background: var(--surface); color: var(--ink); display: grid; place-items: center; box-shadow: var(--shadow2, 0 2px 8px rgba(30,25,60,.12)); }
.ldock .lprev:disabled { opacity: .4; }
.ldock .lprev .ico { width: 26px; height: 26px; }
.ldock .lnext { flex: 1; height: 64px; min-height: 0; border: 0; border-radius: 999px; padding: 0 22px 0 28px; display: flex; align-items: center; justify-content: space-between; color: #fff; font-size: 1.15rem; font-weight: 800; box-shadow: var(--shadow2, 0 2px 8px rgba(30,25,60,.12)); }
.ldock .lnext .ico { width: 24px; height: 24px; }
.ldock .lnext.progbtn { background: linear-gradient(90deg, var(--accent) var(--prog, 0%), color-mix(in srgb, var(--accent) 42%, var(--surface)) var(--prog, 0%)) !important; }
/* first-time guide cards */
.lcard.guide { display: flex; flex-direction: column; justify-content: center; text-align: center; gap: 8px; background: linear-gradient(180deg, var(--accent-soft), var(--surface) 60%); }
.lcard.guide .lk { justify-content: center; display: flex; align-items: center; gap: 6px; }
.lcard.guide h3 { margin: 0; font-size: 1.35rem; }
.lcard.guide .gacts { margin-top: 10px; display: flex; justify-content: center; }
.lcard.guide .gacts .primary { padding: 12px 22px; }
.gdemo { display: flex; justify-content: center; margin-bottom: 8px; }
.gphone { position: relative; width: 112px; height: 168px; border-radius: 22px; background: var(--surface); box-shadow: 0 0 0 3px var(--ink) inset, 0 8px 22px rgba(30,25,60,.16); overflow: hidden; }
.gphone i { position: absolute; left: 14px; right: 14px; height: 104px; border-radius: 12px; background: var(--accent-soft); border: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.gphone i:nth-child(1) { top: 22px; z-index: 3; background: var(--surface); }
.gphone i:nth-child(2) { top: 30px; transform: scale(.94); z-index: 2; }
.gphone i:nth-child(3) { top: 38px; transform: scale(.88); z-index: 1; opacity: .6; }
.gfinger { position: absolute; z-index: 5; left: 44px; top: 96px; color: var(--ink); }
.gfinger .ico { width: 34px; height: 34px; fill: var(--surface); }
.g0 .gphone i:nth-child(1) { animation: gup 2.2s ease-in-out infinite; transform-origin: 50% 0; }
.g0 .gfinger { animation: gfup 2.2s ease-in-out infinite; }
.g1 .gphone i:nth-child(1) { animation: gdown 2.2s ease-in-out infinite; transform-origin: 50% 0; }
.g1 .gfinger { animation: gfdown 2.2s ease-in-out infinite; }
.g2 .gfinger { top: 120px; animation: gtap 1.4s ease-in-out infinite; }
@keyframes gup { 0%, 25% { transform: none; opacity: 1; } 60% { transform: translateY(-115%) rotateX(30deg); opacity: 0; } 61%, 100% { transform: none; opacity: 1; } }
@keyframes gfup { 0%, 15% { transform: translateY(0); opacity: 0; } 25% { opacity: 1; } 55% { transform: translateY(-70px); opacity: 1; } 70%, 100% { transform: translateY(-70px); opacity: 0; } }
@keyframes gdown { 0%, 25% { transform: translateY(-115%); opacity: 0; } 60%, 100% { transform: none; opacity: 1; } }
@keyframes gfdown { 0%, 15% { transform: translateY(-70px); opacity: 0; } 25% { opacity: 1; } 55% { transform: translateY(0); opacity: 1; } 70%, 100% { transform: translateY(0); opacity: 0; } }
@keyframes gtap { 0%, 100% { transform: scale(1); } 45% { transform: scale(.82); } }
.lmenu { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 6px; }
.lmenu button { display: flex; align-items: center; gap: 10px; justify-content: flex-start; padding: 14px 16px; border-radius: 16px; font-weight: 600; background: var(--s-low, var(--bg2)); border: 0; }
@media (prefers-reduced-motion: reduce) { .gdemo * { animation: none !important; } }
.ldock .lnext.progbtn { background: linear-gradient(90deg, var(--accent-d) var(--prog, 0%), color-mix(in srgb, var(--accent) 70%, var(--surface)) var(--prog, 0%)) !important; }

/* ================================================================ plan calculator */
.calc { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.crow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.crow.col { flex-direction: column; align-items: stretch; gap: 4px; }
.clab { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.clab b { font-size: .95rem; font-weight: 800; }
.clab span { font-size: .74rem; color: var(--muted); line-height: 1.35; }
.stepper { display: flex; align-items: center; gap: 8px; flex: none; }
.stepper button { width: 38px; height: 38px; min-height: 0; padding: 0; border-radius: 50%; font-size: 1.3rem; line-height: 1; }
.stepper b { min-width: 76px; text-align: center; font-size: 1.05rem; font-weight: 900; }
.cchips { display: flex; flex-wrap: wrap; gap: 6px; }
.cchips button { min-height: 0; padding: 6px 12px; font-size: .78rem; border-radius: 999px; background: var(--surface); }
.rng { display: flex; align-items: center; gap: 10px; }
.rng input[type=range] { flex: 1; accent-color: var(--accent); }
.rng b { flex: none; min-width: 56px; text-align: right; font-weight: 900; font-size: .95rem; }
.cbar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--s-high, var(--line)); gap: 2px; }
.cbar i { display: block; min-width: 4px; transition: flex .3s ease; }
.cbar i.lgl { background: var(--accent); } .cbar i.lgr { background: var(--sun); }
.clegend { display: flex; justify-content: space-between; gap: 8px; font-size: .74rem; font-weight: 700; margin-top: -6px; }
.clegend .lgl { color: var(--accent-d); } .clegend .lgr { color: var(--mid); text-align: right; }
.cout { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow1, none); }
.co { display: flex; gap: 10px; align-items: flex-start; }
.co > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.co b { font-size: .86rem; font-weight: 800; }
.co span { font-size: .78rem; color: var(--on-surface-v, var(--muted)); line-height: 1.35; }
.coi { flex: none; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-d); }
.coi .ico { width: 17px; height: 17px; }
.co.warn .coi { background: var(--bad-soft); color: var(--bad-d); }
.co.warn span { color: var(--bad-d); }
.cob { display: block; height: 5px; border-radius: 5px; background: var(--s-high, var(--line)); overflow: hidden; margin-top: 3px; }
.cob i { display: block; height: 100%; background: var(--good); border-radius: 5px; }
.co.warn .cob i { background: var(--bad); }

/* ================================================================ Spark's fly-in after a module */
.flyov { position: fixed; inset: 0; z-index: 120; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: radial-gradient(circle at 50% 42%, rgba(255,255,255,.92), rgba(255,248,239,.86) 60%, rgba(239,234,255,.9)); animation: flyfade .25s ease both; cursor: pointer; padding: 24px; }
.flyov.out { animation: flyfadeout .26s ease both; }
.flyer { position: relative; animation: flyin 1.05s cubic-bezier(.2, .9, .25, 1) both; }
.flyer .mascot { position: relative; z-index: 2; }
.flyer .wing { position: absolute; z-index: 1; top: 34%; width: 46px; height: 30px; border-radius: 50% 50% 45% 45%; background: linear-gradient(180deg, #fff, #e6defd); box-shadow: 0 2px 6px rgba(80,60,160,.25); animation: flap .22s ease-in-out 5 alternate; }
.flyer .wing.l { left: -26px; transform-origin: 100% 60%; transform: rotate(-18deg); }
.flyer .wing.r { right: -26px; transform-origin: 0 60%; transform: rotate(18deg); }
.flyer .trail { position: absolute; z-index: 0; right: -60px; top: 10%; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, rgba(255,197,49,.55) 0 3px, transparent 4px) 0 0 / 22px 22px; opacity: 0; animation: trail 1s ease-out both; }
.flybub { position: relative; max-width: 300px; text-align: center; background: var(--surface); border-radius: 22px; padding: 14px 18px; box-shadow: 0 10px 30px rgba(60,40,140,.18); display: flex; flex-direction: column; gap: 4px; animation: bubpop .4s cubic-bezier(.3, 1.5, .5, 1) .85s both; }
.flybub::before { content: ""; position: absolute; top: -9px; left: 50%; margin-left: -10px; border: 10px solid transparent; border-top: 0; border-bottom-color: var(--surface); }
.flybub b { font-size: 1.35rem; font-weight: 900; }
.flybub span { font-size: .92rem; color: var(--on-surface-v, var(--muted)); line-height: 1.4; }
.flytap { font-size: .74rem; font-weight: 700; color: var(--muted); animation: flyfade .3s ease 1.4s both; }
@keyframes flyin {
  0% { transform: translate(70vw, -60vh) rotate(-28deg) scale(.45); }
  45% { transform: translate(-18vw, -14vh) rotate(14deg) scale(.85); }
  75% { transform: translate(4vw, 3vh) rotate(-6deg) scale(1.05); }
  88% { transform: translate(0, -2vh) rotate(2deg) scale(.98); }
  100% { transform: none; }
}
@keyframes flap { from { transform: rotate(-38deg) scaleY(.7); } to { transform: rotate(10deg) scaleY(1); } }
.flyer .wing.r { animation-name: flapr; }
@keyframes flapr { from { transform: rotate(38deg) scaleY(.7); } to { transform: rotate(-10deg) scaleY(1); } }
@keyframes trail { 0% { opacity: .9; transform: translate(30px, -30px); } 100% { opacity: 0; transform: translate(80px, -60px); } }
@keyframes bubpop { from { opacity: 0; transform: translateY(10px) scale(.85); } to { opacity: 1; transform: none; } }
@keyframes flyfade { from { opacity: 0; } to { opacity: 1; } }
@keyframes flyfadeout { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .flyer, .flyer .wing, .flyer .trail, .flybub { animation: flyfade .3s ease both !important; } }

/* ---------------------------------------------------------------- v3.4: question cards + one reader layout */
.lctx { display: flex; align-items: center; gap: 8px; margin: -4px 4px 10px; font-size: .78rem; color: var(--muted); min-width: 0; }
.lctx > .ico { width: 16px; height: 16px; flex: none; }
.lctx > span:not(.ptag) { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.lctx .ptag { flex: none; }
.lread { padding-bottom: 18px; margin-bottom: 110px; }
.ldock .lnext.plain { background: var(--accent-d); }
.pkr { width: 100%; margin: 14px 0 6px; accent-color: var(--accent); }
.qpc .lk { margin-bottom: 8px; }
.qpstem { font-size: 1.02rem; line-height: 1.5; }
.qpstem .qx-plain, .qpstem .qx-intro { margin: 0 0 8px; font-weight: 600; color: var(--ink); }
.qpstem .qx-prompt { margin: 8px 0 0; font-size: .86rem; color: var(--muted); }
.qpdata { margin: 10px 0 0; padding: 10px 12px; border-radius: 14px; background: var(--s-low, var(--bg2)); font-size: .8rem; color: var(--muted); }
.qpdata .qpdl { display: flex; align-items: center; gap: 6px; font-weight: 700; margin-bottom: 4px; }
.qpdata .qpdl .ico { width: 15px; height: 15px; }
.qpdata p { margin: 0; overflow-wrap: anywhere; }
.qpc .figs { margin: 10px 0 0; }
.qpopts { display: grid; gap: 8px; margin-top: 14px; }
.qpo { display: flex; align-items: flex-start; gap: 10px; text-align: left; min-height: 48px; padding: 11px 14px; border-radius: 16px; border: 1px solid var(--outline, var(--line)); background: var(--surface); box-shadow: none; font-weight: 500; font-size: .93rem; line-height: 1.4; color: var(--ink); }
.qpo > b { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--s-mid, var(--bg2)); font-size: .78rem; font-weight: 700; }
.qpo > span { flex: 1; min-width: 0; padding-top: 2px; overflow-wrap: anywhere; }
.qpo.right { background: var(--good-soft); border-color: var(--good); color: var(--good-d); }
.qpo.right > b { background: var(--good); color: #fff; }
.qpo.wrong { background: var(--bad-soft); border-color: var(--bad); color: var(--bad-d); }
.qpo.wrong > b { background: var(--bad); color: #fff; }
.qpo.picked { border-color: var(--accent); background: var(--accent-soft); }
.qpc.done .qpo:not(.right):not(.wrong):not(.picked) { opacity: .5; }
.qpfb { margin-top: 10px; font-size: .88rem; line-height: 1.45; }
.qpfb:empty { display: none; }
.qpfb .qpwhy { display: block; margin-top: 4px; color: var(--muted); }
.qpo .qx-pairs, .qpo .qx-seq { display: inline-flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
html:has(body.stackmode) { overflow: hidden; overscroll-behavior: none; }
.qnote .page { font-size: .95rem; line-height: 1.55; } .qnote .page p { margin: 0 0 8px; }

/* ---------- v3.5 badge art, sparkles and unlock animation */
.bdg { position: relative; padding: 8px 4px 9px; gap: 4px; overflow: hidden; }
.bdg .bi { position: relative; width: 100%; aspect-ratio: 1; max-width: 76px; display: grid; place-items: center; filter: none; opacity: 1; font-size: 1rem; }
.bdg .bimg { width: 100%; height: 100%; object-fit: contain; filter: grayscale(1) brightness(.8) contrast(.8); opacity: .4; transition: filter .3s, opacity .3s, transform .3s; }
.bdg .block { position: absolute; right: 2px; bottom: 2px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,.18); color: var(--muted); }
.bdg .block .ico { width: 13px; height: 13px; }
.bdg.on .bimg { filter: drop-shadow(0 3px 4px rgba(60,30,140,.28)); opacity: 1; animation: bfloat 3.6s ease-in-out infinite; animation-delay: calc(var(--i) * -.37s); }
.bdg.on:active .bimg { transform: scale(.92); }
.bdg.on.t-s { background: #f1f4fa; border-color: #c9d2e3; box-shadow: 0 3px 0 #b4bfd4; }
.bdg.on.t-g { background: var(--gold-soft); border-color: #ffd97a; box-shadow: 0 3px 0 #f2c54a; }
.bdg.on.t-b { background: #fbefe6; border-color: #ecc3a3; box-shadow: 0 3px 0 #d9a27a; }
.bdg.on.t-r { background: var(--accent-soft); border-color: #c4b6ff; box-shadow: 0 3px 0 #9f8bf7; }
.bshine { position: absolute; inset: 0; pointer-events: none; -webkit-mask: var(--bm) center / contain no-repeat; mask: var(--bm) center / contain no-repeat; background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.85) 50%, transparent 62%) -160% 0 / 250% 100% no-repeat; }
.bdg.on .bshine { background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.75) 50%, transparent 60%) -160% 0 / 250% 100% no-repeat; animation: bsweep 5.2s ease-in-out infinite; animation-delay: calc(var(--i) * .6s); }
@keyframes bsweep { 0%, 72% { background-position: -160% 0; } 100% { background-position: 160% 0; } }
@keyframes bfloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bdg.on.t-s, :root:not([data-theme="light"]) .bdg.on.t-b, :root:not([data-theme="light"]) .bdg.on.t-g, :root:not([data-theme="light"]) .bdg.on.t-r { background: var(--surface); } }
:root[data-theme="dark"] .bdg.on { background: var(--surface); }

/* big badge view */
.bshow { position: relative; width: 210px; height: 210px; margin: 2px auto 6px; display: grid; place-items: center; --tc: #f2b705; }
.bshow.t-b { --tc: #e39a5f; } .bshow.t-s { --tc: #9fb4d9; } .bshow.t-r { --tc: #a68bff; }
.bshow .bbig { position: relative; width: 158px; height: 158px; z-index: 2; }
.bshow::before { content: ""; position: absolute; inset: 22px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--tc) 45%, transparent), transparent 70%); }
.bshow.locked::before { display: none; }
.bshow .bimg { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(60,30,140,.35)); animation: bbob 3.2s ease-in-out infinite; }
.bshow .bshine { background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.9) 50%, transparent 62%) -160% 0 / 250% 100% no-repeat; animation: bsweep 3s ease-in-out infinite .9s; }
.bshow .brays { position: absolute; inset: -18px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--tc) 55%, transparent) 0deg 9deg, transparent 9deg 24deg); -webkit-mask: radial-gradient(circle, #000 18%, transparent 68%); mask: radial-gradient(circle, #000 18%, transparent 68%); animation: bspin 14s linear infinite; opacity: .75; }
.bshow .bring { position: absolute; width: 150px; height: 150px; border-radius: 50%; border: 3px solid var(--tc); opacity: 0; }
.bshow .spk { position: absolute; left: var(--x); top: var(--y); width: 24px; height: 24px; margin: -12px; z-index: 3; transform: scale(0); background: radial-gradient(circle, #fff 0 22%, color-mix(in srgb, var(--tc) 55%, #fff6c8) 42%, color-mix(in srgb, var(--tc) 80%, transparent) 70%); filter: drop-shadow(0 0 3px color-mix(in srgb, var(--tc) 80%, #fff)); clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); animation: twinkle 1.7s ease-in-out infinite; animation-delay: var(--d); }
.bshow.locked .bimg { filter: grayscale(1) brightness(.7); opacity: .35; animation: none; }
.bshow.locked .brays { display: none; }
.bshow .block { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); }
.bshow .block .ico { width: 42px; height: 42px; }
.bshow.fresh .bbig { animation: bpop .9s cubic-bezier(.2,1.6,.4,1) both; }
.bshow.fresh .brays { animation: braysin .7s ease-out both, bspin 14s linear infinite .7s; }
.bshow.fresh .bring { animation: bring 1s ease-out .15s both; }
.bshow.fresh .spk { animation: sburst .7s ease-out both, twinkle 1.7s ease-in-out infinite; animation-delay: .25s, calc(.95s + var(--d)); }
@keyframes bpop { 0% { transform: scale(0) rotate(-200deg); opacity: 0; } 55% { transform: scale(1.18) rotate(8deg); opacity: 1; } 75% { transform: scale(.94) rotate(-3deg); } 100% { transform: none; } }
@keyframes braysin { from { transform: scale(.2); opacity: 0; } to { transform: scale(1); opacity: .75; } }
@keyframes bring { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(1.7); opacity: 0; border-width: 1px; } }
@keyframes sburst { 0% { transform: translate(calc((50% - var(--x)) * 3), calc((50% - var(--y)) * 3)) scale(0); } 70% { transform: scale(calc(var(--s) * 1.5)); } 100% { transform: scale(var(--s)); } }
@keyframes twinkle { 0%, 100% { transform: scale(calc(var(--s) * .25)) rotate(0); opacity: .5; } 50% { transform: scale(var(--s)) rotate(45deg); opacity: 1; } }
@keyframes bspin { to { transform: rotate(360deg); } }
@keyframes bbob { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-6px) rotate(1.5deg); } }
@media (prefers-reduced-motion: reduce) {
  .bdg.on .bimg, .bdg.on .bshine, .bshow .bimg, .bshow .brays, .bshow .bshine, .bshow .spk, .bshow.fresh .bbig, .bshow.fresh .bring { animation: none !important; }
  .bshow .spk { transform: scale(var(--s)); }
}

/* ---------- v3.6 islands: plan journey, topic header, island map */
.isle { display: block; width: 100%; height: auto; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.journey.isles .jpath .jbg { stroke: color-mix(in srgb, var(--accent) 22%, var(--line)); stroke-width: 6; stroke-dasharray: 2 16; }
.journey.isles .jnode { width: 132px; height: 132px; border-radius: 0; overflow: visible; }
.journey.isles .jnode:active:not(:disabled) { transform: translate(-50%, -47%); }
.jisle { position: absolute; inset: 0; display: block; transition: filter .4s, opacity .4s, transform .3s; }
.jnode.future .jisle { filter: grayscale(1) brightness(1.1) contrast(.72); }
.jnode.past .jisle { filter: grayscale(.35) saturate(.8); }
.jnode.today .jisle { animation: isbob 3.4s ease-in-out infinite; filter: drop-shadow(0 0 18px color-mix(in srgb, var(--accent) 45%, transparent)); }
.jnode.done .jisle { filter: drop-shadow(0 4px 10px rgba(242, 183, 5, .35)); }
.journey.isles .jnode.today::before { inset: 8px 4px; border-width: 2px; }
.jchip { position: absolute; left: 50%; bottom: -2px; transform: translateX(-50%); min-width: 30px; height: 24px; padding: 0 8px; border-radius: 12px; display: grid; place-items: center; font-weight: 900; font-size: .78rem; color: var(--muted); background: var(--surface); border: 2px solid var(--cardline); box-shadow: 0 2px 0 var(--cardline); }
.jnode.today .jchip { color: #fff; background: var(--accent); border-color: var(--accent-d); box-shadow: 0 2px 0 var(--accent-d); }
.jnode.done .jchip { color: #fff; background: linear-gradient(160deg, #ffd65c, var(--sun-d)); border-color: var(--sun-d); box-shadow: 0 2px 0 #b98300; }
.jnode.past .jchip { color: var(--bad); border-color: #ffc9c5; }
.jchip .ico { width: 15px; height: 15px; }
.jflag { position: absolute; top: 10px; right: 18px; color: var(--sun-d); filter: drop-shadow(0 1px 1px rgba(0,0,0,.2)); }
.jflag .ico { width: 22px; height: 22px; fill: color-mix(in srgb, var(--sun) 60%, transparent); }
.journey.isles .jspark { top: -30px; }
.journey.isles .jlbl { width: 118px; }
.journey.isles .jlbl.r { left: calc(100% + 2px); } .journey.isles .jlbl.l { right: calc(100% + 2px); }
.jlbl em { font-style: normal; color: var(--accent); font-weight: 900; }
.jstart, .jsummit { position: absolute; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; text-align: center; pointer-events: none; }
.jstart .isle { width: 104px; }
.jsummit .isle { width: 190px; animation: isbob 4s ease-in-out infinite; }
.jstart span, .jsummit span { font-size: .78rem; color: var(--muted); font-weight: 750; }
.jstart b, .jsummit b { display: block; color: var(--ink); font-weight: 900; font-size: 1rem; }
.jsummit b { font-size: 1.2rem; }
.jdeco { position: absolute; width: 58px; opacity: .8; pointer-events: none; animation: isbob 5s ease-in-out infinite; }
.jzone { position: absolute; left: 0; right: 0; display: flex; justify-content: center; pointer-events: none; }
.jzone span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-d); font-weight: 850; font-size: .8rem; }
.jzone .ico { width: 16px; height: 16px; }
@keyframes isbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.topichead.withisle { text-align: center; padding-top: 0; }
.topichead.withisle .stars { justify-content: center; }
.thisle { width: min(230px, 62vw); margin: -6px auto 2px; animation: isbob 4s ease-in-out infinite; }
.imap h2 { margin: 0; }
.imapl { list-style: none; margin: 10px 0 6px; padding: 0; display: grid; gap: 8px; }
.imapl a { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; background: var(--bg); border: 2px solid var(--cardline); color: inherit; text-decoration: none; }
.imapl a:active { transform: translateY(1px); }
.imn { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font-weight: 900; font-size: .8rem; }
.imt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.imt b { font-weight: 850; }
.imt > span:not(.tiny) { font-size: .9rem; line-height: 1.35; font-weight: 500; color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .jnode.today .jisle, .jsummit .isle, .jdeco, .thisle { animation: none; } }
/* era strip on the Timeline page */
.eras { display: flex; align-items: center; gap: 2px; overflow-x: auto; margin: 6px -16px 12px; padding: 4px 16px 10px; scroll-snap-type: x proximity; scrollbar-width: none; }
.eras::-webkit-scrollbar { display: none; }
.era { flex: none; width: 104px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1px; padding: 6px 4px 8px; border-radius: 16px; color: inherit; text-decoration: none; scroll-snap-align: start; border: 2px solid transparent; }
.era .isle { width: 92px; }
.era b { font-size: .74rem; font-weight: 850; line-height: 1.2; }
.era span { font-size: .7rem; color: var(--muted); font-weight: 750; }
.era.on { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.eraar { flex: none; font-style: normal; color: var(--muted); font-weight: 900; opacity: .6; }

/* ---------- v3.7 Home band, screen islands, rank insignia, animations */
/* Home: the header sits on the purple band; the content is a sheet pulled up over it */
body[data-route="home"] .top { background: #5a3be6; backdrop-filter: none; -webkit-backdrop-filter: none; }
body[data-route="home"] .brand { color: #fff; }
body[data-route="home"] .brand span { color: #ffd65c; }
body[data-route="home"] .top .chip { background: rgba(255,255,255,.16); color: #fff; box-shadow: none; border-color: transparent; }
body[data-route="home"] .top .chip.fire.on { color: #ffd65c; }
.homeband { margin: -8px -18px 0; border-radius: 0; padding: 12px 20px 50px; box-shadow: none; background: radial-gradient(90% 70% at 100% 10%, rgba(176,150,255,.55), transparent 60%), linear-gradient(180deg, #5a3be6 0%, #6a4df4 45%, #7556ff 100%); }
.homeband::after { display: none; }
.hb-glow { position: absolute; border-radius: 50%; filter: blur(30px); opacity: .45; pointer-events: none; }
.hb-glow.a { width: 160px; height: 160px; left: -40px; top: 60px; background: #9c7dff; animation: drift 9s ease-in-out infinite; }
.hb-glow.b { width: 120px; height: 120px; right: 10px; bottom: 10px; background: #ff9bd2; opacity: .25; animation: drift 11s ease-in-out infinite reverse; }
@keyframes drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(30px, -16px); } }
.homeband .h2top { position: relative; z-index: 1; align-items: center; }
.hb-isle { position: relative; flex: none; width: 110px; margin: 40px -6px -22px 0; }
.hb-isle .isle { animation: isbob 4s ease-in-out infinite; filter: drop-shadow(0 8px 14px rgba(30,10,90,.35)); }
.hb-spark { position: absolute; left: 50%; top: -34px; transform: translateX(-50%); z-index: 2; }
.homeband .h2day { font-size: 2.9rem; }
.homeband .bubble { position: relative; z-index: 1; background: rgba(255,255,255,.17); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.22); }
.homeband .h2bar i { width: var(--w); animation: fillbar 1.1s cubic-bezier(.2,.8,.2,1) .2s both; }
@keyframes fillbar { from { width: 0; } }
.hb-fire .ico { transform-origin: 50% 90%; }
.hb-fire.on .ico { color: #ffd65c; animation: flicker 1.6s ease-in-out infinite; }
@keyframes flicker { 0%, 100% { transform: scale(1) rotate(0); } 25% { transform: scale(1.12, .94) rotate(-4deg); } 50% { transform: scale(.95, 1.08) rotate(3deg); } 75% { transform: scale(1.06) rotate(-2deg); } }
.hsheet { position: relative; z-index: 1; margin: -30px -18px 0; padding: 18px 18px 0; background: var(--bg); border-radius: 28px 28px 0 0; }
.upnext .ntop { align-items: center; }
.nisle { flex: none; width: 66px; margin: -8px 0 -8px -6px; }
.nisle .isle { animation: isbob 3.6s ease-in-out infinite; }

/* how a day works */
.howrow { display: flex; gap: 10px; overflow-x: auto; margin: 8px -18px 0; padding: 4px 18px 6px; scroll-snap-type: x proximity; scrollbar-width: none; }
.howrow::-webkit-scrollbar { display: none; }
.howc { flex: none; width: 138px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 3px; padding: 8px 10px 12px; border-radius: 18px; background: var(--bg); border: 2px solid var(--cardline); animation: rise .5s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 90ms); }
.howc .isle { width: 96px; margin: 0 auto; }
.howc b { font-weight: 850; font-size: .9rem; }
.howc span { font-size: .78rem; color: var(--muted); line-height: 1.35; }
.howcard.bye { animation: byebye .35s ease-in both; }
@keyframes byebye { to { opacity: 0; transform: translateY(-10px) scale(.97); } }

/* practice tiles, summaries, empty states */
.qcard.isleq { padding-top: 4px; }
.qcard.isleq .isle { width: 84px; margin: -4px auto -2px; transition: transform .3s cubic-bezier(.2,1.6,.4,1); animation: rise .5s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 70ms); }
.qcard.isleq:active .isle { transform: scale(.9) rotate(-3deg); }
.islesum summary { display: flex; align-items: center; gap: 10px; }
.islesum summary .isle { width: 46px; flex: none; }
.islelink span:first-child { display: inline-flex; align-items: center; gap: 10px; }
.islelink .isle { width: 46px; flex: none; }
.isleempty { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.isleempty .isle { width: 170px; animation: isbob 4s ease-in-out infinite; }
.isleempty span { font-size: .88rem; color: var(--muted); }
.rwisle { position: relative; width: 150px; margin: 34px auto 4px; animation: rwpop .6s cubic-bezier(.2,1.6,.4,1) both; }
.rwisle .hb-spark { top: -42px; }
@keyframes rwpop { from { transform: scale(.4); opacity: 0; } }

/* rank insignia */
.rkimg { display: block; width: 100%; height: auto; pointer-events: none; }
.chip.xp .lvlimg { width: 24px; height: 24px; margin: -2px 1px -2px -2px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.2)); }
.chip.xp.bump { animation: chipbump .5s cubic-bezier(.2,1.6,.4,1); }
@keyframes chipbump { 30% { transform: scale(1.14); } }
.rankcard .avatar { cursor: pointer; }
.rk-ins { position: absolute; right: -10px; bottom: -6px; width: 46px; filter: drop-shadow(0 3px 4px rgba(40,20,120,.35)); animation: isbob 3.5s ease-in-out infinite; }
.rankcard .rk-name { cursor: pointer; }
.bshow.rankup .bbig { width: 150px; height: 150px; }
.ladder { list-style: none; margin: 10px 0 4px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-height: 52vh; overflow-y: auto; }
.ladder li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1px; padding: 8px 4px; border-radius: 14px; background: var(--bg); animation: rise .4s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 35ms); }
.ladder li .rkimg { width: 54px; }
.ladder li:not(.got) .rkimg { opacity: .45; }
.ladder li b { font-size: .74rem; font-weight: 850; line-height: 1.2; }
.ladder li span { font-size: .68rem; color: var(--muted); }
.ladder li.cur { background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent); }
.ladder li.cur .rkimg { animation: isbob 2.6s ease-in-out infinite; }

/* chest: shakes, then bursts open */
.chestfx { position: relative; width: 200px; height: 200px; margin: 0 auto 4px; display: grid; place-items: center; }
.chestfx .isle { position: absolute; left: 14px; top: 14px; width: calc(100% - 28px); height: auto; }
.chestfx .c0 { animation: chestshake 1.2s ease-in-out both; }
.chestfx .c1 { opacity: 0; transform: scale(.8); }
.chestfx .brays { position: absolute; inset: -10px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(242,183,5,.5) 0deg 9deg, transparent 9deg 24deg); -webkit-mask: radial-gradient(circle, #000 18%, transparent 68%); mask: radial-gradient(circle, #000 18%, transparent 68%); opacity: 0; }
.chestfx .spk { position: absolute; left: var(--x); top: var(--y); width: 22px; height: 22px; margin: -11px; z-index: 3; transform: scale(0); background: radial-gradient(circle, #fff 0 22%, #ffe9a0 42%, rgba(242,183,5,.8) 70%); clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); }
.chestfx.open .c0 { opacity: 0; transition: opacity .15s; }
.chestfx.open .c1 { opacity: 1; transform: none; transition: opacity .15s, transform .5s cubic-bezier(.2,1.8,.4,1); }
.chestfx.open .brays { opacity: .8; animation: bspin 14s linear infinite; transition: opacity .3s; }
.chestfx.open .spk { animation: sburst .7s ease-out both, twinkle 1.7s ease-in-out infinite; animation-delay: .05s, calc(.75s + var(--d)); }
@keyframes chestshake { 0%, 100% { transform: none; } 15% { transform: rotate(-6deg); } 30% { transform: rotate(6deg); } 45% { transform: rotate(-5deg) translateY(-3px); } 60% { transform: rotate(5deg); } 75% { transform: rotate(-3deg) translateY(-5px); } 90% { transform: scale(1.06); } }

/* XP orbs flying to the XP chip */
.xporb { position: fixed; z-index: 90; width: 16px; height: 16px; margin: -8px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 35% 35%, #fff 0 18%, #ffe27a 40%, #f2a705 75%); box-shadow: 0 0 12px rgba(255,200,40,.9); animation: xpfly .75s cubic-bezier(.5,-.3,.7,1) both; }
@keyframes xpfly { 0% { transform: translate(0, 0) scale(.3); opacity: 0; } 15% { transform: translate(0, -18px) scale(1.15); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(.45); opacity: .9; } }

/* every screen rises in; lists stagger */
main.enter > * { animation: rise .42s cubic-bezier(.2,.8,.2,1) both; }
main.enter > *:nth-child(2) { animation-delay: .05s; } main.enter > *:nth-child(3) { animation-delay: .1s; } main.enter > *:nth-child(4) { animation-delay: .15s; } main.enter > *:nth-child(5) { animation-delay: .2s; } main.enter > *:nth-child(n+6) { animation-delay: .24s; }
main.enter .hsheet > * { animation: rise .45s cubic-bezier(.2,.8,.2,1) both; }
main.enter .hsheet > *:nth-child(2) { animation-delay: .08s; } main.enter .hsheet > *:nth-child(3) { animation-delay: .14s; } main.enter .hsheet > *:nth-child(n+4) { animation-delay: .2s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
body.stackmode main.enter > *, body.focus main.enter > * { animation: none; }

/* journey: a newly finished day colours in and plants its flag */
.jnode.reveal .jisle { animation: isreveal 1.5s cubic-bezier(.2,.8,.2,1) .4s both; }
.jnode.reveal .jflag { animation: flagdrop .6s cubic-bezier(.2,1.6,.4,1) 1.5s both; }
.jnode.reveal .jchip { animation: rwpop .5s cubic-bezier(.2,1.6,.4,1) 1.3s both; }
@keyframes isreveal { 0% { filter: grayscale(1) brightness(1.1) contrast(.72); transform: scale(.94); } 60% { filter: grayscale(0) drop-shadow(0 0 24px rgba(242,183,5,.8)); transform: scale(1.08); } 100% { filter: drop-shadow(0 4px 10px rgba(242,183,5,.35)); transform: none; } }
@keyframes flagdrop { from { transform: translateY(-40px) scale(.4); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .hb-glow, .hb-isle .isle, .homeband .h2bar i, .hb-fire.on .ico, .nisle .isle, .howc, .qcard.isleq .isle, .isleempty .isle, .rwisle, .rk-ins, .ladder li, .chestfx .c0, main.enter > *, main.enter .hsheet > *, .jnode.reveal .jisle, .jnode.reveal .jflag, .jnode.reveal .jchip { animation: none !important; }
}
#sxp.bump { display: inline-block; animation: chipbump .5s cubic-bezier(.2,1.6,.4,1); }

/* badge progress */
.bprog { display: block; height: 6px; border-radius: 4px; background: color-mix(in srgb, var(--muted) 18%, transparent); overflow: hidden; }
.bprog i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--accent), #a58cff); animation: fillbar .9s cubic-bezier(.2,.8,.2,1) .15s both; }
.bprog.sm { width: 80%; height: 5px; margin: 3px auto 0; }
.bprog.big { height: 10px; }
.bpn { font-size: .62rem; color: var(--muted); font-weight: 800; font-variant-numeric: tabular-nums; }
.bpbox { margin: 10px auto 4px; max-width: 280px; text-align: left; }
.bpline { display: flex; flex-wrap: wrap; gap: 4px; align-items: baseline; margin-top: 6px; font-size: .86rem; color: var(--muted); }
.bpline b { color: var(--ink); font-weight: 850; }
.bpline span { margin-left: auto; color: var(--accent); font-weight: 800; }
.bnear { display: grid; gap: 8px; margin: 2px 0 12px; }
.bnr { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 16px; background: var(--bg); border: 2px solid var(--cardline); text-align: left; min-height: 0; color: inherit; }
.bnart { flex: none; width: 50px; }
.bnart .bimg { width: 100%; filter: grayscale(.6) opacity(.75); }
.bnt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bnt b { font-weight: 850; font-size: .9rem; }
.bnt > span { font-size: .78rem; color: var(--muted); }
.bnt em { font-style: normal; font-size: .74rem; font-weight: 800; color: var(--accent); }
.bdg .bn { font-size: .6rem; letter-spacing: -.01em; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; max-width: 100%; }
/* cards: long words (web addresses) wrap instead of running off the card; text diagrams keep their drawing */
.lcard, .qpc { overflow-wrap: anywhere; }
.lcard.diag pre.ascii { margin: 6px 0 0; font: var(--fs, 11px)/1.22 ui-monospace, "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace; white-space: pre; overflow-x: auto; touch-action: pan-x pan-y; color: var(--ink); background: var(--bg); border-radius: 12px; padding: 10px 8px; overflow-wrap: normal; }

/* today's progress ring on each page's end card */
.dayring { display: flex; align-items: center; gap: 14px; margin: 16px 0 2px; padding: 14px; border-radius: 20px; background: var(--accent-soft); text-align: left; }
.drw { position: relative; flex: none; width: 104px; height: 104px; }
.drw svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.drbg { fill: none; stroke: color-mix(in srgb, var(--accent) 16%, transparent); stroke-width: 11; }
.drfg { fill: none; stroke: url(#drg); stroke-width: 11; stroke-linecap: round; transition: stroke-dashoffset 1.3s cubic-bezier(.2,.8,.2,1); }
.dayring.done .drfg { filter: drop-shadow(0 0 6px rgba(143,120,255,.55)); }
.drc { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.drc b { font-size: 1.45rem; font-weight: 900; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.drc span { margin-top: 3px; font-size: .66rem; color: var(--muted); font-weight: 700; }
.drgain { position: absolute; right: -8px; top: -6px; padding: 3px 8px; border-radius: 999px; background: #2bb673; color: #fff; font-style: normal; font-weight: 900; font-size: .72rem; box-shadow: 0 3px 8px rgba(43,182,115,.35); opacity: 0; transform: scale(.4); }
.drgain:empty { display: none; }
.dayring.done .drgain { animation: gainpop .6s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes gainpop { to { opacity: 1; transform: none; } }
.dayring.go .drw { animation: ringpulse 1.5s ease-out; }
@keyframes ringpulse { 0% { transform: scale(1); } 20% { transform: scale(1.06); } 100% { transform: scale(1); } }
.drt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.drt b { font-weight: 850; font-size: 1.02rem; color: var(--ink); }
.drt span { font-size: .8rem; color: var(--muted); line-height: 1.3; }
@media (prefers-reduced-motion: reduce) { .drfg { transition: none; } .dayring.go .drw, .dayring.done .drgain { animation: none; opacity: 1; transform: none; } }

/* ---------- Spark's cute reactions (tap Spark anywhere; also used by Spark Breaks) */
.fluff .fl-fx { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.fluff .fl-fx b { position: absolute; display: none; font-style: normal; font-weight: 900; line-height: 1; font-size: calc(var(--s) * .17); }
.fluff .fl-fx b::before { display: block; }
/* love: hearts float up */
.fluff.a-love .fl-squash { animation: flsway 1.6s ease-in-out infinite; }
.fluff.a-love .fl-fx b { display: block; color: #ff5c8a; top: 6%; opacity: 0; animation: flrise 1.8s ease-out infinite; text-shadow: 0 2px 4px rgba(255,92,138,.35); }
.fluff.a-love .fl-fx b::before { content: "♥"; }
.fluff.a-love .fl-fx b:nth-child(1) { left: 12%; } .fluff.a-love .fl-fx b:nth-child(2) { left: 46%; animation-delay: .6s; font-size: calc(var(--s) * .22); } .fluff.a-love .fl-fx b:nth-child(3) { left: 76%; animation-delay: 1.2s; }
.fluff.a-love .fl-blush { transform: scale(1.25); filter: saturate(1.4); }
/* sleepy: slow breaths, z z z */
.fluff.a-sleepy .fl-squash { animation: flbreath 5.5s ease-in-out infinite; transform-origin: 50% 94%; }
.fluff.a-sleepy { transform: rotate(-5deg); }
.fluff.a-sleepy .fl-fx b { display: block; color: #8f78ff; right: 2%; top: 4%; opacity: 0; animation: flzzz 2.7s ease-out infinite; }
.fluff.a-sleepy .fl-fx b::before { content: "z"; }
.fluff.a-sleepy .fl-fx b:nth-child(2) { animation-delay: .9s; } .fluff.a-sleepy .fl-fx b:nth-child(3) { animation-delay: 1.8s; }
/* wink: one eye shut, a tilt and a twinkle */
.fluff.m-wink .fl-eye.r { --e: 3; }
.fluff.a-wink .fl-squash { animation: fltilt .5s cubic-bezier(.2,1.6,.4,1) both; }
.fluff.a-wink .fl-fx b:first-child { display: block; color: #ffd65c; left: 76%; top: 18%; animation: fltwinkle .9s ease-in-out infinite; text-shadow: 0 0 6px rgba(255,214,92,.8); }
.fluff.a-wink .fl-fx b:first-child::before { content: "✦"; }
/* shy: looks down, blush glows, little sway */
.fluff.a-shy .fl-squash { animation: flsway 2.2s ease-in-out infinite; }
.fluff.a-shy .fl-blush { animation: flblush 1.4s ease-in-out infinite; }
/* surprised: jump, "!" */
.fluff.a-surprised .fl-squash { animation: fljump .75s cubic-bezier(.3,0,.3,1) both; }
.fluff.a-surprised .fl-fx b:first-child { display: block; color: #ff7a2a; left: 64%; top: -14%; font-size: calc(var(--s) * .26); animation: flbang .5s cubic-bezier(.2,1.8,.4,1) .15s both; }
.fluff.a-surprised .fl-fx b:first-child::before { content: "!"; }
/* sad: droop, a tear */
.fluff.a-sad .fl-squash { animation: fldroop 3s ease-in-out infinite; }
.fluff.a-sad .fl-fx b:first-child { display: block; left: 30%; top: 50%; width: calc(var(--s) * .06); height: calc(var(--s) * .09); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: linear-gradient(#bfe3ff, #6ab8ff); opacity: 0; animation: fltear 2.2s ease-in .3s infinite; }
/* dance: side-to-side hops, music notes */
.fluff.a-dance .fl-squash { animation: fldance .5s ease-in-out infinite alternate; }
.fluff.a-dance .fl-fx b { display: block; color: #6a4df4; top: 8%; opacity: 0; animation: flnote 1.6s ease-out infinite; }
.fluff.a-dance .fl-fx b:nth-child(1)::before { content: "♪"; } .fluff.a-dance .fl-fx b:nth-child(2)::before { content: "♫"; } .fluff.a-dance .fl-fx b:nth-child(3)::before { content: "♪"; }
.fluff.a-dance .fl-fx b:nth-child(1) { left: 2%; } .fluff.a-dance .fl-fx b:nth-child(2) { left: 80%; animation-delay: .55s; } .fluff.a-dance .fl-fx b:nth-child(3) { left: 40%; animation-delay: 1.1s; }
/* giggle: quick little shake */
.fluff.a-giggle .fl-squash { animation: flshake .14s ease-in-out infinite alternate; }
/* hi: waves its tuft */
.fluff.a-hi .fl-squash { animation: flhop .6s cubic-bezier(.3,0,.4,1) infinite alternate; }
.fluff.a-hi .fl-tuft { transform-origin: 50% 95%; animation: fltuft .3s ease-in-out infinite alternate; }
@keyframes flsway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes flrise { 0% { transform: translateY(0) scale(.4); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(calc(var(--s) * -.6)) scale(1.1); opacity: 0; } }
@keyframes flzzz { 0% { transform: translate(0, 0) scale(.5); opacity: 0; } 25% { opacity: 1; } 100% { transform: translate(calc(var(--s) * .25), calc(var(--s) * -.45)) scale(1.3); opacity: 0; } }
@keyframes fltilt { from { transform: rotate(0); } to { transform: rotate(-7deg); } }
@keyframes fltwinkle { 0%, 100% { transform: scale(.5) rotate(0); opacity: .5; } 50% { transform: scale(1.2) rotate(45deg); opacity: 1; } }
@keyframes flblush { 0%, 100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.35); opacity: 1; } }
@keyframes fljump { 0% { transform: scale(1.1, .88); } 35% { transform: translateY(-22%) scale(.92, 1.1); } 70% { transform: translateY(0) scale(1.08, .92); } 100% { transform: none; } }
@keyframes flbang { from { transform: scale(0) rotate(-30deg); opacity: 0; } to { transform: scale(1) rotate(8deg); opacity: 1; } }
@keyframes fldroop { 0%, 100% { transform: translateY(4%) scale(1.05, .92); } 50% { transform: translateY(5%) scale(1.07, .9); } }
@keyframes fltear { 0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: 1; transform: translateY(0) scale(1); } 100% { transform: translateY(calc(var(--s) * .35)); opacity: 0; } }
@keyframes fldance { 0% { transform: translateX(-7%) translateY(0) rotate(-9deg) scale(1.04, .96); } 100% { transform: translateX(7%) translateY(-9%) rotate(9deg) scale(.97, 1.03); } }
@keyframes flnote { 0% { transform: translate(0, 0) rotate(-10deg); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(calc(var(--s) * .12), calc(var(--s) * -.55)) rotate(15deg); opacity: 0; } }
@keyframes flshake { from { transform: rotate(-3.5deg) translateY(0); } to { transform: rotate(3.5deg) translateY(-2%); } }
@keyframes fltuft { from { transform: rotate(-38deg); } to { transform: rotate(14deg); } }
.mascot.fluff { cursor: pointer; -webkit-tap-highlight-color: transparent; }

/* ---------------------------------------------------------------- Spark talking: mouth moves, caption bubble by Spark */
.fluff.talk .fl-mouth { animation: fltalk .36s steps(1, end) infinite !important; }
@keyframes fltalk { 0% { background-position: calc(8 * 100% / 15) 0; } 25% { background-position: calc(2 * 100% / 15) 0; } 50% { background-position: calc(9 * 100% / 15) 0; } 75% { background-position: calc(3 * 100% / 15) 0; } }
.vbub { position: fixed; z-index: 10050; max-width: min(260px, calc(100vw - 16px)); padding: 8px 13px; border-radius: 16px; background: #fff; color: #2a1d5c; font: 800 .9rem/1.3 var(--font, inherit); box-shadow: 0 6px 22px rgba(40, 20, 110, .22); pointer-events: none; animation: vbubin .28s cubic-bezier(.2, 1.4, .4, 1) both; }
.vbub::after { content: ""; position: absolute; left: calc(var(--tx, 50%) - 7px); width: 14px; height: 14px; background: inherit; transform: rotate(45deg); border-radius: 2px; }
.vbub.up::after { bottom: -6px; }
.vbub.dn::after { top: -6px; }
.vbub.out { animation: vbubout .28s ease both; }
@keyframes vbubin { from { opacity: 0; transform: translateY(6px) scale(.85); } }
@keyframes vbubout { to { opacity: 0; transform: translateY(-4px) scale(.92); } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .vbub { background: #2b2350; color: #fff; } }
:root[data-theme="dark"] .vbub { background: #2b2350; color: #fff; }

/* ---------------------------------------------------------------- in-app yes/no sheet (replaces confirm()) */
.askov { position: fixed; inset: 0; z-index: 70; display: flex; align-items: flex-end; justify-content: center; background: rgba(21,18,43,.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: askfade .2s ease both; }
.askov.out { animation: askfade .2s ease reverse both; }
.askov .mbox .mascot { margin: 0 auto 4px; }
.askov .mtitle { margin: 6px 0 4px; }
.askbtns { display: flex; gap: 10px; margin-top: 18px; }
.askbtns button { flex: 1; min-height: 50px; font-weight: 800; }
.askbtns .danger { background: var(--bad); border-color: var(--bad); }
@keyframes askfade { from { opacity: 0; } }