:root{font-family:Segoe UI,Microsoft YaHei,sans-serif;color:#ecf0ee;background:#151716;font-synthesis:none;--panel: #202321;--line: #363c38;--muted: #a8b1ab;--accent: #a9dbbf;--highlight: #c8e8d4;letter-spacing:0}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,input,select{font:inherit}button{color:inherit;cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:4px}button{transition:color .15s,background .15s}button:disabled{opacity:.4;cursor:default}.topbar{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-bottom:1px solid var(--line);background:#191c1a}.brand,.top-actions{display:flex;align-items:center;gap:12px}.brand>svg{color:var(--accent);width:28px;height:28px}h1{margin:0;font-size:20px;font-weight:650}.brand>span{color:var(--muted);font-size:13px;padding-left:12px;border-left:1px solid var(--line)}.top-actions{gap:6px}.live-state{display:flex;align-items:center;gap:8px;margin-right:16px;font-size:12px;color:var(--muted)}.status-dot{display:inline-block;width:6px;height:6px;background:var(--accent);border-radius:50%;flex-shrink:0}.icon-button{width:44px;height:44px;border:0;border-radius:5px;background:transparent;display:inline-flex;align-items:center;justify-content:center}.icon-button svg{width:19px;height:19px;stroke-width:1.7}.icon-button:hover{background:#343a36}.icon-button.active{color:#17261d;background:var(--highlight)}main{height:calc(100dvh - 64px);display:grid;grid-template-columns:minmax(0,1fr) 288px}#stage{position:relative;min-width:0;min-height:0;overflow:hidden;background:#101710;touch-action:none}#stage canvas{display:block;width:100%;height:100%}.stage-toolbar{position:absolute;z-index:2;display:flex;align-items:center;gap:3px;top:20px;left:20px;padding:4px;background:#191e1bea;border:1px solid #65726566;border-radius:6px}.toolbar-divider{height:24px;width:1px;background:#59625b;margin:0 4px}.scene-status{position:absolute;left:22px;bottom:23px;display:flex;gap:18px;padding:8px 12px;font-size:11px;font-variant-numeric:tabular-nums;background:#191e1be8;border-radius:4px;color:#d1d8d2;pointer-events:none}.scene-view{position:absolute;right:20px;bottom:20px}.segmented{display:flex;padding:3px;gap:3px;background:#151a17;border:1px solid var(--line);border-radius:5px}.segmented button{border:0;border-radius:3px;background:transparent;min-height:38px;padding:0 16px;font-size:12px;color:#b8c0ba}.segmented button:hover{background:#303a32}.segmented button.active{color:#15291d;background:var(--highlight)}.settings{background:var(--panel);border-left:1px solid var(--line);padding:24px 22px 0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#526357 transparent}.panel-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}h2{margin:0;font-size:16px;font-weight:600}.small-label{font-size:10px;font-variant-numeric:tabular-nums;color:#a5b2a8}.subjects{margin-bottom:25px}.subjects button,.presets button{flex:1;padding:0 4px}fieldset{padding:0 0 22px;border:0;border-bottom:1px solid var(--line);margin:0 0 22px;min-width:0}legend{display:flex;align-items:center;gap:8px;margin-bottom:18px;padding:0;font-size:13px;font-weight:600}legend svg{width:16px;height:16px;color:var(--muted)}.presets{margin-bottom:20px}.control-label{display:flex;align-items:center;justify-content:space-between;margin:15px 0 3px;font-size:12px;color:#d6dcd7}output{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}input[type=range]{width:100%;height:28px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;cursor:pointer;margin:0;accent-color:var(--accent)}input[type=range]::-webkit-slider-runnable-track{background:#465148;height:3px;border-radius:0}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:12px;height:12px;margin-top:-4.5px;border:2px solid #cce9d6;border-radius:50%;background:var(--accent)}input[type=range]::-moz-range-track{background:#465148;height:3px}input[type=range]::-moz-range-thumb{width:10px;height:10px;border:2px solid #cce9d6;border-radius:50%;background:var(--accent)}.direction-control{display:flex;gap:10px;align-items:center}.direction-control svg{width:20px;height:20px;color:#c7d1c9;flex-shrink:0}.select-row{display:flex;align-items:center;justify-content:space-between;margin-top:14px;font-size:12px;gap:10px}select{min-width:0;width:158px;height:38px;padding:0 8px;border:1px solid #4a554d;border-radius:4px;background:#292f2a;color:#e1e8e3;font-size:12px}.toggle-row{position:relative;display:flex;align-items:center;justify-content:space-between;min-height:44px;font-size:12px;cursor:pointer}.toggle-row input{position:absolute;right:0;opacity:0;width:44px;height:44px;margin:0;cursor:pointer}.toggle{width:32px;height:18px;background:#515b53;border-radius:10px;pointer-events:none}.toggle:after{content:"";display:block;width:12px;height:12px;margin:3px;border-radius:50%;background:#b7c2ba;transition:transform .15s}.toggle-row input:checked+.toggle{background:#85b99b}.toggle-row input:checked+.toggle:after{background:#f1fff6;transform:translate(14px)}.toggle-row input:focus-visible+.toggle{outline:2px solid var(--accent);outline-offset:4px}.motion-settings{margin-bottom:0;border:0;padding-bottom:16px}.panel-footer{display:flex;align-items:center;gap:8px;border-top:1px solid var(--line);min-height:48px;color:var(--muted);font-size:10px}#selected-label{margin-left:auto}#cursor{display:none;position:absolute;z-index:1;border:1px solid #e0fff0bb;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #10241955}#cursor.pressed{background:#cee7d31a;border-color:#fff}#loading{position:absolute;z-index:4;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;gap:12px;color:#d6e5d9;background:#141c16;font-size:14px}#loading[hidden]{display:none}.spinner{width:18px;height:18px;border:2px solid #46574a;border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}#toast{position:fixed;z-index:10;left:50%;bottom:24px;transform:translate(-50%,8px);border:1px solid #55675a;border-radius:5px;padding:12px 18px;background:#1a251e;color:#e6f1e9;font-size:13px;opacity:0;pointer-events:none;transition:opacity .16s,transform .16s;max-width:calc(100vw - 32px)}#toast.visible{opacity:1;transform:translate(-50%)}@media (max-width: 800px){body{overflow:auto}.topbar{height:58px;padding:0 12px}main{height:auto;min-height:calc(100dvh - 58px);grid-template-columns:1fr;grid-template-rows:minmax(380px,58dvh) auto}.settings{border-left:0;border-top:1px solid var(--line);padding:22px;overflow:visible}.settings fieldset{margin-bottom:20px}.stage-toolbar{top:12px;left:12px}.brand>span{font-size:11px;padding-left:8px}.brand{gap:8px}h1{font-size:18px}.live-state{display:none}.scene-status{left:12px;bottom:14px;gap:10px;font-size:10px;padding:8px}.scene-view{right:12px;bottom:12px}.scene-view button{padding:0 10px}#toast{bottom:16px}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{transition:none!important}}