@import url('./tokens.css');

/* Atkinson Hyperlegible Fonts */
@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('./AtkinsonHyperlegibleNextVF-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}


/* === Reset === */

* { touch-action: manipulation; box-sizing: border-box; }

html { scroll-behavior: smooth; }

:root {
  font-size: var(--font-base);
  font-family: var(--font-sans);
  font-weight: var(--weight-normal);
  line-height: var(--leading);
}

body {
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: inherit;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  position: relative;
}

.skip-link {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.skip-link:focus {
  position: fixed;
  top: 0; left: var(--sp-4);
  width: auto; height: auto;
  overflow: visible; clip: auto;
  white-space: normal;
  z-index: 100;
  padding: var(--sp-2) var(--sp-4);
  background: var(--color-ink);
  color: var(--color-bg-alt);
  text-decoration: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}


/* === Spray effect === */

#spray {
  position: absolute;
  inset: 0;
  min-height: 100%;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

#spray .cloud {
  position: absolute;
  left: var(--x); top: var(--y);
  width: var(--size); height: var(--size);
  margin: var(--margin);
  border-radius: 50%;
  background: radial-gradient(circle,
    oklch(var(--center-l) var(--accent-c) var(--accent-h) / var(--alpha)) 0%,
    oklch(0.80 0.04 var(--accent-h) / calc(var(--alpha) * 0.5)) 75%,
    oklch(0.80 0.04 var(--accent-h) / 0) 100%
  );
  mix-blend-mode: multiply;
  filter: blur(var(--blur));
  pointer-events: none;
  opacity: var(--opacity, 1);
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), oklch(0.65 0.15 var(--accent-h) / 54%), transparent 75%);
  z-index: 2;
  mix-blend-mode: screen;
}


/* === Layout === */

/* Perimeter frame — wraps the whole document, scrolls with it */
body { position: relative; }

body::after {
  content: '';
  position: absolute;
  inset: 0;
  border: var(--sp-3) solid var(--color-ink);
  pointer-events: none;
  z-index: 99;
}

main, header {
  max-width: calc(var(--content-w) + var(--sp-6) * 2);
  margin: 0 auto;
  padding: 0 var(--sp-6);
  box-sizing: border-box;
}

header { padding-top: var(--sp-6); }

.content { padding: var(--sp-8) 0; }

footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) 0 var(--sp-8);
}

/* a label attaches to the code block after it, separates from what precedes */
.content p:has(+ .highlighter-rouge) {
  margin: var(--sp-5) 0 var(--sp-2);
}


/* === Navigation === */

nav {
  display: flex;
  gap: var(--sp-4);
  justify-content: flex-end;
  font-weight: var(--weight-bold);
}

header nav { align-items: center; }

nav .gh {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

nav .gh svg { width: 1.3em; height: 1.3em; display: block; }
nav .gh:hover { opacity: 0.8; }

nav .version {
  position: relative;
  margin-left: var(--sp-5);
}

nav .version::before {
  content: '\2325';
  position: absolute;
  right: 100%;
  margin-right: 0.3em;
}

nav .logo {
  margin-right: auto;
  font-size: var(--text-2xl);
  line-height: 0.6;
  text-decoration: none;
  transition: transform 9s ease-in-out;
  transform-origin: center 60%;
  display: inline-block;
}

nav .logo:hover {
  text-decoration: none;
  transform: rotate(3600deg);
}

nav p { display: contents; }


/* === Table of Contents === */

#toc {
  position: fixed;
  text-align: left;
  /* starts at the level of the page's first heading */
  top: 8rem;
  left: max(var(--sp-4), calc((100vw - var(--content-w)) / 2 - 16rem));
  width: var(--toc-w);
  max-height: calc(100vh - var(--sp-8) * 2);
  overflow-y: auto;
  font-size: var(--text-base);
  z-index: 5;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--alpha-50) transparent;
}

#toc .logo {
  display: inline-block;
  font-size: var(--text-xl);
  line-height: 1;
  color: var(--color-ink);
  text-decoration: none;
  margin-bottom: var(--sp-5);
  opacity: 0.7;
  transition: transform 9s ease-in-out, opacity var(--ease);
  transform-origin: center 60%;
}

#toc .logo:hover { opacity: 1; transform: rotate(3600deg); }

