@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800;900&display=swap');

/* ============================== TOKENS ============================== */
:root{
  --bg:#07080c; --bg-2:#0b0d14; --surface:#101320; --surface-2:#151a2b;
  --fg:#eef1f8; --fg-dim:#a6adc4; --fg-faint:#6c7590;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16);
  --primary:#7dd3fc; --secondary:#c4b5fd; --accent:#5eead4;
  --good:#4ade80; --warn:#fbbf24; --bad:#f87171;
  --radius:18px; --radius-sm:12px; --radius-lg:28px;
  --shadow:0 24px 60px -24px rgba(0,0,0,.85);
  --ease:cubic-bezier(.16,1,.3,1);
  --maxw:1180px;
  color-scheme:dark;
}
html[data-theme="light"]{
  --bg:#f6f7fb; --bg-2:#eef1f8; --surface:#ffffff; --surface-2:#f2f4fa;
  --fg:#12141c; --fg-dim:#4b5268; --fg-faint:#838ba3;
  --line:rgba(10,12,20,.10); --line-2:rgba(10,12,20,.18);
  --primary:#0284c7; --secondary:#7c3aed; --accent:#0d9488;
  --good:#15803d; --warn:#b45309; --bad:#b91c1c;
  --shadow:0 24px 60px -30px rgba(20,25,45,.35);
  color-scheme:light;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--bg); color:var(--fg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  min-height:100vh; overflow-x:hidden;
}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}
::selection{background:color-mix(in srgb,var(--primary) 35%,transparent)}

/* ============================== AMBIENT ============================== */
#ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.aurora{
  position:absolute;width:80vw;height:80vw;max-width:1100px;max-height:1100px;border-radius:50%;
  filter:blur(90px);opacity:.5;
  animation:breathe 14s ease-in-out infinite alternate;
}
.aurora.a{top:-30vw;left:-15vw;background:radial-gradient(circle,color-mix(in srgb,var(--primary) 34%,transparent) 0%,transparent 65%)}
.aurora.b{top:20vh;right:-25vw;background:radial-gradient(circle,color-mix(in srgb,var(--secondary) 30%,transparent) 0%,transparent 65%);animation-delay:-6s}
.aurora.c{bottom:-35vw;left:25vw;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 24%,transparent) 0%,transparent 65%);animation-delay:-3s}
html[data-theme="light"] .aurora{opacity:.35}
@keyframes breathe{from{transform:scale(1) translate(0,0);opacity:.35}to{transform:scale(1.16) translate(2%,-2%);opacity:.6}}
.grid-bg{
  position:absolute;inset:0;background-size:64px 64px;
  background-image:linear-gradient(to right,var(--line) 1px,transparent 1px),linear-gradient(to bottom,var(--line) 1px,transparent 1px);
  mask-image:radial-gradient(ellipse at 50% 0%,black 10%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 0%,black 10%,transparent 75%);
}
#app,header.topbar,footer.site-footer{position:relative;z-index:1}

/* ============================== GLASS ============================== */
.glass{
  background:linear-gradient(145deg,color-mix(in srgb,var(--fg) 4%,transparent),color-mix(in srgb,var(--fg) 1.5%,transparent));
  border:1px solid var(--line);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:inset 0 1px 1px color-mix(in srgb,var(--fg) 8%,transparent),var(--shadow);
}
html[data-theme="light"] .glass{background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(255,255,255,.7))}

