:root {
  
  --ground:      #0A0B0D;
  --surface:     #111316;   
  --surface-2:   #171A1E;   
  --line:        #242830;   
  --line-soft:   #1A1E24;   

  
  --text:        #E8EAED;
  --text-2:      #B6BCC4;   
  --muted:       #8A8F98;   

  
  --accent:      #D7FF3E;
  --accent-dim:  #A8C82F;   
  --accent-ink:  #0A0B0D;   
  --accent-wash: rgba(215, 255, 62, .08);

  
  --alert:       #FF5C5C;   
  --alert-wash:  rgba(255, 92, 92, .09);
  --caution:     #F0A93B;   
  --caution-wash:rgba(240, 169, 59, .09);
  --good:        #6FD08C;   
                            
                            

  
  --font-display: Archivo, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    Archivo, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  
  --fs-base:   17px;
  --fs-xs:     0.735rem;   
  --fs-sm:     0.845rem;   
  --fs-md:     0.94rem;    
  --fs-lg:     1.125rem;   
  --fs-h3:     1.22rem;
  --fs-h2:     clamp(1.4rem,  3.2vw, 1.78rem);
  --fs-h1:     clamp(1.95rem, 5.4vw, 2.85rem);
  --fs-hero:   clamp(2.6rem,  9vw,   4rem);   

  --lh-tight:  1.08;
  --lh-head:   1.16;
  --lh-body:   1.62;

  --track-tight: -0.028em;  
  --track-label:  0.13em;   

  
  --measure: 68ch;
  --measure-art: 640px;   

  
  --s1: 4px;  --s2: 8px;   --s3: 12px;  --s4: 16px;
  --s5: 24px; --s6: 32px;  --s7: 48px;  --s8: 64px;  --s9: 96px;

  
  --r:      4px;
  --r-pill: 999px;

  --border: 1px solid var(--line);

  
  --shadow: 0 1px 0 rgba(255,255,255,.02) inset;

  --nav-h: 52px;
  --dur:   160ms;
  --ease:  cubic-bezier(.22, 1, .36, 1);   
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ground:      #F6F7F1;
    --surface:     #FFFFFF;
    --surface-2:   #EEF0E7;
    --line:        #DBDECF;
    --line-soft:   #E7E9DE;
    --text:        #12141A;
    --text-2:      #444A52;
    --muted:       #676D75;
    --accent:      #4E6300;   
    --accent-dim:  #3A4A00;
    --accent-ink:  #12141A;   
    --accent-wash: rgba(215, 255, 62, .38);
    --alert:       #C21E1E;
    --alert-wash:  rgba(194, 30, 30, .08);
    --caution:     #8A5A00;
    --caution-wash:rgba(138, 90, 0, .10);
    --good:        #2E7D4F;
  }
}
:root[data-theme="light"] {
  --ground:#F6F7F1; --surface:#FFFFFF; --surface-2:#EEF0E7;
  --line:#DBDECF; --line-soft:#E7E9DE;
  --text:#12141A; --text-2:#444A52; --muted:#676D75;
  --accent:#4E6300; --accent-dim:#3A4A00; --accent-ink:#12141A;
  --accent-wash:rgba(215,255,62,.38);
  --alert:#C21E1E; --alert-wash:rgba(194,30,30,.08);
  --caution:#8A5A00; --caution-wash:rgba(138,90,0,.10); --good:#2E7D4F;
}

