/* ──────────────────────────────────────────────────────────────────────────
   tryneulish — the Neulish pilot, in one place.

   The palette is the Neulish night aurora (#04061A canvas, aurora accent)
   carried over from the main site's `.neu` world, so this reads as the same
   country seen from the institution's side. Fonts are self-hosted: the page
   makes no request to any font CDN, analytics host or ad network. The only
   network call it ever makes is to the Neulish pilot database.
   ────────────────────────────────────────────────────────────────────────── */

@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300 800; font-display: swap; src: url(../fonts/Fraunces-normal-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+20B9, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300 800; font-display: swap; src: url(../fonts/Fraunces-normal-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+20A0-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 300 800; font-display: swap; src: url(../fonts/Fraunces-italic-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+20B9, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 300 800; font-display: swap; src: url(../fonts/Fraunces-italic-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+20A0-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/Inter-normal-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+20B9, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/Inter-normal-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+20A0-20C0, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* Ground */
  --abyss: 232 68% 5%;
  --deep: 230 50% 8%;
  --slate: 224 32% 14%;
  --stone: 220 20% 24%;
  /* Life */
  --aurora: 236 85% 76%;
  --aurora-deep: 250 70% 60%;
  --violet: 268 70% 72%;
  --fern: 148 42% 64%;
  --moss: 152 30% 44%;
  --glacier: 196 70% 72%;
  /* Light */
  --dawn: 28 92% 70%;
  --ember: 12 76% 64%;
  --sand: 36 44% 90%;
  /* Ink */
  --ink: 210 40% 97%;
  --ink-soft: 213 24% 80%;
  --ink-faint: 216 16% 62%;
  --line: 220 30% 60%;
  /* Landscape */
  --ridge-far: 258 40% 30%;
  --ridge-mid: 250 38% 21%;
  --ridge-near: 242 40% 13%;
  --ridge-front: 235 50% 7%;

  --radius: 22px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --nav-h: 68px;
  --max: 1180px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: hsl(var(--abyss));
  color: hsl(var(--ink));
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
input, select, textarea { font: inherit; color: inherit; }
::selection { background: hsl(var(--aurora) / .35); color: hsl(var(--ink)); }
:focus-visible { outline: 2px solid hsl(var(--aurora)); outline-offset: 3px; border-radius: 8px; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 820px; }
@media (max-width: 640px) { .wrap { padding: 0 16px; } }

/* ── Type ─────────────────────────────────────────────────────────────── */
.display { font-family: 'Fraunces', Georgia, serif; font-weight: 400; letter-spacing: -0.02em; line-height: 1.04; margin: 0; font-variation-settings: 'opsz' 144; }
.type-hero { font-size: clamp(2.7rem, 7.2vw, 6.2rem); }
.type-1 { font-size: clamp(2.2rem, 4.8vw, 4rem); }
.type-2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.type-3 { font-size: clamp(1.25rem, 2vw, 1.55rem); line-height: 1.2; }
.it { font-style: italic; }
.c-aurora { color: hsl(var(--aurora)); }
.c-fern { color: hsl(var(--fern)); }
.c-dawn { color: hsl(var(--dawn)); }
.c-ember { color: hsl(var(--ember)); }
.c-glacier { color: hsl(var(--glacier)); }
.c-faint { color: hsl(var(--ink-faint)); }
.c-soft { color: hsl(var(--ink-soft)); }
.grad-text {
  background: linear-gradient(100deg, hsl(var(--aurora)) 0%, hsl(var(--violet)) 40%, hsl(var(--dawn)) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lede { font-size: clamp(1.08rem, 1.6vw, 1.3rem); line-height: 1.6; color: hsl(var(--ink-soft)); margin: 0; max-width: 60ch; }
.body { color: hsl(var(--ink-soft)); margin: 0; max-width: 64ch; }
.small { font-size: 13.5px; line-height: 1.6; color: hsl(var(--ink-faint)); }
.tiny { font-size: 12px; line-height: 1.55; color: hsl(var(--ink-faint)); }
.label {
  display: inline-block;
  font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: hsl(var(--ink-faint));
}
.mono, code, pre { font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace; }
p code, li code, td code {
  font-size: .86em; padding: .12em .42em; border-radius: 6px;
  background: hsl(var(--aurora) / .1); color: hsl(var(--aurora)); border: 1px solid hsl(var(--aurora) / .16);
}
.stack > * + * { margin-top: 1rem; }
.mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2.25rem; } .mt-5 { margin-top: 3.25rem; } .mt-6 { margin-top: 4.5rem; }

/* ── Chapter marker ───────────────────────────────────────────────────── */
.chapter { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.chapter .n { font-family: 'Fraunces', serif; font-style: italic; font-size: 15px; color: hsl(var(--aurora)); }
.chapter .rule { width: 44px; height: 1px; background: linear-gradient(90deg, hsl(var(--aurora) / .8), transparent); }
.chapter .t { font-size: 11.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: hsl(var(--ink-faint)); }

/* ── Nav ──────────────────────────────────────────────────────────────── */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--nav-h);
  display: flex; align-items: center;
  transition: background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: hsl(var(--abyss) / .84);
  backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px);
  border-bottom-color: hsl(var(--line) / .12);
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand img { width: 30px; height: 30px; }
.brand .word { font-family: 'Fraunces', serif; font-size: 21px; letter-spacing: -0.01em; }
.brand .pill {
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 99px; color: hsl(var(--abyss));
  background: linear-gradient(100deg, hsl(var(--aurora)), hsl(var(--violet)));
}
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links a {
  font-size: 13.5px; font-weight: 500; color: hsl(var(--ink-soft));
  padding: 8px 12px; border-radius: 99px; transition: color .25s, background .25s;
}
.nav-links a:hover { color: hsl(var(--ink)); background: hsl(var(--ink) / .06); }
.nav-links a.active { color: hsl(var(--ink)); background: hsl(var(--aurora) / .14); }
.nav-cta { margin-left: 10px; }
.nav-toggle { display: none; width: 42px; height: 42px; border-radius: 12px; align-items: center; justify-content: center; border: 1px solid hsl(var(--line) / .2); }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { display: block; width: 18px; height: 1.5px; background: hsl(var(--ink)); position: relative; transition: transform .3s var(--ease), background .3s; }
.nav-toggle span::before, .nav-toggle span::after { content: ''; position: absolute; left: 0; }
.nav-toggle span::before { top: -6px; } .nav-toggle span::after { top: 6px; }
.nav.open .nav-toggle span { background: transparent; }
.nav.open .nav-toggle span::before { transform: translateY(6px) rotate(45deg); }
.nav.open .nav-toggle span::after { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 1080px) {
  .nav-toggle { display: inline-flex; }
  .nav-links {
    position: fixed; top: var(--nav-h); left: 0; right: 0; bottom: 0;
    flex-direction: column; align-items: stretch; gap: 4px; padding: 20px 16px 40px;
    background: hsl(var(--abyss) / .97); backdrop-filter: blur(20px);
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: opacity .3s var(--ease), transform .3s var(--ease);
    overflow-y: auto;
  }
  .nav.open .nav-links { transform: none; opacity: 1; pointer-events: auto; }
  .nav.open { background: hsl(var(--abyss) / .97); }
  .nav-links a { font-size: 18px; padding: 14px 16px; border-radius: 14px; }
  .nav-cta { margin: 14px 0 0; }
}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 24px; border-radius: 99px; font-weight: 600; font-size: 14.5px; letter-spacing: .005em;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s, border-color .3s, color .3s;
  white-space: nowrap; user-select: none;
}
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn-primary {
  color: hsl(232 60% 8%);
  background: linear-gradient(100deg, hsl(var(--aurora)) 0%, hsl(var(--violet)) 100%);
  box-shadow: 0 10px 40px -10px hsl(var(--aurora) / .7), inset 0 1px 0 hsl(0 0% 100% / .4);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 50px -12px hsl(var(--aurora) / .85), inset 0 1px 0 hsl(0 0% 100% / .4); }
.btn-ghost { border: 1px solid hsl(var(--ink) / .2); color: hsl(var(--ink)); background: hsl(var(--ink) / .03); }
.btn-ghost:hover { border-color: hsl(var(--aurora) / .6); background: hsl(var(--aurora) / .08); transform: translateY(-2px); }
.btn-dawn { color: hsl(20 60% 10%); background: linear-gradient(100deg, hsl(var(--dawn)), hsl(var(--ember))); box-shadow: 0 10px 40px -12px hsl(var(--dawn) / .7); }
.btn-dawn:hover { transform: translateY(-2px); }
.btn-sm { padding: 9px 16px; font-size: 13px; }
.btn[disabled], .btn.disabled { opacity: .45; pointer-events: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── Sections & scenery ───────────────────────────────────────────────── */
section { position: relative; }
.sec { padding: 120px 0; position: relative; overflow: hidden; }
.sec-tight { padding: 84px 0; }
@media (max-width: 720px) { .sec { padding: 84px 0; } .sec-tight { padding: 60px 0; } }
.sky-1 { background: linear-gradient(180deg, hsl(232 68% 5%) 0%, hsl(238 55% 9%) 50%, hsl(240 48% 11%) 100%); }
.sky-2 { background: linear-gradient(180deg, hsl(240 48% 11%) 0%, hsl(222 44% 10%) 60%, hsl(216 44% 10%) 100%); }
.sky-3 { background: linear-gradient(180deg, hsl(216 44% 10%) 0%, hsl(196 34% 10%) 50%, hsl(160 26% 9%) 100%); }
.sky-4 { background: linear-gradient(180deg, hsl(160 26% 9%) 0%, hsl(200 30% 9%) 55%, hsl(228 40% 9%) 100%); }
.sky-5 { background: linear-gradient(180deg, hsl(228 40% 9%) 0%, hsl(248 44% 11%) 55%, hsl(252 40% 12%) 100%); }
.sky-6 { background: linear-gradient(180deg, hsl(252 40% 12%) 0%, hsl(232 50% 8%) 60%, hsl(232 68% 5%) 100%); }
.sky-dawn { background: linear-gradient(180deg, hsl(232 68% 5%) 0%, hsl(240 46% 12%) 30%, hsl(268 34% 20%) 58%, hsl(16 50% 30%) 84%, hsl(28 64% 42%) 100%); }
.sky-abyss { background: hsl(var(--abyss)); }

.ridges { position: absolute; left: 0; right: 0; bottom: -1px; height: 34%; pointer-events: none; z-index: 0; }
.ridges svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sec > .wrap, .hero > .wrap { position: relative; z-index: 2; }

.glow {
  position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; z-index: 0; opacity: .55;
}
.glow-a { width: 520px; height: 520px; background: hsl(var(--aurora-deep) / .45); }
.glow-b { width: 420px; height: 420px; background: hsl(var(--fern) / .22); }
.glow-c { width: 460px; height: 460px; background: hsl(var(--dawn) / .25); }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: calc(var(--nav-h) + 60px) 0 140px; overflow: hidden; }
.hero-sky { position: absolute; inset: 0; background: linear-gradient(180deg, hsl(232 68% 4%) 0%, hsl(236 58% 8%) 40%, hsl(250 44% 14%) 66%, hsl(264 36% 18%) 82%, hsl(14 44% 26%) 100%); }
.hero canvas.stars { position: absolute; inset: 0; width: 100%; height: 100%; }
.aurora {
  position: absolute; left: -20%; right: -20%; top: -10%; height: 70%; pointer-events: none; mix-blend-mode: screen; opacity: .8;
  background:
    radial-gradient(60% 40% at 30% 40%, hsl(var(--aurora) / .28), transparent 70%),
    radial-gradient(50% 35% at 70% 30%, hsl(var(--violet) / .22), transparent 70%),
    radial-gradient(40% 30% at 55% 60%, hsl(var(--fern) / .14), transparent 70%);
  filter: blur(30px);
  animation: aurora-drift 22s ease-in-out infinite alternate;
}
@keyframes aurora-drift {
  0% { transform: translate3d(-3%, 0, 0) skewX(-6deg) scaleY(1); }
  50% { transform: translate3d(2%, 2%, 0) skewX(4deg) scaleY(1.12); }
  100% { transform: translate3d(4%, -1%, 0) skewX(-2deg) scaleY(.96); }
}
.hero .eyebrow {
  display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 8px; border-radius: 99px;
  background: hsl(var(--ink) / .05); border: 1px solid hsl(var(--ink) / .12); font-size: 13px; color: hsl(var(--ink-soft));
  backdrop-filter: blur(10px);
}
.hero .eyebrow .dot { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: hsl(var(--fern) / .18); }
.hero .eyebrow .dot i { width: 7px; height: 7px; border-radius: 50%; background: hsl(var(--fern)); box-shadow: 0 0 12px hsl(var(--fern)); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(.75); } }
.hero-sub { min-height: 62vh; min-height: 62svh; padding-bottom: 120px; }

/* ── Cards ────────────────────────────────────────────────────────────── */
.glass {
  background: linear-gradient(160deg, hsl(var(--ink) / .065), hsl(var(--ink) / .02));
  border: 1px solid hsl(var(--ink) / .1);
  border-radius: var(--radius);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 30px 80px -40px hsl(232 80% 2% / .9), inset 0 1px 0 hsl(var(--ink) / .06);
}
.card { padding: 28px; }
.card-lg { padding: 40px; }
@media (max-width: 640px) { .card { padding: 22px; } .card-lg { padding: 26px; } }
.card-hover { transition: transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s; }
.card-hover:hover { transform: translateY(-4px); border-color: hsl(var(--aurora) / .4); box-shadow: 0 40px 90px -40px hsl(var(--aurora-deep) / .6), inset 0 1px 0 hsl(var(--ink) / .08); }
.tint-aurora { background: hsl(var(--aurora) / .08); border: 1px solid hsl(var(--aurora) / .24); border-radius: var(--radius); }
.tint-fern { background: hsl(var(--fern) / .07); border: 1px solid hsl(var(--fern) / .24); border-radius: var(--radius); }
.tint-dawn { background: hsl(var(--dawn) / .08); border: 1px solid hsl(var(--dawn) / .28); border-radius: var(--radius); }
.tint-ember { background: hsl(var(--ember) / .1); border: 1px solid hsl(var(--ember) / .4); border-radius: var(--radius); }
.tint-ink { background: hsl(var(--ink) / .04); border: 1px solid hsl(var(--ink) / .1); border-radius: var(--radius); }

.icon-badge { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: hsl(var(--aurora) / .12); border: 1px solid hsl(var(--aurora) / .25); color: hsl(var(--aurora)); }
.icon-badge svg { width: 20px; height: 20px; }
.icon-badge.fern { background: hsl(var(--fern) / .12); border-color: hsl(var(--fern) / .28); color: hsl(var(--fern)); }
.icon-badge.dawn { background: hsl(var(--dawn) / .12); border-color: hsl(var(--dawn) / .3); color: hsl(var(--dawn)); }
.icon-badge.ember { background: hsl(var(--ember) / .12); border-color: hsl(var(--ember) / .3); color: hsl(var(--ember)); }
.icon-badge.glacier { background: hsl(var(--glacier) / .12); border-color: hsl(var(--glacier) / .3); color: hsl(var(--glacier)); }

/* ── Grids ────────────────────────────────────────────────────────────── */
.grid { display: grid; gap: 22px; }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-split { grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: start; }
.g-builder { grid-template-columns: .85fr 1.15fr; }
.g-builder > * { min-width: 0; }
@media (max-width: 980px) { .g-builder { grid-template-columns: 1fr; } .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g-split { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 640px) { .g-2, .g-3, .g-4 { grid-template-columns: 1fr; } }

/* ── Stats ────────────────────────────────────────────────────────────── */
.stat .v { font-family: 'Fraunces', serif; font-size: clamp(2.2rem, 4vw, 3.3rem); line-height: 1; letter-spacing: -0.03em; }
.stat .k { margin-top: 10px; font-size: 13.5px; color: hsl(var(--ink-faint)); line-height: 1.45; }
.stat-row { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px; background: hsl(var(--ink) / .1); border-radius: var(--radius); overflow: hidden; border: 1px solid hsl(var(--ink) / .1); }
.stat-row .stat { background: hsl(var(--abyss) / .82); padding: 28px 24px; }
@media (max-width: 860px) { .stat-row { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* ── Mechanism steps ──────────────────────────────────────────────────── */
.mech { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; position: relative; }
.mech .m { padding: 0 32px 0 0; position: relative; }
.mech .m + .m { padding-left: 32px; border-left: 1px solid hsl(var(--ink) / .1); }
.mech .num { font-family: 'Fraunces', serif; font-style: italic; font-size: 56px; line-height: 1; color: hsl(var(--aurora) / .9); }
@media (max-width: 860px) { .mech { grid-template-columns: 1fr; gap: 36px; } .mech .m, .mech .m + .m { padding: 0; border-left: 0; } }

/* ── Tabs / segmented control ─────────────────────────────────────────── */
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 5px; border-radius: 99px; background: hsl(var(--ink) / .05); border: 1px solid hsl(var(--ink) / .1); }
.seg button { position: relative; padding: 10px 20px; border-radius: 99px; font-size: 14px; font-weight: 600; color: hsl(var(--ink-soft)); transition: color .3s, background .35s var(--ease); display: inline-flex; align-items: center; gap: 8px; }
.seg button:hover { color: hsl(var(--ink)); }
.seg button[aria-selected="true"] { color: hsl(232 60% 8%); background: linear-gradient(100deg, hsl(var(--aurora)), hsl(var(--violet))); box-shadow: 0 6px 24px -8px hsl(var(--aurora) / .7); }
.seg button svg { width: 15px; height: 15px; }
@media (max-width: 640px) { .seg { border-radius: 20px; } .seg button { padding: 9px 14px; font-size: 13px; } }
.panel { animation: rise .55s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ── Lists ────────────────────────────────────────────────────────────── */
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.checks li { display: flex; gap: 12px; font-size: 14.5px; color: hsl(var(--ink-soft)); line-height: 1.55; }
.checks li::before { content: ''; flex-shrink: 0; width: 16px; height: 16px; margin-top: 3px; border-radius: 50%; background: hsl(var(--fern) / .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237fd6a4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat; }
.nots { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.nots li { font-size: 14px; color: hsl(var(--ink-faint)); line-height: 1.6; padding-left: 18px; position: relative; }
.nots li::before { content: ''; position: absolute; left: 0; top: 10px; width: 8px; height: 1px; background: hsl(var(--ink-faint)); }
.dots { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.dots li { position: relative; padding-left: 20px; color: hsl(var(--ink-soft)); font-size: 14.5px; line-height: 1.6; }
.dots li::before { content: ''; position: absolute; left: 2px; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: hsl(var(--aurora)); box-shadow: 0 0 10px hsl(var(--aurora) / .8); }

/* ── Phase rail (numbered steps) ──────────────────────────────────────── */
.rail { position: relative; display: grid; gap: 0; }
.rail .step { display: grid; grid-template-columns: 64px 1fr; gap: 22px; padding: 0 0 34px; position: relative; }
.rail .step::before { content: ''; position: absolute; left: 21px; top: 46px; bottom: 0; width: 1px; background: linear-gradient(180deg, hsl(var(--aurora) / .5), hsl(var(--aurora) / .05)); }
.rail .step:last-child::before { display: none; }
.rail .dot {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  font-family: 'Fraunces', serif; font-style: italic; font-size: 17px; color: hsl(var(--aurora));
  background: hsl(var(--abyss)); border: 1px solid hsl(var(--aurora) / .45); box-shadow: 0 0 0 6px hsl(var(--aurora) / .06), 0 0 30px hsl(var(--aurora) / .25);
}
.rail h3 { margin: 6px 0 6px; font-size: 17.5px; font-weight: 600; letter-spacing: -0.005em; }
.rail .when { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: hsl(var(--aurora)); font-weight: 600; }
@media (max-width: 640px) { .rail .step { grid-template-columns: 48px 1fr; gap: 14px; } .rail .dot { width: 38px; height: 38px; font-size: 15px; } .rail .step::before { left: 18px; top: 40px; } }

/* ── Tables ───────────────────────────────────────────────────────────── */
.tbl-wrap { overflow-x: auto; border-radius: 18px; border: 1px solid hsl(var(--ink) / .1); -webkit-overflow-scrolling: touch; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }
.tbl th { text-align: left; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: hsl(var(--ink-faint)); font-weight: 600; padding: 14px 18px; background: hsl(var(--ink) / .04); border-bottom: 1px solid hsl(var(--ink) / .1); }
.tbl td { padding: 14px 18px; border-bottom: 1px solid hsl(var(--ink) / .07); color: hsl(var(--ink-soft)); vertical-align: top; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl td strong { color: hsl(var(--ink)); font-weight: 600; }
.tl-green { color: hsl(var(--fern)); } .tl-amber { color: hsl(var(--dawn)); } .tl-red { color: hsl(var(--ember)); }

/* ── Code ─────────────────────────────────────────────────────────────── */
.code {
  position: relative; margin: 0; padding: 20px 22px; border-radius: 16px; overflow-x: auto;
  background: hsl(232 60% 4% / .9); border: 1px solid hsl(var(--ink) / .1);
  font-size: 12.8px; line-height: 1.7; color: hsl(var(--ink-soft)); white-space: pre; tab-size: 2;
}
.code .k { color: hsl(var(--violet)); } .code .s { color: hsl(var(--fern)); } .code .c { color: hsl(var(--ink-faint)); font-style: italic; } .code .f { color: hsl(var(--glacier)); } .code .n { color: hsl(var(--dawn)); }
.copy-btn { position: absolute; top: 10px; right: 10px; font-size: 11.5px; font-weight: 600; padding: 6px 11px; border-radius: 99px; background: hsl(var(--ink) / .08); border: 1px solid hsl(var(--ink) / .14); color: hsl(var(--ink-soft)); transition: all .2s; }
.copy-btn:hover { color: hsl(var(--ink)); border-color: hsl(var(--aurora) / .5); }

/* ── Forms ────────────────────────────────────────────────────────────── */
.field { display: grid; gap: 8px; }
.field label { font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: hsl(var(--ink-faint)); }
.input, .select, .textarea {
  width: 100%; padding: 14px 16px; border-radius: 14px; font-size: 15px;
  background: hsl(var(--ink) / .05); border: 1px solid hsl(var(--ink) / .14); color: hsl(var(--ink));
  outline: none; transition: border-color .25s, background .25s, box-shadow .25s;
}
.input:focus, .select:focus, .textarea:focus { border-color: hsl(var(--aurora) / .7); background: hsl(var(--ink) / .07); box-shadow: 0 0 0 4px hsl(var(--aurora) / .12); }
.input::placeholder, .textarea::placeholder { color: hsl(var(--ink-faint) / .7); }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a5acc9' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; padding-right: 40px; }
.select option { background: hsl(var(--deep)); }
.textarea { min-height: 110px; resize: vertical; }
.code-input { font-family: ui-monospace, Menlo, monospace; letter-spacing: .3em; text-transform: uppercase; font-size: 22px; text-align: center; padding: 18px; }
.form-msg { font-size: 13.5px; margin-top: 12px; }
.form-msg.err { color: hsl(var(--ember)); } .form-msg.ok { color: hsl(var(--fern)); }

/* ── Chips / badges ───────────────────────────────────────────────────── */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 99px; font-size: 12px; font-weight: 600; background: hsl(var(--ink) / .06); border: 1px solid hsl(var(--ink) / .12); color: hsl(var(--ink-soft)); }
.chip.aurora { background: hsl(var(--aurora) / .12); border-color: hsl(var(--aurora) / .3); color: hsl(var(--aurora)); }
.chip.fern { background: hsl(var(--fern) / .12); border-color: hsl(var(--fern) / .3); color: hsl(var(--fern)); }
.chip.dawn { background: hsl(var(--dawn) / .12); border-color: hsl(var(--dawn) / .3); color: hsl(var(--dawn)); }
.chip.ember { background: hsl(var(--ember) / .12); border-color: hsl(var(--ember) / .35); color: hsl(var(--ember)); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── Price block ──────────────────────────────────────────────────────── */
.price .fig { font-family: 'Fraunces', serif; font-size: 1.8rem; letter-spacing: -0.02em; }
.price .unit { font-size: 13px; color: hsl(var(--ink-faint)); margin-left: 8px; }

/* ── Timeline (journey) ───────────────────────────────────────────────── */
.timeline { position: relative; padding-left: 0; }
.timeline::before { content: ''; position: absolute; left: 140px; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(180deg, transparent, hsl(var(--aurora) / .45) 6%, hsl(var(--aurora) / .45) 94%, transparent); }
.tl-item { display: grid; grid-template-columns: 120px 1fr; gap: 41px; padding: 0 0 46px; position: relative; }
.tl-item .date { text-align: right; padding-top: 3px; }
.tl-item .date .d { font-family: 'Fraunces', serif; font-size: 20px; line-height: 1.1; }
.tl-item .date .y { font-size: 12px; color: hsl(var(--ink-faint)); letter-spacing: .1em; }
.tl-item::before { content: ''; position: absolute; left: 134px; top: 8px; width: 13px; height: 13px; border-radius: 50%; background: hsl(var(--abyss)); border: 2px solid hsl(var(--aurora)); box-shadow: 0 0 16px hsl(var(--aurora) / .8); }
.tl-item.now::before { border-color: hsl(var(--dawn)); box-shadow: 0 0 22px hsl(var(--dawn)); background: hsl(var(--dawn)); }
.tl-item h3 { margin: 0 0 8px; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
@media (max-width: 720px) {
  .timeline::before { left: 7px; }
  .tl-item { grid-template-columns: 1fr; gap: 6px; padding-left: 34px; }
  .tl-item .date { text-align: left; display: flex; gap: 10px; align-items: baseline; }
  .tl-item::before { left: 1px; }
}

/* ── Footer ───────────────────────────────────────────────────────────── */
.footer { position: relative; padding: 90px 0 46px; background: linear-gradient(180deg, hsl(232 68% 5%), hsl(234 60% 3%)); border-top: 1px solid hsl(var(--ink) / .08); }
.footer .cols { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; }
.footer h4 { margin: 0 0 14px; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: hsl(var(--ink-faint)); font-weight: 600; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.footer a { font-size: 14px; color: hsl(var(--ink-soft)); transition: color .2s; }
.footer a:hover { color: hsl(var(--aurora)); }
.footer .legal { margin-top: 60px; padding-top: 26px; border-top: 1px solid hsl(var(--ink) / .08); display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; }
@media (max-width: 860px) { .footer .cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer .cols { grid-template-columns: 1fr; } }

/* ── Reveal ───────────────────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .07s; } .reveal.d2 { transition-delay: .14s; } .reveal.d3 { transition-delay: .21s; } .reveal.d4 { transition-delay: .28s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .aurora, .hero .eyebrow .dot i { animation: none; }
  html { scroll-behavior: auto; }
}

/* ── Progress bar ─────────────────────────────────────────────────────── */
.bar { height: 8px; border-radius: 99px; background: hsl(var(--ink) / .08); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, hsl(var(--aurora)), hsl(var(--violet))); transition: width .8s var(--ease); }
.bar.fern > i { background: linear-gradient(90deg, hsl(var(--moss)), hsl(var(--fern))); }
.bar.dawn > i { background: linear-gradient(90deg, hsl(var(--dawn)), hsl(var(--ember))); }

/* ── Screening (participant) ──────────────────────────────────────────── */
.q-card { max-width: 720px; margin: 0 auto; }
.q-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 26px; }
.q-text { font-family: 'Fraunces', serif; font-size: clamp(1.5rem, 3.2vw, 2.3rem); line-height: 1.18; letter-spacing: -0.015em; margin: 10px 0 30px; }
.opts { display: grid; gap: 10px; }
.opt {
  display: flex; align-items: center; gap: 16px; width: 100%; text-align: left; padding: 17px 20px; border-radius: 16px;
  background: hsl(var(--ink) / .045); border: 1px solid hsl(var(--ink) / .12); font-size: 15.5px; color: hsl(var(--ink));
  transition: transform .25s var(--ease), border-color .25s, background .25s;
}
.opt:hover { border-color: hsl(var(--aurora) / .55); background: hsl(var(--aurora) / .08); transform: translateX(4px); }
.opt .k { width: 28px; height: 28px; flex-shrink: 0; border-radius: 9px; display: grid; place-items: center; font-size: 12.5px; font-weight: 700; color: hsl(var(--ink-faint)); border: 1px solid hsl(var(--ink) / .16); }
.opt.sel { border-color: hsl(var(--aurora)); background: hsl(var(--aurora) / .16); }
.opt.sel .k { background: hsl(var(--aurora)); color: hsl(232 60% 8%); border-color: transparent; }
.result-card .score { font-family: 'Fraunces', serif; font-size: 2.6rem; line-height: 1; }

/* ── Console ──────────────────────────────────────────────────────────── */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpi { padding: 22px; }
.kpi .v { font-family: 'Fraunces', serif; font-size: 2.3rem; line-height: 1; letter-spacing: -0.02em; }
.kpi .k { font-size: 12.5px; color: hsl(var(--ink-faint)); margin-top: 8px; }
.hbar { display: grid; grid-template-columns: 150px 1fr 90px; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid hsl(var(--ink) / .07); font-size: 14px; }
.hbar:last-child { border-bottom: 0; }
@media (max-width: 560px) { .hbar { grid-template-columns: 1fr 70px; } .hbar .bar { grid-column: 1 / -1; grid-row: 2; } }

/* ── Games ────────────────────────────────────────────────────────────── */
.game-stage { min-height: 380px; display: grid; place-items: center; text-align: center; padding: 34px 22px; position: relative; overflow: hidden; }
.game-glyph { font-size: clamp(64px, 12vw, 110px); line-height: 1; user-select: none; transition: transform .18s var(--ease); }
.game-glyph.pop { transform: scale(1.12); }
.game-hud { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; color: hsl(var(--ink-faint)); }
.game-word { font-family: 'Fraunces', serif; font-size: clamp(48px, 9vw, 86px); letter-spacing: .02em; font-weight: 500; }
.flank { font-family: ui-monospace, Menlo, monospace; font-size: clamp(40px, 8vw, 72px); letter-spacing: .14em; }
.game-keys { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.game-card { cursor: pointer; text-align: left; }
.game-card[aria-pressed="true"] { border-color: hsl(var(--aurora) / .7); background: linear-gradient(160deg, hsl(var(--aurora) / .14), hsl(var(--ink) / .02)); }
.flash-ok { animation: flash-ok .45s ease; } .flash-bad { animation: flash-bad .45s ease; }
@keyframes flash-ok { 0% { box-shadow: inset 0 0 0 2px hsl(var(--fern) / .9); } 100% { box-shadow: inset 0 0 0 2px transparent; } }
@keyframes flash-bad { 0% { box-shadow: inset 0 0 0 2px hsl(var(--ember) / .9); } 100% { box-shadow: inset 0 0 0 2px transparent; } }

/* ── Figures ──────────────────────────────────────────────────────────── */
.paper { background: #fbfaf7; border-radius: 18px; padding: 14px; box-shadow: 0 30px 80px -40px #000; }
.paper img { border-radius: 10px; width: 100%; height: auto; }
figure { margin: 0; }
figcaption { margin-top: 12px; font-size: 13px; color: hsl(var(--ink-faint)); }

/* ── Ladder (evidence) ────────────────────────────────────────────────── */
.ladder { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; align-items: end; }
.ladder .rung { padding: 22px 20px; border-radius: 20px; position: relative; display: flex; flex-direction: column; justify-content: flex-start; }
.ladder .rung .n { font-family: 'Fraunces', serif; font-size: 2.2rem; line-height: 1; }
@media (max-width: 980px) { .ladder { grid-template-columns: 1fr; } .ladder .rung { min-height: 0 !important; } }

/* ── Architecture diagram ─────────────────────────────────────────────── */
.arch { width: 100%; height: auto; }
.arch text { font-family: 'Inter', sans-serif; }

/* ── Misc ─────────────────────────────────────────────────────────────── */
hr.soft { border: 0; height: 1px; background: linear-gradient(90deg, transparent, hsl(var(--ink) / .14), transparent); margin: 0; }
.kbd { display: inline-block; padding: 2px 8px; border-radius: 7px; font-size: 12px; font-weight: 600; border: 1px solid hsl(var(--ink) / .2); background: hsl(var(--ink) / .06); font-family: ui-monospace, Menlo, monospace; }
.center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }
.hide { display: none !important; }
.flex { display: flex; } .items-center { align-items: center; } .between { justify-content: space-between; } .wrap-gap { flex-wrap: wrap; gap: 12px; } .gap-1 { gap: 8px; } .gap-2 { gap: 14px; }
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px); opacity: 0; z-index: 80;
  padding: 13px 20px; border-radius: 99px; font-size: 14px; background: hsl(var(--deep) / .95); border: 1px solid hsl(var(--aurora) / .4);
  box-shadow: 0 20px 60px -20px #000; transition: all .4s var(--ease); pointer-events: none; max-width: calc(100% - 32px);
}
.toast.show { opacity: 1; transform: translateX(-50%); }
.scroll-hint { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 3; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: hsl(var(--ink-faint)); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.scroll-hint i { width: 1px; height: 38px; background: linear-gradient(180deg, hsl(var(--ink-faint)), transparent); animation: drip 2.2s ease-in-out infinite; }
@keyframes drip { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
.anchor { scroll-margin-top: calc(var(--nav-h) + 20px); }
.qr { background: #fff; padding: 12px; border-radius: 14px; display: inline-block; }
.qr canvas, .qr img { width: 168px !important; height: 168px !important; image-rendering: pixelated; }
@media print {
  .nav, .footer, .ridges, canvas.stars, .aurora, .glow, .no-print { display: none !important; }
  body { background: #fff; color: #111; }
}
.ladder .rung .chip { align-self: flex-start; margin-top: 12px; }
.glass .chip.mt-2, .card .chip.mt-2 { margin-top: 12px; }
.display { text-wrap: balance; }
.lede, .body { text-wrap: pretty; }
.plan-row { display: grid; grid-template-columns: 150px 96px 1fr; gap: 14px; align-items: center; padding: 11px 0; border-bottom: 1px solid hsl(var(--ink) / .07); }
.plan-row:last-child { border-bottom: 0; }
@media (max-width: 640px) { .plan-row { grid-template-columns: 1fr auto; gap: 6px 12px; } .plan-row > :last-child { grid-column: 1 / -1; } }
@media (max-width: 640px) {
  .game-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .game-picker .card { padding: 16px; }
  .game-picker .chip, .game-picker p.small { display: none; }
  .game-picker h3 { font-size: 1.05rem; margin-top: 8px; }
  .game-stage { min-height: 340px; padding: 24px 8px; }
}
.grid > *, .mech > *, .ladder > * { min-width: 0; }
/* ── Signed-in chip ───────────────────────────────────────────────────── */
.nav-links a.nav-org { display: inline-flex; align-items: center; gap: 8px; margin-left: 10px; padding: 7px 12px 7px 10px; border: 1px solid hsl(var(--fern) / .35); background: hsl(var(--fern) / .08); color: hsl(var(--ink)); max-width: 260px; }
.nav-org svg { width: 14px; height: 14px; color: hsl(var(--fern)); flex-shrink: 0; }
.nav-org span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.nav-org b { font-weight: 600; font-size: 11.5px; color: hsl(var(--ink-faint)); padding-left: 8px; border-left: 1px solid hsl(var(--ink) / .15); }
.nav-org:hover b { color: hsl(var(--ember)); }
@media (max-width: 1080px) { .nav-links a.nav-org { margin: 12px 0 0; max-width: none; } }
/* ── Access-request dialog ────────────────────────────────────────────── */
.rq-dialog { padding: 0; border: 0; background: transparent; color: inherit; width: min(720px, calc(100% - 24px)); max-height: calc(100dvh - 24px); margin: auto; overflow: visible; }
.rq-dialog::backdrop { background: hsl(232 70% 3% / .72); backdrop-filter: blur(6px); }
.rq-dialog[open] { animation: rise .45s var(--ease) both; }
.rq-card { position: relative; padding: 30px 32px; max-height: calc(100dvh - 24px); overflow-y: auto; background: linear-gradient(160deg, hsl(234 48% 12% / .97), hsl(232 60% 7% / .97)); }
@media (max-width: 640px) { .rq-card { padding: 22px 18px; } }
.rq-close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; font-size: 22px; line-height: 1; color: hsl(var(--ink-faint)); border: 1px solid hsl(var(--ink) / .12); }
.rq-close:hover { color: hsl(var(--ink)); border-color: hsl(var(--aurora) / .5); }
.rq-steps { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: hsl(var(--ink-faint)); }
.rq-steps span { display: inline-flex; align-items: center; gap: 7px; }
.rq-steps i { font-style: normal; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; border: 1px solid hsl(var(--ink) / .2); }
.rq-steps .on { color: hsl(var(--ink)); } .rq-steps .on i { background: hsl(var(--aurora)); color: hsl(232 60% 8%); border-color: transparent; }
.rq-steps .done i { background: hsl(var(--fern) / .2); color: hsl(var(--fern)); border-color: transparent; }
.opt-tag { text-transform: none; letter-spacing: 0; font-weight: 500; color: hsl(var(--ink-faint) / .8); }
.pick-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pick-grid-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { .pick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pick-grid-wide { grid-template-columns: 1fr; } }
.pick { position: relative; cursor: pointer; }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick span { display: block; padding: 11px 13px; border-radius: 12px; font-size: 13.5px; line-height: 1.35; background: hsl(var(--ink) / .045); border: 1px solid hsl(var(--ink) / .13); color: hsl(var(--ink-soft)); transition: all .2s; }
.pick:hover span { border-color: hsl(var(--aurora) / .5); color: hsl(var(--ink)); }
.pick input:checked + span { background: hsl(var(--aurora) / .15); border-color: hsl(var(--aurora)); color: hsl(var(--ink)); }
.pick input:focus-visible + span { outline: 2px solid hsl(var(--aurora)); outline-offset: 2px; }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; color: hsl(var(--ink-soft)); line-height: 1.55; cursor: pointer; }
.consent input { margin-top: 3px; width: 17px; height: 17px; accent-color: #8b8ff8; flex-shrink: 0; }
/* ── Locked tiles ─────────────────────────────────────────────────────── */
.locked { position: relative; cursor: pointer; text-align: left; width: 100%; }
.locked .lk { position: absolute; top: 18px; right: 18px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: hsl(var(--ink) / .06); border: 1px solid hsl(var(--ink) / .14); color: hsl(var(--ink-faint)); transition: all .3s; }
.locked .lk svg { width: 14px; height: 14px; }
.locked:hover .lk { color: hsl(var(--aurora)); border-color: hsl(var(--aurora) / .5); background: hsl(var(--aurora) / .1); }
.locked .blur { filter: blur(4px); opacity: .55; user-select: none; pointer-events: none; }
.field .pick, .field .consent { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: inherit; color: inherit; }
.field .pick span { font-size: 13.5px; }
/* ── v2: choices, tiers, pacer, belt ──────────────────────────────────── */
.choice { text-align: left; cursor: pointer; }
.choice[aria-pressed="true"] { border-color: hsl(var(--aurora) / .8); background: linear-gradient(160deg, hsl(var(--aurora) / .16), hsl(var(--ink) / .03)); box-shadow: 0 0 0 1px hsl(var(--aurora) / .5), 0 30px 80px -40px hsl(var(--aurora-deep) / .6); }
.tier-banner { display: flex; gap: 16px; align-items: flex-start; padding: 22px; border-radius: var(--radius); background: color-mix(in srgb, var(--tier) 12%, transparent); border: 1px solid color-mix(in srgb, var(--tier) 45%, transparent); }
.tier-dot { width: 44px; height: 44px; border-radius: 14px; flex-shrink: 0; display: grid; place-items: center; color: var(--tier); background: color-mix(in srgb, var(--tier) 18%, transparent); }
.tier-dot svg { width: 20px; height: 20px; }
.pacer { width: 100%; display: flex; flex-direction: column; align-items: center; }
.pacer-ring { position: relative; width: min(260px, 70vw); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; border: 1px solid hsl(var(--aurora) / .25); background: radial-gradient(circle, hsl(var(--aurora) / .06), transparent 70%); }
.pacer-orb { position: absolute; inset: 8%; border-radius: 50%; transform: scale(.55); background: radial-gradient(circle at 35% 30%, hsl(var(--glacier) / .9), hsl(var(--aurora) / .55) 45%, hsl(var(--aurora-deep) / .25) 75%); box-shadow: 0 0 60px hsl(var(--aurora) / .45); }
.pacer-text { position: relative; font-family: 'Fraunces', serif; font-size: 22px; color: hsl(var(--ink)); text-shadow: 0 2px 12px hsl(232 70% 4% / .8); }
.belt { --belt: #7da4fc; margin: 0 auto 18px; max-width: 360px; padding: 10px 16px; border-radius: 99px; font-size: 14px; font-weight: 600; color: var(--belt); background: color-mix(in srgb, var(--belt) 14%, transparent); border: 1px solid color-mix(in srgb, var(--belt) 50%, transparent); text-align: center; transition: all .3s; }
@media (prefers-reduced-motion: reduce) { .pacer-orb { transition: none !important; } }
/* ── Campus Pass ──────────────────────────────────────────────────────── */
.pass-nav .chip { transition: all .2s; } .pass-nav .chip:hover { border-color: hsl(var(--aurora) / .6); color: hsl(var(--ink)); }
.slider-row { display: grid; grid-template-columns: 1fr 40px; gap: 6px 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid hsl(var(--ink) / .08); }
.slider-row label { font-weight: 600; font-size: 14.5px; grid-column: 1 / -1; }
.slider-row input[type=range] { width: 100%; accent-color: #8b8ff8; height: 28px; }
.slider-row output { font-family: 'Fraunces', serif; font-size: 22px; text-align: right; }
.slider-row .tiny { grid-column: 1 / -1; margin-top: -4px; }
.chart svg { width: 100%; height: auto; margin-top: 8px; }
.track { text-align: left; cursor: pointer; }
.anchor, section[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }
/* ── Workspace ────────────────────────────────────────────────────────── */
.ws-tabs { max-width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
.ws-tabs::-webkit-scrollbar { display: none; }
.ws-tabs button { white-space: nowrap; }
.demo-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 99px; border: 1px solid hsl(var(--dawn) / .4); background: hsl(var(--dawn) / .08); font-size: 13px; font-weight: 600; color: hsl(var(--dawn)); cursor: pointer; }
.demo-toggle input { accent-color: #f6b26b; width: 15px; height: 15px; }
.ws-tip { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; opacity: 0; max-width: 260px; padding: 9px 12px; border-radius: 10px; font-size: 12.5px; line-height: 1.45; background: hsl(232 50% 9% / .97); border: 1px solid hsl(var(--ink) / .16); color: hsl(var(--ink-soft)); box-shadow: 0 18px 40px -16px #000; transition: opacity .12s; }
.ws-tip.on { opacity: 1; }
.ws-tip b { color: hsl(var(--ink)); }
.sb { display: flex; gap: 2px; height: 22px; border-radius: 6px; overflow: hidden; }
.sb-seg { min-width: 3px; transition: filter .2s; }
.sb-seg:hover { filter: brightness(1.15); }
.sb-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-top: 14px; }
.sb-leg { display: flex; gap: 8px; align-items: flex-start; }
.sb-leg i { width: 10px; height: 10px; border-radius: 3px; margin-top: 5px; flex-shrink: 0; }
.hm { display: grid; gap: 3px; min-width: 520px; }
.hm-row { display: grid; gap: 3px; align-items: stretch; }
.hm-head span { font-size: 11px; color: hsl(var(--ink-faint)); text-align: center; padding-bottom: 4px; }
.hm-label { font-size: 13px; color: hsl(var(--ink-soft)); display: flex; align-items: center; padding-right: 8px; }
.hm-cell { display: grid; place-items: center; height: 34px; border-radius: 6px; font-size: 12px; font-weight: 600; }
.hm-empty { background: hsl(var(--ink) / .03); }
.hm-hatch { color: hsl(var(--ink-faint)); background: repeating-linear-gradient(45deg, hsl(var(--ink) / .06) 0 6px, hsl(var(--ink) / .02) 6px 12px); font-weight: 500; }
.hm-legend { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; margin-top: 12px; }
.hm-legend i { width: 22px; height: 10px; border-radius: 2px; }
.desk-row summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto auto 1fr auto auto auto auto; gap: 14px; align-items: center; }
.desk-row summary::-webkit-details-marker { display: none; }
.desk-row.is-safety { border-color: hsl(var(--ember) / .6); background: linear-gradient(160deg, hsl(var(--ember) / .12), hsl(var(--ink) / .02)); }
.desk-row .chip svg { width: 13px; height: 13px; }
@media (max-width: 900px) { .desk-row summary { grid-template-columns: 1fr 1fr; } }
.round-row { display: grid; grid-template-columns: 1fr 160px auto; gap: 18px; align-items: center; }
@media (max-width: 760px) { .round-row { grid-template-columns: 1fr; } }
.comp-row { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; padding: 16px 18px; }
@media (max-width: 640px) { .comp-row { grid-template-columns: 1fr; } }
.hbar.compact { grid-template-columns: minmax(84px, 1fr) minmax(70px, 1.3fr) auto; }
@media (max-width: 560px) { .hbar.compact { grid-template-columns: 1fr auto; } .hbar.compact .bar { grid-column: 1 / -1; grid-row: 2; } }