@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,700&family=Instrument+Serif:ital@0;1&display=swap');

:root{--night:#071219;--night-2:#0b1d27;--panel:#0d222d;--panel-light:#12303c;--line:rgba(183,230,222,.2);--mint:#b7e6de;--cyan:#63c4c7;--gold:#f1be6b;--coral:#f17661;--cloud:#e8f0e9;--muted:#91a6a7}*{box-sizing:border-box}body{min-height:100vh;margin:0;background:radial-gradient(ellipse 70% 45% at 55% -10%,#244f59 0%,transparent 72%),radial-gradient(ellipse 60% 55% at 5% 85%,#143b46 0%,transparent 75%),var(--night);color:var(--cloud);font-family:"DM Sans",system-ui,sans-serif;overflow-x:hidden}.sky{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}.sky:before,.sky:after{content:"";position:absolute;border:1px solid rgba(183,230,222,.09);width:72vw;height:72vw;border-radius:50%;right:-40vw;top:13vh}.sky:after{width:51vw;height:51vw;right:-27vw;top:22vh;border-color:rgba(241,190,107,.1)}.sky i{position:absolute;width:2px;height:2px;border-radius:999px;background:var(--mint);opacity:.58;box-shadow:0 0 11px 2px rgba(183,230,222,.4);animation:twinkle 4s ease-in-out infinite}.sky i:nth-child(1){left:7%;top:13%;animation-delay:-1s}.sky i:nth-child(2){left:17%;top:74%;width:3px;height:3px;animation-delay:-3s}.sky i:nth-child(3){left:86%;top:25%;animation-delay:-2s}.sky i:nth-child(4){left:70%;top:82%;animation-delay:-.2s}.sky i:nth-child(5){left:31%;top:26%;width:3px;height:3px;animation-delay:-2.5s}.sky i:nth-child(6){left:94%;top:64%;animation-delay:-1.7s}.sky i:nth-child(7){left:48%;top:10%;animation-delay:-3.2s}.sky i:nth-child(8){left:3%;top:51%;animation-delay:-.6s}
.app-shell{width:min(100% - 32px,940px);margin:0 auto;padding:30px 0 42px}.topbar,.status-bar,.reveal-topline,footer{display:flex;align-items:center;justify-content:space-between}.topbar{margin-bottom:38px}.wordmark{color:var(--cloud);text-decoration:none;font-size:.98rem;font-weight:700;letter-spacing:.23em;display:flex;align-items:center;gap:10px}.wordmark-mark{color:var(--gold);font-family:"Instrument Serif",serif;font-size:2.05rem;line-height:0}.daily-stamp,.micro-label,.reference-role,.placement-readout,.measure-label{font-family:"DM Mono",ui-monospace,monospace;letter-spacing:.085em;font-size:.65rem}.daily-stamp{color:var(--muted);display:flex;align-items:center;gap:8px}.live-dot{width:6px;height:6px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 3px rgba(183,230,222,.12);animation:pulse 2s infinite}.status-bar{border-block:1px solid var(--line);padding:15px 0;margin-bottom:18px}.round-readout,.error-readout{display:grid;gap:5px;min-width:115px}.round-readout strong,.error-readout strong{font-family:"DM Mono",monospace;font-size:1.12rem;font-weight:500;color:var(--mint)}.round-readout strong span{color:var(--muted)}.error-readout{text-align:right}.error-readout strong{color:var(--gold)}.error-readout small{font-size:.65rem;color:var(--muted);font-weight:400}.progress-dots{display:flex;gap:7px;align-items:center}.progress-dots i{width:7px;height:7px;border:1px solid rgba(183,230,222,.4);border-radius:50%;transition:.35s ease}.progress-dots i.done{background:var(--mint);border-color:var(--mint);box-shadow:0 0 10px rgba(183,230,222,.7)}.progress-dots i.active{border-color:var(--gold);box-shadow:0 0 0 3px rgba(241,190,107,.12)}
.game-card,.complete{background:linear-gradient(145deg,rgba(16,46,58,.94),rgba(7,24,33,.96));border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 22px 70px rgba(0,0,0,.2);border-radius:24px;padding:clamp(24px,5vw,58px);position:relative;overflow:hidden}.game-card:before{content:"";position:absolute;left:-120px;bottom:-150px;width:420px;height:420px;border-radius:50%;border:1px solid rgba(183,230,222,.06);pointer-events:none}.target-zone{position:relative;text-align:center;padding:52px 0 30px}.measure-label{color:var(--mint);margin:0 0 13px}.measure-label b{font-weight:400;color:var(--gold);margin:0 7px}.target-zone h1,.complete h1{font-family:"Instrument Serif",Georgia,serif;font-weight:400;letter-spacing:-.045em;line-height:.9;margin:0 auto;max-width:740px;font-size:clamp(3rem,8vw,6.5rem)}.target-value{font:500 1rem "DM Mono",monospace;color:var(--gold);margin:13px 0 -2px;animation:reveal-in .38s ease both}.scale-stage{position:relative;display:grid;grid-template-columns:140px minmax(280px,1fr) 140px;gap:9px;align-items:center;border-top:1px solid rgba(183,230,222,.12);border-bottom:1px solid rgba(183,230,222,.12);padding:25px 0 26px}.reference{position:relative;min-height:70px;align-self:center}.right-reference{text-align:right}.reference-role{margin:0 0 8px;color:var(--cyan)}.reference-name{font-size:clamp(.84rem,1.65vw,1.05rem);font-weight:700;line-height:1.08;margin:0}.reference-value{font-family:"DM Mono",monospace;font-size:.76rem;color:var(--gold);margin:8px 0 0;animation:reveal-in .35s ease both}.instrument{position:relative;padding-top:17px}.percentage-rule{position:absolute;top:0;left:0;width:100%;display:flex;justify-content:space-between;font-family:"DM Mono",monospace;font-size:.55rem;color:rgba(145,166,167,.56)}.track-shell{height:46px;position:relative;display:grid;place-items:center}.track{position:absolute;left:0;right:0;height:8px;border:1px solid rgba(183,230,222,.3);border-radius:100px;background:repeating-linear-gradient(90deg,rgba(183,230,222,.08) 0,rgba(183,230,222,.08) calc(10% - 1px),rgba(183,230,222,.27) calc(10% - 1px),rgba(183,230,222,.27) 10%)}.track-glow{position:absolute;left:0;right:0;height:8px;background:linear-gradient(90deg,rgba(99,196,199,0),rgba(99,196,199,.15),rgba(99,196,199,0));filter:blur(10px);animation:scan 4s ease-in-out infinite}input[type=range]{appearance:none;position:absolute;left:0;width:100%;height:46px;margin:0;background:transparent;cursor:grab;z-index:4}input[type=range]:active{cursor:grabbing}input[type=range]::-webkit-slider-thumb{appearance:none;width:27px;height:27px;border-radius:50%;background:var(--coral);border:5px solid var(--night-2);box-shadow:0 0 0 1px var(--coral),0 4px 15px rgba(0,0,0,.38);transition:transform .15s}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.13)}input[type=range]::-moz-range-thumb{width:17px;height:17px;border-radius:50%;background:var(--coral);border:5px solid var(--night-2);box-shadow:0 0 0 1px var(--coral),0 4px 15px rgba(0,0,0,.38)}.placement-readout{display:flex;align-items:baseline;gap:7px;justify-content:center;color:var(--muted);margin-top:5px}.placement-readout strong{font-family:"DM Mono",monospace;font-size:1.2rem;color:var(--cloud);font-weight:500}.placement-readout em{font-style:normal;font-size:.58rem}.actual-marker,.guess-marker{position:absolute;top:4px;bottom:4px;width:2px;transform:translateX(-50%);z-index:3}.actual-marker{background:var(--gold);box-shadow:0 0 11px rgba(241,190,107,.8)}.guess-marker{background:var(--coral);z-index:2}.actual-marker span,.guess-marker span{position:absolute;bottom:25px;left:50%;transform:translateX(-50%);padding:3px 5px;border-radius:3px;font:500 .55rem "DM Mono",monospace;white-space:nowrap}.actual-marker span{background:var(--gold);color:var(--night)}.guess-marker span{background:var(--coral);color:#fff}.delta-marker{position:absolute;top:7px;height:17px;border-top:1px solid var(--mint);border-left:1px solid var(--mint);border-right:1px solid var(--mint);z-index:1;opacity:0;transition:opacity .2s}.delta-marker span{position:absolute;top:-18px;left:50%;transform:translateX(-50%);font:500 .58rem "DM Mono",monospace;color:var(--mint);background:var(--night-2);white-space:nowrap;padding:1px 4px}.delta-marker.shown{opacity:1;animation:bracket-in .45s ease both}.primary,.secondary{font-family:"DM Sans",system-ui,sans-serif;cursor:pointer;transition:transform .18s,background .18s}.primary{width:100%;margin-top:29px;color:var(--night);background:var(--mint);border:0;border-radius:10px;padding:15px 18px;font-size:.96rem;font-weight:700;display:flex;justify-content:space-between;align-items:center}.primary b{font-size:1.25rem;line-height:.7}.primary:hover{background:#d0f5eb;transform:translateY(-2px)}.reveal{margin-top:21px;border-top:1px solid rgba(183,230,222,.2);padding-top:18px;animation:reveal-in .5s cubic-bezier(.2,.8,.2,1) both}.reveal-topline{margin-bottom:0}.error-pill{font-family:"DM Mono",monospace;font-size:.7rem;border:1px solid rgba(241,190,107,.38);color:var(--gold);border-radius:99px;padding:5px 9px}.secondary{width:100%;border:1px solid rgba(183,230,222,.24);border-radius:9px;background:transparent;color:var(--cloud);font-size:.87rem;font-weight:700;margin-top:15px;padding:13px}.secondary:hover{background:rgba(183,230,222,.1)}.secondary b{color:var(--gold);margin-left:7px}.score-fly{position:fixed;z-index:50;padding:6px 9px;border:1px solid rgba(241,190,107,.55);border-radius:999px;background:var(--night-2);color:var(--gold);font:500 .7rem "DM Mono",monospace;pointer-events:none;transition:transform .48s cubic-bezier(.2,.8,.2,1),opacity .48s ease;box-shadow:0 4px 16px rgba(0,0,0,.3)}.score-pop{animation:score-pop .45s ease}.complete{text-align:center;padding-block:62px}.complete:before{content:"";width:410px;height:410px;border-radius:50%;border:1px solid rgba(241,190,107,.15);position:absolute;top:-185px;left:50%;transform:translateX(-50%)}.result-orbit{position:relative;margin:0 auto 26px;width:64px;height:64px;display:grid;place-items:center;border:1px solid rgba(241,190,107,.45);border-radius:50%;box-shadow:0 0 0 10px rgba(241,190,107,.05),0 0 37px rgba(241,190,107,.1);animation:float 3s ease-in-out infinite}.result-orbit span{font:2.4rem "Instrument Serif",serif;color:var(--gold)}.complete h1{font-size:clamp(4rem,10vw,7.4rem);position:relative;margin-top:13px}.complete h1 small{font:500 clamp(.85rem,2vw,1.1rem) "DM Mono",monospace;color:var(--muted);letter-spacing:0}.result-message{max-width:450px;margin:0 auto;color:var(--muted);font-size:.92rem}.result-strip{display:flex;justify-content:center;gap:6px;margin:29px auto}.result-strip span{width:29px;height:31px;border-radius:5px;background:var(--panel-light);color:var(--mint);font:500 .65rem/31px "DM Mono",monospace}.next-drop{font:500 .66rem "DM Mono",monospace!important;letter-spacing:.05em;margin-top:20px!important}.complete .primary{max-width:400px;margin:26px auto 0}footer{justify-content:center;gap:14px;margin-top:22px;color:var(--muted);font:500 .62rem "DM Mono",monospace;text-transform:uppercase;letter-spacing:.07em}footer span+span:before{content:'·';color:var(--gold);margin-right:14px}.hidden{display:none!important}@keyframes twinkle{0%,100%{opacity:.22;transform:scale(.7)}50%{opacity:.9;transform:scale(1.4)}}@keyframes pulse{0%,100%{box-shadow:0 0 0 3px rgba(183,230,222,.11)}50%{box-shadow:0 0 0 7px rgba(183,230,222,0)}}@keyframes scan{0%,100%{transform:translateX(-20%);opacity:.3}50%{transform:translateX(20%);opacity:1}}@keyframes reveal-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes bracket-in{from{opacity:0;transform:scaleX(.25)}to{opacity:1;transform:scaleX(1)}}@keyframes score-pop{0%{transform:scale(1)}45%{transform:scale(1.22);color:#fff5cc}100%{transform:scale(1)}}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}@media(max-width:650px){.app-shell{width:min(100% - 22px,940px);padding-top:19px}.topbar{margin-bottom:27px}.daily-stamp{font-size:.56rem}.status-bar{margin-inline:-1px}.round-readout,.error-readout{min-width:72px}.round-readout strong,.error-readout strong{font-size:.95rem}.progress-dots{gap:5px}.progress-dots i{width:6px;height:6px}.game-card,.complete{padding:24px 17px;border-radius:18px}.target-zone{padding:42px 4px 26px}.target-zone h1{font-size:clamp(3.35rem,16vw,5rem)}.scale-stage{grid-template-columns:1fr 1fr;padding:22px 0 24px;gap:5px}.instrument{grid-column:1/3;grid-row:2;margin-top:20px}.reference{min-height:0}.reference-name{font-size:.79rem}.reference-role{font-size:.52rem}footer{gap:6px;font-size:.5rem}footer span+span:before{margin-right:6px}.complete{padding-block:50px}.complete h1{font-size:4.4rem}.complete h1 small{display:block;margin-top:10px}}