@font-face { font-family: "Geist Sans"; src: url("fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@media (prefers-color-scheme: light) { :root:not([data-theme]) {
  --outside: #fbfaf6;
  --surface: #f7f4ec;
  --panel: #fcfbf8;
  --text: #1b2a35;
  --muted: #4a545d;
  --disabled: #7a7a77;
  --line: #d9d5cf;
  --accent: #245bc7;
  --button: #0b48bb;
  --button-text: #ffffff;
  --attention: #84530d;
  --hover: #e8e5e0;
  --selected: #dfdcd6;
  --live: #396554;
  --danger: #9e3f36;
  --border-strong: #807c76;
  --ocean-depth: #faf8f5;
  --diff-add: #d2eadd;
  --diff-remove: #f8e1dd;
  --selection: #245bc747;
  --elevation-popover: 0 4px 8px rgb(0 0 0 / 0.16);
  --elevation-dialog: 0 12px 32px rgb(0 0 0 / 0.2);
  --water: linear-gradient(180deg, #bfe1f2 0%, #dceef3 30%, #eef3ef 62%, #f7f4ec 100%);
  --surface-light: radial-gradient(ellipse at 55% 0%, rgb(255 255 255 / 0.85) 0%, rgb(255 255 255 / 0.25) 40%, rgb(255 255 255 / 0) 72%);
  --glass-clear-fill: rgb(255 255 255 / 0.4);
  --glass-frosted-fill: rgb(255 255 255 / 0.55);
  --glass-solid-fill: #ffffff;
  --glass-border: rgb(255 255 255 / 0.75);
  --glass-highlight: rgb(255 255 255 / 0.75);
  --sheet-fill: rgb(253 252 250 / 0.88);
  --sheet-border: rgb(31 51 64 / 0.1);
  --card-fill: #ffffff;
  --card-border: rgb(31 51 64 / 0.1);
  color-scheme: light;
} }

* { box-sizing: border-box; }
html { background: var(--surface); color: var(--text); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--surface-light) no-repeat top center / 100% 520px, var(--water) no-repeat top / 100% 520px, var(--surface);
  font: var(--type-body-weight) var(--type-body-size) / var(--type-body-line) var(--font-family), system-ui, var(--font-fallbacks), sans-serif;
}
::selection { background: var(--selection); }
a { color: var(--accent); text-underline-offset: 2px; }
a:focus-visible, summary:focus-visible { outline: var(--focus-width) solid var(--accent); outline-offset: var(--focus-offset); border-radius: 4px; }
.skip { position: absolute; left: var(--spacing-section); top: -100px; padding: var(--spacing-control) var(--spacing-group); background: var(--panel); border-radius: var(--radius-control); z-index: 2; }
.skip:focus { top: var(--spacing-section); }

.top { max-width: 1200px; margin: 0 auto; padding: var(--spacing-section) var(--spacing-page); }
.brand { color: var(--text); text-decoration: none; font-size: var(--type-heading-size); line-height: var(--type-heading-line); font-weight: var(--type-heading-weight); }

.layout { display: grid; grid-template-columns: var(--size-sidebar) minmax(0, 1fr); gap: var(--spacing-large); max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-page) var(--spacing-page); align-items: start; }
.pages { position: sticky; top: var(--spacing-section); max-height: calc(100vh - 2 * var(--spacing-section)); overflow: auto; padding: var(--spacing-section); background: var(--glass-fill); backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--glass-border); border-radius: var(--radius-panel); }
.pages h2, .pages-compact h2 { margin: var(--spacing-section) 0 var(--spacing-compact); color: var(--muted); font-size: var(--type-caption-size); line-height: var(--type-caption-line); font-weight: 550; }
.pages h2:first-child, .pages-compact h2:first-child { margin-top: 0; }
.pages ul, .pages-compact ul { list-style: none; margin: 0; padding: 0; }
.pages a, .pages-compact a { display: block; padding: 4px var(--spacing-control); border-radius: var(--radius-control); color: var(--text); text-decoration: none; font-size: var(--type-control-size); line-height: var(--type-control-line); }
.pages a:hover, .pages-compact a:hover { background: var(--hover); }
.pages a[aria-current="page"], .pages-compact a[aria-current="page"] { background: var(--selected); font-weight: 550; }
.pages-compact { display: none; }
.single .layout { grid-template-columns: minmax(0, 1fr); }
.single .layout, .single .top { max-width: 880px; }

