:root {
  --page: #090d10;
  --panel: #11171b;
  --panel-raised: #171f24;
  --panel-soft: #0d1215;
  --line: #344047;
  --line-soft: #242e34;
  --ink: #f4f1e8;
  --muted: #a5afb4;
  --quiet: #727e84;
  --gold: #f3ca61;
  --good: #72d49a;
  --bad: #f47f8a;
  --phy: #f3ca61;
  --mac: #6bd5c9;
  --nwk: #87aff3;
  --security: #f18a94;
  --aps: #bf98e8;
  --zdo: #eda76d;
  --zcl: #b5d978;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { min-width: 320px; color: var(--ink); background: var(--page); font: 14px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
button, input, select { color: inherit; font: inherit; }
button, input, select { border: 1px solid var(--line); border-radius: 7px; background: var(--panel-raised); }
button { cursor: pointer; }
button:hover, button:focus-visible, input:focus-visible, select:focus-visible { border-color: var(--gold); outline: 2px solid #f3ca6138; outline-offset: 2px; }
button:disabled { cursor: not-allowed; opacity: .38; }

.course-shell { display: grid; grid-template-rows: 58px minmax(0, 1fr); width: 100%; height: 100dvh; overflow: hidden; }
.topbar { display: grid; grid-template-columns: max-content minmax(260px, 1fr) max-content max-content; align-items: center; gap: 18px; min-width: 0; padding: 8px 16px; border-bottom: 1px solid var(--line); background: #0c1114; }
.brand { color: var(--gold); font-size: 11px; font-weight: 900; letter-spacing: .08em; text-decoration: none; }
.course-name { min-width: 0; }
.course-name b, .course-name span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.course-name b { font: 750 14px/1.2 system-ui, sans-serif; }
.course-name span { margin-top: 2px; color: var(--muted); font-size: 9px; }
.course-totals { text-align: right; }
.course-totals b, .course-totals span { display: block; }
.course-totals b { color: var(--ink); font-size: 10px; }
.course-totals span { color: var(--muted); font-size: 8px; }
.toolbox-button { min-height: 36px; padding: 6px 11px; color: var(--gold); background: transparent; font-size: 9px; font-weight: 900; letter-spacing: .05em; }
.mobile-chapter { display: none; }

.course-main { display: grid; grid-template-columns: 218px minmax(0, 1fr); min-width: 0; min-height: 0; }
.chapter-rail { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; padding: 13px 10px 10px; border-right: 1px solid var(--line); background: #0c1114; }
.chapter-rail > header { display: flex; align-items: center; justify-content: space-between; padding: 0 7px 10px; color: var(--muted); font-size: 8px; letter-spacing: .06em; }
.chapter-rail ol { display: grid; align-content: start; gap: 4px; margin: 0; padding: 0; overflow: hidden; list-style: none; }
.chapter-rail button { display: grid; grid-template-columns: 27px minmax(0, 1fr); align-items: center; width: 100%; min-height: 39px; padding: 5px 8px; color: var(--muted); background: transparent; text-align: left; }
.chapter-rail button i { display: grid; place-items: center; width: 21px; height: 21px; border: 1px solid #566168; border-radius: 50%; font-size: 7px; font-style: normal; }
.chapter-rail button span { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.chapter-rail button.active { border-color: var(--gold); color: var(--ink); background: #262116; }
.chapter-rail button.active i { border-color: var(--gold); color: #171208; background: var(--gold); }
.chapter-rail button.complete i { border-color: var(--good); color: #07120b; background: var(--good); }
.chapter-rail > footer { margin: 9px 3px 0; padding: 9px; border: 1px solid var(--line-soft); border-radius: 7px; }
.chapter-rail > footer span, .chapter-rail > footer small { display: block; }
.chapter-rail > footer span { color: var(--gold); font-size: 8px; font-weight: 900; }
.chapter-rail > footer small { margin-top: 3px; color: var(--quiet); font-size: 7px; }

.learning-stage { display: grid; grid-template-rows: minmax(0, 1fr) 66px; min-width: 0; min-height: 0; background: #0b1013; }
.workspace { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr) minmax(165px, .46fr); gap: 10px; min-width: 0; min-height: 0; padding: 10px; overflow: hidden; }
.workspace-panel { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); transition: border-color .22s ease, background .22s ease, opacity .22s ease, transform .22s ease; }
.workspace-panel:hover { border-color: #4c5960; }
.panel-heading { display: flex; align-items: center; gap: 8px; flex: none; min-height: 39px; padding: 7px 10px; border-bottom: 1px solid var(--line-soft); background: var(--panel-raised); }
.panel-heading > span, .panel-heading > div > span { flex: none; color: var(--gold); font-size: 7px; font-weight: 900; letter-spacing: .08em; }
.panel-heading > b, .panel-heading > div { min-width: 0; }
.panel-heading > b, .panel-heading > div > b { display: block; overflow: hidden; font-size: 8px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.panel-heading > div { flex: 1; }
.panel-heading > button { flex: none; min-height: 25px; padding: 3px 7px; color: var(--muted); background: transparent; font-size: 7px; }
.panel-heading > button[data-panel-focus] { margin-left: auto; }
.workspace[data-focus="concept"] .explanation-panel button[data-panel-focus],
.workspace[data-focus="network"] .topology-panel button[data-panel-focus],
.workspace[data-focus="exchange"] .exchange-panel button[data-panel-focus],
.workspace[data-focus="packet"] .packet-panel button[data-panel-focus] { display: none; }

.workspace[data-focus="concept"] .explanation-panel,
.workspace[data-focus="network"] .topology-panel,
.workspace[data-focus="exchange"] .exchange-panel,
.workspace[data-focus="packet"] .packet-panel { grid-column: 1 / 9; grid-row: 1 / 3; border-color: #68757b; background: #12191d; animation: focus-in .28s ease-out; }
@keyframes focus-in { from { opacity: .72; transform: scale(.988); } }
.workspace[data-focus="concept"] .topology-panel,
.workspace[data-focus="network"] .explanation-panel,
.workspace[data-focus="exchange"] .explanation-panel,
.workspace[data-focus="packet"] .explanation-panel { grid-column: 9 / 13; grid-row: 1; }
.workspace[data-focus="concept"] .exchange-panel,
.workspace[data-focus="network"] .exchange-panel,
.workspace[data-focus="packet"] .topology-panel { grid-column: 9 / 11; grid-row: 2; }
.workspace[data-focus="concept"] .packet-panel,
.workspace[data-focus="network"] .packet-panel,
.workspace[data-focus="exchange"] .topology-panel { grid-column: 11 / 13; grid-row: 2; }
.workspace[data-focus="exchange"] .packet-panel { grid-column: 9 / 11; grid-row: 2; }
.workspace[data-focus="packet"] .exchange-panel { grid-column: 11 / 13; grid-row: 2; }

.explanation-copy { min-height: 0; padding: clamp(14px, 2.5vh, 28px) clamp(16px, 2.5vw, 34px); overflow: auto; }
.moment-kicker { margin: 0; color: var(--gold); font-size: 9px; font-weight: 900; letter-spacing: .1em; }
.explanation-copy h1 { max-width: 850px; margin: 7px 0 0; font: 800 clamp(24px, 3.2vw, 44px)/1.02 system-ui, sans-serif; letter-spacing: -.035em; text-wrap: balance; }
.takeaway { max-width: 850px; margin: 14px 0 0; color: var(--ink); font: 650 clamp(15px, 1.45vw, 20px)/1.35 system-ui, sans-serif; }
.why { max-width: 850px; margin-top: 18px; padding: 12px 14px; border-left: 3px solid var(--gold); background: #252117; }
.why span { color: var(--gold); font-size: 8px; font-weight: 900; letter-spacing: .08em; }
.why p { margin: 5px 0 0; color: #dedbd2; font: 500 13px/1.5 system-ui, sans-serif; }
.concept-stack { margin-top: auto; padding: 12px clamp(16px, 2.5vw, 34px) 17px; border-top: 1px solid var(--line-soft); }
.concept-label { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 8px; }
.concept-label b { color: var(--ink); font-weight: 500; }
.layer-chain { display: flex; align-items: stretch; gap: 6px; min-width: 0; margin-top: 8px; }
.layer-block { flex: 1 1 0; min-width: 0; padding: 8px; overflow: hidden; border: 1px solid var(--layer-color); border-radius: 6px; color: var(--layer-color); background: color-mix(in srgb, var(--layer-color), transparent 94%); }
.layer-block b, .layer-block span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.layer-block b { font-size: 8px; }
.layer-block span { margin-top: 3px; color: var(--muted); font-size: 7px; }
.moment-controls { display: flex; gap: 6px; margin-top: 9px; }
.moment-controls:empty { display: none; }
.moment-controls button, .moment-controls input, .moment-controls select { min-height: 33px; min-width: 0; padding: 5px 8px; color: var(--muted); font-size: 8px; }
.moment-controls button { color: var(--gold); }

.topology { position: relative; flex: 1; min-height: 150px; }
.topology svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.topology path { fill: none; stroke: #344148; stroke-width: 3; vector-effect: non-scaling-stroke; }
.topology path.route { stroke: var(--nwk); stroke-width: 4; }
.topology path.active { stroke: var(--gold); stroke-width: 7; stroke-dasharray: 10 7; animation: hop-flow .7s linear infinite; }
@keyframes hop-flow { to { stroke-dashoffset: -17; } }
.network-node { position: absolute; z-index: 2; display: grid; grid-template-columns: 24px minmax(0, 1fr); width: 138px; min-height: 58px; padding: 7px 8px; transform: translate(-50%, -50%); background: #11191d; text-align: left; }
.network-node i { grid-row: 1 / 4; align-self: center; color: var(--mac); font-size: 19px; font-style: normal; }
.network-node b, .network-node span, .network-node small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.network-node b { font: 750 11px/1.2 system-ui, sans-serif; }
.network-node span { color: var(--mac); font-size: 7px; }
.network-node small { color: var(--muted); font-size: 7px; }
.network-node.origin { box-shadow: 0 0 0 2px #87aff33d; }
.network-node.final { border-color: var(--zcl); }
.network-node.sender { z-index: 4; border-color: var(--gold); background: #292416; }
.network-node.receiver { z-index: 3; background: #16251b; }
.workspace[data-focus="concept"] .network-node { grid-template-columns: 17px minmax(0, 1fr); width: 96px; min-height: 48px; padding: 5px; }
.workspace[data-focus="concept"] .network-node i { font-size: 14px; }
.workspace[data-focus="concept"] .network-node b { font-size: 9px; }
.workspace[data-focus="concept"] .network-node span, .workspace[data-focus="concept"] .network-node small { font-size: 7px; }
#node-switch { left: 13%; top: 76%; }
#node-coordinator { left: 50%; top: 25%; }
#node-light { left: 72%; top: 76%; }
#node-sensor { left: 90%; top: 76%; }
.hop-readout { position: absolute; z-index: 5; bottom: 8px; left: 50%; width: min(260px, 42%); padding: 6px 8px; transform: translateX(-50%); border: 1px solid var(--gold); border-radius: 7px; background: #282316f5; text-align: center; }
.hop-readout span, .hop-readout b, .hop-readout small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hop-readout span { color: var(--gold); font-size: 7px; font-weight: 900; }
.hop-readout b { margin-top: 2px; font-size: 9px; }
.hop-readout small { color: var(--muted); font-size: 7px; }
.network-detail { flex: none; min-height: 64px; padding: 9px 12px; border-top: 1px solid var(--line-soft); background: var(--panel-soft); }
.network-detail span { color: var(--mac); font-size: 7px; font-weight: 900; }
.network-detail p { margin: 3px 0 0; color: var(--muted); font: 500 11px/1.35 system-ui, sans-serif; }

.exchange-timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); align-content: start; gap: 6px; min-height: 0; margin: 0; padding: 10px; overflow: auto; list-style: none; counter-reset: exchange; }
.exchange-item { counter-increment: exchange; }
.exchange-item button { position: relative; display: grid; grid-template-columns: 25px minmax(0, 1fr); grid-template-rows: auto auto; width: 100%; min-height: 48px; padding: 7px 8px; color: var(--muted); background: var(--panel-soft); text-align: left; }
.exchange-item button::before { grid-row: 1 / 3; align-self: center; color: var(--quiet); font-size: 8px; content: counter(exchange, decimal-leading-zero); }
.exchange-item b, .exchange-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exchange-item b { color: var(--ink); font-size: 8px; }
.exchange-item span { margin-top: 2px; font-size: 7px; }
.exchange-item.ack { margin-left: 10px; }
.exchange-item.ack button { border-style: dashed; }
.exchange-item.selected button { border-color: var(--gold); color: var(--gold); background: #272217; }
.exchange-item.complete button { border-color: #395a47; }
.exchange-detail { margin-top: auto; padding: 11px 13px 13px; border-top: 1px solid var(--line-soft); background: var(--panel-soft); }
.exchange-detail span, .exchange-detail b { display: block; }
.exchange-detail span { color: var(--gold); font-size: 7px; font-weight: 900; letter-spacing: .08em; }
.exchange-detail b { margin-top: 3px; font: 750 14px/1.25 system-ui, sans-serif; }
.exchange-detail p { margin: 5px 0 0; color: var(--muted); font: 500 11px/1.4 system-ui, sans-serif; }

.packet-panel { position: relative; }
.primary-byte-ribbon { display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: center; gap: 4px; min-width: 0; min-height: 82px; padding: 14px; overflow: auto; background: #080c0e; }
.air-byte { position: relative; flex: none; width: 29px; height: 31px; padding: 9px 0 0; border-color: color-mix(in srgb, var(--layer-color), transparent 45%); border-radius: 4px; color: var(--layer-color); background: color-mix(in srgb, var(--layer-color), transparent 94%); font-size: 9px; line-height: 1; }
.air-byte::before { position: absolute; top: 2px; left: 0; width: 100%; color: var(--quiet); font-size: 7px; content: attr(data-offset); }
.air-byte.focus { border-color: var(--layer-color); color: #081014; background: var(--layer-color); font-weight: 900; }
.air-byte.focus::before { color: #172126; }
.no-wire-bytes { align-self: center; padding: 12px 16px; border: 1px dashed var(--gold); border-radius: 7px; color: var(--gold); font-size: 10px; font-weight: 900; }
.packet-focus { margin-top: auto; padding: 12px 14px 14px; border-top: 2px solid var(--focus-color, var(--gold)); background: #211e17; }
.packet-focus span, .packet-focus b { display: block; }
.packet-focus span { color: var(--focus-color, var(--gold)); font-size: 7px; font-weight: 900; letter-spacing: .08em; }
.packet-focus b { margin-top: 3px; font: 750 15px/1.2 system-ui, sans-serif; }
.packet-focus p { margin: 5px 0 0; color: var(--muted); font: 500 11px/1.4 system-ui, sans-serif; }
.byte-tooltip { position: absolute; z-index: 9; top: 45px; left: 50%; width: min(680px, calc(100% - 20px)); padding: 11px 13px; transform: translateX(-50%); border: 2px solid var(--tooltip-color); border-radius: 8px; background: #080d10f7; box-shadow: 0 12px 32px #000c; pointer-events: none; }
.byte-tooltip span, .byte-tooltip strong, .byte-tooltip code { display: block; }
.byte-tooltip span { color: var(--tooltip-color); font-size: 7px; font-weight: 900; }
.byte-tooltip strong { margin-top: 2px; font: 750 15px/1.2 system-ui, sans-serif; }
.byte-tooltip code { margin-top: 4px; color: var(--tooltip-color); font-size: 9px; }
.byte-tooltip p { margin: 5px 0 0; font: 500 11px/1.35 system-ui, sans-serif; }

.workspace[data-focus="concept"] .exchange-panel .exchange-timeline,
.workspace[data-focus="concept"] .packet-panel .primary-byte-ribbon,
.workspace[data-focus="network"] .exchange-panel .exchange-timeline,
.workspace[data-focus="network"] .packet-panel .primary-byte-ribbon,
.workspace[data-focus="exchange"] .topology-panel .topology,
.workspace[data-focus="packet"] .topology-panel .topology,
.workspace[data-focus="packet"] .exchange-panel .exchange-timeline { display: none; }
.workspace[data-focus="concept"] .exchange-panel .exchange-detail,
.workspace[data-focus="concept"] .packet-panel .packet-focus,
.workspace[data-focus="network"] .exchange-panel .exchange-detail,
.workspace[data-focus="network"] .packet-panel .packet-focus,
.workspace[data-focus="exchange"] .topology-panel .network-detail,
.workspace[data-focus="packet"] .topology-panel .network-detail,
.workspace[data-focus="packet"] .exchange-panel .exchange-detail { min-height: 0; height: 100%; overflow: hidden; }
.workspace[data-focus="concept"] .exchange-panel .exchange-detail p,
.workspace[data-focus="concept"] .packet-panel .packet-focus p,
.workspace[data-focus="network"] .exchange-panel .exchange-detail p,
.workspace[data-focus="network"] .packet-panel .packet-focus p,
.workspace[data-focus="exchange"] .topology-panel .network-detail p,
.workspace[data-focus="packet"] .topology-panel .network-detail p,
.workspace[data-focus="packet"] .exchange-panel .exchange-detail p { display: none; }

.lesson-actions { display: grid; grid-template-columns: 110px minmax(0, 1fr) minmax(250px, 34%); align-items: center; gap: 10px; margin: 0; padding: 9px 14px; border-top: 1px solid var(--line); background: #12191d; }
.lesson-actions button { min-height: 43px; padding: 7px 12px; font-size: 9px; font-weight: 900; }
.lesson-actions .back { color: var(--muted); background: transparent; }
.lesson-actions > div { text-align: center; }
.lesson-actions span, .lesson-actions small { display: block; }
.lesson-actions span { color: var(--ink); font-size: 9px; }
.lesson-actions small { margin-top: 2px; color: var(--muted); font-size: 7px; }
.lesson-actions .primary { border-color: var(--gold); color: #171207; background: var(--gold); }
.lesson-actions .primary.accepted { border-color: var(--good); background: var(--good); }

.overlay { position: fixed; z-index: 30; inset: 0; display: grid; grid-template-rows: 66px 44px minmax(0, 1fr); overflow: hidden; background: #080c0ff8; backdrop-filter: blur(8px); }
.overlay-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 18px; border-bottom: 1px solid var(--line); background: #10171b; }
.overlay-head span { color: var(--gold); font-size: 7px; font-weight: 900; }
.overlay-head h2 { margin: 2px 0 0; font: 750 18px/1.2 system-ui, sans-serif; }
.overlay-head button { min-height: 34px; padding: 5px 9px; font-size: 8px; }
.overlay-head .close { border-color: var(--bad); color: var(--bad); background: transparent; }
.tool-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0 18px; border-bottom: 1px solid var(--line); background: #0c1114; }
.tool-tabs button { border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--muted); background: transparent; font-size: 8px; }
.tool-tabs button.active { border-color: var(--gold); color: var(--gold); }
.tool-panel { min-width: 0; min-height: 0; overflow: auto; }
.inspector-tool { display: grid; grid-template-rows: auto auto auto minmax(0, 1fr); }
.tool-intro { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 18px; }
.tool-intro span { color: var(--gold); font-size: 7px; font-weight: 900; }
.tool-intro h3 { margin: 2px 0 0; font: 750 16px/1.2 system-ui, sans-serif; }
.tool-intro p { margin: 3px 0 0; color: var(--muted); font-size: 8px; }
.tool-intro > div:last-child { display: flex; gap: 6px; }
.tool-intro button { min-height: 35px; padding: 6px 9px; color: var(--gold); font-size: 8px; }
.model-boundary { margin: 0; padding: 8px 18px; color: var(--muted); background: #0c1114; font-size: 8px; }
.octet-ribbon { display: flex; flex-wrap: wrap; gap: 4px; padding: 10px 18px; border-block: 1px solid var(--line); background: #06090b; }
.octet { position: relative; width: 34px; height: 38px; padding: 12px 0 0; border-color: var(--layer-color); color: var(--layer-color); background: color-mix(in srgb, var(--layer-color), transparent 93%); font-size: 9px; }
.octet::before { position: absolute; top: 2px; left: 0; width: 100%; color: var(--muted); font-size: 7px; text-align: center; content: attr(data-offset); }
.octet.selected { color: #081014; background: var(--layer-color); }
.inspector-grid { display: grid; grid-template-columns: minmax(580px, 1.45fr) minmax(280px, .55fr); min-height: 0; }
.ledger { min-height: 0; overflow: auto; border-right: 1px solid var(--line); }
.ledger table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ledger th { position: sticky; top: 0; padding: 8px; border-bottom: 1px solid var(--line); color: var(--muted); background: #151e23; font-size: 7px; text-align: left; }
.ledger th:first-child { width: 72px; }
.ledger th:nth-child(2) { width: 20%; }
.ledger th:nth-child(3) { width: 23%; }
.ledger td { padding: 8px; border-bottom: 1px solid var(--line-soft); vertical-align: top; font-size: 8px; overflow-wrap: anywhere; }
.ledger tr { cursor: pointer; }
.ledger tr.selected { background: #202a30; box-shadow: inset 3px 0 var(--layer-color); }
.ledger code { color: var(--layer-color); }
.ledger small { display: block; margin-top: 3px; color: var(--zcl); }
.selected-field { padding: 16px; overflow: auto; }
.selected-field h3 { margin: 0; color: var(--selected-color); font: 750 15px/1.2 system-ui, sans-serif; }
.selected-field p { color: var(--muted); font-size: 9px; }
.selected-field pre { padding: 9px; color: var(--selected-color); background: #06090b; font: 8px/1.5 inherit; white-space: pre-wrap; overflow-wrap: anywhere; }
.selected-field table { width: 100%; border-collapse: collapse; }
.selected-field td { padding: 5px; border-bottom: 1px solid var(--line); font-size: 8px; }

.editor-shell { display: grid; grid-template-columns: 190px minmax(0, 720px); grid-template-rows: minmax(0, 1fr) 58px; justify-content: center; min-height: 100%; padding: 20px; }
.editor-shell > nav { display: grid; align-content: start; gap: 6px; padding-right: 14px; }
.editor-shell > nav button { min-height: 42px; color: var(--muted); background: transparent; font-size: 8px; text-align: left; }
.editor-shell > nav button.active { border-color: var(--gold); color: var(--gold); background: #272217; }
.editor-shell form { min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); }
#schema-stage { display: grid; grid-template-columns: 1fr 1fr; align-content: start; gap: 13px; }
#schema-stage h3, #schema-stage p, #schema-stage .wide { grid-column: 1 / -1; }
#schema-stage h3 { margin: 0; font: 750 19px/1.2 system-ui, sans-serif; }
#schema-stage p { margin: -4px 0 4px; color: var(--muted); font-size: 10px; }
#schema-stage label { color: var(--muted); font-size: 8px; }
#schema-stage input, #schema-stage select { display: block; width: 100%; min-height: 40px; margin-top: 4px; padding: 7px 9px; color: var(--ink); }
.editor-item-nav { display: grid; grid-template-columns: 1fr max-content max-content; gap: 6px; grid-column: 1 / -1; }
.editor-item-nav button { min-height: 34px; padding: 5px 9px; font-size: 8px; }
.schema-review { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.schema-review div { padding: 11px; border: 1px solid var(--line); border-radius: 7px; }
.schema-review small, .schema-review b { display: block; }
.schema-review small { color: var(--muted); font-size: 7px; }
.schema-review b { margin-top: 3px; font-size: 10px; }
.form-error { min-height: 18px; color: var(--bad) !important; }
.editor-shell > footer { grid-column: 1 / -1; display: grid; grid-template-columns: 130px 1fr 230px; align-items: center; gap: 8px; margin: 0; padding-top: 10px; border: 0; }
.editor-shell > footer button { min-height: 42px; }
.editor-shell > footer span { color: var(--muted); font-size: 8px; text-align: center; }
.editor-shell > footer .primary { border-color: var(--gold); color: #181305; background: var(--gold); font-weight: 900; }

.advanced-grid { display: grid; grid-template-columns: repeat(2, minmax(280px, 430px)); place-content: center; gap: 16px; min-height: 55%; padding: 24px; }
.advanced-grid article { padding: 22px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.advanced-grid span { color: var(--gold); font-size: 8px; font-weight: 900; }
.advanced-grid h3 { margin: 8px 0 0; font: 750 19px/1.2 system-ui, sans-serif; }
.advanced-grid p { color: var(--muted); font: 500 11px/1.5 system-ui, sans-serif; }
.advanced-grid button { min-height: 40px; padding: 7px 10px; color: var(--gold); }
.demo-result { margin: 0 24px 24px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); }
.demo-result header { display: flex; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.demo-result header span { color: var(--gold); font-size: 8px; font-weight: 900; }
.demo-result header b { font-size: 9px; }
.demo-result > div { display: flex; flex-wrap: wrap; gap: 5px; padding: 12px; }
.demo-result button { min-height: 34px; padding: 5px 8px; font-size: 8px; }

@media (max-width: 1080px) {
  .course-main { grid-template-columns: 190px minmax(0, 1fr); }
  .chapter-rail button { min-height: 36px; }
  .network-node { width: 112px; }
  .network-node span { font-size: 7px; }
}

@media (max-width: 860px) {
  html, body { height: auto; min-height: 100%; overflow: auto; }
  .course-shell { display: block; height: auto; min-height: 100dvh; overflow: visible; }
  .topbar { position: sticky; z-index: 20; top: 0; grid-template-columns: max-content minmax(0, 1fr) max-content; gap: 8px; min-height: 56px; padding-inline: 9px; }
  .course-name, .course-totals { display: none; }
  .mobile-chapter { display: block; color: var(--muted); font-size: 7px; }
  .mobile-chapter span { display: none; }
  .mobile-chapter select { width: 100%; min-height: 34px; padding: 4px 6px; font-size: 8px; }
  .toolbox-button { min-height: 34px; padding-inline: 8px; }
  .course-main { display: block; }
  .chapter-rail { display: none; }
  .learning-stage { display: flex; flex-direction: column; min-height: calc(100dvh - 56px); }
  .workspace { display: flex; flex-direction: column; gap: 8px; padding: 8px; overflow: visible; }
  .workspace-panel { flex: none; min-height: 62px; }
  .workspace[data-focus="concept"] .explanation-panel,
  .workspace[data-focus="network"] .topology-panel,
  .workspace[data-focus="exchange"] .exchange-panel,
  .workspace[data-focus="packet"] .packet-panel { min-height: 58dvh; order: 1; }
  .workspace[data-focus="concept"] .topology-panel,
  .workspace[data-focus="network"] .explanation-panel,
  .workspace[data-focus="exchange"] .explanation-panel,
  .workspace[data-focus="packet"] .explanation-panel { order: 2; }
  .workspace[data-focus="concept"] .exchange-panel,
  .workspace[data-focus="network"] .exchange-panel,
  .workspace[data-focus="exchange"] .topology-panel,
  .workspace[data-focus="packet"] .topology-panel { order: 3; }
  .workspace[data-focus="concept"] .packet-panel,
  .workspace[data-focus="network"] .packet-panel,
  .workspace[data-focus="exchange"] .packet-panel,
  .workspace[data-focus="packet"] .exchange-panel { order: 4; }
  .workspace-panel:not(:first-child) { max-height: none; }
  .explanation-copy { padding: 18px 16px; }
  .explanation-copy h1 { font-size: clamp(25px, 8vw, 38px); }
  .takeaway { font-size: 16px; }
  .why p { font-size: 13px; }
  .topology { min-height: 290px; }
  .network-node { width: 104px; }
  .exchange-timeline { grid-template-columns: 1fr; max-height: 48dvh; }
  .lesson-actions { position: sticky; z-index: 15; bottom: 0; grid-template-columns: 72px minmax(0, 1fr) minmax(150px, 43%); padding: 7px 8px; }
  .lesson-actions button { min-height: 40px; padding-inline: 6px; font-size: 8px; }
  .overlay { position: fixed; grid-template-rows: 60px 44px minmax(0, 1fr); }
  .tool-tabs { padding-inline: 5px; }
  .tool-tabs button { font-size: 7px; }
  .tool-intro { align-items: flex-start; padding: 10px; }
  .tool-intro > div:last-child { flex-direction: column; }
  .inspector-grid { grid-template-columns: 1fr; }
  .ledger { border-right: 0; }
  .selected-field { border-top: 1px solid var(--line); }
  .editor-shell { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr) 54px; padding: 9px; }
  .editor-shell > nav { grid-template-columns: repeat(4, 1fr); padding: 0 0 6px; }
  .editor-shell > nav button { min-height: 34px; padding: 3px; overflow: hidden; font-size: 7px; text-align: center; white-space: nowrap; }
  .editor-shell form { padding: 12px; }
  #schema-stage { gap: 9px; }
  .editor-shell > footer { grid-column: 1; grid-template-columns: 80px 1fr 150px; }
  .advanced-grid { grid-template-columns: 1fr; min-height: auto; padding: 12px; }
  .demo-result { margin: 0 12px 12px; }
}

@media (max-width: 520px) {
  .brand { font-size: 8px; }
  #schema-stage { grid-template-columns: 1fr; }
  #schema-stage h3, #schema-stage p, #schema-stage .wide { grid-column: 1; }
  .schema-review { grid-column: 1; grid-template-columns: 1fr; }
  .editor-item-nav { grid-column: 1; }
  .network-node { width: 88px; padding: 5px; }
  .network-node i { font-size: 14px; }
  .network-node b { font-size: 8px; }
  .network-node span, .network-node small { font-size: 7px; }
  .hop-readout { width: 45%; }
}

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