/* ===== Doki ===== tokens, base, components. Motion: transform/opacity only (+ tiny shadow on chunky buttons). */
/* Token names follow the rewards theme maps (--bg --surface --surface-2 --ink --ink-soft --line --accent --accent-ink --accent-soft --lavender --good --rose),
   so purchased themes (injected by rewards.applyTheme) recolour the whole app. Everything else is derived. */
:root {
  --bg: #FBF7F2; --surface: #FFFFFF; --surface-2: #F5EEE6; --ink: #2B2530; --ink-soft: #6C6471; --line: #E8DED3;
  --accent: #FF8A70; --accent-ink: #2B2530; --accent-soft: #FFE3D9; --lavender: #B9A6F5; --good: #3FA77A; --rose: #D98A9A;
  --sun: #FFC857;
  --code-bg: #F7F1E9; --code-ink: #3A3340; --term-bg: #2B2530; --term-ink: #F2ECF4;
  --tk-k: #C2437A; --tk-s: #2F8A5F; --tk-n: #C9722A; --tk-c: #9A91A0; --tk-t: #5A48C2; --tk-a: #B5532A; --tk-f: #2D6FB5; --tk-p: #5A48C2; --tk-sel: #C2437A;
  --shadow: 0 1px 0 rgba(43,37,48,.04), 0 8px 24px -12px rgba(80,50,30,.18);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --mv: 1px; --mvn: 1; --press: .97;
  --hdr-h: 64px; --gut: 24px; --r: 18px; --r-sm: 12px;
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "D2Coding", monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1F1A24; --surface: #2A2430; --surface-2: #322B39; --ink: #F4EDE8; --ink-soft: #B3A9B8; --line: #3C3445;
    --accent: #FF9C85; --accent-soft: #4A3030; --lavender: #C7B8FA; --good: #5CC096; --rose: #E49BAA;
    --code-bg: #211B2A; --code-ink: #E8E0EC; --term-bg: #15111A;
    --tk-k: #F28BB8; --tk-s: #7FDDB0; --tk-n: #FFB27A; --tk-c: #8E8498; --tk-t: #B3A6FF; --tk-a: #FFB89C; --tk-f: #85BDF2; --tk-p: #B3A6FF; --tk-sel: #F28BB8;
    --shadow: 0 1px 0 rgba(0,0,0,.2), 0 10px 28px -14px rgba(0,0,0,.6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #1F1A24; --surface: #2A2430; --surface-2: #322B39; --ink: #F4EDE8; --ink-soft: #B3A9B8; --line: #3C3445;
  --accent: #FF9C85; --accent-soft: #4A3030; --lavender: #C7B8FA; --good: #5CC096; --rose: #E49BAA;
  --code-bg: #211B2A; --code-ink: #E8E0EC; --term-bg: #15111A;
  --tk-k: #F28BB8; --tk-s: #7FDDB0; --tk-n: #FFB27A; --tk-c: #8E8498; --tk-t: #B3A6FF; --tk-a: #FFB89C; --tk-f: #85BDF2; --tk-p: #B3A6FF; --tk-sel: #F28BB8;
  --shadow: 0 1px 0 rgba(0,0,0,.2), 0 10px 28px -14px rgba(0,0,0,.6);
  color-scheme: dark;
}
/* derived tokens: live on :root too, so they follow whichever palette is active */
:root {
  --bg-dot: color-mix(in srgb, var(--line) 55%, var(--bg));
  --surface-3: color-mix(in srgb, var(--ink) 8%, var(--surface-2));
  --ink-2: var(--ink-soft); --ink-3: color-mix(in srgb, var(--ink-soft) 72%, var(--bg));
  --line-2: color-mix(in srgb, var(--ink) 14%, var(--line));
  --accent-deep: color-mix(in srgb, var(--accent) 76%, #000);
  --on-accent: var(--accent-ink);
  --accent-text: color-mix(in srgb, var(--accent) 42%, var(--ink));
  --ai: var(--lavender); --ai-deep: color-mix(in srgb, var(--lavender) 70%, #000); --on-ai: #241B45;
  --ai-soft: color-mix(in srgb, var(--lavender) 24%, var(--surface)); --ai-ink: color-mix(in srgb, var(--lavender) 38%, var(--ink));
  --ok: var(--good); --ok-deep: color-mix(in srgb, var(--good) 72%, #000);
  --ok-soft: color-mix(in srgb, var(--good) 18%, var(--surface)); --ok-ink: color-mix(in srgb, var(--good) 50%, var(--ink));
  --err: var(--rose); --err-soft: color-mix(in srgb, var(--rose) 20%, var(--surface)); --err-ink: color-mix(in srgb, var(--rose) 40%, var(--ink));
  --sun-soft: color-mix(in srgb, var(--sun) 24%, var(--surface)); --sun-ink: color-mix(in srgb, var(--sun) 30%, var(--ink));
  --ring: 0 0 0 3px color-mix(in srgb, var(--ai) 55%, transparent);
}

html { font-size: 16px; -webkit-text-size-adjust: 100%; }
html[data-size="large"] { font-size: 18.5px; }
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg);
  background-image: radial-gradient(var(--bg-dot) 1.4px, transparent 1.6px); background-size: 26px 26px;
  line-height: 1.65; word-break: keep-all; overflow-wrap: break-word; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  min-height: 100dvh; overflow-x: hidden;
}
h1, h2, h3, h4 { line-height: 1.3; margin: 0; letter-spacing: -0.015em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: not-allowed; }
img { max-width: 100%; }
[hidden] { display: none !important; }
:focus { outline: none; }
:focus-visible { outline: 2.5px solid var(--ai); outline-offset: 2px; border-radius: 8px; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 999; background: var(--ink); color: var(--bg); padding: 8px 14px; border-radius: 10px; }
.skip:focus { top: 8px; }
.muted { color: var(--ink-2); }
.ic { display: inline-flex; flex: none; line-height: 0; }
.mascot { display: block; user-select: none; }
.mascot-ph svg { width: 100%; height: 100%; display: block; }
.art { display: block; object-fit: contain; }
.art-ph { display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-deep); border-radius: 16px; }

/* ----- shell ----- */
#shell { min-height: 100dvh; display: flex; flex-direction: column; }
#main { flex: 1; min-width: 0; }
.hdr { position: sticky; top: 0; z-index: 30; height: var(--hdr-h); display: flex; align-items: center; gap: 16px; padding: 0 var(--gut); background: color-mix(in srgb, var(--bg) 92%, transparent); border-bottom: 2px solid var(--line); }
.logo { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 1.25rem; letter-spacing: -0.03em; border-radius: 12px; padding: 4px 6px 4px 2px; transition: transform .16s var(--ease-out); }
.logo:active { transform: scale(var(--press)); }
.logo-doki { width: 38px; height: 38px; }
.hud-host { flex: 1; min-width: 0; display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.hud-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--surface); border: 2px solid var(--line); font-weight: 700; font-size: .875rem; }
.hud-chip.warm { color: var(--accent-deep); }
.nav { display: flex; gap: 2px; }
.nav-a { display: flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 14px; font-weight: 650; font-size: .9rem; color: var(--ink-2); transition: transform .16s var(--ease-out), background-color .16s, color .16s; }
.nav-a:active { transform: scale(var(--press)); }
.nav-a.on { background: var(--accent-soft); color: var(--accent-text); }
@media (hover: hover) and (pointer: fine) { .nav-a:hover:not(.on) { background: var(--surface-2); color: var(--ink); } }

