/* Shared responsive composition. Keep data/connection behavior in its own modules. */
:root {
  --maxw: clamp(1344px, 92vw, 2560px);
  --fs-h1: clamp(3.25rem, 6.2vw, 8rem);
  --fs-h2: clamp(2.25rem, 4.1vw, 4.5rem);
  --gutter: clamp(16px, 3.2vw, 64px);
}
@media (min-width: 1600px) {
  html { font-size: clamp(16px, calc(12px + .25vw), 22px); }
}
body { font-size: 1rem; }
.nav-shell { position: relative; gap: 20px; }
.nav-actions { margin-left: auto; flex-shrink: 0; }
.nav-links { gap: clamp(12px, 1.1vw, 24px); flex-shrink: 0; }
.nav-links a { white-space: nowrap; font-size: .75rem; }
.nav-links .mobile-primary { display: none; }
.nav-actions .btn, .motion-control { white-space: nowrap; }
.wordmark { font-size: 1.125rem; }
.btn { font-size: .875rem; min-height: max(44px, 2.75rem); }
.wallet-connect-btn { font-size: .8125rem; min-height: max(44px, 2.75rem); }
.mono-label { font-size: .75rem; }
.motion-control { font-size: .75rem; }
.site-footer { font-size: .75rem; flex-wrap: wrap; }
.footer-social { display: inline-flex; align-items: center; min-height: 44px; color: var(--forest); }
.site-footer p { margin-right: auto; }

/* Hero is sized to its content and the screen height, not a fixed 900px card. */
.hero {
  min-height: min(52rem, calc(100svh - 100px));
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, .7fr);
  gap: clamp(32px, 5vw, 120px);
  align-items: center;
  padding-block: clamp(48px, 6vh, 100px);
}
.hero-deck { max-width: 34rem; font-size: clamp(1rem, 1.4vw, 1.25rem); }
.flight-register {
  width: 100%; max-width: 26rem; justify-self: end;
  margin: 0; align-self: center; padding: clamp(18px, 1.8vw, 32px);
}
.radar { width: min(100%, 17rem); margin: 12px auto 20px; }
.register-row, .register-note { font-size: .75rem; }
.chapter { padding-block: clamp(64px, 6vw, 160px); }
.prose { max-width: 40rem; font-size: 1rem; }
.prose .lead { font-size: 1.25rem; }
.formula dt, .formula dd { font-size: .75rem; }
.section-heading > p { max-width: 27rem; }
.mechanism-board { grid-template-columns: minmax(0,1fr) 44px minmax(0,1fr) 44px minmax(0,1fr) 44px minmax(0,1fr); }
.mech-node { min-width: 0; min-height: 16rem; }
.mech-node h3 { font-size: 1.6rem; }
.mech-node p { font-size: .875rem; }
.mech-link span { font-size: .625rem; }
.specimen-stage { height: clamp(400px, 32vw, 760px); }
.specimen-key { flex-wrap: wrap; font-size: .75rem; line-height: 1.4; }
.specimen-tag, .specimen-state { font-size: .6875rem; }
.principle-list h3 { font-size: 2rem; }
.principle-list p { font-size: .9375rem; }

/* All sections share the same gutters, including the WebGL console. */
.swarm-shell { width: 100%; max-width: var(--maxw); padding-inline: var(--gutter); }
.swarm-heading { grid-template-columns: minmax(0,1.6fr) minmax(250px,.7fr); gap: clamp(24px,4vw,80px); }
.swarm-heading h2 { font-size: clamp(3rem, 6.3vw, 7rem); line-height: .94; }
.swarm-intro { max-width: 28rem; font-size: 1rem; }
.swarm-console { grid-template-columns: minmax(0,1fr) clamp(330px,25vw,27rem); }
.swarm-console > .swarm-viewport { min-height: clamp(560px,45vw,1000px); }
.swarm-kicker, .inspector-head p, .member-index-head, .swarm-footnote,
.scene-readout dt, .readout-title, .rebase-readout dt,
.rebase-readout > p, .prestake-title, .prestake-readout dt,
.prestake-readout dd, .prestake-readout > p { font-size: .75rem; line-height: 1.5; }
.scene-readout dd, .rebase-readout dd { font-size: .8125rem; }
.inspector-head { flex-wrap: wrap; }
.inspector-head h3 { font-size: 1.5rem; }
.scene-readout div, .rebase-readout dl div, .prestake-readout dl div { gap: 12px; }
.prestake-readout > strong { font-size: 1.375rem; }
.pool-meta { flex-wrap: wrap; justify-content: flex-start; }
.pool-meta span { flex-basis: 100%; font-size: .75rem; }
.pool-meta button, .pool-meta a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; font-size: .75rem; }
.pool-meta a { flex-basis: 100%; color: var(--lime); }
.swarm-actions button { font-size: .875rem; min-height: 3.25rem; }
.member-grid { grid-template-columns: repeat(12,minmax(0,1fr)); }
.swarm-view-meta, .swarm-help { font-size: .6875rem; }

