/* Neutral page, restrained color inside executable code only. */
:root {
  --reader-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  --reader-inline-bg:#ededeb;
  --reader-inline-ink:#111;
  --reader-inline-border:#c8c8c4;
}
.dark {
  --reader-inline-bg:#292929;
  --reader-inline-ink:#f5f5f2;
  --reader-inline-border:#4a4a4a;
}

pre.reader-code { background:#111!important; color:#d6d6d6!important; border:1px solid #555!important; font:14px/1.7 var(--reader-mono)!important; tab-size:4; text-align:left; overflow:auto; }
pre.reader-code code { color:inherit!important; background:transparent!important; font:inherit!important; white-space:pre; }
pre.reader-code .syntax-comment { color:#a1aaa5!important; font-style:normal!important; font-weight:400!important; }
pre.reader-code .syntax-keyword { color:#83c7ff!important; font-style:normal!important; font-weight:650!important; }
pre.reader-code .syntax-definition { color:#f5ce82!important; font-weight:650!important; text-decoration:none; }
pre.reader-code .syntax-string { color:#a6dca8!important; background:transparent!important; font-weight:400!important; }
pre.reader-code .syntax-number,
pre.reader-code .syntax-constant { color:#f3ad82!important; font-weight:400!important; text-decoration:none; }
pre.reader-code .syntax-builtin,
pre.reader-code .syntax-call { color:#f5ce82!important; font-weight:400!important; text-decoration:none; }
pre.reader-code .syntax-operator { color:#8cdbd2!important; font-weight:500!important; }
pre.reader-code .syntax-punctuation { color:#c4c9d0!important; font-weight:400!important; }

pre.reader-output { background:#222!important; color:#eee!important; border:1px dashed #777!important; font:13px/1.7 var(--reader-mono)!important; }
pre.reader-formula { max-width:100%; overflow-x:auto; overflow-y:hidden; background:var(--reader-inline-bg)!important; color:var(--reader-inline-ink)!important; border:1px solid var(--reader-inline-border)!important; font:600 .85em/1.55 var(--reader-mono)!important; white-space:pre; }

/* Inline code and rendered equations share a quiet code-like treatment. */
:where(.detail-content,.lesson-reader) :not(pre) > code {
  display:inline-block;
  max-width:100%;
  font-family:var(--reader-mono)!important;
  font-size:.85em;
  font-weight:600;
  background:var(--reader-inline-bg)!important;
  color:var(--reader-inline-ink)!important;
  border:1px solid var(--reader-inline-border);
  border-radius:4px;
  padding:.08em .34em;
  overflow-x:auto;
  overflow-y:hidden;
  white-space:pre;
  vertical-align:middle;
}
:where(.detail-content,.lesson-reader) .katex,
:where(.detail-content,.lesson-reader) .katex * {
  font-family:var(--reader-mono)!important;
}
:where(.detail-content,.lesson-reader) .katex {
  font-size:.85em!important;
  line-height:1.35;
}
:where(.detail-content,.lesson-reader) .katex .katex-html {
  white-space:nowrap;
}
:where(.detail-content,.lesson-reader) .katex.reader-linearized > .katex-html {
  display:none!important;
}
:where(.detail-content,.lesson-reader) .reader-linear-math {
  display:inline-block;
  min-width:max-content;
  max-width:none;
  color:var(--reader-inline-ink);
  font:600 1em/1.4 var(--reader-mono)!important;
  white-space:pre;
}
:where(.detail-content,.lesson-reader) .reader-linear-math :is(sub,sup) {
  position:relative;
  font-size:.72em;
  line-height:0;
  vertical-align:baseline;
  white-space:nowrap;
}
:where(.detail-content,.lesson-reader) .reader-linear-math sub { bottom:-.28em; }
:where(.detail-content,.lesson-reader) .reader-linear-math sup { top:-.48em; }
:where(.detail-content,.lesson-reader) .katex:not(.katex-display *) {
  display:inline-block;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  white-space:nowrap;
  vertical-align:middle;
  background:var(--reader-inline-bg);
  border:1px solid var(--reader-inline-border);
  border-radius:4px;
  padding:.08em .32em;
}
:where(.detail-content,.lesson-reader) .katex-display {
  max-width:100%;
  margin:.65em 0!important;
  background:var(--reader-inline-bg);
  border:1px solid var(--reader-inline-border);
  border-radius:6px;
  padding:.4em .55em;
  overflow-x:auto;
  overflow-y:hidden;
  text-align:left;
  white-space:nowrap;
}
:where(.detail-content,.lesson-reader) .katex-display > .katex {
  display:inline-block;
  min-width:max-content;
  max-width:none;
  white-space:nowrap;
  text-align:left;
}
:where(.detail-content,.lesson-reader) :is(.formula,.equation,[data-formula],[data-math]) {
  font-family:var(--reader-mono)!important;
}

/* The current lesson is supplied by each shell; this shared rule makes it clear. */
.sidebar .curriculum .nav-lessons a[aria-current="page"] {
  color:var(--ink);
  background:var(--accent-soft);
  border-left-color:var(--ink);
  font-weight:750;
}

.rail-toggle,.guide-toggle { position:fixed; top:23px; width:32px; height:32px; padding:6px; z-index:8; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--muted); cursor:pointer; box-shadow:none; transition:background .15s,color .15s; }
.rail-toggle { left:252px; }
.guide-toggle { right:16px; }
.rail-toggle svg,.guide-toggle svg,.mobile-menu svg { width:20px; height:20px; flex-shrink:0; }
.rail-toggle:hover,.guide-toggle:hover,.mobile-menu:hover { color:var(--ink); background:var(--accent-soft); }
.rail-toggle:focus-visible,.guide-toggle:focus-visible,.mobile-menu:focus-visible { outline:2px solid var(--ink); outline-offset:-4px; }
.rail-caption { writing-mode:vertical-rl; font:600 10px/1 system-ui,sans-serif; letter-spacing:.14em; text-transform:uppercase; margin-top:28px; }
.guide-toggle[aria-expanded="false"] { top:0; right:0; bottom:0; height:100dvh; width:44px; border-radius:0; border-width:0 0 0 1px; justify-content:flex-start; flex-direction:column; padding:29px 0 0; }
.guide-toggle[aria-expanded="false"] .panel-chevron { transform:rotate(180deg); transform-origin:10.5px 12px; }
@media(min-width:851px) {
  .rail-collapsed .sidebar { transform:translateX(-100%); visibility:hidden; }
  .rail-collapsed .rail-toggle { top:0; left:0; bottom:0; height:100dvh; width:44px; border-radius:0; border-width:0 1px 0 0; justify-content:flex-start; flex-direction:column; padding:29px 0 0; }
  .rail-collapsed .rail-toggle .panel-chevron { transform:rotate(180deg); transform-origin:13.5px 12px; }
  .rail-collapsed .content,.rail-collapsed .lesson-reader { margin-left:44px; width:calc(100% - 44px); }
  .lesson-page.rail-collapsed main.detail-content { margin-left:44px; width:calc(100% - 44px); }
  .portal-detail main.detail-content { width:calc(100% - 340px); }
  .portal-detail.rail-collapsed main.detail-content { margin-left:44px; width:calc(100% - 88px); }
  .portal-detail .detail-toolbar { margin-right:44px; padding-right:4vw; }
  .portal-detail.rail-collapsed .detail-toolbar { margin-left:44px; padding-left:4vw; }
}
@media(min-width:1200px) {
  .portal-detail.guide-open main.detail-content { width:calc(100% - 532px); }
  .portal-detail.rail-collapsed.guide-open main.detail-content { width:calc(100% - 280px); }
  .portal-detail.guide-open .detail-toolbar { margin-right:236px; }
}
@media(max-width:850px) {
  .rail-toggle { display:none; }
  .mobile-menu { display:flex; align-items:center; justify-content:center; position:absolute; top:14px; left:10px; bottom:auto; height:44px; width:38px; padding:8px; border:1px solid var(--line); border-radius:9px; background:var(--surface); color:var(--ink); z-index:8; }
  body:has(.sidebar.open) .mobile-menu { position:fixed; left:244px; top:14px; }
  .mobile-menu .rail-caption { display:none; }
  .content,body.lesson-page main.lesson-reader,body.portal-detail main.detail-content { margin:0!important; width:100%!important; min-width:0; max-width:none; }
  body.lesson-page main.lesson-reader,body.portal-detail main.detail-content { padding:24px 18px 70px!important; }
  body.lesson-page .detail-toolbar,body.portal-detail .detail-toolbar { margin:0!important; height:auto; min-height:72px; padding:14px 12px 14px 58px; flex-wrap:wrap; gap:12px; }
  .detail-toolbar .detail-tools { margin-left:auto; }
  .topbar { min-height:72px; padding-left:40px; }
  .guide-toggle,.guide-toggle[aria-expanded="false"] { position:static; display:flex; flex-direction:row; justify-content:flex-start; gap:8px; width:100%; height:auto; min-height:44px; padding:10px 12px; margin:16px 0; border:1px solid var(--line); border-radius:8px; box-shadow:none; }
  .guide-toggle .rail-caption { display:none; }
  .guide-toggle .mobile-guide-label { display:inline; }
  .guide-panel { position:static; width:100%; max-height:50vh; padding:0 0 16px; border:0; box-shadow:none; background:transparent; }
  .guide-panel h2 { display:none; }
  .guide-panel a { padding:12px 4px; font-size:15px; }
  .lesson-reader .reader-section { width:100%; min-width:0; padding-inline:0; }
  .lesson-reader h1 { word-break:normal; overflow-wrap:normal; }
}
.mobile-guide-label { display:none; }
/* The public wordmark remains visible even when the curriculum rail is closed. */
.topbar .site-brand,.detail-toolbar .site-brand {
  display:inline-flex; align-items:center; gap:10px; flex-shrink:0;
  color:var(--ink); text-decoration:none; font:750 21px/1.15 ui-sans-serif,system-ui,sans-serif;
  letter-spacing:-.045em; white-space:nowrap;
}
.site-brand img { display:block; width:36px; height:36px; flex-shrink:0; }
.site-brand .brand-by { font-weight:450; }
.site-brand:focus-visible { outline:2px solid var(--ink); outline-offset:6px; border-radius:4px; }
@media(max-width:600px) {
  .topbar .site-brand,.detail-toolbar .site-brand { font-size:15px; gap:7px; }
  .site-brand img { width:26px; height:26px; }
  .detail-toolbar { gap:8px; }
}