:root{--bg:#070a12;--panel:#0d111d;--ink:#eef4ee;--muted:#8c98a8;--line:rgba(211,228,222,.16);--acid:#c8ff61;--cyan:#67e8f9;--violet:#9b87f5;--warm:#ffb86b;--serif:'Noto Sans SC',sans-serif;--mono:'Space Mono',monospace}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--serif);min-height:100vh;overflow-x:hidden}button{font:inherit;color:inherit}button:focus-visible{outline:2px solid var(--acid);outline-offset:4px}#starfield{position:fixed;inset:0;width:100%;height:100%;z-index:-3}.noise{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.055;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E")}.topbar{height:74px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(22px,5vw,76px);border-bottom:1px solid var(--line);font-family:var(--mono);font-size:11px;letter-spacing:.09em}.brand{background:none;border:0;display:flex;gap:10px;align-items:center;cursor:pointer;padding:8px 0}.brand-mark{color:var(--acid);font-size:18px}.signal{color:var(--muted);display:flex;align-items:center;gap:8px}.signal i{width:6px;height:6px;border-radius:50%;background:var(--acid);box-shadow:0 0 12px var(--acid);animation:pulse 2s infinite}.screen{display:none;min-height:calc(100vh - 74px);padding:clamp(38px,6vw,90px) clamp(22px,7vw,110px);animation:screenIn .65s cubic-bezier(.2,.8,.2,1)}.screen.active{display:block}#intro.active{display:grid;grid-template-columns:1.12fr .88fr;align-items:center;gap:7vw}.eyebrow,.tiny,.question-code{font-family:var(--mono);font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:var(--acid)}.intro-copy h1{font-size:clamp(52px,7.4vw,112px);line-height:.95;letter-spacing:-.07em;margin:23px 0 28px;font-weight:700}.intro-copy h1 em{font-style:normal;color:transparent;-webkit-text-stroke:1px rgba(238,244,238,.65)}.lead{color:#b7c1c9;line-height:1.8;max-width:570px;font-size:clamp(16px,1.5vw,20px);font-weight:300}.intro-actions{display:flex;align-items:center;gap:28px;margin:42px 0}.primary{min-width:210px;border:1px solid var(--acid);background:var(--acid);color:#0b1009;padding:0 6px 0 23px;height:57px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-weight:700;transition:.25s}.primary b{display:grid;place-items:center;width:44px;height:44px;background:#10150e;color:var(--acid);font-size:19px}.primary:hover{box-shadow:0 0 36px rgba(200,255,97,.22);transform:translateY(-2px)}.text-button,.quit,.share,.section-title button{border:0;background:none;color:#a9b3bd;cursor:pointer;text-decoration:underline;text-underline-offset:5px}.meta-row{display:flex;gap:28px;color:#75808d;font:10px var(--mono);letter-spacing:.08em}.specimen{position:relative;aspect-ratio:1;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;max-width:570px}.specimen:before,.specimen:after{content:'';position:absolute;background:var(--line)}.specimen:before{width:120%;height:1px}.specimen:after{height:120%;width:1px}.orbit{position:absolute;border:1px solid var(--line);border-radius:50%;animation:spin 18s linear infinite}.orbit-a{inset:13%;border-top-color:var(--acid);transform:rotate(22deg)}.orbit-b{inset:25%;border-bottom-color:var(--cyan);animation-direction:reverse;animation-duration:11s}.otter-glyph{width:40%;aspect-ratio:1.3;border:1px solid rgba(200,255,97,.5);border-radius:50% 50% 46% 46%;display:flex;align-items:center;justify-content:center;gap:11%;font:clamp(16px,2.3vw,36px) var(--mono);box-shadow:inset 0 0 45px rgba(103,232,249,.08),0 0 60px rgba(200,255,97,.06)}.otter-glyph span{color:var(--acid)}.otter-glyph i{width:7%;aspect-ratio:1;border-radius:50%;background:var(--ink);font-size:0}.otter-glyph b{position:absolute;margin-top:15%;font-weight:400}.specimen>p{position:absolute;left:8%;top:8%;font:10px/1.6 var(--mono);color:var(--muted)}.specimen>p strong{color:var(--ink);font-size:16px}.coordinates{position:absolute;right:7%;bottom:8%;text-align:right;font:9px/1.8 var(--mono);color:var(--muted)}
#quiz{max-width:1200px;margin:auto;padding-top:34px}.quiz-head{display:flex;justify-content:space-between;align-items:flex-end}.quiz-head>div{display:flex;flex-direction:column;gap:8px}.quiz-head strong{font:22px var(--mono)}.quit{font-size:12px}.progress{height:1px;background:var(--line);margin:17px 0 0}.progress i{display:block;height:2px;background:var(--acid);box-shadow:0 0 11px rgba(200,255,97,.6);transition:width .55s}.question-wrap{max-width:880px;margin:clamp(55px,8vh,95px) auto 50px}.question-code{color:var(--violet)}.question-wrap h2{font-size:clamp(27px,3.4vw,48px);line-height:1.35;letter-spacing:-.035em;margin:18px 0 13px;font-weight:600}.question-note{color:var(--muted);margin-bottom:36px}.answers{display:grid;grid-template-columns:1fr 1fr;gap:13px}.answer{position:relative;text-align:left;min-height:88px;padding:20px 52px 20px 66px;border:1px solid var(--line);background:rgba(13,17,29,.72);cursor:pointer;transition:.22s;line-height:1.55}.answer span{position:absolute;left:21px;top:22px;color:var(--muted);font:12px var(--mono)}.answer:after{content:'↗';position:absolute;right:20px;top:22px;color:transparent}.answer:hover{border-color:rgba(200,255,97,.65);background:rgba(200,255,97,.055);transform:translateX(4px)}.answer:hover span,.answer:hover:after{color:var(--acid)}.question-wrap.leaving{animation:questionOut .25s both}.quiz-foot{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:15px;color:#606b79;font:9px var(--mono);letter-spacing:.05em}
#scanning{text-align:center;place-items:center;align-content:center}#scanning.active{display:grid}.scan-core{width:190px;height:190px;position:relative;display:grid;place-items:center;margin-bottom:35px}.scan-core span{font-size:44px;color:var(--acid);filter:drop-shadow(0 0 14px var(--acid))}.scan-ring{position:absolute;inset:18px;border:1px solid var(--acid);border-radius:50%;animation:scan 2s ease-out infinite}.scan-ring.delay{animation-delay:1s}.scan-core:before,.scan-core:after{content:'';position:absolute;background:var(--line)}.scan-core:before{width:260px;height:1px}.scan-core:after{height:260px;width:1px}#scanning h2{font-size:clamp(23px,3vw,40px);font-weight:500;margin:15px 0 30px}.scan-progress{height:2px;background:var(--line);width:min(430px,70vw)}.scan-progress i{display:block;height:100%;background:var(--acid);width:0}.scan-percent{font:11px var(--mono);color:var(--muted)}
#result{max-width:1440px;margin:auto}.result-top{display:flex;justify-content:space-between;margin-bottom:28px}.share{font-size:12px}.result-grid{display:grid;grid-template-columns:.9fr 1.1fr;border:1px solid var(--line)}.result-hero{min-height:590px;padding:42px;position:relative;overflow:hidden;background:radial-gradient(circle at 50% 44%,rgba(103,232,249,.12),transparent 35%)}.serial{font:10px var(--mono);color:var(--muted)}.result-glyph{height:250px;display:grid;place-items:center;font-size:130px;color:var(--acid);text-shadow:0 0 60px rgba(200,255,97,.3);animation:float 5s ease-in-out infinite}.result-label{font-size:12px;color:var(--muted);margin:0}.result-hero h2{font-size:clamp(38px,5vw,70px);line-height:1.08;letter-spacing:-.05em;margin:8px 0 9px}.result-subtitle{font:12px var(--mono);color:var(--acid);letter-spacing:.09em}.match{position:absolute;bottom:35px;left:42px;right:42px;border-top:1px solid var(--line);padding-top:15px;display:flex;justify-content:space-between;color:var(--muted);font:11px var(--mono)}.match strong{color:var(--ink);font-size:18px}.result-copy{border-left:1px solid var(--line);padding:clamp(32px,5vw,72px);display:flex;flex-direction:column;justify-content:center}.quote-mark{font:90px/1 Georgia;color:var(--acid);height:50px}.result-copy h3{font-size:clamp(25px,3vw,42px);line-height:1.35;max-width:700px;margin:20px 0}.result-copy>p{color:#aab5bf;line-height:2;max-width:720px}.tags{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0 35px}.tags span{border:1px solid var(--line);padding:8px 12px;font:10px var(--mono);color:var(--cyan)}.warning{border-left:2px solid var(--violet);padding:4px 0 4px 18px}.warning span{font:10px var(--mono);color:var(--violet)}.warning p{margin:8px 0 0;color:#aab5bf;font-size:13px;line-height:1.7}.dimensions{margin-top:22px;border:1px solid var(--line);padding:30px 38px}.section-title{display:flex;justify-content:space-between;font:11px var(--mono);letter-spacing:.09em}.section-title button{font-size:11px}.dimension-list{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:30px}.dimension .labels{display:flex;justify-content:space-between;font:10px var(--mono);color:var(--muted)}.dimension .labels b{color:var(--ink);font-weight:400}.bar{height:4px;background:#1b2230;margin:11px 0;position:relative}.bar i{height:100%;display:block;background:linear-gradient(90deg,var(--violet),var(--cyan),var(--acid));transition:width 1.2s}.dimension small{color:#636e7d}.deep-read{display:none;border-top:1px solid var(--line);margin-top:30px;padding-top:25px;color:#aab5bf;line-height:1.9}.deep-read.open{display:block}.result-actions{display:flex;align-items:center;gap:30px;margin-top:28px}.result-actions p{color:#626c78;font-size:11px}
dialog{width:min(620px,calc(100vw - 34px));background:#101521;color:var(--ink);border:1px solid rgba(200,255,97,.4);padding:45px;box-shadow:0 30px 100px #000}dialog::backdrop{background:rgba(3,5,10,.82);backdrop-filter:blur(8px)}dialog h2{font-size:28px}dialog p:not(.eyebrow){color:#a9b3bd;line-height:1.9}.dialog-close{position:absolute;right:20px;top:15px;background:0;border:0;font-size:25px;cursor:pointer}.toast{position:fixed;bottom:28px;left:50%;transform:translate(-50%,30px);background:var(--acid);color:#0b1009;padding:12px 20px;font-size:12px;opacity:0;pointer-events:none;transition:.3s;z-index:10}.toast.show{opacity:1;transform:translate(-50%,0)}
@keyframes screenIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes pulse{50%{opacity:.3}}@keyframes spin{to{transform:rotate(382deg)}}@keyframes scan{0%{transform:scale(.4);opacity:0}35%{opacity:1}100%{transform:scale(1.35);opacity:0}}@keyframes questionOut{to{opacity:0;transform:translateX(-22px)}}@keyframes float{50%{transform:translateY(-12px) rotate(2deg)}}
@media(max-width:800px){.topbar{height:62px}.screen{min-height:calc(100vh - 62px)}#intro.active{display:block}.intro-copy h1{font-size:54px;margin-top:17px}.specimen{width:72vw;margin:60px auto 10px}.answers{grid-template-columns:1fr}.answer{min-height:78px}.quiz-foot{display:none}.result-grid{grid-template-columns:1fr}.result-hero{min-height:530px}.result-copy{border-left:0;border-top:1px solid var(--line)}.dimension-list{grid-template-columns:1fr}.result-actions{align-items:flex-start;flex-direction:column}.meta-row{gap:13px;flex-wrap:wrap}.signal{display:none}.dimensions{padding:25px 20px}.section-title{gap:20px}.screen{padding-left:20px;padding-right:20px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}