:root {
  color-scheme: light;
  --slide-bg: #fbfaf7;
  --slide-text: #171717;
  --slide-muted: #5d5d5d;
  --slide-accent: #2457a6;
  --slide-border: #dedbd2;
  --slide-code-bg: #f1efe9;
  --slide-shadow: rgba(23, 23, 23, 0.08);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }

body.presentation-body {
  margin: 0;
  background: var(--slide-bg);
  color: var(--slide-text);
  font-family: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  line-height: 1.45;
}

.presentation-shell { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; }
.presentation-topbar, .presentation-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.4rem; color: var(--slide-muted); font-size: .95rem;
}
.presentation-topbar a { color: var(--slide-accent); text-decoration: none; font-weight: 700; }
.slide-counter { font-variant-numeric: tabular-nums; }
.deck { position: relative; min-height: 0; }
.slide { display: none; min-height: calc(100vh - 7.2rem); padding: clamp(2rem, 5vw, 5rem); place-items: center; }
.slide.is-active { display: grid; }
.slide-content { width: min(1120px, 100%); }
.slide-kicker { margin: 0 0 1rem; color: var(--slide-accent); font-size: clamp(1rem, 1.8vw, 1.35rem); font-weight: 800; }
.slide h1, .slide h2 { margin: 0; max-width: 17ch; font-weight: 850; line-height: 1.04; }
.slide h1 { font-size: clamp(3rem, 7vw, 6.4rem); }
.slide h2 { font-size: clamp(2.4rem, 5.4vw, 5rem); }
.slide p, .slide li { max-width: 64ch; font-size: clamp(1.45rem, 2.25vw, 2.2rem); }
.slide p { margin: 1.4rem 0 0; }
.slide ul, .slide ol { display: grid; gap: 1rem; margin: 1.8rem 0 0; padding-left: 1.4em; }
.fragment { opacity: 0; transform: translateY(10px); transition: opacity 180ms ease, transform 180ms ease; }
.fragment.is-visible { opacity: 1; transform: translateY(0); }
.fragment.is-dimmed { color: #8a8a8a; }
.code-block {
  display: block; width: min(900px, 100%); margin: 2rem 0 0; padding: 1.4rem;
  border: 1px solid var(--slide-border); border-radius: 10px; background: var(--slide-code-bg);
  color: var(--slide-text); font: clamp(1.25rem, 2vw, 1.95rem)/1.35 "SFMono-Regular", Consolas, monospace;
  overflow-x: auto; box-shadow: 0 14px 34px var(--slide-shadow);
}
.code-block.compact-code { font-size: clamp(1rem, 1.5vw, 1.45rem); }
.code-block.no-scroll-code { overflow-x: visible; white-space: pre-wrap; overflow-wrap: anywhere; }
.code-step { margin-top: 1.2rem; }
.code-step .code-block { margin-top: 0; }
.code-step p { margin-top: .75rem; font-size: clamp(1.1rem, 1.7vw, 1.55rem); color: var(--slide-muted); }
.two-column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.two-column.diagram-emphasis { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); align-items: center; }
.diagram-emphasis .slide-figure img { width: 100%; max-height: 62vh; object-fit: contain; }
.prompt-card { margin-top: 2rem; padding: 1.4rem; border: 1px solid var(--slide-border); border-radius: 12px; background: #fff; }
.prompt-card p { margin-top: .6rem; font-size: clamp(1.1rem, 1.7vw, 1.35rem); }
.presentation-index-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.presentation-index-card { margin-top: 0; padding: 1rem 1.15rem; }
.presentation-index-card h2 { font-size: clamp(1.35rem, 2vw, 1.8rem); }
.presentation-index-card p { margin-top: .4rem; font-size: clamp(1rem, 1.35vw, 1.15rem); }
.presentation-index-card a { color: var(--slide-accent); font-weight: 700; }
.slide-figure { margin: 1.5rem 0 0; }
.slide-figure img { display: block; max-width: 100%; max-height: 48vh; border: 1px solid var(--slide-border); border-radius: 10px; box-shadow: 0 14px 34px var(--slide-shadow); }
.slide-figure figcaption { margin-top: .55rem; color: var(--slide-muted); font-size: clamp(.9rem, 1.3vw, 1.15rem); }
.comparison { width: 100%; margin-top: 2rem; border-collapse: collapse; background: #fff; font-size: clamp(1rem, 1.6vw, 1.45rem); }
.comparison th, .comparison td { padding: 1rem; border: 1px solid var(--slide-border); text-align: left; vertical-align: top; }
.comparison th { color: var(--slide-accent); }
.flow { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-top: 2rem; }
.flow span { padding: .8rem 1rem; border: 2px solid var(--slide-text); border-radius: 10px; background: #fff; font-size: clamp(1rem, 1.5vw, 1.35rem); font-weight: 800; }
.flow b { color: var(--slide-accent); font-size: 1.8rem; }
.decision-simulator { display: grid; grid-template-columns: minmax(15rem, .8fr) minmax(0, 1.2fr); gap: 1.5rem; margin-top: 1.5rem; align-items: start; }
.decision-controls, .decision-output { display: grid; gap: .8rem; padding: 1.2rem; border: 1px solid var(--slide-border); border-radius: 10px; background: #fff; }
.decision-controls label { font-size: 1.15rem; font-weight: 700; }
.decision-controls input { width: 100%; padding: .7rem; border: 1px solid var(--slide-border); border-radius: 6px; font: inherit; font-size: 1.1rem; }
.decision-controls button { padding: .7rem 1rem; border: 0; border-radius: 6px; background: var(--slide-accent); color: #fff; font: inherit; font-weight: 800; cursor: pointer; }
.decision-output pre { min-height: 5rem; margin: 0; white-space: pre-wrap; font: 1.1rem/1.5 "SFMono-Regular", Consolas, monospace; }
.exercise-preview { margin-top: 1.5rem; border: 1px solid var(--slide-border); border-radius: 12px; overflow: hidden; box-shadow: 0 14px 34px var(--slide-shadow); }
.exercise-preview-bar { padding: .65rem 1rem; border-bottom: 1px solid #b8c8d8; background: #e8eef4; color: #46576a; font: .95rem/1.3 "SFMono-Regular", Consolas, monospace; }
.exercise-preview-page { padding: 1.5rem; background: lightblue; font-family: Verdana, sans-serif; }
.exercise-preview-poster { display: block; width: auto; max-width: 100%; height: min(50vh, 400px); margin-bottom: 1.25rem; border: 5px solid #334e68; object-fit: contain; }
.exercise-preview-copy h3 { margin: 0 0 1rem; color: darkblue; font: 700 1.7rem/1.2 Verdana, sans-serif; }
.exercise-preview-copy p { margin: 0 0 .8rem; color: #243b53; font: 1.2rem/1.5 Verdana, sans-serif; }
.semantic-slide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-top: 1.5rem; }
.semantic-slide-diagram { margin: 0; }
.semantic-slide-diagram figcaption { margin-bottom: .55rem; color: var(--slide-muted); font-size: 1.05rem; font-weight: 800; }
.semantic-slide-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(6rem, 1fr); grid-template-areas: "header header" "nav nav" "main aside" "footer footer"; gap: .35rem; padding: .35rem; border: 2px solid var(--slide-text); background: #fff; }
.semantic-slide-layout.is-simple { grid-template-columns: 1fr; grid-template-areas: "header" "nav" "main" "footer"; }
.semantic-slide-region { display: grid; place-items: center; min-height: 2.7rem; padding: .55rem; border: 2px solid var(--slide-accent); background: #eef4ff; font: 800 1rem/1.2 "SFMono-Regular", Consolas, monospace; text-align: center; }
.semantic-slide-header { grid-area: header; }
.semantic-slide-nav { grid-area: nav; }
.semantic-slide-main { grid-area: main; display: grid; gap: .35rem; }
.semantic-slide-aside { grid-area: aside; }
.semantic-slide-footer { grid-area: footer; }
.semantic-slide-inner { width: 100%; min-height: 3.2rem; border-color: #b26a00; background: #fff4db; }
.form-simulator { display: grid; grid-template-columns: minmax(16rem, .8fr) minmax(0, 1.2fr); gap: 1.25rem; margin-top: 1.5rem; }
.form-simulator form, .form-simulator-output { display: grid; gap: .7rem; padding: 1.1rem; border: 1px solid var(--slide-border); border-radius: 10px; background: #fff; }
.form-simulator label { font-size: 1rem; font-weight: 800; }
.form-simulator input[type="text"], .form-simulator input[type="email"], .form-simulator input[type="number"], .form-simulator input[type="password"], .form-simulator input[type="date"], .form-simulator textarea, .form-simulator select { width: 100%; padding: .65rem; border: 1px solid #9aa4b2; border-radius: 6px; font: 1rem/1.3 inherit; }
.form-simulator textarea { min-height: 5rem; resize: vertical; }
.form-simulator fieldset { display: grid; gap: .6rem; margin: 0; padding: .8rem; border: 1px solid #9aa4b2; border-radius: 6px; }
.form-simulator legend { padding: 0 .35rem; font-weight: 800; }
.form-choice { display: flex; gap: .5rem; align-items: center; font-weight: 600 !important; }
.form-simulator button { justify-self: start; padding: .7rem 1rem; border: 0; border-radius: 6px; background: var(--slide-accent); color: #fff; font: inherit; font-weight: 800; cursor: pointer; }
.form-simulator-output pre { min-height: 9rem; margin: 0; white-space: pre-wrap; font: 1rem/1.45 "SFMono-Regular", Consolas, monospace; }
.inline-form-demo { display: flex; flex-wrap: wrap; gap: .65rem 1rem; align-items: end; width: min(760px, 100%); margin-top: .9rem; padding: .8rem; border: 1px solid var(--slide-border); border-radius: 9px; background: #fff; }
.inline-form-demo label { display: grid; gap: .3rem; font-size: .95rem; font-weight: 800; }
.inline-form-demo input:not([type="radio"]):not([type="checkbox"]), .inline-form-demo textarea, .inline-form-demo select { width: min(18rem, 100%); padding: .55rem; border: 1px solid #9aa4b2; border-radius: 5px; font: 1rem/1.25 inherit; }
.inline-form-demo textarea { min-height: 4.5rem; resize: vertical; }
.inline-form-demo fieldset { display: flex; flex-wrap: wrap; gap: .7rem; margin: 0; padding: .65rem; border: 1px solid #9aa4b2; border-radius: 6px; }
.inline-form-demo legend { padding: 0 .3rem; font-size: .95rem; font-weight: 800; }
.inline-form-demo .form-choice { display: flex; }
.inline-form-demo button { padding: .6rem .9rem; border: 0; border-radius: 6px; background: var(--slide-accent); color: #fff; font: inherit; font-weight: 800; cursor: pointer; }
.inline-demo-output { align-self: center; min-width: 8rem; color: var(--slide-muted); font: .95rem/1.35 "SFMono-Regular", Consolas, monospace; }
.css-simulator { display: grid; grid-template-columns: minmax(15rem, .8fr) minmax(0, 1.2fr); gap: 1.25rem; margin-top: 1.4rem; }
.css-simulator-controls, .css-simulator-preview { display: grid; gap: .75rem; padding: 1.1rem; border: 1px solid var(--slide-border); border-radius: 10px; background: #fff; }
.css-simulator-controls label { display: grid; gap: .3rem; font-size: 1rem; font-weight: 800; }
.css-simulator-controls select { padding: .6rem; border: 1px solid #9aa4b2; border-radius: 6px; font: inherit; }
.css-simulator-controls button { padding: .65rem .9rem; border: 0; border-radius: 6px; background: var(--slide-accent); color: #fff; font: inherit; font-weight: 800; cursor: pointer; }
.css-simulator-preview { place-items: center; min-height: 12rem; }
.css-simulator-preview h3 { margin: 0; font-family: "Times New Roman", serif; font-size: 2rem; }
.cascade-demo { display: grid; gap: .8rem; margin-top: 1.2rem; }
.cascade-demo-buttons { display: flex; flex-wrap: wrap; gap: .7rem; }
.cascade-demo button { padding: .65rem .9rem; border: 0; border-radius: 6px; background: var(--slide-accent); color: #fff; font: inherit; font-weight: 800; cursor: pointer; }
.cascade-demo-result { padding: 1rem; border: 1px solid var(--slide-border); border-radius: 8px; background: #fff; font-size: 1.4rem; font-weight: 800; }
.design-demo { display: grid; grid-template-columns: minmax(15rem, .8fr) minmax(0, 1.2fr); gap: 1.2rem; margin-top: 1.3rem; }
.design-demo-controls, .design-demo-preview { display: grid; gap: .7rem; padding: 1rem; border: 1px solid var(--slide-border); border-radius: 9px; background: #fff; }
.design-demo-controls label { display: grid; grid-template-columns: 1fr auto; gap: .4rem; align-items: center; font-size: .95rem; font-weight: 800; }
.design-demo-controls input[type="range"] { grid-column: 1 / -1; width: 100%; }
.design-demo-controls input[type="color"] { width: 3rem; height: 2.3rem; padding: 0; border: 1px solid #9aa4b2; border-radius: 5px; }
.design-demo-controls button { padding: .6rem .8rem; border: 0; border-radius: 6px; background: var(--slide-accent); color: #fff; font: inherit; font-weight: 800; cursor: pointer; }
.design-demo-preview { align-content: center; min-height: 12rem; }
.design-demo-preview h3, .design-demo-preview p { margin: 0; }
.design-demo-readout { font: .95rem/1.4 "SFMono-Regular", Consolas, monospace; }
.contrast-result-status { padding: .75rem; border: 2px solid #177245; border-radius: 7px; background: #e7f7ee; color: #124f32; font-weight: 900; }
.contrast-result-status[data-pass="false"] { border-color: #b42318; background: #fff0ee; color: #8f1710; }
.font-choice-buttons { display: flex; flex-wrap: wrap; gap: .55rem; }
.font-choice-buttons button[aria-pressed="true"] { outline: 3px solid #9dc1ff; }
.font-category-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin-top: 1rem; }
.font-category-card { padding: .8rem; border: 1px solid var(--slide-border); border-radius: 8px; background: #fff; }
.font-category-card h3 { margin: 0 0 .5rem; color: var(--slide-accent); font: 800 1rem/1.2 system-ui, sans-serif; }
.font-sample { margin: .3rem 0; color: #000; font-size: 1.15rem; line-height: 1.25; }
.font-sample small { margin-left: .4rem; color: var(--slide-muted); font: .72rem/1.2 system-ui, sans-serif; }
.course-color-preview, .course-hex-explain { margin-top: 1rem; border: 1px solid #cbd5e1; border-radius: 8px; overflow: hidden; background: #fff; color: #172026; }
.course-color-preview-bar { padding: .55rem .75rem; border-bottom: 1px solid #e2e8f0; background: #f8fafc; font-size: .95rem; font-weight: 800; }
.course-color-preview-page { padding: 1rem; background: rgb(246 248 247); color: #172026; font-family: Arial, Helvetica, sans-serif; }
.course-color-preview-page h3 { margin: 0 0 .45rem; font-size: 1.25rem; }
.course-color-preview-page p { margin: 0 0 .7rem; color: #172026; font-size: 1rem; }
.course-color-warning { display: inline-block; padding: .65rem .8rem; border-radius: 6px; background: hsl(35 90% 55%); font-weight: 800; }
.course-hex-explain { display: grid; gap: .55rem; padding: 1rem; }
.course-hex-explain p { margin: 0; color: #172026; font-size: 1rem; }
.course-hex-code { font: 900 1.6rem/1.2 "SFMono-Regular", Consolas, monospace; }
.hex-red { color: #7f1d1d; }.hex-green { color: #065f46; }.hex-blue { color: #1e3a8a; }
.course-hex-parts { display: grid; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.course-hex-parts li { color: #172026; font-size: 1rem; }
.color-demo-panel { display: grid; gap: .8rem; margin-top: 1rem; padding: .9rem; border: 1px solid var(--slide-border); border-radius: 9px; background: #fff; }
.color-demo-preview { min-height: 5.5rem; display: grid; place-items: center; padding: .7rem; border-radius: 7px; background: rgb(64 160 220); text-align: center; font-weight: 800; }
.color-demo-preview-values { display: grid; gap: .2rem; padding: .5rem .7rem; border-radius: 6px; background: rgba(255,255,255,.78); color: #111; font: .85rem/1.3 "SFMono-Regular", Consolas, monospace; }
.color-picker-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.color-demo-controls { display: grid; gap: .45rem; }
.color-demo-control label { display: flex; justify-content: space-between; gap: .5rem; font-size: .85rem; font-weight: 800; }
.color-demo-control input[type="range"] { width: 100%; }
.hue-wheel-control { display: grid; gap: .35rem; }
.hue-wheel { position: relative; width: 7.5rem; aspect-ratio: 1; border: 2px solid #9aa4b2; border-radius: 50%; background: conic-gradient(hsl(0 100% 50%),hsl(60 100% 50%),hsl(120 100% 50%),hsl(180 100% 50%),hsl(240 100% 50%),hsl(300 100% 50%),hsl(360 100% 50%)); cursor: pointer; touch-action: none; }
.hue-wheel::after { content: ""; position: absolute; inset: 24%; border: 1px solid #9aa4b2; border-radius: 50%; background: #fff; }
.hue-wheel-marker { position: absolute; z-index: 1; width: .85rem; height: .85rem; border: 3px solid #fff; border-radius: 50%; background: hsl(201 100% 50%); box-shadow: 0 0 0 2px rgba(0,0,0,.45); transform: translate(-50%,-50%); pointer-events: none; }
.hue-wheel-labels { display: flex; flex-wrap: wrap; gap: .35rem; color: var(--slide-muted); font-size: .7rem; }
.color-demo-code { margin: 0; padding: .65rem; border-radius: 7px; background: var(--slide-code-bg); white-space: pre-wrap; font: .85rem/1.35 "SFMono-Regular", Consolas, monospace; }
.box-demo-panel { display: grid; gap: .75rem; margin-top: 1rem; }
.box-demo-controls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; }
.box-demo-control { display: grid; gap: .25rem; }
.box-demo-control label, .box-demo-toggle { font-size: .82rem; font-weight: 800; }
.box-demo-control input[type="range"] { width: 100%; }
.box-demo-switch { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; align-items: center; min-width: 13rem; padding: .2rem; border: 1px solid var(--slide-border); border-radius: 999px; background: #eef1f4; }
.box-demo-switch input { position: absolute; opacity: 0; pointer-events: none; }
.box-demo-switch-option { position: relative; z-index: 1; padding: .4rem .55rem; border-radius: 999px; color: var(--slide-muted); text-align: center; }
.box-demo-switch-thumb { position: absolute; inset: .2rem auto .2rem .2rem; width: calc(50% - .2rem); border-radius: 999px; background: #9dc1ff; transition: transform 160ms ease; }
.box-demo-switch input:checked ~ .box-demo-switch-thumb { transform: translateX(100%); }
.box-demo-stage { min-height: 10rem; padding: .75rem; border: 1px solid var(--slide-border); border-radius: 8px; background: #182126; overflow: auto; }
.box-demo-margin { display: inline-block; background: rgba(251,191,36,.3); border: 2px dashed #d69d00; }
.box-demo-box { width: 220px; padding: 24px; border: 8px solid #2ab7a9; background: rgba(94,234,212,.28); }
.box-demo-content { min-height: 4rem; display: grid; place-items: center; border-radius: 5px; background: #f8fafc; color: #172026; font-weight: 800; text-align: center; }
.box-demo-readout { margin: 0; color: var(--slide-muted); font-size: .9rem !important; }
.box-demo-code { margin: 0; padding: .65rem; border-radius: 7px; background: var(--slide-code-bg); white-space: pre-wrap; font: .78rem/1.25 "SFMono-Regular", Consolas, monospace; }
.display-demo { margin-top: 1rem; border: 1px solid #cbd5e1; border-radius: 8px; overflow: hidden; background: #fff; color: #172026; }
.display-demo-bar { padding: .5rem .7rem; border-bottom: 1px solid #e2e8f0; background: #f8fafc; font-size: .9rem; font-weight: 800; }
.display-demo-page { display: grid; gap: .8rem; padding: .9rem; background: #fff; font-family: Arial, Helvetica, sans-serif; }
.display-demo-group { display: grid; gap: .35rem; }
.display-demo-label { margin: 0; color: #334155; font-size: .8rem !important; font-weight: 800; }
.display-demo-block { display: block; width: 100%; padding: .55rem; border: 2px solid #0f766e; border-radius: 5px; background: #ccfbf1; color: #172026; font-size: .95rem; font-weight: 700; }
.display-demo-inline-text { margin: 0; padding: .6rem; border: 1px solid #e2e8f0; border-radius: 5px; background: #f8fafc; color: #172026; font-size: .95rem !important; line-height: 1.7; }
.display-demo-inline { padding: .12rem .3rem; border: 2px solid #7c3aed; border-radius: 4px; background: #ede9fe; color: #172026; font-weight: 800; }
.selector-demo { margin-top: 1rem; padding: .9rem; border: 1px solid var(--slide-border); border-radius: 8px; background: #fff; color: #172026; }
.selector-demo p { margin: .4rem 0; color: #172026; font-size: 1rem; }
.selector-demo .intro-text { font-weight: 800; }
.selector-demo .demo-card { padding: .65rem; border: 2px solid #94a3b8; border-radius: 6px; }
.selector-demo .demo-card.highlight { border: 4px solid #e67e00; background: #fff5df; }
.selector-demo a { padding: .25rem .4rem; border-radius: 4px; color: #075aa8; text-decoration: none; }
.selector-demo a:hover { background: #dcecff; text-decoration: underline; text-decoration-thickness: 3px; }
.selector-demo a:focus { outline: 3px solid #0f766e; outline-offset: 4px; }
.specificity-scale { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; margin-top: 1.2rem; }
.specificity-item { display: grid; place-items: center; min-height: 7rem; padding: .7rem; border: 2px solid var(--slide-border); border-radius: 8px; background: #fff; text-align: center; }
.specificity-item strong { color: var(--slide-accent); font-size: 1.2rem; }
.selector-playground { display: grid; grid-template-columns: minmax(13rem, .7fr) minmax(0, 1.3fr); gap: 1rem; margin-top: 1.2rem; }
.selector-playground-controls, .selector-playground-page { display: grid; gap: .6rem; padding: .9rem; border: 1px solid var(--slide-border); border-radius: 8px; background: #fff; }
.selector-playground-controls button { padding: .6rem; border: 0; border-radius: 5px; background: var(--slide-accent); color: #fff; font: inherit; font-weight: 800; cursor: pointer; }
.selector-playground-code { margin: 0; padding: .55rem; border-radius: 5px; background: var(--slide-code-bg); white-space: pre-wrap; font: .72rem/1.3 "SFMono-Regular", Consolas, monospace; }
.selector-playground-page * { margin: 0; padding: .45rem; border: 2px solid transparent; border-radius: 5px; color: #172026; font-size: 1rem; }
.selector-match { border-color: #e67e00 !important; background: #fff1d6; }
.ch-demo { display: grid; grid-template-columns: minmax(12rem, .55fr) minmax(0, 1.45fr); gap: .8rem; margin-top: .8rem; }
.ch-demo-controls, .ch-demo-preview { padding: .75rem; border: 1px solid var(--slide-border); border-radius: 7px; background: #fff; }
.ch-demo-controls label { display: grid; gap: .35rem; font-size: .9rem; font-weight: 800; }
.ch-demo-controls input { width: 100%; }
.ch-demo-preview p { width: 70ch; max-width: 100%; margin: 0; padding: .55rem; border: 2px solid #e67e00; background: #fff8e8; color: #172026; font-size: .9rem; line-height: 1.4; }
.profile-redesign-controls { display: flex; gap: .7rem; margin-top: 1rem; }
.profile-redesign-controls button { padding: .65rem .9rem; border: 0; border-radius: 6px; background: var(--slide-accent); color: #fff; font: inherit; font-weight: 800; cursor: pointer; }
.profile-redesign-controls button[aria-pressed="true"] { outline: 4px solid #9dc1ff; }
.profile-redesign-browser { margin-top: .8rem; border: 1px solid #cbd5e1; border-radius: 8px; overflow: hidden; background: #fff; }
.profile-redesign-bar { padding: .5rem .7rem; border-bottom: 1px solid #cbd5e1; background: #f8fafc; color: #172026; font-size: .85rem; font-weight: 800; }
.profile-redesign-page { padding: 1rem; background: #fff; color: #172026; font-family: "Times New Roman", serif; }
.profile-redesign-main { max-width: none; margin: 0; padding: 0; }
.profile-redesign-main h3 { margin: 0 0 .6rem; color: inherit; font-size: 1.8rem; }
.profile-redesign-main p { margin: 0 0 .7rem; color: inherit; font-size: 1rem; }
.profile-redesign-image { display: grid; place-items: center; min-height: 6rem; margin: .7rem 0; border: 2px dashed #94a3b8; background: #e2e8f0; color: #172026; font-weight: 800; }
.profile-redesign-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: .7rem 0; padding: 0; list-style: none; }
.profile-redesign-tags li { font-size: .9rem; }
.profile-redesign-page.is-designed { padding: 1.2rem; background: #0f1417; color: #f3f7f7; font-family: Arial, Helvetica, sans-serif; line-height: 1.5; }
.profile-redesign-page.is-designed .profile-redesign-main { max-width: 70ch; margin: 0 auto; padding: 1rem; border: 1px solid rgba(94,234,212,.4); border-radius: 8px; background: #172026; }
.profile-redesign-page.is-designed h3 { color: #5eead4; }
.profile-redesign-page.is-designed p { color: #f3f7f7; }
.profile-redesign-page.is-designed .profile-redesign-image { border-color: #5eead4; border-radius: 6px; background: #263238; color: #d8f3ef; }
.profile-redesign-page.is-designed .profile-redesign-tags li { padding: .3rem .55rem; border-radius: 999px; background: #ccfbf1; color: #0f1417; font-weight: 800; }
.profile-redesign-page.is-designed a { color: #5eead4; font-weight: 800; text-underline-offset: .18em; }
.flex-demo-panel { display: grid; gap: .65rem; margin-top: .8rem; }
.flex-demo-controls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; }
.flex-demo-control { display: grid; gap: .2rem; }
.flex-demo-control label, .flex-demo-toggle { font-size: .75rem; font-weight: 800; }
.flex-demo-control select, .flex-demo-control input[type="range"] { width: 100%; }
.flex-demo-toggle { display: flex; align-items: center; gap: .35rem; }
.flex-demo-stage { min-height: 13rem; padding: .6rem; border: 1px solid var(--slide-border); border-radius: 8px; background: #182126; overflow: hidden; }
.flex-demo-container { display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch; flex-wrap: nowrap; gap: 1rem; width: 100%; height: 13rem; padding: .65rem; border: 2px dashed #5eead4; border-radius: 6px; background: #142024; overflow: hidden; }
.flex-demo-item { flex: 0 1 7rem; min-width: 3.5rem; min-height: 2.5rem; display: grid; place-items: center; border-radius: 6px; color: #081112; font-weight: 800; }
.flex-demo-item:nth-child(1){background:#5eead4}.flex-demo-item:nth-child(2){background:#fbbf24}.flex-demo-item:nth-child(3){background:#f87171}.flex-demo-item:nth-child(4){background:#93c5fd}.flex-demo-item:nth-child(5){background:#c4b5fd}.flex-demo-item:nth-child(6){background:#86efac}.flex-demo-item:nth-child(7){background:#fdba74}.flex-demo-item:nth-child(8){background:#f0abfc}
.flex-demo-readout { margin: 0; color: var(--slide-muted); font-size: .78rem !important; }
.flex-demo-code { margin: 0; padding: .55rem; border-radius: 6px; background: var(--slide-code-bg); white-space: pre-wrap; font: .7rem/1.2 "SFMono-Regular", Consolas, monospace; }
.flex-preview { margin-top: 1rem; padding: .8rem; border: 1px solid var(--slide-border); border-radius: 8px; background: #fff; }
.flex-preview-row { display: flex; gap: 1rem; }
.flex-preview-row.is-wrap { flex-wrap: wrap; }
.flex-preview-item { flex: 1 1 8rem; padding: .7rem; border-radius: 6px; background: #ccfbf1; color: #172026; font-weight: 800; text-align: center; }
.single-flex-demo { display: grid; grid-template-columns: minmax(12rem, .45fr) minmax(0, 1.55fr); gap: .8rem; margin-top: .9rem; }
.single-flex-control, .single-flex-stage { padding: .75rem; border: 1px solid var(--slide-border); border-radius: 7px; background: #fff; }
.single-flex-control label { display: grid; gap: .35rem; font-size: .9rem; font-weight: 800; }
.single-flex-control input, .single-flex-control select { width: 100%; }
.single-flex-control code { display: block; margin-top: .6rem; font-size: .8rem; }
.single-flex-stage { display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch; gap: 1rem; min-height: 10rem; background: #eef4f7; }
.single-flex-item { flex: 0 1 6rem; display: grid; place-items: center; min-width: 3rem; padding: .5rem; border-radius: 5px; background: #5eead4; color: #081112; font-weight: 800; }
.single-flex-item:nth-child(2) { min-height: 4rem; background: #fbbf24; }
.single-flex-item:nth-child(3) { min-height: 6rem; background: #f87171; }
.wrap-resize-control { display: grid; gap: .3rem; margin-top: .7rem; font-size: .9rem; font-weight: 800; }
.wrap-resize-control input { width: min(32rem, 100%); }
.flex-preview-resizable { width: 36rem; max-width: 100%; transition: width 120ms ease; }
.item-flex-demo { display: grid; grid-template-columns: minmax(13rem, .55fr) minmax(0, 1.45fr); gap: .8rem; margin-top: .8rem; }
.item-flex-controls, .item-flex-stage { padding: .75rem; border: 1px solid var(--slide-border); border-radius: 7px; background: #fff; }
.item-flex-controls { display: grid; gap: .55rem; }
.item-flex-controls label { display: grid; gap: .25rem; font-size: .85rem; font-weight: 800; }
.item-flex-controls input, .item-flex-controls select { width: 100%; }
.item-flex-controls code { font-size: .8rem; }
.item-flex-stage { display: flex; gap: .7rem; min-height: 8rem; background: #eef4f7; }
.item-flex-box { flex: 0 1 8rem; display: grid; place-items: center; min-width: 2rem; border-radius: 5px; background: #5eead4; color: #081112; font-weight: 800; }
.item-flex-box:nth-child(2) { background: #fbbf24; }.item-flex-box:nth-child(3) { background: #f87171; }
.item-flex-stage[data-item-stage-resizable] { width: 36rem; max-width: 100%; transition: width 120ms ease; }
.grid-concept { display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; margin-top:1rem; }
.grid-concept > div { min-height:7rem; display:grid; place-items:center; padding:.6rem; border:2px solid #0f766e; background:#ccfbf1; color:#172026; font-weight:800; text-align:center; }
.grid-concept > div:nth-child(2){background:#fef3c7}.grid-concept > div:nth-child(3){background:#fee2e2}
.grid-interactive { display:grid; grid-template-columns:minmax(12rem,.48fr) minmax(0,1.52fr); gap:.8rem; margin-top:.8rem; }
.grid-interactive-controls,.grid-interactive-stage { padding:.75rem; border:1px solid var(--slide-border); border-radius:7px; background:#fff; }
.grid-interactive-controls { display:grid; gap:.55rem; align-content:start; }
.grid-interactive-controls label { display:grid; gap:.25rem; color:#172026; font-size:.82rem; font-weight:800; }
.grid-interactive-controls input,.grid-interactive-controls select { width:100%; }
.grid-interactive-controls code { color:#172026; font-size:.76rem; overflow-wrap:anywhere; }
.grid-interactive-stage { overflow:hidden; background:#eef4f7; }
.grid-stage { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; width:100%; min-height:10rem; padding:.55rem; border:2px dashed #0f766e; }
.grid-item { min-width:0; min-height:3.5rem; display:grid; place-items:center; border-radius:5px; background:#5eead4; color:#081112; font-weight:800; }
.grid-item:nth-child(2){background:#fbbf24}.grid-item:nth-child(3){background:#f87171}.grid-item:nth-child(4){background:#93c5fd}.grid-item:nth-child(5){background:#c4b5fd}.grid-item:nth-child(6){background:#86efac}
.grid-terms { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; margin-top:1rem; }
.grid-term { padding:.7rem; border-left:5px solid var(--slide-accent); border-radius:5px; background:#fff; color:#172026; }
.grid-term strong { display:block; color:#075aa8; }
.areas-stage { grid-template-columns:12rem 1fr; grid-template-areas:"header header" "aside main" "footer footer"; }
.areas-stage .area-header{grid-area:header}.areas-stage .area-aside{grid-area:aside}.areas-stage .area-main{grid-area:main}.areas-stage .area-footer{grid-area:footer}
.grid-compare { display:grid; gap:.55rem; }
.grid-compare-row { display:grid; gap:.3rem; }
.grid-compare-row strong { color:#172026; }
.grid-compare-stage { display:grid; gap:.55rem; width:100%; padding:.55rem; border:2px dashed #0f766e; background:#eef4f7; }
.grid-compare-stage .grid-item { min-height:3.2rem; }
.responsive-interactive { display:grid; grid-template-columns:minmax(13rem,.52fr) minmax(0,1.48fr); gap:.8rem; margin-top:.8rem; }
.responsive-controls,.responsive-stage { padding:.75rem; border:1px solid var(--slide-border); border-radius:7px; background:#fff; }
.responsive-controls { display:grid; gap:.55rem; align-content:start; color:#172026; }
.responsive-controls label { display:grid; gap:.25rem; font-size:.82rem; font-weight:800; }
.responsive-controls input,.responsive-controls select { width:100%; }
.responsive-controls code { color:#172026; font-size:.73rem; overflow-wrap:anywhere; white-space:pre-wrap; }
.responsive-controls p { margin:.2rem 0; color:#172026; font-size:.85rem; line-height:1.35; }
.responsive-stage { min-width:0; overflow:hidden; background:#eef4f7; }
.unit-bars { display:grid; gap:.45rem; }
.unit-row { display:grid; grid-template-columns:4rem minmax(0,1fr) 4.5rem; align-items:center; gap:.45rem; color:#172026; font-size:.76rem; font-weight:800; }
.unit-track { min-width:0; overflow:hidden; }
.unit-bar { height:1.55rem; border-radius:4px; background:#5eead4; }
.unit-row:nth-child(2) .unit-bar{background:#fbbf24}.unit-row:nth-child(3) .unit-bar{background:#f87171}.unit-row:nth-child(4) .unit-bar{background:#93c5fd}.unit-row:nth-child(5) .unit-bar{background:#c4b5fd}.unit-row:nth-child(6) .unit-bar{background:#86efac}
.measure-demo { width:100%; padding:.7rem; border:2px dashed #0f766e; background:#f8fafc; color:#172026; }
.measure-content { width:min(100% - 2rem,70ch); margin-inline:auto; padding:.7rem; border-radius:5px; background:#ccfbf1; }
.measure-content p { margin:0; color:#172026; font-size:.9rem; line-height:1.45; }
.clamp-preview { width:100%; padding:1rem; border:2px dashed #0f766e; background:#f8fafc; color:#172026; }
.clamp-preview h3 { margin:0; color:#075aa8; font-size:clamp(2rem,5vw,4rem); line-height:1.05; }
.responsive-image-frame { width:32rem; max-width:100%; padding:.55rem; border:2px dashed #0f766e; background:#dbeafe; }
.responsive-image-frame img { display:block; max-width:100%; height:auto; }
.fit-preview { width:100%; height:12rem; overflow:hidden; border:2px dashed #0f766e; background:#dbeafe; }
.fit-preview img { display:block; width:100%; height:100%; object-fit:fill; }
.fit-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.35rem; }
.fit-options label { display:flex; align-items:center; gap:.3rem; }
.fit-options input { width:auto; }
.mq-interactive { display:grid; grid-template-columns:minmax(13rem,.48fr) minmax(0,1.52fr); gap:.8rem; margin-top:.8rem; }
.mq-controls,.mq-stage { padding:.75rem; border:1px solid var(--slide-border); border-radius:7px; background:#fff; }
.mq-controls { display:grid; gap:.55rem; align-content:start; color:#172026; }
.mq-controls label { display:grid; gap:.25rem; font-size:.82rem; font-weight:800; }
.mq-controls input,.mq-controls select { width:100%; }
.mq-controls code { color:#172026; font-size:.72rem; white-space:pre-wrap; overflow-wrap:anywhere; }
.mq-controls p { margin:.15rem 0; color:#172026; font-size:.85rem; line-height:1.35; }
.mq-stage { min-width:0; overflow:hidden; background:#eef4f7; }
.mq-viewport { width:28rem; max-width:100%; padding:.65rem; border:2px dashed #0f766e; background:#f8fafc; transition:width 120ms ease; }
.mq-preview { display:grid; grid-template-columns:1fr; gap:.65rem; }
.mq-box { min-height:4.5rem; display:grid; place-items:center; padding:.55rem; border-radius:5px; background:#5eead4; color:#081112; font-weight:800; text-align:center; }
.mq-box:nth-child(2){background:#fbbf24}.mq-box:nth-child(3){background:#f87171}
.breakpoint-line { position:relative; height:4rem; margin-top:1.2rem; border-bottom:5px solid #94a3b8; }
.breakpoint-marker { position:absolute; left:60%; bottom:-12px; width:5px; height:3rem; background:#e67e00; }
.breakpoint-marker::after { content:"breakpoint"; position:absolute; left:50%; top:-1.3rem; transform:translateX(-50%); color:#172026; font-weight:800; }
.homepage-demo { display:grid; grid-template-columns:minmax(13rem,.42fr) minmax(0,1.58fr); gap:.8rem; margin-top:.75rem; }
.homepage-controls,.homepage-stage { padding:.7rem; border:1px solid var(--slide-border); border-radius:7px; background:#fff; }
.homepage-controls { display:grid; gap:.5rem; align-content:start; color:#172026; }
.homepage-controls label { display:grid; gap:.25rem; font-size:.82rem; font-weight:800; }
.homepage-controls input { width:100%; }
.homepage-controls code { color:#172026; font-size:.72rem; white-space:pre-wrap; overflow-wrap:anywhere; }
.homepage-controls p { margin:.1rem 0; color:#172026; font-size:.82rem; line-height:1.35; }
.homepage-stage { min-width:0; overflow:hidden; background:#eef4f7; }
.homepage-viewport { width:48rem; max-width:100%; border:2px dashed #0f766e; background:#fff; color:#172026; font-family:Arial,Helvetica,sans-serif; transition:width 120ms ease; }
.homepage-header { padding:.55rem .75rem; background:#123c3a; color:#fff; }
.homepage-header strong { color:#fff; }
.homepage-nav { display:flex; flex-direction:column; gap:.25rem; margin-top:.4rem; }
.homepage-nav a { padding:.25rem .4rem; border-radius:3px; color:#fff; font-size:.72rem; text-decoration:none; }
.homepage-hero { display:grid; gap:.55rem; padding:.8rem; background:#ccfbf1; }
.homepage-hero h3 { margin:0; color:#123c3a; font-size:1.35rem; }
.homepage-hero p { margin:0; color:#172026; font-size:.72rem; }
.homepage-hero img { display:block; width:100%; max-height:8rem; object-fit:cover; border-radius:5px; }
.homepage-cards { display:grid; grid-template-columns:1fr; gap:.55rem; padding:.8rem; }
.homepage-card { padding:.55rem; border:1px solid #cbd5e1; border-radius:5px; background:#f8fafc; }
.homepage-card h4 { margin:0 0 .25rem; color:#075aa8; font-size:.85rem; }
.homepage-card p { margin:0; color:#172026; font-size:.68rem; line-height:1.35; }
.homepage-footer { padding:.5rem .75rem; background:#123c3a; color:#fff; font-size:.65rem; }
.homepage-viewport.is-wide .homepage-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.homepage-viewport.is-wide .homepage-nav { flex-direction:row; margin-top:0; }
.homepage-viewport.is-wide .homepage-hero { grid-template-columns:1fr 1fr; align-items:center; }
.homepage-viewport.is-wide .homepage-cards { grid-template-columns:repeat(3,1fr); }
.requirement-check { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; margin-top:1rem; }
.requirement-check > div { padding:.65rem; border:2px solid #0f766e; border-radius:6px; background:#fff; color:#172026; }
.requirement-check strong { display:block; color:#075aa8; }
.ovn2-demo { display:grid; grid-template-columns:minmax(13rem,.42fr) minmax(0,1.58fr); gap:.8rem; margin-top:.75rem; }
.ovn2-controls,.ovn2-stage { padding:.7rem; border:1px solid var(--slide-border); border-radius:7px; background:#fff; }
.ovn2-controls { display:grid; gap:.55rem; align-content:start; color:#172026; }
.ovn2-controls button { padding:.55rem .7rem; border:0; border-radius:5px; background:#075aa8; color:#fff; font:inherit; font-weight:800; cursor:pointer; }
.ovn2-controls button[aria-pressed="true"] { outline:4px solid #9dc1ff; }
.ovn2-controls p,.ovn2-controls code { margin:.1rem 0; color:#172026; font-size:.82rem; line-height:1.35; }
.ovn2-stage { min-width:0; overflow:hidden; background:#eef4f7; }
.ovn2-page { padding:.8rem; background:#fff; color:#172026; font-family:"Times New Roman",serif; }
.ovn2-page h3 { margin:0 0 .6rem; color:#172026; font-size:1.3rem; }
.ovn2-page h4 { margin:0 0 .45rem; color:#172026; }
.ovn2-page p { margin:.35rem 0; color:#172026; font-size:.72rem; line-height:1.35; }
.ovn2-page img { display:block; width:100%; max-height:7rem; object-fit:cover; background:#fecaca; }
.ovn2-articles { display:block; }
.ovn2-article { padding:.65rem; }
.ovn2-page a { color:#0000ee; }
.ovn2-page footer { padding:.6rem; }
.ovn2-page.is-after { background:#f3f0dc; color:#000; font-family:Verdana,sans-serif; }
.ovn2-page.is-after .ovn2-articles { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.ovn2-page.is-after .ovn2-article,.ovn2-page.is-after footer { background:#d7edf1; }
.ovn2-page.is-after .ovn2-article { border-radius:5px; }
.ovn2-page.is-after a { color:#075985; text-decoration:none; }
.ovn2-page.is-after a:hover { text-decoration:underline; }
.ovn2-page.is-after footer { margin-top:.8rem; }
.validation-flow { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.65rem; margin-top:1rem; }
.validation-step { padding:.7rem; border:2px solid #0f766e; border-radius:6px; background:#fff; color:#172026; text-align:center; }
.validation-step strong { display:block; color:#075aa8; }
.web-role-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.7rem; margin-top:1rem; }
.web-role { min-height:9rem; display:grid; place-content:center; gap:.35rem; padding:.8rem; border:2px solid #0f766e; border-radius:7px; background:#fff; color:#172026; text-align:center; }
.web-role strong { color:#075aa8; font-size:1.2rem; }
.js-interactive { display:grid; grid-template-columns:minmax(13rem,.45fr) minmax(0,1.55fr); gap:.8rem; margin-top:.8rem; }
.js-controls,.js-stage { padding:.75rem; border:1px solid var(--slide-border); border-radius:7px; background:#fff; }
.js-controls { display:grid; gap:.55rem; align-content:start; color:#172026; }
.js-controls button { padding:.6rem .8rem; border:0; border-radius:5px; background:#075aa8; color:#fff; font:inherit; font-weight:800; cursor:pointer; }
.js-controls code,.js-controls p { margin:.1rem 0; color:#172026; font-size:.8rem; line-height:1.35; white-space:pre-wrap; overflow-wrap:anywhere; }
.js-stage { min-width:0; background:#eef4f7; }
.js-sample-page { min-height:11rem; display:grid; place-content:center; gap:.75rem; padding:1rem; background:#fff; color:#172026; text-align:center; }
.js-sample-page h3,.js-sample-page p { margin:0; color:#172026; }
.js-sample-page button { justify-self:center; padding:.6rem .8rem; border:0; border-radius:5px; background:#0f766e; color:#fff; font:inherit; font-weight:800; cursor:pointer; }
.console-demo { overflow:hidden; border:1px solid #94a3b8; border-radius:7px; background:#fff; color:#172026; }
.console-tabs { display:flex; gap:.25rem; padding:.4rem .55rem 0; border-bottom:1px solid #cbd5e1; background:#f8fafc; }
.console-tab { padding:.35rem .55rem; color:#475569; font-size:.75rem; font-weight:800; }
.console-tab.is-active { border:1px solid #cbd5e1; border-bottom-color:#fff; border-radius:5px 5px 0 0; background:#fff; color:#172026; }
.console-body { min-height:8rem; padding:.65rem; background:#fff; font:.8rem/1.4 "SFMono-Regular",Consolas,monospace; }
.console-line { padding:.3rem 0; border-bottom:1px solid #e2e8f0; color:#172026; }
.console-line.is-error { color:#b91c1c; background:#fef2f2; }
.dom-tree { display:grid; gap:.55rem; margin-top:1rem; text-align:center; }
.dom-node { justify-self:center; min-width:9rem; padding:.55rem .75rem; border:2px solid #0f766e; border-radius:6px; background:#fff; color:#172026; font-weight:800; }
.dom-children { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.65rem; }
.dom-children .dom-node { width:100%; min-width:0; }
.selector-targets { display:grid; gap:.55rem; }
.selector-target { padding:.65rem; border:3px solid transparent; border-radius:5px; background:#f8fafc; color:#172026; }
.selector-target.is-found { border-color:#e67e00; background:#fff1d6; }
.dom-box { padding:1rem; border:3px solid #94a3b8; border-radius:7px; background:#fff; color:#172026; transition:background 120ms ease,border-color 120ms ease; }
.dom-box.is-active { border-color:#0f766e; background:#ccfbf1; }
.event-flow { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.65rem; margin-top:1rem; }
.event-step { display:grid; place-content:center; min-height:7rem; padding:.7rem; border:2px solid #0f766e; border-radius:6px; background:#fff; color:#172026; text-align:center; }
.event-step strong { display:block; color:#075aa8; }
.form-lab { display:grid; grid-template-columns:minmax(13rem,.48fr) minmax(0,1.52fr); gap:.8rem; margin-top:.75rem; }
.form-lab-info,.form-lab-stage { padding:.75rem; border:1px solid var(--slide-border); border-radius:7px; background:#fff; }
.form-lab-info { display:grid; gap:.5rem; align-content:start; color:#172026; }
.form-lab-info code,.form-lab-info p { margin:.1rem 0; color:#172026; font-size:.78rem; line-height:1.35; white-space:pre-wrap; overflow-wrap:anywhere; }
.form-lab-stage { min-width:0; background:#eef4f7; }
.form-lab-form { display:grid; gap:.6rem; padding:.8rem; border:1px solid #cbd5e1; border-radius:6px; background:#fff; color:#172026; }
.form-lab-form label { display:grid; gap:.25rem; color:#172026; font-size:.82rem; font-weight:800; }
.form-lab-form input,.form-lab-form textarea,.form-lab-form select { width:100%; padding:.55rem; border:1px solid #94a3b8; border-radius:5px; background:#fff; color:#172026; font:inherit; }
.form-lab-form button,.form-lab-info button { justify-self:start; padding:.55rem .75rem; border:0; border-radius:5px; background:#075aa8; color:#fff; font:inherit; font-weight:800; cursor:pointer; }
.form-feedback { margin:0; padding:.55rem; border:2px solid #94a3b8; border-radius:5px; background:#f8fafc; color:#172026; font-size:.82rem; }
.form-feedback.is-ok { border-color:#0f766e; background:#ccfbf1; }
.form-feedback.is-error { border-color:#be123c; background:#ffe4e6; }
.submit-compare { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; margin-top:1rem; }
.submit-choice { padding:.75rem; border:2px solid #0f766e; border-radius:6px; background:#fff; color:#172026; }
.submit-choice strong { display:block; color:#075aa8; }
.interaction-lab { display:grid; grid-template-columns:minmax(13rem,.45fr) minmax(0,1.55fr); gap:.8rem; margin-top:.75rem; }
.interaction-info,.interaction-stage { padding:.75rem; border:1px solid var(--slide-border); border-radius:7px; background:#fff; }
.interaction-info { display:grid; gap:.5rem; align-content:start; color:#172026; }
.interaction-info code,.interaction-info p { margin:.1rem 0; color:#172026; font-size:.78rem; line-height:1.35; white-space:pre-wrap; overflow-wrap:anywhere; }
.interaction-stage { min-width:0; background:#eef4f7; }
.interaction-page { padding:.8rem; background:#fff; color:#172026; }
.interaction-page button,.interaction-info button { padding:.55rem .75rem; border:0; border-radius:5px; background:#075aa8; color:#fff; font:inherit; font-weight:800; cursor:pointer; }
.demo-menu { display:none; gap:.5rem; margin-top:.65rem; padding:.7rem; border:2px solid #0f766e; border-radius:5px; background:#ccfbf1; }
.demo-menu.is-open { display:grid; }
.demo-menu a { color:#075985; }
.interaction-panel-demo { display:none; margin-top:.7rem; padding:.8rem; border:2px solid #0f766e; border-radius:5px; background:#ccfbf1; color:#172026; }
.interaction-panel-demo.active { display:block; }
.aria-state { padding:.65rem; border:2px solid #94a3b8; border-radius:5px; background:#f8fafc; color:#172026; font-family:"SFMono-Regular",Consolas,monospace; }
.component-choice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; margin-top:1rem; }
.component-choice { min-height:8rem; display:grid; place-content:center; gap:.35rem; padding:.75rem; border:2px solid #0f766e; border-radius:6px; background:#fff; color:#172026; text-align:center; }
.component-choice strong { color:#075aa8; font-size:1.05rem; }
.component-demo-panel { display:none; margin-top:.65rem; padding:.75rem; border:2px solid #0f766e; border-radius:5px; background:#ccfbf1; color:#172026; }
.component-demo-panel.is-open { display:block; }
.component-plan { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.7rem; margin-top:1rem; }
.component-plan-step { padding:.75rem; border:2px solid #0f766e; border-radius:6px; background:#fff; color:#172026; text-align:center; }
.component-plan-step strong { display:block; color:#075aa8; }
.format-kind-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; margin-top:1rem; }
.format-kind { min-height:10rem; display:grid; place-content:center; gap:.4rem; padding:.8rem; border:2px solid #0f766e; border-radius:7px; background:#fff; color:#172026; text-align:center; }
.format-kind strong { color:#075aa8; font-size:1.25rem; }
.format-badges { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
.format-badge { padding:.45rem .65rem; border-radius:999px; background:#ccfbf1; color:#172026; font-weight:800; }
.format-demo { display:grid; grid-template-columns:minmax(13rem,.45fr) minmax(0,1.55fr); gap:.8rem; margin-top:.75rem; }
.format-controls,.format-result { padding:.75rem; border:1px solid var(--slide-border); border-radius:7px; background:#fff; }
.format-controls { display:grid; gap:.55rem; align-content:start; color:#172026; }
.format-controls label { display:grid; gap:.25rem; font-size:.82rem; font-weight:800; }
.format-controls select { width:100%; padding:.5rem; font:inherit; }
.format-controls p { margin:.1rem 0; color:#172026; font-size:.82rem; line-height:1.35; }
.format-result { min-width:0; background:#eef4f7; }
.format-recommendation { min-height:10rem; display:grid; place-content:center; gap:.6rem; padding:1rem; border:2px solid #0f766e; border-radius:6px; background:#fff; color:#172026; text-align:center; }
.format-recommendation strong { color:#075aa8; font-size:1.5rem; }
.transparency-demo { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; margin-top:1rem; }
.transparency-box { min-height:9rem; display:grid; place-items:center; padding:.75rem; border:2px solid #0f766e; color:#172026; font-weight:800; text-align:center; }
.transparency-box.has-checker { background-color:#fff;background-image:linear-gradient(45deg,#cbd5e1 25%,transparent 25%),linear-gradient(-45deg,#cbd5e1 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#cbd5e1 75%),linear-gradient(-45deg,transparent 75%,#cbd5e1 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0; }
.format-table-slide { width:100%; border-collapse:collapse; background:#fff; color:#172026; }
.format-table-slide th,.format-table-slide td { padding:.5rem; border:1px solid #94a3b8; color:#172026; font-size:.78rem; text-align:left; }
.zoom-demo { display:grid; grid-template-columns:minmax(12rem,.38fr) minmax(0,1.62fr); gap:.8rem; margin-top:.7rem; }
.zoom-controls,.zoom-stage { padding:.7rem; border:1px solid var(--slide-border); border-radius:7px; background:#fff; }
.zoom-controls { display:grid; gap:.5rem; align-content:start; color:#172026; }
.zoom-controls label { display:grid; gap:.25rem; font-size:.82rem; font-weight:800; }
.zoom-controls input { width:100%; }
.zoom-controls p { margin:.1rem 0; color:#172026; font-size:.8rem; line-height:1.35; }
.zoom-stage { min-width:0; height:19rem; display:grid; place-items:center; overflow:hidden; background:#172026; }
.zoom-stage img { display:block; width:100%; height:100%; object-fit:contain; transform:scale(1); transition:transform 100ms linear; cursor:grab; touch-action:none; user-select:none; }
.zoom-stage img.is-dragging { cursor:grabbing; transition:none; }
.zoom-controls button { padding:.5rem .7rem; border:0; border-radius:5px; background:#075aa8; color:#fff; font:inherit; font-weight:800; cursor:pointer; }
.zoom-stage.raster-eye img { object-fit:cover; transform-origin:44% 27%; image-rendering:pixelated; }
.zoom-stage.svg-zoom { background:#fff; }
.zoom-stage.svg-zoom img { transform-origin:50% 50%; }
.image-size-demo { display:grid; grid-template-columns:minmax(13rem,.42fr) minmax(0,1.58fr); gap:.8rem; margin-top:.75rem; }
.image-size-controls,.image-size-stage { padding:.75rem; border:1px solid var(--slide-border); border-radius:7px; background:#fff; }
.image-size-controls { display:grid; gap:.55rem; align-content:start; color:#172026; }
.image-size-controls label { display:grid; gap:.25rem; font-size:.82rem; font-weight:800; }
.image-size-controls input { width:100%; }
.image-size-controls p,.image-size-controls code { margin:.1rem 0; color:#172026; font-size:.8rem; line-height:1.35; white-space:pre-wrap; }
.image-size-stage { min-width:0; overflow:hidden; background:#eef4f7; }
.pixel-width-visual { height:8rem; display:grid; place-items:center; border:2px solid #0f766e; border-radius:5px; background:#ccfbf1; color:#172026; font-weight:800; transition:width 120ms ease; }
.source-choice { display:grid; gap:.55rem; }
.source-choice img { display:block; width:100%; max-height:12rem; object-fit:contain; background:#fff; }
.source-readout { padding:.6rem; border:2px solid #0f766e; border-radius:5px; background:#ccfbf1; color:#172026; font-weight:800; }
.loading-flow { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.7rem; margin-top:1rem; }
.loading-step { min-height:8rem; display:grid; place-content:center; padding:.7rem; border:2px solid #0f766e; border-radius:6px; background:#fff; color:#172026; text-align:center; }
.loading-step strong { display:block; color:#075aa8; }
.network-table { width:100%; border-collapse:collapse; background:#fff; color:#172026; }
.network-table th,.network-table td { padding:.55rem; border:1px solid #94a3b8; color:#172026; font-size:.8rem; text-align:left; }

@media (max-width: 760px) {
  .two-column { grid-template-columns: 1fr; }
  .two-column.diagram-emphasis { grid-template-columns: 1fr; }
  .decision-simulator { grid-template-columns: 1fr; }
  .exercise-preview-page { grid-template-columns: 1fr; }
  .semantic-slide-grid { grid-template-columns: 1fr; }
  .semantic-slide-layout { grid-template-columns: 1fr; grid-template-areas: "header" "nav" "main" "aside" "footer"; }
  .form-simulator { grid-template-columns: 1fr; }
  .css-simulator { grid-template-columns: 1fr; }
  .design-demo { grid-template-columns: 1fr; }
  .color-picker-grid { grid-template-columns: 1fr; }
  .font-category-grid { grid-template-columns: 1fr; }
  .box-demo-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .specificity-scale { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .selector-playground { grid-template-columns: 1fr; }
  .ch-demo { grid-template-columns: 1fr; }
  .flex-demo-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .single-flex-demo { grid-template-columns: 1fr; }
  .item-flex-demo { grid-template-columns: 1fr; }
  .grid-interactive { grid-template-columns:1fr; }
  .grid-terms { grid-template-columns:1fr; }
  .responsive-interactive { grid-template-columns:1fr; }
  .mq-interactive { grid-template-columns:1fr; }
  .homepage-demo { grid-template-columns:1fr; }
  .requirement-check { grid-template-columns:1fr; }
  .ovn2-demo { grid-template-columns:1fr; }
  .validation-flow { grid-template-columns:1fr; }
  .web-role-grid { grid-template-columns:1fr; }
  .js-interactive { grid-template-columns:1fr; }
  .dom-children,.event-flow { grid-template-columns:1fr; }
  .form-lab,.submit-compare { grid-template-columns:1fr; }
  .interaction-lab { grid-template-columns:1fr; }
  .component-choice-grid,.component-plan { grid-template-columns:1fr; }
  .format-kind-grid,.format-demo,.transparency-demo { grid-template-columns:1fr; }
  .zoom-demo { grid-template-columns:1fr; }
  .image-size-demo,.loading-flow { grid-template-columns:1fr; }
  .presentation-topbar, .presentation-footer { align-items: flex-start; flex-direction: column; }
  .slide { min-height: calc(100vh - 9rem); padding: 1.5rem; }
  .slide p, .slide li { font-size: clamp(1.15rem, 4.3vw, 1.65rem); }
}