:root { --accent-solid: #D7FF3E; --accent-solid-ink: #0A0B0D; }

:root { --caution-solid: #F0A93B; --caution-solid-ink: #0A0B0D; }



*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.nav {
  position: sticky; top: 0; z-index: 50;
  height: var(--nav-h);
  display: flex; align-items: center; gap: var(--s5);
  padding: 0 var(--s5);
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: var(--border);
  font-family: var(--font-mono);
  font-size: var(--fs-md);
}

.nav .nav__mark {
  font-weight: 700; letter-spacing: -.02em; color: var(--text);
  text-decoration: none; white-space: nowrap; flex: 0 0 auto;
}

.nav .nav__mark:has(svg) { align-self: flex-start; align-items: flex-start; margin-top: 4px; padding-top: 11px; }
.nav__mark svg { display: block; }
.nav__hubs {
  display: flex; gap: var(--s5); align-items: center;
  overflow-x: auto; scrollbar-width: none; flex: 1 1 auto;
  -webkit-overflow-scrolling: touch;
  
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  scroll-snap-type: x proximity;
}
.nav__hubs.is-scrolled {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
          mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
}
.nav__hubs > a { scroll-snap-align: start; }
.nav__hubs::-webkit-scrollbar { display: none; }
.nav a {
  color: var(--muted); text-decoration: none; white-space: nowrap;
  transition: color var(--dur) var(--ease);
  
  display: inline-flex; align-items: center; min-height: 44px;
}
.nav a:hover { color: var(--text); }
.nav a[aria-current="page"] { color: var(--accent); }
.nav__links {
  flex: 0 0 auto; display: flex; gap: var(--s4); align-items: center;
  font-size: var(--fs-sm);
  padding-left: var(--s4);
  border-left: 1px solid var(--line);
  background: var(--ground);            
}
@media (max-width: 720px) { .nav__links .is-optional { display: none; } }

.nav__hubs:not(:has(a)) + .nav__links { border-left: 0; padding-left: 0; }

.draft-banner {
  position: sticky; top: var(--nav-h); z-index: 40;
  padding: var(--s2) var(--s5);
  background: var(--caution-solid); color: var(--caution-solid-ink);
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; line-height: 1.5;
}

.page { max-width: 780px; margin: 0 auto; padding: var(--s7) var(--s5) var(--s9); }
.page > * { max-width: var(--measure); }
.page > .full { max-width: none; }

.meta {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: center;
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--muted); margin-bottom: var(--s4);
}
.meta__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }

h1 {
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--fs-h1); line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  margin: 0 0 var(--s5); text-wrap: balance;
}
h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-h2); line-height: var(--lh-head);
  letter-spacing: var(--track-tight);
  margin: var(--s8) 0 var(--s3); text-wrap: balance;
}
h3 {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-h3); line-height: var(--lh-head);
  letter-spacing: -.014em;
  margin: var(--s6) 0 var(--s2); text-wrap: balance;
}
h2 + h3 { margin-top: var(--s4); }

p { margin: 0 0 var(--s4); }
ul, ol { margin: 0 0 var(--s4); padding-left: 1.3em; }
li { margin-bottom: var(--s2); }
li::marker { color: var(--muted); }
strong { font-weight: 700; color: var(--text); }
hr { border: 0; height: 1px; background: var(--line); margin: var(--s7) 0; }

a { color: var(--text); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: text-decoration-color var(--dur) var(--ease); }
a:hover { text-decoration-color: var(--accent); }

code {
  font-family: var(--font-mono); font-size: .855em;
  background: var(--surface); border: 1px solid var(--line-soft);
  padding: .1em .36em; border-radius: 3px; word-break: break-word;
}

.code-copy {
  font-family: var(--font-mono); font-size: .855em; color: var(--accent);
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: 3px;
  padding: .1em .36em; cursor: pointer; min-height: 32px; white-space: nowrap;
}
.code-copy:hover, .code-copy:focus-visible { border-color: var(--accent); }
pre {
  font-family: var(--font-mono); font-size: var(--fs-sm); line-height: 1.6;
  background: var(--surface); border: var(--border); border-radius: var(--r);
  padding: var(--s4) var(--s5); overflow-x: auto; margin: 0 0 var(--s5);
  color: var(--text-2);
}
pre code { background: none; border: 0; padding: 0; font-size: inherit; }

.answer {
  font-size: var(--fs-lg); line-height: 1.52; color: var(--text);
  border-left: 2px solid var(--accent);
  background: var(--accent-wash);
  padding: var(--s5) var(--s5) var(--s4);
  border-radius: 0 var(--r) var(--r) 0;
  margin: 0 0 var(--s6);
}
.answer > :last-child { margin-bottom: 0; }
.answer strong { color: var(--text); }
.answer .num { font-family: var(--font-mono); font-weight: 700; font-variant-numeric: tabular-nums; }

.hero-num {
  font-family: var(--font-mono); font-weight: 700;
  font-size: var(--fs-hero); line-height: .9; letter-spacing: -.045em;
  color: var(--accent); font-variant-numeric: tabular-nums;
  margin: var(--s5) 0 var(--s2);
}
.hero-num + .hero-cap { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--muted); margin-bottom: var(--s6); }

