/* The colours and fonts are in tokens.css. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
code, pre, kbd { font-family: var(--mono); }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
section { padding: 80px 0; border-top: 1px dashed var(--line); }
section.hero { border-top: 0; padding: 56px 0 0; }

h1, h2, h3 { margin: 0; letter-spacing: -.02em; }
h1 { font-size: clamp(36px, 4.8vw, 56px); line-height: 1.02; font-weight: 600; letter-spacing: -.03em; }
h2 { font-size: clamp(28px, 3.2vw, 38px); line-height: 1.1; font-weight: 600; margin-bottom: 12px; }
h3 { font-size: 17px; font-weight: 600; margin-bottom: 6px; }
p { margin: 0; }
.lede { font-size: 17.5px; color: var(--muted); max-width: 62ch; }
.eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}
.muted { color: var(--muted); }
.small { font-size: 14px; }
.sec-head { max-width: 66ch; margin-bottom: 36px; }

/* nav */
nav.top { display: flex; align-items: center; justify-content: space-between; height: 60px; border-bottom: 1px solid var(--line); }
nav.top .logo { font-weight: 700; font-size: 20px; letter-spacing: -.02em; text-decoration: none; display: flex; align-items: center; gap: 10px; }
nav.top .logo span { font-family: var(--hand); font-weight: 400; color: var(--accent); font-size: 15px; }
nav.top ul { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; font-size: 14px; }
nav.top a { text-decoration: none; color: var(--muted); }
nav.top a:hover { color: var(--ink); }

/* buttons and install chip */
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; font-size: 14px; font-weight: 600;
  border: 1px solid var(--accent); background: var(--accent); color: #fff;
  border-radius: 4px; text-decoration: none;
}
.btn.ghost { background: #fff; color: var(--ink); border-color: var(--line); }
.cmd {
  font-family: var(--mono); font-size: 13.5px;
  border: 1px solid var(--line); background: #fff; padding: 10px 14px;
  display: inline-flex; gap: 10px; align-items: center;
}
.cmd .pr { color: var(--accent); }

/* figures */
figure { margin: 0; }
figure svg { width: 100%; height: auto; display: block; }
figure svg text { user-select: none; }
figure svg .hand { font-family: var(--hand); }
figure svg .mono { font-family: var(--mono); }
figcaption {
  display: flex; justify-content: space-between;
  font-family: var(--hand); font-size: 14px; color: var(--muted);
  margin-top: 8px;
}
figcaption b { font-weight: 400; color: var(--ink); }
.frame { border: 1px solid var(--line); background: #fff; padding: 18px; }

/* hero */
/* Hand-drawn underline. The two paths are rough.js output for a single line,
   drawn with the same base the figures use in site.js (roughness 1.1,
   strokeWidth 1.4, bowing 1.2, seed 25), then baked in so the hero needs no
   JS. rough.js strokes every line twice; that doubling is what reads as a pen
   rather than a rule. See site/README.md to regenerate. */
.sketch {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%232b4ee6' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M3.16 7.07C61.23 10.57 122.09 10.30 298.13 8.47'/%3E%3Cpath d='M1.82 7.50C101.60 4.98 199.73 4.78 297.58 7.66'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% .26em;
  padding-bottom: .1em;
}

.hero-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: center; padding-bottom: 56px; }
@media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; } }
.hero .lede { margin-top: 18px; }
.hero .row { margin-top: 24px; }
.hero .cmd { margin-top: 12px; }
.hero-fig { padding-bottom: 56px; }

/* coloured components */
.p-ns { color: var(--c-ns); } .p-schema { color: var(--c-schema); } .p-id { color: var(--c-id); }
.p-attr { color: var(--c-attr); } .p-val { color: var(--c-val); }