/* ============================== TOPBAR ============================== */
header.topbar{
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  background:color-mix(in srgb,var(--bg) 78%,transparent);
  border-bottom:1px solid var(--line);
}
.topbar-in{max-width:var(--maxw);margin:0 auto;padding:.7rem 1.1rem;display:flex;align-items:center;gap:1rem}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:800;letter-spacing:-.02em;font-size:1.02rem;cursor:pointer;background:none;border:0;padding:0}
.brand .dot{width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 32% 32%,var(--primary),var(--secondary) 60%,transparent 72%);box-shadow:0 0 22px color-mix(in srgb,var(--primary) 55%,transparent);position:relative;flex:none}
.brand .dot::after{content:'';position:absolute;inset:32%;border-radius:50%;background:var(--bg)}
.brand small{display:block;font-weight:500;font-size:.66rem;color:var(--fg-faint);letter-spacing:.08em;text-transform:uppercase}
nav.mainnav{margin-left:auto;display:flex;gap:.25rem;align-items:center;flex-wrap:wrap}
.tools{display:flex;gap:.35rem;align-items:center;flex:none}
.navlink{
  border:1px solid transparent;background:none;padding:.45rem .8rem;border-radius:999px;
  color:var(--fg-dim);font-weight:600;font-size:.85rem;cursor:pointer;transition:all .3s var(--ease)
}
.navlink:hover{color:var(--fg);background:color-mix(in srgb,var(--fg) 7%,transparent)}
.navlink.active{color:var(--fg);background:color-mix(in srgb,var(--fg) 9%,transparent);border-color:var(--line-2)}
.icon-btn{
  width:34px;height:34px;border-radius:999px;border:1px solid var(--line);
  background:color-mix(in srgb,var(--fg) 4%,transparent);cursor:pointer;display:grid;place-items:center;
  transition:all .3s var(--ease);font-size:.95rem
}
.icon-btn:hover{border-color:var(--line-2);transform:translateY(-1px)}

/* ============================== LAYOUT ============================== */
main{max-width:var(--maxw);margin:0 auto;padding:2rem 1.1rem 5rem}
.view{animation:fadeUp .5s var(--ease) both}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
h1,h2,h3,h4{letter-spacing:-.03em;margin:0}
h1{font-size:clamp(2.1rem,5.6vw,3.7rem);font-weight:800;line-height:1.02}
h2{font-size:clamp(1.35rem,2.6vw,1.9rem);font-weight:800}
h3{font-size:1.05rem;font-weight:700}
.muted{color:var(--fg-dim)}
.faint{color:var(--fg-faint)}
.eyebrow{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-faint);font-weight:700}
.section{margin-top:3rem}
.section-head{display:flex;align-items:baseline;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}
.section-head p{margin:0;font-size:.9rem}

/* hero */
.hero{padding:3.2rem 0 1rem;text-align:center}
.hero h1 .shine{
  background:linear-gradient(180deg,var(--fg) 0%,color-mix(in srgb,var(--fg) 42%,transparent) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 26px color-mix(in srgb,var(--primary) 22%,transparent))
}
.hero p.lede{max-width:640px;margin:1.1rem auto 0;font-size:1.02rem;color:var(--fg-dim);line-height:1.65}
.hero-actions{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;margin-top:2rem}

/* buttons */
.btn{
  border:1px solid var(--line);border-radius:999px;padding:.7rem 1.3rem;font-weight:700;font-size:.9rem;
  background:linear-gradient(145deg,color-mix(in srgb,var(--fg) 5%,transparent),color-mix(in srgb,var(--fg) 2%,transparent));
  cursor:pointer;transition:all .35s var(--ease);display:inline-flex;align-items:center;gap:.5rem;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)
}
.btn:hover{border-color:var(--line-2);transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(0,0,0,.7)}
.btn:active{transform:translateY(0)}
.btn.primary{
  background:linear-gradient(145deg,var(--primary),color-mix(in srgb,var(--secondary) 75%,var(--primary)));
  color:#06121c;border-color:transparent;box-shadow:0 12px 34px -14px color-mix(in srgb,var(--primary) 85%,transparent)
}
.btn.primary:hover{box-shadow:0 20px 44px -14px color-mix(in srgb,var(--primary) 90%,transparent)}
.btn.ghost{background:transparent}
.btn.sm{padding:.42rem .85rem;font-size:.8rem}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}

/* stat row */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.9rem;margin-top:2.6rem}
.stat{border-radius:var(--radius);padding:1.1rem 1.2rem;text-align:left}
.stat .v{font-size:2rem;font-weight:800;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.stat .k{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--fg-faint);margin-top:.45rem;font-weight:700}