.tw { overflow-x: auto; margin: 0 0 var(--s5); border: var(--border); border-radius: var(--r); background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: var(--fs-md); min-width: 460px; }
th {
  text-align: left; font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--muted); font-weight: 500; white-space: nowrap;
  padding: var(--s3) var(--s4); border-bottom: var(--border); background: var(--surface-2);
}
td { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line-soft); color: var(--text-2); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
td:first-child { color: var(--text); font-weight: 500; }

td.num, th.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text); }
tr.is-best td { background: var(--accent-wash); }
tr.is-best td:first-child { box-shadow: inset 2px 0 0 var(--accent); }

.cmp td.is-win { color: var(--good); }
.cmp td.muted { color: var(--muted); font-style: italic; }

.steps { list-style: none; padding: 0; margin: 0 0 var(--s6); counter-reset: step; }
.step { counter-increment: step; display: grid; grid-template-columns: 30px minmax(0,1fr); gap: var(--s4); margin-bottom: var(--s5); }
.step::before {
  content: counter(step);
  font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 700;
  color: var(--accent-ink); background: var(--accent-solid);
  width: 26px; height: 26px; border-radius: var(--r);
  display: grid; place-items: center; margin-top: 2px;
}
.step > div > :last-child { margin-bottom: 0; }
.step .setting { font-family: var(--font-mono); color: var(--text); background: var(--surface); border: 1px solid var(--line); padding: .1em .4em; border-radius: 3px; }

.fig { margin: 0 0 var(--s5); }
.fig video, .fig img {
  width: 100%; height: auto; display: block;
  aspect-ratio: attr(width type(<number>), 16) / attr(height type(<number>), 9);
  border: var(--border); border-radius: var(--r); background: var(--surface);
}

@supports not (aspect-ratio: attr(width type(<number>), 16) / 9) {
  .fig video, .fig img { aspect-ratio: 16 / 9; }
}
.fig video[controls] { aspect-ratio: auto; }
.fig figcaption, .editorial-art figcaption, .portrait figcaption { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); margin-top: var(--s2); letter-spacing: .02em; max-width: var(--measure); }

img, video, svg, canvas, iframe { max-width: 100%; }

.note { border: var(--border); border-left: 2px solid var(--accent); background: var(--surface); padding: var(--s4) var(--s5); border-radius: 0 var(--r) var(--r) 0; margin: 0 0 var(--s5); }
.note--warn  { border-left-color: var(--caution); background: var(--caution-wash); }
.note--error { border-left-color: var(--alert);  background: var(--alert-wash); }
.note > :last-child { margin-bottom: 0; }
.note__label { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); display: block; margin-bottom: var(--s2); }

.bridge { border-top: 1px solid var(--line); padding-top: var(--s4); margin: var(--s6) 0 var(--s5); }
.bridge__label { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 400; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); margin: 0 0 var(--s2); }
.bridge p { margin: 0 0 var(--s2); color: var(--text-2); }
.bridge .bridge__fine { font-size: var(--fs-xs); color: var(--muted); margin: 0; }

.errstr {
  font-family: var(--font-mono); font-size: var(--fs-md);
  color: var(--alert); background: var(--alert-wash);
  border: 1px solid color-mix(in srgb, var(--alert) 28%, transparent);
  border-radius: var(--r); padding: var(--s3) var(--s4);
  margin: 0 0 var(--s5); overflow-x: auto; white-space: pre;
}

.cta { border: var(--border); background: var(--surface); border-radius: var(--r); padding: var(--s5); margin: var(--s7) 0 var(--s5); display: grid; gap: var(--s4); }
.cta__row { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.cta__btn {
  font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-md);
  letter-spacing: .01em; text-decoration: none;
  background: var(--accent-solid); color: var(--accent-solid-ink);
  padding: var(--s3) var(--s5); border-radius: var(--r);
  display: inline-flex; align-items: center; gap: var(--s2);
  transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.cta__btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.cta__code {
  font-family: var(--font-mono); font-size: var(--fs-md);
  border: 1px dashed var(--line); border-radius: var(--r);
  padding: var(--s3) var(--s4); color: var(--text);
  display: inline-flex; align-items: center; gap: var(--s3);
}
.cta__code b { color: var(--accent); letter-spacing: .08em; }
.cta__copy { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--track-label); background: none; border: 0; color: var(--muted); cursor: pointer; padding: 0; }
.cta__copy:hover { color: var(--accent); }
.cta__note { font-size: var(--fs-sm); color: var(--muted); margin: 0; }
.cta__note b { font-family: var(--font-mono); color: var(--text); letter-spacing: .06em; }

