/* My Dark Page — design system (from the approved scanner mock) */
:root{
  --void:#0b0a1a; --panel:#17152d; --panel2:#221f3f; --ink:#120e26;
  --cyan:#3ee9ff; --magenta:#ff3d9a; --amber:#ffb52e; --lime:#7cff5a; --violet:#a78bfa;
  --text:#eef0ff; --muted:#9a97c2; --line:rgba(158,150,230,.16);
  --display:'Titan One',system-ui,sans-serif;
  --body:'Nunito',system-ui,sans-serif;
  --mono:'Share Tech Mono',ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
html{background:var(--void);color-scheme:dark;-webkit-text-size-adjust:100%}
body{
  margin:0;color:var(--text);font-family:var(--body);font-size:16px;line-height:1.5;
  padding-inline:16px;padding-block:0 40px;min-height:100%;
  background:
    radial-gradient(900px 500px at 50% -8%, rgba(139,92,246,.28), transparent 60%),
    radial-gradient(700px 400px at 90% 100%, rgba(255,61,154,.12), transparent 60%),
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(158,150,230,.07) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(158,150,230,.07) 39px 40px),
    var(--void);
}
.app{max-width:1080px;margin:0 auto}
h1,h2,h3{margin:0;text-wrap:balance}
p{margin:0}
button{font:inherit}
a{color:var(--cyan)}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}

