/* Neutral navigation glass over one continuous reading surface. */
:root{--chrome-ink:#37383b;--chrome-muted:#727378;--chrome-line:rgba(80,80,84,.12);--app-paper:#fafafa;--stage:radial-gradient(ellipse at 12% 4%,#f2f2f3,transparent 62%),#dedee1;--glass-bg:rgba(247,247,248,.66);--glass-edge:rgba(255,255,255,.92);--glass-shadow:rgba(34,34,38,.09);--selected-bg:rgba(255,255,255,.76);--nav-hover:rgba(86,86,92,.075);--nav-fill:rgba(109,109,117,.08);--nav-focus:#74747c;--nav-raised:linear-gradient(155deg,rgba(255,255,255,.82),rgba(247,247,249,.3));--nav-depth:inset 0 1px 1px rgba(255,255,255,.95),inset 0 -1px 2px rgba(80,80,88,.055),0 5px 15px -6px rgba(36,36,44,.18),0 1px 3px rgba(36,36,44,.045)}
:root[data-theme=dark]{--chrome-ink:#e2e2e5;--chrome-muted:#a3a3ab;--chrome-line:rgba(210,210,216,.12);--app-paper:#232326;--stage:radial-gradient(ellipse at 12% 4%,#39393e,transparent 62%),#1b1b1e;--glass-bg:rgba(58,58,63,.65);--glass-edge:rgba(240,240,248,.18);--glass-shadow:rgba(0,0,0,.24);--selected-bg:rgba(210,210,220,.13);--nav-hover:rgba(218,218,226,.08);--nav-fill:rgba(180,180,192,.06);--nav-focus:#bbbbc3;--nav-raised:linear-gradient(155deg,rgba(104,104,114,.32),rgba(66,66,74,.21));--nav-depth:inset 0 1px 1px rgba(240,240,250,.15),inset 0 -1px 2px rgba(0,0,0,.13),0 5px 16px -5px rgba(0,0,0,.3),0 1px 3px rgba(0,0,0,.14)}
@media(prefers-color-scheme:dark){:root[data-theme=auto]{--chrome-ink:#e2e2e5;--chrome-muted:#a3a3ab;--chrome-line:rgba(210,210,216,.12);--app-paper:#232326;--stage:radial-gradient(ellipse at 12% 4%,#39393e,transparent 62%),#1b1b1e;--glass-bg:rgba(58,58,63,.65);--glass-edge:rgba(240,240,248,.18);--glass-shadow:rgba(0,0,0,.24);--selected-bg:rgba(210,210,220,.13);--nav-hover:rgba(218,218,226,.08);--nav-fill:rgba(180,180,192,.06);--nav-focus:#bbbbc3;--nav-raised:linear-gradient(155deg,rgba(104,104,114,.32),rgba(66,66,74,.21));--nav-depth:inset 0 1px 1px rgba(240,240,250,.15),inset 0 -1px 2px rgba(0,0,0,.13),0 5px 16px -5px rgba(0,0,0,.3),0 1px 3px rgba(0,0,0,.14)}}
.app-window{border:0;background:var(--app-paper);box-shadow:0 24px 64px -24px rgba(20,20,26,.25),0 4px 14px rgba(20,20,26,.06)}
.reader-main{background:transparent}
.course-sidebar,.page-toc,.reader-bar,.app-status{border:0;box-shadow:none;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
/* Fade the scrolling text without drawing a rectangular toolbar. */
.reader-bar{isolation:isolate}
.reader-bar::before{content:'';position:absolute;inset:0 0 -12px;z-index:-1;pointer-events:none;background:var(--app-paper);mask-image:linear-gradient(#000 45%,transparent);-webkit-mask-image:linear-gradient(#000 45%,transparent)}
.app-status{color:var(--chrome-muted)}
.sidebar-bottom,.sidebar-title span,.chapter-header{border:0}
.inspector-divider{background:transparent;height:0}
.brand-mark{background:var(--nav-raised);box-shadow:var(--nav-depth);color:var(--chrome-ink)}
/* Scoped tokens leave semantic colors in the teaching diagrams intact. */
.course-sidebar,.reader-bar,.page-toc,.appearance-panel,.command-dialog,.app-toast{--accent:var(--chrome-ink);--accent-soft:var(--nav-hover);--on-accent:var(--app-paper)}
.glass{border:0;color:var(--chrome-ink)}
.toolbar-group,.view-switch,.chapter-filter,.season-switch,.inspector-tabs{border:0;background:var(--nav-raised);box-shadow:var(--nav-depth);-webkit-backdrop-filter:blur(22px) saturate(1.15);backdrop-filter:blur(22px) saturate(1.15)}
.tool-button:hover,.view-switch button:hover{background:var(--nav-hover);color:var(--chrome-ink)}
.tool-button[aria-pressed=true],.tool-button[aria-expanded=true]{background:var(--selected-bg);color:var(--chrome-ink)}
#chapterSidebar button{border:0;color:var(--chrome-ink)}
#chapterSidebar button[aria-current=page],.page-toc nav a[aria-current=true],#inspectorQuestions button[aria-current=page],.season-switch a[aria-current=page],.inspector-tabs button[aria-pressed=true],.view-switch button[aria-pressed=true]{border:0;color:var(--chrome-ink);background:var(--selected-bg);box-shadow:var(--nav-depth);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
#chapterSidebar button[aria-current=page] span{color:var(--chrome-ink)}
#chapterSidebar button:hover,.page-toc nav a:hover,#inspectorQuestions button:hover{background:var(--nav-hover);color:var(--chrome-ink)}
#chapterSidebar button.passed i,.status-dot{background:var(--chrome-muted)}
.chapter-filter{box-shadow:none;background:var(--nav-fill);border-radius:12px}
.inspector-tabs{border-radius:14px;padding:4px}.inspector-tabs button{border-radius:10px}
.page-toc nav a,#inspectorQuestions button{border-radius:12px}
.command-dialog,.appearance-panel{background:var(--glass-bg);border:0;box-shadow:var(--nav-depth),0 24px 70px -22px var(--glass-shadow)}
.command-input{border:0;background:var(--nav-fill);box-shadow:none}.command-dialog footer,.setting-row{border:0}.setting-row select{border:0;background:var(--nav-fill)}
#readingSize{accent-color:var(--chrome-ink)}.setting-row input[role=switch]:checked{background:var(--chrome-muted)}
:is(.reader-bar,.course-sidebar,.page-toc,.appearance-panel,.command-dialog) :is(button,a,input,select):focus-visible,.command-input:focus-within,.chapter-filter:focus-within{outline:2px solid var(--nav-focus);outline-offset:3px}
.question-index-heading,.question-outline,.question-pager,.experiment-return{--accent:var(--chrome-ink);--accent-soft:var(--nav-hover)}
#questionOutline button[aria-current=page]{color:var(--chrome-ink);background:var(--nav-hover);border-color:transparent}
.question-pager button,.experiment-return button,.course #openExperiment{border:0;background:var(--nav-raised);box-shadow:var(--nav-depth);color:var(--chrome-ink);border-radius:20px}
.experiment-invitation{background:var(--nav-fill)}.experiment-invitation>div>.icon{color:var(--chrome-muted)}
@media(max-width:1120px){.page-toc{background:var(--glass-bg);-webkit-backdrop-filter:blur(32px);backdrop-filter:blur(32px);box-shadow:-12px 0 50px -20px var(--glass-shadow)}}
@media(max-width:800px){.app-window{box-shadow:none}.course-sidebar{background:var(--glass-bg);-webkit-backdrop-filter:blur(32px);backdrop-filter:blur(32px);box-shadow:12px 0 50px -20px var(--glass-shadow)}.toolbar-group{box-shadow:var(--nav-depth)}}
:root[data-opaque=true] :is(.toolbar-group,.view-switch,.chapter-filter,.season-switch,.inspector-tabs,.command-dialog,.appearance-panel),:root[data-opaque=true] :is(#chapterSidebar button[aria-current=page],.page-toc nav a[aria-current=true],#inspectorQuestions button[aria-current=page]){-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--bg-soft)}
:root[data-opaque=true] :is(.course-sidebar,.page-toc,.reader-bar){background:var(--app-paper);border:0}
@supports not (backdrop-filter:blur(1px)){.toolbar-group,.view-switch,.command-dialog,.appearance-panel{background:var(--bg-soft)}.course-sidebar,.page-toc{background:var(--app-paper)}}
@media(prefers-contrast:more){:is(.toolbar-group,.view-switch,.command-dialog,.appearance-panel){background:var(--app-paper);box-shadow:0 0 0 1px var(--chrome-muted);backdrop-filter:none}#chapterSidebar button[aria-current=page],.page-toc nav a[aria-current=true]{text-decoration:underline;text-underline-offset:4px}}
/* One quiet native picker beside the course title; the full names live in its menu. */
.sidebar-title{margin-top:5px;margin-bottom:7px}
.season-picker{position:relative;display:inline-flex;align-items:center;gap:4px;padding:5px 6px;margin-left:auto;border-radius:7px;color:var(--chrome-muted);font-size:10px;font-weight:400;line-height:1.4;cursor:pointer;flex-shrink:0}
.sidebar-title .season-picker>span{padding:0;border:0;color:inherit;font-size:inherit}
.season-picker>svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.season-picker>select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font:inherit}
.season-picker:hover{background:var(--nav-hover);color:var(--chrome-ink)}
.season-picker:focus-within{outline:2px solid var(--nav-focus);outline-offset:2px}