/* cards */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}
.card{
  border-radius:var(--radius);padding:1.25rem;cursor:pointer;position:relative;overflow:hidden;
  transition:transform .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease);
  border:1px solid var(--line);text-align:left;width:100%;
  background:linear-gradient(145deg,color-mix(in srgb,var(--fg) 4%,transparent),color-mix(in srgb,var(--fg) 1.5%,transparent));
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)
}
html[data-theme="light"] .chip.tc{color:color-mix(in srgb,var(--tc) 45%,#0b0d14);border-color:color-mix(in srgb,var(--tc) 55%,transparent);background:color-mix(in srgb,var(--tc) 18%,transparent)}
html[data-theme="light"] .card{background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(255,255,255,.72))}
.card::before{
  content:'';position:absolute;inset:0;opacity:0;transition:opacity .45s var(--ease);pointer-events:none;
  background:radial-gradient(500px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--tc,var(--primary)) 16%,transparent),transparent 45%)
}
.card:hover{transform:translateY(-4px);border-color:var(--line-2);box-shadow:0 26px 54px -26px rgba(0,0,0,.85)}
.card:hover::before{opacity:1}
.card h3{margin-bottom:.35rem;font-size:1rem}
.card p{margin:.3rem 0 0;font-size:.85rem;color:var(--fg-dim);line-height:1.55}
.card .bar{height:4px;border-radius:99px;background:color-mix(in srgb,var(--fg) 10%,transparent);margin-top:.9rem;overflow:hidden}
.card .bar i{display:block;height:100%;border-radius:99px;background:var(--tc,var(--primary));transition:width .8s var(--ease)}

.chips{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.7rem}
.chip{
  font-size:.68rem;font-weight:700;letter-spacing:.03em;padding:.24rem .6rem;border-radius:999px;
  border:1px solid var(--line);color:var(--fg-dim);background:color-mix(in srgb,var(--fg) 4%,transparent);white-space:nowrap
}
.chip.tc{color:var(--tc);border-color:color-mix(in srgb,var(--tc) 35%,transparent);background:color-mix(in srgb,var(--tc) 10%,transparent)}
.chip.good{color:var(--good);border-color:color-mix(in srgb,var(--good) 40%,transparent);background:color-mix(in srgb,var(--good) 12%,transparent)}
.chip.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,transparent);background:color-mix(in srgb,var(--warn) 12%,transparent)}
.chip.bad{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,transparent);background:color-mix(in srgb,var(--bad) 12%,transparent)}

/* filter bar */
.toolbar{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin-bottom:1.4rem}
.field{
  border:1px solid var(--line);background:color-mix(in srgb,var(--fg) 4%,transparent);border-radius:999px;
  padding:.5rem .95rem;font-size:.85rem;font-weight:600;outline:none;transition:border-color .3s var(--ease)
}
.field:focus{border-color:color-mix(in srgb,var(--primary) 60%,transparent)}
input.field{min-width:220px;flex:1}
select.field{cursor:pointer}
html[data-theme="light"] select.field option{background:#fff}

/* ============================== CASE RUNNER ============================== */
.runner-head{display:flex;gap:1rem;align-items:flex-start;flex-wrap:wrap;margin-bottom:1.4rem}
.runner-head .meta{flex:1;min-width:260px}
.progress-rail{height:6px;border-radius:99px;background:color-mix(in srgb,var(--fg) 10%,transparent);overflow:hidden;margin:1rem 0 1.6rem}
.progress-rail i{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--secondary));transition:width .6s var(--ease)}
.panel{border-radius:var(--radius);padding:1.5rem;margin-bottom:1.1rem;scroll-margin-top:90px}
.result{scroll-margin-top:90px}
.panel h3{display:flex;align-items:center;gap:.5rem;margin-bottom:.8rem;font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;color:var(--fg-faint)}
.panel p{margin:0 0 .65rem;line-height:1.7;font-size:.93rem}
.panel p:last-child{margin-bottom:0}
.panel ul{margin:0;padding-left:1.15rem}
.panel li{line-height:1.65;font-size:.9rem;margin-bottom:.3rem}
details.collapse{border-radius:var(--radius);border:1px solid var(--line);margin-bottom:1.1rem;overflow:hidden}
details.collapse>summary{cursor:pointer;padding:.9rem 1.3rem;font-weight:700;font-size:.85rem;list-style:none;display:flex;align-items:center;gap:.5rem}
details.collapse>summary::-webkit-details-marker{display:none}
details.collapse>summary::before{content:'▸';transition:transform .3s var(--ease);color:var(--fg-faint)}
details.collapse[open]>summary::before{transform:rotate(90deg)}
details.collapse>div{padding:0 1.3rem 1.3rem}

