:root {
  --paper: #faf8f3;
  --ink: #17181c;
  --muted: #6b6d74;
  --faint: #e6e2d8;
  --card: #ffffff;
  --code-bg: #f1eee6;
  --pen: #1d3fd8;          /* ballpoint blue */
  --margin: #e0565b;       /* notebook margin red */
  --rule: #a9c4ec;         /* notebook ruled lines */
  --warn: #b4501b;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #111216;
    --ink: #e9e6de;
    --muted: #9a9ca4;
    --faint: #2a2c33;
    --card: #181a1f;
    --code-bg: #1b1d23;
    --pen: #8aa2ff;
    --warn: #f0935b;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 15px/1.7 var(--mono);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }
a:hover { color: var(--pen); text-decoration-color: currentColor; }
code { font-family: var(--mono); font-size: 0.93em; }
p code, li code, dd code { background: var(--code-bg); padding: 1px 5px; border-radius: 4px; white-space: nowrap; }
h1, h2, h3 { font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
.dim { color: var(--muted); }

.wrap { width: min(1040px, 100% - 48px); margin-inline: auto; }

/* ---- header ---- */
.top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 26px 0; gap: 24px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: 17px; }
.mark { height: 30px; width: auto; fill: none; stroke: var(--pen); stroke-width: 26; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.brand:hover { color: var(--ink); }
.brand:hover .mark { transform: rotate(-8deg); }
.brand .mark { transition: transform .25s ease; }
.top nav { display: flex; gap: 22px; flex-wrap: wrap; justify-content: flex-end; }
.top nav a { text-decoration: none; color: var(--muted); }
.top nav a:hover { color: var(--ink); }
.top nav .stars { color: var(--ink); border: 1px solid var(--faint); border-radius: 999px; padding: 0 10px; }
.top nav .gh { display: inline-flex; align-items: center; }
.top nav .gh svg { width: 20px; height: 20px; fill: currentColor; }
.top nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--pen); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.top nav { align-items: center; }

/* ---- hero ---- */
.hero {
  display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 56px; align-items: center;
  padding: 56px 0 48px;
}
h1 { font-size: clamp(30px, 4.6vw, 46px); margin: 0 0 18px; max-width: 17ch; }
.lede { color: var(--muted); font-size: 16px; margin: 0 0 28px; max-width: 52ch; }

.cmd {
  display: flex; align-items: center; gap: 12px;
  background: var(--card); border: 1px solid var(--faint); border-radius: 10px;
  padding: 12px 12px 12px 16px; max-width: 560px;
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
}
.cmd .prompt { color: var(--muted); user-select: none; }
.cmd code { font-weight: 700; flex: 1; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.copy {
  font: 500 12px var(--mono); color: var(--muted);
  background: transparent; border: 1px solid var(--faint); border-radius: 6px;
  padding: 4px 9px; cursor: pointer; flex: none;
}
.copy:hover { color: var(--ink); border-color: var(--muted); }
.copy.done { color: var(--pen); border-color: var(--pen); }
.meta { color: var(--muted); font-size: 13px; margin: 14px 0 0; }
.meta a { color: var(--ink); }
.meta a.dim { color: var(--muted); }
.meta.try { margin-top: 6px; }
.meta.try a { color: var(--pen); text-decoration: none; }
.meta.try a:hover { text-decoration: underline; }

/* the notebook doodle */
.doodle { margin: 0; justify-self: center; }
.paper {
  position: relative;
  width: 240px; height: 300px;
  transform: rotate(3deg);
  border-radius: 3px;
  background-color: #fffef9;
  background-image:
    linear-gradient(90deg, transparent 46px, var(--margin) 46px, var(--margin) 48px, transparent 48px),
    repeating-linear-gradient(180deg, transparent 0 25px, var(--rule) 25px 26px);
  background-position: 0 0, 0 30px;
  box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 12px 28px -10px rgba(40,30,10,.25);
  display: grid; place-items: center;
}
.paper::before {
  /* three-hole punch */
  content: ""; position: absolute; left: 14px; top: 0; bottom: 0; width: 14px;
  background:
    radial-gradient(circle at 7px 50px, var(--paper) 6px, transparent 6.5px),
    radial-gradient(circle at 7px 150px, var(--paper) 6px, transparent 6.5px),
    radial-gradient(circle at 7px 250px, var(--paper) 6px, transparent 6.5px);
}
.big-s {
  height: 230px; width: auto; margin-left: 30px; overflow: visible;
  fill: none; stroke: #1d3fd8; stroke-width: 15; stroke-linecap: round; stroke-linejoin: round;
}
.big-s path {
  stroke-dasharray: 1.01; stroke-dashoffset: 1.01;
  animation-name: draw; animation-timing-function: ease-in-out; animation-fill-mode: forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .big-s path { animation: none; stroke-dashoffset: 0; } }
.doodle figcaption { font-size: 11px; color: var(--muted); text-align: center; margin-top: 18px; font-style: italic; max-width: 240px; }

/* ---- screenshots ---- */
.shots { position: relative; padding-bottom: 40px; }
.window {
  border: 1px solid var(--faint); border-radius: 12px; overflow: hidden;
  background: var(--card);
  box-shadow: 0 30px 60px -30px rgba(20,20,40,.35);
  margin-right: 120px;
}
.chrome { display: flex; align-items: center; gap: 7px; padding: 11px 14px; border-bottom: 1px solid var(--faint); }
.chrome i { width: 11px; height: 11px; border-radius: 50%; background: var(--faint); }
.chrome span {
  margin-left: 14px; font-size: 12px; color: var(--muted);
  background: var(--paper); border-radius: 6px; padding: 2px 12px;
}
.window img { display: block; width: 100%; height: auto; }
.phone {
  position: absolute; right: 0; bottom: 0;
  width: 220px; border-radius: 30px; padding: 9px;
  background: #17181c;
  box-shadow: 0 30px 50px -20px rgba(0,0,0,.45);
}
.phone img { display: block; width: 100%; height: auto; border-radius: 22px; }

/* ---- prose ---- */
.prose { max-width: 720px; margin-left: max(24px, calc((100% - 1040px) / 2)); }
.prose p { margin: 0 0 1.2em; }
section.prose { padding-top: 48px; }
.why { margin: 32px 0; display: grid; grid-template-columns: max-content 1fr; gap: 10px 22px; }
.why dt { font-weight: 700; }
.why dd { margin: 0; font-style: italic; color: var(--muted); }
.rule { text-align: center; color: var(--muted); letter-spacing: .6em; margin: 48px 0 0 !important; }

/* ---- features ---- */
.features {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 56px;
  padding: 48px 0 32px;
}
.features article h3 { font-size: 15px; margin: 0 0 6px; display: flex; gap: 10px; align-items: baseline; }
.features article h3::before { content: "§"; color: var(--pen); font-weight: 400; }
.features article p { margin: 0; color: var(--muted); }
.features article p code { color: var(--ink); }
.features article p a { color: var(--ink); }

/* ---- code blocks (docs) ---- */
.block {
  position: relative; background: var(--card); border: 1px solid var(--faint); border-radius: 10px;
  margin: 0 0 14px;
}
.block pre { margin: 0; padding: 14px 76px 14px 16px; overflow-x: auto; font-size: 13.5px; line-height: 1.65; }
.block pre code { white-space: pre-wrap; overflow-wrap: anywhere; background: none; padding: 0; border-radius: 0; }
.block .copy { position: absolute; top: 10px; right: 10px; background: var(--card); }
.block .c { color: var(--muted); }

/* ---- footer ---- */
footer { border-top: 1px solid var(--faint); margin-top: 56px; padding: 28px 0 56px; font-size: 13px; }
footer p { margin: 0 0 6px; }
footer .made { float: right; margin-left: 24px; }
footer .made a { color: var(--pen); }

/* ---- small screens ---- */
@media (max-width: 820px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-top: 20px; }
  .doodle { order: -1; }
  .paper { width: 160px; height: 200px; }
  .big-s { height: 150px; margin-left: 24px; }
  .paper::before {
    background:
      radial-gradient(circle at 7px 34px, var(--paper) 5px, transparent 5.5px),
      radial-gradient(circle at 7px 100px, var(--paper) 5px, transparent 5.5px),
      radial-gradient(circle at 7px 166px, var(--paper) 5px, transparent 5.5px);
  }
  .doodle figcaption { display: none; }
  .window { margin-right: 70px; }
  .phone { width: 130px; border-radius: 20px; padding: 6px; }
  .phone img { border-radius: 15px; }
  .features { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .why { grid-template-columns: 1fr; gap: 2px; }
  .why dd { margin-bottom: 10px; }
  .top nav { gap: 14px; font-size: 13px; }
  .top nav a[href$="#features"] { display: none; }
}
@media (max-width: 520px) {
  body { font-size: 14px; }
  .wrap { width: calc(100% - 32px); }
  .prose { margin-left: 16px; margin-right: 16px; }
  .top { padding: 18px 0; }
  .brand span { display: none; }
  .cmd code { font-size: 12.5px; white-space: normal; overflow-wrap: anywhere; }
  .window { margin-right: 44px; }
  .phone { width: 104px; }
  .block pre { padding: 40px 14px 12px; font-size: 12.5px; }
  .block pre code { white-space: pre; overflow-wrap: normal; }
  .block .copy { top: 8px; right: 8px; }
}

/* ==== docs ==== */
.wrap.wide { width: min(1200px, 100% - 48px); }
.docs-frame {
  display: grid; grid-template-columns: 228px minmax(0, 1fr); gap: 64px;
  align-items: start; padding-top: 4px;
}

/* sidebar: never scrolls on its own. It's in the grid's flow, so the page is
   always at least as tall as the nav. When the nav is taller than the window,
   docs.js sets a negative --sidebar-top so it scrolls with the page until its
   bottom is in view, then sticks. */
.sidebar {
  position: sticky; top: var(--sidebar-top, 0px);
  padding: 16px 6px 24px 0; font-size: 13px;
}
.menu-toggle { display: none; }
.docs-search { position: relative; margin: 0 0 22px; }
.docs-search input {
  display: block; width: 100%; font: 13px var(--mono); color: var(--ink);
  padding: 7px 30px 7px 11px; border: 1px solid var(--faint); border-radius: 8px; background: var(--card);
  -webkit-appearance: none; appearance: none;
}
.docs-search input::placeholder { color: var(--muted); }
.docs-search input::-webkit-search-cancel-button { display: none; }
.docs-search input:focus { outline: none; border-color: var(--pen); }
.docs-search kbd {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%); pointer-events: none;
  font: 11px/16px var(--mono); color: var(--muted); border: 1px solid var(--faint); border-radius: 4px; padding: 0 5px;
}
.docs-search:focus-within kbd { display: none; }
@media (hover: none) { .docs-search kbd { display: none; } }

.nav-group { margin: 0 0 20px; }
.nav-heading {
  margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.docs-nav .nav-group a {
  display: block; padding: 3px 0 3px 13px; line-height: 1.45; text-decoration: none;
  border-left: 1px solid var(--faint); color: var(--ink);
}
.docs-nav .nav-group a:hover { color: var(--pen); border-left-color: var(--muted); }
.docs-nav .nav-group a.active { color: var(--pen); font-weight: 700; border-left: 2px solid var(--pen); padding-left: 12px; }

.search-results { margin: -8px 0 20px; }
.search-results a { display: block; padding: 7px 9px; border-radius: 7px; text-decoration: none; line-height: 1.45; }
.search-results a .t { display: block; font-weight: 700; }
.search-results a .t span { color: var(--muted); font-weight: 400; }
.search-results a .s { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.search-results a.sel, .search-results a:hover { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--faint); }
.search-results mark { background: color-mix(in srgb, var(--pen) 16%, transparent); color: inherit; border-radius: 2px; }
.search-results .none { color: var(--muted); margin: 0 0 0 9px; }

/* page */
.doc { min-width: 0; max-width: 760px; padding: 16px 0 8px; }
.doc-header {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 20px;
  padding-bottom: 22px; margin-bottom: 30px; border-bottom: 1px solid var(--faint);
}
.doc-section { margin: 0 0 8px; font-size: 12px; color: var(--pen); }
.doc h1 { font-size: clamp(26px, 3.6vw, 36px); margin: 0 0 10px; max-width: none; }
.doc-desc { margin: 0; color: var(--muted); font-size: 15.5px; }
.doc-tools { flex: none; display: flex; gap: 8px; margin-top: 4px; }
.doc-tool {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--muted); text-decoration: none;
  border: 1px solid var(--faint); border-radius: 6px; padding: 4px 9px 4px 7px;
}
.doc-tool svg { width: 14px; height: 14px; }
.doc-tool:hover { color: var(--ink); border-color: var(--muted); }
.copy-md.done { color: var(--pen); border-color: var(--pen); }
.edit-doc { color: var(--pen); border-color: color-mix(in srgb, var(--pen) 40%, transparent); }
.edit-doc:hover { color: var(--pen); border-color: var(--pen); }

.doc-body > :first-child { margin-top: 0; }
.doc-body p, .doc-body ul, .doc-body ol, .doc-body dl { margin: 0 0 1.1em; }
.doc-body ul, .doc-body ol { padding-left: 1.4em; }
.doc-body li { margin: .3em 0; }
.doc-body li > p { margin: 0 0 .5em; }
.doc-body li::marker { color: var(--muted); }
.doc-body a { color: var(--pen); }
.doc-body h2 { font-size: 20px; margin: 44px 0 14px; position: relative; scroll-margin-top: 20px; }
.doc-body h3 { font-size: 16px; margin: 32px 0 10px; position: relative; scroll-margin-top: 20px; }
.doc-body h4 { font-size: 15px; margin: 24px 0 8px; }
.doc-body .anchor {
  position: absolute; right: 100%; padding-right: .45em; color: var(--pen); font-weight: 400; text-decoration: none;
}
.doc-body h3 .anchor { opacity: 0; transition: opacity .15s; }
.doc-body h3:hover .anchor, .doc-body .anchor:focus { opacity: 1; }
.doc-body :not(pre) > code {
  background: var(--code-bg); padding: 1px 5px; border-radius: 4px; white-space: normal; overflow-wrap: anywhere;
}
.doc-body kbd {
  font: 12px var(--mono); padding: 0 5px; border: 1px solid var(--faint); border-bottom-width: 2px;
  border-radius: 4px; background: var(--card); white-space: nowrap;
}
.doc-body pre {
  margin: 0 0 1.2em; padding: 14px 16px; overflow-x: auto; font-size: 13px; line-height: 1.65;
  background: var(--card); border: 1px solid var(--faint); border-radius: 10px;
}
.doc-body .block { margin: 0 0 1.2em; }
.doc-body .block pre { margin: 0; border: 0; background: none; padding-right: 76px; }
.doc-body .block pre code { white-space: pre; overflow-wrap: normal; }
.doc-body blockquote {
  margin: 0 0 1.2em; padding: 12px 18px; border-left: 3px solid var(--pen);
  background: var(--card); border-radius: 0 8px 8px 0; color: var(--ink);
}
.doc-body blockquote > :last-child { margin-bottom: 0; }
.doc-body hr { border: 0; text-align: center; margin: 40px 0; }
.doc-body hr::after { content: "* * *"; color: var(--muted); letter-spacing: .6em; }
.doc-body table {
  display: block; overflow-x: auto; border-collapse: collapse; margin: 0 0 1.4em; font-size: 13.5px; line-height: 1.55;
}
.doc-body th, .doc-body td { text-align: left; vertical-align: top; padding: 7px 18px 7px 0; border-bottom: 1px solid var(--faint); }
.doc-body th { font-weight: 700; border-bottom-color: var(--muted); }
.doc-body td code { white-space: nowrap; }
.doc-body img { max-width: 100%; height: auto; border-radius: 8px; }
.doc-body dt { font-weight: 700; }
.doc-body dd { margin: 0 0 .8em 1.4em; color: var(--muted); }

.page-nav {
  display: flex; justify-content: space-between; gap: 16px;
  margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--faint);
}
.page-nav a { display: flex; flex-direction: column; text-decoration: none; font-weight: 500; }
.page-nav small { color: var(--muted); font-size: 11px; font-weight: 400; }
.page-nav .next { margin-left: auto; text-align: right; }

.docs-body footer { margin-top: 40px; }

@media (max-width: 820px) {
  .docs-frame { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sidebar { position: static; max-height: none; overflow: visible; padding: 0; }
  .menu-toggle {
    display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 12px;
    font: 13px var(--mono); color: var(--ink); text-align: left; cursor: pointer;
    background: var(--card); border: 1px solid var(--faint); border-radius: 8px; padding: 9px 12px;
  }
  .menu-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .menu-icon { color: var(--muted); }
  .nav-panel { display: none; padding: 16px 2px 4px; }
  .sidebar.open .nav-panel { display: block; }
  .sidebar.open .menu-toggle { border-color: var(--pen); }
  .doc { padding-top: 24px; }
  .doc-body h2 .anchor { position: static; padding-right: .4em; }
  .doc-body h3 .anchor { display: none; }
}
@media (max-width: 520px) {
  .wrap.wide { width: calc(100% - 32px); }
  .doc-header { gap: 12px; }
  .doc-tool span { display: none; }
  .doc-tool { padding: 6px; }
  .doc-body .block pre { padding: 40px 14px 12px; font-size: 12.5px; }
  footer .made { float: none; margin: 0 0 6px; }
}