:root{color-scheme:dark;--ink:#f1f5f8;--muted:#a1adbd;--accent:#acf9df;--line:rgba(219,232,255,.14);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#070910;color:var(--ink)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none}body{background:#070910}button,input,select{font:inherit}button{cursor:pointer;color:inherit}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:4px}button{touch-action:manipulation}button:disabled{opacity:.4;cursor:default}button svg{pointer-events:none}svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}button[hidden],[hidden]{display:none!important}
#space{display:block;position:fixed;inset:0;width:100%;height:100%;touch-action:none;background:#070910}#shade{position:fixed;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(4,6,14,.5),transparent 22%,transparent 63%,rgba(4,6,14,.28));transition:opacity .5s}.chrome{transition:opacity .3s,transform .3s}.immersive .chrome{opacity:0;pointer-events:none}.immersive #shade{opacity:0}.immersive #controls{transform:translateY(16px)}
header{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:calc(22px + env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) 0 max(24px,env(safe-area-inset-left));z-index:3}.brand{display:flex;gap:12px;align-items:center;user-select:none}.brand-icon{width:33px;height:33px;color:var(--accent)}.brand-name{font-size:14px;font-weight:680;letter-spacing:.32em;line-height:1.4}.brand-sub{font-size:8px;letter-spacing:.2em;color:#b5c2d3;margin-top:5px}.top-actions{display:flex;gap:8px}.icon-btn{width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:rgba(8,13,25,.58);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);display:inline-flex;justify-content:center;align-items:center;transition:background .2s}.icon-btn:hover{background:rgba(41,51,73,.8)}.icon-btn svg{height:19px;width:19px}
#welcome{position:fixed;z-index:4;bottom:max(40px,env(safe-area-inset-bottom));left:clamp(24px,5vw,84px);width:420px;max-width:calc(100vw - 48px);text-shadow:0 1px 25px #050713}.eyebrow{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);font-weight:600;display:flex;align-items:center;gap:9px}.eyebrow:before{content:"";height:5px;width:5px;border-radius:50%;background:var(--accent)}h1{font-weight:440;font-size:clamp(42px,5vw,70px);letter-spacing:-.055em;line-height:1.04;margin:18px 0 16px}h1 em{font-style:normal;color:#aebdce}#welcome p{color:#c3cddb;line-height:1.65;font-size:14px;max-width:310px;margin:0 0 26px}.primary{border:0;background:var(--accent);color:#0a2424;min-height:52px;padding:0 23px;border-radius:15px;display:inline-flex;gap:28px;align-items:center;justify-content:space-between;font-size:14px;font-weight:650}.primary svg{width:19px;height:19px}.motion-note{margin-top:18px;font-size:10px;line-height:1.6;color:#c0c9d5;max-width:320px;text-shadow:0 1px 5px #000}.motion-note strong{font-weight:500;color:#e3e9f1}
#controls{position:fixed;z-index:4;left:max(24px,env(safe-area-inset-left));bottom:calc(24px + env(safe-area-inset-bottom));width:360px;max-width:calc(100vw - 48px);border:1px solid var(--line);border-radius:24px;padding:22px;background:rgba(9,13,24,.83);box-shadow:0 18px 80px #0004;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}.panel-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.panel-heading h2{font-size:14px;font-weight:560;letter-spacing:-.01em;margin:0}.status{color:var(--accent);display:flex;align-items:center;gap:6px;font-size:9px;letter-spacing:.12em;text-transform:uppercase}.status:before{content:"";background:currentColor;border-radius:50%;width:4px;height:4px}.row-label{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#b8c3d1;margin-bottom:11px}.value{font-size:14px;font-variant-numeric:tabular-nums;color:var(--ink);font-weight:550}.speed-line{display:flex;align-items:center;gap:12px}.speed-line .icon-btn{flex:0 0 36px;width:36px;height:36px;border-radius:11px;background:#ffffff08}.speed-line .icon-btn svg{width:16px;height:16px}input[type=range]{appearance:none;-webkit-appearance:none;width:100%;height:32px;background:transparent;margin:0;cursor:pointer;touch-action:pan-x}input[type=range]::-webkit-slider-runnable-track{height:3px;background:linear-gradient(to right,var(--accent) 0 var(--fill,25%),#ffffff20 var(--fill,25%) 100%);border-radius:2px}input[type=range]::-moz-range-track{height:3px;background:#ffffff25;border-radius:2px}input[type=range]::-moz-range-progress{height:3px;background:var(--accent)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:17px;height:17px;border:3px solid #fff;border-radius:50%;background:var(--accent);margin-top:-7px;box-shadow:0 0 15px #acf9df35}input[type=range]::-moz-range-thumb{width:12px;height:12px;border:3px solid white;border-radius:50%;background:var(--accent)}.speed-presets{display:flex;justify-content:space-between;padding-left:48px;margin-top:0}.speed-presets button{background:transparent;border:0;font-size:10px;min-height:30px;color:#9daabc;padding:0 7px}.speed-presets button.active{color:var(--accent)}.divider{height:1px;background:var(--line);margin:16px 0 18px}.palette-row{display:flex;justify-content:space-between;gap:7px}.palette{border:1px solid transparent;position:relative;background:transparent;padding:3px;border-radius:50%;width:37px;height:37px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.palette span{display:block;height:27px;width:27px;border-radius:50%;background:var(--swatch);box-shadow:inset 0 0 0 1px #fff2}.palette[aria-pressed=true]{border-color:#eef6ff}.palette:hover{border-color:#eef6ff70}#paletteName{font-size:10px;color:#d6deea}.custom-colours{display:flex;gap:12px;margin-top:14px}.colour-field{display:flex;align-items:center;gap:8px;font-size:10px;color:#b9c5d3}.colour-field input{width:32px;height:30px;padding:0;border:0;background:transparent;cursor:pointer}.colour-field input::-webkit-color-swatch-wrapper{padding:3px}.colour-field input::-webkit-color-swatch{border:0;border-radius:6px}.setting-row{display:flex;align-items:center;justify-content:space-between;margin-top:16px;gap:16px}.setting-row label{font-size:11px;color:#b8c3d1}select{border:1px solid var(--line);border-radius:9px;background:#131a27;color:#e3eaf3;font-size:11px;min-height:34px;padding:5px 28px 5px 10px;max-width:170px;cursor:pointer}.path-select{display:flex;background:#ffffff05;border:1px solid #ffffff0c;border-radius:11px;padding:3px;margin-top:8px}.path-select button{flex:1;border:0;border-radius:8px;background:transparent;font-size:10px;color:#a4b0c1;padding:9px 2px}.path-select button[aria-pressed=true]{background:#ffffff12;color:#eef4fa}.panel-bottom{display:flex;align-items:center;gap:8px;margin-top:18px}.hide-btn{border:1px solid var(--line);background:rgba(255,255,255,.04);color:#d9e3ee;border-radius:11px;height:39px;flex:1;display:flex;align-items:center;justify-content:center;gap:9px;font-size:11px}.hide-btn svg{width:15px;height:15px}.hint{position:fixed;z-index:2;bottom:calc(28px + env(safe-area-inset-bottom));right:max(28px,env(safe-area-inset-right));font-size:10px;letter-spacing:.1em;color:#bcc8da;text-shadow:0 2px 8px #000}.hint span{opacity:.5;margin:0 9px}#revealHint{position:fixed;left:50%;bottom:calc(36px + env(safe-area-inset-bottom));transform:translateX(-50%);border:1px solid var(--line);border-radius:100px;background:#070b15a6;padding:10px 17px;font-size:11px;pointer-events:none;z-index:6;white-space:nowrap;opacity:0;transition:opacity .4s}#revealHint.visible{opacity:1}
#toast{position:fixed;left:50%;top:calc(96px + env(safe-area-inset-top));transform:translateX(-50%);width:max-content;max-width:calc(100vw - 40px);z-index:20;padding:13px 18px;border:1px solid var(--line);border-radius:14px;background:#101828eb;color:#e6edf7;font-size:12px;line-height:1.6;box-shadow:0 10px 40px #0005;text-align:center;opacity:0;pointer-events:none;transition:opacity .2s}#toast.visible{opacity:1}
#info{position:fixed;z-index:25;inset:0;background:#050811aa;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);display:flex;align-items:center;justify-content:center;padding:24px}.info-card{border:1px solid var(--line);border-radius:25px;background:#101522;padding:28px;width:390px;max-width:100%;max-height:90dvh;overflow:auto}.info-card h2{font-size:25px;letter-spacing:-.035em;font-weight:500;margin:6px 0 18px}.info-card p{font-size:12px;line-height:1.8;color:#bdc8d7;margin:13px 0}.info-card strong{color:#f1f5f9;font-weight:550}.info-card .primary{width:100%;justify-content:center;margin-top:14px;min-height:44px}.fineprint{font-size:10px!important;color:#8fa0b4!important;border-top:1px solid var(--line);padding-top:14px}.error-panel{position:fixed;inset:0;z-index:30;background:#070910;display:flex;align-items:center;justify-content:center;padding:30px;text-align:center}.error-panel h2{font-weight:500}.error-panel p{font-size:14px;line-height:1.7;color:#b9c7d8;max-width:380px}.error-panel button{margin:20px auto}.no-js{position:fixed;inset:20%;z-index:40;background:#121827;padding:30px;border-radius:20px}
@media(max-width:600px){header{padding-top:calc(17px + env(safe-area-inset-top));padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}.brand-sub{font-size:7px}.brand-icon{width:29px}.brand-name{font-size:12px}.top-actions{gap:7px}.icon-btn{width:40px;height:40px}#welcome{left:24px;bottom:calc(38px + env(safe-area-inset-bottom));width:330px}h1{font-size:51px}#welcome p{font-size:13px}#controls{left:16px;bottom:calc(16px + env(safe-area-inset-bottom));width:calc(100vw - 32px);max-width:none;padding:19px 20px;border-radius:23px}.panel-heading{margin-bottom:17px}.divider{margin:12px 0 15px}.palette{width:38px;height:38px}.palette span{width:29px;height:29px}.hint{display:none}.panel-bottom{margin-top:16px}}
@media(max-height:620px) and (orientation:landscape){#controls{left:auto;right:calc(16px + env(safe-area-inset-right));width:310px;max-width:44vw;bottom:12px;top:76px;overflow-y:auto;padding:16px}.panel-heading{margin-bottom:10px}.divider{margin:8px 0 11px}.row-label{margin-bottom:5px}.palette{width:32px;height:32px}.palette span{width:24px;height:24px}.setting-row{margin-top:10px}.panel-bottom{margin-top:10px}.path-select button{padding:7px 1px}#welcome{bottom:24px;width:360px;max-width:55vw}h1{font-size:43px;margin:10px 0}#welcome p{margin-bottom:15px}#welcome .motion-note{margin-top:10px}.hint{display:none}header{padding-top:calc(14px + env(safe-area-inset-top))}.brand-sub{display:none}}
@media(max-width:370px){#controls{padding:16px}.palette{width:32px;height:32px}.palette span{width:25px;height:25px}.palette-row{gap:2px}.brand-sub{display:none}.speed-presets button{font-size:9px;padding:0 3px}h1{font-size:44px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}