:root {
  color-scheme: light;
  --ink: #202124;
  --muted: #6f7378;
  --line: #dfe1e5;
  --soft-line: #eceef1;
  --surface: #ffffff;
  --canvas: #f7f8fa;
  --attention: #64b5f6;
  --attention-dark: #1675bb;
  --mlp: #ffb74d;
  --mlp-dark: #b85e00;
  --collective: #ba68c8;
  --collective-dark: #7b2988;
  --routing: #4db6ac;
  --routing-dark: #087d74;
  --optimizer: #81c784;
  --optimizer-dark: #2d7d32;
  --loss: #e57373;
  --loss-dark: #a52f2f;
  --bubble: #b0bec5;
  --bubble-dark: #52636b;
  --shadow: 0 18px 50px rgba(28, 32, 37, 0.08);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.comparison-trace-panel.anonymized .comparison-trace-block.has-anonymous-label span { display: block; }
.recognition-intro { grid-template-columns: 1fr; }.recognition-trace-key { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; margin: 0 0 10px; padding: 0 2px; }.recognition-trace-key .recognition-legend { margin: 0; }.recognition-trace-key p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.4; text-align: right; }

.palette-heading > div:first-child > small { display: block; margin-top: 4px; color: #858c92; font-size: 8px; line-height: 1.35; }

* { box-sizing: border-box; }
.comparison-micro-block { z-index: 2; }
.comparison-trace-block.not-answerable { opacity: .55; cursor: help; }
.comparison-trace-block:not(.not-answerable):hover { box-shadow: inset 0 0 0 2px rgba(38,87,130,.55); z-index: 4; }
html { scroll-behavior: smooth; overscroll-behavior-x: none; }
body { overscroll-behavior-x: none; }
body { margin: 0; color: var(--ink); background: var(--surface); }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }

