:root{--bg-0: #0f1013;--bg-1: #17181c;--bg-2: #1e2024;--bg-3: #26282e;--border: #34373f;--border-soft: #2a2c33;--text-1: rgba(240, 241, 245, .92);--text-2: rgba(220, 221, 228, .6);--text-3: rgba(220, 221, 228, .35);--accent: #ff8a3d;--accent-dim: rgba(255, 138, 61, .16);--live: #e5484d;--online: #3ecf8e;--offline: #55585f;--font-ui: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace}*,*:before,*:after{box-sizing:border-box;margin:0;font-weight:400}ul{list-style:none;padding:0}html,body,#root{height:100%}body{color:var(--text-1);background:var(--bg-0);line-height:1.4;font-family:var(--font-ui);font-size:13px;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-user-select:none;user-select:none;overflow:hidden}button,select,textarea,input{font-family:inherit;font-size:inherit;color:inherit}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--bg-3);border-radius:5px}.app-shell{display:flex;flex-direction:column;height:100vh;width:100vw}.app-titlebar{flex-shrink:0;min-height:40px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;padding:4px 14px;font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--text-2);background:var(--bg-1);border-bottom:1px solid var(--border);-webkit-app-region:drag}.app-titlebar button,.app-titlebar select{-webkit-app-region:no-drag}.app-titlebar button,.app-titlebar label,.app-titlebar select,.app-titlebar span{white-space:nowrap}.app-titlebar-name{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}.titlebar-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px}.titlebar-actions>*{flex-shrink:0}.output-control{display:flex;align-items:center;gap:6px}.output-hide-cursor{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--text-2);white-space:nowrap}.icon-btn{background:transparent;border:1px solid var(--border);color:var(--text-2);width:24px;height:24px;border-radius:3px;cursor:pointer;font-size:14px;line-height:1}.icon-btn:hover{color:var(--text-1);border-color:var(--accent)}.osc-control{position:relative;display:flex;align-items:center;gap:6px}.auto-advance-control{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-2)}.auto-advance-checkbox{display:flex;align-items:center;gap:4px;white-space:nowrap}.auto-advance-interval{width:44px;background:var(--bg-3);border:1px solid var(--border);color:var(--text-1);padding:3px 5px;border-radius:3px;font-size:12px}.auto-advance-unit{white-space:nowrap}.osc-settings{position:absolute;top:100%;right:0;margin-top:6px;z-index:20;display:flex;flex-direction:column;gap:8px;padding:10px;width:220px;background:var(--bg-2);border:1px solid var(--border);border-radius:4px;box-shadow:0 4px 12px #0006}.osc-settings label{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--text-2)}.osc-settings input{background:var(--bg-3);border:1px solid var(--border);color:var(--text-1);padding:4px 6px;border-radius:3px;font-size:12px}.osc-settings-hint{margin:0;font-size:10.5px;line-height:1.4;color:var(--text-3);word-break:break-all}.osc-settings-divider{border:none;border-top:1px solid var(--border);margin:2px 0}.osc-settings label.osc-settings-checkbox{flex-direction:row;align-items:center;gap:6px}.output-display-select{background:var(--bg-2);border:1px solid var(--border);color:var(--text-1);padding:0 8px;border-radius:3px;font-size:12px;max-width:220px}.output-display-select:disabled{opacity:.6}.transport-btn{background:var(--bg-3);border:1px solid var(--border);color:var(--text-1);padding:6px 14px;border-radius:3px;cursor:pointer;font-size:12px}.transport-btn:hover:not(:disabled){background:var(--bg-2);border-color:var(--accent)}.transport-btn:disabled{opacity:.4;cursor:default}.transport-btn.active{background:var(--accent);border-color:var(--accent);color:#1a1006}.empty-state{flex:1;display:flex;align-items:center;justify-content:center;color:var(--text-3);font-size:14px}.now-next{flex:3;display:flex;gap:1px;min-height:0;background:var(--border)}.slide-slot{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--bg-1)}.slide-slot-label{flex-shrink:0;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2);padding:8px 12px}.slide-slot:first-child .slide-slot-label{color:var(--accent)}.slide-slot-canvas{flex:1;display:flex;align-items:center;justify-content:center;margin:0 12px 12px;background:#000;border:1px solid var(--border);border-radius:2px;overflow:hidden}.slide-slot-frame{position:relative;max-width:100%;max-height:100%}.slide-slot-frame canvas{display:block;width:100%;height:100%}.slide-link{position:absolute;background:transparent;border:none;padding:0;cursor:pointer}.slide-link:hover{background:var(--accent-dim);outline:1px solid var(--accent);outline-offset:-1px}.slide-slot-empty{color:var(--text-3);font-family:var(--font-mono);font-size:13px}.slide-slot-canvas--clickable{cursor:pointer}.slide-slot-canvas--clickable:hover{outline:1px solid var(--accent);outline-offset:-1px}.transport{flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:16px;padding:10px;background:var(--bg-1);border-top:1px solid var(--border)}.transport-indicator{font-family:var(--font-mono);color:var(--text-2);font-size:13px;min-width:70px;text-align:center}.thumbnail-strip{flex-shrink:0;flex-basis:130px;display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;padding:8px 12px 12px;background:var(--bg-1);border-top:1px solid var(--border)}.thumbnail{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:4px;background:transparent;border:none;padding:0;cursor:pointer}.thumbnail-frame{width:140px;height:90px;display:flex;align-items:center;justify-content:center;background:#000;border:2px solid var(--border);border-radius:2px;overflow:hidden}.thumbnail-frame canvas,.thumbnail-placeholder{max-width:100%;max-height:100%}.thumbnail-placeholder{width:100%;height:100%}.thumbnail-active .thumbnail-frame{border-color:var(--accent)}.thumbnail-number{font-size:11px;font-family:var(--font-mono);color:var(--text-2)}.thumbnail-active .thumbnail-number{color:var(--accent)}.output-shell{display:flex;align-items:center;justify-content:center;width:100vw;height:100vh;background:#000}.output-shell canvas{max-width:100%;max-height:100%}.output-canvas-frame{position:relative;display:inline-block;max-width:100%;max-height:100%;line-height:0}.laser-dot{position:absolute;width:16px;height:16px;margin-left:-8px;margin-top:-8px;border-radius:50%;background:#ff3b30;box-shadow:0 0 8px 3px #ff3b30e6,0 0 16px 6px #ff3b3080;pointer-events:none}.output-empty{color:var(--text-3);font-family:var(--font-mono);font-size:16px}.output-shell--no-cursor{cursor:none}.output-fullscreen-prompt{position:fixed;top:16px;left:50%;transform:translate(-50%);z-index:10;padding:10px 18px;border:1px solid var(--border);border-radius:6px;background:var(--bg-2);color:var(--text-1);font-family:inherit;font-size:13px;cursor:pointer}.output-fullscreen-prompt:hover{border-color:var(--accent)}.modal-backdrop{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:24px;background:#0000008c;-webkit-app-region:no-drag}.modal-card{width:100%;max-width:420px;max-height:calc(100vh - 48px);display:flex;flex-direction:column;background:var(--bg-2);border:1px solid var(--border);border-radius:5px;box-shadow:0 12px 32px #0000008c;outline:none}.modal-header{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 10px 10px 14px;border-bottom:1px solid var(--border)}.modal-title{margin:0;font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--text-1)}.modal-close{background:transparent;border:1px solid transparent;color:var(--text-2);width:24px;height:24px;border-radius:3px;font-size:13px;line-height:1;cursor:pointer}.modal-close:hover{color:var(--text-1);border-color:var(--accent)}.modal-body{overflow-y:auto;padding:14px}.modal-hint{margin:0 0 12px;font-size:12px;line-height:1.45;color:var(--text-2)}.modal-actions{display:flex;gap:8px;flex-wrap:wrap}.modal-status{margin:12px 0 0;font-size:11px;line-height:1.45;color:var(--text-2);overflow-wrap:anywhere}
