:root{color-scheme:dark;--ink:#02040a;--text:#edece8;--muted:#b1b7c5;--dim:#808799;--line:rgba(188,201,234,.24);--aqua:#d9eafa;--serif:'Iowan Old Style','Baskerville','Palatino Linotype','Times New Roman',serif;--sans:'Segoe UI','Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;--mono:'SFMono-Regular',Consolas,'Liberation Mono',monospace}
*,*::before,*::after{box-sizing:border-box}
html{height:100%;background:var(--ink)}
body{min-height:100%;margin:0;color:var(--text);background:radial-gradient(ellipse at 50% 46%,#0a1020 0%,#03050b 43%,#010207 84%);font-family:var(--sans);overflow-x:hidden}
button{font:inherit;touch-action:manipulation}
button:focus-visible,.interaction-surface:focus-visible{outline:2px solid #b5e5ff;outline-offset:6px}
button:disabled{cursor:not-allowed;opacity:.5}
[hidden]{display:none!important}
#sky,.nebula,.vignette{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}
#sky{z-index:0;display:block}
.nebula{z-index:0;background:radial-gradient(ellipse 28% 42% at 50% 45%,rgba(103,110,175,.065),transparent 83%);mix-blend-mode:screen}
.vignette{z-index:1;background:radial-gradient(ellipse 90% 86% at 50% 50%,transparent 32%,rgba(0,0,5,.56) 100%)}
.interaction-surface{position:fixed;inset:0;z-index:2;pointer-events:none;cursor:crosshair;touch-action:none}
body.observing .interaction-surface{pointer-events:auto}
.topbar,.footer{position:fixed;z-index:20;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:18px;pointer-events:none}
.topbar{top:0;padding:clamp(18px,3vw,35px) clamp(20px,4.4vw,72px)}
.topbar>*{pointer-events:auto}
.brand{display:flex;align-items:center;gap:12px;color:rgba(233,236,245,.82);white-space:nowrap}
.brand-symbol{font-size:23px;font-weight:200;opacity:.8}
.brand-text{font-family:var(--serif);font-size:17px;letter-spacing:.015em}
.brand-text em{font-style:italic;color:#c8d4e4}
.top-controls{display:flex;gap:20px;align-items:center}
.phase-tag{display:flex;align-items:center;gap:9px;white-space:nowrap;font:10px/1.4 var(--mono);letter-spacing:.1em;color:#9fa9bd}
.status-light{width:5px;height:5px;border-radius:50%;background:#9e9dca;box-shadow:0 0 9px rgba(185,181,245,.85)}
body.observing .status-light{background:#a7e9e6;box-shadow:0 0 9px #9ddfd8}
.text-button{padding:5px 0;color:#aeb7c9;cursor:pointer;background:none;border:none;font:11px var(--mono);letter-spacing:.08em;text-decoration:none}
.text-button:hover{color:#fff}
.sound-button{min-width:70px;text-align:right}
main{position:relative;min-height:100svh;z-index:3;pointer-events:none}
main>*{pointer-events:none}
.intro-screen,.watch-screen{position:fixed;inset:0;display:flex;justify-content:center;align-items:center;flex-direction:column;text-align:center;padding:110px 24px 90px}
.intro-screen{z-index:6}
.intro-screen button{pointer-events:auto}
.opening-mark{height:83px;display:flex;align-items:center;justify-content:center;position:relative;margin-bottom:5px}
.opening-mark span{position:absolute;width:9px;height:9px;border-radius:50%;background:#edf3fc;box-shadow:0 0 24px 9px rgba(183,204,255,.32),0 0 100px 25px rgba(140,137,215,.16);animation:seedPulse 3.5s ease-in-out infinite}
.opening-mark span:nth-child(2){width:45px;height:45px;background:none;border:1px solid rgba(192,214,255,.23);box-shadow:none;animation:ringPulse 4.6s ease-in-out infinite}
.opening-mark span:nth-child(3){width:85px;height:85px;background:none;border:1px solid rgba(192,214,255,.08);box-shadow:none;animation:ringPulse 5.5s ease-in-out infinite reverse}
.eyebrow{font:10px/1.6 var(--mono);color:#aeb8ca;letter-spacing:.28em;margin:0 0 27px}
h1,h2,p{margin-top:0}
.intro-screen h1{font:400 clamp(43px,6vw,91px)/1.28 var(--serif);letter-spacing:-.055em;margin:0 auto 25px;max-width:940px;text-shadow:0 5px 65px rgba(180,205,255,.2);word-break:keep-all}
.intro-screen h1 em{font-weight:400;font-style:italic;color:#d5dce9}
.intro-copy{font-size:clamp(13px,1.2vw,16px);line-height:2;color:#bdc7d7;max-width:505px;margin:0 auto 35px;word-break:keep-all}
.primary-button,.outline-button{display:inline-flex;align-items:center;justify-content:center;gap:22px;min-height:50px;padding:15px 23px;cursor:pointer;border-radius:2px;font-size:12px;letter-spacing:.05em;transition:transform .2s,background .2s,border-color .2s,color .2s}
.primary-button{background:#e3e6ec;color:#121925;border:1px solid #e3e6ec}
.primary-button:hover{transform:translateY(-2px);background:#fff}
.outline-button{border:1px solid rgba(202,218,244,.4);background:rgba(9,14,25,.68);color:#e4e8f3}
.outline-button:hover{border-color:rgba(237,242,255,.9);background:rgba(37,49,70,.65);transform:translateY(-2px)}
.intro-whisper{font:10px/1.8 var(--mono);color:#8f9aad;letter-spacing:.05em;margin:22px 0 0}
.watch-screen{z-index:3}
.watch-center{margin-top:-46px;max-width:730px}
.observing-mark{display:flex;align-items:center;justify-content:center;margin:0 auto 56px;height:105px;position:relative}
.observing-mark span{position:absolute;width:7px;height:7px;background:#f4faff;border-radius:50%;box-shadow:0 0 22px 6px rgba(177,213,255,.65);animation:seedPulse 3.5s ease-in-out infinite}
.observing-mark i{position:absolute;width:94px;height:94px;border:1px solid rgba(171,200,255,.18);border-radius:50%;box-shadow:0 0 50px rgba(103,138,194,.12);animation:ringPulse 6s ease-in-out infinite}
.tiny-blink{display:inline-block;width:4px;height:4px;border-radius:50%;background:#a9d6f6;margin-right:10px;vertical-align:middle;box-shadow:0 0 8px #c9e4fa}
.watch-center .eyebrow{margin-bottom:22px}
.watch-center h2{font:400 clamp(29px,3.8vw,57px)/1.55 var(--serif);letter-spacing:-.04em;white-space:pre-line;margin-bottom:17px;word-break:keep-all}
.watch-poem{color:#b2c2d8;font-size:clamp(12px,1vw,15px);line-height:2;word-break:keep-all}
.watch-hud{position:fixed;left:50%;bottom:clamp(92px,13svh,154px);transform:translateX(-50%);width:min(650px,calc(100% - 44px));z-index:6;pointer-events:auto}
.hud-top,.hud-bottom{display:flex;justify-content:space-between;gap:20px;align-items:center}
.hud-top{color:#a5b4c8;font:10px/1.5 var(--mono);letter-spacing:.12em}
.hud-top output{letter-spacing:.03em;white-space:nowrap}
.progress-track{height:1px;background:rgba(173,199,238,.25);overflow:hidden;margin:13px 0 25px}
.progress-track>div{width:0;height:100%;background:#d3e6f7;box-shadow:0 0 8px #b4dcff;transition:width .15s linear}
.metrics{display:flex;gap:clamp(18px,4vw,42px)}
.metrics>div,.result-metrics>div{display:flex;flex-direction:column;gap:9px}
.metrics span,.result-metrics span{font:10px var(--mono);letter-spacing:.05em;color:#91a2b9;white-space:nowrap}
.metrics strong{font:400 22px var(--serif);color:#f1eef2}
.watch-hud .outline-button{padding:12px 18px;min-height:42px;font-size:11px;white-space:nowrap}
.hud-instruction{margin:25px 0 0;color:#93a1b7;font-size:11px;line-height:1.8;text-align:center}
.ending-screen{position:fixed;inset:76px 24px 69px;z-index:10;display:flex;overflow:auto;align-items:center;justify-content:center;pointer-events:auto;scrollbar-width:thin;scrollbar-color:#343e52 transparent}
.result-layout{width:min(1050px,100%);display:grid;grid-template-columns:minmax(280px,1.05fr) minmax(330px,.95fr);gap:clamp(28px,6vw,90px);align-items:center;margin:auto;padding:18px 0 32px}
.portrait-column{position:relative;text-align:center;min-width:0}
.portrait-aura{position:absolute;inset:10% 10% 15%;border-radius:50%;background:radial-gradient(circle,rgba(96,121,202,.13),transparent 67%);filter:blur(22px);pointer-events:none}
.portrait-host{width:min(100%,530px);aspect-ratio:1;margin:auto;position:relative;filter:drop-shadow(0 0 30px rgba(112,149,222,.14));animation:portraitEnter 1.9s ease both}
.portrait-host svg{width:100%;height:100%;display:block}
.portrait-label{font:10px/1.8 var(--mono);color:#9caac2;letter-spacing:.09em;margin:0 0 4px}
.dot-sep{margin:0 11px;color:#d7dbe5}
.result-copy{padding:10px 0 25px}
.result-copy .eyebrow{margin-bottom:32px}
.result-pretitle{color:#c0cbda;font:16px/1.7 var(--serif);margin-bottom:0}
.result-copy h2{font:400 clamp(39px,4.9vw,68px)/1.15 var(--serif);letter-spacing:-.05em;color:#f4f4f3;margin:9px 0 7px;word-break:keep-all}
.result-subtitle{font:400 21px/1.6 var(--serif);color:#c0cce0;margin:0 0 30px}
.result-description{font-size:14px;color:#c8d1df;line-height:2.2;max-width:400px;word-break:keep-all;margin-bottom:14px}
.result-note{font:italic 16px/1.8 var(--serif);color:#f0dfc9;max-width:410px;word-break:keep-all;margin-bottom:28px}
.result-metrics{display:flex;gap:30px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;margin:24px 0 26px}
.result-metrics strong{font:400 20px var(--serif)}
.result-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.compact{min-height:44px;padding:11px 15px;font-size:11px;gap:12px}
.restart-button{display:flex;align-items:center;gap:8px;min-height:40px;padding:10px 3px}
.disclaimer{font-size:11px;line-height:1.9;color:#9eaabd;max-width:420px;margin:27px 0 0;word-break:keep-all}
.footer{bottom:0;padding:24px clamp(20px,4.4vw,72px) 22px;border-top:1px solid rgba(169,190,224,.055);color:#8696af;font:9px/1.5 var(--mono);letter-spacing:.07em;z-index:19}
.footer-right{white-space:nowrap;color:#8091a8}
.footer-right span{margin-left:10px;color:#bdcfe6}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;clip-path:inset(50%)!important}
@keyframes seedPulse{0%,100%{transform:scale(.82);opacity:.7}50%{transform:scale(1.4);opacity:1}}
@keyframes ringPulse{0%,100%{transform:scale(.94);opacity:.48}50%{transform:scale(1.1);opacity:1}}
@keyframes portraitEnter{from{opacity:0;transform:scale(.91) rotate(-5deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@media(max-width:800px){.topbar{padding:20px 22px}.phase-tag{display:none}.brand-text{font-size:14px}.top-controls{gap:15px}.ending-screen{inset:70px 16px 60px;align-items:start}.result-layout{grid-template-columns:1fr;gap:6px;max-width:560px;padding:4px 0 25px}.portrait-host{width:min(90%,390px)}.portrait-label{margin-top:-13px}.result-copy{text-align:center;padding:0 0 24px}.result-copy .eyebrow{margin:4px 0 16px}.result-copy h2{font-size:clamp(34px,8vw,56px)}.result-subtitle{margin-bottom:15px}.result-description,.result-note,.disclaimer{margin-left:auto;margin-right:auto}.result-metrics{justify-content:center}.result-actions{justify-content:center}.watch-hud{bottom:96px}}
@media(max-width:520px){.topbar{padding:16px 17px}.brand-symbol{font-size:19px}.brand-text{font-size:12px}.top-controls{gap:11px}.text-button{font-size:10px}.sound-button{min-width:53px}.intro-screen,.watch-screen{padding-left:20px;padding-right:20px}.intro-screen h1{font-size:clamp(34px,10.5vw,55px)}.intro-copy{max-width:340px;font-size:13px}.intro-whisper{max-width:260px}.eyebrow{letter-spacing:.16em;font-size:9px}.watch-center{margin-top:-80px}.observing-mark{height:85px;margin-bottom:20px}.observing-mark i{width:65px;height:65px}.watch-center h2{font-size:clamp(25px,7vw,37px);line-height:1.5}.watch-poem{max-width:270px;margin:auto}.watch-hud{bottom:75px;width:calc(100% - 32px)}.hud-bottom{gap:12px}.metrics{gap:17px}.metrics span{font-size:9px}.metrics strong{font-size:20px}.watch-hud .outline-button{padding:12px 11px;font-size:10px}.hud-instruction{font-size:10px;margin-top:17px}.footer{padding:15px 15px 18px;font-size:8px}.footer-right{display:none}.ending-screen{inset:61px 12px 49px}.result-layout{padding-bottom:12px}.portrait-host{width:min(85%,315px)}.result-copy .eyebrow{font-size:9px}.result-metrics{gap:23px}.result-metrics span{font-size:9px}.result-copy .result-description{font-size:13px;line-height:2}.disclaimer{font-size:10px}}
@media(max-height:650px) and (min-width:801px){.intro-screen{padding-top:50px;padding-bottom:45px}.opening-mark{height:48px;margin-bottom:0}.opening-mark span:nth-child(3){width:60px;height:60px}.intro-screen h1{font-size:clamp(38px,4.3vw,64px)}.intro-copy{margin-bottom:21px}.watch-center{margin-top:-96px}.observing-mark{height:65px;margin-bottom:11px}.observing-mark i{width:60px;height:60px}.watch-hud{bottom:78px}.hud-instruction{margin-top:13px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}