:root{
  --ff-bg:#0c1014;
  --ff-surface:#141a21;
  --ff-surface-2:#1b232c;
  --ff-border:#26313c;
  --ff-text:#e9edf1;
  --ff-muted:#8b97a3;
  --ff-accent:#FF5033;
  --ff-cool:#4fd4c4;
  --ff-cool-dim:#2a6f68;
  --ff-space-1:4px;
  --ff-space-2:8px;
  --ff-space-3:12px;
  --ff-space-4:20px;
  --ff-space-5:32px;
  --ff-space-6:48px;
  --ff-space-7:72px;
  --ff-space-8:112px;
  --disp:"Space Grotesk",system-ui,sans-serif;
  --body:"Newsreader",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--ff-bg);
  color:var(--ff-text);
  font-family:var(--body);
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(900px 500px at 80% -10%, rgba(79,212,196,.06), transparent 60%),
    radial-gradient(700px 500px at 5% 5%, rgba(255,80,51,.06), transparent 55%);
}
a{color:inherit;}
h1,h2,h3,p{margin:0;}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;}

/* ---- Header ---- */
.site-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--ff-space-4) var(--ff-space-5);
  max-width:900px;margin:0 auto;
}
.brand{display:flex;align-items:center;gap:var(--ff-space-3);text-decoration:none;}
.brand-name{font-family:var(--disp);font-weight:700;letter-spacing:-.01em;font-size:16px;}
.head-tag{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ff-muted);border:1px solid var(--ff-border);border-radius:999px;
  padding:var(--ff-space-1) var(--ff-space-3);
}

main{max-width:900px;margin:0 auto;padding:0 var(--ff-space-5);}

/* ---- Hero ---- */
.hero{padding:var(--ff-space-7) 0 var(--ff-space-6);text-align:left;}
.eyebrow{
  font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ff-cool);margin-bottom:var(--ff-space-4);
}
h1{
  font-family:var(--disp);font-weight:700;font-size:clamp(3rem,11vw,6.5rem);
  line-height:.92;letter-spacing:-.03em;
}
h1::after{content:"";display:inline-block;width:.18em;height:.72em;background:var(--ff-accent);
  margin-left:.08em;transform:translateY(.08em);animation:blink 1.4s steps(1) infinite;}
@keyframes blink{50%{opacity:0;}}
.lede{
  max-width:52ch;margin-top:var(--ff-space-5);font-size:1.28rem;color:#c3ccd4;
}
.lede strong{color:var(--ff-accent);font-family:var(--disp);font-weight:500;}

.spectrum{margin:var(--ff-space-6) 0 var(--ff-space-5);}
.spectrum-track{position:relative;height:3px;background:linear-gradient(90deg,var(--ff-cool),var(--ff-accent));border-radius:2px;margin:var(--ff-space-6) 0;}
.pole{position:absolute;top:calc(-1 * var(--ff-space-5));font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ff-muted);}
.pole-left{left:0;}
.pole-right{right:0;}
.spectrum-node{position:absolute;left:50%;top:50%;width:12px;height:12px;border-radius:50%;background:var(--ff-bg);border:2px solid var(--ff-text);transform:translate(-50%,-50%);}

.cta{
  font-family:var(--disp);font-weight:500;font-size:1.05rem;
  background:var(--ff-accent);color:#150a07;border:none;border-radius:2px;
  padding:var(--ff-space-3) var(--ff-space-5);cursor:pointer;
  letter-spacing:-.01em;transition:transform .15s ease,box-shadow .15s ease;
}
.cta:hover{transform:translateY(-2px);box-shadow:0 10px 30px -12px var(--ff-accent);}
.cta:focus-visible{outline:2px solid var(--ff-cool);outline-offset:3px;}

