:root{color:#dff8ff;background:#07111e;font-family:Inter,ui-sans-serif,system-ui}*{box-sizing:border-box}body{background:radial-gradient(circle at 50% 20%,#183650,#07111e 65%);min-height:100vh;margin:0}main{width:min(980px,100%);margin:auto;padding:20px}header{letter-spacing:.1em;color:#8ab4c8;justify-content:space-between;align-items:center;height:44px;display:flex}#stage{background:linear-gradient(#173044,#09131f);border:1px solid #31536a;border-radius:24px;height:min(78vh,760px);min-height:560px;position:relative;overflow:hidden}#fallback,canvas{width:100%;height:100%;position:absolute;inset:0}#fallback{place-items:center;transition:opacity .25s;display:grid}#fallback svg{filter:drop-shadow(0 20px 38px #0008);width:min(52%,430px)}#fallback.hidden{opacity:0;pointer-events:none}canvas{opacity:0;transition:opacity .25s}canvas.ready{opacity:1}.controls{gap:12px;display:flex;position:absolute;bottom:30px;left:50%;transform:translate(-50%)}.controls button{color:#eaffff;cursor:pointer;background:#0d2434dd;border:1px solid #75cbe7;border-radius:999px;min-width:112px;min-height:48px;font:600 15px inherit}.controls button:focus-visible{outline-offset:3px;outline:3px solid #9d70ff}#status{color:#acd9e8;background:#07111ecc;border-radius:999px;padding:8px 12px;font-size:13px;position:absolute;top:20px;left:20px}@media (max-width:600px){main{padding:0}header{padding:0 14px}#stage{border-radius:0;min-height:calc(100vh - 44px)}.controls{width:100%;padding:0 12px;bottom:20px}.controls button{flex:1;min-width:0}}@media (prefers-reduced-motion:reduce){*{transition:none!important}}