html,body,#root{height:100%;margin:0}:root{--bg:#050506;--panel:#080809;--panel-2:#060607;--ink:#e8e6e1;--muted:#56585c;--line:#161618;--accent:#c9c2b4;--accent-text:#050506;--radius:2px;--ui-font:"General Sans", Geist, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--mono-font:"IBM Plex Mono", "JetBrains Mono", "SF Mono", "Cascadia Code", ui-monospace, monospace}*{box-sizing:border-box}body{background:var(--bg);color:var(--ink);font:14px/1.4 var(--ui-font);-webkit-font-smoothing:antialiased;margin:0}.mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum", "zero";font-family:var(--mono-font);font-size:12px}button,select,input{font:inherit}button,select,input[type=color]{border-radius:var(--radius)}button:focus-visible,select:focus-visible,input:focus-visible,.thumb:focus-visible{outline:1px solid var(--accent);outline-offset:1px}button{border:1px solid var(--line);color:var(--ink);cursor:pointer;background:0 0}button:hover:not(:disabled){background:var(--ink);border-color:var(--ink);color:var(--bg)}button:disabled{color:var(--muted);cursor:default;opacity:.45}.app{background:var(--bg);grid-template:"topbar sidebar""stage sidebar"1fr"timeline sidebar"/1fr 280px;gap:1px;height:100vh;padding:10px;display:grid}.topbar{background:var(--panel);border:1px solid var(--line);grid-area:topbar;align-items:center;gap:12px;padding:10px 14px;display:flex}.brand{letter-spacing:.14em;text-transform:uppercase;font-size:13px;font-weight:600}.spacer{flex:1}.preset-select{border-left:1px solid var(--line);align-items:center;gap:8px;padding-left:12px;display:flex}.preset-select span{color:var(--muted);letter-spacing:.12em;text-transform:uppercase;font-size:10px}.preset-select select{border:1px solid var(--line);color:var(--ink);font-family:var(--mono-font);font-variant-numeric:tabular-nums;cursor:pointer;background:0 0;padding:5px 8px;font-size:11px}.preset-select select option{background:var(--panel)}.export-btn{letter-spacing:.1em;text-transform:uppercase;padding:8px 16px;font-size:11px;font-weight:600}.export-btn:disabled{opacity:.45}.stage{background:linear-gradient(var(--line), var(--line)) 0 50% / 100% 1px no-repeat, linear-gradient(90deg, var(--line), var(--line)) 50% 0 / 1px 100% no-repeat, var(--panel);border:1px solid var(--line);flex-direction:column;grid-area:stage;justify-content:center;align-items:center;gap:8px;min-width:0;min-height:0;padding:20px 20px 12px;display:flex;overflow:hidden}.editor-area{flex:1;justify-content:center;align-items:center;width:100%;min-width:0;min-height:0;display:flex;overflow:hidden}.editor{touch-action:none;flex-shrink:0;position:relative}.editor--grab{cursor:grab}.editor--grab:active{cursor:grabbing}.crop-ghost{z-index:0;opacity:.22;pointer-events:none;outline:1px dashed color-mix(in srgb, var(--accent) 45%, transparent);outline-offset:-1px;-webkit-user-select:none;user-select:none;position:absolute}.crop-canvas{z-index:1;border:1px solid var(--line);display:block;position:absolute;inset:0}.res-badge{z-index:2;border:1px solid var(--line);pointer-events:none;background:#050506eb;gap:1px;min-width:74px;padding:5px 7px;display:grid;position:absolute;bottom:8px;right:8px}.res-badge__label{color:var(--muted);letter-spacing:.16em;text-transform:uppercase;font-size:8px;font-weight:600;line-height:1}.res-badge__value{color:var(--ink);letter-spacing:.04em;font-size:11px;line-height:1.1}.stage-hint{letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0;font-size:10px}.stage-hint--hidden{visibility:hidden}.dropzone{border:1px dashed var(--line);background:var(--panel-2);cursor:pointer;max-width:100%;height:min(60vh,520px);color:var(--muted);place-items:center;display:grid}.dropzone strong{color:var(--ink);letter-spacing:.12em;text-transform:uppercase;margin-bottom:4px;font-size:12px;font-weight:600;display:block}.dropzone:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)}.dropzone:hover strong{color:var(--bg)}.timeline{background:var(--panel);border:1px solid var(--line);grid-area:timeline;padding:12px 14px}.timeline__controls{border-bottom:1px solid var(--line);align-items:center;gap:16px;margin-bottom:10px;padding-bottom:10px;display:flex}.play{background:var(--accent);border-color:var(--accent);width:36px;height:36px;color:var(--accent-text);flex-shrink:0;font-size:12px}.play:hover{color:var(--accent);border-color:var(--accent);background:0 0}.count{color:var(--muted)}.thumbs{scrollbar-width:thin;scrollbar-color:var(--line) transparent;gap:7px;padding:7px 0;display:flex;overflow-x:auto}.thumbs::-webkit-scrollbar{height:4px}.thumbs::-webkit-scrollbar-thumb{background:var(--line)}.thumb{cursor:grab;border:1px solid var(--line);background:var(--panel-2);flex-shrink:0;width:64px;height:64px;position:relative;overflow:hidden}.thumb:before,.thumb:after{content:"";z-index:2;pointer-events:none;background:repeating-linear-gradient(90deg, color-mix(in srgb, var(--ink) 22%, transparent) 0 1px, transparent 1px 8px);height:4px;position:absolute;left:0;right:0}.thumb:before{top:0}.thumb:after{bottom:0}.thumb:active{cursor:grabbing}.thumb--selected{border-color:var(--accent)}.thumb--selected:before,.thumb--selected:after{background:repeating-linear-gradient(90deg, color-mix(in srgb, var(--accent) 60%, transparent) 0 1px, transparent 1px 8px)}.thumb img{object-fit:cover;pointer-events:none;width:100%;height:100%}.thumb__index{border:1px solid var(--line);color:var(--ink);font-size:10px;font-family:var(--mono-font);font-variant-numeric:tabular-nums;background:#050506e6;padding:1px 4px;position:absolute;bottom:4px;left:4px}.thumb__remove{width:18px;height:18px;color:var(--ink);opacity:0;background:#050506eb;font-size:13px;line-height:1;position:absolute;top:3px;right:3px}.thumb:hover .thumb__remove{opacity:1}.add-thumb{border:1px dashed var(--line);background:var(--panel-2);width:64px;height:64px;color:var(--muted);flex-shrink:0;font-size:20px}.add-thumb:hover{border-color:var(--ink)}.thumb-menu{z-index:100;background:var(--panel);border:1px solid var(--line);min-width:140px;padding:4px;position:fixed}.thumb-menu button{letter-spacing:.1em;text-transform:uppercase;text-align:left;width:100%;color:var(--muted);background:0 0;border:0;padding:6px 10px;font-size:10px;display:block}.thumb-menu button:hover{background:var(--ink);color:var(--bg)}.sidebar{background:var(--panel);border:1px solid var(--line);grid-area:sidebar;padding:0 16px 16px;overflow-y:auto}.sidebar h3{border-top:1px solid var(--line);text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin:18px -16px 10px;padding:10px 16px 0;font-size:11px;font-weight:600}.sidebar h3:first-child{border-top:0;margin-top:0}.field{margin-bottom:14px}.field>label{color:var(--muted);letter-spacing:.12em;text-transform:uppercase;margin-bottom:5px;font-size:10px;display:block}.field.small{flex-direction:column;gap:2px;display:flex}.dur-row{align-items:center;gap:10px;display:flex}.dur-row input[type=range]{flex:1}.dur-row input[type=color]{border:1px solid var(--line);cursor:pointer;background:0 0;width:36px;height:28px;padding:0}.dur-row .mono{text-align:right;min-width:46px}.seg{border:1px solid var(--line);display:flex}.seg button{border:0;border-right:1px solid var(--line);letter-spacing:.1em;text-transform:capitalize;color:var(--muted);background:0 0;flex:1;padding:6px 8px;font-size:11px}.seg button:last-child{border-right:0}.seg button.on{background:var(--accent);color:var(--accent-text);font-weight:600}.seg button:disabled{opacity:.45}.btn-ghost{letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:4px 10px;font-size:10px}.btn-ghost:hover{color:var(--bg)}.hint{color:var(--muted);margin:6px 0 0;font-size:11px;line-height:1.4}.error{color:var(--ink);border:1px solid var(--accent);background:0 0;padding:8px 10px;font-size:12px}input[type=range]{appearance:none;background:linear-gradient(var(--line), var(--line)) center / 100% 1px no-repeat;cursor:pointer;height:17px}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--accent);border:1px solid var(--accent);border-radius:0;width:3px;height:17px}input[type=range]::-moz-range-thumb{background:var(--accent);border:1px solid var(--accent);border-radius:0;width:3px;height:17px}input[type=range]::-moz-range-track{background:var(--line);height:1px}@media (width<=900px){.app{grid-template:"topbar""stage"minmax(340px,58svh)"timeline""sidebar"/1fr;height:auto;min-height:100svh;overflow-x:hidden}.topbar{flex-wrap:wrap}.preset-select{margin-left:auto}.sidebar{overflow:visible}.sidebar h3:first-child{margin-top:0}.timeline__controls{flex-wrap:wrap}.timeline__controls .field{flex:220px;margin-bottom:0}.timeline__controls .field.small{flex:none}}@media (width<=640px){body{font-size:13px}.app{grid-template-rows:auto minmax(300px,52svh) auto auto;padding:6px}.topbar{gap:8px;padding:10px}.brand{flex:100%}.preset-select{border-left:0;flex:100%;margin-left:0;padding-left:0}.preset-select select,.export-btn{min-height:42px}.preset-select select{flex:1;min-width:0}.export-btn{flex:100%}.topbar .spacer{display:none}.stage{padding:12px 10px 10px}.dropzone{width:100%;height:auto;min-height:230px}.stage-hint{text-align:center;font-size:9px}.timeline,.sidebar{padding-inline:10px}.timeline__controls{gap:10px}.play{width:42px;height:42px}.timeline__controls .spacer{display:none}.timeline__controls .field,.timeline__controls .field.small{flex:100%}.count{width:100%}.thumbs{gap:8px;padding-bottom:10px}.thumb,.add-thumb{width:72px;height:72px}.thumb__remove{opacity:1;width:24px;height:24px}.sidebar h3{margin-inline:-10px;padding-inline:10px}.dur-row{gap:8px}.dur-row input[type=range]{min-width:0}.seg button,.btn-ghost,.thumb-menu button{min-height:40px}}