/* Meridian — app styles */
html{-webkit-text-size-adjust:100%;}
body{margin:0;}
img{max-width:100%;}
:root{padding-top:env(safe-area-inset-top,0px);}

/* ============ tokens ============ */
:root{
  --ground:#F3F5F2; --panel:#FFFFFF; --panel-2:#F7F9F6; --sunk:#E9EDE8;
  --ink:#14211C; --ink-2:#44544D; --ink-3:#7A8983; --line:#DDE3DD; --line-2:#C9D2CB;
  --pen:#2448D8; --pen-ink:#1A36A8; --pen-soft:#E6EBFD;
  --hl:#E3EE4F; --hl-ink:#3E4400; --hl-soft:#F4F8C9;
  --good:#138A55; --good-soft:#DDF3E8; --warn:#A86A00; --warn-soft:#FCEFD6; --bad:#C8372D; --bad-soft:#FBE3E0; --verify:#6B4BD1; --verify-soft:#ECE6FB;
  --c1:#2448D8; --c2:#D1405E; --c3:#138A55; --c4:#C47A00; --c5:#7A45C9; --c6:#0E8A9A; --c7:#B5541C; --c8:#4F6B12;
  --shadow:0 1px 2px rgba(20,33,28,.06),0 8px 24px -14px rgba(20,33,28,.22);
  --radius:14px; --radius-sm:9px;
  --f-display:'Bricolage Grotesque','Avenir Next','Segoe UI',system-ui,sans-serif;
  --f-body:'Atkinson Hyperlegible','Segoe UI',system-ui,-apple-system,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  --ease-out:cubic-bezier(.22,1,.36,1); --ease-spring:cubic-bezier(.34,1.56,.64,1); --ease-in-out:cubic-bezier(.65,0,.35,1);
  --dur-fast:140ms; --dur:220ms; --dur-slow:380ms;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --ground:#0E1512; --panel:#151F1B; --panel-2:#121A17; --sunk:#1C2823;
    --ink:#E6EEE9; --ink-2:#B3C1BA; --ink-3:#7F8F88; --line:#25332D; --line-2:#33443C;
    --pen:#86A0FF; --pen-ink:#B9C8FF; --pen-soft:rgba(134,160,255,.14);
    --hl:#D2DE45; --hl-ink:#1E2200; --hl-soft:rgba(210,222,69,.14);
    --good:#4FD08F; --good-soft:rgba(79,208,143,.14); --warn:#F0B454; --warn-soft:rgba(240,180,84,.14); --bad:#FF8479; --bad-soft:rgba(255,132,121,.14); --verify:#B39CFF; --verify-soft:rgba(179,156,255,.15);
    --c1:#86A0FF; --c2:#FF7C98; --c3:#4FD08F; --c4:#F0B454; --c5:#BC95FF; --c6:#4CD3E3; --c7:#FF9A5E; --c8:#B4D060;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px -14px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --ground:#0E1512; --panel:#151F1B; --panel-2:#121A17; --sunk:#1C2823;
  --ink:#E6EEE9; --ink-2:#B3C1BA; --ink-3:#7F8F88; --line:#25332D; --line-2:#33443C;
  --pen:#86A0FF; --pen-ink:#B9C8FF; --pen-soft:rgba(134,160,255,.14);
  --hl:#D2DE45; --hl-ink:#1E2200; --hl-soft:rgba(210,222,69,.14);
  --good:#4FD08F; --good-soft:rgba(79,208,143,.14); --warn:#F0B454; --warn-soft:rgba(240,180,84,.14); --bad:#FF8479; --bad-soft:rgba(255,132,121,.14); --verify:#B39CFF; --verify-soft:rgba(179,156,255,.15);
  --c1:#86A0FF; --c2:#FF7C98; --c3:#4FD08F; --c4:#F0B454; --c5:#BC95FF; --c6:#4CD3E3; --c7:#FF9A5E; --c8:#B4D060;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px -14px rgba(0,0,0,.7);
}

/* ============ base ============ */
*{box-sizing:border-box;}
[hidden]{display:none!important;}
html,body{height:100%;}
body{background:var(--ground);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
h1,h2,h3,h4{font-family:var(--f-display);margin:0;text-wrap:balance;letter-spacing:-.01em;}
h1{font-size:1.9rem;font-weight:800;line-height:1.1;}
h2{font-size:1.35rem;font-weight:700;line-height:1.2;}
h3{font-size:1.05rem;font-weight:700;}
p{margin:0;}
a{color:var(--pen);}
button,input,select,textarea{font:inherit;color:inherit;}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums;}
.muted{color:var(--ink-3);}
.small{font-size:.85rem;}
.eyebrow{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);font-weight:500;}
.hl{background-image:linear-gradient(var(--hl),var(--hl));background-repeat:no-repeat;background-position:0 88%;background-size:100% .38em;
  padding:0 .06em;margin:0 -.02em;border-radius:.12em;-webkit-box-decoration-break:clone;box-decoration-break:clone;color:inherit;}
.hl.draw{animation:hlDraw .9s var(--ease-out) .25s both;}
@keyframes hlDraw{from{background-size:0% .38em;}to{background-size:100% .38em;}}
:focus-visible{outline:2px solid var(--pen);outline-offset:2px;}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:1ms!important;animation-delay:0ms!important;transition-duration:1ms!important;}}

/* ============ controls ============ */
.btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--line-2);background:var(--panel);color:var(--ink);
  font-weight:700;font-size:.9rem;padding:9px 15px;border-radius:999px;cursor:pointer;transition:background .15s,border-color .15s,transform .1s;white-space:nowrap;}
.btn:hover{background:var(--sunk);}
.btn:active{transform:translateY(1px);}
.btn:disabled{opacity:.5;cursor:not-allowed;}
.btn-primary{background:var(--ink);border-color:var(--ink);color:var(--ground);}
.btn-primary:hover{background:var(--ink-2);border-color:var(--ink-2);}
.btn-pen{background:var(--pen);border-color:var(--pen);color:#fff;}
:root[data-theme="dark"] .btn-pen{color:#0E1512;}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn-pen{color:#0E1512;}}
.btn-pen:hover{filter:brightness(1.07);background:var(--pen);}
.btn-ghost{background:transparent;border-color:transparent;color:var(--ink-2);}
.btn-ghost:hover{background:var(--sunk);}
.btn-danger{background:transparent;border-color:transparent;color:var(--bad);}
.btn-danger:hover{background:var(--bad-soft);}
.btn-sm{padding:6px 11px;font-size:.8rem;}
.btn-icon{padding:7px;border-radius:10px;min-width:34px;}
.field{display:flex;flex-direction:column;gap:5px;min-width:0;}
.field label{font-size:.8rem;font-weight:700;color:var(--ink-2);}
.input,.select,.textarea{width:100%;border:1px solid var(--line-2);background:var(--panel);border-radius:10px;padding:9px 12px;min-width:0;}
.textarea{min-height:140px;resize:vertical;line-height:1.5;}
.input:focus,.select:focus,.textarea:focus{outline:2px solid var(--pen);outline-offset:0;border-color:var(--pen);}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.row-between{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;}
.stack{display:flex;flex-direction:column;gap:12px;}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
@media (max-width:820px){.grid-3{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:560px){.grid-2,.grid-3{grid-template-columns:1fr;}}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--sunk);color:var(--ink-2);white-space:nowrap;}
.dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--cc,var(--ink-3));}
.tag-new{background:var(--sunk);color:var(--ink-3);} .tag-weak{background:var(--bad-soft);color:var(--bad);} .tag-developing{background:var(--warn-soft);color:var(--warn);}
.tag-strong{background:var(--pen-soft);color:var(--pen-ink);} .tag-mastered{background:var(--good-soft);color:var(--good);}