#toc nav {
  display: flex;
  flex-direction: column;
  gap: 0;
  font-weight: var(--weight-normal);
}

#toc a {
  display: block;
  padding: var(--sp-1) var(--sp-2);
  color: var(--color-ink);
  text-decoration: none;
  opacity: 0.6;
  transition: opacity var(--ease);
  text-wrap: balance;
}

#toc a.indent { padding-left: var(--sp-4); }
#toc a.indent-2 { padding-left: var(--sp-5); }
#toc a:hover { opacity: 1; }

#toc a.active {
  opacity: 1;
  color: var(--color-ink);
}


/* === Typography === */

h1, h2, h3, h4, h5, h6 {
  color: var(--color-ink);
  margin-top: 2em;
  margin-bottom: 0.5em;
  scroll-margin-top: 1em;
  position: relative;
}

h1 + h2, h1 + h3, h1 + h4,
h2 + h3, h2 + h4,
h3 + h4, h3 + h5,
h4 + h5, h4 + h6,
h5 + h6 { margin-top: 0.5em; }

h1 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-black);
  letter-spacing: -0.02em;
  line-height: 1;
  margin: var(--sp-4) 0;
}

/* Hero: display-size wordmark, calm description; interaction-transparent — spray plays through it */
.no-toc {
  pointer-events: none;
  user-select: none;
}

.no-toc a,
.no-toc .logo { pointer-events: auto; }

.no-toc h1 {
  font-size: clamp(3.5rem, 10vw, 5.5rem);
  white-space: nowrap;
  margin: var(--sp-4) 0 0;
}

.no-toc h1 + h2 { margin-top: var(--sp-4); }

.no-toc h3 {
  font-size: var(--text-md);
  font-weight: var(--weight-normal);
  max-width: 44ch;
}

h1 .logo {
  display: inline-block;
  transition: transform 9s ease-in-out;
  transform-origin: center 60%;
}

h1:hover .logo { transform: rotate(3600deg); }

h2 {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  margin: var(--sp-8) 0 var(--sp-4);
}

h2 > a:not(.anchor) {
  float: right;
  font-size: 0.5em;
  font-weight: var(--weight-normal);
  line-height: 2.5;
}

h2:first-of-type { margin-top: 0; }

h3 { font-size: var(--text-lg); font-weight: var(--weight-bold); }
h4 { font-size: var(--text-md); font-weight: var(--weight-bold); }

/* Anchor links */
:is(h2, h3, h4, h5, h6) > a.anchor {
  position: absolute;
  left: -1.5em; width: 1.5em;
  text-align: center;
  text-decoration: none;
  opacity: 0;
  font-weight: var(--weight-normal);
  transition: opacity var(--ease);
}

:is(h2, h3, h4, h5, h6):hover > a.anchor { opacity: 0.4; }
:is(h2, h3, h4, h5, h6) > a.anchor:hover { opacity: 1; }

a {
  color: var(--color-ink);
  text-decoration-color: var(--alpha-20);
  text-underline-offset: .2em;
  text-decoration-line: underline;
}

a:hover { text-decoration-color: var(--color-ink); }

::placeholder {
  color: oklch(from var(--color-ink) l c h / 50%);
  opacity: 1;
}

code {
  background: var(--alpha-10);
  padding: 0.1em 0.3em;
  font-size: 0.875em; /* mono runs optically large next to Hyperlegible */
}

pre, code { font-family: var(--font-mono); }

pre {
  background: var(--color-code-bg);
  color: var(--color-code-fg);
  font-size: var(--text-sm);
  line-height: var(--leading);
  white-space: pre-wrap;
  word-wrap: break-word;
  padding: var(--sp-4) var(--sp-5);
  margin: var(--sp-4) 0;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: oklch(1 0 0 / 20%) transparent;
}

pre code { background: none; padding: 0; font-size: inherit; }

/* Rouge syntax highlighting — dim structure, accent the code that matters */
.highlight .c, .highlight .c1, .highlight .cm { color: oklch(0.82 0.06 var(--accent-h) / 55%); } /* comments — dimmed code-fg, visible on the dark block */
.highlight .k, .highlight .kd, .highlight .kn { color: oklch(1 0 0); } /* keywords */
.highlight .s, .highlight .s1, .highlight .s2 { color: oklch(1 0 0); } /* strings — the main code */
.highlight .nf, .highlight .nb { color: var(--color-code-fg); } /* functions */
.highlight .mi, .highlight .mf { color: var(--color-code-fg); } /* numbers */
.highlight .nt { color: oklch(0.66 0.09 var(--accent-h)); } /* tags + brackets — dim structure */
.highlight .na { color: oklch(0.90 0.05 var(--accent-h)); } /* attributes — sprae directives */
.highlight .p, .highlight .o { color: oklch(0.66 0.09 var(--accent-h)); } /* punctuation */

