:root {
  color-scheme: light;
  --background: #f5f0e6;
  --surface: #ebe6dc;
  --text: #17150f;
  --muted: #504d45;
  --border: #d0ccc2;
  --accent: #0a3a5d;
  --alert: #5d2924;
  --warn: #4d3e13;
  --mono: "Public Sans", system-ui, sans-serif;
  font: 16px/1.2 "Public Sans", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --background: #14100d;
    --surface: #27221d;
    --text: #f4ebd6;
    --muted: #aaa195;
    --border: #4f4841;
    --accent: #a7d1ff;
    --alert: #ffbfb7;
    --warn: #edd08b;
  }
}
body { display: flex; flex-direction: column; }
header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem 1.2rem; padding-block: .6rem; }
.site-links { grid-column: 1 / -1; display: grid; grid-auto-flow: column; justify-content: start; border: 1px solid var(--border); width: max-content; max-width: 100%; font: .875rem/1.2 "Public Sans", system-ui, sans-serif; text-transform: uppercase; letter-spacing: .06em; }
.site-links a { color: var(--text); background: var(--surface); padding: .5em .8em; border-inline-start: 1px solid var(--border); text-decoration: none; }
.site-links a:first-child { color: var(--background); background: var(--text); border-inline-start: 0; font-weight: 700; font-size: inherit; }
.site-links a:hover { color: var(--text); background: var(--border); text-decoration: none; }
.site-links a:first-child:hover { color: var(--background); background: var(--text); }
.brand { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 1rem; }
.actions { display: grid; grid-auto-flow: column; gap: .35rem; }
h1, h2 { font-family: "Public Sans", system-ui, sans-serif; letter-spacing: .035em; }
h1 { font-size: 1.2rem; }
h2 { font-size: .875rem; }
button, select, input[type=number], input[type=text] { min-height: 2rem; }
.row { min-height: 2rem; }
#drawer > summary, summary { padding-block: .6rem; }
#settings > details { padding-bottom: .6rem; }
#settings fieldset + fieldset { margin-top: .8rem; }
#exports { display: grid; grid-template-columns: repeat(2, max-content); gap: .35rem .7rem; align-items: center; }
#preview { display: grid; grid-template-rows: auto auto auto auto minmax(15rem, 1fr); gap: .8rem; }
#swatches { min-width: 0; }
.swatch { display: grid; align-content: start; font-size: .8rem; }
.swatch code, #paste, #paste-mapping, #checks, #sample, .code-frame, kbd { font-family: "Public Sans", system-ui, sans-serif; }
#readouts { grid-template-columns: minmax(0, auto) minmax(0, 1fr); }
#warning-panel { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .6rem; }
#warnings { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .2rem .8rem; }
.editor-toolbar { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .7rem; align-items: center; }
.code-frame { display: grid; grid-template-columns: auto minmax(0, 1fr); }
#snippet { min-width: 0; }
.check { display: grid; grid-template-columns: auto auto; align-items: center; gap: .35rem; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 900px) {
  main { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  #preview { grid-row: 1; }
  #drawer { grid-row: 2; }
  #warning-panel { grid-template-columns: minmax(0, 1fr); }
  #readouts { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .brand { grid-template-columns: 1fr; }
  .brand p { display: none; }
  #preview { grid-template-rows: auto auto auto auto minmax(15rem, 1fr); }
  #swatches { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .swatch { padding: .2rem; font-size: .75rem; }
  .swatch :is(code, .badge, .prefix) { display: initial; }
  .color { height: 1.4rem; margin: -.2rem -.2rem .1rem; }
}