/* ============ shell ============ */
.app{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100%;}
.side{position:sticky;top:env(safe-area-inset-top,0px);height:100vh;height:100dvh;display:flex;flex-direction:column;gap:18px;padding:22px 16px;border-right:1px solid var(--line);background:var(--panel-2);overflow-y:auto;}
.brand{display:flex;align-items:center;gap:10px;padding:0 6px;}
.brand-mark{width:30px;height:30px;flex:none;}
.brand-name{font-family:var(--f-display);font-weight:800;font-size:1.2rem;letter-spacing:-.02em;}
.nav{display:flex;flex-direction:column;gap:2px;}
.nav-btn{appearance:none;border:0;background:transparent;display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;cursor:pointer;color:var(--ink-2);font-weight:700;text-align:left;width:100%;}
.nav-btn:hover{background:var(--sunk);color:var(--ink);}
.nav-btn.on{background:var(--ink);color:var(--ground);}
.nav-btn svg{flex:none;}
.nav-sub{display:flex;flex-direction:column;gap:1px;margin-top:4px;}
.nav-class{appearance:none;border:0;background:transparent;display:flex;align-items:center;gap:9px;padding:6px 10px;border-radius:9px;cursor:pointer;color:var(--ink-2);font-size:.88rem;text-align:left;width:100%;min-width:0;}
.nav-class span.nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.nav-class:hover{background:var(--sunk);}
.nav-class.on{background:var(--sunk);color:var(--ink);font-weight:700;}
.side-foot{margin-top:auto;display:flex;align-items:center;gap:10px;padding:10px 6px 0;border-top:1px solid var(--line);font-size:.82rem;}
.avatar{width:30px;height:30px;border-radius:50%;flex:none;object-fit:cover;background:var(--sunk);}
.main{min-width:0;padding-inline:clamp(16px,4vw,44px);padding-block:26px 90px;}
.page{max-width:1080px;margin:0 auto;display:flex;flex-direction:column;gap:22px;}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;}
.crumbs{display:flex;gap:6px;align-items:center;font-size:.82rem;color:var(--ink-3);flex-wrap:wrap;}
.crumbs button{appearance:none;border:0;background:none;padding:0;color:var(--ink-3);cursor:pointer;font-weight:700;}
.crumbs button:hover{color:var(--ink);text-decoration:underline;}
.tabbar{display:none;}
.save-badge{font-family:var(--f-mono);font-size:.68rem;color:var(--ink-3);}
@media (max-width:860px){
  .app{grid-template-columns:1fr;}
  .side{display:none;}
  .main{padding-block:18px 96px;}
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--panel);border-top:1px solid var(--line);
    padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));justify-content:space-around;}
  .tab-btn{appearance:none;border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:.68rem;font-weight:700;color:var(--ink-3);padding:6px 8px;border-radius:10px;cursor:pointer;min-width:58px;}
  .tab-btn.on{color:var(--ink);background:var(--sunk);}
  .mobile-top{display:flex!important;}
}
.mobile-top{display:none;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;}

/* ============ surfaces ============ */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);min-width:0;}
.card-flat{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;min-width:0;}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;flex-wrap:wrap;}
.empty{border:1.5px dashed var(--line-2);border-radius:var(--radius);padding:22px;text-align:center;color:var(--ink-3);display:flex;flex-direction:column;gap:10px;align-items:center;}
.notice{border-radius:12px;padding:12px 14px;font-size:.9rem;line-height:1.45;border:1px solid;}
.notice.info{background:var(--pen-soft);border-color:transparent;color:var(--ink);}
.notice.warn{background:var(--warn-soft);border-color:transparent;color:var(--ink);}
.notice.bad{background:var(--bad-soft);border-color:transparent;color:var(--ink);}
.notice.good{background:var(--good-soft);border-color:transparent;color:var(--ink);}
.divider{height:1px;background:var(--line);border:0;margin:4px 0;}
.toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);background:var(--ink);color:var(--ground);padding:10px 16px;border-radius:999px;font-weight:700;font-size:.88rem;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:90;max-width:calc(100% - 32px);text-align:center;}
.toast.show{opacity:1;transform:translate(-50%,0);}
@media (min-width:861px){.toast{bottom:28px;}}
.modal-back{position:fixed;inset:0;background:rgba(10,16,13,.45);z-index:80;display:flex;align-items:flex-start;justify-content:center;padding:max(40px,env(safe-area-inset-top,0px)) 16px 24px;overflow-y:auto;}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);width:100%;max-width:520px;padding:20px;display:flex;flex-direction:column;gap:14px;animation:pop .18s ease;}
@keyframes pop{from{transform:translateY(8px) scale(.98);opacity:0;}to{transform:none;opacity:1;}}
.thinking{display:inline-flex;align-items:center;gap:8px;color:var(--ink-2);font-weight:700;}
.thinking::before{content:'';width:14px;height:14px;border-radius:50%;border:2px solid var(--line-2);border-top-color:var(--pen);animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ============ home ============ */
.hero-day{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;}
@media (max-width:860px){.hero-day{grid-template-columns:1fr;}}
.next-up{background:var(--ink);color:var(--ground);border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden;}
.next-up .eyebrow{color:color-mix(in srgb,var(--ground) 65%,transparent);}
.next-up h2{font-size:1.5rem;}
.next-up p{color:color-mix(in srgb,var(--ground) 80%,transparent);}
.next-up .btn{background:var(--hl);border-color:var(--hl);color:var(--hl-ink);align-self:flex-start;}
.next-up .btn:hover{filter:brightness(1.05);}
.stat-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px;min-width:0;}
.stat b{display:block;font-family:var(--f-mono);font-size:1.35rem;font-variant-numeric:tabular-nums;}
.stat span{font-size:.75rem;color:var(--ink-3);font-weight:700;}
.class-tile{appearance:none;text-align:left;cursor:pointer;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;gap:10px;min-width:0;position:relative;transition:transform .12s,box-shadow .15s;color:var(--ink);}
.class-tile:hover{transform:translateY(-2px);box-shadow:var(--shadow);}
.class-tile .ct-top{display:flex;align-items:center;gap:10px;min-width:0;}
.class-badge{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:1.15rem;flex:none;background:color-mix(in srgb,var(--cc) 16%,transparent);color:var(--cc);font-family:var(--f-display);font-weight:800;}
.class-tile h3{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.meter{height:7px;border-radius:999px;background:var(--sunk);overflow:hidden;}
.meter>i{display:block;height:100%;border-radius:999px;background:var(--cc,var(--pen));}

/* ============ agenda ============ */
.task{display:flex;align-items:flex-start;gap:12px;padding:11px 12px;border-radius:12px;border:1px solid var(--line);background:var(--panel);min-width:0;}
.task.done{opacity:.55;}
.task.done .t-title{text-decoration:line-through;}
.check{appearance:none;flex:none;width:22px;height:22px;border-radius:7px;border:2px solid var(--line-2);background:var(--panel);cursor:pointer;display:grid;place-items:center;margin-top:1px;}
.check:hover{border-color:var(--pen);}
.check.on{background:var(--good);border-color:var(--good);}
.check.on::after{content:'';width:9px;height:5px;border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:rotate(-45deg) translate(1px,-1px);}
.t-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;}
.t-title{font-weight:700;overflow-wrap:anywhere;}
.t-meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:.78rem;color:var(--ink-3);}
.t-type{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700;padding:2px 7px;border-radius:6px;background:var(--sunk);color:var(--ink-2);}
.t-type.test{background:var(--bad-soft);color:var(--bad);} .t-type.study{background:var(--hl-soft);color:var(--ink);} .t-type.project{background:var(--verify-soft);color:var(--verify);}
.due-over{color:var(--bad);font-weight:700;} .due-today{color:var(--warn);font-weight:700;}
.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;}
.day{appearance:none;border:1px solid var(--line);background:var(--panel);border-radius:12px;padding:8px 6px;display:flex;flex-direction:column;gap:6px;align-items:center;cursor:pointer;min-width:0;color:var(--ink);}
.day.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);}
.day .dn{font-family:var(--f-mono);font-size:.64rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);}
.day .dd{font-family:var(--f-display);font-weight:800;font-size:1.1rem;}
.day.today .dd{background:var(--hl);color:var(--hl-ink);border-radius:8px;padding:0 6px;}
.day .pips{display:flex;gap:3px;flex-wrap:wrap;justify-content:center;min-height:8px;}
.day .pips i{width:6px;height:6px;border-radius:50%;background:var(--cc);}
.quick{display:flex;gap:8px;}
.quick .input{flex:1;}