ul, ol {
  padding-left: 0;
  margin: var(--sp-4) 0;
  list-style-position: inside;
}

li { margin: var(--sp-1) 0; }


/* === UI Elements === */

button {
  appearance: none;
  --btn-bg: var(--color-ink);
  border: var(--border-w) solid var(--btn-bg);
  cursor: pointer;
  background: var(--btn-bg);
  color: light-dark(var(--color-bg-alt), oklch(0.95 0.01 var(--accent-h)));
  /* Hyperlegible sits optically high in pills — settle it down a touch */
  padding: calc(var(--sp-2) + 0.04em) var(--sp-4) calc(var(--sp-2) - 0.04em);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

button:hover { opacity: 0.9; }

button:focus-visible {
  outline: var(--border-w) solid var(--color-bg-alt);
  outline-offset: var(--border-w);
}

.badge {
  display: inline-block;
  background: var(--color-ink);
  color: var(--color-bg-alt);
  font-size: var(--text-xs);
  padding: 0.15em 0.5em;
  border-radius: var(--radius-pill);
  margin-left: 0.3em;
  vertical-align: middle;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--sp-4) 0;
}

th, td {
  text-align: left;
  padding: var(--sp-2);
  border-bottom: var(--border-w-thin) solid var(--alpha-20);
}

tr:hover { background: var(--color-bg-alt); }
.tabs table { table-layout: fixed; margin-left: calc(-1 * var(--sp-2)); margin-right: calc(-1 * var(--sp-2)); width: calc(100% + var(--sp-4)); }
.tabs table td:first-child { width: 20%; }
.tabs table td:nth-child(2) { width: 30%; }
.tabs table td:nth-child(3) { width: 50%; }
.tabs table thead { display: none; }
th { font-weight: var(--weight-bold); }


/* === Tabs === */

.tabs { margin: var(--sp-5) 0; }

/* rounded pill edges read as inset — pull the row back to the optical margin */
.tabs button:first-of-type { margin-left: calc(-1 * var(--sp-2)); }

.tabs button {
  background: var(--color-bg);
  color: var(--color-ink);
  border: var(--border);
  border-radius: var(--radius-sm);
  margin-right: var(--sp-2);
  font-size: var(--text-base);
  transition: background var(--ease), color var(--ease);
}

.tabs button.active { background: var(--color-ink); color: var(--color-bg-alt); border-color: var(--color-ink); }
.tabs button.active .tab-count { opacity: 0.5; }
.tabs button:not(.active):hover { opacity: 1; background: var(--color-bg-alt); }

.tab-count {
  font-size: var(--text-xs);
  opacity: 0.4;
  font-weight: var(--weight-normal);
  margin-left: 0.2em;
}


/* === Reference rows (expandable, FAQ-style) === */

.ref-list details {
  border-bottom: var(--border-w-thin) solid var(--alpha-20);
  interpolate-size: allow-keywords;
  /* row (hover + separator) bleeds a step; summary padding brings content flush with the section */
  margin: 0 calc(-1 * var(--sp-2));
}

.ref-list summary {
  display: grid;
  grid-template-columns: 20% 30% 50%;
  align-items: baseline;
  gap: var(--sp-2);
  padding: var(--sp-2);
  cursor: pointer;
  list-style: none;
  transition: background var(--ease);
}

/* chip hugs the code text, not the whole cell */
.ref-list summary code { justify-self: start; }

.ref-list summary::-webkit-details-marker { display: none; }
.ref-list summary { position: relative; }
.ref-list summary:hover { background: var(--color-bg-alt); }

/* chevron: down on hover (expand), up while open (collapse) */
.ref-list summary::after {
  content: '';
  position: absolute;
  right: var(--sp-3);
  top: 50%;
  width: 0.4em;
  height: 0.4em;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: translateY(-75%) rotate(45deg);
  opacity: 0;
  transition: opacity var(--ease);
}