/* ---- Quiz ---- */
.quiz{padding:var(--ff-space-6) 0;}
.meter{margin-bottom:var(--ff-space-6);}
.meter-labels{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ff-muted);margin-bottom:var(--ff-space-3);}
#meterCount{color:var(--ff-text);}
.meter-track{position:relative;height:6px;background:var(--ff-surface-2);border-radius:3px;overflow:visible;}
.meter-fill{position:absolute;left:0;top:0;height:100%;width:50%;background:linear-gradient(90deg,var(--ff-cool),var(--ff-accent));border-radius:3px;transition:width .5s cubic-bezier(.22,1,.36,1);}
.meter-needle{position:absolute;top:50%;left:50%;width:2px;height:22px;background:var(--ff-text);transform:translate(-50%,-50%);transition:left .5s cubic-bezier(.22,1,.36,1);border-radius:2px;}
.meter-needle::after{content:"";position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:8px;height:8px;background:var(--ff-text);border-radius:50%;}

.card-stage{position:relative;min-height:300px;}
.qcard{background:var(--ff-surface);border:1px solid var(--ff-border);border-radius:6px;padding:var(--ff-space-6);}
.qcard.enter{animation:cardIn .45s cubic-bezier(.22,1,.36,1) both;}
@keyframes cardIn{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
.q-index{font-family:var(--mono);font-size:12px;letter-spacing:.18em;color:var(--ff-cool);margin-bottom:var(--ff-space-4);}
.q-title{font-family:var(--disp);font-weight:500;font-size:clamp(1.5rem,4vw,2rem);line-height:1.15;letter-spacing:-.02em;}
.q-sub{color:var(--ff-muted);margin-top:var(--ff-space-3);font-size:1.02rem;max-width:48ch;}
.q-opts{display:flex;flex-direction:column;gap:var(--ff-space-3);margin-top:var(--ff-space-5);}
.opt{
  text-align:left;font-family:var(--body);font-size:1.08rem;color:var(--ff-text);
  background:var(--ff-surface-2);border:1px solid var(--ff-border);border-radius:4px;
  padding:var(--ff-space-4);cursor:pointer;transition:border-color .15s,background .15s,transform .1s;
  display:flex;align-items:center;gap:var(--ff-space-4);
}
.opt .dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto;background:var(--ff-border);transition:background .15s;}
.opt:hover{border-color:var(--ff-accent);background:#20272f;}
.opt:hover .dot{background:var(--ff-accent);}
.opt:focus-visible{outline:2px solid var(--ff-cool);outline-offset:2px;}
.q-back{margin-top:var(--ff-space-5);background:none;border:none;color:var(--ff-muted);font-family:var(--mono);font-size:12px;letter-spacing:.1em;cursor:pointer;padding:var(--ff-space-2) 0;}
.q-back:hover{color:var(--ff-text);}
.q-back:focus-visible{outline:2px solid var(--ff-cool);outline-offset:2px;}

/* ---- Verdict ---- */
.verdict-wrap{padding:var(--ff-space-6) 0;}
.verdict{
  border:1px solid var(--ff-border);border-radius:8px;overflow:hidden;
  animation:verdictIn .6s cubic-bezier(.22,1,.36,1) both;
}
@keyframes verdictIn{from{opacity:0;transform:scale(.97) translateY(20px);}to{opacity:1;transform:none;}}
.verdict-top{padding:var(--ff-space-6);background:var(--ff-surface);border-bottom:1px solid var(--ff-border);}
.verdict-kicker{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ff-muted);}
.verdict-title{font-family:var(--disp);font-weight:700;font-size:clamp(2rem,6vw,3.2rem);line-height:1;letter-spacing:-.03em;margin-top:var(--ff-space-3);}
.verdict-skill .verdict-title{color:var(--ff-accent);}
.verdict-prompt .verdict-title{color:var(--ff-cool);}
.verdict-hybrid .verdict-title{background:linear-gradient(90deg,var(--ff-cool),var(--ff-accent));-webkit-background-clip:text;background-clip:text;color:transparent;}
.verdict-score{margin-top:var(--ff-space-5);}
.vscore-track{position:relative;height:6px;background:var(--ff-surface-2);border-radius:3px;}
.vscore-fill{position:absolute;left:0;top:0;height:100%;background:linear-gradient(90deg,var(--ff-cool),var(--ff-accent));border-radius:3px;animation:grow 1s .3s cubic-bezier(.22,1,.36,1) both;}
@keyframes grow{from{width:0;}}
.vscore-labels{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ff-muted);margin-top:var(--ff-space-3);}
.verdict-body{padding:var(--ff-space-6);}
.verdict-body p{color:#c3ccd4;max-width:56ch;font-size:1.15rem;}
.verdict-body h3{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ff-muted);margin:var(--ff-space-6) 0 var(--ff-space-4);}
.steps{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--ff-space-3);}
.steps li{display:flex;gap:var(--ff-space-4);padding:var(--ff-space-4);background:var(--ff-surface);border:1px solid var(--ff-border);border-radius:4px;font-size:1.02rem;}
.steps li a{color:var(--ff-cool);text-decoration-color:var(--ff-cool-dim);}
.step-num{font-family:var(--mono);color:var(--ff-accent);flex:0 0 auto;font-size:.9rem;padding-top:2px;}
.restart{margin-top:var(--ff-space-6);background:none;color:var(--ff-text);border:1px solid var(--ff-border);border-radius:2px;font-family:var(--disp);font-size:.95rem;padding:var(--ff-space-3) var(--ff-space-4);cursor:pointer;transition:border-color .15s;}
.restart:hover{border-color:var(--ff-accent);}
.restart:focus-visible{outline:2px solid var(--ff-cool);outline-offset:2px;}