.page { max-width: 1120px; margin: 0 auto; padding: 28px var(--gut) 80px; }
.page.narrow { max-width: 680px; }
.page.wide-page { max-width: 1120px; }
.page-title { font-size: 1.9rem; font-weight: 800; margin-bottom: 18px; }
.sec-title { font-size: 1.3rem; font-weight: 800; margin: 0 0 16px; }
.sec-h { font-size: 1.05rem; font-weight: 800; margin: 26px 0 10px; }
.sec-h.first { margin-top: 0; }
.back { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-2); font-weight: 650; padding: 6px 10px 6px 4px; border-radius: 10px; margin-bottom: 8px; }
.view-in { animation: viewIn .26s var(--ease-out) both; }
@keyframes viewIn { from { opacity: 0; transform: translateY(calc(var(--mv) * 8)); } }
.pane-in { animation: viewIn .2s var(--ease-out) both; }

/* ----- buttons ----- */
.btn { --b: var(--accent); --bd: var(--accent-deep); --bt: var(--on-accent); display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border: 0; border-radius: 15px; background: var(--b); color: var(--bt); font-weight: 750; letter-spacing: -0.01em; box-shadow: 0 4px 0 var(--bd); transform: translateY(0); transition: transform .14s var(--ease-out), box-shadow .14s var(--ease-out), background-color .16s, opacity .16s; user-select: none; white-space: nowrap; }
.btn:active:not(:disabled) { transform: translateY(3px) scale(.985); box-shadow: 0 1px 0 var(--bd); }
.btn:disabled { opacity: .5; box-shadow: 0 2px 0 var(--bd); }
.btn.big { min-height: 54px; padding: 0 28px; font-size: 1.05rem; border-radius: 18px; }
.btn.small { min-height: 36px; padding: 0 14px; font-size: .875rem; border-radius: 12px; }
.btn.soft { --b: var(--surface-2); --bd: var(--line-2); --bt: var(--ink); }
.btn.ghost { --b: transparent; --bd: transparent; --bt: var(--ink-2); box-shadow: none; }
.btn.ghost:active:not(:disabled) { transform: scale(var(--press)); box-shadow: none; }
.btn.ai { --b: var(--ai); --bd: var(--ai-deep); --bt: var(--on-ai); }
.btn.round { width: 46px; min-height: 46px; padding: 0; border-radius: 50%; }
.btn.icon-only { width: 40px; min-height: 40px; padding: 0; border-radius: 12px; }
.btn.loading { pointer-events: none; }
.btn.loading::after { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (hover: hover) and (pointer: fine) {
  .btn:hover:not(:disabled):not(.ghost) { filter: brightness(1.04); }
  .btn.ghost:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }
}
.chip-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; border: 2px solid var(--line); background: var(--surface); font-weight: 650; font-size: .85rem; color: var(--ink-2); transition: transform .14s var(--ease-out), background-color .16s, border-color .16s; }
.chip-btn:active:not(:disabled) { transform: scale(var(--press)); }
@media (hover: hover) and (pointer: fine) { .chip-btn:hover:not(:disabled) { border-color: var(--ai); color: var(--ai-ink); } }

