@layer reset, tokens, base, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, p, ul, ol, figure { margin: 0; }
  img, svg { display: block; max-inline-size: 100%; }
  button, input, select, textarea { font: inherit; color: inherit; }
  table { border-collapse: collapse; }
}

@layer tokens {
  :root {
    --h-blue: 250; --h-orange: 65; --h-sky: 230; --h-green: 160; --h-yellow: 95; --h-verm: 40; --h-purple: 340;
    --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2.5rem; --space-7: 4rem;
    --t--1: .875rem; --t-0: 1.0625rem; --t-1: 1.25rem; --t-2: 1.625rem;
    --t-3: clamp(2rem, 1.5rem + 1.5vw, 2.75rem); --t-4: clamp(2.5rem, 1.6rem + 3vw, 4rem);
    --font: ui-sans-serif, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
    --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --lh: 1.6; --measure: 60ch; --r-1: 6px; --r-2: 12px; --dur: .15s;
  }
  @media (prefers-reduced-motion: reduce) { :root { --dur: 0s; } }

  [data-theme=light] {
    --bg: oklch(98.5% .004 90); --bg-2: oklch(100% 0 0); --bg-3: oklch(94% .01 90);
    --fg: oklch(22% .02 250); --fg-muted: oklch(46% .03 250);
    --border: oklch(88% .01 90); --border-strong: oklch(70% .02 250);
    --blue: oklch(50% .15 var(--h-blue)); --orange: oklch(72% .17 var(--h-orange)); --sky: oklch(66% .12 var(--h-sky));
    --green: oklch(55% .12 var(--h-green)); --yellow: oklch(88% .16 var(--h-yellow));
    --verm: oklch(58% .2 var(--h-verm)); --purple: oklch(65% .14 var(--h-purple));
    --accent: var(--blue); --accent-fg: white; --accent-hover: oklch(43% .15 var(--h-blue)); --accent-soft: oklch(94% .04 var(--h-blue));
    --second: var(--orange); --second-fg: oklch(20% .05 var(--h-orange));
    --ok: var(--blue); --warn: var(--orange); --danger: var(--verm); --info: var(--sky);
    --shadow: 0 1px 2px oklch(20% .02 250 / .08), 0 8px 24px oklch(20% .02 250 / .08);
    color-scheme: light;
  }
  [data-theme=dark] {
    --bg: oklch(16% .01 250); --bg-2: oklch(20% .012 250); --bg-3: oklch(26% .014 250);
    --fg: oklch(94% .005 90); --fg-muted: oklch(70% .02 250);
    --border: oklch(30% .012 250); --border-strong: oklch(48% .02 250);
    --blue: oklch(72% .13 var(--h-blue)); --orange: oklch(78% .16 var(--h-orange)); --sky: oklch(78% .1 var(--h-sky));
    --green: oklch(70% .12 var(--h-green)); --yellow: oklch(90% .15 var(--h-yellow));
    --verm: oklch(70% .18 var(--h-verm)); --purple: oklch(75% .12 var(--h-purple));
    --accent: var(--blue); --accent-fg: oklch(16% .04 var(--h-blue)); --accent-hover: oklch(80% .12 var(--h-blue)); --accent-soft: oklch(28% .06 var(--h-blue));
    --second: var(--orange); --second-fg: oklch(18% .05 var(--h-orange));
    --ok: var(--blue); --warn: var(--orange); --danger: var(--verm); --info: var(--sky);
    --shadow: 0 8px 24px oklch(0% 0 0 / .5);
    color-scheme: dark;
  }
}