/* top bar */
.bar{max-width:1080px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding-block:18px}
.logo{font-family:var(--display);font-size:22px;letter-spacing:.05em;color:#fff;text-decoration:none;text-shadow:0 0 18px rgba(255,61,154,.65);display:flex;align-items:center;gap:10px}
.logo i{width:14px;height:14px;border-radius:50%;background:var(--magenta);box-shadow:0 0 14px var(--magenta);display:inline-block;animation:pulse 2s infinite}
.nav{display:flex;align-items:center;gap:6px 18px;flex-wrap:wrap}
.nav a{color:var(--text);text-decoration:none;font-weight:900;font-size:14px;letter-spacing:.04em;text-transform:uppercase;padding:6px 2px;border-bottom:3px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--magenta)}
.hud-tag{font-family:var(--mono);color:var(--cyan);font-size:12px;letter-spacing:.14em;border:1px solid rgba(62,233,255,.35);padding:5px 12px;border-radius:999px;background:rgba(62,233,255,.06)}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
.lang-switch{display:inline-flex;gap:2px;border:1px solid var(--line);border-radius:999px;padding:2px}
.lang-switch a{font-family:var(--mono);font-size:11px;letter-spacing:.08em;padding:3px 8px;border-radius:999px;border:0;text-transform:none}
.lang-switch a[aria-current="true"]{background:var(--magenta);color:#fff}

/* buttons */
.btn{font-family:var(--display);font-size:18px;letter-spacing:.03em;color:#fff;background:var(--magenta);border:4px solid var(--ink);border-radius:16px;padding:14px 26px;cursor:pointer;box-shadow:0 6px 0 #a3125a,0 14px 30px rgba(255,61,154,.35);transition:transform .08s,box-shadow .08s,filter .15s;text-decoration:none;display:inline-flex;align-items:center;gap:10px;line-height:1.1}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(5px);box-shadow:0 1px 0 #a3125a}
.btn.ghost{background:var(--panel2);box-shadow:0 6px 0 #0c0a1c;color:var(--cyan)}
.btn.ghost:active{box-shadow:0 1px 0 #0c0a1c}

/* type helpers */
.eyebrow{font-family:var(--mono);color:var(--cyan);letter-spacing:.18em;font-size:12px;text-transform:uppercase}
.h2{font-family:var(--display);font-size:clamp(26px,4vw,40px);line-height:1.05;color:#fff;margin:8px 0 10px;text-shadow:0 3px 0 #6d28d9,0 8px 22px rgba(139,92,246,.45)}
.lead{color:var(--muted);font-size:18px;max-width:56ch;margin-bottom:22px}
.meta{margin-top:16px;font-family:var(--mono);color:var(--muted);font-size:12px;letter-spacing:.1em}
.meta b{color:var(--lime);font-weight:400}
.section-head{padding-block:34px 18px}

/* hero (quiz intro + home) */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:center;padding-block:28px 12px}
h1{font-family:var(--display);font-size:clamp(38px,6vw,66px);line-height:.98;margin:10px 0 16px;color:#fff;text-shadow:0 4px 0 #6d28d9,0 10px 28px rgba(139,92,246,.55)}
h1 em{font-style:normal;color:var(--magenta);text-shadow:0 4px 0 #8a1553,0 10px 28px rgba(255,61,154,.5)}
.readouts{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.readouts.wide{grid-template-columns:repeat(3,1fr)}
.mini{background:var(--panel);border:3px solid var(--ink);border-radius:20px;padding:12px 10px 14px;text-align:center;box-shadow:0 0 0 1px var(--line),0 12px 30px rgba(0,0,0,.45);transition:transform .2s;text-decoration:none;color:var(--text);display:block}
.mini:hover{transform:translateY(-4px) rotate(-1deg);box-shadow:0 0 0 2px var(--c),0 12px 30px rgba(0,0,0,.45)}
.mini svg{width:100%;max-width:120px;height:auto}
.mini .n{font-family:var(--display);font-size:14px;color:#fff;margin-top:6px;letter-spacing:.03em}
.mini .t{font-family:var(--mono);font-size:11px;color:var(--c);letter-spacing:.1em}
.readout-label{grid-column:1/-1;font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.18em;text-align:center}

.hero-lineup{display:flex;justify-content:center;align-items:flex-end;gap:0}
.lineup-char{width:26%;margin-inline:-3%;filter:drop-shadow(0 16px 20px rgba(0,0,0,.5));animation:float 3.4s ease-in-out infinite;animation-delay:calc(var(--i) * -.6s)}
.lineup-char svg{width:100%;height:auto}

/* quiz cards */
.quiz-grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.quiz-card{background:var(--panel);border:3px solid var(--ink);border-radius:22px;overflow:hidden;text-decoration:none;color:var(--text);box-shadow:0 0 0 1px var(--line),0 14px 34px rgba(0,0,0,.45);transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column}
.quiz-card:hover{transform:translateY(-4px);box-shadow:0 0 0 2px var(--magenta),0 14px 34px rgba(0,0,0,.45)}
.qc-chars{display:flex;justify-content:center;gap:0;padding:14px 10px 0;background:radial-gradient(circle at 50% 100%,rgba(62,233,255,.16),transparent 70%)}
.qc-chars svg{width:26%;margin-inline:-2%;height:auto}
.qc-body{padding:14px 18px 18px;display:grid;gap:4px}
.qc-series{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--cyan);text-transform:uppercase}
.qc-body b{font-family:var(--display);font-weight:400;font-size:20px;line-height:1.15;color:#fff}
.qc-meta,.qc-list{font-size:13px;color:var(--muted)}
.quiz-card.soon{opacity:.75;border-style:dashed;border-color:rgba(62,233,255,.35)}
.quiz-card.soon .qc-chars svg{opacity:.8}

/* how it works */
.how-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.how-step{background:rgba(12,10,28,.6);border:2px solid var(--line);border-radius:18px;padding:18px;display:grid;gap:6px;align-content:start}
.how-num{font-family:var(--mono);color:var(--magenta);letter-spacing:.16em;font-size:12px}
.how-step b{font-family:var(--display);font-weight:400;font-size:17px;color:#fff}
.how-step p{color:var(--muted);font-size:14px}

/* quiz screen */
.quiz-grid{display:grid;grid-template-columns:340px 1fr;gap:28px;padding-block:12px;align-items:start}
.scanner{background:linear-gradient(180deg,#1c1939,#100e24);border:3px solid var(--ink);border-radius:26px;padding:16px;box-shadow:inset 0 0 0 1px var(--line),0 24px 50px rgba(0,0,0,.5)}
.readout{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;color:var(--cyan);letter-spacing:.14em;margin-bottom:10px}
.readout.bottom{margin:10px 0 0}
.readout .dot{color:var(--magenta);animation:pulse 1s infinite;display:inline-block}
.tube{position:relative;aspect-ratio:3/4;max-width:100%;border-radius:140px 140px 30px 30px;background:linear-gradient(180deg,rgba(62,233,255,.14),rgba(62,233,255,.03));border:2px solid rgba(62,233,255,.5);overflow:hidden;box-shadow:inset 0 0 50px rgba(62,233,255,.18),0 0 30px rgba(62,233,255,.15)}
.tube::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 5px,rgba(255,255,255,.03) 5px 6px);pointer-events:none}
.tube-char{position:absolute;inset:8% 12% 6%;display:grid;place-items:center;animation:float 3.2s ease-in-out infinite}
.tube-char svg{width:100%;height:100%}
.tube-char svg.pop{animation:popc .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes popc{0%{transform:scale(.82)}100%{transform:scale(1)}}
.scanline{position:absolute;left:0;right:0;top:4%;height:3px;background:var(--cyan);box-shadow:0 0 16px var(--cyan),0 0 40px var(--cyan);animation:scan 2.4s ease-in-out infinite;opacity:.95;z-index:2}
@keyframes scan{0%{top:4%}50%{top:94%}100%{top:4%}}
.ring{position:absolute;left:10%;width:80%;height:12%;bottom:5%;border:2px dashed rgba(62,233,255,.7);border-radius:50%;animation:spin 7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.platform{height:20px;margin:10px auto 0;width:82%;border-radius:50%;background:linear-gradient(#3a3570,#221f45);border:2px solid var(--ink);box-shadow:0 0 26px rgba(62,233,255,.4)}

.progress{position:relative;height:28px;border:3px solid var(--ink);border-radius:999px;background:var(--panel2);overflow:hidden;box-shadow:0 0 0 1px var(--line)}
.progress-fill{height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--magenta));transition:width .5s cubic-bezier(.2,.9,.3,1.2);box-shadow:0 0 14px rgba(255,61,154,.6)}
.progress-label{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:#fff;text-shadow:0 1px 3px #000}
.q-card{margin-top:18px;background:var(--panel);border:3px solid var(--ink);border-radius:24px;padding:22px;box-shadow:0 0 0 1px var(--line),0 18px 40px rgba(0,0,0,.45)}
.q-trait{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--c,var(--cyan))}
.q-text{font-family:var(--display);font-size:clamp(22px,3vw,30px);line-height:1.15;margin:10px 0 20px;color:#fff;letter-spacing:.01em}
.answers{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.ans{font-family:var(--body);font-weight:900;font-size:14px;color:#fff;background:var(--panel2);border:3px solid var(--ink);border-radius:14px;padding:12px 6px;cursor:pointer;box-shadow:0 5px 0 #0c0a1c;display:flex;flex-direction:column;align-items:center;gap:8px;transition:transform .08s,box-shadow .08s,background .15s}
.ans .pips{display:flex;gap:3px}
.pip{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.16)}
.pip.on{background:var(--magenta);box-shadow:0 0 8px var(--magenta)}
.ans:hover{background:#2c2854;transform:translateY(-2px)}
.ans:active,.ans.pressed{transform:translateY(4px);box-shadow:0 1px 0 #0c0a1c;background:#3a2f6e}
.ans kbd{font-family:var(--mono);font-size:10px;color:var(--muted)}
.q-hint{margin-top:14px;color:var(--muted);font-size:13px}

.hud{margin-top:18px;display:grid;grid-template-columns:repeat(2,1fr);gap:10px 22px;background:rgba(12,10,28,.6);border:2px solid var(--line);border-radius:18px;padding:14px 16px}
.hud-title{grid-column:1/-1;font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--muted)}
.meter{display:grid;grid-template-columns:110px 1fr 30px;align-items:center;gap:10px;font-size:13px;font-weight:700}
.m-track{height:12px;border:2px solid var(--ink);border-radius:999px;background:#0e0c20;overflow:hidden}
.m-fill{height:100%;width:0;background:var(--c);box-shadow:0 0 10px var(--c);transition:width .5s cubic-bezier(.2,.9,.3,1.2)}
.m-val{font-family:var(--mono);color:var(--c);font-variant-numeric:tabular-nums;text-align:right}

/* result card (live + static page) */
.flash{position:fixed;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:9}
.flash.go{animation:flash .8s ease-out}
@keyframes flash{0%{opacity:0}12%{opacity:.95}100%{opacity:0}}
.result-card{--c:var(--amber);background:var(--panel);border:4px solid var(--ink);border-radius:28px;overflow:hidden;box-shadow:0 0 0 2px var(--c),0 0 70px color-mix(in srgb,var(--c) 40%,transparent),0 30px 60px rgba(0,0,0,.5);animation:pop .8s cubic-bezier(.2,1.4,.4,1) both;margin-top:12px}
.result-card.static{animation:none}
@keyframes pop{from{transform:scale(.55) rotate(-5deg);opacity:0}to{transform:none;opacity:1}}
.rc-head{background:var(--c);color:var(--ink);font-family:var(--mono);letter-spacing:.2em;font-size:12px;padding:9px 20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px}
.rc-body{display:grid;grid-template-columns:300px 1fr;gap:26px;padding:26px;align-items:center}
.rc-char{background:radial-gradient(circle at 50% 62%,color-mix(in srgb,var(--c) 32%,transparent),transparent 70%);display:grid;place-items:center;animation:float 3.4s ease-in-out infinite}
.rc-char svg{width:100%;max-width:280px;height:auto;filter:drop-shadow(0 18px 24px rgba(0,0,0,.5))}
.rc-eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.18em;color:var(--muted);text-transform:uppercase}
.rc-name{font-family:var(--display);font-size:clamp(34px,5vw,52px);line-height:1;color:#fff;margin:8px 0 6px;text-shadow:0 4px 0 color-mix(in srgb,var(--c) 55%,#000),0 10px 30px color-mix(in srgb,var(--c) 45%,transparent)}
.rc-tag{font-family:var(--mono);color:var(--c);letter-spacing:.12em;font-size:13px}
.gauge{display:flex;align-items:center;gap:16px;margin:18px 0}
.gauge .dial{position:relative;width:104px;height:104px;flex:none}
.gauge svg{width:100%;height:100%}
.gauge .arc{stroke:var(--c);filter:drop-shadow(0 0 6px var(--c));transition:stroke-dashoffset 1.4s cubic-bezier(.2,.9,.3,1)}
.gauge .num{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-size:30px;color:#fff;font-variant-numeric:tabular-nums}
.gauge .num small{font-size:11px;font-family:var(--mono);color:var(--muted);display:block;text-align:center;letter-spacing:.1em}
.gauge-text{color:var(--muted);font-size:14px;max-width:34ch}
.gauge-text b{color:#fff}
.rc-blurb{font-size:16px;color:var(--text);max-width:56ch;margin-top:12px}
.rc-cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
.rc-traits{padding:0 26px 22px;display:grid;grid-template-columns:repeat(2,1fr);gap:10px 26px}
.profile-note{grid-column:1/-1;font-size:12px;color:var(--muted);font-family:var(--mono);letter-spacing:.06em}
.rc-tips{background:var(--panel2);margin:0 26px 22px;border-radius:18px;padding:18px 20px;border:2px solid var(--line)}
.rc-tips.inline{margin:0}
.rc-tips h3{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--c);margin-bottom:10px;font-weight:400}
.rc-tips ul{margin:0;padding-left:0;list-style:none;display:grid;gap:8px}
.rc-tips li{display:flex;gap:10px;font-size:15px}
.rc-tips li::before{content:"▶";color:var(--c);font-size:10px;margin-top:6px}
.rc-actions{display:flex;gap:12px;flex-wrap:wrap;padding:0 26px 26px}
.money-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
.cta{background:var(--panel);border:3px solid var(--ink);border-radius:20px;padding:18px;display:flex;gap:14px;align-items:center;text-decoration:none;color:var(--text);box-shadow:0 0 0 1px var(--line);transition:transform .15s}
.cta:hover{transform:translateY(-3px)}
.cta .ico{width:54px;height:54px;flex:none;border-radius:14px;display:grid;place-items:center;background:var(--panel2);border:2px solid var(--line);font-size:24px}
.cta b{font-family:var(--display);font-weight:400;letter-spacing:.02em;font-size:16px;display:block}
.cta small{color:var(--muted);font-size:12px;display:block;margin-top:2px}
.cta .go{margin-left:auto;font-family:var(--display);color:var(--cyan);font-size:22px}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:var(--lime);color:var(--ink);font-weight:900;padding:10px 18px;border-radius:999px;border:3px solid var(--ink);opacity:0;transition:.25s;pointer-events:none;z-index:10;max-width:calc(100% - 32px);text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* name prompt */
.name-row{display:grid;gap:6px;margin:0 0 18px;max-width:360px}
.name-row label{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.name-row label span{color:var(--cyan);margin-left:6px}
.name-input{font:inherit;font-weight:700;color:#fff;background:var(--panel2);border:3px solid var(--ink);border-radius:14px;padding:12px 14px;box-shadow:inset 0 2px 0 rgba(255,255,255,.04),0 0 0 1px var(--line)}
.name-input::placeholder{color:var(--muted);font-weight:500}
.name-input:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(62,233,255,.25)}

/* personal readout */
.rc-personal{margin:0 26px 22px;padding:18px 22px;border-left:6px solid var(--c);background:linear-gradient(90deg,color-mix(in srgb,var(--c) 14%,transparent),transparent 70%);border-radius:0 18px 18px 0}
.rc-personal h3{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--c);margin-bottom:8px;font-weight:400}
.rc-personal p{font-size:16px;line-height:1.6;max-width:72ch}
.rc-personal .shared-note{margin-top:10px;font-size:12px;color:var(--muted);font-family:var(--mono);letter-spacing:.04em}
.rc-personal[hidden],.rc-tipped[hidden],.lvl-chip[hidden]{display:none}

/* result extras */
.meter.lvl{grid-template-columns:110px 1fr 30px 44px}
.lvl-chip{font-family:var(--mono);font-style:normal;font-size:9px;letter-spacing:.12em;text-align:center;padding:3px 0;border-radius:6px;border:1px solid var(--line);color:var(--muted)}
.lvl-chip[data-lvl="1"]{color:var(--amber);border-color:rgba(255,181,46,.5)}
.lvl-chip[data-lvl="2"]{color:var(--magenta);border-color:rgba(255,61,154,.6);background:rgba(255,61,154,.1)}
.rc-tipped{margin:0 26px 22px;border:2px dashed rgba(62,233,255,.35);border-radius:18px;padding:16px 20px}
.rc-tipped h3{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--cyan);margin-bottom:10px;font-weight:400}
.rc-tipped ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.rc-tipped li{display:flex;gap:12px;align-items:flex-start;font-size:15px}
.rc-tipped li em{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase;white-space:nowrap}
.tip-ans{flex:none;font-family:var(--display);font-size:12px;letter-spacing:.04em;color:var(--ink);background:var(--c);padding:5px 10px;border-radius:999px;border:2px solid var(--ink);margin-top:1px}
.btn.fb{background:#1877f2;box-shadow:0 6px 0 #0f4fa8,0 14px 30px rgba(24,119,242,.3)}
.btn.fb:active{box-shadow:0 1px 0 #0f4fa8}
.fb-f{font-family:Georgia,serif;font-weight:900;font-size:22px;line-height:1;background:#fff;color:#1877f2;width:26px;height:26px;border-radius:6px;display:inline-grid;place-items:center}

/* result page */
.result-page{padding-block:8px}
.crumbs{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--muted);margin-bottom:14px}
.crumbs a{color:var(--cyan);text-decoration:none}
.result-prose{display:grid;grid-template-columns:1.2fr .8fr;gap:22px;margin-top:22px;align-items:start}
.result-prose section p{margin-top:8px;font-size:17px;max-width:62ch}
.other-readouts{margin-top:34px}
.other-readouts .eyebrow{margin-bottom:14px;display:block}

/* about-scan block under quiz */
.scan-about{margin-top:44px;border-top:1px solid var(--line);padding-top:34px}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.about-grid p{color:var(--muted)}
.about-grid .h2{font-size:clamp(22px,3vw,30px)}
.trait-list{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:8px}
.trait-list li{display:flex;align-items:center;gap:10px;font-size:14px}
.trait-list i{width:12px;height:12px;border-radius:50%;background:var(--c);box-shadow:0 0 10px var(--c)}
.trait-list span{color:var(--muted);font-family:var(--mono);font-size:12px;margin-left:auto}
.faq{display:grid;gap:8px;margin-top:8px}
.faq details{background:var(--panel);border:2px solid var(--line);border-radius:14px;padding:12px 16px}
.faq summary{cursor:pointer;font-weight:900;color:#fff;list-style:none;display:flex;justify-content:space-between;gap:10px}
.faq summary::after{content:"+";color:var(--magenta);font-family:var(--display)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin-top:8px;font-size:14px}
.more-scans{margin-top:34px}
.more-scans .eyebrow{display:block;margin-bottom:14px}

/* prose page */
.prose{max-width:70ch;padding-block:16px}
.prose h2{font-family:var(--display);font-size:22px;color:#fff;margin:28px 0 8px}
.prose p{color:var(--text);margin-top:8px;font-size:16px}
.prose .lead{margin-bottom:0}

/* speech bubble + sound */
.bubble{position:absolute;top:6%;right:6%;max-width:60%;background:#fff;color:var(--ink);font-weight:900;font-size:13px;padding:8px 12px;border-radius:14px 14px 14px 4px;border:3px solid var(--ink);opacity:0;transform:translateY(6px) scale(.9);transition:.2s;pointer-events:none;z-index:3}
.bubble.show{opacity:1;transform:none}
.sound-btn{font:inherit;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--muted);background:transparent;border:1px solid var(--line);border-radius:999px;padding:3px 9px;cursor:pointer}
.sound-btn[aria-pressed="true"]{color:var(--lime);border-color:rgba(124,255,90,.5)}
.start-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.pair-hint{margin-top:10px;font-size:13px;color:var(--muted);max-width:52ch}
.btn.pulse{animation:pulse 1.4s infinite}

/* glitch reveal */
.result-card.glitch{animation:pop .8s cubic-bezier(.2,1.4,.4,1) both,glitch .9s steps(2,end)}
@keyframes glitch{0%{clip-path:inset(0 0 0 0)}10%{clip-path:inset(10% 0 60% 0);transform:translateX(-6px)}20%{clip-path:inset(50% 0 20% 0);transform:translateX(6px)}30%{clip-path:inset(80% 0 5% 0);transform:translateX(-3px)}40%{clip-path:inset(0 0 0 0);transform:none}100%{clip-path:inset(0 0 0 0);transform:none}}

/* stats, poll, vault line */
.rc-stats{margin-top:10px;font-family:var(--mono);font-size:13px;color:var(--cyan);letter-spacing:.04em}
.rc-stats b{color:#fff}
.rc-poll{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 26px 18px;font-weight:700;font-size:14px}
.poll-btn{font:inherit;font-weight:900;font-size:13px;color:#fff;background:var(--panel2);border:3px solid var(--ink);border-radius:999px;padding:7px 14px;cursor:pointer;box-shadow:0 4px 0 #0c0a1c}
.poll-btn:disabled{opacity:.5;cursor:default;transform:translateY(3px);box-shadow:0 1px 0 #0c0a1c}
.rc-poll em{font-style:normal;font-family:var(--mono);font-size:12px;color:var(--lime);letter-spacing:.04em}
.rc-vault{margin:0 26px 18px;font-family:var(--mono);font-size:12px;color:var(--amber);letter-spacing:.08em}

/* scripts */
.rc-scripts{margin:0 26px 22px;border:2px solid var(--line);border-radius:18px;padding:18px 20px;background:rgba(12,10,28,.5)}
.rc-scripts.static{margin:22px 0 0}
.rc-scripts h3{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--c);margin-bottom:12px;font-weight:400}
.scripts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.script{background:var(--panel);border:2px solid var(--ink);border-radius:14px;padding:14px 16px}
.script h4{font-family:var(--display);font-weight:400;font-size:15px;color:#fff;margin:0 0 8px}
.script ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.script li{font-size:14px;line-height:1.45;color:var(--text);padding-left:12px;border-left:3px solid var(--c)}
.scripts-note{margin-top:12px;font-size:12px;color:var(--muted);font-family:var(--mono);letter-spacing:.04em}

/* pair mode */
.pair-mid{display:grid;grid-template-columns:280px 1fr;gap:28px;align-items:center;background:var(--panel);border:3px solid var(--ink);border-radius:24px;padding:26px;box-shadow:0 0 0 1px var(--line),0 18px 40px rgba(0,0,0,.45)}
.pm-char svg{width:100%;height:auto;animation:float 3.4s ease-in-out infinite}
.pair-card .pair-body{display:grid;grid-template-columns:220px 1fr 220px;gap:20px;padding:26px;align-items:center}
.pair-person{text-align:center;background:radial-gradient(circle at 50% 60%,color-mix(in srgb,var(--pc) 28%,transparent),transparent 70%);border-radius:20px;padding:10px}
.pair-char svg{width:100%;max-width:200px;height:auto;filter:drop-shadow(0 14px 18px rgba(0,0,0,.5))}
.pair-who{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--muted);text-transform:uppercase;margin-top:6px}
.pair-arch{font-family:var(--display);color:#fff;font-size:18px}
.pair-center{text-align:center}
.pair-center .rc-blurb{margin-inline:auto}
.pair-center .rc-cta-row{justify-content:center}
.heat{display:flex;justify-content:center;align-items:center;gap:6px;margin:12px 0}
.heat i{width:18px;height:18px;border-radius:50%;background:#0e0c20;border:2px solid var(--ink)}
.heat i.on{background:var(--c);box-shadow:0 0 10px var(--c)}
.heat span{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--c);margin-left:8px}
.pair-readouts{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:0 26px 22px}
.pair-readouts .rc-personal{margin:0}
.pair-list{display:flex;flex-wrap:wrap;gap:10px}
.pair-chip{display:grid;gap:2px;text-decoration:none;color:var(--text);background:var(--panel);border:2px solid var(--ink);border-left:6px solid var(--c);border-radius:12px;padding:8px 12px;min-width:180px}
.pair-chip b{font-family:var(--display);font-weight:400;font-size:14px;color:#fff}
.pair-chip span{font-size:12px;color:var(--muted)}
.pair-chip.current{outline:2px solid var(--c)}
.readouts.wide.two{grid-template-columns:repeat(2,minmax(0,240px));justify-content:center}

/* home extras + feed */
.feed{margin-top:14px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--muted);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.feed b{color:var(--cyan)}
.feed-dot{width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 10px var(--lime);animation:pulse 1.4s infinite;display:inline-block}
.extras-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.extra-card{display:grid;gap:8px;align-content:start;text-decoration:none;color:var(--text);background:var(--panel);border:3px solid var(--ink);border-radius:20px;padding:20px;box-shadow:0 0 0 1px var(--line),0 14px 34px rgba(0,0,0,.45);transition:transform .2s}
.extra-card:hover{transform:translateY(-4px);box-shadow:0 0 0 2px var(--c),0 14px 34px rgba(0,0,0,.45)}
.extra-ico{font-size:28px}
.extra-card b{font-family:var(--display);font-weight:400;font-size:20px;color:#fff}
.extra-card p{color:var(--muted);font-size:14px}

/* vault */
.vault-head{display:grid;grid-template-columns:1fr 260px;gap:24px;align-items:end}
.vault-progress{display:grid;gap:6px;background:var(--panel);border:3px solid var(--ink);border-radius:18px;padding:16px}
.vault-progress b{font-family:var(--display);font-size:28px;color:#fff}
.vault-progress .m-track{height:14px;border:2px solid var(--ink);border-radius:999px;background:#0e0c20;overflow:hidden}
.vault-progress .m-fill{height:100%;background:var(--magenta);box-shadow:0 0 10px var(--magenta);transition:width .6s}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}
.chip{font:inherit;font-weight:900;font-size:12px;color:var(--text);background:var(--panel2);border:2px solid var(--ink);border-radius:999px;padding:6px 12px;cursor:pointer}
.chip.on{background:var(--magenta);color:#fff}
.vault-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.vault-card{position:relative;display:grid;gap:4px;text-align:center;text-decoration:none;color:var(--text);background:var(--panel);border:3px solid var(--ink);border-radius:18px;padding:12px 10px 14px;box-shadow:0 0 0 1px var(--line);transition:transform .2s}
.vault-card svg{width:100%;max-width:110px;height:auto;margin:0 auto;filter:grayscale(1) brightness(.45)}
@media (min-width:861px){.vault-grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}.vault-card{padding:14px 12px 16px}.vault-card svg{max-width:90px}.vault-card b{font-size:15px}.vault-card .vc-tag{font-size:11px}.vault-card .vc-desc{font-size:13px}.vault-card .vc-quiz{font-size:12px}.vault-card .vc-rare{font-size:11px}.vc-num{font-size:12px}.vault-progress b{font-size:34px}}
.vault-head{align-items:start}
.vault-card b{font-family:var(--display);font-weight:400;font-size:13px;color:var(--muted)}
.vault-card .vc-tag{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--muted)}
.vault-card .vc-quiz{font-size:11px;color:var(--muted);opacity:.8}
.vault-card .vc-desc{font-size:11.5px;color:var(--muted);line-height:1.35}
.vault-card .vc-rare{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--cyan);margin-top:2px}
.vault-card .vc-rare[hidden]{display:none}
.vault-intro{margin-top:10px;color:var(--muted);font-size:15px;max-width:62ch}
.vault-share{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.vault-share .btn{font-size:14px;padding:10px 14px}
.vault-faq{margin-top:34px;max-width:760px}
.vault-faq .eyebrow{display:block;margin-bottom:10px}
.vc-num{position:absolute;top:8px;left:10px;font-family:var(--mono);font-size:10px;color:var(--muted)}
.vc-lock{position:absolute;top:6px;right:10px;font-size:12px}
.vault-card.collected svg{filter:none}
.vault-card.collected b{color:#fff}
.vault-card.collected{box-shadow:0 0 0 2px var(--c),0 0 24px color-mix(in srgb,var(--c) 40%,transparent)}
.vault-card.collected .vc-lock{display:none}
.vault-card.collected .vc-tag{color:var(--c)}
.vault-card:hover{transform:translateY(-3px)}

/* red flag */
.rf{max-width:760px;margin:0 auto}
.rf-card{background:var(--panel);border:4px solid var(--ink);border-radius:28px;overflow:hidden;box-shadow:0 0 0 2px var(--magenta),0 0 60px rgba(255,61,154,.3);--c:var(--magenta)}
.rf-body{padding:26px}
.rf-flag{font-family:var(--display);font-size:clamp(24px,4vw,38px);line-height:1.15;color:#fff;margin:10px 0 14px;text-shadow:0 3px 0 #8a1553}
.rf-context{color:var(--text);font-size:16px;max-width:60ch}
.rf-q{margin-top:18px;font-weight:900;color:var(--cyan)}
.rf-answers{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.rf-answers .ans.on{background:#3a2f6e;box-shadow:0 1px 0 #0c0a1c;transform:translateY(4px)}
.rf-verdict{margin-top:18px;border-left:6px solid var(--c);background:linear-gradient(90deg,rgba(255,61,154,.14),transparent 70%);padding:14px 18px;border-radius:0 16px 16px 0}
.rf-verdict[data-v="no"]{--c:var(--lime);background:linear-gradient(90deg,rgba(124,255,90,.14),transparent 70%)}
.rf-verdict[data-v="sometimes"]{--c:var(--amber);background:linear-gradient(90deg,rgba(255,181,46,.14),transparent 70%)}
.rf-verdict h3{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--c);font-weight:400;margin-bottom:6px}
.rf-verdict p{margin-bottom:12px}
.rf .rc-actions{padding:18px 0 0}
.rf-note{margin-top:16px;text-align:center;color:var(--muted);font-size:12px;font-family:var(--mono);letter-spacing:.04em}
.rf-list{list-style:none;margin:0;padding:0;display:grid;gap:12px;counter-reset:rf}
.rf-list li{background:var(--panel);border:2px solid var(--ink);border-left:6px solid var(--c);border-radius:14px;padding:14px 16px}
.rf-list a{text-decoration:none;color:#fff;display:flex;gap:10px;align-items:baseline}
.rf-list a b{font-family:var(--display);font-weight:400;font-size:17px}
.rf-i{font-family:var(--mono);font-size:11px;color:var(--c);letter-spacing:.1em}
.rf-list p{color:var(--muted);font-size:14px;margin-top:6px}
.rf-tag{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--c)}
.rf-scan{font-size:12px;color:var(--cyan);margin-left:10px}

/* full report (Gumroad unlock) */
.report-box{margin-top:22px;background:linear-gradient(135deg,rgba(255,61,154,.12),rgba(62,233,255,.08));border:3px solid var(--ink);border-radius:22px;padding:20px 22px;box-shadow:0 0 0 1px var(--line)}
.rb-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:14px}
.rb-ico{font-size:30px;line-height:1}
.rb-head h3{font-family:var(--display);font-weight:400;font-size:20px;color:#fff;margin:0 0 4px}
.rb-head p{color:var(--muted);font-size:14px;max-width:62ch}
.rb-actions{display:flex;gap:12px;flex-wrap:wrap}
.rb-note{margin-top:10px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--muted)}
.rb-key{margin-top:14px;display:grid;gap:6px;max-width:560px}
.rb-key[hidden],#reportLocked[hidden],#reportUnlocked[hidden]{display:none}
.rb-key label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.rb-key div{display:flex;gap:10px;flex-wrap:wrap}
.rb-key input{flex:1;min-width:220px;font-family:var(--mono);letter-spacing:.06em}
.rb-msg{margin-top:10px;font-weight:700;font-size:14px;color:var(--lime)}
.rb-msg[data-ok="0"]{color:var(--magenta)}
.report-print{display:none}
@media print{
  body.printing-report{background:#fff;color:#111;padding:0}
  body.printing-report > *:not(#reportPrint){display:none!important}
  body.printing-report #reportPrint{display:block;font-family:Georgia,"Times New Roman",serif;color:#111;max-width:720px;margin:0 auto;font-size:12.5pt;line-height:1.5}
  #reportPrint .rp-head{display:flex;justify-content:space-between;align-items:center;gap:20px;border-bottom:2px solid #111;padding-bottom:12px;margin-bottom:16px}
  #reportPrint .rp-brand{font-family:"Courier New",monospace;font-size:10pt;letter-spacing:.14em}
  #reportPrint h1{font-size:22pt;margin:6px 0 4px}
  #reportPrint h2{font-size:26pt;margin:2px 0 4px}
  #reportPrint h3{font-size:12pt;letter-spacing:.12em;text-transform:uppercase;margin:20px 0 8px;border-bottom:1px solid #999;padding-bottom:4px;font-family:"Courier New",monospace}
  #reportPrint h4{font-size:11.5pt;margin:8px 0 4px}
  #reportPrint .rp-char svg{width:150px;height:auto}
  #reportPrint .rp-eyebrow,#reportPrint .rp-tag{font-family:"Courier New",monospace;font-size:9.5pt;letter-spacing:.12em;text-transform:uppercase;color:#444}
  #reportPrint .rp-table{width:100%;border-collapse:collapse}
  #reportPrint .rp-table th,#reportPrint .rp-table td{text-align:left;padding:6px 8px;border-bottom:1px solid #ddd;vertical-align:top;font-size:11pt}
  #reportPrint .rp-bar{height:8px;background:#eee;border-radius:4px;margin-top:4px;width:180px}
  #reportPrint .rp-bar i{display:block;height:100%;border-radius:4px}
  #reportPrint .rp-answers{padding-left:18px;margin:0}
  #reportPrint .rp-answers li{display:flex;gap:10px;align-items:baseline;font-size:10.5pt;padding:3px 0;border-bottom:1px dotted #ddd}
  #reportPrint .rp-answers li span{flex:1}
  #reportPrint .rp-answers li b{white-space:nowrap}
  #reportPrint .rp-answers li em{font-size:9pt;color:#666;white-space:nowrap}
  #reportPrint .rp-scripts{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
  #reportPrint .rp-scripts ul{padding-left:16px;margin:0;font-size:10.5pt}
  #reportPrint .rp-foot{margin-top:24px;font-size:9.5pt;color:#555;border-top:1px solid #999;padding-top:8px}
  #reportPrint h3,#reportPrint .rp-scripts,#reportPrint .rp-table{break-inside:avoid}
}

/* legal pages */
.legal .legal-updated{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--muted);margin-top:4px}
.legal-toc{margin:18px 0 6px;padding-left:20px;columns:2;column-gap:24px;font-size:14px}
.legal-toc a{color:var(--cyan);text-decoration:none}
.legal h2{scroll-margin-top:16px}
.legal-cross{margin-top:28px}
.site-footer .hotlines{font-size:12px}
.site-footer .hotlines a{color:var(--cyan)}
.site-footer .operator{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--muted)}
@media (max-width:600px){.legal-toc{columns:1}}

/* footer */
.site-footer{max-width:1080px;margin:44px auto 0;color:var(--muted);font-size:12px;border-top:1px solid var(--line);padding-top:16px;display:grid;gap:10px}
.site-footer b{color:var(--text)}
.footline{display:flex;gap:16px;flex-wrap:wrap;font-family:var(--mono);letter-spacing:.08em}
.footline a{color:var(--muted);text-decoration:none}
.footline a:hover{color:var(--cyan)}

@media (max-width:860px){
  .hero{grid-template-columns:1fr}
  .hero-lineup{max-width:420px;margin:0 auto}
  .quiz-grid{grid-template-columns:1fr}
  .scanner{max-width:340px;margin:0 auto}
  .rc-body{grid-template-columns:1fr;text-align:center}
  .rc-blurb,.gauge-text{margin-inline:auto}
  .gauge,.rc-cta-row{justify-content:center}
  .money-row,.result-prose,.about-grid,.extras-grid,.pair-readouts,.vault-head{grid-template-columns:1fr}
  .pair-mid{grid-template-columns:1fr;text-align:center}.pm-char{max-width:220px;margin:0 auto}
  .pair-card .pair-body{grid-template-columns:1fr 1fr}.pair-center{grid-column:1/-1;order:-1}
  .scripts{grid-template-columns:1fr}
  .how-grid{grid-template-columns:1fr 1fr}
  .readouts.wide{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:600px){
  .answers{grid-template-columns:1fr}
  .ans{flex-direction:row;justify-content:space-between;padding:12px 16px}
  .ans kbd{display:none}
  .rc-traits,.hud,.how-grid,.rf-answers{grid-template-columns:1fr}
  .pair-card .pair-body{grid-template-columns:1fr}
  .rc-scripts,.rc-poll,.rc-vault{margin-inline:16px}.rc-scripts.static{margin-inline:0}
  .meter.lvl{grid-template-columns:90px 1fr 30px 44px}
  .rc-tipped,.rc-tips,.rc-personal{margin-inline:16px}
  .rc-char svg{max-width:220px}
  .readouts.wide{grid-template-columns:1fr 1fr}
  .nav a{font-size:12px}
  .hud-tag{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}