/* ----- small bits ----- */
.kind { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-size: .78rem; font-weight: 750; background: var(--surface-3); color: var(--ink-2); }
.k-build { background: var(--accent-soft); color: var(--accent-text); } .k-fix { background: var(--sun-soft); color: var(--sun-ink); } .k-change { background: var(--ai-soft); color: var(--ai-ink); }
.k-read { background: var(--ok-soft); color: var(--ok-ink); } .k-mission { background: var(--err-soft); color: var(--err-ink); } .k-euler { background: var(--surface-3); color: var(--ink); }
.stars { display: inline-flex; gap: 4px; }
.star { color: var(--line-2); display: inline-flex; }
.star.on { color: var(--sun); filter: drop-shadow(0 2px 0 rgba(180,120,0,.25)); }
.stars.sm .star svg { width: 16px; height: 16px; }
.cel .star.on { animation: starIn .5s var(--pop) both; animation-delay: calc(var(--i) * 140ms + 250ms); }
@keyframes starIn { from { opacity: 0; transform: scale(calc(1 - .6 * var(--mvn))) rotate(calc(-30deg * var(--mvn))); } }
.combo-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-weight: 800; background: linear-gradient(180deg, #FFB067, #FF7B5C); color: #3A1308; box-shadow: 0 3px 0 #D9553A; }
.combo-chip.sm { padding: 2px 9px; font-size: .8rem; box-shadow: 0 2px 0 #D9553A; }
.dots { display: inline-flex; gap: 4px; align-items: center; vertical-align: middle; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .35; animation: dot 1.1s var(--ease-in-out) infinite; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 40% { opacity: 1; transform: translateY(calc(var(--mv) * -3)); } }
.skeleton { display: grid; gap: 12px; }
.skel { border-radius: 10px; background: var(--surface-3); position: relative; overflow: hidden; }
.skel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface) 70%, transparent), transparent); transform: translateX(-100%); animation: shim 1.3s var(--ease-in-out) infinite; }
@keyframes shim { to { transform: translateX(100%); } }
.empty { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 36px 20px; color: var(--ink-2); }
.empty h3 { color: var(--ink); font-size: 1.1rem; }
.empty-mascot { width: 96px; height: 96px; }
.empty .btn { margin-top: 6px; }
.toasts, #toasts { position: fixed; left: 0; right: 0; bottom: calc(24px + env(safe-area-inset-bottom)); display: grid; justify-items: center; gap: 8px; z-index: 120; pointer-events: none; }
.toast { background: var(--ink); color: var(--bg); padding: 11px 18px; border-radius: 16px; font-weight: 650; font-size: .92rem; max-width: min(92vw, 420px); box-shadow: 0 10px 30px -10px rgba(0,0,0,.4); opacity: 0; transform: translateY(calc(var(--mv) * 10)) scale(.97); transition: opacity .2s var(--ease-out), transform .2s var(--ease-out); }
.toast.in { opacity: 1; transform: none; }
.toast.bad { background: var(--err); color: #2B1018; }
.field { width: 100%; min-height: 46px; padding: 10px 14px; border: 2px solid var(--line); border-radius: 14px; background: var(--surface); transition: border-color .16s, box-shadow .16s; }
.field:focus { border-color: var(--ai); box-shadow: var(--ring); }
.field.mono { font-family: var(--mono); font-size: .85rem; }
.field-label { display: block; font-weight: 700; margin: 6px 0 6px; }
textarea.field { resize: vertical; line-height: 1.6; }
.select { width: auto; min-width: 180px; }
.shake { animation: shake .36s var(--ease-out); }
@keyframes shake { 20% { transform: translateX(calc(var(--mv) * -6)); } 40% { transform: translateX(calc(var(--mv) * 5)); } 60% { transform: translateX(calc(var(--mv) * -3)); } 80% { transform: translateX(calc(var(--mv) * 2)); } }
.chk-msg { min-height: 1.5em; margin-top: 10px; font-weight: 650; }
.chk-msg.good { color: var(--ok-ink); } .chk-msg.bad { color: var(--err-ink); }

/* ----- tabs ----- */
.tabs { position: relative; display: flex; gap: 2px; border-bottom: 2px solid var(--line); }
.tab { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px 11px; border: 0; background: transparent; font-weight: 700; font-size: .92rem; color: var(--ink-3); border-radius: 10px 10px 0 0; transition: color .16s, transform .14s var(--ease-out); white-space: nowrap; }
.tab:active { transform: scale(var(--press)); }
.tab[aria-selected="true"] { color: var(--ink); }
.tab.has-dot::after { content: ""; position: absolute; top: 8px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.tab-ind { position: absolute; left: 0; bottom: -2px; width: 1px; height: 4px; border-radius: 3px; background: var(--accent); transform-origin: 0 50%; transition: transform .26s var(--ease-out); }

/* ----- home ----- */
.home { display: grid; grid-template-columns: minmax(340px, 5fr) minmax(0, 7fr); gap: 20px 36px; align-items: start; max-width: 1240px; }
.home-left { position: sticky; top: calc(var(--hdr-h) + 20px); display: grid; gap: 18px; }
.home-right { display: grid; gap: 20px; min-width: 0; }
.room-host { position: relative; }
.room-host .rw-room-wrap { border: 2px solid var(--line); border-radius: 28px; box-shadow: 0 5px 0 var(--line), var(--shadow); }
.room-fallback { position: relative; aspect-ratio: 3 / 2; border-radius: 28px; border: 2px solid var(--line); background: linear-gradient(180deg, var(--accent-soft), var(--surface-2)); display: grid; place-items: center; overflow: hidden; box-shadow: 0 5px 0 var(--line); }
.room-fallback .room-doki { width: 38%; max-width: 200px; animation: bob 3.2s var(--ease-in-out) infinite; }
.room-shelf { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: color-mix(in srgb, var(--accent) 22%, var(--surface-3)); }
@keyframes bob { 50% { transform: translateY(calc(var(--mv) * -8)); } }
.home-left > *, .home-right > * { animation: viewIn .38s var(--ease-out) both; }
.home-left > :nth-child(2) { animation-delay: 80ms; } .home-right > :nth-child(1) { animation-delay: 40ms; } .home-right > :nth-child(2) { animation-delay: 90ms; } .home-right > :nth-child(3) { animation-delay: 140ms; }
.greet h1 { font-size: 1.7rem; font-weight: 800; }
.greet p { color: var(--ink-2); margin-top: 4px; font-size: 1.05rem; }
.resume { display: grid; gap: 10px; padding: 22px; border-radius: 24px; background: var(--surface); border: 2px solid var(--line); box-shadow: 0 5px 0 var(--accent-deep), var(--shadow); position: relative; overflow: hidden; transition: transform .16s var(--ease-out), box-shadow .16s var(--ease-out); }
a.resume:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--accent-deep), var(--shadow); }
.resume::before { content: ""; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%; background: var(--accent-soft); z-index: 0; }
.resume > * { position: relative; z-index: 1; }
.resume-top { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.kicker { font-size: .8rem; font-weight: 800; letter-spacing: .04em; color: var(--accent-text); background: var(--accent-soft); padding: 3px 10px; border-radius: 999px; }
.resume h2 { font-size: 1.5rem; font-weight: 800; }
.resume-sum { color: var(--ink-2); }
.resume-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .875rem; color: var(--ink-2); }
.resume-meta .dim { color: var(--ink-3); }
.resume-go { margin-top: 6px; justify-self: stretch; pointer-events: none; }
.resume.done, .resume.empty { justify-items: center; text-align: center; }
.resume-doki { width: 96px; height: 96px; }
.resume.skeleton { box-shadow: none; }
.path-sec { margin-top: 12px; }
.path { position: relative; display: grid; gap: 14px; padding: 4px 0; max-width: 860px; }
.path::before { content: ""; position: absolute; left: 27px; top: 20px; bottom: 20px; width: 6px; border-radius: 3px; background: repeating-linear-gradient(180deg, var(--line-2) 0 10px, transparent 10px 20px); }
.node { position: relative; display: flex; gap: 16px; align-items: center; padding-left: 0; animation: viewIn .35s var(--ease-out) both; animation-delay: calc(var(--i) * 45ms); }
.node-dot { flex: none; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 1.1rem; background: var(--surface); border: 3px solid var(--line-2); color: var(--ink-3); z-index: 1; box-shadow: 0 4px 0 var(--line); }
.node.done .node-dot { background: var(--ok); border-color: var(--ok-deep); color: #fff; box-shadow: 0 4px 0 var(--ok-deep); }
.node.current .node-dot { background: var(--accent); border-color: var(--accent-deep); color: var(--on-accent); box-shadow: 0 4px 0 var(--accent-deep); animation: pulse 2.2s var(--ease-in-out) infinite; }
@keyframes pulse { 50% { transform: scale(1.07); } }
.node-card { flex: 1; min-width: 0; display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 20px; background: var(--surface); border: 2px solid var(--line); box-shadow: 0 4px 0 var(--line); position: relative; transition: transform .16s var(--ease-out), box-shadow .16s var(--ease-out); }
.node:active .node-card { transform: translateY(3px); box-shadow: 0 1px 0 var(--line); }
.node.current .node-card { border-color: var(--accent); box-shadow: 0 4px 0 var(--accent-deep); }
.node.soon .node-card { opacity: .7; }
@media (hover: hover) and (pointer: fine) { .node:hover .node-card { transform: translateY(-2px); } .node:hover:active .node-card { transform: translateY(3px); } }
.node-art { width: 64px; height: 64px; flex: none; border-radius: 16px; }
.node-txt { min-width: 0; flex: 1; }
.node-txt h3 { font-size: 1.05rem; font-weight: 800; }
.node-txt p { color: var(--ink-2); font-size: .9rem; line-height: 1.45; margin: 2px 0 8px; }
.node-prog { display: flex; align-items: center; gap: 10px; }
.node-prog small { color: var(--ink-2); font-weight: 650; white-space: nowrap; }
.bar { flex: 1; max-width: 220px; height: 10px; border-radius: 6px; background: var(--surface-3); overflow: hidden; display: block; }
.bar i { display: block; height: 100%; background: var(--ok); border-radius: 6px; transform-origin: left; transition: transform .5s var(--ease-out); }
.here { position: absolute; top: -10px; right: 14px; background: var(--accent); color: var(--on-accent); font-size: .75rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; box-shadow: 0 2px 0 var(--accent-deep); }
.lside .here { position: static; }
.soon-tag { color: var(--ink-3); font-weight: 650; }
.extras-sec { margin-top: 28px; }
.xgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.xcard { display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: 20px; background: var(--surface); border: 2px solid var(--line); box-shadow: 0 4px 0 var(--line); transition: transform .16s var(--ease-out), box-shadow .16s var(--ease-out); animation: viewIn .35s var(--ease-out) both; animation-delay: calc(var(--i) * 40ms); }
.xcard:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--line); }
@media (hover: hover) and (pointer: fine) { .xcard:hover { transform: translateY(-2px); } }
.xcard-art { width: 56px; height: 56px; flex: none; border-radius: 14px; }
.xcard h3 { font-size: 1rem; font-weight: 800; } .xcard p { color: var(--ink-2); font-size: .85rem; line-height: 1.45; } .xcard small { color: var(--ink-3); font-weight: 650; }

/* ----- track ----- */
.track-head { display: flex; gap: 20px; align-items: center; margin-bottom: 26px; }
.th-art { width: 96px; height: 96px; flex: none; border-radius: 24px; }
.track-head h1 { font-size: 1.8rem; font-weight: 800; } .track-head p { color: var(--ink-2); margin: 2px 0 10px; }
.llist { display: grid; gap: 10px; }
.lrow { position: relative; display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 18px; background: var(--surface); border: 2px solid var(--line); box-shadow: 0 4px 0 var(--line); transition: transform .16s var(--ease-out), box-shadow .16s var(--ease-out); animation: viewIn .3s var(--ease-out) both; animation-delay: calc(var(--i) * 35ms); }
.lrow:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--line); }
@media (hover: hover) and (pointer: fine) { .lrow:hover { transform: translateY(-2px); } }
.lrow.cur { border-color: var(--accent); box-shadow: 0 4px 0 var(--accent-deep); }
.lrow.done .lnum { background: var(--ok); color: #fff; }
.lnum { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); font-weight: 800; color: var(--ink-2); }
.ltxt { flex: 1; min-width: 0; display: grid; } .ltxt b { font-size: 1.02rem; } .ltxt small { color: var(--ink-2); font-size: .85rem; line-height: 1.45; }
.lside { display: flex; align-items: center; gap: 10px; flex: none; } .lside small { color: var(--ink-3); font-weight: 650; }
.track-cta { position: sticky; bottom: 20px; display: flex; justify-content: center; margin-top: 24px; }
.attrib { margin-top: 36px; color: var(--ink-3); font-size: .85rem; text-align: center; }

