:root {
  color-scheme: dark;
  --bg: #080a0e;
  --panel: rgba(19, 23, 30, .72);
  --panel-strong: rgba(25, 30, 38, .9);
  --panel-soft: rgba(255, 255, 255, .035);
  --line: rgba(255, 255, 255, .1);
  --line-strong: rgba(255, 255, 255, .18);
  --text: #eef0f2;
  --muted: #adb3bc;
  --faint: #7f8791;
  --accent: #bdcbd5;
  --accent-soft: rgba(189, 203, 213, .12);
  --current: #d4bea0;
  --cyan: var(--accent);
  --cyan-soft: var(--accent-soft);
  --amber: var(--current);
  --green: #9cad9f;
  --red: #b79b98;
  --blue: #9eacba;
  --purple: #aaa1ad;
  --sidebar: 244px;
  --radius: 8px;
  font-family: "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

html { background: var(--bg); }
body {
  min-width: 320px;
  background:
    radial-gradient(1100px 700px at 88% -15%, rgba(102, 121, 140, .16), transparent 62%),
    linear-gradient(145deg, #080a0e 0%, #0d1118 52%, #080a0f 100%);
  background-attachment: fixed;
  color: var(--text);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, rgba(255,255,255,.018), transparent 38%, rgba(255,255,255,.01));
}

a { color: inherit; text-decoration-color: rgba(238,240,242,.32); text-underline-offset: .18em; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--current); outline-offset: 3px; }

