/* Shared with rok-lang.org/static/style.css up to "site: rokstones.io". */

:root {
  --bg: #fcfbfd;
  --fg: #1e1f26;
  --muted: #5b5e6b;
  --line: #e6e3ec;
  --line-strong: #85838f;
  --panel: #f4f2f7;
  --code-bg: #f5f3f8;
  --accent: #0369a1;
  --accent-soft: #e0f2fe;
  --accent-2: #be185d;
  --accent-2-deep: #9d174d;
  --accent-2-soft: #fce7f3;
  --on-accent: #ffffff;
  --focus: #db2777;
  --glow-1: rgb(244 114 182 / .28);
  --glow-2: rgb(56 189 248 / .24);
  --shadow: 0 1px 2px rgb(30 20 50 / .06), 0 8px 24px rgb(30 20 50 / .08);
  /* Popups: the page in light, a step up in dark. */
  --raised: var(--bg);
  --k: #be185d;
  --t: #0e7490;
  --s: #4d7c0f;
  --n: #b45309;
  --c: #6b6e7a;
  --a: #9d174d;
  --note: #0369a1;
  --important: #be185d;
  --warning: #89621f;
  --caution: #b84036;
  --tip: #24774d;

  --mono: "rok-mono-math", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "D2Coding", monospace;
  --sans: system-ui, -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;

  /* Type scale: 16px base, ratio 1.25, rounded to the 4px grid. */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 2rem;
  --fs-3xl: 3rem;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;

  --header-h: 61px;
  --measure: 46rem;
  --target: 44px;

  color-scheme: light dark;
}

/* Dark: by the system setting unless the reader picked light, or by the
   reader's pick (search.js sets data-theme on <html>). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15151b;
    --fg: #e6e5ec;
    --muted: #9c9eab;
    --line: #2b2b35;
    --line-strong: #6a6a78;
    --panel: #1c1c24;
    --code-bg: #1e1e27;
    --accent: #7dd3fc;
    --accent-soft: #0c2c40;
    --accent-2: #f9a8d4;
    --accent-2-deep: #fbcfe8;
    --accent-2-soft: #3b1a2e;
    --on-accent: #15151b;
    --focus: #f472b6;
    --glow-1: rgb(244 114 182 / .22);
    --glow-2: rgb(56 189 248 / .18);
    --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 12px 32px rgb(0 0 0 / .45);
    --k: #f9a8d4;
    --t: #67e8f9;
    --s: #a3d977;
    --n: #fdba74;
    --c: #8a8c99;
    --a: #f472b6;
    --note: #7dd3fc;
    --important: #f9a8d4;
    --warning: #e0b057;
    --caution: #ef8478;
    --tip: #6fcf97;
    --raised: var(--panel);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #15151b;
  --fg: #e6e5ec;
  --muted: #9c9eab;
  --line: #2b2b35;
  --line-strong: #6a6a78;
  --panel: #1c1c24;
  --code-bg: #1e1e27;
  --accent: #7dd3fc;
  --accent-soft: #0c2c40;
  --accent-2: #f9a8d4;
  --accent-2-deep: #fbcfe8;
  --accent-2-soft: #3b1a2e;
  --on-accent: #15151b;
  --focus: #f472b6;
  --glow-1: rgb(244 114 182 / .22);
  --glow-2: rgb(56 189 248 / .18);
  --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 12px 32px rgb(0 0 0 / .45);
  --k: #f9a8d4;
  --t: #67e8f9;
  --s: #a3d977;
  --n: #fdba74;
  --c: #8a8c99;
  --a: #f472b6;
  --note: #7dd3fc;
  --important: #f9a8d4;
  --warning: #e0b057;
  --caution: #ef8478;
  --tip: #6fcf97;
  --raised: var(--panel);
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }

/* ui-monospace (SF Mono) lacks some math glyphs (sqrt, compose, union): take them from a mono font that
   does, so tables in <pre> keep their columns. */
@font-face {
  font-family: "rok-mono-math";
  src: local("Menlo"), local("DejaVu Sans Mono"), local("Cascadia Mono"), local("Consolas");
  unicode-range: U+2190-21FF, U+2200-22FF, U+2300-23FF, U+25A0-25FF;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + var(--sp-4));
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: var(--fs-base)/1.65 var(--sans);
  word-break: keep-all;
  overflow-wrap: anywhere;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-2); text-decoration: underline; }
