@font-face { font-family: Literata; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("fonts/literata-var-latin.woff2") format("woff2"); }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/fira-sans-400-latin.woff2") format("woff2"); }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/fira-sans-600-latin.woff2") format("woff2"); }
:root {
  --paper: #f7f3e9;
  --ground: #efe9dc;
  --raised: #fcfaf4;
  --ink: #2c221b;
  --ink-hover: #1b130d;
  --muted: #6e625a;
  --line: #d8d2c7;
  --line-strong: #8e8279;
  --focus: #9c470d;
  --focus-ink: #fbf8f2;
  --danger: #a72629;
  --data-1: #791411;
  --data-2: #0053cc;
  --data-3: #a55803;
  --data-4: #4400e0;
  --data-5: #2c7249;
  --data-6: #4d1778;
  --data-7: #147290;
  --data-8: #652049;
  --shadow-1: 0 1px 2px rgba(94, 72, 55, 0.12);
  --shadow-2: 0 2px 9px rgba(94, 72, 55, 0.14);
  --shadow-3: 0 10px 30px rgba(94, 72, 55, 0.18);
  /* The three faces, as tokens, because the components below are the
     product's own snippets and a font stack spelled out in one of them
     is a copy that goes stale. */
  --serif: Literata, ui-serif, Georgia, Times New Roman, serif;
  --sans: Fira Sans, system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --paper: #1c1913;
  --ground: #13100b;
  --raised: #26221c;
  --ink: #e7e2d9;
  --ink-hover: #faf6ef;
  --muted: #9a9289;
  --line: #36312a;
  --line-strong: #81776d;
  --focus: #d78958;
  --focus-ink: #17130e;
  --danger: #e67a73;
  --data-1: #791411;
  --data-2: #0053cc;
  --data-3: #a55803;
  --data-4: #4400e0;
  --data-5: #2c7249;
  --data-6: #4d1778;
  --data-7: #147290;
  --data-8: #652049;
  --shadow-1: 0 1px 2px rgba(0,0,0,.4); --shadow-2: 0 2px 9px rgba(0,0,0,.45); --shadow-3: 0 10px 30px rgba(0,0,0,.5);
} }
.ds { color: var(--ink); font:400 0.875rem/1.5 Fira Sans, system-ui, sans-serif; }
.ds *,.ds *::before,.ds *::after { box-sizing: border-box; }
.ds .ds-lede { margin:0 0 1.5rem; color: var(--muted); max-width: 68ch; }
.ds .ds-main { display:grid; gap:1.25rem; }
.ds h2 { font:600 1.25rem/1.3 Fira Sans, system-ui, sans-serif; margin:1.5rem 0 0; letter-spacing:-0.005em; padding:0; border:0; }
.ds .panel { background: var(--paper); border:1px solid var(--line); border-radius:3px; box-shadow: var(--shadow-1); padding: 16px; }
.ds code { font:400 0.78rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); }
.ds code.dim { opacity:.75; }
.ds .swatches { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:.7rem; }
.ds .sw { display:grid; gap:1px; } .ds .sw b { font-weight:600; }
.ds .sw i { height:46px; border:1px solid var(--line); border-radius:3px; margin-bottom:.3rem; }
.ds .data { display:flex; gap:.3rem; margin-top:.5rem; }
.ds .data i { height:30px; flex:1; border-radius:3px; }
.ds .row { display:grid; grid-template-columns:250px minmax(0,1fr); gap:1.25rem; padding:.85rem 0; border-bottom:1px solid var(--line); align-items:baseline; }
.ds .row:last-child { border-bottom:0; }
.ds .meta { display:grid; gap:.1rem; }
.ds .meta b { font:600 0.75rem/1.2 Fira Sans, system-ui, sans-serif; letter-spacing:0.03em; }
.ds .meta span { color:var(--muted); font-size:0.875rem; }
.ds .shadows { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1rem; }
.ds .sh { display:grid; gap:.25rem; } .ds .sh b { font-weight:600; } .ds .sh span { color:var(--muted); font-size:0.875rem; }
.ds .sh .chip { height:52px; background:var(--raised); border:1px solid var(--line); border-radius:3px; margin-bottom:.4rem; }
.ds .comps { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }
.ds .comp h3 { font:600 1.125rem/1.35 Fira Sans, system-ui, sans-serif; margin:0 0 .2rem; }
.ds .comp p { margin:0 0 .7rem; color:var(--muted); max-width:none; }
.ds .comp .stage { background:var(--ground); border:1px solid var(--line); border-radius:3px; padding:1rem; }
.ds .comp .stage.wide { overflow-x:auto; padding:1rem; }
.ds .comp.full { grid-column:1 / -1; }
.ds ul.rules { margin:0; padding-left:1.1rem; display:grid; gap:.45rem; max-width:80ch; }
.ds ul.plain { list-style:none; margin:0; padding:0; display:grid; gap:.3rem; max-width:none; }
.ds .cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1rem; }
.ds .cols h3, .ds .dd h3 { font:600 0.75rem/1.2 Fira Sans, system-ui, sans-serif; letter-spacing:0.03em; color:var(--muted); margin:0 0 .4rem; }
.ds .dd { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:1rem; }
.ds .dd ul { margin:.3rem 0 0; padding-left:1.1rem; display:grid; gap:.3rem; max-width:none; }
.ds .ds-foot { margin:2rem 0 0; color:var(--muted); }