/* Video-first public review room. Footage and its A/B loop own the screen;
   identity and acquisition stay quiet at the edges. */
:root { color-scheme: dark; --bg:#070707; --panel:#111214; --raised:#191b1f; --line:#292c31; --gold:#e0b72f; --gold-soft:rgba(224,183,47,.18); --review:#63ded0; --review-soft:rgba(99,222,208,.16); --text:#f6f6f3; --muted:#999ca3; --danger:#ff747d; }
@font-face { font-family:'Sen'; src:url('/fonts/Sen-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Sen'; src:url('/fonts/Sen-Bold.woff2') format('woff2'); font-weight:700; font-display:swap; }
*,*::before,*::after { box-sizing:border-box; }
html { background:var(--bg); -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--text); font-family:'Sen',system-ui,sans-serif; }
button,input,textarea { font:inherit; }
button { -webkit-tap-highlight-color:transparent; }
.page { width:100%; min-height:100dvh; }
.bar { height:52px; padding:0 12px; display:flex; align-items:center; gap:10px; background:rgba(7,7,7,.92); border-bottom:1px solid #18191b; }
.brand { display:flex; align-items:center; color:var(--text); text-decoration:none; }
.brand img { width:27px; height:27px; border-radius:7px; }
.brand span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.creator { min-width:0; margin:0; color:var(--muted); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.creator strong { color:#d9d9d6; font-weight:600; }
.bar-actions { margin-left:auto; display:flex; align-items:center; gap:7px; }
.identity,.copy { height:34px; border:1px solid var(--line); border-radius:999px; background:#121315; color:#dededb; padding:0 12px; font-size:13px; cursor:pointer; }
.identity[data-signed-in="true"] { color:var(--gold); border-color:rgba(224,183,47,.45); max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.copy { width:34px; padding:0; font-size:18px; }
.stage { display:grid; min-height:calc(100dvh - 52px); }
.player-column { background:#000; min-width:0; }
/* The video sizes itself and the frame hugs it.
   Previously the frame was a fixed landscape band and a portrait phone clip was
   squeezed into it. Letting the element keep its own dimensions, bounded by the
   column width and a share of the viewport, means a portrait shot gets a
   portrait frame and a landscape one gets a wide frame, with nothing stretched
   and no wasted black. */
/* The frame is the video's own box, computed from its real dimensions.
   `--shot-w` / `--shot-h` are set from videoWidth/videoHeight once metadata
   lands; the 16/9 fallback only covers the moment before that.

   It matters that this is exact rather than merely containing the video: the
   scrub-frame preview and the loading state are pinned to this box, so any slack
   between the two puts the preview in a different shape from the picture behind
   it, which is what made a portrait clip look stretched while dragging. */
.video-wrap {
  --shot-w:16; --shot-h:9; --shot-max-h:min(64dvh,720px);
  position:relative; display:grid; place-items:center; margin-inline:auto;
  width:min(100%, calc(var(--shot-max-h) * var(--shot-w) / var(--shot-h)));
  aspect-ratio:var(--shot-w) / var(--shot-h);
  overflow:hidden; background:#000;
}
video { display:block; width:100%; height:100%; object-fit:contain; background:#000; }
.video-play { position:absolute; left:50%; top:50%; translate:-50% -50%; width:64px; height:64px; border:1px solid rgba(255,255,255,.2); border-radius:50%; background:rgba(0,0,0,.58); color:#fff; font-size:25px; padding-left:5px; cursor:pointer; backdrop-filter:blur(8px); }
.video-play[hidden] { display:none; }
.scrub-frame-preview { position:absolute; z-index:5; inset:0; background-color:#000; background-repeat:no-repeat; background-size:4800% auto; background-position:0 center; pointer-events:none; }
.scrub-frame-preview[hidden] { display:none; }
.video-loading { position:absolute; z-index:6; left:50%; top:50%; translate:-50% -50%; display:flex; align-items:center; gap:9px; min-height:44px; border:1px solid rgba(255,255,255,.2); border-radius:999px; background:rgba(0,0,0,.78); color:#fff; padding:0 16px; font-size:13px; font-weight:700; box-shadow:0 8px 24px rgba(0,0,0,.45); backdrop-filter:blur(8px); pointer-events:none; }
.video-loading[hidden] { display:none; }
.video-spinner { width:17px; height:17px; border:2px solid rgba(255,255,255,.3); border-top-color:var(--gold); border-radius:50%; animation:spin .7s linear infinite; }
.video-wrap.scrubbing .video-loading { left:auto; right:14px; top:14px; min-width:38px; min-height:38px; padding:0 9px; translate:0; }
.video-wrap.scrubbing .video-loading>span:last-child { display:none; }
@keyframes spin { to { rotate:360deg; } }
.tool-dock { position:relative; z-index:5; background:#101114; border-top:2px solid rgba(224,183,47,.7); box-shadow:0 -12px 30px rgba(0,0,0,.5); }
.controls { min-height:54px; padding:8px 10px 5px; display:flex; align-items:center; gap:7px; }
.control { height:38px; border:1px solid #3a3d42; border-radius:10px; background:#1b1d21; color:#f1f1ed; padding:0 11px; font-size:14px; cursor:pointer; }
.control.play { width:42px; padding:0; }
/* One chip carrying the current speed, pushed away from the transport keys so
   it does not read as a fourth one. */
.control.speed { margin-left:auto; min-width:52px; font-variant-numeric:tabular-nums; }
.control.speed[aria-pressed="true"] { background:var(--gold); border-color:var(--gold); color:#171200; font-weight:700; }
.ab-controls { display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:9px; padding:8px 10px 7px; }
.ab-button { min-width:80px; height:48px; display:grid; grid-template-columns:26px 1fr; align-items:center; border:1px solid rgba(224,183,47,.5); border-radius:12px; background:var(--gold-soft); color:var(--text); padding:0 9px; cursor:pointer; }
.ab-button>span { display:grid; place-items:center; width:25px; height:25px; border-radius:7px; background:var(--gold); color:#171200; font-weight:800; }
.ab-button strong { padding-left:7px; color:var(--gold); font-size:12px; font-variant-numeric:tabular-nums; }
.ab-line { min-width:15px; height:1px; background:#393b3f; position:relative; }
.ab-line span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
/* Leaving the A-B range. It is one action, so it reads as one: a play glyph
   and "Play full video". The old full-width bar said "Full video" and left
   people guessing whether it would clear their selection or navigate away. */
.clear-range { display:inline-flex; align-items:center; gap:6px; min-height:44px; border:1px solid #555960; border-radius:999px; background:#25272c; color:#f3f3ef; padding:0 14px; font-size:13px; font-weight:700; white-space:nowrap; cursor:pointer; }
.clear-range:hover { border-color:var(--gold); color:var(--gold); }
.clear-icon { color:var(--gold); font-size:13px; line-height:1; font-weight:700; }
.clear-range[hidden] { display:none; }
/* Only present while a range is marked: watch it back, watch it slowly, and
   write the note without leaving the timeline it is about. */
.selection-panel { margin:2px 10px 0; padding:9px 10px 10px; border:1px solid rgba(224,183,47,.4); border-radius:14px; background:var(--gold-soft); }
.selection-panel[hidden] { display:none; }
.selection-title { margin:0 0 6px; color:#f4f2e9; font-size:12px; font-weight:800; letter-spacing:.02em; }
.selection-tools { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:9px; }
.selection-range { color:var(--gold); font-weight:800; font-size:13px; font-variant-numeric:tabular-nums; margin-right:auto; }
.selection-action { min-height:36px; border:1px solid #555960; border-radius:999px; background:#25272c; color:#f3f3ef; padding:0 13px; font-size:13px; font-weight:700; cursor:pointer; white-space:nowrap; }
.selection-action:hover { border-color:var(--gold); color:var(--gold); }
.selection-composer .composer { padding:0; border:0; background:none; }

/* Sits beside the "Notes" heading rather than on its own line: it is a way of
   reading the list, not a separate section. */
.follow-toggle { display:inline-flex; align-items:center; margin-top:8px; min-height:34px; border:1px solid #3a3d42; border-radius:999px; background:#1b1d21; color:#c9ccd2; padding:0 12px; font-size:12px; font-weight:700; cursor:pointer; }
.follow-toggle[aria-pressed="true"] { background:var(--gold); border-color:var(--gold); color:#171200; }
.follow-toggle span { margin-right:5px; font-size:10px; }
.follow-hint { max-width:270px; margin:6px 0 0; color:#777a80; font-size:11px; line-height:1.3; }

.timeline { padding:4px 10px 10px; position:relative; }

.timeline-head { min-height:30px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; color:#b5b7bc; font-size:12px; }
.timeline-head>span:first-child { font-weight:700; color:#e5e5e1; }
.timeline-head strong { color:var(--gold); }
.timeline-head>span:nth-child(2) { text-align:center; color:#7f8288; font-variant-numeric:tabular-nums; }
.zoom-controls { display:flex; gap:5px; }
.zoom-controls button { width:34px; height:28px; border:1px solid #41444a; border-radius:8px; background:#202226; color:#fff; font-size:18px; line-height:1; cursor:pointer; }
.zoom-controls button:disabled { opacity:.3; cursor:default; }
.track { position:relative; height:50px; overflow:hidden; border:1px solid #292b2e; border-radius:10px; background:linear-gradient(180deg,#1d1f23,#111215); cursor:crosshair; touch-action:none; }
.filmstrip { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.62; pointer-events:none; }
.track::after { content:''; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),rgba(255,255,255,.055) calc(10% - 1px) 10%); }
.progress { position:absolute; inset:0 auto 0 0; width:0; background:rgba(255,255,255,.055); pointer-events:none; }
.selection { position:absolute; inset-block:0; background:rgba(224,183,47,.2); border-inline:3px solid var(--gold); pointer-events:none; z-index:2; }
.playhead { position:absolute; inset-block:0; left:0; width:2px; background:#fff; pointer-events:none; z-index:4; }
.markers { position:absolute; inset:0; pointer-events:none; z-index:3; }
.marker { position:absolute; inset-block:3px; min-width:4px; border:1px solid rgba(99,222,208,.75); border-bottom:4px solid var(--review); border-radius:7px; background:repeating-linear-gradient(135deg,var(--review-soft) 0 7px,rgba(99,222,208,.06) 7px 14px); padding:0; opacity:.88; pointer-events:auto; cursor:pointer; }
.marker::after { content:attr(data-index); position:absolute; left:50%; top:5px; translate:-50%; display:grid; place-items:center; min-width:22px; height:22px; padding:0 5px; border-radius:999px; background:var(--review); color:#06211e; font-size:11px; font-weight:800; box-shadow:0 2px 8px rgba(0,0,0,.55); }
.marker.active { opacity:1; background:rgba(99,222,208,.3); border-color:var(--review); box-shadow:inset 0 0 0 1px var(--review),0 0 14px rgba(99,222,208,.45); }
/* Several reads of the same moment are one bar carrying how many, rather than
   bars stacked on top of each other. The notes stay separate in the list. */
.marker-group::before { content:'+' attr(data-count); position:absolute; top:-6px; right:-7px; z-index:1; min-width:18px; height:18px; padding:0 4px; border-radius:999px; background:var(--gold); color:#171200; font-size:10px; font-weight:800; line-height:18px; text-align:center; box-shadow:0 2px 6px rgba(0,0,0,.6); }
.note-focused { outline:2px solid var(--gold); outline-offset:2px; }
.times { display:flex; justify-content:space-between; margin-top:5px; color:#777a80; font-size:12px; font-variant-numeric:tabular-nums; }
.notes-column { min-width:0; padding:15px 12px 24px; background:var(--panel); border-top:1px solid var(--line); }
.notes-top { display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:12px; }
.clip-context { margin:0 0 2px; color:var(--muted); font-size:12px; }
.notes-top h1 { margin:0; font-size:21px; line-height:1.1; }
.notes-top h1 span { color:var(--muted); font-size:14px; font-weight:400; }
.range-readout { margin:0; max-width:50%; color:var(--gold); font-size:12px; text-align:right; }
.notes { list-style:none; margin:0 0 12px; padding:0; display:grid; grid-auto-rows:max-content; align-content:start; gap:8px; max-height:31dvh; overflow:auto; }
.notes.following { scroll-snap-type:y proximity; scroll-behavior:smooth; }
.note { padding:10px 11px; border:1px solid #26282d; border-radius:11px; background:var(--raised); cursor:pointer; }
.note.has-thumb { display:grid; grid-template-columns:96px minmax(0,1fr); grid-template-rows:auto auto auto auto; column-gap:11px; }
.note-thumb { grid-column:1; grid-row:1/5; width:96px; aspect-ratio:16/10; align-self:start; border:1px solid #303238; border-radius:8px; background:#050505; object-fit:cover; }
.note.has-thumb .note-range,.note.has-thumb .note-text,.note.has-thumb .note-author,.note.has-thumb .note-actions { grid-column:2; }
.notes.following .note { scroll-snap-align:center; }
.note.active { border-color:var(--review); background:linear-gradient(90deg,rgba(99,222,208,.18),var(--raised) 48%); box-shadow:inset 4px 0 var(--review),0 0 18px rgba(99,222,208,.1); }
.note-range { border:0; background:transparent; color:var(--review); padding:0; margin:0 0 7px; font-size:12px; font-weight:700; cursor:pointer; }
.note-range::before { content:attr(data-index); display:inline-grid; place-items:center; min-width:21px; height:21px; margin-right:7px; padding:0 4px; border-radius:999px; background:var(--review); color:#06211e; font-size:11px; font-weight:800; }
.note-text { margin:0 0 5px; font-size:15px; line-height:1.35; overflow-wrap:anywhere; }
.note-author { margin:0; color:var(--muted); font-size:12px; }
.note-author[data-signed-in="true"]::after { content:'  \2713'; color:var(--gold); }
.note-actions { display:flex; gap:12px; margin-top:4px; }
.note-actions button,.report { border:0; background:transparent; color:#74777d; padding:5px 0; font-size:12px; text-decoration:underline; cursor:pointer; }
.note-empty { padding:16px 4px; color:var(--muted); font-size:14px; }
.composer { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; padding:10px; border:1px solid #2b2d31; border-radius:13px; background:#181a1e; }
.composer-hint { grid-column:1/-1; margin:0; color:#898c92; font-size:12px; }
.composer-name,.composer-text { width:100%; border:1px solid #303238; border-radius:9px; background:#0c0d0f; color:var(--text); padding:10px 11px; font-size:15px; }
.composer-name { grid-column:1/-1; }
.composer-name[hidden] { display:none; }
.composer-text { min-height:44px; max-height:110px; resize:vertical; }
.composer input:focus,.composer textarea:focus { outline:2px solid var(--gold); outline-offset:1px; }
.composer-website { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.composer-post { align-self:stretch; min-width:88px; border:0; border-radius:9px; background:var(--gold); color:#171200; padding:0 13px; font-size:14px; font-weight:800; cursor:pointer; }
.composer-post:disabled { opacity:.5; }
.composer-error { grid-column:1/-1; margin:0; color:var(--danger); font-size:13px; }
.pitch { margin-top:14px; padding-top:12px; border-top:1px solid #25272b; display:flex; align-items:center; gap:9px; color:var(--muted); }
.pitch>span { color:var(--text); font-size:13px; font-weight:700; }
.pitch p { flex:1; margin:0; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.stores { display:flex; gap:6px; }
.stores a { color:var(--gold); text-decoration:none; border:1px solid rgba(224,183,47,.4); border-radius:999px; padding:6px 9px; font-size:11px; }
.report { margin-top:9px; }
.toast { position:fixed; z-index:20; left:50%; bottom:20px; translate:-50%; max-width:calc(100% - 32px); border:1px solid #34363b; border-radius:999px; background:#202226; color:var(--text); padding:10px 16px; font-size:13px; }
.gone { max-width:440px; margin:0 auto; padding:20vh 22px; text-align:center; }
.gone .logo { border-radius:16px; }
.gone h1 { font-size:24px; }
.gone p { color:var(--muted); }
.gone .stores { justify-content:center; }
@media (min-width:900px) {
  .page { height:100dvh; overflow:hidden; }
  .bar { padding-inline:18px; }
  .brand span { position:static; width:auto; height:auto; clip:auto; margin-left:8px; font-weight:700; }
  .stage { grid-template-columns:minmax(0,1.65fr) minmax(340px,.75fr); height:calc(100dvh - 52px); }
  .player-column { display:grid; grid-template-rows:minmax(260px,1fr) auto; min-height:0; }
  .video-wrap { --shot-max-h:min(72dvh,760px); }
  .notes-column { border-top:0; border-left:1px solid var(--line); padding:18px; display:flex; flex-direction:column; overflow:hidden; }
  .notes-column>.selection-panel { flex:0 0 auto; margin:0 0 12px; background:rgba(224,183,47,.12); }
  .notes { max-height:none; flex:1; }
}
@media (max-width:560px) {
  .video-wrap { --shot-max-h:min(58dvh,560px); }
  /* Four controls fit. Eight did not, and the row scrolled sideways, which is
     how a first-time visitor ends up never finding the speed control at all. */
  .control { flex:0 0 auto; }
  .ab-controls { grid-template-columns:1fr 20px 1fr auto; }
  .ab-button { min-width:0; }
  /* Tight beside A and B, but the word stays: a bare play glyph next to an A-B
     range reads as "play the selection", which is the opposite of what it does. */
  .clear-range { padding:0 11px; gap:5px; font-size:12px; }
  .note.has-thumb { grid-template-columns:84px minmax(0,1fr); column-gap:9px; }
  .note-thumb { width:84px; }
  .pitch p { display:none; }
}
@media (prefers-reduced-motion:no-preference) { .toast { animation:rise .18s ease-out; } @keyframes rise { from { opacity:0; translate:-50% 8px; } } }