.shell { grid-template-columns: var(--sidebar) minmax(0, 1fr); }
.sidebar {
  padding: 22px 17px;
  background: rgba(12, 15, 20, .72);
  border-right: 1px solid var(--line);
  box-shadow: 18px 0 42px rgba(0,0,0,.16);
  backdrop-filter: blur(24px) saturate(115%);
  -webkit-backdrop-filter: blur(24px) saturate(115%);
}
.brand { gap: 11px; padding: 0 6px 20px; border-color: var(--line); }
.brand-mark {
  width: 34px;
  height: 34px;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--line-strong);
  font-size: 11px;
  letter-spacing: .04em;
}
.brand strong { font-size: 14px; font-weight: 600; }
.brand span { color: var(--faint); font-size: 12px; }
.primary-nav { gap: 2px; padding: 18px 0; }
.primary-nav a {
  min-height: 40px;
  padding: 0 10px;
  border: 0;
  border-radius: 5px;
  color: var(--muted);
  font-size: 14px;
}
.primary-nav a span { color: var(--faint); font: 500 11px/1 "SFMono-Regular", Consolas, monospace; }
.primary-nav a:hover { color: var(--text); background: rgba(255,255,255,.04); }
.primary-nav a[aria-current="page"] {
  color: var(--text);
  background: rgba(255,255,255,.075);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.primary-nav a[aria-current="page"] span { color: var(--text); }
.sidebar-note {
  padding: 14px;
  background: rgba(255,255,255,.035);
  border-color: var(--line);
  border-radius: 6px;
}
.sidebar-note .eyebrow { color: var(--faint); }
.sidebar-note p { font-size: 13px; color: var(--muted); }
.sidebar-foot { color: var(--faint); font-family: inherit; font-weight: 500; }

.topbar {
  min-height: 64px;
  padding: 10px clamp(18px, 3vw, 40px);
  background: rgba(9, 12, 17, .64);
  border-color: var(--line);
  backdrop-filter: blur(24px) saturate(120%);
  -webkit-backdrop-filter: blur(24px) saturate(120%);
}
.menu-button,
.theme-button,
.filter-button,
.filter-select,
.month-picker select,
.icon-button,
.status-picker button {
  color: var(--text);
  background: rgba(255,255,255,.045);
  border: 1px solid var(--line);
  border-radius: 5px;
}
.menu-button { min-height: 40px; padding: 0 12px; font-size: 13px; }
.theme-button { min-height: 40px; padding: 0 12px; font-size: 13px; cursor: pointer; }
.menu-button:hover,
.theme-button:hover,
.filter-button:hover,
.status-picker button:hover { background: rgba(255,255,255,.08); border-color: var(--line-strong); }
.search {
  height: 40px;
  max-width: 620px;
  background: rgba(255,255,255,.035);
  border-color: var(--line);
  border-radius: 6px;
}
.search:focus-within { border-color: var(--line-strong); background: rgba(255,255,255,.055); }
.search svg { stroke: var(--faint); }
.search input { color: var(--text); }
.source-link { color: var(--muted); font-size: 13px; font-weight: 500; }
kbd { color: var(--faint); background: transparent; border-color: var(--line); border-radius: 3px; }

main { max-width: none; padding: 34px clamp(18px, 3vw, 40px) 60px; }
.page-head {
  display: block;
  max-width: 860px;
  margin: 0 0 28px;
}
h1, h2, h3 { font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; font-weight: 500; }
h1 { margin: 0 0 7px; font-size: clamp(32px, 3.4vw, 46px); line-height: 1.08; letter-spacing: -.025em; }
h2 { font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -.012em; }
h3 { font-size: 18px; }
.lede { max-width: 720px; color: var(--muted); font-size: 15px; line-height: 1.5; }
.eyebrow,
.route-kind {
  color: var(--faint);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.filters {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  padding: 11px 13px;
  color: var(--muted);
  background: rgba(22, 27, 34, .58);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 14px 34px rgba(0,0,0,.13);
  backdrop-filter: blur(18px) saturate(110%);
  -webkit-backdrop-filter: blur(18px) saturate(110%);
  font-size: 13px;
}
.month-picker { color: var(--muted); font-size: 13px; font-weight: 500; }
.month-picker select,
.filter-select,
.filter-button { min-height: 36px; padding: 0 10px; font-size: 13px; }
.filter-button[aria-pressed="true"] { color: #11151b; background: var(--accent); border-color: var(--accent); }
.result-count { margin-left: auto; color: var(--faint); }

.gantt-scroll,
.syllabus-scroll {
  background: rgba(16, 20, 26, .7);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 24px 70px rgba(0,0,0,.2);
  backdrop-filter: blur(20px) saturate(110%);
  -webkit-backdrop-filter: blur(20px) saturate(110%);
}
.gantt-scroll { overflow-x: scroll; overflow-y: auto; }
.gantt { background: transparent; }
.gantt th,
.gantt td { padding: 7px; border-color: rgba(255,255,255,.07); }
.gantt th:first-child { background: rgba(18, 22, 28, .96); }
.gantt thead th {
  height: 40px;
  color: var(--muted);
  background: rgba(22, 27, 34, .92);
  font-size: 12px;
  font-weight: 600;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.gantt tbody th button { color: var(--text); font-size: 14px; font-weight: 600; }
.gantt small { color: var(--faint); font-size: 12px; }
.gantt .gantt-area th {
  padding: 11px 12px;
  background: rgba(36, 42, 50, .96);
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: 17px;
  font-weight: 500;
}
.gantt .scheduled { background: color-mix(in srgb, var(--accent) 15%, rgba(15,19,24,.88)); }
.gantt td button { color: var(--text); padding: 9px; font-size: 13px; line-height: 1.45; }
.gantt td button li { color: rgba(238,240,242,.82); }
.gantt .month-current { box-shadow: inset 1px 0 rgba(212,190,160,.65), inset -1px 0 rgba(212,190,160,.65); }
.gantt-scroll:focus-visible { outline-color: var(--current); }

.area-navigation {
  gap: 0;
  margin: 0 0 28px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.area-navigation a {
  padding: 8px 11px;
  color: var(--muted);
  border: 0;
  border-bottom: 1px solid transparent;
  font-size: 13px;
}
.area-navigation a:hover { color: var(--text); }
.area-navigation a[aria-current] { color: var(--text); background: transparent; border-color: var(--text); }
.area-index {
  gap: 0;
  padding: 4px 24px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.area-index article {
  padding: 24px 16px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
}
.area-index article:nth-last-child(-n+2) { border-bottom: 0; }
.area-index h2 { font-size: 24px; }
.area-index p,
.area-notes p { color: var(--muted); font-size: 14px; }
.area-index li { margin: 7px 0; color: var(--muted); }
.topic-overview { padding: 4px 0 20px; color: var(--muted); font-size: 13px; line-height: 2; }
.topic-overview a { color: var(--text); }

.syllabus { background: transparent; }
.syllabus th,
.syllabus td { padding: 16px; border-color: rgba(255,255,255,.07); font-size: 14px; }
.syllabus thead th { color: var(--muted); background: rgba(27,32,40,.9); font-weight: 500; }
.syllabus tbody tr:hover { background: rgba(255,255,255,.018); }
.syllabus small,
.inline-status { color: var(--faint); }
.resource-route { border-color: var(--line); }
.route-content p { color: var(--muted); }
.reading-link,
.text-link { color: var(--accent); font-weight: 500; }
.mapping-note { color: var(--current) !important; }
.area-shelf { margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--line); }
.area-shelf h2 { margin-bottom: 7px; }

.resource-grid,
.dropped-grid {
  display: block;
  padding: 0 22px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0,0,0,.15);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.resource-card,
.dropped-card {
  padding: 22px 8px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}
.resource-card:last-child,
.dropped-card:last-child { border-bottom: 0; }
.resource-top { padding: 0; }
.resource-card h2 { margin: 11px 0 5px; font-size: 23px; }
.dropped-card h3 { margin: 10px 0 6px; font-size: 20px; }
.dropped-card p,
.byline { color: var(--muted); }
.tag-row { gap: 6px; }
.pill {
  padding: 3px 7px;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 3px;
  font-size: 11px;
  font-weight: 500;
}
.pill.high,
.pill.very-high,
.pill.core,
.pill.verified,
.pill.comfortable,
.pill.dropped { color: var(--muted); border-color: var(--line); }
.toc { margin-top: 14px; border: 0; }
.toc summary { padding: 10px 0 0; color: var(--muted); border-top: 1px solid rgba(255,255,255,.05); }
.toc ol,
.toc ul { color: var(--muted); }
.section-head { margin: 34px 0 14px; }
.section-head h2 { font-size: 25px; }
.decision-block { margin-top: 48px; }

.yaml-layout { gap: 16px; }
.yaml-card,
.code-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0,0,0,.15);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.yaml-card { padding: 24px; }
.code-panel { color: #c8ced5; }
.button-primary { color: #11151b; background: var(--accent); border-radius: 5px; }

dialog {
  color: var(--text);
  background: rgba(20,24,31,.9);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  box-shadow: 0 30px 100px rgba(0,0,0,.55);
  backdrop-filter: blur(28px) saturate(115%);
  -webkit-backdrop-filter: blur(28px) saturate(115%);
}
dialog::backdrop { background: rgba(3,5,8,.7); backdrop-filter: blur(4px); }
.dialog-head { border-color: var(--line); }
.dialog-section { border-color: var(--line); }
.status-picker button[aria-pressed="true"] { color: #11151b; background: var(--accent); border-color: var(--accent); }
.status-dot { box-shadow: none; }

footer { color: var(--faint); border-color: var(--line); }

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #e8ebef;
  --panel: rgba(255, 255, 255, .66);
  --panel-strong: rgba(250, 251, 252, .92);
  --panel-soft: rgba(255, 255, 255, .46);
  --line: rgba(26, 34, 43, .12);
  --line-strong: rgba(26, 34, 43, .22);
  --text: #1c2229;
  --muted: #56606b;
  --faint: #727d88;
  --accent: #40586b;
  --accent-soft: rgba(64, 88, 107, .1);
  --current: #8a6743;
  --green: #506e5a;
  --red: #805b58;
  --blue: #586d82;
  --purple: #716775;
}
:root[data-theme="light"] body {
  background:
    radial-gradient(1100px 700px at 88% -15%, rgba(111, 133, 153, .2), transparent 62%),
    linear-gradient(145deg, #eef0f3 0%, #e3e7ec 52%, #edf0f2 100%);
}
:root[data-theme="light"] body::before {
  background: linear-gradient(105deg, rgba(255,255,255,.28), transparent 38%, rgba(255,255,255,.16));
}
:root[data-theme="light"] .sidebar {
  background: rgba(245, 247, 249, .7);
  box-shadow: 18px 0 42px rgba(38, 48, 58, .08);
}
:root[data-theme="light"] .topbar { background: rgba(238, 241, 244, .67); }
:root[data-theme="light"] .brand-mark,
:root[data-theme="light"] .menu-button,
:root[data-theme="light"] .theme-button,
:root[data-theme="light"] .filter-button,
:root[data-theme="light"] .filter-select,
:root[data-theme="light"] .month-picker select,
:root[data-theme="light"] .icon-button,
:root[data-theme="light"] .status-picker button { background: rgba(255,255,255,.42); }
:root[data-theme="light"] .primary-nav a:hover { background: rgba(20,30,40,.05); }
:root[data-theme="light"] .primary-nav a[aria-current="page"] {
  background: rgba(20,30,40,.075);
  box-shadow: inset 0 0 0 1px rgba(20,30,40,.05);
}
:root[data-theme="light"] .sidebar-note,
:root[data-theme="light"] .search { background: rgba(255,255,255,.4); }
:root[data-theme="light"] .search:focus-within { background: rgba(255,255,255,.62); }
:root[data-theme="light"] .filters,
:root[data-theme="light"] .gantt-scroll,
:root[data-theme="light"] .syllabus-scroll,
:root[data-theme="light"] .area-index,
:root[data-theme="light"] .resource-grid,
:root[data-theme="light"] .dropped-grid,
:root[data-theme="light"] .yaml-card,
:root[data-theme="light"] .code-panel {
  box-shadow: 0 22px 60px rgba(44, 54, 65, .09);
}
:root[data-theme="light"] .filters { background: rgba(255,255,255,.54); }
:root[data-theme="light"] .gantt-scroll,
:root[data-theme="light"] .syllabus-scroll { background: rgba(248,250,252,.68); }
:root[data-theme="light"] .gantt th,
:root[data-theme="light"] .gantt td,
:root[data-theme="light"] .syllabus th,
:root[data-theme="light"] .syllabus td { border-color: rgba(26,34,43,.09); }
:root[data-theme="light"] .gantt th:first-child { background: rgba(245,247,249,.96); }
:root[data-theme="light"] .gantt thead th,
:root[data-theme="light"] .syllabus thead th { background: rgba(233,237,241,.94); }
:root[data-theme="light"] .gantt .gantt-area th { background: rgba(220,225,230,.96); }
:root[data-theme="light"] .gantt .scheduled {
  background: color-mix(in srgb, var(--accent) 17%, rgba(250,251,252,.9));
}
:root[data-theme="light"] .gantt td button li { color: rgba(28,34,41,.8); }
:root[data-theme="light"] .syllabus tbody tr:hover { background: rgba(20,30,40,.025); }
:root[data-theme="light"] .toc summary { border-color: rgba(26,34,43,.07); }
:root[data-theme="light"] .code-panel { color: #3e4a55; }
:root[data-theme="light"] .button-primary,
:root[data-theme="light"] .status-picker button[aria-pressed="true"],
:root[data-theme="light"] .filter-button[aria-pressed="true"] { color: #fff; }
:root[data-theme="light"] dialog {
  color: var(--text);
  background: rgba(248,250,252,.91);
  box-shadow: 0 30px 90px rgba(35,45,55,.24);
}
:root[data-theme="light"] dialog::backdrop { background: rgba(55,63,72,.34); }

@media (max-width: 760px) {
  .sidebar { background: rgba(12,15,20,.92); }
  :root[data-theme="light"] .sidebar { background: rgba(245,247,249,.94); }
  .topbar { padding: 10px 12px; }
  main { padding: 26px 14px 48px; }
  h1 { font-size: 34px; }
  .filters { align-items: stretch; }
  .area-index { grid-template-columns: 1fr; }
  .area-index article { padding-inline: 4px; }
  .area-index article:nth-last-child(2) { border-bottom: 1px solid var(--line); }
  .resource-grid,
  .dropped-grid { padding-inline: 14px; }
}

@media (prefers-reduced-transparency: reduce) {
  .sidebar,
  .topbar,
  .filters,
  .gantt-scroll,
  .syllabus-scroll,
  .resource-grid,
  .dropped-grid,
  .yaml-card,
  .code-panel,
  dialog { background: #141820; backdrop-filter: none; -webkit-backdrop-filter: none; }
  :root[data-theme="light"] .sidebar,
  :root[data-theme="light"] .topbar,
  :root[data-theme="light"] .filters,
  :root[data-theme="light"] .gantt-scroll,
  :root[data-theme="light"] .syllabus-scroll,
  :root[data-theme="light"] .resource-grid,
  :root[data-theme="light"] .dropped-grid,
  :root[data-theme="light"] .yaml-card,
  :root[data-theme="light"] .code-panel,
  :root[data-theme="light"] dialog { background: #f4f6f8; }
}