:root {
  --ink: #102a43;
  --ink-2: #334e68;
  --muted: #627d98;
  --paper: #f5f8f8;
  --surface: #ffffff;
  --surface-2: #eaf1f3;
  --line: #cbd8df;
  --accent: #087f74;
  --accent-2: #2dd4bf;
  --warm: #f59e59;
  --yellow: #f4d35e;
  --danger: #c2415d;
  --success: #138a61;
  --code: #071a2c;
  --shadow: 0 18px 60px rgba(16, 42, 67, .12);
  --radius: 18px;
  --content: 1180px;
  --header-h: 74px;
}

html[data-theme="dark"] {
  --ink: #e9f2f4;
  --ink-2: #c2d3da;
  --muted: #92a9b4;
  --paper: #091722;
  --surface: #102431;
  --surface-2: #172f3d;
  --line: #2d4857;
  --accent: #43d9c4;
  --accent-2: #2dd4bf;
  --warm: #ffb76f;
  --yellow: #f4d35e;
  --code: #06121b;
  --shadow: 0 22px 70px rgba(0, 0, 0, .3);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.6; transition: color .25s, background .25s; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
code, pre, .kicker, .eyebrow, .brand small { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; }
code { font-size: .9em; }
pre { margin: 0; white-space: pre-wrap; }
section { position: relative; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.skip-link { position: fixed; z-index: 200; left: 16px; top: 10px; transform: translateY(-150%); padding: 10px 16px; background: var(--ink); color: var(--paper); border-radius: 8px; text-decoration: none; }
.skip-link:focus { transform: translateY(0); }

.site-header { height: var(--header-h); position: sticky; top: 0; z-index: 100; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px; padding: 0 max(24px, calc((100vw - var(--content)) / 2)); background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(18px); border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; line-height: 1.05; }
.brand strong { display: block; font-size: 16px; letter-spacing: -.02em; }
.brand small { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; letter-spacing: .14em; }
.brand-mark { position: relative; width: 35px; height: 30px; display: inline-block; }
.brand-mark span { position: absolute; inset: 2px 9px 8px 0; border: 2px solid var(--accent); border-radius: 3px; }
.brand-mark span::after { content: ""; position: absolute; width: 9px; height: 2px; background: var(--accent); left: 7px; bottom: -6px; box-shadow: 0 3px 0 -1px var(--accent); }
.brand-mark i { position: absolute; right: 0; bottom: 0; width: 11px; height: 22px; border: 2px solid var(--warm); border-radius: 3px; background: var(--paper); }
.main-nav { justify-self: center; display: flex; align-items: center; gap: 7px; }
.main-nav a { padding: 8px 10px; color: var(--ink-2); font-size: 14px; text-decoration: none; border-radius: 8px; transition: background .2s, color .2s; }
.main-nav a:hover, .main-nav a.active { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.theme-toggle { min-height: 40px; padding: 6px 12px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); cursor: pointer; font-size: 13px; }
.theme-toggle span:first-child { color: var(--accent); font-size: 18px; }
.menu-toggle { display: none; width: 42px; height: 42px; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); cursor: pointer; }
.menu-toggle > span:not(.sr-only) { display: block; height: 2px; margin: 4px 0; background: var(--ink); }
.reading-progress { position: absolute; height: 3px; inset: auto 0 0; background: transparent; }
.reading-progress span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--accent), var(--warm)); }

