/* Reader foundation extracted 22 October 2026 from project-authored polish.css.
 * Includes retained reader, sidebar, library, dialog and control rules; legacy home,
 * header/footer, theme tokens and progress visualization are intentionally excluded.
 * Guide-only rules come from assets/reference/reference-fidelity.css.
 * Rule and media order are preserved. Fonts use the existing licensed local files.
 * New visual direction and global tokens belong to site.css. */

/* Retained source: polish.css */
@font-face { font-family:Manrope;src:url('../fonts/manrope-variable.ttf') format('truetype');font-weight:200 800;font-display:swap }
@font-face { font-family:Fraunces;src:url('../fonts/fraunces-variable.ttf') format('truetype');font-weight:100 900;font-display:swap }
@font-face { font-family:Fraunces;src:url('../fonts/fraunces-italic-variable.ttf') format('truetype');font-weight:100 900;font-style:italic;font-display:swap }
@font-face { font-family:'JetBrains Mono';src:url('../fonts/jetbrains-mono-variable.ttf') format('truetype');font-weight:100 800;font-display:swap }
[hidden] { display:none!important }
.sr-only { position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0 }
.icon { display:inline-block;flex-shrink:0;width:19px;height:19px;background:currentColor;mask:var(--icon) center/contain no-repeat;-webkit-mask:var(--icon) center/contain no-repeat }
.skip-link { position:fixed;z-index:200;left:24px;top:-100px;padding:12px 18px;background:var(--accent);color:var(--on-accent);border-radius:6px }
.skip-link:focus { top:12px }
#main-content:focus,
#lesson-title:focus { outline:none }
.eyebrow { display:block;font:12px/1.6 var(--mono);color:var(--accent);letter-spacing:.07em;text-transform:uppercase;margin-bottom:20px }
.eyebrow-line { display:inline-block;width:22px;height:1px;background:currentColor;vertical-align:middle;margin-right:12px }
.button { display:inline-flex;align-items:center;justify-content:center;gap:12px;border:1px solid var(--border);border-radius:7px;padding:13px 21px;min-height:50px;background:var(--surface);font-size:15px;font-weight:650;line-height:1.4;transition:background-color .2s,border-color .2s,transform .25s cubic-bezier(.2,.7,.3,1),box-shadow .25s }
.button:hover { border-color:var(--accent);transform:translateY(-2px);box-shadow:0 5px 16px #3f1d6a0d }
.button-solid { background:var(--accent);border-color:var(--accent);color:var(--on-accent) }
.button-solid:hover { background:var(--accent-hover);border-color:var(--accent-hover);box-shadow:0 8px 24px #6b43c52a }
.button-success { background:var(--accent);border-color:var(--accent);color:var(--on-accent) }
.button-small { font-size:14px;min-height:42px;padding:10px 16px }
.text-button,
.text-link { display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--accent) }
.text-button { border:0;background:none;padding:9px 0;min-height:44px;text-align:left }
.text-link .icon { width:17px;height:17px;transition:transform .2s }
.text-link:hover .icon { transform:translateX(3px) }
.text-link:hover,
.text-button:hover { text-decoration:underline;text-underline-offset:5px }
.icon-button { display:inline-grid;place-items:center;flex-shrink:0;width:42px;height:42px;border:1px solid var(--border);border-radius:7px;background:transparent }
.icon-button:hover { background:var(--soft);border-color:var(--accent) }
.app-rail { display:none;position:fixed;z-index:20;top:108px;bottom:28px;left:max(24px,calc(50% - 616px));width:220px;flex-direction:column;color:var(--muted);font-size:13px }
.rail-brand-row,
.primary-nav { display:none }
.rail-content { flex:1;min-height:0;overflow:auto;scrollbar-width:thin;padding-right:12px }
.rail-bottom { padding-top:18px;border-top:1px solid var(--border);margin-right:12px }
.rail-progress-heading { display:flex;justify-content:space-between;font-size:12px }
.rail-progress-track { height:3px;background:var(--border);margin:9px 0;border-radius:3px;overflow:hidden }
.rail-progress-track>span { display:block;height:100%;background:var(--accent);transition:width .55s cubic-bezier(.2,.7,.3,1) }
.rail-progress-caption { font-size:11px }
body[data-page=lesson] .app-rail { display:flex }
.rail-backdrop { display:none }
.back-roadmap { display:block;color:var(--accent);font-size:13px;margin-bottom:20px }
.sidebar-label { display:block;font-size:12px;margin-bottom:9px }
.sidebar-search-wrap { display:flex;align-items:center;gap:8px;border:1px solid var(--border);background:var(--surface);padding-left:10px;border-radius:6px;margin-bottom:26px }
.sidebar-search-wrap>.icon { width:15px;height:15px;color:var(--muted) }
.sidebar-search { width:100%;min-width:0;border:0;background:transparent;color:var(--ink);font-size:13px;padding:11px 8px;border-radius:6px }
.sidebar-group { margin-bottom:25px }
.sidebar-group h2 { font-size:12px;line-height:1.7;font-weight:750;letter-spacing:0;color:var(--ink);margin-bottom:9px }
.sidebar-link { display:flex;align-items:flex-start;gap:9px;font-size:13px;line-height:1.6;padding:9px 8px;margin-left:-8px;border-radius:5px;border-left:2px solid transparent }
.sidebar-link:hover { color:var(--accent);background:var(--soft) }
.sidebar-link[aria-current=page] { background:var(--tint);border-left-color:var(--accent);color:var(--accent);font-weight:650 }
.lesson-check { display:inline-grid;place-items:center;flex-shrink:0;width:12px;height:12px;border:1px solid var(--border);border-radius:50%;margin-top:4px;font-size:9px }
.lesson-check.started { background:var(--tint);border-color:var(--accent) }
.lesson-check.done { background:var(--accent);color:var(--on-accent);border-color:var(--accent) }
.sidebar-empty { font-size:13px;line-height:1.8 }
.rail-label { font:11px var(--mono);text-transform:uppercase;letter-spacing:.05em;margin:22px 0 12px }
.rail-module { display:flex;gap:12px;padding:10px 0;font-size:13px;line-height:1.6 }
.rail-module>span:first-child { font:11px/2 var(--mono);color:var(--accent) }
.rail-help { margin-top:28px;border-top:1px solid var(--border);padding-top:22px }
.rail-help strong { display:block;font-size:14px;color:var(--ink) }
.rail-help p { font-size:13px;line-height:1.8;margin-top:8px }
.rail-help button { font-size:13px;color:var(--accent);background:none;border:0;padding:12px 0 }
.rail-help-icon { display:none }
.assessment-inline { white-space:nowrap;font-size:13px }
.copy-button { display:inline-flex;align-items:center;justify-content:center;background:var(--surface);color:var(--ink);border:1px solid var(--border);border-radius:5px;padding:6px 12px;min-height:36px;font-size:12px;flex-shrink:0 }
.copy-button:hover { border-color:var(--accent);color:var(--accent) }
.reader-layout { max-width:1280px;margin:auto;padding:42px 264px 90px 280px }
.lesson-article { min-width:0;position:relative }
.breadcrumb { display:flex;justify-content:space-between;gap:20px;font-size:12px;color:var(--muted);margin-bottom:19px }
.breadcrumb a { color:var(--accent) }
.lesson-heading h1 { font-size:38px;line-height:1.2;letter-spacing:-.04em;font-weight:650 }
.lesson-top-meta { display:flex;align-items:center;gap:8px 15px;flex-wrap:wrap;font-size:11px;color:var(--muted);margin:19px 0 }
.surface-badge { color:var(--accent) }
.lesson-goal { font-size:17px;line-height:1.8;color:var(--muted);padding-bottom:22px;border-bottom:1px solid var(--border);margin-bottom:25px }
.lesson-toc { position:fixed;top:124px;left:calc(50% + 424px);width:156px;display:flex;flex-direction:column;gap:10px;font-size:12px;color:var(--muted);padding-left:18px;border-left:1px solid var(--border) }
.lesson-toc>span { font-size:11px;font-weight:700;color:var(--ink);margin-bottom:7px }
.lesson-toc a { padding:4px 0;line-height:1.8 }
.lesson-toc a:hover { color:var(--accent) }
.article-section { margin:34px 0;scroll-margin-top:108px }
.article-section h2 { font-size:25px;line-height:1.35;font-weight:650;letter-spacing:-.025em;margin-bottom:18px }
.article-section h3 { font-size:21px;line-height:1.4 }
.article-section p,
.article-section li { font-size:16px;line-height:1.9;color:var(--muted) }
.article-section p+p { margin-top:17px }
.article-section ol,
.article-section ul { margin:0;padding-left:24px }
.article-section li { padding-left:5px;margin:11px 0 }
.article-section p code,
.article-section li code,
.lesson-goal code,
.lesson-note code { font:.86em var(--mono);background:var(--soft);padding:2px 5px;border-radius:3px;color:var(--ink);overflow-wrap:anywhere }
.article-section-heading { display:flex;gap:20px;justify-content:space-between;align-items:baseline }
.tiny-label { font-size:11px;color:var(--muted) }
.lesson-note { border-left:2px solid var(--border);padding:1px 0 1px 18px;margin:28px 0 }
.lesson-note strong { font-size:12px;color:var(--ink) }
.lesson-note p { font-size:13px;line-height:1.9;color:var(--muted);margin-top:8px }
.code-block { border:1px solid #413749;border-radius:8px;background:var(--terminal);color:#eee8f5;overflow:hidden;margin:18px 0 }
.code-header { display:flex;justify-content:space-between;align-items:center;gap:18px;padding:11px 17px;border-bottom:1px solid #ffffff16;color:#c5b8d5;font-size:12px;line-height:1.7 }
.code-header small { font-size:10px;margin-left:8px }
.code-header .copy-button { background:#38303f;color:#eee7f6;border-color:#61546c }
.code-block pre { margin:0;padding:22px;font:13px/1.9 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;tab-size:2 }
.code-block code { font:inherit;color:inherit;background:none;padding:0 }
.worked-example { border-left:2px solid var(--accent);padding-left:24px }
.worked-example .eyebrow { font-size:11px;margin-bottom:15px }
.worked-example h2 { font-size:23px }
.expected-output { border:1px solid var(--border);border-radius:7px;background:var(--surface);margin:18px 0;overflow:hidden }
.output-label { display:block;padding:10px 17px;border-bottom:1px solid var(--border);font-size:11px;color:var(--muted) }
.expected-output pre { padding:18px;margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font:12px/1.9 var(--mono) }
.practice-box { background:var(--tint);border:1px solid color-mix(in srgb,var(--accent) 15%,var(--border));border-radius:8px;padding:25px }
.practice-label { display:flex;gap:9px;align-items:center;font-size:12px;color:var(--accent);font-weight:650;margin-bottom:12px }
.practice-label .icon { width:16px;height:16px }
.practice-box p+p { margin-top:13px }
.lab-workbench { border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--surface) }
.lab-workbench-heading { padding:25px;border-bottom:1px solid var(--border) }
.lab-workbench-heading p { font-size:14px }
.lab-downloads { display:flex;gap:12px;flex-wrap:wrap;margin-top:18px }
.lab-downloads .button { font-size:13px;min-height:44px }
.lab-commands { list-style:none!important;margin:0!important;padding:0 25px!important }
.lab-commands>li { padding:9px 0 }
.lab-commands>li>p { font-size:14px;line-height:1.8 }
.lab-files { display:flex;flex-wrap:wrap;gap:10px;padding:20px 25px;border-top:1px solid var(--border) }
.lab-files>strong { display:block;width:100%;font-size:13px;margin-bottom:5px }
.file-link { display:inline-flex;align-items:center;gap:8px;font:11px/1.7 var(--mono);padding:9px 11px;min-height:38px;max-width:100%;text-align:left;overflow-wrap:anywhere;background:var(--canvas);border:1px solid var(--border);border-radius:5px;color:var(--accent) }
.file-link:hover { border-color:var(--accent) }
.file-link .icon { width:14px;height:14px }
.lab-takeaway { font-size:13px!important;padding:0 25px 24px }
.check-list { list-style:none;padding-left:0!important }
.check-list li { padding-left:25px;position:relative }
.check-list li:before { content:'✓';position:absolute;left:0;color:var(--accent) }
.reference-solution { border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:18px 0;margin:28px 0;scroll-margin-top:108px }
.reference-solution summary { cursor:pointer;font-size:15px;font-weight:650;line-height:1.8 }
.reference-solution summary small { font-size:12px;font-weight:400;color:var(--muted);display:block;margin:4px 0 0 18px }
.reference-solution>div { padding:19px 0 5px;font-size:15px;line-height:1.9;color:var(--muted) }
.reference-solution li { margin:12px 0 }
.knowledge-check { border:1px solid var(--border);border-radius:9px;padding:25px;background:var(--surface) }
.lesson-quiz fieldset { padding:0;border:0;margin:0 }
.lesson-quiz legend { font-size:17px;font-weight:600;line-height:1.8;margin-bottom:16px }
.quiz-option { display:flex;align-items:start;gap:12px;padding:13px 14px;margin:9px 0;border:1px solid var(--border);border-radius:6px;font-size:14px;line-height:1.8;cursor:pointer }
.quiz-option input { width:17px;height:17px;accent-color:var(--accent);margin:4px 0 0;flex-shrink:0 }
.quiz-option:has(input:checked) { border-color:var(--accent);background:var(--tint) }
.quiz-option:hover { border-color:var(--accent) }
.lesson-quiz>.button { margin-top:14px }
.quiz-feedback { font-size:14px;margin-top:17px }
.quiz-feedback p { font-size:14px;line-height:1.9 }
.troubleshooting details { border-bottom:1px solid var(--border) }
.troubleshooting details:first-of-type { border-top:1px solid var(--border) }
.troubleshooting summary { cursor:pointer;padding:17px 0;font-size:15px;line-height:1.8 }
.troubleshooting details>div { padding:0 18px 20px }
.troubleshooting p { font-size:14px }
.mapping-note { border-left:2px solid var(--accent);padding:2px 0 2px 18px;margin:34px 0 }
.mapping-note summary { display:flex;gap:16px;flex-wrap:wrap;align-items:center;cursor:pointer;font-size:12px;color:var(--muted);padding:9px 0;list-style:none }
.mapping-note summary:after { content:'+';margin-left:auto;font-size:18px }
.mapping-note[open] summary:after { content:'−' }
.mapping-note>div { font-size:14px;line-height:1.9;padding:12px 0 }
.mapping-note a { color:var(--accent);font-size:13px;text-decoration:underline }
.mapping-label { color:var(--accent);font-size:10px;text-transform:uppercase;letter-spacing:.04em }
.article-sources { border-top:1px solid var(--border);padding-top:28px }
.source-links { list-style:none;padding:0!important }
.source-links li { margin:7px 0 }
.source-links a { font-size:14px;color:var(--accent);text-decoration:underline;text-underline-offset:4px;overflow-wrap:anywhere }
.fine-print { font-size:12px!important;line-height:1.9;color:var(--muted) }
.lesson-completion { display:flex;align-items:center;justify-content:space-between;gap:25px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:27px 0;margin-top:40px }
.lesson-completion p { font-size:12px;line-height:1.8;color:var(--muted) }
.lesson-navigation { display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:28px }
.lesson-navigation a { padding:16px 0 }
.lesson-navigation a:last-child { text-align:right }
.lesson-navigation span { display:block;font-size:11px;color:var(--muted);margin-bottom:8px }
.lesson-navigation strong { font-size:14px;line-height:1.7;font-weight:600 }
.lesson-navigation a:hover strong { color:var(--accent) }
.lesson-diagram { margin:32px 0;padding:24px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);scroll-margin-top:104px }
.diagram-heading { display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:15px }
.diagram-heading .eyebrow { font-size:10px;margin-bottom:9px }
.diagram-heading h3 { font-size:18px;line-height:1.5;font-weight:650;letter-spacing:-.02em }
.diagram-heading .button { min-height:38px;font-size:12px;padding:8px 12px;white-space:nowrap }
.diagram-hint { font-size:11px;color:var(--muted);margin:12px 0 }
.diagram-viewport { border:1px solid var(--border);border-radius:7px;background:white;overflow:auto;scrollbar-width:thin;padding:12px }
.diagram-viewport picture { display:block }
.diagram-viewport img { display:block;margin:auto;max-width:100%;height:auto }
.lesson-diagram figcaption { font-size:13px;color:var(--muted);line-height:1.9;margin-top:13px }
.lesson-diagram summary { cursor:pointer;font-size:12px;font-weight:600 }
.lesson-diagram figcaption p { margin-top:10px }
.source-page { max-width:1030px;padding:65px 28px 90px;margin:auto }
.source-page>h1 { font:470 57px/1.1 var(--display);letter-spacing:-.04em;margin-bottom:24px }
.source-page .source-lead { font-size:19px;line-height:1.8;max-width:800px }
.source-page p,
.source-page li { font-size:15px;line-height:1.9;color:var(--muted);margin-bottom:16px }
.source-page h2 { font-size:26px;letter-spacing:-.025em;margin:38px 0 20px }
.source-page a { color:var(--accent);text-underline-offset:4px }
.source-page a:not(.button):hover { text-decoration:underline }
.notice { padding:23px;border:1px solid var(--border);border-radius:8px;background:var(--surface);margin:28px 0;font-size:14px;line-height:1.9 }
.notice strong { color:var(--ink) }
.notice p { font-size:14px;margin:9px 0 }
.progress-tools { display:flex;gap:16px;flex-wrap:wrap;margin:20px 0 }
.file-import { position:relative;overflow:hidden;cursor:pointer }
.file-import input { position:absolute;inset:0;opacity:0;cursor:pointer;max-width:100% }
.file-import:focus-within { outline:2px solid var(--accent);outline-offset:4px }
.coverage-row { display:flex;justify-content:space-between;gap:30px;padding:20px 0;border-bottom:1px solid var(--border) }
.coverage-row>div { flex:1 }
.coverage-row .mapping-label { display:block;margin-bottom:8px }
.coverage-row p { font-size:13px;line-height:1.8;margin:9px 0 0 }
.coverage-row a { font-size:14px }
.coverage-original { max-width:220px;font-size:12px!important;flex-shrink:0 }
.coverage-list h3 { font-size:21px;margin:35px 0 10px }
.coverage-list h3 small { font-size:12px;color:var(--muted);font-weight:400;margin-left:10px }
.lab-library { max-width:1190px }
.lab-library-intro { padding:23px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin:35px 0 45px;max-width:830px }
.lab-library-intro strong { font-size:15px }
.lab-library-intro p { font-size:14px;margin:10px 0 0 }
.lab-library-grid { display:grid;grid-template-columns:1fr 1fr;gap:24px }
.lab-library-card { padding:29px;border:1px solid var(--border);border-radius:9px;background:var(--surface);min-width:0;display:flex;flex-direction:column }
.lab-card-meta { display:flex;align-items:center;gap:12px;font-size:11px;text-transform:capitalize;color:var(--muted);margin-bottom:20px }
.lab-index { font:12px var(--mono);color:var(--accent) }
.lab-library-card h2 { font-size:23px;line-height:1.4;margin:0 0 17px }
.lab-library-card>p { font-size:14px;line-height:1.9 }
.lab-outcome { border-top:1px solid var(--border);padding-top:20px }
.lab-outcome strong { font-size:12px }
.lab-outcome p { font-size:13px;line-height:1.9;margin-top:9px }
.lab-library-commands { margin:8px 0 24px }
.lab-library-commands summary { cursor:pointer;font-size:13px;font-weight:650 }
.lab-library-commands p { font-size:13px;line-height:1.8;margin-top:16px }
.lab-library-commands .code-block pre { font-size:11px;padding:16px }
.lab-library-commands .lab-files { padding:16px 0 0 }
.lab-card-actions { display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-top:auto;padding-top:20px;border-top:1px solid var(--border) }
.lab-card-actions .button,
.lab-card-actions .text-link { font-size:13px }
.lab-library>.fine-print { margin-top:35px }
.assessment-dialog,
.diagram-dialog,
.file-dialog { background:var(--surface);color:var(--ink);border:1px solid var(--border);border-radius:12px;box-shadow:0 35px 100px #1c102e33;padding:28px;max-height:90dvh;overflow:auto }
.assessment-dialog { width:min(570px,calc(100% - 32px)) }
dialog:not([open]) { display:none }
dialog::backdrop { background:#18121e90;backdrop-filter:blur(3px) }
.dialog-top,
.viewer-top { display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px }
.dialog-top .eyebrow { margin:0 }
.assessment-dialog h2 { font-size:28px;letter-spacing:-.03em;line-height:1.3;margin-bottom:17px }
.assessment-dialog p { font-size:14px;line-height:1.9;color:var(--muted) }
.assessment-question { border:0;border-top:1px solid var(--border);padding:16px 0 8px;margin:18px 0 0 }
.assessment-question legend { font-size:14px;font-weight:600;padding-top:15px;line-height:1.8 }
.assessment-options { display:flex;gap:25px;flex-wrap:wrap;margin-top:8px }
.assessment-options label { display:flex;align-items:center;gap:8px;font-size:13px;min-height:40px }
.assessment-options input { width:16px;height:16px;accent-color:var(--accent) }
.dialog-actions { display:flex;gap:12px;flex-wrap:wrap;margin-top:24px }
.assessment-result h3 { font-size:22px;margin:20px 0 15px }
.diagram-dialog,
.file-dialog { width:min(1120px,calc(100% - 32px)) }
.viewer-top h2 { font-size:22px;line-height:1.5;margin:0;min-width:0;overflow-wrap:anywhere }
.viewer-controls { display:flex;align-items:center;gap:14px;margin:15px 0 }
.viewer-controls .button { min-width:44px }
.viewer-controls output { min-width:55px;text-align:center;font:12px var(--mono) }
.diagram-modal-canvas { max-height:63dvh;overflow:auto;background:#fff;border:1px solid var(--border);border-radius:7px;padding:15px }
.diagram-modal-canvas img { max-width:none;display:block;height:auto;margin:auto }
.diagram-dialog>p { font-size:14px;color:var(--muted);line-height:1.8;margin-top:18px }
.file-dialog>pre { max-height:60dvh;overflow:auto;font:12px/1.9 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;padding:20px;background:var(--soft);border:1px solid var(--border);border-radius:7px }
.file-dialog>.button { margin:18px 0 }
.file-dialog #file-preview-status { font-size:14px;line-height:1.8 }
.toast { position:fixed;z-index:100;bottom:24px;left:50%;transform:translate(-50%,15px);max-width:calc(100% - 32px);padding:13px 20px;border-radius:8px;background:#292230;color:#fff;font-size:13px;line-height:1.8;opacity:0;pointer-events:none;box-shadow:0 4px 22px #0002;transition:opacity .2s,transform .2s }
.toast.show { opacity:1;transform:translate(-50%,0) }
.storage-notice { padding:12px max(24px,calc((100vw - 1184px)/2));font-size:12px;line-height:1.9;background:#fff3d9;border-bottom:1px solid #d7bc7d;color:#6c4c11 }
.loading-state,
.error-state { max-width:800px;margin:auto;padding:100px 28px;min-height:65vh }
.error-state h1 { font:470 44px/1.2 var(--display);margin-bottom:22px }
.error-state p { font-size:16px;line-height:1.9;color:var(--muted);margin-bottom:25px }
@media(min-width:1600px) {
  .article-section p,
  .article-section li { font-size:17px }
}
@media(max-width:1280px) {
  .reader-layout { padding-right:36px }
  .lesson-article { max-width:760px }
  .lesson-toc { position:static;width:auto;display:flex;flex-direction:row;flex-wrap:wrap;gap:10px 20px;border:0;border-bottom:1px solid var(--border);padding:0 0 18px;margin:0 0 25px;font-size:12px }
  .lesson-toc>span { display:none }
}
@media(max-width:1000px) {
  .app-rail { display:flex;z-index:60;top:0;bottom:0;left:0;width:290px;padding:24px 22px;background:var(--surface);transform:translateX(-100%);transition:transform .25s cubic-bezier(.2,.7,.3,1);border-right:1px solid var(--border) }
  .app-rail.open { transform:none }
  .rail-content { padding-right:6px }
  .rail-brand-row { display:flex;justify-content:space-between;align-items:center;margin-bottom:27px }
  .rail-brand-row .brand { display:flex;gap:10px;align-items:center;color:var(--ink);font-size:16px;font-weight:700 }
  .rail-close { display:inline-grid;border:1px solid var(--border);border-radius:5px;background:none;width:32px;height:32px }
  .primary-nav { display:flex;flex-direction:column;gap:4px;border-bottom:1px solid var(--border);padding-bottom:20px;margin-bottom:22px }
  .primary-nav a { display:flex;align-items:center;gap:12px;padding:9px 0;font-size:14px;min-height:42px }
  .primary-nav a.active { color:var(--accent);font-weight:650 }
  .rail-backdrop { display:block;position:fixed;z-index:50;inset:0;border:0;background:#1e142d70 }
  .drawer-open { overflow:hidden }
  .reader-layout { padding:38px 28px 75px }
  .lesson-article { max-width:740px;margin:auto }
  .assessment-inline { font-size:12px }
  .lab-library-card { padding:24px }
  .lab-library-card h2 { font-size:22px }
}
@media(max-width:700px) {
  .assessment-inline { font-size:13px;margin-top:16px }
  .copy-button { font-size:11px;min-height:36px;padding:6px 9px }
  .reader-layout { padding:27px 24px 55px }
  .breadcrumb { font-size:11px;margin-bottom:19px;gap:15px }
  .lesson-heading h1 { font-size:32px;line-height:1.22;letter-spacing:-.035em }
  .lesson-top-meta { gap:6px 13px;font-size:10px;margin:17px 0 }
  .lesson-top-meta>span:first-child { display:none }
  .lesson-goal { font-size:15px;line-height:1.9;margin-bottom:22px;padding-bottom:19px }
  .lesson-toc { font-size:11px;gap:5px 18px;margin-bottom:23px;padding-bottom:15px }
  .lesson-toc a { padding:3px 0 }
  .article-section { margin:29px 0;scroll-margin-top:88px }
  .article-section h2 { font-size:23px;margin-bottom:17px }
  .article-section p,
  .article-section li { font-size:15px;line-height:1.9 }
  .article-section-heading { display:block }
  .tiny-label { display:block;font-size:10px;margin-bottom:16px }
  .code-header { font-size:11px;padding:10px 13px;gap:15px }
  .code-header small { display:none }
  .code-block pre { font-size:11px;padding:18px;line-height:1.95 }
  .worked-example { padding-left:17px }
  .worked-example h2 { font-size:21px }
  .expected-output pre { font-size:11px;padding:16px }
  .output-label { font-size:10px;padding:10px 14px }
  .practice-box { padding:21px }
  .practice-label { font-size:11px }
  .lab-workbench-heading { padding:22px 19px }
  .lab-workbench-heading h2 { font-size:21px }
  .lab-workbench-heading p { font-size:13px }
  .lab-downloads .button { font-size:12px }
  .lab-commands { padding:0 18px!important }
  .lab-commands>li>p { font-size:13px }
  .lab-files { padding:18px }
  .file-link { font-size:10px }
  .lab-takeaway { padding:0 18px 20px;font-size:12px!important }
  .reference-solution summary { font-size:14px }
  .reference-solution>div { font-size:14px }
  .knowledge-check { padding:21px }
  .lesson-quiz legend { font-size:15px }
  .quiz-option { font-size:13px;padding:13px 12px;gap:11px }
  .quiz-feedback p { font-size:13px!important }
  .troubleshooting summary { font-size:14px }
  .troubleshooting p { font-size:13px }
  .lesson-note p { font-size:12px }
  .lesson-completion { display:block;padding:24px 0 }
  .lesson-completion p { margin-top:16px;font-size:11px }
  .lesson-navigation { gap:22px;margin-top:20px }
  .lesson-navigation strong { font-size:12px }
  .lesson-navigation span { font-size:10px }
  .mapping-note summary { font-size:11px;gap:8px 12px }
  .mapping-label { font-size:9px }
  .mapping-note>div { font-size:13px }
  .lesson-diagram { padding:22px 0;margin:29px 0 }
  .diagram-heading { display:block;margin-bottom:15px }
  .diagram-heading h3 { font-size:17px }
  .diagram-heading .button { margin-top:15px;min-height:38px;font-size:11px }
  .diagram-viewport { padding:8px }
  .diagram-hint { font-size:10px }
  .lesson-diagram figcaption { font-size:12px }
  .source-page { padding:40px 24px 60px }
  .source-page>h1 { font-size:43px }
  .source-page .source-lead { font-size:17px }
  .source-page p,
  .source-page li { font-size:14px }
  .source-page h2 { font-size:23px }
  .notice { padding:21px }
  .notice p { font-size:13px }
  .coverage-row { display:block }
  .coverage-original { display:block;max-width:none;margin-top:14px;font-size:11px!important }
  .coverage-row p { font-size:12px }
  .coverage-row a { font-size:13px }
  .lab-library-grid { grid-template-columns:1fr;gap:20px }
  .lab-library-card { padding:24px }
  .lab-library-card h2 { font-size:22px }
  .lab-library-intro { padding:23px 0;margin:28px 0 34px }
  .lab-library-intro p { font-size:13px }
  .lab-card-actions { gap:18px }
  .lab-card-actions .button,
  .lab-card-actions .text-link { font-size:12px }
  .assessment-dialog,
  .diagram-dialog,
  .file-dialog { padding:22px;width:calc(100% - 24px);max-height:92dvh }
  .assessment-dialog h2 { font-size:25px }
  .assessment-question legend { font-size:13px }
  .assessment-options { gap:17px }
  .assessment-options label { font-size:12px }
  .viewer-top h2 { font-size:18px }
  .viewer-controls { gap:11px }
  .viewer-controls .text-button { font-size:12px }
  .diagram-dialog>p { font-size:12px }
  .diagram-modal-canvas { max-height:58dvh;padding:10px }
  .file-dialog>pre { font-size:11px;padding:16px }
  .source-links a { font-size:13px }
  .toast { font-size:12px }
  .storage-notice { font-size:11px;padding:11px 24px }
  .error-state h1 { font-size:36px }
}
@media(max-width:370px) {
  .reader-layout,
  .source-page { padding-left:21px;padding-right:21px }
  .lesson-heading h1 { font-size:29px }
  .lesson-goal { font-size:14px }
  .lesson-toc { font-size:10px }
}
@media(prefers-reduced-motion:reduce) {
  .reader-layout,
  .reader-layout *,
  .reader-layout *::before,
  .reader-layout *::after,
  .app-rail,
  .app-rail *,
  .app-rail *::before,
  .app-rail *::after,
  .source-page,
  .source-page *,
  .source-page *::before,
  .source-page *::after,
  .guide-prose,
  .guide-prose *,
  .guide-prose *::before,
  .guide-prose *::after,
  dialog,
  dialog *,
  dialog *::before,
  dialog *::after,
  .toast { animation:none!important;transition:none!important }
}
@media print {
  .app-rail,
  .lesson-toc,
  .diagram-heading .button { display:none!important }
  .reader-layout { padding:0;max-width:none }
  .article-section { break-inside:avoid }
  .diagram-viewport { overflow:visible }
  .diagram-viewport img { max-width:100% }
}
.toc-toggle { display:none }
@media(max-width:1000px) {
  .toc-toggle { display:inline-flex;gap:12px;align-items:center;min-height:42px;font-size:12px;background:none;border:0;color:var(--accent);padding:3px 0;margin:0 0 15px }
  .toc-toggle .icon { width:14px;height:14px;transition:transform .25s }
  .toc-toggle[aria-expanded=true] .icon { transform:rotate(180deg) }
  .lesson-toc { display:none }
  .toc-open .lesson-toc { display:flex }
}
@media(max-width:370px) {
  .reader-layout { padding-left:16px;padding-right:16px }
  .diagram-viewport { padding:0;border:0 }
}
.lab-library-card,
.practice-box,
.knowledge-check,
.app-rail { transition:background-color .25s ease,color .25s ease,border-color .25s ease }
.source-page a.button-solid,
.source-page a.button-success { color:var(--on-accent) }
.viewer-controls { flex-wrap:wrap;gap:8px 18px }
.viewer-zoom { display:flex;gap:12px;align-items:center }
.viewer-zoom .button { width:44px;min-width:44px;min-height:44px;padding:8px }
.diagram-dialog>.diagram-modal-hint { font-size:12px;margin:0 0 15px }
@media(max-width:700px) {
  .viewer-controls { display:grid;grid-template-columns:1fr 1fr;gap:2px 16px }
  .viewer-zoom { grid-column:1/-1 }
  .viewer-controls>.text-button { font-size:12px;min-height:36px }
}
.source-page p a:not(.button) { text-decoration:underline;text-underline-offset:4px }
.article-section pre code { font:inherit;color:inherit;background:none;padding:0;border-radius:0 }
.copy-button { font-size:13px;min-height:44px }
.code-block pre,
.lab-library-commands .code-block pre,
.expected-output pre,
.file-dialog>pre { font-size:13px }
.diagram-heading .button { font-size:13px;min-height:44px }
.lesson-diagram summary { font-size:13px;min-height:44px;align-content:center }
.file-link { font-size:12px;min-height:44px }
.article-section,
.reference-solution,
.lesson-diagram { scroll-margin-top:0 }
@media(max-width:700px) {
  .article-section p,
  .article-section li { font-size:16px }
  .copy-button { font-size:13px;min-height:44px }
  .code-block pre,
  .lab-library-commands .code-block pre,
  .expected-output pre,
  .file-dialog>pre { font-size:13px }
  .diagram-heading .button { font-size:13px;min-height:44px }
  .file-link { font-size:12px;min-height:44px }
}
@media(prefers-reduced-motion:reduce) {
  .lab-library-card,
  .practice-box,
  .knowledge-check,
  .app-rail { transition:none }
}

/* Retained source: assets/reference/reference-fidelity.css */
.guide-language-nav { display:flex;flex-wrap:wrap;gap:.7rem 1.2rem;margin:1.5rem 0;font-size:.9rem }
.guide-language-nav [aria-current=page] { color:var(--green);text-decoration:underline;text-underline-offset:5px }
.guide-scope { padding:1rem 1.2rem;border:1px solid var(--green-line);border-radius:.6rem;background:var(--green-tint-03);font-size:.85rem!important }
.guide-prose { max-width:780px;margin:2rem auto 3rem;line-height:1.9;overflow-wrap:anywhere }
.guide-prose h2 { font:480 2rem/1.3 var(--display);margin:2.5rem 0 1rem }
.guide-prose h3 { font:480 1.6rem/1.4 var(--display);margin:2rem 0 1rem }
.guide-prose p,
.guide-prose ul,
.guide-prose ol { margin:0 0 1.2rem }
.guide-prose li { margin:.4rem 0 }
.guide-prose ul,
.guide-prose ol { padding-left:1.5rem }
.guide-prose a { color:var(--green);text-decoration:underline;text-underline-offset:3px }
.guide-prose .code-block { margin:1.4rem 0 }
.guide-prose pre { white-space:pre-wrap;overflow-wrap:anywhere }
.guide-table { max-width:100%;overflow:auto }
.guide-table table { border-collapse:collapse;width:100% }
.guide-table th,
.guide-table td { text-align:left;padding:.7rem;border-bottom:1px solid var(--line) }