:root {
      --paper: #f4efe3;
      --ink: #1e2a24;
      --accent: #9b4d2f;
      --line: #4f5a52;
      --panel: rgba(255, 252, 244, 0.9);
    }
    body {
      margin: 0;
      background:
        radial-gradient(circle at top, #fff6e7 0%, #f2e7d1 45%, #e2d3b8 100%);
      color: var(--ink);
      font-family: "Iowan Old Style", "Palatino Linotype", serif;
      overflow: hidden;
    }
    #ui {
      position: fixed;
      top: 18px;
      left: 18px;
      width: min(360px, calc(100vw - 36px));
      padding: 16px 18px;
      border: 1px solid rgba(40, 45, 41, 0.18);
      background: var(--panel);
      backdrop-filter: blur(8px);
      box-shadow: 0 18px 50px rgba(30, 34, 31, 0.12);
      z-index: 2;
    }
    h1 {
      margin: 0 0 8px;
      font-size: 22px;
      line-height: 1.1;
      letter-spacing: 0.02em;
    }
    p {
      margin: 8px 0;
      font-size: 14px;
      line-height: 1.45;
    }
    .controls {
      display: flex;
      gap: 10px;
      margin: 14px 0 10px;
    }
    button {
      border: 1px solid rgba(50, 35, 23, 0.3);
      background: #fbf4e7;
      color: var(--ink);
      padding: 9px 12px;
      cursor: pointer;
      font: inherit;
    }
    button:disabled {
      opacity: 0.45;
      cursor: default;
    }
    #legend {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 6px 10px;
      font-size: 13px;
    }
    .swatch {
      width: 12px;
      height: 12px;
      border: 1px solid rgba(0, 0, 0, 0.18);
      margin-top: 2px;
    }
    canvas {
      display: block;
      width: 100vw;
      height: 100vh;
    }