.cta__gain { display: block; margin-bottom: var(--s1); font-size: var(--fs-md); font-weight: 600; color: var(--text); }

.cta__btn::after { content: ""; }
.cta__btn.is-copied::after { content: " \2713"; }

.sources { border-top: var(--border); margin-top: var(--s8); }
.sources > summary {
  display: flex; align-items: center; gap: var(--s3); min-height: 52px; padding: var(--s3) 2px;
  cursor: pointer; list-style: none;
}
.sources > summary::-webkit-details-marker { display: none; }
.sources > summary::after { content: "+"; margin-left: auto; font-family: var(--font-mono); font-size: 1.1rem; color: var(--muted); flex: none; }
.sources[open] > summary::after { content: "\2212"; }
.sources > summary:hover .sources__h, .sources > summary:hover::after { color: var(--text); }
.sources__h { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); margin: 0; }
.sources__n { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
.sources[open] > ol { padding: var(--s2) 0 var(--s4); }
.sources ol { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s3); }
.sources li { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--s3); align-items: baseline; font-size: var(--fs-sm); color: var(--text-2); margin: 0; padding-bottom: var(--s3); border-bottom: 1px solid var(--line-soft); }
.sources li:last-child { border-bottom: 0; }
.sources .val { font-family: var(--font-mono); color: var(--text); font-weight: 500; }
.sources .when { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }

.chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; padding: 3px 10px; border-radius: var(--r-pill); border: 1px solid; }
.chip::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.chip--fresh { color: var(--good);    border-color: color-mix(in srgb, var(--good) 32%, transparent); }
.chip--stale { color: var(--caution); border-color: color-mix(in srgb, var(--caution) 32%, transparent); }
.chip--dead  { color: var(--alert);   border-color: color-mix(in srgb, var(--alert) 32%, transparent); }

.hubs { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1px; background: var(--line); border: var(--border); border-radius: var(--r); overflow: hidden; margin: 0 0 var(--s6); }
.hub { background: var(--surface); padding: var(--s5); text-decoration: none; display: grid; gap: var(--s2); transition: background var(--dur) var(--ease); }
.hub:hover { background: var(--surface-2); }
.hub__name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); color: var(--text); letter-spacing: -.02em; }
.hub__fee { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--accent); font-variant-numeric: tabular-nums; }
.hub__n { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); letter-spacing: .04em; }

.hubs--empty > p { margin: 0; padding: var(--s5); background: var(--surface); color: var(--text-2); }

.faq { display: grid; gap: var(--s5); margin: 0 0 var(--s6); }
.faq__q { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); letter-spacing: -.014em; margin: 0 0 var(--s2); }
.faq__a { margin: 0; color: var(--text-2); }

.foot { border-top: var(--border); margin-top: var(--s9); padding: var(--s5) var(--s5) var(--s8); font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--muted); }
.foot__in { max-width: 780px; margin: 0 auto; display: grid; gap: var(--s4); }
.foot a { color: var(--muted); }
.foot a:hover { color: var(--text); }
.foot__links { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); }
.foot__links a { display: inline-flex; align-items: center; min-height: 44px; }
.foot__disc { max-width: var(--measure); line-height: 1.55; }

.route { display: block; width: 100%; height: auto; opacity: .13; margin: var(--s6) 0; }
.route path { stroke: var(--accent); stroke-width: 2; fill: none; stroke-linecap: round; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--s4); top: var(--s2); z-index: 100; background: var(--accent-solid); color: var(--accent-solid-ink); padding: var(--s2) var(--s4); border-radius: var(--r); font-family: var(--font-mono); font-size: var(--fs-sm); min-height: 44px; display: inline-flex; align-items: center; }

p, li, td, th, .answer, .faq__a, .sources li { overflow-wrap: anywhere; }
h1, h2, h3 { overflow-wrap: break-word; }

.cta__btn { min-height: 44px; }
.cta__copy { min-height: 44px; min-width: 56px; display: inline-flex; align-items: center; justify-content: center; }
.foot a { padding: 4px 0; }