/* Pool and machine columns respond to their available width, not unlimited vw gaps. */
.machine-hero { padding-top: clamp(40px,5vh,90px); padding-bottom: clamp(32px,4vw,64px); }
.machine-hero-grid { grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: clamp(32px,5vw,100px); }
.machine-hero h1 { font-size: clamp(3rem,5.6vw,6.3rem); }
.machine-hero aside { max-width: 38rem; font-size: 1rem; }
.machine-pool-grid { grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); }
.machine-pool-copy { padding: clamp(24px,3vw,64px); }
.machine-pool-copy h2 { font-size: clamp(2.5rem,4.2vw,4.5rem); }
.machine-pool-copy > p:not(.mono-label) { max-width: 29rem; }
.pool-instrument { min-width: 0; padding: clamp(24px,3vw,64px); }
.pool-cap > strong { font-size: clamp(2rem,4.5vw,4.5rem); overflow-wrap: anywhere; }
.pool-status-line, .pool-cap span, .pool-cap small,
.pool-instrument dt, .pool-instrument > p { font-size: .75rem; line-height: 1.5; }
.pool-instrument dd { font-size: .8125rem; overflow-wrap: anywhere; }
.pool-controls button, .pool-controls a { font-size: .75rem; }
.pool-instrument dl div { grid-template-columns: minmax(100px,.65fr) minmax(0,1fr); }
.lab-grid { grid-template-columns: minmax(280px,.8fr) minmax(0,1.2fr); }
.machine-card { min-width: 0; padding: clamp(20px,2.2vw,44px); }
.machine-card h2 { font-size: 1.875rem; }
.result-cell { min-width: 0; }
.result-cell strong { font-size: clamp(1.4rem,2.35vw,2.4rem); overflow-wrap: anywhere; }
.control-row label, .result-cell small, .share-line,
.receipt, .history-row, .step-track p { font-size: .75rem; line-height: 1.5; }
.step-track { grid-template-columns: repeat(3,minmax(0,1fr)); }
.step-track article { min-width: 0; padding: clamp(12px,1.2vw,24px); }
.step-track h3 { font-size: 1.1875rem; }
.equation-strip { grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr); }
.equation-strip strong { font-size: 1.125rem; overflow-wrap: anywhere; }
.equation-strip small { font-size: .75rem; }

/* Documentation keeps a readable line length while growing at high resolutions. */
.docs-hero { grid-template-columns: minmax(0,1.4fr) minmax(250px,.6fr); gap: clamp(28px,4vw,80px); padding-top: clamp(48px,5vw,104px); padding-bottom: clamp(40px,4vw,80px); }
.docs-hero h1 { font-size: clamp(3rem,5.4vw,6rem); letter-spacing: -.055em; line-height: .96; }
.docs-notice p:last-child { font-size: .875rem; }
.docs-layout { grid-template-columns: 14rem minmax(0,48rem); justify-content: center; gap: clamp(32px,4vw,100px); }
.docs-content { min-width: 0; max-width: 48rem; }
.doc-section h2 { font-size: clamp(2.5rem,3.5vw,4rem); max-width: 40rem; }
.doc-prose { max-width: 42rem; font-size: 1rem; }
.lead-prose { font-size: 1.0625rem; }
.doc-section { padding-block: clamp(56px,5vw,96px); }
.docs-toc nav a, .signal-label, .signal-card small, .equation-board small,
.worked-example .mono-label, .worked-example dl div, .example-result,
.worked-example > small, .guide-card .mono-label, .guide-card p,
.machine-map p, .control-table span, .control-table b,
.glossary dd, .config-list span, .config-note { font-size: .75rem; }
.docs-toc nav a span, .signal-card strong, .config-list strong, .glossary dt { font-size: .875rem; }
.worked-example h3, .guide-card h3 { font-size: 1.5625rem; }
.dark-example h3 { color: var(--lime); }
.equation-board { grid-template-columns: minmax(0,1fr) auto minmax(0,1.4fr) auto minmax(0,1fr); }
.equation-board > div { min-width: 0; padding: clamp(12px,1.2vw,22px); }
.equation-board strong { font-size: 1rem; overflow-wrap: anywhere; }
.wallet-dialog { width: min(100%,32.5rem); max-height: min(48rem,calc(100dvh - 32px)); }
.wallet-dialog-head h2 { font-size: 1.75rem; }
.wallet-intro, .wallet-guidance { font-size: .875rem; }
.wallet-dialog-head p, .wallet-choice small, .wallet-choice > span:last-child,
.wallet-choice > a, .wallet-message { font-size: .75rem; }
.wallet-choice strong { font-size: 1rem; overflow-wrap: anywhere; }
.wallet-session { flex-wrap: wrap; }