@layer base {
  html { font-family: var(--font); font-size: 100%; line-height: var(--lh); background: var(--bg); color: var(--fg); }
  body { font-size: var(--t-0); min-block-size: 100dvh; display: flex; flex-direction: column; }
  main { flex: 1; container-type: inline-size; padding-block: var(--space-6) var(--space-7); }
  h1, h2, h3 { font-weight: 650; letter-spacing: -.02em; line-height: 1.2; text-wrap: balance; }
  h1 { font-size: var(--t-3); }
  h2 { font-size: var(--t-2); margin-block-start: var(--space-6); }
  h3 { font-size: var(--t-1); margin-block-start: var(--space-5); }
  p { text-wrap: pretty; max-inline-size: var(--measure); }
  p + p { margin-block-start: var(--space-4); }
  a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .15em; }
  a:hover { color: var(--accent-hover); }
  :focus-visible { outline: 3px solid var(--second); outline-offset: 2px; }
  code { font-family: var(--mono); font-size: .9em; background: var(--bg-3); padding-inline: .3em; border-radius: var(--r-1); overflow-wrap: anywhere; }
  ::selection { background: var(--accent-soft); }
  @media (forced-colors: active) {
    .btn, .st, .notice, .card { border: 1px solid CanvasText; }
  }
}