::selection { background: var(--accent-2-soft); }

/* Links in running text are underlined: in dark mode the link color
   alone is too close to the body text. */
article :is(p, li, td, th, dd, blockquote) a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}
article :is(p, li, td, th, dd, blockquote) a:hover { text-decoration-color: currentColor; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}

kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 0 0.4em;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--muted);
  font: 600 var(--fs-xs)/1.6 var(--mono);
  text-align: center;
}

.skip {
  position: absolute;
  left: 50%;
  top: var(--sp-2);
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--panel);
  color: var(--fg);
  font-size: var(--fs-sm);
  font-weight: 600;
  transform: translate(-50%, calc(-100% - var(--sp-4)));
}
.skip::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
}
/* Only for keyboard focus: a mouse click never brings it out. The
   shadow comes with it, or it would bleed in at the top of the page. */
.skip:focus-visible { transform: translate(-50%, 0); box-shadow: var(--shadow); }
.skip:hover { text-decoration: none; color: var(--fg); }
@media (prefers-reduced-motion: no-preference) {
  .skip { transition: transform .15s ease-out; }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* header */

.top {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  min-height: var(--header-h);
  padding: var(--sp-3) var(--sp-5);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--sp-2);
  color: var(--fg);
  font-weight: 700;
  font-size: var(--fs-md);
}
.brand:hover { text-decoration: none; color: var(--fg); }
.brand img { transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); }
@media (prefers-reduced-motion: no-preference) {
  .brand:hover img { transform: rotate(-20deg) scale(1.06); }
}
/* Centre the lowercase name on its x-height, not its line box. */
.brand span { text-box: trim-both ex alphabetic; }

.main-nav { display: flex; flex-wrap: wrap; gap: 0 var(--sp-1); }
.main-nav a {
  padding: 6px var(--sp-2);
  border-radius: var(--r-sm);
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.5;
  white-space: nowrap;
}
.main-nav a:hover { color: var(--fg); text-decoration: none; }
.main-nav a[aria-current] {
  color: var(--fg);
  font-weight: 600;
  box-shadow: inset 0 -2px var(--accent-2);
  border-radius: 0;
}

.search { position: relative; margin-left: auto; }
.search input {
  width: 240px;
  height: 36px;
  padding: 0 40px 0 var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--panel);
  color: var(--fg);
  font: inherit;
  font-size: var(--fs-base);
}
.search input::placeholder { color: var(--muted); opacity: 1; }
/* No native search widgets (the webkit clear x, decoration) on the pill. */
.search input { appearance: none; -webkit-appearance: none; }
.search input::-webkit-search-cancel-button,
.search input::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.search input:focus-visible { outline-offset: 1px; }
.search kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.search input:is(:focus, :not(:placeholder-shown)) + kbd { display: none; }
@media (pointer: coarse) { .search kbd { display: none; } }
.results {
  position: absolute;
  right: 0;
  top: calc(100% + var(--sp-2));
  width: min(460px, calc(100vw - 32px));
  max-height: 70vh;
  overflow-y: auto;
  margin: 0;
  padding: var(--sp-1);
  list-style: none;
  background: var(--raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}
.results a { display: block; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); color: var(--fg); line-height: 1.4; }
.results a:hover, .results a[aria-selected="true"] { background: var(--accent-soft); text-decoration: none; color: var(--fg); }
.results code { color: var(--muted); font-size: var(--fs-sm); }
.results small { display: block; margin-top: 2px; color: var(--muted); font-size: var(--fs-sm); }
.results .src {
  float: right;
  margin-left: var(--sp-2);
  padding: 0 var(--sp-2);
  border-radius: 999px;
  background: var(--accent-2-soft);
  color: var(--accent-2);
  font: 600 var(--fs-xs)/1.7 var(--mono);
}
.results mark { padding: 0 1px; border-radius: 3px; background: var(--accent-2-soft); color: var(--accent-2); }
.results .empty { padding: var(--sp-2) var(--sp-3); color: var(--muted); }