.ref-list summary:hover::after { opacity: 0.55; }

.ref-list details[open] summary::after {
  opacity: 0.55;
  transform: translateY(-25%) rotate(-135deg);
}

/* fold/unfold animation */
.ref-list details::details-content {
  block-size: 0;
  overflow: clip;
  opacity: 0;
  transition: block-size 0.25s, opacity 0.2s, content-visibility 0.25s allow-discrete;
}

.ref-list details[open]::details-content {
  block-size: auto;
  opacity: 1;
}

/* code fits precisely against the row, no gap and no post-animation margin jump */
.ref-list details pre {
  margin: 0;
}


/* === Demo / Example === */

.demo {
  padding: var(--sp-5);
  margin: var(--sp-6) 0;
}

.demo p { margin: 0; }

.demo input[type="text"],
.demo input[type="password"],
.demo input[type="search"],
.demo input:not([type]) {
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-3);
  border: var(--border);
  border-radius: var(--radius-pill);
  font: inherit;
  color: var(--color-ink);
  text-box-trim: both;
  text-box-edge: cap alphabetic;
}


.demo ul { list-style: none; padding: 0 0 0 var(--sp-3); margin: 0; }
.demo ul li { padding: var(--sp-1) 0; margin: 0; }
.demo button { margin-right: var(--sp-2); }

.example {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  margin: var(--sp-8) 0;
}

.example .demo { margin: 0; display: flex; flex-direction: column; }
.example .highlight { display: flex; height: 100%; }
.example pre { margin: 0; flex: 1; box-sizing: border-box; }

.bg-graph-paper {
  background-image:
    linear-gradient(to right, var(--alpha-20) 1px, transparent 1px),
    linear-gradient(to bottom, var(--alpha-20) 1px, transparent 1px);
  background-size: var(--sp-4) var(--sp-4);
}

.playground {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  margin: calc(var(--sp-8) + var(--sp-5)) 0 var(--sp-6);
}

/* Editor: highlighted <pre> below, transparent <textarea> above — pre auto-grows, no scrollbars */
.playground .editor {
  position: relative;
  display: grid;
  background: var(--color-code-bg);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading);
}

.playground .editor pre,
.playground .editor textarea {
  grid-area: 1 / 1;
  margin: 0;
  padding: var(--sp-5);
  font: inherit;
  line-height: inherit;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  width: 100%;
  min-height: 16rem;
  box-sizing: border-box;
}

.playground .editor pre {
  color: var(--color-code-fg);
  background: none;
}

.playground .editor textarea {
  background: transparent;
  color: transparent;
  caret-color: var(--color-code-fg);
  border: none;
  resize: none;
  outline: none;
  overflow: hidden;
}

/* logical source lines as blocks — the caret's line highlighted, wrapped rows included */
.playground .editor i.ln {
  display: block;
  min-height: 1lh;
}

.playground .editor i.ln.cl {
  background: oklch(1 0 0 / 8%);
  margin: 0 calc(-1 * var(--sp-5));
  padding: 0 var(--sp-5);
}

/* hl() tokens (editor + reference examples): structure dim, directives light, values (the main code) bright */
.content pre i { font-style: normal; }
.content pre i.tp { color: oklch(0.60 0.09 var(--accent-h)); }
.content pre i.tn { color: oklch(0.72 0.08 var(--accent-h)); }
.content pre i.dr { color: oklch(0.90 0.05 var(--accent-h)); }
.content pre i.vl { color: oklch(1 0 0); }

.playground iframe {
  border: none;
  width: 100%;
  height: 100%;
  min-height: 16rem;
}

.playground + p {
  opacity: 0.65;
  margin-top: calc(-1 * var(--sp-5));
  text-align: center;
}


/* === FAQ === */

[id^="faq"] ~ dl {
  display: grid;
  grid-template-columns: minmax(15vw, 1fr) 3fr;
  gap: var(--sp-5);
  margin: var(--sp-5) 0;
}

[id^="faq"] ~ dl dt {
  grid-column: 1;
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--color-ink);
}

[id^="faq"] ~ dl dd { grid-column: 2; margin: 0; }


/* === Index page === */

#page-index .content { padding-top: var(--sp-8); }

