/* A shared reading scale: 14px content, 12px controls, 11px supporting labels.
   Keep diagram annotations distinct from prose without shrinking essential text. */
:root{--text-body:14px;--text-control:12px;--text-label:11px}
.nav-tab,.help-button,.lesson strong,.toggle-row{font-size:14px}
.nav-count,.lesson small,.lesson-number,.field-note strong,.field-note p{font-size:12px}
.sidebar-top,.sidebar-top .eyebrow,.edition,.section-label,.sidebar-bottom,.breadcrumb,.level-pill{font-size:11px;letter-spacing:.6px}
.sidebar .intro,.workspace-heading p{font-size:14px;line-height:1.65;color:#62735c}
.lesson{padding:12px 8px}.lesson small{line-height:1.5}.field-note p{color:#63735a}
.scene-status,.scene-top>span,.scene-bottom>span,.network-legend{font-size:11px;letter-spacing:.3px;color:#546949}
.scene-top{gap:12px}.scene-top>span{text-align:right}
.device-label{font-size:12px;padding:6px 9px}.device-label .device-index,.device-label .ip{font-size:11px}
.live-journey-hud>span:first-child{font-size:11px;color:#9c5428;letter-spacing:.6px}
.live-journey-hud>span:last-child{font-size:11px;color:#576e4b;letter-spacing:.4px}
.live-journey-hud strong{font-size:16px}.packet-bubble{font-size:12px}
.inspector-top,#inspector-badge,.device-journey-action>span,.inspector-field>span{font-size:11px;letter-spacing:.7px}
.inspector-hero p,.packet-mode .inspector-hero p,.device-journey-action p,.did-you-know p,.inspector-field p{font-size:14px;line-height:1.7;color:#d0ddc7}
.spec-row,.inspector .spec-row{font-size:13px;line-height:1.5}.spec-row span:last-child{overflow-wrap:anywhere;min-width:0}
.did-you-know strong,.inspect-action{font-size:12px}.inspector-field code{font-size:14px}
.inspector h3,.packet-mode .inspector h3{font-size:26px}
.inspector-hero{padding-top:17px}.device-icon{margin-bottom:12px}
.dock-heading{align-items:flex-start;flex-wrap:wrap;gap:4px 12px}
.dock-heading>span{font-size:11px;letter-spacing:.4px;color:#586d4c}.dock-heading strong{font-size:13px}
.dock-timeline button{font-size:12px;padding:7px 4px;line-height:1.35}
#dock-description{font-size:14px;line-height:1.6;min-height:3.2em;margin-bottom:8px;color:#405838}
.dock-actions{flex-wrap:wrap;gap:8px 12px}
.scene-journey-dock .primary-button,.dock-actions>button:not(.primary-button),.dock-actions label,.dock-actions select{font-size:12px}
.dock-actions select{max-width:150px;padding:6px}.dock-progress output{font-size:12px;min-width:38px}
.dock-progress input{height:16px}.scene-journey-dock{padding:12px 16px}
.journey-heading h3,.packet-guide h3,.challenge-panel h3{font-size:21px}
.journey-heading .eyebrow,.packet-guide .eyebrow,.challenge-panel .eyebrow,.step-explanation>span{font-size:11px;letter-spacing:.6px;color:#576c49}
.journey-actions select,.primary-button,.secondary-button,.inspect-stage,.journey-controls-extra label,.journey-scrubber button,.journey-scrubber output,.route-node,.step-explanation button{font-size:13px}
.timeline-step{font-size:13px;line-height:1.4}.timeline-step>span{font-size:12px}
.step-explanation p,.packet-guide p,.challenge-panel p{font-size:14px;line-height:1.7;color:#546948}
.journey-controls-extra{flex-wrap:wrap}.journey-heading{flex-wrap:wrap}
.journey-context-banner .eyebrow{font-size:11px;color:#566d47}.journey-context-banner p{font-size:14px;color:#526846;line-height:1.65}.journey-context-banner strong{font-size:19px}
#packet-tools button,#packet-tools>span{font-size:12px}.packet-mode #packet-caption .eyebrow{font-size:11px}
.packet-location{font-size:12px;white-space:normal;line-height:1.5}
.field-cell>span{font-size:11px;letter-spacing:.7px;color:#596f4c}.field-cell strong{font-size:14px}.field-cell code{font-size:15px}
.cipher-preview,.nested-preview{font-size:12px}.field-explanation strong{font-size:15px}.field-explanation p{font-size:14px;color:#546c43}
.encapsulation-strip>span{font-size:11px;color:#62774e}.encapsulation-strip p{font-size:13px!important}.packet-diagram-note{font-size:12px!important;color:#5d7050!important}
.layer-button strong{font-size:14px}.layer-button small{font-size:12px}.challenge-options button{font-size:14px;line-height:1.5}.challenge-footer{font-size:13px}
.workspace-footer,.workspace-footer button{font-size:11px;line-height:1.6;color:#65765a;letter-spacing:.2px}
/* Browser chrome is illustrative, but its address and explanation remain readable. */
.browser-preview{width:min(320px,49%);top:64px;max-height:calc(100% - 122px);overflow-y:auto;pointer-events:auto;scrollbar-width:thin;scrollbar-color:#abbc9b #f1f4e9}
.browser-chrome{font-size:10px;letter-spacing:0;gap:5px}.browser-dots{font-size:9px}.browser-address code{font-size:12px}.browser-address kbd{font-size:10px}
.browser-content{height:auto;min-height:116px}.browser-symbol{width:27px;height:27px;margin-bottom:6px;font-size:20px}
#browser-start>strong,#browser-wait>strong{font-size:18px}#browser-start>small,#browser-wait>small{font-size:12px;color:#5e7451}
#browser-caption{font-size:12px;line-height:1.5;min-height:0;color:#405c34}
.demo-site-nav>span,.demo-site-label{font-size:10px;letter-spacing:.2px;color:#60754e}.demo-site-nav{gap:6px}.demo-site-nav>span{text-align:right}
#browser-page-hero>p{font-size:12px;color:#5d714f}#browser-page-cards>span{font-size:11px}
.browser-preview[data-phase=waiting] .browser-content{height:auto;min-height:65px}
@media(min-width:901px) and (max-width:1400px){.app-shell{grid-template-columns:195px minmax(0,1fr)}.sidebar{padding:26px 14px}.sidebar h1{font-size:25px}.workspace{padding:24px 18px 0}.lab-grid{grid-template-columns:minmax(0,1fr) 265px;gap:14px}.inspector{padding:20px 18px}.topbar{padding:0 22px}}
@media(max-width:1100px){.app-shell{grid-template-columns:1fr}.sidebar{display:none}.workspace{padding:22px 18px 0}.lab-grid{grid-template-columns:minmax(0,1fr) 260px}.scene-top>span{font-size:10px}.scene-bottom>span{max-width:220px;flex-wrap:wrap}.dock-timeline button{font-size:11px}}
@media(max-width:760px){.lab-grid{grid-template-columns:1fr}.lab-grid>.inspector{height:auto;max-height:none}.packet-mode .inspector{height:auto}.topbar{height:auto;min-height:100px;flex-wrap:wrap;padding:12px 16px;gap:10px}.main-nav{order:3;width:100%;justify-content:space-between}.nav-tab{font-size:12px;padding:9px 10px}.help-button span{display:none}.brand{font-size:22px}.scene-panel{scroll-margin-top:126px}.workspace-heading{scroll-margin-top:126px}.field-cell.payload{padding-right:14px}.cipher-preview{position:static;margin-top:10px}.scene-bottom>span{font-size:11px}.dock-heading strong{font-size:12px}}
@media(max-width:480px){.workspace{padding:18px 10px 0}.nav-tab{font-size:12px;padding:8px 6px;gap:4px}.nav-tab svg{width:14px}.dock-timeline{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.dock-timeline button{font-size:12px}.scene-panel{height:740px}.scene-journey-dock{padding:12px}#dock-description{min-height:4.8em}.dock-actions{gap:8px 10px}.dock-actions label{margin-left:0}.dock-heading>span{font-size:11px}.scene-status{font-size:11px}.scene-top>span{display:none}.browser-preview{top:74px;right:8px;width:70%;max-height:calc(100% - 133px)}.browser-chrome{font-size:10px}.browser-address code{font-size:12px}.browser-address kbd{font-size:10px}.browser-content{min-height:94px}.live-journey-hud strong{font-size:14px}.device-label{font-size:11px}.packet-field-map{grid-template-columns:1fr}.journey-scrubber{flex-wrap:wrap}.packet-mode #packet-caption{display:none}}