html,body{color:#f6f1e8;background:#05070c;width:100%;height:100%;margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;overflow:hidden}canvas{width:100%;height:100%;display:block;position:fixed;inset:0}.hud{z-index:2;pointer-events:none;text-shadow:0 1px 16px #0000008c;max-width:min(380px,100vw - 44px);position:fixed;bottom:20px;left:22px}.kicker{color:#f6f1e89e;text-transform:uppercase;letter-spacing:.08em;margin:0 0 7px;font-size:.72rem}h1{letter-spacing:0;margin:0;font-size:clamp(1.2rem,2.6vw,2.15rem);font-weight:650;line-height:1.05}#status{color:#f6f1e8c2;margin:10px 0 0;font-size:.86rem;line-height:1.45}.movement-note{z-index:4;color:#f6f1e8b8;-webkit-backdrop-filter:blur(18px)saturate(1.4);backdrop-filter:blur(18px)saturate(1.4);pointer-events:none;text-align:center;text-shadow:0 1px 16px #000000ad;background:#121216b8;border:1px solid #ffffff1f;border-radius:10px;max-width:min(520px,100vw - 32px);margin:0;padding:6px 10px;font-size:16px;font-weight:600;line-height:1.1;position:fixed;top:16px;left:50%;transform:translate(-50%);box-shadow:0 4px 20px #0006,inset 0 1px #ffffff0d}.gracia-controls{z-index:4;pointer-events:none;align-items:flex-start;gap:10px;max-width:min(720px,100vw - 32px);display:flex;position:fixed;top:16px;left:16px}.panel{-webkit-backdrop-filter:blur(18px)saturate(1.4);backdrop-filter:blur(18px)saturate(1.4);pointer-events:auto;background:#121216b8;border:1px solid #ffffff1f;border-radius:10px;align-items:center;gap:6px;padding:6px 10px;display:flex;box-shadow:0 4px 20px #0006,inset 0 1px #ffffff0d}.dropdown{display:inline-block;position:relative}.dd-toggle,.btn{color:#ffffffad;cursor:pointer;text-shadow:0 1px 3px #000000b3;white-space:nowrap;border:0;border-radius:6px;font:600 11px/1.1 inherit}.lbl{color:#ffffff73;letter-spacing:.1em;text-shadow:0 1px 3px #000000b3;text-transform:uppercase;font:600 9px/1 inherit}.dd-toggle{text-align:left;appearance:none;background:#ffffff0d;border:1px solid #ffffff1f;min-width:104px;padding:5px 24px 5px 10px;position:relative}.dd-toggle:after{content:"";border:3.5px solid #0000;border-top-color:#ffffff73;position:absolute;top:50%;right:9px;transform:translateY(-50%)}.dropdown.open .dd-toggle:after{transform:translateY(-50%)rotate(180deg)}.dd-menu{z-index:5;-webkit-backdrop-filter:blur(20px)saturate(1.3);backdrop-filter:blur(20px)saturate(1.3);background:#101014f0;border:1px solid #ffffff1a;border-radius:8px;min-width:100%;padding:4px;display:none;position:absolute;top:calc(100% + 6px);left:0;box-shadow:0 10px 32px #0000008c}.dropdown.open .dd-menu{display:block}.dd-item{color:#ffffffad;cursor:pointer;text-align:left;text-shadow:0 1px 3px #000000b3;white-space:nowrap;background:0 0;border:0;border-radius:5px;width:100%;padding:7px 12px;font:500 11px/1.3 inherit;display:block}.dd-item:hover,.dd-item.active,.btn.on,.btn:hover{color:#fff;background:#ffffff14}.btn{background:0 0;padding:5px 11px}.divider{background:#ffffff1f;flex-shrink:0;width:1px;height:18px;margin:0 2px}.dof-panel{z-index:4;gap:9px;position:fixed;top:16px;right:16px}.range-control{align-items:center;gap:6px;display:flex}.range-control span{color:#ffffff85;letter-spacing:0;text-transform:none;font:600 10px/1 inherit}.range-control input{accent-color:#ffffffc7;cursor:pointer;width:82px}.range-control output{color:#ffffffb8;text-align:right;text-shadow:0 1px 3px #000000b3;min-width:30px;font:600 10px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.playback-panel{z-index:4;width:min(520px,100vw - 32px);position:fixed;bottom:18px;right:16px}.world-switcher{z-index:4;gap:8px;position:fixed;bottom:72px;right:16px}.world-switch-btn{color:#fff;cursor:pointer;text-shadow:0 1px 8px #00000094;background:#ffffff1f;border:0;border-radius:50%;place-items:center;width:51px;height:51px;font:800 31px/1 inherit;display:grid}.world-switch-btn:hover{background:#ffffff38}.vb{align-items:center;gap:10px;width:100%;padding:2px 0;display:flex}.vb-btn{color:#fff;cursor:pointer;background:#ffffff1f;border:0;border-radius:50%;justify-content:center;align-items:center;width:30px;min-width:30px;height:30px;display:flex}.vb-btn:hover{background:#ffffff38}.vb-track{cursor:pointer;background:#ffffff1a;border-radius:2px;flex:1;height:4px;position:relative}.vb-fill{pointer-events:none;background:#ffffff73;border-radius:2px;width:0;position:absolute;inset:0 auto 0 0}.vb-thumb{background:#fff;border-radius:50%;width:12px;height:12px;position:absolute;top:50%;left:0;transform:translate(-50%,-50%);box-shadow:0 1px 6px #0008}.vb-time{color:#ffffff73;text-align:right;text-shadow:0 1px 3px #000000b3;min-width:70px;font:500 11px/1 inherit}#mobile-controls{z-index:3;pointer-events:none;--mobile-stick-size:clamp(118px, 27vw, 152px);--mobile-stick-bottom:max(76px, calc(env(safe-area-inset-bottom) + 72px));display:none;position:fixed;inset:0}.mobile-stick{width:var(--mobile-stick-size);aspect-ratio:1;pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none;border-radius:50%;position:absolute}#move-stick{left:max(14px, env(safe-area-inset-left));bottom:var(--mobile-stick-bottom)}#look-stick{right:max(14px, env(safe-area-inset-right));bottom:var(--mobile-stick-bottom)}.mobile-stick-ring,.mobile-stick-knob{pointer-events:none;border-radius:50%;position:absolute}.mobile-stick-ring{-webkit-backdrop-filter:blur(12px)saturate(1.2);backdrop-filter:blur(12px)saturate(1.2);background:radial-gradient(circle,#f6f1e81a,#f6f1e809 58%,#03050a52),repeating-linear-gradient(0deg,#ffffff0b 0 1px,#0000 1px 12px);border:1px solid #f6f1e857;inset:0;box-shadow:0 0 18px #00000052,inset 0 0 20px #f6f1e814}.mobile-stick-knob{aspect-ratio:1;background:radial-gradient(circle at 32% 28%,#ffffffd1,#f6f1e861 42%,#262a3075);border:1px solid #f6f1e8b3;width:42%;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 1px 14px #00000057}.mobile-stick.active .mobile-stick-ring{border-color:#f6f1e8b8;box-shadow:0 0 20px #f6f1e82e,inset 0 0 24px #f6f1e821}#mobile-world-buttons{right:max(14px, env(safe-area-inset-right));bottom:calc(var(--mobile-stick-bottom) + var(--mobile-stick-size) + 12px);width:var(--mobile-stick-size);pointer-events:auto;justify-content:center;gap:10px;display:flex;position:absolute}.mobile-world-btn{color:#f6f1e8eb;cursor:pointer;text-shadow:0 1px 8px #00000094;-webkit-backdrop-filter:blur(12px)saturate(1.2);backdrop-filter:blur(12px)saturate(1.2);background:#121216ad;border:1px solid #f6f1e852;border-radius:999px;place-items:center;width:71px;height:61px;font:800 34px/1 inherit;display:grid}.mobile-world-btn:active{color:#fff;background:#f6f1e829}@media (width<=720px){body{width:100%;max-width:100%;overflow:hidden}.movement-note,.gracia-controls,.dof-panel,.world-switcher,.hud{display:none}.panel{border-radius:8px;flex-wrap:wrap;justify-content:flex-start;gap:6px;width:100%;min-width:0;padding:7px 8px}.btn,.dd-toggle{font-size:10px}.gracia-controls .dropdown{flex:140px;min-width:0}.gracia-controls .dd-toggle{width:100%;min-width:0}.gracia-controls .dd-menu{max-width:calc(100vw - 36px);right:0}.gracia-controls .dd-item{text-overflow:ellipsis;overflow:hidden}.divider{display:none}.playback-panel{left:max(12px, env(safe-area-inset-left));right:max(12px, env(safe-area-inset-right));bottom:max(14px, env(safe-area-inset-bottom));box-sizing:border-box;width:auto;max-width:none}.playback-panel .vb{gap:8px;min-width:0}.playback-panel .vb-track{min-width:0}.playback-panel .vb-time{min-width:58px;font-size:10px}#mobile-controls{display:block}}@media (width<=520px){#mobile-controls{--mobile-stick-size:clamp(96px, 29vw, 126px)}}@keyframes spin{to{transform:rotate(360deg)}}