.theme {
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: none;
  color: var(--muted);
  font: 16px/1 var(--sans);
  cursor: pointer;
}
.theme:hover { color: var(--accent-2); border-color: var(--accent-2); }
.main-nav + .theme { margin-left: auto; }
@media (pointer: coarse) { .theme { width: var(--target); height: var(--target); } }

/* The hamburger: bars drawn in CSS (no font glyph), shown only when the
   nav collapses. The middle bar is the span; the two others are its
   pseudo-elements, which cross into an X when the menu is open. */
.nav-toggle {
  display: none;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.nav-toggle:hover { color: var(--accent-2); border-color: var(--accent-2); }
.nav-toggle .bars, .nav-toggle .bars::before, .nav-toggle .bars::after {
  content: "";
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.nav-toggle .bars { position: relative; }
.nav-toggle .bars::before { position: absolute; left: 0; top: -6px; }
.nav-toggle .bars::after { position: absolute; left: 0; top: 6px; }
.top.nav-open .nav-toggle .bars { background: transparent; }
.top.nav-open .nav-toggle .bars::before { top: 0; transform: rotate(45deg); }
.top.nav-open .nav-toggle .bars::after { top: 0; transform: rotate(-45deg); }
@media (prefers-reduced-motion: no-preference) {
  .nav-toggle .bars, .nav-toggle .bars::before, .nav-toggle .bars::after {
    transition: transform 160ms ease, background-color 120ms ease, top 160ms ease;
  }
}

/* article */

article h1, article h2, article h3, article h4 {
  position: relative;
  line-height: 1.25;
  text-wrap: balance;
}
article h1 { font-size: var(--fs-2xl); line-height: 1.2; margin: var(--sp-2) 0 var(--sp-4); letter-spacing: -0.01em; }
article h2 {
  font-size: var(--fs-xl);
  margin: var(--sp-7) 0 var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, var(--accent-2), var(--accent)) left bottom / 40px 2px no-repeat;
}
article h3 { font-size: var(--fs-lg); margin: var(--sp-6) 0 var(--sp-3); }
article h4 { font-size: var(--fs-base); margin: var(--sp-5) 0 var(--sp-2); }
/* A heading's code is part of the heading, not a chip inside it. */
:is(h1, h2, h3, h4) code:not(pre code) { padding: 0; background: none; font-size: 0.92em; }
.anchor { position: absolute; left: -1em; width: 1em; color: var(--muted); opacity: 0; font-weight: 400; }
:is(h1, h2, h3, h4):hover .anchor, .anchor:focus-visible { opacity: 1; text-decoration: none; }

article p, article ul, article ol, article blockquote, article pre, article .table-wrap, article dl, article .code { margin: 0 0 var(--sp-4); }
article p, article li { text-wrap: pretty; }
article ul, article ol { padding-left: 1.5em; }
article li + li { margin-top: var(--sp-1); }
article li > ul, article li > ol { margin: var(--sp-1) 0; }
article li::marker { color: var(--accent-2); }
article img { max-width: 100%; height: auto; }
article hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-6) 0; }

code, pre { font-family: var(--mono); font-size: 0.875em; }
:not(pre) > code {
  padding: 0.125em 0.375em;
  border-radius: var(--r-sm);
  background: var(--code-bg);
  word-break: normal;
  overflow-wrap: anywhere;
}
/* On a panel the code background matches it: outline the chip instead. */
:is(.callout, .card, th) :not(pre) > code {
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--line);
}
pre {
  padding: var(--sp-4);
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--code-bg);
  line-height: 1.55;
  tab-size: 4;
}
pre code { font-size: 1em; }
.k { color: var(--k); }
.t { color: var(--t); }
.s { color: var(--s); }
.n { color: var(--n); }
.c { color: var(--c); font-style: italic; }
.a { color: var(--a); }

/* A code block with its copy button (search.js wraps it). */
.code { position: relative; }
.code > pre { margin: 0; }
/* try and copy ride in a header strip at the top-right, a fixed gap apart. */
.code-tools {
  position: absolute;
  top: 4px;
  right: var(--sp-2);
  z-index: 2;
  display: flex;
  gap: var(--sp-2);
}
.copy {
  padding: 2px var(--sp-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--muted);
  font: 600 var(--fs-xs)/1.6 var(--sans);
  cursor: pointer;
  opacity: 0;
}
.code:hover .copy, .copy:focus-visible, .copy.done { opacity: 1; }
.copy:hover { color: var(--accent-2); border-color: var(--accent-2); }

