:root{--bg: #111318;--panel: #1a1d24;--panel-2: #22262f;--line: #333845;--text: #e8eaef;--muted: #9aa3b2;--accent: #3d7eff;--accent-2: #5b9cff;--danger: #e35d6a;--title-h: 48px;--status-h: 32px}*{box-sizing:border-box}html,body,#app{height:100%;margin:0}body{font-family:Segoe UI,Microsoft YaHei,system-ui,sans-serif;background:var(--bg);color:var(--text);overflow:hidden}button,input,select{font:inherit;color:inherit}button{cursor:pointer}.app-shell{display:grid;grid-template-rows:var(--title-h) 1fr var(--status-h);height:100%}.titlebar{display:flex;align-items:center;gap:8px;padding:0 12px;background:var(--panel);border-bottom:1px solid var(--line);-webkit-app-region:drag}.titlebar *{-webkit-app-region:no-drag}.brand{font-weight:700;letter-spacing:.4px;margin-right:10px;color:#fff}.env-tag{font-size:11px;padding:2px 8px;border-radius:999px;background:#1f6f4a;color:#d9ffe8}.env-tag.browser{background:#7a3d12;color:#ffe3c8}.menu-item{position:relative}.menu-btn,.icon-btn{height:32px;border:1px solid transparent;background:transparent;color:var(--text);border-radius:6px;padding:0 10px}.icon-btn{width:36px;height:36px;padding:0;display:inline-flex;align-items:center;justify-content:center;-webkit-app-region:no-drag}.icon-btn img{width:22px;height:22px;object-fit:contain;display:block}.rec-btn .rec-dot{width:12px;height:12px;border-radius:50%;background:#c44;box-shadow:0 0 0 2px #3a2020}.rec-btn.recording .rec-dot{background:#ff2a2a;animation:rec-blink .9s ease-in-out infinite}@keyframes rec-blink{50%{opacity:.35}}.mini{background:var(--panel-2);border:1px solid var(--line);border-radius:6px;padding:2px 8px;font-size:12px}.mini.on{border-color:var(--accent-2);background:#24324a}.switch{position:relative;width:40px;height:22px;display:inline-block}.switch input{opacity:0;width:0;height:0}.switch-ui{position:absolute;top:0;right:0;bottom:0;left:0;background:#3a3f4a;border-radius:99px;cursor:pointer;transition:background .15s}.switch-ui:after{content:"";position:absolute;width:16px;height:16px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .15s}.switch input:checked+.switch-ui{background:#3d7eff}.switch input:checked+.switch-ui:after{transform:translate(18px)}.menu-btn:hover,.icon-btn:hover,.menu-btn.active,.icon-btn.active{background:var(--panel-2);border-color:var(--line)}.dropdown{display:none;position:absolute;top:36px;left:0;min-width:220px;background:#2b2d30;border:1px solid var(--line);border-radius:8px;padding:6px;z-index:20;box-shadow:0 8px 24px #0006}.menu-item.open .dropdown{display:block}.dropdown a{display:flex;align-items:center;gap:8px;padding:8px 10px;color:var(--text);text-decoration:none;border-radius:6px}.dropdown a img{width:18px;height:18px;object-fit:contain}.dropdown a:hover{background:#3b5998}.start-dropdown{min-width:240px}.start-dropdown .scene-list{max-height:240px;overflow:auto}.start-dropdown button{display:block;width:100%;text-align:left;border:0;background:none;color:var(--text);border-radius:6px;padding:8px 10px}.start-dropdown button:hover,.start-dropdown button.current{background:#3b5998}.start-dropdown .hint{padding:4px 10px 8px}.scene-audio-btn{margin-left:4px;color:var(--text)}.scene-audio-btn:hover{color:#fff}.scene-audio-btn[aria-pressed=true]{color:#7ec8ff}.nav-mode-btn{min-width:128px;height:38px;display:inline-flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:1px;padding:2px 12px;border-radius:8px;border:1px solid rgba(255,255,255,.16);background:#243044;line-height:1.15}.nav-mode-btn__current{font-size:11px;font-weight:700;color:#e8f0ff}.nav-mode-btn__switch{font-size:10px;color:#9ec0ff}.nav-mode-btn.free{background:#3a2e1c;border-color:#ffc47859}.nav-mode-btn.free .nav-mode-btn__current{color:#ffe8c8}.nav-mode-btn.free .nav-mode-btn__switch{color:#ffc27a}.nav-mode-btn.preview{background:#1d3f73;border-color:#78aaff73}.nav-mode-btn:hover{filter:brightness(1.08)}.tour-bottom{position:absolute;left:50%;bottom:28px;transform:translate(-50%);z-index:8;display:flex;gap:12px;pointer-events:none}.tour-bottom button{pointer-events:auto}@keyframes tour-start-glow{0%,to{opacity:.88;box-shadow:0 4px 20px #00000059,0 0 24px #508cff38}50%{opacity:1;box-shadow:0 6px 28px #00000073,0 0 32px #64a0ff61}}.tour-start-btn{min-width:132px;height:48px;padding:0 26px;border-radius:999px;border:2px solid rgba(255,255,255,.42);background:#00000085;color:#fff;font-weight:700;letter-spacing:.06em;animation:tour-start-glow 2.4s ease-in-out infinite}.tour-start-btn:hover{border-color:#ffffffb3}@keyframes tour-next-glow{0%,to{opacity:.86;box-shadow:0 4px 16px #e86a0061}50%{opacity:1;box-shadow:0 6px 22px #e86a009e}}.tour-next-btn{min-width:108px;height:48px;padding:0 22px;border-radius:999px;border:2px solid rgba(255,220,160,.72);background:linear-gradient(180deg,#ffb95aeb,#e86a00e0);color:#1a1208eb;font-weight:700;letter-spacing:.04em;animation:tour-next-glow 2.4s ease-in-out infinite}.tour-next-btn:hover{filter:brightness(1.06)}.menu-path{margin:4px 10px 6px;font-size:11px;color:var(--muted);word-break:break-all}.workspace{position:relative;min-height:0;overflow:hidden}#canvas-root{position:relative;width:100%;height:100%;background:#000}#canvas-root canvas{width:100%;height:100%;outline:none}#canvas-root canvas.measure-hud{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none;z-index:4}.loading{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#080a0eb8;z-index:5}.loading.hide{display:none}.bar{width:min(420px,70%);height:8px;background:#2a2f3a;border-radius:99px;overflow:hidden}.bar>i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),#79c0ff)}.loading p{color:var(--muted);margin:12px 0 0}.loading .load-pct{margin-top:8px;color:#fff;font-size:18px;font-variant-numeric:tabular-nums}.sidebar{position:absolute;top:12px;right:12px;width:280px;max-height:calc(100% - 24px);overflow:auto;background:#1a1d24eb;border:1px solid var(--line);border-radius:10px;padding:12px;z-index:6;box-shadow:-8px 0 28px #00000047;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.sidebar-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}.sidebar h3{margin:0;font-size:14px;color:#fff}.sidebar-close{width:28px;height:28px;flex:none;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:8px;background:transparent;color:var(--muted);padding:0}.sidebar-close:hover{background:#ffffff14;color:#fff}.sidebar-slide-enter-active,.sidebar-slide-leave-active{transition:transform .32s cubic-bezier(.22,1,.36,1),opacity .22s ease}.sidebar-slide-enter-from,.sidebar-slide-leave-to{transform:translate(calc(100% + 20px));opacity:0}.audio-current{display:flex;align-items:center;gap:6px;margin:8px 0;padding:7px 8px;background:var(--panel-2);border:1px solid var(--line);border-radius:6px}.audio-current span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.icon-x{width:22px;height:22px;flex:none;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:transparent;color:var(--muted);padding:0}.icon-x:hover{background:#e35d6a38;color:var(--danger)}.row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:8px 0;font-size:13px}.row select,.row input[type=text],.row input[type=number]{background:#2b2d30;border:1px solid var(--line);border-radius:6px;padding:4px 8px}.speed-row .speed-num{width:72px;text-align:center}.speed-range{width:100%;margin:0 0 10px;accent-color:var(--accent-2)}.stack{display:flex;flex-direction:column;gap:6px;margin-top:8px}.stack button{background:var(--panel-2);border:1px solid var(--line);border-radius:6px;padding:8px 10px;text-align:left}.stack button:hover,.stack button.on{border-color:var(--accent-2);background:#24324a}.marker-list{margin-top:8px;font-size:12px}.marker-item{display:flex;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px solid #2c313c}.marker-item button{border:0;background:none;color:var(--danger)}.clarity-ratings{margin-top:8px}.clarity-pos{color:var(--muted);font-style:normal}.hint{color:var(--muted);font-size:12px;line-height:1.5}.status{display:flex;align-items:center;gap:16px;padding:0 12px;background:var(--panel);border-top:1px solid var(--line);font-size:12px;color:var(--muted)}.status b{color:var(--text);font-weight:600}.spacer{flex:1}.hidden-file{display:none}.pc-wechat-gate{min-height:100%;display:grid;place-items:center;padding:32px 20px;background:radial-gradient(circle at 50% 0%,rgba(61,126,255,.16),transparent 42%),var(--bg)}.pc-wechat-card{width:min(560px,100%);padding:28px 28px 24px;border:1px solid var(--line);border-radius:16px;background:var(--panel);box-shadow:0 18px 50px #00000047}.pc-wechat-card h1{margin:0 0 12px;font-size:22px}.pc-wechat-card p{margin:0 0 10px;color:var(--muted);line-height:1.6}.pc-wechat-card ol{margin:8px 0 18px;padding-left:20px;line-height:1.7}.pc-wechat-url{display:grid;gap:6px;margin-bottom:14px;color:var(--muted);font-size:12px}.pc-wechat-url input{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#0e1014;color:var(--text)}.pc-wechat-copy{border:0;border-radius:8px;padding:10px 18px;background:var(--accent);color:#fff;font-weight:600}.pc-wechat-copy:hover{background:var(--accent-2)}.pc-wechat-ok{margin-top:12px;color:#8fd0a8}.toast{position:fixed;top:68px;left:50%;transform:translate(-50%);z-index:40;min-width:220px;max-width:72vw;padding:12px 22px;border-radius:10px;text-align:center;font-size:15px;font-weight:600;color:#fff;box-shadow:0 10px 28px #00000059;pointer-events:none}.toast.success{background:#1f8f4e}.toast.info{background:#2d5aa8}.toast.error{background:#b43b46}.pick-hint{position:absolute;top:16px;left:50%;transform:translate(-50%);z-index:8;padding:10px 18px;border-radius:999px;background:#121620e0;border:1px solid var(--accent-2);color:#fff;font-size:14px;pointer-events:none;white-space:nowrap}.modal-mask{position:fixed;top:0;right:0;bottom:0;left:0;z-index:30;background:#06080c8c;display:flex;align-items:center;justify-content:center;padding:24px}.modal{width:min(460px,92vw);background:#1c2028;border:1px solid var(--line);border-radius:12px;padding:18px 18px 14px;box-shadow:0 18px 48px #00000073}.modal h3{margin:0 0 10px;color:#fff;font-size:18px}.modal label{display:block;margin:10px 0 6px;font-size:13px;color:var(--muted)}.modal input[type=text],.modal input[type=number],.modal textarea,.modal select{width:100%;background:#2b2d30;border:1px solid var(--line);border-radius:6px;padding:8px 10px}.modal textarea{resize:vertical}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}.modal-actions button,.file-pick{background:var(--panel-2);border:1px solid var(--line);border-radius:6px;padding:8px 14px}.modal-actions button.primary,.file-pick{background:#24324a;border-color:var(--accent-2)}.modal-actions button:disabled,.file-pick:disabled,.type-grid button:disabled{opacity:.45;cursor:not-allowed}.stack button:disabled,.stack button:disabled:hover{opacity:1;color:#6d7585;background:#171a21;border-color:#2a2f3a;cursor:not-allowed}.import-progress{margin-top:10px;padding:14px 12px;border-radius:8px;background:#161a22;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}.import-progress .video-bar{width:100%}.import-progress .hint{margin:0}.type-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}.type-grid button{background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:12px 10px}.type-grid button.on{border-color:var(--accent-2);background:#24324a;color:#fff}.media-preview{display:block;width:100%;max-height:240px;margin-top:8px;object-fit:contain;border-radius:8px;background:#111}.preview-modal.player{width:min(860px,92vw)}.video-player{display:block;width:100%;max-height:70vh;margin-top:8px;background:#000;border-radius:8px}.video-converting{min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#fff;background:#111;border-radius:8px;margin-top:8px}.video-spinner{width:36px;height:36px;border:3px solid #333;border-top-color:#5b9cff;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.video-bar{width:70%;height:6px;background:#2a2f3a;border-radius:99px;overflow:hidden}.video-bar i{display:block;height:100%;background:#5b9cff}.preview-text{font-size:15px;line-height:1.6;white-space:pre-wrap}.list-title{margin:14px 0 6px;font-size:13px;color:#fff}.scene-item,.marker-item{display:flex;justify-content:space-between;align-items:center;gap:8px}.scene-item{padding:6px 4px;border-radius:6px;cursor:pointer;font-size:12px}.scene-item>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.scene-item:hover,.scene-item.current{background:#24324a}.scene-item em{font-style:normal;color:var(--muted)}.marker-name{border:0;background:none;color:var(--text);text-align:left;flex:1;padding:0}.marker-item.current{background:#24324a;border-radius:6px;padding:6px 4px}.wall-name-input{flex:1;min-width:0;height:28px;border:1px solid var(--line);background:var(--panel-2);border-radius:4px;padding:0 8px}.marker-edit{margin-top:10px}.xf-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:8px 0}.xf-grid button{background:var(--panel-2);border:1px solid var(--line);border-radius:6px;padding:7px 8px}.xf-grid button:hover{border-color:var(--accent-2);background:#24324a}.xf-grid button:disabled{opacity:.4;cursor:not-allowed}.env-tag.play{background:#2d5aa8;color:#dce8ff}.play-scene-select{height:30px;max-width:160px;border:1px solid var(--line);background:var(--panel-2);border-radius:6px;padding:0 8px}.publish-dir{margin:8px 0;padding:8px 10px;border-radius:8px;background:var(--panel-2);color:var(--muted);word-break:break-all;font-size:12px}.publish-urls{display:flex;flex-direction:column;gap:6px;margin:10px 0}.publish-urls .linkish{width:100%;text-align:left;background:var(--panel-2);border:1px solid var(--line);border-radius:6px;padding:8px 10px;color:var(--accent-2);line-height:1.4;word-break:break-all}.publish-qr{text-align:center;margin:12px 0 4px}.publish-qr img{width:180px;height:180px;background:#fff;border-radius:8px;padding:6px}.publish-qr p{color:var(--muted);font-size:12px;margin:8px 0 0}.touch-pad{position:absolute;left:16px;bottom:18px;z-index:9;pointer-events:none}.touch-pad .stick{pointer-events:auto;width:112px;height:112px;border-radius:50%;background:#12162073;border:1px solid rgba(255,255,255,.18);position:relative;touch-action:none}.touch-pad .stick i{position:absolute;left:50%;top:50%;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;background:#ffffff59}.touch-pad .stick span,.touch-pad .touch-hint{display:block;margin-top:8px;color:#ffffffb3;font-size:12px;text-align:center}.app-shell.play{height:100dvh;padding-bottom:env(safe-area-inset-bottom)}.app-shell.play .titlebar{padding-top:max(0px,env(safe-area-inset-top))}.flow{display:contents}html,body,#app{width:100%;height:100%}html.play-mobile,html.play-mobile body,html.play-mobile #app{overflow:hidden;background:#000;touch-action:none}.app-shell.mobile{display:block;width:100%;height:100%;overflow:hidden;padding:0;background:#000}.mobile-shell{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;overflow:hidden;background:#000}.mobile-stage{--touch-zone-left-width: 36%;position:absolute;width:100vh;height:100vw;left:50%;top:50%;transform:translate(-50%,-50%) rotate(90deg);transform-origin:center center;overflow:hidden;background:#000;touch-action:none;-webkit-user-select:none;user-select:none}@media (orientation: landscape){html:not(.is-wechat) .mobile-stage{width:100%;height:100%;left:0;top:0;transform:none}}html.is-wechat .mobile-stage{width:100vh!important;height:100vw!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%) rotate(90deg)!important}.app-shell.mobile .titlebar{position:absolute;left:0;right:0;top:0;z-index:60;height:44px;padding:0 8px;background:#12162073;border-bottom:none;-webkit-app-region:no-drag}.app-shell.mobile .workspace,.app-shell.mobile #canvas-root,.app-shell.mobile .loading{position:absolute!important;top:0;right:0;bottom:0;left:0}.app-shell.mobile .modal-mask{position:absolute}.touch-controls-mount{position:absolute;top:0;right:0;bottom:0;left:0;z-index:8;pointer-events:none}.touch-controls-mount.hidden,.app-shell.nav-tour .touch-game-controls__left{display:none}.app-shell.nav-tour .touch-game-controls__right{left:0}.app-shell.mobile .sidebar{z-index:14}.touch-game-controls{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.touch-game-controls__left{position:absolute;left:0;top:0;bottom:0;width:var(--touch-zone-left-width);pointer-events:none}.touch-game-controls__right{position:absolute;right:0;top:0;bottom:0;left:var(--touch-zone-left-width);pointer-events:auto;touch-action:none}.touch-game-controls__vj-base{position:absolute;left:50%;bottom:max(20px,env(safe-area-inset-bottom));width:min(44vw,200px);height:min(44vw,200px);max-width:200px;max-height:200px;transform:translate(-50%);border-radius:50%;border:2px solid rgba(255,255,255,.22);background:radial-gradient(circle at 35% 30%,#ffffff1f,#00000059);touch-action:none;pointer-events:auto}.touch-game-controls__vj-knob{position:absolute;left:50%;top:50%;width:44%;height:44%;border-radius:50%;transform:translate(-50%,-50%);background:#82afff59;border:2px solid rgba(200,220,255,.55);box-shadow:0 4px 14px #00000059;pointer-events:none}.app-shell.mobile .tour-bottom{z-index:12}.app-shell.mobile .tour-start-btn{min-width:140px;height:52px;font-size:17px}.guide-mask{position:fixed;top:var(--title-h);right:0;bottom:var(--status-h);left:0;z-index:25;display:flex;align-items:center;justify-content:center;padding:24px;background:#0000006b;pointer-events:none;color:#fff}.app-shell.play:not(.mobile) .guide-mask{bottom:0}.app-shell.mobile .guide-mask{position:absolute;top:0;right:0;bottom:0;left:0;z-index:70;padding:12px 20px}.guide-board{display:flex;flex-direction:column;align-items:center;gap:48px;max-width:100%}.guide-row{display:flex;flex-wrap:nowrap;justify-content:center;align-items:flex-end;gap:56px}.guide-item{display:flex;flex-direction:column;align-items:center;gap:12px;min-width:88px}.guide-item>span,.cap-line span,.guide-dismiss{color:#ffffffd1;font-size:15px;letter-spacing:.04em}.guide-dismiss{margin:6px 0 0;font-size:13px;color:#ffffff8c}.guide-mask kbd{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 8px;border:2px solid #fff;border-radius:8px;background:#00000047;color:#fff;font-family:inherit;font-size:16px;font-weight:700;line-height:1}.guide-mask kbd.key-wide{min-width:92px;padding:0 16px;border-radius:22px}.wasd{display:grid;grid-template-columns:repeat(3,44px);gap:6px;justify-items:center}.wasd-w{grid-column:1 / -1;justify-self:center}.key-line,.cap-line{display:flex;justify-content:center;gap:14px}.cap-line span{width:44px;text-align:center}.guide-mouse,.guide-swipe,.guide-pinch{width:48px;height:64px;color:#fff}.guide-swipe,.guide-pinch{width:64px;height:64px}.guide-stick{width:64px;height:64px;border:2px solid #fff;border-radius:50%;position:relative}.guide-stick i{position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border:2px solid #fff;border-radius:50%}.guide-fade-enter-active,.guide-fade-leave-active{transition:opacity .35s ease}.guide-fade-enter-from,.guide-fade-leave-to{opacity:0}.app-shell.mobile .guide-board{gap:18px}.app-shell.mobile .guide-row{gap:28px 36px}.app-shell.mobile .guide-item>span,.app-shell.mobile .guide-dismiss{font-size:14px}.app-shell.mobile .guide-stick,.app-shell.mobile .guide-swipe,.app-shell.mobile .guide-pinch{width:52px;height:52px}@media (max-height: 640px){.app-shell:not(.mobile) .guide-board{gap:28px}.app-shell:not(.mobile) .guide-row{gap:28px}.app-shell:not(.mobile) .guide-mask kbd{min-width:36px;height:36px;font-size:14px}.app-shell:not(.mobile) .guide-mask kbd.key-wide{min-width:76px}.app-shell:not(.mobile) .wasd{grid-template-columns:repeat(3,36px)}.app-shell:not(.mobile) .cap-line span{width:36px}}
