:root {
  --paper: #f7f5ef;
  --surface: #fffef9;
  --ink: #181914;
  --muted: #686b62;
  --line: #d9d7ce;
  --blue: #4259b8;
  --blue-soft: #e8ecff;
  --red: #be4f35;
  --red-soft: #fbe8e1;
  --green: #226b55;
  --green-soft: #e0f1e9;
  --amber: #9a651b;
  --amber-soft: #f8edcf;
  --charcoal: #20221e;
  --body: "Atkinson Hyperlegible", sans-serif;
  --display: "Bricolage Grotesque", sans-serif;
  --mono: "DM Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.workflow-post { max-width: 1080px; background: var(--paper); color: var(--ink); font-family: var(--body); }
.reading-progress { position: fixed; z-index: 100; inset: 0 0 auto; height: 3px; background: rgba(24, 25, 20, .1); }
.reading-progress span { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, var(--blue), var(--green), var(--red)); transform: scaleX(0); transform-origin: left; }
.skip-link { position: fixed; z-index: 110; top: .75rem; left: .75rem; padding: .65rem .85rem; color: white; background: var(--charcoal); transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0); }
.workflow-post header { padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.workflow-post .post { max-width: none; padding-top: clamp(3.25rem, 6vw, 5rem); }
.post-hero { max-width: 900px; }
.workflow-post h1 { max-width: 840px; margin-top: .8rem; font: 720 clamp(3rem, 6.2vw, 4.8rem)/.99 var(--display); letter-spacing: -.052em; }
.workflow-post article { max-width: 930px; margin-top: clamp(4rem, 8vw, 6.5rem); font-size: 1.08rem; }
.myth { max-width: 740px; margin: clamp(2rem, 4vw, 2.8rem) 0 1rem; font: 620 clamp(1.5rem, 2.7vw, 2.25rem)/1.16 var(--display); letter-spacing: -.03em; }
.myth span { display: block; margin-bottom: .65rem; color: var(--red); font: 500 .63rem/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.stakes, .hero-promise { max-width: 660px; margin: .9rem 0 0; color: var(--muted); font-size: clamp(1.08rem, 1.6vw, 1.23rem); line-height: 1.6; }
.stakes { color: var(--ink); font-weight: 700; }
.story-start { display: inline-flex; align-items: center; gap: .6rem; margin-top: 1.55rem; padding: .78rem 1rem; color: white; border-radius: 999px; background: var(--charcoal); font-weight: 700; text-decoration: none; }
.story-start:hover { background: var(--blue); }

.lesson { margin: 0; padding: clamp(4.2rem, 8vw, 7rem) 0 0; border: 0; }
.opening-lesson { padding-top: 0; }
.section-copy { max-width: 720px; }
.section-index { display: flex; align-items: center; gap: .5rem; margin: 0 0 .65rem; color: var(--blue); font: 500 .62rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.section-index::before { content: ""; width: 22px; height: 2px; background: currentColor; }
.workflow-post article h2 { max-width: 760px; margin: 0; scroll-margin-top: 2rem; font: 680 clamp(2rem, 4.3vw, 3.6rem)/1.03 var(--display); letter-spacing: -.045em; }
.section-copy > p:last-child { max-width: 630px; margin: 1rem 0 0; color: var(--muted); font-size: 1.06rem; line-height: 1.6; }
.reading { max-width: 680px; margin-top: 2rem; }
.reading p { margin: 0 0 1rem; color: #383b34; line-height: 1.7; }
.reading p:last-child { margin-bottom: 0; }
.reading code, .deep-note code { padding: .1rem .28rem; background: #e9e7df; font: .82em var(--mono); }
.keep-rule { max-width: 720px; margin: 1.7rem 0 0; padding: 1rem 1.1rem; border-left: 3px solid var(--green); background: var(--green-soft); font-weight: 700; line-height: 1.55; }
.keep-rule span { display: block; margin-bottom: .28rem; color: var(--green); font: 500 .57rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.open-thread { max-width: 680px; margin: 1.5rem 0 0; padding-left: 1rem; color: var(--blue); border-left: 1px solid var(--blue); font-style: italic; line-height: 1.6; }
.deep-note { max-width: 760px; margin-top: 1.5rem; border-block: 1px solid var(--line); }
.deep-note summary { padding: 1rem 0; color: var(--ink); font-weight: 700; cursor: pointer; }
.deep-note > p { max-width: 680px; color: #45483f; line-height: 1.62; }
.deep-note[open] { padding-bottom: 1rem; }

button { font-family: inherit; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.run-button, .reset-button { min-height: 44px; padding: .64rem .92rem; border: 1px solid var(--charcoal); font-weight: 700; cursor: pointer; }
.run-button { color: white; background: var(--charcoal); }
.run-button:hover { background: var(--blue); border-color: var(--blue); }
.reset-button { color: var(--ink); background: transparent; }
.reset-button:hover { background: white; }
.run-button:disabled, .reset-button:disabled { opacity: .4; cursor: default; }
.lab-controls { display: flex; gap: .55rem; align-items: center; }

/* Opening harness lab */
.harness-lab { display: grid; grid-template-columns: .72fr 1.28fr; gap: 1rem; max-width: 900px; margin-top: 2rem; padding: clamp(1rem, 3vw, 1.5rem); border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: 8px 8px 0 #dedbd2; }
.harness-before { display: grid; align-content: center; gap: .45rem; min-height: 170px; padding: 1.15rem; color: #603628; border: 1px dashed #d79b87; border-radius: 12px; background: var(--red-soft); }
.harness-before span, .harness-result span { font: .55rem/1.5 var(--mono); text-transform: uppercase; }
.harness-before strong { font: 650 1.35rem/1.05 var(--display); }
.harness-before small { color: #765247; line-height: 1.45; }
.harness-rail { display: grid; gap: .45rem; }
.harness-rail > div { display: grid; grid-template-columns: auto 1fr; gap: .12rem .7rem; align-items: center; min-height: 62px; padding: .7rem .85rem; border: 1px solid var(--line); border-radius: 9px; background: white; opacity: .35; transition: opacity .2s, transform .2s, border-color .2s, background .2s; }
.harness-rail span { grid-row: span 2; color: var(--muted); font: .53rem var(--mono); }
.harness-rail strong { font: 650 .95rem var(--display); }
.harness-rail small { color: var(--muted); font-size: .68rem; }
.harness-rail > div.is-active { opacity: 1; border-color: var(--blue); background: var(--blue-soft); transform: translateX(5px); }
.harness-rail > div.is-complete { opacity: 1; border-color: #b6d8c9; background: var(--green-soft); }
.harness-result { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 1rem; padding: .85rem 1rem; color: #d9ddcf; border-radius: 9px; background: var(--charcoal); }
.harness-result strong { font: 650 .95rem var(--display); }
.harness-result.is-complete strong { color: #9ed9c1; }
.harness-result span { color: #aeb3a7; text-align: right; }
.harness-lab > .lab-controls { grid-column: 1 / -1; padding-top: .2rem; }

/* Prediction gates */
.prediction { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; max-width: 850px; margin-top: 2rem; padding: clamp(1rem, 3vw, 1.35rem); border: 1px solid var(--line); border-radius: 14px; background: white; }
.prediction pre { grid-row: span 2; margin: 0; padding: 1rem; overflow-x: auto; color: #cbd0c0; border-radius: 9px; background: var(--charcoal); font: .7rem/1.7 var(--mono); }
.prediction pre code { padding: 0; background: transparent; }
.prediction fieldset { display: grid; gap: .48rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.prediction legend { margin-bottom: .65rem; font: 650 1rem var(--display); }
.prediction fieldset button { display: grid; grid-template-columns: auto 1fr; gap: .6rem; min-height: 43px; padding: .62rem .72rem; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; background: #faf9f4; text-align: left; cursor: pointer; }
.prediction fieldset button:hover { border-color: var(--blue); }
.prediction fieldset button[aria-pressed="true"] { border-color: var(--blue); background: var(--blue-soft); }
.prediction fieldset button:disabled { cursor: default; }
.prediction fieldset code { padding: 0; background: transparent; font: .65rem var(--mono); }
.answer { grid-column: 2; padding-top: .8rem; border-top: 1px solid var(--line); }
.answer p { margin: 0; line-height: 1.55; }
.answer-result { margin-bottom: .35rem !important; color: var(--green); font: 700 .65rem var(--mono); text-transform: uppercase; }

/* Context lab */
.context-lab { max-width: 880px; margin-top: 2rem; padding: clamp(1rem, 3vw, 1.5rem); border: 1px solid var(--line); border-radius: 16px; background: var(--charcoal); }
.context-meter { display: grid; grid-template-columns: 1fr auto; gap: .8rem; align-items: center; margin-bottom: 1rem; color: white; }
.context-meter > div { height: 9px; overflow: hidden; border-radius: 6px; background: #3b3e37; }
.context-meter > div span { display: block; width: 0; height: 100%; background: var(--green-soft); transition: width .25s; }
.context-meter strong { font: .59rem var(--mono); }
.context-items { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.context-items button { display: grid; gap: .18rem; min-height: 100px; padding: .8rem; color: #e9ebdf; border: 1px solid #464940; border-radius: 9px; background: #2a2c27; text-align: left; cursor: pointer; }
.context-items button:hover { border-color: #8d9282; }
.context-items button[aria-pressed="true"][data-context-item="useful"] { color: #d8f3e5; border-color: #70b89c; background: #263b33; }
.context-items button[aria-pressed="true"][data-context-item="noise"] { color: #f9d6cb; border-color: #cc755b; background: #412d27; }
.context-items span { color: #a5aa9d; font: .52rem var(--mono); text-transform: uppercase; }
.context-items strong { font: 650 .92rem var(--display); }
.context-items small { color: #b8bcae; font-size: .7rem; line-height: 1.4; }
.context-status { margin: .85rem 0; color: #cdd1c3; font: .63rem/1.5 var(--mono); }
.context-lab .reset-button { color: white; border-color: #72776a; }
.placement-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.placement-grid p { display: grid; gap: .25rem; margin: 0; padding: .8rem; background: white; }
.placement-grid strong { color: var(--blue); }
.placement-grid span { color: var(--muted); font-size: .88rem; line-height: 1.5; }

/* Role separation and hooks */
.role-lab { max-width: 860px; margin-top: 2rem; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: white; }
.role-tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
.role-tabs button { min-height: 50px; color: var(--muted); border: 0; border-right: 1px solid var(--line); background: #f8f7f1; font: 600 .68rem var(--mono); cursor: pointer; }
.role-tabs button:last-child { border-right: 0; }
.role-tabs button[aria-selected="true"] { color: var(--ink); background: var(--amber-soft); }
.role-panel { display: grid; grid-template-columns: repeat(3, 1fr); }
.role-panel div { display: grid; align-content: start; gap: .45rem; min-height: 145px; padding: 1rem; border-right: 1px solid var(--line); }
.role-panel div:last-child { border-right: 0; }
.role-panel span { color: var(--blue); font: .54rem var(--mono); text-transform: uppercase; }
.role-panel strong { font-size: .92rem; line-height: 1.48; }
.role-fallback { display: grid; gap: .55rem; max-width: 860px; margin-top: 1rem; }
.role-fallback p { display: grid; gap: .3rem; margin: 0; padding: .9rem; border: 1px solid var(--line); background: white; }
.role-fallback span { color: var(--muted); line-height: 1.5; }
.hook-rail { display: grid; grid-template-columns: repeat(3, 1fr); gap: .65rem; max-width: 860px; margin-top: 1.25rem; }
.hook-rail div { display: grid; gap: .35rem; padding: 1rem; border-top: 3px solid var(--blue); background: white; }
.hook-rail div:nth-child(2) { border-color: var(--red); }
.hook-rail div:nth-child(3) { border-color: var(--green); }
.hook-rail span { color: var(--muted); font: .54rem var(--mono); text-transform: uppercase; }
.hook-rail strong { font: 650 1rem var(--display); }
.hook-rail small { color: var(--muted); line-height: 1.45; }

/* Test map */
.test-map { display: grid; grid-template-columns: repeat(3, 1fr); gap: .65rem; max-width: 850px; margin-top: 1rem; }
.test-map div { display: grid; gap: .25rem; padding: 1rem; border-top: 3px solid var(--line); background: rgba(255, 255, 255, .55); }
.test-map div.is-current { border-color: var(--blue); background: var(--blue-soft); }
.test-map span { color: var(--muted); font: .54rem var(--mono); text-transform: uppercase; }
.test-map strong { font: 650 1rem var(--display); }
.test-map small { color: var(--muted); line-height: 1.4; }

/* TDD lab */
.tdd-lab { max-width: 850px; margin-top: 2rem; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: white; }
.tdd-tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
.tdd-tabs button { min-height: 48px; color: var(--muted); border: 0; border-right: 1px solid var(--line); background: transparent; font: 600 .68rem var(--mono); cursor: pointer; }
.tdd-tabs button:last-child { border-right: 0; }
.tdd-tabs button.is-active { color: var(--ink); background: var(--amber-soft); }
.tdd-tabs button[data-tdd-step="0"].is-active { color: var(--red); background: var(--red-soft); }
.tdd-tabs button[data-tdd-step="1"].is-active { color: var(--green); background: var(--green-soft); }
.tdd-code { min-height: 250px; padding: 1.2rem; color: #d3d6cc; background: var(--charcoal); }
.tdd-code pre { margin: 0; overflow-x: auto; font: .7rem/1.7 var(--mono); }
.tdd-code code { padding: 0; background: transparent; }
.tdd-result { padding: .8rem 1.2rem; color: var(--red); border-top: 1px solid #393c36; background: var(--charcoal); font: .62rem var(--mono); }

/* Device console */
.device-console { max-width: 820px; margin-top: 2rem; overflow: hidden; color: #d9ddcf; border-radius: 15px; background: var(--charcoal); box-shadow: 8px 8px 0 #c9c6bd; }
.device-console-head { display: flex; justify-content: space-between; padding: .85rem 1rem; border-bottom: 1px solid #3a3d36; font: .6rem var(--mono); }
.device-console-head i { width: 9px; height: 9px; border-radius: 50%; background: #6c7066; }
.device-console-head i.is-live { background: #77c7a6; box-shadow: 0 0 0 5px rgba(119, 199, 166, .12); }
.device-console ol { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; list-style: none; }
.device-console li { display: grid; grid-template-columns: auto 1fr; gap: .45rem; align-items: start; min-height: 75px; padding: .8rem; color: #8f9488; border-right: 1px solid #3a3d36; font-size: .72rem; line-height: 1.4; }
.device-console li:last-child { border-right: 0; }
.device-console li span { color: #71766b; font: .55rem var(--mono); }
.device-console li.is-active { color: white; background: #2d302a; }
.device-console li.is-complete { color: #9ed9c1; }
.device-console pre { min-height: 110px; margin: 0; padding: 1rem; border-top: 1px solid #3a3d36; white-space: pre-wrap; font: .68rem/1.65 var(--mono); }
.device-console pre code { padding: 0; background: transparent; }
.device-console .lab-controls { padding: .85rem 1rem; border-top: 1px solid #3a3d36; }
.device-console .reset-button { color: white; border-color: #676b61; }
.sr-status { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
.tool-grid div { padding: 1rem; background: white; }
.tool-grid strong { color: var(--blue); font: 650 1.05rem var(--display); }
.tool-grid p { margin: .35rem 0 0; color: var(--muted); font-size: .86rem; line-height: 1.5; }

/* Scaling */
.scale-ladder { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; max-width: 880px; margin-top: 2rem; }
.scale-ladder div { display: grid; gap: .45rem; min-height: 180px; padding: 1.1rem; border: 1px solid var(--line); border-radius: 13px; background: white; }
.scale-ladder div:nth-child(2) { border-color: #bdc8ee; background: var(--blue-soft); }
.scale-ladder div:nth-child(3) { color: #edf0e6; border-color: var(--charcoal); background: var(--charcoal); }
.scale-ladder span { color: var(--blue); font: .55rem var(--mono); text-transform: uppercase; }
.scale-ladder div:nth-child(3) span { color: #a8b5ed; }
.scale-ladder strong { font: 650 1.35rem var(--display); }
.scale-ladder p { margin: 0; color: var(--muted); line-height: 1.5; }
.scale-ladder div:nth-child(3) p { color: #b7bcae; }

/* Token section */
.token-truth { display: grid; grid-template-columns: .75fr 1.25fr; gap: 1rem; max-width: 850px; margin-top: 2rem; }
.token-truth > div { padding: 1.2rem; border: 1px solid var(--line); border-radius: 13px; background: white; }
.token-truth > div:first-child { color: #5d382e; border-color: #e8b9a8; background: var(--red-soft); }
.token-truth > div:last-child { color: #224b3e; border-color: #b6d8c9; background: var(--green-soft); }
.token-truth span { display: block; margin-bottom: .4rem; font: .55rem var(--mono); text-transform: uppercase; }
.token-truth strong { font: 650 1.25rem var(--display); }
.token-truth p { margin: .75rem 0 0; line-height: 1.55; }
.token-truth ul { margin: .75rem 0 0; padding-left: 1.1rem; line-height: 1.65; }
.waste-map { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; max-width: 850px; margin-top: 1rem; }
.waste-map div { display: grid; gap: .3rem; min-height: 95px; padding: .85rem; border: 1px solid var(--line); background: rgba(255, 255, 255, .58); }
.waste-map span { color: var(--blue); font: .53rem var(--mono); text-transform: uppercase; }
.waste-map strong { font-size: .85rem; line-height: 1.4; }

/* Sticker */
.workflow-sticker { max-width: 900px; margin: 2rem 0 0; padding: clamp(1.2rem, 3.5vw, 2.2rem); color: #eef1e8; border-radius: 18px; background: var(--charcoal); box-shadow: 10px 10px 0 var(--blue); }
.workflow-sticker figcaption { margin-bottom: 1.4rem; color: #aeb6d8; font: .6rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.loop-ring { display: grid; grid-template-columns: repeat(4, 1fr); gap: .55rem; }
.loop-ring div { position: relative; min-height: 112px; padding: .85rem; border: 1px solid #44483f; border-radius: 9px; background: #292c27; }
.loop-ring div::after { content: "→"; position: absolute; z-index: 2; top: 50%; right: -.48rem; color: #96a6eb; transform: translateY(-50%); }
.loop-ring div:nth-child(4)::after { content: "↓"; top: auto; right: 50%; bottom: -.75rem; transform: translateX(50%); }
.loop-ring div:nth-child(n+5) { grid-row: 2; }
.loop-ring div:nth-child(5) { grid-column: 4; }
.loop-ring div:nth-child(6) { grid-column: 3; }
.loop-ring div:nth-child(7) { grid-column: 2; }
.loop-ring div:nth-child(8) { grid-column: 1; }
.loop-ring div:nth-child(n+5)::after { content: "←"; left: -.48rem; right: auto; }
.loop-ring div:nth-child(8)::after { content: "↺"; left: .8rem; top: -.55rem; color: #82c7aa; transform: none; }
.loop-ring span { display: block; margin-bottom: .55rem; color: #8fa1ed; font: .53rem var(--mono); }
.loop-ring strong { display: block; font: 650 .95rem var(--display); }
.loop-ring small { display: block; margin-top: .3rem; color: #aeb3a7; font-size: .64rem; }
.workflow-sticker blockquote { max-width: 680px; margin: 2rem 0 0; color: white; font: 620 clamp(1.45rem, 3vw, 2.25rem)/1.15 var(--display); letter-spacing: -.03em; }
.prompt-card { max-width: 760px; margin-top: 2.2rem; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; }
.prompt-card > span { display: block; padding: .75rem 1rem; color: var(--muted); background: white; font: .57rem var(--mono); text-transform: uppercase; }
.prompt-card pre { margin: 0; padding: 1rem; overflow-x: auto; color: #d4d8cd; background: var(--charcoal); font: .7rem/1.7 var(--mono); }
.prompt-card code { padding: 0; background: transparent; }
.final-reading { padding-bottom: 2rem; }

/* Sources */
.sources { padding-bottom: 3rem; }
.sources ul { display: grid; gap: .65rem; max-width: 760px; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.sources li { padding-bottom: .65rem; color: var(--muted); border-bottom: 1px solid var(--line); line-height: 1.55; }
.sources a { color: var(--ink); font-weight: 700; }

/* No JavaScript */
.no-js [hidden] { display: block !important; }
.no-js .prediction fieldset, .no-js .lab-controls, .no-js .context-lab .reset-button, .no-js .tdd-tabs, .no-js .role-lab { display: none; }
.no-js .harness-rail > div { opacity: 1; }
.no-js .context-items button { color: #e9ebdf; opacity: 1; }
.no-js .tdd-code::before { content: "Write a failing interaction test, make the smallest fix, then refactor while the test stays green."; }
.no-js .tdd-result::before { content: "The static path preserves the complete workflow."; }
.no-js .device-console li { color: #9ed9c1; }

@media (max-width: 760px) {
  body.workflow-post { padding-inline: 1rem; }
  .workflow-post h1 { font-size: clamp(2.85rem, 13vw, 4.4rem); }
  .harness-lab, .prediction, .context-items, .test-map, .tool-grid, .placement-grid, .token-truth, .hook-rail, .scale-ladder, .waste-map { grid-template-columns: 1fr; }
  .harness-lab { box-shadow: 5px 5px 0 #dedbd2; }
  .harness-result, .harness-lab > .lab-controls { grid-column: auto; }
  .harness-result { align-items: flex-start; flex-direction: column; }
  .harness-result span { text-align: left; }
  .prediction pre { grid-row: auto; }
  .answer { grid-column: auto; }
  .role-panel { grid-template-columns: 1fr; }
  .role-panel div { min-height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .role-panel div:last-child { border-bottom: 0; }
  .device-console ol { grid-template-columns: 1fr 1fr; }
  .device-console li:nth-child(2) { border-right: 0; }
  .device-console li { border-bottom: 1px solid #3a3d36; }
  .loop-ring { grid-template-columns: 1fr 1fr; }
  .loop-ring div, .loop-ring div:nth-child(n+5), .loop-ring div:nth-child(5), .loop-ring div:nth-child(6), .loop-ring div:nth-child(7), .loop-ring div:nth-child(8) { grid-column: auto; grid-row: auto; }
  .loop-ring div::after, .loop-ring div:nth-child(4)::after, .loop-ring div:nth-child(n+5)::after, .loop-ring div:nth-child(8)::after { content: "↓"; top: auto; left: 50%; right: auto; bottom: -.78rem; transform: translateX(-50%); }
  .workflow-sticker { box-shadow: 6px 6px 0 var(--blue); }
}

@media (max-width: 430px) {
  .workflow-post article { font-size: 1.02rem; }
  .myth { font-size: 1.48rem; }
  .context-items button { min-height: 92px; }
  .role-tabs { grid-template-columns: 1fr; }
  .role-tabs button { border-right: 0; border-bottom: 1px solid var(--line); }
  .tdd-tabs button { padding-inline: .3rem; font-size: .58rem; }
  .tdd-code { min-height: 290px; padding: .9rem; }
  .device-console ol, .loop-ring { grid-template-columns: 1fr; }
  .device-console li { border-right: 0; }
  .lab-controls { align-items: stretch; flex-direction: column; }
  .run-button, .reset-button { width: 100%; }
}

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