@media (min-width:981px) and (max-width:1420px) {
  .wordmark small, .motion-label { display: none; }
  .nav-shell { gap: 14px; }
  .nav-links { gap: 12px; }
  .nav-actions .btn { gap: 10px; padding-inline: 14px; }
}
@media (max-width:1180px) {
  .nav-links { position:absolute; inset:calc(100% + 8px) 0 auto; max-height:calc(100dvh - 110px); overflow:auto; margin:0; display:none; padding:12px; }
  .nav-links.menu-open { display:grid; }
  .nav-links .mobile-primary { display:flex !important; }
  .nav-links .mobile-wallet { display:flex; }
  .nav-actions { margin-left:auto; }
  .menu-toggle { display:inline-block; }
}
@media (min-width:1181px) {
  .nav-links .mobile-primary, .nav-links .mobile-wallet { display:none !important; }
}
@media (min-width:641px) and (max-width:1100px) {
  .mechanism-board { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; padding:20px; }
  .mechanism-board > .mech-link { display:none; }
  .mechanism-board > .receipt-ticket { position:relative; grid-column:1/-1; inset:auto; width:auto; margin:0; }
}
@media (max-width:1100px) {
  .lower-lab { grid-template-columns:1fr; }
  .swarm-heading { grid-template-columns:1fr; gap:24px; }
  .swarm-intro { max-width:38rem; }
  .member-grid { grid-template-columns:repeat(6,minmax(0,1fr)); }
}
@media (max-width:980px) {
  .section-heading { display:block; }
  .section-heading > p { margin-top:24px; max-width:38rem; }
  .hero { grid-template-columns:minmax(0,1fr) minmax(220px,.65fr); gap:28px; min-height:auto; }
  .hero h1 { font-size:clamp(3rem,6.5vw,4rem); }
  .flight-register { padding:18px; }
  .radar { width:min(100%,180px); }
  .hero-deck { margin-top:24px; font-size:1rem; }
  .machine-hero-grid, .machine-pool-grid, .lab-grid { grid-template-columns:1fr; }
  .machine-pool-copy { min-height:0; border-right:0; border-bottom:1px solid var(--forest); }
  .machine-pool-copy > p:not(.mono-label) { max-width:38rem; }
  .machine-pool-copy .wallet-connect-btn { margin-top:8px; }
  .machine-pool-copy h2 { font-size:clamp(2.6rem,5vw,3.5rem); }
  .swarm-console { display:block; }
  .swarm-console > .swarm-viewport { height:clamp(420px,65vw,620px); min-height:0; }
  .swarm-inspector { border-left:0; border-top:1px solid var(--forest); }
  .docs-hero, .docs-layout { grid-template-columns:1fr; }
  .docs-layout { justify-content:stretch; gap:0; }
  .docs-content { width:100%; margin-inline:auto; }
}
@media (max-width:640px) {
  .hero { grid-template-columns:1fr; padding-block:36px 48px; }
  .hero h1 { font-size:clamp(2.8rem,12.8vw,4.5rem); }
  .hero-deck { margin-block:24px; }
  .flight-register { max-width:none; width:100%; margin-top:4px; }
  .radar { display:none; }
  .register-note { margin-top:12px; }
  .nav-shell { gap:6px; }
  .nav-actions { gap:5px; }
  .nav-actions .wallet-connect-btn { font-size:11px; padding-inline:8px; }
  .motion-control { padding-inline:12px; }
  .mono-label { letter-spacing:.055em; }
  .section-heading { margin-bottom:28px; }
  .mechanism-board { display:block; padding:16px; }
  .mechanism-board .mech-node { min-height:170px; }
  .mechanism-board .mech-link { display:grid; }
  .mech-link span { font-size:11px; }
  .specimen-stage { height:370px; }
  .swarm-heading h2 { font-size:clamp(2.6rem,12vw,4rem); }
  .swarm-console > .swarm-viewport { height:420px; }
  .swarm-view-meta, .swarm-help { font-size:10px; }
  .member-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .pool-status-line { flex-wrap:wrap; gap:8px; }
  .pool-cap > strong { font-size:clamp(2rem,10vw,3rem); }
  .pool-instrument dl div { grid-template-columns:minmax(85px,.65fr) minmax(0,1fr); gap:10px; }
  .result-grid, .step-track, .equation-strip, .equation-board { grid-template-columns:1fr; }
  .equation-strip > span { transform:rotate(90deg); }
  .equation-board > span { transform:none; }
  .equation-board > span:nth-of-type(1) { transform:rotate(90deg); }
  .docs-hero h1 { font-size:clamp(2.4rem,11.5vw,3.2rem); }
  .doc-section h2 { font-size:clamp(2.3rem,10.8vw,3.5rem); }
  .site-footer { display:flex; gap:12px 24px; }
  .site-footer p { order:4; flex-basis:100%; margin:0; }
  .site-footer > a:last-child { margin-left:auto; }
}
@media (min-width:981px) and (max-height:800px) {
  .hero { padding-block:32px; min-height:calc(100svh - 96px); }
  .hero h1 { font-size:clamp(3.4rem,5.5vw,5.5rem); }
  .flight-register { padding:20px; }
  .radar { width:180px; }
  .hero-deck { margin-block:24px; }
}