#page-index #toc {
  opacity: 0;
  pointer-events: none;
  animation: toc-reveal linear both;
  animation-timeline: scroll();
  animation-range: 200px 400px;
}

@keyframes toc-reveal {
  to { opacity: 1; pointer-events: auto; }
}

@supports not (animation-timeline: scroll()) {
  #page-index #toc { animation: none; opacity: 1; pointer-events: auto; }
}

#page-index #principles-content {
  margin: calc(var(--sp-8) * 2) 0 var(--sp-8);

  dl {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 0;
    margin: var(--sp-6) 0;
  }

  dl dt {
    font-weight: var(--weight-bold);
    color: var(--color-ink);
    text-align: right;
    font-size: larger;
    padding-right: var(--sp-3);
  }

  dl dt::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 0.5em;
    vertical-align: -0.1em;
    background: currentColor;
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
  }

  /* tags — HTML-native */
  dl dt:nth-of-type(1) { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M12 6 2 16l10 10 3-3-7-7 7-7zm8 0 10 10-10 10-3-3 7-7-7-7z'/%3E%3C/svg%3E"); }
  /* checker — tiny size */
  dl dt:nth-of-type(2) { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M0 0h8v8H0zm16 0h8v8h-8zM8 8h8v8H8zm16 0h8v8h-8zM0 16h8v8H0zm16 0h8v8h-8zM8 24h8v8H8zm16 0h8v8h-8z'/%3E%3C/svg%3E"); }
  /* plus — open & pluggable */
  dl dt:nth-of-type(3) { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M12 2h8v10h10v8H20v10h-8V20H2v-8h10z'/%3E%3C/svg%3E"); }

  dl dd {
    border-left: 5px solid var(--color-ink);
    padding-left: var(--sp-3);
    margin: 0;
    white-space: nowrap; /* lines are set by <br> — exactly three, bar stays short */
  }

  /* Floating particles: each principle on its own level — size upper-middle, native left, open lower-middle */
  @media (min-width: 769px) {
    dl dt:nth-of-type(2) { grid-row: 1; grid-column: 3 / 5; }
    dl dd:nth-of-type(2) { grid-row: 1; grid-column: 5 / 7; }
    dl dt:nth-of-type(1) { grid-row: 2; grid-column: 1 / 3; margin-top: var(--sp-2); }
    dl dd:nth-of-type(1) { grid-row: 2; grid-column: 3 / 5; margin-top: var(--sp-2); }
    dl dt:nth-of-type(3) { grid-row: 3; grid-column: 2 / 4; margin-top: var(--sp-8); }
    dl dd:nth-of-type(3) { grid-row: 3; grid-column: 4 / 6; margin-top: var(--sp-8); }
  }
}


/* === Drops page === */

#page-drops #toc { display: none; }
#page-drops main { display: block; }

.drops-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin: var(--sp-5) 0 var(--sp-6);
}

.drops-filter button {
  background: transparent;
  color: var(--color-ink);
  border: var(--border);
  padding: var(--sp-1) var(--sp-4);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  text-transform: capitalize;
  transition: background var(--ease), color var(--ease);
}

.drops-filter button.active { background: var(--color-ink); color: var(--color-bg-alt); }
.drops-filter button:hover { background: var(--color-ink); color: var(--color-bg-alt); opacity: 1; }

.drops-grid {
  display: flex;
  flex-direction: column;
}

.drop {
  transition: opacity var(--ease-slow);
  padding-bottom: var(--sp-6);
}

.drop[hidden] { display: none; }

.drop h3 { margin: var(--sp-4) 0 var(--sp-2); }

.drop-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

.drop-code {
  display: grid;
  min-width: 0;
}

.drop-code > .highlight,
.drop-code > .highlighter-rouge { display: contents; }
.drop-code > .highlighter-rouge > .highlight { display: contents; }
.drop-code pre { margin: 0; min-width: 0; }

.drop-demo {
  margin: 0;
  padding: var(--sp-4);
  font-size: var(--text-sm);
  overflow: visible;
}

.drop-demo button { margin-bottom: var(--sp-1); }
.drop-demo label { cursor: pointer; }

.drop-demo kbd {
  background: var(--color-ink);
  color: var(--color-bg-alt);
  padding: 0.1em 0.5em;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-family: var(--font-mono);
}

/* Form elements in demos */
.demo input[type="email"],
.demo input[type="number"],
.demo input[type="date"] {
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-2);
  border: var(--border);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-ink);
}