@media (max-width: 720px) {
  .nav { padding: 0 var(--s4); gap: var(--s4); }
  .draft-banner { padding-inline: var(--s4); }
  .page { padding: var(--s6) var(--s4) var(--s8); }

  
  .nav__hubs { margin-inline: calc(var(--s2) * -1); padding-inline: var(--s2); }

  
  .tw {
    margin-inline: calc(var(--s4) * -1);
    border-inline: 0; border-radius: 0;
    padding-inline: 0;
  }
  th, td { padding: var(--s3); }

  
  table { min-width: 520px; }
  th:first-child, td:first-child {
    position: sticky; left: 0; z-index: 1;
    min-width: 136px;
    background: var(--surface);
    box-shadow: 1px 0 0 var(--line-soft);
  }
  th:first-child { background: var(--surface-2); }
  tr.is-best td:first-child {
    background: color-mix(in srgb, var(--accent) 8%, var(--surface));
    box-shadow: inset 2px 0 0 var(--accent), 1px 0 0 var(--line-soft);
  }

  
  .sources li { grid-template-columns: minmax(0, 1fr); gap: var(--s1); }
  .sources .when { justify-self: start; }

  .cta { padding: var(--s4); }
  .cta__row { gap: var(--s2); }
  .cta__btn, .cta__code { width: 100%; justify-content: center; }

  .step { grid-template-columns: 26px minmax(0, 1fr); gap: var(--s3); }
  .hubs { grid-template-columns: minmax(0, 1fr); }
  .meta { gap: var(--s1) var(--s3); }
}

@media (max-width: 380px) {
  
  .page { padding: var(--s5) var(--s3) var(--s7); }
  .tw { margin-inline: calc(var(--s3) * -1); }
  .nav, .draft-banner { padding-inline: var(--s3); }
  h1 { font-size: 1.72rem; }
}

@media (min-width: 1600px) {
  .page { padding-top: var(--s8); }
}

@media (max-height: 480px) and (orientation: landscape) {
  .nav, .draft-banner { position: static; }
}

@media print {
  .nav, .cta__copy { display: none; }
  body { background: #fff; color: #000; }
  .fig video { display: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; }
}

.paa, .next { margin: 56px 0 0; border-top: 1px solid var(--line); padding-top: 28px; }
.paa__h, .next__h { font-size: var(--fs-h2); letter-spacing: var(--track-tight); margin: 0 0 4px; }
.paa__list { margin-top: 18px; border-top: 1px solid var(--line-soft); }
.paa__q { border-bottom: 1px solid var(--line-soft); }
.paa__q > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 52px; padding: 12px 2px; cursor: pointer; list-style: none;
  font-weight: 500; color: var(--text);
}
.paa__q > summary::-webkit-details-marker { display: none; }
.paa__q > summary::after {
  content: "+"; font-family: var(--font-mono); font-size: 1.1rem;
  color: var(--muted); flex: none;
}
.paa__q[open] > summary::after { content: "\2212"; }
.paa__q > summary:hover { color: var(--accent); }
.paa__q > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.paa__a { padding: 0 2px 18px; color: var(--text-2); max-width: 62ch; }
.paa__a > p { margin: 0; }
.paa__more {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--line);
}
.paa__more:hover { border-bottom-color: var(--accent); }

.next__list { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--line-soft); }
.next__list li { margin: 0; border-bottom: 1px solid var(--line-soft); }
.next__list a { display: grid; gap: 4px; min-height: 52px; padding: 14px 2px; color: var(--text); text-decoration: none; }
.next__list a:hover .next__q { color: var(--accent); }
.next__q { font-weight: 500; }
.next__a { font-size: var(--fs-sm); color: var(--text-2); max-width: 62ch; }

.next__tag {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted);
}
button.paa__more { background: none; border-width: 0 0 1px; padding: 0; cursor: pointer; margin-top: 8px; }
button.paa__more:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.paa__a > .paa__list {
  margin: 14px 0 0; border-top: 0;
  border-left: 1px solid var(--line); padding-left: 14px;
}
.paa__a > .paa__list > .paa__q:last-child { border-bottom: 0; }
.paa__a > .paa__list > .paa__q > summary { min-height: 46px; font-size: var(--fs-md); font-weight: 400; }
.paa__up { margin: 18px 0 0; font-family: var(--font-mono); font-size: var(--fs-sm); }
.paa__up a { color: var(--muted); }
.paa__up a:hover { color: var(--text); }

