:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;background:#010306;color:#eaffff}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:radial-gradient(circle at 50% 42%,#09212b 0,#020810 55%,#010204 100%)}
body{display:grid;place-items:center}button{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
#app{position:relative;width:min(100vw,100vh,600px);height:min(100vw,100vh,600px);aspect-ratio:1;overflow:hidden;background:#03070d;box-shadow:0 0 0 1px #69f6ff32,0 24px 90px #000}
canvas{display:block;width:100%;height:100%;touch-action:none}
.overlay{position:absolute;inset:0;z-index:5;display:grid;place-items:center;padding:28px;background:linear-gradient(#02060bee,#04121bf7);text-align:center}.overlay:empty{display:none}
.panel{width:min(100%,500px);padding:27px;border:1px solid #63efff59;background:#04111be8;clip-path:polygon(15px 0,100% 0,100% calc(100% - 15px),calc(100% - 15px) 100%,0 100%,0 15px)}
.eyebrow{margin:0 0 9px;color:#73f4ff;font-size:11px;font-weight:900;letter-spacing:.24em}.title{margin:0;font-size:clamp(38px,8vw,66px);line-height:.86;letter-spacing:-.055em;text-shadow:0 0 28px #19e5ff88}.tagline{margin:14px 0 20px;color:#ff3fba;font-size:17px;font-weight:950;letter-spacing:.15em}
.core-mark{display:grid;place-items:center;width:72px;height:72px;margin:5px auto 16px;border:2px solid #65f7ff;border-radius:50%;box-shadow:0 0 28px #23e5ff88,inset 0 0 20px #23e5ff55;font-size:30px}.copy{margin:14px auto;color:#b2c8d0;font-size:14px;line-height:1.55;max-width:410px}.legend{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:17px 0;text-align:left}.legend div{padding:8px 10px;border:1px solid #244553;background:#071923;font-size:12px}.legend b{color:#7af7ff}
.primary{width:100%;margin-top:16px;padding:14px 18px;border:1px solid #bffaff;background:#ccfbff;color:#031015;font-weight:950;letter-spacing:.13em;cursor:pointer}.primary:focus-visible,.choice.focused{outline:3px solid #fff;outline-offset:3px}.hint{margin:14px 0 0;color:#829da7;font-size:11px;line-height:1.5}.stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:15px 0;text-align:left}.stats div{padding:10px;background:#ffffff08}.stats b{float:right;color:#72f5ff}
.toast{position:absolute;z-index:4;top:71px;left:50%;transform:translateX(-50%) translateY(-7px);padding:7px 12px;border:1px solid #6df6ff66;background:#03111deb;font-size:12px;font-weight:900;letter-spacing:.08em;opacity:0;transition:.15s;pointer-events:none;white-space:nowrap}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.touch-controls{position:absolute;z-index:3;left:16px;bottom:14px;display:grid;grid-template-columns:repeat(3,42px);grid-template-rows:repeat(2,32px);gap:4px}.touch-controls button{border:1px solid #5bdde866;background:#04141ee8;color:#a9f9ff;font-size:12px;font-weight:950;touch-action:none}.touch-controls button:nth-child(1){grid-column:2}.touch-controls .tap{grid-column:3;grid-row:1 / span 2;color:#ff8bd5;border-color:#ff4db776}.touch-controls button:nth-child(3){grid-column:1}.touch-controls button:nth-child(4){grid-column:2}.touch-controls button:nth-child(5){grid-column:3}.touch-controls button:active{background:#123747}
@media(max-width:430px){.overlay{padding:17px}.panel{padding:21px}.title{font-size:43px}.copy{font-size:13px}.touch-controls{transform:scale(.88);transform-origin:left bottom}}
@media(pointer:fine){.touch-controls{opacity:.5}.touch-controls:hover{opacity:1}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}