:root {
  color-scheme: light dark;
  --paper: #f4f6f5; --panel: #ffffff; --tile: #dde5e2; --rule: #e7ecea;
  --ink: #101413; --muted: #59665f; --accent: #0c7a51; --accent-ink: #ffffff;
  --sans: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0c100f; --panel: #161b1a; --tile: #262e2c; --rule: #222a28;
    --ink: #eaefec; --muted: #98a6a0; --accent: #4fe0a5; --accent-ink: #05100b;
  }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font:18px/1.62 var(--sans); -webkit-font-smoothing:antialiased; }
a { color:var(--accent); text-underline-offset:3px; }
a:focus-visible, button:focus-visible, summary:focus-visible, select:focus-visible, input:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.bn-brand-word { font-family:var(--sans); font-weight:750; color:#f5f7f6; }
.article-header { width:min(880px,calc(100% - 44px)); margin:0 auto; padding:56px 0 24px; }
.eyebrow { margin:0 0 16px; color:var(--accent); font-size:13px; font-weight:650; letter-spacing:.16em; text-transform:uppercase; }
h1 { margin:0 0 22px; font-size:clamp(36px,5.2vw,62px); font-weight:800; font-variation-settings:"opsz" 96,"wdth" 92; line-height:1.04; letter-spacing:-.028em; text-wrap:balance; }
.byline { margin:0; color:var(--muted); font-size:14px; }
main { width:min(1440px,calc(100% - 44px)); margin:auto; padding-bottom:54px; }
.article-copy > p, .article-copy > h2, .article-copy > ul { max-width:780px; margin-left:auto; margin-right:auto; }
.article-copy > p { margin-top:0; margin-bottom:1.15em; }
.article-copy > h2 { margin-top:50px; margin-bottom:16px; font-size:clamp(26px,3.1vw,34px); font-weight:750; letter-spacing:-.024em; line-height:1.14; text-wrap:balance; }
.article-copy > table { width:100%; max-width:940px; margin:24px auto; border-collapse:collapse; font-size:16px; line-height:1.5; }
.article-copy > table th, .article-copy > table td { border-bottom:1px solid var(--tile); padding:15px 12px; text-align:left; vertical-align:top; overflow-wrap:anywhere; }
.article-copy > table th { color:var(--muted); font-size:14px; }
.article-copy > table td:first-child { width:30%; }
.article-copy > figure { max-width:1000px; margin:24px auto; }
.chart { display:block; width:100%; height:auto; border-radius:14px; background:#101a17; }
figcaption { color:var(--muted); font-size:14px; line-height:1.55; padding:12px 4px 0; }
.cta { max-width:940px; margin:46px auto 0; padding:28px; border:1px solid var(--tile); border-radius:20px; background:var(--panel); }
.cta h2 { margin:0 0 18px; font-size:28px; line-height:1.15; }
.cta-link { display:inline-block; padding:11px 20px; border-radius:999px; background:var(--accent); color:var(--accent-ink); text-decoration:none; font-size:16px; font-weight:650; }
.related { max-width:1120px; margin:48px auto 0; }
.related > h2 { font-size:30px; letter-spacing:-.024em; }
.related-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.related-card { display:flex; flex-direction:column; border:1px solid var(--tile); border-radius:16px; overflow:hidden; background:var(--panel); text-decoration:none; color:var(--ink); }
.related-card:hover { border-color:var(--accent); }
.related-card img { display:block; width:100%; height:160px; object-fit:cover; }
.related-copy { display:block; padding:16px; }
.related-copy small { display:block; margin-bottom:5px; color:var(--muted); font-size:12px; letter-spacing:.07em; text-transform:uppercase; }
.related-copy strong { font-size:17px; line-height:1.3; }
#comparison { --view-height:420px; margin:24px 0 34px; padding:22px; border:1px solid var(--tile); border-radius:16px; background:var(--panel); font-size:15px; line-height:1.5; }
#comparison .method-groups, #comparison .transport, #comparison .view-controls { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:8px 0; }
#comparison .method-groups { margin-top:0; }
#comparison .comparison-choice p { color:var(--muted); font-size:14px; margin:12px 0 20px; }
#comparison button { font:inherit; padding:8px 12px; border:1px solid var(--tile); border-radius:8px; background:var(--paper); color:var(--ink); cursor:pointer; }
#comparison button:disabled { opacity:.5; cursor:wait; }
#comparison button.primary, #comparison button[aria-pressed=true] { border-color:var(--accent); background:var(--accent); color:var(--accent-ink); }
#comparison select { font:inherit; padding:8px; border:1px solid var(--tile); border-radius:8px; background:var(--paper); color:var(--ink); max-width:100%; }
#comparison input { accent-color:var(--accent); }
#comparison .inline { display:flex; align-items:center; gap:5px; white-space:nowrap; }
#comparison .transport .inline { margin:0 4px; }
#comparison .timeline { display:grid; grid-template-columns:auto minmax(80px,1fr) auto; align-items:center; gap:10px; margin:12px 0; }
#comparison .timeline input { width:100%; min-width:0; }
#comparison .timeline output { min-width:168px; text-align:right; font-variant-numeric:tabular-nums; }
#comparison .view-controls { font-size:14px; }
#comparison .view-controls button { padding:6px 10px; }
#comparison #view-note { color:var(--muted); margin-left:5px; }
#comparison #pan-controls { display:grid; grid-template-columns:auto minmax(65px,1fr) auto minmax(65px,1fr) auto; gap:10px; align-items:center; font-size:13px; margin:12px 0; }
#comparison #pan-controls input { min-width:0; }
#comparison .comparison-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; align-items:start; }
#comparison .comparison-grid.with-base { grid-template-columns:repeat(3,minmax(0,1fr)); }
#comparison .video-panel { min-width:0; }
#comparison .panel-heading { display:flex; flex-direction:column; justify-content:end; gap:5px; min-height:100px; margin-bottom:8px; }
#comparison .panel-heading label { font-size:12px; color:var(--muted); }
#comparison .panel-heading select { width:100%; font-weight:650; }
#comparison .panel-heading span { font-size:13px; color:var(--muted); }
#comparison .panel-heading h3 { font-size:18px; line-height:1.2; margin:0; }
#comparison .video-viewport { position:relative; aspect-ratio:7/4; overflow:hidden; width:100%; border:1px solid var(--tile); border-radius:6px; background:#000; }
#comparison .video-viewport video { position:absolute; display:block; max-width:none; max-height:none; width:100%; height:100%; object-fit:contain; left:0; top:0; }
#comparison .video-viewport.inspect { cursor:grab; touch-action:none; }
#comparison .video-viewport.inspect:active { cursor:grabbing; }
#comparison .video-panel > a { display:inline-block; font-size:13px; margin-top:7px; }
#comparison .playback-status { font-size:13px; color:var(--accent); margin:12px 0 5px; }
#comparison .inspection-hint { font-size:13px; color:var(--muted); margin:0; }
#comparison details { margin:14px 0 0; padding-top:12px; border-top:1px solid var(--tile); font-size:14px; }
#comparison summary { cursor:pointer; }
#comparison details p { margin:12px 0 6px; }
#comparison details ul { display:flex; flex-wrap:wrap; gap:8px 24px; padding-left:20px; }
#comparison:fullscreen { background:var(--paper); border:0; border-radius:0; padding:16px; margin:0; overflow:auto; display:flex; flex-direction:column; }
#comparison:fullscreen .comparison-grid { flex:1; align-content:center; }
#comparison:fullscreen .video-viewport { height:var(--view-height); aspect-ratio:auto; }
[hidden] { display:none!important; }
@media(max-width:800px) {
  .article-header { padding-top:38px; }
  .article-copy > table { font-size:14px; }
  .article-copy > table td, .article-copy > table th { padding:12px 6px; }
  .related-grid { grid-template-columns:1fr; }
  .related-card { display:grid; grid-template-columns:120px 1fr; align-items:center; }
  .related-card img { height:120px; }
  #comparison { padding:12px; }
  #comparison .comparison-grid { gap:8px; }
  #comparison .comparison-grid.with-base { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #comparison .comparison-grid.with-base #base-panel { grid-column:1/-1; max-width:calc(50% - 4px); width:100%; justify-self:center; }
  #comparison .panel-heading { min-height:104px; }
  #comparison .panel-heading select { font-size:13px; padding:7px 3px; }
  #comparison .panel-heading span { font-size:12px; }
  #comparison .timeline output { min-width:135px; font-size:13px; }
  #comparison #view-note { flex-basis:100%; margin-left:0; }
  #comparison #pan-controls { grid-template-columns:auto minmax(70px,1fr); gap:6px; }
  #comparison #pan-controls button { grid-column:2; }
}
@media(max-width:480px) {
  body { font-size:17px; }
  main, .article-header { width:calc(100% - 24px); }
  #comparison .timeline { grid-template-columns:auto 1fr; }
  #comparison .timeline output { grid-column:1/-1; text-align:center; }
  #comparison .video-panel > a { font-size:12px; }
  #comparison .method-groups button { width:100%; font-size:13px; }
  .article-copy > table td:first-child { width:36%; }
}

.cover-art img { display: block; width: 100%; height: auto; border-radius: 16px; }