@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Manrope:wght@500;600;650;700;750;800&display=swap');
:root{color-scheme:dark;--bg:#111315;--panel:#191b1e;--line:#2b2e32;--text:#eef0f2;--muted:#858a94;--accent:#ff5b62;--accent-dark:#30191c;--radius:8px}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;font-size:13px}button,input,select,textarea{font:inherit}button{cursor:pointer;border:0;background:transparent;color:inherit;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:6px;min-height:32px;padding:7px 10px}button:hover{background:#ffffff0c}button:disabled{opacity:.3;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:3px}svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}[data-icon]{display:inline-flex}header{height:76px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 26px;gap:20px}.brand{display:flex;align-items:center;gap:10px;font:800 21px Manrope,sans-serif;letter-spacing:2px;text-decoration:none;color:var(--text)}.brand svg{color:var(--accent);width:27px;height:27px;stroke-width:1.7}.brand span{font:550 9px 'DM Sans';letter-spacing:2px;color:var(--muted);border-left:1px solid #444;padding-left:12px;margin-left:2px}.project-title{display:flex;gap:18px;align-items:center}.project-title input{background:none;border:0;color:#d4d7db;width:165px;max-width:32vw;padding:8px;font-weight:500}.project-title>span{font-size:11px;color:var(--muted)}i{display:inline-block;background:var(--accent);width:5px;height:5px;border-radius:50%;margin-right:6px}.header-actions{display:flex;gap:12px;align-items:center}.primary{background:var(--accent);color:#231014;font-weight:700;padding:11px 18px;min-height:40px}.primary:hover{background:#ff777d}.quiet{color:#c7cbd2;background:#222529;border:1px solid #33363c}.header-actions .quiet:first-child{border-radius:50%;width:28px;min-height:28px;padding:0;background:none}main{height:calc(100dvh - 76px);display:grid;grid-template-columns:78px 286px minmax(280px,1fr) 276px;grid-template-rows:minmax(300px,1fr) 290px;gap:0}.tools{border-right:1px solid var(--line);grid-row:1/2;padding:18px 6px;display:flex;flex-direction:column;gap:12px}.tool{flex-direction:column;gap:7px;color:#979da7;font-size:10px;width:64px;height:58px}.tool svg{width:22px;height:22px}.tool.active{color:var(--accent);background:#ff5b620b}.tool.active:before{content:'';position:absolute;left:0;background:var(--accent);height:28px;width:2px}.library{border-right:1px solid var(--line);position:relative;display:flex;flex-direction:column;overflow:hidden}.panel-heading{display:flex;align-items:center;justify-content:space-between;padding:23px 20px 18px;gap:10px}h2{font:700 14px Manrope,sans-serif;margin:0}.muted,small{color:var(--muted);font-size:11px}#libraryBody{padding:0 18px;overflow:auto;flex:1}.import-btn{width:100%;border:1px dashed #454b52;min-height:43px;background:#222529;color:#d4d9df;margin-bottom:20px}.import-btn svg{color:var(--accent)}.section-label{display:flex;justify-content:space-between;color:#8a909b;font-size:10px;letter-spacing:1.2px;margin:0 0 14px}.media-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 12px}.asset{position:relative;min-width:0}.thumb{height:73px;border-radius:6px;overflow:hidden;position:relative;background:#252930}.thumb canvas,.thumb img{width:100%;height:100%;object-fit:cover}.thumb .duration{position:absolute;bottom:5px;right:5px;background:#121416bc;padding:2px 4px;font-size:9px;border-radius:3px}.asset .add{position:absolute;top:5px;right:5px;padding:0;width:21px;min-height:21px;background:var(--accent);color:#111;border-radius:4px;opacity:0}.asset:hover .add,.asset:focus-within .add{opacity:1}.asset-name{font-size:10px;margin:8px 0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.asset-meta{color:#777e88;font-size:9px}.library-tip{border-top:1px solid var(--line);color:#777e89;margin-top:24px;padding:16px 0;line-height:1.7;font-size:11px}.library-tip b{color:#bbc0c7;font-weight:500}.local-note{margin:16px 18px 20px;border-top:1px solid var(--line);padding-top:16px;display:flex;gap:8px;font-size:10px;color:#aeb4bc;line-height:1.5}.local-note svg{width:15px;color:#8c9690}.local-note small{display:block;font-size:9px;color:#68716f}.viewer{display:flex;flex-direction:column;min-width:0;background:#141618}.viewer-heading{display:flex;align-items:center;justify-content:space-between;padding:18px 25px;color:#a6acb5;font-size:11px}.live-dot{display:inline-block;width:4px;height:4px;background:var(--accent);border-radius:50%;margin-left:7px}.select-wrap{position:relative;display:inline-flex;max-width:100%}.select-wrap:after{content:'';width:6px;height:6px;border-right:1.5px solid #a8afb9;border-bottom:1.5px solid #a8afb9;transform:rotate(45deg);position:absolute;right:18px;top:calc(50% - 5px);pointer-events:none}select{appearance:none;background:#222529;border:1px solid #33373d;border-radius:5px;color:#c4c9d0;padding:8px 42px 8px 12px;width:100%;min-height:34px;font-size:11px}.stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:16px 34px 20px;background:radial-gradient(ellipse at center,#25282b22,transparent 70%);overflow:hidden}.stage canvas{display:block;max-width:100%;max-height:100%;width:auto;height:auto;box-shadow:0 12px 42px #0006;border-radius:2px;object-fit:contain}.stage-badge{position:absolute;bottom:8px;color:#606872;font-size:8px;letter-spacing:1.7px}.transport{display:flex;align-items:center;justify-content:space-between;padding:12px 28px 5px;position:relative}.timecode{color:#6e7680;font-size:10px;font-variant-numeric:tabular-nums}.timecode b{color:#d7dce2;font-weight:500}.playback{display:flex;gap:12px;position:absolute;left:50%;transform:translateX(-50%);align-items:center}.playback button{color:#8d959f}.playback .play{color:#e5e9ed;width:34px}.transport>button{color:#818a96}.viewer-caption{padding:19px 28px 22px;color:#5f6873;font-size:10px;display:flex;justify-content:space-between;align-items:center}.viewer-caption button{font-size:10px;color:#a7b0bb;padding:0;min-height:20px}.viewer-caption button span{color:var(--accent)}.inspector{border-left:1px solid var(--line);background:#191b1e;overflow:auto}.inspector-close{display:none}#inspectorBody{padding:0 20px 20px}.tabs{display:flex;gap:20px;border-bottom:1px solid var(--line);margin:0 0 20px;font-size:11px}.tabs button{padding:0 0 13px;border-radius:0;min-height:30px;color:#777f89}.tabs .active{color:var(--accent);border-bottom:2px solid var(--accent)}.selected-info{display:flex;align-items:center;gap:10px;padding-bottom:18px;margin-bottom:20px;border-bottom:1px solid var(--line)}.selected-info .mini-icon{width:34px;height:34px;border-radius:5px;background:#38272c;color:var(--accent);display:grid;place-items:center}.selected-info b{font-size:11px;font-weight:500;display:block}.selected-info small{font-size:9px;display:block;margin-top:5px}.property-group{border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:18px}.property-group h3{font-size:11px;font-weight:550;margin:0 0 15px;color:#d8dce2;display:flex;justify-content:space-between}.property-group h3 button{font-size:14px;padding:0;min-height:12px;color:#7b848f}.range-label{display:flex;justify-content:space-between;color:#9ca4ae;font-size:10px;margin-bottom:9px}.range-label output{color:#b8bec7;font-variant-numeric:tabular-nums}input[type=range]{appearance:none;background:linear-gradient(90deg,#db555e,#513034);height:3px;border-radius:4px;width:100%;cursor:pointer;display:block;margin:12px 0 18px;accent-color:var(--accent)}input[type=range]::-webkit-slider-thumb{appearance:none;width:9px;height:9px;border:2px solid #d4d9dc;background:#252a2f;border-radius:50%}.field-row{display:flex;gap:10px}.field{flex:1;min-width:0}.field label{font-size:9px;color:#808994;display:block;margin-bottom:7px}input[type=number],textarea,input[type=text]{background:#24272b;border:1px solid #30353b;border-radius:5px;padding:9px;color:#c9cfd6;width:100%;font-size:11px}textarea{resize:vertical;min-height:72px;line-height:1.6}.field-row select{min-width:0}.swatches{display:flex;gap:8px;flex-wrap:wrap}.swatch{width:27px;height:27px;border:2px solid transparent;padding:0;min-height:27px;border-radius:50%}.swatch.active{border-color:white;box-shadow:0 0 0 2px #ffffff22}.wide{width:100%}.filter-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.filter-card{display:block;text-align:left;padding:0;font-size:10px;color:#a8b0ba}.filter-card canvas{width:100%;border-radius:5px;display:block;border:2px solid transparent;margin-bottom:6px}.filter-card.active canvas{border-color:var(--accent)}.filter-card.active{color:var(--accent)}.text-preset{border:1px solid #33383f;background:#22262a;min-height:76px;margin-bottom:10px;width:100%;font-family:Manrope;font-size:22px;font-weight:800}.timeline{grid-column:1/-1;background:#191b1e;border-top:1px solid var(--line);display:flex;flex-direction:column;min-height:0}.timeline-toolbar{height:54px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid var(--line);gap:12px}.edit-actions{display:flex;align-items:center;gap:3px;color:#9ba4af}.edit-actions button{font-size:11px;padding:6px 9px}.divider{height:19px;width:1px;background:var(--line);margin:0 9px}.timeline-name{color:#7b8490;letter-spacing:1.3px;font-size:9px}.timeline-name span{letter-spacing:0;color:#535e6a;margin-left:8px}.zoom-controls{display:flex;gap:12px;align-items:center;color:#7d8792}.zoom-controls input{width:85px;margin:0}.zoom-controls svg{width:15px}.zoom-controls button{font-size:10px;color:#a5aeb7}.timeline-scroll{overflow:auto;flex:1;position:relative;scrollbar-color:#424850 transparent;scrollbar-width:thin}.tracks{position:relative;min-height:180px;width:100%;padding-top:34px}.ruler{position:absolute;left:108px;top:0;height:27px;cursor:crosshair;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(var(--px) / 2 - 1px),#393e45 calc(var(--px) / 2 - 1px),#393e45 calc(var(--px) / 2));background-size:auto 5px;background-repeat:repeat-x;background-position:bottom}.ruler span{position:absolute;font-size:9px;color:#79838e;top:8px;transform:translateX(-50%);font-variant-numeric:tabular-nums}.track{height:50px;display:flex;align-items:center;position:relative;margin-bottom:8px}.track-label{width:108px;flex-shrink:0;position:sticky;left:0;z-index:5;background:#191b1ef5;display:flex;align-items:center;gap:10px;padding-left:20px;font-size:9px;color:#707b88;height:100%}.track-label svg{width:15px}.track-body{height:100%;position:relative;flex:1;border-bottom:1px solid #252a30}.clip{position:absolute;top:0;height:48px;border-radius:5px;background:#4a695c;border:1px solid #5d8571;overflow:hidden;cursor:grab;user-select:none;touch-action:pan-y}.clip.selected{border:2px solid var(--accent);box-shadow:0 0 0 1px #ff5b6222}.clip .filmstrip{position:absolute;inset:0;display:flex;opacity:.7}.filmstrip canvas,.filmstrip img{height:100%;width:84px;object-fit:cover;border-right:1px solid #ffffff16;flex-shrink:0}.clip .clip-name{position:absolute;left:9px;right:8px;top:6px;font-size:9px;color:white;text-shadow:0 1px 4px black;white-space:nowrap;overflow:hidden}.clip .clip-length{position:absolute;bottom:5px;left:9px;font-size:8px;color:#fff9}.clip.text-clip{background:#69517a;border-color:#9675b0;height:30px;top:9px}.clip.text-clip.selected{border-color:var(--accent)}.clip.audio-clip{background:#284c51;border-color:#38656b;height:33px;top:8px}.audio-wave{position:absolute;inset:13px 4px 1px;width:calc(100% - 8px);height:20px}.track-hint{position:absolute;left:16px;top:18px;font-size:9px;color:#48535e}.playhead{position:absolute;top:23px;bottom:0;width:1px;background:var(--accent);z-index:4;pointer-events:none}.playhead:before{content:'';width:9px;height:11px;background:var(--accent);position:absolute;left:-4px;top:-5px;clip-path:polygon(0 0,100% 0,100% 65%,50% 100%,0 65%)}footer{height:30px;display:flex;align-items:center;justify-content:space-between;color:#616c78;font-size:9px;padding:0 22px;border-top:1px solid #252a30}footer i{width:4px;height:4px;background:#7b9367}.keyboard-hint{display:flex;gap:8px;align-items:center}kbd{font:8px 'DM Sans';color:#8b95a1}dialog{border:1px solid #3a4147;background:#1b1e21;color:#e5e9ef;border-radius:14px;width:440px;max-width:calc(100% - 28px);padding:28px;box-shadow:0 20px 100px #000b}dialog::backdrop{background:#06090cc9;backdrop-filter:blur(7px)}dialog h2{font-size:23px;letter-spacing:-.6px;margin:6px 0 12px}dialog p{color:#939da9;line-height:1.7;font-size:12px}.eyebrow{font-size:9px;letter-spacing:2px;color:var(--accent)}.modal-actions{display:flex;gap:12px;margin-top:24px;justify-content:flex-end}dialog .field-row{margin:20px 0}.progress{width:100%;height:5px;background:#323a40;border-radius:10px;overflow:hidden;margin-top:20px}.progress div{height:100%;background:var(--accent);width:0}#toast{position:fixed;bottom:35px;left:50%;transform:translate(-50%,20px);padding:12px 20px;border:1px solid #694047;border-radius:7px;background:#302125;box-shadow:0 5px 25px #0008;color:#f2d9dc;font-size:12px;opacity:0;pointer-events:none;z-index:30;transition:.2s;max-width:90vw}#toast.show{opacity:1;transform:translate(-50%,0)}.empty{color:#7e8996;line-height:1.8;padding:20px 0;font-size:12px}.inspector-toggle{display:none}.audio-thumb{height:100%;display:grid;place-items:center;background:linear-gradient(140deg,#244e51,#183234);color:#8fcccc}.pill{font-size:9px;padding:4px 7px;border-radius:4px;background:#ff5b6212;color:#ff9399}.danger{color:#f09b98}.drop-active{outline:2px dashed var(--accent);outline-offset:-5px}.intro-card{padding:14px;border:1px solid #533038;background:#ff5b6206;border-radius:7px;font-size:11px;color:#bd9fa4;line-height:1.7;margin:15px 0}.intro-card strong{color:#f0d8dc;font-weight:500}
@media(min-width:1600px){main{grid-template-columns:86px 310px minmax(280px,1fr) 300px;grid-template-rows:minmax(340px,1fr) 330px}.thumb{height:88px}.stage{padding:30px 65px}.timeline .track{height:58px}.clip{height:56px}.tracks{min-height:210px}}
@media(max-width:1150px){main{grid-template-columns:70px 235px minmax(260px,1fr) 235px;grid-template-rows:minmax(280px,1fr) 260px}.tools{padding:14px 3px}.tool{width:62px}.panel-heading{padding:19px 14px}#libraryBody,#inspectorBody{padding-left:14px;padding-right:14px}.project-title>span{display:none}.stage{padding-left:20px;padding-right:20px}.viewer-caption>span{display:none}.viewer-caption{justify-content:flex-end;padding-bottom:14px}.timeline-name{display:none}.thumb{height:61px}}
@media(max-width:900px){header{height:62px;padding:0 16px}.brand span{display:none}.brand{font-size:17px;gap:7px}.brand svg{width:23px}.header-actions{gap:8px}.save-project{display:none}.project-title input{width:145px;font-size:12px}.primary{padding:9px 12px;font-size:11px;min-height:35px}main{height:calc(100dvh - 62px);grid-template-columns:66px 216px minmax(0,1fr);grid-template-rows:minmax(250px,1fr) 255px}.inspector{position:fixed;top:62px;bottom:0;right:0;width:275px;z-index:12;box-shadow:-20px 0 50px #0008;display:none}.inspector.open{display:block}.inspector-close{display:inline-flex}.inspector-toggle{display:inline-flex}.stage{padding:12px 16px}.viewer-heading{padding:15px 18px}.transport{padding:14px 18px}.timecode{font-size:9px}.viewer-caption{padding:12px 18px}.local-note{margin:12px}.timeline-toolbar{padding:0 12px}}
@media(max-width:620px){header{height:58px;gap:8px;padding:0 12px}.brand{font-size:16px;letter-spacing:1px}.brand svg{width:21px}.header-actions .quiet{display:none}.project-title input{width:120px;max-width:29vw;font-size:11px;padding:4px}.header-actions .primary{font-size:10px;gap:5px;padding:8px 10px}.header-actions svg{width:14px}main{height:calc(100dvh - 58px);display:flex;flex-direction:column}.viewer{order:0;flex:1;min-height:220px}.viewer-heading{padding:9px 14px;font-size:10px}.viewer-heading select{font-size:10px;min-height:28px;padding-top:5px;padding-bottom:5px}.stage{padding:5px 16px 16px}.stage-badge{font-size:6px;bottom:5px}.transport{min-height:43px;padding:3px 16px}.viewer-caption{display:none}.tools{order:3;border-right:0;border-top:1px solid var(--line);flex-direction:row;justify-content:space-around;gap:0;padding:4px 4px max(5px,env(safe-area-inset-bottom));height:66px;flex-shrink:0;background:#191b1e}.tool{height:52px;width:56px;font-size:9px;gap:5px}.tool svg{width:20px;height:20px}.tool.active:before{display:none}.timeline{order:1;height:235px;flex-shrink:0}.timeline-toolbar{height:43px;padding:0 8px}.edit-actions{gap:0}.edit-actions button{padding:6px 8px}.button-label{display:none}.divider{margin:0 5px}.zoom-controls{gap:5px}.zoom-controls input{width:58px}.zoom-controls button{font-size:9px;padding:5px}.zoom-controls svg{display:none}.tracks{padding-top:29px;min-height:165px}.track{height:45px;margin-bottom:6px}.track-label{width:60px;padding-left:12px;gap:0}.track-label span:last-child{display:none}.ruler{left:60px}.clip{height:42px}.clip .clip-name{font-size:8px}.track-hint{font-size:8px}.playhead{top:20px}footer{height:24px;padding:0 12px;font-size:8px}.keyboard-hint{display:none}.library{display:none;position:fixed;bottom:66px;left:0;right:0;max-height:46dvh;border-top:1px solid #404a40;border-radius:14px 14px 0 0;background:#1b1e21;z-index:10;padding-bottom:8px;box-shadow:0 -20px 80px #0009}.library.open{display:flex}.library .panel-heading{padding:16px}.library .local-note{display:none}.media-grid{grid-template-columns:repeat(3,1fr);gap:12px}.thumb{height:64px}.library-tip{display:none}.import-btn{min-height:38px;margin-bottom:14px}.filter-grid{grid-template-columns:repeat(3,1fr)}.inspector{top:auto;bottom:66px;width:100%;max-height:58dvh;border-radius:14px 14px 0 0;box-shadow:0 -20px 80px #0009;border-top:1px solid #414b40}.inspector .panel-heading{padding:16px 20px}.property-group{padding-bottom:12px;margin-bottom:13px}.inspector #inspectorBody{padding:0 20px 18px}.field-row{gap:12px}dialog{padding:23px}dialog h2{font-size:21px}.filter-card canvas{max-height:80px;object-fit:cover}.text-preset{min-height:50px;font-size:17px}.intro-card{margin:8px 0}.library .panel-heading h2:after{content:' · tippen zum Schließen';color:#64705e;font-size:9px;font-family:'DM Sans';font-weight:400}}
@media(max-height:720px) and (min-width:621px){main{grid-template-rows:minmax(240px,1fr) 235px}.viewer-caption{display:none}.tools{gap:4px}.tool{height:47px}.panel-heading{padding-top:15px;padding-bottom:14px}}

/* Keep all three tracks visible on compact desktop screens. */
@media (min-width:621px) and (max-height:720px){main{grid-template-rows:minmax(240px,1fr) 275px}.timeline .track{height:43px;margin-bottom:6px}.timeline .clip{height:41px}.timeline .text-clip{height:28px}.timeline .audio-clip{height:30px}}

/* The app frame and track names stay fixed; only the time content scrolls. */
html,body{width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
main,.timeline{min-width:0;overflow:hidden}
.timeline-viewport{display:grid;grid-template-columns:108px minmax(0,1fr);flex:1;min-height:0;overflow:hidden}
.timeline-track-labels{padding-top:34px;background:#191b1e;z-index:5;overflow:hidden}
.fixed-track-label{height:50px;margin-bottom:8px;display:flex;align-items:center;gap:10px;padding-left:20px;color:#707b88;font-size:9px}
.fixed-track-label svg{width:15px;height:15px}
.timeline-scroll{min-width:0;width:100%;overscroll-behavior:none;touch-action:pan-x pan-y;-webkit-overflow-scrolling:touch}
.track-body{min-width:0}.ruler{left:0;touch-action:none}.clip{touch-action:pan-x pan-y}
@media(min-width:1600px){.fixed-track-label{height:58px}}
@media(min-width:621px) and (max-height:720px){.fixed-track-label{height:43px;margin-bottom:6px}}
@media(max-width:620px){
 .timeline-viewport{grid-template-columns:60px minmax(0,1fr)}
 .timeline-track-labels{padding-top:29px}.fixed-track-label{height:45px;margin-bottom:6px;padding-left:12px}
 .fixed-track-label>span:last-child{display:none}.ruler{left:0}
}

/* Mobile controls are sized for fingers and readable without zooming. */
@media(max-width:620px){
 header{height:64px}main{height:calc(100dvh - 64px)}
 button{min-height:44px}
 .header-actions .primary{min-height:44px;font-size:12px;padding:10px 12px}
 .header-actions svg{width:18px;height:18px}.project-title input{font-size:12px}
 .viewer-heading{font-size:12px;padding:10px 14px}.viewer-heading select{min-height:44px;font-size:12px;padding:10px 42px 10px 12px}
 .transport{min-height:50px;padding:3px 12px}.transport button{width:44px;min-height:44px;padding:10px}
 .transport svg{width:21px;height:21px}.timecode{font-size:11px}.playback{gap:0;left:57%}
 .timeline{height:286px}.timeline-toolbar{height:52px}.edit-actions button{width:40px;min-height:44px;padding:9px}
 .edit-actions svg{width:21px;height:21px}.zoom-controls button{font-size:11px;min-height:44px;padding:4px}
 .zoom-controls input{width:56px;height:44px;margin:0;background:linear-gradient(90deg,#db555e,#513034) center/100% 4px no-repeat}
 .zoom-controls input::-webkit-slider-thumb{width:20px;height:20px}
 .tracks{padding-top:34px;min-height:208px}.track{height:52px;margin-bottom:6px}.timeline-track-labels{padding-top:34px}
 .fixed-track-label{height:52px;margin-bottom:6px}.fixed-track-label svg{width:19px;height:19px}
 .clip{height:50px}.clip .clip-name{font-size:11px;top:8px}.clip .clip-length{font-size:10px;bottom:6px}
 .clip.text-clip{height:36px;top:8px}.clip.audio-clip{height:38px;top:7px}.ruler span{font-size:11px}
 .playhead{top:24px}footer{height:28px;font-size:9px}
 .tools{height:76px;padding:4px 4px max(7px,env(safe-area-inset-bottom))}.tool{height:64px;width:16.66%;font-size:11px;gap:6px}
 .tool svg{width:25px;height:25px}
 .library,.inspector{bottom:76px}.library{max-height:58dvh}.inspector{max-height:min(74dvh,calc(100dvh - 150px))}
 .panel-heading h2{font-size:18px}.inspector .panel-heading{position:sticky;top:0;z-index:2;background:#191b1e;padding:10px 16px;border-bottom:1px solid var(--line)}
 .inspector-close{font-size:30px;line-height:1;min-width:44px;width:44px;height:44px;border:1px solid #454d55;border-radius:10px;color:#eef0f2;background:#292e33}
 .tabs{gap:24px;margin-bottom:18px;font-size:14px}.tabs button{min-height:48px;padding:8px 0 12px}
 .selected-info b{font-size:14px}.selected-info small{font-size:12px;line-height:1.5}.selected-info .mini-icon{width:42px;height:42px}
 .property-group h3{font-size:14px;margin-bottom:12px;align-items:center}.property-group h3 button{width:44px;min-height:44px;font-size:22px}
 .range-label{font-size:13px;margin-bottom:0}.range-label output{font-size:13px}
 .property-group input[type=range]{height:44px;margin:0 0 12px;background:linear-gradient(90deg,#db555e,#513034) center/100% 4px no-repeat}
 .property-group input[type=range]::-webkit-slider-thumb{width:22px;height:22px;border-width:3px}
 .field label{font-size:13px;margin-bottom:8px}input[type=number],textarea,input[type=text]{font-size:16px;min-height:44px;padding:12px}
 select{font-size:14px;min-height:44px;padding-right:44px}.select-wrap:after{right:18px}
 .swatch{width:44px;height:44px;min-height:44px}.swatches{gap:12px}
 .field-row button{min-height:44px;font-size:18px}.field-row button svg{width:22px;height:22px}
 .library .panel-heading{padding:14px 16px}.library .panel-heading h2:after{display:none}.library .panel-heading{cursor:pointer}
 .import-btn{font-size:14px;min-height:48px}.asset-name{font-size:12px}.asset-meta{font-size:10px}
 .thumb{height:76px}.asset .add{opacity:1;width:32px;min-height:32px;font-size:23px}.thumb .duration{font-size:11px}
 .filter-card{font-size:13px}.text-preset{min-height:64px;font-size:21px}.intro-card,.empty{font-size:13px}
 dialog h2{font-size:24px}dialog p{font-size:14px}dialog .field-row{flex-wrap:wrap}dialog .field{min-width:125px}
 .modal-actions button{font-size:14px;min-height:44px}
}

/* Two stages share one project: a storyboard first, precise tracks second. */
.home-screen{display:none}.home-back{display:none;min-width:44px;font-size:26px}
.workflow{height:52px;display:flex;align-items:center;justify-content:center;gap:16px;border-bottom:1px solid var(--line);background:#15181a}
.step{color:#919ba6;font-size:13px;min-height:44px}.step>span{border:1px solid #444e55;width:25px;height:25px;border-radius:50%;display:grid;place-items:center;font-size:12px}
.step.active{color:var(--accent)}.step.active>span{background:var(--accent);color:#231014;border-color:var(--accent)}.step-connector{width:42px;height:1px;background:#343d43}
main{height:calc(100dvh - 128px)}.basic-editor,.basic-scrub{display:none}
body[data-mode=basic] main{display:flex;flex-direction:column}
body[data-mode=basic] .tools,body[data-mode=basic] .library,body[data-mode=basic] .inspector,body[data-mode=basic] .timeline{display:none!important}
body[data-mode=basic] .viewer{flex:1;min-height:0}.basic-scrub{padding:0 32px}
body[data-mode=basic] .basic-scrub{display:block}body[data-mode=basic] .viewer-caption,body[data-mode=basic] .stage-badge{display:none}
body[data-mode=basic] .basic-editor{display:flex;flex-direction:column;flex-shrink:0;height:265px;background:#191c1f;border-top:1px solid var(--line)}
.basic-editor-heading{display:flex;align-items:center;justify-content:space-between;padding:16px 28px 8px;gap:12px}.basic-editor-heading h2{font-size:16px;margin-top:5px}.basic-eyebrow{font-size:9px;letter-spacing:1.5px;color:#7f8d82}.basic-editor-heading>button{min-height:44px;font-size:12px;border-color:#75444b;color:#f1cdd1}
.storyboard{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;padding:12px 28px;min-height:128px;overscroll-behavior:none;scrollbar-width:thin;scrollbar-color:#47513e transparent}
.story-card{position:relative;display:block;flex-shrink:0;padding:0;width:104px;height:104px;overflow:hidden;border:2px solid #3c454c;border-radius:9px;background:#29372e;touch-action:pan-x}
.story-card.selected{border-color:var(--accent)}.story-card canvas{height:100%;width:100%;object-fit:cover;opacity:.8}.story-card:after{content:'';position:absolute;inset:40% 0 0;background:linear-gradient(transparent,#160b10d9);pointer-events:none}
.story-index{position:absolute;left:5px;top:5px;background:#111a;min-width:22px;height:22px;display:grid;place-items:center;border-radius:4px;color:#fff;font-size:12px}
.story-card strong{position:absolute;bottom:8px;left:7px;font-size:14px;color:white;font-weight:650;z-index:1}
.story-add{flex-shrink:0;width:100px;height:104px;border:1px dashed #765059;display:flex;flex-direction:column;gap:10px;color:var(--accent);font-size:11px}.story-add svg{width:25px;height:25px}
.basic-edit-row{display:flex;align-items:center;gap:20px;padding:8px 28px 14px}.basic-history,.basic-clip-actions{display:flex;gap:5px;align-items:center}.basic-edit-row button{min-height:44px;min-width:44px;color:#bdc7ce}.basic-clip-actions button{font-size:12px;gap:7px}.basic-clip-actions svg{width:20px;height:20px}.basic-clip-actions button>span:only-child{font-size:24px}#basicSummary{margin-left:auto;color:#86928b;font-size:12px;white-space:nowrap}
.basic-scrub input{height:30px;margin:0;background:linear-gradient(90deg,#db555e,#513034) center/100% 3px no-repeat}.basic-scrub input::-webkit-slider-thumb{width:15px;height:15px}
.basic-media-list{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px;max-height:40dvh;overflow:auto}.basic-media-item{display:flex;flex-direction:column;padding:0;overflow:hidden;border:1px solid #39443d;gap:8px;text-align:left;align-items:stretch}.basic-media-item canvas{width:100%;height:80px;object-fit:cover}.basic-media-item>span{padding:0 8px 10px;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.trim-preview canvas{width:100%;height:100px;object-fit:cover;border-radius:6px;margin-bottom:14px}.trim-control label{display:flex;justify-content:space-between;font-size:14px}.trim-control input{height:44px;background:linear-gradient(90deg,#db555e,#513034) center/100% 4px no-repeat;margin:0 0 12px}.trim-control input::-webkit-slider-thumb{width:22px;height:22px}
body[data-screen=home] .home-screen{display:block;height:calc(100dvh - 76px);overflow:auto;overscroll-behavior:none;padding:0 34px 40px}
body[data-screen=home] main,body[data-screen=home] .workflow,body[data-screen=home] .project-title,body[data-screen=home] .header-actions{display:none}
body[data-screen=editor] .home-back{display:inline-flex}body[data-screen=editor] .brand span{display:none}
.home-nav{display:flex;gap:24px;max-width:1120px;margin:0 auto;padding:14px 0;border-bottom:1px solid var(--line)}.home-nav button{font-size:14px;min-height:44px;color:#98a2ab;border-radius:0;padding:8px 5px}.home-nav button.active{color:var(--accent);border-bottom:2px solid var(--accent)}
#homeContent{max-width:1120px;margin:auto}.home-hero{padding:62px 0 40px}.home-hero h1{font:800 clamp(32px,4vw,58px)/1.13 Manrope,sans-serif;letter-spacing:-2px;margin:16px 0 22px}.home-hero p,.home-description{font-size:15px;line-height:1.8;color:#98a5a5}.home-hero-actions{display:flex;gap:14px;margin-top:27px}.home-hero-actions button{min-height:50px;font-size:14px;padding:13px 22px}
.home-quick{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:42px}.home-quick button{justify-content:flex-start;text-align:left;background:#20262a;border:1px solid #323d3d;border-radius:12px;padding:22px;gap:17px;min-width:0}.home-quick svg{color:var(--accent);width:27px;height:27px}.home-quick strong{display:block;font-size:15px;font-weight:600}.home-quick small{display:block;font-size:12px;margin-top:8px}.home-quick button>span:last-child{margin-left:auto;color:var(--accent)}
.home-section-heading{display:flex;align-items:center;justify-content:space-between;margin:28px 0 17px;gap:15px}.home-section-heading h2{font-size:21px}.home-section-heading h1{font:800 32px Manrope;margin:10px 0 0;letter-spacing:-1px}.home-section-heading button{min-height:44px;color:var(--accent);font-size:13px}.home-section-heading .primary{color:#231014}.project-heading{padding-top:20px}
.project-row{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line);padding:14px 0}.project-open{display:flex;justify-content:flex-start;text-align:left;gap:18px;min-width:0;flex:1;padding:0}.project-open img{width:86px;height:86px;object-fit:cover;flex-shrink:0;border-radius:9px;background:#29352e}.project-open>span{min-width:0}.project-open strong{display:block;font-weight:550;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.project-open small{display:block;font-size:12px;line-height:1.5;margin-top:6px}.project-menu{min-width:44px;min-height:44px;color:#9caaa7;font-size:16px}.home-local{display:flex;align-items:center;gap:8px;color:#748581;font-size:12px;line-height:1.7;margin-top:28px}.home-local svg{width:16px;flex-shrink:0}.project-controls{display:flex;gap:14px;margin:25px 0 20px}.project-controls input{background:#242b2f;border:1px solid #3b464c;color:#e1e7e3;border-radius:7px;padding:12px 14px;flex:1;min-width:0;font-size:14px}.project-controls select{font-size:13px;min-height:44px}.project-tabs{display:flex;gap:20px;border-bottom:1px solid var(--line)}.project-tabs button{min-height:44px;border-radius:0;font-size:14px;color:#9ca7ac}.project-tabs button.active{color:var(--accent);border-bottom:2px solid var(--accent)}.project-options{display:flex;flex-direction:column;gap:12px;margin-top:25px}.project-options button{min-height:48px;justify-content:flex-start;font-size:14px}
.template-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:30px}.template-card{display:flex;flex-direction:column;align-items:stretch;padding:0;border:1px solid #35413d;border-radius:12px;overflow:hidden;text-align:left;background:#202725}.template-card canvas{width:100%;height:180px;object-fit:cover}.template-card>span{padding:20px}.template-card small{display:block;font-size:10px;letter-spacing:1px;color:var(--accent)}.template-card strong{display:block;font:750 21px Manrope;margin:10px 0}.template-card>span>span{font-size:13px;color:#98a9a1;line-height:1.7}
@media(max-width:900px){main{height:calc(100dvh - 114px)}body[data-screen=home] .home-screen{height:calc(100dvh - 62px)}.home-hero{padding-top:40px}.home-hero h1{font-size:40px}}
@media(max-width:620px){
 header{gap:6px;padding:0 10px}.home-back{font-size:25px;padding:4px;width:36px;min-width:36px}body[data-screen=editor] .brand{font-size:13px;gap:4px}body[data-screen=editor] .brand svg{width:18px}.project-title input{width:94px;max-width:25vw}.header-actions .primary{font-size:11px;padding:9px}.header-actions .primary [data-icon]{display:none}
 .workflow{height:48px;gap:9px;padding:0 8px}.step{font-size:12px;gap:7px;padding:5px 8px}.step>span{width:24px;height:24px}.step-connector{width:18px}
 main{height:calc(100dvh - 112px)}body[data-mode=basic] .viewer{min-height:0}.basic-scrub{padding:0 16px}.basic-scrub input{height:32px}
 body[data-mode=basic] .basic-editor{height:231px;padding-bottom:env(safe-area-inset-bottom)}
 .basic-editor-heading{padding:8px 12px 0;gap:8px}.basic-eyebrow{display:none}.basic-editor-heading h2{font-size:12px;margin:0;line-height:1.5}.basic-editor-heading>button{font-size:11px;min-height:44px;padding:8px}.basic-editor-heading>button svg{width:16px}
 .storyboard{padding:9px 12px;gap:10px;min-height:111px}.story-card{width:80px;height:94px}.story-card strong{font-size:13px;bottom:6px;left:5px}.story-index{font-size:11px;min-width:20px;height:20px}.story-add{width:80px;height:94px;font-size:10px}
 .basic-edit-row{padding:2px 8px 8px;gap:5px;justify-content:space-between}.basic-history{gap:0}.basic-edit-row button{min-width:38px;width:38px;padding:7px;min-height:44px}.basic-clip-actions{gap:0}.basic-clip-actions button{width:auto;min-width:39px;flex-direction:column;font-size:10px;gap:3px;padding:4px 7px}.basic-clip-actions svg{width:18px;height:18px}.basic-clip-actions button>span:only-child{font-size:23px}.basic-clip-actions button:disabled{opacity:.25}#basicSummary{display:none}
 body[data-mode=basic] .viewer .transport{min-height:46px}.basic-media-list{max-height:33dvh}.trim-preview canvas{height:90px}
 body[data-screen=home] .home-screen{height:calc(100dvh - 64px);padding:0 18px 106px}.home-nav{position:fixed;bottom:0;left:0;right:0;z-index:8;background:#191e20;border:0;border-top:1px solid #35403b;padding:8px 12px max(16px,env(safe-area-inset-bottom));justify-content:space-around;gap:8px}.home-nav button{font-size:14px;padding:8px;min-height:48px}
 .home-hero{padding:31px 0 22px}.home-hero h1{font-size:35px;letter-spacing:-1.4px;margin:13px 0 18px}.home-hero p{font-size:14px}.home-hero-actions{gap:10px;flex-wrap:wrap;margin-top:22px}.home-hero-actions button{font-size:13px;min-height:48px;padding:12px 15px}.home-quick{grid-template-columns:1fr;gap:12px;margin-bottom:28px}.home-quick button{padding:17px;gap:13px}.home-quick strong{font-size:14px}.home-quick small{font-size:12px;margin-top:5px}.home-quick svg{width:25px;height:25px}.home-section-heading{margin-top:20px}.home-section-heading h2{font-size:18px}.home-section-heading h1{font-size:27px}.home-section-heading button{font-size:12px;padding:8px}.project-open{gap:13px}.project-open img{width:70px;height:70px}.project-open strong{font-size:14px}.project-open small{font-size:11px;margin-top:4px}.project-row{gap:4px;padding:13px 0}.project-menu{padding:7px}.home-local{font-size:11px;align-items:flex-start}.project-controls{gap:10px;flex-wrap:wrap}.project-controls input{font-size:16px;min-height:46px;width:100%;flex-basis:100%}.project-controls .select-wrap{width:100%}.project-controls select{font-size:14px}.project-tabs{gap:12px}.project-tabs button{font-size:13px}.template-grid{grid-template-columns:1fr;gap:18px;margin-top:22px}.template-card canvas{height:170px}.template-card>span{padding:17px}.home-description{font-size:14px}.project-options button{min-height:48px}
}

@media(max-width:620px){.basic-edit-row button{min-width:44px;width:44px}.basic-clip-actions button{min-width:44px;width:auto;font-size:11px}.basic-clip-actions svg{width:21px;height:21px}}

/* The start screen leads with editing actions instead of introductory copy. */
.home-hero{padding:28px 0 14px}.home-hero h1{font-size:28px;line-height:1.2;letter-spacing:-.7px;margin:0 0 20px}.home-hero-actions{margin-top:0}
@media(max-width:900px){.home-hero{padding-top:26px}.home-hero h1{font-size:28px}}
@media(max-width:620px){.home-hero{padding:24px 0 6px}.home-hero h1{font-size:24px;line-height:1.25;letter-spacing:-.5px;margin:0 0 18px}.home-hero-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin:0}.home-hero-actions button{font-size:14px;min-height:52px;padding:12px 10px;white-space:nowrap}.home-section-heading{margin-top:24px}.home-section-heading h2{font-size:17px}}

/* Installed app surfaces and device safe areas. */
[hidden]{display:none!important}.install-app{margin-left:auto;min-height:44px;padding:10px 14px}body[data-screen=editor] .install-app{display:none}header{padding-top:env(safe-area-inset-top);height:calc(76px + env(safe-area-inset-top))}body[data-screen=home] .home-screen{height:calc(100dvh - 76px - env(safe-area-inset-top))}
main{height:calc(100dvh - 128px - env(safe-area-inset-top))}
@media(min-width:621px) and (max-width:900px){header{height:calc(62px + env(safe-area-inset-top))}body[data-screen=home] .home-screen{height:calc(100dvh - 62px - env(safe-area-inset-top))}main{height:calc(100dvh - 114px - env(safe-area-inset-top))}}
@media(max-width:620px){header{height:calc(64px + env(safe-area-inset-top))}body[data-screen=home] .home-screen{height:calc(100dvh - 64px - env(safe-area-inset-top))}.install-app{font-size:13px}body[data-screen=editor] main{height:calc(100dvh - 114px - env(safe-area-inset-top))}}
@media(display-mode:standalone){body{overscroll-behavior-y:none}.install-app{display:none!important}}