@font-face{font-family:ABC Areal Semi Mono;src:url(/assets/ABCArealSemiMonoVariable-BnWpNPhx.woff2)format("woff2");font-weight:100 900;font-style:normal;font-display:swap}:root{--bg:#fafafa;--ink:#2b2b2b;--accent:#444;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;font-family:ABC Areal Semi Mono,ui-monospace,SF Mono,Menlo,monospace;font-size:13px;font-weight:400;line-height:1.4}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg)}button{font:inherit;color:inherit}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.visually-hidden{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.app{background:var(--bg);flex-direction:column;height:100dvh;display:flex;position:relative;overflow:hidden}.app:after{content:"";z-index:1;background:color-mix(in srgb, var(--bg) 89%, #000);opacity:0;pointer-events:none;transition:opacity .12s;position:absolute;inset:0}.app.is-dragging:after{opacity:.55}.app[data-tone=dark]{color:#f2f2f2}.app[data-tone=dark] .privacy-note{color:#ffffffb8}.app[data-tone=dark] .dock{--slab-edge:#0f0f0f;box-shadow:0 0 0 1px #ffffff14, var(--slab-shadow)}.stage{flex:1;justify-content:center;align-items:center;min-height:0;display:flex;position:relative;overflow:hidden}.stage-video{object-fit:contain;pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.stage-canvas{z-index:1;background:var(--bg);flex:none;display:block;position:relative}.stage-canvas.is-pickable{cursor:pointer}.stage-canvas:focus-visible{outline:none}.drop-label{z-index:2;pointer-events:none;margin:0;font-size:15px;font-weight:500;position:absolute}.dock-area{z-index:2;padding:0 24px max(14px, env(safe-area-inset-bottom));flex-direction:column;flex:none;align-items:center;display:flex;position:relative}.dock{--dock-bg:#2e2e2e;--dock-ink:#fff;--dock-muted:#ffffff9e;--dock-line:#ffffff29;--slab-top:#363636;--slab-bottom:#2a2a2a;--slab-edge:#1b1b1b;--slab-edge-size:4px;--slab-shadow:inset 0 1px 0 #ffffff17, inset 0 -1px 0 #00000040, 0 var(--slab-edge-size) 0 var(--slab-edge), 0 calc(var(--slab-edge-size) + 2px) 10px #0000002e, 0 22px 44px -18px #00000080;width:min(100%,1120px);margin-bottom:var(--slab-edge-size);background:linear-gradient(180deg, var(--slab-top), var(--slab-bottom));color:var(--dock-ink);box-shadow:var(--slab-shadow);border-radius:18px;padding:14px 20px 16px;animation:.28s cubic-bezier(.2,.8,.2,1) dock-in;position:relative}.dock[data-mode=empty]{padding-top:14px}@keyframes dock-in{0%{opacity:0;transform:translateY(8px)}}.dock :focus-visible{outline-offset:2px;outline:2px solid #ffffffd9}.dock-row{align-items:center;gap:16px;min-height:36px;display:flex}.dock-transport{align-items:center;gap:14px;display:flex}.dock-time{font-variant-numeric:tabular-nums;color:var(--dock-muted);letter-spacing:.01em;font-size:13px}.dock-time-current{color:var(--dock-ink)}.dock-time-sep{opacity:.6;margin:0 7px}.dock-hint,.dock-status{flex:1;align-items:center;gap:10px;min-width:0;margin:0;font-size:13px;display:flex}.dock-hint strong{font-weight:500}.dock-sub{color:var(--dock-muted)}.dock-pct{color:var(--dock-muted);font-variant-numeric:tabular-nums;margin-left:-4px}.dock-message{color:#ffd9a8;flex:1;align-items:center;gap:8px;min-width:0;margin:0;font-size:12px;display:flex}.dock-message .icon{flex:none;width:16px;height:16px}.dock-in-app{font-size:13px;line-height:1.35}a.dock-button{text-decoration:none}.dock-row>.dock-message:not(:first-child){justify-content:center}.dock-transport+.dock-button{margin-left:auto}.icon{flex:none;display:block}.play-button,.dock-button,.dock-link,.swatch-button{--edge:2px;--face-top:#fff;--face-bottom:#e9e9e9;--edge-color:#a9a9a9;--highlight:#ffffffe6;--ink-on-face:var(--dock-bg);background:linear-gradient(180deg, var(--face-top), var(--face-bottom));color:var(--ink-on-face);box-shadow:inset 0 1px 0 var(--highlight), inset 0 -1px 0 #0000000f, 0 var(--edge) 0 var(--edge-color), 0 calc(var(--edge) + 2px) 6px #00000059;cursor:pointer;border:0;transition:transform 90ms,box-shadow 90ms,filter .12s}.play-button:hover,.dock-button:hover,.dock-link:hover,.swatch-button:hover{filter:brightness(1.04)}.play-button:active,.dock-button:active,.dock-link:active,.swatch-button:active,.swatch-button[aria-expanded=true]{transform:translateY(var(--edge));background:linear-gradient(180deg, var(--face-bottom), var(--face-top));box-shadow:inset 0 2px 4px #00000038, inset 0 -1px 0 var(--highlight), 0 0 0 var(--edge-color), 0 1px 2px #0000004d}.dock-button.is-ghost,.dock-link{--face-top:#3d3d3d;--face-bottom:#2b2b2b;--edge-color:#161616;--highlight:#ffffff1a;--ink-on-face:var(--dock-ink)}.play-button{border-radius:10px;place-items:center;width:36px;height:36px;padding:0;display:grid}.play-button .icon{width:18px;height:18px}.play-button:disabled{--edge:0px;box-shadow:none;cursor:default;filter:none;background:#ffffff40;transform:none}.dock-button{border-radius:10px;flex:none;align-items:center;gap:8px;height:36px;margin-left:auto;padding:0 16px 0 13px;font-size:13px;font-weight:500;display:inline-flex}.dock-button .icon{width:18px;height:18px}.dock-button.is-ghost{padding:0 16px}.dock-actions{flex:none;align-items:center;gap:8px;min-width:0;margin-left:auto;display:flex}.dock-row .dock-actions>*{margin-left:0}.swatch-dot{border-radius:5px;width:18px;height:18px;box-shadow:inset 0 0 0 1px #00000026,inset 0 1px 2px #00000026}.dock-popover{flex:none;position:relative}.swatch-button{border-radius:10px;place-items:center;width:36px;height:36px;padding:0;display:grid}.swatch-button:disabled{opacity:.5;cursor:default}.popover-panel{z-index:2;--slab-edge-size:3px;background:linear-gradient(180deg, var(--slab-top), var(--slab-bottom));width:max-content;max-width:calc(100vw - 32px);box-shadow:var(--slab-shadow);border-radius:14px;flex-direction:column;gap:14px;padding:12px;animation:.16s cubic-bezier(.2,.8,.2,1) palette-in;display:flex;position:absolute;bottom:calc(100% + 16px);right:-10px}@keyframes palette-in{0%{opacity:0;transform:translateY(6px)scale(.98)}}.popover-section{flex-direction:column;gap:8px;display:flex}.popover-label{color:#ffffffc7;font-size:12px;font-weight:600}.collapsible{opacity:0;grid-template-rows:0fr;margin-bottom:-14px;transition:grid-template-rows .22s cubic-bezier(.2,.8,.2,1),opacity .16s;display:grid}.collapsible.is-open{opacity:1;grid-template-rows:1fr}.collapsible-inner{min-height:0;overflow:hidden}.collapsible-content{margin:0 -2px;padding:2px 2px 14px}.bg-options{gap:10px;display:flex}.popover-panel .panel-toggle{margin:0;display:flex}.popover-panel .panel-toggle .format-option{white-space:nowrap;flex:1 0 auto;padding:0 12px}.ratio-option{justify-content:center;align-items:center;gap:4px;display:inline-flex}.ratio-option .icon{width:16px;height:16px}.address-input{height:32px;color:var(--dock-ink);font:inherit;background:#00000052;border:0;border-radius:8px;outline:none;padding:0 10px;font-size:12px;box-shadow:inset 0 1px 3px #0009,0 1px #ffffff12}.address-input::placeholder{color:#ffffff4d}.address-input:focus-visible{box-shadow:inset 0 1px 3px #0009,0 0 0 2px #ffffff59}.bg-option{cursor:pointer;border:0;border-radius:7px;width:26px;height:26px;padding:0;transition:transform 90ms,box-shadow 90ms;position:relative;box-shadow:inset 0 0 0 1px #0000001f,inset 0 1px #ffffff80,0 2px #00000073}.bg-option:active{transform:translateY(2px);box-shadow:inset 0 0 0 1px #0000001f,inset 0 2px 3px #00000040}.bg-option[aria-pressed=true],.bg-option[data-active]{box-shadow:inset 0 0 0 1px #0000001f, 0 0 0 2px var(--dock-bg), 0 0 0 4px var(--dock-ink)}.bg-option.is-custom{background:conic-gradient(#ff5e5e,#ffd25e,#5eff8b,#5ed8ff,#8a5eff,#ff5ed2,#ff5e5e)}.bg-option.is-custom input{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;inset:0}.format-toggle{background:#00000052;border-radius:10px;flex:none;gap:2px;height:38px;margin-top:2px;margin-left:14px;padding:3px;display:inline-flex;box-shadow:inset 0 1px 3px #0009,0 1px #ffffff12}.format-item{display:inline-flex;position:relative}.tooltip{z-index:3;color:var(--dock-ink);white-space:nowrap;opacity:0;pointer-events:none;background:linear-gradient(#3a3a3a,#232323);border-radius:8px;padding:6px 10px;font-size:12px;font-weight:500;transition:opacity .12s,transform .12s;position:absolute;bottom:calc(100% + 12px);left:50%;transform:translate(-50%,4px);box-shadow:inset 0 1px #ffffff1a,0 2px #121212,0 6px 14px #00000059}.tooltip:after{content:"";border:5px solid #0000;border-top-color:#232323;margin-left:-5px;position:absolute;top:100%;left:50%}.format-item:hover .tooltip,.format-option:focus-visible+.tooltip{opacity:1;transform:translate(-50%)}.format-option{min-width:46px;color:var(--dock-muted);letter-spacing:.02em;cursor:pointer;background:0 0;border:0;border-radius:7px;padding:0 10px;font-size:12px;font-weight:500;transition:color .12s,background-color .12s,box-shadow .12s}.format-option:hover:not([aria-checked=true]):not([aria-disabled]){color:var(--dock-ink)}.format-option[aria-checked=true]{color:var(--dock-bg);background:linear-gradient(#fff,#e9e9e9);box-shadow:inset 0 1px #ffffffe6,0 1.5px #a9a9a9,0 2px 4px #00000059}.format-option[aria-disabled]{color:#ffffff47;cursor:not-allowed}.timeline{cursor:pointer;touch-action:none;align-items:center;height:20px;margin:-2px 0 8px;display:flex;position:relative}.timeline.is-progress{cursor:default}.timeline:focus-visible{outline:none}.timeline-track{background:#00000052;border-radius:999px;width:100%;height:6px;transition:height .14s;position:relative;box-shadow:inset 0 1px 2px #0009,0 1px #ffffff12}.timeline:hover .timeline-track,.timeline:focus-visible .timeline-track{height:7px}.timeline-fill{border-radius:inherit;background:linear-gradient(#fff,#dcdcdc);height:100%;box-shadow:inset 0 -1px #0000001f}.is-progress .timeline-fill{background-image:linear-gradient(90deg,#ffffffbf,#fff 40%,#ffffffbf);background-size:200% 100%;transition:width .16s linear;animation:1.4s linear infinite shimmer}@keyframes shimmer{to{background-position:-200% 0}}.timeline-thumb{z-index:2;pointer-events:none;background:linear-gradient(#fff,#e2e2e2);border-radius:50%;width:16px;height:16px;margin:-8px 0 0 -8px;transition:transform .14s;position:absolute;top:50%;box-shadow:inset 0 1px #ffffffe6,0 2px #9a9a9a,0 3px 6px #0006}.timeline:hover .timeline-thumb,.timeline:focus-visible .timeline-thumb,.timeline:active .timeline-thumb{transform:scale(1.2)}.timeline:focus-visible .timeline-thumb{box-shadow:0 0 0 4px #ffffff40,0 1px 4px #00000059}.timeline-track .timeline-fill{top:0;bottom:0}.trim-out{border-radius:inherit;pointer-events:none;background:#00000073;position:absolute;top:0;bottom:0}.trim-handle{z-index:1;cursor:ew-resize;touch-action:none;background:linear-gradient(#fff,#e2e2e2);border-radius:3px;width:6px;height:22px;margin:-11px 0 0 -3px;transition:transform .12s,box-shadow .12s;position:absolute;top:50%;box-shadow:inset 0 1px #ffffffe6,0 2px #9a9a9a,0 3px 6px #0006}.trim-handle:before{content:"";position:absolute;inset:-4px -8px}.trim-handle:after{content:"";background:#00000059;border-radius:1px;width:1.5px;margin-left:-.75px;position:absolute;top:7px;bottom:7px;left:50%}.trim-handle:hover,.trim-handle:active{transform:scaleY(1.12)}.trim-handle:focus-visible{outline:none;box-shadow:0 0 0 3px #ffffff4d,0 1px 3px #0006}.dock-trim{border-left:1px solid var(--dock-line);color:var(--dock-muted);align-items:center;gap:8px;padding-left:14px;font-size:12px;display:inline-flex}.dock-link{--edge:1.5px;border-radius:6px;padding:3px 8px;font-size:12px}.privacy-note{color:#8a8a8a;text-align:center;margin:12px 0 0;font-size:11px}.privacy-note svg{vertical-align:-1px;margin-right:6px;display:inline-block}.credit{white-space:nowrap}.credit a{color:inherit;text-decoration:underline;-webkit-text-decoration-color:color-mix(in srgb, currentColor 40%, transparent);text-decoration-color:color-mix(in srgb, currentColor 40%, transparent);text-underline-offset:2px;transition:color .12s,text-decoration-color .12s}.credit a:hover,.credit a:focus-visible{color:#2e2e2e;text-decoration-color:currentColor}.app[data-tone=dark] .credit a:hover,.app[data-tone=dark] .credit a:focus-visible{color:#fff}.file-input{opacity:0;pointer-events:none;border:0;width:1px;height:1px;margin:0;padding:0;position:fixed;top:50%;left:50%}.confetti{z-index:10;pointer-events:none;position:fixed;inset:0;overflow:hidden}.confetti span{will-change:transform, opacity;position:absolute}.spinner{border:2px solid #ffffff40;border-top-color:#fff;border-radius:50%;width:14px;height:14px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (width<=640px){.dock-area{padding:0 12px max(12px, env(safe-area-inset-bottom))}.dock{border-radius:16px;padding:12px 14px 14px}.dock-sub,.dock-trim{display:none}.bg-options{flex-wrap:wrap;width:196px}.panel-toggle .format-option{min-width:0;padding:0 6px}}@media (width<=760px){.dock-trim{display:none}.dock[data-mode=ready] .dock-button{justify-content:center;width:36px;padding:0}.dock[data-mode=ready] .dock-button-label{display:none}}.only-touch{display:none}@media (pointer:coarse){.only-pointer{display:none}.only-touch{display:inline}}@media (width<=520px){.dock-row,.dock-transport{gap:10px}.dock-time{font-size:12px}.dock-time-sep{margin:0 4px}.dock-time{display:none}.dock-popover{position:static}.popover-panel{width:auto;max-width:none;left:0;right:0}.bg-options{width:auto}.dock-actions{gap:6px}.format-option{min-width:38px;padding:0 8px}}@media (width<=400px){.dock-area{padding:0 8px max(10px, env(safe-area-inset-bottom))}.dock{padding:10px 10px 12px}.dock-row{gap:6px}.dock-actions{gap:2px}.format-option{min-width:34px;padding:0 6px}}@media (prefers-reduced-motion:reduce){.dock,.is-progress .timeline-fill,.spinner{animation:none}.collapsible{transition:none}}