@font-face{font-family:DM;src:url('assets/fonts/dm-sans-latin.woff2') format('woff2');font-weight:100 1000;font-display:swap}
:root{font-family:DM,system-ui,sans-serif;color:#e9f4ef;color-scheme:dark;background:#080c12}
*{box-sizing:border-box}body{margin:0;min-width:320px;background:radial-gradient(ellipse at 50% 40%,#15172a 0%,#0b1119 45%,#080c12 80%)}button,input{font:inherit}a{color:inherit;text-decoration:none}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #bce7db;outline-offset:5px}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.name-space-shell{height:100svh;min-height:600px;display:grid;grid-template-rows:80px minmax(320px,1fr) 158px}header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 40px}header a{justify-self:start;color:#9daeb8;font-size:12px;padding:10px 0}header a:hover{color:#e4f1f0}h1{font-size:14px;font-weight:450;letter-spacing:-.02em;margin:0}.mark{justify-self:end;display:flex;align-items:center;justify-content:center;gap:5px;border:1px solid #c5deeb24;border-radius:50%;width:28px;height:28px}.mark i{width:3px;height:5px;background:#c3eedb;border-radius:50%;box-shadow:0 0 8px #baf1dc60}
.scene-stage{position:relative;min-height:0;overflow:hidden}canvas{display:block;width:100%;height:100%;touch-action:pan-y}.scene-error{position:absolute;inset:40% 20% auto;text-align:center;font-size:15px;color:#f1c2c2}.controls{width:min(620px,calc(100% - 40px));justify-self:center;align-self:start;padding:10px 0 25px}.step-controls{display:flex;align-items:center;justify-content:space-between;gap:12px}.step-controls button{display:flex;align-items:center;gap:13px;padding:15px 18px;border:1px solid #d3e1ff15;border-radius:13px;background:#d5d7f904;font-size:12px;white-space:nowrap;transition:border-color .3s,background .3s,color .3s;color:#9cabb9}.step-controls button span{font-size:9px;opacity:.48}.step-controls button[aria-pressed=true]{border-color:#a3e0ce66;background:linear-gradient(135deg,#9cf7d719,#c5b5ff0c);color:#e3fff3}.step-controls button:hover{border-color:#bfe4ee70;color:#e9f9fa}.step-controls button:disabled{opacity:.35;cursor:default}.step-arrow{color:#718595;font-size:13px}.name-row{display:flex;justify-content:center;align-items:center;gap:24px;margin-top:23px}.name-row label{position:relative;display:block}.name-row input{width:170px;border:0;border-bottom:1px solid #c1d9f127;border-radius:0;padding:8px 0;background:transparent;color:#d9e9e5;font-size:13px;text-align:center}.name-row input::placeholder{color:#81949f}#saved-state{position:absolute;top:calc(100% + 4px);left:0;right:0;font-size:9px;color:#96c6b4;text-align:center;white-space:nowrap}#saved-state[data-error=true]{color:#f0b8b8}#replay{background:transparent;border:0;color:#aebbc9;padding:11px;font-size:11px}#replay:hover{color:#dcffed}
@media(max-width:650px){.name-space-shell{grid-template-rows:64px minmax(340px,1fr) 172px;min-height:615px}header{padding:0 21px}header a{font-size:11px}h1{font-size:13px}.controls{width:calc(100% - 34px)}.step-controls{gap:6px}.step-controls button{gap:7px;padding:13px 11px;font-size:10px;border-radius:10px}.step-controls button span{font-size:8px}.step-arrow{font-size:11px}.name-row{margin-top:23px;gap:18px}.name-row input{width:145px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}