/* code */
pre {
  margin: 0; background: #fff; border: 1px solid var(--line);
  padding: 16px 18px; font-size: 13px; line-height: 1.6; overflow: auto;
}
pre .cm { color: var(--muted); }
pre .st { color: var(--c-val); }
pre .pr { color: var(--accent); font-weight: 600; }
.win { background: #fff; border: 1px solid var(--line); }
.win .tab { display: flex; align-items: center; gap: 8px; padding: 7px 14px; border-bottom: 1px solid var(--line); background: var(--bg2); font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.win pre { border: 0; }

/* cards */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 860px) { .cards { grid-template-columns: 1fr; } }
.card { border: 1px solid var(--line); background: #fff; padding: 18px; }
.card p { color: var(--muted); font-size: 14.5px; }
.card pre { margin-top: 12px; font-size: 12px; background: var(--bg2); border: 0; }
.card figure { margin-top: 12px; }
a.card { display: block; text-decoration: none; }
a.card:hover { border-color: var(--accent); }
a.card:hover h3 { color: var(--accent); }

/* one-line notes under a grid */
.note { margin-top: 24px; }
.note code { font-size: 13px; }

/* terminal replay, driven by replay.js */
.term .tab { justify-content: space-between; }
.term .tab code { font-size: 11px; }
.term .ctl { display: flex; gap: 6px; }
.term button {
  font: inherit; font-size: 11px; color: var(--muted); cursor: pointer;
  background: var(--card); border: 1px solid var(--line); padding: 2px 9px;
}
.term button:hover:not(:disabled) { color: var(--ink); border-color: var(--accent); }
.term button:disabled { opacity: .45; cursor: default; }
.term .screen { height: 460px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12.5px; }
.term .p { color: var(--accent); font-weight: 600; }
.term .c { color: var(--muted); }
.term .e { color: var(--c-val); }
.term .cur {
  display: inline-block; width: .55em; height: 1.15em; vertical-align: text-bottom;
  background: var(--ink); animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .term .cur { animation: none; } }
.term .noscript { padding: 14px 18px; }
.term .chapters { display: flex; gap: 4px; }
.term .chapters button[aria-selected="true"] { color: var(--ink); border-color: var(--accent); }
.term .ctl { align-items: center; }
@media (max-width: 640px) { .term .rec { display: none; } }

/* the still frame and the play button, as on a video */
.term .stage { position: relative; }
.term .stage[data-state="poster"] .screen,
.term .stage[data-state="done"] .screen { filter: blur(1.5px); opacity: .45; }
.term .stage[data-state="poster"] .cur,
.term .stage[data-state="done"] .cur { display: none; }
.term .screen { cursor: default; }
.term .stage[data-state="playing"] .screen { cursor: pointer; }
.term .overlay {
  position: absolute; inset: 0; width: 100%; padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: color-mix(in srgb, var(--card) 40%, transparent);
  border: 0; cursor: pointer; color: var(--ink);
}
.term .overlay[hidden] { display: none; }
.term .stage[data-state="paused"] .overlay { background: color-mix(in srgb, var(--card) 20%, transparent); }
.term .overlay .play {
  width: 68px; height: 68px; border-radius: 50%; background: var(--accent);
  display: grid; place-items: center; box-shadow: 0 8px 24px rgba(43, 78, 230, .35);
  transition: transform .15s ease;
}
.term .overlay .play::before {
  content: ""; margin-left: 6px;
  border-style: solid; border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent #fff;
}
.term .overlay:hover .play, .term .overlay:focus-visible .play { transform: scale(1.07); }
.term .overlay:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.term .ov-title { font-family: var(--sans); font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.term .ov-meta { font-family: var(--hand); font-size: 15px; color: var(--muted); }
.term .progress { height: 3px; background: var(--bg2); border-top: 1px solid var(--line); }
.term .progress span { display: block; width: 0; height: 100%; background: var(--accent); transition: width .15s linear; }
@media (prefers-reduced-motion: reduce) {
  .term .overlay .play, .term .progress span { transition: none; }
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: pre; border: 0;
}

/* the link from a section to its guide in the docs */
.more { margin-top: 28px; }

/* get started */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }.step { position: relative; padding-left: 52px; }
.step i {
  position: absolute; left: 0; top: -4px;
  width: 38px; height: 38px; display: grid; place-items: center;
  font-family: var(--hand); font-style: normal; font-size: 20px; color: var(--accent);
  border: 1.5px solid var(--accent); border-radius: 50% 45% 55% 50% / 55% 50% 50% 45%;
}
.step b { display: block; margin-bottom: 4px; }
.step p { color: var(--muted); font-size: 14.5px; }
.step pre { margin-top: 10px; font-size: 12.5px; white-space: pre-wrap; overflow-wrap: anywhere; }

footer { padding: 40px 0; border-top: 1px dashed var(--line); font-size: 14px; color: var(--muted); }
footer .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
footer a { text-decoration: none; }
footer a:hover { color: var(--ink); }

.stack { display: grid; gap: 18px; min-width: 0; }
.stack > * { min-width: 0; }