.section { width: min(var(--content), calc(100% - 48px)); margin-inline: auto; padding-block: clamp(72px, 10vw, 132px); }
.section-intro { max-width: 760px; margin-bottom: 46px; }
.section-intro h2 { margin: 10px 0 18px; max-width: 18ch; font-size: clamp(2rem, 5vw, 4.6rem); line-height: .98; letter-spacing: -.055em; }
.section-intro > p:last-child { max-width: 64ch; margin: 0; color: var(--ink-2); font-size: clamp(1rem, 2vw, 1.16rem); }
.eyebrow { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.eyebrow::after { content: ""; width: 46px; height: 1px; background: var(--accent); opacity: .45; }
.eyebrow span { display: grid; place-items: center; width: 28px; height: 28px; color: var(--paper); background: var(--ink); border-radius: 50%; font-size: 10px; }
.kicker { margin: 0 0 5px; color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.panel-heading { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }
.panel-heading h2, .panel-heading h3 { margin: 0; font-size: 20px; line-height: 1.25; }

.hero { min-height: calc(100vh - var(--header-h)); display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(36px, 6vw, 76px); align-items: center; padding-top: clamp(48px, 7vw, 80px); }
.hero::before { content: ""; position: absolute; z-index: -1; width: 56vw; height: 56vw; max-width: 750px; max-height: 750px; left: -28vw; top: -14vw; background: radial-gradient(circle, color-mix(in srgb, var(--accent-2) 19%, transparent), transparent 66%); pointer-events: none; }
.hero h1 { margin: 18px 0 24px; max-width: 9ch; font-size: clamp(3.2rem, 7.4vw, 7rem); line-height: .85; letter-spacing: -.075em; }
.hero h1 em { display: block; color: var(--accent); font-family: Georgia, serif; font-weight: 400; }
.lead { max-width: 54ch; margin: 0; color: var(--ink-2); font-size: clamp(1.04rem, 1.8vw, 1.24rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 30px; }
.button { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 18px; border: 1px solid transparent; border-radius: 9px; font-size: 14px; font-weight: 750; text-decoration: none; cursor: pointer; transition: transform .2s, box-shadow .2s, background .2s; }
.button:hover { transform: translateY(-2px); }
.button.primary { color: #fff; background: var(--accent); box-shadow: 0 9px 24px color-mix(in srgb, var(--accent) 28%, transparent); }
html[data-theme="dark"] .button.primary { color: #06221f; }
.button.ghost { border-color: var(--line); background: var(--surface); }
.button.small { min-height: 38px; padding: 7px 13px; font-size: 12px; }
.mini-stats { display: flex; gap: 26px; margin: 38px 0 0; padding: 0; list-style: none; }
.mini-stats li { display: grid; }
.mini-stats strong { font-size: 20px; line-height: 1; }
.mini-stats span { color: var(--muted); font-family: monospace; font-size: 10px; text-transform: uppercase; }

.simulator-card { min-width: 0; padding: clamp(18px, 3vw, 28px); overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.live-dot { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; color: var(--success); background: color-mix(in srgb, var(--success) 9%, transparent); border-radius: 999px; font-size: 11px; font-weight: 700; }
.live-dot::before { content: ""; width: 6px; height: 6px; background: currentColor; border-radius: 50%; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 14%, transparent); animation: pulse 2s infinite; }
.device-controls { display: flex; gap: 7px; margin: 22px 0 14px; }
.device-button, .icon-button, .segmented button { min-height: 39px; padding: 7px 12px; border: 1px solid var(--line); background: var(--paper); border-radius: 8px; cursor: pointer; font-size: 12px; }
.device-button span { color: var(--accent); margin-right: 4px; }
.device-button.active, .segmented button.active { color: #fff; border-color: var(--accent); background: var(--accent); }
html[data-theme="dark"] .device-button.active, html[data-theme="dark"] .segmented button.active { color: #06221f; }
.icon-button { width: 39px; padding: 0; margin-left: auto; font-size: 18px; }
.range-control { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 14px; color: var(--ink-2); font-size: 12px; }
.range-control output { color: var(--accent); font-family: monospace; font-weight: 800; }
.range-control input[type="range"] { grid-column: 1 / -1; width: 100%; accent-color: var(--accent); cursor: ew-resize; }
.breakpoint-strip { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: 7px; margin: 11px 0; color: var(--muted); font-family: monospace; font-size: 9px; text-transform: uppercase; }
.breakpoint-strip i { height: 1px; background: var(--line); }
.viewport-workbench { height: 420px; position: relative; overflow: hidden; padding-top: 17px; background-color: var(--surface-2); background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 32px 32px; border: 1px solid var(--line); border-radius: 12px; }
.ruler { position: absolute; inset: 0 0 auto; height: 17px; border-bottom: 1px solid var(--line); background: repeating-linear-gradient(90deg, transparent 0 9px, var(--muted) 10px 11px); opacity: .35; }
.viewport-scaler { position: relative; height: calc(100% - 10px); margin: 10px auto 0; }
.device-shell { position: absolute; left: 50%; top: 0; transform-origin: top center; overflow: hidden; background: #fff; border: 4px solid #102a43; border-radius: 11px; box-shadow: 0 15px 50px rgba(6, 27, 44, .25); }
.browser-bar { height: 28px; display: flex; align-items: center; gap: 5px; padding: 0 9px; color: #607589; background: #dce5e9; font-size: 7px; }
.browser-bar span { width: 6px; height: 6px; border-radius: 50%; background: #ff7a79; }
.browser-bar span:nth-child(2) { background: #f8c85b; }.browser-bar span:nth-child(3) { background: #5bc57a; }
.browser-bar b { margin-left: 6px; font-weight: 500; }
.device-shell iframe { display: block; width: 100%; height: calc(100% - 28px); border: 0; background: #fff; }
.simulator-readout { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; margin-top: 15px; }
.simulator-readout > div { display: grid; gap: 3px; }
.simulator-readout span { color: var(--muted); font-size: 10px; text-transform: uppercase; }
.simulator-readout code { color: var(--accent); font-size: 11px; }
.simulator-readout p { margin: 0; color: var(--ink-2); font-size: 12px; }

.explain-popover { position: fixed; z-index: 150; right: 24px; bottom: 24px; width: min(430px, calc(100% - 32px)); padding: 23px; background: var(--ink); color: var(--paper); border: 1px solid color-mix(in srgb, var(--paper) 18%, transparent); border-radius: 16px; box-shadow: 0 24px 80px rgba(0,0,0,.32); }
.explain-popover[hidden] { display: none; }
.explain-popover > button { position: absolute; right: 12px; top: 10px; width: 34px; height: 34px; border: 0; background: transparent; color: inherit; font-size: 24px; cursor: pointer; }
.explain-popover h2 { margin: 4px 0 8px; font-size: 21px; }
.explain-popover p:not(.kicker) { margin: 0 0 15px; color: color-mix(in srgb, var(--paper) 77%, transparent); font-size: 13px; }
.explain-popover pre { overflow: auto; padding: 14px; background: color-mix(in srgb, #000 30%, transparent); border-radius: 8px; font-size: 12px; }

.story::before, .labs::before, .challenge::before { content: ""; position: absolute; z-index: -1; inset: 0 50%; width: 100vw; transform: translateX(-50%); background: color-mix(in srgb, var(--surface-2) 68%, transparent); }
.timeline { display: grid; grid-template-columns: 240px 1fr; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.timeline-tabs { display: grid; align-content: stretch; background: var(--ink); }
.timeline-tabs button { min-height: 104px; display: grid; align-content: center; gap: 3px; padding: 18px 22px; color: color-mix(in srgb, var(--paper) 66%, transparent); text-align: left; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--paper) 12%, transparent); background: transparent; cursor: pointer; }
.timeline-tabs button:last-child { border-bottom: 0; }
.timeline-tabs button strong { color: var(--warm); font-family: monospace; font-size: 12px; }
.timeline-tabs button span { font-size: 14px; }
.timeline-tabs button[aria-selected="true"] { color: #fff; background: var(--accent); box-shadow: inset 4px 0 var(--warm); }
.era-panel { min-height: 416px; display: grid; grid-template-columns: 110px 1fr; gap: 20px; padding: clamp(30px, 6vw, 70px); outline: none; }
.era-number { color: color-mix(in srgb, var(--accent) 20%, transparent); font-family: Georgia, serif; font-size: 82px; line-height: 1; }
.era-panel h3 { margin: 7px 0 14px; font-size: clamp(1.6rem, 3vw, 2.7rem); letter-spacing: -.03em; }
.era-panel p:not(.kicker) { max-width: 62ch; color: var(--ink-2); }
.era-panel pre { max-width: 650px; margin-top: 24px; padding: 18px; color: #b5f5e9; background: var(--code); border-radius: 10px; font-size: 13px; }
.origin-note { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: start; max-width: 920px; margin: 28px 0 0 auto; padding: 24px 28px; background: color-mix(in srgb, var(--warm) 14%, var(--surface)); border-left: 4px solid var(--warm); }
.quote-mark { color: var(--warm); font-family: Georgia, serif; font-size: 64px; line-height: .8; }
.origin-note h3 { margin: 0 0 4px; }
.origin-note p { margin: 0 0 8px; color: var(--ink-2); }
.origin-note a { color: var(--accent); font-weight: 750; }

.principle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.principle-card { min-height: 290px; position: relative; overflow: hidden; padding: 26px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); outline: none; transition: transform .25s, box-shadow .25s, border-color .25s; }
.principle-card:hover, .principle-card:focus-visible { transform: translateY(-6px); border-color: var(--accent); box-shadow: var(--shadow); }
.principle-card > small { position: absolute; right: 22px; top: 22px; color: var(--muted); font-family: monospace; }
.principle-icon { display: grid; place-items: center; width: 50px; height: 50px; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); border-radius: 12px; font-family: monospace; font-weight: 800; }
.principle-card h3 { margin: 23px 0 6px; font-size: 22px; }
.principle-card p { margin: 0; color: var(--ink-2); }
.code-peek { position: absolute; inset: auto 12px 12px; display: grid; gap: 5px; padding: 13px; color: #cbf7ef; background: var(--code); border-radius: 9px; transform: translateY(calc(100% + 18px)); transition: transform .25s; }
.code-peek span { color: #7893a3; font-size: 9px; text-transform: uppercase; }
.code-peek code { font-size: 11px; }
.principle-card:hover .code-peek, .principle-card:focus .code-peek { transform: translateY(0); }
.recipe { display: grid; grid-template-columns: .75fr 1.25fr; gap: 34px; margin-top: 62px; padding: clamp(26px, 5vw, 54px); background: var(--ink); color: var(--paper); border-radius: var(--radius); }
.recipe-copy h3 { margin: 8px 0 12px; font-size: clamp(1.8rem, 3vw, 2.8rem); line-height: 1; }
.recipe-copy > p:not(.kicker) { color: color-mix(in srgb, var(--paper) 72%, transparent); }
.step-buttons { display: flex; gap: 7px; margin-top: 24px; }
.step-buttons button { width: 36px; height: 36px; border: 1px solid color-mix(in srgb, var(--paper) 25%, transparent); border-radius: 50%; color: inherit; background: transparent; cursor: pointer; }
.step-buttons button[aria-selected="true"] { color: #092220; background: var(--accent-2); border-color: var(--accent-2); }
.recipe-code { min-width: 0; overflow: hidden; background: var(--code); border: 1px solid color-mix(in srgb, var(--paper) 18%, transparent); border-radius: 12px; }
.code-window-heading { display: flex; justify-content: space-between; align-items: center; padding: 10px 15px; color: #9fb2be; background: #0e2639; font-size: 11px; }
.copy-button { padding: 5px 9px; border: 1px solid #355269; color: #c8d7df; background: transparent; border-radius: 5px; cursor: pointer; font-size: 10px; }
.recipe-code pre { min-height: 155px; padding: 24px; color: #9ff6e8; font-size: clamp(12px, 1.7vw, 15px); }
.code-result { display: flex; gap: 12px; padding: 12px 16px; color: #9fb2be; background: #0e2639; font-size: 11px; }
.code-result strong { color: var(--warm); }
.command-sheet { margin-top: 28px; padding: clamp(22px, 4vw, 36px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.search-field { display: grid; gap: 4px; color: var(--muted); font-size: 10px; text-transform: uppercase; }
.search-field input { width: min(260px, 42vw); height: 38px; padding: 8px 11px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 7px; font-size: 13px; text-transform: none; outline: none; }
.search-field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
.command-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; margin-top: 20px; }
.command-list article { min-width: 0; display: grid; grid-template-columns: minmax(150px, .85fr) 1fr auto; gap: 15px; align-items: center; padding: 15px 0; border-top: 1px solid var(--line); }
.command-list article > code { overflow: hidden; color: var(--accent); text-overflow: ellipsis; white-space: nowrap; }
.command-list h4 { margin: 0; font-size: 14px; }.command-list p { margin: 1px 0 0; color: var(--muted); font-size: 11px; }
.copy-inline { border: 0; color: var(--muted); background: transparent; cursor: pointer; font-size: 10px; }
.empty-state { padding: 30px; color: var(--muted); text-align: center; }

.lab-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.lab-card { min-width: 0; padding: clamp(22px, 4vw, 34px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.lab-card.wide { grid-column: 1 / -1; }
.lab-heading { display: flex; gap: 14px; align-items: center; }
.lab-heading span { padding: 4px 7px; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); border-radius: 5px; font-family: monospace; font-size: 9px; font-weight: 800; }
.lab-heading h3 { margin: 0; font-size: 21px; }
.lab-card > p { color: var(--ink-2); }
.segmented { display: inline-flex; gap: 4px; margin: 10px 0 19px; }
.segmented button { min-width: 50px; }
.unit-demo-wrap { width: 100%; height: 120px; display: flex; align-items: center; overflow: hidden; margin-top: 18px; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--line) 50%, transparent) 0 1px, transparent 1px 24px), var(--surface-2); border: 1px solid var(--line); border-radius: 10px; transition: width .2s; }
#unitDemoBox { width: 320px; height: 70px; min-width: 0; display: grid; place-items: center; color: #fff; background: linear-gradient(120deg, var(--accent), #0ea5a1); border-radius: 0 8px 8px 0; transition: width .2s; }
#unitDemoBox span { font-family: monospace; font-size: 11px; }
.lab-explanation { margin-top: 17px; padding: 15px; background: var(--surface-2); border-left: 3px solid var(--accent); }
.lab-explanation code { color: var(--accent); }
.lab-explanation p { margin: 6px 0 0; color: var(--muted); font-size: 12px; }
.type-demo { min-height: 170px; display: grid; place-items: center; overflow: hidden; margin-top: 18px; padding: 20px; background: var(--ink); color: var(--paper); border-radius: 10px; text-align: center; }
.type-demo span { max-width: 11ch; font-weight: 850; font-size: 32px; line-height: .95; letter-spacing: -.05em; }
.formula-pills { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 12px; }
.formula-pills label { padding: 8px; color: var(--muted); background: var(--paper); border: 1px solid var(--line); border-radius: 7px; font-size: 10px; }
.formula-pills input { width: 42px; margin-left: 4px; color: var(--ink); background: transparent; border: 0; font-weight: 750; }
.media-builder { display: grid; grid-template-columns: 300px 1fr; gap: 28px; margin-top: 24px; }
.builder-controls { display: grid; align-content: start; gap: 14px; }
.builder-controls > label:not(.range-control) { display: grid; gap: 5px; color: var(--muted); font-size: 11px; }
.builder-controls select, .builder-controls input[type="number"] { height: 42px; padding: 8px 11px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 7px; }
.input-suffix { display: flex; align-items: center; }.input-suffix input { width: 100%; border-radius: 7px 0 0 7px !important; }.input-suffix span { height: 42px; display: grid; place-items: center; padding: 0 10px; background: var(--surface-2); border: 1px solid var(--line); border-left: 0; border-radius: 0 7px 7px 0; }
.status-box { display: flex; gap: 9px; align-items: center; padding: 11px; color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, transparent); border-radius: 8px; font-size: 11px; }
.status-box span { width: 8px; height: 8px; flex: 0 0 auto; background: currentColor; border-radius: 50%; }.status-box.active { color: var(--success); }
.mq-preview { width: 100%; display: grid; grid-template-columns: 1fr; gap: 8px; padding: 16px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; transition: width .2s; }
.mq-preview div { min-height: 70px; display: grid; place-items: center; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); border-radius: 7px; font-family: monospace; }
.generated-code { margin-top: 12px; padding: 17px; color: #a6f2e6; background: var(--code); border-radius: 9px; font-size: 11px; }
.container-query-demo { container-type: inline-size; width: 520px; max-width: 100%; margin-top: 18px; padding: 12px; background: var(--surface-2); border: 1px dashed var(--accent); border-radius: 10px; transition: width .2s; }
.cq-card { display: grid; gap: 15px; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; }
.cq-visual { min-height: 100px; display: grid; place-items: center; color: #0d3b38; background: linear-gradient(135deg, var(--accent-2), var(--yellow)); border-radius: 7px; font-weight: 900; font-size: 30px; }
.cq-card small { color: var(--accent); font-family: monospace; }.cq-card h4 { margin: 3px 0; font-size: 20px; line-height: 1.15; }.cq-card p { margin: 0; color: var(--muted); font-size: 12px; }
@container (min-width: 420px) { .cq-card { grid-template-columns: 150px 1fr; align-items: center; } }

.playground-section { width: min(1360px, calc(100% - 32px)); }
.playground { overflow: hidden; background: #091a29; color: #d9e7ed; border: 1px solid #294154; border-radius: var(--radius); box-shadow: 0 24px 80px rgba(4, 20, 33, .2); }
.playground-toolbar { min-height: 64px; display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 12px 16px; border-bottom: 1px solid #294154; }
.preset-group, .editor-actions { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.preset-group > span { color: #7f9aaa; font-size: 11px; }
.preset-group button, .preview-sizes button { padding: 6px 10px; color: #bcd0da; background: #102a3d; border: 1px solid #315069; border-radius: 6px; cursor: pointer; font-size: 11px; }
.preset-group button:hover, .preview-sizes button.active { color: #092220; background: var(--accent-2); border-color: var(--accent-2); }
.auto-label { color: #9fb5c0; font-size: 11px; }.auto-label input { accent-color: var(--accent-2); }
.playground .button.ghost { color: #c8dae1; background: #102a3d; border-color: #315069; }.playground .button.primary { color: #092220; background: var(--accent-2); }
.playground-grid { display: grid; grid-template-columns: 1fr 1fr; min-height: 620px; }
.editor-pane { min-width: 0; border-right: 1px solid #294154; }
.editor-tabs { height: 48px; display: flex; align-items: end; gap: 3px; padding: 0 12px; background: #0c2131; border-bottom: 1px solid #294154; }
.editor-tabs button { height: 39px; padding: 0 17px; color: #7e99a8; background: transparent; border: 0; border-bottom: 2px solid transparent; cursor: pointer; font-size: 11px; font-weight: 750; }
.editor-tabs button[aria-selected="true"] { color: var(--accent-2); border-color: var(--accent-2); }
.editor-tabs span { margin: auto 8px auto auto; color: #6f8b9b; font-size: 10px; }
.editor-wrap { display: none; height: 572px; }.editor-wrap.active { display: block; }
.editor-wrap textarea { width: 100%; height: 100%; resize: none; padding: 22px; color: #d6e6ec; caret-color: var(--accent-2); background: #071a29; border: 0; outline: 0; font-family: "SFMono-Regular", Consolas, monospace; font-size: 13px; line-height: 1.7; tab-size: 2; }
.preview-pane { min-width: 0; display: grid; grid-template-rows: 48px 1fr; background: #cbd9df; }
.preview-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 12px; color: #173448; background: #dce7eb; border-bottom: 1px solid #aabdc7; }
.preview-sizes { display: flex; gap: 4px; }.preview-sizes button { color: #325064; background: #eef4f6; border-color: #aec0c9; }.preview-toolbar > span { font-family: monospace; font-size: 10px; }
.play-preview-stage { min-width: 0; overflow: auto; display: flex; justify-content: center; align-items: flex-start; padding: 20px; background-color: #bed0d7; background-image: radial-gradient(#91aab6 1px, transparent 1px); background-size: 18px 18px; }
.play-preview-stage iframe { width: 375px; max-width: none; height: 530px; flex: 0 0 auto; background: #fff; border: 4px solid #18384b; border-radius: 9px; box-shadow: 0 13px 40px rgba(21, 49, 65, .24); }
.playground-footer { min-height: 52px; display: flex; gap: 20px; align-items: center; padding: 10px 16px; color: #7593a4; border-top: 1px solid #294154; font-size: 10px; }
.playground-footer > div { display: flex; gap: 5px; }.playground-footer strong { color: #bcd0da; }.playground-footer p { margin: 0; }.playground-footer button { margin-left: auto; border: 0; color: var(--accent-2); background: transparent; cursor: pointer; font-weight: 750; }

.quiz-layout { display: grid; grid-template-columns: 260px 1fr; gap: 24px; align-items: start; }
.quiz-progress { position: sticky; top: calc(var(--header-h) + 20px); padding: 27px; text-align: center; background: var(--ink); color: var(--paper); border-radius: var(--radius); }
.score-ring { width: 126px; height: 126px; display: grid; place-content: center; margin: 0 auto 18px; background: conic-gradient(var(--accent-2) var(--score, 0%), color-mix(in srgb, var(--paper) 13%, transparent) 0); border-radius: 50%; position: relative; }
.score-ring::before { content: ""; position: absolute; inset: 9px; background: var(--ink); border-radius: inherit; }.score-ring > * { position: relative; }.score-ring strong { font-size: 42px; line-height: 1; }.score-ring span { color: color-mix(in srgb, var(--paper) 65%, transparent); font-size: 12px; }
.quiz-progress h3 { margin: 0; }.quiz-progress p { color: color-mix(in srgb, var(--paper) 70%, transparent); font-size: 12px; }.quiz-progress button { padding: 7px 12px; color: var(--paper); border: 1px solid color-mix(in srgb, var(--paper) 22%, transparent); background: transparent; border-radius: 7px; cursor: pointer; font-size: 11px; }
.quiz-list { display: grid; gap: 13px; }
.quiz-card { padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 13px; }
.quiz-card > p { margin: 0 0 16px; font-weight: 700; }.quiz-card > p span { color: var(--accent); font-family: monospace; margin-right: 8px; }.quiz-card > div { display: grid; gap: 7px; }.quiz-card button { padding: 10px 13px; color: var(--ink-2); text-align: left; background: var(--paper); border: 1px solid var(--line); border-radius: 7px; cursor: pointer; }.quiz-card button:hover { border-color: var(--accent); }.quiz-card button.correct { color: var(--success); background: color-mix(in srgb, var(--success) 10%, var(--surface)); border-color: var(--success); }.quiz-card button.wrong { color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, var(--surface)); border-color: var(--danger); }.quiz-card small { display: block; min-height: 18px; margin-top: 8px; color: var(--muted); }
.checklist { padding: clamp(28px, 5vw, 50px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.checklist h2 { margin: 4px 0 5px; font-size: clamp(1.8rem, 4vw, 3.5rem); letter-spacing: -.04em; }.checklist > div:first-child p:last-child { color: var(--muted); }.checklist-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 28px 0; }.checklist-items label { display: flex; gap: 10px; align-items: center; padding: 13px; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font-size: 13px; }.checklist-items input { width: 18px; height: 18px; accent-color: var(--accent); }.checklist-meter { height: 14px; overflow: hidden; position: relative; background: var(--surface-2); border-radius: 999px; }.checklist-meter span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .3s; }.checklist-meter strong { position: absolute; right: 7px; top: -4px; font-family: monospace; font-size: 9px; line-height: 20px; }
.reference-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 28px; }.references h2 { margin: 12px 0 0; font-size: clamp(2rem, 4vw, 4rem); letter-spacing: -.04em; }.reference-grid a { display: grid; gap: 8px; min-height: 180px; padding: 23px; text-decoration: none; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; transition: transform .2s, border-color .2s; }.reference-grid a:hover { transform: translateY(-4px); border-color: var(--accent); }.reference-grid span { color: var(--accent); font-family: monospace; font-size: 9px; }.reference-grid strong { max-width: 20ch; font-size: 18px; line-height: 1.2; }.reference-grid small { align-self: end; color: var(--muted); }
.site-footer { min-height: 150px; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 36px max(24px, calc((100vw - var(--content)) / 2)); color: #c1d2db; background: #071a29; }.site-footer .brand-mark i { background: #071a29; }.site-footer p { color: #7f9aaa; }.site-footer > a { color: var(--accent-2); font-size: 13px; }
.toast { position: fixed; z-index: 300; left: 50%; bottom: 24px; transform: translate(-50%, 140%); padding: 10px 16px; color: #fff; background: #102a43; border-radius: 8px; box-shadow: var(--shadow); font-size: 12px; opacity: 0; transition: transform .25s, opacity .25s; }.toast.show { transform: translate(-50%, 0); opacity: 1; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }.reveal.visible { opacity: 1; transform: none; }.principle-card:nth-child(2) { transition-delay: .08s; }.principle-card:nth-child(3) { transition-delay: .16s; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 14%, transparent); } 50% { box-shadow: 0 0 0 7px color-mix(in srgb, currentColor 0%, transparent); } }

@media (max-width: 1040px) {
  .site-header { grid-template-columns: auto 1fr auto; padding-inline: 20px; }.main-nav { position: absolute; left: 20px; right: 20px; top: calc(100% + 8px); display: none; padding: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }.main-nav.open { display: grid; }.main-nav a { padding: 11px; }.menu-toggle { display: block; justify-self: end; }.theme-toggle { grid-column: 3; grid-row: 1; }.menu-toggle { grid-column: 2; grid-row: 1; }.theme-label { display: none; }
  .hero { grid-template-columns: 1fr; }.hero-copy { max-width: 760px; }.hero h1 { max-width: 11ch; }.simulator-card { width: 100%; }
  .command-list { grid-template-columns: 1fr; }.playground-grid { grid-template-columns: 1fr; }.editor-pane { border-right: 0; border-bottom: 1px solid #294154; }.play-preview-stage { min-height: 580px; }
}

@media (max-width: 760px) {
  :root { --header-h: 66px; }.section { width: min(100% - 28px, var(--content)); padding-block: 72px; }.site-header { padding-inline: 14px; gap: 10px; }.brand strong { font-size: 14px; }.theme-toggle { width: 40px; padding: 0; justify-content: center; }.hero { padding-top: 42px; }.hero h1 { font-size: clamp(3.3rem, 16vw, 5.2rem); }.hero-actions { display: grid; }.mini-stats { justify-content: space-between; gap: 8px; }.simulator-card { padding: 14px; }.device-controls { display: grid; grid-template-columns: repeat(3, 1fr) auto; }.device-button { padding: 6px; }.device-button span { display: none; }.viewport-workbench { height: 360px; }.simulator-readout { grid-template-columns: 1fr; gap: 7px; }
  .timeline { grid-template-columns: 1fr; }.timeline-tabs { grid-template-columns: repeat(4, 1fr); }.timeline-tabs button { min-height: 75px; padding: 10px; text-align: center; }.timeline-tabs button span { font-size: 10px; }.timeline-tabs button[aria-selected="true"] { box-shadow: inset 0 4px var(--warm); }.era-panel { min-height: 480px; grid-template-columns: 1fr; gap: 0; padding: 26px; }.era-number { font-size: 54px; }.origin-note { grid-template-columns: 1fr; }.quote-mark { display: none; }
  .principle-grid, .lab-grid, .reference-grid { grid-template-columns: 1fr; }.lab-card.wide { grid-column: auto; }.recipe { grid-template-columns: 1fr; padding: 24px; }.command-sheet .panel-heading { display: grid; }.search-field input { width: 100%; }.command-list article { grid-template-columns: 1fr auto; }.command-list article > div { grid-column: 1 / -1; grid-row: 2; }.command-list article > .copy-inline { grid-column: 2; grid-row: 1; }
  .media-builder { grid-template-columns: 1fr; }.formula-pills { grid-template-columns: 1fr; }.formula-pills input { width: 60px; }.playground-section { width: calc(100% - 16px); }.playground-toolbar { align-items: flex-start; flex-direction: column; }.editor-actions { width: 100%; }.editor-actions .auto-label { margin-right: auto; }.editor-wrap { height: 480px; }.play-preview-stage { justify-content: flex-start; min-height: 570px; }.playground-footer { flex-wrap: wrap; }.playground-footer p { display: none; }
  .quiz-layout { grid-template-columns: 1fr; }.quiz-progress { position: static; display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; text-align: left; }.score-ring { grid-row: 1 / 4; width: 100px; height: 100px; margin: 0; }.quiz-progress h3, .quiz-progress p { margin: 0; }.quiz-progress button { justify-self: start; }.checklist-items { grid-template-columns: 1fr; }.site-footer { flex-direction: column; align-items: flex-start; }.site-footer p { margin: 0; }
}

@media (max-width: 430px) {
  .device-button { font-size: 10px; }.breakpoint-strip { font-size: 8px; }.timeline-tabs button strong { font-size: 9px; }.timeline-tabs button span { display: none; }.era-panel { min-height: 520px; }.command-list article > code { font-size: 10px; }.preset-group > span { width: 100%; }.preview-sizes button { padding-inline: 7px; }.quiz-card { padding: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }.reveal { opacity: 1; transform: none; }
}