/* A Mac-inspired application shell. Glass belongs to navigation, not prose. */
:root{--reading-size:16px;--sidebar:250px;--inspector:224px;--window-inset:18px;--toolbar-h:76px;--glass-bg:rgba(244,248,250,.62);--glass-edge:rgba(255,255,255,.88);--glass-shadow:rgba(42,64,83,.13);--chrome-ink:#384957;--chrome-muted:#657682;--app-paper:rgba(255,255,255,.96);--stage:radial-gradient(ellipse at 3% 5%,#c9e2e5 0,transparent 50%),radial-gradient(ellipse at 95% 95%,#ebd9c9 0,transparent 50%),#dce3ed;--selected-bg:rgba(255,255,255,.89);--chrome-line:rgba(78,101,119,.14)}
:root[data-theme=dark]{--glass-bg:rgba(36,47,56,.68);--glass-edge:rgba(221,240,255,.16);--glass-shadow:rgba(3,8,16,.3);--chrome-ink:#e1e9ef;--chrome-muted:#a4b3c1;--app-paper:rgba(28,31,35,.97);--stage:radial-gradient(ellipse at 3% 5%,#234752 0,transparent 55%),radial-gradient(ellipse at 95% 95%,#4c3e43 0,transparent 55%),#182330;--selected-bg:rgba(159,190,219,.16);--chrome-line:rgba(192,215,235,.13)}
@media(prefers-color-scheme:dark){:root[data-theme=auto]{--glass-bg:rgba(36,47,56,.68);--glass-edge:rgba(221,240,255,.16);--glass-shadow:rgba(3,8,16,.3);--chrome-ink:#e1e9ef;--chrome-muted:#a4b3c1;--app-paper:rgba(28,31,35,.97);--stage:radial-gradient(ellipse at 3% 5%,#234752 0,transparent 55%),radial-gradient(ellipse at 95% 95%,#4c3e43 0,transparent 55%),#182330;--selected-bg:rgba(159,190,219,.16);--chrome-line:rgba(192,215,235,.13)}}
html,body{height:100%;overflow:hidden}body{background:var(--stage);font-size:14px}body::before{content:'';position:fixed;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.28),transparent 40%,rgba(255,255,255,.08));pointer-events:none}.app-window{--side-width:var(--sidebar);--inspector-width:var(--inspector);position:relative;isolation:isolate;display:grid;grid-template-columns:var(--side-width) minmax(0,1fr) var(--inspector-width);grid-template-rows:minmax(0,1fr) 30px;height:calc(100dvh - 2 * var(--window-inset));margin:var(--window-inset);overflow:hidden;border:1px solid var(--glass-edge);border-radius:20px;background:rgba(255,255,255,.06);box-shadow:0 24px 65px -22px rgba(28,50,68,.35),0 3px 10px rgba(28,50,68,.1),inset 0 1px rgba(255,255,255,.45)}
.glass{background:var(--glass-bg);-webkit-backdrop-filter:blur(26px) saturate(1.5);backdrop-filter:blur(26px) saturate(1.5);border:1px solid var(--glass-edge);box-shadow:inset 0 1px 1px rgba(255,255,255,.25),inset 0 -1px 1px rgba(80,115,137,.06),0 2px 8px var(--glass-shadow);color:var(--chrome-ink)}
button{touch-action:manipulation}button,.tool-button{transition:background .15s ease,box-shadow .15s ease,transform .15s ease}button:active:not(:disabled){transform:scale(.97)}.tool-button{border:0;background:transparent;width:32px;height:32px;min-width:32px;padding:7px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;color:var(--chrome-ink);cursor:pointer}.tool-button .icon{width:17px;height:17px}.tool-button:hover{background:rgba(119,149,171,.14)}.tool-button[aria-pressed=true]{background:var(--accent-soft);color:var(--accent)}.tool-button:disabled{opacity:.32}
.course-sidebar{position:relative;inset:auto;grid-column:1;grid-row:1/3;width:var(--sidebar);height:100%;padding:0 12px 16px;z-index:30;border-right:1px solid var(--chrome-line);background:var(--glass-bg);-webkit-backdrop-filter:blur(32px) saturate(1.6);backdrop-filter:blur(32px) saturate(1.6);transform:none;overflow:hidden;color:var(--chrome-ink)}.course-sidebar .brand{height:76px;min-height:76px;border:0;padding:0 10px;gap:10px;font-size:12px;color:var(--chrome-ink)}.brand-mark{width:32px;height:32px;border-radius:9px;background:linear-gradient(145deg,#69aeed,#2e73ca 65%);box-shadow:inset 0 1px rgba(255,255,255,.65),0 3px 7px rgba(36,94,151,.18)}.brand-mark .icon{width:19px;height:19px}.library-label{font-size:10px;letter-spacing:.035em;color:var(--chrome-muted);padding:12px 12px 5px}.sidebar-title{font-size:19px;margin:0 12px 3px;color:var(--chrome-ink);display:flex;align-items:center;gap:9px}.sidebar-title span{font-size:10px;font-weight:500;color:var(--chrome-muted);padding:1px 5px;border:1px solid var(--chrome-line);border-radius:4px}.sidebar-subtitle{font-size:11px;margin:0 12px 20px;color:var(--chrome-muted)}.chapter-filter{border:1px solid var(--chrome-line);background:rgba(133,154,172,.09);box-shadow:inset 0 1px 3px rgba(20,49,71,.05);border-radius:9px;padding:8px 9px;margin:0 9px 15px}.chapter-filter input{color:var(--chrome-ink);font-size:11px}.chapter-filter .icon{color:var(--chrome-muted)}#chapterSidebar{padding:0 4px;scrollbar-width:thin;scrollbar-color:var(--chrome-line) transparent}.sidebar-group{font-size:10px;color:var(--chrome-muted);padding:18px 9px 8px;font-weight:600}#chapterSidebar button{font-size:11px;gap:9px;line-height:1.45;padding:9px 10px;margin:3px 0;border-radius:9px;color:var(--chrome-ink)}#chapterSidebar button span{font-size:10px;color:var(--chrome-muted);width:15px}#chapterSidebar button:hover{background:rgba(133,154,172,.12)}#chapterSidebar button[aria-current=page]{background:var(--selected-bg);color:var(--accent);box-shadow:0 2px 5px rgba(38,58,75,.05),inset 0 1px var(--glass-edge);font-weight:600}#chapterSidebar button[aria-current=page] span{color:var(--accent)}.sidebar-bottom{margin:14px 10px 0;padding-top:14px;border-color:var(--chrome-line);font-size:10px;color:var(--chrome-muted);gap:8px}.sidebar-bottom a{color:var(--chrome-muted)}.sidebar-close{display:none}.chapter-filter-empty{font-size:11px;padding:12px;color:var(--chrome-muted)}
.reader-main{grid-column:2;grid-row:1;margin:0;width:auto;min-width:0;overflow:hidden;background:var(--app-paper);display:block}.reader-scroll{height:100%;overflow:auto;overscroll-behavior:contain;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent;outline:none!important;scroll-padding-top:95px}.reader-bar{position:absolute;inset:0 0 auto var(--side-width);height:var(--toolbar-h);max-width:none;z-index:35;padding:0 22px;display:flex;gap:18px;align-items:center;justify-content:space-between;background:linear-gradient(to bottom,var(--glass-bg),color-mix(in srgb,var(--glass-bg) 80%,transparent));border:0;box-shadow:inset 0 1px var(--glass-edge),0 1px 0 var(--chrome-line);-webkit-backdrop-filter:blur(24px) saturate(1.5);backdrop-filter:blur(24px) saturate(1.5)}.toolbar-leading,.toolbar-trailing{display:flex;align-items:center;gap:10px;min-width:0}.toolbar-leading{flex:1}.toolbar-trailing{flex:1;justify-content:flex-end}.toolbar-group{display:flex;align-items:center;border-radius:30px;padding:3px;gap:1px;flex-shrink:0}.window-title{display:flex;flex-direction:column;gap:2px;min-width:0;margin-left:2px;color:var(--chrome-ink);line-height:1.4}.window-title strong{font-size:12px;font-weight:650;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.window-title span{font-size:10px;color:var(--chrome-muted)}#sidebarToggle{display:inline-flex;font-size:inherit;padding:7px;color:var(--chrome-ink);letter-spacing:0}.view-switch{border-radius:26px;padding:4px;display:flex;align-items:center;position:relative;flex-shrink:0;gap:3px;background:rgba(127,150,169,.12);box-shadow:inset 0 1px 3px rgba(47,68,84,.08);border-color:var(--chrome-line)}.view-switch button{display:flex;align-items:center;justify-content:center;gap:7px;font-size:12px;line-height:1;padding:10px 17px;border:0;border-radius:22px;background:transparent;color:var(--chrome-muted);cursor:pointer;min-width:84px}.view-switch .icon{width:15px;height:15px}.view-switch button[aria-pressed=true]{background:var(--selected-bg);box-shadow:0 2px 6px rgba(23,49,71,.13),inset 0 1px var(--glass-edge);color:var(--chrome-ink);font-weight:600}.view-switch button:hover{color:var(--accent)}.view-switch button[aria-pressed=true]:active{transform:none}
.course{max-width:860px;padding:108px 44px 50px;margin:0 auto;transform:none}.chapter-header{padding:0 0 22px;margin-bottom:0;border-bottom:1px solid var(--line)}.section-number{font-size:10px;color:var(--muted);margin-bottom:7px}.chapter-story h1{font-size:20px;line-height:1.4;margin:0 0 10px;font-weight:600;letter-spacing:-.025em}.chapter-intro{font-size:13px;line-height:1.85}.question-index-heading{padding:14px 0 8px;font-size:10px;gap:8px}.course .question-index-heading button{font-size:10px}.question-reading{padding-top:22px}.question-reading h2{font-size:32px;line-height:1.4;letter-spacing:-.035em;margin:10px 0 21px;font-weight:650}.question-reading .lesson-lead{font-size:calc(var(--reading-size) + 1px);line-height:1.9;margin-bottom:30px}.question-reading p{font-size:var(--reading-size);line-height:1.95}.question-reading h3{font-size:20px;margin-bottom:13px}.question-reading .worked-example{padding:24px 26px;background:var(--bg-soft);border-radius:12px}.question-reading .worked-example h3{font-size:17px}.question-reading .lesson-sources{font-size:11px}.course details p{font-size:13px}.learning-steps{grid-template-columns:1fr 1fr;margin-top:8px;padding:24px 0 4px;gap:24px}.learning-steps p{font-size:12px}.learning-steps b{font-size:11px}.question-pager{margin:30px 0}.course-sources{font-size:11px}#questionAnswers,#understand,#example,#interpret,#activities,#check,.chapter-story{scroll-margin-top:90px}
.page-toc{position:relative;inset:auto;width:var(--inspector);grid-column:3;grid-row:1/3;display:flex;flex-direction:column;gap:0;padding:91px 18px 16px;margin:0;z-index:20;overflow:auto;scrollbar-width:thin;border:0;border-left:1px solid var(--chrome-line);box-shadow:none}.inspector-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;min-height:28px}.inspector-heading strong{font-size:12px;font-weight:650}.inspector-heading .tool-button{width:24px;height:24px;min-width:24px;padding:5px;color:var(--chrome-muted)}.inspector-heading .icon{width:13px;height:13px}.inspector-tabs{display:flex;background:rgba(126,151,170,.13);padding:3px;border-radius:8px;gap:3px;margin-bottom:25px}.inspector-tabs button{flex:1;border:0;background:transparent;font-size:10px;color:var(--chrome-muted);padding:6px 4px;border-radius:6px;white-space:nowrap}.inspector-tabs button[aria-pressed=true]{background:var(--selected-bg);box-shadow:0 1px 3px rgba(25,48,67,.1);color:var(--chrome-ink)}.inspector-caption{font-size:10px;color:var(--chrome-muted);margin:0 7px 11px;font-weight:500}.page-toc nav{display:flex;flex-direction:column;gap:3px}.page-toc nav a{font-size:11px;line-height:1.6;padding:8px 10px;border-radius:7px;color:var(--chrome-muted);margin:0;text-decoration:none}.page-toc nav a:hover{color:var(--chrome-ink);background:rgba(133,154,172,.12)}.page-toc nav a[aria-current=true]{background:var(--selected-bg);color:var(--accent);box-shadow:0 1px 3px rgba(25,48,67,.04)}.inspector-divider{height:1px;background:var(--chrome-line);margin:23px 7px}.page-toc p{font-size:11px;line-height:1.85;color:var(--chrome-muted);margin:0 7px}.inspector-tip{margin:28px 7px 0;display:flex;align-items:flex-start;gap:8px;color:var(--chrome-muted)}.inspector-tip .icon{width:15px;height:15px;margin-top:3px}.inspector-tip p{font-size:10px;margin:0}.inspector-footer{font-size:9px;color:var(--chrome-muted);padding:28px 7px 0;margin-top:auto}#inspectorQuestions{gap:3px}#inspectorQuestions button{display:flex;gap:9px;align-items:baseline;text-align:left;border:0;background:transparent;border-radius:7px;padding:10px 7px;color:var(--chrome-ink);font-size:11px;line-height:1.7}#inspectorQuestions button span{font-size:10px;color:var(--chrome-muted);flex-shrink:0}#inspectorQuestions button:hover{background:rgba(133,154,172,.12)}#inspectorQuestions button[aria-current=page]{background:var(--selected-bg);color:var(--accent)}
.app-status{grid-column:2;grid-row:2;margin:0;padding:0 22px;display:flex;align-items:center;justify-content:space-between;gap:18px;background:var(--bg-soft);border-top:1px solid var(--line);font-size:9px;color:var(--muted);overflow:hidden;white-space:nowrap}.app-status>span{display:flex;align-items:center;gap:6px}.status-dot{display:inline-block;width:4px;height:4px;background:var(--mint);border-radius:50%}.status-version{margin-left:auto;opacity:.7}
.sidebar-collapsed .app-window,.focus-mode .app-window{--side-width:0px}.inspector-collapsed .app-window,.focus-mode .app-window{--inspector-width:0px}.sidebar-collapsed .course-sidebar,.focus-mode .course-sidebar{visibility:hidden;pointer-events:none}.inspector-collapsed .page-toc,.focus-mode .page-toc{visibility:hidden;pointer-events:none}.focus-mode .course{max-width:830px}.sidebar-collapsed .reader-bar,.focus-mode .reader-bar{padding-left:24px}.reader-main,.app-status{min-width:0}
/* Switching views keeps the live experiment nodes mounted. */
.experiment-header{display:none;padding-bottom:28px}.experiment-header>span{font-size:10px;color:var(--accent);letter-spacing:.09em}.experiment-header h2{font-size:27px;line-height:1.45;letter-spacing:-.025em;margin:8px 0 12px}.experiment-header p{font-size:12px;color:var(--muted);margin:0}.experiment-invitation{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:21px 23px;background:var(--accent-soft);border-radius:12px;margin:8px 0 10px}.experiment-invitation>div{display:flex;align-items:center;gap:13px}.experiment-invitation>div>.icon{color:var(--accent);width:24px;height:24px}.experiment-invitation strong{font-size:13px;font-weight:600}.experiment-invitation p{font-size:11px;margin:4px 0 0;color:var(--muted)}.course #openExperiment{background:var(--accent);color:var(--on-accent);border:0;display:flex;align-items:center;gap:8px;padding:10px 14px;white-space:nowrap}.course #openExperiment .icon{width:14px;height:14px}.experiment-return{display:none;padding:28px 0 8px}.experiment-return button{display:flex;align-items:center;gap:8px}.experiment-return .icon{width:15px;height:15px}body[data-view=reading] #activities{display:none}body[data-view=experiment] #chapterStory,body[data-view=experiment] .experiment-invitation,body[data-view=experiment] #questionPractice,body[data-view=experiment] #questionPager,body[data-view=experiment] #check{display:none}body[data-view=experiment] .experiment-header,body[data-view=experiment] .experiment-return{display:block}body[data-view=experiment] .learning-steps{order:1;margin-top:24px}body[data-view=experiment] .experiment-return{order:2}body[data-has-questions=false][data-view=reading] #activities{display:block}body[data-has-questions=false][data-view=reading] .experiment-invitation{display:none}.activity-panel,.visual-shell{border-radius:14px}.activity-panel{padding:25px}.activity-panel[data-kind=requests]{padding:0}.visual-title{font-size:16px}.activity-panel h3{font-size:20px}.message-pair pre{font-size:12px}.monitor-rail{border-radius:0}.world-map{border-radius:10px}.metric-row strong{font-size:24px}
/* Modal search and an anchored settings popover. */
.command-dialog{position:fixed;inset:13vh 20px auto;width:min(620px,calc(100vw - 40px));max-height:74dvh;margin:0 auto;padding:20px;border-radius:20px;border-color:var(--glass-edge);box-shadow:0 25px 90px rgba(15,36,54,.3),inset 0 1px var(--glass-edge);color:var(--chrome-ink);overflow:hidden}.command-dialog::backdrop{background:rgba(36,53,68,.19);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.command-dialog header,.appearance-panel header{display:flex;justify-content:space-between;align-items:center;padding:0 4px 13px}.command-dialog h2,.appearance-panel h2{font-size:14px;font-weight:650;margin:0}.command-input{display:flex;align-items:center;gap:10px;background:var(--bg);border:1px solid var(--line);border-radius:11px;padding:12px 14px;color:var(--muted)}.command-input:focus-within{outline:2px solid var(--accent);outline-offset:2px}.command-input input{width:100%;border:0;background:transparent;outline:none!important;color:var(--text);font-size:15px;min-width:0}.command-input .icon{width:18px;height:18px}#searchResults{max-height:calc(74dvh - 185px);overflow:auto;margin:13px 0;scrollbar-width:thin}#searchResults p{font-size:11px;color:var(--chrome-muted);margin:8px 10px 13px}#searchResults button{display:block;width:100%;background:transparent;border:0;text-align:left;font-size:13px;color:var(--chrome-ink);padding:13px 12px;border-radius:8px;line-height:1.6}#searchResults button:hover,#searchResults button:focus-visible{background:var(--accent-soft);color:var(--accent)}.command-dialog footer{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--chrome-line);padding:12px 4px 0;font-size:10px;color:var(--chrome-muted)}kbd{border-color:var(--chrome-line);font-size:10px;white-space:nowrap}
.appearance-panel{position:fixed;top:calc(var(--window-inset) + 67px);right:calc(var(--window-inset) + 40px);width:290px;max-width:calc(100vw - 32px);padding:18px;border-radius:18px;z-index:70;box-shadow:0 18px 50px rgba(27,45,60,.2),inset 0 1px var(--glass-edge);color:var(--chrome-ink)}.appearance-panel h2{font-size:13px}.setting-row{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:13px 3px;border-top:1px solid var(--chrome-line);font-size:12px}.setting-row small{display:block;font-size:10px;color:var(--chrome-muted);margin-top:3px}.setting-row select{font-size:11px;background:var(--selected-bg);border:1px solid var(--chrome-line);border-radius:7px;color:var(--chrome-ink);padding:6px 9px}.setting-row output{font-size:11px;color:var(--chrome-muted)}#readingSize{margin:0 0 13px;accent-color:var(--accent)}.appearance-panel>p{font-size:10px;color:var(--chrome-muted);margin:12px 3px 0}.setting-row input[role=switch]{appearance:none;width:31px;height:19px;flex-shrink:0;border-radius:12px;background:rgba(110,125,140,.3);position:relative;margin:0;cursor:pointer;transition:background .15s}.setting-row input[role=switch]::after{content:'';position:absolute;width:15px;height:15px;border-radius:50%;left:2px;top:2px;background:white;box-shadow:0 1px 3px rgba(16,37,56,.2);transition:transform .15s}.setting-row input[role=switch]:checked{background:var(--accent)}.setting-row input[role=switch]:checked::after{transform:translateX(12px)}.app-toast{position:fixed;left:50%;bottom:54px;transform:translateX(-50%);z-index:80;padding:12px 20px;font-size:12px;border-radius:24px;max-width:calc(100vw - 40px);text-align:center}
:root[data-opaque=true] .glass,:root[data-opaque=true] .course-sidebar,:root[data-opaque=true] .reader-bar{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--bg-soft);border-color:var(--line)}
@supports not (backdrop-filter:blur(1px)){.glass,.course-sidebar,.reader-bar{background:var(--bg-soft)}}
@media(prefers-contrast:more){.glass,.course-sidebar,.reader-bar{background:var(--bg);backdrop-filter:none;border-color:var(--text)}.chrome-muted{color:var(--text)}}
@media(max-width:1320px){:root{--sidebar:226px;--inspector:202px}.reader-bar{padding:0 16px;gap:13px}.window-title strong{max-width:115px}.toolbar-leading,.toolbar-trailing{gap:7px}.toolbar-group{padding:2px}.tool-button{width:30px;height:30px;min-width:30px}.toolbar-trailing #copyLessonLink{display:none}.view-switch button{padding:10px 14px;min-width:76px}.course{padding-inline:35px}.page-toc{padding-inline:14px}.question-reading h2{font-size:30px}.course-sidebar .brand{font-size:11px}.sidebar-title{font-size:18px}}
@media(max-width:1120px){.app-window{--inspector-width:0px}.page-toc{position:absolute;right:0;top:0;bottom:0;left:auto;grid-column:auto;width:260px;visibility:hidden;transform:translateX(100%);z-index:60;padding-top:25px;border-radius:18px 0 0 18px;box-shadow:-15px 0 50px rgba(20,44,62,.12)}.inspector-open .page-toc{visibility:visible;transform:none;pointer-events:auto}.inspector-open #sidebarBackdrop{display:block;position:absolute;inset:0;background:rgba(20,39,55,.2);z-index:50;border:0}.window-title strong{max-width:150px}.course{max-width:820px;padding-inline:44px}.toolbar-trailing #copyLessonLink{display:none}.toolbar-trailing #focusToggle{display:none}.reader-bar{gap:12px}.window-title{margin-left:0}.toolbar-leading{gap:6px}.view-switch button{padding:10px 12px}.app-status{grid-column:2/-1}}
@media(max-width:800px){:root{--window-inset:0px;--toolbar-h:68px}.app-window{border-radius:0;border:0;margin:0;height:100dvh;--side-width:0px;--inspector-width:0px;box-shadow:none}.reader-main{grid-column:2}.app-status{grid-column:2;padding:0 18px;height:28px}.app-status>span:first-child{display:none}.app-status .status-version{display:block}.course-sidebar{position:absolute;inset:0 auto 0 0;grid-column:auto;width:min(300px,85vw);visibility:hidden;transform:translateX(-100%);z-index:60;border-radius:0 18px 18px 0;transition:transform .18s ease}.sidebar-open .course-sidebar{visibility:visible;transform:none;pointer-events:auto}.sidebar-open #sidebarBackdrop{display:block;position:absolute;inset:0;background:rgba(20,39,55,.2);z-index:50;border:0}.sidebar-close{display:flex;position:absolute;right:12px;top:82px;align-items:center;justify-content:center;border:0;width:26px;height:26px;background:var(--selected-bg);color:var(--chrome-ink);border-radius:50%;font-size:20px}.reader-bar{left:0;height:68px;padding:0 14px;gap:12px}.window-title{display:none}.toolbar-leading,.toolbar-trailing{flex:0;gap:6px}.toolbar-group{box-shadow:inset 0 1px var(--glass-edge),0 1px 4px var(--glass-shadow)}.view-switch{padding:3px;gap:1px}.view-switch button{min-width:64px;padding:10px 12px;gap:6px;font-size:11px}.view-switch .icon{width:14px;height:14px}.toolbar-trailing #inspectorToggle{display:flex}.toolbar-trailing #focusToggle{display:none}.toolbar-trailing .toolbar-group{gap:0}.toolbar-leading .toolbar-group:nth-child(2){display:none}.course{padding:92px 25px 40px;max-width:780px;margin:0 auto}.chapter-story h1{font-size:20px}.chapter-intro{font-size:13px}.question-reading h2{font-size:29px}.question-reading p{font-size:var(--reading-size)}.question-reading .lesson-lead{font-size:calc(var(--reading-size) + 1px)}.page-toc{width:min(280px,88vw)}.appearance-panel{top:62px;right:12px}.command-dialog{top:10vh;inset-inline:12px;width:calc(100vw - 24px);padding:16px}.command-dialog footer{font-size:9px}.command-input input{font-size:14px}.experiment-invitation{padding:18px;gap:14px}.experiment-invitation>div>.icon{display:none}.experiment-invitation p{max-width:160px}.course #openExperiment{font-size:11px;padding:9px 11px}.experiment-header h2{font-size:25px}.learning-steps{grid-template-columns:1fr;gap:0}.learning-steps p{font-size:12px}.sidebar-collapsed .course-sidebar{visibility:hidden}.sidebar-collapsed.sidebar-open .course-sidebar{visibility:visible}.focus-mode.inspector-open .page-toc{visibility:visible}.focus-mode .reader-bar{padding-left:14px}}
@media(max-width:410px){.reader-bar{padding:0 10px;gap:8px}.toolbar-group{padding:2px}.tool-button{width:29px;height:29px;min-width:29px;padding:6px}.view-switch button{min-width:60px;padding:9px 10px}.view-switch .icon{display:none}.toolbar-trailing{gap:5px}.toolbar-leading{gap:0}.course{padding:89px 20px 34px}.question-reading h2{font-size:27px}.question-reading .worked-example{padding:20px}.question-index-heading{font-size:10px}.experiment-invitation{align-items:flex-start;flex-direction:column;gap:13px}.experiment-invitation p{max-width:none}.experiment-header h2{font-size:24px}.activity-panel{padding:18px}.command-dialog footer>span:first-child{display:none}.command-dialog footer{justify-content:flex-end}.setting-row{font-size:12px}}
@media(prefers-reduced-motion:reduce){.reader-scroll{scroll-behavior:auto}.course-sidebar{transition:none}button:active:not(:disabled){transform:none}}
@media print{html,body{height:auto!important;overflow:visible!important;background:white!important}.app-window{display:block!important;height:auto!important;overflow:visible!important;margin:0!important;border:0!important;box-shadow:none!important}.reader-main,.reader-scroll{height:auto!important;overflow:visible!important;background:white!important}.reader-bar,.course-sidebar,.page-toc,.app-status,.experiment-invitation,.experiment-return,.appearance-panel,.command-dialog,.app-toast{display:none!important}.course{padding:0!important;transform:none!important}.reader-main{margin:0!important}body[data-view=reading] #activities{display:block}}
/* Explanatory media: diagrams for relationships, a proportional bar for composition. */
.concept-figure{margin:28px 0 36px;padding:23px 24px;border:1px solid var(--line);border-radius:13px;background:var(--bg-soft)}.concept-figure figcaption{display:grid;gap:5px;margin-bottom:20px}.concept-figure figcaption>span{font-size:10px;color:var(--muted);letter-spacing:.025em}.concept-figure figcaption strong{font-size:16px;font-weight:600}.question-reading .concept-figure>p{font-size:12px;line-height:1.8;color:var(--muted);margin:18px 0 0}.deployment-figure{display:grid;grid-template-columns:1fr 1fr;gap:18px}.deployment-figure section{border:1px dashed var(--line-strong);border-radius:10px;padding:14px;margin:0}.deployment-figure h4{margin:0 0 12px;font-size:12px;color:var(--muted);font-weight:500}.deployment-figure section>div{background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:10px 12px;font-size:12px;margin:8px 0}.deployment-figure small{display:block;color:var(--accent);font-size:10px;margin-top:3px}.communication-figure>div{padding:15px 0;border-top:1px solid var(--line)}.communication-figure b{font-size:12px;font-weight:600}.question-reading .communication-figure>div p{font-size:13px;margin:8px 0 3px;line-height:1.6}.communication-figure p span{color:var(--accent)}.communication-figure small{color:var(--muted);font-size:11px}.cost-bar{display:flex;height:16px;gap:2px;border-radius:5px;overflow:hidden}.cost-bar span{min-width:0}.cost-network{background:var(--cyan)}.cost-queue{background:var(--coral)}.cost-app{background:var(--accent)}.cost-db{background:var(--violet)}.cost-downstream{background:var(--mint)}.cost-figure dl{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:18px 0 0}.cost-figure dt{font-size:10px;color:var(--muted);line-height:1.7}.cost-figure dt i{display:inline-block;width:5px;height:5px;border-radius:50%;margin-right:4px}.cost-figure dd{font-size:19px;line-height:1.5;margin:5px 0 0;font-variant-numeric:tabular-nums;font-weight:600}.cost-figure dd small{font-size:10px;color:var(--muted);font-weight:400}@media(max-width:520px){.concept-figure{padding:18px}.concept-figure figcaption strong{font-size:15px}.cost-figure dl{grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.deployment-figure{gap:10px}.deployment-figure section{padding:10px}.deployment-figure section>div{padding:9px;font-size:10px}}