:root { color-scheme: dark; font: 112.5%/1.5 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --ink:#f4f7fa; --muted:#c8d3de; --bg:#101922; --panel:#1b2937; --line:#6d8499; --accent:#c6eddf; --controls-height:10rem; }
* { box-sizing:border-box; }
html { scroll-padding-top:calc(var(--controls-height) + 1rem); }
body { margin:0; color:var(--ink); background:var(--bg); }
[hidden] { display:none !important; }
button, input, output { font:inherit; }
button, a, input, [tabindex] { -webkit-tap-highlight-color:transparent; }
button { min-height:2.7rem; border:1px solid #98adbf; border-radius:.45rem; padding:.48rem .85rem; color:var(--ink); background:#263b4d; cursor:pointer; }
button:hover:not(:disabled) { background:#34546c; }
button:disabled { cursor:default; color:#bac7d1; border-color:#637383; background:#25313d; }
button[aria-pressed="true"] { color:#10241d; border-color:var(--accent); background:var(--accent); }
button[aria-pressed="true"]:hover:not(:disabled) { color:#10241d; background:#dcf8eb; }
:focus-visible { outline:3px solid #f6d582; outline-offset:4px; }
a { color:#c6eddf; text-underline-offset:.2em; }
p { margin:.5rem 0 1rem; overflow-wrap:anywhere; }
h1, h2 { line-height:1.18; text-wrap:balance; overflow-wrap:anywhere; }
h1 { font-size:clamp(1.8rem,4.5vw,3rem); max-width:26ch; margin:.3rem 0 1rem; font-weight:650; letter-spacing:-.03em; }
h2 { font-size:1.35rem; margin:0; }
.shell { width:min(72rem,100% - 2.5rem); margin-inline:auto; }
.intro { padding-block:2rem 1.5rem; }
.intro > p:last-child { max-width:66ch; color:var(--muted); }
.eyebrow { color:var(--accent); font-weight:600; }
.skip-link { position:fixed; top:.5rem; left:.5rem; z-index:10; transform:translateY(-150%); padding:.75rem; color:#101922; background:#f6d582; }
.skip-link:focus { transform:translateY(0); }
.control-bar { position:sticky; top:0; z-index:3; padding:.65rem 0; border-block:1px solid var(--line); background:#182633; max-height:75svh; overflow:auto; }
.controls { display:grid; gap:.5rem; }
.scene-navigation { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .85rem; padding-bottom:.6rem; border-bottom:1px solid var(--line); }
.scene-navigation > span { font-size:1rem; font-weight:600; }
.scene-links { display:flex; flex-wrap:wrap; gap:.4rem; min-width:0; }
.scene-links a { display:inline-flex; align-items:center; min-height:2.7rem; padding:.48rem .85rem; border:1px solid #98adbf; border-radius:.45rem; color:var(--ink); background:#263b4d; font-size:1rem; line-height:1.35; overflow-wrap:anywhere; text-decoration:none; }
.scene-links a:hover { background:#34546c; }
.scene-links a[aria-current="page"] { color:#10241d; background:var(--accent); border-color:var(--accent); }
.coverage-note { color:var(--muted); max-width:70ch; }
.path-controls { display:grid; grid-template-columns:auto minmax(8rem,1fr) auto; gap:.85rem; align-items:center; }
.path-range label { display:flex; flex-wrap:wrap; gap:.5rem; justify-content:space-between; }
.path-range input { display:block; width:100%; margin:.4rem 0; min-height:1.4rem; accent-color:var(--accent); cursor:pointer; }
.view-controls { display:flex; align-items:center; flex-wrap:wrap; gap:.5rem .8rem; }
.view-controls span { color:var(--muted); }
.review-heading { display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:.5rem 1rem; margin-top:1.5rem; }
.mode-label { margin:0; font-weight:600; color:var(--accent); }
.status { padding:.65rem .85rem; border-left:3px solid var(--accent); background:var(--panel); color:var(--ink); overflow-wrap:anywhere; }
.status.error { border-color:#f6cf8a; }
.viewer { display:flex; justify-content:center; align-items:center; min-height:15rem; padding:.75rem; background:#070c11; border:1px solid var(--line); border-radius:.6rem; }
.frame-box { position:relative; width:min(100%, calc(68svh * var(--frame-aspect,1.7778))); aspect-ratio:var(--frame-aspect,1.7778); min-width:0; background:#080d12; overflow:hidden; }
.render-host, .source-frame { position:absolute; inset:0; width:100%; height:100%; }
.source-frame { object-fit:contain; }
.render-host canvas { display:block; width:100%; height:100%; cursor:grab; touch-action:pan-y; }
.render-host canvas.dragging { cursor:grabbing; }
.empty-state { position:absolute; inset:0; display:grid; align-content:center; padding:1.2rem; text-align:center; color:var(--muted); overflow:auto; }
.empty-state p { max-width:44ch; margin-inline:auto; }
.frame-caption { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.4rem 1rem; margin-top:.8rem; }
.frame-caption p { margin:0; }
#path-help, #compare-help { color:var(--muted); }
#path-help { margin-top:1rem; }
.review-notes { margin-top:1.8rem; padding-block:1.2rem; border-top:1px solid var(--line); max-width:70ch; }
.review-notes h2 { margin-bottom:.8rem; }
footer { padding-block:1rem 2rem; color:var(--muted); border-top:1px solid var(--line); }
@media (max-width:38rem) {
  .shell { width:calc(100% - 1.25rem); }
  .intro { padding-top:1.25rem; }
  .path-controls { grid-template-columns:1fr 1fr; gap:.4rem; }
  .path-range { min-width:0; grid-column:1/-1; grid-row:1; }
  .view-controls { display:grid; grid-template-columns:1fr 1fr; gap:.4rem; }
  .view-controls span { grid-column:1/-1; }
  .scene-navigation { align-items:flex-start; }
  .scene-navigation > span { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .scene-links { width:100%; }
  .scene-links a { flex:1 1 auto; justify-content:center; }
  button { padding:.45rem .55rem; }
  .viewer { padding:.35rem; }
  .frame-box { width:min(100%,calc(62svh * var(--frame-aspect,1.7778))); }
}
@media (max-height:32rem) and (min-width:38rem) { .control-bar { max-height:45svh; } }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { scroll-behavior:auto !important; } }