.qhead{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;flex-wrap:wrap;margin-bottom:.9rem}
.qprompt{font-size:1.06rem;font-weight:700;line-height:1.5;letter-spacing:-.01em}
.marks-pill{flex:none;font-weight:800;font-size:.78rem;padding:.35rem .8rem;border-radius:999px;border:1px solid var(--line-2);background:color-mix(in srgb,var(--fg) 6%,transparent);white-space:nowrap}
textarea.answer{
  width:100%;min-height:190px;resize:vertical;border-radius:var(--radius-sm);border:1px solid var(--line);
  background:color-mix(in srgb,var(--fg) 3%,transparent);padding:1rem 1.1rem;line-height:1.7;font-size:.94rem;outline:none;
  transition:border-color .3s var(--ease)
}
textarea.answer:focus{border-color:color-mix(in srgb,var(--primary) 55%,transparent);background:color-mix(in srgb,var(--fg) 5%,transparent)}
.answer-foot{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-top:.8rem}
.answer-foot .spacer{flex:1}
.wc{font-size:.75rem;color:var(--fg-faint);font-variant-numeric:tabular-nums}

/* result */
.result{border-radius:var(--radius);padding:1.4rem;margin-top:1.2rem;border:1px solid var(--line);animation:fadeUp .45s var(--ease) both}
.score-row{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap}
.ring{width:78px;height:78px;flex:none;border-radius:50%;display:grid;place-items:center;position:relative;font-weight:800;font-size:1.05rem;font-variant-numeric:tabular-nums}
.ring::before{content:'';position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--rc) calc(var(--p)*1%),color-mix(in srgb,var(--fg) 9%,transparent) 0)}
.ring::after{content:'';position:absolute;inset:7px;border-radius:50%;background:var(--surface)}
html[data-theme="light"] .ring::after{background:#fff}
.ring span{position:relative;z-index:1}
.score-txt{flex:1;min-width:180px}
.score-txt b{font-size:1.15rem;display:block;letter-spacing:-.02em}
.score-txt small{color:var(--fg-dim);font-size:.85rem}
.rubric{list-style:none;padding:0;margin:1.2rem 0 0;display:grid;gap:.45rem}
.rubric li{display:flex;gap:.65rem;align-items:flex-start;font-size:.87rem;line-height:1.55;padding:.55rem .75rem;border-radius:10px;border:1px solid transparent}
.rubric li.hit{background:color-mix(in srgb,var(--good) 10%,transparent);border-color:color-mix(in srgb,var(--good) 25%,transparent)}
.rubric li.miss{background:color-mix(in srgb,var(--bad) 8%,transparent);border-color:color-mix(in srgb,var(--bad) 20%,transparent)}
.rubric .mk{flex:none;font-weight:800;width:1.1rem}
.rubric li.hit .mk{color:var(--good)}
.rubric li.miss .mk{color:var(--bad)}
.rubric .pt{margin-left:auto;flex:none;font-size:.75rem;color:var(--fg-faint);font-weight:700;font-variant-numeric:tabular-nums}
.model{white-space:pre-wrap;line-height:1.75;font-size:.92rem;color:var(--fg-dim)}
.adjust{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid var(--line)}
.adjust label{font-size:.78rem;color:var(--fg-faint);font-weight:700;text-transform:uppercase;letter-spacing:.1em}

/* dashboard */
.mastery{display:grid;gap:.7rem}
.mrow{display:grid;grid-template-columns:190px 1fr 62px;gap:.9rem;align-items:center;font-size:.86rem}
.mrow .track{height:9px;border-radius:99px;background:color-mix(in srgb,var(--fg) 9%,transparent);overflow:hidden}
.mrow .track i{display:block;height:100%;border-radius:99px;transition:width .9s var(--ease)}
.mrow .pct{text-align:right;font-weight:800;font-variant-numeric:tabular-nums;font-size:.82rem}
.heat{display:grid;grid-template-columns:repeat(auto-fill,14px);gap:4px;margin-top:.6rem}
.heat i{width:14px;height:14px;border-radius:3px;background:color-mix(in srgb,var(--fg) 7%,transparent)}
.heat i[data-l="1"]{background:color-mix(in srgb,var(--primary) 28%,transparent)}
.heat i[data-l="2"]{background:color-mix(in srgb,var(--primary) 52%,transparent)}
.heat i[data-l="3"]{background:color-mix(in srgb,var(--primary) 78%,transparent)}
.heat i[data-l="4"]{background:var(--primary)}

/* flashcards */
.flash-wrap{max-width:640px;margin:0 auto;perspective:1600px}
.flash{
  min-height:290px;border-radius:var(--radius-lg);padding:2.2rem;display:flex;flex-direction:column;justify-content:center;
  transition:transform .6s var(--ease);cursor:pointer;text-align:center
}
.flash .term{font-size:1.9rem;font-weight:800;letter-spacing:-.03em}
.flash .sub{color:var(--fg-faint);font-size:.85rem;margin-top:.4rem;font-weight:600}
.flash .body{text-align:left;font-size:.92rem;line-height:1.7;color:var(--fg-dim)}
.flash .body b{color:var(--fg);display:block;margin-top:.9rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.12em}
.flash-actions{display:flex;gap:.6rem;justify-content:center;margin-top:1.4rem;flex-wrap:wrap}

/* reference */
.ref-item{border-radius:var(--radius);border:1px solid var(--line);margin-bottom:.7rem;overflow:hidden}
.ref-item>summary{cursor:pointer;padding:.95rem 1.2rem;list-style:none;display:flex;gap:.7rem;align-items:center;flex-wrap:wrap}
.ref-item>summary::-webkit-details-marker{display:none}
.ref-item>summary b{font-size:.98rem}
.ref-item>div{padding:0 1.2rem 1.2rem;font-size:.89rem;line-height:1.7;color:var(--fg-dim)}
.ref-item>div b{color:var(--fg);display:block;margin-top:.8rem;font-size:.7rem;text-transform:uppercase;letter-spacing:.12em}

/* exam */
.exam-bar{
  position:sticky;top:58px;z-index:30;display:flex;gap:1rem;align-items:center;flex-wrap:wrap;
  border-radius:999px;padding:.6rem 1.2rem;margin-bottom:1.4rem;font-size:.85rem;font-weight:700
}
.exam-bar .t{font-variant-numeric:tabular-nums;font-size:1.05rem;letter-spacing:-.02em}
.exam-bar .t.low{color:var(--bad);animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.45}}

