@layer base {
  /* ── Reset ── */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
  }

  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  img,
  picture,
  video,
  canvas,
  svg {
    display: block;
    max-width: 100%;
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }

  :root {
    --font-size-main: 20px;
    --font-size-small: 15px;
    --font-weight-main: 400;
    --line-height-main: 1.55;
    --font-family-main:
      "Fanwood Text", "Garamond", "Baskerville", "Baskerville Old Face", "Hoefler Text",
      "Times New Roman", serif;
    --font-family-cursive: cursive;
    --font-family-mono: monospace;
    --font-family-alt: sans-serif;
    --font-h1: bold calc(1.9 * var(--font-size-main)) / 112% var(--font-family-main);
    --font-h2: bold calc(1.5 * var(--font-size-main)) / 120% var(--font-family-main);
    --font-h3: bold calc(1.1 * var(--font-size-main)) / 125% var(--font-family-main);
    --c-bg-card: hsl(200, 2%, 96%);
    --c-bg-card-tint: hsla(20, 2%, 100%, 0.8);
    --c-bg-button: hsl(200, 2%, 100%);
    --c-bg-input: hsl(200, 2%, 100%);
    --c-bg-toolbar: hsl(200, 2%, 96%);
    --c-bg-body: hsl(200, 2%, 100%);
    --c-text-invert: hsl(200, 2%, 92%);
    --c-border-content: hsla(20, 2%, 80%, 0.5);
    --c-border-button: hsl(252, 33%, 3%);
    --c-border-input: hsl(200, 2%, 80%);
    --c-border-card: transparent;
    --c-text-light: hsl(200, 2%, 50%);
    --c-text: hsl(252, 33%, 3%);
    --c-bg-invert: hsl(252, 33%, 3%);
    --c-shadow: none;
    --c-bg-accent: hsl(190, 70%, 92%);
    --c-border-accent: hsl(194, 70%, 64%);
    --c-accent: hsl(200, 70%, 44%);
    --c-link-hover: var(--c-accent);
    --c-outline: hsla(218, 70%, 44%, 0.3);
    --c-overlay: hsla(20, 2%, 80%, 0.8);
    --c-primary: hsl(170, 50%, 40%);
    --c-bg-alt: hsl(290, 36%, 75%);
    --c-alt: hsl(290, 36%, 50%);
    --c-danger: hsl(12, 60%, 50%);
    --c-success: hsl(160, 50%, 35%);
    --c-link: var(--c-text);
    --bg-body: var(--c-bg-body);
    --bg-card: var(--c-bg-card);
    --bg-card-tint: var(--c-bg-card-tint);
    --shadow-1: 0 1px 1px var(--c-shadow), 0 2px 2px var(--c-shadow), 0 4px 4px var(--c-shadow);
    --shadow-inset-1: inset 0 1px 1px var(--c-shadow), inset 0 2px 2px var(--c-shadow);
    --radius-input: 3px;
    --radius-button: 3px;
    --radius-card: 3px;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --c-bg-card: hsl(210, 5%, 18%);
      --c-bg-card-tint: hsla(210, 5%, 18%, 0.8);
      --c-bg-button: hsl(210, 5%, 22%);
      --c-bg-input: hsl(210, 5%, 12%);
      --c-bg-toolbar: hsl(210, 5%, 20%);
      --c-bg-body: hsl(210, 5%, 14%);
      --c-text-invert: hsl(20, 5%, 12%);
      --c-border-content: hsla(210, 5%, 40%, 0.4);
      --c-border-card: hsla(210, 5%, 40%, 0.2);
      --c-border-button: hsl(210, 5%, 36%);
      --c-border-input: hsl(210, 5%, 36%);
      --c-text-light: hsl(20, 6%, 50%);
      --c-text: hsl(20, 6%, 84%);
      --c-bg-invert: hsl(20, 6%, 84%);
      --c-shadow: hsla(200, 2%, 0%, 0.05);
      --c-bg-accent: hsl(200, 54%, 28%);
      --c-border-accent: hsl(194, 54%, 36%);
      --c-accent: hsl(190, 70%, 58%);
      --c-link-hover: hsl(190, 70%, 70%);
      --c-outline: hsla(200, 70%, 50%, 0.2);
      --c-overlay: hsla(20, 2%, 8%, 0.8);
      --c-primary: hsl(196, 85%, 32%);
      --c-bg-alt: hsl(292, 32%, 32%);
      --c-alt: hsl(292, 32%, 54%);
      --c-danger: hsl(5, 60%, 50%);
      --c-success: hsl(160, 60%, 40%);
      --c-link: var(--c-text);
      --bg-body: var(--c-bg-body);
      --bg-card: var(--c-bg-card);
      --bg-card-tint: var(--c-bg-card-tint);
    }
  }

  html {
    font-family: var(--font-family-main);
    font-weight: var(--font-weight-main);
    font-size: var(--font-size-main);
    line-height: var(--line-height-main);
    color: var(--c-text);
    background: var(--bg-body);
  }

  p {
    margin: 0;
  }

  ol,
  ul {
    margin: 0;
    padding-left: 1.75em;
  }

  hr {
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--c-border-content);
    height: 0;
    padding: 0;
    margin: 0.75rem 0;
  }

  a {
    text-decoration: none;
    color: var(--c-text);
  }

  a.underline {
    text-decoration: underline var(--c-outline);
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
    text-decoration-skip-ink: auto;
  }

  a:hover {
    color: var(--c-link-hover);
    text-decoration-color: var(--c-border-accent);
  }

  a:focus {
    outline-offset: 2px;
    outline: 2px solid var(--c-outline);
  }

  ::placeholder {
    color: var(--c-text-light);
  }

  ::selection {
    background-color: var(--c-outline);
  }

  form input[type="text"],
  form input[type="password"],
  form select,
  form textarea {
    padding: 0.375rem 0.75rem;
    display: inline-block;
    color: var(--c-text);
    background: var(--c-bg-input);
    border: 1px solid var(--c-border-input);
    box-shadow: var(--shadow-inset-1);
    border-radius: var(--radius-input);
    vertical-align: middle;
    font-family: var(--font-family-main);
  }

  form input[type="text"]:focus,
  form input[type="password"]:focus {
    outline-offset: 2px;
    outline: 2px solid var(--c-outline);
  }
}

