:root {
      --ga-paper-white: #FAFAF7;
      --ga-wix-paper: #FBFAF7;
      --ga-warm-off-white: #F5F1E6;
      --ga-ink: #2F2F2F;
      --ga-text: #333333;
      --ga-muted: #706B61;
      --ga-line: #DED6C7;
      --ga-blue-gray: #617CA0;
      --ga-deep-blue-gray: #324158;
      --ga-cta-yellow: #F7D93B;
      --ga-mustard: #C99700;
      --ga-butter: #FFE8A3;
      --ga-wood-gold: #C9A24A;
      --ga-walnut: #5C4528;
      --ga-success: #2F7D5C;
      --ga-warning: #B7791F;
      --ga-danger: #A1443E;
      --ga-font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
      --ga-font-display: "Noto Sans TC", "PingFang TC", "Inter", sans-serif;
      --bg: var(--ga-paper-white);
      --panel: #fffdf8;
      --ink: var(--ga-ink);
      --muted: var(--ga-muted);
      --line: var(--ga-line);
      --accent: var(--ga-deep-blue-gray);
      --accent-2: var(--ga-danger);
      --soft: #f1f5f8;
      --soft-2: #fff7df;
      --warn: var(--ga-warning);
      --shadow: 0 14px 34px rgba(50, 65, 88, 0.08);
      --hard-shadow: 4px 4px 0 rgba(47, 47, 47, 0.18);
      --radius: 8px;
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      background: var(--bg);
      color: var(--ink);
      font-family: var(--ga-font-sans);
      line-height: 1.55;
    }

    button, input, textarea, select {
      font: inherit;
    }

    .app {
      min-height: 100vh;
      display: grid;
      grid-template-columns: 292px minmax(0, 1fr);
      max-width: 100%;
      min-width: 0;
    }

    .app.app-topnav {
      grid-template-columns: 1fr;
    }

    .pack-top-nav {
      position: sticky;
      top: 0;
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      min-height: 78px;
      border-bottom: 1px solid var(--line);
      background: rgba(250, 250, 247, 0.96);
      padding: 12px clamp(16px, 3vw, 40px);
      backdrop-filter: blur(12px);
    }

    .pack-nav-brand {
      display: inline-flex;
      align-items: center;
      gap: 14px;
      min-width: 0;
      color: var(--ga-ink);
      text-decoration: none;
    }

    .pack-nav-brand .brand-mark {
      width: 48px;
      height: 48px;
      border-width: 2px;
      border-radius: 10px;
      font-size: 22px;
      flex: 0 0 auto;
    }

    .pack-nav-brand strong,
    .pack-nav-brand span {
      display: block;
    }

    .pack-nav-brand strong {
      font-size: clamp(20px, 2vw, 26px);
      line-height: 1.05;
      letter-spacing: 0;
    }

    .pack-nav-brand span {
      color: var(--ga-muted);
      font-size: clamp(13px, 1.2vw, 16px);
      font-weight: 700;
      margin-top: 4px;
    }

    .pack-nav-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      min-width: 0;
    }

    .status-chip,
    .metric-chip,
    .map-button,
    .account-button {
      min-height: 34px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: #fffdf8;
      color: var(--ga-text);
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 10px;
      font-size: 13px;
      white-space: nowrap;
    }

    .pack-nav-metric {
      background: rgba(255, 253, 248, 0.72);
    }

    .metric-chip strong {
      color: var(--ga-deep-blue-gray);
      font-size: 14px;
    }

    .metric-chip span {
      color: var(--ga-muted);
    }

    .path-menu {
      position: relative;
    }

    .map-button {
      border-color: var(--ga-ink);
      cursor: pointer;
      font-weight: 800;
      list-style: none;
      box-shadow: var(--hard-shadow);
    }

    .map-button::-webkit-details-marker {
      display: none;
    }

    .account-menu {
      position: relative;
    }

    .account-button {
      cursor: pointer;
      font-weight: 800;
      list-style: none;
      padding: 6px 12px;
    }

    .account-button::-webkit-details-marker {
      display: none;
    }

    .account-avatar {
      width: 34px;
      height: 34px;
      border: 1px solid var(--line);
      border-radius: 50%;
      background: var(--ga-deep-blue-gray);
      color: var(--ga-paper-white);
      display: none;
      place-items: center;
      font-size: 13px;
      font-weight: 900;
      line-height: 1;
    }

    .account-label {
      color: var(--ga-text);
    }

    .path-menu-panel,
    .account-menu-panel {
      position: absolute;
      right: 0;
      top: calc(100% + 10px);
      width: min(360px, calc(100vw - 28px));
      max-height: min(70vh, 620px);
      overflow: auto;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #fffdf8;
      box-shadow: var(--shadow);
      padding: 14px;
    }

    .account-menu-panel {
      width: min(300px, calc(100vw - 28px));
      padding: 16px;
    }

    .path-menu-title {
      color: var(--ga-deep-blue-gray);
      font-weight: 900;
      margin: 0 0 10px;
    }

    .account-menu-name {
      color: var(--ga-deep-blue-gray);
      font-size: 16px;
      font-weight: 900;
      margin: 0;
    }

    .account-menu-email {
      color: var(--ga-muted);
      font-size: 13px;
      margin: 2px 0 0;
      overflow-wrap: anywhere;
    }

    .account-menu-stats {
      display: none;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      margin-top: 14px;
    }

    .account-menu-stats div {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #f8f3e9;
      padding: 10px;
    }

    .account-menu-stats span {
      display: block;
      color: var(--ga-muted);
      font-size: 12px;
      font-weight: 700;
      margin-bottom: 3px;
    }

    .account-menu-stats strong {
      color: var(--ga-deep-blue-gray);
      font-size: 18px;
      line-height: 1.1;
    }

    .path-list {
      display: grid;
      gap: 7px;
    }

    .path-link {
      display: grid;
      grid-template-columns: 32px minmax(0, 1fr) auto;
      gap: 9px;
      align-items: center;
      border: 1px solid transparent;
      border-radius: var(--radius);
      color: var(--ga-text);
      padding: 8px;
      text-decoration: none;
    }

    .path-link:hover,
    .path-link.is-current {
      border-color: var(--line);
      background: #f8f3e9;
    }

    .path-link.is-complete {
      background: #eff6f3;
    }

    .path-link span {
      color: var(--ga-mustard);
      font-size: 12px;
      font-weight: 900;
    }

    .path-link strong {
      color: var(--ga-deep-blue-gray);
      font-size: 14px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .path-link em {
      color: var(--ga-muted);
      font-size: 12px;
      font-style: normal;
    }

    .sidebar {
      border-right: 1px solid var(--line);
      background: #f1eadf;
      padding: 20px 18px;
      position: sticky;
      top: 0;
      height: 100vh;
      overflow: auto;
      min-width: 0;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 22px;
      color: var(--ink);
      text-decoration: none;
    }

    .brand-mark {
      width: 34px;
      height: 34px;
      border-radius: 7px;
      background: var(--ga-cta-yellow);
      border: 1px solid var(--ga-ink);
      color: var(--ga-ink);
      display: grid;
      place-items: center;
      font-weight: 800;
      box-shadow: var(--hard-shadow);
    }

    .brand strong {
      display: block;
      font-size: 15px;
    }

    .brand span {
      display: block;
      font-size: 12px;
      color: var(--muted);
    }

    .progress-title {
      font-size: 12px;
      color: var(--muted);
      margin: 14px 0 8px;
    }

    .step-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      gap: 6px;
    }

    .step-list a,
    .step-list button {
      width: 100%;
      border: 1px solid transparent;
      background: transparent;
      text-align: left;
      padding: 8px 9px;
      border-radius: var(--radius);
      color: var(--muted);
      cursor: pointer;
    }

    .step-list a.active,
    .step-list button.active {
      background: var(--panel);
      border-color: var(--line);
      color: var(--ink);
      box-shadow: 0 4px 15px rgba(33, 28, 20, 0.05);
    }

    .step-list a.done::after,
    .step-list button.done::after {
      content: "已看過";
      float: right;
      font-size: 11px;
      color: var(--accent);
    }

    .sidebar-actions {
      display: grid;
      gap: 8px;
      margin-top: 20px;
    }

    .ghost-btn, .primary-btn, .secondary-btn {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 10px 13px;
      cursor: pointer;
      min-height: 42px;
    }

    .primary-btn {
      background: var(--ga-cta-yellow);
      color: var(--ga-ink);
      border-color: var(--ga-ink);
      font-weight: 700;
      box-shadow: var(--hard-shadow);
    }

    .secondary-btn {
      background: var(--panel);
      color: var(--ink);
    }

    .ghost-btn {
      background: transparent;
      color: var(--muted);
    }

    .main {
      padding: 32px clamp(20px, 4vw, 56px);
      min-width: 0;
    }

    .topbar {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      align-items: center;
      margin-bottom: 22px;
    }

    .status-pill {
      display: inline-flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
      max-width: 100%;
      border: 1px solid var(--line);
      background: var(--panel);
      border-radius: 999px;
      padding: 7px 11px;
      font-size: 13px;
      color: var(--muted);
    }

    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--accent);
    }

    .screen {
      display: block;
      width: 100%;
      max-width: 1040px;
      min-width: 0;
      margin: 0 auto;
    }

    .hero {
      min-height: calc(100vh - 110px);
      display: grid;
      align-content: center;
      gap: 24px;
    }

    .eyebrow {
      color: var(--accent);
      font-weight: 800;
      font-size: 13px;
      letter-spacing: 0;
      margin: 0 0 10px;
    }

    h1, h2, h3 {
      letter-spacing: 0;
      line-height: 1.18;
      margin: 0;
      color: var(--ga-deep-blue-gray);
    }

    h1 {
      font-size: clamp(34px, 5vw, 68px);
      max-width: 940px;
      font-family: var(--ga-font-display);
    }

    h2 {
      font-size: clamp(26px, 3.2vw, 42px);
      margin-bottom: 14px;
    }

    h3 {
      font-size: 19px;
      margin-bottom: 10px;
    }

    .lead {
      font-size: clamp(17px, 2vw, 22px);
      color: var(--muted);
      max-width: 780px;
      margin: 0;
    }

    .section-copy {
      color: var(--muted);
      max-width: 760px;
      margin: 0 0 24px;
    }

    .panel {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: clamp(18px, 3vw, 30px);
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
      margin: 20px 0;
    }

    .grid.three {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .card {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 18px;
    }

    .card.highlight {
      border-color: rgba(47, 111, 94, 0.45);
      background: var(--soft);
    }

    .card.wait {
      background: #faf8f4;
    }

    .meta {
      color: var(--muted);
      font-size: 14px;
    }

    .tag-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 0 0 12px;
    }

    .tag {
      display: inline-flex;
      align-items: center;
      min-height: 26px;
      border-radius: 999px;
      padding: 3px 9px;
      font-size: 12px;
      background: #eee5d9;
      color: #5e5145;
    }

    .tag.green {
      background: #dfeee8;
      color: #235545;
    }

    .tag.red {
      background: #f5dfd8;
      color: #8b3428;
    }

    .field {
      display: grid;
      gap: 6px;
      margin-bottom: 14px;
    }

    label {
      font-weight: 700;
      font-size: 14px;
    }

    input, textarea, select {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #fff;
      padding: 11px 12px;
      color: var(--ink);
    }

    textarea {
      min-height: 92px;
      resize: vertical;
    }

    .choices {
      display: grid;
      gap: 10px;
      margin: 18px 0;
    }

    .choice {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--panel);
      padding: 14px;
      cursor: pointer;
      display: grid;
      grid-template-columns: 22px 1fr;
      gap: 10px;
      align-items: start;
    }

    .choice input {
      width: auto;
      margin-top: 5px;
    }

    .actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 22px;
    }

    .actions.actions-end {
      justify-content: flex-end;
    }

    .quote {
      border-left: 4px solid var(--accent);
      padding-left: 16px;
      color: var(--muted);
      margin: 20px 0;
      font-size: 17px;
    }

    .lesson-layout {
      display: grid;
      gap: 18px;
    }

    .lesson-rail {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 0 0 18px;
    }

    .lesson-step {
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 5px 10px;
      background: #fffaf2;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
    }

    .lesson-step.current {
      background: #dfeee8;
      border-color: rgba(47, 111, 94, 0.28);
      color: #235545;
    }

    .lesson-block {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--panel);
      padding: clamp(16px, 2.5vw, 24px);
    }

    .lesson-block.teach {
      background: #f8fbf8;
      border-color: rgba(47, 111, 94, 0.24);
    }

    .lesson-block.practice {
      background: #fffdf8;
    }

    .lesson-block.complete {
      background: #f1f6fb;
      border-color: #c9d9e8;
    }

    .lesson-label {
      margin: 0 0 8px;
      color: var(--accent);
      font-size: 12px;
      font-weight: 800;
    }

    .lesson-title-small {
      font-size: 18px;
      margin: 0 0 8px;
    }

    .lesson-example {
      border-left: 4px solid #6c7f95;
      padding: 12px 14px;
      margin: 14px 0 0;
      background: #f3f6f8;
      color: #34475a;
    }

    .lesson-checklist {
      display: grid;
      gap: 8px;
      margin: 12px 0 0;
      padding: 0;
      list-style: none;
    }

    .lesson-checklist li {
      display: block;
      min-width: 0;
      position: relative;
      padding-left: 34px;
      line-height: 1.75;
    }

    .lesson-checklist li::before {
      content: "✓";
      width: 22px;
      height: 22px;
      display: inline-grid;
      place-items: center;
      position: absolute;
      left: 0;
      top: 0.25em;
      border-radius: 50%;
      background: #dfeee8;
      color: var(--accent);
      font-weight: 900;
      font-size: 13px;
    }

    .before-after {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      margin: 16px 0;
    }

    .before-after div {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 14px;
      background: #fffaf2;
    }

    .before-after div:last-child {
      background: #eff6f3;
      border-color: rgba(47, 111, 94, 0.22);
    }

    .route-card h3 {
      display: flex;
      justify-content: space-between;
      gap: 10px;
    }

    .route-card .route-letter {
      width: 32px;
      height: 32px;
      border-radius: 7px;
      display: grid;
      place-items: center;
      background: #eee5d9;
      color: var(--ink);
      flex: 0 0 auto;
    }

    .route-card.available .route-letter {
      background: var(--accent);
      color: #fff;
    }

    .timeline {
      display: grid;
      gap: 12px;
      margin: 20px 0;
    }

    .timeline-item {
      display: grid;
      grid-template-columns: 42px 1fr;
      gap: 12px;
      align-items: start;
    }

    .num {
      width: 34px;
      height: 34px;
      border-radius: 7px;
      background: var(--soft);
      display: grid;
      place-items: center;
      font-weight: 800;
      color: var(--accent);
    }

    .result-box {
      background: var(--soft);
      border: 1px solid rgba(47, 111, 94, 0.25);
      border-radius: var(--radius);
      padding: 18px;
      margin: 18px 0;
    }

    .email-note {
      background: var(--soft-2);
      border: 1px solid #efd0c4;
      border-radius: var(--radius);
      padding: 16px;
      margin-top: 18px;
      color: #5d4039;
    }

    .route-notice {
      display: none;
      background: var(--soft);
      border: 1px solid rgba(47, 111, 94, 0.28);
      border-radius: var(--radius);
      padding: 18px;
      margin: 0 0 18px;
    }

    .route-notice.active {
      display: block;
    }

    .sheet {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 24px;
      box-shadow: var(--shadow);
    }

    .sheet-section {
      border-top: 1px solid var(--line);
      padding-top: 16px;
      margin-top: 16px;
    }

    .privacy {
      font-size: 13px;
      color: var(--muted);
      border-top: 1px solid var(--line);
      padding-top: 14px;
      margin-top: 20px;
    }

    .hidden {
      display: none !important;
    }

    @media (max-width: 1120px) {
      .pack-top-nav {
        flex-wrap: nowrap;
      }

      .pack-nav-brand {
        flex: 1 1 auto;
      }

      .pack-nav-brand > div:last-child {
        min-width: 0;
      }

      .pack-nav-actions {
        flex: 0 0 auto;
        margin-left: auto;
      }

      .pack-nav-metric {
        display: none;
      }

      .account-button {
        min-height: 0;
        border: none;
        background: transparent;
        padding: 0;
      }

      .account-avatar {
        display: grid;
      }

      .account-label {
        display: none;
      }

      .account-menu-stats {
        display: grid;
      }
    }

    @media (max-width: 880px) {
      .app {
        grid-template-columns: 1fr;
      }

      .sidebar {
        position: static;
        height: auto;
        border-right: none;
        border-bottom: 1px solid var(--line);
        max-width: 100%;
        overflow-x: hidden;
      }

      .step-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .grid, .grid.three {
        grid-template-columns: 1fr;
      }

      .before-after {
        grid-template-columns: 1fr;
      }

      .topbar {
        align-items: flex-start;
        flex-direction: column;
      }

      .pack-top-nav {
        align-items: center;
        flex-direction: row;
        flex-wrap: nowrap;
      }

      .pack-nav-actions {
        justify-content: flex-end;
        flex-wrap: nowrap;
        margin-left: auto;
        width: auto;
      }

      .path-menu {
        width: auto;
      }

      .map-button {
        justify-content: center;
        width: auto;
      }

      .path-menu-panel {
        left: auto;
        right: 0;
        width: min(360px, calc(100vw - 28px));
      }
    }

    @media (max-width: 520px) {
      .pack-top-nav {
        gap: 10px;
        padding: 10px 14px;
      }

      .pack-nav-brand {
        gap: 10px;
        flex: 1 1 auto;
      }

      .pack-nav-brand .brand-mark {
        width: 40px;
        height: 40px;
        border-radius: 9px;
        font-size: 18px;
      }

      .pack-nav-brand strong {
        font-size: 18px;
      }

      .pack-nav-brand span {
        font-size: 12px;
        line-height: 1.25;
      }

      .pack-nav-actions {
        gap: 6px;
      }

      .pack-nav-metric {
        display: none;
      }

      .account-button {
        min-width: 34px;
      }

      .account-avatar {
        width: 34px;
        height: 34px;
      }

      .main {
        padding: 22px 14px;
      }

      .step-list {
        grid-template-columns: 1fr;
      }

      .hero {
        min-height: auto;
        padding: 30px 0;
      }

      .actions {
        display: grid;
      }

      .status-chip,
      .metric-chip {
        flex: 1 1 auto;
        justify-content: center;
      }

      .path-link {
        grid-template-columns: 28px minmax(0, 1fr);
      }

      .path-link em {
        grid-column: 2;
      }
    }
  

    /* 多頁版補充：讓 <a> 看起來也像原本按鈕。 */
    .step-list a {
      display: block;
      text-decoration: none;
    }

    a.primary-btn, a.secondary-btn, a.ghost-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
    }

    .learn-shell {
      min-height: 100vh;
      background:
        linear-gradient(rgba(222, 214, 199, 0.36) 1px, transparent 1px),
        linear-gradient(90deg, rgba(222, 214, 199, 0.28) 1px, transparent 1px),
        var(--ga-paper-white);
      background-size: 28px 28px;
    }

    .learn-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding: 18px clamp(18px, 4vw, 48px);
      border-bottom: 1px solid var(--ga-line);
      background: rgba(250, 250, 247, 0.92);
      position: sticky;
      top: 0;
      z-index: 2;
    }

    .learn-brand {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      color: var(--ga-ink);
      text-decoration: none;
    }

    .learn-brand strong,
    .learn-brand small {
      display: block;
    }

    .learn-brand small {
      color: var(--ga-muted);
      font-size: 13px;
      margin-top: 2px;
    }

    .learn-nav {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: flex-end;
    }

    .learn-nav button {
      min-height: 34px;
      border: 1px solid var(--ga-line);
      border-radius: var(--ga-radius-sm, 4px);
      background: var(--ga-wix-paper);
      color: var(--ga-muted);
      cursor: pointer;
      padding: 6px 10px;
      font-size: 13px;
    }

    .learn-nav button.active {
      border-color: var(--ga-ink);
      background: var(--ga-butter);
      color: var(--ga-ink);
      font-weight: 700;
    }

    .learn-main {
      width: min(1180px, calc(100% - 36px));
      margin: 0 auto;
      padding: clamp(28px, 5vw, 64px) 0 72px;
    }

    [data-learn-panel] {
      display: none;
    }

    [data-learn-panel].active {
      display: block;
    }

    .learn-hero {
      min-height: calc(100vh - 130px);
      align-items: center;
      grid-template-columns: minmax(0, 720px);
      justify-content: center;
      gap: clamp(24px, 6vw, 72px);
    }

    .learn-hero.active {
      display: grid;
    }

    .learn-hero-copy {
      display: grid;
      gap: 22px;
    }

    .learn-login {
      max-width: 620px;
    }

    .auth-divider {
      display: flex;
      align-items: center;
      gap: 12px;
      color: var(--ga-muted);
      font-size: 13px;
      margin: 6px 0;
    }

    .auth-divider::before,
    .auth-divider::after {
      content: "";
      height: 1px;
      flex: 1;
      background: var(--ga-line);
    }

    .google-signin-area {
      display: grid;
      gap: 10px;
    }

    .learn-login h2,
    .learn-state-panel h1,
    .dashboard-intro h1 {
      margin-bottom: 12px;
    }

    .learn-paper-stack {
      position: relative;
      display: grid;
      gap: 14px;
      padding: 20px;
    }

    .learn-paper-stack::before {
      content: "";
      position: absolute;
      inset: 4px 28px 28px 4px;
      border: 1px solid var(--ga-line);
      background: var(--ga-warm-off-white);
      transform: rotate(-3deg);
      z-index: 0;
    }

    .paper-card {
      position: relative;
      z-index: 1;
      background: var(--panel);
      border: 1px solid var(--ga-line);
      border-radius: var(--radius);
      padding: 18px;
      box-shadow: var(--shadow);
    }

    .paper-card-main {
      border-color: var(--ga-ink);
      box-shadow: var(--hard-shadow);
    }

    .paper-card strong {
      display: block;
      margin: 6px 0;
      color: var(--ga-deep-blue-gray);
      font-size: 24px;
    }

    .paper-card p {
      margin: 0;
      color: var(--ga-muted);
    }

    .paper-label {
      display: inline-flex;
      align-items: center;
      min-height: 24px;
      border-bottom: 3px solid var(--ga-cta-yellow);
      color: var(--ga-muted);
      font-size: 12px;
      font-weight: 800;
    }

    .learn-state-panel {
      padding: clamp(24px, 4vw, 40px);
    }

    .empty-grid,
    .dashboard-grid,
    .pack-overview,
    .module-grid {
      display: grid;
      gap: 16px;
    }

    .empty-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      margin-top: 28px;
    }

    .dashboard-intro {
      max-width: 880px;
      margin-bottom: 26px;
    }

    .dashboard-grid {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .dashboard-card {
      grid-column: span 2;
    }

    .next-card {
      grid-column: span 4;
    }

    .metric-list {
      display: grid;
      gap: 12px;
      margin: 16px 0 0;
    }

    .metric-list div {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      border-bottom: 1px solid var(--ga-line);
      padding-bottom: 10px;
    }

    .metric-list dt {
      color: var(--ga-muted);
    }

    .metric-list dd {
      margin: 0;
      color: var(--ga-deep-blue-gray);
      font-size: 24px;
      font-weight: 800;
    }

    .progress-meter {
      height: 10px;
      border: 1px solid var(--ga-line);
      border-radius: 999px;
      background: var(--ga-warm-off-white);
      overflow: hidden;
      margin: 18px 0 4px;
    }

    .progress-meter span {
      display: block;
      height: 100%;
      background: var(--ga-cta-yellow);
      border-right: 1px solid var(--ga-ink);
    }

    .experience-row {
      display: flex;
      justify-content: space-between;
      gap: 14px;
      align-items: center;
      border-top: 1px solid var(--ga-line);
      padding: 14px 0;
    }

    .experience-row p {
      margin: 4px 0 0;
      color: var(--ga-muted);
      font-size: 14px;
    }

    .muted-row {
      opacity: 0.72;
    }

    .lesson-checklist.compact li {
      font-size: 14px;
    }

    .timeline.compact {
      gap: 8px;
      margin-bottom: 0;
    }

    .timeline.compact .timeline-item {
      grid-template-columns: 34px 1fr;
    }

    .pack-overview {
      grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
      margin: 28px 0;
    }

    .pack-next {
      border-color: var(--ga-ink);
      box-shadow: var(--hard-shadow);
    }

    .module-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .module-card {
      display: grid;
      gap: 8px;
      min-height: 168px;
      border: 1px solid var(--ga-line);
      border-radius: var(--radius);
      background: #fffdf8;
      color: var(--ga-text);
      padding: 16px;
      text-decoration: none;
      transition: transform 160ms ease, box-shadow 160ms ease;
    }

    .module-card:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow);
    }

    .module-card span {
      color: var(--ga-mustard);
      font-size: 12px;
      font-weight: 900;
    }

    .module-card strong {
      color: var(--ga-deep-blue-gray);
      font-size: 17px;
    }

    .module-card p {
      margin: 0;
      color: var(--ga-muted);
      font-size: 14px;
    }

    .variant-nav {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 0 0 22px;
    }

    .variant-nav a {
      border: 1px solid var(--line);
      border-radius: 999px;
      color: var(--ga-text);
      background: #fffdf8;
      font-size: 13px;
      font-weight: 700;
      padding: 7px 11px;
      text-decoration: none;
    }

    .variant-nav a.active {
      background: var(--ga-deep-blue-gray);
      border-color: var(--ga-deep-blue-gray);
      color: #fff;
    }

    .concept-hero {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(280px, 0.62fr);
      gap: 18px;
      align-items: stretch;
      margin-bottom: 18px;
    }

    .story-panel {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #fffdf8;
      box-shadow: var(--shadow);
      padding: clamp(18px, 3vw, 30px);
    }

    .story-panel.lead-panel {
      background: linear-gradient(180deg, #fffdf8 0%, #f7f1e5 100%);
    }

    .story-panel h2,
    .story-panel h3 {
      margin-bottom: 12px;
    }

    .route-context {
      display: grid;
      gap: 12px;
    }

    .persona-note {
      border: 1px solid rgba(97, 124, 160, 0.24);
      border-radius: var(--radius);
      background: #f1f6fb;
      padding: 14px;
    }

    .persona-note strong {
      color: var(--ga-deep-blue-gray);
      display: block;
      margin-bottom: 6px;
    }

    .content-placeholder {
      border: 1px dashed rgba(97, 124, 160, 0.55);
      border-radius: var(--radius);
      background: #f6f8fb;
      color: #41536a;
      padding: 12px 14px;
    }

    .content-placeholder.story-note {
      margin-top: 18px;
      padding: 16px 18px;
    }

    .content-placeholder strong {
      color: var(--ga-deep-blue-gray);
      display: block;
      margin-bottom: 4px;
    }

    .content-placeholder p {
      margin: 0;
    }

    .time-scale-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin: 16px 0 0;
    }

    .time-card {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #fffaf2;
      padding: 15px;
    }

    .time-card strong {
      color: var(--ga-deep-blue-gray);
      display: block;
      margin-bottom: 6px;
    }

    .example-cloud {
      display: flex;
      flex-wrap: wrap;
      gap: 9px;
      margin: 14px 0 0;
    }

    .example-cloud span {
      border: 1px solid var(--line);
      border-radius: 999px;
      background: #fff;
      color: var(--ga-text);
      font-size: 14px;
      padding: 7px 10px;
    }

    .rhythm-figure {
      border: 1px solid var(--ga-line);
      border-radius: var(--ga-radius-md);
      background:
        linear-gradient(90deg, rgba(222, 214, 199, 0.28) 1px, transparent 1px),
        linear-gradient(180deg, rgba(222, 214, 199, 0.28) 1px, transparent 1px),
        #fffaf2;
      background-size: 22px 22px;
      display: grid;
      gap: 12px;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      margin: 18px 0;
      padding: 16px;
    }

    .rhythm-step {
      background: rgba(255, 255, 255, 0.88);
      border: 1px solid var(--ga-line);
      border-radius: var(--ga-radius-md);
      padding: 14px;
      position: relative;
    }

    .rhythm-step:not(:last-child)::after {
      content: "";
      width: 24px;
      height: 2px;
      background: var(--ga-cta-yellow);
      box-shadow: 0 0 0 1px rgba(47, 47, 47, 0.08);
      position: absolute;
      right: -19px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 1;
    }

    .rhythm-step span {
      color: var(--ga-muted);
      display: block;
      font-size: 13px;
      font-weight: 800;
      margin-bottom: 5px;
    }

    .rhythm-step strong {
      color: var(--ga-deep-blue-gray);
      display: block;
      font-size: 18px;
      margin-bottom: 7px;
    }

    .rhythm-step p {
      color: var(--ga-text);
      font-size: 14px;
      line-height: 1.55;
      margin: 0;
    }

    .time-scale-examples {
      display: grid;
      gap: 16px;
      margin: 22px 0;
    }

    .time-scale-intro {
      color: var(--ga-text);
      font-size: 17px;
      line-height: 1.75;
      margin: 0;
    }

    .time-scale-group {
      background: #fffaf2;
      border: 1px solid var(--ga-line);
      border-radius: var(--ga-radius-md);
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-width: 0;
      padding: 14px;
      scroll-snap-align: start;
    }

    .time-scale-deck {
      display: grid;
      gap: 12px;
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .time-scale-heading {
      align-items: baseline;
      display: flex;
      flex-wrap: wrap;
      gap: 8px 10px;
    }

    .time-scale-heading span {
      background: var(--ga-cta-yellow);
      border: 1px solid rgba(47, 47, 47, 0.18);
      border-radius: var(--ga-radius-sm);
      color: var(--ga-ink);
      font-size: 13px;
      font-weight: 900;
      padding: 3px 8px;
    }

    .time-scale-heading strong {
      color: var(--ga-deep-blue-gray);
      font-size: 20px;
    }

    .time-scale-visual {
      background: #fffdf8;
      border: 1px solid rgba(222, 214, 199, 0.8);
      border-radius: var(--ga-radius-md);
      overflow: hidden;
    }

    .time-scale-visual img {
      aspect-ratio: 16 / 10;
      display: block;
      height: 170px;
      object-fit: cover;
      object-position: center;
      width: 100%;
    }

    .time-scale-visual.is-half img {
      object-position: left center;
    }

    .time-scale-visual.is-three img {
      object-position: center center;
    }

    .time-scale-visual.is-many img {
      object-position: right center;
    }

    .time-example-grid {
      display: grid;
      gap: 8px;
      grid-template-columns: 1fr;
      max-height: 520px;
      overflow-y: auto;
      padding-right: 4px;
      scrollbar-color: var(--ga-line) transparent;
    }

    .time-example-card {
      background: #fffdf8;
      border: 1px solid var(--ga-line);
      border-radius: var(--ga-radius-md);
      padding: 11px;
    }

    .time-example-card strong {
      color: var(--ga-deep-blue-gray);
      display: -webkit-box;
      font-size: 15px;
      line-height: 1.45;
      margin-bottom: 4px;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    .time-example-card p {
      color: var(--ga-text);
      display: -webkit-box;
      font-size: 13px;
      line-height: 1.55;
      margin: 0;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    .podcast-card {
      align-items: flex-start;
      background: #fffdf8;
      border: 1px solid var(--ga-line);
      border-radius: var(--ga-radius-md);
      color: inherit;
      display: flex;
      gap: 14px;
      margin: 18px 0 0;
      overflow: hidden;
      padding: 14px;
      text-decoration: none;
    }

    .podcast-card.supplemental-card {
      cursor: default;
    }

    .supplemental-card-link {
      cursor: pointer;
      transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
    }

    .podcast-card.supplemental-card.supplemental-card-link {
      cursor: pointer;
    }

    .supplemental-card-link:hover {
      background: #fffaf0;
      border-color: rgba(50, 65, 88, 0.34);
      transform: translateY(-1px);
    }

    .supplement-compact-demo .podcast-card {
      margin-top: 20px;
    }

    .supplement-compact-demo .podcast-card.compact-supplement-card {
      background: #fffdf8;
      box-shadow: none;
    }

    .supplement-compact-card-demo .podcast-card.compact-supplement-card {
      align-items: center;
      display: grid;
      gap: 12px;
      grid-template-columns: 112px minmax(0, 1fr);
      padding: 12px;
    }

    .supplement-compact-card-demo .podcast-card.compact-supplement-card .podcast-cover {
      flex-basis: 112px;
      min-height: 112px;
      width: 112px;
    }

    .supplement-compact-card-demo .podcast-copy h3 {
      font-size: 16px;
      margin-bottom: 6px;
    }

    .supplement-compact-card-demo .podcast-copy > p:not(.lesson-label) {
      display: none;
    }

    .supplement-card-shell {
      margin-top: 18px;
      position: relative;
    }

    .supplement-card-shell .podcast-card {
      margin-top: 0;
    }

    .reason-info-button {
      align-items: center;
      background: #fffdf8;
      border: 1px solid var(--ga-ink);
      border-radius: 999px;
      box-shadow: 2px 2px 0 rgba(47, 47, 47, 0.16);
      color: var(--ga-deep-blue-gray);
      cursor: pointer;
      display: inline-flex;
      font-size: 13px;
      font-weight: 900;
      height: 28px;
      justify-content: center;
      position: absolute;
      right: 10px;
      top: 10px;
      width: 28px;
      z-index: 2;
    }

    .reason-popover {
      background: #fffdf8;
      border: 1px solid var(--ga-ink);
      border-radius: var(--ga-radius-md);
      box-shadow: var(--hard-shadow);
      color: var(--ga-text);
      display: none;
      max-width: min(320px, calc(100vw - 56px));
      padding: 12px;
      position: absolute;
      right: 8px;
      top: -8px;
      transform: translateY(-100%);
      z-index: 4;
    }

    .reason-info-shell:hover .reason-popover,
    .reason-info-button[aria-expanded="true"] + .reason-popover {
      display: block;
    }

    .reason-popover strong,
    .supplement-reason-details summary {
      color: var(--ga-deep-blue-gray);
      font-size: 13px;
      font-weight: 900;
    }

    .reason-popover p,
    .podcast-copy .supplement-reason-inline,
    .supplement-reason-details p {
      color: var(--ga-muted);
      font-size: 13px;
      line-height: 1.6;
      margin: 4px 0 0;
    }

    .supplement-reason-inline-demo.supplement-compact-card-demo .podcast-copy > p.supplement-reason-inline {
      display: block;
      margin-top: 6px;
    }

    .supplement-reason-inline strong {
      color: var(--ga-deep-blue-gray);
    }

    .supplement-reason-details {
      background: #fffdf8;
      border: 1px dashed var(--ga-line);
      border-radius: var(--ga-radius-md);
      margin-top: 8px;
      padding: 10px 12px;
    }

    .supplement-reason-details summary {
      cursor: pointer;
      list-style-position: outside;
    }

    .supplement-card-link-demo .podcast-card.supplemental-card,
    .supplement-modal-demo .podcast-card.supplemental-card {
      box-shadow: none;
    }

    .podcast-cover {
      align-items: center;
      aspect-ratio: 1;
      background: var(--ga-warm-off-white);
      border: 1px solid rgba(47, 47, 47, 0.16);
      border-radius: var(--ga-radius-md);
      color: #fff;
      display: flex;
      flex: 0 0 148px;
      justify-content: center;
      min-height: 118px;
      overflow: hidden;
      padding: 0;
      text-align: center;
      width: 148px;
    }

    .podcast-cover img {
      display: block;
      height: 100%;
      object-fit: cover;
      width: 100%;
    }

    .podcast-copy {
      flex: 1 1 auto;
      min-width: 0;
    }

    .podcast-copy .lesson-label {
      color: var(--ga-muted);
      font-size: 12px;
      margin-bottom: 6px;
    }

    .podcast-copy h3 {
      color: var(--ga-deep-blue-gray);
      font-size: 18px;
      line-height: 1.35;
      margin: 3px 0 8px;
    }

    .podcast-copy p {
      color: var(--ga-text);
      font-size: 15px;
      line-height: 1.65;
      margin: 0;
    }

    .podcast-copy .meta {
      color: var(--ga-muted);
      display: block;
      font-size: 13px;
      font-weight: 700;
      margin-top: 10px;
    }

    .podcast-copy a.meta {
      text-decoration: none;
    }

    .podcast-copy a.meta:hover {
      color: var(--ga-deep-blue-gray);
      text-decoration: underline;
    }

    .supplement-modal {
      display: grid;
      inset: 0;
      padding: 24px;
      place-items: center;
      position: fixed;
      z-index: 1000;
    }

    .supplement-modal[hidden] {
      display: none;
    }

    .supplement-modal-backdrop {
      background: rgba(47, 47, 47, 0.42);
      inset: 0;
      position: absolute;
    }

    .supplement-modal-panel {
      background: #fffdf8;
      border: 1px solid var(--ga-ink);
      border-radius: var(--ga-radius-md);
      box-shadow: var(--hard-shadow);
      max-width: 520px;
      padding: 24px;
      position: relative;
      width: min(100%, 520px);
    }

    .supplement-modal-panel h2 {
      color: var(--ga-deep-blue-gray);
      font-size: 24px;
      line-height: 1.35;
      margin: 4px 0 12px;
    }

    .supplement-modal-panel p {
      color: var(--ga-text);
      line-height: 1.75;
      margin: 0;
    }

    .supplement-modal-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: flex-end;
      margin-top: 18px;
    }

    .structure-demo-page {
      max-width: 1180px;
      margin: 0 auto;
    }

    .structure-note {
      background: #fffdf8;
      border: 1px solid var(--ga-line);
      border-radius: var(--ga-radius-md);
      margin: 0 0 28px;
      padding: 18px;
    }

    .structure-note h2,
    .structure-version h2 {
      color: var(--ga-deep-blue-gray);
      margin: 0 0 10px;
    }

    .structure-note ul {
      display: grid;
      gap: 8px;
      margin: 12px 0 0;
      padding-left: 20px;
    }

    .structure-version {
      border: 1px solid var(--ga-line);
      border-radius: var(--ga-radius-md);
      background: #fffdf8;
      margin: 28px 0;
      overflow: hidden;
    }

    .structure-version-head {
      border-bottom: 1px solid var(--ga-line);
      display: grid;
      gap: 8px;
      padding: 24px;
    }

    .structure-version-head p {
      color: var(--ga-muted);
      margin: 0;
    }

    .structure-prototype {
      display: grid;
      gap: 34px;
      padding: clamp(20px, 4vw, 42px);
    }

    .structure-hero {
      display: grid;
      gap: 10px;
      max-width: 760px;
    }

    .structure-kicker {
      color: var(--ga-mustard);
      font-size: 13px;
      font-weight: 900;
      letter-spacing: 0;
      margin: 0;
    }

    .structure-hero h1,
    .structure-hero h2 {
      color: var(--ga-deep-blue-gray);
      font-size: clamp(34px, 5vw, 58px);
      line-height: 1.08;
      margin: 0;
    }

    .structure-hero p {
      color: var(--ga-text);
      font-size: 18px;
      line-height: 1.75;
      margin: 0;
      max-width: 720px;
    }

    .structure-letter {
      background: #f6f8fb;
      border: 1px dashed rgba(97, 124, 160, 0.55);
      border-radius: var(--ga-radius-md);
      color: #41536a;
      max-width: 780px;
      padding: 18px 20px;
      position: relative;
    }

    .structure-letter::after {
      color: rgba(97, 124, 160, 0.18);
      content: "“";
      font-size: 92px;
      font-weight: 900;
      line-height: 1;
      position: absolute;
      right: 18px;
      top: 8px;
    }

    .structure-letter strong {
      color: var(--ga-deep-blue-gray);
      display: block;
      margin-bottom: 8px;
    }

    .structure-letter p {
      font-size: 17px;
      line-height: 1.8;
      margin: 0;
      position: relative;
      z-index: 1;
    }

    .structure-turn {
      background: var(--ga-warm-off-white);
      border-block: 1px solid var(--ga-line);
      margin-inline: calc(50% - 50vw);
      padding: 42px max(24px, calc((100vw - 1180px) / 2));
      text-align: center;
    }

    .structure-turn h3 {
      color: var(--ga-deep-blue-gray);
      font-size: clamp(28px, 4vw, 42px);
      line-height: 1.2;
      margin: 0 auto;
      max-width: 900px;
    }

    .structure-turn h3 span {
      color: var(--ga-mustard);
    }

    .structure-turn p {
      color: var(--ga-muted);
      font-size: 17px;
      line-height: 1.7;
      margin: 14px auto 0;
      max-width: 680px;
    }

    .structure-bento {
      display: grid;
      gap: 14px;
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .structure-case {
      background: #fff;
      border: 1px solid var(--ga-line);
      border-radius: var(--ga-radius-md);
      padding: 16px;
    }

    .structure-case.is-wide {
      align-items: center;
      display: grid;
      gap: 18px;
      grid-column: 1 / -1;
      grid-template-columns: minmax(0, 1fr) auto;
    }

    .structure-case .case-mark {
      align-items: center;
      background: var(--ga-butter);
      border: 1px solid rgba(47, 47, 47, 0.16);
      border-radius: 999px;
      color: var(--ga-ink);
      display: inline-flex;
      font-size: 13px;
      font-weight: 900;
      height: 36px;
      justify-content: center;
      margin-bottom: 10px;
      width: 36px;
    }

    .structure-case h4 {
      color: var(--ga-deep-blue-gray);
      margin: 0 0 8px;
    }

    .structure-case p {
      color: var(--ga-text);
      font-size: 14px;
      line-height: 1.65;
      margin: 0;
    }

    .stacked-slide-section {
      display: grid;
      gap: 14px;
    }

    .stacked-slide-row {
      display: grid;
      gap: 24px;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      max-width: 100%;
      min-width: 0;
      padding: 8px 8px 18px;
      width: 100%;
    }

    .stacked-slide-card {
      background: #fffdf8;
      border: 1px solid #2f2f2f;
      border-radius: 6px;
      box-shadow: 8px 10px 0 #1c1b1b;
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 250px;
      padding: 34px;
      position: relative;
      scroll-snap-align: start;
    }

    .stacked-slide-card::before,
    .stacked-slide-card::after {
      border: 1px solid #2f2f2f;
      border-radius: 6px;
      content: "";
      inset: 8px -8px -8px 8px;
      position: absolute;
      z-index: -1;
    }

    .stacked-slide-card::before {
      background: #f7f3f2;
    }

    .stacked-slide-card::after {
      background: #ebe7e6;
      inset: 14px -14px -14px 14px;
      z-index: -2;
    }

    .stacked-slide-card .icon-tile {
      align-items: center;
      background: #f7f3f2;
      border-radius: 14px;
      color: var(--ga-ink);
      display: inline-flex;
      font-size: 26px;
      font-weight: 900;
      height: 68px;
      justify-content: center;
      line-height: 1;
      margin-bottom: 22px;
      width: 68px;
    }

    .stacked-slide-card .scale-tag {
      color: var(--ga-muted);
      display: block;
      font-size: 12px;
      font-weight: 900;
      margin-bottom: 8px;
    }

    .stacked-slide-card h4 {
      color: var(--ga-ink);
      font-size: 18px;
      margin: 0 0 10px;
    }

    .stacked-slide-card p {
      color: var(--ga-text);
      font-size: 16px;
      line-height: 1.7;
      margin: 0;
    }

    .stacked-slide-note {
      background: #fffaf2;
      border: 1px solid var(--ga-line);
      border-radius: var(--ga-radius-md);
      color: var(--ga-muted);
      font-size: 14px;
      line-height: 1.65;
      padding: 12px 14px;
    }

    .scale-carousel-grid {
      display: grid;
      gap: 28px;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      padding: 6px 14px 16px 0;
    }

    .time-scale-deck.is-legacy-source {
      display: none;
    }

    .time-scale-examples .scale-carousel-grid {
      margin-top: 20px;
    }

    .scale-carousel-grid .stacked-slide-note {
      grid-column: 1 / -1;
      margin: 0;
    }

    .scale-carousel-grid.is-compact {
      gap: 18px;
      grid-template-columns: 1fr;
      padding: 4px 14px 12px 0;
    }

    .scale-carousel {
      display: grid;
      gap: 12px;
      min-width: 0;
    }

    .time-scale-examples .scale-carousel {
      gap: 14px;
      grid-template-rows: auto 460px 24px;
    }

    .scale-carousel-head {
      align-items: end;
      display: flex;
      gap: 12px;
      justify-content: space-between;
      min-width: 0;
    }

    .time-scale-examples .scale-carousel-head {
      align-items: flex-start;
      padding-top: 2px;
    }

    .scale-carousel-head > div:first-child {
      min-width: 0;
    }

    .scale-carousel-head .scale-tag {
      background: var(--ga-cta-yellow);
      border: 1px solid var(--ga-ink);
      border-radius: var(--ga-radius-sm);
      box-shadow: 3px 3px 0 rgba(47, 47, 47, 0.14);
      color: var(--ga-ink);
      display: inline-flex;
      font-size: 12px;
      line-height: 1;
      padding: 6px 9px;
    }

    .flow-keyword {
      background: var(--ga-cta-yellow);
      border: 1px solid var(--ga-ink);
      border-radius: var(--ga-radius-sm, 4px);
      box-shadow: 2px 2px 0 color-mix(in srgb, var(--ga-ink) 14%, transparent);
      color: var(--ga-ink);
      display: inline-flex;
      font-weight: 900;
      line-height: 1;
      margin-inline: 2px;
      padding: 4px 7px;
      white-space: nowrap;
    }

    .scale-carousel-head h4 {
      color: var(--ga-deep-blue-gray);
      font-size: 18px;
      line-height: 1.35;
      margin: 10px 0 0;
    }

    .time-scale-examples .scale-carousel-head h4 {
      margin-top: 14px;
      min-height: calc(2em * 1.35);
    }

    .scale-carousel-controls {
      display: inline-flex;
      flex: 0 0 auto;
      gap: 8px;
    }

    .carousel-btn {
      align-items: center;
      background: #fffdf8;
      border: 1px solid var(--ga-ink);
      border-radius: 999px;
      box-shadow: 3px 3px 0 rgba(47, 47, 47, 0.18);
      color: var(--ga-ink);
      cursor: pointer;
      display: inline-flex;
      font-size: 24px;
      font-weight: 900;
      height: 34px;
      justify-content: center;
      line-height: 1;
      padding: 0;
      width: 34px;
    }

    .carousel-btn:hover {
      background: var(--ga-butter);
    }

    .carousel-btn:focus-visible {
      outline: 3px solid rgba(247, 217, 59, 0.65);
      outline-offset: 3px;
    }

    .scale-carousel-window {
      height: 338px;
      min-height: 0;
      padding: 0 10px 12px 0;
      position: relative;
    }

    .time-scale-examples .scale-carousel-window {
      height: 460px;
    }

    .scale-carousel-window .stacked-slide-card {
      display: none;
      height: 100%;
      justify-content: flex-start;
      min-height: 0;
      padding: 30px;
    }

    .time-scale-examples .scale-carousel-window .stacked-slide-card {
      padding: 36px 34px 42px;
    }

    .scale-carousel-window .stacked-slide-card.has-illustration {
      gap: 18px;
      padding: 22px;
    }

    .stacked-slide-image-panel {
      background: var(--ga-warm-off-white);
      border: 1px solid var(--ga-line);
      border-radius: var(--ga-radius-md, var(--radius));
      flex: 0 0 auto;
      height: 178px;
      overflow: hidden;
    }

    .stacked-slide-image-panel img {
      display: block;
      height: 100%;
      object-fit: cover;
      object-position: center;
      width: 100%;
    }

    .stacked-slide-copy {
      display: grid;
      gap: 12px;
      min-height: 0;
    }

    .scale-carousel-window .stacked-slide-card.has-illustration h4 {
      font-size: 19px;
      line-height: 1.42;
      margin: 0;
    }

    .scale-carousel-window .stacked-slide-card.has-illustration p {
      font-size: 15px;
      line-height: 1.62;
    }

    .scale-carousel-window .stacked-slide-card.is-active {
      display: flex;
    }

    .scale-carousel-status {
      color: var(--ga-muted);
      font-size: 13px;
      font-weight: 800;
      margin: 0;
      text-align: right;
    }

    .scale-carousel-grid.is-compact .scale-carousel-window {
      height: 292px;
      min-height: 0;
    }

    .scale-carousel-grid.is-compact .scale-carousel-window .stacked-slide-card {
      min-height: 0;
      padding: 24px;
    }

    .scale-carousel-grid.is-compact .stacked-slide-card .icon-tile {
      height: 56px;
      margin-bottom: 16px;
      width: 56px;
    }

    .scale-carousel-grid.is-compact .stacked-slide-card p {
      font-size: 15px;
    }

    .mobile-carousel-toolbar-demo .scale-carousel-status.is-inline {
      align-items: center;
      background: #fffdf8;
      border: 1px solid var(--ga-line);
      border-radius: 999px;
      display: inline-flex;
      min-height: 34px;
      padding: 0 10px;
      text-align: center;
    }

    .scale-carousel-footer {
      align-items: center;
      display: flex;
      justify-content: flex-end;
      min-width: 0;
    }

    .mobile-carousel-bottom-controls-demo .time-scale-examples .scale-carousel {
      gap: 10px;
      grid-template-rows: auto 460px auto;
    }

    .mobile-carousel-bottom-controls-demo .scale-carousel-head {
      display: block;
      grid-column: 1;
      grid-row: 1;
    }

    .mobile-carousel-bottom-controls-demo .time-scale-examples .scale-carousel-head h4 {
      margin-top: 10px;
      min-height: 0;
    }

    .mobile-carousel-bottom-controls-demo .scale-carousel-footer {
      display: contents;
      gap: 12px;
      padding-right: 10px;
    }

    .mobile-carousel-bottom-controls-demo .scale-carousel-footer .scale-carousel-controls {
      align-self: start;
      grid-column: 1;
      grid-row: 1;
      justify-self: end;
      padding-right: 10px;
    }

    .mobile-carousel-bottom-controls-demo .scale-carousel-window {
      grid-column: 1;
      grid-row: 2;
    }

    .mobile-carousel-bottom-controls-demo .scale-carousel-footer .scale-carousel-status {
      display: block;
      grid-column: 1;
      grid-row: 3;
      justify-self: end;
      padding-right: 10px;
    }

    .blog-layout {
      display: grid;
      gap: 28px;
      grid-template-columns: minmax(0, 1fr) 280px;
      align-items: start;
    }

    .blog-main {
      display: grid;
      gap: 22px;
    }

    .blog-lead-image {
      background: #fffdf8;
      border: 1px solid var(--ga-line);
      border-radius: var(--ga-radius-md);
      overflow: hidden;
    }

    .blog-lead-image img {
      display: block;
      height: auto;
      width: 100%;
    }

    .blog-prose {
      display: grid;
      gap: 18px;
      max-width: 760px;
    }

    .blog-prose h3 {
      color: var(--ga-deep-blue-gray);
      font-size: clamp(28px, 4vw, 42px);
      line-height: 1.15;
      margin: 0;
    }

    .blog-prose p {
      color: var(--ga-text);
      font-size: 18px;
      line-height: 1.9;
      margin: 0;
    }

    .blog-pullquote {
      border-left: 5px solid var(--ga-cta-yellow);
      color: var(--ga-deep-blue-gray);
      font-size: 24px;
      font-weight: 900;
      line-height: 1.45;
      margin: 6px 0;
      padding-left: 18px;
    }

    .blog-inline-card {
      background: #f6f8fb;
      border: 1px dashed rgba(97, 124, 160, 0.55);
      border-radius: var(--ga-radius-md);
      color: #41536a;
      padding: 18px;
    }

    .blog-inline-card strong {
      color: var(--ga-deep-blue-gray);
      display: block;
      margin-bottom: 8px;
    }

    .blog-side {
      display: grid;
      gap: 14px;
      position: sticky;
      top: 96px;
    }

    .blog-side-card {
      background: #fffdf8;
      border: 1px solid var(--ga-line);
      border-radius: var(--ga-radius-md);
      padding: 16px;
    }

    .blog-side-card h4 {
      color: var(--ga-deep-blue-gray);
      margin: 0 0 10px;
    }

    .blog-side-card p,
    .blog-side-card li {
      color: var(--ga-text);
      font-size: 14px;
      line-height: 1.65;
    }

    .blog-side-card ul {
      display: grid;
      gap: 8px;
      margin: 0;
      padding-left: 18px;
    }

    .structure-media-longform {
      display: grid;
      gap: 22px;
      grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
      align-items: start;
    }

    .structure-media-frame {
      background: #fff;
      border: 1px solid var(--ga-line);
      border-radius: var(--ga-radius-md);
      overflow: hidden;
    }

    .structure-media-frame img {
      display: block;
      height: auto;
      width: 100%;
    }

    .structure-long-copy {
      display: grid;
      gap: 16px;
    }

    .structure-long-copy h3 {
      color: var(--ga-deep-blue-gray);
      margin: 0;
    }

    .structure-long-copy p {
      color: var(--ga-text);
      font-size: 16px;
      line-height: 1.8;
      margin: 0;
    }

    .structure-points {
      display: grid;
      gap: 10px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .structure-points li {
      background: #fff;
      border: 1px solid var(--ga-line);
      border-radius: var(--ga-radius-md);
      color: var(--ga-text);
      font-size: 14px;
      line-height: 1.6;
      padding: 12px;
    }

    .structure-cta {
      align-items: center;
      display: flex;
      justify-content: center;
      padding: 12px 0 4px;
    }

    .structure-inline-deck {
      display: grid;
      gap: 34px;
      grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
      align-items: start;
    }

    .structure-inline-deck > * {
      min-width: 0;
    }

    .structure-inline-deck .time-scale-deck {
      grid-template-columns: 1fr;
    }

    .structure-inline-deck .time-scale-group {
      min-height: 0;
    }

    .structure-inline-deck .time-example-grid {
      max-height: 360px;
    }

    .letter-page {
      max-width: 760px;
      margin: 0 auto;
    }

    .letter-page.wide-letter {
      max-width: 980px;
    }

    .letter-card {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #fffdf8;
      box-shadow: var(--shadow);
      padding: clamp(20px, 4vw, 44px);
    }

    .letter-card p {
      font-size: 18px;
      line-height: 1.85;
    }

    .letter-card .pull-line {
      border-left: 4px solid var(--ga-cta-yellow);
      color: var(--ga-deep-blue-gray);
      font-size: 22px;
      font-weight: 800;
      line-height: 1.45;
      margin: 24px 0;
      padding-left: 16px;
    }

    .letter-break {
      border-top: 1px solid var(--line);
      margin: 26px 0;
    }

    .story-strip {
      display: flex;
      gap: 12px;
      width: 100%;
      max-width: 100%;
      overflow-x: auto;
      overscroll-behavior-x: contain;
      padding: 4px 2px 16px;
      scroll-snap-type: x mandatory;
    }

    .story-slide {
      flex: 0 0 min(280px, 78vw);
      min-height: 300px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #fffdf8;
      display: grid;
      align-content: space-between;
      gap: 18px;
      padding: 18px;
      scroll-snap-align: start;
      box-shadow: 0 8px 22px rgba(50, 65, 88, 0.06);
    }

    .story-slide strong {
      color: var(--ga-deep-blue-gray);
      font-size: 20px;
      line-height: 1.25;
    }

    .story-slide p {
      margin: 0;
      color: var(--ga-text);
    }

    .story-slide .slide-index {
      color: var(--ga-mustard);
      font-size: 12px;
      font-weight: 900;
    }

    .story-slide.highlight-slide {
      background: var(--ga-cta-yellow);
      border-color: var(--ga-ink);
      box-shadow: var(--hard-shadow);
    }

    @media (max-width: 980px) {
      .learn-header {
        align-items: flex-start;
        flex-direction: column;
      }

      .learn-hero.active,
      .pack-overview,
      .empty-grid {
        grid-template-columns: 1fr;
      }

      .dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .dashboard-card,
      .next-card {
        grid-column: span 2;
      }

      .module-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .concept-hero,
      .time-scale-grid {
        grid-template-columns: 1fr;
      }

      .structure-bento,
      .structure-media-longform,
      .structure-inline-deck,
      .blog-layout,
      .scale-carousel-grid {
        grid-template-columns: 1fr;
      }

      .structure-case.is-wide {
        grid-template-columns: 1fr;
      }

      .stacked-slide-row {
        grid-auto-columns: minmax(280px, 86%);
        grid-auto-flow: column;
        grid-template-columns: none;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
      }

      .blog-side {
        position: static;
      }

      .scale-carousel-grid {
        padding-right: 14px;
      }

      .mobile-carousel-bottom-controls-demo .time-scale-examples .scale-carousel {
        grid-template-rows: auto 460px auto;
        gap: 10px;
        margin-bottom: 56px;
      }

      .mobile-carousel-bottom-controls-demo .time-scale-examples .scale-carousel:last-child {
        margin-bottom: 0;
      }

      .mobile-carousel-bottom-controls-demo .scale-carousel-footer {
        display: flex;
        gap: 12px;
        padding-right: 10px;
      }

      .mobile-carousel-bottom-controls-demo .scale-carousel-footer .scale-carousel-controls,
      .mobile-carousel-bottom-controls-demo .scale-carousel-footer .scale-carousel-status {
        grid-column: auto;
        grid-row: auto;
        justify-self: auto;
        padding-right: 0;
      }

      .mobile-carousel-bottom-controls-demo .scale-carousel-status {
        min-width: 46px;
      }
    }

    @media (max-width: 620px) {
      .learn-main {
        width: min(100% - 28px, 1180px);
        padding-top: 28px;
      }

      .learn-nav {
        justify-content: flex-start;
      }

      .dashboard-grid,
      .module-grid {
        grid-template-columns: 1fr;
      }

      .dashboard-card,
      .next-card {
        grid-column: auto;
      }

      .experience-row {
        align-items: flex-start;
        flex-direction: column;
      }

      .variant-nav {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 4px;
      }

      .variant-nav a {
        white-space: nowrap;
      }

      .actions.actions-end {
        justify-content: stretch;
      }

      .actions.actions-end .primary-btn {
        text-align: center;
        width: 100%;
      }

      .scale-carousel-window .stacked-slide-card {
        height: 100%;
        min-height: 0;
        padding: 24px;
      }

      .scale-carousel-head {
        align-items: flex-start;
      }

      .mobile-carousel-spacing-demo .time-scale-examples .scale-carousel {
        margin-bottom: 46px;
      }

      .mobile-carousel-spacing-demo .time-scale-examples .scale-carousel:last-child {
        margin-bottom: 0;
      }

      .mobile-carousel-spacing-demo .scale-carousel-status {
        margin-top: -2px;
        padding-right: 6px;
      }

      .mobile-carousel-toolbar-demo .time-scale-examples .scale-carousel {
        grid-template-rows: auto 460px;
        gap: 16px;
        margin-bottom: 34px;
      }

      .mobile-carousel-toolbar-demo .time-scale-examples .scale-carousel:last-child {
        margin-bottom: 0;
      }

      .mobile-carousel-toolbar-demo .scale-carousel-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
      }

      .mobile-carousel-toolbar-demo .scale-carousel-controls {
        align-items: center;
        align-self: start;
        gap: 6px;
      }

      .mobile-carousel-bottom-controls-demo .time-scale-examples .scale-carousel {
        grid-template-rows: auto 460px auto;
        gap: 10px;
        margin-bottom: 24px;
      }

      .mobile-carousel-bottom-controls-demo .time-scale-examples .scale-carousel:last-child {
        margin-bottom: 0;
      }

      .mobile-carousel-bottom-controls-demo .scale-carousel-head {
        display: block;
      }

      .mobile-carousel-bottom-controls-demo .scale-carousel-footer {
        display: flex;
        gap: 12px;
        padding-right: 10px;
      }

      .mobile-carousel-bottom-controls-demo .scale-carousel-status {
        min-width: 46px;
      }

      .rhythm-figure {
        grid-template-columns: 1fr;
      }

      .time-scale-deck {
        display: grid;
        grid-auto-columns: minmax(280px, 86%);
        grid-auto-flow: column;
        grid-template-columns: none;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        padding-bottom: 10px;
        scroll-snap-type: x mandatory;
      }

      .podcast-card {
        flex-direction: column;
      }

      .supplement-compact-demo .podcast-card.compact-supplement-card,
      .supplement-compact-card-demo .podcast-card.compact-supplement-card,
      .supplement-card-link-demo .podcast-card.supplemental-card,
      .supplement-modal-demo .podcast-card.supplemental-card {
        display: grid;
        gap: 12px;
        grid-template-columns: 96px minmax(0, 1fr);
        padding: 12px;
      }

      .supplement-compact-demo .podcast-card.compact-supplement-card .podcast-cover,
      .supplement-compact-card-demo .podcast-card.compact-supplement-card .podcast-cover,
      .supplement-card-link-demo .podcast-card.supplemental-card .podcast-cover,
      .supplement-modal-demo .podcast-card.supplemental-card .podcast-cover {
        flex-basis: 96px;
        min-height: 96px;
        width: 96px;
      }

      .supplement-compact-demo .podcast-copy h3,
      .supplement-compact-card-demo .podcast-copy h3,
      .supplement-card-link-demo .podcast-copy h3,
      .supplement-modal-demo .podcast-copy h3 {
        font-size: 16px;
      }

      .supplement-compact-demo .podcast-copy > p:not(.lesson-label),
      .supplement-compact-card-demo .podcast-copy > p:not(.lesson-label),
      .supplement-card-link-demo .podcast-copy > p:not(.lesson-label),
      .supplement-modal-demo .podcast-copy > p:not(.lesson-label) {
        display: none;
      }

      .supplement-reason-inline-demo.supplement-compact-card-demo .podcast-copy > p.supplement-reason-inline {
        display: block;
      }

      .reason-popover {
        left: 0;
        right: 0;
        top: -8px;
        transform: translateY(-100%);
      }

      .reason-info-shell {
        margin-bottom: 0;
      }

      .supplement-modal {
        padding: 18px;
      }

      .supplement-modal-panel {
        padding: 20px;
      }

      .supplement-modal-panel h2 {
        font-size: 20px;
      }

      .supplement-modal-actions {
        display: grid;
      }

      .supplement-modal-actions .primary-btn,
      .supplement-modal-actions .secondary-btn,
      .supplement-modal-actions .ghost-btn {
        width: 100%;
      }

      .rhythm-step:not(:last-child)::after {
        display: none;
      }

      .podcast-cover {
        flex-basis: auto;
        min-height: 96px;
        width: 100%;
      }

      .supplement-compact-demo .podcast-card.compact-supplement-card .podcast-cover,
      .supplement-compact-card-demo .podcast-card.compact-supplement-card .podcast-cover,
      .supplement-card-link-demo .podcast-card.supplemental-card .podcast-cover,
      .supplement-modal-demo .podcast-card.supplemental-card .podcast-cover {
        flex-basis: 96px;
        min-height: 96px;
        width: 96px;
      }

      .letter-card p {
        font-size: 16px;
        line-height: 1.75;
      }

      .story-strip {
        margin-inline: 0;
      }
    }