/* ============ class & unit ============ */
.class-head{display:flex;align-items:center;gap:14px;min-width:0;}
.class-head .class-badge{width:52px;height:52px;font-size:1.5rem;border-radius:14px;}
.unit-row{appearance:none;width:100%;text-align:left;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) 140px auto;gap:14px;align-items:center;padding:14px 16px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--ink);}
.unit-row:hover{border-color:var(--line-2);background:var(--panel-2);}
@media (max-width:560px){.unit-row{grid-template-columns:minmax(0,1fr) auto;} .unit-row .meter-wrap{display:none;}}
.subtabs{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;}
.subtab{appearance:none;border:0;background:none;padding:10px 12px;font-weight:700;color:var(--ink-3);cursor:pointer;border-bottom:2.5px solid transparent;margin-bottom:-1px;white-space:nowrap;}
.subtab.on{color:var(--ink);border-bottom-color:var(--ink);}
.game-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;}
.game-card{appearance:none;text-align:left;cursor:pointer;border:1px solid var(--line);background:var(--panel);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;gap:8px;color:var(--ink);min-width:0;transition:transform .12s,border-color .15s;}
.game-card:hover:not(:disabled){transform:translateY(-2px);border-color:var(--ink-3);}
.game-card:disabled{opacity:.5;cursor:not-allowed;}
.game-card .gi{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--sunk);}
.game-card .gi svg{width:22px;height:22px;}
.game-card h3{font-size:1rem;}
.game-card p{font-size:.84rem;color:var(--ink-3);line-height:1.4;}
.skill-list{display:flex;flex-direction:column;gap:8px;}
.skill{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel);}
.skill .sk-name{font-weight:700;font-size:.9rem;overflow-wrap:anywhere;}
.skill .sk-bar{grid-column:1/-1;height:5px;border-radius:999px;background:var(--sunk);overflow:hidden;}
.skill .sk-bar i{display:block;height:100%;background:var(--ink-3);}
.notes-view{white-space:pre-wrap;font-size:.92rem;line-height:1.6;max-height:520px;overflow:auto;background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:16px;}
.md h1,.md h2,.md h3{margin:14px 0 6px;} .md h1:first-child,.md h2:first-child,.md h3:first-child{margin-top:0;}
.md p{margin:0 0 9px;} .md ul{margin:0 0 10px;padding-left:20px;} .md li{margin:3px 0;}
.md code{font-family:var(--f-mono);font-size:.85em;background:var(--sunk);padding:1px 5px;border-radius:5px;}
.md strong{font-weight:700;}
.md mark{background:var(--hl);color:var(--hl-ink);padding:0 3px;border-radius:3px;}

/* ============ review ============ */
.pack-sec{display:flex;flex-direction:column;gap:8px;}
.pack-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:start;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel);}
.pack-item .pi-main{min-width:0;display:flex;flex-direction:column;gap:4px;}
.pack-item [contenteditable]{outline:none;border-radius:5px;padding:1px 3px;margin:-1px -3px;overflow-wrap:anywhere;}
.pack-item [contenteditable]:hover{background:var(--sunk);}
.pack-item [contenteditable]:focus{background:var(--pen-soft);}
.pi-term{font-weight:700;}
.pi-sub{font-size:.86rem;color:var(--ink-2);}
.found{display:flex;gap:8px;flex-wrap:wrap;}
.found .chip b{font-family:var(--f-mono);}

