:root {
  --color-ink: #171717;
  --color-muted: #70706b;
  --color-background: #f7f7f5;
  --color-surface: #ffffff;
  --color-surface-muted: #e9e9e5;
  --color-media: #191a1a;
  --color-line: #deded9;
  --color-accent: #3158e8;
  --color-positive: #087a51;
  --color-negative: #b33d35;
  --color-on-dark: #ffffff;
  --color-image-outline: rgb(0 0 0 / 10%);
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --text-xs: 10px;
  --text-sm: 11px;
  --text-md: 12px;
  --text-base: 13px;
  --text-lg: 16px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-heading: 32px;
  --text-display: clamp(30px, 3.5vw, 44px);
  --line-tight: 1.05;
  --line-body: 1.5;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-section: 72px;
  --page-gutter: 20px;
  --topbar-height: 58px;
  --page-padding: 64px 0 88px;
  --mobile-gutter: 14px;
  --mobile-page-top: 48px;
  --mobile-section-gap: 52px;
  --border-width: 1px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-pill: 999px;
  --control-height: 48px;
  --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--color-accent) 16%, transparent);
  --transition-fast: 150ms;
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --content-width: 1040px;
  font-family: var(--font-sans);
}

* { box-sizing: border-box; }
html { background: var(--color-background); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { margin: 0; color: var(--color-ink); background: var(--color-background); font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--line-body); }
button, input { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

.topbar {
  display: flex;
  align-items: center;
  height: var(--topbar-height);
  padding-inline: max(var(--page-gutter), calc((100% - var(--content-width)) / 2));
  border-bottom: var(--border-width) solid var(--color-line);
  background: var(--color-surface);
}
.brand {
  color: var(--color-ink);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -.02em;
  text-decoration: none;
}

.page {
  width: min(var(--content-width), calc(100% - (var(--page-gutter) * 2)));
  margin: 0 auto;
  padding: var(--page-padding);
}
.intro { margin-bottom: var(--space-8); }
h1, h2, h3, p { margin-top: 0; }
h1 {
  max-width: 720px;
  margin-bottom: var(--space-3);
  font-size: var(--text-display);
  line-height: var(--line-tight);
  letter-spacing: -.05em;
  font-weight: 700;
  text-wrap: balance;
}
.lede {
  max-width: 530px;
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-lg);
  line-height: var(--line-body);
  text-wrap: pretty;
}

.input-panel {
  padding: var(--space-5) 0 var(--space-4);
  border-block: var(--border-width) solid var(--color-line);
}
label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-md);
  font-weight: 700;
}
.input-row { display: flex; gap: var(--space-2); }
input[type=url] {
  width: 100%;
  min-width: 0;
  height: var(--control-height);
  padding: 0 var(--space-3);
  border: var(--border-width) solid var(--color-line);
  border-radius: var(--radius-md);
  outline: none;
  color: var(--color-ink);
  background: var(--color-surface);
  transition: border-color var(--transition-fast) var(--ease-standard), box-shadow var(--transition-fast) var(--ease-standard);
}
input[type=url]:focus { border-color: var(--color-accent); box-shadow: var(--shadow-focus); }
.upload-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3); margin-top: var(--space-3); }
.upload-row label { margin: 0; color: var(--color-muted); font-size: var(--text-md); font-weight: 400; }
.upload-row input[type=file] { max-width: 100%; color: var(--color-ink); font-size: var(--text-md); }
.upload-name { color: var(--color-muted); font-size: var(--text-md); overflow-wrap: anywhere; }
button[type=submit] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 142px;
  min-height: var(--control-height);
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--radius-md);
  color: var(--color-on-dark);
  background: var(--color-ink);
  font-weight: 700;
  transition: background-color var(--transition-fast) var(--ease-standard), transform var(--transition-fast) var(--ease-standard);
}
button[type=submit]:hover { background: var(--color-accent); }
button[type=submit]:active { transform: scale(.96); }
.samples {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  margin-top: var(--space-3);
  color: var(--color-muted);
  font-size: var(--text-md);
}
.samples button {
  padding: 0;
  border: 0;
  color: var(--color-ink);
  background: transparent;
  font-size: var(--text-md);
  text-decoration: underline;
  text-decoration-color: var(--color-line);
  text-underline-offset: 3px;
}
.samples button:hover { color: var(--color-accent); text-decoration-color: currentColor; }
.error { min-height: 0; margin: var(--space-2) 0 0; color: var(--color-negative); font-size: var(--text-base); }

