:root{color-scheme:dark;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#0a0d12;color:#f1f4f7;font-size:16px;--muted:#a3afbd;--accent:#90e6e0;--line:#27313e}
*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button,a,input{touch-action:manipulation}button{border:1px solid var(--line);border-radius:8px;padding:.65rem .9rem;min-height:44px;background:#151b24;color:inherit;cursor:pointer}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:4px}a{color:var(--accent);text-underline-offset:4px}p{line-height:1.55}strong{font-weight:650}.primary{background:var(--accent);border-color:var(--accent);color:#081615;font-weight:650}.quiet{background:transparent}.masthead{display:flex;justify-content:space-between;gap:1rem;max-width:960px;margin:auto;padding:1.8rem 1.4rem;font-size:.8rem;letter-spacing:.14em}.tag{color:var(--muted);font-size:.75rem;letter-spacing:.08em}#setup{max-width:900px;margin:0 auto;padding:1.5rem 1.4rem 3rem}h1{font-size:clamp(2.4rem,7vw,4.8rem);font-weight:600;letter-spacing:-.04em;line-height:1.05;margin:0 0 1.4rem}h1 span{color:var(--accent)}.intro{font-size:1.15rem;margin-bottom:1.5rem}#setup>p{max-width:660px;color:var(--muted)}.files{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.7rem 0 1rem}.file-card{background:#10161e;border:1px solid var(--line);border-radius:12px;padding:1.2rem;min-width:0}.file-card label{display:grid;gap:.4rem;margin-bottom:1rem}.number{color:var(--accent);font-size:.8rem;letter-spacing:.1em}.filename{font-size:.85rem;color:var(--muted);overflow-wrap:anywhere}.file-card input{width:100%;font-size:.85rem}.file-card input::file-selector-button{border:1px solid #425165;background:#1c2736;color:#fff;border-radius:6px;padding:.6rem;margin-right:.5rem;cursor:pointer}.file-info{font-size:.875rem;color:var(--muted);overflow-wrap:anywhere;min-height:1.4rem}.file-card a{font-size:.875rem}.status{font-size:.875rem;color:var(--muted);margin:.7rem 0;min-height:1.35rem}.status.error{color:#ffb3a9}.help{font-size:.875rem}.screen{position:relative;min-height:220px;background:#000;overflow:hidden;flex:1;width:100%}.screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;pointer-events:none}.screen video.active{opacity:1}.mode-label{position:absolute;top:.8rem;left:.8rem;background:#0a0d12bb;border:1px solid #ffffff30;border-radius:20px;padding:.35rem .75rem;font-size:.8rem;pointer-events:none}.player-head{display:flex;align-items:center;justify-content:space-between;padding:.6rem 1rem;gap:1rem;font-size:.8rem;letter-spacing:.1em}.player-head button{font-size:.8rem;letter-spacing:0}.control-area{padding:.75rem max(1rem,env(safe-area-inset-right)) max(.7rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left));background:#0a0d12}.transport,.view-controls{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}#clock{margin-left:auto;font-size:.875rem;font-variant-numeric:tabular-nums}#seek{width:100%;margin:.8rem 0;accent-color:var(--accent);height:24px}.view-controls button{font-size:.875rem}.view-controls button[aria-pressed=true]{border-color:var(--accent);color:var(--accent);background:#112927}#switch-count{margin-left:auto;color:var(--muted);font-size:.8rem;font-variant-numeric:tabular-nums}#cinema:not([hidden]){display:flex;flex-direction:column;height:100dvh;min-height:430px}body.playing .masthead{display:none}.overlay{position:absolute;inset:0;background:#0005;display:grid;place-items:center}.overlay[hidden]{display:none}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:600px){.files{grid-template-columns:1fr}.masthead{padding:1rem}.tag{letter-spacing:0}#setup{padding:1rem}.file-card{padding:1rem}#fullscreen{font-size:.8rem}.transport button{padding:.5rem .65rem}#clock{font-size:.8rem}}
@media(orientation:landscape) and (max-height:600px){#cinema:not([hidden]){min-height:0}.player-head{display:none}.control-area{padding:.35rem .8rem}.transport button,.view-controls button{min-height:34px;padding:.3rem .65rem;font-size:.8rem}#seek{height:16px;margin:.35rem 0}.control-area .status{margin:.3rem 0;font-size:.8rem}.screen{min-height:100px}.mode-label{top:.5rem;left:.5rem}}

#setup{max-width:760px;padding-top:.6rem}#setup h1{font-size:clamp(1.9rem,5vw,2.8rem);margin-bottom:.5rem}#setup .intro{margin:.5rem 0 1rem}.film-preview{display:block;width:100%;height:auto;max-height:32dvh;object-fit:cover;border-radius:10px;border:1px solid var(--line)}.other-files{margin-top:1.4rem;border-top:1px solid var(--line);padding-top:1rem;color:var(--muted)}.other-files summary{cursor:pointer;min-height:44px;padding:.5rem 0}.other-files>p{font-size:.875rem}.other-files .files{margin-top:.5rem}#setup .help{max-width:590px;margin-bottom:0}#start{min-width:180px}

#player-status:empty{display:none}

/* Controls overlay the film and never consume picture space. */
body.playing{background:#000;overflow:hidden}
body.playing #app{height:100dvh}
#cinema:not([hidden]){position:relative;display:block;width:100%;height:100vh;height:100dvh;min-height:0;overflow:hidden;background:#000;outline:none}
#screen{position:absolute;inset:0;width:100%;height:100%;min-height:0;cursor:pointer;touch-action:manipulation}
.poster{position:absolute;inset:0;display:block;pointer-events:none}
.poster img{display:block;width:100%;height:100%;object-fit:contain}
.player-chrome{position:absolute;z-index:3;left:0;right:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,visibility .18s ease}
.controls-visible .player-chrome{opacity:1;visibility:visible;pointer-events:auto}
.player-head{top:0;display:flex;padding:max(.65rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) 2.2rem max(1rem,env(safe-area-inset-left));background:linear-gradient(#0009,transparent);font-size:.75rem;letter-spacing:.07em;align-items:center;text-shadow:0 1px 4px #000}
.control-area{bottom:0;padding:2rem max(.7rem,env(safe-area-inset-right)) max(.25rem,env(safe-area-inset-bottom)) max(.7rem,env(safe-area-inset-left));background:linear-gradient(transparent,#000b);color:#fff}
.transport{display:flex;flex-wrap:nowrap;gap:.15rem;align-items:center}
.transport .icon-button{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;min-height:44px;padding:10px;border:0;border-radius:6px;background:transparent;color:#fff;font-size:1rem;box-shadow:none}
.icon-button svg{display:block;width:21px;height:21px;pointer-events:none}
.icon-button:hover{background:#ffffff14}
#clock{margin:0 auto 0 .35rem;font-size:.75rem;white-space:nowrap;text-shadow:0 1px 4px #000}
#seek{display:block;width:100%;height:22px;margin:0;appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer;accent-color:#fff;--progress:0%}
#seek::-webkit-slider-runnable-track{height:3px;border-radius:3px;background:linear-gradient(to right,#fff var(--progress),#ffffff59 var(--progress))}
#seek::-moz-range-track{height:3px;border-radius:3px;background:#ffffff59}
#seek::-moz-range-progress{height:3px;background:#fff}
#seek::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:11px;height:11px;margin-top:-4px;border:0;border-radius:50%;background:#fff}
#seek::-moz-range-thumb{width:11px;height:11px;border:0;border-radius:50%;background:#fff}
.overlay{z-index:2;background:#0002}
.center-play{display:grid;place-items:center;width:58px;height:58px;padding:16px;border:1px solid #ffffff65;border-radius:50%;background:#0009;box-shadow:0 2px 14px #0005;color:#fff}
.center-play svg{width:25px;height:25px;margin-left:3px;pointer-events:none}
.player-message{position:absolute;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;padding:.6rem .9rem;min-height:0;max-width:calc(100% - 2rem);width:max-content;border-radius:6px;background:#000b;color:#ddd;text-align:center;font-size:.875rem;pointer-events:none}
#cinema.needs-play .player-message{top:calc(50% + 58px)}
#cinema:not(.controls-visible):not(.needs-play) #screen{cursor:none}
.view-controls{padding:.4rem 0}.mode-label{z-index:4}
@media(prefers-reduced-motion:reduce){.player-chrome{transition:none}}

/* Use the entire fullscreen surface; safe-area insets apply to controls only. */
#cinema:fullscreen{width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#000}
#cinema:-webkit-full-screen{width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#000}
#cinema::backdrop{background:#000}
.transport .fit-button{height:44px;min-height:44px;flex:0 0 auto;padding:0 .6rem;border:0;background:transparent;color:#fff;font-size:.75rem;white-space:nowrap;text-shadow:0 1px 4px #000}
.fit-button[aria-pressed=true]{background:#ffffff1a}
@media(orientation:landscape){
  .fill-landscape #horizontal,.fill-landscape .poster img{object-fit:cover}
}
@media(orientation:portrait){#fit{display:none}}