/* ----- lesson header & workspace ----- */
.lesson-page { display: flex; flex-direction: column; min-width: 0; }
.lh { display: flex; align-items: center; gap: 16px; padding: 10px var(--gut); border-bottom: 2px solid var(--line); background: var(--surface); }
.lh-back { display: inline-flex; align-items: center; gap: 2px; color: var(--ink-2); font-weight: 650; font-size: .9rem; padding: 6px 10px 6px 4px; border-radius: 10px; flex: none; max-width: 180px; }
.lh-back span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lh-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lh-title { font-size: 1.25rem; font-weight: 800; }
.lh-meta { display: flex; align-items: center; gap: 8px; color: var(--ink-3); font-weight: 650; font-size: .85rem; }
.lh-actions { display: flex; gap: 10px; flex: none; }
.ws-page { height: calc(100dvh - var(--hdr-h)); }
.ws { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(280px, 0.8fr) minmax(320px, 1fr) minmax(380px, 1.3fr); gap: 14px; padding: 14px var(--gut) 14px; }
.ws-seg { display: none; }
.ws-col { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--surface); border: 2px solid var(--line); border-radius: 22px; box-shadow: 0 4px 0 var(--line); overflow: hidden; position: relative; }
.col-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 12px; min-height: 48px; background: var(--surface-2); border-bottom: 2px solid var(--line); position: relative; }
.col-head .tabs { border: 0; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.col-head .tab-ind { bottom: 0; }
.ws-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 18px 80px; overscroll-behavior: contain; }
.pane { display: block; }
.ck-head { display: flex; align-items: center; justify-content: space-between; margin-top: 22px; } .ck-head .sec-h { margin: 0; }
.ck-sum { font-weight: 800; color: var(--ink-2); font-size: .9rem; }
.ck-bar { height: 10px; border-radius: 6px; background: var(--surface-3); overflow: hidden; margin: 8px 0 12px; } .ck-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--ok), #6BD2A5); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-out); border-radius: 6px; }
.tlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.trow { display: flex; gap: 12px; align-items: flex-start; padding: 11px 12px; border-radius: 14px; background: var(--surface-2); border: 2px solid transparent; transition: background-color .25s, border-color .25s; }
.trow[data-hidden="1"] .tname { color: var(--ink-3); font-style: italic; }
.tmark { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 2px solid var(--line-2); color: transparent; transition: background-color .2s, border-color .2s; }
.tmark .ic { position: absolute; opacity: 0; }
.tcol { min-width: 0; display: grid; gap: 2px; padding-top: 2px; } .tname { font-weight: 650; line-height: 1.45; } .tmsg { color: var(--err-ink); line-height: 1.45; } .tmsg:empty { display: none; }
.trow[data-state="run"] .tmark { border-style: dashed; animation: spin 1.4s linear infinite; }
.trow[data-state="pass"] { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.trow[data-state="pass"] .tmark { background: var(--ok); border-color: var(--ok-deep); color: #fff; animation: tick .42s var(--pop); }
.trow[data-state="pass"] .tmark .ic:first-child { opacity: 1; } .trow[data-state="pass"] .tmark .ic:last-child { display: none; }
.trow[data-state="fail"] { background: var(--err-soft); border-color: color-mix(in srgb, var(--err) 40%, transparent); }
.trow[data-state="fail"] .tmark { background: var(--err); border-color: var(--err); color: #fff; animation: shake .36s var(--ease-out); }
.trow[data-state="fail"] .tmark .ic:last-child { opacity: 1; } .trow[data-state="fail"] .tmark .ic:first-child { display: none; }
@keyframes tick { 0% { transform: scale(calc(1 - .4 * var(--mvn))); } 100% { transform: scale(1); } }
.trow[data-state="pass"]::after { content: ""; position: absolute; }
.ck-tip, .golf-note { margin-top: 14px; padding: 10px 14px; border-radius: 14px; background: var(--ai-soft); color: var(--ai-ink); font-size: .9rem; line-height: 1.55; }
.golf-note { display: flex; gap: 8px; align-items: flex-start; background: var(--sun-soft); color: var(--sun-ink); } .golf-note .ic { margin-top: 3px; }
.fail-help { margin-top: 14px; padding: 14px; border-radius: 16px; background: var(--surface-2); display: grid; gap: 10px; justify-items: start; animation: viewIn .25s var(--ease-out) both; }
.hint-list { display: grid; gap: 10px; margin: 14px 0; }
.hint { display: flex; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--sun-soft); } .hint-n { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--sun); color: #3A2A00; display: grid; place-items: center; font-weight: 800; font-size: .85rem; } .hint .md > :first-child { margin-top: 0; } .hint .md > :last-child { margin-bottom: 0; }
.fold { margin-top: 14px; border: 2px solid var(--line); border-radius: 14px; overflow: hidden; } .fold summary { padding: 10px 14px; font-weight: 700; cursor: pointer; background: var(--surface-2); }
.code-mini { margin: 0; padding: 12px 14px; max-height: 360px; overflow: auto; background: var(--code-bg); font: .78rem/1.6 var(--mono); }

/* chat */
.col-title { display: flex; align-items: center; gap: 8px; padding: 6px 0; } .ch-doki { width: 28px; height: 28px; }
.ch-right { display: flex; align-items: center; gap: 8px; }
.count { font-size: .8rem; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.golf-stars { display: inline-flex; }
.chat-list { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 14px 8px; display: flex; flex-direction: column; gap: 12px; overscroll-behavior: contain; background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--ai-soft) 40%, var(--surface))); }
.msg { display: flex; gap: 8px; max-width: 92%; animation: msgIn .26s var(--ease-out) both; }
@keyframes msgIn { from { opacity: 0; transform: translateY(calc(var(--mv) * 8)) scale(calc(1 - .02 * var(--mvn))); } }
.msg.me { align-self: flex-end; } .msg.ai { align-self: flex-start; }
.avatar { width: 34px; height: 34px; flex: none; margin-top: 2px; }
.bub-col { display: grid; gap: 6px; justify-items: start; min-width: 0; }
.bub { padding: 10px 14px; border-radius: 18px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.me .bub { background: var(--accent); color: var(--on-accent); border-bottom-right-radius: 6px; font-weight: 550; }
.msg.ai .bub { background: var(--ai-soft); color: var(--ink); border-top-left-radius: 6px; }
.bub.err { background: var(--err-soft); color: var(--err-ink); display: grid; gap: 6px; justify-items: start; } .bub.err p { margin: 0; }
.v-chip { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; color: var(--ink-3); font-size: .78rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; transition: color .15s, background-color .15s, transform .14s var(--ease-out); } .v-chip:active { transform: scale(var(--press)); }
@media (hover: hover) and (pointer: fine) { .v-chip:hover { background: var(--surface-3); color: var(--ink); } }
.sys-note { align-self: center; font-size: .8rem; font-weight: 650; color: var(--ink-2); background: var(--surface-3); padding: 4px 12px; border-radius: 999px; animation: msgIn .26s var(--ease-out) both; }
.chat-empty { margin: auto; text-align: center; display: grid; justify-items: center; gap: 10px; color: var(--ink-2); max-width: 260px; } .ce-doki { width: 88px; height: 88px; }
.fb { margin: 0 12px; padding: 12px 36px 12px 14px; border-radius: 16px; background: var(--ai-soft); color: var(--ai-ink); position: relative; font-size: .9rem; animation: viewIn .22s var(--ease-out) both; }
.fb ul { margin: 6px 0 0; padding-left: 18px; } .fb-title { display: flex; align-items: center; gap: 8px; font-weight: 800; } .fb-doki { width: 26px; height: 26px; } .fb-x { position: absolute; top: 8px; right: 8px; border: 0; background: transparent; color: inherit; border-radius: 8px; padding: 4px; }
.composer { flex: none; padding: 10px 12px 12px; border-top: 2px solid var(--line); background: var(--surface); display: grid; gap: 8px; }
.cmp-row { display: flex; gap: 8px; align-items: flex-end; }
.chat-input, .tu-input { flex: 1; min-width: 0; resize: none; border: 2px solid var(--line); border-radius: 20px; padding: 11px 16px; background: var(--surface-2); line-height: 1.5; max-height: 150px; transition: border-color .16s, box-shadow .16s, background-color .16s; }
.chat-input:focus, .tu-input:focus { border-color: var(--ai); box-shadow: var(--ring); background: var(--surface); }
.send { flex: none; }
.cmp-tools { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .cmp-hint { font-size: .75rem; color: var(--ink-3); }
.ver-pop { position: absolute; right: 10px; top: calc(100% + 6px); z-index: 10; width: min(300px, 90%); max-height: 320px; overflow: auto; padding: 8px; border-radius: 18px; background: var(--surface); border: 2px solid var(--line-2); box-shadow: 0 16px 40px -12px rgba(30,20,40,.35); transform-origin: top right; opacity: 0; transform: scale(.96) translateY(calc(var(--mv) * -4)); transition: opacity .15s var(--ease-out), transform .15s var(--ease-out); }
.ver-pop.in { opacity: 1; transform: none; }
.vp-title { padding: 6px 10px; font-size: .8rem; font-weight: 800; color: var(--ink-3); }
.vp-item { display: grid; width: 100%; text-align: left; gap: 1px; padding: 9px 12px; border: 0; border-radius: 12px; background: transparent; transition: background-color .15s, transform .14s var(--ease-out); } .vp-item:active { transform: scale(var(--press)); } .vp-item small { color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vp-item.cur { background: var(--ai-soft); }
@media (hover: hover) and (pointer: fine) { .vp-item:hover { background: var(--surface-2); } }

/* preview + code */
.right-head { padding-right: 8px; }
.pv-wrap { position: relative; flex: 1; min-height: 0; background: repeating-conic-gradient(var(--surface-2) 0 25%, var(--surface) 0 50%) 0 0 / 22px 22px; }
.stage { position: absolute; inset: 0; }
.pv-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; opacity: 1; }
.pv-frame.pv-in { animation: pvIn .32s var(--ease-out) both; }
@keyframes pvIn { from { opacity: 0; transform: scale(calc(1 - .015 * var(--mvn))); } }
.pv-empty { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 8px; text-align: center; padding: 24px; color: var(--ink-2); background: var(--surface); } .pv-empty h3 { color: var(--ink); } .pv-doki { width: 104px; height: 104px; }
.pv-building { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 3; display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 10px; border-radius: 999px; background: var(--surface); border: 2px solid var(--ai); color: var(--ai-ink); box-shadow: var(--shadow); animation: viewIn .25s var(--ease-out) both; } .pv-building .pv-doki { width: 30px; height: 30px; }
.mock-banner { position: absolute; z-index: 4; top: 8px; left: 50%; transform: translateX(-50%); font-size: .78rem; font-weight: 700; padding: 3px 12px; border-radius: 999px; background: var(--sun); color: #3A2A00; }
.err-box { flex: none; display: grid; gap: 8px; padding: 10px; background: var(--err-soft); border-top: 2px solid var(--line); max-height: 40%; overflow: auto; }
.err-card { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 10px 12px; border-radius: 16px; background: var(--surface); border: 2px solid color-mix(in srgb, var(--err) 50%, transparent); animation: viewIn .22s var(--ease-out) both; }
.err-doki { width: 48px; height: 48px; flex: none; } .err-body { flex: 1; min-width: 160px; display: grid; gap: 2px; color: var(--err-ink); } .err-body p { margin: 0; } .err-body code { font: .72rem var(--mono); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.codeview { position: absolute; inset: 0; display: flex; overflow: auto; background: var(--code-bg); }
.gutter, .codepre { margin: 0; padding: 14px 0; font: .8rem/1.7 var(--mono); tab-size: 2; }
.gutter { position: sticky; left: 0; flex: none; padding: 14px 10px 14px 14px; text-align: right; color: var(--ink-3); background: var(--code-bg); user-select: none; border-right: 2px solid var(--line); min-width: 44px; }
.codepre { flex: 1; padding-left: 14px; padding-right: 20px; color: var(--code-ink); overflow: visible; white-space: pre; }
[class^="tk-"] { font-style: normal; } .tk-k { color: var(--tk-k); } .tk-s { color: var(--tk-s); } .tk-n { color: var(--tk-n); } .tk-c { color: var(--tk-c); font-style: italic; } .tk-t { color: var(--tk-t); } .tk-a { color: var(--tk-a); } .tk-f { color: var(--tk-f); } .tk-p { color: var(--tk-p); } .tk-sel { color: var(--tk-sel); }

/* ----- markdown ----- */
.md { font-size: 1rem; line-height: 1.75; }
.md > :first-child { margin-top: 0; } .md > :last-child { margin-bottom: 0; }
.md p { margin: 0 0 .9em; } .md h2 { font-size: 1.25rem; font-weight: 800; margin: 1.6em 0 .5em; } .md h3 { font-size: 1.08rem; font-weight: 800; margin: 1.4em 0 .4em; } .md h4 { font-size: 1rem; margin: 1.2em 0 .3em; }
.md ul, .md ol { margin: 0 0 .9em; padding-left: 1.4em; } .md li { margin: .25em 0; } .md li::marker { color: var(--accent-deep); font-weight: 700; }
.md a { color: var(--ai-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--ai) 50%, transparent); }
.md code { font: .88em var(--mono); background: var(--surface-3); padding: .12em .45em; border-radius: 7px; }
.md hr { border: 0; border-top: 2px dashed var(--line-2); margin: 1.6em 0; }
.md-fig { margin: 1em 0; display: grid; justify-items: center; gap: 6px; } .md-fig figcaption { font-size: .85rem; color: var(--ink-3); } .md-img { border-radius: 16px; max-height: 320px; }
.tbl { overflow-x: auto; margin: 0 0 1em; border: 2px solid var(--line); border-radius: 14px; } .md table { border-collapse: collapse; width: 100%; font-size: .92rem; } .md th, .md td { padding: 9px 14px; text-align: left; border-bottom: 1px solid var(--line); } .md th { background: var(--surface-2); font-weight: 800; } .md tr:last-child td { border-bottom: 0; }
.callout { display: flex; gap: 12px; margin: 0 0 1em; padding: 12px 16px; border-radius: 16px; } .callout > div { flex: 1; min-width: 0; } .callout .md > p:last-child, .callout p:last-child { margin-bottom: 0; }
.callout.tip { background: var(--sun-soft); color: var(--ink); } .callout.warn { background: var(--err-soft); } .callout.quote { background: var(--surface-2); border-left: 4px solid var(--line-2); border-radius: 6px 16px 16px 6px; color: var(--ink-2); }
.co-ic { flex: none; width: 24px; height: 24px; margin-top: 2px; background: currentColor; -webkit-mask: var(--m) center/contain no-repeat; mask: var(--m) center/contain no-repeat; }
.co-tip { color: #D9A000; --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.5 10.9c.6.5 1 1.2 1 2.1h5c0-.9.4-1.6 1-2.1A6 6 0 0 0 12 3z'/%3E%3C/svg%3E"); }
.co-warn { color: var(--err); --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4l9 16H3zM12 10v4M12 17.5v.1'/%3E%3C/svg%3E"); }
.cb { position: relative; margin: 0 0 1em; } .cb pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; } .cb code { font: inherit; background: none; padding: 0; }
.cb figcaption { font-size: .75rem; font-weight: 800; letter-spacing: .02em; margin: 0 0 4px 6px; color: var(--ink-3); }
.cb:has(figcaption) .cb-copy { top: -4px; right: 0; }
.cb-copy { position: absolute; top: 6px; right: 6px; z-index: 2; border: 0; padding: 4px 10px; border-radius: 999px; font-size: .75rem; font-weight: 750; background: color-mix(in srgb, var(--surface) 85%, transparent); color: var(--ink-2); transition: transform .14s var(--ease-out), background-color .15s; } .cb-copy:active { transform: scale(var(--press)); } .cb-copy.ok { background: var(--ok); color: #fff; }
.cb-prompt, .cb-prompt-good, .cb-prompt-bad { max-width: 92%; } .cb-prompt { margin-left: auto; }
.cb-prompt pre, .cb-prompt-good pre, .cb-prompt-bad pre { padding: 12px 16px; border-radius: 18px 18px 6px 18px; font: .95rem/1.6 var(--font); background: var(--accent-soft); color: var(--accent-text); }
.cb-prompt-good pre { background: var(--ok-soft); color: var(--ok-ink); border-radius: 18px 18px 18px 6px; } .cb-prompt-bad pre { background: var(--err-soft); color: var(--err-ink); border-radius: 18px 18px 18px 6px; }
.cb-prompt-good, .cb-prompt-bad { max-width: none; }
.cb-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 1em; }
.ws-col .cb-pair, .tb .cb-pair { grid-template-columns: 1fr; } .cb-pair .cb { margin: 0; }
.cb-ai { max-width: 92%; } .cb-ai pre { padding: 12px 16px; border-radius: 18px 18px 18px 6px; background: var(--ai-soft); color: var(--ink); font: .95rem/1.6 var(--font); }
.cb-powershell pre, .cb-code pre { padding: 14px 16px; border-radius: 14px; font: .82rem/1.65 var(--mono); }
.cb-powershell pre { background: var(--term-bg); color: var(--term-ink); } .cb-powershell pre code::before { content: "PS> "; color: #8F7CE8; }
.cb-powershell .cb-copy { background: rgba(255,255,255,.12); color: #F2ECF4; } .cb-code pre { background: var(--code-bg); color: var(--code-ink); overflow-x: auto; white-space: pre; }

/* ----- quiz / mission / euler ----- */
.doc-page .doc { width: 100%; max-width: 720px; margin: 0 auto; padding: 28px var(--gut) 100px; }
.doc-page.wide .eu-grid { max-width: 1120px; }
.q { margin: 18px 0 26px; } .q-title { display: flex; gap: 12px; font-size: 1.08rem; font-weight: 800; margin-bottom: 12px; } .q-n { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--ai); color: var(--on-ai); display: grid; place-items: center; font-size: .85rem; }
.choices { display: grid; gap: 10px; }
.choice { display: flex; gap: 12px; align-items: center; text-align: left; padding: 12px 16px; border-radius: 16px; background: var(--surface); border: 2px solid var(--line); box-shadow: 0 3px 0 var(--line); transition: transform .14s var(--ease-out), box-shadow .14s var(--ease-out), border-color .16s, background-color .16s; }
.choice:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }
@media (hover: hover) and (pointer: fine) { .choice:hover:not(:disabled) { border-color: var(--ai); } }
.choice-key { flex: none; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; font-weight: 800; font-size: .85rem; background: var(--surface-3); color: var(--ink-2); }
.choice.right { background: var(--ok-soft); border-color: var(--ok); box-shadow: 0 3px 0 var(--ok-deep); } .choice.right .choice-key { background: var(--ok); color: #fff; }
.choice.wrong { background: var(--err-soft); border-color: var(--err); animation: shake .36s var(--ease-out); }
.choice:disabled:not(.right) { opacity: .55; }
.q-msg { min-height: 1.4em; margin-top: 8px; font-weight: 700; } .q-msg.good { color: var(--ok-ink); } .q-msg.bad { color: var(--err-ink); }
.q-why { margin-top: 6px; padding: 12px 16px; border-radius: 14px; background: var(--ok-soft); animation: viewIn .22s var(--ease-out) both; }
.doc-actions { display: flex; justify-content: center; margin-top: 28px; } .done-note { margin-top: 24px; text-align: center; }
.steps { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; }
.step { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 18px; background: var(--surface); border: 2px solid var(--line); box-shadow: 0 3px 0 var(--line); transition: background-color .25s, border-color .25s; }
.step.on { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 50%, transparent); }
.step-body { flex: 1; min-width: 0; } .step-body .md p:last-child { margin-bottom: 0; }
.tcheck { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; flex: none; }
.tcheck input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.tcheck .box { width: 28px; height: 28px; border-radius: 9px; border: 2px solid var(--line-2); background: var(--surface); display: grid; place-items: center; color: transparent; transition: background-color .16s, border-color .16s, transform .14s var(--ease-out), color .16s; }
.tcheck input:checked ~ .box { background: var(--ok); border-color: var(--ok-deep); color: #fff; animation: tick .36s var(--pop); }
.tcheck input:focus-visible ~ .box { box-shadow: var(--ring); }
.tcheck:active .box { transform: scale(.92); }
.step-n { display: none; }
.tcheck.row { display: flex; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); margin-bottom: 8px; } .tcheck-text { flex: 1; line-height: 1.5; }
.check-card { margin-top: 28px; padding: 20px; border-radius: 22px; background: var(--ai-soft); border: 2px solid color-mix(in srgb, var(--ai) 40%, transparent); box-shadow: 0 4px 0 color-mix(in srgb, var(--ai) 40%, transparent); }
.check-card h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .cc-doki { width: 40px; height: 40px; } .check-card .btn { margin-top: 10px; }
.eu-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px; padding: 24px var(--gut) 100px; margin: 0 auto; width: 100%; max-width: 1120px; align-items: start; }
.eu-left, .eu-right { display: grid; gap: 16px; } .eu-right { position: sticky; top: calc(var(--hdr-h) + 16px); }
.eu-card { padding: 18px 20px; border-radius: 22px; background: var(--surface); border: 2px solid var(--line); box-shadow: 0 4px 0 var(--line); }
.eu-card .ck-head { margin-top: 0; }
.notes { font-family: var(--mono); font-size: .88rem; min-height: 180px; }
.saved { color: var(--ink-3); } .ans-row { display: flex; gap: 10px; margin-top: 8px; } .ans { font-weight: 700; font-size: 1.05rem; }

/* ----- tutor drawer ----- */
.fab { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 40; display: flex; align-items: center; gap: 8px; padding: 6px 18px 6px 8px; border-radius: 999px; border: 2px solid var(--ai-deep); background: var(--ai); color: var(--on-ai); font-weight: 800; box-shadow: 0 5px 0 var(--ai-deep), 0 14px 30px -10px rgba(60,40,120,.45); transition: transform .14s var(--ease-out), box-shadow .14s var(--ease-out); animation: viewIn .4s var(--ease-out) .3s both; }
.fab:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ai-deep); }
.fab-doki { width: 40px; height: 40px; background: #fff; border-radius: 50%; padding: 3px; }
.drawer-wrap { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
.drawer-wrap.in { pointer-events: auto; }
.scrim { position: absolute; inset: 0; background: rgba(30,20,40,.4); opacity: 0; transition: opacity .25s var(--ease-out); } .in > .scrim { opacity: 1; }
.drawer { position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100%); display: flex; flex-direction: column; background: var(--surface); border-left: 2px solid var(--line-2); box-shadow: -16px 0 40px -16px rgba(30,20,40,.35); transform: translateX(100%); transition: transform .34s var(--ease-drawer); }
.in > .drawer { transform: none; }
.drawer-wrap:not(.in) > .scrim { transition-duration: .18s; } .drawer-wrap:not(.in) > .drawer { transition-duration: .24s; }
.tu-head { display: flex; align-items: center; gap: 12px; padding: 14px 14px 12px 18px; border-bottom: 2px solid var(--line); background: var(--ai-soft); } .tu-head > div { flex: 1; display: grid; line-height: 1.35; } .tu-head small { color: var(--ink-2); } .tu-doki { width: 44px; height: 44px; }
.tu-list { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
.tu-empty { margin: auto; text-align: center; display: grid; justify-items: center; gap: 8px; color: var(--ink-2); max-width: 270px; } .tu-empty-doki { width: 100px; height: 100px; }
.tb { max-width: 92%; padding: 10px 14px; border-radius: 18px; line-height: 1.6; animation: msgIn .24s var(--ease-out) both; overflow-wrap: anywhere; }
.tb.me { align-self: flex-end; background: var(--accent); color: var(--on-accent); border-bottom-right-radius: 6px; font-weight: 550; white-space: pre-wrap; }
.tb.doki { align-self: flex-start; background: var(--ai-soft); border-top-left-radius: 6px; } .tb.doki.err { background: var(--err-soft); color: var(--err-ink); }
.tb.doki .md-img, .tb.doki img { max-width: 100%; } .tb p { margin: 0 0 .6em; } .tb p:last-child, .tb ul:last-child { margin-bottom: 0; } .tb ul, .tb ol { margin: 0 0 .6em; padding-left: 1.3em; }
.tb code { font: .88em var(--mono); background: color-mix(in srgb, var(--ink) 10%, transparent); padding: .1em .4em; border-radius: 6px; } .tb .cb pre { font-size: .8rem; }
.tb.streaming::after { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ai); margin-left: 4px; animation: dot 1s infinite; }
.tu-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 10px; }
.tu-foot { display: flex; gap: 8px; align-items: flex-end; padding: 12px; border-top: 2px solid var(--line); padding-bottom: calc(12px + env(safe-area-inset-bottom)); }

/* ----- celebration ----- */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 140; overflow: hidden; }
.cf { position: absolute; width: 10px; height: 14px; border-radius: 3px; will-change: transform, opacity; } .cf-1 { width: 11px; height: 11px; border-radius: 50%; } .cf-2 { width: 14px; height: 7px; border-radius: 4px; }
.cel { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; pointer-events: none; }
.cel > * { pointer-events: auto; } .cel.calm { place-items: end center; pointer-events: none; padding-bottom: 24px; }
.cel-scrim { position: absolute; inset: 0; background: rgba(40,25,50,.45); opacity: 0; transition: opacity .25s var(--ease-out); } .cel.in .cel-scrim { opacity: 1; }
.cel-card { position: relative; display: grid; justify-items: center; gap: 4px; text-align: center; width: min(92vw, 420px); padding: 64px 28px 26px; margin-top: 56px; border-radius: 32px; background: var(--surface); border: 3px solid var(--accent); box-shadow: 0 8px 0 var(--accent-deep), 0 30px 60px -20px rgba(40,20,40,.5); opacity: 0; transform: translateY(calc(var(--mv) * 24)) scale(.94); transition: opacity .22s var(--ease-out), transform .42s var(--pop); }
.cel.in .cel-card { opacity: 1; transform: none; }
.cel-card.calm { margin: 0; padding: 18px 22px; grid-auto-flow: column; justify-content: center; border-radius: 22px; width: auto; max-width: 92vw; border-width: 2px; box-shadow: var(--shadow); }
.cel-doki { position: absolute; top: -76px; left: 50%; width: 130px; height: 130px; margin-left: -65px; animation: celBob 1.6s var(--ease-in-out) infinite .5s; }
@keyframes celBob { 50% { transform: translateY(calc(var(--mv) * -7)) rotate(-2deg); } }
.cel-body { display: grid; justify-items: center; gap: 10px; } .cel-body h2 { font-size: 1.7rem; font-weight: 800; }
.cel-line { color: var(--ink-2); } .cel-next { color: var(--ink-2); font-size: .95rem; } .cel-next b { color: var(--ink); }
.cel-actions { display: grid; gap: 8px; justify-items: center; margin-top: 10px; width: 100%; } .cel-actions .btn.big { width: 100%; }
.cel-card.calm .cel-body { grid-auto-flow: column; align-items: center; gap: 14px; } .cel-card.calm .cel-actions { margin: 0; width: auto; grid-auto-flow: column; } .cel-card.calm .cel-actions .btn.big { width: auto; min-height: 44px; font-size: 1rem; } .cel-card.calm .cel-body h2 { font-size: 1.1rem; } .cel-card.calm .cel-next, .cel-card.calm .cel-line { display: none; }