.calc { margin: 28px 0; border: 1px solid var(--line); background: var(--surface); padding: 20px; }
.calc__in { display: grid; gap: 4px; }
.calc__label, .calc__unit {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted);
}
.calc__field { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); }
.calc__field i { font-family: var(--font-mono); color: var(--muted); font-style: normal; }
.calc__field input {
  flex: 1; min-height: 48px; width: 100%; background: none; border: 0; color: var(--text);
  font-family: var(--font-mono); font-size: 1.25rem; font-variant-numeric: tabular-nums;
}
.calc__field input:focus { outline: none; }
.calc__field:focus-within { border-bottom-color: var(--accent); }
.calc__out {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px; margin: 20px 0 0;
}
.calc__out dt {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted);
}
.calc__out dd {
  margin: 4px 0 0; font-family: var(--font-mono); font-size: 1.25rem;
  font-variant-numeric: tabular-nums; color: var(--text);
}
.calc__out .is-good { color: var(--good); }
.calc__note { margin: 18px 0 0; font-size: var(--fs-sm); color: var(--muted); }
@media (max-width: 420px) { .calc__out { grid-template-columns: 1fr; gap: 12px; } }

.idx { list-style: none; margin: 18px 0; padding: 0; border-top: 1px solid var(--line-soft); }
.idx li { border-bottom: 1px solid var(--line-soft); }
.idx a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 52px; padding: 10px 2px; color: var(--text); text-decoration: none;
}
.idx a:hover { color: var(--accent); }
.idx__t {
  flex: none; font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted);
}
.muted { color: var(--muted); }

.editorial-art { width: min(100%, var(--measure-art)); margin: var(--s6) 0; }
.editorial-art img { display: block; width: 100%; height: auto; border-radius: var(--r); }

.byline {
  display: inline-flex; align-items: center; gap: var(--s2);
  height: calc(var(--lh-body) * 1em); height: 1lh;
  color: var(--muted);
  transition: color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease);
}
.byline:hover { color: var(--text); text-decoration-color: currentColor; }
.byline:focus-visible { outline-color: var(--text); }

.byline__face { flex: none; width: 20px; height: 20px; border-radius: calc(var(--r) / 2); }

.portrait { width: min(100%, 320px); margin: var(--s6) 0; }
.portrait__img { display: block; width: 100%; height: auto; border-radius: var(--r); }

.nf { display: flex; align-items: center; gap: var(--s4); margin: 0 0 var(--s5); }
.nf h1 { margin: 0; min-width: 0; }
.nf__face { flex: none; width: 96px; height: 96px; border-radius: var(--r); }
@media (max-width: 720px) { .nf__face { width: 64px; height: 64px; } }

