/* palette: same variable names as daisyUI themes; light default, dark follows the OS */
:root {
  color-scheme: light dark;
  --color-base-100: oklch(100% 0.03 0);
  --color-base-200: oklch(97% 0.03 0);
  --color-base-300: oklch(95% 0.04 0);
  --color-base-content: oklch(20% 0 0);
  --color-primary: oklch(20% 0.1 270);
  --color-primary-content: oklch(98% 0.026 102.212);
  --color-secondary: oklch(0% 0 0);
  --color-secondary-content: oklch(100% 0 0);
  --color-accent: oklch(40% 0.2 90);
  --color-accent-content: oklch(100% 0 0);
  --color-neutral: oklch(40% 0 0);
  --color-neutral-content: oklch(90% 0 0);
  --color-info: oklch(15% 0.2 270);
  --color-info-content: oklch(97% 0.014 254.604);
  --color-success: oklch(55% 0.15 160);
  --color-success-content: oklch(100% 0 85.6);
  --color-warning: oklch(100% 0.15 90);
  --color-warning-content: oklch(25% 1 100);
  --color-error: oklch(57% 0.245 27.325);
  --color-error-content: oklch(97% 0.013 17.38);
  --radius-selector: 2rem;
  --radius-field: 0rem;
  --radius-box: 0rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 0.5px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-base-100: oklch(10% 0.05 0);
    --color-base-200: oklch(20% 0.05 0);
    --color-base-300: oklch(25% 0.05 0);
    --color-base-content: oklch(96% 0.003 264.542);
    --color-primary: oklch(90% 0.15 265);
    --color-primary-content: oklch(30% 0.05 275);
    --color-secondary: oklch(95% 0.05 270);
    --color-secondary-content: oklch(30% 0.05 275);
    --color-accent: oklch(50% 0.06 270);
    --color-accent-content: oklch(98% 0.022 95.277);
    --color-neutral: oklch(35% 0 256.802);
    --color-neutral-content: oklch(98% 0.002 247.839);
    --color-info: oklch(15% 0.2 270);
    --color-info-content: oklch(97% 0.013 236.62);
    --color-success: oklch(60% 0.1 100);
    --color-success-content: oklch(98% 0.014 180.72);
    --color-warning: oklch(99.4% 0.4 135);
    --color-warning-content: oklch(30% 0.2 95);
    --color-error: oklch(63% 0.237 25.331);
    --color-error-content: oklch(97% 0.013 17.38);
  }
}

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  line-height: 1.35;
  color: var(--color-base-content);
  background: var(--color-base-100);
}

a { color: var(--color-primary); }
a:hover { color: var(--color-accent); }

pre {
  margin: 0;
  padding: 0.5rem 0.75rem;
  overflow: auto;
  background: var(--color-base-200);
  border: var(--border) solid var(--color-base-300);
}
figure > video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--color-base-300); }
details > summary { padding: 0.4rem 0.75rem; cursor: pointer; color: var(--color-neutral); }
small { color: var(--color-neutral); }

/* layout */
body > nav {
  display: flex;
  gap: 1.5rem;
  align-items: baseline;
  padding: 0.75rem 1.5rem;
  background: var(--color-base-200);
  border-bottom: var(--border) solid var(--color-base-300);
}
main { max-width: 72rem; margin: 0 auto; padding: 1rem 1.5rem 3rem; }
main > h2 { margin-top: 4rem; }

/* home: hero */
header { margin: 0.5rem 0 4rem; text-align: center; }
header > figure { position: relative; }
header canvas { display: block; width: 100%; height: clamp(18rem, 50vh, 30rem); }

/* hero controls: button + aside injected by hero.js */
figure > button {
  position: absolute; top: 0; right: 0; width: 1em; height: 100%; padding: 0.5em 0;
  cursor: pointer;
  color: var(--color-neutral); background: var(--color-base-200);
  border: none;
}
figure > button:hover { color: var(--color-base-content); background: var(--color-base-300); }
aside {
  position: absolute; top: 0; bottom: 0; right: 1em; width: min(17rem, calc(100% - 1em));
  overflow: auto; padding: 0.25rem 0.75rem 0.75rem; text-align: left;
  background: var(--color-base-200); border: var(--border) solid var(--color-base-300);
}
aside h3 { margin: 0.75rem 0 0.25rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-neutral); }
aside > div { display: grid; gap: 0.15rem; margin: 0.4rem 0; font-size: 0.85rem; }
aside input[type=range] { width: 100%; margin: 0; }

