:root {
    --paper: #f7f4ea;
    --ink: #1a1a1a;
    --line: rgba(26, 26, 26, 0.08);
    --accent: #2e86ab;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: ui-rounded, "Segoe UI", system-ui, sans-serif;
    background:
      linear-gradient(var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px),
      var(--paper);
    background-size: 24px 24px;
    color: var(--ink);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 12px 48px;
  }
  header { text-align: center; margin-bottom: 16px; }
  h1 {
    font-size: clamp(28px, 5vw, 44px);
    letter-spacing: -0.02em;
    transform: rotate(-0.6deg);
  }
  header p { opacity: 0.65; margin-top: 4px; font-size: 15px; }
  #status {
    font-size: 13px; margin-top: 6px; opacity: 0.75;
    transition: color .3s;
  }
  #status.live { color: #1f6f30; opacity: 1; }
  #status.warn { color: #8a4a00; opacity: 1; }
  #wrap {
    position: relative;
    width: min(92vmin, 720px);
    border: 2px solid var(--ink);
    border-radius: 6px;
    box-shadow: 6px 6px 0 rgba(26,26,26,.18);
    background: #f7f4ea;
    overflow: hidden;
  }
  #wrap:focus-within { outline: 3px solid var(--accent); outline-offset: 3px; }
  canvas {
    display: block; width: 100%; height: auto; image-rendering: pixelated;
    cursor: crosshair; touch-action: none;
    user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
  }
  canvas:focus { outline: none; }
  #palette {
    display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
    margin-top: 20px; max-width: min(92vw, 480px); min-height: 148px;
  }
  .swatch {
    width: 44px; height: 44px; border-radius: 50%;
    border: 2px solid rgba(26,26,26,.25); cursor: pointer;
    transition: transform .1s;
  }
  .swatch:hover { transform: scale(1.12); }
  .swatch.sel { border-color: var(--ink); transform: scale(1.14); box-shadow: 2px 2px 0 rgba(26,26,26,.25); }
  .swatch:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
  #board-error { margin-top: 12px; font-size: 13px; color: #8a4a00; text-align: center; }
  .noscript { margin: 0 auto 12px; max-width: min(92vw, 480px); font-size: 14px; color: #8a4a00; text-align: center; }
  footer { margin-top: 22px; font-size: 13px; opacity: .75; text-align: center; }
  footer p + p { margin-top: 4px; }
  footer a { color: inherit; text-underline-offset: 3px; }
  footer a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
  @media (min-width: 444px) {
    #palette { min-height: 96px; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; }
    .swatch:hover { transform: none; }
  }