:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--color-background:#0e0f11;--color-stage:#08090a;--color-surface:#16171a;--color-surface-raised:#1e2024;--color-surface-hover:#272a2f;--color-text:#edeef0;--color-text-secondary:#b7bac1;--color-text-muted:#959aa3;--color-border:#2b2e34;--color-border-strong:#3a3e45;--color-accent:#2f5fe8;--color-accent-hover:#2551d4;--color-accent-text:#93aeff;--color-on-accent:#fff;--color-success:#5bd08a;--color-warning:#f2b54b;--color-danger:#ff8a80;--color-warning-bg:#f2b54b1a;--color-danger-bg:#ff8a801a;--color-scrim:#08090adb;--font-ui:Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--text-title:1rem;--text-body:.875rem;--text-label:.8125rem;--text-small:.75rem;--leading-body:1.45;--leading-tight:1.25;--space-xs:4px;--space-sm:8px;--space-md:12px;--space-lg:16px;--space-xl:24px;--space-xxl:32px;--radius-sm:6px;--radius-md:10px;--topbar-height:52px;--inspector-width:340px;--control-height:36px;--control-height-small:30px;--icon-size:16px;--reel-list-max:232px;--focus-ring:2px solid var(--color-accent-text);--transition:.15s ease-out}@media (max-width:1099px){:root{--inspector-width:300px}}*,:before,:after{box-sizing:border-box}html,body{height:100%}body{background:var(--color-background);color:var(--color-text);font-family:var(--font-ui);font-size:var(--text-body);line-height:var(--leading-body);-webkit-font-smoothing:antialiased;flex-direction:column;margin:0;display:flex}h1,h2,p{margin:0}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;overflow:hidden;position:absolute!important}[hidden]{display:none!important}:focus-visible{outline:var(--focus-ring);outline-offset:2px}.icon{width:var(--icon-size);height:var(--icon-size);fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;flex:none}.topbar{height:var(--topbar-height);align-items:center;gap:var(--space-lg);padding:0 var(--space-lg);border-bottom:1px solid var(--color-border);flex:none;display:flex}.brand{align-items:center;gap:var(--space-sm);font-size:var(--text-title);flex:none;font-weight:600;display:flex}.brand-mark{width:20px;height:20px;fill:var(--color-accent)}.brand-mark .brand-word{fill:var(--color-on-accent)}.topbar-note{color:var(--color-text-muted);font-size:var(--text-label);text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.workspace{grid-template-columns:minmax(0, 1fr) var(--inspector-width);flex:1;min-height:0;display:grid}.stage{background:var(--color-stage);justify-content:center;align-items:center;gap:var(--space-md);min-width:0;min-height:0;padding:var(--space-lg);flex-direction:column;display:flex}.frame{height:calc(100dvh - var(--topbar-height) - 2 * var(--space-lg) - var(--control-height-small) - var(--space-md));aspect-ratio:9/16;border-radius:var(--radius-md);background:var(--color-surface);border:1px solid var(--color-border);max-width:100%;position:relative;overflow:hidden}.frame canvas{width:100%;height:100%;display:block}.frame[data-state=ready]{border-color:#0000}.frame-overlay{justify-content:center;align-items:center;gap:var(--space-sm);padding:var(--space-xl);text-align:center;background:var(--color-surface);flex-direction:column;display:flex;position:absolute;inset:0}#empty-state{border:2px dashed var(--color-border-strong);border-radius:var(--radius-md)}.overlay-icon{fill:none;width:32px;height:32px;stroke:var(--color-text-secondary);stroke-width:1.75px;stroke-linecap:round;stroke-linejoin:round;margin-bottom:var(--space-xs)}.overlay-icon.icon-danger{stroke:var(--color-danger)}.overlay-title{font-size:var(--text-title);font-weight:600;line-height:var(--leading-tight)}.overlay-text{color:var(--color-text-secondary);max-width:30ch;margin-bottom:var(--space-sm)}.steps{margin:var(--space-xl) 0 0;padding:var(--space-lg) 0 0;border-top:1px solid var(--color-border);counter-reset:step;gap:var(--space-sm);text-align:left;color:var(--color-text-secondary);font-size:var(--text-label);list-style:none;display:grid}.steps li{counter-increment:step;align-items:center;gap:var(--space-sm);display:flex}.steps li:before{content:counter(step);border:1px solid var(--color-border-strong);width:20px;height:20px;font-size:var(--text-small);color:var(--color-text);border-radius:50%;flex:none;place-items:center;font-weight:600;display:grid}.drop-hint{background:var(--color-scrim);border:2px dashed var(--color-accent-text);border-radius:var(--radius-md);font-size:var(--text-title);place-items:center;font-weight:600;display:none;position:absolute;inset:0}.frame.is-dragging .drop-hint{display:grid}.spinner{border:2px solid var(--color-border-strong);border-top-color:var(--color-accent-text);border-radius:50%;width:24px;height:24px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.transport{height:var(--control-height-small);align-items:center;gap:var(--space-md);max-width:100%;color:var(--color-text-secondary);font-size:var(--text-label);display:flex}.time{font-variant-numeric:tabular-nums;min-width:9ch}.reel-step{align-items:center;gap:var(--space-sm);min-width:0;display:flex}.now-showing{color:var(--color-text-muted);white-space:nowrap;text-overflow:ellipsis;min-width:0;overflow:hidden}#play-toggle .icon{fill:currentColor;stroke:none}#play-toggle[data-playing=true] .icon-play,#play-toggle:not([data-playing=true]) .icon-pause{display:none}.inspector{background:var(--color-surface);border-left:1px solid var(--color-border);flex-direction:column;min-height:0;display:flex}.inspector-scroll{flex:1;min-height:0;overflow-y:auto}.panel{gap:var(--space-sm);padding:var(--space-lg);border-bottom:1px solid var(--color-border);display:grid}.panel-head{justify-content:space-between;align-items:baseline;gap:var(--space-sm);display:flex}.panel-title{font-size:var(--text-label);letter-spacing:.02em;color:var(--color-text);font-weight:600}.count{color:var(--color-text-muted);font-size:var(--text-small);font-variant-numeric:tabular-nums}.hint{color:var(--color-text-muted);font-size:var(--text-small)}.clip-row{align-items:center;gap:var(--space-sm);display:flex}.clip-info{min-width:0;color:var(--color-text-secondary);text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums;flex:1;overflow:hidden}.field{gap:var(--space-xs);min-width:0;display:grid}.field label{font-size:var(--text-label);color:var(--color-text-secondary);justify-content:space-between;font-weight:500;display:flex}.field-row{gap:var(--space-md);grid-template-columns:1fr 1fr;display:grid}.label-note{color:var(--color-text-muted);font-weight:400}.value{color:var(--color-text);font-variant-numeric:tabular-nums}input[type=text],input[type=number],textarea{width:100%;min-height:var(--control-height);padding:var(--space-sm) var(--space-md);background:var(--color-surface-raised);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius-sm);font:inherit;transition:border-color var(--transition)}textarea{resize:vertical;min-height:96px;line-height:var(--leading-body)}input::placeholder,textarea::placeholder{color:var(--color-text-muted)}input[type=text]:hover,input[type=number]:hover,textarea:hover{border-color:var(--color-border-strong)}input:focus-visible,textarea:focus-visible{outline:var(--focus-ring);outline-offset:0;border-color:#0000}input[aria-invalid=true]{border-color:var(--color-danger)}input:disabled,textarea:disabled{opacity:.45;cursor:not-allowed}input[type=range]{width:100%;height:var(--control-height);accent-color:var(--color-accent);cursor:pointer;margin:0}input[type=range]:disabled{cursor:not-allowed}.switch{align-items:center;gap:var(--space-sm);min-height:var(--control-height-small);cursor:pointer;color:var(--color-text-secondary);font-size:var(--text-label);display:flex;position:relative}.switch input{opacity:0;width:1px;height:1px;position:absolute}.switch-track{background:var(--color-surface-hover);border:1px solid var(--color-border-strong);width:32px;height:18px;transition:background-color var(--transition), border-color var(--transition);border-radius:9px;flex:none;position:relative}.switch-track:after{content:"";background:var(--color-text-secondary);width:12px;height:12px;transition:transform var(--transition), background-color var(--transition);border-radius:50%;position:absolute;top:2px;left:2px}.switch:hover .switch-track{border-color:var(--color-text-muted)}.switch input:checked+.switch-track{background:var(--color-accent);border-color:var(--color-accent)}.switch input:checked+.switch-track:after{background:var(--color-on-accent);transform:translate(14px)}.switch input:focus-visible+.switch-track{outline:var(--focus-ring);outline-offset:2px}.switch:has(input:disabled){opacity:.45;cursor:not-allowed}.switch-hint{margin-top:calc(-1 * var(--space-xs));padding-left:40px}.reel-list{gap:var(--space-xs);margin:0;padding:0;list-style:none;display:grid}@media (min-width:900px){.reel-list{max-height:var(--reel-list-max);margin:-2px;padding:2px;overflow-y:auto}}.reel-row{align-items:center;gap:var(--space-sm);padding:var(--space-sm);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface-raised);transition:border-color var(--transition), background-color var(--transition);display:flex;position:relative}.reel-row:hover{background:var(--color-surface-hover)}.reel-row.is-selected{border-color:var(--color-accent)}.reel-row:has(input:focus-visible){outline:var(--focus-ring);outline-offset:2px}.reel-select{align-items:flex-start;gap:var(--space-sm);cursor:pointer;flex:1;min-width:0;display:flex}.reel-select input{opacity:0;width:1px;height:1px;position:absolute}.reel-select:has(input:disabled){cursor:default}.reel-num{color:var(--color-text-muted);font-size:var(--text-small);font-variant-numeric:tabular-nums;flex:none;padding-top:1px;font-weight:600}.reel-row.is-selected .reel-num{color:var(--color-accent-text)}.reel-body{gap:2px;min-width:0;display:grid}.reel-quote{-webkit-line-clamp:2;line-height:var(--leading-tight);overflow-wrap:anywhere;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.reel-meta{gap:var(--space-sm);font-size:var(--text-small);color:var(--color-text-muted);font-variant-numeric:tabular-nums;display:flex}.reel-status[data-tone=success]{color:var(--color-success)}.reel-status[data-tone=warning]{color:var(--color-warning)}.reel-status[data-tone=danger]{color:var(--color-danger)}.reel-status[data-tone=active]{color:var(--color-accent-text)}.reel-progress{left:var(--space-sm);right:var(--space-sm);width:auto;height:3px;position:absolute;bottom:3px}progress{appearance:none;background:var(--color-surface-hover);height:4px;accent-color:var(--color-accent);border:0;border-radius:2px;overflow:hidden}progress::-webkit-progress-bar{background:var(--color-surface-hover)}progress::-webkit-progress-value{background:var(--color-accent)}progress::-moz-progress-bar{background:var(--color-accent)}.actions{gap:var(--space-sm);padding:var(--space-lg);border-top:1px solid var(--color-border);background:var(--color-surface);flex:none;display:grid}.action-buttons{gap:var(--space-sm);display:flex}.action-buttons .btn{flex:1}.overall{gap:var(--space-xs);display:grid}.overall-text{font-size:var(--text-label);justify-content:space-between;font-weight:500;display:flex}.overall progress{width:100%}.notice{gap:var(--space-sm);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-sm);font-size:var(--text-small);line-height:var(--leading-body);display:flex}.notice .icon{margin-top:1px}.notice-warning{background:var(--color-warning-bg);color:var(--color-warning)}.notice-danger{background:var(--color-danger-bg);color:var(--color-danger)}.btn{justify-content:center;align-items:center;gap:var(--space-sm);min-height:var(--control-height);padding:0 var(--space-lg);border-radius:var(--radius-sm);font:inherit;white-space:nowrap;cursor:pointer;transition:background-color var(--transition), border-color var(--transition), opacity var(--transition);border:1px solid #0000;font-weight:600;text-decoration:none;display:inline-flex}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-icon{width:var(--control-height-small);padding:0}.btn-small{min-height:var(--control-height-small);padding:0 var(--space-md);font-size:var(--text-label);flex:none}.btn-primary{background:var(--color-accent);color:var(--color-on-accent)}.btn-primary:hover:not(:disabled){background:var(--color-accent-hover)}.btn-secondary{background:var(--color-surface-raised);color:var(--color-text);border-color:var(--color-border-strong)}.btn-secondary:hover:not(:disabled){background:var(--color-surface-hover)}@media (max-width:899px){body{height:auto;min-height:100%}.workspace{display:block}.topbar-note{display:none}.stage{padding:var(--space-md) var(--space-lg)}.frame{width:min(100%,38.25svh);height:auto}.inspector{border-left:0;border-top:1px solid var(--color-border)}.inspector-scroll{overflow:visible}.actions{box-shadow:none;position:sticky;bottom:0}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:0s!important;animation-duration:0s!important}.btn:active:not(:disabled){transform:none}.spinner{animation:none}}