.demo select {
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-2);
  border: var(--border);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-ink);
  background: var(--color-bg-alt);
  scrollbar-width: thin;
  scrollbar-color: var(--alpha-20) transparent;
}

.demo progress,
.demo input[type="range"] {
  appearance: none;
  display: block;
  width: 100%;
  height: var(--sp-3);
  border: var(--border);
  background: var(--color-bg-alt);
  box-sizing: content-box;
  margin: var(--sp-2) 0;
  padding: 0;
  outline: none;
}

.demo progress::-webkit-progress-bar { background: var(--color-bg-alt); }
.demo progress::-webkit-progress-value { background: var(--color-ink); transition: width var(--ease-slow); }
.demo progress::-moz-progress-bar { background: var(--color-ink); }

.demo input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: var(--sp-2);
  height: var(--sp-5);
  background: var(--color-ink);
  cursor: pointer;
}

.demo input[type="range"]::-moz-range-thumb {
  width: var(--sp-2);
  height: var(--sp-5);
  border: none;
  background: var(--color-ink);
  cursor: pointer;
}

/* Fill left of thumb */
.demo input[type="range"] {
  background: linear-gradient(var(--color-ink), var(--color-ink)) 0 / var(--fill, 50%) 100% no-repeat var(--color-bg-alt);
}

.demo input[type="checkbox"],
.demo input[type="radio"] {
  appearance: none;
  width: 1.5em;
  height: 1.5em;
  border: var(--border);
  border-radius: var(--radius-sm);
  vertical-align: middle;
  margin-right: var(--sp-2);
  cursor: pointer;
  position: relative;
  transition: border-color var(--ease);
  flex-shrink: 0;
}

.demo input[type="radio"] { border-radius: 50%; }

.demo input[type="checkbox"]:checked,
.demo input[type="radio"]:checked { border-color: var(--color-ink); }

.demo input[type="checkbox"]:checked::after,
.demo input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  inset: 25%;
  border-radius: 50%;
  background: var(--color-ink);
}

.demo button[disabled] { opacity: 0.4; cursor: not-allowed; }

/* Drop-specific elements */
.drop-check {
  display: block;
  margin: var(--sp-1) 0;
  transition: opacity var(--ease);
}

.drop-list-item {
  padding: var(--sp-1) 0;
  transition: opacity var(--ease);
}

/* Segment-style tabs */
.drop-tabs {
  display: inline-flex;
  border: var(--border);
  border-radius: var(--radius-pill);
  overflow: hidden;
  gap: 0;
}

.drop-tabs button {
  border-radius: 0;
  border: none;
  background: transparent;
  color: var(--color-ink);
  padding: var(--sp-2) var(--sp-4);
  margin: 0;
  transition: background var(--ease), color var(--ease);
}

.drop-tabs button + button { border-left: var(--border-w) solid var(--color-ink); }

.drop-tabs button.active {
  background: var(--color-ink);
  color: var(--color-bg-alt);
}

.drop-accordion-btn {
  width: 100%;
  text-align: left;
  margin: 0;
  border-bottom: var(--border);
}

.drop-accordion-body {
  overflow: hidden;
  max-height: 8em;
  opacity: 1;
  padding: var(--sp-2) 0;
  transition: max-height var(--ease) ease-out, opacity var(--ease), padding var(--ease);
}

.drop-accordion-body[hidden] {
  display: block !important;
  max-height: 0;
  opacity: 0;
  padding: 0;
}

.drop-table {
  table-layout: fixed;
  border: var(--border);
  border-collapse: collapse;
}

.drop-table th, .drop-table td {
  border: var(--border-w-thin) solid var(--color-ink);
  padding: var(--sp-2) var(--sp-3);
}

.drop-table th {
  cursor: pointer;
  background: var(--color-bg-alt);
}

.drop-panel {
  border: var(--border);
  padding: var(--sp-4);
  margin-top: var(--sp-2);
  transition: opacity var(--ease-slow);
}

.drop-grid-cell {
  border: var(--border-w) dashed var(--color-ink);
  color: var(--alpha-50);
  padding: var(--sp-2);
  text-align: center;
  transition: all var(--ease);
}

.drop-todo-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) 0;
}