@layer components {
  .wrap { inline-size: min(100% - 2 * var(--space-4), 68rem); margin-inline: auto; }
  .row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
  .skip { position: absolute; inset-inline-start: var(--space-2); inset-block-start: -100%; background: var(--bg-2); padding: var(--space-2) var(--space-3); border-radius: var(--r-1); }
  .skip:focus { inset-block-start: var(--space-2); z-index: 10; }

  .site-header { border-block-end: 1px solid var(--border); padding-block: var(--space-3); }
  .brand { font-weight: 650; text-decoration: none; color: var(--fg); letter-spacing: -.01em; }
  .site-header nav { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
  .site-header nav a { color: var(--fg-muted); text-decoration: none; }
  .site-header nav a:hover, .site-header nav a[aria-current] { color: var(--fg); text-decoration: underline; }
  .site-footer { padding-block: var(--space-5); border-block-start: 1px solid var(--border); font-size: var(--t--1); color: var(--fg-muted); }

  .hero h1 { font-size: var(--t-4); }
  .lede { font-size: var(--t-1); color: var(--fg-muted); margin-block-start: var(--space-4); }
  .prose h2 { font-size: var(--t-2); }
  .prose > * + * { margin-block-start: var(--space-4); }
  .prose ul, .prose ol { padding-inline-start: 1.5em; max-inline-size: var(--measure); }

  .card { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-2); padding: var(--space-5); margin-block-start: var(--space-6); box-shadow: var(--shadow); }
  .card h2 { margin-block-start: 0; }
  .card > * + * { margin-block-start: var(--space-3); }
  .links { list-style: none; padding: 0; display: grid; gap: var(--space-2); }
  .podcast-list { list-style: none; padding: 0; display: grid; gap: var(--space-4); }
  .podcast-list .card { margin-block-start: 0; }
  .podcast-list h3 { margin-block-start: 0; }
  .cover { inline-size: 15rem; block-size: auto; border-radius: var(--r-1); margin-block-end: var(--space-4); }
  .links code { display: inline-block; margin-inline-start: var(--space-2); }

  .btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: .55em 1em; border-radius: var(--r-1); border: 1px solid transparent; background: transparent; cursor: pointer; text-decoration: none; line-height: 1.2; font-weight: 500; transition: background var(--dur), color var(--dur), border-color var(--dur); }
  .btn.primary { background: var(--accent); color: var(--accent-fg); }
  .btn.primary:hover { background: var(--accent-hover); color: var(--accent-fg); }
  .btn.second { background: var(--second); color: var(--second-fg); }
  .btn.outline { border-color: var(--border-strong); color: var(--fg); }
  .btn.outline:hover { background: var(--bg-3); }
  .btn.quiet { color: var(--fg-muted); }
  .btn.quiet:hover { color: var(--fg); background: var(--bg-3); }
  .btn.small { font-size: var(--t--1); padding: .4em .8em; }
  .btn:disabled { opacity: .6; cursor: progress; }
  form.inline { display: inline; }

  .form { max-inline-size: 48rem; margin-block-start: var(--space-5); display: grid; gap: var(--space-5); }
  .field { display: grid; gap: var(--space-1); }
  .field > label { font-weight: 600; font-size: var(--t--1); }
  .field .req { font-weight: 400; color: var(--fg-muted); }
  .field input:not([type=checkbox]), .field select, .field textarea {
    inline-size: 100%; padding: .55em .75em; border: 1px solid var(--border-strong); border-radius: var(--r-1); background: var(--bg-2); color: var(--fg);
  }
  .field input[readonly] { background: var(--bg-3); color: var(--fg-muted); }
  .field textarea { resize: vertical; font-family: var(--mono); font-size: var(--t--1); line-height: 1.5; }
  .field .hint { font-size: var(--t--1); color: var(--fg-muted); margin: 0; }
  .field:has(input:user-invalid) > label, .field:has(input:user-invalid) .hint { color: var(--danger); }
  .field:has(input:user-invalid) input { border-color: var(--danger); }
  .field.check label { font-weight: 500; font-size: var(--t-0); display: flex; align-items: center; gap: var(--space-2); }
  .grid-2, .grid-3 { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
  @container (min-width: 36rem) {
    .grid-2 { grid-template-columns: 1fr 1fr; }
    .grid-3 { grid-template-columns: 1fr 1fr 1fr; }
  }
  .extras { border: 1px solid var(--border); border-radius: var(--r-2); padding: var(--space-4); }
  .extras summary { cursor: pointer; font-weight: 600; }
  .extras[open] summary { margin-block-end: var(--space-4); }
  .extras .field + .field { margin-block-start: var(--space-4); }
  .actions-row { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
  .progress { display: flex; align-items: center; gap: var(--space-3); font-size: var(--t--1); color: var(--fg-muted); }
  .progress progress { inline-size: 16rem; accent-color: var(--accent); }

  .page-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-block-end: var(--space-4); }

  .notice { border-inline-start: 6px solid var(--info); background: var(--bg-2); border-radius: var(--r-1); padding: var(--space-3) var(--space-4); margin-block: var(--space-4); }
  .notice[data-kind=ok] { border-color: var(--ok); }
  .notice[data-kind=warn] { border-color: var(--warn); }
  .notice[data-kind=danger] { border-color: var(--danger); }
  .notice .sign { font-weight: 650; margin-inline-end: var(--space-1); }

  .st { display: inline-flex; align-items: center; gap: .35em; padding: .15em .7em; border-radius: 999px; font-size: var(--t--1); font-weight: 500; border: 1px solid var(--border); background: var(--bg-2); white-space: nowrap; }
  .st > span:first-child { font-weight: 650; }
  .st[data-s=ok] { border-color: var(--ok); color: var(--fg); }
  .st[data-s=ok] > span:first-child { color: var(--ok); }
  .st[data-s=warn] > span:first-child { color: var(--warn); }
  .st[data-s=warn] { border-style: dashed; border-color: var(--border-strong); }
  .st[data-s=danger] > span:first-child { color: var(--danger); }
  .st[data-s=info] > span:first-child { color: var(--info); }
  .st[data-s=info] { border-style: dotted; border-color: var(--border-strong); }

  .table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-2); background: var(--bg-2); }
  table { inline-size: 100%; font-size: var(--t--1); }
  th, td { text-align: start; padding: var(--space-2) var(--space-3); border-block-end: 1px solid var(--border); vertical-align: middle; }
  th { font-weight: 600; color: var(--fg-muted); white-space: nowrap; }
  tbody tr:last-child td { border-block-end: 0; }
  .num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .nowrap { white-space: nowrap; }
  .actions { text-align: end; white-space: nowrap; }
}

@layer utilities {
  .muted { color: var(--fg-muted); }
  .small { font-size: var(--t--1); }
  .sr-only { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}