@layer components {
  .button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--c-border-button);
    border-radius: var(--radius-button);
    background: var(--c-bg-button);
    color: var(--c-text);
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    box-shadow: var(--shadow-1);
  }

  .button:hover,
  .button:focus {
    outline-offset: 2px;
    outline: 2px solid var(--c-outline);
  }

  .button.primary {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: #fff;
  }

  .button.shy {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
  }

  .button.active {
    background: #000;
    border-color: #000;
    color: #fff;
  }

  .button.disabled,
  .button[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
  }

  .card {
    background: var(--c-bg-card);
    border: 1px solid var(--c-border-card);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-1);
    color: var(--c-text);
  }
}

@layer utilities {
  .force-dark,
  .force-dark * {
    --c-bg-card: hsl(252, 33%, 3%);
    --c-bg-card-tint: hsla(210, 5%, 18%, 0.8);
    --c-bg-button: hsl(210, 5%, 22%);
    --c-bg-input: hsl(210, 5%, 12%);
    --c-bg-toolbar: hsl(210, 5%, 20%);
    --c-bg-body: hsl(252, 33%, 3%);
    --c-text-invert: hsl(252, 33%, 3%);
    --c-border-content: hsla(210, 5%, 40%, 0.4);
    --c-border-card: hsla(210, 5%, 40%, 0.2);
    --c-border-button: hsl(210, 5%, 36%);
    --c-border-input: hsl(210, 5%, 36%);
    --c-text-light: hsl(20, 6%, 50%);
    --c-text: hsl(20, 6%, 84%);
    --c-bg-invert: hsl(20, 6%, 84%);
    --c-shadow: hsla(200, 2%, 0%, 0.05);
    --c-bg-accent: hsl(14, 54%, 28%);
    --c-border-accent: hsl(16, 54%, 36%);
    --c-accent: hsl(18, 70%, 58%);
    --c-link-hover: hsl(24, 70%, 70%);
    --c-outline: hsla(24, 70%, 50%, 0.2);
    --c-overlay: hsla(20, 2%, 8%, 0.8);
    --c-primary: hsl(196, 85%, 32%);
    --c-bg-alt: hsl(292, 32%, 32%);
    --c-alt: hsl(292, 32%, 54%);
    --c-danger: hsl(5, 60%, 50%);
    --c-success: hsl(160, 60%, 40%);
    --c-link: var(--c-text);
    --bg-body: var(--c-bg-body);
    --bg-card: var(--c-bg-card);
    --bg-card-tint: var(--c-bg-card-tint);
  }

  .c-light {
    color: var(--c-text-light);
  }

  .c-danger {
    color: var(--c-danger);
  }

  .c-accent {
    color: var(--c-accent);
  }

  .border-input {
    border-color: var(--c-border-input);
  }

  .lh-0 {
    line-height: 0;
  }

  .font-smooth {
    text-rendering: geometricPrecision;
  }

  /* ── layout ── */
  .flex {
    display: flex;
  }

  .flex-col {
    flex-direction: column;
  }

  .flex-1 {
    flex: 1;
  }

  .flex-wrap {
    flex-wrap: wrap;
  }

  .shrink-0 {
    flex-shrink: 0;
  }

  .grid {
    display: grid;
  }

  .grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .inline {
    display: inline;
  }

  .block {
    display: block;
  }

  .min-h-screen {
    min-height: 100dvh;
  }

  /* ── sizing ── */
  .w-full {
    width: 100%;
  }

  .w-32 {
    width: 8rem;
  }

  .w-12 {
    width: 3rem;
  }

  .w-1\/2 {
    width: 50%;
  }

  .max-w-xl {
    max-width: 36rem;
  }

  .max-w-96 {
    max-width: 24rem;
  }

  .max-w-80 {
    max-width: 20rem;
  }

  .max-w-\[32rem\] {
    max-width: 32rem;
  }

  /* ── spacing ── */
  .mx-auto {
    margin-inline: auto;
  }

  .p-0 {
    padding: 0;
  }

  .p-0\.5 {
    padding: 0.125rem;
  }

  .p-1 {
    padding: 0.25rem;
  }

  .p-2 {
    padding: 0.5rem;
  }

  .p-4 {
    padding: 1rem;
  }

  .p-12 {
    padding: 3rem;
  }

  .gap-0 {
    gap: 0;
  }

  .gap-0\.5 {
    gap: 0.125rem;
  }

  .gap-1 {
    gap: 0.25rem;
  }

  .gap-2 {
    gap: 0.5rem;
  }

  .gap-4 {
    gap: 1rem;
  }

  .gap-8 {
    gap: 2rem;
  }

  /* ── alignment ── */
  .place-items-center {
    place-items: center;
  }

  .place-content-center {
    place-content: center;
  }

  .justify-center {
    justify-content: center;
  }

  .justify-items-start {
    justify-items: start;
  }

  .items-center {
    align-items: center;
  }

  .items-stretch {
    align-items: stretch;
  }

  .content-center {
    align-content: center;
  }

  /* ── position ── */
  .relative {
    position: relative;
  }

  .sticky {
    position: sticky;
  }

  .top-2 {
    top: 0.5rem;
  }

  /* ── typography ── */
  .text-xs {
    font-size: 0.75rem;
  }

  .text-sm {
    font-size: 0.875rem;
  }

  .text-\[0\.85rem\] {
    font-size: 0.85rem;
  }

  .text-\[1\.25rem\] {
    font-size: 1.25rem;
  }

  .font-bold {
    font-weight: 700;
  }

  .leading-tight {
    line-height: 1.25;
  }

  .leading-\[1\.55\] {
    line-height: 1.55;
  }

  .text-center {
    text-align: center;
  }

  /* ── misc ── */
  .rounded-sm {
    border-radius: 0.125rem;
  }

  .rounded-full {
    border-radius: 9999px;
  }

  .overflow-hidden {
    overflow: hidden;
  }

  .min-w-0 {
    min-width: 0;
  }

  .auto-rows-min {
    grid-auto-rows: min-content;
  }

  .object-contain {
    object-fit: contain;
  }

  /* ── responsive (max 639px) ── */
  @media (max-width: 639px) {
    .max-sm\:flex-col {
      flex-direction: column;
    }

    .max-sm\:flex-row {
      flex-direction: row;
    }

    .max-sm\:w-full {
      width: 100%;
    }

    .max-sm\:p-2 {
      padding: 0.5rem;
    }
  }
}

.debug {
  background-color: #ff00ff33;
}