/* home: features */
main > section > article {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
  padding: 5rem 0;
  border-top: var(--border) solid var(--color-base-300);
}
main > section > article:nth-child(even) > div { order: 2; }
main > section h2 { margin-top: 0; }
main > section figure { background: var(--color-base-200); border: var(--border) solid var(--color-base-300); }

/* examples: picker + live stage */
main > div.examples { grid-template-columns: 14rem minmax(0, 1fr); }
.examples h1 { margin-top: 0; }
.title-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.title-row > h1 { margin: 0; }
.examples .desc { margin: 0.25rem 0 1rem; color: var(--color-neutral); }
.toolbar { display: flex; gap: 0.5rem; margin: 0; margin-left: auto; }
.toolbar button {
  font: inherit; padding: 0.25rem 0.75rem; cursor: pointer;
  color: inherit; background: var(--color-base-200); border: var(--border) solid var(--color-neutral);
}
.toolbar button[hidden] { display: none; }
.stage { aspect-ratio: 16 / 9; background: #000; border: var(--border) solid var(--color-base-300); }
.stage > iframe, .stage > video { display: block; width: 100%; height: 100%; border: 0; }
.stage > p { display: flex; align-items: center; justify-content: center; height: 100%; margin: 0; color: var(--color-neutral-content); }
.code-dialog {
  width: min(60rem, calc(100vw - 2rem)); max-height: calc(100vh - 4rem); padding: 0;
  color: inherit; background: var(--color-base-100); border: var(--border) solid var(--color-neutral);
}
.code-dialog[open] { display: flex; flex-direction: column; }
.code-dialog::backdrop { background: rgb(0 0 0 / 0.6); }
.code-dialog > header { display: flex; justify-content: space-between; align-items: center; margin: 0; padding: 0.5rem 0.75rem; text-align: left; }
.code-dialog > header > button {
  font: inherit; padding: 0.25rem 0.75rem; cursor: pointer;
  color: inherit; background: var(--color-base-200); border: var(--border) solid var(--color-neutral);
}
.code-dialog pre { flex: 1; min-height: 0; border-width: var(--border) 0 0; }

@media (min-width: 40.01rem) {
  /* fit the page to the viewport: the example list and the example pane scroll, not the page */
  body[data-page=examples] { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
  body[data-page=examples] > main { display: flex; flex-direction: column; flex: 1; min-height: 0; width: 100%; box-sizing: border-box; padding-bottom: 1rem; }
  main > div.examples { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
  .examples > search { min-height: 0; overflow: auto; }
  .examples > search nav { position: static; max-height: none; overflow: visible; }
  .examples > section { min-height: 0; overflow: auto; }
}

/* api: sidebar + content */
main > div { display: grid; grid-template-columns: 14rem 1fr; gap: 2rem; align-items: start; }
search nav { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: 0.15rem; max-height: calc(100vh - 2rem); overflow: auto; }
search nav a { text-decoration: none; padding: 0.1rem 0.5rem; }
search nav a[aria-current] { background: var(--color-base-300); color: var(--color-base-content); font-weight: 600; }
input[type=search] {
  width: 100%; margin-bottom: 0.5rem; padding: 0.3rem 0.5rem; font: inherit;
  color: inherit; background: var(--color-base-100); border: var(--border) solid var(--color-neutral);
}
dl { margin: 0; }
dl > div { padding: 0.5rem 0; border-top: var(--border) solid var(--color-base-300); }
dl > div[hidden] { display: none; }
dt code { white-space: pre-wrap; word-break: break-word; }
dd { margin: 0.25rem 0 0 1rem; color: var(--color-neutral); white-space: pre-line; }

@media (max-width: 40rem) {
  main > section > article { grid-template-columns: 1fr; }
  main > section > article:nth-child(even) > div { order: 0; }
  main > div, main > div.examples { grid-template-columns: 1fr; }
  search nav { position: static; max-height: 12rem; }
}