:root{color-scheme:dark;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:#050505;color:#f3f4f5}
*{box-sizing:border-box}
body{margin:0;min-width:320px}
button,input,select{font:inherit}
button{cursor:pointer}
button:disabled{opacity:.35;cursor:default}
[hidden]{display:none!important}
button:focus-visible,input:focus-visible,select:focus-visible,label:focus-visible{outline:2px solid #b2d4ff;outline-offset:2px}
.app{display:flex;flex-direction:column;height:100dvh;max-width:1500px;margin:0 auto;overflow:hidden}
.top{height:52px;min-height:52px;background:#080808;display:flex;align-items:center;justify-content:space-between;padding:0 13px;border-bottom:1px solid #252525;z-index:12}
.brand{display:flex;align-items:baseline;gap:8px;min-width:0}
.brand h1{font-size:1.04rem;font-weight:690;margin:0;letter-spacing:-.03em}
.brand span{font-size:.69rem;color:#848d99;white-space:nowrap;font-variant-numeric:tabular-nums}
.header-actions{display:flex;gap:7px}
.top-action{height:36px;padding:0 10px;background:#1a1a1a;border:1px solid #323232;border-radius:8px;color:#d8d8d8;font-size:.73rem;display:inline-flex;align-items:center;cursor:pointer}
.drop-zone{flex:1;min-height:250px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:15px;margin:16px;border:1px dashed #444;border-radius:14px;color:#b4b4b4;text-align:center;padding:24px;cursor:pointer}
.drop-zone.dragover{background:#102339;border-color:#86baff}
.drop-zone strong{font-size:1.5rem;color:white}
.drop-zone>span:last-child{max-width:280px;font-size:.85rem;line-height:1.5}
.upload-icon{display:grid;place-items:center;font-size:2.1rem;border:1px solid #555;border-radius:50%;width:70px;height:70px;color:#eee}
#editor{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.workspace{flex:1;min-height:0;display:flex;flex-direction:column}
.viewer{flex:none;background:#090909;border-bottom:1px solid #2c2c2c;padding:8px 10px 6px}
.video-wrap{position:relative;height:clamp(108px,18dvh,192px);background:#000;display:flex;justify-content:center;align-items:center;border-radius:5px;overflow:hidden}
.video-wrap video{width:100%;height:100%;object-fit:contain}
.video-overlay{position:absolute;inset:0;display:grid;place-items:center;background:#000c;color:#ddd;font-size:.81rem}
.transport{display:flex;align-items:center;gap:8px;margin:7px 0 0;min-height:43px}
.play{width:42px;height:42px;flex:none;border:none;background:#e9edf2;color:#050505;border-radius:50%;font-size:.95rem}
.seek-area{flex:1;min-width:0}
input[type=range]{accent-color:#94c6ff}
.seek-area input{width:100%;height:22px;display:block;margin:0;touch-action:pan-y}
.seek-labels{display:flex;justify-content:space-between;color:#a0a3a7;font-size:.67rem;font-variant-numeric:tabular-nums}
.speed-now{font-size:.85rem;color:#a6ceff;min-width:43px;text-align:right;font-variant-numeric:tabular-nums;font-weight:740}
.sound-toggle{height:39px;width:39px;flex:none;border:1px solid #444;border-radius:9px;color:#dfefff;background:#1a2632;font-size:1.1rem}
.sound-toggle.muted{text-decoration:line-through;color:#999;background:#151515}
.file-meta,#previewHint{display:none!important}
.app[data-preview="collapsed"] .video-wrap{display:none}
.app[data-preview="collapsed"] .viewer{padding-top:3px}
.speed-panel{display:flex;flex-direction:column;flex:1;min-height:0;background:#050505}
.graph-heading{flex:none;min-height:45px;padding:4px 10px 4px 14px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.graph-title{display:flex;flex-direction:column;gap:1px}
.graph-title strong{font-size:.9rem}
.graph-title span{font-size:.65rem;color:#969696}
.graph-actions{display:flex;gap:7px}
.subtle-button,.add-button{height:35px;border-radius:8px;padding:0 12px;font-size:.76rem;font-weight:650}
.subtle-button{color:#b9b9b9;border:1px solid #303030;background:#141414}
.add-button{color:#fff;background:#244263;border:1px solid #39638e}
.curve-container{position:relative;flex:1;min-height:140px;border-top:1px solid #292929;border-bottom:1px solid #292929;background:#090b0d;overflow:hidden;touch-action:none}
.curve-container svg{display:block;width:100%;height:100%;touch-action:none;user-select:none}
.curve-container .gridline{stroke:#292e32;stroke-width:1;vector-effect:non-scaling-stroke}
.curve-container .gridline.major{stroke:#4c555c}
.curve-path{fill:none;stroke:#9acaef;stroke-width:3;vector-effect:non-scaling-stroke;stroke-linejoin:round;pointer-events:none}
.graph-head{stroke:#fffc;stroke-width:1;vector-effect:non-scaling-stroke;pointer-events:none}
.key-hit{fill:transparent;cursor:grab}
.key-dot{fill:#1c3445;stroke:#c1dfff;stroke-width:3;vector-effect:non-scaling-stroke;cursor:grab}
.key-dot.selected{fill:#fff;stroke:#81c2ff;stroke-width:4}
.graph-y{position:absolute;top:0;bottom:0;left:4px;width:48px;font-size:.62rem;color:#a9b2b8;pointer-events:none;font-variant-numeric:tabular-nums;text-shadow:0 1px 3px #000}
.graph-y span{position:absolute;left:0;transform:translateY(-50%)}
.time-axis{height:17px;flex:none;position:relative;color:#8c9299;font-size:.62rem;overflow:hidden;font-variant-numeric:tabular-nums}
.time-axis span{position:absolute;white-space:nowrap;transform:translateX(-50%)}
.zoom-toolbar{display:flex;align-items:center;justify-content:space-between;gap:3px;flex:none;height:41px;padding:0 7px;border-top:1px solid #242424;border-bottom:1px solid #303030}
.zoom-set{display:flex;align-items:center;gap:3px}
.zoom-set b{font-size:.69rem;color:#94aabd;font-weight:780;width:11px;text-align:center}
.zoom-set output{min-width:28px;text-align:center;font-size:.69rem;color:#c9d9e8;font-variant-numeric:tabular-nums}
.zoom-toolbar button{height:32px;min-width:32px;padding:0 4px;border:1px solid #343434;border-radius:7px;background:#171717;color:#ececec;font-size:1.1rem;font-weight:600}
.zoom-toolbar .fit-button{font-size:.69rem;padding:0 6px;min-width:31px}
.axis-pan{flex:none;display:flex;flex-direction:column;padding:0 9px}
.pan-slider{width:100%;height:19px;margin:1px 0}
.graph-footer{display:none}
.inspector{flex:none;min-height:185px;background:#111214;border-top:1px solid #373b3f;padding:8px 11px 10px}
.inspector-top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:30px}
.selected-key{display:flex;align-items:baseline;gap:7px;min-width:0}
.selected-key strong{font-size:.82rem;white-space:nowrap}
.selected-key span{font-size:.73rem;color:#9ba4ae;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.delete-key{background:transparent;border:none;color:#df8d8d;font-size:.75rem;padding:4px 7px}
.inspector-tabs{display:flex;gap:3px;margin:7px 0 8px;padding:3px;background:#090a0b;border:1px solid #282828;border-radius:9px}
.inspector-tabs button{flex:1;min-height:34px;border:0;border-radius:6px;background:transparent;color:#aaa;font-size:.78rem;font-weight:600}
.inspector-tabs button.active{background:#303840;color:#f3f6fa}
.inspector-content{min-height:84px}
.property-row{display:flex;align-items:center;gap:9px}
.property-row label{font-size:.76rem;color:#c4c8cd;min-width:60px}
.unit{color:#7e858c}
.property-row input{height:39px;min-width:0;width:110px;background:#090a0b;color:#f7f8fa;border:1px solid #414b55;border-radius:7px;padding:0 8px;font-weight:750;font-variant-numeric:tabular-nums;font-size:.91rem}
.property-row output{margin-left:auto;color:#9eb5c9;font-variant-numeric:tabular-nums;font-size:.76rem}
.main-slider{display:block;width:100%;height:23px;margin:4px 0 2px}
.speed-tools{display:flex;align-items:center;gap:6px;min-width:0}
.presets{display:flex;gap:5px;flex:1;overflow-x:auto;scrollbar-width:none;min-width:0;padding-bottom:2px}
.presets::-webkit-scrollbar{display:none}
.presets button{flex:none;min-width:47px;min-height:35px;padding:0 7px;background:#202326;border:1px solid #3a3e42;color:#cbd1d5;border-radius:7px;font-size:.7rem;font-weight:650}
.presets button.active{background:#233c55;border-color:#5f9ed4;color:#fff}
.fine-controls{display:flex;align-items:center;gap:3px}
.fine-controls button{height:35px;width:31px;background:#282a2d;border:1px solid #444;color:#fff;border-radius:7px;font-size:1.12rem}
.fine-controls select{height:35px;max-width:75px;background:#1a1a1a;border:1px solid #444;color:#ddd;border-radius:6px;padding:0 1px;font-size:.69rem}
.property-hint{font-size:.72rem;color:#858c94;margin:7px 0 0;line-height:1.4}
.curve-label{display:block;color:#a2abb5;font-size:.77rem;margin:0 0 8px}
#curveType{width:100%;height:45px;background:#1c232a;border:1px solid #4b5560;color:#eee;border-radius:8px;padding:0 12px}
.bottom-nav{display:flex;align-items:stretch;height:calc(57px + env(safe-area-inset-bottom));min-height:calc(57px + env(safe-area-inset-bottom));padding:3px 8px calc(3px + env(safe-area-inset-bottom));border-top:1px solid #303030;background:#101113}
.bottom-nav button{flex:1;min-height:48px;border:none;border-radius:9px;color:#a4abb2;background:transparent;font-weight:700;font-size:.85rem}
.bottom-nav button.active{color:#eff7ff;background:#263b4f}
.bottom-nav button span{font-size:.72rem;font-variant-numeric:tabular-nums;font-weight:450;margin-left:5px;color:#91adc8}
.output{display:none;flex:1;overflow-y:auto;padding:20px 16px 30px;background:#080808}
.app[data-screen="export"] .output{display:block}
.app[data-screen="export"] .speed-panel{display:none}
.output-title{display:flex;align-items:flex-start;gap:10px;position:relative;padding-bottom:17px;border-bottom:1px solid #2b2b2b}
.output-title h2{font-size:1.15rem;margin:0}
.output-title p{margin:5px 0;color:#a1a1a1;font-size:.77rem}
.estimate{margin-left:auto;text-align:right}
.estimate small{display:block;color:#919191;font-size:.72rem}
.estimate strong{display:block;font-variant-numeric:tabular-nums;font-size:1.14rem;margin-top:5px}
.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 10px;margin-top:20px}
.settings-grid label{font-size:.75rem;color:#abb5be;min-width:0}
.settings-grid select{display:block;width:100%;min-width:0;margin-top:8px;height:49px;background:#1b1c1f;border:1px solid #35393e;border-radius:9px;color:#f7f7f7;padding:0 8px;font-size:.81rem}
.audio-option{display:flex;align-items:center;justify-content:space-between;gap:13px;border-top:1px solid #292929;margin-top:20px;padding:18px 0;cursor:pointer}
.audio-option strong{display:block;font-size:.85rem}
.audio-option small{display:block;margin-top:5px;color:#8e959d;font-size:.73rem;line-height:1.45}
.audio-option input{height:22px;width:22px;flex:none;accent-color:#8ec1f7}
.hint{font-size:.75rem;color:#969ba1;line-height:1.45}
.export-button{display:block;height:53px;width:100%;border-radius:9px;border:0;background:#bcdcfb;color:#10151b;font-weight:750;font-size:1rem;margin-top:20px}
.export-button:disabled{opacity:.4}
.cancel-button{display:block;height:43px;width:100%;margin-top:10px;border-radius:9px;border:1px solid #474747;background:#222;color:#eee}
.progress-area{display:flex;align-items:center;gap:10px;margin-top:14px}
.progress-area progress{flex:1;min-width:0;height:11px;accent-color:#94c2ef}
.progress-area span{font-size:.74rem;color:#d4d4d4}
.status{font-size:.77rem;margin:12px 0;white-space:pre-line;color:#aeb8c1}
.status.error{color:#ff9999}
.download{display:flex;align-items:center;justify-content:center;min-height:45px;border-radius:9px;background:#182b3d;border:1px solid #4f7395;color:#dcefff;text-decoration:none;font-size:.85rem}
.app[data-preview="collapsed"] .top-action[aria-pressed="true"]{background:#24394a}
@media(max-height:730px) and (max-width:850px){
  .video-wrap{height:clamp(88px,15dvh,125px)}
  .inspector{padding-top:5px;padding-bottom:6px;min-height:171px}
  .graph-heading{min-height:39px}
  .zoom-toolbar{height:36px}
  .zoom-toolbar button{height:30px}
  .inspector-tabs{margin:3px 0 6px}
}
@media(max-width:375px){
  .fine-controls select{max-width:62px}
  .fine-controls button{width:28px}
  .presets button{min-width:44px}
  .zoom-toolbar{padding:0 4px;gap:2px}
  .zoom-set{gap:2px}
  .zoom-set output{min-width:25px}
  .zoom-toolbar button{min-width:28px}
  .brand span{font-size:.65rem}
  .top-action{padding:0 7px}
}
@media(min-width:851px){
  .app{height:100dvh}
  .top{height:60px;min-height:60px;padding:0 20px}
  .brand h1{font-size:1.2rem}
  .workspace{display:grid;grid-template-columns:minmax(300px,0.85fr) minmax(460px,1.2fr);gap:12px;padding:12px;min-height:0}
  .viewer{border:1px solid #2d2d2d;border-radius:12px;padding:12px;align-self:start}
  .video-wrap{height:auto;aspect-ratio:16/9}
  .speed-panel{border:1px solid #313131;border-radius:12px;overflow:hidden;min-height:0}
  .curve-container{min-height:240px}
  .inspector{min-height:185px}
  .graph-heading{min-height:49px}
  .output{max-width:660px;width:100%;margin:auto}
  .bottom-nav{height:59px;min-height:59px;justify-content:center;gap:8px}
  .bottom-nav button{flex:0 0 220px}
  .app[data-screen="export"] .viewer{max-width:500px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* An editor focus mode, without extra panels or a tall scrolling form. */
.app[data-focus="true"] .viewer,
.app[data-focus="true"] .inspector{display:none}
.app[data-focus="true"] #focusButton{background:#263d56;border-color:#6093c2;color:#fff}
@media(max-width:850px) and (max-height:730px){
  .app[data-preview="open"]:not([data-focus="true"]) .speed-panel{overflow-y:auto;overscroll-behavior:contain}
  .app[data-preview="open"]:not([data-focus="true"]) .curve-container{flex:none;height:165px}
  .app[data-preview="open"]:not([data-focus="true"]) .inspector{flex:none}
}

.brand h1{white-space:nowrap;flex:none}
.app[data-focus="true"] #previewToggle{display:none!important}
@media(max-width:430px){.brand span{display:none}.top-action{min-width:57px;text-align:center;justify-content:center}}

/* Compact phones: scroll only the graph/editor region, never behind the bottom nav. */
@media(max-width:850px) and (max-height:620px){
  .speed-panel{overflow-y:auto;overscroll-behavior:contain}
  .speed-panel .curve-container{flex:none;height:190px;min-height:190px}
  .speed-panel .inspector{flex:none}
}

@media(max-width:850px) and (max-height:620px){
  .app[data-focus="true"] .speed-panel{overflow:hidden}
  .app[data-focus="true"] .speed-panel .curve-container{flex:1;min-height:140px;height:auto}
}

/* Preview sizing. All controls stay visible in fullscreen, including on phones. */
.preview-tools{position:absolute;right:8px;top:8px;z-index:4;display:flex;gap:6px}
.preview-tools button{height:40px;width:40px;border:1px solid #ffffff55;color:white;background:#000b;border-radius:9px;font-size:1.45rem;display:grid;place-items:center;backdrop-filter:blur(5px)}
.preview-tools button:active{background:#263e58}
.app[data-preview-size="large"] .viewer .video-wrap{height:clamp(235px,43dvh,560px)}
.viewer:fullscreen,.viewer.fullscreen-fallback{display:flex;flex-direction:column;justify-content:center;align-items:stretch;background:#000;padding:max(8px,env(safe-area-inset-top)) 10px max(8px,env(safe-area-inset-bottom));width:100%;height:100%;max-height:none;overflow:hidden}
.viewer:fullscreen .video-wrap,.viewer.fullscreen-fallback .video-wrap{height:auto;flex:1;max-height:calc(100% - 76px);min-height:0;border-radius:0}
.viewer:fullscreen .transport,.viewer.fullscreen-fallback .transport{width:100%;max-width:1100px;margin:12px auto 0;flex:none}
.viewer:fullscreen .file-meta,.viewer.fullscreen-fallback .file-meta{display:none!important}
.viewer.fullscreen-fallback{position:fixed;inset:0;z-index:1000;height:100dvh}
.viewer:fullscreen .preview-tools,.viewer.fullscreen-fallback .preview-tools{top:12px;right:12px}
.viewer:fullscreen .preview-tools button,.viewer.fullscreen-fallback .preview-tools button{width:48px;height:48px}
@media(max-width:850px) and (max-height:730px){
  .app[data-preview-size="large"][data-preview="open"]:not([data-focus="true"]) .video-wrap{height:clamp(235px,43dvh,520px)}
}

/* Compact visual easing picker. Its own scroll area never pushes the timeline off-screen. */
.curve-picker-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:none}
.curve-picker-heading .curve-label{margin:0;max-width:48%;font-size:.74rem}
.curve-picker-heading #curveType{width:52%;height:36px;padding:0 7px;font-size:.74rem}
.app[data-inspector="curve"] .inspector{display:flex;flex-direction:column;height:min(37dvh,300px);min-height:220px;max-height:320px}
.app[data-inspector="curve"] .inspector-content[data-property-panel="curve"]{display:flex;flex-direction:column;min-height:0;flex:1;gap:6px}
.curve-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;overflow-x:hidden;overflow-y:auto;flex:1;min-height:0;overscroll-behavior:contain;scrollbar-width:thin;padding:2px 1px}
.curve-gallery .curve-group-name{grid-column:1/-1;color:#8d9dad;font-size:.7rem;font-weight:700;padding:5px 2px 2px;position:sticky;top:0;background:#111214;z-index:1}
.curve-preset{min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px;justify-content:center;border:1px solid #363b42;border-radius:7px;background:#1b1e23;color:#b9c4ce;padding:4px 3px;min-height:71px;overflow:hidden}
.curve-preset svg{display:block;width:100%;height:43px}
.curve-preset span{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:100%;font-size:.65rem}
.curve-preset.active{background:#183149;color:white;border-color:#90c9ff}
.curve-preset:disabled{opacity:.4}
.curve-preview-line{fill:none;stroke:#98cbff;stroke-width:2.7;stroke-linecap:round;stroke-linejoin:round}
.curve-strength{display:flex;align-items:center;gap:9px;flex:none;min-height:34px;border-top:1px solid #30363e;font-size:.74rem;color:#bdcbd6}
.curve-strength label{white-space:nowrap}
.curve-strength input{flex:1;min-width:0;height:27px}
.curve-strength output{min-width:34px;text-align:right;font-variant-numeric:tabular-nums}
.progress-area{display:flex;flex-direction:column;align-items:stretch;gap:7px;margin-top:16px}
.progress-area progress{height:13px;width:100%;display:block;accent-color:#8bc1fc}
.progress-head,.progress-timing{display:flex;align-items:center;justify-content:space-between;gap:12px}
.progress-head strong{font-weight:620;font-size:.82rem;color:#e3edfa}
.progress-head output{font-size:.95rem;font-variant-numeric:tabular-nums;font-weight:750}
.progress-timing{font-size:.76rem;color:#aeb6c1}
.progress-timing strong{font-variant-numeric:tabular-nums;color:#f2f6fa;margin-left:5px}
.progress-frames{font-size:.7rem;color:#8d99a4;font-variant-numeric:tabular-nums}
@media(max-width:850px) and (max-height:720px){
 .app[data-inspector="curve"] .speed-panel{overflow-y:auto}
 .app[data-inspector="curve"] .curve-container{flex:none;height:165px}
 .app[data-inspector="curve"] .inspector{flex:none;height:245px;max-height:245px}
}
@media(min-width:851px){
 .curve-gallery{grid-template-columns:repeat(4,minmax(0,1fr))}
 .app[data-inspector="curve"] .inspector{height:290px;max-height:290px}
}

@media(max-width:850px) and (min-height:721px){
  .app[data-inspector="curve"] .inspector{height:min(30dvh,255px);min-height:210px;max-height:255px}
}

/* Curve selection is a dedicated, scrollable workspace, not a 110px strip
   inside the keyframe inspector. The graph retains its existing editor size. */
.app[data-inspector="curve"] .inspector{
  height:230px;max-height:230px;min-height:210px;
}
.app[data-inspector="curve"] .inspector-content[data-property-panel="curve"]{
  flex:1;display:flex;flex-direction:column;gap:7px;min-height:0;
}
.app[data-inspector="curve"] .inspector-content .curve-label{
  margin:0;color:#b6c2ce;
}
.app[data-inspector="curve"] #curveType{
  min-height:42px;height:42px;flex:none;width:100%;font-size:.81rem;
}
.open-curve-picker{
  display:flex;align-items:center;text-align:left;gap:10px;width:100%;
  min-height:64px;padding:6px 10px;border:1px solid #3e5c75;
  border-radius:10px;background:#182a3b;color:#eef6ff;
}
.open-curve-picker svg{width:94px;height:51px;flex:none}
.chosen-curve{display:flex;flex:1;min-width:0;flex-direction:column;gap:4px}
.chosen-curve strong{font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chosen-curve small{font-size:.69rem;color:#a8bed2}
.picker-chevron{font-size:1.55rem;color:#bbd5ed;padding:0 4px}
.open-curve-picker:disabled{opacity:.4}
.curve-picker:not([open]){display:none}
.curve-picker[open]{
  position:fixed;inset:0;display:flex;flex-direction:column;gap:0;
  overflow:hidden;width:min(800px,calc(100vw - 24px));max-width:none;
  height:min(90dvh,900px);max-height:none;margin:auto;padding:0;
  border:1px solid #40505f;border-radius:17px;
  background:#10151a;color:#eaf2fa;box-shadow:0 18px 70px #000b;
}
.curve-picker::backdrop{background:#000c}
.curve-picker-header{
  flex:none;display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:14px 16px;border-bottom:1px solid #33404d;background:#151d25;
}
.picker-heading{min-width:0}
.picker-eyebrow{color:#83a6c3;font-weight:700;font-size:.65rem;letter-spacing:.08em}
.picker-heading h2{margin:4px 0;font-size:1.13rem;font-weight:750}
.picker-heading p{margin:0;color:#9ab0c3;font-size:.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.picker-done{
  min-width:68px;min-height:43px;border:none;border-radius:9px;
  color:#09111a;background:#bfdeff;font-weight:760;font-size:.87rem;
}
.curve-picker .curve-gallery{
  flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;
  display:grid;align-content:start;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;padding:12px 13px 20px;
  scrollbar-width:thin;overscroll-behavior:contain;
}
.curve-picker .curve-group-name{
  grid-column:1/-1;padding:12px 2px 5px;
  font-size:.8rem;color:#a9bccb;font-weight:700;
  background:#10151a;top:0;position:sticky;z-index:2;
}
.curve-picker .curve-preset{
  min-height:125px;padding:9px;gap:6px;border-radius:12px;
  border:1px solid #394b5c;background:#18212a;
}
.curve-picker .curve-preset svg{width:100%;height:82px;max-width:200px}
.curve-picker .curve-preset span{font-size:.81rem;font-weight:650}
.curve-picker .curve-preset.active{
  background:#1b3b58;border:2px solid #96ccff;color:#fff;
}
.curve-picker .curve-preview-line{stroke-width:3;stroke:#a0d2ff}
.curve-picker-footer{
  flex:none;padding:12px 16px max(13px,env(safe-area-inset-bottom));
  border-top:1px solid #3b4c5c;background:#171f28;
}
.curve-picker-footer .curve-strength{
  min-height:44px;border:none;gap:12px;
  font-size:.81rem;font-weight:650;
}
.curve-picker-footer .curve-strength input{height:35px}
.curve-picker-footer .curve-strength output{min-width:42px;font-size:.84rem}
@media(max-width:850px){
  .curve-picker[open]{
    width:100vw;height:100dvh;max-height:100dvh;
    margin:0;border:0;border-radius:0;
  }
  .curve-picker-header{
    padding:calc(12px + env(safe-area-inset-top)) 15px 12px;
  }
  .app[data-inspector="curve"] .inspector{
    height:220px;max-height:220px;min-height:205px;
  }
}
@media(min-width:600px){
  .curve-picker .curve-gallery{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;padding:15px 18px 22px;
  }
  .curve-picker .curve-preset{min-height:148px}
  .curve-picker .curve-preset svg{height:94px}
}
@media(max-width:850px) and (max-height:720px){
  .app[data-inspector="curve"] .inspector{
    height:210px;min-height:210px;max-height:210px;
  }
}

/* Live editing: keep the REAL timeline uncovered while the curve picker
   occupies a resizable bottom sheet. No modal backdrop or inert graph. */
#app[data-curve-picker="open"] .viewer,
#app[data-curve-picker="open"] .inspector,
#app[data-curve-picker="open"] .bottom-nav,
#app[data-curve-picker="open"] .zoom-toolbar,
#app[data-curve-picker="open"] .axis-pan,
#app[data-curve-picker="open"] .graph-actions{display:none!important}
#app[data-curve-picker="open"] .workspace{
  display:flex!important;flex-direction:column;gap:0!important;
  padding:0 0 var(--curve-sheet-height,54dvh)!important;
  min-height:0;flex:1;
}
#app[data-curve-picker="open"] .speed-panel{
  display:flex!important;flex-direction:column;flex:1;width:100%;
  min-height:0;overflow:hidden!important;border:0;border-radius:0;
}
#app[data-curve-picker="open"] .graph-heading{min-height:44px;flex:none}
#app[data-curve-picker="open"] .curve-container{
  display:block;flex:1!important;height:auto!important;
  min-height:95px!important;overflow:hidden;
}
#app[data-curve-picker="open"] .time-axis{flex:none}
#app .selected-segment{
  fill:none;stroke:#ffd28b;stroke-width:4;stroke-linecap:round;
  stroke-linejoin:round;vector-effect:non-scaling-stroke;
  pointer-events:none;display:none;
}
#app[data-curve-picker="open"] .selected-segment{display:block}
#app .curve-picker[open]{
  position:fixed!important;inset:auto 0 0!important;
  z-index:60;display:flex;flex-direction:column;
  width:min(800px,100vw)!important;
  height:var(--curve-sheet-height,54dvh)!important;
  max-height:none!important;max-width:none;
  margin:0 auto!important;
  padding:0;border:1px solid #445b70;
  border-bottom:0;border-radius:18px 18px 0 0;
  box-shadow:0 -8px 36px #000b;
  background:#10151a;
}
#app .curve-picker-handle{
  display:flex;flex:none;align-items:center;justify-content:center;
  height:23px;min-height:23px;cursor:ns-resize;touch-action:none;
}
#app .curve-picker-handle span{
  width:48px;height:5px;border-radius:999px;background:#748b9d;
}
#app .curve-picker-header{
  padding:3px 14px 11px;
}
#app .curve-picker .curve-gallery{
  grid-template-columns:repeat(2,minmax(0,1fr));
  padding:8px 12px 18px;gap:8px;min-height:0;
}
#app .curve-picker .curve-preset{
  min-height:95px;padding:6px;gap:2px;
}
#app .curve-picker .curve-preset svg{height:62px}
#app .curve-picker .curve-preset span{font-size:.74rem}
#app .curve-picker-footer{
  padding:8px 14px max(10px,env(safe-area-inset-bottom));
}
@media(min-width:600px){
  #app .curve-picker .curve-gallery{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}
@media(max-width:850px){
  #app .curve-picker[open]{
    width:100vw!important;border-left:0;border-right:0;
  }
}

/* Always-visible export progress: native <progress> is unreliable on some
   Android browsers, so render the actual encoded percentage explicitly. */
.progress-area .encoding-progress{
  position:relative;display:block;width:100%;height:22px;min-height:22px;
  border:1px solid #66788b;border-radius:8px;background:#1d2630;
  overflow:hidden;flex:none;isolation:isolate;
}
.encoding-progress-fill{
  position:absolute;inset:0 auto 0 0;width:0%;background:#83bdff;
  border-radius:6px 0 0 6px;transition:width 180ms linear;
}
.encoding-progress-activity{display:none}
.encoding-progress.is-unknown .encoding-progress-activity{
  display:block;position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 0%,transparent 30%,#8fbaff75 50%,
    transparent 70%,transparent 100%);
  background-size:180% 100%;animation:encoding-activity 1.7s linear infinite;
}
@keyframes encoding-activity{
  from{background-position:180% 0}
  to{background-position:-180% 0}
}
.encoding-progress.is-done .encoding-progress-fill{background:#add7ff}
@media(prefers-reduced-motion:reduce){
  .encoding-progress-activity{animation:none!important;background:#6ea9e94d!important}
  .encoding-progress-fill{transition:none}
}

/* Give an actionable recovery path when heavy interpolation stops producing
   output for an extended period. No claim that the worker is definitively hung. */
.fast-export-button{
  width:100%;display:block;min-height:48px;margin-top:12px;
  padding:10px 14px;border-radius:10px;border:1px solid #88b7e2;
  background:#1d3b57;color:#e6f4ff;font-weight:700;font-size:.83rem;
  text-align:center;line-height:1.4;
}
.fast-export-button:active{background:#28547e}
#renderInfo{color:#aab8c6}