:root {
  /* weiyan.design tokens — light */
  --ground: #ffffff;
  --surface: #f0f4f3;
  --panel: #ffffff;
  --ink: #1e1e1e;
  --muted: #484848;
  --hairline: #dadedd;
  --line-subtle: rgba(0, 0, 0, 0.06);
  --field: #ffffff;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #141414;
    --surface: #262626;
    --panel: #1c1c1a;
    --ink: #ededed;
    --muted: #bfbfbf;
    --hairline: #404040;
    --line-subtle: rgba(255, 255, 255, 0.08);
    --field: #1c1c1a;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground: #141414; --surface: #262626; --panel: #1c1c1a; --ink: #ededed;
  --muted: #bfbfbf; --hairline: #404040; --line-subtle: rgba(255, 255, 255, 0.08);
  --field: #1c1c1a; color-scheme: dark;
}
:root[data-theme="light"] {
  --ground: #ffffff; --surface: #f0f4f3; --panel: #ffffff; --ink: #1e1e1e;
  --muted: #484848; --hairline: #dadedd; --line-subtle: rgba(0, 0, 0, 0.06);
  --field: #ffffff; color-scheme: light;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.mono {
  font-family: ui-monospace, "SF Mono", "IBM Plex Mono", Menlo, monospace;
}

header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; padding: 1.6rem clamp(1rem, 3vw, 2.4rem) 1.2rem;
  border-bottom: 1px solid var(--hairline);
}
header h1 {
  margin: 0; font-size: 1rem; font-weight: 600; letter-spacing: 0.02em;
}
header p {
  margin: 0.35rem 0 0; max-width: 52ch; font-size: 0.85rem; line-height: 1.5;
  color: var(--muted);
}
.eyebrow {
  font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 0.5rem;
}
.theme-toggle {
  flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px;
  border: 1px solid var(--hairline); border-radius: 999px; background: var(--field);
  color: var(--muted); cursor: pointer;
}
.theme-toggle:hover { color: var(--ink); }

.lab {
  display: grid; grid-template-columns: 290px 1fr; gap: 0;
  min-height: calc(100vh - 84px);
}
@media (max-width: 800px) { .lab { grid-template-columns: 1fr; } }

/* ── Controls ─────────────────────────────────────────────── */
.controls {
  border-right: 1px solid var(--hairline);
  padding: 1.4rem clamp(1rem, 2vw, 1.4rem);
  display: flex; flex-direction: column; gap: 1.5rem;
}
@media (max-width: 800px) { .controls { border-right: none; border-bottom: 1px solid var(--hairline); } }
.group { display: flex; flex-direction: column; gap: 0.6rem; }
.group > .label {
  font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
}
.variants { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.variants button {
  padding: 0.5rem 0.4rem; font-size: 0.76rem; font-family: inherit;
  border: 1px solid var(--hairline); border-radius: 8px; background: var(--field);
  color: var(--muted); cursor: pointer; transition: all 0.15s ease;
}
.variants button:hover { color: var(--ink); border-color: var(--muted); }
.variants button[aria-pressed="true"] {
  background: var(--ink); color: var(--ground); border-color: var(--ink);
}

.slider { display: flex; flex-direction: column; gap: 0.3rem; }
.slider .row { display: flex; align-items: baseline; justify-content: space-between; }
.slider label { font-size: 0.8rem; }
.slider output { font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
input[type="range"] { width: 100%; accent-color: var(--ink); cursor: pointer; }
.slider[hidden] { display: none; }

.colorbar { display: flex; align-items: center; gap: 0.6rem; }
input[type="color"] {
  width: 34px; height: 28px; padding: 0; border: 1px solid var(--hairline);
  border-radius: 6px; background: var(--field); cursor: pointer;
}
.check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; cursor: pointer; }
.check input { accent-color: var(--ink); width: 15px; height: 15px; }

.presets { display: flex; flex-wrap: wrap; gap: 6px; }
.presets button {
  padding: 0.4rem 0.6rem; font-size: 0.72rem; font-family: inherit;
  border: 1px dashed var(--hairline); border-radius: 999px; background: transparent;
  color: var(--muted); cursor: pointer;
}
.presets button:hover { color: var(--ink); border-color: var(--muted); border-style: solid; }

/* ── Stage ────────────────────────────────────────────────── */
.stage {
  padding: clamp(1.2rem, 3vw, 2.4rem);
  display: flex; flex-direction: column; gap: 1.4rem; min-width: 0;
}
.stage-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.dims { font-size: 0.76rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.hint { font-size: 0.76rem; color: var(--muted); }

.preview {
  position: relative; width: 100%; max-width: 720px; height: 420px;
  min-width: 180px; min-height: 140px;
  resize: both; overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--hairline); border-radius: 14px;
}
.preview::after { /* resize affordance */
  content: ""; position: absolute; right: 3px; bottom: 3px; width: 12px; height: 12px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  opacity: 0.5; pointer-events: none; border-bottom-right-radius: 4px;
}
.pattern { position: absolute; inset: 0; pointer-events: none; }

/* Optional sample card content over the pattern */
.sample { position: absolute; inset: 0; padding: 14px; display: none; }
.preview[data-sample="on"] .sample { display: block; }
.sample .ov {
  font-family: ui-monospace, monospace; font-size: 0.66rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--muted);
}
.sample .box {
  position: absolute; left: 22%; top: 30%; width: 46%; height: 42%;
  background: var(--hairline); border-radius: 8px; opacity: 0.9;
}

.output { max-width: 720px; }
.output .bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.output .label { font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.copy {
  font-family: inherit; font-size: 0.74rem; padding: 0.3rem 0.7rem;
  border: 1px solid var(--hairline); border-radius: 6px; background: var(--field);
  color: var(--muted); cursor: pointer;
}
.copy:hover { color: var(--ink); border-color: var(--muted); }
pre {
  margin: 0; padding: 0.9rem 1rem; overflow-x: auto;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 10px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.76rem; line-height: 1.6;
  color: var(--ink);
}
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }