:root {
  --radius: 22px;
  --max: 1120px;
  --reading: 740px;
}

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif;
      color: var(--text);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }
    a { color: inherit; text-decoration: none; }
    img { display: block; max-width: 100%; }
    a:focus-visible,
    button:focus-visible {
      outline: 2px solid var(--blue);
      outline-offset: 3px;
    }

    .top-bar {
      position: sticky;
      top: 0;
      z-index: 20;
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      background: var(--header-bg);
      border-bottom: 1px solid var(--line);
    }
    .top-bar-inner {
      width: min(var(--max), calc(100% - 40px));
      margin: 0 auto;
      min-height: 72px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
    }
    .brand {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--text);
    }
    .brand-mark {
      width: 42px;
      height: 42px;
      overflow: hidden;
      flex: none;
    }
    .brand-mark img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    .top-links {
      display: flex;
      align-items: center;
      gap: 16px;
      color: var(--muted);
      font-size: 0.94rem;
    }
    .top-links a:hover { color: var(--text); }
    .theme-toggle {
      background: none;
      border: 1px solid var(--line);
      border-radius: 10px;
      color: var(--muted);
      cursor: pointer;
      width: 36px;
      height: 36px;
      display: inline-grid;
      place-items: center;
      padding: 0;
      transition: border-color 160ms ease, color 160ms ease;
    }
    .theme-toggle:hover { color: var(--text); border-color: var(--blue); }
    .theme-toggle:focus-visible { border-color: var(--blue); }
    .icon-moon, .logo-light { display: none; }
    .logo-dark { display: block; }

    html[data-theme="dark"] .icon-sun,
    html[data-theme="dark"] .logo-dark { display: block; }
    html[data-theme="dark"] .icon-moon,
    html[data-theme="dark"] .logo-light { display: none; }
    html[data-theme="light"] .icon-sun,
    html[data-theme="light"] .logo-dark { display: none; }
    html[data-theme="light"] .icon-moon,
    html[data-theme="light"] .logo-light { display: block; }

    .page {
      width: min(var(--max), calc(100% - 40px));
      margin: 0 auto;
      padding: 40px 0 82px;
    }
    .breadcrumb {
      font-size: 0.9rem;
      color: var(--muted-2);
      margin-bottom: 24px;
    }
    .breadcrumb a {
      color: var(--muted);
      text-decoration: none;
    }
    .breadcrumb a:hover {
      color: var(--text);
      text-decoration: underline;
      text-underline-offset: 0.18em;
    }

    .hero {
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
      gap: 24px;
      align-items: stretch;
      margin-bottom: 24px;
      padding-top: 6px;
      position: relative;
      isolation: isolate;
    }
    .hero::before {
      content: "";
      position: absolute;
      inset: -10px -8px -8px;
      border-radius: calc(var(--radius) + 6px);
      border: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
      background:
        linear-gradient(180deg, color-mix(in srgb, var(--blue) 6%, transparent), transparent 38%),
        repeating-linear-gradient(90deg, color-mix(in srgb, var(--line) 38%, transparent) 0 1px, transparent 1px 72px),
        repeating-linear-gradient(0deg, color-mix(in srgb, var(--line) 24%, transparent) 0 1px, transparent 1px 72px);
      opacity: 0.18;
      pointer-events: none;
      z-index: -1;
    }
    .hero-copy {
      padding: 2px 0;
    }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--muted-2);
      font-size: 0.8rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin: 0 0 18px;
    }
    .dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--blue);
    }
    h1 {
      font-size: clamp(2.3rem, 5vw, 3.9rem);
      line-height: 1.01;
      letter-spacing: -0.05em;
      margin: 0 0 14px;
      max-width: 13ch;
    }
    .subtitle {
      font-size: clamp(1rem, 1.7vw, 1.08rem);
      color: var(--muted);
      margin: 0 0 18px;
      max-width: 60ch;
    }
    .text-link {
      color: var(--text);
      text-decoration: underline;
      text-underline-offset: 0.18em;
    }
    .text-link:hover {
      text-decoration-thickness: 0.12em;
    }
    .jump-links {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    .jump-links { margin-bottom: 16px; }
    .jump-links a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      border: 1px solid var(--line);
      background: var(--bg-card);
      border-radius: 999px;
      padding: 10px 14px;
      color: var(--text);
      font-size: 0.9rem;
      font-weight: 500;
      line-height: 1.25;
      transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
    }
    .jump-links a:hover {
      border-color: var(--line-strong);
      background: color-mix(in srgb, var(--bg-elevated) 84%, transparent);
      color: var(--text);
    }
    .inline-link {
      color: var(--text);
      text-decoration: underline;
      text-underline-offset: 0.18em;
    }
    .inline-link:hover { text-decoration-thickness: 0.12em; }
    .hero-list {
      list-style: none;
      padding: 0;
      margin: 0 0 16px;
      display: grid;
      gap: 0;
    }
    .hero-list li {
      border-top: 1px solid var(--line);
    }
    .hero-list li:first-child {
      border-top: 0;
    }
    .hero-list a {
      display: grid;
      gap: 3px;
      padding: 13px 26px 13px 0;
      color: var(--muted);
      position: relative;
    }
    .hero-list a::after {
      content: "\203A";
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      color: var(--muted-2);
      font-size: 1rem;
      line-height: 1;
    }
    .hero-list strong {
      color: var(--text);
      font-size: 0.98rem;
    }
    .hero-list span {
      color: var(--muted);
      font-size: 0.92rem;
      line-height: 1.45;
    }

    .hero-panel,
    .section-card,
    .route-card,
    .topic-card,
    .bridge-card {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: color-mix(in srgb, var(--bg-elevated) 78%, transparent);
    }
    .hero-panel {
      padding: 22px;
      box-shadow: var(--shadow);
    }
    .hero-panel h2,
    .section-title {
      font-size: 1.38rem;
      letter-spacing: -0.03em;
      margin: 0 0 10px;
    }
    .hero-panel p {
      margin: 0 0 16px;
      color: var(--muted);
    }
    .hero-note {
      padding: 14px 0 0;
      border-top: 1px solid var(--line);
      color: var(--muted);
      font-size: 0.93rem;
    }
    .hero-note strong { color: var(--text); }

    .section {
      margin-top: 24px;
    }
    .section[id] {
      scroll-margin-top: 92px;
    }
    .section-card {
      padding: 26px;
      background: color-mix(in srgb, var(--bg-elevated) 82%, transparent);
      box-shadow: var(--shadow);
    }
    .section-heading {
      margin-bottom: 20px;
      max-width: 72ch;
    }
    .section-label {
      font-size: 0.82rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--muted-2);
      margin: 0 0 10px;
    }
    .section-heading p {
      margin: 0;
      color: var(--muted);
      line-height: 1.58;
    }

    .route-grid,
    .topics-grid,
    .bridge-grid {
      display: grid;
      gap: 14px;
    }
    .route-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .route-card {
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      transition: border-color 160ms ease, background 160ms ease;
    }
    .route-card:hover {
      border-color: var(--line-strong);
      background: color-mix(in srgb, var(--bg-elevated) 84%, transparent);
    }
    .route-number {
      width: fit-content;
      min-width: 0;
      padding: 5px 9px;
      border: 1px solid var(--line);
      border-radius: 999px;
      color: var(--muted-2);
      font-weight: 700;
      font-size: 0.78rem;
      letter-spacing: 0.03em;
    }
    .route-card h3,
    .topic-card h3,
    .article-card h3,
    .bridge-card h3 {
      margin: 0;
      font-size: 1.04rem;
      letter-spacing: -0.02em;
      color: var(--text);
    }
    .route-card p,
    .topic-card p,
    .article-card p,
    .bridge-card p,
    .bridge-card li {
      margin: 0;
      color: var(--muted);
      font-size: 0.94rem;
      line-height: 1.55;
    }
    .route-links {
      margin-top: auto;
      display: grid;
      gap: 0;
      padding-top: 4px;
    }
    .mini-links {
      display: grid;
      gap: 0;
    }
    .route-links a,
    .mini-links a {
      display: flex;
      align-items: center;
      gap: 10px;
      min-height: 44px;
      padding: 10px 0;
      border: 0;
      border-top: 1px solid var(--line);
      color: var(--text);
      font-size: 0.92rem;
      line-height: 1.35;
      background: transparent;
      transition: border-color 160ms ease, color 160ms ease;
    }
    .route-links a::after,
    .mini-links a::after {
      content: "\203A";
      margin-left: auto;
      color: var(--muted-2);
      font-size: 1rem;
      line-height: 1;
    }
    .route-links a:hover,
    .mini-links a:hover {
      border-color: var(--line-strong);
      color: var(--text);
    }

    .topics-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .topic-card {
      padding: 22px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      background: color-mix(in srgb, var(--bg-elevated) 82%, transparent);
    }
    .topic-card > div:first-child {
      padding-bottom: 14px;
      border-bottom: 1px solid var(--line);
    }
    .topic-copy {
      color: var(--muted);
      max-width: 58ch;
    }
    .article-list {
      display: grid;
      gap: 0;
    }
    .article-card {
      display: block;
      padding: 14px 0;
      border: 0;
      border-top: 1px solid var(--line);
      border-radius: 0;
      background: transparent;
      transition: border-color 160ms ease, color 160ms ease;
    }
    .article-card:hover {
      border-color: var(--line-strong);
      background: transparent;
    }
    .article-card:focus-visible {
      border-color: var(--line-strong);
    }
    .article-card h3 {
      font-size: 1rem;
    }
    .article-card p {
      font-size: 0.93rem;
      margin-top: 5px;
      max-width: 58ch;
    }

    .bridge-grid {
      grid-template-columns: minmax(0, 1.14fr) repeat(2, minmax(0, 0.93fr));
      align-items: stretch;
    }
    .bridge-card {
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      background: color-mix(in srgb, var(--bg-elevated) 74%, transparent);
    }
    .bridge-card .section-label {
      margin-bottom: 4px;
    }

    .footer-note {
      margin-top: 16px;
      color: var(--muted);
      font-size: 0.95rem;
      line-height: 1.58;
      max-width: var(--reading);
    }
    .footer-note strong { color: var(--text); }

    html[data-theme="light"] .hero::before { opacity: 0.11; }
    html[data-theme="dark"] .hero::before { opacity: 0.18; }

    @media (max-width: 1080px) {
      .route-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 920px) {
      .hero,
      .bridge-grid,
      .topics-grid {
        grid-template-columns: 1fr;
      }
      h1 { max-width: 14ch; }
    }

    @media (max-width: 680px) {
      .page {
        padding: 32px 0 62px;
      }
      .top-bar-inner,
      .page {
        width: min(var(--max), calc(100% - 28px));
      }
      .route-grid {
        grid-template-columns: 1fr;
      }
      .section-card,
      .route-card,
      .topic-card,
      .bridge-card,
      .article-card {
        padding-left: 18px;
        padding-right: 18px;
      }
      .top-links {
        gap: 12px;
        font-size: 0.9rem;
      }
      .jump-links {
        gap: 8px;
      }
      .jump-links a {
        width: 100%;
        justify-content: flex-start;
      }
    }