@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Manrope:wght@400;500;600;650;700;750;800&display=swap');

:root{font-family:'DM Sans',sans-serif;color:#24272b;background:#f6f6f2;font-synthesis:none;--green:#c5ee89;--muted:#8b8e8a;--line:#e8e9e3}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.38}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #81af4b;outline-offset:3px}button{transition:background .18s,transform .18s}button:not(:disabled):active{transform:translateY(1px)}.topbar{height:88px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 4.5%}.brand{font-family:Manrope,sans-serif;font-weight:800;font-size:29px;letter-spacing:-1.8px;display:flex;align-items:center}.brand-icon{display:inline-flex;width:32px;height:32px;background:var(--green);border-radius:9px;align-items:center;justify-content:center;font-size:28px;line-height:1;margin-right:10px;letter-spacing:0}.brand-dot{color:#78a247}.project-label{font-size:12px;color:#777d75;display:flex;align-items:center;gap:9px}.status-dot,.live-dot{display:inline-block;width:6px;height:6px;background:#83ad59;border-radius:50%;flex-shrink:0}.pill{font-size:9px;background:#e9ece3;letter-spacing:1px;padding:4px 6px;border-radius:4px;margin-left:5px}.button{border:1px solid var(--line);border-radius:7px;padding:11px 17px;font-size:12px;font-weight:600;background:white;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}.button:hover{background:#edf0e7}.button.subtle{background:transparent;border:none;font-size:12px;padding-right:0;color:#5d635a}.button.primary{background:var(--green);border-color:var(--green);color:#25321b}.button.primary:hover{background:#b5e371}.button.light{background:#fbfcf7;color:#343a2e}.button.small{font-size:11px;padding:7px 10px;background:#fff}main{max-width:1600px;margin:auto;padding:0 4.5%}.intro{display:flex;justify-content:space-between;align-items:flex-end;padding:49px 0 35px;gap:25px}.eyebrow{font-size:9px;font-weight:650;letter-spacing:1.9px;color:#737b6a;margin-bottom:15px}h1{font-family:Manrope,sans-serif;font-size:43px;font-weight:750;letter-spacing:-2.1px;line-height:1.17;margin:0 0 15px}h1 span{color:#89917e}.intro p{font-size:12px;color:#7f837a;line-height:1.85;margin:0}.privacy-note{display:flex;align-items:center;gap:12px;margin:0 0 5px}.privacy-icon{display:flex;align-items:center;justify-content:center;background:#eaf0e0;color:#667e4b;border-radius:50%;width:37px;height:37px;font-size:30px}.privacy-note strong{font-size:11px;font-weight:600}.privacy-note p{font-size:10px;margin-top:3px}.editor{border:1px solid #dfe2d9;border-radius:13px;background:white;overflow:hidden;box-shadow:0 9px 36px #303a2410}.editor-top{height:65px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;border-bottom:1px solid var(--line);gap:10px}.editor-top>div{display:flex;align-items:center;gap:10px;min-width:0}.editor-top input{font-size:12px;font-weight:600;background:none;border:1px solid transparent;border-radius:4px;width:173px;padding:5px 3px;color:#3a4035;max-width:100%}.editor-top input:hover{border-color:var(--line)}.local-label{font-size:8px;letter-spacing:1px;color:#94988f;border-left:1px solid var(--line);padding-left:12px;white-space:nowrap}.workspace{display:grid;grid-template-columns:23% minmax(0,1fr) 23%;min-height:422px}.media-panel,.settings-panel{padding:21px 17px;display:flex;flex-direction:column}.media-panel{border-right:1px solid var(--line)}.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:7px;min-height:24px}h2{margin:0;font-size:12px;font-weight:650}.panel-heading h2 span{display:inline-flex;background:#eff1eb;border-radius:4px;padding:2px 5px;margin-left:6px;font-size:9px;color:#757d6b}.icon-button{border:0;background:transparent;color:#777d73;display:inline-flex;align-items:center;justify-content:center;font-size:18px;padding:3px;min-width:27px;min-height:27px;border-radius:4px}.icon-button:hover{background:#edf0e8}.panel-heading>.icon-button{background:#f2f4ed;font-size:19px;width:24px;min-width:24px;min-height:24px;height:24px}.panel-description{font-size:10px;line-height:1.6;color:#959a90;margin:4px 0 20px}.dropzone{border:1px dashed #cbd4c0;border-radius:8px;background:#fafbf7;display:flex;flex-direction:column;align-items:center;padding:22px 6px 19px;width:100%;color:#626c56}.dropzone:hover,.dropzone.dragover{background:#eff7e4;border-color:#86ad5b}.upload-icon{font-size:24px;color:#6a8252;border:1px solid #dbe3d0;border-radius:7px;width:34px;height:34px;line-height:31px;background:white;margin-bottom:12px}.dropzone strong{font-size:11px;font-weight:600;margin-bottom:7px}.dropzone>span:not(.upload-icon){font-size:10px;color:#89927f}.dropzone u{color:#687d53;text-underline-offset:3px}.dropzone small{font-size:8px;color:#a5aa9e;margin-top:15px}.media-tip{display:flex;align-items:center;justify-content:center;gap:11px;color:#a3ab98;margin:auto 0 0;padding:27px 0 2px}.media-tip>span{font-size:28px;font-weight:400;color:#b8c3a7}.media-tip p{font-size:10px;line-height:1.7}.media-list{display:flex;flex-direction:column;gap:8px;max-height:220px;overflow:auto;margin-top:12px}.media-item{border:1px solid var(--line);background:white;border-radius:6px;padding:6px;display:flex;gap:8px;align-items:center;text-align:left;min-width:0}.media-item:hover{border-color:#9dbf78;background:#f7fbf0}.media-item img{width:46px;height:32px;object-fit:cover;border-radius:3px;background:#181b18}.media-item div{min-width:0;flex:1}.media-item strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;font-weight:500}.media-item small{font-size:9px;color:#92998b}.media-item>span{font-size:17px;color:#6d8653}.preview-panel{background:#f0f1ed;min-width:0;display:flex;flex-direction:column}.preview-toolbar{height:49px;display:flex;justify-content:space-between;align-items:center;padding:0 19px;color:#92988c;font-size:8px;letter-spacing:1.3px}.format-label{display:flex;gap:8px;align-items:center;font-size:9px;letter-spacing:0}.format-label select{border:1px solid #dce0d4;background:#fafbf7;border-radius:4px;padding:4px;color:#6a7360;font-size:9px;max-width:122px}.stage{margin:0 19px;background:#191d1a;border-radius:7px;position:relative;aspect-ratio:16/9;min-height:220px;display:flex;align-items:center;justify-content:center;overflow:hidden;flex:1}.stage canvas{width:100%;height:100%;max-height:440px;object-fit:contain}.stage:fullscreen{margin:0;border-radius:0}.empty-preview{text-align:center;color:#f7faf2;padding:16px}.empty-preview h2{font-size:16px;letter-spacing:-.3px;font-weight:500}.empty-preview p{font-size:10px;color:#8d968a;line-height:1.6;margin:9px 0 20px}.empty-preview .button{font-size:10px;padding:9px 15px;border:0;background:var(--green)}.empty-art{width:145px;height:90px;position:relative;margin:0 auto 16px}.art-card{width:81px;height:58px;border-radius:7px;position:absolute;left:33px;top:19px;transform:rotate(-9deg)}.art-card.back{background:#343e30;border:1px solid #46503e;transform:rotate(9deg);left:42px;top:10px}.art-card.front{background:#c4e695;display:flex;align-items:center;justify-content:center;color:#3a522c;font-size:18px;box-shadow:0 6px 18px #0003}.art-card i{position:absolute;width:100%;bottom:7px;left:0;border-top:2px dashed #94b96c}.spark{position:absolute;color:#9fbd7d}.spark.one{left:10px;top:9px;font-size:22px}.spark.two{right:2px;bottom:8px;font-size:20px}.playback{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;position:relative}.timecode{font-size:9px;font-variant-numeric:tabular-nums;color:#525d48}.timecode span{color:#9ba391;padding-left:3px}.transport{display:flex;gap:12px;align-items:center;position:absolute;left:50%;transform:translateX(-50%)}.transport>.icon-button{font-size:14px}.play-button{display:flex;align-items:center;justify-content:center;border:0;background:#e0e6d7;border-radius:50%;width:32px;height:32px;font-size:11px;color:#47563b}.play-button:hover{background:#d0dfbc}.settings-panel{border-left:1px solid var(--line);position:relative}.panel-heading>span{color:#8b9480;font-size:17px}fieldset{border:0;margin:0;padding:0;min-width:0}fieldset:disabled{opacity:.55}.field-label{font-size:8px;font-weight:600;letter-spacing:1px;color:#8c9483}.selected-name{font-size:11px;color:#626b59;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:9px 0 0}.settings-divider{height:1px;background:var(--line);margin:18px 0}.setting-title{display:flex;align-items:center;justify-content:space-between}.setting-title h3{font-size:11px;font-weight:600;margin:0}.setting-title>span{color:#89957c;font-size:16px}.setting-hint{font-size:9px;color:#a1a798;line-height:1.6;margin:7px 0 12px}.trim-inputs{display:flex;gap:8px}.trim-inputs label{font-size:9px;color:#909986;flex:1;min-width:0}.trim-inputs label>span{display:flex;align-items:center;gap:2px;border:1px solid #e2e6db;border-radius:5px;padding:7px;margin-top:6px;font-size:9px;color:#939d87}.trim-inputs input{width:100%;border:0;background:transparent;min-width:0;font-size:11px;color:#5b6950;outline-offset:5px}.duration-note{display:flex;justify-content:space-between;font-size:9px;color:#9ba58e;margin:10px 0 0}.duration-note strong{font-weight:500;color:#7d906a}.text-button{font-size:8px;padding:0;border:0;background:transparent;color:#839173;text-decoration:underline;text-underline-offset:3px}.volume-row{display:flex;gap:8px;align-items:center;margin-top:14px;color:#8a977e}.volume-row input{width:100%;min-width:0;accent-color:#9cc76b;height:3px}.volume-row>span:last-child{font-size:8px;white-space:nowrap;min-width:30px}.caption-input{width:100%;border:1px solid #e2e6db;border-radius:5px;padding:8px;margin-top:8px;font-size:10px;background:#fcfdf9}.delete-button{display:flex;justify-content:space-between;align-items:center;border:0;background:transparent;padding:10px 0 0;font-size:9px;color:#ac8076;width:100%}.settings-footer{font-size:8px;color:#9ca790;margin-top:auto;padding-top:20px;display:flex;align-items:center;gap:6px}.settings-footer .status-dot{width:4px;height:4px}.timeline-section{border-top:1px solid var(--line);padding:17px 21px 10px}.timeline-toolbar{display:flex;justify-content:space-between;align-items:center}.timeline-toolbar>div{display:flex;align-items:center;gap:13px}.timeline-toolbar h2{font-size:11px}.timeline-toolbar>div>span{color:#a1a699;font-size:9px}.timeline-actions{gap:8px!important}.ruler{display:flex;justify-content:space-between;border-bottom:1px solid #eff0ea;background:repeating-linear-gradient(90deg,transparent,transparent calc(5% - 1px),#e8eae2 calc(5% - 1px),#e8eae2 5%) bottom/100% 5px no-repeat;padding:16px 0 9px;font-size:8px;color:#a0a898;font-variant-numeric:tabular-nums}.timeline-scroll{overflow-x:auto;padding:10px 0 7px}.timeline{display:flex;gap:7px;min-height:63px;align-items:stretch;min-width:100%}.timeline-empty{width:100%;border:1px dashed #e0e5d7;border-radius:5px;background:repeating-linear-gradient(135deg,#fcfdf9,#fcfdf9 6px,#f7f9f3 6px,#f7f9f3 7px);display:flex;align-items:center;justify-content:center;gap:9px;color:#abb39f;font-size:10px}.timeline-empty>span{border:1px solid #dce3d3;border-radius:4px;font-size:17px;line-height:19px;width:21px;text-align:center}.timeline-footer{display:flex;justify-content:space-between;align-items:center;color:#a6ae9e;font-size:8px;margin-top:4px}.timeline-footer>span:first-child{font-size:7px;letter-spacing:.6px;display:flex;align-items:center;gap:6px}.tiny-square{width:6px;height:6px;background:#bcd996;border-radius:1px}.keycap{border:1px solid #e6e9df;border-radius:3px;padding:0 4px;margin-left:5px}.timeline-clip{flex:1;min-width:110px;max-width:420px;border:1px solid #cfdbbb;border-radius:5px;background:#edf4e3;position:relative;overflow:hidden;padding:8px 12px;text-align:left;display:flex;flex-direction:column;justify-content:space-between;color:#566d3f;cursor:grab;isolation:isolate}.timeline-clip.selected{border:2px solid #8cb356;padding:7px 11px}.timeline-clip::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#eff6e8ed,#eff6e8b8),var(--thumb) center/cover;z-index:-1}.timeline-clip strong{font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}.timeline-clip small{font-size:8px;opacity:.8}.clip-playhead{position:absolute;top:0;bottom:0;width:2px;background:#344b25;left:0;pointer-events:none}.clip-order{position:absolute;right:4px;bottom:4px;display:flex;gap:2px}.clip-order button{border:1px solid #cddaba;background:#f5f9ef;color:#60764b;font-size:10px;border-radius:3px;padding:0 4px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:35px;padding:36px 8px 33px}.steps>div{display:flex;gap:14px;align-items:flex-start}.step-number{color:#9aab87;font-family:Manrope,sans-serif;font-size:11px;letter-spacing:1px;padding-top:2px}.steps h3{font-size:11px;font-weight:600;margin:0 0 7px}.steps p{font-size:10px;color:#9ba18f;line-height:1.6;margin:0}footer{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding:20px 0 26px;font-size:9px;color:#a5ab9d;gap:12px}.footer-brand{font-size:22px;color:#7f8974}footer>span:last-child{font-size:8px}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);padding:14px 22px;background:#252d20;color:#eef5e5;border-radius:8px;font-size:12px;max-width:90vw;z-index:10;box-shadow:0 5px 25px #0002}dialog{border:1px solid #d5dfc6;border-radius:16px;padding:36px;max-width:440px;width:90%;text-align:center;background:#f9fbf5;color:#303c25}dialog::backdrop{background:#17200fc9;backdrop-filter:blur(5px)}.dialog-icon{font-size:28px;background:var(--green);border-radius:12px;width:54px;height:54px;line-height:54px;margin:0 auto 22px}dialog h2{font-size:22px;letter-spacing:-.8px}dialog p{font-size:12px;color:#849174;line-height:1.7}dialog progress{width:100%;height:10px;accent-color:#96bf61;margin:15px 0}.export-note{font-size:10px!important;margin:7px 0 22px}[hidden]{display:none!important}body.exporting main,body.exporting .topbar{pointer-events:none}body.exporting{overflow:hidden}


/* Application shell: the viewport owns the layout; panels own their scrolling. */
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { overscroll-behavior: none; }
main { width: 100%; height: 100%; height: 100dvh; max-width: none; margin: 0; padding: 0; }
.editor { display: flex; flex-direction: column; width: 100%; height: 100%; border: 0; border-radius: 0; box-shadow: none; }
.editor-top { flex: 0 0 64px; height: auto; gap: 24px; padding: 0 22px; background: #fafbf7; }
.brand { flex-shrink: 0; font-size: 26px; }
.brand-icon { width: 30px; height: 30px; font-size: 26px; }
.editor-top > .project-info { min-width: 0; gap: 10px; margin-right: auto; padding-left: 24px; border-left: 1px solid var(--line); }
.editor-top input { width: 190px; min-width: 0; font-size: 13px; padding: 6px 3px; }
.local-label { border: 0; padding: 0; font-size: 9px; }
.editor-top > .header-actions { flex-shrink: 0; gap: 20px; }
.button.subtle { padding: 6px 0; }

.panel-switcher { display: none; }
.workspace { flex: 1 1 0; min-height: 0; overflow: hidden; grid-template-columns: clamp(210px, 19vw, 290px) minmax(0, 1fr) clamp(230px, 20vw, 310px); }
.media-panel, .settings-panel { min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 22px 18px; scrollbar-width: thin; scrollbar-color: #cdd6c1 transparent; }
.panel-heading, .dropzone, fieldset, .settings-footer { flex-shrink: 0; }
.panel-heading { min-height: 26px; }
h2 { font-size: 13px; }
.panel-heading h2 span { font-size: 10px; }
.panel-description { font-size: 11px; color: #8d9584; margin: 5px 0 20px; }
.dropzone { padding: 20px 6px; }
.dropzone strong { font-size: 12px; }
.dropzone > span:not(.upload-icon) { font-size: 11px; }
.dropzone small { font-size: 9px; color: #8a947f; }
.media-list { flex-shrink: 0; max-height: none; overflow: visible; margin-top: 14px; }
.media-item { padding: 7px; }
.media-item strong { font-size: 11px; }
.media-tip { flex-shrink: 0; padding-top: 20px; }
.media-tip p { font-size: 11px; }
.preview-panel { min-height: 0; overflow: hidden; }
.preview-toolbar { flex: 0 0 44px; height: auto; padding: 0 20px; font-size: 10px; color: #838d78; }
.format-label, .format-label select { font-size: 11px; }
.format-label select { max-width: 150px; padding: 5px; }
.stage { flex: 1 1 0; min-height: 0; min-width: 0; max-height: none; aspect-ratio: auto; margin: 0 20px; }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: contain; }
.empty-preview { max-width: 100%; max-height: 100%; overflow: auto; }
.empty-preview h2 { font-size: 19px; }
.empty-preview p { font-size: 12px; color: #9ca694; }
.empty-preview .button { font-size: 12px; padding: 10px 16px; }
.playback { flex: 0 0 52px; height: auto; padding: 0 20px; }
.timecode { font-size: 11px; }
.play-button { width: 34px; height: 34px; font-size: 12px; }
.field-label { font-size: 10px; }
.selected-name, .setting-title h3 { font-size: 12px; }
.settings-divider { margin: 20px 0; }
.setting-hint { font-size: 11px; color: #929d85; }
.trim-inputs label { font-size: 11px; }
.trim-inputs label > span { padding: 8px; font-size: 10px; }
.trim-inputs input { font-size: 12px; }
.duration-note { font-size: 11px; }
.text-button { font-size: 10px; }
.volume-row > span:last-child { font-size: 10px; min-width: 35px; }
.caption-input { padding: 9px; font-size: 12px; }
.delete-button { font-size: 11px; }
.settings-footer { font-size: 10px; padding-top: 24px; }
.timeline-section { flex: 0 0 clamp(160px, 23vh, 240px); min-height: 0; display: flex; flex-direction: column; padding: 13px 22px 10px; background: #fafbf7; }
.timeline-toolbar { flex-shrink: 0; gap: 8px; }
.timeline-toolbar h2 { font-size: 12px; }
.timeline-toolbar > div > span { font-size: 11px; color: #8e9982; }
.ruler { flex-shrink: 0; font-size: 10px; padding-top: 12px; color: #929e85; }
.timeline-scroll { flex: 1; min-height: 0; overflow: auto; scrollbar-width: thin; scrollbar-color: #cdd6c1 transparent; }
.timeline { height: 100%; min-height: 38px; }
.timeline-empty { font-size: 12px; padding: 8px; text-align: center; color: #9ba88c; }
.timeline-footer { flex-shrink: 0; gap: 8px; font-size: 10px; color: #98a48b; }
.timeline-footer > span:first-child { font-size: 9px; }
.timeline-clip { min-width: 130px; max-width: 500px; padding: 9px 12px; }
.timeline-clip.selected { padding: 8px 11px; }
.timeline-clip strong { font-size: 11px; }
.timeline-clip small { font-size: 10px; }
.clip-order button { font-size: 12px; padding: 0 5px; }
.toast { pointer-events: none; }
dialog { max-height: calc(100dvh - 32px); width: calc(100% - 32px); overflow: auto; }
#helpDialog { max-width: 540px; text-align: left; padding: 32px; }
.help-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.help-heading h2 { font-size: 21px; }
.help-steps { padding-left: 22px; margin: 28px 0 20px; }
.help-steps li { padding-left: 7px; margin-bottom: 20px; color: #7a9461; }
.help-steps strong { font-size: 13px; color: #3c4c2f; }
.help-steps p { margin: 6px 0 0; }
.help-note { padding-top: 18px; border-top: 1px solid var(--line); }

@media (max-width: 1050px) {
  .workspace { grid-template-columns: 200px minmax(0, 1fr) 225px; }
  .editor-top { gap: 16px; padding: 0 16px; }
  .editor-top > .project-info { padding-left: 16px; }
  .editor-top input { width: 175px; }
  .local-label { display: none; }
  .media-panel, .settings-panel { padding: 16px 13px; }
  .preview-toolbar, .playback { padding-left: 12px; padding-right: 12px; }
  .stage { margin: 0 12px; }
  .empty-preview h2 { font-size: 16px; }
  .dropzone strong { font-size: 11px; }
  .dropzone small { font-size: 8px; }
}
@media (max-width: 760px) {
  .editor-top { flex-basis: 58px; gap: 12px; padding: 0 12px; }
  .brand { font-size: 23px; }
  .brand-icon { width: 26px; height: 26px; font-size: 23px; margin-right: 6px; }
  .editor-top > .project-info { padding-left: 12px; flex: 1; }
  .editor-top input { width: 100%; font-size: 12px; }
  .project-info .live-dot { display: none; }
  .editor-top > .header-actions { gap: 12px; }
  .header-actions .button { font-size: 11px; padding: 8px 11px; }
  .header-actions .subtle { padding: 5px 0; }
  .panel-switcher { display: flex; flex: 0 0 42px; border-bottom: 1px solid var(--line); background: #fafbf7; padding: 0 12px; gap: 8px; }
  .panel-switcher button { flex: 1; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #8a957f; font-size: 12px; }
  .panel-switcher button[aria-pressed='true'] { border-bottom-color: #91b85f; color: #435730; background: #f0f5e9; }
  .workspace { display: block; }
  .workspace > .media-panel, .workspace > .preview-panel, .workspace > .settings-panel { display: none; height: 100%; border: 0; }
  .workspace[data-panel='media'] > .media-panel, .workspace[data-panel='preview'] > .preview-panel, .workspace[data-panel='settings'] > .settings-panel { display: flex; }
  .media-panel, .settings-panel { padding: 18px 20px; }
  .media-tip { display: none; }
  .dropzone { padding: 17px 8px; }
  .settings-footer { padding-bottom: 6px; }
  .timeline-section { flex-basis: clamp(145px, 23dvh, 190px); padding: 10px 12px 8px; }
  .timeline-toolbar > div { gap: 8px; }
  .timeline-toolbar h2 { font-size: 11px; }
  .timeline-toolbar > div > span { font-size: 10px; }
  .timeline-footer > span:last-child { display: none; }
  .timeline-empty { font-size: 10px; }
  .timeline-clip { min-width: 115px; }
  .timeline-clip small { font-size: 9px; }
  .empty-preview p { font-size: 11px; }
}
@media (max-width: 520px) {
  .editor-top { flex-wrap: wrap; flex-basis: 94px; align-content: center; gap: 6px 12px; }
  .brand { order: 0; margin-right: auto; }
  .header-actions { order: 1; }
  .editor-top > .project-info { order: 2; flex: 0 0 100%; border: 0; padding-left: 0; }
  .editor-top input { width: 100%; padding: 2px 0; font-size: 11px; }
  .local-label { display: inline; font-size: 8px; }
  .header-actions .subtle { font-size: 0; gap: 0; }
  
  .preview-toolbar { flex-basis: 36px; }
  .playback { flex-basis: 46px; }
  .empty-art { margin-bottom: 12px; }
  .empty-preview p { margin: 8px 0 14px; }
}
@media (max-height: 650px) {
  .timeline-section { flex-basis: 145px; }
  .empty-art, .media-tip { display: none; }
  .empty-preview h2 { font-size: 16px; }
  .settings-divider { margin: 14px 0; }
}
@media (max-height: 420px) {
  .timeline-section { flex-basis: 118px; padding-top: 6px; padding-bottom: 6px; }
  .timeline-footer { display: none; }
  .ruler { padding-top: 6px; padding-bottom: 6px; }
  .preview-toolbar { flex-basis: 32px; }
  .playback { flex-basis: 38px; }
  .empty-preview p { display: none; }
  .empty-preview h2 { font-size: 13px; margin-bottom: 8px; }
  .empty-preview { padding: 8px; }
  .empty-preview .button { padding: 6px 10px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}

/* Multitrack timeline */
.timeline-section { position: relative; flex-basis: clamp(245px, 36dvh, 440px); padding-top: 15px; }
.timeline-resizer { position: absolute; top: -4px; left: 0; right: 0; height: 8px; cursor: ns-resize; touch-action: none; z-index: 8; }
.timeline-resizer::after { content: ''; position: absolute; width: 38px; height: 3px; border-radius: 3px; background: #b7c3a8; left: calc(50% - 19px); top: 3px; }
.timeline-toolbar { flex-wrap: wrap; gap: 8px 16px; padding-bottom: 12px; }
.timeline-toolbar .timeline-actions { flex-wrap: wrap; gap: 7px !important; }
.timeline-toolbar .timeline-title { gap: 10px; }
.zoom-control { display: flex; align-items: center; gap: 7px; font-size: 10px; color: #89977c; margin: 0 8px; }
.zoom-control input { width: 75px; height: 4px; accent-color: #8cb356; }
.timeline-scroll { padding: 0; border: 1px solid #dfe5d5; border-radius: 7px; background: #f5f7f0; position: relative; touch-action: none; overscroll-behavior: contain; }
.timeline { --track-label-width: 128px; --timeline-width: 700px; display: block; position: relative; height: auto; min-height: 100%; width: max-content; min-width: 100%; user-select: none; }
.timeline-ruler-row, .track-row { display: grid; grid-template-columns: var(--track-label-width) var(--timeline-width); width: max-content; }
.timeline-ruler-row { position: sticky; top: 0; z-index: 6; height: 29px; background: #f8faf4; }
.track-row { height: 61px; border-bottom: 1px solid #e1e8d9; }
.track-row:last-of-type { border-bottom: 0; }
.track-label { position: sticky; left: 0; z-index: 4; background: #f3f6ed; border-right: 1px solid #dce5d0; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 10px; min-width: 0; }
.track-label strong { font-size: 11px; color: #687c54; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track-audio .track-label { background: #edf4f2; }
.track-audio .track-label strong { color: #5f837b; }
.ruler-label { font-size: 9px; letter-spacing: 1px; color: #95a487; z-index: 7; }
.track-tools { display: flex; gap: 3px; }
.track-tool { display: flex; align-items: center; justify-content: center; width: 20px; height: 23px; border: 1px solid #d6dfcc; border-radius: 4px; font-size: 13px; color: #7d8f6b; background: #ffffff80; padding: 0; }
.track-tool:hover { background: white; }
.track-tool[aria-pressed='true'] { color: #b97060; background: #f8e7df; }
.track-lane { position: relative; min-width: 0; background: repeating-linear-gradient(90deg, transparent 0, transparent 69px, #dde5d552 69px, #dde5d552 70px); cursor: crosshair; }
.track-audio .track-lane { background-color: #edf4f240; }
.track-empty-hint { position: absolute; top: 22px; left: 18px; font-size: 10px; color: #b2bea8; pointer-events: none; }
.time-ruler { position: relative; min-width: 0; cursor: crosshair; overflow: hidden; border-bottom: 1px solid #dbe3d1; }
.time-ruler > span { position: absolute; top: 7px; font-size: 9px; font-variant-numeric: tabular-nums; color: #8e9f7d; padding-left: 4px; }
.time-ruler > span::after { content: ''; position: absolute; left: 0; top: 15px; width: 1px; height: 7px; background: #bfcdb0; }
.track-lane .timeline-clip { position: absolute; top: 6px; height: 48px; width: 140px; min-width: 0; max-width: none; border: 1px solid #c4d8a9; border-radius: 5px; padding: 7px 26px 6px 9px; display: flex; cursor: crosshair; overflow: hidden; gap: 3px; touch-action: none; }
.track-lane .timeline-clip.selected { border: 2px solid #7fa54c; padding: 6px 25px 5px 8px; }
.track-lane .timeline-clip.linked-selected { box-shadow: inset 0 0 0 1px #99b471; border-color: #99b471; }
.track-lane .clip-audio { background: #dcebe6; color: #4c7b70; border-color: #b6d2c9; }
.track-lane .clip-audio::before { background: linear-gradient(90deg, #dcebe6, #d0e5df); }
.track-lane .clip-audio.selected { border-color: #5d9b89; }
.track-lane .timeline-clip strong { font-size: 10px; flex-shrink: 0; }
.track-lane .timeline-clip small { font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clip-handle { position: absolute; top: 0; bottom: 0; right: 0; width: 22px; padding: 0; border: 0; border-left: 1px solid #94ae7140; background: #e0eacb; color: #6d8c49; cursor: grab; font-size: 18px; line-height: 1; touch-action: none; }
.clip-audio .clip-handle { background: #c9e0d7; color: #527e70; border-left-color: #8eb5a8; }
.clip-handle:hover { background: #cfdfb2; }
.clip-audio .clip-handle:hover { background: #b8d7c9; }
.moving-clip, .moving-clip * { cursor: grabbing !important; }
.track-lane .timeline-clip.moving { z-index: 3; opacity: .8; box-shadow: 0 3px 14px #31472333; }
.track-lane .timeline-clip.invalid-position { border-color: #d37e69; background: #f2d9d2; }
.track-muted .timeline-clip { opacity: .45; }
.timeline-playhead { position: absolute; top: 23px; bottom: 0; width: 2px; background: #556c38; z-index: 5; pointer-events: none; }
.timeline-playhead::before { content: ''; position: absolute; left: -4px; top: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid #556c38; }
.timeline-footer { padding-top: 7px; }
#playheadReadout { font-size: 10px; font-variant-numeric: tabular-nums; }
.selection-kind { font-size: 10px; color: #91a17e; margin: 8px 0 20px; }
.position-input { display: flex; align-items: center; gap: 6px; border: 1px solid #e2e6db; border-radius: 5px; padding: 8px; margin: 8px 0 16px; }
.position-input input { width: 100%; border: 0; min-width: 0; font-size: 12px; background: transparent; color: #5b6950; }
.position-input span { font-size: 10px; color: #939d87; }
.track-select { width: 100%; margin-top: 8px; padding: 8px; border: 1px solid #e2e6db; border-radius: 5px; color: #647255; background: #fcfdf9; font-size: 12px; }
.component-actions { display: flex; flex-direction: column; gap: 10px; padding: 16px 0; border-top: 1px solid var(--line); margin-top: 18px; }
.component-actions .delete-button { padding-top: 0; padding-bottom: 4px; }
@media (max-width: 1050px) { .timeline-footer > span:last-child { font-size: 9px; } }
@media (max-width: 760px) {
  .timeline-section { flex-basis: clamp(240px, 38dvh, 330px); padding: 12px 10px 8px; }
  .timeline-toolbar { padding-bottom: 8px; gap: 6px; }
  .timeline-toolbar .timeline-title { width: 100%; }
  .timeline-toolbar .timeline-actions { width: 100%; gap: 5px !important; }
  .zoom-control { margin: 0 0 0 auto; font-size: 9px; }
  .zoom-control input { width: 50px; }
  .timeline-toolbar .button.small { padding: 6px 7px; font-size: 10px; }
  .timeline-toolbar .icon-button { min-width: 23px; min-height: 23px; font-size: 17px; }
  .timeline-footer > span:last-child { display: none; }
  .timeline-toolbar .timeline-title > span { font-size: 10px; }
}
@media (max-width: 520px) {
  .track-label { padding: 7px; gap: 3px; flex-wrap: wrap; align-content: center; }
  .track-label strong { font-size: 10px; }
  .track-tool { width: 18px; height: 19px; font-size: 12px; }
  .track-tools { gap: 2px; }
}
@media (max-height: 500px) {
  .timeline-section { flex-basis: 180px; }
  .timeline-footer { display: none; }
  .timeline-toolbar { padding-bottom: 6px; }
}
.timeline-scroll, .track-lane { touch-action: pan-y; }
.time-ruler { touch-action: none; }
.track-label { z-index: 6; }
.timeline-ruler-row { z-index: 9; }

/* Free placement and image composition */
.snap-button[aria-pressed='true'] { background: #e7f2d7; border-color: #bfd39f; color: #5b7740; }
.snap-button[aria-pressed='false'] { color: #8d9683; }
.track-row.has-overlaps > .track-label { align-content: start; align-items: flex-start; padding-top: 17px; }
.track-row.has-overlaps > .track-label strong::after { content: ' ≋'; color: #8ca86b; }
.composition-overlay { position: absolute; border: 1px solid #c5ee89; z-index: 2; cursor: move; touch-action: none; box-shadow: 0 0 0 1px #17241260; }
.composition-overlay:focus-visible { outline: 2px solid #c5ee89; outline-offset: 3px; }
.composition-label { position: absolute; left: 0; top: 0; padding: 3px 6px; font-size: 9px; line-height: 1.4; background: #c5ee89; color: #30451f; white-space: nowrap; pointer-events: none; }
.composition-resize { position: absolute; right: -1px; bottom: -1px; width: 15px; height: 15px; border: 2px solid #c5ee89; background: #334a24; padding: 0; cursor: nwse-resize; touch-action: none; }
.composition-presets, .composition-order { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 12px 0; }
.composition-presets .button.small, .composition-order .button.small { padding: 8px 4px; font-size: 10px; white-space: normal; }
.composition-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 16px 0; }
.composition-grid label, .composition-field { display: flex; flex-direction: column; gap: 6px; font-size: 10px; color: #89977c; min-width: 0; }
.composition-grid input, .composition-field input, .composition-field select { width: 100%; min-width: 0; padding: 8px; border: 1px solid #e2e6db; border-radius: 5px; color: #5c6d4b; background: #fcfdf9; font-size: 12px; }
.composition-field { margin: 12px 0; }
@media (max-width: 760px) {
  .timeline-toolbar .timeline-actions { row-gap: 6px !important; }
  .zoom-control { margin-left: 0; }
  .composition-label { font-size: 8px; }
  .timeline-section { flex-basis: clamp(265px, 40dvh, 350px); }
}
@media (max-height: 500px) { .timeline-section { flex-basis: 185px; } }
.stage:has(canvas:not([hidden])) { cursor: default; }
/* Keep tiny clips inside the fitted timeline without padding forcing their width. */
.track-lane .timeline-clip.compact { padding: 0; }
.track-lane .timeline-clip.compact strong, .track-lane .timeline-clip.compact small { display: none; }
.timeline-clip.compact .clip-handle { width: min(22px, 100%); border-left: 0; overflow: hidden; }
.speed-input { display: flex; align-items: center; gap: 8px; border: 1px solid #e2e6db; border-radius: 5px; padding: 8px; margin: 12px 0 8px; }
.speed-input input { width: 100%; min-width: 0; border: 0; color: #5b6950; background: transparent; font-size: 12px; }
.speed-input span { font-size: 11px; color: #89977c; }
.speed-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.speed-presets .button.small { padding: 7px 4px; font-size: 10px; }
.speed-presets [aria-pressed='true'] { color: #557438; background: #e7f2d7; border-color: #bfd39f; }

/* Clip edges, real media representations and fade controls. */
.track-lane .timeline-clip { height: 68px; padding: 7px 32px 35px 12px; justify-content: flex-start; }
.track-lane .timeline-clip.selected { padding: 6px 31px 34px 11px; }
.track-lane .timeline-clip::before { background: #edf4e3; }
.track-lane .clip-audio::before { background: #e0eee8; }
.clip-visual { position: absolute; bottom: 3px; height: 28px; pointer-events: none; border-radius: 2px; z-index: 0; }
.timeline-clip strong, .timeline-clip small { position: relative; z-index: 1; pointer-events: none; }
.clip-handle { right: 8px; width: 20px; z-index: 3; }
.clip-trim { position: absolute; top: 0; bottom: 0; width: 8px; border: 0; padding: 0; background: #739c4680; z-index: 4; cursor: ew-resize; touch-action: none; }
.clip-trim::after { content: ''; position: absolute; top: calc(50% - 8px); height: 16px; left: 3px; width: 2px; border-radius: 1px; background: #f4ffe5; }
.trim-start { left: 0; border-radius: 3px 0 0 3px; }
.trim-end { right: 0; border-radius: 0 3px 3px 0; }
.clip-trim:hover, .clip-trim:focus-visible { background: #739c46; }
.clip-audio .clip-trim { background: #5a938180; }
.clip-audio .clip-trim:hover { background: #5a9381; }
.trimming-clip, .trimming-clip * { cursor: ew-resize !important; }
.timeline-clip.compact .clip-trim { width: min(5px, 25%); }
.timeline-clip.compact .clip-handle { left: 25%; right: auto; width: 50%; }
.fade-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0 14px; }
.fade-inputs label { display: flex; flex-direction: column; gap: 6px; font-size: 10px; color: #89977c; }
.fade-inputs input { width: 100%; min-width: 0; padding: 8px; border: 1px solid #e2e6db; border-radius: 5px; background: #fcfdf9; color: #5b6950; font-size: 12px; }
.fade-presets { display: grid; gap: 7px; margin: 12px 0; }
.fade-presets .button.small, .crossfade-button { font-size: 10px; padding: 9px 5px; }
.crossfade-button { width: 100%; }
.analysis-status { display: block; font-size: 8px !important; color: #8ca17c !important; }
.analysis-status:empty { display: none; }
.track-lane .timeline-clip.compact, .track-lane .timeline-clip.compact.selected { padding: 0; }
.effects-toggle { display: flex; align-items: center; gap: 5px; font-size: 10px; color: #7f916d; }
.effects-toggle input { margin: 0; accent-color: #92b861; }
.effects-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 12px 0 18px; }
.effects-presets .button.small { padding: 8px 4px; font-size: 10px; }
.effects-presets [aria-pressed='true'] { color: #557438; background: #e7f2d7; border-color: #bfd39f; }
.effect-control { margin: 15px 0; }
.effect-control-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.effect-control-heading label { font-size: 11px; color: #7e8d70; }
.effect-value { display: flex; align-items: center; gap: 4px; color: #99a48e; font-size: 9px; }
.effect-value input { width: 60px; padding: 4px; border: 1px solid #e2e6db; border-radius: 4px; background: #fcfdf9; color: #60764e; font-size: 11px; }
.effect-control > input[type='range'] { display: block; width: 100%; margin: 0; height: 4px; accent-color: #93bc60; }
.reset-effects { width: 100%; margin-top: 5px; font-size: 10px; }
#effectsControls:disabled { opacity: .5; }
.project-button { padding: 9px 11px; gap: 6px; }

.project-info .live-dot.unsaved { background: #c89d58; }
#saveStatus[data-dirty='true'] { color: #a98b55; }
.header-actions .export-detail { font: inherit; line-height: inherit; }
.project-operation-note { font-size: 11px; }
body.project-busy main { pointer-events: none; }
@media (max-width: 1100px) {
  .project-button-label { display: none; }
  .header-actions .project-button { width: 32px; padding: 8px 0; }
  .editor-top > .header-actions { gap: 10px; }
}
@media (max-width: 520px) {
  .editor-top > .header-actions { gap: 6px; }
  .header-actions .project-button { width: 26px; padding: 7px 0; }
  .header-actions .export-detail { display: none; }
  .header-actions .button.primary { gap: 5px; padding: 8px; }
}
.header-actions .button.primary .export-detail { font: inherit; line-height: inherit; }
.text-tools { display:flex;flex-direction:column;gap:8px;padding:20px 0;flex-shrink:0; }
.text-tools > div { display:grid;grid-template-columns:1fr 1fr;gap:7px; }
.text-tools .button { font-size:10px;padding:8px 5px; }
#textSettings textarea { width:100%;resize:vertical;min-height:85px;border:1px solid #dce2d4;border-radius:5px;padding:9px;background:#fcfdf9;color:#586b47;font:inherit;font-size:12px; }
.track-text .track-label { background:#f0eaf4; }
.track-text .track-label strong { color:#8c6b9c; }
.track-lane .clip-text { background:#eee2f2;color:#8a6398;border-color:#cbb4d7; }
.track-lane .clip-text::before { background:#f0e7f5; }
.track-lane .clip-text.selected { border-color:#9b70b1; }
.clip-text .clip-handle,.clip-text .clip-trim { background:#b994cc; }
.precision-bar { display:flex;flex-wrap:wrap;align-items:center;gap:7px;flex:0 0 auto;padding:7px 12px;border-top:1px solid #dfe5d8;color:#8a977e;font-size:9px; }
.precision-bar label { display:flex;align-items:center;gap:5px; }
.precision-bar input,.precision-bar select { min-width:0;border:1px solid #d6dfcb;border-radius:4px;background:#f8faf4;color:#6c8058;font-size:10px;padding:4px; }
#frameTimecode { width:100px;font-variant-numeric:tabular-nums; }
.precision-bar .button.small { font-size:9px;padding:5px 7px; }
#rangeReadout { font-size:8px;font-variant-numeric:tabular-nums; }
.timeline-range { position:absolute;top:29px;bottom:0;background:#a6cb7830;pointer-events:none;border-left:1px solid #84a95a;border-right:1px solid #84a95a;z-index:2; }
.transport { gap:6px; }
.export-options { display:flex;flex-direction:column;gap:16px;margin:24px 0;text-align:left; }
.export-options label { display:flex;flex-direction:column;gap:7px;font-size:12px;color:#82936d; }
.export-options select { padding:10px;border:1px solid #d9e2cd;border-radius:6px;background:white;color:#556c3e;font-size:12px; }
#exportOptionsDialog .button { margin:5px; }
@media(max-width:1050px){.timecode {font-size:9px;}.transport{gap:2px;}.transport>.icon-button{min-width:22px;font-size:13px;}}
@media(max-width:760px){.precision-bar{padding:6px 10px;gap:5px;}#rangeReadout{display:none;}.timeline-toolbar .timeline-actions{gap:4px!important;}.timeline-section{flex-basis:clamp(280px,42dvh,370px);}.transport{gap:3px;}}
@media(max-height:500px){.timeline-section{flex-basis:190px;}.precision-bar{padding:4px 8px;}}
#voiceoverButton {width:100%;margin-top:14px;white-space:normal;}
#autoSaveStatus {padding:8px 0;font-size:10px;}
#transformSettings h3 {font-size:12px;}
#transformSettings .component-actions {flex-wrap:wrap;}
#voiceoverDialog .button,#recoveryDialog .button {margin:6px 2px;}
#voiceoverDialog .composition-field {text-align:left;margin:18px 0;}
#voiceoverDialog .effects-toggle {justify-content:center;white-space:normal;}
#voiceoverStatus {font-variant-numeric:tabular-nums;}

/* Lucide SVG controls share one stroke weight and remain available offline. */
.app-icon { display:inline-block; width:18px; height:18px; flex:0 0 auto; vertical-align:middle; pointer-events:none; }
.button > .app-icon, .text-button > .app-icon { width:16px; height:16px; }
.button-label { min-width:0; }
.icon-button, .play-button, .track-tool { display:inline-flex; align-items:center; justify-content:center; }
.text-button { display:inline-flex; align-items:center; gap:5px; }
.button.small { gap:5px; }
.button.small > .app-icon { width:14px; height:14px; }
.brand-icon { display:inline-flex; align-items:center; justify-content:center; }
.brand-icon > .app-icon { width:22px; height:22px; }
.upload-icon { display:inline-flex; align-items:center; justify-content:center; }
.upload-icon > .app-icon { width:24px; height:24px; }
.panel-heading > .app-icon { color:#82936d; }
.panel-switcher button { display:inline-flex; align-items:center; justify-content:center; gap:7px; }
.panel-switcher .app-icon { width:15px; height:15px; }
.play-button .app-icon { width:19px; height:19px; }
.track-tool { padding:2px; }
.track-tool .app-icon { width:13px; height:13px; }
.clip-handle { display:flex; align-items:center; justify-content:center; padding:0; }
.clip-handle .app-icon { width:15px; height:20px; }
.clip-trim { touch-action:none; }
.media-item > .app-icon { width:16px; height:16px; color:#688d4b; }
.dialog-icon { display:flex; align-items:center; justify-content:center; }
.dialog-icon .app-icon { width:28px; height:28px; }
.art-card.front > span .app-icon { width:25px; height:25px; }
.spark .app-icon { width:25px; height:25px; }
.media-tip .app-icon { width:25px; height:25px; }
.setting-title > .app-icon { width:16px; height:16px; color:#8f9c82; }
#helpButton > .app-icon { width:16px; height:16px; }
@media(max-width:760px){
  .button.small { gap:4px; }
  .timeline-actions .button.small > .app-icon { width:12px; height:12px; }
}

/* The active track is the insertion destination for its media type. */
.track-select-button { flex:1 1 auto; min-width:0; padding:3px 0; border:0; border-radius:3px; background:transparent; text-align:left; color:inherit; }
.track-select-button strong { display:block; }
.track-select-button:hover strong { text-decoration:underline; text-underline-offset:3px; }
.selected-track > .track-label { box-shadow:inset 3px 0 0 #7fa54c; background:#e7f2d7; }
.track-audio.selected-track > .track-label { box-shadow:inset 3px 0 0 #5d9b89; background:#dcebe6; }
.track-text.selected-track > .track-label { box-shadow:inset 3px 0 0 #9b70b1; background:#eee2f2; }
.selected-track .track-select-button strong { font-weight:750; }

#newDialog { text-align:left; }
#newDialog .help-heading h2 { font-size:22px; }
.new-project-options input { padding:10px; border:1px solid var(--theme-border,#d9e2cd); border-radius:6px; background:var(--theme-bg,white); color:var(--theme-text,#556c3e); font-size:12px; }
#saveBeforeNew { width:100%; }
.new-dialog-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; margin-top:20px; }
@media(max-width:380px){
  .editor-top .brand { font-size:23px; }
  .editor-top .brand-icon { width:26px; height:26px; margin-right:6px; }
  .editor-top .brand-icon .app-icon { width:19px; height:19px; }
}
.visual-transition-controls { display:flex; flex-direction:column; gap:10px; padding:12px 0; }
.visual-transition-controls .composition-field { margin:0; min-width:0; }
.visual-transition-controls select { width:100%; min-width:0; padding:7px 4px; font-size:10px; }
.visual-transition-controls .composition-grid { gap:7px; }