/* ---- Reference ---- */
.ref{padding:var(--ff-space-7) 0 var(--ff-space-6);border-top:1px solid var(--ff-border);margin-top:var(--ff-space-5);}
.ref h2{font-family:var(--disp);font-weight:700;font-size:clamp(1.6rem,4vw,2.4rem);letter-spacing:-.02em;}
.ref-intro{color:var(--ff-muted);max-width:56ch;margin-top:var(--ff-space-4);font-size:1.1rem;}
.ref-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--ff-space-4);margin-top:var(--ff-space-6);}
.ref-item{background:var(--ff-surface);border:1px solid var(--ff-border);border-radius:6px;padding:var(--ff-space-5);}
.ref-item h3{font-family:var(--disp);font-weight:500;font-size:1.15rem;margin-bottom:var(--ff-space-3);}
.ref-item p{font-size:.98rem;color:#b6bfc8;}
.ref-item a{color:var(--ff-cool);text-decoration-color:var(--ff-cool-dim);font-family:var(--mono);font-size:.82rem;}

/* ---- Footer ---- */
.site-foot{max-width:900px;margin:0 auto;padding:var(--ff-space-6) var(--ff-space-5) var(--ff-space-8);border-top:1px solid var(--ff-border);}
.foot-nudge a{font-family:var(--disp);color:var(--ff-text);text-decoration:none;font-size:1.05rem;}
.foot-nudge a:hover{color:var(--ff-accent);}
.foot-credit{margin-top:var(--ff-space-3);color:var(--ff-muted);font-family:var(--mono);font-size:12px;letter-spacing:.1em;}
.foot-credit a{color:var(--ff-accent);text-decoration:none;}
.foot-credit a:hover{text-decoration:underline;}

@media(max-width:640px){
  body{font-size:16px;}
  main{padding:0 var(--ff-space-4);}
  .site-head{padding:var(--ff-space-4);}
  .ref-grid{grid-template-columns:1fr;}
  .qcard{padding:var(--ff-space-5);}
  .verdict-top,.verdict-body{padding:var(--ff-space-5);}
}

@media(prefers-reduced-motion:reduce){
  *,*::after{animation:none!important;transition:none!important;}
  h1::after{opacity:1;}
}