/* Icons exported from the repository's installed lucide-react package. */
select:not([multiple]){appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23656158%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22lucide%20lucide-chevron-down%22%20aria-hidden%3D%22true%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")!important;background-repeat:no-repeat!important;background-position:right 16px center!important;background-size:16px 16px!important;padding-right:44px!important;min-height:44px}
.download-action,#download-music,#download-reference{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;min-width:44px;text-decoration:none!important}
.download-action svg,#download-music svg,#download-reference svg{width:18px;height:18px;flex-shrink:0}
.download-action:hover,#download-music:hover,#download-reference:hover{color:var(--accent)}
#editor legend .reference-open{float:right;min-height:28px;padding:0 0 0 10px;font-size:10px;font-weight:400;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
#editor legend>b{line-height:28px}#editor legend{line-height:28px;margin-bottom:5px}
.soundtrack-panel{border-top:1px solid var(--line);margin:0 0 14px;font-size:11px}
.soundtrack-panel summary{cursor:pointer;min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:12px;list-style:none}
.soundtrack-panel summary::-webkit-details-marker{display:none}.soundtrack-panel summary:after{content:'+';font-size:18px}.soundtrack-panel[open] summary:after{content:'−'}
.soundtrack-panel summary span{margin-left:auto;color:var(--muted);font-size:10px}.soundtrack-body{padding:0 0 8px}
.soundtrack-body p{font-size:11px;line-height:1.5;margin:0 0 10px;color:var(--muted)}
.music-models{display:flex;gap:5px;margin-bottom:10px}.music-models button{flex:1;border:1px solid var(--line);padding:8px 5px;font-size:10px;min-height:44px}
.music-models button[aria-pressed=true]{background:var(--ink);color:var(--white);border-color:var(--ink)}
.music-volume{display:flex;align-items:center;gap:10px;font-size:10px}.music-volume input{margin:0!important;min-width:0;min-height:44px;flex:1}.music-volume output{width:30px;text-align:right;font-variant-numeric:tabular-nums}
.music-links{display:flex;align-items:center;justify-content:space-between;gap:10px}.music-links a{font-size:10px;min-height:44px}.soundtrack-body .music-note{font-size:10px}
.source-preview{display:block;width:100%;padding:0;background:none;cursor:zoom-in}.source-preview img{width:100%}
.compare-stage article{position:relative}.compare-stage .download-action{position:absolute;right:7px;bottom:7px;background:var(--white);border:1px solid var(--line);width:44px;height:44px;padding:0;margin:0}
.studio-page .compare-selection{display:grid;grid-template-columns:auto minmax(140px,1fr) auto minmax(135px,.55fr);gap:8px 12px}.compare-selection>#compare-pair-count{grid-column:1/-1}
.studio-page .compare-controls button[aria-pressed=true]{color:var(--accent)}.studio-page .compare-controls .solid[aria-pressed=true]{color:var(--white)}
@media(max-width:700px){#editor legend .reference-open{min-height:44px;font-size:11px}#editor legend>b{line-height:44px}#editor legend{line-height:44px}.studio-page .compare-selection{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.compare-selection label{grid-column:1}.compare-selection select{grid-column:2}.studio-page .compare-controls>div{flex-wrap:wrap}}

/* Icon license notices
ISC License

Copyright (c) 2026 Lucide Icons and Contributors

Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted, provided that the above
copyright notice and this permission notice appear in all copies.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

---

The following Lucide icons are derived from the Feather project:

airplay, alert-circle, alert-octagon, alert-triangle, aperture, arrow-down-circle, arrow-down-left, arrow-down-right, arrow-down, arrow-left-circle, arrow-left, arrow-right-circle, arrow-right, arrow-up-circle, arrow-up-left, arrow-up-right, arrow-up, at-sign, calendar, cast, check, chevron-down, chevron-left, chevron-right, chevron-up, chevrons-down, chevrons-left, chevrons-right, chevrons-up, circle, clipboard, clock, code, columns, command, compass, corner-down-left, corner-down-right, corner-left-down, corner-left-up, corner-right-down, corner-right-up, corner-up-left, corner-up-right, crosshair, database, divide-circle, divide-square, dollar-sign, download, external-link, feather, frown, hash, headphones, help-circle, info, italic, key, layout, life-buoy, link-2, link, loader, lock, log-in, log-out, maximize, meh, minimize, minimize-2, minus-circle, minus-square, minus, monitor, moon, more-horizontal, more-vertical, move, music, navigation-2, navigation, octagon, pause-circle, percent, plus-circle, plus-square, plus, power, radio, rss, search, server, share, shopping-bag, sidebar, smartphone, smile, square, table-2, tablet, target, terminal, trash-2, trash, triangle, tv, type, upload, x-circle, x-octagon, x-square, x, zoom-in, zoom-out

The MIT License (MIT) (for the icons listed above)

Copyright (c) 2013-present Cole Bemis

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

*/

/* Direct controls and an image-sized reference carousel. */
#editor .comparison-invitation{padding:0;border:0;background:none;margin:12px 0 0}
#editor #comparison-availability{margin:7px 0 0;line-height:1.5}
#editor .playback-toolbar{margin-bottom:16px}
.film-utilities{position:absolute;z-index:2;top:8px;right:8px;display:flex;gap:2px}
#editor #sound,.fullscreen-toggle,.compare-utilities .sound-toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;min-height:40px;padding:0;border:0;background:transparent;color:var(--ink)}
#editor .film-utilities button,#editor #sound{background:#f7f4ed80;backdrop-filter:blur(2px)}
#editor .film-utilities button:hover,#editor #sound:hover{background:#f7f4edb3}
.sound-toggle svg,.fullscreen-toggle svg{width:18px;height:18px;flex-shrink:0}
.sound-toggle .sound-icon-off{display:none}
.sound-toggle[aria-pressed=false] .sound-icon-off,.sound-toggle[data-blocked=true] .sound-icon-off{display:block}
.sound-toggle[aria-pressed=false] .sound-icon-on,.sound-toggle[data-blocked=true] .sound-icon-on{display:none}
.fullscreen-toggle .collapse-icon{display:none}.fullscreen-toggle[aria-pressed=true] .collapse-icon{display:block}.fullscreen-toggle[aria-pressed=true] .expand-icon{display:none}
.compare-utilities{display:flex;align-items:center;gap:2px;margin-left:auto}
.compare-utilities .close{margin-left:8px}
.reference-dialog{width:min(94vw,max(280px,calc((100svh - 220px)*.666667 + 32px)));max-width:94vw;max-height:96svh;padding:14px 16px 12px;overflow:auto}
.reference-dialog .modal-head{display:flex;align-items:center;gap:8px;margin:0 0 10px;position:sticky;top:-14px;background:var(--paper);z-index:2;padding:2px 0}
.reference-categories{display:flex;flex:1;min-width:0;gap:3px}.reference-categories button{flex:1;padding:8px 4px;font-size:12px;min-width:0;min-height:44px;border-bottom:2px solid transparent}
.reference-categories button[aria-pressed=true]{border-bottom-color:var(--accent);color:var(--accent);font-weight:600}
.reference-dialog .close{width:44px;height:44px;min-height:44px;flex-shrink:0;padding:0;font-size:24px}
.reference-heading{display:flex;align-items:center;gap:10px;margin:0 0 10px;min-height:44px}.reference-heading h2{font-size:26px;line-height:1.15;margin:0;flex:1}.reference-heading>span{font-size:11px;color:var(--muted);white-space:nowrap}
.reference-stage{position:relative;min-height:0}.reference-stage>img{display:block;width:100%;height:auto;background:none}.reference-stage>img[hidden]{display:none}
.reference-arrow{position:absolute;top:calc(50% - 22px);height:44px;width:44px;padding:0;border:1px solid var(--line);background:var(--paper);font-size:22px;opacity:.9}.reference-previous{left:8px}.reference-next{right:8px}.reference-arrow[hidden]{display:none}
.reference-caption{margin-top:10px;display:flex;align-items:start;gap:10px;justify-content:space-between}.reference-caption p{font-size:11px;line-height:1.45;color:var(--muted);margin:0;max-width:46ch}.reference-keyboard{font-size:10px;white-space:nowrap;color:var(--muted)}
#reference-error{padding:48px 15px;text-align:center;color:var(--accent)}

@media(max-width:700px){.reference-dialog{padding:10px 12px}.reference-dialog .modal-head{top:-10px}.reference-categories button{font-size:11px}.reference-heading h2{font-size:24px}.reference-keyboard{display:none}}

/* Fullscreen keeps the same media elements, playback position and controls. */
#editor .image-column.is-fullscreen{position:fixed;inset:0;width:100%;height:100%;padding:16px 24px;background:var(--paper);display:flex;flex-direction:column;align-items:center;--film-height:calc(100dvh - 110px)}
#editor .image-column.is-fullscreen .film-stage-shell{height:var(--film-height);width:100%;display:flex;justify-content:center}
#editor .image-column.is-fullscreen .axis-rail{display:none}
#editor .image-column.is-fullscreen .editorial-stage{height:100%;width:min(100%,calc(var(--film-height)*.666667))}
#editor .image-column.is-fullscreen .film-footer{margin:0;transform:none;width:min(100%,calc(var(--film-height)*.666667));height:78px}
#comparison-screen.is-fullscreen{box-sizing:border-box;width:100%;height:100%;overflow:auto;background:var(--paper);padding:16px clamp(16px,5vw,80px)}
#comparison-screen.is-fullscreen .compare-stage video{height:clamp(140px,calc(100dvh - 340px),1600px);width:100%;object-fit:contain;aspect-ratio:auto}
@media(max-width:700px){#editor .image-column.is-fullscreen{padding:10px 12px;--film-height:calc(100dvh - 108px)}.film-utilities{top:6px;right:6px}.film-utilities button,#editor #sound,.compare-utilities .sound-toggle,.compare-utilities .fullscreen-toggle{width:44px;height:44px;min-height:44px}.compare-dialog .modal-head>span{max-width:14ch;line-height:1.4}.compare-utilities .close{margin-left:0}}

/* A quiet shared transport and the same two browsing axes as the main film. */
#compare-dialog .compare-stage{position:relative}
#compare-dialog .compare-arrow{position:absolute;z-index:2;display:flex;align-items:center;justify-content:center;width:40px;height:40px;min-height:40px;padding:0;border:0;background:#f7f4edcf;backdrop-filter:blur(8px);color:var(--ink)}
#compare-dialog .compare-arrow:hover{background:var(--white)}
#compare-dialog .compare-arrow:disabled{opacity:.3;cursor:default}
.compare-arrow-left{left:8px;top:calc(50% - 20px)}.compare-arrow-right{right:8px;top:calc(50% - 20px)}.compare-arrow-up{top:48px;left:calc(50% - 20px)}.compare-arrow-down{bottom:8px;left:calc(50% - 20px)}
#compare-dialog .compare-controls .compare-transport{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;margin:10px 0 0}
#compare-dialog .compare-controls .transport-action{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:40px;height:40px;min-height:40px;padding:0;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--ink)}
#compare-dialog .compare-controls .transport-action:hover{background:var(--white);border-color:var(--ink)}
#compare-dialog .transport-action svg{width:18px;height:18px}
#compare-play[data-playing=false] .transport-pause,#compare-play[data-playing=true] .transport-play{display:none}
#compare-dialog #compare-timeline{flex:1;min-width:50px;width:0;appearance:none;-webkit-appearance:none;height:40px;min-height:40px;margin:0 4px;padding:0;background:transparent;accent-color:var(--ink)}
#compare-timeline::-webkit-slider-runnable-track{height:3px;border:0;border-radius:2px;background:var(--line)}
#compare-timeline::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;margin-top:-5px;background:var(--paper);border:2px solid var(--ink);border-radius:50%}
#compare-timeline::-moz-range-track{height:3px;border:0;border-radius:2px;background:var(--line)}
#compare-timeline::-moz-range-thumb{width:10px;height:10px;background:var(--paper);border:2px solid var(--ink);border-radius:50%}
#compare-dialog #compare-time{white-space:nowrap;font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}
#compare-dialog .compare-caption-row{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin:6px 0 0}
#compare-dialog .compare-caption-row p{margin:0;font-size:11px;line-height:1.5}
#compare-dialog .compare-keyboard{color:var(--muted);font-size:10px}.compare-keyboard span{padding:0 5px}
#compare-dialog #compare-context{color:var(--muted);font-size:11px;margin:8px 0}
@media(max-width:700px){#compare-dialog .compare-controls .transport-action,#compare-dialog .compare-arrow{width:44px;height:44px;min-height:44px}#compare-dialog .compare-controls .compare-transport{gap:5px}#compare-dialog #compare-time{font-size:9px}.compare-arrow-up{top:42px}.compare-arrow-up,.compare-arrow-down{left:calc(50% - 22px)}.compare-arrow-left{left:4px}.compare-arrow-right{right:4px}}

/* The paired frame follows the portrait, instead of letterboxing inside a wide column. */
#compare-dialog .compare-stage{width:min(100%,calc(clamp(220px,calc(100svh - 350px),640px)*1.333333 + 24px));margin-inline:auto}
#compare-dialog .compare-stage video{display:block;width:100%;height:auto;aspect-ratio:2/3;object-fit:contain;background:transparent}
#compare-dialog #comparison-screen.is-fullscreen .compare-stage{width:min(100%,calc(clamp(140px,calc(100dvh - 340px),1600px)*1.333333 + 24px))}
#compare-dialog #comparison-screen.is-fullscreen .compare-stage video{width:100%;height:auto;aspect-ratio:2/3;object-fit:contain;background:transparent}
#compare-dialog .compare-label{flex-wrap:wrap;gap:3px 8px;min-height:38px;align-content:center}
@media(max-width:700px){#compare-dialog .compare-stage{width:100%}#compare-dialog .compare-label{min-height:42px;align-content:start;flex-direction:column;align-items:start;gap:3px}}

/* Keep browsing controls clear of the two film frames and their downloads. */
#compare-dialog .compare-navigation{display:flex;justify-content:center;gap:28px;margin:10px 0 0}
#compare-dialog .compare-axis-group{display:flex;align-items:center;gap:8px}
#compare-dialog .compare-axis-group span{font-size:11px;min-width:42px;text-align:center;color:var(--muted)}
#compare-dialog .compare-navigation .compare-arrow{position:static;width:36px;height:36px;min-height:36px;background:transparent;backdrop-filter:none;border:1px solid var(--line);border-radius:50%}
#compare-dialog .compare-navigation .compare-arrow:hover{background:var(--white)}
.compare-frame{position:relative}.compare-frame canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:1}.compare-frame canvas[hidden]{display:none}.compare-frame .download-action{z-index:2}
@media(max-width:700px){#compare-dialog .compare-navigation{gap:16px}#compare-dialog .compare-navigation .compare-arrow{width:44px;height:44px;min-height:44px}#compare-dialog .compare-axis-group{gap:4px}}

.editorial-stage #motion-handoff{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;z-index:0}.editorial-stage #motion-handoff[hidden]{display:none}

/* Compact comparison workspace: navigation above, transport always in view. */
.studio-page #compare-dialog{box-sizing:border-box;width:min(1180px,96vw);height:min(1100px,96dvh);max-height:96dvh;padding:14px 22px;overflow:auto}
#compare-dialog #comparison-screen{height:100%;min-height:0;display:grid;grid-template-rows:auto auto minmax(120px,1fr) auto;gap:10px}
#compare-dialog .compare-header{display:flex;align-items:center;gap:16px;margin:0;min-height:40px}
#compare-dialog #compare-title{font-size:clamp(22px,2.3vw,30px);line-height:1.12;margin:0;letter-spacing:-.025em}
#compare-dialog .compare-utilities{flex-shrink:0}
#compare-dialog .compare-selection.compare-toolbar{display:grid;grid-template-columns:minmax(180px,1fr) 155px auto auto;align-items:center;gap:10px;margin:0;padding:0 0 10px;border-bottom:1px solid var(--line)}
#compare-dialog .compare-toolbar select{width:100%;min-width:0;min-height:40px;height:40px;font-size:12px;padding-block:8px}
#compare-dialog .compare-mode{margin:0;min-height:40px;box-sizing:border-box;align-items:center}
#compare-dialog .compare-mode button{min-height:32px;padding:5px 12px;font-size:12px}
#compare-dialog .compare-navigation{margin:0;gap:14px;justify-content:flex-end}
#compare-dialog .compare-navigation .compare-arrow{width:36px;height:36px;min-height:36px}
#compare-dialog .compare-axis-group{gap:5px}
#compare-dialog .compare-axis-group span{min-width:34px;font-size:10px}
#compare-dialog .compare-viewport{container-type:size;min-height:0;min-width:0;display:flex;justify-content:center;align-items:flex-start}
#compare-dialog .compare-viewport .compare-stage,#compare-dialog #comparison-screen.is-fullscreen .compare-stage{width:min(100%,calc((100cqh - 36px)*1.333333 + 20px));max-width:100%;margin:0;gap:20px}
#compare-dialog .compare-label{display:flex;align-items:center;align-content:center;flex-wrap:wrap;min-height:30px;margin:0 0 6px;gap:2px 8px}
#compare-dialog .compare-label strong{font-size:13px;line-height:1.15}
#compare-dialog .compare-label span{font-size:10px;line-height:1.2;margin:0}
#compare-dialog .compare-stage video,#compare-dialog #comparison-screen.is-fullscreen .compare-stage video{width:100%;height:auto;min-height:0;aspect-ratio:2/3;object-fit:contain}
#compare-dialog .compare-footer{position:sticky;bottom:0;z-index:3;background:var(--paper);padding:0;min-width:0}
#compare-dialog .compare-controls .compare-transport{margin:0;gap:8px}
#compare-dialog .compare-meta{display:flex;align-items:baseline;flex-wrap:wrap;gap:3px 14px;font-size:10px;line-height:1.4;color:var(--muted);margin-top:4px}
#compare-dialog #compare-context{font-size:10px;line-height:1.4;margin:0}
#compare-dialog .compare-details{margin-left:auto;font-size:10px;text-align:right}
#compare-dialog .compare-details summary{cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:3px 0}
#compare-dialog .compare-details[open]{flex-basis:100%;text-align:left}
#compare-dialog .compare-details .compare-note{margin:5px 0 0;max-width:85ch!important}
#compare-dialog #compare-status{margin:4px 0 0;font-size:11px}
#compare-dialog #comparison-screen.is-fullscreen{height:100dvh;box-sizing:border-box;padding:14px 22px;overflow:auto}
#compare-dialog .compare-stage[hidden],#compare-dialog .compare-controls[hidden]{display:none}
@media(max-width:1000px){
 #compare-dialog .compare-selection.compare-toolbar{grid-template-columns:minmax(170px,1fr) 155px auto;gap:8px}
 #compare-dialog .compare-navigation{grid-column:1/-1;justify-content:center}
}
@media(max-width:700px){
 .studio-page #compare-dialog{width:98vw;height:98dvh;max-height:98dvh;padding:10px 12px}
 #compare-dialog #comparison-screen{gap:8px}
 #compare-dialog #compare-title{font-size:22px;max-width:13ch}
 #compare-dialog .compare-selection.compare-toolbar{grid-template-columns:minmax(0,1fr) 132px;gap:8px;padding-bottom:8px}
 #compare-dialog #compare-selection{grid-column:1/-1}
 #compare-dialog .compare-mode{justify-self:end;width:auto}
 #compare-dialog .compare-mode button{min-height:36px;padding:4px 12px}
 #compare-dialog .compare-toolbar select{min-height:44px;height:44px;font-size:11px}
 #compare-dialog .compare-navigation{gap:18px}
 #compare-dialog .compare-navigation .compare-arrow{width:44px;height:44px;min-height:44px}
 #compare-dialog .compare-axis-group span{font-size:11px;min-width:38px}
 #compare-dialog .compare-viewport .compare-stage,#compare-dialog #comparison-screen.is-fullscreen .compare-stage{width:min(100%,calc((100cqh - 42px)*1.333333 + 10px));gap:10px}
 #compare-dialog .compare-label{min-height:36px;flex-direction:column;align-items:flex-start;justify-content:center;flex-wrap:nowrap;gap:3px}
 #compare-dialog .compare-label strong{font-size:11px}
 #compare-dialog .compare-label span{font-size:8px}
 #compare-dialog .compare-meta{font-size:9px;gap:3px 8px}
 #compare-dialog #compare-context{font-size:9px}
 #compare-dialog .compare-details{font-size:9px}
 #compare-dialog #comparison-screen.is-fullscreen{padding:10px 12px}
}