:root{
  --bg:#07080c; --panel:#0f1118; --panel2:#151822; --line:rgba(255,255,255,.1);
  --fg:#f3f0e8; --muted:#8d897f; --red:#ff4a3d; --purple:#b48cff; --amber:#ffb347;
  --font:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
*{box-sizing:border-box}
html{color-scheme:dark;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.55 var(--font);min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden}
#glow{position:fixed;inset:0;z-index:-2;pointer-events:none;background:
  radial-gradient(600px 400px at 85% -5%, rgba(255,74,61,.18), transparent 70%),
  radial-gradient(700px 500px at -10% 40%, rgba(180,140,255,.12), transparent 70%),
  radial-gradient(500px 400px at 60% 110%, rgba(255,179,71,.1), transparent 70%)}
#shader{position:fixed;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none;opacity:0;transition:opacity 1.2s}
#shader.on{opacity:1}
#grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
a{color:var(--fg);text-decoration-color:rgba(255,255,255,.35);text-underline-offset:3px}
a:hover{text-decoration-color:var(--red)}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
#app:focus{outline:none}
h1,h2,h3{line-height:1.15;margin:0}
p{margin:0 0 12px}
ul{margin:0;padding-left:1.1em}
li{margin:6px 0}

.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;padding:12px max(16px,env(safe-area-inset-right)) 12px max(16px,env(safe-area-inset-left));background:rgba(7,8,12,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.spacer{flex:1}
.brand{display:flex;align-items:center;gap:9px;background:none;border:0;padding:0;font-weight:700;letter-spacing:-.01em}
.brand b{color:var(--red);margin:0 1px}
.count{font:600 12px var(--mono);color:var(--muted);letter-spacing:.05em;white-space:nowrap}
.pill{display:inline-flex;align-items:center;gap:8px;padding:5px 11px;border:1px solid var(--line);border-radius:99px;font-size:12px;color:var(--muted);white-space:nowrap}
.live{width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 0 0 rgba(255,74,61,.6);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 7px rgba(255,74,61,0)}100%{box-shadow:0 0 0 0 rgba(255,74,61,0)}}
.topbar-progress{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:linear-gradient(90deg,var(--purple),var(--red));transition:width .3s ease}

main{flex:1;padding:36px 16px 56px}
.narrow{max-width:720px;margin:0 auto}
.narrow + .narrow{margin-top:44px}
.center{text-align:center}
.muted{color:var(--muted)}
.small{font-size:14px}
.fine{font-size:13px;color:var(--muted);margin-top:18px}
.kicker{font:700 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.h-sm{font:700 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.section-title{font-size:26px;letter-spacing:-.02em;margin-bottom:18px}

.hero{padding-top:20px}
.hero h1{font-size:clamp(34px,7vw,56px);letter-spacing:-.035em;font-weight:800;margin-bottom:20px}
.lede{font-size:18px;color:#cfcabd;max-width:60ch}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 22px;border-radius:12px;border:1px solid transparent;background:var(--red);color:#17090a;font-weight:700;transition:transform .12s,filter .12s}
.btn:hover{filter:brightness(1.1)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--fg);border-color:var(--line)}
.btn.ghost:hover{border-color:rgba(255,255,255,.3)}
.link{background:none;border:0;padding:6px 2px;color:var(--muted);font-size:14px}
.link:hover{color:var(--fg)}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:24px;margin-bottom:16px}
.panel h2{margin-bottom:8px}
.axis-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.axis-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:20px}
.axis-card .kicker{margin-bottom:14px}
.track{height:8px;border-radius:99px}
.ends{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--muted);margin:8px 0 12px}
.compass-panel{padding:12px}
.compass{display:block;width:100%;height:auto}