.site-header { height: 68px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 0 34px; position: relative; z-index: 20; background: rgba(255,255,255,.94); backdrop-filter: blur(16px); }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 750; letter-spacing: -.02em; }
.brand-mark { display: flex; flex-direction: column; justify-content: center; gap: 3px; width: 26px; height: 20px; }
.brand-mark i { display: block; height: 4px; border-radius: 2px; }
.brand-mark i:nth-child(1) { width: 18px; background: var(--attention); }
.brand-mark i:nth-child(2) { width: 26px; background: var(--collective); }
.brand-mark i:nth-child(3) { width: 21px; margin-left: 5px; background: var(--mlp); }
.header-actions { display: flex; align-items: center; gap: 22px; font-size: 14px; }
.text-button, .header-link { border: 0; background: transparent; padding: 5px 0; color: var(--muted); cursor: pointer; }
.text-button:hover, .header-link:hover { color: var(--ink); }
.theme-toggle { height: 30px; border: 1px solid var(--line); border-radius: 16px; background: var(--canvas); padding: 0 10px 0 8px; display: inline-flex; align-items: center; gap: 6px; color: var(--muted); cursor: pointer; font-size: 11px; font-weight: 680; }
.theme-toggle:hover { border-color: #9ca1a6; color: var(--ink); }.theme-toggle [data-theme-icon] { width: 13px; font-size: 14px; line-height: 1; text-align: center; }
.wrap { max-width: 1220px; margin-inline: auto; padding-inline: 28px; }
.eyebrow { color: #70757a; font-size: 11px; line-height: 1; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; margin: 0 0 13px; }

.hero { min-height: 500px; display: grid; grid-template-columns: 1.08fr .92fr; gap: 72px; align-items: center; padding-top: 66px; padding-bottom: 62px; }
.hero h1 { font-size: clamp(48px, 5vw, 68px); line-height: .98; letter-spacing: -.055em; margin: 0; font-weight: 780; }
.hero h1 span { color: #8b9096; }
.hero-lede { max-width: 620px; margin: 25px 0 24px; color: #555a60; font-size: 17px; line-height: 1.6; }
.hero-actions { display: flex; align-items: center; gap: 12px; margin-bottom: 23px; }
.hero-primary, .hero-secondary { min-height: 42px; padding: 0 15px; display: inline-flex; align-items: center; justify-content: center; gap: 26px; border: 1px solid #272a2d; font-size: 12px; font-weight: 720; cursor: pointer; }
.hero-primary { background: #272a2d; color: white; }.hero-primary:hover { background: #050505; }.hero-primary span { color: #aeb4ba; font-size: 15px; }
.hero-secondary { background: white; color: #555b60; border-color: var(--line); }.hero-secondary:hover { border-color: #9ca1a6; color: var(--ink); }
.hero-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .055em; }
.hero-meta span { position: relative; }
.hero-meta span + span::before { content: "·"; position: absolute; left: -14px; }
.trace-illustration { min-height: 330px; position: relative; }
.trace-sketch { display: block; width: 100%; height: auto; overflow: visible; }
.sketch-paper, .sketch-paper-echo { fill: #fbfbfa; stroke: #aeb3b7; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }.sketch-paper { filter: url(#rough-line); }.sketch-paper-echo { fill: none; opacity: .25; }
.sketch-track path { fill: none; stroke: #7c8388; stroke-width: 1.35; stroke-linecap: round; opacity: .6; }.sketch-track circle { fill: #7c8388; opacity: .7; }
.sketch-blocks rect { stroke: rgba(35,40,45,.45); stroke-width: 1.15; }.sketch-blue { fill: var(--attention); }.sketch-orange { fill: var(--mlp); }.sketch-purple { fill: var(--collective); }.sketch-teal { fill: var(--routing); }
.sketch-dependencies path { fill: none; stroke: #6f767b; stroke-width: 1.25; stroke-linecap: round; stroke-dasharray: 3 5; opacity: .72; }.sketch-pencil { fill: none; stroke: #8a9095; stroke-width: 1.2; stroke-linecap: round; opacity: .55; }

.primer-shell { border-top: 1px solid var(--soft-line); border-bottom: 1px solid var(--line); background: var(--canvas); }.trace-primer { padding-top: 58px; padding-bottom: 58px; display: grid; grid-template-columns: .92fr 1.08fr; gap: 42px 76px; }.primer-intro h2 { margin: 0 0 20px; font-size: 36px; line-height: 1.08; letter-spacing: -.04em; }.primer-intro > p:not(.eyebrow) { margin: 0 0 12px; color: #555b60; font-size: 13px; line-height: 1.65; }.primer-concepts { display: grid; align-content: start; }.primer-concepts article { display: grid; grid-template-columns: 90px 1fr; gap: 18px; padding: 15px 0; border-top: 1px solid #dfe2e5; }.primer-concepts article:last-child { border-bottom: 1px solid #dfe2e5; }.primer-concepts span { color: #555b61; font: 9px ui-monospace, monospace; font-weight: 760; text-transform: uppercase; letter-spacing: .09em; }.primer-concepts p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }.primer-goal { grid-column: 1 / -1; margin: 0; padding: 18px 20px; border-left: 3px solid var(--attention); background: white; color: #596066; font-size: 12px; line-height: 1.6; }.primer-goal strong { color: var(--ink); }
.catalog { padding-top: 64px; padding-bottom: 86px; scroll-margin-top: 20px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 34px; }
.section-heading h2 { margin: 0; font-size: 34px; letter-spacing: -.04em; }
.catalog-contents { display: grid; grid-template-columns: 155px minmax(0, 1fr); margin: -5px 0 58px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.catalog-contents > div:first-child { padding: 14px 16px 14px 0; display: flex; flex-direction: column; justify-content: center; }.catalog-contents > div:first-child span { font-size: 11px; font-weight: 780; }.catalog-contents > div:first-child small { margin-top: 3px; color: #92989d; font-size: 8px; }.catalog-contents-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }.catalog-contents-links button { min-height: 48px; border: 0; border-left: 1px solid var(--soft-line); background: transparent; padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #5d646a; cursor: pointer; text-align: left; font-size: 9px; }.catalog-contents-links button:nth-child(n+5) { border-top: 1px solid var(--soft-line); }.catalog-contents-links button:hover { background: var(--canvas); color: var(--ink); }.catalog-contents-links small { color: #9aa0a5; font: 8px ui-monospace, monospace; }
.chapter-panel { --chapter-accent: #87939d; margin: 0; }.chapter-panel[data-chapter-panel="build"] { --chapter-accent: var(--attention); }.chapter-panel[data-chapter-panel="compare"] { --chapter-accent: var(--collective); }.chapter-panel + .chapter-panel { margin-top: 96px; }.chapter-panel > .chapter-heading { cursor: pointer; list-style: none; }.chapter-panel > .chapter-heading::-webkit-details-marker { display: none; }.chapter-panel > .chapter-heading::after { content: "−"; width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; border: 1px solid var(--line); background: white; color: #747a80; font: 16px/1 ui-monospace, monospace; }.chapter-panel:not([open]) > .chapter-heading { margin-bottom: 0; }.chapter-panel:not([open]) > .chapter-heading::after { content: "+"; }.chapter-panel > .chapter-heading > small { margin-left: auto; color: #8a9095; font: 9px ui-monospace, monospace; text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }
.chapter-heading { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 18px 18px 17px 22px; margin-bottom: 22px; border: 1px solid var(--line); background: var(--canvas); }.chapter-heading::before { content: ""; position: absolute; inset: -1px auto -1px -1px; width: 4px; background: var(--chapter-accent); }.chapter-heading > div:first-child { max-width: 600px; }.chapter-heading span { color: #737a80; font: 9px ui-monospace, monospace; font-weight: 760; text-transform: uppercase; letter-spacing: .11em; }.chapter-heading h3 { margin: 5px 0 4px; font-size: 23px; line-height: 1.12; letter-spacing: -.03em; }.chapter-heading p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.filter-bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; }.filter-bar > span { color: #8a9095; font: 9px ui-monospace, monospace; text-transform: uppercase; letter-spacing: .09em; white-space: nowrap; }
.filter-row { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.filter-button { border: 1px solid var(--soft-line); background: white; color: var(--muted); padding: 7px 9px; border-radius: 3px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; font-size: 10px; }.filter-button small { color: #a2a7ac; font: 8px ui-monospace, monospace; }
.filter-button:hover { color: var(--ink); border-color: #b7bdc2; }.filter-button.active { color: var(--ink); border-color: #8e969d; background: var(--canvas); box-shadow: inset 0 -2px var(--ink); }
.task-grid { display: grid; gap: 42px; }
.task-section-heading { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--line); padding-bottom: 11px; margin-bottom: 14px; }.task-section-heading span { font-size: 15px; font-weight: 760; }.task-section-heading small { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.task-section-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 16px; }
.task-card { --card-accent: #9ca3aa; min-height: 250px; position: relative; overflow: hidden; border: 1px solid var(--line); padding: 19px 20px 17px; display: flex; flex-direction: column; background: white; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; animation: card-in .45s both; animation-delay: var(--delay); }
.task-card::before, .collective-card::before, .comparison-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--card-accent); opacity: .78; }.task-card[data-card-family="moe"], .comparison-card[data-card-family="moe"] { --card-accent: var(--mlp); }.task-card[data-card-family="fsdp"], .comparison-card[data-card-family="fsdp"] { --card-accent: var(--collective); }.task-card[data-card-family="tp"], .comparison-card[data-card-family="tp"] { --card-accent: var(--attention); }.task-card[data-card-family="cp"], .comparison-card[data-card-family="cp"] { --card-accent: var(--routing); }.task-card[data-card-family="dp"], .comparison-card[data-card-family="dp"] { --card-accent: #6f9f93; }.collective-card[data-card-family="collective"] { --card-accent: #7c93a6; }
.task-card.completed { border-color: #a8cfad; }.completed-badge { display: inline-flex; align-items: center; gap: 5px; border-radius: 10px; background: #edf7ef; padding: 5px 7px; color: #267533; font-size: 7px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }.completed-badge b { font-size: 9px; }
.task-card.pending { background: #fafafa; color: #777c81; cursor: not-allowed; }.task-card.pending:hover { transform: none; border-color: var(--line); box-shadow: none; }
@keyframes card-in { from { opacity: 0; transform: translateY(8px); } }
.task-card:hover { transform: translateY(-3px); border-color: #c5c8cc; box-shadow: 0 15px 35px rgba(31,35,40,.08); }
.card-top, .card-footer { display: flex; align-items: center; justify-content: space-between; }
.task-number { display: inline-flex; align-items: baseline; gap: 7px; color: #989da2; font: 8px ui-monospace, monospace; text-transform: uppercase; letter-spacing: .08em; }.task-number b { color: #656c72; font-size: 13px; letter-spacing: -.02em; }.task-number small { font: inherit; }
.card-copy { flex: 1; }.task-card h3 { min-height: 46px; font-size: 19px; line-height: 1.2; letter-spacing: -.025em; margin: 18px 0 8px; }.task-card p { display: -webkit-box; overflow: hidden; color: var(--muted); font-size: 11px; line-height: 1.5; margin: 0; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.card-tags { min-height: 23px; display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 15px; }.card-tags span { border: 1px solid #e1e4e7; background: #f8f9fa; padding: 4px 6px; color: #62686e; font-size: 7px; font-weight: 740; text-transform: uppercase; letter-spacing: .055em; }
.card-footer { align-items: end; border-top: 1px solid var(--soft-line); margin-top: 14px; padding-top: 12px; font-size: 10px; color: var(--muted); }.card-difficulty { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; }.card-difficulty small, .card-cta small { color: #969ba0; font-size: 7px; text-transform: uppercase; letter-spacing: .07em; }.card-cta { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 3px; }.card-cta b { color: #4f565c; font-size: 9px; }.card-cta i { display: inline-block; margin-left: 3px; font-style: normal; transition: transform .2s ease; }.task-card:hover .card-cta i { transform: translateX(3px); }
.stars { display: inline-flex; gap: 1px; }.stars i { font-style: normal; color: #d7dade; font-size: 11px; }.stars i.filled { color: #f3a93b; }
.comparison-catalog { margin-top: 88px; padding-top: 6px; }.comparison-group + .comparison-group { margin-top: 34px; }.comparison-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }.comparison-card { --card-accent: #9ca3aa; min-height: 252px; position: relative; overflow: hidden; border: 1px solid var(--line); padding: 19px 20px 17px; display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }.comparison-card:hover { transform: translateY(-3px); border-color: #c5c8cc; box-shadow: 0 15px 35px rgba(31,35,40,.08); }.comparison-card.completed { border-color: #a8cfad; }.comparison-card-top { display: flex; align-items: center; justify-content: space-between; color: #989da2; font: 8px ui-monospace, monospace; text-transform: uppercase; letter-spacing: .08em; }.comparison-card-top b { color: #267533; font: 800 8px/1 Inter, sans-serif; letter-spacing: .07em; }.comparison-card h3 { min-height: 46px; margin: 18px 0 8px; font-size: 19px; line-height: 1.2; letter-spacing: -.025em; }.comparison-card > p { display: -webkit-box; flex: 1; overflow: hidden; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.collective-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }.collective-card { --card-accent: #9ca3aa; min-height: 208px; position: relative; overflow: hidden; border: 1px solid var(--line); padding: 19px 20px 17px; display: flex; flex-direction: column; background: white; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }.collective-card:hover { transform: translateY(-3px); border-color: #c5c8cc; box-shadow: 0 15px 35px rgba(31,35,40,.08); }.collective-card.completed { border-color: #a8cfad; }.collective-card h3 { margin: 18px 0 8px; font-size: 18px; letter-spacing: -.025em; }.collective-card > p { flex: 1; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }.card-entry { color: #4f565c; font-size: 9px; }.card-entry i { display: inline-block; margin-left: 3px; font-style: normal; transition: transform .2s ease; }.collective-card:hover .card-entry i, .comparison-card:hover .card-entry i { transform: translateX(3px); }
.home-footer { border-top: 1px solid var(--line); background: var(--canvas); }.home-footer-inner { min-height: 118px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }.home-footer-copy { max-width: 720px; }.home-footer strong { font-size: 13px; }.home-footer p { margin: 5px 0 0; color: var(--muted); font-size: 11px; }.home-footer .ai-disclosure { margin-top: 12px; line-height: 1.55; }.home-footer nav { display: flex; flex: 0 0 auto; gap: 24px; align-items: center; }.home-footer a, .home-footer button { border: 0; background: transparent; padding: 5px 0; color: var(--muted); cursor: pointer; font-size: 11px; }.home-footer a:hover, .home-footer button:hover { color: var(--ink); }.home-footer .author-link { padding: 0; color: inherit; font-size: inherit; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 2px; }.home-footer .github-footer-link { color: var(--ink); font-weight: 720; }.github-footer-link[hidden] { display: none; }

.collective-page { min-height: calc(100vh - 68px); background: var(--canvas); }.collective-header { padding-top: 0; padding-bottom: 34px; }.collective-header > .back-link { display: inline-block; padding: 23px 0 31px; }.collective-title-row { display: flex; align-items: end; justify-content: space-between; gap: 40px; }.collective-title-row h1 { margin: 0; font-size: 43px; line-height: 1.02; letter-spacing: -.045em; }.collective-title-row > div:first-child { max-width: 780px; }.collective-title-row > div > p:not(.eyebrow) { margin: 14px 0 0; color: #5e646a; font-size: 14px; line-height: 1.55; }.collective-progress { flex: 0 0 auto; border: 1px solid var(--line); background: white; padding: 9px 12px; color: #6f757a; font: 10px ui-monospace, monospace; }
.collective-main { padding-top: 30px; padding-bottom: 80px; }.collective-briefing { display: grid; grid-template-columns: 1.15fr .85fr; gap: 22px; margin-bottom: 22px; }.collective-briefing > div:first-child { padding: 13px 15px; border-left: 3px solid var(--attention); background: white; }.collective-briefing > div:first-child p { margin: 6px 0 0; color: #51575c; font-size: 12px; line-height: 1.55; }.collective-briefing .concept-card { margin: 0; }
.collective-board, .collective-palette-shell { border: 1px solid var(--line); background: white; }.collective-board { padding: 20px; overflow-x: auto; }.collective-stage { min-width: 720px; }.collective-stage-heading { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 9px; }.collective-stage-heading span { font-size: 12px; font-weight: 780; }.collective-stage-heading small { color: #8a9095; font: 8px ui-monospace, monospace; text-transform: uppercase; letter-spacing: .08em; }.collective-ranks { border: 1px solid var(--line); }.collective-rank-row { min-height: 58px; display: grid; grid-template-columns: 92px minmax(0, 1fr); }.collective-rank-row + .collective-rank-row { border-top: 1px solid var(--soft-line); }.collective-rank-label { display: flex; flex-direction: column; justify-content: center; padding: 0 13px; border-right: 1px solid var(--soft-line); background: var(--canvas); }.collective-rank-label strong { font-size: 10px; }.collective-rank-label small { margin-top: 3px; color: #92989d; font: 7px ui-monospace, monospace; text-transform: uppercase; letter-spacing: .08em; }.collective-tensor { min-width: 0; display: flex; align-items: center; gap: 5px; padding: 8px; background-image: linear-gradient(to bottom, transparent 49%, rgba(125,134,143,.16) 50%, transparent 51%); }.tensor-chunk, .collective-palette-chunk { color: #172028; }.tensor-chunk { min-width: 61px; min-height: 38px; padding: 0 9px; display: inline-flex; align-items: center; justify-content: center; border-radius: 2px; box-shadow: inset 0 -2px rgba(0,0,0,.1); font: 700 10px ui-monospace, monospace; white-space: nowrap; }.rank-0 { background: #64b5f6; }.rank-1 { background: #ffb74d; }.rank-2 { background: #80cbc4; }.rank-3 { background: #ba68c8; }.collective-operation { min-width: 720px; height: 54px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #83898f; font: 8px ui-monospace, monospace; text-transform: uppercase; letter-spacing: .1em; }.collective-operation i { margin-top: 2px; color: var(--collective-dark); font: normal 19px/1 sans-serif; }.tensor-slot { width: 70px; min-width: 70px; height: 42px; padding: 2px; border: 1px dashed #9ea8b1; background: repeating-linear-gradient(135deg, #f4f6f7 0, #f4f6f7 5px, white 5px, white 10px); cursor: pointer; }.tensor-slot:hover, .tensor-slot.drag-over { border-color: #3479bd; background: #edf6fd; }.tensor-slot .tensor-chunk { width: 100%; min-width: 0; min-height: 36px; padding: 0 4px; }.tensor-slot.correct { border: 2px solid #43a047; }.tensor-slot.incorrect { border: 2px solid #df5257; background: #fff0f0; }.tensor-slot.missing { border-color: #d69a37; background: #fff8e8; }
.collective-palette-shell { margin-top: 14px; padding: 18px 20px 20px; }.collective-palette-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 13px; }.collective-palette-heading h2 { margin: 3px 0 0; font-size: 16px; }.collective-palette { display: grid; grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: 6px; }.collective-palette-chunk { min-height: 54px; border: 2px solid transparent; border-radius: 2px; padding: 8px 10px; text-align: left; cursor: grab; box-shadow: inset 0 -2px rgba(0,0,0,.1); }.collective-palette-chunk span { display: block; font: 800 11px ui-monospace, monospace; }.collective-palette-chunk small { display: block; overflow: hidden; margin-top: 4px; font-size: 8px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }.collective-palette-chunk:hover, .collective-palette-chunk.active { border-color: #1f5f93; outline: 2px solid rgba(52,121,189,.15); }.collective-palette-chunk.used:not(.active) { opacity: .48; }
.collective-actions { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 15px 0; }.collective-actions > div:last-child { display: flex; gap: 9px; }.collective-feedback { color: var(--muted); font-size: 11px; line-height: 1.5; }.collective-feedback.error { color: #b63d42; }.collective-feedback.success { color: #267533; }.collective-feedback .completion-social { display: block; width: fit-content; margin-top: 9px; }

.comparison-page { min-height: calc(100vh - 68px); background: var(--canvas); }.comparison-header { padding-top: 0; padding-bottom: 36px; }.comparison-header > .back-link { display: inline-block; padding: 23px 0 31px; }.comparison-title-row { display: flex; align-items: end; justify-content: space-between; gap: 40px; }.comparison-title-row > div:first-child { max-width: 820px; }.comparison-title-row h1 { margin: 0; font-size: 43px; line-height: 1.02; letter-spacing: -.045em; }.comparison-title-row > div > p:not(.eyebrow) { margin: 15px 0 0; color: #5e646a; font-size: 14px; line-height: 1.55; }.comparison-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 17px; }.comparison-tags span { border: 1px solid #d9dde0; background: white; padding: 5px 7px; color: #5f666c; font-size: 8px; font-weight: 760; text-transform: uppercase; letter-spacing: .06em; }.comparison-progress { flex: 0 0 auto; border: 1px solid var(--line); background: white; padding: 9px 12px; color: #6f757a; font: 10px ui-monospace, monospace; }
.comparison-main { padding-top: 34px; padding-bottom: 80px; }.comparison-intro { display: grid; grid-template-columns: 1.15fr .85fr; gap: 30px; margin-bottom: 20px; }.comparison-intro > div > p { margin: 0; color: #4f565c; font-size: 13px; line-height: 1.6; }.comparison-intro aside { border-left: 3px solid var(--mlp); background: white; padding: 12px 14px; color: #6c7277; font-size: 10px; line-height: 1.5; }.comparison-prerequisites { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }.comparison-prerequisites a { border-bottom: 1px solid #aab4bd; padding: 3px 0; color: #4e6f8e; font-size: 9px; font-weight: 720; }
.trace-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }.comparison-trace-panel { min-width: 0; border: 1px solid var(--line); background: white; transition: border-color .2s, box-shadow .2s; }.comparison-trace-panel.question-target { border-color: #8fb8dc; box-shadow: 0 0 0 2px rgba(100,181,246,.12); }.comparison-trace-panel > header { min-height: 70px; display: flex; align-items: start; justify-content: space-between; gap: 20px; padding: 15px 17px 12px; border-bottom: 1px solid var(--soft-line); }.comparison-trace-panel > header span { color: #777d82; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }.comparison-trace-panel > header h2 { margin: 4px 0 0; font-size: 15px; line-height: 1.2; }.comparison-trace-panel > header small { color: #969ba0; font: 9px ui-monospace, monospace; white-space: nowrap; }.comparison-trace-panel > p { min-height: 55px; margin: 0; padding: 11px 17px; color: var(--muted); font-size: 10px; line-height: 1.5; }.comparison-panel-toolbar { min-height: 43px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 6px 9px; border-top: 1px solid var(--soft-line); }.comparison-trace-scroll { overflow-x: auto; overscroll-behavior-x: contain; border-top: 1px solid var(--soft-line); }.comparison-trace { min-width: 630px; }.comparison-ruler { height: 30px; margin-left: 102px; padding: 0 8px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--soft-line); color: #a0a5aa; font: 8px ui-monospace, monospace; }.comparison-trace-row { min-height: 66px; display: grid; grid-template-columns: 102px 1fr; }.comparison-track-label { padding: 17px 10px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--soft-line); }.comparison-track-label b { display: block; color: #5d6368; font-size: 9px; }.comparison-track-label small { display: block; margin-top: 3px; color: #9aa0a5; font-size: 7px; }.comparison-track-lane { position: relative; min-width: 0; border-bottom: 1px solid var(--soft-line); background-image: repeating-linear-gradient(to right, transparent 0, transparent calc(12.5% - 1px), rgba(223,225,229,.52) calc(12.5% - 1px), rgba(223,225,229,.52) 12.5%); }.comparison-trace-block { position: absolute; top: 10px; height: 30px; min-width: 1px; border: 0; border-bottom: 3px solid rgba(0,0,0,.16); border-radius: 2px; padding: 0 7px; overflow: visible; color: #1e272d; cursor: pointer; text-align: left; }.comparison-trace-block::after { content: ""; position: absolute; top: -5px; bottom: -5px; left: 50%; width: max(100%, 16px); transform: translateX(-50%); }.comparison-trace-block span { display: block; width: 100%; overflow: hidden; font-size: 8px; font-weight: 760; text-overflow: ellipsis; white-space: nowrap; }.comparison-trace-block:disabled { opacity: .42; cursor: default; }.comparison-trace-block:not(:disabled):hover { box-shadow: inset 0 0 0 2px rgba(38,87,130,.55); z-index: 4; }.comparison-trace-block.selected { outline: 3px solid #286da8; outline-offset: 2px; z-index: 3; }.comparison-trace-block.correct { outline-color: #3e914b; box-shadow: inset 0 0 0 2px #3e914b; }.comparison-trace-block.incorrect { outline-color: #c64f4f; box-shadow: inset 0 0 0 2px #c64f4f; }.comparison-micro-block { padding: 0; }.comparison-micro-block span { display: none; }
.dependency-question { margin: 0 0 18px; border: 1px solid var(--line); background: white; padding: 24px; }.question-count { color: #72787e; font: 9px ui-monospace, monospace; text-transform: uppercase; letter-spacing: .1em; }.dependency-question h2 { max-width: 820px; margin: 10px 0 7px; font-size: 22px; line-height: 1.25; letter-spacing: -.025em; }.question-instruction { margin: 0; color: var(--muted); font-size: 11px; }.question-options { display: grid; gap: 7px; margin-top: 16px; }.question-options button { border: 1px solid var(--line); background: var(--canvas); padding: 11px 13px; color: var(--ink); cursor: pointer; text-align: left; font-size: 11px; line-height: 1.4; }.question-options button:hover, .question-options button.selected { border-color: #5d91c1; background: #edf6ff; }.question-options button.correct { border-color: #61a96b; background: #eef8f0; }.question-options button.incorrect { border-color: #d86666; background: #fff1f1; }.question-feedback { min-height: 0; margin-top: 0; color: #5d646a; font-size: 11px; line-height: 1.55; }.question-feedback:not(:empty) { min-height: 48px; margin-top: 17px; padding: 12px 14px; background: var(--canvas); }.question-feedback.success { border-left: 3px solid #61a96b; }.question-feedback.error { border-left: 3px solid #d86666; }.question-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }.question-actions .secondary-button, .question-actions .primary-button { text-decoration: none; }

.comparison-focus .site-header, .comparison-focus .comparison-header, .comparison-focus .comparison-intro, .comparison-focus .dependency-question, .comparison-focus .comparison-trace-panel:not(.is-focused) { display: none; }.comparison-focus .comparison-page { height: 100vh; min-height: 100vh; }.comparison-focus .comparison-main { width: 100%; max-width: none; height: 100vh; padding: 10px; }.comparison-focus .trace-pair { min-height: 100%; grid-template-columns: 1fr; }.comparison-focus .comparison-trace-panel.is-focused { min-height: 0; overflow: hidden; display: flex; flex-direction: column; }.comparison-focus .comparison-trace-scroll { flex: 1; overflow: auto; }
.recognition-context { margin: 0 0 10px; border-left: 3px solid var(--attention); background: var(--surface); padding: 14px 16px; }.recognition-context strong { display: block; margin-bottom: 5px; color: var(--ink); font: 800 10px ui-monospace, monospace; text-transform: uppercase; letter-spacing: .08em; }.recognition-context span { display: block; color: var(--ink); font-size: 14px; line-height: 1.5; }.recognition-legend { margin-top: 12px; }.recognition-trace { display: block; }.recognition-trace .comparison-trace-panel { width: 100%; }.recognition-trace .comparison-trace { min-width: 760px; }.recognition-trace .comparison-track-lane { cursor: default; }.comparison-trace-panel.anonymized .comparison-trace-block span { display: none; }.comparison-trace-panel.anonymized .comparison-trace-block.not-answerable { cursor: default; }.recognition-reveal { margin-top: 17px; border-left: 3px solid #5d91c1; background: var(--canvas); padding: 14px 16px; }.recognition-reveal strong { font-size: 13px; }.recognition-reveal p { margin: 6px 0 10px; color: var(--muted); font-size: 11px; line-height: 1.55; }.recognition-reveal a { color: #286da8; font-size: 11px; font-weight: 750; text-decoration: none; }.recognition-reveal a:hover { text-decoration: underline; }.recognition-page .completion-social { margin-left: 12px; }

.game-page { --task-accent: #89929a; height: calc(100vh - 68px); min-height: 680px; display: grid; grid-template-columns: 360px minmax(0, 1fr); background: var(--canvas); transition: grid-template-columns .2s ease; }.game-page[data-task-family="moe"] { --task-accent: var(--mlp); }.game-page[data-task-family="fsdp"] { --task-accent: var(--collective); }.game-page[data-task-family="tp"] { --task-accent: var(--attention); }.game-page[data-task-family="cp"] { --task-accent: var(--routing); }.game-page[data-task-family="dp"] { --task-accent: #6f9f93; }
.game-page.brief-collapsed { grid-template-columns: 52px minmax(0, 1fr); }
.brief-panel { background: white; border-top: 3px solid var(--task-accent); border-right: 1px solid var(--line); min-height: 0; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.brief-panel-header { min-height: 56px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--soft-line); }
.back-link { padding: 20px 12px 20px 24px; color: var(--muted); font-size: 11px; white-space: nowrap; }.back-link:hover { color: var(--ink); }
.brief-toggle { flex: 0 0 auto; width: 34px; height: 34px; margin-right: 10px; border: 1px solid var(--line); background: white; color: #5d6267; cursor: pointer; font-size: 21px; line-height: 1; }.brief-toggle:hover { border-color: #8f959a; color: var(--ink); }
.brief-rail { display: none; flex: 1; align-items: center; justify-content: center; }.brief-rail span { writing-mode: vertical-rl; transform: rotate(180deg); color: #8a9095; font: 9px ui-monospace, monospace; text-transform: uppercase; letter-spacing: .16em; }
.brief-collapsed .brief-scroll, .brief-collapsed .back-link { display: none; }
.brief-collapsed .brief-panel-header { justify-content: center; }.brief-collapsed .brief-toggle { margin: 0; }.brief-collapsed .brief-rail { display: flex; }
.brief-scroll { overflow-y: auto; padding: 28px 26px 38px; }
.brief-scroll h1 { margin: 0 0 18px; font-size: 29px; line-height: 1.12; letter-spacing: -.045em; }
.task-facts { display: grid; gap: 10px; border-bottom: 1px solid var(--soft-line); padding-bottom: 20px; margin-bottom: 20px; }.task-facts > div { display: grid; grid-template-columns: 67px minmax(0, 1fr); gap: 9px; align-items: start; }.task-facts dt { color: #969ca1; font: 8px ui-monospace, monospace; text-transform: uppercase; letter-spacing: .08em; }.task-facts dd { min-width: 0; margin: 0; color: #62686e; font-size: 9px; line-height: 1.4; text-transform: uppercase; letter-spacing: .055em; }.task-facts .stars { padding-top: 1px; }.task-timing-badge { display: inline-block; border-bottom: 2px solid var(--task-accent); padding-bottom: 2px; color: #51585e; font-weight: 760; }
.brief-section { margin: 0 0 18px; }.brief-section p { margin: 7px 0 0; color: #51575c; font-size: 12px; line-height: 1.55; }
.brief-section-label { color: #8a9095; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.concept-card { border-left: 3px solid var(--task-accent, var(--attention)); padding: 11px 13px; margin: 18px 0; background: #f5faff; }.concept-card span { color: #396e98; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }.concept-card p { margin: 5px 0 0; font-size: 11px; line-height: 1.5; }
.teaching-details { margin: 14px 0 0; border-top: 1px solid var(--soft-line); }.teaching-details summary { padding: 13px 0; cursor: pointer; font-size: 11px; font-weight: 760; }.teaching-points { margin: 0 0 14px; }.teaching-points ul { margin: 0; padding-left: 17px; display: grid; gap: 7px; }.teaching-points li { color: #575d62; font-size: 11px; line-height: 1.48; }
.implementation-card { margin: 20px 0; border: 1px solid #30363d; background: #171b20; color: #d8dee5; }.implementation-card figcaption { padding: 10px 12px; border-bottom: 1px solid #30363d; display: grid; gap: 3px; }.implementation-card figcaption span { color: #7f8a96; font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }.implementation-card figcaption strong { color: #edf1f5; font-size: 10px; font-weight: 680; }.implementation-card pre { margin: 0; padding: 12px; overflow-x: auto; }.implementation-card code { font: 9px/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; }.implementation-card > p { margin: 0; padding: 0 12px 11px; color: #98a3ae; font-size: 9px; line-height: 1.45; }.code-comment { color: #78838e; }.code-string { color: #a9d18e; }.code-keyword { color: #d8a4f3; }.code-operation { color: #74b9ef; }
.hint-box { border-top: 1px solid var(--soft-line); border-bottom: 1px solid var(--soft-line); padding: 13px 0; font-size: 12px; }.hint-box summary { cursor: pointer; font-weight: 700; }.hint-box p { color: var(--muted); line-height: 1.55; }
.hint-box .implementation-card { margin: 14px 0 3px; }
.workspace { min-width: 0; display: grid; grid-template-rows: auto minmax(300px, 1fr) auto auto; padding: 24px 28px 18px; gap: 14px; overflow: hidden; }
.workspace-topbar, .palette-heading, .game-actions, .timeline-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.workspace-topbar h2 { margin: 0; font-size: 21px; letter-spacing: -.025em; }.progress-pill { --progress: 0%; width: 126px; border: 1px solid var(--line); background: white; padding: 8px 10px 9px; color: var(--muted); }.progress-pill > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }.progress-pill small { color: #92989d; font: 7px ui-monospace, monospace; text-transform: uppercase; letter-spacing: .09em; }.progress-pill strong { color: #555c62; font: 10px ui-monospace, monospace; }.progress-pill > i { display: block; height: 3px; margin-top: 7px; overflow: hidden; background: #e6e9eb; }.progress-pill > i span { display: block; width: var(--progress); height: 100%; background: var(--task-accent); transition: width .2s ease; }
.timeline-shell, .palette-shell { max-width: 100%; background: white; border: 1px solid var(--line); min-width: 0; }
.timeline-shell { display: flex; min-height: 0; flex-direction: column; }
.result-banner { flex: 0 0 auto; display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 16px; align-items: start; border-bottom: 1px solid var(--line); padding: 12px 16px; }.result-banner[hidden] { display: none; }.result-banner > strong { padding-top: 2px; font-size: 9px; line-height: 1.3; font-weight: 820; text-transform: uppercase; letter-spacing: .09em; }.result-banner.success { border-bottom-color: #a9d4af; background: #f1f8f2; }.result-banner.success > strong { color: #287b34; }.result-banner.error { border-bottom-color: #e1b1b1; background: #fff4f4; }.result-banner.error > strong { color: #ad3d3d; }.result-banner.progress { border-bottom-color: #d7c58a; background: #fffaf0; }.result-banner.progress > strong { color: #8a651e; }.result-banner.debug { border-bottom-color: #b9d2e7; background: #f1f8fe; }.result-banner.debug > strong { color: #356f9f; }.result-banner .status-message { margin: 0; }.feedback-detail { display: block; margin-top: 5px; color: var(--muted); font-weight: 500; }.feedback-detail strong { color: inherit; font-weight: 760; }
.timeline-stage { min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); flex: 1; }.timeline-shell.has-debrief .timeline-stage { grid-template-columns: minmax(0, 1fr) 286px; }.completion-debrief { min-width: 0; border-left: 1px solid #b9d2e7; background: #f5f9fc; padding: 14px; overflow-y: auto; }.completion-debrief[hidden] { display: none; }.debrief-heading { padding-bottom: 11px; border-bottom: 1px solid #d6e3ed; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 8px; }.debrief-heading span { grid-column: 1 / -1; color: #5581a5; font: 8px ui-monospace, monospace; text-transform: uppercase; letter-spacing: .1em; }.debrief-heading strong { font-size: 13px; }.debrief-heading small { color: #7891a5; font: 8px ui-monospace, monospace; }.debrief-intro { margin: 10px 0; color: #64717b; font-size: 10px; line-height: 1.45; }.debrief-steps { display: grid; gap: 5px; }.debrief-steps button { min-width: 0; border: 1px solid #ccdbe7; background: white; padding: 7px 8px; display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 6px; color: #59636b; cursor: pointer; font-size: 9px; font-weight: 700; text-align: left; line-height: 1.3; }.debrief-steps button span { color: #87a0b4; font: 7px ui-monospace, monospace; }.debrief-steps button:hover, .debrief-steps button.active { border-color: #6c9bc1; background: #eaf4fb; color: #245e8d; }.debrief-pair { margin-top: 12px; display: grid; gap: 6px; }.debrief-pair > div { border: 1px solid #ccdbe7; background: white; padding: 8px 9px; }.debrief-pair span { display: flex; align-items: center; gap: 6px; color: #71889a; font: 7px ui-monospace, monospace; text-transform: uppercase; letter-spacing: .06em; }.debrief-pair span b { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: #276f9f; color: white; font-size: 8px; }.debrief-pair strong { display: block; margin-top: 6px; color: #28343d; font-size: 10px; line-height: 1.35; }.debrief-pair > i { color: #6a879d; font: normal 8px ui-monospace, monospace; text-align: center; text-transform: uppercase; letter-spacing: .06em; }.debrief-explanation { margin: 11px 0 0; color: #64717b; font-size: 10px; line-height: 1.45; }.debrief-explanation strong, .debrief-explanation span { display: block; }.debrief-explanation strong { margin-bottom: 4px; color: #315f82; }.debrief-actions { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }.debrief-actions button { min-height: 30px; border: 1px solid #ccdbe7; background: white; color: #4e687b; cursor: pointer; font-size: 8px; font-weight: 720; }.debrief-actions [data-debrief-focus] { grid-column: 1 / -1; grid-row: 1; }.debrief-actions button:hover:not(:disabled) { border-color: #6c9bc1; background: #eaf4fb; }.debrief-actions button:disabled { opacity: .4; cursor: default; }
.timeline-toolbar { width: 100%; display: grid; justify-content: stretch; gap: 9px; padding: 9px 12px 10px; border-bottom: 1px solid var(--soft-line); min-height: 0; }.timeline-toolbar-controls, .timeline-toolbar-key, .timeline-view-tools { display: flex; align-items: center; }.timeline-toolbar-controls, .timeline-toolbar-key { width: 100%; justify-content: space-between; gap: 16px; }.timeline-view-tools { gap: 8px; margin-left: auto; }.timeline-toolbar-key { min-height: 22px; padding-top: 8px; border-top: 1px solid var(--soft-line); }
.variant-picker { display: inline-flex; border: 1px solid var(--line); }
.variant-picker[hidden] { display: none; }
.keyboard-placement { min-width: 0; display: flex; align-items: baseline; gap: 7px; border-left: 3px solid var(--attention); padding: 4px 8px; background: var(--canvas); white-space: nowrap; }.keyboard-placement[hidden] { display: none; }.keyboard-placement strong { color: #66717a; font: 7px ui-monospace, monospace; text-transform: uppercase; letter-spacing: .08em; }.keyboard-placement span { max-width: 260px; overflow: hidden; color: var(--ink); font-size: 9px; font-weight: 760; text-overflow: ellipsis; }.keyboard-placement small { color: #8a9299; font: 7px ui-monospace, monospace; }
.variant-picker button { border: 0; border-right: 1px solid var(--line); background: white; padding: 6px 8px; color: #6a7076; cursor: pointer; font-size: 9px; font-weight: 720; white-space: nowrap; }
.variant-picker button:last-child { border-right: 0; }
.variant-picker button.active { background: #f1e6f4; color: #712d7c; }
.focus-button { min-width: 66px; border: 1px solid var(--line); background: white; padding: 6px 9px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: #555b61; cursor: pointer; font-size: 9px; font-weight: 760; white-space: nowrap; }.focus-icon { width: 10px; height: 10px; flex: 0 0 10px; background: linear-gradient(currentColor,currentColor) left top / 4px 1px no-repeat, linear-gradient(currentColor,currentColor) left top / 1px 4px no-repeat, linear-gradient(currentColor,currentColor) right top / 4px 1px no-repeat, linear-gradient(currentColor,currentColor) right top / 1px 4px no-repeat, linear-gradient(currentColor,currentColor) left bottom / 4px 1px no-repeat, linear-gradient(currentColor,currentColor) left bottom / 1px 4px no-repeat, linear-gradient(currentColor,currentColor) right bottom / 4px 1px no-repeat, linear-gradient(currentColor,currentColor) right bottom / 1px 4px no-repeat; }
.focus-button:hover, .focus-button[aria-pressed="true"] { border-color: #6b9bc8; background: #eef6fd; color: #245e91; }
.timeline-zoom { height: 29px; display: inline-flex; align-items: stretch; border: 1px solid var(--line); background: white; }.timeline-zoom button { width: 29px; border: 0; border-right: 1px solid var(--line); background: transparent; color: #61676d; cursor: pointer; font-size: 11px; }.timeline-zoom button:first-child { width: auto; padding: 0 8px; font-size: 9px; font-weight: 760; }.timeline-zoom button:last-child { border-right: 0; }.timeline-zoom button:hover:not(:disabled) { background: var(--canvas); color: var(--ink); }.timeline-zoom button:disabled { opacity: .3; cursor: default; }.timeline-zoom span { min-width: 45px; display: grid; place-items: center; border-right: 1px solid var(--line); color: #858b91; font: 8px ui-monospace, monospace; }
.keyboard-help { position: relative; }.keyboard-help > button { width: 29px; height: 29px; border: 1px solid var(--line); border-radius: 50%; background: white; color: #747b81; cursor: help; font: 750 10px ui-monospace, monospace; }.keyboard-help [role="tooltip"] { position: absolute; right: 0; top: calc(100% + 8px); width: 255px; padding: 8px 10px; border: 1px solid var(--line); background: white; color: #586068; box-shadow: 0 5px 16px rgba(25,31,36,.14); font: 8px/1.5 ui-monospace, monospace; opacity: 0; pointer-events: none; transform: translateY(-3px); transition: opacity .12s, transform .12s; z-index: 20; }.keyboard-help:hover [role="tooltip"], .keyboard-help:focus-within [role="tooltip"] { opacity: 1; transform: none; }
.legend { display: flex; gap: 7px 12px; flex-wrap: wrap; }.legend span { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 9px; }.legend i { width: 7px; height: 7px; border-radius: 2px; }
.legend .attention { background: var(--attention); }.legend .mlp { background: var(--mlp); }.legend .collective { background: var(--collective); }.legend .routing { background: var(--routing); }.legend .optimizer { background: var(--optimizer); }.legend .loss { background: var(--loss); }.legend .bubble { background: var(--bubble); }.legend .empty-target-key { width: 12px; height: 9px; border: 1px dashed #aeb6be; border-radius: 0; background: repeating-linear-gradient(135deg, rgba(122,132,142,.1) 0, rgba(122,132,142,.1) 3px, white 3px, white 6px); }
.legend .micro-event-key { width: 4px; height: 15px; border-radius: 1px; background: #6f7880; }
.scale-label { margin-left: auto; color: #909499; font: 8px ui-monospace, monospace; white-space: nowrap; }
.timeline-scroll { min-width: 0; max-width: 100%; overflow: auto; flex: 1; overscroll-behavior: contain; touch-action: pan-x pan-y; }.timeline { position: relative; min-width: calc(var(--label-width) + var(--timeline-width)); padding-bottom: 4px; }.timeline.debrief-active .placed-block { opacity: .34; transition: opacity .18s ease, filter .18s ease, box-shadow .18s ease; }.timeline.debrief-active .placed-block.debrief-source, .timeline.debrief-active .placed-block.debrief-target { opacity: 1; filter: saturate(1.08); box-shadow: 0 0 0 3px rgba(39,111,159,.3), 0 4px 10px rgba(39,111,159,.2); overflow: visible; z-index: 6; }.timeline.debrief-active .placed-block.debrief-source::before, .timeline.debrief-active .placed-block.debrief-target::before { position: absolute; top: -12px; left: -9px; width: 20px; height: 20px; display: grid; place-items: center; border: 2px solid white; border-radius: 50%; background: #276f9f; color: white; box-shadow: 0 2px 6px rgba(24,65,92,.3); font: 800 9px/1 Inter, sans-serif; }.timeline.debrief-active .placed-block.debrief-source::before { content: "1"; }.timeline.debrief-active .placed-block.debrief-target::before { content: "2"; }
.absolute-timeline { min-height: 100%; display: flex; flex-direction: column; }
.absolute-timeline .ruler-row { flex: 0 0 42px; }
.absolute-timeline .track-row { min-height: 142px; flex: 1 1 142px; }
.absolute-timeline.compact-zoom .track-row { min-height: 106px; flex-basis: 106px; }
.ruler-row, .track-row { display: flex; }.ruler-row { height: 42px; position: sticky; top: 0; z-index: 4; background: white; border-bottom: 1px solid var(--line); }
.track-label { width: var(--label-width); flex: 0 0 var(--label-width); padding: 11px 12px; border-right: 1px solid var(--line); color: #989ca1; font: 8px ui-monospace, monospace; text-transform: uppercase; letter-spacing: .07em; position: sticky; left: 0; z-index: 3; background: white; }
.track-row .track-label { min-height: 90px; display: flex; flex-direction: column; justify-content: center; }.track-label b { color: #4f5459; font-size: 9px; line-height: 1.18; }.track-label small { color: #a2a6aa; font-size: 7px; line-height: 1.3; margin-top: 4px; }
.ruler { display: flex; }.ruler > div { flex: 0 0 auto; border-right: 1px solid var(--line); padding: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; }.ruler span { display: block; color: #9a9ea3; font: 9px ui-monospace, monospace; white-space: nowrap; }
.track-cells { display: flex; min-height: 90px; background-image: linear-gradient(to bottom, transparent 49%, rgba(223,225,229,.55) 50%, transparent 51%); }
.absolute-track-cells { display: block; position: relative; background-image: linear-gradient(to bottom, transparent 49%, rgba(223,225,229,.75) 50%, transparent 51%), repeating-linear-gradient(to right, transparent 0, transparent calc(8.333% - 1px), rgba(223,225,229,.55) calc(8.333% - 1px), rgba(223,225,229,.55) 8.333%); background-position: center, center; background-size: auto, 100% 106px; background-repeat: repeat, no-repeat; }.absolute-ruler span { color: #c1c4c7; }
.absolute-timeline .track-cells, .absolute-timeline .track-row .track-label { min-height: 142px; }
.absolute-timeline.compact-zoom .track-cells, .absolute-timeline.compact-zoom .track-row .track-label { min-height: 106px; }
.trace-slot { position: relative; flex: 0 0 auto; min-width: 0; border: 0; border-right: 1px solid var(--line); background: transparent; padding: 8px; cursor: pointer; overflow: hidden; }
.trace-slot.absolute-slot { position: absolute; top: 0; bottom: 0; padding: 8px 0; border-right: 0; border-left: 0; }
.trace-slot:focus-visible, .trace-slot.keyboard-target { outline: 3px solid #3479bd; outline-offset: -3px; z-index: 7; }
.trace-slot.absolute-slot.micro-target.keyboard-target:not(.occupied)::after { width: 12px; height: 12px; border: 2px solid #3479bd; border-radius: 50%; background: white; opacity: 1; }
.trace-slot.absolute-slot.micro-target { overflow: visible; z-index: 2; }.trace-slot.absolute-slot.micro-target::before { content: ""; position: absolute; left: 50%; top: calc(50% + var(--hit-offset, 0px)); width: 34px; height: 30px; transform: translate(-50%,-50%); pointer-events: auto; }
.trace-slot.absolute-slot:not(.occupied) { top: 50%; bottom: auto; height: min(106px, calc(100% - 36px)); transform: translateY(-50%); border: 1px dashed #b9c0c7; background: repeating-linear-gradient(135deg, rgba(122,132,142,.08) 0, rgba(122,132,142,.08) 5px, rgba(255,255,255,.72) 5px, rgba(255,255,255,.72) 10px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.65); }
.trace-slot.absolute-slot:not(.occupied)::after { content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: #9ba3ab; transform: translate(-50%,-50%); opacity: .72; }
.trace-slot.absolute-slot.selectable { border-color: #5499d8; background: repeating-linear-gradient(135deg, rgba(84,153,216,.16) 0, rgba(84,153,216,.16) 5px, rgba(238,247,255,.9) 5px, rgba(238,247,255,.9) 10px); box-shadow: inset 0 0 0 1px rgba(84,153,216,.28), 0 0 0 2px rgba(84,153,216,.12); }
.trace-slot > span { opacity: 0; color: #b6b9bc; font: 8px ui-monospace, monospace; text-transform: uppercase; }.trace-slot:hover > span, .trace-slot.selectable > span { opacity: 1; }
.trace-slot.drag-over, .trace-slot.selectable:hover { background: #eef5ff; box-shadow: inset 0 0 0 2px #82b7ec; }.trace-slot.incorrect { background: #fff2f2; box-shadow: inset 0 0 0 2px #df6868; }.trace-slot.correct { box-shadow: inset 0 0 0 2px #61a96b; }
.placed-block { box-sizing: border-box; position: absolute; left: var(--offset); top: 50%; transform: translateY(-50%); height: 52px; width: var(--block-width); min-width: 42px; max-width: calc(100% - var(--offset)); border-radius: 3px; border-bottom: 3px solid rgba(0,0,0,.18); padding: 8px; text-align: left; overflow: hidden; display: flex; flex-direction: column; justify-content: center; color: #172028; }
.placed-block span { font-size: 10px; font-weight: 780; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.placed-block small { font: 8px ui-monospace, monospace; opacity: .68; margin-top: 3px; }.placed-block button { position: absolute; right: 2px; top: 1px; width: 18px; height: 18px; padding: 0; border: 0; background: rgba(255,255,255,.5); border-radius: 2px; cursor: pointer; opacity: 0; }.placed-block:hover button { opacity: 1; }
.placed-block.micro-block span, .placed-block.micro-block small { display: none; }
.placed-block.micro-block::after { content: ""; position: absolute; left: 50%; top: 50%; width: 3px; height: 22px; border-radius: 1px; background: rgba(35,42,48,.72); transform: translate(-50%,-50%); }
.fixed-slot { background: transparent; cursor: help; }.fixed-block { min-width: 0; padding: 6px; filter: saturate(.62); opacity: .78; border: 0; border-bottom: 2px dashed rgba(0,0,0,.18); outline: 1px dashed rgba(43,50,57,.68); outline-offset: -1px; z-index: 1; }.compact-block { padding: 4px; }.compact-block span { font-size: 8px; text-align: center; }.compact-block small { display: none; }
.absolute-slot .marker-block { width: 4px; min-width: 4px; max-width: none; padding: 0; overflow: visible; border-radius: 1px; }
.trace-slot.absolute-slot.marker-slot { overflow: visible; z-index: 2; }
.absolute-slot .marker-block span { position: absolute; left: -8px; top: -16px; width: max-content; max-width: 88px; padding: 2px 4px; border: 1px solid rgba(67,75,82,.18); border-radius: 2px; background: rgba(255,255,255,.94); font-size: 8px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; }
.absolute-slot .marker-block small { display: none; }
.absolute-slot .marker-block.micro-block span { display: block; }
.trace-slot.absolute-slot.callout-slot { overflow: visible; z-index: 2; }
.absolute-slot .callout-block { width: 100%; min-width: 0; max-width: 100%; padding: 0; overflow: visible; }
.absolute-slot .callout-block span { position: absolute; left: 0; width: max-content; max-width: 112px; padding: 2px 4px; border: 1px solid rgba(67,75,82,.18); border-radius: 2px; background: rgba(255,255,255,.96); box-shadow: 0 1px 2px rgba(20,25,30,.08); font-size: 8px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; }
.absolute-slot .callout-block.callout-lane-0 span { top: -42px; }
.absolute-slot .callout-block.callout-lane-1 span { top: -28px; }
.absolute-slot .callout-block.callout-lane-2 span { top: 55px; }
.absolute-slot .callout-block.callout-lane-3 span { top: 69px; }
.absolute-slot .callout-block.callout-align-end span { right: 0; left: auto; }
.absolute-slot.callout-readable .callout-block { padding: 8px; overflow: hidden; }
.absolute-slot.callout-readable .callout-block span { position: static; display: block; width: 100%; max-width: none; padding: 0; border: 0; background: transparent; box-shadow: none; font-size: 10px; line-height: normal; }
.absolute-slot.callout-readable .callout-block.micro-block::after { display: none; }
.absolute-slot .callout-block small { display: none; }
.absolute-slot .callout-block.micro-block span { display: block; }
.timeline.compact-zoom .callout-block span, .timeline.compact-zoom .marker-block span { display: none; }.compact-zoom .placed-block.micro-block::after { height: 16px; }.timeline.compact-zoom .marker-block { width: 1px; min-width: 1px; }.timeline.compact-zoom .marker-block.micro-block::after { width: 1px; }
.trace-focus .site-header, .trace-focus .brief-panel, .trace-focus .workspace-topbar { display: none; }
.trace-focus .game-page { height: 100vh; min-height: 100vh; grid-template-columns: minmax(0, 1fr); }
.trace-focus .workspace { grid-template-rows: minmax(360px, 1fr) auto auto; padding: 12px; gap: 10px; }
.trace-focus .timeline-shell { min-height: 0; }
.trace-focus .timeline-scroll { min-height: 0; }
.trace-tooltip { position: fixed; z-index: 1000; width: min(330px, calc(100vw - 20px)); padding: 11px 12px; border: 1px solid #b8bdc2; background: rgba(32, 34, 37, .97); color: white; box-shadow: 0 10px 30px rgba(0,0,0,.24); pointer-events: none; }.trace-tooltip strong { display: block; font-size: 11px; line-height: 1.35; }.trace-tooltip span { display: block; margin-top: 5px; color: #d4d8dc; font-size: 10px; line-height: 1.45; }
.attention { background: var(--attention); }.mlp { background: var(--mlp); }.collective { background: var(--collective); }.routing { background: var(--routing); }.optimizer { background: var(--optimizer); }.loss { background: var(--loss); }.bubble { background: var(--bubble); }
.palette-shell { max-width: 100%; padding: 14px 16px 16px; }.palette-heading { margin-bottom: 10px; }.palette-heading h3 { margin: 0; font-size: 13px; }.palette-tools { display: flex; align-items: center; gap: 6px; white-space: nowrap; }.palette-tools .text-button { border: 1px solid var(--line); padding: 6px 8px; font-size: 9px; font-weight: 720; }.palette-tools .solution-button { border-color: #b9d2e7; background: #f4f9fd; color: #356f9f; }.solution-button:disabled { color: var(--muted); cursor: default; opacity: .65; }.palette-groups { display: flex; gap: 5px; margin-bottom: 10px; overflow-x: auto; overscroll-behavior-x: contain; }.palette-groups[hidden] { display: none; }.palette-group-button { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; border: 1px solid var(--line); background: white; padding: 6px 9px; color: #666c72; cursor: pointer; font-size: 9px; font-weight: 750; }.palette-group-button small { min-width: 34px; color: #959ba1; font: 7px ui-monospace, monospace; text-align: right; text-transform: uppercase; letter-spacing: .04em; }.palette-group-button.active { border-color: #5d91c1; background: #edf6ff; color: #245e91; }.palette-group-button.complete { border-color: #92c3a0; color: #31713f; }.palette { display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; padding: 1px 1px 4px; min-height: 58px; }
.event-block { flex: 0 0 auto; min-width: 120px; max-width: 220px; min-height: 54px; border: 0; border-bottom: 3px solid rgba(0,0,0,.18); border-radius: 3px; padding: 9px 11px; text-align: left; cursor: grab; transition: transform .15s, opacity .15s, box-shadow .15s; }.event-block[hidden] { display: none; }.event-block:hover { transform: translateY(-2px); box-shadow: 0 5px 12px rgba(0,0,0,.1); }.event-block:active { cursor: grabbing; }.event-block span { display: block; font-size: 9px; font-weight: 780; line-height: 1.3; }.event-block small { display: block; margin-top: 3px; font: 8px ui-monospace, monospace; opacity: .66; }.event-block.selected { outline: 3px solid #3479bd; outline-offset: 2px; }.event-block:disabled { opacity: .17; cursor: default; transform: none; box-shadow: none; }
.game-actions { min-height: 42px; justify-content: flex-end; }.status-message { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.4; }.status-message.success { color: #287b34; font-weight: 650; }.status-message.error { color: #b03939; }.status-message.progress { color: #75591d; font-weight: 650; }.status-message.debug { color: #356f9f; font-weight: 650; }.completion-task-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }.completion-social, .completion-share { display: flex; width: fit-content; align-items: center; gap: 8px; margin-top: 8px; border: 1px solid #b9d2e7; border-radius: 3px; background: #f1f8fe; padding: 7px 10px; color: #285f8e; box-shadow: 0 2px 7px rgba(38,87,130,.08); font: 760 10px/1.4 Inter, sans-serif; text-decoration: none; }.completion-social::before { content: "☆"; font-size: 15px; line-height: 1; }.completion-share { cursor: pointer; }.completion-social:hover, .completion-share:hover { border-color: #7eafd6; background: #e6f3fd; }.action-buttons { display: flex; gap: 8px; }.primary-button, .secondary-button { border: 0; min-width: 142px; height: 40px; padding: 0 15px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-size: 12px; font-weight: 700; }.primary-button { background: #25282b; color: white; }.primary-button:hover:not(:disabled) { background: #000; }.primary-button:disabled { opacity: .35; cursor: default; }.secondary-button { background: white; border: 1px solid var(--line); }.secondary-button:hover { border-color: #999da1; }.secondary-button[hidden] { display: none; }
.primary-button[hidden] { display: none; }
.resource-panel { margin-top: 12px; border-top: 1px solid var(--soft-line); }.resource-panel summary { padding: 12px 0; cursor: pointer; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }.resource-panel details div { padding: 0 0 12px; display: grid; gap: 8px; }.resource-panel a { color: #346da3; font-size: 10px; line-height: 1.35; }.resource-panel a:hover { text-decoration: underline; }
.glossary-panel { margin-top: 14px; border: 1px solid var(--line); background: white; }.glossary-panel summary { padding: 11px 12px; cursor: pointer; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }.glossary-panel dl { margin: 0; padding: 0 12px 12px; display: grid; gap: 10px; }.glossary-panel dl div { border-top: 1px solid var(--soft-line); padding-top: 9px; }.glossary-panel dt { font-size: 10px; font-weight: 760; }.glossary-panel dd { margin: 3px 0 0; color: var(--muted); font-size: 9px; line-height: 1.45; }
.mobile-start-button { display: none; min-height: 38px; align-items: center; justify-content: space-between; border: 1px solid var(--ink); background: var(--ink); padding: 0 12px; color: var(--surface); cursor: pointer; font-size: 11px; font-weight: 760; }

:is(button, a, summary):focus-visible { outline: 3px solid #3479bd; outline-offset: 2px; }

.method-dialog { width: min(780px, calc(100vw - 30px)); max-height: calc(100vh - 30px); border: 0; padding: 0; background: var(--surface); color: var(--ink); box-shadow: 0 30px 100px rgba(0,0,0,.25); }.method-dialog::backdrop { background: rgba(20,22,24,.55); backdrop-filter: blur(3px); }.dialog-shell { padding: 30px; }.dialog-heading { display: flex; justify-content: space-between; align-items: start; border-bottom: 1px solid var(--line); padding-bottom: 20px; margin-bottom: 20px; }.dialog-heading h2 { margin: 0; letter-spacing: -.035em; }.icon-button { width: 34px; height: 34px; border: 1px solid var(--line); background: white; font-size: 22px; cursor: pointer; }.method-intro { border-left: 3px solid var(--attention); padding: 3px 0 3px 15px; margin-bottom: 20px; }.method-intro strong { font-size: 13px; }.method-intro p { max-width: 650px; margin: 6px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }.method-formulas { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); margin-bottom: 23px; }.method-formulas div { min-width: 0; padding: 14px; }.method-formulas div + div { border-left: 1px solid var(--line); }.method-formulas span { display: block; margin-bottom: 7px; color: #8a9095; font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }.method-formulas code { display: block; overflow-x: auto; color: #3c4247; font-size: 10px; white-space: nowrap; }.method-section-heading { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }.method-section-heading span { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }.method-section-heading small { color: #90959a; font-size: 9px; }.assumption-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; }.assumption-grid article { background: var(--canvas); padding: 13px; }.assumption-grid span { display: block; color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: .06em; }.assumption-grid strong { display: block; font: 16px ui-monospace, monospace; margin-top: 7px; }.method-columns { display: grid; grid-template-columns: 1.15fr .85fr; gap: 30px; margin-top: 24px; padding-top: 21px; border-top: 1px solid var(--line); }.method-columns h3 { margin: 0 0 10px; font-size: 12px; }.method-columns p { color: var(--muted); font-size: 10px; line-height: 1.55; }.method-columns dl { margin: 0; display: grid; gap: 8px; }.method-columns dl div { display: grid; grid-template-columns: 72px 1fr; gap: 10px; }.method-columns dt { color: #555b60; font-size: 9px; font-weight: 760; }.method-columns dd { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.45; }

html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #edf0f3;
  --muted: #a6adb5;
  --line: #3a4047;
  --soft-line: #2d3238;
  --surface: #171a1f;
  --canvas: #111419;
  --attention-dark: #86c9fb;
  --shadow: 0 18px 50px rgba(0, 0, 0, .3);
}
html[data-theme="dark"] .site-header { background: rgba(23,26,31,.94); }
html[data-theme="dark"] :is(.hero-secondary, .primer-goal, .chapter-panel > .chapter-heading::after, .task-card, .collective-card, .comparison-tags span, .comparison-progress, .collective-progress, .comparison-intro aside, .comparison-trace-panel, .dependency-question, .collective-briefing > div:first-child, .collective-board, .collective-palette-shell, .brief-panel, .brief-toggle, .progress-pill, .timeline-shell, .palette-shell, .variant-picker button, .focus-button, .ruler-row, .track-label, .palette-group-button, .secondary-button, .glossary-panel, .icon-button) { background: #1d2228; }
html[data-theme="dark"] :is(.hero h1 span, .hero-lede, .primer-intro > p:not(.eyebrow), .primer-concepts span, .primer-goal, .comparison-title-row > div > p:not(.eyebrow), .collective-title-row > div > p:not(.eyebrow), .comparison-intro > p, .comparison-intro aside, .collective-briefing > div:first-child p, .comparison-track-label b, .question-feedback, .brief-section p, .teaching-points li, .focus-button, .method-columns dt, .method-formulas code) { color: #b7bec6; }
html[data-theme="dark"] :is(.eyebrow, .chapter-heading span, .chapter-panel > .chapter-heading > small, .task-number, .comparison-card-top, .comparison-trace-panel > header span, .comparison-trace-panel > header small, .comparison-ruler, .comparison-track-label small, .question-count, .brief-section-label, .brief-rail span, .track-label, .track-label small, .ruler span, .scale-label, .palette-group-button small, .method-formulas span, .method-section-heading small) { color: #929ba4; }
html[data-theme="dark"] .hero-primary { border-color: #e6eaee; background: #e6eaee; color: #15191d; }
html[data-theme="dark"] .hero-primary:hover { background: #ffffff; }
html[data-theme="dark"] .hero-secondary { color: #b7bec6; }
html[data-theme="dark"] .hero-secondary:hover { border-color: #737c85; }
html[data-theme="dark"] .sketch-paper { fill: #1b2026; stroke: #737d86; } html[data-theme="dark"] .sketch-paper-echo { stroke: #737d86; } html[data-theme="dark"] :is(.sketch-track path, .sketch-dependencies path, .sketch-pencil) { stroke: #9ba5ae; } html[data-theme="dark"] .sketch-track circle { fill: #9ba5ae; }
html[data-theme="dark"] .primer-concepts article { border-color: var(--line); }
html[data-theme="dark"] .concept-card { background: #172735; }
html[data-theme="dark"] .task-card.pending { background: #191d22; color: #858d95; }
html[data-theme="dark"] .filter-button { border-color: var(--line); background: #1d2228; } html[data-theme="dark"] .filter-button.active { border-color: #737c85; background: #181d22; box-shadow: inset 0 -2px #dfe4e8; } html[data-theme="dark"] .completed-badge { background: #203428; } html[data-theme="dark"] :is(.card-cta b, .card-entry) { color: #c2c9cf; }
html[data-theme="dark"] .catalog-contents-links button:hover { background: #1d2228; }
html[data-theme="dark"] :is(.card-tags span, .comparison-tags span) { border-color: #414850; background: #242a30; color: #bac1c8; }
html[data-theme="dark"] :is(.task-card:hover, .collective-card:hover, .comparison-card:hover) { border-color: #59616a; box-shadow: 0 15px 35px rgba(0,0,0,.28); }
html[data-theme="dark"] :is(.task-card.completed, .collective-card.completed, .comparison-card.completed) { border-color: #4d7655; }
html[data-theme="dark"] :is(.completed-badge, .comparison-card-top b, .status-message.success) { color: #78c384; }
html[data-theme="dark"] .stars i { color: #68717a; }
html[data-theme="dark"] .stars i.filled { color: #f3b34d; }
html[data-theme="dark"] .comparison-trace-panel.question-target { border-color: #5e96c7; }
html[data-theme="dark"] .comparison-track-lane { background-image: repeating-linear-gradient(to right, transparent 0, transparent calc(12.5% - 1px), rgba(118,127,136,.28) calc(12.5% - 1px), rgba(118,127,136,.28) 12.5%); }
html[data-theme="dark"] .comparison-trace-block { color: #172028; }
html[data-theme="dark"] .question-options button { border-color: var(--line); background: #171b20; }html[data-theme="dark"] .question-options button:hover, html[data-theme="dark"] .question-options button.selected { border-color: #5e96c7; background: #172b3b; }html[data-theme="dark"] .question-options button.correct { border-color: #4d7655; background: #1a2c20; }html[data-theme="dark"] .question-options button.incorrect { border-color: #98545a; background: #342024; }
html[data-theme="dark"] .event-block { color: #172028; }
html[data-theme="dark"] .collective-rank-label { background: #171b20; }
html[data-theme="dark"] .collective-tensor { background-image: linear-gradient(to bottom, transparent 49%, rgba(125,134,143,.3) 50%, transparent 51%); }
html[data-theme="dark"] .tensor-slot { border-color: #66717b; background: repeating-linear-gradient(135deg, #20262c 0, #20262c 5px, #1a1f24 5px, #1a1f24 10px); }
html[data-theme="dark"] .tensor-slot:hover, html[data-theme="dark"] .tensor-slot.drag-over { border-color: #69a7d9; background: #1a3044; }
html[data-theme="dark"] .tensor-slot.incorrect { background: #3b2022; }
html[data-theme="dark"] .tensor-slot.missing { border-color: #b7893f; background: #332b1b; }
html[data-theme="dark"] .collective-feedback.success { color: #78c384; }
html[data-theme="dark"] .concept-card span { color: var(--attention-dark); }
html[data-theme="dark"] .variant-picker button.active { background: #38243e; color: #e2a9ec; }
html[data-theme="dark"] :is(.focus-button:hover, .focus-button[aria-pressed="true"], .palette-group-button.active) { border-color: #5687b3; background: #1a3043; color: #8fc8f7; }
html[data-theme="dark"] .palette-group-button.complete { border-color: #557b5e; color: #84c68e; }
html[data-theme="dark"] .legend .empty-target-key { border-color: #76808a; background: repeating-linear-gradient(135deg, rgba(150,160,170,.12) 0, rgba(150,160,170,.12) 3px, #1d2228 3px, #1d2228 6px); }
html[data-theme="dark"] .track-cells { background-image: linear-gradient(to bottom, transparent 49%, rgba(112,121,130,.42) 50%, transparent 51%); }
html[data-theme="dark"] .absolute-track-cells { background-image: linear-gradient(to bottom, transparent 49%, rgba(112,121,130,.5) 50%, transparent 51%), repeating-linear-gradient(to right, transparent 0, transparent calc(8.333% - 1px), rgba(112,121,130,.28) calc(8.333% - 1px), rgba(112,121,130,.28) 8.333%); }
html[data-theme="dark"] .trace-slot.absolute-slot:not(.occupied) { border-color: #626c76; background: repeating-linear-gradient(135deg, rgba(140,151,162,.1) 0, rgba(140,151,162,.1) 5px, rgba(24,29,34,.78) 5px, rgba(24,29,34,.78) 10px); box-shadow: inset 0 0 0 1px rgba(154,164,174,.08); }
html[data-theme="dark"] .trace-slot.absolute-slot.selectable { border-color: #5a9bd4; background: repeating-linear-gradient(135deg, rgba(72,139,199,.2) 0, rgba(72,139,199,.2) 5px, rgba(24,47,67,.9) 5px, rgba(24,47,67,.9) 10px); }
html[data-theme="dark"] :is(.trace-slot.drag-over, .trace-slot.selectable:hover) { background: #1a3044; }
html[data-theme="dark"] .trace-slot.incorrect { background: #3b2022; }
html[data-theme="dark"] .trace-slot.absolute-slot.micro-target.keyboard-target:not(.occupied)::after { background: #1d2228; }
html[data-theme="dark"] .fixed-block { opacity: .88; outline-color: rgba(225,231,237,.62); }
html[data-theme="dark"] :is(.absolute-slot .marker-block span, .absolute-slot .callout-block span) { border-color: #4a525a; background: rgba(29,34,40,.96); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.35); }
html[data-theme="dark"] :is(.solution-button, .resource-panel a, .status-message.debug) { color: #7db8eb; }
html[data-theme="dark"] .completion-social { border-color: #426f95; background: #192c3c; color: #9bcef7; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
html[data-theme="dark"] .completion-social:hover { border-color: #6599c4; background: #203a4f; }
html[data-theme="dark"] .completion-share { border-color: #426f95; background: #192c3c; color: #9bcef7; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
html[data-theme="dark"] .completion-share:hover { border-color: #6599c4; background: #203a4f; }
html[data-theme="dark"] .debrief-pair > div, html[data-theme="dark"] .debrief-actions button { border-color: #40515e; background: #1d2228; color: #b8c0c7; }
html[data-theme="dark"] .debrief-pair strong { color: #e4e9ee; }
html[data-theme="dark"] .debrief-actions button:hover:not(:disabled) { border-color: #5d91b8; background: #1d3547; color: #b9ddf7; }
html[data-theme="dark"] .debrief-explanation { color: #aeb9c2; }
html[data-theme="dark"] .debrief-explanation strong { color: #8dc2e7; }
html[data-theme="dark"] .result-banner.success { border-bottom-color: #426a49; background: #182a1d; }
html[data-theme="dark"] .result-banner.error { border-bottom-color: #78494b; background: #321f21; }
html[data-theme="dark"] .result-banner.progress { border-bottom-color: #786a3d; background: #302a19; }
html[data-theme="dark"] .result-banner.debug { border-bottom-color: #426f95; background: #192c3c; }
html[data-theme="dark"] .completion-debrief { border-bottom-color: #3b5b73; background: #172631; }.completion-debrief[hidden] { display: none; }html[data-theme="dark"] .debrief-heading { border-right-color: #354957; }html[data-theme="dark"] .debrief-heading strong { color: #e4e9ee; }html[data-theme="dark"] .debrief-steps button { border-color: #40515e; background: #1d2228; color: #b8c0c7; }html[data-theme="dark"] .debrief-steps button:hover, html[data-theme="dark"] .debrief-steps button.active { border-color: #5d91b8; background: #1d3547; color: #b9ddf7; }html[data-theme="dark"] .debrief-content > p { color: #aeb9c2; }html[data-theme="dark"] .debrief-content > p strong { color: #8dc2e7; }html[data-theme="dark"] .debrief-overlay .debrief-path { stroke: #72b8e8; filter: drop-shadow(0 1px 1px rgba(0,0,0,.8)); }html[data-theme="dark"] .debrief-overlay circle, html[data-theme="dark"] .debrief-overlay marker path { fill: #72b8e8; }
html[data-theme="dark"] .status-message.error { color: #ef8585; }
html[data-theme="dark"] .status-message.progress { color: #e0c877; }
html[data-theme="dark"] .timeline-zoom { border-color: var(--line); background: #171b20; }
html[data-theme="dark"] .timeline-zoom button:hover { background: #252c33; }
html[data-theme="dark"] .keyboard-help > button, html[data-theme="dark"] .keyboard-help [role="tooltip"] { border-color: var(--line); background: #171b20; color: #b6bec5; }
html[data-theme="dark"] .primary-button { background: #e4e8ec; color: #171b20; }
html[data-theme="dark"] .primary-button:hover:not(:disabled) { background: #ffffff; }
html[data-theme="dark"] .implementation-card { background: #111419; }
html[data-theme="dark"] .theme-toggle { background: #242a30; }
.error-page { padding: 80px 30px; max-width: 700px; margin: auto; }

@media (max-width: 640px) { .workspace-topbar { flex-direction: row; } }

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; gap: 42px; }.trace-illustration { min-height: 250px; }.trace-primer { grid-template-columns: 1fr; gap: 26px; }.primer-goal { grid-column: auto; }.task-section-grid, .collective-grid { grid-template-columns: repeat(2, 1fr); }.comparison-grid { grid-template-columns: 1fr; }.trace-pair { grid-template-columns: 1fr; }.comparison-intro, .collective-briefing { grid-template-columns: 1fr; }
  .game-page, .game-page.brief-collapsed { height: auto; min-height: calc(100vh - 68px); grid-template-columns: 1fr; }.brief-panel { border-right: 0; border-bottom: 1px solid var(--line); }.brief-scroll { max-width: 760px; }.brief-collapsed .brief-panel { height: 56px; min-height: 56px; align-self: start; }.brief-collapsed .brief-rail { display: none; }.workspace { min-height: 690px; overflow: hidden; }.timeline-shell { min-height: 330px; }
}
.comparison-trace { min-width: 560px; }.comparison-trace-block:disabled { opacity: .68; }
@media (max-width: 640px) {
  .chapter-heading { flex-direction: row; align-items: center; gap: 12px; }.chapter-heading > div:first-child { min-width: 0; }.chapter-panel > .chapter-heading > small { display: none; }
  .site-header { padding: 0 18px; }.header-actions { gap: 14px; font-size: 12px; }.theme-toggle { width: 30px; padding: 0; justify-content: center; }.theme-toggle-label { display: none; }.wrap { padding-inline: 18px; }.hero { min-height: auto; padding-top: 48px; padding-bottom: 48px; gap: 34px; }.hero h1 { font-size: 44px; }.hero-lede { font-size: 15px; }.hero-actions { align-items: stretch; flex-direction: column; }.hero-primary, .hero-secondary { width: 100%; }.hero-meta { gap: 7px 18px; font-size: 9px; }.trace-illustration { display: none; }.trace-primer { padding-top: 43px; padding-bottom: 43px; }.primer-intro h2 { font-size: 30px; }.primer-concepts article { grid-template-columns: 1fr; gap: 7px; }.primer-goal { padding: 16px; }.section-heading, .chapter-heading, .comparison-title-row, .collective-title-row { align-items: start; flex-direction: column; }.filter-bar { align-items: flex-start; flex-direction: column; }.filter-row { justify-content: flex-start; }.task-section-grid, .collective-grid { grid-template-columns: 1fr; }.comparison-catalog { margin-top: 65px; }.comparison-title-row h1, .collective-title-row h1 { font-size: 34px; }.comparison-progress, .collective-progress { align-self: stretch; text-align: center; }.comparison-main, .collective-main { padding-top: 24px; }.collective-board { padding: 12px; }.collective-stage, .collective-operation { min-width: 328px; }.collective-rank-row { grid-template-columns: 62px minmax(0, 1fr); }.collective-rank-label { padding: 0 8px; }.tensor-chunk { min-width: 51px; padding: 0 5px; }.tensor-slot { width: 54px; min-width: 54px; }.collective-palette { grid-template-columns: repeat(2, minmax(0, 1fr)); }.collective-palette-chunk { min-width: 0; }.collective-actions { align-items: stretch; flex-direction: column; }.collective-actions > div:last-child { flex-direction: column; }.comparison-trace { min-width: 590px; }.dependency-question { padding: 19px; }.dependency-question h2 { font-size: 19px; }.question-actions { align-items: stretch; flex-direction: column; }.question-actions .secondary-button, .question-actions .primary-button { width: 100%; }.home-footer-inner { min-height: 140px; align-items: flex-start; flex-direction: column; justify-content: center; gap: 20px; }.workspace { padding: 20px 12px; }.workspace-topbar { align-items: start; flex-direction: column; }.timeline-toolbar { align-items: start; flex-direction: column; }.timeline-tools { width: 100%; justify-content: flex-start; }.timeline-zoom { max-width: 100%; }.palette-heading { align-items: start; flex-wrap: wrap; }.palette-heading h3 { max-width: 210px; }.palette-tools { width: 100%; justify-content: space-between; }.mobile-start-button { display: flex; width: 100%; margin-top: 12px; }.result-banner { grid-template-columns: 1fr; gap: 5px; }.completion-debrief { grid-template-columns: 1fr; }.debrief-heading { border-right: 0; border-bottom: 1px solid #d6e3ed; }.debrief-content > p { display: grid; gap: 3px; }.game-actions { align-items: start; flex-direction: column; }.action-buttons, .primary-button, .secondary-button { width: 100%; }.dialog-shell { padding: 22px; }.dialog-heading h2 { font-size: 22px; }.method-formulas { grid-template-columns: 1fr; }.method-formulas div + div { border-left: 0; border-top: 1px solid var(--line); }.method-formulas code { overflow-wrap: anywhere; white-space: normal; }.method-section-heading small { display: none; }.assumption-grid { grid-template-columns: repeat(2,1fr); }.method-columns { grid-template-columns: 1fr; }
}

html[data-theme="dark"] .progress-pill > i { background: #343b42; }
html[data-theme="dark"] .palette-tools .text-button { border-color: var(--line); background: #20262c; }
html[data-theme="dark"] .palette-tools .solution-button { border-color: #426f95; background: #192c3c; color: #8dbfe7; }

@media (max-width: 640px) {
  .workspace-topbar { align-items: flex-start; flex-direction: row; }
  .header-actions { gap: 10px; font-size: 11px; }
  .workspace, .compact-trace .workspace { min-height: 0; grid-template-rows: auto auto auto auto; }
  .progress-pill { width: 112px; flex: 0 0 112px; }
  .timeline-toolbar { width: 100%; align-items: stretch; }
  .timeline-toolbar-controls, .timeline-toolbar-key { width: 100%; align-items: flex-start; flex-direction: column; gap: 8px; }
  .timeline-view-tools { width: 100%; margin-left: 0; justify-content: space-between; }
  .timeline-toolbar-key { padding-top: 9px; }
  .scale-label { margin-left: 0; white-space: normal; }
  .variant-picker { max-width: 100%; overflow-x: auto; }
  .palette-tools { width: auto; }
  .debrief-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
  .debrief-steps button { min-height: 40px; white-space: normal; text-align: left; line-height: 1.25; }
  .timeline-shell.has-debrief { min-height: 590px; }
  .timeline-shell.has-debrief .timeline-stage { grid-template-columns: 1fr; }
  .completion-debrief { border-left: 0; border-top: 1px solid #b9d2e7; overflow: visible; }
  .catalog-contents { grid-template-columns: 1fr; margin-bottom: 48px; }.catalog-contents > div:first-child { padding: 12px 0; border-bottom: 1px solid var(--soft-line); }.catalog-contents-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }.catalog-contents-links button { border-top: 1px solid var(--soft-line); }.catalog-contents-links button:nth-child(-n+2) { border-top: 0; }
}