:root {
  --indigo: #6657ff;
  --cyan: #39d9ff;
  --ivory: #f7f6f2;
  --ink: #25263a;
  --soft: #707386;
  --line: #d9d8e7;
  --green: #27895b;
  --amber: #b87511;
  --coral: #c64f54;
  --dark: #25263a;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ivory); color: var(--ink); font: 16px/1.45 ui-rounded, "Avenir Next", Avenir, "Segoe UI", sans-serif; }
a { color: inherit; text-underline-offset: 4px; }
img, video { max-width: 100%; }
.spire-wrap { width: min(1180px, calc(100% - 40px)); margin: auto; }
.spire-nav { position: sticky; top: 0; z-index: 10; border-bottom: 1px solid #e4e3ed; background: #f7f6f2ee; backdrop-filter: blur(14px); }
.spire-nav .spire-wrap { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.spire-brand { color: var(--indigo); font: 900 1.25rem/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: .08em; text-decoration: none; }
.spire-navlinks { display: flex; align-items: center; justify-content: flex-end; gap: 18px; flex-wrap: wrap; font: 800 .72rem/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.spire-navlinks a { text-decoration: none; }
.spire-navlinks a:hover, .spire-navlinks a[aria-current="page"] { color: var(--indigo); }
.spire-eyebrow { margin: 0 0 12px; color: var(--indigo); font: 800 .74rem/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.spire-hero { display: block; min-height: 0; padding: 28px 0 32px; }
.spire-hero-copy { max-width: 820px; margin-bottom: 16px; }
.spire-hero h1 { max-width: 700px; margin: 0; font-size: clamp(2.1rem, 3.6vw, 3.2rem); line-height: .94; letter-spacing: -.07em; }
.spire-hero h1 span { color: var(--indigo); }
.spire-lede { max-width: 650px; margin: 12px 0 0; color: var(--soft); font-size: 1rem; }
.spire-actions { display: flex; gap: 11px; flex-wrap: wrap; margin-top: 30px; }
.spire-button { display: inline-block; border-radius: 999px; padding: 13px 18px; background: var(--indigo); color: #fff; font: 800 .76rem/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: .06em; text-decoration: none; text-transform: uppercase; }
.spire-button.secondary { border: 1px solid var(--indigo); background: #fff; color: var(--indigo); }
.spire-hero-visual { position: relative; min-height: 450px; overflow: hidden; border: 1px solid #d4d2e8; border-radius: 28px; background: #fff; box-shadow: 0 26px 65px #29293b1c; }
.spire-hero-visual img { display: block; width: 100%; height: 100%; min-height: 450px; object-fit: cover; object-position: center; }
.spire-hero-visual figcaption { position: absolute; right: 22px; bottom: 22px; left: 22px; padding: 13px 15px; border-radius: 13px; background: #25263ae8; color: #fff; font-size: .88rem; }
.spire-hero-visual figcaption strong { display: block; color: var(--cyan); font: 800 .68rem/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.spire-hero-video { max-width: 880px; overflow: hidden; margin: 0 auto; border: 1px solid #d4d2e8; border-radius: 24px; background: #0c1020; box-shadow: 0 24px 58px #29293b1c; }
.spire-hero-video video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #0c1020; }
.spire-hero-video figcaption { padding: 13px 17px; background: #25263a; color: #c5c6d5; font-size: .84rem; }
.spire-hero-video figcaption strong { display: block; margin-bottom: 3px; color: var(--cyan); font: 800 .68rem/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.spire-section { padding: 36px 0; }
.spire-section.alt { background: #fff; }
.spire-section.dark { background: var(--dark); color: #f7f6f2; }
.spire-section[aria-labelledby="fit-title"] { padding: 32px 0 36px; }
.spire-section[aria-labelledby="fit-title"] .spire-intro { max-width: 760px; margin-top: 12px; font-size: .98rem; }
.spire-section[aria-labelledby="fit-title"] .reason-grid { margin-top: 16px; }
.spire-section[aria-labelledby="fit-title"] .spire-card { padding: 17px 19px; }
.spire-section[aria-labelledby="fit-title"] .spire-card .label { margin-bottom: 10px; }
.spire-section[aria-labelledby="fit-title"] .spire-card h3 { margin-bottom: 5px; font-size: 1.08rem; }
.spire-section[aria-labelledby="fit-title"] .spire-card p { font-size: .9rem; }
.spire-section.dark .spire-eyebrow { color: var(--cyan); }
.spire-section.dark .spire-intro { color: #c5c6d5; }
.spire-section h2 { max-width: 880px; margin: 0; font-size: clamp(1.75rem, 3vw, 2.65rem); line-height: 1; letter-spacing: -.065em; }
.spire-intro { max-width: 680px; margin: 10px 0 0; color: var(--soft); font-size: 1rem; }
.reason-grid, .skill-grid, .milestone-grid, .trophy-grid { display: grid; gap: 11px; margin-top: 16px; }
.reason-grid { grid-template-columns: repeat(4, 1fr); }
.skill-grid { grid-template-columns: repeat(3, 1fr); }
.milestone-grid { grid-template-columns: repeat(3, 1fr); }
.trophy-grid { grid-template-columns: 1.2fr .9fr .9fr; }
.spire-card { padding: 14px; border: 1px solid var(--line); border-radius: 17px; background: #fff; }
.spire-card h3 { margin: 0 0 9px; font-size: 1.1rem; letter-spacing: -.035em; }
.spire-card p { margin: 0; color: var(--soft); }
.spire-card .label { display: inline-block; margin-bottom: 10px; border-radius: 999px; padding: 6px 9px; background: #edecff; color: var(--indigo); font: 800 .66rem/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.dark .spire-card { border-color: #5e5f73; background: #303146; }
.dark .spire-card p { color: #d7d7e4; }
.dark .spire-card .label { background: #164651; color: var(--cyan); }
.architecture-flow { display: grid; grid-template-columns: 1fr 54px 1fr 54px 1fr; gap: 0; align-items: center; margin-top: 24px; }
.flow-arrow { color: var(--indigo); font: 900 2.6rem/1 Georgia, serif; text-align: center; }
.skill-card { min-height: 0; }
.skill-card h3 { font-size: 1.3rem; }
.skill-card strong { display: block; margin-bottom: 6px; color: var(--indigo); font-size: .84rem; letter-spacing: .08em; text-transform: uppercase; }
.flow-note { max-width: 920px; margin: 16px auto 0; color: var(--soft); text-align: center; }
.media-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 16px; margin-top: 16px; }
.spire-media { overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: #fff; }
.spire-media img, .spire-media video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #0c1020; }
.spire-media figcaption { padding: 15px 17px; color: var(--soft); font-size: .88rem; }
.spire-media figcaption strong { display: block; margin-bottom: 4px; color: var(--ink); }
.trophy-card { overflow: hidden; padding: 0; }
.trophy-card img { display: block; width: 100%; height: 220px; object-fit: cover; object-position: center 35%; }
.trophy-card .trophy-copy { padding: 19px 20px 22px; }
.trophy-card .trophy-copy p { font-size: .9rem; }
.trophy-card.featured { display: grid; grid-template-columns: 1.15fr .85fr; grid-column: span 3; }
.trophy-card.featured img { width: 100%; height: 100%; min-height: 250px; }
.trophy-card.featured .trophy-copy { align-self: center; }
.trophy-value { display: block; margin: 3px 0 8px; color: var(--indigo); font-size: 2.2rem; font-weight: 900; letter-spacing: -.07em; }
.report-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 20px; }
.report-metric { padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.report-metric strong { display: block; color: var(--indigo); font-size: 2rem; letter-spacing: -.07em; }
.report-metric span { display: block; margin-top: 3px; color: var(--soft); font-size: .74rem; }
.floor-list { display: grid; gap: 14px; margin-top: 20px; }
.live-floor-list { display: flex; flex-direction: column-reverse; }
.floor-card { display: grid; grid-template-columns: 190px minmax(0, 1fr); overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 10px 25px #29293b0b; }
.floor-card img { display: block; width: 100%; height: 100%; min-height: 145px; object-fit: cover; }
.floor-copy { padding: 12px 16px; }
.floor-topline { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 5px; }
.floor-number { color: var(--indigo); font-size: 1.2rem; font-weight: 900; }
.floor-status { color: var(--soft); font: 800 .68rem/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.floor-status.complete { color: var(--green); }
.floor-status.incomplete { color: var(--amber); }
.floor-copy h3 { margin: 0 0 6px; font-size: 1.05rem; }
.floor-copy p { margin: 0; color: var(--soft); font-size: .9rem; }
.floor-source { margin-top: 9px !important; color: #505a70 !important; font-size: .875rem !important; }
.floor-source strong { color: var(--soft); }
.progress-area + .progress-area { margin-top: 34px; }
.progress-heading { margin: 0; font-size: clamp(1.6rem, 2.7vw, 2.3rem); line-height: 1; letter-spacing: -.06em; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-top: 16px; }
.stat-card { min-height: 84px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.stat-card strong { display: block; color: var(--indigo); font-size: clamp(1.2rem, 2vw, 1.65rem); line-height: 1; letter-spacing: -.06em; }
.stat-card span { display: block; margin-top: 9px; color: var(--soft); font-size: .76rem; }
.achievement-evidence { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; margin-top: 20px; padding: 16px; border: 1px solid var(--line); border-radius: 19px; background: #fff; }
.achievement-evidence h3 { margin: 0 0 8px; font-size: 1.35rem; letter-spacing: -.04em; }
.achievement-evidence p:not(.spire-eyebrow) { max-width: 620px; margin: 0; color: var(--soft); font-size: .9rem; }
.history-placeholder { display: flex; min-height: 145px; align-items: center; justify-content: center; flex-direction: column; gap: 4px; padding: 20px; background: linear-gradient(145deg, #f1f0fa, #e6f8fb); color: var(--indigo); text-align: center; }
.history-placeholder strong { font-size: .84rem; }
.history-placeholder span { color: var(--soft); font-size: .75rem; }
.stats-evidence-placeholder { min-height: 150px; border: 1px dashed #b7b6ca; border-radius: 14px; }
.learned-area { padding-top: 0; }
.lesson-filters { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 18px; }
.lesson-filter { border: 1px solid var(--line); border-radius: 999px; padding: 7px 11px; background: #fff; color: var(--soft); font: 800 .67rem/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: .05em; cursor: pointer; }
.lesson-filter:hover, .lesson-filter.is-active { border-color: var(--indigo); background: #edecff; color: var(--indigo); }
.lesson-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.lesson-card { min-height: 0; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.lesson-card h4 { margin: 0 0 8px; font-size: 1.12rem; letter-spacing: -.035em; }
.lesson-card p { margin: 0; color: var(--soft); font-size: .9rem; }
.lesson-card .label { display: inline-block; margin-bottom: 8px; border-radius: 999px; padding: 6px 9px; background: #edecff; color: var(--indigo); font: 800 .64rem/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.run-history-area { padding-top: 0; }
#history-title { scroll-margin-top: 90px; }
.history-intro { max-width: 760px; margin: 12px 0 0; color: var(--soft); }
.history-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; padding: 14px; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.history-filters label { display: grid; gap: 7px; color: var(--soft); font: 800 .68rem/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.history-filters select { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 10px 11px; background: var(--ivory); color: var(--ink); font: 600 .9rem/1.2 inherit; letter-spacing: 0; text-transform: none; }
.history-filter-status { margin: 13px 0 0; color: var(--soft); font-size: .8rem; }
.run-history-list { display: grid; gap: 16px; margin-top: 16px; }
.run-history-group { display: grid; gap: 13px; }
.run-group-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 0 2px; }
.run-group-heading h4 { margin: 0; color: var(--ink); font-size: 1.3rem; letter-spacing: -.05em; }
.run-group-heading p { margin: 4px 0 0; color: var(--soft); font-size: .85rem; }
.run-group-heading .label { display: inline-block; margin-bottom: 5px; border-radius: 999px; padding: 5px 8px; background: #edecff; color: var(--indigo); font: 800 .62rem/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.floor-status.ongoing { color: var(--indigo); }
.floor-status.failed { color: var(--coral); }
.run-summary-card { grid-template-columns: minmax(230px, .8fr) minmax(0, 1.4fr); }
.run-summary-card img { min-height: 0; }
.run-summary-card .floor-copy { padding: 16px; }
.history-floor-list { display: grid; gap: 12px; margin-top: 0; }
.history-floor-list .floor-card { grid-template-columns: 160px minmax(0, 1fr); }
.history-floor-list .floor-copy { padding: 12px 16px; }
.history-floor-list .floor-copy p + p { margin-top: 4px; }
.history-empty { margin: 25px 0 0; padding: 22px; border: 1px dashed #b7b6ca; border-radius: 15px; background: #fff; color: var(--soft); text-align: center; }
.attempt-panel { margin-top: 28px; padding: 18px; border: 1px solid var(--line); border-radius: 20px; background: #fff; }
.attempt-panel h3 { margin: 0 0 9px; font-size: 1.3rem; }
.attempt-panel > p { max-width: 760px; margin: 0; color: var(--soft); }
.attempt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; margin-top: 25px; }
.attempt-card { padding: 19px; border: 1px solid var(--line); border-radius: 15px; background: var(--ivory); }
.attempt-card img { display: block; width: calc(100% + 38px); height: 130px; margin: -19px -19px 17px; object-fit: cover; }
.attempt-card .floor-number { display: block; margin-bottom: 6px; font-size: 1rem; }
.attempt-card h4 { margin: 0 0 6px; font-size: 1.08rem; }
.attempt-card p { margin: 0; color: var(--soft); font-size: .88rem; }
.attempt-card.failure { border-color: #e2b1b3; background: #fff6f6; }
.attempt-card.failure .floor-number { color: var(--coral); }
.attempt-link { display: inline-block; margin-top: 18px; color: var(--indigo); font-weight: 800; }
.spire-notice { margin-top: 16px; padding: 15px 17px; border: 1px solid #d8c58d; border-radius: 15px; background: #fffaf0; color: #715d2a; }
.spire-notice strong { color: #936f12; }
.spire-footer { padding: 24px 0 28px; background: var(--dark); color: #c7c7d6; font-size: .84rem; text-align: center; }
.spire-footer a { color: #fff; }
@media (max-width: 900px) { .spire-hero { grid-template-columns: 1fr; min-height: 0; padding: 28px 0 32px; } .reason-grid { grid-template-columns: repeat(2, 1fr); } .skill-grid, .milestone-grid { grid-template-columns: 1fr 1fr; } .trophy-grid { grid-template-columns: 1fr 1fr; } .trophy-card.featured { grid-column: span 2; } .stats-grid { grid-template-columns: repeat(3, 1fr); } .lesson-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 650px) { body { font-size: 16px; } .spire-wrap { width: min(100% - 28px, 1180px); } .spire-nav .spire-wrap { align-items: flex-start; padding: 13px 0; } .spire-navlinks { gap: 11px; font-size: .63rem; } .spire-hero h1 { font-size: clamp(2rem, 9vw, 2.8rem); } .spire-hero-visual, .spire-hero-visual img { min-height: 330px; } .spire-section { padding: 30px 0; } .reason-grid, .skill-grid, .milestone-grid, .trophy-grid, .report-metrics, .attempt-grid, .stats-grid, .lesson-grid, .history-filters, .achievement-evidence { grid-template-columns: 1fr; } .trophy-card.featured { display: block; grid-column: auto; } .trophy-card.featured img { height: 220px; min-height: 0; } .architecture-flow { grid-template-columns: 1fr; gap: 10px; } .flow-arrow { transform: rotate(90deg); } .media-grid { grid-template-columns: 1fr; } .floor-card, .run-summary-card, .history-floor-list .floor-card { grid-template-columns: 1fr; } .floor-card img, .history-floor-list .history-placeholder { height: 185px; min-height: 0; } .floor-topline { display: block; } .floor-status { display: block; margin-top: 4px; } .attempt-panel { padding: 21px; } .run-group-heading { display: block; } .run-group-heading > .floor-status { margin-top: 9px; } }

/* Contrast for small evidence captions and outcome labels. */
.floor-source, .floor-source strong { color: #505a70; font-size: .875rem; }
.floor-status.complete { color: #16684a; }
.floor-status.incomplete { color: #755209; }
.floor-status, .lesson-filter, .history-filters label { font-size: .875rem; }
a:focus-visible, button:focus-visible, select:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }

/* Compact archive photos retain the complete game frame. */
.progress-attempts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.progress-attempt { margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.progress-attempt a { display: block; background: #15151d; }
.progress-attempt img { display: block; width: 100%; height: 220px; object-fit: contain; }
.progress-attempt figcaption { display: grid; gap: 3px; padding: 10px 14px; font-size: .875rem; }
.progress-attempt figcaption span { color: #505a70; }
.floor-photo { display: flex; flex-direction: column; justify-content: center; min-width: 0; margin: 0; background: #eeedf3; }
.floor-photo a { display: block; }
.floor-card .floor-photo img { width: 100%; height: auto; min-height: 0; aspect-ratio: 16 / 9; object-fit: contain; background: #15151d; }
.floor-photo figcaption { padding: 7px 9px; color: #505a70; font-size: .75rem; line-height: 1.35; }
.history-floor-list .floor-card { grid-template-columns: 220px minmax(0, 1fr); }
.run-summary-card > img { object-fit: contain; background: #15151d; }
@media (max-width: 650px) {
  .progress-attempts { grid-template-columns: 1fr; }
  .progress-attempt img { height: auto; max-height: 260px; }
  .history-floor-list .floor-card { grid-template-columns: 1fr; }
  .floor-card .floor-photo img { max-height: 220px; }
}

/* Automation and self-training visual maps. */
.automation-panel { margin-top: 27px; padding: 22px; border: 1px solid #cfd0e7; border-radius: 22px; background: linear-gradient(145deg, #f4f3ff, #effcff); }
.automation-panel-heading, .self-training-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; }
.automation-panel-heading .progress-heading { font-size: clamp(1.45rem, 2.4vw, 2rem); }
.automation-intro { max-width: 620px; margin: 8px 0 0; color: var(--soft); }
.automation-status { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; color: var(--green); font: 800 .7rem/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.automation-status i, .training-footer i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px #27895b1c; }
.automation-map { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-top: 19px; }
.automation-node { display: flex; gap: 10px; min-height: 104px; padding: 13px; border: 1px solid #d9d8e7; border-radius: 15px; background: #fff; }
.automation-icon { display: grid; flex: 0 0 30px; width: 30px; height: 30px; place-items: center; border-radius: 10px; background: #edecff; color: var(--indigo); font-size: 1.1rem; font-weight: 900; }
.automation-node strong { display: block; margin-bottom: 4px; color: var(--ink); font-size: .9rem; }
.automation-node span:not(.automation-icon) { display: block; color: var(--soft); font-size: .78rem; line-height: 1.35; }
.automation-node-output { border-color: #a9dfe8; background: #f2fdff; }
.automation-node-output .automation-icon { background: #d9f7fb; color: #08788a; }
.automation-rail { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 18px; color: var(--indigo); font: 800 .65rem/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.automation-rail b { font-size: 1.2rem; }
.self-training-section { background: #25263a; color: #f7f6f2; }
.self-training-section .spire-eyebrow { color: var(--cyan); }
.self-training-section .spire-intro { color: #c5c6d5; }
.training-score { display: grid; min-width: 110px; padding: 12px 16px; border: 1px solid #5e5f73; border-radius: 15px; background: #303146; text-align: center; }
.training-score strong { color: var(--cyan); font-size: 2.25rem; line-height: .9; letter-spacing: -.08em; }
.training-score span { margin-top: 8px; color: #c5c6d5; font: 800 .64rem/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.training-loop { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; margin-top: 24px; }
.training-loop article { position: relative; min-height: 165px; padding: 16px; border: 1px solid #5e5f73; border-radius: 16px; background: #303146; }
.training-loop article:not(:last-child)::after { position: absolute; top: 21px; right: -15px; z-index: 1; color: var(--cyan); content: '→'; font-size: 1.2rem; font-weight: 900; }
.training-step { display: inline-block; margin-bottom: 22px; color: var(--cyan); font: 900 .72rem/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: .12em; }
.training-loop h3 { margin: 0 0 7px; font-size: 1.15rem; }
.training-loop p { margin: 0; color: #c5c6d5; font-size: .84rem; }
.training-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; color: #c5c6d5; font-size: .78rem; }
.training-footer span { display: inline-flex; align-items: center; gap: 8px; }
.training-footer a { color: var(--cyan); font-weight: 800; text-decoration: none; }
.learning-ledger { margin-top: 24px; padding: 20px; border: 1px solid #5e5f73; border-radius: 18px; background: #25263a; }
.learning-ledger-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; }
.learning-ledger-heading .spire-eyebrow { margin-bottom: 8px; }
.learning-ledger-heading h3 { margin: 0; color: #fff; }
.learning-ledger-updated { color: #c5c6d5; font: 700 .75rem/1.3 ui-sans-serif, system-ui, sans-serif; white-space: nowrap; }
.learning-ledger-intro, .learning-ledger-note { max-width: 820px; color: #c5c6d5; font-size: .92rem; }
.learning-ledger-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px; margin-top: 18px; }
.learning-ledger-grid > div { min-height: 86px; padding: 13px; border: 1px solid #5e5f73; border-radius: 13px; background: #303146; }
.learning-ledger-grid strong { display: block; color: var(--cyan); font-size: 1.75rem; line-height: 1; letter-spacing: -.06em; }
.learning-ledger-grid span { display: block; margin-top: 8px; color: #d7d7e4; font: 800 .65rem/1.25 ui-sans-serif, system-ui, sans-serif; letter-spacing: .07em; text-transform: uppercase; }
.learning-ledger-note { margin-bottom: 0; }
@media (max-width: 900px) { .automation-map { grid-template-columns: repeat(2, 1fr); } .training-loop { grid-template-columns: repeat(2, 1fr); } .training-loop article:not(:last-child)::after { display: none; } }
@media (max-width: 650px) { .automation-panel-heading, .self-training-heading, .training-footer, .learning-ledger-heading { align-items: flex-start; flex-direction: column; } .automation-map, .training-loop, .learning-ledger-grid { grid-template-columns: 1fr; } .automation-rail { flex-wrap: wrap; gap: 8px; } .training-score { min-width: 100%; } .learning-ledger-updated { white-space: normal; } }