/* A language'd block is a little macOS window: the border and rounding
   move to the wrapper so the title bar and code read as one pane. */
.code[data-lang] {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--code-bg);
}
.code[data-lang] > pre {
  border: 0;
  border-radius: 0;
  padding-top: var(--sp-4);
}
.code-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  height: 36px;
  padding: 0 var(--sp-4);
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
/* The traffic lights, same palette as the terminal windows. */
.code-head .lights { flex: 0 0 auto; display: flex; gap: 6px; margin-right: var(--sp-2); }
.code-head .lights i { width: 11px; height: 11px; border-radius: 50%; background: #f9a8d4; }
.code-head .lights i + i { background: #7dd3fc; }
.code-head .lights i + i + i { background: #3a3a46; }
.code-title { color: var(--muted); font: 600 var(--fs-xs) var(--mono); letter-spacing: 0.02em; }
/* In the bar the tools are a static flex item and always shown. */
.code-head .code-tools { position: static; margin-left: auto; }
.code-head .copy { opacity: 1; }
/* Joined to an output block below: square the shared edge. */
.code[data-lang]:has(+ pre.output) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.copy.done { color: var(--tip); border-color: var(--tip); }
@media (pointer: coarse) {
  .copy { opacity: 1; min-height: 32px; padding: 0 var(--sp-3); }
  /* The button is always shown here: keep the first line clear of it. */
  .code > pre { padding-top: 48px; }
}
@media (prefers-reduced-motion: no-preference) {
  .copy { transition: opacity 120ms ease-out, color 120ms ease-out, border-color 120ms ease-out; }
}

pre.output {
  position: relative;
  padding-top: 30px;
  background: var(--panel);
  border-style: solid;
}
pre.output::before {
  content: "▸ output";
  position: absolute;
  top: 7px;
  left: var(--sp-4);
  color: var(--accent-2);
  font: 600 var(--fs-xs) var(--mono);
  letter-spacing: 0.02em;
}
article :is(pre, .code):has(+ pre.output) { margin-bottom: 0; }
article pre:has(+ pre.output), article .code:has(+ pre.output) > pre { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
article :is(pre, .code):has(+ pre.output) + pre.output { border-top: 1px dashed var(--line); border-top-left-radius: 0; border-top-right-radius: 0; }

.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
th, td { padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); vertical-align: top; }
/* Code in a cell stays whole; the table scrolls instead. */
:is(td, th) > code { overflow-wrap: normal; white-space: nowrap; }
th { background: var(--panel); text-align: left; }

blockquote { margin-left: 0; padding: 0 var(--sp-4); border-left: 3px solid var(--line); color: var(--muted); }

.callout {
  --kind: var(--note);
  --icon: "i";
  margin: 0 0 var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line);
  border-left: 4px solid var(--kind);
  border-radius: var(--r-md);
  background: var(--panel);
}
.callout > :last-child { margin-bottom: 0; }
.callout-title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-1);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--kind);
}
.callout-title::before {
  content: var(--icon);
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--kind);
  color: var(--bg);
  font: 700 11px/1 var(--mono);
}
.callout.important { --kind: var(--important); --icon: "★"; }
.callout.warning { --kind: var(--warning); --icon: "!"; }
.callout.caution { --kind: var(--caution); --icon: "×"; }
.callout.tip { --kind: var(--tip); --icon: "✓"; }

.footnote { font-size: var(--fs-sm); color: var(--muted); }

footer {
  padding: var(--sp-6) var(--sp-5);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--fs-sm);
  text-align: center;
}
footer p { margin: var(--sp-1) 0; }
footer a { display: inline-block; padding: 2px 0; }
footer .links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--sp-3); margin: 0 0 var(--sp-2); padding: 0; list-style: none; }
/* The dot ends a line rather than starting one. */
footer .links li:not(:last-child)::after { content: "·"; margin-left: var(--sp-3); color: var(--line-strong); }
footer p { text-wrap: balance; }
footer .made { font-family: var(--mono); font-size: var(--fs-xs); }
footer .made::before { content: "// "; color: var(--accent-2); }
footer .by { margin: var(--sp-3) 0 var(--sp-1); }
footer .by a { font-weight: 600; }

