:root{color-scheme:dark;font-family:Space Grotesk,Avenir Next,Segoe UI,sans-serif;--bg-0: #020107;--bg-1: #09051a;--bg-2: #12092c;--panel: rgba(10, 8, 24, .76);--panel-border: rgba(170, 93, 255, .24);--text: #f7f4ff;--muted: #c7bee3;--accent: #ac52ff;--accent-strong: #ff4ee0;--accent-soft: rgba(172, 82, 255, .16);--signal: #77e8ff;--danger: #ff5a8d;--shadow: 0 28px 90px rgba(0, 0, 0, .52)}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(circle at 50% 12%,rgba(255,78,224,.16),transparent 24%),radial-gradient(circle at 18% 16%,rgba(115,53,255,.28),transparent 28%),radial-gradient(circle at 82% 0%,rgba(37,110,255,.18),transparent 22%),linear-gradient(180deg,var(--bg-2) 0%,var(--bg-1) 45%,var(--bg-0) 100%);color:var(--text)}body{min-height:100vh}button,input{font:inherit}button{border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:.9rem 1.15rem;background:#ffffff0f;color:var(--text);cursor:pointer;font-weight:700;letter-spacing:.01em}button.primary{background:linear-gradient(135deg,var(--accent),#4aa4ff);color:#05040d;box-shadow:0 16px 34px #6739ff47}button.ghost-control{background:#ffffff08;border-color:#ffffff14;color:var(--muted);padding-inline:1rem}button:focus-visible,input:focus-visible{outline:3px solid rgba(119,232,255,.75);outline-offset:2px}.app-shell{width:min(100%,560px);margin:0 auto;padding:1rem}.app-shell--gameplay{width:min(100%,520px)}.stage{min-height:calc(100vh - 2rem);padding:1.1rem;border-radius:32px;background:linear-gradient(180deg,#12092cdb,#04040cfa);border:1px solid rgba(172,82,255,.22);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);position:relative;overflow:hidden}.stage:before,.stage:after{content:"";position:absolute;inset:auto;border-radius:999px;pointer-events:none}.stage:before{width:20rem;height:20rem;top:-8.5rem;right:-7rem;background:radial-gradient(circle,rgba(172,82,255,.34),transparent 68%)}.stage:after{width:15rem;height:15rem;bottom:-5.5rem;left:-4.5rem;background:radial-gradient(circle,rgba(119,232,255,.12),transparent 70%)}.stage--gameplay{display:grid;grid-template-rows:auto 1fr}.stage__header{position:relative;z-index:1;display:grid;gap:.2rem}.stage__title{margin:.15rem 0 0;font-size:clamp(1.7rem,8vw,3.1rem);letter-spacing:-.07em;line-height:.95}.stage__lead,.stage-copy,.notice,.control-panel p{color:var(--muted)}.stage__eyebrow,.stat-card__label,.field span{text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;color:var(--muted)}.control-panel,.instrument{position:relative;z-index:1;margin-top:1rem;padding:1rem;border-radius:28px;background:var(--panel);border:1px solid rgba(170,93,255,.18);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px)}.control-panel__summary{display:grid;gap:.5rem;margin-bottom:1rem}.status-pill{display:inline-flex;width:fit-content;padding:.45rem .75rem;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:#ffffff0d;color:var(--signal);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase}.status-meta{font-size:.92rem;color:var(--muted)}.button-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1rem;justify-content:center}.button-row--centered{justify-content:center}.field{display:grid;gap:.55rem;margin-top:.85rem}input[type=range]{width:100%;accent-color:var(--accent-strong)}.instrument{display:grid;gap:.95rem;padding:.9rem}.instrument__ring{width:min(100%,26rem);aspect-ratio:1;margin:0 auto;padding:clamp(.85rem,3.5vw,1.35rem);border-radius:50%;background:radial-gradient(circle at center,rgba(119,232,255,.1),transparent 56%),repeating-radial-gradient(circle at center,rgba(255,255,255,.07) 0 1px,transparent 1px 2.35rem),conic-gradient(from 180deg,rgba(77,168,255,.96) 0deg,rgba(172,82,255,.96) var(--gauge-angle),rgba(255,255,255,.05) var(--gauge-angle),rgba(255,255,255,.05) 360deg);box-shadow:inset 0 0 0 1px #ffffff14,0 0 70px #ac52ff2e}.instrument__ring--warning{box-shadow:inset 0 0 0 1px #ff5a8d2e,0 0 76px #ff5a8d42;background:radial-gradient(circle at center,rgba(255,90,141,.12),transparent 56%),repeating-radial-gradient(circle at center,rgba(255,255,255,.07) 0 1px,transparent 1px 2.35rem),conic-gradient(from 180deg,rgba(255,90,141,.98) 0deg,rgba(172,82,255,.92) var(--gauge-angle),rgba(255,255,255,.05) var(--gauge-angle),rgba(255,255,255,.05) 360deg)}.instrument__core{display:grid;place-items:center;align-content:center;gap:.45rem;height:100%;padding:1.3rem;border-radius:50%;background:radial-gradient(circle at center,#171431f5,#070710fb 70%),linear-gradient(180deg,#ffffff08,#fff0);text-align:center;box-shadow:inset 0 0 0 1px #ffffff14,inset 0 0 80px #b04cff14}.instrument__distance{font-size:clamp(3.2rem,18vw,6.4rem);font-weight:700;line-height:.9;letter-spacing:-.08em;text-wrap:balance}.instrument__distance-unit{color:var(--signal);font-size:.78rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase}.instrument__distance-metric--hidden,.instrument__distance-unit--hidden{display:none}.instrument--locked .instrument__distance,.instrument--locked .instrument__distance-unit{color:#ffd7e0}.instrument__stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}.stat-card{padding:.82rem .9rem;border-radius:20px;background:#ffffff0a;border:1px solid rgba(255,255,255,.06);min-height:4.15rem}.stat-card--accent .stat-card__value{color:var(--text)}.stat-card__value{margin-top:.28rem;font-size:1.2rem;font-weight:700;color:var(--text)}.instrument__footer{display:flex;align-items:center;justify-content:space-between;gap:.8rem}.instrument__footer-left{color:var(--signal);letter-spacing:.18em;text-transform:uppercase;font-size:.73rem}.instrument__footer .ghost-control{flex:0 0 auto}button{border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:.9rem 1.15rem;background:#ffffff0f;color:var(--text);cursor:pointer;font-weight:700;letter-spacing:.01em}button.primary{background:linear-gradient(135deg,var(--accent-strong),var(--accent));color:#14071d;box-shadow:0 12px 30px #b04cff4d}button:hover{transform:translateY(-1px)}button:focus-visible,input:focus-visible{outline:3px solid rgba(126,242,255,.7);outline-offset:2px}@media(max-width:640px){.app-shell{padding:.65rem}.stage{min-height:calc(100vh - 1.3rem);padding:.82rem;border-radius:24px}.instrument{padding:.7rem}.instrument__ring{width:min(100%,23rem)}.instrument__core{padding:.85rem}.instrument__distance{font-size:clamp(2.8rem,18vw,5.3rem)}.instrument__stats{grid-template-columns:1fr}.instrument__footer{flex-direction:column;align-items:stretch}button{width:100%}}
