:root {
  --bg: #efe9dc; --dot: #d8cfbc; --panel: #fffdf7; --ink: #1c1a17; --muted: #5d574c; --line: #1c1a17; --shadow: #1c1a17;
  --accent: #0b6e69; --accent-ink: #ffffff; --brick: #a8361b; --soft: #f3eee2; --code: #f6f1e5;
  --ok: #1d6b33; --ok-bg: #dcefdc; --bad: #9b1c1c; --bad-bg: #fbe0dc; --meh: #7a4a00; --meh-bg: #fbeccd;
  --v-fresh: #1f4fa3; --v-fresh-bg: #dde7fb; --v-rethink: #6a2d8f; --v-rethink-bg: #efe1f7; --v-trim: #7a4a00; --v-trim-bg: #fbeccd;
  --v-recolor: #a3215a; --v-recolor-bg: #fbe0ec; --v-ship: #1d6b33; --v-ship-bg: #dcefdc;
  --wall: #20242e; --wall-ink: #e9e4d8; --wall-head: #353b4a;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; --paper: var(--soft);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #14161c; --dot: #262a35; --panel: #1d212b; --ink: #ece8de; --muted: #a9a294; --line: #4b5568; --shadow: #000000;
  --accent: #46c2b9; --accent-ink: #0b1414; --brick: #ff9a76; --soft: #252a36; --code: #161920;
  --ok: #8fe0a2; --ok-bg: #173723; --bad: #ffb0a6; --bad-bg: #44201c; --meh: #ffd27a; --meh-bg: #3d2e10;
  --v-fresh: #a9c6ff; --v-fresh-bg: #1c2b4a; --v-rethink: #dcb5f5; --v-rethink-bg: #34203f; --v-trim: #ffd27a; --v-trim-bg: #3d2e10;
  --v-recolor: #ffaecf; --v-recolor-bg: #46182c; --v-ship: #8fe0a2; --v-ship-bg: #173723;
  --wall: #0c0e13; --wall-ink: #e9e4d8; --wall-head: #232835;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background-color: var(--bg); background-image: radial-gradient(var(--dot) 1px, transparent 1px); background-size: 8px 8px;
  color: var(--ink); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; overflow-x: hidden;
}
a { color: var(--accent); }
code, .mono, pre { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }
.hidden { display: none !important; }
.small { font-size: 0.86rem; }
.muted { color: var(--muted); }
canvas.px { image-rendering: pixelated; image-rendering: crisp-edges; display: block; }