/* ============ games ============ */
.game-shell{max-width:760px;margin:0 auto;width:100%;display:flex;flex-direction:column;gap:16px;}
.hud{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;}
@media (max-width:520px){.hud{grid-template-columns:repeat(2,minmax(0,1fr));}}
.hud div{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px 11px;display:flex;flex-direction:column;min-width:0;}
.hud span{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);}
.hud b{font-family:var(--f-mono);font-size:1.15rem;font-variant-numeric:tabular-nums;}
.hud div.hot{background:var(--hl-soft);border-color:var(--hl);}
.timebar{height:8px;border-radius:999px;background:var(--sunk);overflow:hidden;}
.timebar i{display:block;height:100%;background:var(--good);transition:width .1s linear;}
.timebar i.low{background:var(--bad);}
.q-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:16px;box-shadow:var(--shadow);}
.q-prompt{font-family:var(--f-display);font-size:1.25rem;font-weight:700;line-height:1.35;overflow-wrap:anywhere;}
.choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.choices.one{grid-template-columns:1fr;}
@media (max-width:600px){.choices{grid-template-columns:1fr;}}
.choice{appearance:none;display:flex;gap:10px;align-items:flex-start;text-align:left;padding:13px 14px;border-radius:12px;border:1.5px solid var(--line);background:var(--panel-2);cursor:pointer;line-height:1.4;color:var(--ink);overflow-wrap:anywhere;min-width:0;}
.choice:hover:not(:disabled){border-color:var(--ink-3);background:var(--panel);}
.choice:disabled{cursor:default;}
.choice .k{flex:none;width:22px;height:22px;border-radius:6px;display:grid;place-items:center;font-family:var(--f-mono);font-size:.72rem;font-weight:700;background:var(--sunk);color:var(--ink-3);}
.choice.right{border-color:var(--good);background:var(--good-soft);}
.choice.wrong{border-color:var(--bad);background:var(--bad-soft);}
.choice.dim{opacity:.55;}
.explain{border-left:3px solid var(--line-2);padding:4px 0 4px 12px;color:var(--ink-2);font-size:.92rem;}
.verdict{font-weight:800;font-family:var(--f-display);font-size:1.05rem;}
.verdict.good{color:var(--good);} .verdict.bad{color:var(--bad);}
.flash{perspective:1200px;}
.flash-card{appearance:none;width:100%;border:0;background:none;padding:0;cursor:pointer;display:block;}
.flash-inner{position:relative;min-height:240px;transition:transform .45s;transform-style:preserve-3d;}
.flash-card.flip .flash-inner{transform:rotateY(180deg);}
.flash-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:18px;border:1px solid var(--line);background:var(--panel);box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px;text-align:center;overflow:auto;}
.flash-face.back{transform:rotateY(180deg);background:var(--panel-2);}
.flash-face .ff-main{font-family:var(--f-display);font-size:1.5rem;font-weight:800;overflow-wrap:anywhere;}
.flash-face .ff-def{font-size:1.02rem;line-height:1.5;color:var(--ink);overflow-wrap:anywhere;}
.match-board{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);gap:12px;}
@media (max-width:560px){.match-board{grid-template-columns:1fr;}}
.match-col{display:flex;flex-direction:column;gap:8px;}
.mcard{appearance:none;text-align:left;border:1.5px solid var(--line);background:var(--panel);border-radius:12px;padding:10px 12px;cursor:pointer;min-height:46px;font-size:.88rem;line-height:1.4;color:var(--ink);overflow-wrap:anywhere;transition:transform .1s,border-color .15s,background .15s,opacity .3s;}
.mcard.term{font-weight:700;font-family:var(--f-display);font-size:.95rem;}
.mcard:hover:not(:disabled){border-color:var(--ink-3);}
.mcard.sel{border-color:var(--pen);background:var(--pen-soft);}
.mcard.done{border-color:var(--good);background:var(--good-soft);opacity:.45;cursor:default;}
.mcard.shake{border-color:var(--bad);background:var(--bad-soft);animation:shake .38s;}
@keyframes shake{20%{transform:translateX(-6px);}40%{transform:translateX(6px);}60%{transform:translateX(-4px);}80%{transform:translateX(3px);}}
.seq-list{display:flex;flex-direction:column;gap:8px;}
.seq-item{appearance:none;text-align:left;display:flex;align-items:center;gap:12px;border:1.5px solid var(--line);background:var(--panel);border-radius:12px;padding:11px 13px;cursor:pointer;color:var(--ink);overflow-wrap:anywhere;}
.seq-item .n{flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-family:var(--f-mono);font-weight:700;font-size:.8rem;background:var(--sunk);color:var(--ink-3);}
.seq-item.placed{border-color:var(--pen);}
.seq-item.placed .n{background:var(--pen);color:#fff;}
.seq-item.right{border-color:var(--good);background:var(--good-soft);} .seq-item.right .n{background:var(--good);color:#fff;}
.seq-item.wrong{border-color:var(--bad);background:var(--bad-soft);} .seq-item.wrong .n{background:var(--bad);color:#fff;}
.result-hero{text-align:center;display:flex;flex-direction:column;gap:6px;padding:8px 0;}
.result-hero b{font-family:var(--f-display);font-weight:800;font-size:3rem;line-height:1;}
.review-item{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--panel);display:flex;flex-direction:column;gap:5px;}
.ok-t{color:var(--good);} .bad-t{color:var(--bad);}
.float{position:fixed;left:50%;top:36%;transform:translateX(-50%);font-family:var(--f-display);font-weight:800;font-size:1.6rem;pointer-events:none;opacity:0;z-index:70;}
.float.show{animation:floatUp .6s ease forwards;}
.float.good{color:var(--good);} .float.bad{color:var(--bad);}
@keyframes floatUp{0%{opacity:0;transform:translate(-50%,8px);}25%{opacity:1;transform:translate(-50%,0);}100%{opacity:0;transform:translate(-50%,-26px);}}

/* ============ tutor ============ */
.chat{display:flex;flex-direction:column;gap:10px;max-height:520px;overflow-y:auto;padding:4px;}
.bubble{max-width:85%;padding:10px 14px;border-radius:16px;line-height:1.5;font-size:.93rem;overflow-wrap:anywhere;}
.bubble.me{align-self:flex-end;background:var(--ink);color:var(--ground);border-bottom-right-radius:5px;white-space:pre-wrap;}
.bubble.ai{align-self:flex-start;background:var(--panel-2);border:1px solid var(--line);border-bottom-left-radius:5px;}
.chat-input{display:flex;gap:8px;align-items:flex-end;}
.chat-input .textarea{min-height:46px;max-height:160px;}
.suggest{display:flex;gap:6px;flex-wrap:wrap;}

/* ============ focus ============ */
.focus-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;}
@media (max-width:760px){.focus-wrap{grid-template-columns:1fr;}}
.dial{position:relative;width:min(280px,100%);aspect-ratio:1;margin:6px auto;}
.dial svg{width:100%;height:100%;display:block;}
.dial .t{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;}
.dial .t b{font-family:var(--f-mono);font-size:2.6rem;font-weight:700;font-variant-numeric:tabular-nums;}
.seg{display:inline-flex;background:var(--sunk);border-radius:999px;padding:3px;gap:2px;flex-wrap:wrap;}
.seg button{appearance:none;border:0;background:none;padding:6px 12px;border-radius:999px;font-weight:700;font-size:.82rem;cursor:pointer;color:var(--ink-2);}
.seg button.on{background:var(--panel);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.1);}
.bars{display:flex;align-items:flex-end;gap:8px;height:120px;padding-top:6px;}
.bars .b{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;height:100%;justify-content:flex-end;}
.bars .b i{display:block;width:100%;max-width:34px;border-radius:6px 6px 2px 2px;background:var(--pen);min-height:2px;}
.bars .b.today i{background:var(--ink);}
.bars .b span{font-family:var(--f-mono);font-size:.62rem;color:var(--ink-3);}
.bars .b em{font-style:normal;font-family:var(--f-mono);font-size:.64rem;color:var(--ink-2);}

/* ============ grades ============ */
.table-wrap{overflow-x:auto;}
table.gt{width:100%;border-collapse:collapse;font-size:.9rem;}
table.gt th{text-align:left;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:500;padding:8px;border-bottom:1px solid var(--line);}
table.gt td{padding:8px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums;}
table.gt td.num{font-family:var(--f-mono);}
.big-grade{font-family:var(--f-display);font-weight:800;font-size:2.4rem;line-height:1;}