/* palette */
.overlay{position:fixed;inset:0;z-index:100;background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:blur(8px);display:grid;place-items:start center;padding-top:14vh;animation:fadeUp .25s var(--ease) both}
.palette{width:min(600px,92vw);border-radius:var(--radius);overflow:hidden}
.palette input{width:100%;border:0;background:transparent;padding:1.1rem 1.3rem;font-size:1rem;font-weight:600;outline:none;border-bottom:1px solid var(--line)}
.palette ul{list-style:none;margin:0;padding:.4rem;max-height:52vh;overflow:auto}
.palette li{padding:.7rem .95rem;border-radius:10px;cursor:pointer;font-size:.9rem;display:flex;gap:.7rem;align-items:center}
.palette li:hover,.palette li.sel{background:color-mix(in srgb,var(--fg) 8%,transparent)}
.palette li small{margin-left:auto;color:var(--fg-faint);font-size:.72rem}

/* toast */
#toast{position:fixed;left:50%;bottom:2rem;transform:translateX(-50%) translateY(140%);z-index:200;
  border-radius:999px;padding:.7rem 1.3rem;font-size:.86rem;font-weight:700;transition:transform .45s var(--ease)}
#toast.show{transform:translateX(-50%) translateY(0)}

/* footer */
footer.site-footer{position:relative;margin-top:5rem;padding:4rem 1.1rem 2.4rem;border-top:1px solid var(--line);overflow:hidden;text-align:center}
.giant{
  position:absolute;left:50%;bottom:-.12em;transform:translateX(-50%);font-size:24vw;line-height:.75;font-weight:900;
  letter-spacing:-.06em;pointer-events:none;user-select:none;white-space:nowrap;color:transparent;
  -webkit-text-stroke:1px color-mix(in srgb,var(--fg) 7%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--fg) 9%,transparent) 0%,transparent 62%);
  -webkit-background-clip:text;background-clip:text
}
.footer-in{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto}
.sig{font-size:clamp(1.3rem,3.4vw,2rem);font-weight:800;letter-spacing:-.03em;
  background:linear-gradient(180deg,var(--fg),color-mix(in srgb,var(--fg) 40%,transparent));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.footer-in p{color:var(--fg-faint);font-size:.82rem;margin:.9rem 0 0}
.footer-in p.version{margin-top:1.4rem}
.gate{
  background:none;border:0;padding:.2rem .45rem;cursor:pointer;font:inherit;font-size:.82rem;font-weight:700;
  color:var(--fg-faint);border-bottom:1px dashed color-mix(in srgb,var(--fg) 22%,transparent);
  border-radius:3px;transition:color .3s var(--ease),text-shadow .3s var(--ease)
}
.gate:hover{color:var(--primary);border-bottom-color:var(--primary);text-shadow:0 0 16px color-mix(in srgb,var(--primary) 60%,transparent)}
.gate:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
.gate.unlocked::after{content:' ✓';color:var(--good)}
.footer-links{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;margin-bottom:2rem}

/* misc */
.empty{text-align:center;padding:4rem 1rem;color:var(--fg-faint)}
.empty .big{font-size:2.6rem;margin-bottom:.6rem}
.row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.spread{display:flex;justify-content:space-between;gap:1rem;align-items:center;flex-wrap:wrap}
.kbd{font-size:.68rem;padding:.12rem .38rem;border-radius:5px;border:1px solid var(--line-2);background:color-mix(in srgb,var(--fg) 6%,transparent);font-weight:700}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
hr.sep{border:0;border-top:1px solid var(--line);margin:1.6rem 0}

@media (max-width:820px){
  .topbar-in{flex-wrap:wrap;gap:.5rem;padding:.6rem .8rem}
  .brand{font-size:.92rem}
  .brand small{display:none}
  nav.mainnav{
    order:3;width:100%;margin-left:0;flex-wrap:nowrap;overflow-x:auto;gap:.2rem;
    padding-bottom:.15rem;scrollbar-width:none;-ms-overflow-style:none
  }
  nav.mainnav::-webkit-scrollbar{display:none}
  .navlink{padding:.4rem .7rem;font-size:.8rem;white-space:nowrap;flex:none}
  .icon-btn{flex:none;width:30px;height:30px;font-size:.85rem}
  .tools{order:2;margin-left:auto}
  .exam-bar{top:98px}
  .panel,.result{scroll-margin-top:120px}
}
@media (max-width:640px){
  .mrow{grid-template-columns:110px 1fr 48px;font-size:.78rem}
  .panel{padding:1.15rem}
  main{padding:1.4rem .9rem 4rem}
  .hero{padding:2rem 0 .5rem}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat .v{font-size:1.55rem}
  textarea.answer{min-height:150px}
  .giant{font-size:34vw}
}
@media print{
  #ambient,header.topbar,footer.site-footer,.btn,.toolbar,.exam-bar{display:none!important}
  body{background:#fff;color:#000}
  .panel,.result,.card{border:1px solid #ccc;box-shadow:none;background:#fff}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}