/* header */
.bar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--ink); color: var(--bg); flex-wrap: wrap; }
.bar .back { color: var(--bg); text-decoration: none; font-size: 0.9rem; opacity: 0.85; }
.brand { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; }
.logo { width: 30px; height: 30px; }
.lg-o { fill: var(--bg); } .lg-i { fill: var(--brick); } .lg-t { fill: var(--bg); }
.session { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bar .pill { border-color: var(--bg); color: var(--bg); background: transparent; }
.bar .pill.solid { background: var(--bg); color: var(--ink); }

.pill { display: inline-flex; align-items: center; gap: 4px; border: 2px solid var(--line); background: var(--panel); color: var(--ink); padding: 5px 12px; font: inherit; font-size: 0.88rem; cursor: pointer; text-decoration: none; border-radius: 0; }
.pill.solid { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.pill.ghost { cursor: default; }
.pill.tiny { padding: 2px 8px; font-size: 0.8rem; }
.pill:disabled { opacity: 0.5; cursor: not-allowed; }
.pill:hover:not(:disabled) { box-shadow: 2px 2px 0 var(--shadow); }
.bar .pill:hover:not(:disabled) { box-shadow: none; text-decoration: underline; }

main { max-width: 1180px; margin: 0 auto; padding: 20px 16px 40px; }

/* hero */
.hero { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: center; margin-bottom: 22px; }
.kicker { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78rem; color: var(--brick); margin: 0 0 4px; font-weight: 600; }
h1 { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: clamp(2.1rem, 6vw, 3.3rem); line-height: 1.05; margin: 0 0 10px; letter-spacing: -0.02em; }
.lede { margin: 0 0 12px; max-width: 62ch; }
.samples { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip { border: 2px dashed var(--line); background: var(--panel); color: var(--ink); padding: 4px 10px; font: inherit; font-size: 0.85rem; cursor: pointer; }
.chip.on { border-style: solid; background: var(--ink); color: var(--panel); }
.herowall { display: grid; grid-template-columns: repeat(2, 176px); gap: 10px; justify-content: center; padding: 16px; background: var(--wall); border: 2px solid var(--line); box-shadow: 5px 5px 0 var(--shadow); }
.herowall canvas { width: 176px; height: 62px; }

/* panels */
.layout { display: grid; grid-template-columns: 1fr 1.25fr; gap: 18px; align-items: start; }
.panel { background: var(--panel); border: 2px solid var(--line); box-shadow: 4px 4px 0 var(--shadow); padding: 16px; margin-bottom: 18px; min-width: 0; }
.layout .panel { margin-bottom: 0; }
.sitebox { grid-column: 1; } .editbox { grid-column: 2; grid-row: 1 / span 3; } .checkbox { grid-column: 1; } .askbox { grid-column: 1; }
.ph { font-size: 1.1rem; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.step-tag { display: inline-grid; place-items: center; width: 26px; height: 26px; background: var(--ink); color: var(--panel); font-family: ui-monospace, Menlo, monospace; font-size: 0.9rem; }
.lbl { display: block; font-size: 0.82rem; font-weight: 600; margin: 8px 0 3px; }
input[type=text], input[type=url], input[type=number], textarea, select { width: 100%; font: inherit; font-size: 0.95rem; color: var(--ink); background: var(--soft); border: 2px solid var(--line); padding: 6px 8px; border-radius: 0; }
textarea { resize: vertical; font-family: ui-monospace, Menlo, Consolas, monospace; }
#about { font-family: inherit; }
input[type=color] { width: 100%; height: 36px; padding: 2px; border: 2px solid var(--line); background: var(--soft); cursor: pointer; }
input:disabled, select:disabled { opacity: 0.45; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.grid5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }

/* bench: actual size + loupe */
.bench { margin-top: 14px; display: grid; gap: 10px; }
.actual { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.strip { display: flex; align-items: center; gap: 10px; padding: 12px; border: 2px solid var(--line); }
.strip.light { background: #ffffff; color: #333333; } .strip.dark { background: #101010; color: #cccccc; }
.strip canvas { width: 88px; height: 31px; flex: none; }
.strip span { font-size: 0.75rem; }
.loupe-wrap { border: 2px solid var(--line); background: var(--soft); padding: 8px; }
canvas.loupe { width: 100%; height: auto; aspect-ratio: 88 / 31; }
.frames-strip { display: flex; gap: 8px; flex-wrap: wrap; }
.fr { margin: 0; } .fr canvas { width: 176px; height: 62px; max-width: 100%; } .fr figcaption { font-size: 0.72rem; color: var(--muted); }
.fit { width: 100%; border-collapse: collapse; margin: 12px 0 8px; font-size: 0.85rem; }
.fit th, .fit td { border-bottom: 1px solid var(--line); padding: 4px 6px; text-align: left; vertical-align: top; }
.fit td.mono { word-break: break-all; }
.fit td.ok { color: var(--ok); } .fit td.bad, .fit tr.over td.mono { color: var(--bad); font-weight: 600; }
.fit td.none { color: var(--muted); }
.cardrow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

/* check */
.lean { display: grid; grid-template-columns: 1fr; gap: 10px; }
.lean-l { display: flex; flex-direction: column; gap: 4px; }
.lean-r { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.lean-r div { border: 2px solid var(--line); padding: 6px; text-align: center; background: var(--soft); }
.lean-r b { display: block; font-family: ui-monospace, Menlo, monospace; font-size: 1.05rem; }
.lean-r span { font-size: 0.72rem; color: var(--muted); }
.badge { display: inline-block; align-self: flex-start; padding: 3px 10px; font-weight: 700; font-size: 0.85rem; border: 2px solid currentColor; background: var(--soft); color: var(--ink); }
.badge.v-fresh { color: var(--v-fresh); background: var(--v-fresh-bg); } .badge.v-rethink { color: var(--v-rethink); background: var(--v-rethink-bg); }
.badge.v-trim { color: var(--v-trim); background: var(--v-trim-bg); } .badge.v-recolor { color: var(--v-recolor); background: var(--v-recolor-bg); }
.badge.v-ship { color: var(--v-ship); background: var(--v-ship-bg); }
.flags { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 6px; }
.flags li { font-size: 0.86rem; display: flex; gap: 8px; align-items: baseline; }
.lv { flex: none; font-size: 0.7rem; text-transform: uppercase; font-weight: 700; padding: 1px 6px; border: 1px solid currentColor; }
.lv-fix .lv { color: var(--bad); background: var(--bad-bg); } .lv-warn .lv { color: var(--meh); background: var(--meh-bg); } .lv-info .lv { color: var(--v-fresh); background: var(--v-fresh-bg); }

/* ask */
.go { width: 100%; padding: 12px; font: inherit; font-weight: 700; font-size: 1rem; background: var(--brick); color: #ffffff; border: 2px solid var(--line); box-shadow: 3px 3px 0 var(--shadow); cursor: pointer; }
:root[data-theme="dark"] .go { color: #1a0d08; }
.go:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; }
.note { background: var(--meh-bg); color: var(--meh); padding: 6px 10px; font-size: 0.86rem; border-left: 4px solid currentColor; }
.note.warn { background: var(--bad-bg); color: var(--bad); }
.meter { margin: 8px 0 0; }
.gate { font-size: 0.88rem; margin: 8px 0 0; }

/* progress */
.progress { margin-top: 18px; }
.steps { list-style: none; padding: 0; margin: 0 0 8px; }
.step { padding: 2px 0; color: var(--muted); font-size: 0.9rem; } .step.done { color: var(--ok); } .step.active { color: var(--ink); font-weight: 600; }
.step-ic { display: inline-block; width: 1.2em; font-family: ui-monospace, Menlo, monospace; }
.raw { white-space: pre-wrap; word-break: break-word; max-height: 320px; overflow: auto; background: var(--code); padding: 8px; }

/* result */
.result { margin-top: 22px; background: var(--panel); border: 2px solid var(--line); box-shadow: 6px 6px 0 var(--shadow); padding: 18px; margin-bottom: 18px; }
.res-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.res-head h2 { margin: 0; font-size: 1.35rem; overflow-wrap: anywhere; }
.summary { margin: 8px 0 12px; max-width: 80ch; }
.wall { background: var(--wall); color: var(--wall-ink); border: 2px solid var(--line); margin: 6px 0 16px; }
.wall-head { display: flex; align-items: center; gap: 10px; padding: 6px 10px; background: var(--wall-head); }
.wall-dots { width: 42px; height: 10px; background: radial-gradient(circle at 5px 5px, #ff6b5e 4px, transparent 5px), radial-gradient(circle at 21px 5px, #ffc93c 4px, transparent 5px), radial-gradient(circle at 37px 5px, #4fd16a 4px, transparent 5px); }
.wall-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 14px; padding: 18px; }
.wt { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; background: transparent; border: 2px dashed transparent; color: var(--wall-ink); font: inherit; cursor: pointer; min-width: 0; }
.wt canvas { width: 88px; height: 31px; }
.wt.on { border-color: #ffc93c; } .wt:hover { border-color: #8a93a8; }
.wt.draft { cursor: default; border-color: #4b5568; border-style: solid; }
.wt.empty .slot { display: grid; place-items: center; width: 88px; height: 31px; border: 1px dashed #6b7488; font-size: 0.7rem; color: #9aa3b8; }
.wt-cap { font-size: 0.75rem; text-align: center; overflow-wrap: anywhere; }
.pick { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; align-items: start; margin-bottom: 16px; }
.pick-view { display: grid; gap: 8px; min-width: 0; }
.pick-view canvas.loupe { border: 2px solid var(--line); }
.pick-info h3 { margin: 0 0 4px; overflow-wrap: anywhere; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.chip-s { font-size: 0.78rem; padding: 2px 8px; border: 1px solid currentColor; font-weight: 600; }
.chip-s.ok { color: var(--ok); background: var(--ok-bg); } .chip-s.bad { color: var(--bad); background: var(--bad-bg); } .chip-s.meh { color: var(--meh); background: var(--meh-bg); }
.res-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.result h3 { font-size: 1rem; margin: 12px 0 6px; }
.reading, .changes, .recon { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.rd, .ch { display: flex; flex-direction: column; gap: 3px; font-size: 0.9rem; border-left: 3px solid var(--line); padding-left: 8px; }
.asp { align-self: flex-start; font-size: 0.7rem; text-transform: uppercase; font-weight: 700; padding: 1px 6px; color: var(--accent); border: 1px solid currentColor; }
.ch-was { color: var(--bad); } .ch-now { color: var(--ok); text-decoration: none; font-weight: 600; } .ch-why { color: var(--muted); font-size: 0.84rem; }
.none { color: var(--muted); font-style: italic; }
.recon li { font-size: 0.88rem; padding-left: 8px; border-left: 3px solid var(--line); }
.recon li.warn { border-color: var(--meh); } .recon li.info { border-color: var(--v-fresh); }
pre.code { background: var(--code); border: 2px solid var(--line); padding: 10px; white-space: pre-wrap; word-break: break-all; font-size: 0.82rem; margin: 0; }

/* history */
.hlist { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 8px; }
.hrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.hrow canvas.hthumb { width: 88px; height: 31px; flex: none; }
.hinfo { display: flex; flex-direction: column; flex: 1; min-width: 160px; }

.foot { max-width: 1180px; margin: 0 auto; padding: 0 16px 40px; font-size: 0.85rem; color: var(--muted); }
.toasts { position: fixed; right: 16px; bottom: 16px; display: grid; gap: 8px; z-index: 50; max-width: min(380px, calc(100vw - 32px)); }
.toast { background: var(--ink); color: var(--panel); padding: 10px 14px; font-size: 0.88rem; border: 2px solid var(--line); transition: opacity 0.5s; }
.toast.err { background: var(--bad-bg); color: var(--bad); }
.toast a { color: inherit; font-weight: 700; }
.toast.gone { opacity: 0; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .layout { grid-template-columns: 1fr; }
  .sitebox, .editbox, .checkbox, .askbox { grid-column: 1; grid-row: auto; }
  .pick, .res-cols { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .grid2 { grid-template-columns: 1fr; }
  .grid4 { grid-template-columns: 1fr 1fr; }
  .grid5 { grid-template-columns: repeat(4, 1fr); }
  .grid5 > div:last-child { grid-column: 1 / -1; }
  .actual { grid-template-columns: 1fr; }
  .lean-r { grid-template-columns: repeat(2, 1fr); }
  .herowall { grid-template-columns: repeat(2, 1fr); padding: 12px; }
  .herowall canvas { width: 100%; height: auto; aspect-ratio: 88 / 31; }
  .session .pill { padding: 4px 8px; }
  .wall-tiles { grid-template-columns: repeat(2, 1fr); padding: 12px; gap: 8px; }
}