*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#000;color:#f6f7ff;font:15px system-ui,sans-serif}canvas{display:block;position:fixed;inset:0;width:100%;height:100%;touch-action:none}header{position:absolute;left:32px;top:28px;pointer-events:none;text-shadow:0 2px 20px #000}h1{font-size:clamp(28px,4vw,48px);font-weight:550;margin:6px 0;letter-spacing:-1.5px}p{margin:0;color:#c2cad8}.eyebrow{font-size:10px;letter-spacing:2.3px;color:#b4bcca}.controls{position:absolute;top:28px;right:28px;width:270px;padding:18px;border:1px solid #ffffff28;border-radius:18px;background:#111623dc;box-shadow:0 12px 45px #0008}.buttons{display:flex;gap:6px;margin-bottom:16px}button{border:1px solid #ffffff35;border-radius:9px;padding:10px 9px;background:#222b3b;color:white;font:inherit;cursor:pointer}button:first-child{background:#d2f7eb;color:#152b28}button:hover{filter:brightness(1.2)}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #9febd6;outline-offset:3px}label{display:block;margin:12px 0;color:#d3d9e4;font-size:13px}output{float:right}input[type=range]{width:100%;accent-color:#b1e9dd;margin-top:8px}.check{display:flex;align-items:center;gap:8px}small{color:#a1acbd;line-height:1.6}footer{position:absolute;bottom:16px;left:32px;right:20px;color:#9ba4b6;font-size:11px;text-shadow:0 2px 5px black}a{color:#c0d6d1}@media(max-width:650px){header{left:20px;top:20px}.controls{top:auto;bottom:55px;left:16px;right:16px;width:auto;padding:12px}.controls label:not(.check){display:inline-block;width:47%;margin:3px 1%}.buttons{margin-bottom:8px}small{display:none}.check{margin:5px 0}footer{left:20px;font-size:10px}h1{font-size:30px}}