*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden;background:#020714}body{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-font-smoothing:antialiased}canvas{display:block;width:100%;height:100%}.brand-mark{position:fixed;left:50%;top:50%;z-index:5;color:#095260b8;font-family:ui-rounded,SF Pro Rounded,Hiragino Maru Gothic ProN,system-ui,sans-serif;font-size:clamp(42px,8vw,92px);font-weight:650;letter-spacing:0;line-height:1;opacity:var(--brand-reveal, 0);pointer-events:none;text-shadow:0 1px 0 rgba(255,255,255,.46),0 18px 44px rgba(36,130,148,.2);transform:translate(-50%,-50%) scale(calc(.96 + var(--brand-reveal, 0) * .04));transition:opacity .26s ease,transform .26s ease}.controls{position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom));z-index:5;display:grid;grid-template-columns:repeat(2,56px);gap:14px;opacity:var(--controls-reveal, 1);pointer-events:auto;transform:translate(-50%);transition:opacity .22s ease,transform .22s ease}.is-zoom-intro .controls{pointer-events:none;transform:translate(-50%) translateY(8px)}.control-button{--button-tint: rgba(150, 230, 255, .78);--button-tint-soft: rgba(150, 230, 255, .2);--button-ink: rgba(16, 76, 96, .86);position:relative;isolation:isolate;width:56px;height:56px;display:inline-grid;place-items:center;border:1px solid color-mix(in srgb,var(--button-tint),transparent 32%);border-radius:999px;color:var(--button-ink);opacity:.78;background:radial-gradient(circle at 52% 64%,var(--button-tint-soft) 0 44%,transparent 62%),#ecfeff52;box-shadow:inset 0 1px #ffffff7a,inset 0 -10px 20px #22708214,0 10px 28px #1c5d6e2e,0 0 0 1px #ffffff24;-webkit-backdrop-filter:blur(12px) saturate(1.25);backdrop-filter:blur(12px) saturate(1.25);cursor:pointer;outline:none;transition:background .14s ease,border-color .14s ease,transform .14s ease,color .14s ease,opacity .18s ease,box-shadow .18s ease}.control-button:before,.control-button:after{position:absolute;top:-8px;right:-8px;bottom:-8px;left:-8px;content:"";border-radius:inherit;pointer-events:none}.control-button:before{z-index:-1;border:1px solid color-mix(in srgb,var(--button-tint),transparent 55%);opacity:.48;transform:scale(.82)}.control-button:after{z-index:-2;border:1px solid var(--button-tint);opacity:0;transform:scale(.74)}.control-button--cool{--button-tint: rgba(98, 205, 255, .82);--button-tint-soft: rgba(120, 225, 255, .24);--button-ink: rgba(6, 72, 104, .88)}.control-button--warm{--button-tint: rgba(255, 198, 82, .82);--button-tint-soft: rgba(255, 214, 95, .26);--button-ink: rgba(104, 72, 8, .88)}.controls:hover .control-button,.controls:focus-within .control-button{opacity:.98}.control-button:hover{color:color-mix(in srgb,var(--button-ink),#001622 20%);background:radial-gradient(circle at 52% 64%,var(--button-tint-soft) 0 50%,transparent 66%),#f8ffff80;border-color:color-mix(in srgb,var(--button-tint),transparent 12%);box-shadow:inset 0 1px #ffffff94,inset 0 -10px 22px #22708214,0 12px 32px #1c5d6e38,0 0 18px color-mix(in srgb,var(--button-tint),transparent 68%)}.control-button:active{transform:scale(.94);box-shadow:inset 0 2px 8px #19647829,0 0 0 6px color-mix(in srgb,var(--button-tint),transparent 78%),0 8px 24px #1c5d6e29}.control-button:focus-visible{border-color:color-mix(in srgb,var(--button-tint),white 12%);box-shadow:0 0 0 3px color-mix(in srgb,var(--button-tint),transparent 62%),0 8px 24px #1c5d6e29}.control-button--rippling:after{animation:button-ripple .62s cubic-bezier(.16,1,.3,1)}.control-button svg{width:25px;height:25px;stroke:currentColor;stroke-width:2.15;stroke-linecap:round;stroke-linejoin:round;fill:none}@keyframes button-ripple{0%{opacity:.58;transform:scale(.74)}68%{opacity:.32}to{opacity:0;transform:scale(1.7)}}@media(max-width:520px){.controls{bottom:max(12px,env(safe-area-inset-bottom));grid-template-columns:repeat(2,50px);gap:10px}.control-button{width:50px;height:50px}.control-button svg{width:23px;height:23px}}