/* ----- scenes / login / episodes / settings ----- */
.scene-overlay { position: fixed; inset: 0; z-index: 130; background: rgba(20,12,28,.92); display: grid; place-items: center; opacity: 0; transition: opacity .22s var(--ease-out); } .scene-overlay.in { opacity: 1; }
.scene-stage { width: min(96vw, 960px); aspect-ratio: 16 / 9; max-height: 82dvh; border-radius: 24px; overflow: hidden; background: #fff; }
.scene-skip { position: absolute; right: 18px; top: 18px; color: #fff; }
.login { display: grid; place-items: center; min-height: 100dvh; padding: 24px; }
.login-card { display: grid; gap: 12px; justify-items: center; text-align: center; width: min(92vw, 380px); padding: 34px 28px 28px; border-radius: 32px; background: var(--surface); border: 2px solid var(--line); box-shadow: 0 6px 0 var(--line), var(--shadow); }
.login-card h1 { font-size: 2rem; font-weight: 800; } .login-card p { color: var(--ink-2); margin-bottom: 8px; } .login-doki { width: 140px; height: 140px; animation: bob 3.2s var(--ease-in-out) infinite; }
.login-card .btn { width: 100%; } .big-field { text-align: center; font-size: 1.1rem; min-height: 54px; border-radius: 18px; }
.ep-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-top: 18px; }
.epcard { display: grid; gap: 4px; justify-items: start; text-align: left; padding: 16px; border-radius: 20px; background: var(--surface); border: 2px solid var(--line); box-shadow: 0 4px 0 var(--line); transition: transform .14s var(--ease-out), box-shadow .14s var(--ease-out); animation: viewIn .3s var(--ease-out) both; animation-delay: calc(var(--i) * 30ms); } .epcard:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--line); } .epcard.locked { cursor: default; } .epcard.locked .ep-art { filter: grayscale(1) blur(7px) opacity(.5); transform: scale(1.15); } .epcard.locked b { color: var(--ink-3); }
.ep-cover { position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: var(--surface-2); display: grid; place-items: center; margin-bottom: 8px; } .ep-art { width: 100%; height: 100%; object-fit: cover; } .ep-art.mascot { object-fit: contain; padding: 8px; }
.ep-play, .ep-lock { position: absolute; right: 8px; bottom: 8px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); box-shadow: 0 3px 0 var(--accent-deep); } .ep-lock { background: var(--surface-3); color: var(--ink-3); box-shadow: none; } .ep-ic { width: 44px; height: 44px; border-radius: 14px; background: var(--accent-soft); color: var(--accent-text); display: grid; place-items: center; margin-bottom: 6px; } .epcard small { color: var(--ink-3); }
.scard { padding: 6px 20px; margin-bottom: 16px; border-radius: 22px; background: var(--surface); border: 2px solid var(--line); box-shadow: 0 4px 0 var(--line); } .scard h2 { font-size: .85rem; letter-spacing: .04em; color: var(--ink-3); padding: 14px 0 4px; }
.srow { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); } .srow:last-child { border-bottom: 0; } .srow-txt { display: grid; min-width: 0; } .srow-txt small { color: var(--ink-3); line-height: 1.45; }
.segmented { display: inline-flex; padding: 4px; gap: 2px; border-radius: 14px; background: var(--surface-3); flex: none; }
.sg { border: 0; background: transparent; padding: 7px 14px; border-radius: 10px; font-weight: 700; font-size: .875rem; color: var(--ink-2); transition: background-color .16s, color .16s, transform .14s var(--ease-out); white-space: nowrap; } .sg:active { transform: scale(var(--press)); } .sg[aria-checked="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(40,25,30,.18); }
.switch { flex: none; width: 52px; height: 30px; border-radius: 999px; border: 0; padding: 3px; background: var(--line-2); transition: background-color .2s; display: flex; } .switch i { width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .24s var(--ease-out); } .switch[aria-checked="true"] { background: var(--ok); } .switch[aria-checked="true"] i { transform: translateX(22px); } .switch:active i { width: 28px; }
.range { width: 180px; accent-color: var(--accent-deep); }
.rw-host { min-height: 200px; }

/* ----- responsive ----- */
@media (max-width: 1180px) {
  .ws { grid-template-columns: minmax(250px, .85fr) minmax(280px, 1fr) minmax(320px, 1.2fr); gap: 10px; padding-inline: 14px; }
  .nav-a span { display: none; } .nav-a { padding: 9px 10px; }
}
@media (max-width: 1000px) {
  .ws { grid-template-columns: minmax(240px, .8fr) minmax(0, 1fr) minmax(280px, 1.1fr); }
  .tab span { font-size: .85rem; } .count { display: none; }
}
@media (max-width: 960px) {
  .home { display: flex; flex-direction: column; align-items: stretch; gap: 18px; }
  .home-left, .home-right { display: contents; }
  .room-host { order: 1; } .greet { order: 2; } .resume-slot { order: 3; } .quest-host { order: 4; } .path-sec { order: 5; } .extras-sec { order: 6; }
}
@media (max-width: 860px) {
  :root { --gut: 16px; --hdr-h: 56px; }
  .logo span { display: none; }
  .nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; justify-content: space-around; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 2px solid var(--line); }
  .nav-a { flex-direction: column; gap: 1px; padding: 5px 4px; min-width: 52px; font-size: .68rem; } .nav-a span { display: block; } .nav-a .ic svg { width: 22px; height: 22px; }
  body:not(.is-lesson) #main { padding-bottom: 76px; }
  body.is-lesson .nav { display: none; }
  .page { padding-top: 18px; } .page-title { font-size: 1.5rem; }
  .greet h1 { font-size: 1.4rem; } .resume h2 { font-size: 1.3rem; }
  .node-art { width: 48px; height: 48px; } .node-dot { width: 46px; height: 46px; } .path::before { left: 22px; }
  .track-head { gap: 14px; } .th-art { width: 72px; height: 72px; } .track-head h1 { font-size: 1.4rem; }
  .lside small, .lside .kind { display: none; }
  .lh { flex-wrap: wrap; gap: 6px 12px; padding: 8px var(--gut); } .lh-main { order: 3; flex-basis: 100%; } .lh-title { font-size: 1.1rem; } .lh-back { max-width: 140px; } .lh-actions { margin-left: auto; }
  .ws-page { height: calc(100dvh - var(--hdr-h)); }
  .ws { display: flex; flex-direction: column; gap: 10px; padding: 8px 12px 12px; }
  .ws-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 16px; background: var(--surface-3); flex: none; }
  .seg { border: 0; background: transparent; padding: 8px; border-radius: 12px; font-weight: 750; color: var(--ink-2); transition: background-color .16s, color .16s, transform .14s var(--ease-out); } .seg:active { transform: scale(var(--press)); } .seg[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(40,25,30,.18); }
  .ws-col { display: none; flex: 1; border-radius: 18px; } 
  .ws[data-pane="learn"] .ws-left, .ws[data-pane="chat"] .ws-mid, .ws[data-pane="result"] .ws-right { display: flex; animation: viewIn .2s var(--ease-out) both; }
  .cmp-hint { display: none; } .count { display: inline; }
  .fab { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); padding: 5px; } .fab-label { display: none; } body.is-lesson .ws-page ~ .fab { bottom: 14px; }
  body.is-lesson .fab { bottom: calc(86px + env(safe-area-inset-bottom)); }
  .ws-scroll { padding-bottom: 80px; }
  .cb-pair { grid-template-columns: 1fr; } .cb-prompt, .cb-ai { max-width: 100%; }
  .eu-grid { grid-template-columns: 1fr; padding-bottom: 100px; } .eu-right { position: static; }
  .srow { flex-wrap: wrap; } .range { width: 140px; }
  .drawer { width: 100%; top: 12%; border-left: 0; border-radius: 24px 24px 0 0; border-top: 2px solid var(--line-2); transform: translateY(100%); } .in > .drawer { transform: none; }
  .cel-card.calm { grid-auto-flow: row; } .cel-card.calm .cel-body { grid-auto-flow: row; }
}
@media (max-width: 420px) { .hud-chip { padding: 5px 9px; font-size: .8rem; } .ver-label { font-size: .8rem; } .tab { padding-inline: 10px; } }