.srch-icon { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.nav .nav__search { gap: 7px; }
.nav__kbd, .srch__keys kbd {
  display: inline-block; min-width: 20px; padding: 3px 5px;
  font: 500 var(--fs-xs)/1 var(--font-mono); text-align: center; color: var(--muted);
  background: var(--surface); border: 1px solid var(--line); border-radius: 3px;
}
@media (hover: none) { .nav__kbd { display: none; } }
@media (max-width: 720px) {
  .nav__hubs { scroll-padding-left: 28px; }
  .nav__links { gap: var(--s2); padding-left: var(--s3); }
  .nav .nav__search { width: 44px; justify-content: center; margin-right: -14px; }
  .nav__search-label, .nav__kbd { display: none; }
}
@media (max-width: 380px) {
  .nav { gap: var(--s3); }
  .nav .nav__search { margin-right: -12px; }
}

html:has(dialog.srch) { scrollbar-gutter: stable; }
html:has(dialog.srch[open]) { overflow: hidden; }
dialog.srch {
  width: min(640px, calc(100% - var(--s5) * 2)); max-width: none;
  height: fit-content; max-height: none;
  margin: 12vh auto auto; padding: 0; border: 0; overflow: visible;
  background: none; color: var(--text);
}
dialog.srch::backdrop { background: color-mix(in srgb, var(--ground, #0A0B0D) 80%, transparent); }
dialog.srch[open], dialog.srch[open]::backdrop { animation: srch-in var(--dur) var(--ease); }
@keyframes srch-in { from { opacity: 0; } }
.srch { --srch-x: var(--s4); }
.srch--page { --srch-x: 0px; margin: 0 0 var(--s6); }
.srch__panel {
  display: grid; max-height: 72vh; max-height: 72dvh;
  grid-template: "bar bar" auto "body body" minmax(0, 1fr) "keys status" auto / minmax(0, 1fr) auto;
  background: var(--surface); border: var(--border); border-radius: var(--r);
}
.srch__bar { grid-area: bar; display: flex; align-items: center; gap: var(--s3); min-height: 56px; padding: 0 var(--s2) 0 var(--s4); border-bottom: var(--border); }
.srch__bar > .srch-icon { color: var(--muted); }
.srch__lbl, dialog .srch__status {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.srch__in {
  flex: 1 1 auto; min-width: 0; height: 48px; margin: 0; padding: 0;
  font: 400 var(--fs-lg)/1.3 var(--font-body); color: var(--text);
  background: none; border: 0; border-radius: 0; -webkit-appearance: none; appearance: none;
}
.srch__in:focus { outline: none; }
.srch__in::placeholder { color: var(--muted); opacity: 1; }
.srch__in::-webkit-search-decoration, .srch__in::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.srch__close {
  flex: none; min-width: 44px; min-height: 44px; padding: 0 var(--s2);
  font: 500 var(--fs-xs)/1 var(--font-mono); letter-spacing: .06em; color: var(--muted);
  background: none; border: 0; border-radius: var(--r); cursor: pointer;
}
.srch__close:hover { color: var(--text); }
@media (hover: hover) and (pointer: fine) {
  .srch__close { min-width: 0; min-height: 0; margin-right: var(--s2); padding: 5px 7px; border: 1px solid var(--line); }
  .srch__close:hover { border-color: var(--muted); }
}
.srch :focus-visible { outline-color: var(--text); }
.srch__body { grid-area: body; overflow-y: auto; overscroll-behavior: contain; padding-bottom: var(--s2); }
.srch__keys, .srch__status {
  margin: 0; padding: var(--s2) var(--srch-x);
  font: var(--fs-xs)/20px var(--font-mono); color: var(--muted);
}
.srch__keys { grid-area: keys; border-top: var(--border); word-spacing: .3em; }
.srch__keys kbd { margin-right: 2px; word-spacing: 0; }
@media (hover: none) { .srch__keys { display: none; } }
dialog .srch__status { grid-area: status; }
@media (hover: hover) {
  dialog .srch__status { position: static; width: auto; height: auto; clip-path: none; border-top: var(--border); }
}
.srch--page .srch__status { padding: var(--s3) 0 0; letter-spacing: .04em; }
.srch--page .srch__status:empty { padding: 0; }

.srch--page .srch__status:has(+ .srch__body > :is(.srch__loose, .srch__none)) {
  position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.srch.is-failed .srch__status {
  grid-area: body; position: static; width: auto; height: auto; clip-path: none; white-space: normal;
  padding: var(--s4) var(--srch-x); border: 0; color: var(--alert); font: var(--fs-md)/1.5 var(--font-body);
}

.srch--page .srch__bar { background: var(--surface); border: var(--border); border-radius: var(--r); padding-right: var(--s4); }
.srch--page .srch__bar:focus-within { border-color: var(--muted); }

.srch__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-soft); }
.srch__opt { margin: 0; border-bottom: 1px solid var(--line-soft); }
.srch__hit {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--s4); align-items: baseline;
  min-height: 52px; padding: var(--s3) var(--srch-x);
  color: var(--text); text-decoration: none;
}
.srch--page .srch__hit { margin: 0 calc(var(--s3) * -1); padding-inline: var(--s3); }
.srch__opt[aria-selected="true"] > .srch__hit { background: var(--surface-2); box-shadow: inset 2px 0 0 var(--text); }
.srch__q { font-weight: 500; line-height: 1.35; }
.srch__t, .srch__venue, .srch__label, .srch__more {
  font: 500 var(--fs-xs)/1.4 var(--font-mono); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted);
}
.srch__t { max-width: 11em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srch__a {
  grid-column: 1 / -1; font-size: var(--fs-sm); line-height: 1.45; color: var(--text-2);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.srch mark { color: var(--text); background: color-mix(in srgb, var(--text) 15%, transparent); border-radius: 2px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 15%, transparent); }
.srch__venue { display: flex; gap: var(--s2); margin: 0; padding: var(--s4) var(--srch-x) var(--s2); color: var(--text-2); }
.srch__n { color: var(--muted); }
.srch__more {
  display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 var(--srch-x);
  background: none; border: 0; border-bottom: 1px solid var(--line-soft); cursor: pointer; text-align: left;
}
.srch__more:hover { color: var(--text); }
.srch__loose { margin: 0; padding: var(--s3) var(--srch-x) 0; font-size: var(--fs-sm); color: var(--muted); }

.srch__empty, .srch__none { display: grid; gap: var(--s5); padding-top: var(--s4); }
.srch__set { display: grid; gap: var(--s2); }
.srch__label, .srch__nothing, .srch__hint { margin: 0; padding: 0 var(--srch-x); }
.srch__nothing { font: 600 var(--fs-h3)/1.25 var(--font-display); letter-spacing: -.014em; overflow-wrap: anywhere; }
.srch__hint { margin-top: calc(var(--s3) * -1); font-size: var(--fs-sm); line-height: 1.5; color: var(--muted); max-width: 60ch; }
.srch__chips { display: flex; flex-wrap: wrap; gap: var(--s2); padding: 0 var(--srch-x); }
.srch__chip {
  min-height: 36px; padding: 0 var(--s3);
  font: var(--fs-sm)/1 var(--font-mono); color: var(--text-2); white-space: nowrap;
  background: none; border: var(--border); border-radius: var(--r); cursor: pointer;
}
.srch__chip:hover { color: var(--text); border-color: var(--muted); }
@media (pointer: coarse) { .srch__chip { min-height: 44px; } }

@media (max-width: 720px), (max-height: 480px) {
  dialog.srch { position: fixed; inset: 0; width: 100%; height: 100vh; height: 100dvh; margin: 0; }
  dialog.srch .srch__panel {
    height: 100%; max-height: none; border: 0; border-radius: 0;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
  }
  dialog.srch .srch__bar { padding-left: var(--s4); padding-right: var(--s1); }
  dialog.srch .srch__body { padding-bottom: calc(50vh + env(safe-area-inset-bottom)); }
  dialog.srch .srch__empty, dialog.srch .srch__none { gap: var(--s4); padding-top: var(--s3); }
  dialog.srch .srch__chips {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-right: 28px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
  dialog.srch .srch__chips::-webkit-scrollbar { display: none; }
}

.nav__arrow {
  flex: 0 0 auto; min-height: 44px; width: 24px; padding: 0;
  font: 400 var(--fs-lg)/1 var(--font-mono); color: var(--muted);
  background: none; border: 0; cursor: pointer;
}
.nav__arrow:hover, .nav__arrow:focus-visible { color: var(--text); }
.nav__arrow[hidden] { display: none; }
@media (hover: none) { .nav__arrow { display: none; } }

.cut-link { display: block; margin-top: var(--s1); font-family: var(--font-mono); font-size: var(--fs-xs); overflow-wrap: anywhere; }

.x-links { display: flex; flex-wrap: wrap; gap: var(--s4); margin: var(--s2) 0; }
.x-link { display: inline-flex; align-items: center; gap: .4em; min-height: 32px; font-family: var(--font-mono); font-size: var(--fs-sm); }
.x-icon { flex: none; }

.author { display: flex; gap: var(--s4); align-items: flex-start; margin: var(--s5) 0 var(--s6); }
.author__img { display: block; width: 48px; height: 48px; border-radius: var(--r); }
.author__text p { margin: 0; }
.author__name { font-weight: 600; }
.author__name a { color: var(--text); }
.author__line { color: var(--muted); font-size: var(--fs-sm); }
.author .x-links { margin: var(--s1) 0 0; }

@media (max-width: 720px) {
  .cut thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .cut, .cut tbody, .cut tr, .cut td { display: block; width: auto; min-width: 0; }
  .cut tr { padding: var(--s3) 0; border-bottom: var(--border); }
  .cut td { border: 0; padding: var(--s1) var(--s4); position: static; box-shadow: none; }
  .cut td:first-child { font-weight: 600; }
  .cut .cut-link { font-weight: 400; }
}