:root{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}:root,:root[data-theme=dark]{--bg: #0f1115;--panel: #181b22;--control: #232834;--border: #2a2f3a;--text: #e6e8ec;--muted: #9aa3b2;--accent: #0087ff;--error-bg: #3a1c1c;--error-border: #6b2b2b;--error-text: #ffb4b4;--overlay: rgba(15, 17, 21, .72);--canvas-frame: rgba(154, 163, 178, .4)}:root[data-theme=light]{--bg: #f5f6f8;--panel: #ffffff;--control: #eef0f4;--border: #d4d8e0;--text: #1b1f27;--muted: #5a6472;--accent: #0087ff;--error-bg: #fde8e8;--error-border: #f3b4b4;--error-text: #a12525;--overlay: rgba(245, 246, 248, .78);--canvas-frame: rgba(90, 100, 114, .35)}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}#app{max-width:760px;margin:0 auto;padding:24px 16px 48px}.title-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.app-header h1{font-size:20px;margin:0 0 16px}.theme-toggle{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}.options-row{display:flex;flex-wrap:wrap;gap:12px}.picker{display:flex;gap:18px;align-items:center;border:1px solid var(--border);border-radius:10px;padding:10px 14px;margin:0}.picker legend{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.05em;padding:0 6px}.picker label{display:inline-flex;align-items:center;gap:6px;cursor:pointer}.app-main{margin-top:20px}#stage-wrap{position:relative;border:1px solid var(--border);border-radius:12px;background:var(--panel);overflow:hidden}#stage{width:100%;height:460px;display:flex;align-items:center;justify-content:center;padding:24px}#canvas{position:relative;outline:1px dashed var(--canvas-frame);outline-offset:0}#stage-wrap:not(.has-content) #canvas{display:none}#mount{width:100%;height:100%}#mount>*{width:100%;height:100%}#mount svg{width:100%;height:100%;display:block}.canvas-size{position:absolute;bottom:100%;left:0;margin-bottom:4px;font-size:11px;font-variant-numeric:tabular-nums;color:var(--muted);pointer-events:none;white-space:nowrap}.empty{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:var(--muted);font-size:16px;text-align:center;padding:24px}#stage-wrap.has-content .empty{display:none}.empty code{background:var(--control);padding:1px 6px;border-radius:5px}.demo-btn{font-size:15px;padding:10px 18px}.dropzone{position:absolute;top:0;right:0;bottom:0;left:0;display:none;align-items:center;justify-content:center;background:var(--overlay);border:2px dashed var(--accent);border-radius:12px;color:var(--text);font-size:18px;pointer-events:none}#stage-wrap.dragging .dropzone{display:flex}.dropzone code{background:var(--control);padding:1px 6px;border-radius:5px}.error{margin:12px 0 0;padding:10px 12px;border-radius:8px;background:var(--error-bg);border:1px solid var(--error-border);color:var(--error-text);font-size:14px}.transport{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}button,select{font:inherit;color:var(--text);background:var(--control);border:1px solid var(--border);border-radius:8px;padding:8px 12px;cursor:pointer}button:hover:not(:disabled),select:hover{border-color:var(--accent)}button:disabled{opacity:.45;cursor:default}.timeline{display:flex;align-items:center;gap:12px;margin-top:16px}#seek{flex:1;accent-color:var(--accent)}.time{color:var(--muted);font-variant-numeric:tabular-nums;min-width:130px;text-align:right;font-size:14px}.meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:16px;color:var(--muted);font-size:14px}.meta .rate{display:inline-flex;align-items:center;gap:6px;margin-left:auto}.rate-note{font-size:12px}#trigger-picker{flex-direction:column;align-items:stretch;gap:8px;margin-bottom:10px}.trigger-config[hidden]{display:none}.trigger-config{display:flex;flex-direction:column;gap:8px;padding-top:8px;border-top:1px solid var(--border)}.trigger-fields{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.trigger-fields label{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}.trigger-fields select,.trigger-fields input{font:inherit}.trigger-fields select:disabled,.trigger-fields input:disabled{opacity:.55;cursor:not-allowed}.trigger-fields input[type=number]{width:64px}