.drop-todo-remove {
  cursor: pointer;
  opacity: 0.4;
  text-decoration: none;
  font-size: var(--text-lg);
  line-height: 1;
  transition: opacity var(--ease);
}

.drop-todo-remove:hover { opacity: 1; }

.drop-modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  animation: fade-in var(--ease-slow);
}

.drop-modal {
  background: var(--color-bg);
  border: var(--border);
  padding: var(--sp-5);
  min-width: 16rem;
  animation: slide-up var(--ease-slow);
}

.drop-modal b { color: var(--color-ink); }

.drop-menu {
  position: absolute;
  top: 100%; left: 0;
  background: var(--color-bg);
  border: var(--border);
  min-width: 10rem;
  z-index: 10;
  animation: fade-in var(--ease);
}

.drop-menu a {
  display: block;
  padding: var(--sp-2) var(--sp-3);
  text-decoration: none;
  border-bottom: var(--border-w-thin) solid var(--alpha-20);
  transition: background var(--ease);
  cursor: pointer;
}

.drop-menu a:last-child { border-bottom: none; }
.drop-menu a:hover { background: var(--color-bg-alt); }

/* Animations */
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slide-up {
  from { opacity: 0; transform: translateY(var(--sp-4)); }
  to { opacity: 1; transform: translateY(0); }
}

p > a:only-child:hover { opacity: 1; }


/* === GitHub corner === */

.github-corner { position: absolute; top: 0; right: 0; z-index: 10; text-decoration: none; }
.github-corner svg { width: 5rem; height: 5rem; color: var(--color-bg); fill: var(--color-ink); }
.github-corner:hover .octo-arm { animation: octocat-wave 560ms ease-in-out; }

@keyframes octocat-wave {
  0%, 100% { transform: rotate(0); }
  20%, 60% { transform: rotate(-25deg); }
  40%, 80% { transform: rotate(10deg); }
}


/* === Responsive === */

@media (max-width: 768px) {
  #toc { display: none; }

  #page-index #principles-content dl {
    grid-template-columns: 1fr;
    gap: var(--sp-4) 0;
  }

  #page-index #principles-content dl dt { text-align: left; }

  .playground { grid-template-columns: 1fr; }

  body::after { border-width: var(--sp-2); }

  .ref-list summary { grid-template-columns: auto 1fr; }
  .ref-list summary > code:last-child { display: none; }

  h2 { font-size: var(--text-lg); }

  .example { grid-template-columns: 1fr; }
  .drop-row { grid-template-columns: 1fr; }

  [id^="faq"] ~ dl { grid-template-columns: 1fr; gap: var(--sp-1) 0; }
  [id^="faq"] ~ dl dt { margin-top: var(--sp-5); }
  [id^="faq"] ~ dl dd { grid-column: 1; }
}

@media (min-width: 1400px) {
  /* wide screens: size principle swings right, balancing the right-aligned section header */
  #page-index #principles-content dl dt:nth-of-type(2) { grid-column: 5 / 7; }
  #page-index #principles-content dl dd:nth-of-type(2) { grid-column: 7 / 9; }

  /* open principle border lands on the playground's center divider (col line 5 = 50%) */
  #page-index #principles-content dl dt:nth-of-type(3) { grid-column: 3 / 5; }
  #page-index #principles-content dl dd:nth-of-type(3) { grid-column: 5 / 7; }

  #page-index {
    h1 { width: 50%; text-align: right; }
    h1 + h2 { margin-left: 50%; margin-bottom: 0; }
    h1 + h2 + h3 { margin-left: 50%; margin-top: 0; }
    h2#principles { width: 50%; text-align: right; }
  }
}

@media (min-width: 768px) and (max-width: 1700px) {
  main {
    display: grid;
    grid-template-columns: 10rem 1fr;
    max-width: none;
    margin: 0; padding: 0; gap: 0;
  }

  #toc {
    display: block;
    position: sticky;
    top: var(--sp-5); left: 0;
    width: auto;
    max-height: 100vh;
    /* first link lands at the level of the page's first heading */
    padding: calc(var(--sp-8) + var(--sp-4)) var(--sp-4) var(--sp-4) var(--sp-5);
    box-sizing: border-box;
  }

  .content {
    grid-column: 2;
    max-width: var(--content-w);
    padding: var(--sp-8) var(--sp-6) var(--sp-6);
  }
}