:root{color-scheme:light dark;--background: #ffffff;--surface: #f3f3f7;--text: #1b1b1f;--muted: #55555c;--accent: #3b4cca;--accent-text: #ffffff;--danger: #b3261e;--rule: #d6d6dc;--clip-0: #4c5bd0;--clip-1: #1c7c54;--clip-2: #a8541f;--clip-text: #ffffff;font-family:system-ui,sans-serif;line-height:1.5}@media(prefers-color-scheme:dark){:root{--background: #121316;--surface: #1d1e23;--text: #e6e6ea;--muted: #a8a8b0;--accent: #aab4ff;--accent-text: #121316;--danger: #ffb4ab;--rule: #34353b;--clip-0: #6a78e0;--clip-1: #3aa377;--clip-2: #d07a3e;--clip-text: #101114}}html{overscroll-behavior-y:none}body{margin:0;background:var(--background);color:var(--text);touch-action:manipulation}a{color:var(--accent)}main{box-sizing:border-box;max-width:80rem;margin:0 auto;padding:1rem}main>p,main>ul.problems{max-width:70ch}header.site,footer.site{box-sizing:border-box;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1rem;max-width:80rem;margin:0 auto;padding:.5rem 1rem}footer.site{justify-content:flex-start;gap:.5rem 1.5rem}header.site .brand{font-size:1.25rem;font-weight:700;text-decoration:none}nav{display:flex;flex-wrap:wrap;gap:.5rem}button{min-height:44px;padding:0 1rem;border:2px solid var(--accent);border-radius:.5rem;background:transparent;color:var(--text);font:inherit;cursor:pointer}a.button{display:inline-flex;align-items:center;box-sizing:border-box;min-height:44px;padding:0 1rem;border:2px solid var(--accent);border-radius:.5rem;color:var(--text);text-decoration:none}a.button.primary{background:var(--accent);color:var(--accent-text)}button:disabled{opacity:.5;cursor:default}button.primary,button[aria-pressed=true]{background:var(--accent);color:var(--accent-text)}button.danger{border-color:var(--danger);color:var(--danger)}:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.hint,.facts{color:var(--muted)}.buttons{display:flex;flex-wrap:wrap;gap:.5rem}ul.projects{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:1rem;padding:0;list-style:none}li.project{display:flex;flex-direction:column;gap:.25rem;padding:.75rem;border:1px solid var(--rule);border-radius:.75rem;background:var(--surface)}li.project.damaged{border-color:var(--danger)}li.project a.open{display:flex;flex-direction:column;gap:.5rem;color:inherit;text-decoration:none}li.project .name{font-weight:700;overflow-wrap:anywhere}li.project .actions{display:flex;gap:.5rem;margin-block-start:.5rem}.thumb{display:block;box-sizing:border-box;width:100%;aspect-ratio:16 / 9;object-fit:contain;border-radius:.5rem;background:#000}ul.problems{padding-inline-start:1.25rem;color:var(--danger)}progress{width:100%}dialog{box-sizing:border-box;max-width:calc(30rem + 2px);padding:1rem 1rem 0;max-height:calc(100vh - 1.5rem);max-height:calc(100dvh - 1.5rem);overflow:auto;border:1px solid var(--rule);border-radius:.75rem;background:var(--background);color:var(--text)}dialog::backdrop{background:#00000080}dialog .dialog-body{padding-block-end:1rem}dialog h2{margin-block-start:0}dialog label{display:block}dialog input[type=text]{box-sizing:border-box;width:100%;min-height:44px;margin-block:.25rem 1rem;padding:0 .5rem;border:2px solid var(--rule);border-radius:.5rem;background:var(--surface);color:inherit;font:inherit}ol.clips,ul.sources{padding-inline-start:1.5rem}.editor{display:flex;flex-direction:column;gap:.75rem;margin-block:1rem}.preview{position:relative;box-sizing:border-box;align-self:center;width:min(100%,calc(var(--aspect, 1.78) * 45vh));max-width:100%;overflow:hidden;border-radius:.5rem;background:#000}.preview video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}.preview video{z-index:0}.preview video[data-active=true]{z-index:1}.preview .empty{position:absolute;inset:0;display:grid;place-items:center;margin:0;padding:1rem;color:#ddd;text-align:center}.transport{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5rem 1.5rem}button.icon{display:inline-grid;place-items:center;min-width:44px;padding:0}.timecode{font-variant-numeric:tabular-nums;font-family:ui-monospace,monospace}.timeline-block{display:flex;flex-direction:column;gap:.25rem}.timeline-block .zoom{display:flex;justify-content:flex-end;gap:.25rem}.timeline{position:relative;overflow:hidden;border-radius:.5rem;background:var(--surface);cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}.timeline .ruler{position:absolute;inset:0 0 auto;height:var(--ruler, 28px);border-bottom:1px solid var(--rule);pointer-events:none}.timeline .tick{position:absolute;top:0;height:100%;padding-inline-start:4px;border-inline-start:1px solid var(--muted);color:var(--muted);font-size:.7rem;line-height:var(--ruler, 28px);white-space:nowrap}.timeline .tick.major{border-inline-start-color:var(--text)}.timeline .extent{position:absolute;border-radius:.4rem;background:var(--rule);opacity:.5;pointer-events:none}.timeline .clip{position:absolute;box-sizing:border-box;overflow:hidden;border-radius:.4rem;background:var(--clip-0);color:var(--clip-text);font-size:.75rem;cursor:pointer}.timeline .clip.s1{background:var(--clip-1)}.timeline .clip.s2{background:var(--clip-2)}.timeline .clip .strip{position:absolute;inset-block-start:0;inset-inline-start:0;display:block;pointer-events:none}.timeline .clip .label{position:absolute;inset-block-start:6px;inset-inline-start:6px;padding:0 5px;border-radius:3px;background:#0009;color:#fff;white-space:nowrap;pointer-events:none}.timeline .clip.selected{outline:3px solid var(--text);outline-offset:-3px}.timeline .clip.moving{z-index:3;cursor:grabbing;box-shadow:0 4px 14px #00000080;opacity:.92}.timeline .playhead{position:absolute;inset-block:0;inset-inline-start:50%;width:2px;margin-inline-start:-1px;background:var(--danger);pointer-events:none}.project-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem}.project-bar h1{flex:1;margin:0;font-size:1.25rem;overflow-wrap:anywhere}.timeline .clip .handle{position:absolute;inset-block:0;width:12px;background:var(--text);pointer-events:none}.timeline .clip .handle:after{content:"";position:absolute;inset-block:30%;inset-inline-start:50%;width:2px;margin-inline-start:-1px;background:var(--background)}.timeline .clip .handle.start{inset-inline-start:0}.timeline .clip .handle.end{inset-inline-end:0}.timeline .range{position:absolute;bottom:0;background:color-mix(in srgb,var(--danger) 25%,transparent);border-inline:2px solid var(--danger);pointer-events:none}.timeline .range-handle{position:absolute;inset-block:30%;width:8px;border-radius:3px;background:var(--danger)}.timeline .range-handle.start{inset-inline-start:-4px}.timeline .range-handle.end{inset-inline-end:-4px}.timeline .guide{position:absolute;inset-block:0;width:2px;margin-inline-start:-1px;background:var(--accent);pointer-events:none}.actions{display:flex;flex-wrap:wrap;gap:.5rem}.notice{min-height:1.5em;margin:0;color:var(--danger)}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}canvas.captions{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none}.notice.ok{color:var(--muted)}.timeline .cue{position:absolute;box-sizing:border-box;overflow:hidden;padding-inline:4px;border-radius:4px;background:var(--text);color:var(--background);font-size:.65rem;line-height:16px;white-space:nowrap;text-overflow:ellipsis;cursor:pointer}.timeline .cue.movable{cursor:grab}.timeline .cue.moving{z-index:2;cursor:grabbing;box-shadow:0 3px 10px #00000073;outline:2px solid var(--accent)}.timeline .cue:focus-visible{outline:2px solid var(--accent)}form.dialog-form{display:grid;grid-template-columns:minmax(0,1fr);gap:.75rem;min-width:min(24rem,80vw)}form.dialog-form .field{display:flex;flex-direction:column;gap:.25rem}form.dialog-form textarea{box-sizing:border-box;width:100%;padding:.5rem;border:2px solid var(--rule);border-radius:.5rem;background:var(--surface);color:inherit;font:inherit;resize:vertical}form.dialog-form .count{align-self:flex-end;color:var(--muted);font-size:.8rem}form.dialog-form fieldset{margin:0;padding:.5rem .75rem;border:1px solid var(--rule);border-radius:.5rem}form.dialog-form .choice{display:flex;flex-wrap:wrap;gap:.25rem 1rem}form.dialog-form .choice label{display:inline-flex;align-items:center;gap:.35rem;min-height:32px}form.dialog-form .stepper{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-block:.25rem}form.dialog-form .stepper>:first-child{flex:1 1 9rem}form.dialog-form .stepper-buttons{display:inline-flex;gap:.5rem}.timeline .audio-bar{position:absolute;box-sizing:border-box;overflow:hidden;padding-inline:4px;border-radius:4px;background:var(--clip-1);color:var(--clip-text);font-size:.65rem;line-height:24px;white-space:nowrap;text-overflow:ellipsis;cursor:grab}.timeline .audio-bar.moving{z-index:2;cursor:grabbing;box-shadow:0 3px 10px #00000073;outline:2px solid var(--text)}.timeline .audio-bar.voiceover{background:var(--clip-2)}.timeline .audio-bar .wave{position:absolute;inset-block-start:0;inset-inline-start:0;display:block;pointer-events:none}.timeline .audio-bar [dir=auto]{position:relative;padding:0 4px;border-radius:3px;background:#0000008c;color:#fff}.timeline .audio-bar:focus-visible{outline:2px solid var(--accent)}form.dialog-form .volume{display:flex;flex-direction:column;gap:.5rem}form.dialog-form .volume label{display:flex;flex-direction:column;gap:.25rem}form.dialog-form .volume input[type=range]{width:100%}form.dialog-form .presets{display:flex;flex-wrap:wrap;gap:.5rem}.recording{align-self:center;color:var(--danger);font-variant-numeric:tabular-nums}.meter-wrap{align-self:center;display:inline-flex;flex-wrap:wrap;align-items:center;gap:.25rem .5rem}.meter{display:inline-block;inline-size:8rem;block-size:.75rem;overflow:hidden;border:1px solid var(--rule);border-radius:.375rem}.meter-bar{display:block;block-size:100%;background:var(--accent)}.meter[data-state=unavailable]{opacity:.5}form.dialog-form .buttons.test{align-items:center}div.dialog-form textarea{box-sizing:border-box;width:100%;padding:.5rem;border:2px solid var(--rule);border-radius:.5rem;background:var(--surface);color:inherit;font:.75rem ui-monospace,monospace}form.dialog-form progress,div.dialog-form progress{width:100%}div.dialog-form{display:flex;flex-direction:column;gap:.75rem;min-width:min(24rem,80vw)}footer.site .update{margin-inline-start:auto}form.dialog-form>.buttons:last-child{position:sticky;inset-block-end:0;z-index:1;padding-block:.5rem;background:var(--background)}@media(max-height:760px){dialog{padding:.75rem 1rem 0}dialog .dialog-body{padding-block-end:.75rem}dialog h2{margin-block-end:.5rem;font-size:1.2rem}form.dialog-form{gap:.5rem}form.dialog-form fieldset{padding-block:.25rem .375rem}form.dialog-form textarea{height:4.25rem}form.dialog-form .choice label{min-height:28px}}@media(pointer:coarse){form.dialog-form .choice label{min-height:40px}form.dialog-form .volume input[type=range]{min-height:44px}.timeline .tick{font-size:.75rem}.timeline .cue,.timeline .audio-bar{font-size:.8rem}}.picture,.tools{display:contents}.tool-tabs{display:none}.editor>.notice{order:1}@media(max-width:700px),(pointer:coarse)and (max-height:520px){.tool-tabs{display:flex;gap:.25rem}.tool-tabs button{flex:1 1 0;min-width:0;padding:0 .25rem}.tool-tabs button[aria-selected=true]{background:var(--accent);color:var(--accent-text)}.editor[data-tab=sound] .clip-tools,.editor:not([data-tab=sound]) .sound-tools{display:none}.editor[data-tab=edit] .clip-tools>button[data-tab]:not([data-tab=edit]),.editor[data-tab=trim] .clip-tools>button[data-tab]:not([data-tab=trim]),.editor[data-tab=text] .clip-tools>button[data-tab]:not([data-tab=text]){display:none}}@media(max-width:700px)and (orientation:portrait),(pointer:coarse)and (max-height:520px)and (orientation:landscape){html[data-view=project] #app{display:flex;flex-direction:column}html[data-view=project] main{order:1;align-self:stretch;margin-inline:0;padding:.5rem}html[data-view=project] header.site{order:2}html[data-view=project] footer.site{order:3}.shell{min-height:calc(100vh - 1rem);min-height:calc(100dvh - 1rem)}.project-bar{display:grid;align-items:center;gap:0 .75rem}.project-bar>a{display:inline-flex;align-items:center;min-height:44px}.project-bar h1{display:flex;align-items:center;gap:.5rem;min-width:0;font-size:1.1rem}.project-bar h1 .name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.project-bar h1 button{flex:none}.project-bar>.buttons{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.project-bar>.buttons>button{flex:none;padding-inline:.625rem}.editor>.picture{display:grid;place-items:center;min-height:0;container-type:size;border-radius:.5rem;background:#000}@supports (width: 1cqw){.picture .preview{width:min(100cqw,calc(100cqh * var(--aspect, 1.78)))}}.editor .transport,.editor .timeline-block{display:contents}.editor[data-recording=true] .sound-tools{flex-wrap:wrap;overflow-x:visible}.editor[data-recording=true] .sound-tools>button:not([data-testid=record]){display:none}.sound-tools .meter{inline-size:5rem}}@media(max-width:700px)and (orientation:portrait){.shell{display:flex;flex-direction:column;gap:.375rem}.project-bar{grid-template-columns:auto minmax(0,1fr)}.project-bar>.buttons{grid-column:1 / -1}.tools .actions{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.tools .actions>button{flex:none}.shell>.editor{display:grid;flex:1 0 auto;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:minmax(96px,1fr) auto auto auto auto auto auto;gap:.375rem;margin:0}.editor>.picture{grid-column:1 / -1;grid-row:1}.transport>.buttons{grid-column:1 / -1;grid-row:2;justify-content:center}.transport .timecode{grid-column:1;grid-row:3;font-size:.8rem}.timeline-block .zoom{grid-column:2;grid-row:3}.timeline-block .timeline{grid-column:1 / -1;grid-row:4}.editor>.tool-tabs{grid-column:1 / -1;grid-row:5}.editor>.tools{display:block;grid-column:1 / -1;grid-row:6;min-width:0}.editor>.notice{grid-column:1 / -1;grid-row:7;min-height:0}.editor>p[role=alert]{grid-column:1 / -1;grid-row:8}}@media(pointer:coarse)and (max-height:520px)and (orientation:landscape){.shell{display:grid;grid-template-columns:44px minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto minmax(44px,1fr) auto auto;gap:.25rem .5rem}.project-bar{grid-column:1 / -1;grid-row:1;grid-template-columns:auto fit-content(18rem) minmax(0,1fr)}.shell>.editor{display:contents}.editor>.picture{grid-column:1 / 3;grid-row:2 / 5}.transport .timecode,.shell>[role=status],.shell>[role=alert],.shell>.problems,.editor>.notice,.editor>p[role=alert]{grid-column:1 / 3;grid-row:2 / 5;z-index:3;margin:.25rem}.transport .timecode{align-self:end;justify-self:start;padding:0 .375rem;border-radius:.25rem;background:#000000a6;color:#fff;font-size:.75rem}.shell>[role=status],.shell>[role=alert],.shell>.problems,.editor>.notice,.editor>p[role=alert]{align-self:start;justify-self:center;max-width:calc(100% - .5rem);min-height:0;padding:0}.shell>[role=status]:not(:empty),.shell>[role=alert],.shell>.problems,.editor>.notice:not(:empty),.editor>p[role=alert]{padding:.25rem .5rem;border-radius:.375rem;background:var(--background)}.editor>.tool-tabs{grid-column:3;grid-row:2}.editor>.tools{display:block;grid-column:3;grid-row:3;contain:size;min-width:0;overflow-y:auto}.tools .actions>button{padding-inline:.625rem}.transport>.buttons{grid-column:3;grid-row:4;justify-content:center}.timeline-block .zoom{flex-direction:column;grid-column:1;grid-row:5;justify-content:center}.timeline-block .timeline{grid-column:2 / -1;grid-row:5}}
