:root{--app-width:100vw;--app-height:100vh}@supports (height:100dvh){:root{--app-width:100dvw;--app-height:100dvh}}html,body{margin:0;width:100%;height:var(--app-height);overflow:hidden;background:#1c2233;overscroll-behavior:none}body.theme-night{background:#050814}canvas{display:block;width:var(--app-width);height:var(--app-height)}#title{position:fixed;top:calc(20px + env(safe-area-inset-top));right:calc(76px + env(safe-area-inset-right));color:#f0e1c880;font:italic 19px Georgia,serif;letter-spacing:4px;pointer-events:none;text-shadow:0 1px 10px rgba(0,0,0,.5)}body.theme-night #title{color:#e0e8ff9e;text-shadow:0 1px 14px rgba(0,0,0,.8)}.theme-toggle{position:fixed;right:calc(18px + env(safe-area-inset-right));top:calc(14px + env(safe-area-inset-top));z-index:4;width:42px;height:42px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.18);border-radius:50%;background:#1216228a;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 8px 24px #0000002e;cursor:pointer}.theme-toggle:hover{background:#323a52b8}.theme-toggle:focus-visible{outline:2px solid rgba(245,211,132,.9);outline-offset:3px}.theme-icon{position:relative;width:18px;height:18px;border-radius:50%;background:#f4d17a;box-shadow:0 0 0 3px #f4d17a24,0 0 18px #f4d17a6b}.theme-icon:before{position:absolute;top:-7px;right:-7px;bottom:-7px;left:-7px;content:"";background:conic-gradient(from 0deg,transparent 0 9deg,#f4d17a 9deg 18deg,transparent 18deg 54deg,#f4d17a 54deg 63deg,transparent 63deg 99deg,#f4d17a 99deg 108deg,transparent 108deg 144deg,#f4d17a 144deg 153deg,transparent 153deg 189deg,#f4d17a 189deg 198deg,transparent 198deg 234deg,#f4d17a 234deg 243deg,transparent 243deg 279deg,#f4d17a 279deg 288deg,transparent 288deg 324deg,#f4d17a 324deg 333deg,transparent 333deg);border-radius:50%}.theme-icon:after{display:none;position:absolute;content:""}body.theme-night .theme-toggle{background:#0508149e;border-color:#d7e4ff38}body.theme-night .theme-toggle:hover{background:#1c2640c7}body.theme-night .theme-icon{width:20px;height:20px;background:#dce8ff;box-shadow:0 0 0 3px #dce8ff1c,0 0 18px #9bb4ff47}body.theme-night .theme-icon:before{top:-1px;right:-5px;bottom:1px;left:5px;background:#050814;border-radius:50%}body.theme-night .theme-icon:after{display:block;right:-3px;top:2px;width:3px;height:3px;border-radius:50%;background:#dce8ff;box-shadow:-6px 9px 0 -1px #dce8ffcc,4px 12px 0 -1px #dce8ffb3}#ui{position:fixed;left:calc(16px + env(safe-area-inset-left));top:calc(16px + env(safe-area-inset-top));display:flex;gap:10px;align-items:center;background:#12162299;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:10px;border-radius:8px;color:#e8dcc4;font:13px system-ui,sans-serif}.ui-controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap;max-width:calc(var(--app-width) - 76px)}#ui.is-minimized{padding:8px}#ui.is-minimized .ui-controls{display:none}#ui button{background:#3d4660;color:#e8dcc4;border:1px solid rgba(255,255,255,.15);border-radius:6px;padding:5px 12px;cursor:pointer;font-size:13px}#ui button:hover{background:#4a5578}#ui .icon-btn{position:relative;width:28px;height:28px;display:grid;place-items:center;flex:0 0 auto;padding:0}.minimize-icon,.minimize-icon:before,.minimize-icon:after{display:block;width:12px;height:2px;background:#e8dcc4;border-radius:2px;content:""}.minimize-icon:before{transform:translateY(-5px)}.minimize-icon:after{transform:translateY(3px)}#ui:not(.is-minimized) .minimize-icon:before,#ui:not(.is-minimized) .minimize-icon:after{display:none}#ui input[type=range]{width:110px;accent-color:#d9a05b}#ui input[type=text]{width:86px;background:#0000004d;border:1px solid rgba(255,255,255,.15);border-radius:6px;color:#e8dcc4;padding:5px 8px;font-size:13px}#ui label{display:flex;gap:6px;align-items:center;opacity:.9}.music-controls{display:flex;gap:8px;align-items:center;min-width:0}#audioStatus{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#e8dcc4c7}#fpsOverlay{position:fixed;left:calc(10px + env(safe-area-inset-left));bottom:calc(8px + env(safe-area-inset-bottom));z-index:20;color:#ffe45c;font:11px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;text-shadow:0 1px 3px rgba(0,0,0,.75);pointer-events:none}.intro-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:8;display:grid;place-items:center;padding:calc(24px + env(safe-area-inset-top)) calc(24px + env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) calc(24px + env(safe-area-inset-left));background:linear-gradient(90deg,#05081494,#12162247);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);color:#f5ead3;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;transition:opacity .22s ease,visibility .22s ease}.intro-modal.is-hidden{visibility:hidden;opacity:0;pointer-events:none}.intro-panel{position:relative;width:min(580px,calc(var(--app-width) - 48px));max-height:calc(var(--app-height) - 48px);overflow:auto;border:1px solid rgba(255,255,255,.16);border-radius:8px;background:linear-gradient(135deg,#121622c7,#23293a94);box-shadow:0 24px 80px #0000006b,inset 0 1px #ffffff14;padding:28px}.intro-panel:before{position:absolute;top:0;right:0;bottom:0;left:0;content:"";background:linear-gradient(120deg,rgba(218,154,82,.16),transparent 36%,rgba(93,145,188,.14));pointer-events:none}.intro-panel>*{position:relative}.intro-kicker{margin:0 42px 8px 0;color:#f5ead3a8;font:700 11px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;text-transform:uppercase;letter-spacing:0}.intro-panel h1{margin:0;color:#fff4dc;font:italic 38px/1 Georgia,serif;letter-spacing:0;text-shadow:0 2px 18px rgba(0,0,0,.5)}.intro-panel p{margin:14px 0 0;max-width:520px;color:#f5ead3d1;font-size:15px;line-height:1.5}.intro-close{position:absolute;right:12px;top:12px;z-index:1;width:34px;height:34px;border:1px solid rgba(255,255,255,.15);border-radius:50%;background:#0000002e;cursor:pointer}.intro-close:before,.intro-close:after{position:absolute;left:50%;top:50%;width:14px;height:2px;border-radius:2px;background:#f5ead3;content:""}.intro-close:before{transform:translate(-50%,-50%) rotate(45deg)}.intro-close:after{transform:translate(-50%,-50%) rotate(-45deg)}.intro-close:hover,.intro-start:hover{background:#f5d38433}.intro-close:focus-visible,.intro-start:focus-visible{outline:2px solid rgba(245,211,132,.95);outline-offset:3px}.intro-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:22px}.intro-item{min-height:46px;display:flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.12);border-radius:8px;background:#00000029;padding:10px;color:#f5ead3db;font-size:13px;line-height:1.25}.intro-wide{grid-column:1/-1}.intro-key{min-width:28px;height:28px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.18);border-radius:6px;background:#ffffff14;color:#fff1d5;font:700 15px/1 ui-monospace,SFMono-Regular,Consolas,monospace;box-shadow:inset 0 -2px #0000002e}.intro-gesture{position:relative;flex:0 0 auto;width:42px;height:28px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:#ffffff14}.intro-gesture:before{position:absolute;left:8px;top:50%;width:10px;height:10px;border-radius:50%;background:#f5d384;content:"";transform:translateY(-50%);box-shadow:14px 0 #f5d38485}.intro-theme-icon{position:relative;flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:#f5d384;box-shadow:0 0 18px #f5d38466}.intro-theme-icon:after{position:absolute;right:-3px;top:2px;width:18px;height:18px;border-radius:50%;background:#23293a;content:""}.intro-signal{position:relative;flex:0 0 auto;width:42px;height:28px}.intro-signal:before{position:absolute;top:6px;right:0;bottom:6px;left:0;content:"";background:linear-gradient(90deg,transparent 0 6%,#76dcff 6% 10%,transparent 10% 18%,#76dcff 18% 24%,transparent 24% 34%,#76dcff 34% 40%,transparent 40% 52%,#76dcff 52% 58%,transparent 58% 70%,#76dcff 70% 78%,transparent 78%);filter:drop-shadow(0 0 6px rgba(118,220,255,.55))}.intro-start{display:block;width:100%;margin-top:20px;border:1px solid rgba(245,211,132,.45);border-radius:8px;background:#d9a05b33;color:#fff3d9;padding:12px 18px;cursor:pointer;font:700 14px/1 system-ui,sans-serif}#rotateNotice{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;display:none;place-items:center;padding:28px;text-align:center;color:#f1e4ca;background:#0a0d16b8;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);font:15px system-ui,sans-serif}#rotateNotice:before{position:absolute;top:0;right:0;bottom:0;left:0;content:"";background:radial-gradient(circle at 50% 25%,rgba(217,160,91,.18),transparent 34%);pointer-events:none}#rotateNotice strong,#rotateNotice span{position:relative;display:block}#rotateNotice strong{margin-top:16px;font-size:24px;line-height:1.1}#rotateNotice span{max-width:260px;margin-top:8px;line-height:1.4;color:#f1e4cac7}.phone-icon{position:relative;width:50px;height:78px;border:2px solid rgba(241,228,202,.82);border-radius:12px;box-shadow:0 10px 35px #0000004d;transform:rotate(90deg)}.phone-icon:before{position:absolute;left:50%;top:6px;width:12px;height:2px;background:#f1e4cab8;border-radius:2px;content:"";transform:translate(-50%)}.phone-icon:after{position:absolute;left:50%;bottom:6px;width:5px;height:5px;background:#f1e4cab8;border-radius:50%;content:"";transform:translate(-50%)}@media(max-width:820px)and (orientation:landscape){#title{top:calc(15px + env(safe-area-inset-top));right:calc(58px + env(safe-area-inset-right));font-size:13px;letter-spacing:3px}.theme-toggle{right:calc(12px + env(safe-area-inset-right));top:calc(8px + env(safe-area-inset-top));width:34px;height:34px}.theme-icon{transform:scale(.82)}#ui{left:calc(10px + env(safe-area-inset-left));top:calc(10px + env(safe-area-inset-top));gap:8px;padding:8px;font-size:12px}.ui-controls{gap:8px}#ui button{padding:5px 9px;font-size:12px}#ui .icon-btn{width:26px;height:26px;padding:0}#ui input[type=range]{width:86px}#ui input[type=text]{width:72px;padding:5px 7px;font-size:12px}#audioStatus{max-width:150px}.intro-modal{padding:16px}.intro-panel{width:min(560px,calc(var(--app-width) - 32px));max-height:calc(var(--app-height) - 32px);padding:20px}.intro-panel h1{font-size:30px}.intro-panel p{font-size:13px}.intro-grid{grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}.intro-item{min-height:38px;padding:8px;font-size:12px}.intro-start{margin-top:14px;padding:10px 16px}}@media(max-width:820px)and (orientation:portrait){canvas{filter:saturate(.8) brightness(.7)}#title,#ui,.theme-toggle,.intro-modal{display:none}#rotateNotice{display:grid}}@media(max-width:560px){.intro-grid{grid-template-columns:1fr}}