:root {
      --bg: #ffffff;
      --surface: #f7f7f7;
      --surface-warm: #eeeeee;
      --fg: #111111;
      --fg-2: #3a3a3a;
      --muted: #707070;
      --meta: #111111;
      --border: #d9d9d9;
      --border-soft: #eeeeee;
      --accent: #111111;
      --accent-on: #ffffff;
      --accent-hover: color-mix(in oklab, var(--accent), black 8%);
      --accent-active: color-mix(in oklab, var(--accent), black 14%);
      --success: #168a46;
      --warn: #b7791f;
      --danger: #c53030;
      --font-display: "Helvetica Neue", Arial, sans-serif;
      --font-body: "Helvetica Neue", Arial, sans-serif;
      --font-mono: "SF Mono", ui-monospace, Menlo, monospace;
      --text-xs: 12px;
      --text-sm: 14px;
      --text-base: 16px;
      --text-lg: 18px;
      --text-xl: 24px;
      --text-2xl: 36px;
      --text-3xl: 54px;
      --text-4xl: 76px;
      --leading-body: 1.52;
      --leading-tight: 1.06;
      --tracking-display: -0.025em;
      --space-1: 4px;
      --space-2: 8px;
      --space-3: 12px;
      --space-4: 16px;
      --space-5: 20px;
      --space-6: 24px;
      --space-8: 32px;
      --space-12: 48px;
      --section-y-desktop: 96px;
      --section-y-tablet: 68px;
      --section-y-phone: 48px;
      --radius-sm: 4px;
      --radius-md: 8px;
      --radius-lg: 12px;
      --radius-pill: 9999px;
      --elev-flat: none;
      --elev-ring: 0 0 0 1px var(--border);
      --elev-raised: 0 16px 40px rgba(0, 0, 0, 0.10);
      --focus-ring: 0 0 0 3px rgba(17, 17, 17, 0.18);
      --motion-fast: 150ms;
      --motion-base: 240ms;
      --ease-standard: cubic-bezier(0.2, 0, 0, 1);
      --container-max: 1180px;
      --container-gutter-desktop: 36px;
      --container-gutter-tablet: 24px;
      --container-gutter-phone: 16px;
    }

    *, *::before, *::after { box-sizing: border-box; }
    html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
    html, body { overflow-x: clip; }
    body {
      margin: 0;
      background:
        radial-gradient(circle at 15% 8%, color-mix(in oklab, var(--surface-warm), transparent 20%), transparent 32vw),
        radial-gradient(circle at 85% 18%, color-mix(in oklab, var(--surface), transparent 12%), transparent 34vw),
        var(--bg);
      color: var(--fg);
      font-family: var(--font-body);
      font-size: var(--text-base);
      line-height: var(--leading-body);
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
    }
    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      opacity: 0.07;
      mix-blend-mode: multiply;
      background-image:
        repeating-linear-gradient(90deg, color-mix(in oklab, var(--fg), transparent 94%) 0 1px, transparent 1px 8px),
        repeating-linear-gradient(0deg, color-mix(in oklab, var(--fg), transparent 97%) 0 1px, transparent 1px 10px);
      z-index: 0;
    }
    a { color: inherit; text-decoration: none; }
    button, input { font: inherit; }
    button { cursor: pointer; }
    p, h1, h2, h3, blockquote { margin: 0; }
    p { text-wrap: pretty; }
    h1, h2, h3 { font-family: var(--font-display); text-wrap: balance; }
    main, header, footer, .rail { position: relative; z-index: 1; }

    .container {
      max-width: var(--container-max);
      margin-inline: auto;
      padding-inline: var(--container-gutter-desktop);
    }
    .meta-strip {
      border-bottom: 1px solid var(--border);
      background: color-mix(in oklab, var(--bg), transparent 4%);
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.06em;
      color: var(--muted);
      text-transform: uppercase;
    }
    .meta-strip .container {
      min-height: 34px;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: var(--space-4);
    }
    .meta-strip span:last-child { text-align: right; }
    .pulse {
      width: 6px;
      height: 6px;
      display: inline-block;
      border-radius: var(--radius-pill);
      background: var(--success);
      margin-right: var(--space-2);
      animation: pulse 2.4s ease-in-out infinite;
      vertical-align: middle;
    }
    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.35; }
    }
    .topnav {
      position: sticky;
      top: 0;
      z-index: 20;
      background: color-mix(in oklab, var(--bg), transparent 6%);
      border-bottom: 1px solid var(--border);
      backdrop-filter: blur(12px);
    }
    .topnav-inner {
      min-height: 68px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-6);
    }
    .logo {
      font-family: var(--font-display);
      font-size: var(--text-lg);
      font-weight: 800;
      letter-spacing: var(--tracking-display);
      text-transform: uppercase;
    }
    .logo i {
      font-family: Georgia, serif;
      font-style: italic;
      font-weight: 500;
    }
    .topnav nav {
      display: flex;
      align-items: center;
      gap: var(--space-6);
      color: var(--muted);
      font-size: var(--text-sm);
    }
    .topnav nav a { transition: color var(--motion-fast) var(--ease-standard); }
    .topnav nav a:hover { color: var(--fg); }
    .nav-toggle {
      display: none;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      font-size: 22px;
      line-height: 1;
      background: transparent;
      border: 1px solid var(--border);
      border-radius: var(--radius-pill);
      color: var(--fg);
      cursor: pointer;
    }
    .nav-toggle[aria-expanded="true"] { background: var(--fg); color: #fff; }
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-2);
      min-height: 44px;
      padding: 12px 20px;
      border: 1px solid var(--border);
      border-radius: var(--radius-pill);
      background: transparent;
      color: var(--fg);
      font-weight: 700;
      font-size: var(--text-sm);
      transition: transform var(--motion-fast) var(--ease-standard), background var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard);
    }
    .btn:hover { transform: translateY(-1px); border-color: var(--fg); }
    .btn-primary {
      background: var(--accent);
      border-color: var(--accent);
      color: var(--accent-on);
    }
    .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

    .rail {
      position: fixed;
      top: 0;
      bottom: 0;
      width: 36px;
      border-inline: 1px solid var(--border-soft);
      display: grid;
      place-items: center;
      pointer-events: none;
      color: var(--muted);
      font-family: var(--font-display);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.42em;
      text-transform: uppercase;
    }
    .rail-left { left: 0; }
    .rail-right { right: 0; }
    .rail span { transform: rotate(-90deg); white-space: nowrap; }

    .section {
      padding-block: var(--section-y-desktop);
      border-bottom: 1px solid var(--border);
    }
    .sec-rule {
      display: grid;
      grid-template-columns: 96px 1fr 96px;
      gap: var(--space-4);
      align-items: center;
      padding-top: var(--space-4);
      border-top: 1px solid var(--fg);
      margin-bottom: var(--space-12);
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.08em;
      color: var(--muted);
      text-transform: uppercase;
    }
    .sec-rule strong {
      color: var(--fg);
      font-family: Georgia, serif;
      font-style: italic;
      font-weight: 500;
      letter-spacing: 0;
      text-transform: none;
    }
    .sec-rule span:nth-child(2) { text-align: center; }
    .sec-rule span:last-child { text-align: right; }

    .hero {
      min-height: calc(100vh - 102px);
      display: grid;
      align-items: center;
      padding-block: clamp(64px, 8vw, 116px);
    }
    .hero-grid {
      display: grid;
      grid-template-columns: 0.82fr 1.18fr;
      gap: clamp(36px, 5vw, 76px);
      align-items: center;
    }
    .eyebrow {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      margin-bottom: var(--space-5);
      color: var(--fg);
      font-family: var(--font-display);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.22em;
      text-transform: uppercase;
    }
    .eyebrow::before {
      content: "";
      width: 18px;
      height: 1px;
      background: var(--fg);
    }
    h1 {
      font-size: clamp(42px, 7.2vw, var(--text-4xl));
      line-height: 0.98;
      letter-spacing: var(--tracking-display);
      font-weight: 900;
      overflow-wrap: anywhere;
    }
    h1 i, h2 i {
      font-family: Georgia, serif;
      font-style: italic;
      font-weight: 500;
      letter-spacing: -0.02em;
    }
    h1 i {
      font-family: var(--font-display);
      font-style: normal;
      font-weight: 900;
      letter-spacing: var(--tracking-display);
    }
    .dot { font-family: Georgia, serif; font-style: italic; }
    .lead {
      max-width: 58ch;
      margin-top: var(--space-6);
      color: var(--fg-2);
      font-size: clamp(17px, 1.7vw, 21px);
      line-height: 1.62;
    }
    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-3);
      margin-top: var(--space-8);
    }
    .hero-actions .btn {
      flex: 0 1 auto;
    }
    .collage {
      position: relative;
      min-height: min(620px, calc(100vh - 180px));
      width: 100%;
      background:
        linear-gradient(135deg, color-mix(in oklab, var(--surface), transparent 4%), color-mix(in oklab, var(--surface-warm), transparent 8%));
      border: 1px solid var(--border);
      overflow: hidden;
      box-shadow: var(--elev-raised);
    }
    .collage::before,
    .collage::after {
      content: "";
      position: absolute;
      border: 1px solid var(--fg);
      opacity: 0.22;
    }
    .collage::before {
      inset: 28px;
      border-right: 0;
      border-bottom: 0;
    }
    .collage::after {
      right: 28px;
      bottom: 28px;
      width: 40%;
      height: 44%;
      border-left: 0;
      border-top: 0;
    }
    .hero-visual {
      display: grid;
      place-items: center;
      min-height: auto;
      padding: clamp(12px, 2vw, 24px);
    }
    .hero-visual::before,
    .hero-visual::after {
      display: none;
    }
    .hero-visual-image {
      display: block;
      width: min(100%, 1254px);
      max-width: 100%;
      height: auto;
      object-fit: contain;
      border: 0;
    }
    .plate {
      position: absolute;
      border: 1px solid var(--border);
      background: var(--bg);
      color: var(--fg);
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: var(--space-2) var(--space-3);
      z-index: 3;
    }
    .plate-a { left: 34px; top: 34px; }
    .plate-b { right: 34px; bottom: 34px; }
    .support-map {
      position: absolute;
      inset: 72px 38px 48px 38px;
      color: var(--fg);
      z-index: 1;
    }
    .support-map path,
    .support-map line,
    .support-map circle {
      vector-effect: non-scaling-stroke;
    }
    .paper-sheet,
    .station,
    .track,
    .rhythm-gauge,
    .consult-card {
      position: absolute;
      z-index: 2;
      border: 1px solid var(--fg);
      background: color-mix(in oklab, var(--bg), var(--surface) 28%);
      box-shadow: 12px 18px 0 color-mix(in oklab, var(--fg), transparent 94%);
    }
    .paper-sheet {
      width: 31%;
      min-height: 134px;
      padding: var(--space-4);
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.08em;
      line-height: 1.7;
      text-transform: uppercase;
      color: var(--muted);
    }
    .paper-sheet strong,
    .station strong,
    .track strong,
    .consult-card strong {
      display: block;
      color: var(--fg);
      font-family: var(--font-display);
      font-size: var(--text-xl);
      line-height: 1.05;
      letter-spacing: var(--tracking-display);
      text-transform: none;
    }
    .paper-sheet em {
      display: block;
      margin-top: var(--space-3);
      color: var(--fg-2);
      font-family: Georgia, serif;
      font-size: var(--text-lg);
      font-style: italic;
      letter-spacing: 0;
      text-transform: none;
    }
    .sheet-contract {
      left: 8%;
      top: 22%;
      transform: rotate(-7deg);
    }
    .sheet-margin {
      right: 6%;
      bottom: 11%;
      transform: rotate(5deg);
    }
    .station {
      left: 38%;
      top: 16%;
      width: 22%;
      min-width: 124px;
      padding: var(--space-4);
      border-radius: 50% 50% 46% 46%;
      aspect-ratio: 1;
      display: grid;
      place-items: center;
      text-align: center;
    }
    .station span,
    .track span,
    .consult-card span {
      display: block;
      margin-top: var(--space-2);
      color: var(--muted);
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.05em;
      line-height: 1.45;
      text-transform: uppercase;
    }
    .track {
      width: 25%;
      min-width: 132px;
      padding: var(--space-4);
    }
    .track-a {
      right: 9%;
      top: 35%;
      border-radius: 999px 999px 0 0;
    }
    .track-b {
      left: 15%;
      bottom: 16%;
      border-radius: 0 0 999px 999px;
    }
    .track-a::after,
    .track-b::after {
      content: "";
      position: absolute;
      width: 8px;
      height: 8px;
      border-radius: var(--radius-pill);
      background: var(--fg);
    }
    .track-a::after { left: -5px; top: 50%; }
    .track-b::after { right: -5px; top: 50%; }
    .rhythm-gauge {
      left: 38%;
      bottom: 14%;
      width: 18%;
      min-width: 108px;
      padding: var(--space-3);
      box-shadow: none;
    }
    .rhythm-gauge span {
      display: block;
      height: 10px;
      margin-top: var(--space-2);
      background: repeating-linear-gradient(90deg, var(--fg) 0 12px, transparent 12px 20px);
    }
    .rhythm-gauge b {
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.08em;
      color: var(--muted);
      text-transform: uppercase;
    }
    .consult-card {
      right: 6%;
      top: 58%;
      width: 24%;
      min-width: 142px;
      padding: var(--space-4);
      transform: rotate(-2deg);
    }
    .small-figure {
      position: absolute;
      left: 47%;
      bottom: 25%;
      width: 24px;
      height: 88px;
      z-index: 4;
    }
    .small-figure::before {
      content: "";
      position: absolute;
      top: 0;
      left: 6px;
      width: 12px;
      height: 12px;
      border-radius: var(--radius-pill);
      background: var(--fg);
    }
    .small-figure::after {
      content: "";
      position: absolute;
      top: 16px;
      left: 9px;
      width: 6px;
      height: 70px;
      background: var(--fg);
    }
    .index-card {
      position: absolute;
      right: -1px;
      top: 92px;
      width: 156px;
      background: var(--bg);
      border: 1px solid var(--fg);
      z-index: 5;
      padding: var(--space-4);
      font-family: var(--font-mono);
      font-size: 10px;
      text-transform: uppercase;
    }
    .index-card p + p { margin-top: var(--space-2); color: var(--muted); }
    .index-card b { font-family: Georgia, serif; font-style: italic; margin-right: var(--space-2); }

    .two-col {
      display: grid;
      grid-template-columns: 0.74fr 1.26fr;
      gap: clamp(32px, 6vw, 86px);
      align-items: start;
    }
    h2 {
      font-size: clamp(34px, 4.8vw, 62px);
      line-height: 1.02;
      letter-spacing: var(--tracking-display);
      font-weight: 900;
    }
    .body-copy {
      color: var(--fg-2);
      font-size: var(--text-lg);
      line-height: 1.7;
    }
    .body-copy p + p { margin-top: var(--space-5); }
    .chapter-note {
      margin-top: var(--space-8);
      border-top: 1px solid var(--border);
      padding-top: var(--space-5);
      color: var(--muted);
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      line-height: 1.7;
    }

    .comparison {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-5);
    }
    .type-card {
      border: 1px solid var(--fg);
      background: var(--bg);
      padding: clamp(22px, 3vw, 32px);
      min-height: 460px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .type-card header {
      display: flex;
      justify-content: space-between;
      gap: var(--space-4);
      align-items: baseline;
      border-bottom: 1px solid var(--border);
      padding-bottom: var(--space-5);
      margin-bottom: var(--space-6);
    }
    .type-card h3 {
      font-size: clamp(38px, 5vw, 70px);
      line-height: 0.95;
      letter-spacing: var(--tracking-display);
      font-weight: 900;
    }
    .type-card .roman {
      font-family: Georgia, serif;
      font-style: italic;
      color: var(--muted);
      font-size: var(--text-xl);
    }
    .type-list {
      display: grid;
      gap: var(--space-4);
      padding: 0;
      margin: 0;
      list-style: none;
    }
    .type-list li {
      display: grid;
      grid-template-columns: 110px 1fr;
      gap: var(--space-4);
      padding-block: var(--space-3);
      border-bottom: 1px solid var(--border-soft);
    }
    .type-list b {
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.08em;
      color: var(--muted);
      text-transform: uppercase;
    }
    .type-list span { color: var(--fg-2); }
    .caption {
      color: var(--muted);
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      line-height: 1.7;
    }

    .temperature {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: var(--space-4);
    }
    .temp-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: var(--space-6);
      min-height: 260px;
      transition: transform var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard);
    }
    .temp-card:hover {
      transform: translateY(-3px);
      box-shadow: var(--elev-raised);
    }
    .temp-card .num {
      font-family: Georgia, serif;
      font-size: var(--text-xl);
      font-style: italic;
      color: var(--muted);
    }
    .temp-card h3 {
      margin-top: var(--space-5);
      font-size: var(--text-xl);
      letter-spacing: -0.01em;
    }
    .temp-card p {
      margin-top: var(--space-4);
      color: var(--fg-2);
    }

    .timeline {
      display: grid;
      gap: 0;
      border-top: 1px solid var(--fg);
    }
    .time-row {
      display: grid;
      grid-template-columns: 140px 1fr 180px;
      gap: var(--space-6);
      align-items: baseline;
      padding-block: var(--space-5);
      border-bottom: 1px solid var(--border);
    }
    .time-row .meta {
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      color: var(--muted);
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }
    .time-row h3 { font-size: var(--text-xl); }
    .time-row p {
      margin-top: var(--space-1);
      color: var(--fg-2);
    }
    .tag {
      justify-self: end;
      display: inline-flex;
      border: 1px solid var(--border);
      border-radius: var(--radius-pill);
      padding: var(--space-2) var(--space-4);
      color: var(--muted);
      font-size: var(--text-xs);
      white-space: nowrap;
    }

    .chooser {
      display: grid;
      grid-template-columns: 0.9fr 1.1fr;
      gap: var(--space-8);
      align-items: stretch;
    }
    .question-panel {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: var(--space-6);
    }
    .choice {
      width: 100%;
      display: flex;
      align-items: flex-start;
      gap: var(--space-3);
      padding: var(--space-4);
      margin-top: var(--space-3);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      background: var(--bg);
      color: var(--fg);
      text-align: left;
      transition: border-color var(--motion-fast) var(--ease-standard), background var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
    }
    .choice:hover { border-color: var(--fg); transform: translateY(-1px); }
    .choice[aria-pressed="true"] {
      border-color: var(--fg);
      background: color-mix(in oklab, var(--surface-warm), var(--bg) 45%);
    }
    .choice .mark {
      flex: 0 0 auto;
      width: 28px;
      height: 28px;
      border: 1px solid var(--fg);
      border-radius: var(--radius-pill);
      display: grid;
      place-items: center;
      font-family: var(--font-mono);
      font-size: 10px;
    }
    .choice span:last-child { color: var(--fg-2); }
    .result-panel {
      border: 1px solid var(--fg);
      background: var(--bg);
      padding: clamp(24px, 4vw, 40px);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 460px;
    }
    .result-kicker {
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--muted);
    }
    .result-title {
      margin-top: var(--space-5);
      font-size: clamp(34px, 5vw, 58px);
      line-height: 1.02;
      letter-spacing: var(--tracking-display);
      font-weight: 900;
    }
    .result-text {
      margin-top: var(--space-5);
      color: var(--fg-2);
      font-size: var(--text-lg);
      line-height: 1.7;
    }
    .result-actions {
      margin-top: var(--space-8);
      display: grid;
      gap: var(--space-3);
    }
    .next-card {
      border-top: 1px solid var(--border);
      padding-top: var(--space-4);
      color: var(--fg-2);
    }

    .sources {
      display: grid;
      gap: var(--space-3);
      color: var(--fg-2);
      font-size: var(--text-sm);
    }
    .sources a {
      border-bottom: 1px solid var(--border);
      padding-bottom: var(--space-2);
    }
    .sources a:hover { border-color: var(--fg); }
    .pagefoot {
      padding-block: var(--space-12);
      background: var(--fg);
      color: var(--accent-on);
      overflow: hidden;
    }
    .footer-word {
      font-family: var(--font-display);
      font-size: clamp(54px, 13vw, 180px);
      line-height: 0.86;
      letter-spacing: var(--tracking-display);
      font-weight: 900;
      text-transform: uppercase;
      overflow-wrap: anywhere;
    }
    .footer-meta {
      margin-top: var(--space-8);
      display: flex;
      justify-content: space-between;
      gap: var(--space-5);
      color: color-mix(in oklab, var(--accent-on), transparent 32%);
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      letter-spacing: 0.04em;
    }

    @media (max-width: 1280px) {
      .rail { display: none; }
      .container { padding-inline: var(--container-gutter-tablet); }
    }
    @media (max-width: 920px) {
      .meta-strip .container { grid-template-columns: 1fr; padding-block: var(--space-2); }
      .meta-strip span, .meta-strip span:last-child { text-align: left; }
      .topnav nav { display: none; }
      .nav-toggle { display: inline-flex; }
      .topnav nav.nav-open {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-2);
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--bg);
        border-bottom: 1px solid var(--border);
        padding: var(--space-4) var(--container-gutter-phone);
        box-shadow: 0 8px 24px rgba(0,0,0,.08);
      }
      .topnav nav.nav-open a { padding: var(--space-2) 0; font-size: var(--text-base); }
      .hero-grid, .two-col, .comparison, .temperature, .chooser { grid-template-columns: 1fr; }
      .hero { min-height: auto; }
      .collage { min-height: 520px; }
      .hero-visual { min-height: auto; }
      .time-row { grid-template-columns: 1fr; gap: var(--space-2); }
      .tag { justify-self: start; }
      .sec-rule { grid-template-columns: 1fr; gap: var(--space-2); }
      .sec-rule span, .sec-rule span:nth-child(2), .sec-rule span:last-child { text-align: left; }
    }
    @media (max-width: 560px) {
      .container { padding-inline: var(--container-gutter-phone); }
      .section { padding-block: var(--section-y-phone); }
      .topnav-inner { min-height: 60px; }
      .topnav .btn { display: none; }
      h1 { font-size: 39px; }
      .hero-actions { flex-direction: column; }
      .btn { width: 100%; }
      .collage { min-height: 420px; }
      .hero-visual { min-height: auto; padding: var(--space-3); }
      .support-map { inset: 70px 18px 42px 18px; }
      .paper-sheet { width: 40%; min-height: 108px; padding: var(--space-3); }
      .paper-sheet strong,
      .station strong,
      .track strong,
      .consult-card strong { font-size: 20px; }
      .paper-sheet em { font-size: 15px; }
      .sheet-contract { left: 5%; top: 20%; }
      .sheet-margin { right: 4%; bottom: 9%; }
      .station { left: 34%; top: 15%; min-width: 106px; }
      .track { min-width: 116px; padding: var(--space-3); }
      .track-a { right: 5%; top: 38%; }
      .track-b { left: 7%; bottom: 18%; }
      .rhythm-gauge { left: 36%; bottom: 13%; min-width: 96px; }
      .consult-card { right: 4%; top: 57%; min-width: 122px; padding: var(--space-3); }
      .index-card { width: 132px; top: 72px; }
      .type-list li { grid-template-columns: 1fr; gap: var(--space-1); }
      .result-panel { min-height: auto; }
      .result-title { font-size: 32px; overflow-wrap: anywhere; }
      .footer-word { font-size: 45px; }
      .footer-meta { flex-direction: column; }
    }
  