@media (prefers-reduced-motion: no-preference) {
  .main-nav a, .cta a, .card, .pager a, .side a, .stones a, .results a {
    transition: color 120ms ease-out, background-color 120ms ease-out, border-color 120ms ease-out, transform 160ms ease-out, box-shadow 160ms ease-out;
  }
}

/* 404 */

.lost { padding: var(--sp-7) 0 var(--sp-6); text-align: center; }
.lost img { width: 88px; height: 88px; }
@media (prefers-reduced-motion: no-preference) {
  .lost img { animation: spin 6s linear infinite; }
}
@keyframes spin { to { transform: rotate(360deg); } }
.lost h1 { margin: var(--sp-4) 0 var(--sp-2); font-size: var(--fs-2xl); }
.lost p { margin: 0 auto var(--sp-5); max-width: 32rem; color: var(--muted); }
.lost pre.err { max-width: 34rem; margin: 0 auto var(--sp-5); text-align: left; white-space: pre-wrap; }
.lost .err .e { color: var(--caution); font-weight: 700; }
.lost .err .h { color: var(--tip); font-weight: 700; }
.lost .err .g { color: var(--accent); }

/* print */

@media print {
  .skip, .top, .side, .pager, footer, .copy, .search, .lang-switch, .anchor { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .wrap, main { display: block; max-width: none; padding: 0; }
  a { color: inherit; text-decoration: underline; }
  pre { white-space: pre-wrap; border: 1px solid #ccc; break-inside: avoid; }
  article h2 { background: none; break-after: avoid; }
}

/* site: rokstones.io */

main { max-width: calc(var(--measure) + 320px + var(--sp-7) + 2 * var(--sp-5)); margin: 0 auto; padding: var(--sp-6) var(--sp-5) var(--sp-8); min-width: 0; }
.home main, .list main { max-width: calc(var(--measure) + 2 * var(--sp-5)); }
main:focus { outline: none; }
h1, h2, h3 { line-height: 1.25; }

/* landing */

.hero { padding: var(--sp-7) 0 var(--sp-4); text-align: center; }
.hero img { filter: drop-shadow(-12px -6px 20px var(--glow-1)) drop-shadow(12px 8px 20px var(--glow-2)); }
@media (prefers-reduced-motion: no-preference) {
  .hero img { transition: transform .6s cubic-bezier(.3, 1.6, .5, 1); }
  .hero img:hover { transform: rotate(-30deg); }
}
.hero h1 { font-size: var(--fs-3xl); line-height: 1.1; margin: var(--sp-3) 0 var(--sp-3); letter-spacing: -0.02em; }
.hero .lead { margin: 0 0 var(--sp-5); font-size: var(--fs-lg); line-height: 1.5; color: var(--muted); text-wrap: balance; }
.search.big { max-width: 560px; margin: 0 auto; text-align: left; }
.search.big .q { width: 100%; height: 52px; padding: 0 48px 0 var(--sp-5); font-size: var(--fs-md); }
.search.big kbd { right: var(--sp-4); }
.search.big .results { left: 0; right: 0; width: auto; }
.stats { margin: var(--sp-4) 0 0; color: var(--muted); }
/* How a stone gets into your code: three steps joined by arrows. */
.how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); margin: var(--sp-6) 0 0; padding: 0; list-style: none; counter-reset: step; }
.how li { position: relative; padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); counter-increment: step; }
.how li::before { content: counter(step); position: absolute; top: calc(-1 * var(--sp-3)); left: var(--sp-4); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-2); color: var(--on-accent); font: 700 var(--fs-xs)/1 var(--mono); }
.how li + li::after { content: "→"; position: absolute; left: calc(-1 * var(--sp-5) + 4px); top: 50%; transform: translateY(-50%); color: var(--accent-2); font: 700 var(--fs-md) var(--mono); }
.how li > code { display: block; margin: var(--sp-1) 0 var(--sp-2); padding: 0; background: none; box-shadow: none; font-weight: 600; }
.how b { color: var(--accent-2); }
.how span { color: var(--muted); font-size: var(--fs-sm); }
.stats strong { color: var(--fg); font-variant-numeric: tabular-nums; }
.stats a { display: inline-block; padding: 2px 0; }
.columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--sp-4) var(--sp-6); margin: var(--sp-6) 0 var(--sp-2); }
.columns h2 { font-size: var(--fs-lg); margin: 0 0 var(--sp-2); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--line); background: linear-gradient(90deg, var(--accent-2), var(--accent)) left bottom / 40px 2px no-repeat; }
.empty { color: var(--muted); }
.empty-box { padding: var(--sp-6) var(--sp-5); border: 1px dashed var(--line-strong); border-radius: var(--r-lg); text-align: center; color: var(--muted); }
.empty-box::before { content: "¯\\_(ツ)_/¯"; display: block; margin-bottom: var(--sp-2); color: var(--accent-2); font: 600 var(--fs-lg) var(--mono); }