.progress-panel {
  padding: var(--space-6) 0 var(--space-5);
  border-bottom: var(--border-width) solid var(--color-line);
}
.progress-summary { display: flex; align-items: end; justify-content: space-between; gap: var(--space-5); }
.progress-summary h2 { margin: 0 0 var(--space-1); font-size: var(--text-xl); letter-spacing: -.03em; }
.progress-percent { color: var(--color-accent); font: var(--text-md) var(--font-mono); font-variant-numeric: tabular-nums; }
.progress-percent::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 7px 1px 0; border-radius: 50%; background: currentColor; animation: progress-pulse 1.5s ease-in-out infinite; }
.progress-percent.error::before { animation: none; }
@keyframes progress-pulse { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }
.progress-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}
.progress-steps li {
  padding-top: 9px;
  border-top: 2px solid var(--color-line);
  color: var(--color-muted);
  font-size: var(--text-sm);
}
.progress-steps li.active { border-color: var(--color-accent); color: var(--color-ink); animation: active-stage-pulse 1.6s ease-in-out infinite; }
.progress-steps li.complete { border-color: var(--color-positive); color: var(--color-positive); }
@keyframes active-stage-pulse { 0%, 100% { border-color: color-mix(in srgb, var(--color-accent) 42%, var(--color-line)); } 50% { border-color: var(--color-accent); } }
@media (prefers-reduced-motion: reduce) { .progress-steps li.active { animation: none; } }

.empty-state {
  padding: var(--space-section) 0;
  color: var(--color-muted);
  text-align: center;
}
.empty-state p { margin: 0 0 var(--space-1); color: var(--color-ink); font-weight: 700; }
.empty-state span { font-size: var(--text-base); }

.report { margin-top: var(--space-section); }
.report-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: var(--border-width) solid var(--color-line);
}
.report-head h2 { margin: 0 0 var(--space-1); font-size: var(--text-heading); letter-spacing: -.05em; }
.muted { margin: 0; color: var(--color-muted); font-size: var(--text-base); }
.verdict {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-5) 0;
  border-bottom: var(--border-width) solid var(--color-line);
}
.verdict-main { display: flex; align-items: center; gap: var(--space-3); }
.verdict-symbol { width: 20px; color: var(--color-positive); font-size: 22px; line-height: 1; }
.verdict.no .verdict-symbol { color: var(--color-negative); }
.verdict.preview .verdict-symbol { color: var(--color-accent); }
.verdict h3 { margin: 0 0 var(--space-1); font-size: var(--text-xl); letter-spacing: -.03em; }
.verdict p { margin: 0; color: var(--color-muted); font-size: var(--text-base); }
.verdict-gap { color: var(--color-ink); font: 700 var(--text-xl) var(--font-mono); text-align: right; }
.verdict-gap small { display: block; margin-top: var(--space-1); color: var(--color-muted); font: var(--text-xs) var(--font-mono); text-transform: uppercase; letter-spacing: .06em; }