/* === article/cluster shared classes (transpiled from existing articles) === */
:root{--bg:#fff;--surface:#f7f7f7;--fg:#111;--fg-2:#333;--muted:#707070;--border:#d9d9d9;--soft:#eee;--max:1080px}*{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}body{margin:0;background:var(--bg);color:var(--fg);font-family:"Helvetica Neue",Arial,sans-serif;line-height:1.74}a{color:inherit;text-decoration:none}p,h1,h2,h3{margin:0}.meta-strip{border-bottom:1px solid var(--border);color:var(--muted);font:10px/1.4 "SF Mono",ui-monospace,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase}.wrap{max-width:var(--max);margin:auto;padding-inline:32px}.meta-strip .wrap{min-height:34px;display:flex;align-items:center;justify-content:space-between;gap:16px}.topnav{position:sticky;top:0;z-index:2;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}.topnav .wrap{min-height:66px;display:flex;align-items:center;justify-content:space-between;gap:24px}.logo{font-weight:900;letter-spacing:-.02em;text-transform:uppercase}.logo i{font-family:Georgia,serif;font-weight:500}nav{display:flex;gap:20px;color:var(--muted);font-size:14px}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:10px 18px;border:1px solid var(--fg);border-radius:999px;font-weight:700;font-size:14px}.btn.primary{background:var(--fg);color:#fff}.hero{padding:72px 0 56px;border-bottom:1px solid var(--border)}.eyebrow{font:700 11px/1.4 "SF Mono",ui-monospace,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}h1{font-size:clamp(38px,6vw,72px);line-height:1.02;letter-spacing:-.025em;font-weight:900;max-width:940px}.lead{margin-top:22px;max-width:780px;color:var(--fg-2);font-size:clamp(17px,2vw,21px)}.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}.section{padding:64px 0;border-bottom:1px solid var(--border)}.rule{display:grid;grid-template-columns:80px 1fr auto;gap:16px;border-top:1px solid var(--fg);padding-top:12px;margin-bottom:34px;color:var(--muted);font:10px/1.4 "SF Mono",ui-monospace,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase}h2{font-size:clamp(28px,4vw,48px);line-height:1.08;letter-spacing:-.02em;margin-bottom:20px}h3{font-size:22px;line-height:1.25;margin-bottom:10px}.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.card{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:22px}.card p,.body p,li{color:var(--fg-2)}.body{max-width:850px}.body p+p{margin-top:18px}.table-wrap{overflow:auto;border:1px solid var(--border);border-radius:8px;background:#fff;margin-bottom:24px}table{width:100%;border-collapse:collapse;min-width:760px}th,td{padding:14px;border-bottom:1px solid var(--soft);vertical-align:top;text-align:left}th{background:var(--surface);font-size:14px}.note{border-left:3px solid var(--fg);background:var(--surface);padding:18px;color:var(--fg-2)}.sourcebox a{display:block;border-bottom:1px solid var(--soft);padding:10px 0;color:var(--fg-2);overflow-wrap:anywhere}.faq details{border-top:1px solid var(--border);padding:16px 0}.faq summary{cursor:pointer;font-weight:800}.related{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.related a{border:1px solid var(--border);border-radius:8px;padding:14px;background:#fff;font-weight:700}footer{padding:48px 0;background:#111;color:#fff}footer p{color:rgba(255,255,255,.7)}@media(max-width:800px){.wrap{padding-inline:18px}nav{display:none}.meta-strip .wrap{align-items:flex-start;flex-direction:column;padding-block:8px}.rule{grid-template-columns:1fr}.grid,.related{grid-template-columns:1fr}.hero{padding-top:48px}}
:root{--bg:#fff;--surface:#f7f7f7;--fg:#111;--fg-2:#333;--muted:#707070;--border:#d9d9d9;--soft:#eee;--max:1080px}*{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}body{margin:0;background:var(--bg);color:var(--fg);font-family:"Helvetica Neue",Arial,sans-serif;line-height:1.74}a{color:inherit;text-decoration:none}p,h1,h2,h3{margin:0}.meta-strip{border-bottom:1px solid var(--border);color:var(--muted);font:10px/1.4 "SF Mono",ui-monospace,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase}.wrap{max-width:var(--max);margin:auto;padding-inline:32px}.meta-strip .wrap{min-height:34px;display:flex;align-items:center;justify-content:space-between;gap:16px}.topnav{position:sticky;top:0;z-index:2;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}.topnav .wrap{min-height:66px;display:flex;align-items:center;justify-content:space-between;gap:24px}.logo{font-weight:900;letter-spacing:-.02em;text-transform:uppercase}.logo i{font-family:Georgia,serif;font-weight:500}nav{display:flex;gap:20px;color:var(--muted);font-size:14px}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:10px 18px;border:1px solid var(--fg);border-radius:999px;font-weight:700;font-size:14px}.btn.primary{background:var(--fg);color:#fff}.hero{padding:72px 0 56px;border-bottom:1px solid var(--border)}.eyebrow{font:700 11px/1.4 "SF Mono",ui-monospace,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}h1{font-size:clamp(38px,6vw,72px);line-height:1.02;letter-spacing:-.025em;font-weight:900;max-width:940px}.lead{margin-top:22px;max-width:780px;color:var(--fg-2);font-size:clamp(17px,2vw,21px)}.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}.section{padding:64px 0;border-bottom:1px solid var(--border)}.rule{display:grid;grid-template-columns:80px 1fr auto;gap:16px;border-top:1px solid var(--fg);padding-top:12px;margin-bottom:34px;color:var(--muted);font:10px/1.4 "SF Mono",ui-monospace,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase}h2{font-size:clamp(28px,4vw,48px);line-height:1.08;letter-spacing:-.02em;margin-bottom:20px}h3{font-size:22px;line-height:1.25;margin-bottom:10px}.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.card{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:22px}.card p,.body p,li{color:var(--fg-2)}.body{max-width:850px}.body p+p{margin-top:18px}.table-wrap{overflow:auto;border:1px solid var(--border);border-radius:8px;background:#fff;margin-bottom:24px}table{width:100%;border-collapse:collapse;min-width:760px}th,td{padding:14px;border-bottom:1px solid var(--soft);vertical-align:top;text-align:left}th{background:var(--surface);font-size:14px}.note{border-left:3px solid var(--fg);background:var(--surface);padding:18px;color:var(--fg-2)}.sourcebox a{display:block;border-bottom:1px solid var(--soft);padding:10px 0;color:var(--fg-2);overflow-wrap:anywhere}.faq details{border-top:1px solid var(--border);padding:16px 0}.faq summary{cursor:pointer;font-weight:800}.related{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.related a{border:1px solid var(--border);border-radius:8px;padding:14px;background:#fff;font-weight:700}footer{padding:48px 0;background:#111;color:#fff}footer p{color:rgba(255,255,255,.7)}@media(max-width:800px){.wrap{padding-inline:18px}nav{display:none}.meta-strip .wrap{align-items:flex-start;flex-direction:column;padding-block:8px}.rule{grid-template-columns:1fr}.grid,.related{grid-template-columns:1fr}.hero{padding-top:48px}}
:root{--bg:#fff;--surface:#f7f7f7;--fg:#111;--fg-2:#333;--muted:#707070;--border:#d9d9d9;--soft:#eee;--max:1080px}*{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}body{margin:0;background:var(--bg);color:var(--fg);font-family:"Helvetica Neue",Arial,sans-serif;line-height:1.74}a{color:inherit;text-decoration:none}p,h1,h2,h3{margin:0}.meta-strip{border-bottom:1px solid var(--border);color:var(--muted);font:10px/1.4 "SF Mono",ui-monospace,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase}.wrap{max-width:var(--max);margin:auto;padding-inline:32px}.meta-strip .wrap{min-height:34px;display:flex;align-items:center;justify-content:space-between;gap:16px}.topnav{position:sticky;top:0;z-index:2;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}.topnav .wrap{min-height:66px;display:flex;align-items:center;justify-content:space-between;gap:24px}.logo{font-weight:900;letter-spacing:-.02em;text-transform:uppercase}.logo i{font-family:Georgia,serif;font-weight:500}nav{display:flex;gap:20px;color:var(--muted);font-size:14px}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:10px 18px;border:1px solid var(--fg);border-radius:999px;font-weight:700;font-size:14px}.btn.primary{background:var(--fg);color:#fff}.hero{padding:72px 0 56px;border-bottom:1px solid var(--border)}.eyebrow{font:700 11px/1.4 "SF Mono",ui-monospace,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}h1{font-size:clamp(38px,6vw,72px);line-height:1.02;letter-spacing:-.025em;font-weight:900;max-width:940px}.lead{margin-top:22px;max-width:780px;color:var(--fg-2);font-size:clamp(17px,2vw,21px)}.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}.section{padding:64px 0;border-bottom:1px solid var(--border)}.rule{display:grid;grid-template-columns:80px 1fr auto;gap:16px;border-top:1px solid var(--fg);padding-top:12px;margin-bottom:34px;color:var(--muted);font:10px/1.4 "SF Mono",ui-monospace,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase}h2{font-size:clamp(28px,4vw,48px);line-height:1.08;letter-spacing:-.02em;margin-bottom:20px}h3{font-size:22px;line-height:1.25;margin-bottom:10px}.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.card{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:22px}.card p,.body p,li{color:var(--fg-2)}.body{max-width:850px}.body p+p{margin-top:18px}.table-wrap{overflow:auto;border:1px solid var(--border);border-radius:8px;background:#fff;margin-bottom:24px}table{width:100%;border-collapse:collapse;min-width:760px}th,td{padding:14px;border-bottom:1px solid var(--soft);vertical-align:top;text-align:left}th{background:var(--surface);font-size:14px}.note{border-left:3px solid var(--fg);background:var(--surface);padding:18px;color:var(--fg-2)}.sourcebox a{display:block;border-bottom:1px solid var(--soft);padding:10px 0;color:var(--fg-2);overflow-wrap:anywhere}.faq details{border-top:1px solid var(--border);padding:16px 0}.faq summary{cursor:pointer;font-weight:800}.related{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.related a{border:1px solid var(--border);border-radius:8px;padding:14px;background:#fff;font-weight:700}footer{padding:48px 0;background:#111;color:#fff}footer p{color:rgba(255,255,255,.7)}@media(max-width:800px){.wrap{padding-inline:18px}nav{display:none}.meta-strip .wrap{align-items:flex-start;flex-direction:column;padding-block:8px}.rule{grid-template-columns:1fr}.grid,.related{grid-template-columns:1fr}.hero{padding-top:48px}}

/* === layout: header / footer / breadcrumb (rebuild) === */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--fg);color:#fff;padding:10px 16px;z-index:1000}
.skip-link:focus{left:8px;top:8px}
.breadcrumb{padding-top:14px;padding-bottom:0;display:block}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;font-size:13px;color:var(--muted)}
.breadcrumb li:not(:last-child)::after{content:"›";margin-left:8px;color:var(--border)}
.breadcrumb a{color:var(--muted)}
.breadcrumb [aria-current="page"]{color:var(--fg)}
.article-main{min-height:40vh}
.site-footer{background:#111;color:#fff;padding:48px 0;margin-top:64px}
.footer-disclaimer{color:rgba(255,255,255,.7);max-width:80ch;font-size:13px;line-height:1.7}
.footer-nav{display:flex;flex-wrap:wrap;gap:14px;margin:20px 0;font-size:13px}
.footer-nav a{color:rgba(255,255,255,.85)}
.footer-meta{color:rgba(255,255,255,.5);font-size:12px}

/* === home / hub cards === */
.hub-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.hub-card{display:flex;flex-direction:column;gap:8px;color:var(--fg);min-height:150px}
.hub-card h3{margin:0}
.hub-card p{margin:0;color:var(--fg-2);font-size:14px}
.hub-card:hover{border-color:var(--fg);transform:translateY(-2px);transition:transform .15s, border-color .15s}
.chapter-note{color:var(--fg-2);max-width:70ch;margin-bottom:24px}
.hero-visual{display:flex;align-items:center;justify-content:center}
.hero-visual-image{width:100%;height:auto;border:1px solid var(--border);border-radius:12px}

/* === generic page body === */
.page-main{min-height:50vh;padding-block:var(--section-y-desktop)}
.page-main .container{max-width:var(--container-max)}
.page-hero{padding-block:48px 24px}
.page-hero h1{font-size:clamp(32px,5vw,56px);line-height:1.05;letter-spacing:-.02em;margin-bottom:16px}
.page-hero .lead{max-width:70ch;color:var(--fg-2);font-size:clamp(16px,1.8vw,20px)}
.prose{max-width:78ch;margin-inline:auto}
.prose h2{font-size:clamp(24px,3vw,34px);margin-top:48px;margin-bottom:14px;letter-spacing:-.01em}
.prose h3{font-size:20px;margin-top:28px;margin-bottom:8px}
.prose p+p{margin-top:16px}
.prose p{color:var(--fg-2);overflow-wrap:anywhere}
.prose ul,.prose ol{padding-left:1.4em;color:var(--fg-2)}
.prose li+li{margin-top:6px}
.prose a{text-decoration:underline;text-underline-offset:3px}
.callout{border-left:3px solid var(--fg);background:var(--surface);padding:18px;color:var(--fg-2);margin:20px 0}
.toc{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:18px 22px;margin:24px 0}
.toc h2{margin-top:0;font-size:18px}
.toc ol{margin:0}
.meta-line{font-family:var(--font-mono);font-size:12px;color:var(--muted);letter-spacing:.04em}