.qcard.enter,.enter{animation:rise .35s ease both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.qhead{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:6px}
.qhead .kicker{margin:0}
.axis-tag{font:700 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:99px;border:1px solid}
.axis-tag.x{color:var(--red);border-color:rgba(255,74,61,.4)}
.axis-tag.y{color:var(--purple);border-color:rgba(180,140,255,.4)}
.axis-tag.fake{color:var(--amber);border-color:rgba(255,179,71,.4)}
.statement{font-size:clamp(21px,3.6vw,27px);line-height:1.3;font-weight:650;letter-spacing:-.015em;margin:22px 0 26px;min-height:5.2em}
.prop-lab{font:800 22px var(--mono);color:var(--amber);margin-top:20px}
.prop-lab + .statement{min-height:0;margin:6px 0 10px}
.likert,.yn{display:grid;gap:8px}
.yn{grid-template-columns:1fr 1fr;margin-top:22px}
.pip,.ch{display:flex;align-items:center;gap:12px;width:100%;padding:13px 16px;text-align:left;background:var(--panel2);border:1px solid var(--line);border-radius:12px;font-weight:600;transition:border-color .12s,background .12s,transform .12s}
.pip:hover,.ch:hover{border-color:rgba(255,255,255,.3);transform:translateX(2px)}
.ch{justify-content:center;font-size:18px;padding:18px}
.ch:hover{transform:none}
kbd{font:600 11px var(--mono);color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:2px 7px;min-width:24px;text-align:center}
.pip.pos[aria-pressed="true"],.ch.y[aria-pressed="true"]{background:rgba(255,74,61,.18);border-color:var(--red)}
.pip.neg[aria-pressed="true"],.ch.n[aria-pressed="true"]{background:rgba(180,140,255,.18);border-color:var(--purple)}
.pip.zero[aria-pressed="true"]{background:rgba(255,255,255,.1);border-color:#fff}
.qnav{display:flex;justify-content:space-between;margin-top:14px}
.quiz-side{display:flex;align-items:center;gap:16px;margin-top:6px}
.mini{position:relative;flex:none;width:72px;height:72px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.mini i{position:absolute;background:var(--line)}
.mini .mx{left:50%;top:0;bottom:0;width:1px}
.mini .my{top:50%;left:0;right:0;height:1px}
.mini b{position:absolute;width:10px;height:10px;margin:-5px;border-radius:50%;background:var(--red);box-shadow:0 0 12px var(--red);transition:left .3s,top .3s}

.result-head{border-color:rgba(255,255,255,.16)}
.fac-name{font-size:clamp(32px,6vw,48px);font-weight:800;letter-spacing:-.03em;margin-bottom:12px}
.meters{display:grid;gap:18px;margin-top:22px}
.meter{position:relative;height:8px;border-radius:99px;background:linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,.2))}
.mk{position:absolute;top:50%;width:18px;height:18px;margin:-9px;border-radius:50%;background:var(--red);border:3px solid #fff}
.meter-row .ends{margin:8px 0 6px}
.near{display:grid;gap:8px}
.near-item{display:grid;grid-template-columns:1fr auto;gap:0 12px;padding:12px 14px;background:var(--panel2);border-radius:12px}
.near-item span{grid-column:1;font-size:13px;color:var(--muted)}
.near-item i{grid-row:1 / span 2;grid-column:2;align-self:center;font:700 12px var(--mono);color:var(--amber);font-style:normal}
.fac-cols{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.takes{list-style:none;padding:0}
.takes li{padding:10px 0;border-top:1px solid var(--line)}
.takes li:first-child{border-top:0}
.pos{color:var(--red)}
.neg{color:var(--purple)}
.bars{display:grid;gap:10px;margin-top:14px}
.gbar{display:grid;grid-template-columns:minmax(120px,210px) 1fr 52px;gap:12px;align-items:center;font-size:14px}
.nm{display:flex;align-items:center;gap:8px;font-weight:600}
.fdot{flex:none;width:9px;height:9px;border-radius:50%}
.gbar .tr{height:8px;background:var(--panel2);border-radius:99px;overflow:hidden}
.gbar .tr i{display:block;height:100%;border-radius:99px}
.pc{font:600 12px var(--mono);color:var(--muted);text-align:right}
.table-wrap{overflow-x:auto}
.sheet{width:100%;border-collapse:collapse;font-size:14px}
.sheet th{font:700 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:left;padding:8px 10px}
.sheet td{padding:9px 10px;border-top:1px solid var(--line)}
.banner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.sharebar{display:flex;flex-wrap:wrap;gap:12px;margin:8px 0 16px}
.notes ul{color:#b8b4a8;font-size:14px}

.foot{border-top:1px solid var(--line);padding:26px 16px 36px;font-size:13px;color:var(--muted)}
.foot p{margin-bottom:6px}
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:var(--fg);color:#111;padding:10px 18px;border-radius:99px;font-weight:600;font-size:14px;opacity:0;pointer-events:none;transition:.25s;z-index:50}
.toast.on{opacity:1;transform:translate(-50%,0)}
.burst{position:fixed;z-index:60;pointer-events:none;font-size:22px;animation:burst .8s ease-out forwards}
@keyframes burst{to{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:0}}

@media (max-width:640px){
  .hide-sm,.top .pill{display:none}
  .qhead .kicker{font-size:10px;letter-spacing:.1em}
  .axis-grid,.fac-cols{grid-template-columns:1fr}
  .panel{padding:18px}
  .gbar{grid-template-columns:1fr 52px;row-gap:4px}
  .gbar .tr{grid-column:1 / -1;grid-row:2}
  .statement{min-height:0}
  .brand span{font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}