.demo-layout{display:block;min-height:430px}.demo-sidebar{display:none}.demo-workspace{padding:26px}.demo-project-head{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:18px}.demo-project-head>div{min-width:0}.demo-project-head small{display:block;margin-bottom:7px;color:#77808e;font:800 7px/1 var(--pixel);letter-spacing:.14em}.demo-project-head b{display:block;overflow:hidden;color:#fff;font-size:20px;text-overflow:ellipsis;white-space:nowrap}.demo-project-head>span{display:flex;flex:none;align-items:center;gap:8px;padding:8px 10px;background:#1c2522;color:#b8ff83;font:800 7px/1 var(--pixel);letter-spacing:.08em}.demo-project-head>span i{width:7px;height:7px;background:var(--lime)}@media(max-width:760px){.demo-layout{min-height:0}.demo-workspace{padding:13px}.demo-project-head{align-items:flex-start;flex-direction:column;gap:10px}.demo-project-head b{font-size:16px}}

/* Voiceover-driven automatic edit. */
.voice-sync{display:grid;grid-template-columns:minmax(0,.9fr) minmax(520px,1.1fr);align-items:center;gap:clamp(48px,7vw,104px);padding-top:110px;padding-bottom:110px;background:var(--paper)}
.voice-sync-copy h2{max-width:680px;margin:18px 0 20px;font-size:clamp(36px,4.6vw,72px);line-height:.96;letter-spacing:-.045em}
.voice-sync-copy>p:not(.level-label){max-width:650px;color:var(--muted);font-size:17px;line-height:1.65}
.voice-benefits{display:grid;gap:0;margin:34px 0 0;padding:0;border-top:3px solid var(--ink);list-style:none}
.voice-benefits li{display:grid;grid-template-columns:155px minmax(0,1fr);gap:20px;padding:18px 0;border-bottom:2px solid var(--ink)}
.voice-benefits b{font-size:14px;font-weight:950}
.voice-benefits span{color:var(--muted);font-size:13px;line-height:1.45}
.voice-timeline{overflow:hidden;min-width:0;background:#0e1116;color:#f7f5ec;box-shadow:8px 8px 0 var(--ink)}
.voice-monitor{padding:26px}
.voice-state{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px;font:800 8px/1 var(--pixel);letter-spacing:.08em}
.voice-state span{display:flex;align-items:center;gap:8px;color:#9ea7b4}.voice-state span i{width:8px;height:8px;background:var(--lime)}
.voice-state strong{font-size:10px}.waveform{display:flex;align-items:center;gap:4px;height:92px;padding:0 12px;border:2px solid #2d3540;background:#141922}
.waveform i{flex:1;height:48px;min-width:3px;background:var(--sky)}
.waveform i:nth-child(3n){height:70px;background:var(--lime)}.waveform i:nth-child(4n){height:34px}.waveform i:nth-child(5n){height:54px}.waveform i:nth-child(7n){height:76px;background:var(--coral)}
.timeline-ruler{display:flex;justify-content:space-between;margin:10px 0;color:#747e8d;font:700 7px/1 var(--pixel)}
.timeline-track{display:flex;gap:3px;height:88px}.timeline-track .clip{display:flex;flex:var(--clip) 1 0;min-width:0;flex-direction:column;justify-content:space-between;padding:11px 9px;border:2px solid #65aaff;background:#183658;overflow:hidden}
.timeline-track .clip-author{border-color:#e97ae6;background:#4a2c4f}.timeline-track .clip b{font:900 9px/1 var(--pixel)}.timeline-track .clip small{overflow:hidden;font-size:8px;font-weight:850;text-overflow:ellipsis;white-space:nowrap}
.sync-result{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;margin-top:20px;padding:15px;border:2px solid #343c47;background:#161b22;text-align:center}
.sync-result span{color:#8792a0;font:800 7px/1.4 var(--pixel)}.sync-result span b{display:block;margin-top:6px;color:#fff;font-size:10px}.sync-result>i{color:var(--lime);font:950 18px/1 var(--pixel);font-style:normal}
@media(max-width:1040px){.voice-sync{grid-template-columns:1fr}.voice-sync-copy h2{max-width:850px}.voice-timeline{width:100%;max-width:850px}}
@media(max-width:760px){.voice-sync{gap:42px;padding-top:72px;padding-bottom:72px}.voice-sync-copy h2{font-size:38px}.voice-sync-copy>p:not(.level-label){font-size:15px}.voice-benefits li{grid-template-columns:1fr;gap:6px}.voice-monitor{padding:16px}.waveform{height:72px}.timeline-track{height:76px}.timeline-track .clip{padding:9px 5px}.timeline-track .clip small{font-size:6px}.sync-result{gap:8px;padding:12px 7px}}
@media(max-width:480px){.timeline-track .clip small{display:none}.timeline-track .clip{align-items:center;justify-content:center}.sync-result span{font-size:6px}.sync-result span b{font-size:8px}}