.storyline-editor{margin:16px 0;padding:16px;border:1px solid #343438;border-radius:14px;background:#18181b}.storyline-heading,.storyline-footer{display:flex;align-items:center;justify-content:space-between;gap:12px}.storyline-heading label{font-size:16px;font-weight:600}.storyline-heading label span{font-size:14px;font-weight:400;color:#a8a8b0;margin-left:8px}#storylineMode{font-size:14px;color:#a4f4d2;white-space:nowrap}#storylineInput{box-sizing:border-box;display:block;width:100%;resize:vertical;min-height:90px;margin:12px 0;border:1px solid #50505a;border-radius:9px;padding:12px;background:#101012;color:#fafafa;font:inherit;font-size:16px;line-height:1.5}#storylineInput:focus{outline:2px solid #a4f4d2;outline-offset:2px}#storylineInput::placeholder{color:#9898a3}.storyline-footer p,#storylineStatus{font-size:14px;color:#b9b9c1;line-height:1.5;margin:0}.storyline-footer button{flex-shrink:0}#storylineStatus:not(:empty){margin-top:10px;color:#a4f4d2}.storyline-editor :disabled{opacity:.5;cursor:wait}@media(max-width:600px){.storyline-footer{align-items:flex-start;flex-direction:column}.storyline-footer button{width:100%;min-height:44px}}

.beta-banner{text-align:center;padding:12px;background:#162623;color:#a4f4d2;font-size:13px;letter-spacing:.08em}.beta-banner span{display:inline-block;margin-left:14px;color:#fff;letter-spacing:0}.beauty-title{font-size:24px;margin:0 0 7px}.beauty-subtitle{color:#ccd6d1;margin:0 0 20px;line-height:1.6}.style-picker{padding:0;border:0;margin:0 0 18px;display:flex;gap:10px;flex-wrap:wrap}.style-picker legend{margin-bottom:10px;color:#ccd6d1;font-size:14px}.style-picker label{flex:1;min-width:210px;display:flex;gap:10px;align-items:center;padding:15px;border:1px solid #4b5651;border-radius:12px;cursor:pointer}.style-picker label:has(input:checked){border-color:#a4f4d2;background:#23372f}.style-picker input{accent-color:#a4f4d2;width:18px;height:18px}.style-picker small{display:block;margin-top:7px;font-size:13px;color:#c3ccc7}.beta-note{font-size:12px;color:#adb8b1;line-height:1.6;margin:0 0 20px}.style-picker label:has(input:focus-visible){outline:2px solid white;outline-offset:3px}

.color-control{display:flex;align-items:center;gap:14px;margin:16px 0;color:#d3ddd7}.color-control select{padding:10px;background:#18261f;color:#e5fff0;border:1px solid #7d9a89;border-radius:8px;font-size:16px}.color-preview-panel{position:relative;margin:12px 0;padding:12px;background:#101613;border:1px solid #617c6c;border-radius:12px}.color-preview-panel video{display:block;width:100%;max-height:65vh}.color-preview-panel button{margin-top:8px;padding:8px 14px;}

#videoStage{position:relative}#videoStage.showing-color-preview>video,#videoStage.showing-color-preview>#playFinishedEdit{visibility:hidden}#videoStage .color-preview-panel{position:absolute;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;margin:0;padding:0;border:0;border-radius:inherit;overflow:hidden;background:#000}#videoStage .color-preview-panel video{display:block;position:static;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;visibility:visible}#videoStage .color-preview-panel button{position:absolute;top:10px;right:10px;z-index:2;margin:0;padding:8px 12px;border:1px solid #829389;border-radius:8px;background:#142019e6;color:white;cursor:pointer}

/* Moving highlight signals activity without inventing a completion percentage. */
#editWorkline[data-state="working"] .edit-workline-track,
#editWorkline[data-state="saving"] .edit-workline-track{height:3px;background:rgba(114,255,205,.16);box-shadow:0 0 8px rgba(90,255,188,.28)}
#editWorkline[data-state="working"] .edit-workline-track::after,
#editWorkline[data-state="saving"] .edit-workline-track::after{content:"";position:absolute;inset:0 auto 0 0;width:38%;background:linear-gradient(90deg,transparent,#56ffc2 38%,#e6fff5 60%,transparent);box-shadow:0 0 8px #72ffcf;animation:stoneBusySweep 1.45s linear infinite;pointer-events:none}
#editWorkline[data-state="working"] .edit-workline-track i{background:#53eeb7!important;animation:none!important;opacity:.3;transform:scaleX(1)}
@keyframes stoneBusySweep{from{transform:translateX(-110%)}to{transform:translateX(370%)}}
@media(prefers-reduced-motion:reduce){#editWorkline[data-state="working"] .edit-workline-track::after,#editWorkline[data-state="saving"] .edit-workline-track::after{animation:none;width:100%;background:#83ffd1;opacity:.7}}

/* Playback time remains visible when native controls fade away. */
.playback-time{color:#fff;font-size:14px;font-variant-numeric:tabular-nums;line-height:1.4;padding:10px 0 2px;min-height:20px;}
.playback-time[hidden]{display:none;}

/* Export activity owns this same line while preview playback starts or ends. */
#editWorkline[data-export-state="busy"]{display:flex;color:#b0ffe1;min-height:32px}
#editWorkline[data-export-state="busy"] .edit-workline-track{flex:1 1 100%;width:100%;height:4px;background:#16543e;box-shadow:0 0 9px #39ff9d88}
#editWorkline[data-export-state="busy"] #editWorklineLabel{display:none!important}
#editWorkline[data-export-state="busy"] .edit-workline-track i{opacity:.9!important;transform:scaleX(1)!important;background:#2aff9b!important;filter:none!important;animation:none!important;box-shadow:none!important}
#editWorkline[data-export-state="busy"] .edit-workline-track::after{content:"";position:absolute;inset:0 auto 0 0;width:32%;background:linear-gradient(90deg,transparent,#83ffb9 25%,#ffffff 52%,#62ffb3 75%,transparent);box-shadow:0 0 12px #75ffc6;animation:stoneSaveSweep 1.05s linear infinite;pointer-events:none}
#editWorkline[data-export-state="busy"][data-export-waiting="true"] .edit-workline-track{box-shadow:0 0 12px #43ffa6bb}
#editWorkline[data-export-state="error"] .edit-workline-track::after{display:none!important}
#editWorkline[data-export-state="error"] .edit-workline-track i{background:#ff728b!important;animation:none!important;transform:scaleX(1)!important}
#finalSaveProgress{display:none!important}
#finalSaveStatus{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;font-size:13px;line-height:1.6;opacity:1;color:#a4f4d2;margin:0 0 8px;font-weight:500}
#finalSaveStatus[data-state="idle"]{display:none}
#finalSaveStatus[data-state="error"]{color:#ff9dad}
#finalSaveStatus .save-elapsed{color:#bbd5ca;font-size:12px;font-weight:400;font-variant-numeric:tabular-nums;white-space:nowrap}
@keyframes stoneSaveSweep{from{transform:translateX(-110%)}to{transform:translateX(420%)}}
@media(prefers-reduced-motion:reduce){#editWorkline[data-export-state="busy"] .edit-workline-track::after{animation:none;width:100%;background:#c1ffe0;opacity:.85}}

/* A completed export owns the line even if the preview last reported an error. */
#editWorkline[data-export-state="ready"],
#editWorkline[data-state="complete"]:not([data-export-state="busy"]):not([data-export-state="error"]){display:flex;color:#2aff9b!important}
#editWorkline[data-export-state="ready"] .edit-workline-track,
#editWorkline[data-state="complete"]:not([data-export-state="busy"]):not([data-export-state="error"]) .edit-workline-track{flex:1 1 100%;width:100%;height:2px;background:#2aff9b;box-shadow:none}
#editWorkline[data-export-state="ready"] .edit-workline-track i,
#editWorkline[data-state="complete"]:not([data-export-state="busy"]):not([data-export-state="error"]) .edit-workline-track i{background:#2aff9b!important;opacity:1!important;transform:scaleX(1)!important;animation:none!important;filter:none!important;box-shadow:none!important}
#editWorkline[data-export-state="ready"] .edit-workline-track::after,
#editWorkline[data-export-state="ready"] #editWorklineLabel{display:none!important}