:root{
  --bg:#0b0d12;--panel:#12151c;--panel2:#181c25;--line:#2a303c;
  --text:#f4f6fb;--muted:#9aa3b3;--cyan:#35d2e3;--blue:#799cff;--track:#202532;
  --labelW:58px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button,input,select{font:inherit}
button{color:inherit}
#app{height:100dvh;display:grid;grid-template-rows:52px minmax(220px,39dvh) 1fr 70px;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:7px 12px;background:#0d0f14;border-bottom:1px solid #171a21}
.brand{font-weight:800;font-size:13px;letter-spacing:.055em}.brand b{font-size:10px;color:var(--muted)}
.topActions{display:flex;gap:8px}.topBtn,.exportBtn{border:0;border-radius:10px;padding:8px 11px;background:#232730;font-size:12px}.exportBtn{background:var(--cyan);color:#061014;font-weight:800}
.previewArea{min-height:0;display:grid;grid-template-rows:1fr 42px;background:#07080c}
#stage{display:block;max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain;background:#10131a}
.previewControls{display:flex;align-items:center;justify-content:center;gap:15px;border-top:1px solid #171a22;background:#0d0f14}
.round,.smallRound{border:0;background:transparent}.round{font-size:25px;width:54px}.smallRound{font-size:20px;color:var(--muted)}
#clock{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;min-width:118px;text-align:center}
.editorArea{min-height:0;display:grid;grid-template-rows:30px 1fr;background:#0e1117;border-top:1px solid #20242c}
.timelineHead{display:flex;align-items:center;gap:6px;padding:0 8px 0 calc(var(--labelW) + 7px);font-size:10px;color:var(--muted);border-bottom:1px solid #191d25}
.timelineHead .mini{width:25px;height:23px;border:1px solid var(--line);border-radius:7px;background:#1b2029}.hint{margin-left:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.timelineWrap{position:relative;min-height:0;display:grid;grid-template-columns:var(--labelW) 1fr;overflow:hidden}
.labels{z-index:6;background:#11141b;border-right:1px solid #252a34;padding-top:28px;display:grid;grid-template-rows:repeat(5,45px)}
.labels button{border:0;border-bottom:1px solid #20252f;background:#11141b;color:#919baa;font-size:9px;padding:0}
.labels button.active{color:#fff;background:#222936;box-shadow:inset 3px 0 var(--cyan)}
.scroller{position:relative;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;touch-action:pan-x;background:#0d1016}.scroller::-webkit-scrollbar{display:none}
.timeline{position:relative;height:253px;min-width:100%;padding-top:28px}
.ruler{position:absolute;top:0;height:28px;left:0;border-bottom:1px solid #242a34;color:#8f98a7;font-size:9px}
.tick{position:absolute;top:0;height:28px;border-left:1px solid #2b313c;padding:5px 0 0 4px}
.track{position:relative;height:45px;border-bottom:1px solid #20252e;background:#10131a}
.track:nth-of-type(even){background:#0e1117}
.clip{position:absolute;top:4px;height:37px;border-radius:7px;background:#333b4b;border:1px solid #556075;overflow:hidden;touch-action:none;user-select:none}
.clip.selected{outline:2px solid var(--cyan);z-index:4}
.clipThumbs{position:absolute;inset:0;background-position:left center;background-repeat:repeat-x;background-size:auto 100%;opacity:.74}
.clipShade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,12,18,.25),transparent 35%,rgba(9,12,18,.16))}
.clipName{position:absolute;left:7px;bottom:4px;right:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:9px;text-shadow:0 1px 3px #000}
.handle{position:absolute;top:0;width:9px;height:100%;background:rgba(53,210,227,.75);z-index:5;display:none}.selected .handle{display:block}.handle.left{left:0}.handle.right{right:0}
.titleClip{background:#26334c;border-color:#7897cc}.titleClip .clipName{font-weight:800;letter-spacing:.05em}
.audioTrack{overflow:hidden}.audioClip{position:absolute;top:4px;height:37px;left:0;background:#113942;border-radius:5px;overflow:hidden}.audioClip img{width:100%;height:100%;object-fit:fill;opacity:.8}.audioClip span{position:absolute;left:8px;top:5px;font-size:9px;color:#c6fbff}
.playhead{pointer-events:none;position:absolute;left:calc(var(--labelW) + (100% - var(--labelW))/2);top:0;bottom:0;z-index:10;width:1px}
.playhead i{position:absolute;top:0;bottom:0;width:2px;background:#fff;box-shadow:0 0 3px rgba(0,0,0,.8)}.playhead span{position:absolute;top:0;left:-5px;border-left:6px solid transparent;border-right:6px solid transparent;border-top:7px solid #fff}
.toolbar{display:grid;grid-template-columns:repeat(6,1fr);background:#0d1016;border-top:1px solid #252a34}
.toolbar button{border:0;background:transparent;color:#d7dbe4;font-size:9px;display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center}.toolbar button span{font-size:22px;line-height:20px;color:#edf0f7}
.backdrop{position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:30}.sheet{position:fixed;z-index:31;left:0;right:0;bottom:0;padding:10px 14px calc(16px + env(safe-area-inset-bottom));background:#171b23;border-radius:18px 18px 0 0;box-shadow:0 -12px 40px rgba(0,0,0,.42)}
.hidden{display:none!important}.sheetGrip{width:38px;height:4px;border-radius:10px;background:#535c6b;margin:0 auto 11px}.sheet h3{margin:0 0 12px;font-size:14px}
.effectGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.effectGrid button,.seg button,.layerBtns button{border:1px solid #343b48;background:#222731;border-radius:9px;padding:9px 6px;font-size:11px}.effectGrid button.active,.seg button.active{border-color:var(--cyan);color:#d9fdff;background:#17363c}
.rangeLabel{display:flex;align-items:center;gap:10px;margin-top:13px;font-size:11px;color:var(--muted)}.rangeLabel input{flex:1;accent-color:var(--cyan)}
.textInput{display:block;width:100%;margin:7px 0;border:1px solid #3a414f;border-radius:10px;background:#0e1117;color:#fff;padding:10px}.seg{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:9px 0}.durationLabel{font-size:11px;color:var(--muted)}.durationLabel input{width:72px;border:1px solid #3a414f;border-radius:8px;background:#0e1117;color:#fff;padding:7px}
.sheetPrimary{width:100%;border:0;border-radius:11px;background:var(--cyan);color:#061014;font-weight:800;padding:11px;margin-top:12px}.layerBtns{display:grid;gap:8px}
.exportFields{display:grid;grid-template-columns:1fr 1fr;gap:8px}.exportFields label{font-size:10px;color:var(--muted)}.exportFields input,#resolution{width:100%;display:block;margin-top:4px;background:#0e1117;color:#fff;border:1px solid #3a414f;border-radius:9px;padding:8px}#resolution{margin-top:9px}.progress{height:5px;background:#303644;border-radius:10px;overflow:hidden;margin-top:10px}.progress i{display:block;height:100%;width:0;background:var(--cyan)}.sheetNote{font-size:10px;color:var(--muted);line-height:1.5}
@media(max-height:760px){#app{grid-template-rows:46px minmax(180px,35dvh) 1fr 62px}.track{height:39px}.labels{grid-template-rows:repeat(5,39px)}.timeline{height:223px}.clip,.audioClip{height:31px}.toolbar button span{font-size:18px}}