:root{color-scheme:dark;--film:#101512;--panel:#171e19;--line:#303c32;--chalk:#e7eadd;--muted:#afbbad;--field:#c5e589;--pencil:#83c9e8;--flag:#e2bd73}*{box-sizing:border-box}body{margin:0;background:var(--film);color:var(--chalk);font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,input,select,textarea{font:inherit}button{background:#202920;color:var(--chalk);border:1px solid var(--line);border-radius:6px;padding:9px 14px;cursor:pointer}button:hover:not(:disabled){border-color:var(--field)}button:disabled{opacity:.4;cursor:not-allowed}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--pencil);outline-offset:2px}.primary,button[aria-pressed=true]{background:var(--field);color:#17220c;border-color:var(--field)}input,select,textarea{background:var(--film);color:var(--chalk);border:1px solid var(--line);border-radius:5px;padding:9px;max-width:100%}textarea{width:100%}input[type=range]{accent-color:var(--field);padding:0}h1,h2,h3,p{margin:0}h2{font-size:17px;font-weight:600}header{height:60px;display:flex;align-items:center;gap:16px;padding:12px 24px;border-bottom:1px solid var(--line)}.brand{font-weight:750;letter-spacing:.08em;color:var(--field);text-decoration:none}.header-actions{margin-left:auto;display:flex;align-items:center;gap:12px}.muted{color:var(--muted)}main{padding:12px 20px;max-width:1800px;margin:auto}.topbar{display:flex;align-items:center;gap:16px;margin-bottom:8px}.topbar label{white-space:nowrap}.topbar p{flex:1;font-size:13px;color:var(--muted)}.access{display:flex;align-items:center;gap:12px;min-height:30px;font-size:12px;color:var(--muted);margin-bottom:8px}.access.locked{padding:10px;background:#31291b;color:var(--flag);border-radius:6px}#notice{padding:10px 14px;margin:8px 0;border:1px solid var(--flag);color:var(--flag);border-radius:5px}.room{display:grid;grid-template-columns:260px minmax(0,1fr);gap:20px}.roster{border:1px solid var(--line);border-radius:8px;background:var(--panel);height:calc(100dvh - 166px);min-height:340px;display:flex;flex-direction:column;padding:16px}.roster>input{width:100%;margin:12px 0}#players{overflow:auto;min-height:0}#players h3{font-size:11px;letter-spacing:.12em;color:var(--muted);margin:12px 0 8px}.player{display:grid;grid-template-columns:38px 1fr;width:100%;text-align:left;gap:8px;align-items:center;padding:9px;margin-bottom:5px;background:transparent}.player .number{font-size:18px;font-weight:650;text-align:center}.player strong{display:block;font-size:13px}.player small{display:block;color:var(--muted);font-size:11px}.player.active{border-color:var(--field);background:#263323}.player.active small{color:#ccd9bb}.film{min-width:0}.filmbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:8px}.views{display:flex;gap:4px}.views button{padding:7px 12px;font-size:12px}#instruction{font-size:13px;color:var(--muted);margin-bottom:12px;min-height:19px}.angles{display:grid;grid-template-columns:1fr 1fr;gap:12px}.angles[data-view=sideline],.angles[data-view=endzone]{grid-template-columns:1fr}.angles[data-view=sideline] [data-camera=endzone],.angles[data-view=endzone] [data-camera=sideline]{display:none}figure{margin:0;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#070a08;min-width:0}figcaption{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:8px 12px;font-size:11px;color:var(--muted)}figcaption b{font-size:10px;letter-spacing:.1em}.screen{position:relative;aspect-ratio:16/9;margin:auto;width:100%}.angles:not([data-view=both]) .screen{max-width:calc((100dvh - 340px)*16/9)}video,canvas{display:block;position:absolute;inset:0;width:100%;height:100%}canvas{touch-action:none;cursor:crosshair}.transport{display:flex;gap:8px;align-items:center;margin:12px 0}.transport input{flex:1;min-width:50px}.transport output{min-width:55px;font-size:12px;font-variant-numeric:tabular-nums}.transport select{width:95px;font-size:12px}.savebar{display:flex;gap:12px;align-items:center;border-top:1px solid var(--line);padding-top:12px}.savebar span{font-size:12px;color:var(--muted);flex:1}.savebar #save{min-width:100px}.hint{font-size:11px;color:var(--muted);margin:12px 0;max-width:820px}.dirty{color:var(--flag)!important}dialog{width:min(580px,94vw);max-height:88dvh;overflow:auto;padding:24px;background:var(--panel);color:var(--chalk);border:1px solid var(--line);border-radius:8px}dialog::backdrop{background:#030704cc}dialog .close{float:right}dialog h2{margin:0 0 20px}dialog h3{margin:16px 0 12px}dialog label{display:block;margin:16px 0}dialog label input,dialog label textarea{display:block;margin-top:6px}dialog button{margin:4px 4px 4px 0}dialog p{margin:12px 0;font-size:12px}details{margin-top:16px;color:var(--muted)}hr{border:0;border-top:1px solid var(--line);margin:16px 0}.auth{display:grid;grid-template-columns:1.2fr 1fr;gap:60px;max-width:1000px;margin:80px auto;padding:24px}.auth h1{font-size:46px;line-height:1.1}.auth p{margin:16px 0;color:var(--muted)}.auth form{padding:24px;border:1px solid var(--line);border-radius:8px}.auth label{display:block;margin:12px 0}.auth input{display:block;width:100%;margin-top:5px}.auth .primary{width:100%;margin:12px 0}.text-button{background:transparent;border:0;color:var(--muted)}.auth-rule{margin-top:20px;line-height:2}.error{color:#ffb4a9!important}.eyebrow{font-size:11px;letter-spacing:.12em}[hidden]{display:none!important}@media(max-width:900px){.room{grid-template-columns:210px minmax(0,1fr);gap:12px}.filmbar{align-items:start;flex-direction:column}.transport{flex-wrap:wrap}.transport input{order:2;flex-basis:100%}.topbar p{max-height:40px;overflow:auto}.angles[data-view=both]{grid-template-columns:1fr}.angles[data-view=both] .screen{max-width:calc((100dvh - 400px)*8/9);min-width:220px}.roster{height:calc(100dvh - 170px)}}@media(max-width:600px){header{padding:12px;font-size:12px;gap:8px}header>.muted,#who{display:none}main{padding:10px}.room{display:flex;flex-direction:column}.roster{height:210px;min-height:0;padding:10px}.roster>input{margin:6px 0;padding:6px}#players{display:flex;gap:6px;overflow:auto}#players section{display:flex;gap:4px}#players h3{writing-mode:vertical-rl}.player{min-width:180px}.filmbar{flex-direction:row}.filmbar h2{font-size:14px}.views button{padding:7px}.angles[data-view=both]{grid-template-columns:1fr 1fr}.angles[data-view=both] .screen{min-width:0}.topbar{gap:8px}.topbar p{display:none}.auth{display:block;margin:20px auto}.auth form{margin-top:24px}}
.player[aria-pressed=true]{color:var(--chalk)}.angles:not([data-view=both]) .screen{max-width:calc((100dvh - 410px)*16/9)}