:root{--bg:#111214;--pane:#18191c;--raise:#1f2024;--line:#2b2d33;--fg:#ececee;--mut:#9a9ca6;--acc:#f0b429;--ok:#4fc37a;--bad:#e5534b;color-scheme:dark}
@media (prefers-color-scheme:light){:root{--bg:#f5f6f7;--pane:#fff;--raise:#eef0f2;--line:#d9dce0;--fg:#16181b;--mut:#5d636b;--acc:#b87f00;color-scheme:light}}
*{box-sizing:border-box}[hidden]{display:none!important}
html,body{margin:0}
body{background:var(--bg);color:var(--fg);font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
main{max-width:960px;margin:0 auto;padding:20px 16px 64px}
.eyebrow{margin:0;color:var(--acc);font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:600}
h1{margin:2px 0 6px;font-size:24px;line-height:1.2;overflow-wrap:anywhere}
h2{margin:0 0 10px;font-size:17px}
.note{margin:0 0 12px;color:var(--mut);white-space:pre-wrap;overflow-wrap:anywhere}
.mut{color:var(--mut);font-size:14px}
.stage{background:#000;border-radius:10px;overflow:hidden;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center}
video{width:100%;height:100%;display:block;background:#000}
.wait{display:flex;flex-direction:column;gap:10px;align-items:center;color:#ddd;padding:24px;text-align:center}
progress{width:220px;accent-color:var(--acc)}
.under{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;min-height:44px;margin:10px 0 20px}
.now{display:flex;flex-direction:column;gap:2px;min-width:0}.now b{font-size:17px;line-height:1.25;overflow-wrap:anywhere}
#dl{flex:0 0 auto}
button{font:inherit;font-size:15px;border:1px solid var(--line);border-radius:8px;padding:8px 14px;background:var(--raise);color:var(--fg);cursor:pointer}
button.primary{background:var(--acc);border-color:var(--acc);color:#111;font-weight:600}
button:disabled{opacity:.5;cursor:default}
button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.fb{background:var(--pane);border:1px solid var(--line);border-radius:10px;padding:16px}
label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--mut);margin:0 0 10px}
input:not([type=checkbox]),textarea{font:inherit;color:var(--fg);background:var(--raise);border:1px solid var(--line);border-radius:8px;padding:9px 10px;width:100%}
textarea{resize:vertical}
label.check{flex-direction:row;align-items:center;gap:8px;font-size:14px;color:var(--fg)}
label.check input{width:18px;height:18px;accent-color:var(--acc)}
.acts{display:flex;gap:8px;flex-wrap:wrap}
.msg{margin:10px 0 0;font-size:14px;color:var(--ok)}.msg.bad{color:var(--bad)}
.list{list-style:none;margin:16px 0 0;padding:0}
.list li{border-top:1px solid var(--line);padding:12px 0}
.list .who{font-weight:600}.list .when{color:var(--mut);font-size:13px;margin-left:8px}
.list p{margin:4px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
.tc{font:inherit;font-size:13px;font-variant-numeric:tabular-nums;padding:2px 8px;margin-right:8px;border-radius:6px;color:var(--acc);background:transparent;border:1px solid var(--line)}
.badge{display:inline-block;font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--ok);color:#0b1a10;margin-right:8px}
.empty{color:var(--mut);font-size:14px;border-top:1px solid var(--line);padding-top:12px}
.gone{text-align:center;padding-top:18vh}
dialog{background:var(--pane);color:var(--fg);border:1px solid var(--line);border-radius:12px;padding:20px;width:min(420px,calc(100% - 32px))}
dialog::backdrop{background:rgba(0,0,0,.6)}
/* several videos in one review: player on the left, the list of videos beside it (under it on a phone) */
main.many{max-width:1320px}
.watch.many{display:grid;grid-template-columns:minmax(0,1fr) 360px;grid-template-areas:"top list" "fb list";column-gap:24px;align-items:start}
.watch.many .top{grid-area:top;min-width:0}.watch.many .fb{grid-area:fb}.watch.many .playlist{grid-area:list}
.playlist{background:var(--pane);border:1px solid var(--line);border-radius:10px;padding:10px;position:sticky;top:12px;max-height:calc(100vh - 24px);overflow:auto}
.playlist h2{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--mut);margin:4px 6px 8px;font-weight:600}
.playlist button{display:flex;gap:12px;width:100%;text-align:left;padding:8px;border:1px solid transparent;background:transparent;border-radius:8px;align-items:flex-start;margin:2px 0}
.playlist button:hover{background:var(--raise)}
.playlist button[aria-current=true]{background:var(--raise);border-color:var(--acc)}
.thumb{position:relative;flex:0 0 132px;aspect-ratio:16/9;background:#000;border-radius:6px;overflow:hidden;display:block}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb .dur{position:absolute;right:4px;bottom:4px;background:rgba(0,0,0,.82);color:#fff;font-size:11px;padding:1px 5px;border-radius:4px;font-variant-numeric:tabular-nums}
.thumb .flag{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);color:#fff;font-size:12px;font-weight:600;letter-spacing:.02em}
.txt{min-width:0;display:flex;flex-direction:column;gap:4px;padding-top:1px}
.txt b{font-size:14px;line-height:1.3;font-weight:600;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.txt .sub{font-size:12px;color:var(--mut)}
.txt .okk{font-size:11px;font-weight:600;color:var(--ok)}
@media (max-width:980px){
  .watch.many{display:block}
  .playlist{position:static;max-height:none;margin:0 0 20px}
  .thumb{flex-basis:112px}
}
.head{display:flex;align-items:center;gap:14px;margin:0 0 12px}
.head .logo{height:46px;width:auto;flex:0 0 auto;display:block}
.head .titles{min-width:0}.head h1{margin:2px 0 0}
@media (max-width:600px){.head .logo{height:38px}.head{gap:10px}}
/* commenting: a marker chip that follows the playhead + the comment box; dots on a timeline under the player */
.marks{position:relative;height:22px;margin:8px 0 0;border-radius:6px;background:var(--pane);border:1px solid var(--line);cursor:pointer}
.marks .head-line{position:absolute;top:-1px;bottom:-1px;width:2px;background:var(--fg);opacity:.75;left:0;pointer-events:none}
.marks .dot{position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;padding:0;border-radius:50%;background:var(--acc);border:2px solid var(--bg);cursor:pointer}
.marks .dot.ok{background:var(--ok)}
.marks .dot:hover,.marks .dot:focus-visible{transform:scale(1.35);z-index:1}
.composer .name-row{max-width:360px}
.composer .line{display:flex;gap:8px;align-items:flex-start;background:var(--raise);border:1px solid var(--line);border-radius:10px;padding:6px}
.composer .line:focus-within{border-color:var(--acc)}
.composer textarea{flex:1;min-width:0;border:0;background:transparent;padding:8px 4px;resize:none;max-height:180px;line-height:1.4;outline:none}
.composer .line button.primary{padding:8px 16px}
.pin{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;padding:8px 10px;border-radius:8px;background:var(--acc);border-color:var(--acc);color:#111;font-weight:600;font-variant-numeric:tabular-nums}
.pin[aria-pressed=false]{background:transparent;border-color:var(--line);color:var(--mut);font-weight:500}
.composer .sub{display:flex;gap:10px 14px;align-items:center;flex-wrap:wrap;margin-top:8px}
.composer .sub .hintline{flex:1;min-width:180px;font-size:12px}
.linkish{border:0;background:transparent;color:var(--acc);padding:0;font-size:inherit;text-decoration:underline}
.approve{color:var(--ok);border-color:var(--ok);background:transparent;font-weight:600}
.list li{border-radius:8px;padding:12px 8px;margin:0 -8px;transition:background .6s}
.list li.flash{background:var(--raise)}
.tc{display:inline-flex;align-items:center;gap:4px;cursor:pointer}
@media (max-width:600px){.composer .line{flex-wrap:wrap}.composer textarea{flex-basis:100%;order:3}.composer .line button.primary{margin-left:auto}.composer .sub .hintline{display:none}}