.workbench { display: grid; grid-template-columns: 1.06fr .94fr; gap: var(--space-8); }
.player-card, .scope-card { min-width: 0; border-top: var(--border-width) solid var(--color-line); }
.card-bar {
  display: flex;
  justify-content: space-between;
  padding: var(--space-3) 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
}
.screen { position: relative; display: grid; place-items: center; min-height: 300px; background: var(--color-media); }
.screen img { display: block; width: 100%; max-height: 470px; object-fit: contain; outline: 1px solid var(--color-image-outline); }
.image-loading { position: absolute; color: var(--color-on-dark); font: var(--text-sm) var(--font-mono); opacity: 0; }
.image-loading.show { opacity: .7; }
.player-controls { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0 var(--space-2); }
.icon-button {
  display: grid;
  place-items: center;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  padding: 0 0 0 2px;
  border: 0;
  border-radius: 50%;
  color: var(--color-on-dark);
  background: var(--color-ink);
  font-size: var(--text-sm);
  transition: transform var(--transition-fast) var(--ease-standard);
}
.icon-button:active { transform: scale(.96); }
.player-controls input { flex: 1; min-width: 0; accent-color: var(--color-accent); }
.timecode, .player-meta { font: var(--text-sm) var(--font-mono); }
.timecode { color: var(--color-accent); white-space: nowrap; }
.player-meta { display: flex; justify-content: space-between; padding-bottom: var(--space-4); color: var(--color-muted); }
.scope-wrap { position: relative; height: 360px; padding: var(--space-3) 0 var(--space-2); }
.scope-wrap canvas { display: block; width: 100%; height: 100%; cursor: crosshair; }
.scope-tooltip { display: none; }
.scope-legend { display: flex; gap: var(--space-4); padding: 0 0 var(--space-3); color: var(--color-muted); font-size: var(--text-sm); }
.scope-legend i { display: inline-block; width: 12px; height: 2px; margin: 0 5px 3px 0; background: var(--color-accent); }
.scope-legend .legend-marker { background: var(--color-negative); }
.scope-legend .legend-stable { background: var(--color-positive); }
.interactive-control {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0 var(--space-4);
  border-bottom: var(--border-width) solid var(--color-line);
}
.interactive-control label { flex: 0 0 auto; margin: 0; color: var(--color-muted); font-size: var(--text-sm); font-weight: 400; }
.interactive-control label span { color: var(--color-ink); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.interactive-control input { flex: 1; min-width: 0; accent-color: var(--color-positive); }
.marker-list { display: grid; grid-template-columns: repeat(2, 1fr); border-top: var(--border-width) solid var(--color-line); }
.marker {
  display: grid;
  grid-template-columns: 7px 1fr auto;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  border: 0;
  border-bottom: var(--border-width) solid var(--color-line);
  color: var(--color-ink);
  background: transparent;
  text-align: left;
  font-size: var(--text-md);
}
.marker:nth-child(odd) { margin-right: 0; }
.marker:nth-child(even) { padding-left: 0; }
.marker-color { width: 5px; height: 5px; border-radius: 50%; background: var(--color-negative); }
.marker-stable .marker-color { background: var(--color-positive); }
.marker-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.marker-time { color: var(--color-muted); font: var(--text-xs) var(--font-mono); }
.marker:hover .marker-label { color: var(--color-accent); }

.phase-section { margin-top: var(--space-section); }
.section-heading h2 { margin: 0 0 var(--space-5); font-size: var(--text-2xl); letter-spacing: -.04em; }
.phase-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-5); }
.phase { min-width: 0; cursor: pointer; }
.phase img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--color-surface-muted); outline: 1px solid var(--color-image-outline); }
.phase-body { padding-top: var(--space-3); }
.phase-title { display: block; margin-bottom: var(--space-1); font-size: var(--text-md); }
.phase-time { color: var(--color-muted); font: var(--text-xs) var(--font-mono); }
.phase:hover .phase-title { color: var(--color-accent); }

@media (max-width: 850px) {
  .workbench { grid-template-columns: 1fr; }
  .phase-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 580px) {
  .page { width: min(100% - (var(--mobile-gutter) * 2), var(--content-width)); padding-top: var(--mobile-page-top); }
  .topbar { padding-inline: var(--mobile-gutter); }
  h1 { font-size: 34px; }
  .lede { font-size: var(--text-base); }
  .input-row { display: block; }
  .input-row button { width: 100%; height: 46px; margin-top: var(--space-2); }
  .report { margin-top: var(--mobile-section-gap); }
  .report-head { display: block; }
  .report-head h2 { font-size: var(--text-2xl); }
  .verdict { display: block; padding-block: var(--space-4); }
  .verdict-gap { margin-top: var(--space-4); text-align: left; }
  .scope-wrap { height: 270px; }
  .marker-list { grid-template-columns: 1fr; }
  .marker:nth-child(odd) { margin-right: 0; }
  .marker:nth-child(even) { padding-left: 0; }
  .phase-section { margin-top: var(--mobile-section-gap); }
  .phase-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4) var(--space-3); }
}

@media (prefers-reduced-motion: reduce) {
  .progress-percent::before { animation: none; }
  button[type=submit], .icon-button { transition: none; }
}