/* stone lists */

.stones { list-style: none; margin: 0; padding: 0; }
.stones a { display: block; padding: var(--sp-2) var(--sp-3); margin: 0 calc(-1 * var(--sp-3)); border-radius: var(--r-md); color: var(--fg); line-height: 1.5; }
.stones a:hover { background: var(--panel); text-decoration: none; color: var(--fg); }
.stones .name { font-weight: 600; color: var(--accent); }
.stones a:hover .name { color: var(--accent-2); }
.stones .ver { font-family: var(--mono); font-size: var(--fs-sm); color: var(--muted); }
.stones .note { float: right; margin-left: var(--sp-3); color: var(--muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.stones .license { margin-left: 6px; font-size: var(--fs-sm); color: var(--muted); }
.stones .desc { display: block; margin-top: 2px; color: var(--muted); font-size: var(--fs-sm); }

/* stone page */

.stone-head { padding: var(--sp-2) 0 var(--sp-5); border-bottom: 1px solid var(--line); margin-bottom: var(--sp-5); }
.stone-head h1 { font-size: var(--fs-2xl); line-height: 1.2; margin: 0 0 var(--sp-2); }
.stone-head .ver { margin-left: var(--sp-1); padding: 0 var(--sp-2); border-radius: 999px; background: var(--accent-soft); color: var(--accent); font: 600 var(--fs-md)/1.6 var(--mono); vertical-align: 0.2em; }
.stone-head .about { margin: 0; color: var(--muted); font-size: var(--fs-md); }
.warn { margin: var(--sp-3) 0 0; padding: var(--sp-2) var(--sp-4); border: 1px solid var(--line); border-left: 4px solid var(--caution); border-radius: var(--r-md); background: var(--panel); color: var(--caution); font-weight: 600; }
.stone { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--sp-7); }
.stone .readme { grid-column: 1; grid-row: 1; min-width: 0; }
.stone .readme > h1:first-child { display: none; }
.meta { grid-column: 2; grid-row: 1; min-width: 0; font-size: var(--fs-sm); }
.meta section { margin-bottom: var(--sp-5); }
.meta h2 { font-size: var(--fs-xs); color: var(--muted); margin: 0 0 var(--sp-2); font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.06em; }
.meta h2::before { content: "# "; color: var(--accent-2); }
.meta h3 { font-size: var(--fs-sm); color: var(--muted); margin: var(--sp-3) 0 var(--sp-1); }
.meta p { margin: var(--sp-2) 0; }
.meta pre { margin: 0 0 var(--sp-2); padding: var(--sp-3); font-size: 0.8125rem; }
.meta .code { margin: 0 0 var(--sp-2); }
.meta .code > pre { padding-right: 64px; }
.meta .sh code::before { content: "$ "; color: var(--accent-2); font-weight: 700; user-select: none; }
.meta dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-1) var(--sp-3); margin: 0; }
.meta dt { color: var(--muted); }
.meta dd { margin: 0; overflow-wrap: anywhere; }
.meta dd a, .deps a { display: inline-block; padding: 2px 0; }
.meta .url { overflow-wrap: normal; word-break: normal; }
.deps, .versions { list-style: none; margin: 0; padding: 0; }
.deps li { padding: 2px 0; }
.deps small { color: var(--muted); }
.versions li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.versions .v { font-family: var(--mono); font-weight: 600; }
.versions .yanked .v { text-decoration: line-through; color: var(--muted); }
.versions .commit { margin-left: auto; }
.versions .commit a { display: inline-block; padding: 2px 0; }
.tag { padding: 0 var(--sp-2); border: 1px solid var(--line-strong); border-radius: 999px; font-size: var(--fs-xs); line-height: 1.6; color: var(--muted); }
.tag.latest { border-color: transparent; background: var(--accent-2-soft); color: var(--accent-2); font-weight: 600; }
.tag.yanked { border-color: var(--caution); color: var(--caution); }
.stones .yanked .name, .stones .yanked .ver { color: var(--muted); text-decoration: line-through; }
.stones .tag { margin-left: 6px; }
.stone-head .ver.yanked { background: var(--panel); color: var(--muted); text-decoration: line-through; }

