/* Meme Harvard. Night campus after andrefont: near-black paper, puffy hand-drawn letters, olive brush bands, sparkles, a pointing hand. */
:root {
  --paper: #F4EFE4; --paper2: #EAE3D4; --card: #FFFDF8; --ink: #161513; --ink2: #3E3A34; --muted: #77716A; --line: #161513;
  --crimson: #D9572C; --crimson2: #E8743B; --olive: #C9C25D; --lemon: #F2E35C; --mint: #9BE7C4; --sky: #8FC8FF; --pink: #F08C7E; --lilac: #A99BFF; --orange: #E8843F; --teal: #6ED6CF; --cuff: #2436E8;
  --up: #12985F; --dn: #D7263D; --shadow: 4px 4px 0 var(--ink); --shadow-lg: 7px 7px 0 var(--ink); --r: 26px; --r-sm: 16px;
  --display: "Gluten", "Arial Rounded MT Bold", system-ui, sans-serif; --hand: "Gluten", "Arial Rounded MT Bold", system-ui, sans-serif; --body: "DM Sans", system-ui, -apple-system, sans-serif; --mono: "DM Sans", system-ui, sans-serif;
  --ease: cubic-bezier(.7,0,.2,1); --spring: cubic-bezier(.3,1.6,.5,1);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --paper: #0D0C0B; --paper2: #161513; --card: #1C1B19; --ink: #F2EDE4; --ink2: #D6D0C4; --muted: #8F897E; --line: #3A3732;
  --shadow: 0 0 0 transparent; --shadow-lg: 0 0 0 transparent; --up: #5BE3A0; --dn: #FF7A6E; color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.55 var(--body); overflow-x: clip; font-variant-numeric: tabular-nums; }
img, svg { max-width: 100%; }
a { color: inherit; text-underline-offset: 3px; }
a:hover { color: var(--crimson); }
:focus-visible { outline: 3px solid var(--lemon); outline-offset: 3px; border-radius: 8px; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: 0 0 .4em; line-height: 1.12; }
p { margin: 0 0 .9em; }
.wrap { width: min(1240px, 100%); margin: 0 auto; padding: 0 24px; }
.narrow { width: min(860px, 100%); }
.sec { padding: 64px 0; }
.wrap.sec { padding: 64px 24px; }
.display { font-family: var(--display); font-weight: 800; letter-spacing: -.2px; line-height: 1.02; }
h1.display { font-size: clamp(42px, 7vw, 84px); }
h2.display, .display.mid { font-size: clamp(34px, 5vw, 64px); margin-top: 1.2em; }
.display.small { font-size: 28px; }
.h3, h3 { font-size: 21px; font-weight: 700; }
.hand { font-family: var(--hand); font-weight: 600; line-height: 1.2; }
.big { font-size: 1.2em; }
.lede { font-family: var(--display); font-weight: 500; font-size: 1.25em; line-height: 1.4; color: var(--ink2); max-width: 60ch; }
.muted { color: var(--muted); }
.small, .small-print { font-size: 14px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.crimson { color: var(--crimson); }
.eyebrow { font-family: var(--display); font-weight: 500; color: var(--muted); font-size: 20px; margin: 0 0 6px; }
.eyebrow.ink { color: #161513; opacity: .7; }
.sr, .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--paper); padding: 8px 14px; border-radius: 12px; z-index: 300; }
.skip:focus { left: 12px; }

/* ---------- header ---------- */
.top { position: fixed; top: 0; left: 0; right: 0; z-index: 80; pointer-events: none; }
.top::before { content: ""; position: absolute; inset: 0 0 -30px; background: linear-gradient(var(--paper) 30%, color-mix(in srgb, var(--paper) 0%, transparent)); opacity: .92; z-index: -1; transition: opacity .3s; }
body.menu-open .top::before { opacity: 0; }
.top-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 14px 22px; }
.top-in > * { pointer-events: auto; }
.logo { justify-self: center; text-decoration: none; font-family: var(--display); font-weight: 800; font-size: clamp(24px, 2.6vw, 36px); color: color-mix(in srgb, var(--ink) 82%, transparent); white-space: nowrap; transition: transform .4s var(--spring); }
.logo:hover { color: var(--ink); transform: rotate(-3deg) scale(1.04); }
.menu-btn { justify-self: start; position: relative; z-index: 80; width: 64px; height: 64px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--ink); transition: transform .35s var(--spring), background .25s, color .25s; }
.menu-btn:hover, body.menu-open .menu-btn { background: var(--lemon); color: #161513; transform: scale(1.06) rotate(-8deg); }
.menu-btn path { transition: d .4s var(--spring), transform .4s var(--spring); transform-origin: 20px 20px; }
body.menu-open .menu-btn .mb1 { d: path("M11 11q9 9 18 18"); }
body.menu-open .menu-btn .mb2 { d: path("M11 29q9-9 18-18"); }
.top-r { justify-self: end; display: flex; align-items: center; gap: 8px; }
.icon-btn { width: 46px; height: 46px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--ink); transition: transform .3s var(--spring), background .2s; }
.icon-btn:hover { background: color-mix(in srgb, var(--ink) 10%, transparent); transform: rotate(-10deg); }
#sound .snd-on { display: none; } #sound.on .snd-on { display: block; } #sound.on .snd-off { display: none; }
#sound.on svg { animation: talk .5s ease-in-out infinite alternate; }
@keyframes talk { to { transform: scale(1.1) rotate(-4deg); } }
.acct { position: relative; }
.acct summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 3px 12px 3px 4px; border: 2px solid var(--line); border-radius: 999px; background: var(--card); cursor: pointer; }
.acct summary::-webkit-details-marker { display: none; }
.acct-name { font-weight: 700; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-xp { font-family: var(--mono); font-size: 13px; background: var(--lemon); color: #161513; padding: 2px 8px; border-radius: 999px; }
.acct-menu { position: absolute; right: 0; top: calc(100% + 8px); background: var(--card); border: 2px solid var(--line); border-radius: var(--r-sm); padding: 10px; min-width: 220px; display: grid; gap: 2px; z-index: 70; box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.acct-menu a, .acct-menu button { text-align: left; padding: 8px 10px; border-radius: 10px; text-decoration: none; background: none; border: 0; font-weight: 600; }
.acct-menu a:hover, .acct-menu button:hover { background: var(--paper2); }
#app { padding-top: 92px; }

/* ---------- side menu ---------- */
.side { position: fixed; inset: 0; z-index: 70; pointer-events: none; }
.side-panel { position: absolute; top: 0; bottom: 0; left: 0; width: clamp(440px, 40vw, 620px); max-width: 100vw; background: #1C1B19; color: #F2EDE4; border-radius: 0 34px 34px 0; padding: clamp(86px, 14svh, 130px) 40px 40px clamp(36px, 7.5vw, 108px); overflow-y: auto; overscroll-behavior: contain; container-type: inline-size; overflow-x: hidden; transform: translateX(-104%); transition: transform .75s var(--ease), box-shadow .75s; pointer-events: auto; box-shadow: none; }
body.menu-open .side-panel { box-shadow: 30px 0 80px rgba(0,0,0,.45); }
.side-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.45); backdrop-filter: blur(3px); opacity: 0; transition: opacity .5s; }
body.menu-open .side { pointer-events: auto; }
body.menu-open .side-panel { transform: none; }
body.menu-open .side-scrim { opacity: 1; }
.side-label { font-family: var(--display); font-weight: 500; font-size: 20px; color: #8F897E; margin: 0 0 8px; }
.hand-line { width: 100%; max-width: 470px; height: 10px; display: block; margin-bottom: clamp(14px, 3svh, 30px); }
.hand-line path { fill: none; stroke: #4A4741; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s var(--ease) .25s; }
body.menu-open .hand-line path { stroke-dashoffset: 0; }
.side .nav { display: flex; flex-direction: column; align-items: flex-start; gap: 0; position: relative; z-index: 1; }
.side .nav a { position: relative; font-family: var(--display); font-weight: 800; font-size: clamp(24px, min(calc((100svh - 390px) / 11.6), 12.5cqi), 62px); line-height: 1.16; text-decoration: none; color: #F2EDE4; opacity: 0; transform: translateX(-40px) rotate(-3deg); transition: opacity .4s, transform .6s var(--spring), color .2s; }
body.menu-open .side .nav a { opacity: 1; transform: none; transition-delay: calc(.18s + var(--i) * .045s), calc(.18s + var(--i) * .045s), 0s; }
.side .nav a:hover { color: var(--lemon); transform: translateX(14px) rotate(-2deg); transition-delay: 0s; }
.side .nav a.on::before { content: ""; position: absolute; left: -36px; top: 50%; width: 18px; height: 18px; border-radius: 50%; background: var(--lemon); transform: translateY(-50%); }
.nav-apply { display: inline-flex; align-items: flex-start; }
.nav-apply .bubble { width: auto; height: .62em; margin: -.25em 0 0 .25em; transform: rotate(-6deg); animation: bob 2.4s ease-in-out infinite; }
.side-foot { margin-top: clamp(20px, 4svh, 36px); display: flex; flex-wrap: wrap; gap: 6px 24px; align-items: baseline; position: relative; z-index: 1; }
.side-foot .side-label { width: 100%; }
.side-foot a { font-family: var(--display); font-weight: 700; font-size: 22px; text-decoration: none; color: #F2EDE4; }
.side-foot a:hover { color: var(--lemon); }
.side-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.side-confetti i { position: absolute; top: -20px; left: var(--x); width: 4px; height: 15px; border-radius: 3px; background: var(--c); transform: rotate(var(--r)); animation: drift var(--d) linear infinite; animation-delay: var(--delay); animation-play-state: paused; opacity: .8; }
body.menu-open .side-confetti i { animation-play-state: running; }
@keyframes drift { to { transform: translate(40px, 105vh) rotate(calc(var(--r) + 300deg)); } }
@keyframes bob { 50% { transform: translateY(-5px) rotate(4deg); } }

/* ---------- hand cursor, page wipe ---------- */
#cursor { position: fixed; left: 0; top: 0; z-index: 400; pointer-events: none; opacity: 0; transition: opacity .2s; will-change: transform; }
#cursor.live { opacity: 1; } #cursor.hide { opacity: 0; }
#cursor svg { display: block; transform-origin: 10px 2px; transition: transform .25s var(--spring); filter: drop-shadow(2px 3px 0 rgba(0,0,0,.25)); }
#cursor.point svg { transform: rotate(-10deg) scale(1.08); }
#cursor.press svg { transform: rotate(-4deg) scale(.86, .8); }
@media (pointer: fine) { html.has-cursor, html.has-cursor * { cursor: none !important; } html.has-cursor :is(input:not([type=radio],[type=checkbox],[type=range],[type=button],[type=submit]), textarea, [contenteditable]) { cursor: text !important; } }
#cursor-buddy { position: fixed; left: 0; top: 0; z-index: 399; pointer-events: none; opacity: 0; transition: opacity .3s; }
#cursor-buddy.live { opacity: 1; } #cursor-buddy svg { display: block; animation: spin 3s linear infinite; }
@media not (pointer: fine) { #cursor-buddy { display: none; } }
#wipe { position: fixed; inset: 0; z-index: 150; pointer-events: none; background: var(--olive); clip-path: circle(0 at 54px 46px); }
#wipe.go { animation: wipe .75s var(--ease) forwards; }
@keyframes wipe { 0% { clip-path: circle(150% at 54px 46px); } 100% { clip-path: circle(0 at 54px 46px); } }

/* ---------- buttons, tags, chips ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px 20px; border: 3px solid var(--line); border-radius: 999px; background: var(--crimson); color: #FFF7EC; font-weight: 700; text-decoration: none; box-shadow: var(--shadow); transition: transform .15s, box-shadow .15s; }
.btn:hover { color: #FFF7EC; transform: translate(-2px, -2px) rotate(-1deg); box-shadow: 6px 6px 0 var(--line); }
.btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--line); }
.btn:disabled { opacity: .55; pointer-events: none; }
.btn-ghost { background: var(--card); color: var(--ink); }
.btn-ghost:hover { color: var(--ink); background: var(--lemon); }
:root[data-theme="dark"] .btn-ghost:hover { color: #1E1B18; }
.btn-light { background: #FFF7EC; color: #1E1B18; }
.btn-light:hover { color: #1E1B18; }
.btn-warn { background: var(--dn); }
.btn-big { min-height: 56px; padding: 12px 28px; font-size: 18px; }
.btn-sm { min-height: 38px; padding: 6px 16px; box-shadow: 2px 2px 0 var(--line); }
.link { background: none; border: 0; padding: 4px 0; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.row, .share-row, .next-steps, .hero-cta, .adm-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 16px 0; }
.sticker { display: inline-block; background: var(--c, var(--lemon)); color: #1E1B18; border: 2.5px solid var(--line); border-radius: 999px; padding: 4px 14px; font-family: var(--hand); font-weight: 700; font-size: 20px; transform: rotate(-2deg); box-shadow: 2px 2px 0 var(--line); margin-bottom: 14px; }
.sticker.big { font-family: var(--display); font-size: 48px; padding: 10px 26px; }
.tag { display: inline-block; font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 999px; border: 2px solid var(--line); background: var(--paper2); white-space: nowrap; }
.tag-warn { background: var(--lemon); color: #1E1B18; }
.tag-ok { background: var(--mint); color: #1E1B18; }
.tag-npc { background: var(--lemon); color: #161513; font-style: normal; font-family: var(--display); font-weight: 800; font-size: 11px; letter-spacing: .04em; padding: 1px 7px; margin-left: 6px; border: 0; }
.tag-ai { background: var(--ink); color: var(--paper); font-style: normal; font-size: 11px; padding: 1px 7px; margin-left: 4px; }
.chip { display: inline-block; padding: 3px 10px; border-radius: 999px; border: 2px solid var(--line); background: var(--c); color: #1E1B18; font-size: 13px; font-weight: 700; text-decoration: none; }

/* ---------- cards ---------- */
.card { background: var(--card); border: 3px solid var(--line); border-radius: var(--r); padding: 22px; box-shadow: var(--shadow); min-width: 0; }
.card.soft { box-shadow: none; background: var(--paper2); }
.card h3 { margin-bottom: 12px; }
.sticker-card { background: var(--c); color: #1E1B18; border: 3px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin: 22px 0; }

/* ---------- sections ---------- */
.sec-head { margin-bottom: 28px; }
.sec-head h2 { margin-top: 0; max-width: 20ch; }
.band { border-top: 3px solid var(--line); border-bottom: 3px solid var(--line); }
.band-ink { background: var(--ink); color: var(--paper); }
.band-ink .fac-card { color: #1E1B18; }
.band-lemon { background: var(--lemon); color: #1E1B18; }
.band-crimson { background: var(--crimson); color: #FFF7EC; }
.pain-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pain { background: var(--card); border: 3px solid var(--line); border-radius: var(--r-sm); padding: 16px; font-weight: 700; transform: rotate(var(--r)); box-shadow: var(--shadow); }
.pain .x { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--dn); color: #fff; margin-right: 8px; font-size: 14px; }
.pain-fix { background: var(--mint); color: #1E1B18; } .pain-fix .x { background: var(--up); }
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.step a { display: block; height: 100%; text-decoration: none; background: var(--card); border: 3px solid var(--line); border-radius: var(--r); padding: 22px; box-shadow: var(--shadow); transition: transform .2s; }
.step a:hover { transform: translate(-3px, -3px) rotate(-1deg); color: var(--ink); }
.step-n { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--lemon); color: #1E1B18; border: 3px solid var(--line); font-family: var(--display); font-size: 22px; margin-bottom: 10px; }
.fac-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.fac-card { display: flex; flex-direction: column; gap: 6px; background: var(--c); border: 3px solid var(--line); border-radius: var(--r); padding: 20px; text-decoration: none; transform: rotate(var(--r)); box-shadow: 5px 5px 0 #000; transition: transform .25s cubic-bezier(.3,1.6,.5,1); }
.fac-card:hover { transform: rotate(0) scale(1.03); color: #1E1B18; }
.fac-card h3 { font-family: var(--display); font-weight: 400; font-size: 24px; }
.fac-card .hand { font-size: 19px; }
.fac-prof { display: flex; align-items: center; gap: 8px; margin-top: auto; font-weight: 700; font-size: 14px; }
.prof-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.prof-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; background: var(--card); border: 3px solid var(--line); border-radius: var(--r); padding: 18px; text-decoration: none; box-shadow: var(--shadow); position: relative; overflow: hidden; transition: transform .2s; }
.prof-card::before { content: ""; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%; background: var(--c); opacity: .45; }
.prof-card > * { position: relative; }
.prof-card:hover { transform: translate(-3px, -3px); color: var(--ink); }
.prof-card:hover .blob { transform: rotate(-8deg) scale(1.06); }
.prof-card .hand { font-size: 18px; }
.prof-card .tag, .exam-card .tag { white-space: normal; }
.prof-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 30px; }
.prof-card.big { flex-direction: row; gap: 18px; }
.ticks { list-style: none; padding: 0; margin: 8px 0; }
.ticks li { padding-left: 26px; position: relative; margin: 4px 0; }
.ticks li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--mint); color: #1E1B18; display: grid; place-items: center; font-size: 12px; font-weight: 700; border: 2px solid var(--line); }
.ticks.big li { font-size: 18px; margin: 10px 0; }
.visiting { margin-top: 34px; }
.visiting-strip { display: flex; gap: 14px; overflow-x: auto; padding: 10px 2px 14px; scroll-snap-type: x mandatory; }
.vis { display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; font-size: 13px; font-weight: 700; min-width: 76px; scroll-snap-align: start; }
.vis svg { transition: transform .3s cubic-bezier(.3,1.6,.5,1); } .vis:hover svg { transform: rotate(20deg) scale(1.1); }
.vis-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.vis-card { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 2.5px solid var(--line); border-radius: var(--r-sm); background: var(--card); text-decoration: none; }
.vis-card span { display: flex; flex-direction: column; min-width: 0; }
.vis-card small { font-size: 13px; }
.vis-list { list-style: none; padding: 0; margin: 0; } .vis-list li { margin: 8px 0; } .vis-list a { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; text-decoration: none; }
.exam-demo { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; }
.quiz-demo { display: grid; gap: 12px; }
.opt { text-align: left; padding: 14px 18px; border: 3px solid var(--line); border-radius: var(--r-sm); background: var(--card); color: var(--ink); font-weight: 700; box-shadow: 3px 3px 0 var(--line); transition: transform .15s; min-height: 52px; }
.opt:hover:not(:disabled) { transform: translate(-2px, -2px); background: var(--lemon); color: #1E1B18; }
.opt.right { background: var(--mint); color: #1E1B18; } .opt.wrong { background: var(--pink); color: #1E1B18; text-decoration: line-through; }
.opt:disabled { cursor: default; }
.demo-out { background: var(--card); color: var(--ink); border: 3px solid var(--line); border-radius: var(--r-sm); padding: 14px; }
.live-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 20px; }
.feed { list-style: none; padding: 0; margin: 0; }
.feed li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 0; border-bottom: 2px dashed color-mix(in srgb, var(--ink) 18%, transparent); font-size: 15px; }
.feed li:last-child { border: 0; }
.feed time { margin-left: auto; color: var(--muted); font-size: 13px; font-family: var(--mono); }
.who { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; text-decoration: none; min-width: 0; }
.who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }
.mini-lb { list-style: none; padding: 0; margin: 0 0 12px; }
.mini-lb li { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.mini-lb li > b { width: 22px; font-family: var(--display); font-weight: 400; }
.mini-lb .xp { margin-left: auto; font-family: var(--mono); font-size: 14px; white-space: nowrap; }
.war-mini { margin: 10px 0 16px; }
.war-bar { display: flex; border: 2.5px solid var(--line); border-radius: 999px; overflow: hidden; font-size: 12px; font-weight: 700; color: #1E1B18; }
.war-bar span { background: var(--c); padding: 4px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.war-bar span:first-child { width: var(--w); border-right: 2.5px solid var(--line); }
.war-bar span:last-child { flex: 1; text-align: right; }
.war-bar.big { height: 22px; }
.ladder { display: grid; gap: 14px; }
.rung { display: flex; gap: 18px; align-items: flex-start; background: var(--card); border: 3px solid var(--line); border-radius: var(--r); padding: 18px 22px; box-shadow: var(--shadow); }
.rung:nth-child(2) { margin-left: 4%; } .rung:nth-child(3) { margin-left: 8%; } .rung:nth-child(4) { margin-left: 12%; }
.rung-n { flex: none; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: var(--crimson); color: #FFF7EC; border: 3px solid var(--line); font-family: var(--display); font-size: 28px; }
.rung h3 em { font-style: normal; font-family: var(--hand); color: var(--muted); }
.token-band > div { max-width: 760px; }
.faq details { background: var(--card); border: 3px solid var(--line); border-radius: var(--r-sm); padding: 4px 20px; margin: 12px 0; box-shadow: 3px 3px 0 var(--line); }
.faq summary { cursor: pointer; font-weight: 700; padding: 12px 0; font-size: 18px; }
.reveal { opacity: 0; transform: translateY(26px) rotate(var(--r, 0deg)); transition: opacity .6s, transform .7s cubic-bezier(.2,1.3,.4,1); }
.reveal.in { opacity: 1; transform: translateY(0) rotate(var(--r, 0deg)); }

/* ---------- forms ---------- */
.field { display: grid; gap: 6px; margin: 0 0 18px; font-weight: 700; }
.field input, .field select, .field textarea, .sel select { font: inherit; font-weight: 500; color: var(--ink); background: var(--card); border: 3px solid var(--line); border-radius: var(--r-sm); padding: 12px 14px; width: 100%; min-height: 50px; }
.field textarea { resize: vertical; }
fieldset { border: 0; padding: 0; margin: 0 0 22px; min-width: 0; }
legend { font-weight: 700; font-size: 18px; margin-bottom: 10px; padding: 0; }
.pick-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pick { position: relative; cursor: pointer; }
.pick input { position: absolute; opacity: 0; inset: 0; }
.pick span { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 14px; border: 3px solid var(--line); border-radius: var(--r-sm); background: var(--card); transition: transform .15s; }
.pick small { color: var(--muted); font-size: 13px; }
.pick input:checked + span { background: var(--c); color: #1E1B18; box-shadow: var(--shadow); transform: translate(-2px, -2px) rotate(-1deg); }
.pick input:checked + span small { color: #4A4239; }
.pick input:focus-visible + span { outline: 3px solid var(--crimson); outline-offset: 3px; }
.form-err { color: var(--dn); font-weight: 700; min-height: 1.4em; }
.radio { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 2.5px solid var(--line); border-radius: var(--r-sm); background: var(--card); cursor: pointer; font-weight: 600; }
.radio:has(input:checked) { background: var(--lemon); color: #1E1B18; }
.radio input { width: 20px; height: 20px; accent-color: var(--crimson); flex: none; margin-top: 2px; }
.opts { display: grid; gap: 10px; }
.opts.grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 16px; }

/* ---------- id card ---------- */
.id-card { border: 3px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--card); box-shadow: var(--shadow-lg); max-width: 640px; margin: 20px 0; transform: rotate(-1deg); }
.id-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--crimson); color: #FFF7EC; padding: 12px 20px; border-bottom: 3px solid var(--line); }
.id-top .display { font-size: 24px; }
.id-body { display: flex; gap: 20px; padding: 20px; align-items: center; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 40%, var(--card)), var(--card) 60%); }
.id-body svg { flex: none; }
.id-body h3 { font-family: var(--display); font-weight: 400; font-size: 30px; word-break: break-word; }
.id-body dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; margin: 0; font-size: 15px; }
.id-body dt { font-family: var(--mono); font-size: 12px; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
.id-body dd { margin: 0; font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.wallet-dlg { border: 3px solid var(--line); border-radius: var(--r); background: var(--card); color: var(--ink); padding: 24px; box-shadow: var(--shadow-lg); }
.wallet-dlg .wl { display: grid; gap: 10px; margin: 14px 0; }
.wallet-dlg::backdrop { background: rgba(30,27,24,.5); }

/* ---------- campus ---------- */
.campus-head { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: end; margin-bottom: 24px; }
.rank-top { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.rank-top span { display: block; }
.bar { height: 16px; border: 2.5px solid var(--line); border-radius: 999px; background: var(--paper2); overflow: hidden; margin: 6px 0; }
.bar i { display: block; height: 100%; background: repeating-linear-gradient(-45deg, var(--crimson) 0 10px, var(--crimson2) 10px 20px); border-right: 2.5px solid var(--line); transition: width .8s cubic-bezier(.2,1.2,.4,1); }
.campus-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.span2 { grid-column: span 2; } .span3 { grid-column: 1 / -1; }
.todo { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.todo a { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 2.5px solid var(--line); border-radius: var(--r-sm); text-decoration: none; background: var(--paper2); transition: transform .15s; }
.todo a:hover { transform: translateX(4px); color: var(--ink); }
.todo li.hot a { background: var(--lemon); color: #1E1B18; }
.todo span { display: flex; flex-direction: column; min-width: 0; flex: 1; } .todo small { color: var(--muted); }
.todo li.hot small { color: #4A4239; }
.mini-prof { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.mini-prof span { display: flex; flex-direction: column; }
.levels { display: grid; gap: 14px; }
.lvl.locked { opacity: .55; }
.lvl-h { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.deg-list { list-style: none; padding: 0; margin: 0 0 10px; } .deg-list li { padding: 4px 0; font-weight: 700; }
.war-table { list-style: none; padding: 0; margin: 0; counter-reset: w; }
.war-table li { display: flex; justify-content: space-between; padding: 5px 0; counter-increment: w; }
.war-table li span::before { content: counter(w) ". "; font-family: var(--mono); color: var(--muted); }
.war-table li.me { font-weight: 700; color: var(--crimson); }

/* ---------- assignments, exams ---------- */
.level-block { margin: 30px 0; } .level-block.locked .task-card { opacity: .5; }
.level-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.level-h em { font-style: normal; font-family: var(--hand); color: var(--muted); }
.task-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.task-card { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border: 3px solid var(--line); border-radius: var(--r-sm); background: var(--card); text-decoration: none; box-shadow: 3px 3px 0 var(--line); transition: transform .15s; position: relative; }
.task-card:hover { transform: translate(-2px, -2px); color: var(--ink); background: color-mix(in srgb, var(--c) 30%, var(--card)); }
.task-card h3 { font-size: 18px; margin-bottom: 4px; }
.task-card p { font-size: 15px; margin-bottom: 6px; }
.task-card.done::after { content: "✓"; position: absolute; top: -10px; right: -10px; width: 30px; height: 30px; border-radius: 50%; background: var(--mint); color: #1E1B18; border: 2.5px solid var(--line); display: grid; place-items: center; font-weight: 700; }
.task-head { display: flex; gap: 18px; align-items: center; margin-bottom: 20px; }
.task-head h1 { font-size: clamp(34px, 5.5vw, 58px); }
.q { font-size: 19px; font-weight: 700; }
.table-scroll { overflow-x: auto; margin: 12px 0; border: 2.5px solid var(--line); border-radius: var(--r-sm); max-width: 100%; -webkit-overflow-scrolling: touch; }
table.data { width: 100%; border-collapse: collapse; font-size: 15px; }
table.data th, table.data td { padding: 9px 12px; text-align: left; border-bottom: 2px solid color-mix(in srgb, var(--ink) 12%, transparent); white-space: nowrap; }
table.data th { background: var(--paper2); font-size: 13px; text-transform: uppercase; letter-spacing: .4px; }
table.data td { font-family: var(--mono); font-size: 14px; }
table.data td:first-child { font-family: var(--body); font-weight: 700; }
table.data .r { text-align: right; }
table.lb tr.me td { background: color-mix(in srgb, var(--lemon) 45%, transparent); }
table.lb td { font-family: var(--body); }
.verdict { margin-top: 20px; padding: 20px; border: 3px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.verdict.pass { background: color-mix(in srgb, var(--mint) 55%, var(--card)); }
.verdict.fail { background: color-mix(in srgb, var(--pink) 45%, var(--card)); }
.verdict .display { display: block; font-size: 34px; margin-bottom: 8px; }
.review { padding-left: 20px; } .review li { margin: 10px 0; } .review li.no b:first-child { text-decoration: none; }
.review .ok::marker { color: var(--up); } .review .no::marker { color: var(--dn); }
.quiz fieldset { margin: 16px 0; }
.quiz.exam fieldset.card { padding: 18px; }
.qn { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--lemon); color: #1E1B18; border: 2px solid var(--line); font-family: var(--display); font-size: 15px; margin-right: 6px; }
.sticky-submit { position: sticky; bottom: 12px; display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--card); border: 3px solid var(--line); border-radius: 999px; padding: 8px 8px 8px 22px; box-shadow: var(--shadow); z-index: 5; }
.ten-row { display: grid; grid-template-columns: 50px 1fr auto auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 2px dashed color-mix(in srgb, var(--ink) 15%, transparent); }
.ten-row .radio { padding: 8px 12px; }
.exam-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.exam-card { display: flex; gap: 14px; padding: 18px; border: 3px solid var(--line); border-radius: var(--r); background: var(--card); text-decoration: none; box-shadow: var(--shadow); }
.exam-card.open { background: color-mix(in srgb, var(--lemon) 50%, var(--card)); }
.exam-card.locked { opacity: .65; }
.exam-card:hover { color: var(--ink); transform: translate(-2px, -2px); }
.chal-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.chal { display: flex; flex-direction: column; padding: 16px; border: 3px solid var(--line); border-radius: var(--r-sm); background: var(--c); color: #1E1B18; text-decoration: none; transform: rotate(var(--r)); box-shadow: 3px 3px 0 var(--line); transition: transform .2s cubic-bezier(.3,1.6,.5,1); }
.chal:hover { transform: rotate(0) scale(1.04); color: #1E1B18; }
.chal h3 { font-family: var(--display); font-weight: 400; font-size: 20px; }
.chal p { font-size: 14px; flex: 1; }
.chal .muted { color: #4A4239; }
.chal.done { outline: 3px dashed var(--line); outline-offset: 4px; }

/* ---------- charts & replay ---------- */
.chart-box { margin: 14px 0; border: 3px solid var(--line); border-radius: var(--r-sm); background: var(--card); padding: 8px; overflow: hidden; }
.chart { display: block; width: 100%; height: auto; }
.chart .grid { stroke: color-mix(in srgb, var(--ink) 12%, transparent); stroke-dasharray: 3 5; }
.chart .ax { fill: var(--muted); font: 11px var(--mono); }
.chart .wick { stroke-width: 1.4; } .chart .wick.up { stroke: var(--up); } .chart .wick.dn { stroke: var(--dn); }
.chart .body.up { fill: var(--up); } .chart .body.dn { fill: var(--dn); }
.chart .body { stroke: var(--ink); stroke-width: .8; }
.chart .vol { opacity: .35; } .chart .vol.up { fill: var(--up); } .chart .vol.dn { fill: var(--dn); }
.chart .fut { opacity: .45; }
.chart .future-bg { fill: color-mix(in srgb, var(--lemon) 22%, transparent); }
.chart .future-t { font-family: var(--hand); font-size: 15px; fill: var(--ink); }
.chart .cut { stroke: var(--crimson); stroke-width: 2; stroke-dasharray: 6 5; }
.chart .mark-line { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 2 3; }
.chart .mark-dot, .chart .mark-pill { fill: var(--lemon); stroke: #1E1B18; stroke-width: 2; }
.chart .mark-t { font: 700 11px var(--body); text-anchor: middle; fill: #1E1B18; }
.replay-stats { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pill { display: flex; flex-direction: column; padding: 8px 16px; border: 2.5px solid var(--line); border-radius: var(--r-sm); background: var(--card); min-width: 110px; }
.pill span { font-size: 12px; color: var(--muted); text-transform: uppercase; font-family: var(--mono); }
.pill b { font-size: 18px; } .up { color: var(--up); } .dn { color: var(--dn); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.log { columns: 2; font-size: 14px; color: var(--ink2); }

/* ---------- professor page ---------- */
.prof-hero { display: flex; gap: 30px; align-items: center; padding: 28px; border: 3px solid var(--line); border-radius: var(--r); background: linear-gradient(135deg, color-mix(in srgb, var(--c) 55%, var(--card)), var(--card)); box-shadow: var(--shadow-lg); margin-bottom: 22px; }
.prof-hero svg { flex: none; }
.claim { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 10px; }
.claim.unverified { background: color-mix(in srgb, var(--lemon) 30%, var(--card)); }
.checklist { margin: 0; padding-left: 20px; } .checklist li { margin: 6px 0; }
.program { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.program ul, .program ol { padding-left: 20px; margin: 0; } .program li { margin: 6px 0; }
.case { margin: 22px 0; }
.whys { display: grid; grid-template-columns: 200px 1fr; gap: 8px 18px; margin: 10px 0 0; }
.whys dt { font-weight: 700; font-family: var(--hand); font-size: 20px; } .whys dd { margin: 0; }

/* ---------- courses ---------- */
.course-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.course-card { display: flex; gap: 16px; align-items: center; padding: 18px; border: 3px solid var(--line); border-radius: var(--r); background: var(--card); text-decoration: none; box-shadow: var(--shadow); transition: transform .2s; }
.course-card > div { flex: 1; min-width: 0; }
.course-card:hover { transform: translate(-3px, -3px) rotate(-.5deg); color: var(--ink); background: color-mix(in srgb, var(--c) 30%, var(--card)); }
.course-hero { display: flex; gap: 22px; align-items: center; padding: 22px; border: 3px solid var(--line); border-radius: var(--r); background: color-mix(in srgb, var(--c) 45%, var(--card)); margin-bottom: 24px; box-shadow: var(--shadow); }
.lesson { margin: 20px 0; scroll-margin-top: 90px; }
.lesson header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.lesson header h2 { margin: 0; flex: 1; }
.lesson-n { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--crimson); color: #FFF7EC; border: 2.5px solid var(--line); font-family: var(--display); font-size: 20px; }
.key { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; }
.key li { background: var(--lemon); color: #1E1B18; border: 2px solid var(--line); border-radius: 999px; padding: 3px 12px; font-weight: 700; font-size: 14px; transform: rotate(-1deg); }
.check { margin-top: 14px; padding-top: 14px; border-top: 2.5px dashed color-mix(in srgb, var(--ink) 25%, transparent); }
.check .opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.check-out { margin-top: 10px; font-weight: 600; }

/* ---------- leaderboard, hall ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 10px 0 18px; }
.seg { display: inline-flex; border: 2.5px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--card); }
.seg a { padding: 8px 16px; text-decoration: none; font-weight: 700; font-size: 15px; }
.seg a + a { border-left: 2.5px solid var(--line); }
.seg a.on { background: var(--lemon); color: #1E1B18; }
.sel select { min-height: 44px; padding: 8px 12px; border-radius: 999px; }
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: end; margin: 20px 0 10px; }
.pod { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 20px 14px; border: 3px solid var(--line); border-radius: var(--r) var(--r) 8px 8px; background: var(--card); text-decoration: none; box-shadow: var(--shadow); position: relative; }
.pod-1 { order: 2; padding-bottom: 60px; background: var(--lemon); color: #1E1B18; } .pod-2 { order: 1; padding-bottom: 36px; background: var(--sky); color: #1E1B18; } .pod-3 { order: 3; background: var(--pink); color: #1E1B18; }
.pod em { font-style: normal; font-size: 34px; position: absolute; top: -24px; }
.pod b { font-family: var(--display); font-weight: 400; font-size: 20px; text-align: center; overflow-wrap: anywhere; }
.pod:hover { color: #1E1B18; transform: translateY(-4px); }
.war-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; margin: 8px 0 12px; }
.vs > div { background: var(--c); color: #1E1B18; border: 2.5px solid var(--line); border-radius: var(--r-sm); padding: 10px; }
.vs > div span { display: block; font-size: 13px; }
.vs em { font-family: var(--display); font-style: normal; font-size: 22px; }
.hall-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 26px; }
.deg-count { list-style: none; padding: 0; margin: 0; } .deg-count li { display: flex; justify-content: space-between; padding: 5px 0; }
.dip-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.dip.locked { opacity: .6; } .dip.got { background: color-mix(in srgb, var(--lemon) 35%, var(--card)); }
.dip-seal { font-size: 44px; }
.case-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.case-card { text-decoration: none; }

/* ---------- token, docs ---------- */
.warn-card { background: color-mix(in srgb, var(--lemon) 45%, var(--card)); margin: 18px 0 26px; }
.util-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.util { transform: rotate(var(--r)); }
.util-n { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--crimson); color: #FFF7EC; border: 2.5px solid var(--line); font-family: var(--display); margin-bottom: 8px; }
.docs { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 40px; align-items: start; }
.docs > * { min-width: 0; }
.docs-nav { position: sticky; top: 90px; display: grid; gap: 8px; }
.docs-nav nav { display: grid; gap: 2px; }
.docs-nav a { text-decoration: none; padding: 6px 12px; border-radius: 10px; font-weight: 600; }
.docs-nav a.on { background: var(--lemon); color: #1E1B18; border: 2px solid var(--line); }
.toc a { font-size: 14px; font-weight: 500; padding: 3px 12px; }
.prose { max-width: 72ch; }
.prose h1 { font-size: clamp(36px, 6vw, 60px); }
.prose h2 { font-family: var(--display); font-weight: 400; font-size: clamp(26px, 4vw, 34px); margin-top: 1.4em; }
.prose h3 { margin-top: 1.4em; font-size: 21px; }
.prose h4 { margin-top: 1.3em; font-size: 19px; }
.prose code { font-family: var(--mono); font-size: .9em; background: var(--paper2); padding: 1px 6px; border-radius: 6px; border: 1.5px solid color-mix(in srgb, var(--ink) 20%, transparent); }
.prose pre { background: var(--ink); color: var(--paper); padding: 16px; border-radius: var(--r-sm); overflow-x: auto; }
.prose pre code { background: none; border: 0; color: inherit; }
.prose blockquote { margin: 1em 0; padding: 12px 18px; border-left: 6px solid var(--crimson); background: var(--paper2); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.prose li { margin: 4px 0; }

/* ---------- misc ---------- */
.empty { text-align: center; padding: 50px 20px; }
.empty .sticker { font-size: 40px; }
.loading { padding: 30px 0; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.dots { display: inline-flex; gap: 6px; } .dots i { width: 12px; height: 12px; border-radius: 50%; background: var(--crimson); border: 2px solid var(--line); animation: dot 1s ease-in-out infinite; } .dots i:nth-child(2) { animation-delay: .15s; background: var(--lemon); } .dots i:nth-child(3) { animation-delay: .3s; background: var(--mint); }
@keyframes dot { 50% { transform: translateY(-10px); } }
.boot-loader { min-height: 70vh; display: grid; place-items: center; }
.page-error { text-align: center; }
#app { outline: none; min-height: 70vh; }
#toasts { position: fixed; right: 16px; bottom: 16px; display: grid; gap: 10px; z-index: 90; max-width: calc(100vw - 32px); }
.toast { background: var(--card); color: var(--ink); border: 3px solid var(--line); border-radius: var(--r-sm); padding: 12px 18px; font-weight: 700; box-shadow: var(--shadow); animation: pop .4s cubic-bezier(.3,1.6,.5,1); }
.toast-xp { background: var(--lemon); color: #1E1B18; } .toast-error { background: var(--pink); color: #1E1B18; }
.toast.out { opacity: 0; transform: translateY(10px); transition: .4s; }
@keyframes pop { from { transform: scale(.6) rotate(-6deg); opacity: 0; } }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 95; overflow: hidden; }
.confetti i { position: absolute; top: -20px; width: 12px; height: 16px; border: 2px solid #1E1B18; border-radius: 4px; animation: fall 1.9s cubic-bezier(.2,.6,.4,1) forwards; }
@keyframes fall { to { transform: translate(var(--dx), 105vh) rotate(var(--r)); } }
.foot { border-top: 3px solid var(--line); background: var(--paper2); margin-top: 60px; }
.foot-in { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 30px; padding: 30px 24px 40px; }
.foot-tag { margin: 0; color: var(--muted); }
.foot-logo { font-size: 40px; margin: 0; color: var(--crimson); }
.foot nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 20px; align-content: start; }
.foot nav a { text-decoration: none; font-weight: 600; }
.disclaimer { grid-column: 1 / -1; border-top: 2px dashed color-mix(in srgb, var(--ink) 20%, transparent); padding-top: 16px; margin: 0; }

/* ---------- buttons and surfaces, night campus ---------- */
.btn { border: 0; background: var(--lemon); color: #161513; box-shadow: none; font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: .2px; transition: transform .35s var(--spring), background .2s; }
.btn:hover { color: #161513; transform: rotate(-3deg) scale(1.05); box-shadow: none; background: #FFF27A; }
.btn:active { transform: scale(.94); box-shadow: none; }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2.5px var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
:root[data-theme="dark"] .btn-ghost:hover { color: #161513; }
.btn-light { background: #F2EDE4; } .btn-warn { background: var(--dn); color: #fff; }
.btn-big { min-height: 62px; padding: 12px 34px; font-size: 22px; }
.btn-sm { min-height: 40px; padding: 6px 18px; font-size: 16px; }
.card, .step a, .prof-card, .pain, .rung, .faq details, .opt, .demo-out, .toast, .vis-card { box-shadow: none; }
:root[data-theme="dark"] .card, :root[data-theme="dark"] .rung, :root[data-theme="dark"] .faq details, :root[data-theme="dark"] .vis-card { border-width: 2px; }
.sticker { font-family: var(--display); font-weight: 700; font-size: 18px; border-width: 0; padding: 5px 16px; transform: rotate(-2deg); }
.card h3, .card .h3 { font-family: var(--display); font-weight: 700; font-size: 24px; }
.opt { border-width: 2px; }
:root[data-theme="dark"] .opt:hover:not(:disabled) { background: var(--lemon); }
.blob { transition: transform .35s var(--spring); overflow: visible; }
.blob .cap { animation: cap 3.4s ease-in-out infinite; transform-origin: 50% 30%; }
.wiggle { display: inline-block; white-space: nowrap; }
.wiggle span { display: inline-block; animation: wiggle 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * .11s); transform-origin: 50% 80%; }
@keyframes wiggle { 0%, 100% { transform: translateY(0) rotate(0) } 25% { transform: translateY(-5px) rotate(-3deg) } 50% { transform: translateY(0) rotate(0) } 75% { transform: translateY(2px) rotate(2deg) } }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-2deg) } 50% { transform: translateY(-14px) rotate(2deg) } }
@keyframes cap { 0%, 100% { transform: rotate(0) } 50% { transform: rotate(-6deg) translateY(-2px) } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { transform: scale(.82) rotate(20deg); } }

/* ---------- characters ---------- */
svg.char { overflow: visible; filter: url(#boil); }
.char .ch-face { transform: translate(var(--lx, 0), var(--ly, 0)); transition: transform .25s ease-out; }
.char .ch-body { animation: squash 2.8s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.char .ch-arm { transform-box: fill-box; }
.char .ch-arm-l { transform-origin: 100% 0; animation: swing 2.8s ease-in-out infinite; }
.char .ch-arm-r { transform-origin: 0 100%; animation: swing 2.8s ease-in-out infinite reverse; }
.char .ch-arm-r.wave { transform-origin: 0 100%; animation: wave 1.1s ease-in-out infinite; }
.char .cap { animation: cap 3.4s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
a:hover > svg.char .ch-body, a:hover svg.char .ch-body, .cast:hover svg.char { animation: hop .6s var(--spring); }
@keyframes squash { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.03, .96); } }
@keyframes swing { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(8deg); } }
@keyframes wave { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-22deg); } }
@keyframes hop { 0% { transform: translateY(0); } 40% { transform: translateY(-14px) scale(1.04, .96); } 100% { transform: translateY(0); } }

/* ---------- home: hero ---------- */
.h-hero { position: relative; min-height: calc(100svh - 92px); display: flex; flex-direction: column; padding: 2vh 0 40px; overflow: hidden; }
.h-kicker { text-align: center; font-family: var(--hand); font-size: clamp(18px, 2vw, 24px); color: var(--muted); margin: 0 16px 1vh; position: relative; z-index: 2; }
.spark { position: absolute; color: #ECE6DA; animation: pulse 3.2s ease-in-out infinite; pointer-events: none; z-index: 3; }
.burst { position: absolute; color: var(--orange); animation: spin 14s linear infinite; pointer-events: none; z-index: 3; }
:root:not([data-theme="dark"]) .spark { color: var(--ink); }
.h-spark { left: 46%; top: 4%; } .h-spark2 { left: 12%; top: 58%; animation-delay: -1.2s; } .h-burst { right: 6%; top: 2%; color: #E89BB0; animation-duration: 18s; }
.deco { position: absolute; pointer-events: none; z-index: 3; }
.crown { color: #8C6CF0; left: 11%; top: 2%; rotate: 4deg; animation: bob 3s ease-in-out infinite; }
.flower { left: 60%; top: 1%; animation: spin 22s linear infinite; }
.flower .flower-star { transform-origin: 50px 50px; animation: spin 6s linear infinite reverse; }
.h-band { position: relative; margin: clamp(120px, 15vw, 190px) -3vw 0; height: clamp(220px, 32vw, 470px); display: flex; align-items: center; }
.h-band-bg { position: absolute; inset: 0; width: 100%; height: 100%; filter: url(#rough); }
.h-band-bg path { fill: var(--olive); }
.h-band-text { position: relative; margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(100px, 21vw, 340px); line-height: .8; color: #12110F; white-space: nowrap; padding-left: 8vw; will-change: transform; letter-spacing: -2px; }
.h-band-text span { display: inline-block; }
.h-band-label { position: absolute; left: 9vw; bottom: 9%; margin: 0; font-family: var(--hand); font-weight: 700; font-size: clamp(16px, 1.8vw, 26px); color: #12110F; }
.h-cast { position: absolute; left: 0; right: 0; bottom: calc(100% - 16px); display: flex; justify-content: center; gap: clamp(4px, 4vw, 70px); pointer-events: none; }
.cast { pointer-events: auto; position: relative; display: block; text-decoration: none; animation: float 5s ease-in-out infinite; animation-delay: calc(var(--i) * -1.3s); }
.cast:nth-child(even) { margin-bottom: -26px; }
.cast-name { position: absolute; left: 50%; top: -6px; transform: translateX(-50%) rotate(-4deg) scale(.8); opacity: 0; background: #F2EDE4; color: #161513; border-radius: 999px; padding: 3px 12px; font-family: var(--display); font-weight: 700; font-size: 15px; white-space: nowrap; transition: .35s var(--spring); }
.cast:hover .cast-name { opacity: 1; transform: translateX(-50%) rotate(-4deg) scale(1); top: -30px; }
.h-under { position: relative; z-index: 2; text-align: center; margin-top: 30px; }
.h-tag { font-family: var(--display); font-weight: 800; font-size: clamp(30px, 4.4vw, 60px); line-height: 1.05; margin: 0 0 10px; }
.h-tag em { font-style: normal; color: var(--olive); }
:root:not([data-theme="dark"]) .h-tag em { color: #8C861E; }
.h-lede { font-family: var(--display); font-weight: 500; color: var(--ink2); font-size: clamp(17px, 1.7vw, 23px); line-height: 1.4; max-width: 680px; margin: 0 auto; }
.hero-cta { justify-content: center; margin-top: 24px; }
.h-scroll { position: absolute; right: 26px; bottom: 26px; display: grid; justify-items: center; gap: 6px; font-family: var(--hand); color: var(--muted); }
.h-scroll i { width: 2px; height: 46px; background: linear-gradient(var(--muted) 50%, transparent 0) 0 0 / 2px 12px; animation: dash 1s linear infinite; }
@keyframes dash { to { background-position: 0 12px; } }

/* ---------- home: wordmark and shape-badges ---------- */
.h-hero { min-height: 0; padding: 4vh 0 10px; text-align: center; overflow: visible; }
.h-hero :is(.deco, .burst, .spark) { z-index: 1; } .h-hero .crown { top: 0; } .h-hero .flower { top: 0; left: 58%; width: 96px; } .h-hero .h-burst { top: 0; right: 4%; width: 104px; }
.wordmark { position: relative; z-index: 2; margin: 2vh 0 0; padding: 0 2vw; font-family: var(--display); font-weight: 900; font-size: clamp(40px, 10.6vw, 200px); line-height: .92; letter-spacing: -1px; color: var(--ink); white-space: nowrap; }
.wordmark .wl { display: inline-block; font-style: normal; transition: transform .5s var(--spring), color .2s; }
.wordmark .wl:hover { transform: translateY(-8%) scale(1.08, .92) rotate(-5deg); color: var(--lemon); }
.wordmark.wiggling .wl { animation: wiggle 1.3s ease-in-out infinite; animation-delay: calc(var(--i) * .08s); }
.h-kicker { margin: 10px 16px 0; }
.wiggle-btn { border-color: var(--ink); color: var(--ink); }
.wiggle-btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.badges { position: relative; padding: 150px clamp(12px, 1.2vw, 20px) 40px; overflow-x: clip; }
.badges .h-cast { position: absolute; top: 18px; left: 0; right: 0; bottom: auto; z-index: 3; }
.badge { position: relative; display: grid; place-items: center; height: clamp(250px, 30vw, 440px); margin: 0 0 clamp(50px, 6vw, 96px); text-decoration: none; color: #0D0C0B; transform: translateY(var(--jy, 0)) rotate(var(--jr, 0deg)); will-change: transform; }
.badge:hover { color: #0D0C0B; }
.badge-bg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: url(#wobble); }
.badge .shape { fill: var(--c); }
.badge-in { position: relative; display: grid; justify-items: center; gap: 4px; padding: 0 6vw; }
.badge-word { font-family: var(--display); font-weight: 900; font-size: clamp(56px, 10vw, 168px); line-height: .9; transform-origin: 50% 80%; }
.badge-sub { font-family: var(--display); font-weight: 600; font-size: clamp(14px, 1.35vw, 20px); max-width: 40ch; }
.badge.boing .badge-word { animation: boing .65s var(--spring); }
@keyframes boing { 0% { transform: scale(1); } 30% { transform: scale(1.12, .86); } 60% { transform: scale(.94, 1.08); } 100% { transform: scale(1); } }
.b-cloud .badge-bg { animation: sway 5s ease-in-out infinite; transform-origin: 50% 50%; }
.b-cloud:hover .badge-bg { animation-duration: 1.6s; }
@keyframes sway { 0%, 100% { transform: rotate(-.6deg) scale(1); } 50% { transform: rotate(.6deg) scale(1.01, .99); } }
.b-drip { height: clamp(330px, 40vw, 600px); }
.b-drip .badge-in { margin-top: -10%; }
.b-drip .badge-bg { transform-origin: 50% 0; transition: transform .6s var(--spring); }
.b-drip:hover .badge-bg { transform: scaleY(1.06); }
.b-drip .eye { animation: look 4.5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes look { 0%, 90%, 100% { transform: scaleY(1); } 94% { transform: scaleY(.08); } }
.b-cup .badge-bg { transform-origin: 50% 100%; transition: transform .6s var(--spring); }
.b-cup:hover .badge-bg { transform: rotate(-4deg); }
.cdrip { stroke-dasharray: 1000; animation: cdrip 3.2s ease-in-out infinite; animation-delay: var(--d); }
@keyframes cdrip { 0%, 100% { stroke-dashoffset: 120; } 50% { stroke-dashoffset: 0; } }
.b-blob .stripes { animation: slide 6s linear infinite; }
.b-blob:hover .stripes { animation-duration: 1.5s; }
@keyframes slide { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(26px); } }
.badges .cast { animation: float 5s ease-in-out infinite; }

/* ---------- home: spec table ---------- */
.h-spec { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; align-items: center; padding-top: 70px; padding-bottom: 70px; overflow: hidden; }
.h-spec-word { overflow: visible; }
.h-spec-word span { display: inline-block; font-family: var(--display); font-weight: 900; font-size: clamp(110px, 17vw, 290px); line-height: .8; color: color-mix(in srgb, var(--ink) 62%, var(--paper)); white-space: nowrap; will-change: transform; }
.spec { margin: 0; }
.spec-row { position: relative; display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; padding: 16px 0 18px; }
.spec dt { font-family: var(--display); font-weight: 500; font-size: 22px; color: var(--muted); }
.spec dd { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(20px, 2vw, 26px); line-height: 1.2; }
.rule { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 8px; }
.rule path { fill: none; stroke: color-mix(in srgb, var(--ink) 35%, transparent); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--draw, 0)); }

/* ---------- home: words ---------- */
.h-words { position: relative; padding-top: 80px; padding-bottom: 120px; }
.words-big { font-family: var(--display); font-weight: 800; font-size: clamp(32px, 4.6vw, 70px); line-height: 1.08; margin: 0; max-width: 20ch; }
.words-big .w { opacity: .14; transition: opacity .35s, color .35s; }
.words-big .w.lit { opacity: 1; }
.pain-cloud { display: flex; flex-wrap: wrap; gap: 14px 18px; margin-top: 44px; max-width: 900px; }
.pain-pill { display: inline-block; background: var(--c); color: #161513; border-radius: 999px; padding: 10px 22px; font-family: var(--display); font-weight: 700; font-size: clamp(17px, 1.6vw, 22px); rotate: var(--r); will-change: transform; }

/* ---------- home: horizontal faculty ---------- */
.hs { position: relative; }
.hs-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 24px; }
.hs-head h2 { margin: 0 0 6px; }
.hs-head p { margin: 0; }
.hs-track { display: flex; gap: 30px; padding: 0 6vw; width: max-content; will-change: transform; }
.pcard { position: relative; flex: none; width: clamp(290px, 27vw, 380px); min-height: min(60svh, 540px); display: flex; flex-direction: column; gap: 6px; padding: 26px 26px 24px; background: var(--c); color: #161513; text-decoration: none; border-radius: 42px 38px 46px 36px / 36px 46px 38px 44px; rotate: var(--r); transition: rotate .4s var(--spring), transform .4s var(--spring); }
.pcard:hover { color: #161513; rotate: 0deg; transform: translateY(-8px); }
.pcard-n { font-family: var(--display); font-weight: 800; font-size: 18px; opacity: .55; }
.pcard-art { display: grid; place-items: center; margin: -6px 0 4px; }
.pcard-art svg { width: min(190px, 60%); height: auto; }
.pcard-fac { font-family: var(--hand); font-weight: 700; font-size: 19px; opacity: .7; }
.pcard-name { font-family: var(--display); font-weight: 800; font-size: clamp(28px, 2.6vw, 36px); line-height: 1; }
.pcard-title { font-weight: 600; font-size: 15px; opacity: .8; }
.pcard-say { font-family: var(--hand); font-size: 21px; line-height: 1.15; margin-top: auto; }
.pcard .tag { align-self: flex-start; white-space: normal; border: 0; background: #161513; color: var(--lemon); }
.pcard-vis { background: var(--card); color: var(--ink); justify-content: center; }
.pcard-vis:hover { color: var(--ink); }
.vis-cloud { display: flex; flex-wrap: wrap; gap: 4px; margin: 10px 0; }
.hs-progress { position: absolute; left: 6vw; right: 6vw; bottom: 34px; height: 4px; border-radius: 4px; background: color-mix(in srgb, var(--ink) 14%, transparent); overflow: hidden; }
.hs-progress i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--lemon); border-radius: 4px; }

/* ---------- home: journey ---------- */
.journey { position: relative; height: 430svh; }
.jr-sticky { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.jr-head h2 { margin: 0; }
.jr-stage { position: relative; width: min(1220px, 94vw); aspect-ratio: 1220 / 560; margin: 2vh auto 0; max-height: 70svh; }
.jr-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.jr-ghost { fill: none; stroke: color-mix(in srgb, var(--ink) 22%, transparent); stroke-width: 4; stroke-dasharray: 2 14; stroke-linecap: round; }
.jr-path { fill: none; stroke: var(--olive); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: url(#wobble); }
.jr-stop { position: absolute; transform: translate(-50%, -50%); text-decoration: none; display: grid; justify-items: center; z-index: 2; }
.jr-stop i { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--card); color: var(--muted); font-style: normal; font-family: var(--display); font-weight: 800; font-size: 22px; box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--ink) 25%, transparent); transition: .45s var(--spring); }
.jr-stop span { position: absolute; top: calc(100% + 8px); width: 210px; text-align: center; opacity: .25; transform: translateY(8px) scale(.95); transition: .5s var(--spring); }
.jr-stop.below span { top: auto; bottom: calc(100% + 8px); }
.jr-stop b { display: block; font-family: var(--display); font-weight: 800; font-size: 24px; line-height: 1.05; }
.jr-stop small { display: block; color: var(--muted); font-size: 14px; line-height: 1.3; margin-top: 4px; }
.jr-stop.on i { background: var(--lemon); color: #161513; box-shadow: none; transform: scale(1.15) rotate(-8deg); }
.jr-stop.on span { opacity: 1; transform: none; }
.jr-walker { position: absolute; z-index: 3; transform: translate(-50%, -92%); pointer-events: none; }
.jr-walker svg { display: block; transition: transform .3s; animation: hop .5s ease-in-out infinite; }
.jr-walker.flip svg { transform: scaleX(-1); }

/* ---------- home: letter lab ---------- */
.lab { padding-top: 90px; padding-bottom: 60px; }
.lab-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.lab-tile { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 18px 20px 22px; border-radius: 30px; background: var(--card); text-decoration: none; overflow: hidden; min-height: 300px; transition: background .3s, transform .4s var(--spring); }
:root:not([data-theme="dark"]) .lab-tile { box-shadow: inset 0 0 0 2px var(--line); }
.lab-letter { font-family: var(--display); font-weight: 900; font-size: clamp(110px, 11vw, 170px); line-height: .9; color: var(--c); transition: transform .5s var(--spring), color .3s; transform-origin: 30% 80%; }
.lab-name { font-family: var(--display); font-weight: 800; font-size: 24px; line-height: 1.05; margin-top: auto; }
.lab-motto { font-family: var(--hand); font-size: 19px; color: var(--muted); line-height: 1.15; }
.lab-prof { font-weight: 700; font-size: 13px; color: var(--muted); }
.lab-tile:hover { background: var(--c); color: #161513; transform: rotate(-1.5deg); }
.lab-tile:hover .lab-letter { color: #161513; transform: scale(1.12, .9) rotate(-8deg); }
.lab-tile:hover .lab-motto, .lab-tile:hover .lab-prof { color: #161513; }

/* ---------- home: quiz band ---------- */
.quiz-band { position: relative; margin: 40px 0; padding: clamp(60px, 8vw, 110px) 2vw; color: #161513; }
.cloud-bg { position: absolute; inset: 0; width: 100%; height: 100%; filter: url(#wobble); }
.cloud-bg g { fill: #EFE472; }
.quiz-band .wrap { position: relative; }
.quiz-band h2 { margin-top: 0; }
.quiz-band .opt { background: #F2EDE4; color: #161513; border-color: #161513; }
.quiz-band .demo-out { background: #F2EDE4; color: #161513; border-color: #161513; }
.quiz-band .demo-out a { color: #161513; }

/* ---------- home: diplomas stack ---------- */
.stack { display: grid; gap: 0; }
.stack-card { position: sticky; top: calc(110px + var(--i) * 28px); display: grid; grid-template-columns: 110px minmax(0, 1fr) 130px; gap: 24px; align-items: center; min-height: 300px; margin-bottom: 26vh; padding: 30px 34px; border-radius: 34px; background: #F4EFE4; color: #161513; transform: scale(calc(1 - var(--k, 0) * .05)); filter: brightness(calc(1 - var(--k, 0) * .35)); transform-origin: 50% 0; box-shadow: 0 -10px 40px rgba(0,0,0,.25); }
.stack-card:last-child { margin-bottom: 0; }
.stack-card:nth-child(2) { background: #E9F0D2; } .stack-card:nth-child(3) { background: #F6E3D2; } .stack-card:nth-child(4) { background: var(--lemon); }
.stack-card h3 { font-size: clamp(32px, 3.6vw, 52px); margin: 0; }
.dip-school { font-family: var(--hand); font-weight: 700; font-size: 20px; margin: 0; opacity: .7; }
.dip-tier { font-family: var(--display); font-weight: 600; font-size: 20px; margin: 0 0 8px; opacity: .7; }
.dip-list { font-size: 14px; opacity: .65; margin: 0; }
.dip-seal { position: relative; display: grid; place-items: center; color: var(--crimson); }
.dip-seal .burst { position: static; color: var(--crimson); animation-duration: 24s; }
.dip-seal b { position: absolute; font-family: var(--display); font-weight: 900; font-size: 40px; color: #F4EFE4; }
.dip-char { justify-self: center; }

/* ---------- home: coin ---------- */
.coin-sec { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 50px; align-items: center; }
.coin { perspective: 900px; display: grid; place-items: center; }
.coin-in { position: relative; width: clamp(200px, 22vw, 300px); aspect-ratio: 1; transform-style: preserve-3d; animation: coin 6s linear infinite; }
.coin:hover .coin-in { animation-duration: 1.2s; }
.coin-face { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFF6A8, var(--lemon) 45%, #C9B23A); box-shadow: inset 0 0 0 10px #D8C24A, inset 0 0 0 14px #161513; display: grid; place-items: center; backface-visibility: hidden; font-family: var(--display); font-weight: 900; font-size: clamp(26px, 3vw, 40px); color: #161513; }
.coin-face.back { transform: rotateY(180deg); }
@keyframes coin { to { transform: rotateY(360deg); } }

/* ---------- home: outro, footer ---------- */
.outro { position: relative; text-align: center; padding: 80px 16px 40px; }
.outro-cast { display: flex; justify-content: center; gap: clamp(0px, 3vw, 40px); margin-bottom: -8px; }
.outro-cast span { animation: float 4.6s ease-in-out infinite; animation-delay: calc(var(--i) * -1.1s); }
.outro-title { font-size: clamp(46px, 8vw, 120px); margin: 0 0 28px; }
.foot { border-top: 0; background: var(--paper2); margin-top: 80px; border-radius: 40px 40px 0 0; overflow: hidden; }
.foot-big { overflow: hidden; padding: 30px 0 0; }
.foot-big span { display: inline-block; white-space: nowrap; font-family: var(--display); font-weight: 900; font-size: clamp(70px, 11vw, 170px); line-height: 1; color: var(--olive); will-change: transform; }
.foot-logo { font-family: var(--display); font-weight: 800; color: var(--ink); }
.foot nav a { font-family: var(--display); font-weight: 700; font-size: 19px; }
.faq details { border-width: 2px; border-radius: 22px; }
.faq summary { font-family: var(--display); font-weight: 700; font-size: 22px; }
.live-grid .card { border-radius: 28px; }

/* ---------- wiggle letters, coin, recess ---------- */
.h-band-text .wl { display: inline-block; font-style: normal; transition: transform .5s var(--spring); }
.h-band-text .wl:hover { transform: translateY(-6%) scale(1.06, .94) rotate(-4deg); }
.h-band-text.wiggling .wl { animation: wiggle 1.4s ease-in-out infinite; animation-delay: calc(var(--i) * .08s); }
.wiggle-btn { margin-left: 10px; vertical-align: middle; border: 2px solid var(--ink); background: transparent; color: var(--ink); border-radius: 999px; padding: 1px 12px; font-family: var(--display); font-weight: 700; font-size: 15px; }
.wiggle-btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.coin { position: relative; display: grid; justify-items: center; gap: 10px; }
.coin-btn { position: relative; border: 0; background: none; padding: 0; border-radius: 50%; }
.coin-btn.poked .coin-in { animation: poke .7s var(--spring), coin 6s linear .7s infinite; }
@keyframes poke { 0% { transform: scale(1); } 30% { transform: scale(1.15, .8) rotateY(40deg); } 60% { transform: scale(.92, 1.08) rotateY(-30deg); } 100% { transform: scale(1); } }
.coin-say { position: absolute; top: -18px; right: -30px; z-index: 2; background: #F2EDE4; color: #161513; border-radius: 999px; padding: 4px 14px; font-family: var(--display); font-weight: 700; font-size: 17px; white-space: nowrap; opacity: 0; transform: scale(.6) rotate(8deg); }
.coin-btn.poked .coin-say { animation: say 1.6s var(--spring) forwards; }
@keyframes say { 15% { opacity: 1; transform: scale(1) rotate(6deg); } 80% { opacity: 1; transform: scale(1) rotate(6deg); } 100% { opacity: 0; transform: translateY(-10px) rotate(6deg); } }
.coin-ps { color: var(--muted); margin: 0; }
.recess-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 18px; }
.recess-head h2 { margin-top: 0; }
.recess-score { display: flex; gap: 18px; font-family: var(--display); font-weight: 700; font-size: 20px; }
.recess-score b { color: var(--lemon); }
:root:not([data-theme="dark"]) .recess-score b { color: var(--crimson); }
[data-lives] { color: var(--pink); letter-spacing: 2px; }
.arena { position: relative; height: clamp(360px, 52vh, 520px); border-radius: 34px; background: radial-gradient(circle at 50% 120%, color-mix(in srgb, var(--olive) 30%, transparent), transparent 60%), var(--card); overflow: hidden; touch-action: none; user-select: none; outline: none; }
.arena:focus-visible { box-shadow: inset 0 0 0 3px var(--lemon); }
.arena.ouch { animation: shake .3s; } .arena.yum .player svg { transform: scale(1.12, .9); }
@keyframes shake { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
.player { position: absolute; bottom: 8px; transform: translateX(-50%); pointer-events: none; }
.player svg { display: block; transition: transform .15s; }
.drop { position: absolute; top: 0; pointer-events: none; will-change: transform; }
.arena-msg { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center; background: color-mix(in srgb, var(--card) 70%, transparent); }
.arena-msg[hidden] { display: none; }
.arena-msg b { font-size: clamp(40px, 6vw, 70px); }
.arena-msg span { color: var(--muted); }

.prof-say-wrap { position: relative; flex: none; }
.prof-say { position: absolute; top: -8px; right: -40px; background: #F2EDE4; color: #161513; border-radius: 18px 18px 18px 4px; padding: 6px 14px; font-family: var(--display); font-weight: 700; font-size: 18px; white-space: nowrap; rotate: 5deg; animation: bob 3s ease-in-out infinite; }

@media (max-width: 960px) {
  .lab-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .h-spec, .coin-sec { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .spec-row { grid-template-columns: 110px minmax(0, 1fr); gap: 12px; }
  .h-spec-word { order: -1; }
  .stack-card { grid-template-columns: 80px minmax(0, 1fr); } .dip-char { display: none; }
}
@media (max-width: 759px) {
  #app { padding-top: 78px; }
  .menu-btn { width: 52px; height: 52px; }
  .top-r .icon-btn { width: 40px; height: 40px; }
  .logo { font-size: 22px; }
  .h-hero { min-height: auto; }
  .badges { padding-top: 96px; } .badge { height: 230px; margin-bottom: 40px; } .b-drip { height: 330px; } .badge-in { padding: 0 20px; }
  .h-band-text { font-size: 30vw; padding-left: 4vw; }
  .h-cast svg { width: 82px; height: auto; }
  .h-cast { gap: 0; bottom: calc(100% - 10px); }
  .cast-name { display: none; } .badge-word { font-size: clamp(36px, 11.5vw, 64px); } .badge-sub { font-size: 13px; }
  .h-hero .deco { height: auto; } .h-hero .crown { width: 40px; top: 0; left: 6%; } .h-hero .flower { display: none; } .h-hero .h-burst { display: none; } .h-hero .h-spark { width: 30px; top: 8px; }
  .cast:nth-child(even) { margin-bottom: -14px; }
  .h-burst { width: 70px; right: 2%; top: 4px; } .h-spark { width: 50px; left: 48%; } .h-spark2 { display: none; } .crown { width: 64px; left: 4%; } .flower { width: 64px; left: 68%; top: 30px; }
  .top-r { gap: 2px; } #sound { display: none; } .acct-xp { display: none; } #account .btn-sm { padding: 6px 12px; min-height: 36px; font-size: 14px; } .menu-btn { width: 46px; height: 46px; } .logo { font-size: 19px; }
  .h-scroll { display: none; }
  .hs { height: auto !important; }
  .hs-sticky { position: static; height: auto; padding: 50px 0 30px; }
  .hs-track { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; padding: 10px 16px 24px; transform: none !important; }
  .pcard { scroll-snap-align: center; width: 80vw; min-height: 0; }
  .hs-progress { display: none; }
  .journey { height: 520svh; }
  .jr-stage { aspect-ratio: 400 / 900; width: auto; height: 72svh; max-height: none; }
  .jr-stop i { width: 34px; height: 34px; font-size: 17px; }
  .jr-stop span { width: 150px; } .jr-stop b { font-size: 18px; } .jr-stop small { font-size: 12px; }
  .jr-walker svg { width: 64px; height: auto; }
  .lab-tile { min-height: 220px; padding: 14px; } .lab-name { font-size: 19px; } .lab-motto { font-size: 16px; }
  .stack-card { grid-template-columns: 1fr; padding: 24px; min-height: 0; margin-bottom: 14vh; top: calc(90px + var(--i) * 16px); } .dip-seal { display: none; }
  .outro-cast svg { width: 70px; height: auto; }
  .side-panel { width: 100%; padding: 92px 24px 30px 48px; border-radius: 0; } .side .nav a.on::before { left: -28px; width: 14px; height: 14px; } .side-foot a { font-size: 18px; }
}
@media (min-width: 760px) and (max-width: 1100px) { .side-panel { width: min(540px, 70vw); } }
@media (prefers-reduced-motion: reduce) {
  svg.char { filter: none; }
  .words-big .w { opacity: 1; }
  .journey { height: auto; } .jr-sticky { position: static; height: auto; padding: 40px 0; }
}

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .chal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .util-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .pain-grid, .fac-grid, .prof-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps, .task-grid, .hall-grid, .dip-grid, .case-grid, .program { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .live-grid { grid-template-columns: 1fr 1fr; } .live-grid > :first-child { grid-column: 1 / -1; }
  .exam-demo { grid-template-columns: 1fr; gap: 20px; }
  .campus-head { grid-template-columns: 1fr; }
  .campus-grid { grid-template-columns: 1fr 1fr; } .span2, .span3 { grid-column: 1 / -1; }
  .pick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vis-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prof-grid, .course-grid { grid-template-columns: 1fr; }
  .docs { grid-template-columns: 1fr; } .docs-nav { position: static; }
  .claim { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .wrap, .wrap.sec { padding-left: 16px; padding-right: 16px; }
  .sec, .wrap.sec { padding-top: 36px; padding-bottom: 36px; }
  .top-in { padding: 10px 12px; gap: 6px; }
  .acct-name { display: none; }
  .hero { padding-top: 24px; }
  .hero-title { font-size: 23vw; } .hero-title .wiggle span { text-shadow: 3px 3px 0 var(--ink); }
  .hero-stats { gap: 8px; } .stat { padding: 10px 4px; } .stat b { font-size: 26px; } .stat span { font-size: 12px; line-height: 1.2; display: block; }
  .hero-profs { gap: 4px; margin-top: 26px; } .hero-profs svg { width: 74px; height: 74px; } .float-prof:nth-child(even) { margin-top: 18px; } .bubble-note { display: none; }
  .hero-bubbles i:nth-child(n+5) { display: none; }
  .pain { padding: 12px 14px; }
  .pain-grid, .fac-grid, .prof-row, .steps, .task-grid, .hall-grid, .dip-grid, .case-grid, .program, .two, .exam-grid, .war-grid, .live-grid, .campus-grid, .vis-grid { grid-template-columns: 1fr; }
  .chal-grid, .util-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pick-grid, .opts.grid2, .check .opts { grid-template-columns: 1fr; }
  .rung { padding: 14px; gap: 12px; } .rung:nth-child(n) { margin-left: 0; } .rung-n { width: 44px; height: 44px; font-size: 22px; }
  .prof-hero, .course-hero, .prof-card.big { flex-direction: column; align-items: flex-start; }
  .prof-hero { padding: 18px; } .prof-hero svg { width: 120px; height: 120px; }
  .id-body { flex-direction: column; align-items: flex-start; } .id-body svg { width: 84px; height: 84px; }
  .id-top .display { font-size: 18px; }
  .whys { grid-template-columns: 1fr; } .whys dt { margin-top: 8px; }
  .podium { gap: 8px; } .pod { padding: 14px 6px; } .pod-1 { padding-bottom: 34px; } .pod svg { width: 56px; height: 56px; } .pod b { font-size: 15px; }
  .vs { grid-template-columns: 1fr; } .vs em { text-align: center; }
  .ten-row { grid-template-columns: 40px 1fr; } .ten-row .radio { grid-column: span 1; }
  .task-head { flex-direction: column; align-items: flex-start; }
  .sticky-submit { border-radius: var(--r-sm); }
  .foot-in { padding: 24px 16px 32px; }
  .log { columns: 1; }
  .seg a { padding: 8px 12px; font-size: 14px; }
  .who span { max-width: 120px; }
  .card { padding: 16px; }
  .todo a { display: grid; grid-template-columns: 44px minmax(0, 1fr); }
  .todo .tag { grid-column: 2; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* limbs: dark ink on light cards, light ink on the night page */
.char .limb { stroke: var(--limb, #1E1B18); } .char .shoe { fill: var(--limb, #1E1B18); }
:root[data-theme="dark"] main { --limb: #F4F2EA; }
:root[data-theme="dark"] :is(.pcard, .stack-card, .pod, .badge, .quiz-band) { --limb: #1E1B18; }
h1, h2, h3 { overflow-wrap: break-word; }

.foot-x { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.foot-x svg { flex: none; }
@media (max-width: 759px) { #x-link { width: 38px; height: 38px; } }