:root {
  --ink: #172528; --muted: #53676b; --paper: #f4f7f7; --card: #fff;
  --line: #dce6e7; --green: #086762; --pale: #e8f4f2;
  color: var(--ink); background: var(--paper);
  font: 15px/1.5 system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; }
button, select, input { font: inherit; }
button, select { cursor: pointer; }
button:disabled { cursor: default; opacity: .48; }
button, select, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid #16867c; outline-offset: 3px; }
a { color: inherit; }
[hidden] { display: none !important; }
.wrap { width: min(1920px, calc(100% - clamp(20px, 3vw, 48px))); margin-inline: auto; }
.masthead { background: var(--card); border-bottom: 1px solid var(--line); }
.masthead .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 9px 22px; min-height: 61px; padding-block: 8px; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin: 0; font-size: 1.38rem; font-weight: 750; letter-spacing: -.05em; line-height: 1.15; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: var(--green); color: #fff; flex: 0 0 auto; }
.subtitle { color: var(--muted); font-size: .73rem; }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; max-width: 100%; }
.reviewer-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; max-width: 100%; padding: 3px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); }
.reviewer-label { padding-inline: 8px; color: var(--muted); font-size: .76rem; font-weight: 750; }
.tabs a { display: flex; align-items: center; justify-content: center; gap: 7px; text-decoration: none; padding: 6px 11px; border-radius: 6px; color: var(--muted); font-size: .88rem; font-weight: 700; white-space: nowrap; }
.tabs a:hover { color: var(--green); background: var(--card); }
.tabs a[aria-current] { background: var(--green); color: #fff; }
.tab-question { font-size: .7rem; font-weight: 800; background: var(--pale); color: var(--green); padding: 2px 5px; border-radius: 4px; }
.workspace { min-width: 0; padding: 13px 0 30px; }
.failure-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-bottom: 10px; }
.failure-groups a { display: block; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); text-decoration: none; line-height: 1.25; }
.failure-groups a:hover, .failure-groups a[aria-current] { background: var(--pale); border-color: #72aaa3; }
.failure-groups span { display: block; margin-bottom: 4px; color: var(--green); font-size: .74rem; font-weight: 750; }
.failure-groups strong { display: block; font-size: .92rem; }
.player { border: 1px solid var(--line); border-radius: 11px; background: var(--card); box-shadow: 0 2px 5px #17252809; }
.watch { color: var(--muted); font-size: .86rem; margin: 12px 0 0; padding: 7px 10px; border-left: 3px solid #72aaa3; background: var(--pale); }
.watch strong { color: var(--green); }
.setup, .buttons { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.setup { padding: 8px 11px; border-bottom: 1px solid var(--line); }
.setup label { display: flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--muted); font-weight: 650; }
#context { margin-inline-start: auto; }
.control { background: var(--card); color: var(--ink); border: 1px solid #cddadc; padding: 4px 8px; border-radius: 6px; min-height: 32px; font-size: .83rem; }
.control:hover:not(:disabled) { background: var(--pale); }
.control.primary { background: var(--green); border-color: var(--green); color: #fff; min-width: 68px; font-weight: 700; }
.control.primary:hover:not(:disabled) { background: #07534f; }
.control[aria-pressed="true"] { background: var(--pale); border-color: #72aaa3; color: var(--green); }
.panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
#panels { gap: 2px; background: #d9e3e4; }
#panels[data-three] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#context-panels { gap: 9px; margin-top: 12px; }
#context-panels .panel { border: 1px solid var(--line); border-radius: 8px; }
figure { min-width: 0; margin: 0; }
.panel { overflow: hidden; background: var(--card); }
.panel figcaption { display: flex; align-items: center; gap: 7px; padding: 5px 11px; font-size: .86rem; font-weight: 700; }
.panel[data-main] figcaption { background: var(--pale); color: var(--green); }
.panel[data-main] figcaption::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.viewport { position: relative; overflow: hidden; background: #111b1d; aspect-ratio: var(--aspect, 16 / 9); max-height: 72svh; }
video { display: block; width: 100%; height: 100%; object-fit: contain; cursor: pointer; }
.panels.zoomed video { transform: scale(2.2); transform-origin: var(--focus-x, 50%) var(--focus-y, 50%); cursor: crosshair; }
.transport { display: flex; align-items: center; gap: 9px; padding: 8px 11px 6px; }
output { color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
.scrubber { flex: 1 1 140px; min-width: 90px; padding-top: 5px; }
#timeline { display: block; width: 100%; margin: 0; accent-color: var(--green); }
#ticks { position: relative; height: 10px; margin-inline: 7px; pointer-events: none; }
#ticks span { position: absolute; height: 6px; width: 2px; background: #a38354; }
#ticks .focus { height: 9px; width: 3px; background: var(--green); }
#ticks .cut { height: 9px; width: 3px; background: #b23f32; }
.foot { margin: 0; font-size: .76rem; color: var(--muted); }
#status.error { color: #933326; }
#stills { margin-top: 9px; }
#stills h3 { margin: 0 0 5px; font-size: .95rem; }
#still-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
#still-grid button { padding: 0; overflow: hidden; text-align: left; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); color: inherit; }
#still-grid img { width: 100%; display: block; aspect-ratio: 16/9; object-fit: contain; background: #111b1d; }
#still-grid span { display: block; padding: 5px 8px; font-size: .77rem; }
details { border-top: 1px solid var(--line); padding: 6px 11px; color: var(--muted); font-size: .82rem; }
summary { cursor: pointer; font-weight: 700; width: fit-content; color: var(--ink); }
details .buttons { margin-top: 6px; }
details p { margin: 6px 0; }
.rebuttal-note { margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--line); }
.dove-note { margin: 0 0 12px; padding-top: 0; border-top: 0; }
.rebuttal-note h2 { margin: 0 0 9px; font-size: 1.06rem; letter-spacing: -.018em; }
.evidence { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.evidence article { min-width: 0; padding: 11px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
.evidence h3 { margin: 0 0 4px; font-size: .86rem; color: var(--green); }
.evidence p { max-width: 80ch; margin: 0; color: var(--muted); font-size: .86rem; }
@media (max-width: 850px) {
  #panels[data-three] { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .tabs, .reviewer-tabs { width: 100%; }
  .reviewer-label { flex-basis: 100%; }
  .tabs a { gap: 5px; padding-inline: 6px; }
  .panels { grid-template-columns: minmax(0, 1fr); }
  .transport { flex-wrap: wrap; }
  #status { order: 1; }
  #still-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .evidence { grid-template-columns: minmax(0, 1fr); }
}