/* small screens */

/* The header folds into the hamburger exactly when the full nav would no
   longer fit on one row. search.js measures that (forcing the row not to
   wrap or shrink) and toggles .nav-compact, so the same rule serves any
   number of links on any page -- no per-page width breakpoint. */
.top.nav-measuring { flex-wrap: nowrap; }
.top.nav-measuring > * { flex-shrink: 0; }
.top.nav-measuring .main-nav { flex-wrap: nowrap; flex-shrink: 0; }

.top.nav-compact { position: relative; flex-wrap: wrap; gap: 0 var(--sp-3); padding: var(--sp-2) var(--sp-4); }
.nav-compact .brand { min-height: var(--target); }
.nav-compact .nav-toggle { display: inline-grid; order: 0; margin-left: auto; }
.nav-compact .theme { order: 0; margin-left: var(--sp-2); }
.top.nav-compact > .search { order: 1; flex: 0 0 100%; min-width: 0; margin: var(--sp-2) 0 0; position: relative; z-index: 2; }
.top.nav-compact > .search .q { width: 100%; height: 40px; }
.nav-compact .main-nav {
  order: 3;
  position: absolute;
  top: calc(100% + var(--sp-1));
  right: var(--sp-4);
  min-width: 220px;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-2);
  background: var(--raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
  z-index: 30;
  display: none;
}
.top.nav-compact.nav-open .main-nav { display: flex; }
.nav-compact .main-nav a { display: flex; align-items: center; min-height: var(--target); padding: 0 var(--sp-3); border-radius: var(--r-sm); white-space: nowrap; }
.nav-compact .main-nav a:hover, .nav-compact .main-nav a:focus-visible { color: var(--accent-2); background: var(--panel); }
.top.nav-compact > .search .results { position: fixed; left: var(--sp-4); right: var(--sp-4); top: 60px; width: auto; }
.nav-compact .results a { min-height: var(--target); }

@media (max-width: 860px) {
  html { scroll-padding-top: var(--sp-4); }
}
@media (max-width: 860px) {
  main { padding: var(--sp-5) var(--sp-4) var(--sp-7); }
  .stones a { padding: var(--sp-3); }
  .how { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
  .how li + li::after { content: "↓"; left: 50%; top: calc(-1 * var(--sp-5) + 2px); transform: translateX(-50%); }
  .stone { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
  .stone .readme, .meta { grid-column: 1; grid-row: auto; }
  .anchor { display: none; }
  .hero { padding-top: var(--sp-6); }
  .hero h1 { font-size: 2.5rem; }
}

/* account page (served by `serve`) */

.account form { display: inline-flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin: 0 0 var(--sp-4); }
.account td form { margin: 0; }
.account input:not([type=hidden]) { min-height: 36px; font: inherit; padding: 0 var(--sp-3); border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--bg); color: var(--fg); }
.account button { min-height: 36px; font: inherit; font-weight: 600; padding: 0 var(--sp-4); border: 1px solid var(--line-strong); border-radius: 999px; background: var(--panel); color: var(--fg); cursor: pointer; white-space: nowrap; }
.account button:hover { border-color: var(--accent-2); }
.account pre { user-select: all; }
@media (pointer: coarse) {
  .account input:not([type=hidden]), .account button { min-height: var(--target); }
}