main { min-width: 0; background: var(--sheet-fill); border: 1px solid var(--sheet-border); border-radius: var(--radius-sheet); padding: var(--spacing-page) clamp(var(--spacing-section), 5vw, 56px); }
article { max-width: 720px; font-size: var(--type-prose-size); line-height: var(--type-prose-line); }
article h1 { margin: 0 0 var(--spacing-group); font-size: var(--type-display-size); line-height: var(--type-display-line); font-weight: var(--type-display-weight); }
article h2 { margin: 40px 0 var(--spacing-group); font-size: var(--type-title-size); line-height: var(--type-title-line); font-weight: var(--type-title-weight); }
article h3 { margin: var(--spacing-large) 0 var(--spacing-control); font-size: 17px; line-height: var(--type-heading-line); font-weight: var(--type-heading-weight); }
article h4 { margin: var(--spacing-section) 0 var(--spacing-compact); font-size: var(--type-prose-size); font-weight: var(--type-heading-weight); }
article p, article ul, article ol { margin: 0 0 var(--spacing-section); }
article li { margin: var(--spacing-compact) 0; }
article li > p { margin: 0; }
article strong { font-weight: 600; }
article img { display: block; max-width: 100%; height: auto; margin: var(--spacing-large) 0; border: 1px solid var(--card-border); border-radius: var(--radius-card); }
article code, article kbd { font-family: var(--font-mono-family), ui-monospace, monospace; font-size: 0.85em; background: var(--card-fill); border: 1px solid var(--card-border); border-radius: 6px; padding: 1px 5px; }
article pre { overflow-x: auto; padding: var(--spacing-group) var(--spacing-section); background: var(--card-fill); border: 1px solid var(--card-border); border-radius: var(--radius-card); font-size: var(--type-code-size); line-height: var(--type-code-line); }
article pre code { background: none; border: 0; padding: 0; font-size: inherit; }
article blockquote { margin: 0 0 var(--spacing-section); padding: 0 var(--spacing-section); border-left: 3px solid var(--line); color: var(--muted); }
article hr { border: 0; border-top: 1px solid var(--line); margin: var(--spacing-page) 0; }
.table { overflow-x: auto; margin: 0 0 var(--spacing-section); }
article table { border-collapse: collapse; width: 100%; font-size: var(--type-body-size); line-height: var(--type-body-line); }
article th, article td { text-align: left; vertical-align: top; padding: var(--spacing-control) var(--spacing-group) var(--spacing-control) 0; border-bottom: 1px solid var(--line); }
article th { color: var(--muted); font-weight: 550; }
.lede { color: var(--muted); }
.index { list-style: none; padding: 0; }
.index li { margin: 0 0 var(--spacing-group); }
.index a { font-weight: 550; }
.index .works { color: var(--muted); font-size: var(--type-label-size); }
.page-foot { max-width: 720px; margin-top: 40px; padding-top: var(--spacing-section); border-top: 1px solid var(--line); color: var(--muted); font-size: var(--type-label-size); line-height: var(--type-label-line); }

@media (max-width: 900px) {
  .layout { grid-template-columns: minmax(0, 1fr); padding: 0 var(--spacing-section) var(--spacing-section); gap: var(--spacing-group); }
  .top { padding: var(--spacing-section); }
  .pages { display: none; }
  .pages-compact { display: block; padding: var(--spacing-control) var(--spacing-section); background: var(--glass-fill); border: 1px solid var(--glass-border); border-radius: var(--radius-panel); }
  .pages-compact summary { min-height: var(--size-touch-target); display: flex; align-items: center; cursor: pointer; font-weight: 550; }
  .pages-compact nav { padding-bottom: var(--spacing-control); }
  .pages-compact a { padding: 10px var(--spacing-control); }
  main { padding: var(--spacing-large) var(--spacing-section); }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }
@media print { body { background: none; } .top, .pages, .pages-compact { display: none; } .layout { display: block; } main { border: 0; } }