/* ============ onboarding ============ */
.onb{max-width:680px;margin:4vh auto 0;display:flex;flex-direction:column;gap:20px;}
.onb h1{font-size:clamp(1.9rem,5vw,2.8rem);}
.class-slots{display:flex;flex-direction:column;gap:8px;}
.slot{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:center;}
.swatch{appearance:none;width:34px;height:34px;border-radius:10px;border:2px solid var(--panel);box-shadow:0 0 0 1px var(--line-2);cursor:pointer;background:var(--cc);}
.swatches{display:flex;gap:6px;flex-wrap:wrap;}
.swatches .swatch{width:28px;height:28px;border-radius:8px;}
.swatches .swatch.on{box-shadow:0 0 0 2px var(--ink);}
.drop{border:1.5px dashed var(--line-2);border-radius:14px;padding:18px;text-align:center;display:flex;flex-direction:column;gap:8px;align-items:center;background:var(--panel-2);}
.drop.over{border-color:var(--pen);background:var(--pen-soft);}
.file-chip{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:10px;background:var(--sunk);font-size:.84rem;}

/* ============ motion ============ */
/* page enter: every route change slides the new page up into place */
.page.enter{animation:pageIn var(--dur-slow) var(--ease-out) backwards;}
@keyframes pageIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
/* staggered lists */
.page.enter .stg{animation:itemIn .42s var(--ease-out) backwards;animation-delay:calc(var(--i,0) * 38ms + 60ms);}
@keyframes itemIn{from{opacity:0;transform:translateY(12px) scale(.985);}to{opacity:1;transform:none;}}
/* meters grow from the left */
.meter>i,.sk-bar i{transform-origin:left center;transition:width .6s var(--ease-out);}
.page.enter .meter>i,.page.enter .sk-bar i{animation:grow .9s var(--ease-out) both;animation-delay:.18s;}
@keyframes grow{from{transform:scaleX(0);}to{transform:scaleX(1);}}
.bars .b i{transform-origin:bottom;}
.page.enter .bars .b i{animation:growUp .7s var(--ease-out) both;animation-delay:calc(var(--i,0) * 50ms + .2s);}
@keyframes growUp{from{transform:scaleY(0);}to{transform:scaleY(1);}}
/* shared interaction feel */
.btn{transition:background var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out),color var(--dur) var(--ease-out),transform var(--dur-fast) var(--ease-out),box-shadow var(--dur) var(--ease-out),filter var(--dur) var(--ease-out);}
.btn:active:not(:disabled){transform:scale(.96);}
.btn-primary:hover:not(:disabled){box-shadow:0 6px 16px -8px color-mix(in srgb,var(--ink) 60%,transparent);}
.nav-btn,.nav-class,.tab-btn,.subtab,.seg button,.crumbs button{transition:background var(--dur) var(--ease-out),color var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out);}
.nav-btn:active,.nav-class:active,.tab-btn:active{transform:scale(.98);}
.tab-btn svg{transition:transform var(--dur) var(--ease-spring);}
.tab-btn.on svg{transform:translateY(-1px) scale(1.08);}
.subtab{position:relative;border-bottom-color:transparent!important;}
.subtab::after{content:'';position:absolute;left:12px;right:12px;bottom:-1px;height:2.5px;border-radius:2px;background:var(--ink);transform:scaleX(0);transition:transform var(--dur) var(--ease-out);}
.subtab.on::after{transform:scaleX(1);}
.subtab:hover:not(.on){color:var(--ink-2);}
.class-tile,.game-card,.unit-row,.task,.card,.card-flat,.stat,.pack-item,.skill,.review-item,.day,.mcard,.seq-item,.choice{transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out),background var(--dur) var(--ease-out),opacity var(--dur) var(--ease-out);}
.class-tile:hover,.game-card:hover:not(:disabled){transform:translateY(-3px);box-shadow:var(--shadow);}
.class-tile:active,.game-card:active:not(:disabled),.unit-row:active{transform:translateY(-1px) scale(.99);}
.game-card .gi{transition:transform var(--dur) var(--ease-spring),background var(--dur) var(--ease-out);}
.game-card:hover:not(:disabled) .gi{transform:rotate(-6deg) scale(1.08);background:var(--hl-soft);}
.unit-row:hover{transform:translateX(3px);}
.task:hover{border-color:var(--line-2);}
.day:hover:not(.on){transform:translateY(-2px);border-color:var(--line-2);}
.input,.select,.textarea{transition:border-color var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out),background var(--dur) var(--ease-out);}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--pen);box-shadow:0 0 0 3.5px color-mix(in srgb,var(--pen) 22%,transparent);}
/* checkbox: pop + strike-through draw */
.check{transition:background var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out),transform var(--dur) var(--ease-spring);}
.check:active{transform:scale(.88);}
.check.on{animation:checkPop .35s var(--ease-spring);}
.check.on::after{animation:tickDraw .28s var(--ease-out) both;}
@keyframes checkPop{0%{transform:scale(.8);}60%{transform:scale(1.15);}100%{transform:scale(1);}}
@keyframes tickDraw{from{opacity:0;transform:rotate(-45deg) translate(1px,-1px) scale(.4);}to{opacity:1;transform:rotate(-45deg) translate(1px,-1px) scale(1);}}
.t-title{align-self:flex-start;max-width:100%;background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:0 55%;background-size:0% 1.5px;transition:background-size .3s var(--ease-out),color var(--dur);}
.task.done .t-title{text-decoration:none;background-size:100% 1.5px;}
.task.leaving{animation:taskOut .3s var(--ease-in-out) forwards;}
@keyframes taskOut{to{opacity:.35;transform:translateX(6px);}}
/* modal in/out */
.modal-back{animation:fadeIn var(--dur) var(--ease-out);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);}
.modal{animation:modalIn .32s var(--ease-spring);}
.modal-back.closing{animation:fadeOut .16s var(--ease-in-out) forwards;}
.modal-back.closing .modal{animation:modalOut .16s var(--ease-in-out) forwards;}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes fadeOut{to{opacity:0;}}
@keyframes modalIn{from{opacity:0;transform:translateY(14px) scale(.97);}to{opacity:1;transform:none;}}
@keyframes modalOut{to{opacity:0;transform:translateY(6px) scale(.98);}}
.toast{transition:opacity var(--dur) var(--ease-out),transform .35s var(--ease-spring);}
/* games */
.q-card{animation:qIn .34s var(--ease-out) backwards;}
@keyframes qIn{from{opacity:0;transform:translateX(18px);}to{opacity:1;transform:none;}}
.choice{transition:transform var(--dur-fast) var(--ease-out),border-color var(--dur) var(--ease-out),background var(--dur) var(--ease-out),opacity var(--dur) var(--ease-out);}
.choice:hover:not(:disabled){transform:translateY(-2px);}
.choice:active:not(:disabled){transform:scale(.98);}
.choice .k{transition:background var(--dur),color var(--dur);}
.choice.right{animation:rightPop .42s var(--ease-spring);}
.choice.right .k{background:var(--good);color:#fff;}
.choice.wrong{animation:shake .38s var(--ease-out);}
.choice.wrong .k{background:var(--bad);color:#fff;}
@keyframes rightPop{0%{transform:scale(1);}40%{transform:scale(1.03);}100%{transform:scale(1);}}
#qFb>*,.pyr-fb,.verdict,.explain{animation:fbIn .3s var(--ease-out) both;}
#qFb>*:nth-child(2){animation-delay:.05s;} #qFb>*:nth-child(3){animation-delay:.1s;}
@keyframes fbIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.result-hero b{animation:heroPop .6s var(--ease-spring) both;}
.result-hero span{animation:fbIn .4s var(--ease-out) .2s both;}
@keyframes heroPop{from{opacity:0;transform:scale(.6);}to{opacity:1;transform:none;}}
.hud b{transition:color var(--dur);}
.hud b.bump{animation:bump .3s var(--ease-spring);}
@keyframes bump{50%{transform:scale(1.18);}}
.flash-inner{transition:transform .55s var(--ease-out);}
.flash-card:hover .flash-face{box-shadow:0 14px 30px -18px rgba(20,33,28,.45);}
.flash-face{transition:box-shadow var(--dur);}
.mcard.done{animation:matchDone .45s var(--ease-spring);}
@keyframes matchDone{40%{transform:scale(1.04);}}
.mcard.sel{transform:scale(1.02);}
.seq-item{transition:transform var(--dur) var(--ease-spring),border-color var(--dur),background var(--dur);}
.seq-item:hover:not(:disabled){transform:translateX(3px);}
.seq-item.placed .n{animation:checkPop .3s var(--ease-spring);}
.bubble{animation:bubbleIn .3s var(--ease-out) both;}
.bubble.me{transform-origin:bottom right;} .bubble.ai{transform-origin:bottom left;}
@keyframes bubbleIn{from{opacity:0;transform:translateY(8px) scale(.96);}to{opacity:1;transform:none;}}
.dial circle{transition:stroke-dashoffset .3s linear,stroke .3s;}
.next-up{animation:heroIn .6s var(--ease-out) backwards;}
.next-up::after{content:'';position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--hl) 35%,transparent),transparent 70%);animation:glow 6s var(--ease-in-out) infinite alternate;pointer-events:none;}
@keyframes heroIn{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
@keyframes glow{from{transform:translate(0,0) scale(1);opacity:.7;}to{transform:translate(-30px,20px) scale(1.2);opacity:1;}}
.next-up .btn:hover{transform:translateX(2px);}
/* onboarding entrance */
.onb>*{animation:itemIn .5s var(--ease-out) backwards;}
.onb>*:nth-child(1){animation-delay:.02s;} .onb>*:nth-child(2){animation-delay:.1s;} .onb>*:nth-child(3){animation-delay:.2s;} .onb>*:nth-child(4){animation-delay:.3s;}
.slot{animation:itemIn .4s var(--ease-out) backwards;animation-delay:calc(var(--i,0) * 45ms + .15s);}
.swatch{transition:transform var(--dur) var(--ease-spring),box-shadow var(--dur);}
.swatch:hover{transform:scale(1.1);} .swatch:active{transform:scale(.9);}
.app.no-side{grid-template-columns:1fr;} .app.no-side .side{display:none;}
/* tab + soft transitions */
.tab-body{gap:16px;}
.tab-body.tab-in{animation:tabIn .3s var(--ease-out) backwards;}
@keyframes tabIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.soft-in{animation:itemIn .32s var(--ease-out) backwards;animation-delay:calc(var(--i,0) * 30ms);}
/* skeleton while loading */
.boot-skel{display:flex;flex-direction:column;gap:14px;max-width:1080px;margin:0 auto;}
.skel{border-radius:14px;background:linear-gradient(90deg,var(--sunk) 0%,var(--panel-2) 50%,var(--sunk) 100%);background-size:200% 100%;animation:shimmer 1.2s linear infinite;}
@keyframes shimmer{from{background-position:100% 0;}to{background-position:-100% 0;}}

/* ============ add unit sources ============ */
.source-pick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
@media (max-width:680px){.source-pick{grid-template-columns:1fr;}}
.source-opt{appearance:none;text-align:left;display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:14px;border:1.5px solid var(--line);background:var(--panel);cursor:pointer;color:var(--ink);transition:border-color var(--dur) var(--ease-out),background var(--dur) var(--ease-out),transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out);}
.source-opt>span:last-child{display:flex;flex-direction:column;gap:2px;min-width:0;}
.source-opt:hover{transform:translateY(-2px);border-color:var(--line-2);}
.source-opt.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);}
.so-i{flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--sunk);transition:background var(--dur),color var(--dur),transform var(--dur) var(--ease-spring);}
.source-opt.on .so-i{background:var(--hl);color:var(--hl-ink);transform:rotate(-5deg);}
.au-card.tab-in{animation:tabIn .3s var(--ease-out) backwards;}
.lecture-how{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
@media (max-width:680px){.lecture-how{grid-template-columns:1fr;}}
.lh-step{display:flex;gap:10px;align-items:flex-start;background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:12px;font-size:.87rem;line-height:1.45;}
.lh-step .n{flex:none;width:24px;height:24px;border-radius:8px;display:grid;place-items:center;background:var(--ink);color:var(--ground);font-family:var(--f-mono);font-weight:700;font-size:.75rem;}
.lecture-preview{max-height:320px;overflow:auto;width:100%;background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:14px;font-size:.9rem;}

/* ============ streak ============ */
.flame{display:inline-grid;width:18px;height:18px;flex:none;}
.flame svg{width:100%;height:100%;}
.flame .fl-o{fill:var(--line-2);transition:fill .3s;} .flame .fl-i{fill:var(--panel-2);transition:fill .3s;}
.flame.lit .fl-o{fill:#F2762E;} .flame.lit .fl-i{fill:#FFD84A;}
.flame.lit svg{transform-origin:50% 90%;animation:flicker 1.6s var(--ease-in-out) infinite alternate;}
@keyframes flicker{0%{transform:scale(1) rotate(-1.5deg);}50%{transform:scale(1.04,1.08) rotate(1deg);}100%{transform:scale(.98,1.02) rotate(-.5deg);}}
.streak-chip{appearance:none;display:inline-flex;align-items:center;gap:5px;padding:4px 9px 4px 6px;border-radius:999px;border:1px solid var(--line);background:var(--panel);cursor:pointer;color:var(--ink-2);position:relative;transition:transform var(--dur) var(--ease-spring),border-color var(--dur),background var(--dur);}
.streak-chip:hover{transform:scale(1.05);border-color:var(--line-2);}
.streak-chip.lit{color:var(--ink);border-color:color-mix(in srgb,#F2762E 45%,var(--line));background:color-mix(in srgb,#F2762E 9%,var(--panel));}
.streak-chip b{font-size:.85rem;}
.streak-chip .ring{width:14px;height:14px;border-radius:50%;background:conic-gradient(#F2762E calc(var(--p)*1%),var(--sunk) 0);-webkit-mask:radial-gradient(circle 4px,transparent 98%,#000 100%);mask:radial-gradient(circle 4px,transparent 98%,#000 100%);}
.streak-chip.lit .ring{display:none;}
.stat-streak{appearance:none;text-align:left;cursor:pointer;color:var(--ink);}
.stat-streak:hover{transform:translateY(-2px);box-shadow:var(--shadow);}
.stat-streak .flame{width:22px;height:22px;}
.streak-hero{display:flex;align-items:center;gap:22px;flex-wrap:wrap;padding:24px;border-radius:20px;background:var(--panel);border:1px solid var(--line);position:relative;overflow:hidden;}
.streak-hero.lit{background:linear-gradient(120deg,color-mix(in srgb,#F2762E 14%,var(--panel)),var(--panel) 60%);border-color:color-mix(in srgb,#F2762E 35%,var(--line));}
.sh-flame{width:86px;height:86px;}
.sh-num{font-family:var(--f-display);font-weight:800;font-size:3.4rem;line-height:1;font-variant-numeric:tabular-nums;animation:heroPop .6s var(--ease-spring) backwards;}
.sh-lab{font-weight:700;} .sh-sub{color:var(--ink-3);}
.sh-side{margin-left:auto;display:flex;gap:10px;}
.sh-stat{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:10px 14px;display:flex;flex-direction:column;min-width:80px;}
.sh-stat b{font-size:1.3rem;} .sh-stat span{font-size:.74rem;color:var(--ink-3);font-weight:700;}
.goal-bars{display:flex;flex-direction:column;gap:8px;}
.milestones{display:flex;gap:8px;flex-wrap:wrap;}
.ms{display:inline-flex;align-items:center;gap:4px;padding:5px 10px 5px 7px;border-radius:999px;background:var(--sunk);font-family:var(--f-mono);font-size:.78rem;font-weight:700;color:var(--ink-3);}
.ms.got{background:color-mix(in srgb,#F2762E 14%,var(--panel));color:var(--ink);}
.heat-wrap{overflow-x:auto;padding-bottom:4px;}
.heat-months{display:grid;grid-auto-flow:column;grid-auto-columns:16px;gap:4px;font-family:var(--f-mono);font-size:.62rem;color:var(--ink-3);height:14px;}
.heat-months span{white-space:nowrap;}
.heat{display:grid;grid-auto-flow:column;grid-auto-columns:16px;gap:4px;}
.hw{display:grid;grid-template-rows:repeat(7,16px);gap:4px;}
.hm{display:inline-block;width:16px;height:16px;border-radius:4px;background:var(--sunk);}
.hm.l1{background:color-mix(in srgb,#F2762E 22%,var(--sunk));} .hm.l2{background:color-mix(in srgb,#F2762E 50%,var(--sunk));}
.hm.l3{background:color-mix(in srgb,#F2762E 75%,var(--sunk));} .hm.l4{background:#F2762E;}
.hm.lfz{background:color-mix(in srgb,#5AB8E8 55%,var(--sunk));}
.hm.today{box-shadow:0 0 0 2px var(--ink);}
.page.enter .hm{animation:fadeIn .4s var(--ease-out) backwards;}
.legend{display:inline-flex;align-items:center;gap:5px;flex-wrap:wrap;} .legend .hm{width:11px;height:11px;border-radius:3px;margin-left:6px;}
.confetti{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:95;}

/* ============ rhythm run ============ */
.gm-stats-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;}
@media (max-width:560px){.gm-stats-row{grid-template-columns:repeat(2,minmax(0,1fr));}}
.rr-how{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:18px;}
@media (max-width:560px){.rr-how{grid-template-columns:1fr;}}
.rr-demo{display:flex;gap:6px;height:150px;background:#0E1512;border-radius:14px;padding:8px;}
.rd-lane{position:relative;width:34px;border-radius:8px;background:rgba(255,255,255,.05);overflow:hidden;}
.rd-lane b{position:absolute;bottom:6px;left:0;right:0;text-align:center;color:rgba(255,255,255,.55);font-size:.8rem;}
.rd-note{position:absolute;left:4px;right:4px;height:12px;border-radius:6px;background:var(--lc);top:-16px;animation:rdFall 1.4s linear infinite;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:.7rem;color:#0E1512;}
.rd-note.ans{height:20px;border:2px solid rgba(255,255,255,.7);}
@keyframes rdFall{to{top:110px;}}
.rr-levels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
@media (max-width:620px){.rr-levels{grid-template-columns:1fr;}}
.rr-level{appearance:none;text-align:left;display:flex;flex-direction:column;gap:4px;padding:16px;border-radius:14px;border:1.5px solid var(--line);background:var(--panel);cursor:pointer;color:var(--ink);transition:transform var(--dur) var(--ease-out),border-color var(--dur),box-shadow var(--dur);}
.rr-level b{font-family:var(--f-display);font-size:1.2rem;}
.rr-level:hover{transform:translateY(-3px);border-color:var(--ink-3);box-shadow:var(--shadow);}
.rr-wrap{display:flex;flex-direction:column;gap:10px;}
.rr-health{display:block;height:8px;border-radius:999px;background:var(--sunk);overflow:hidden;margin-top:6px;}
.rr-health i{display:block;height:100%;background:var(--good);transition:width .25s var(--ease-out),background .3s;}
.rr-health i.low{background:var(--bad);}
.rr-q{min-height:118px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;justify-content:center;gap:8px;transition:border-color .3s,box-shadow .3s;}
.rr-q.live{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink);animation:fbIn .25s var(--ease-out);}
.rq-top{display:flex;justify-content:space-between;align-items:center;gap:8px;}
.rq-prompt{font-family:var(--f-display);font-weight:700;font-size:1.02rem;line-height:1.3;overflow-wrap:anywhere;}
.rq-choices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;}
.rq-c{border-radius:9px;padding:6px 8px;background:color-mix(in srgb,var(--lc) 14%,var(--panel));border:1.5px solid color-mix(in srgb,var(--lc) 55%,transparent);font-size:.78rem;line-height:1.3;display:flex;flex-direction:column;gap:2px;min-width:0;overflow-wrap:anywhere;max-height:84px;overflow:hidden;transition:opacity .3s,transform .3s var(--ease-spring);}
.rq-c b{font-family:var(--f-mono);font-size:.72rem;color:var(--lc);}
.rq-c.right{transform:scale(1.04);border-color:var(--good);background:var(--good-soft);}
.rr-stage{position:relative;height:min(58vh,440px);min-height:300px;border-radius:16px;overflow:hidden;background:radial-gradient(120% 80% at 50% 110%,#1E2B26 0%,#0E1512 60%);transition:box-shadow .4s;}
.rr-stage.fever{box-shadow:inset 0 0 0 2px var(--hl),0 0 30px -6px var(--hl);}
.rr-stage canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;}
.rr-judge{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);font-family:var(--f-display);font-weight:800;font-size:1.5rem;letter-spacing:.04em;color:#fff;opacity:0;pointer-events:none;text-shadow:0 2px 12px rgba(0,0,0,.5);white-space:nowrap;}
.rr-judge.show{animation:judgeIn .42s var(--ease-out);}
@keyframes judgeIn{0%{opacity:0;transform:translate(-50%,-30%) scale(.8);}25%{opacity:1;transform:translate(-50%,-50%) scale(1.08);}100%{opacity:0;transform:translate(-50%,-70%) scale(1);}}
.j-perfect,.j-correct{color:#E3EE4F!important;} .j-great{color:#86A0FF!important;} .j-good{color:#B3C1BA!important;} .j-miss,.j-wrong,.j-toolate{color:#FF8479!important;}
.rr-overlay{position:absolute;inset:0;background:rgba(14,21,18,.72);display:grid;place-items:center;color:#fff;backdrop-filter:blur(3px);animation:fadeIn .2s;}
.rr-pads{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;}
.rr-pad{appearance:none;height:58px;border-radius:14px;border:2px solid var(--lc);background:color-mix(in srgb,var(--lc) 12%,var(--panel));color:var(--ink);font-size:1.3rem;font-weight:800;cursor:pointer;touch-action:none;transition:transform 80ms var(--ease-out),background 120ms;}
.rr-pad.down{transform:scale(.94);background:color-mix(in srgb,var(--lc) 40%,var(--panel));}
@media (hover:hover) and (pointer:fine) and (min-width:700px){.rr-pads{display:none;}}
.rr-prog{flex:1;height:5px;border-radius:999px;background:var(--sunk);overflow:hidden;margin-right:10px;}
.rr-prog i{display:block;height:100%;width:0;background:var(--ink-3);}
@media (max-width:560px){.rq-choices{grid-template-columns:repeat(2,minmax(0,1fr));} .rr-stage{height:46vh;}}
.goal-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
@media (max-width:520px){.goal-opts{grid-template-columns:1fr;}}
.goal-opt{appearance:none;text-align:left;display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:12px;border:1.5px solid var(--line);background:var(--panel-2);cursor:pointer;color:var(--ink);transition:border-color var(--dur),background var(--dur),transform var(--dur) var(--ease-out);}
.goal-opt:hover{transform:translateY(-2px);border-color:var(--line-2);}
.goal-opt.on{border-color:#F2762E;background:color-mix(in srgb,#F2762E 10%,var(--panel));}

/* ============ web app: landing, recorder, sign-in ============ */
.btn-lg{padding:13px 22px;font-size:1rem;}
.google-btn{background:var(--panel);border:1px solid var(--line-2);color:var(--ink);gap:10px;box-shadow:0 1px 2px rgba(0,0,0,.08);}
.google-btn:hover{background:var(--panel-2);box-shadow:0 4px 14px -8px rgba(0,0,0,.35);}
.landing{max-width:1120px;margin:0 auto;display:flex;flex-direction:column;gap:64px;padding-bottom:24px;}
.ln-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;animation:fbIn .4s var(--ease-out) backwards;}
.ln-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:center;}
@media (max-width:860px){.ln-hero{grid-template-columns:1fr;}}
.ln-copy{gap:18px;}
.ln-copy>*{animation:itemIn .55s var(--ease-out) backwards;}
.ln-copy>*:nth-child(2){animation-delay:.08s;} .ln-copy>*:nth-child(3){animation-delay:.16s;} .ln-copy>*:nth-child(4){animation-delay:.24s;} .ln-copy>*:nth-child(5){animation-delay:.32s;}
.ln-copy h1{font-size:clamp(2.2rem,5.4vw,3.6rem);line-height:1.04;letter-spacing:-.025em;}
.ln-lead{font-size:1.12rem;color:var(--ink-2);max-width:48ch;}
.ln-visual{position:relative;min-height:420px;}
.lv-card{position:absolute;background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:16px;display:flex;flex-direction:column;gap:8px;animation:floatIn .8s var(--ease-out) backwards;}
.lv-q{left:0;right:16%;top:78px;animation-delay:.2s;}
.lv-q b{font-family:var(--f-display);font-size:1.05rem;line-height:1.3;}
.lv-ch{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.lv-ch span{padding:8px 10px;border-radius:10px;border:1.5px solid var(--line);font-size:.85rem;background:var(--panel-2);}
.lv-ch span.ok{border-color:var(--good);background:var(--good-soft);animation:rightPop .5s var(--ease-spring) 1.2s backwards;}
.lv-streak{right:0;top:0;flex-direction:row;align-items:center;gap:10px;animation-delay:.45s;}
.lv-streak .flame{width:34px;height:34px;} .lv-streak b{font-family:var(--f-display);font-size:1.6rem;display:block;line-height:1;} .lv-streak span:last-child{font-size:.75rem;color:var(--ink-3);font-weight:700;}
.lv-plan{left:18%;right:0;bottom:0;animation-delay:.65s;}
.lv-t{display:flex;align-items:center;gap:8px;font-size:.88rem;font-weight:700;}
.lv-t i{width:16px;height:16px;border-radius:5px;border:2px solid var(--line-2);}
.lv-t.done{opacity:.6;text-decoration:line-through;} .lv-t.done i{background:var(--good);border-color:var(--good);}
@keyframes floatIn{from{opacity:0;transform:translateY(24px) scale(.97);}to{opacity:1;transform:none;}}
@media (max-width:860px){.ln-visual{min-height:0;display:flex;flex-direction:column;gap:12px;} .lv-card{position:static;} .lv-streak{align-self:flex-start;} .lv-plan{margin-left:24px;}}
.ln-feats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
@media (max-width:860px){.ln-feats{grid-template-columns:repeat(2,minmax(0,1fr));}} @media (max-width:560px){.ln-feats{grid-template-columns:1fr;}}
.ln-feat{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:8px;transition:transform var(--dur) var(--ease-out),box-shadow var(--dur);}
.ln-feat:hover{transform:translateY(-3px);box-shadow:var(--shadow);}
.ln-feat .gi{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--hl-soft);}
.ln-feat p{color:var(--ink-2);font-size:.92rem;}
.ln-steps{display:flex;flex-direction:column;gap:16px;align-items:flex-start;background:var(--ink);color:var(--ground);border-radius:22px;padding:32px;}
.ln-steps ol{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:10px;font-size:1.02rem;}
.ln-steps .btn-primary{background:var(--hl);border-color:var(--hl);color:var(--hl-ink);}
.ln-steps .google-btn{background:var(--ground);color:var(--ink);}
.ln-foot{display:flex;gap:18px;flex-wrap:wrap;font-size:.85rem;color:var(--ink-3);border-top:1px solid var(--line);padding-top:18px;}
.ln-foot a{color:var(--ink-2);}
.recorder{border:1.5px solid var(--line);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:12px;background:var(--panel-2);transition:border-color .3s,background .3s;}
.recorder.live{border-color:#E5484D;background:color-mix(in srgb,#E5484D 6%,var(--panel));}
.rec-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.rec-top b{font-size:1.4rem;}
.rec-dot{width:12px;height:12px;border-radius:50%;background:var(--line-2);}
.recorder.live .rec-dot{background:#E5484D;animation:recPulse 1.2s var(--ease-in-out) infinite;}
.recorder.paused .rec-dot{animation:none;background:var(--warn);}
@keyframes recPulse{0%,100%{box-shadow:0 0 0 0 rgba(229,72,77,.5);}50%{box-shadow:0 0 0 7px rgba(229,72,77,0);}}
.rec-live{max-height:220px;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px;font-size:.92rem;line-height:1.55;white-space:pre-wrap;}
.rec-interim{color:var(--ink-3);}
.btn-rec{background:#E5484D;border-color:#E5484D;color:#fff;}
.btn-rec:hover{background:#D13A40;border-color:#D13A40;}
.lecture-how.alt{opacity:.92;}