/* ----- reduced motion: keep fades and colour, drop movement and loops ----- */
@media (prefers-reduced-motion: reduce) {
  :root { --mv: 0px; --mvn: 0; }
  :root { --mv: 0px; }
  .dots i, .skel::after, .room-fallback .room-doki, .login-doki, .cel-doki, .node.current .node-dot, .btn.loading::after, .trow[data-state="run"] .tmark { animation: none; }
  .tab-ind, .drawer, .cel-card, .ver-pop { transition-property: opacity; }
  .btn:active:not(:disabled), .resume:active, .node:active .node-card { transform: none; }
  .ck-bar i { transition: none; }
}
:root[data-motion="reduce"] { --mv: 0px; --mvn: 0; }
html[data-motion="reduce"] .dots i, html[data-motion="reduce"] .skel::after, html[data-motion="reduce"] .room-fallback .room-doki, html[data-motion="reduce"] .login-doki, html[data-motion="reduce"] .cel-doki, html[data-motion="reduce"] .node.current .node-dot, html[data-motion="reduce"] .btn.loading::after, html[data-motion="reduce"] .trow[data-state="run"] .tmark { animation: none; }
html[data-motion="reduce"] .tab-ind, html[data-motion="reduce"] .drawer, html[data-motion="reduce"] .cel-card, html[data-motion="reduce"] .ver-pop { transition-property: opacity; }
html[data-motion="reduce"] .btn:active:not(:disabled), html[data-motion="reduce"] .resume:active, html[data-motion="reduce"] .node:active .node-card { transform: none; }
html[data-motion="reduce"] .ck-bar i { transition: none; }