#root{height:auto;min-height:100%}.film-hero{margin-top:32px}.film-player{margin-top:24px}.film-stage{aspect-ratio:16/9;border:1px solid var(--line);border-radius:var(--radius);background:var(--film-paper);position:relative;overflow:hidden}@media (max-width:640px){.film-stage{aspect-ratio:4/5}}.film-stage canvas{cursor:pointer;width:100%;height:100%;display:block}.film-big{border:3px solid var(--film-ink);background:var(--accent);width:84px;height:84px;box-shadow:4px 4px 0 color-mix(in srgb, var(--film-ink) 30%, transparent);color:var(--film-ink);font:inherit;cursor:pointer;border-radius:50%;margin:auto;font-size:30px;line-height:1;position:absolute;inset:0}.film-big:hover{filter:brightness(1.08)}.film-controls{align-items:center;gap:14px;margin-top:10px;display:flex}.film-controls .button{min-width:96px;font-size:13px}.film-controls input[type=range]{accent-color:var(--accent);flex:1}.film-controls .film-sound[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}.film-controls .film-sound:disabled{cursor:progress;opacity:.7}.film-time{color:var(--muted);font-variant-numeric:tabular-nums;font-size:14px}.film-beats{margin:0;padding:0;list-style:none}.film-beats li{border-top:1px solid var(--line);grid-template-columns:4.5em minmax(0,1fr);align-items:baseline;gap:14px;padding:12px 0;display:grid}.film-beats p{color:var(--muted);margin:0}.film-beats strong{color:var(--text)}.film-seek{color:var(--accent);font:inherit;font-variant-numeric:tabular-nums;cursor:pointer;background:0 0;border:0;padding:0;font-weight:650;text-decoration:underline}.film-record{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);padding:20px 24px}.film-record p{color:var(--muted)}.film-record-fields{flex-wrap:wrap;gap:16px 24px;display:flex}.film-record label{min-width:0;color:var(--text);gap:6px;font-size:14px;display:grid}.film-record-actions label{display:inline}.film-record select,.film-record input{border:1px solid var(--line);background:var(--panel-2);max-width:100%;color:var(--text);font:inherit;border-radius:6px;padding:7px 9px}.film-record input[type=number]{width:6em}.film-record .button.primary{flex:none;padding:10px 18px;font-size:14px}.film-record progress{width:100%;accent-color:var(--accent)}.film-offscreen{position:fixed;top:0;left:-100000px}@media (max-width:640px){.film-controls{gap:10px}.film-time{display:none}}