/* ============ PAINTERGEIST design system ============ */
/* Typefaces are self-hosted (static/fonts): no external requests, and the
   site keeps working offline. Syne is the display grotesque, DM Mono the
   technical chrome. Only the latin + latin-ext subsets are shipped. */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/dm-mono-300-latin-ext.c4aedc11412d.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/dm-mono-300-latin.f0f025275c62.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/dm-mono-400-latin-ext.1b65496d99bd.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/dm-mono-400-latin.b4ddae058212.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../fonts/dm-mono-500-latin-ext.83187a548722.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../fonts/dm-mono-500-latin.ecb3fd43cbea.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/syne-400-800-latin-ext.c9890e96868d.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/syne-400-800-latin.06dac3d9f8a5.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ground: #E3E1DB;
  --panel: #EDECE7;
  --panel2: #F4F3EF;
  --well: #DAD8D0;
  --ink: #16150F;
  --dim: #6F6C63;
  --line: #C6C3BA;
  --line-hard: #16150F;
  --accent: #FF3D00;
  --accent-ink: #FFFFFF;
  --shadow: 0 2px 0 rgba(22,21,15,.14);
  --mono: "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans: "Syne", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #121210; --panel: #1B1B18; --panel2: #22221E; --well: #0C0C0B;
    --ink: #E9E7DF; --dim: #8D8A7F; --line: #33322C; --line-hard: #E9E7DF;
    --accent: #FF3D00; --accent-ink: #FFFFFF; --shadow: 0 2px 0 rgba(0,0,0,.5);
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font: 15px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--accent); color: var(--accent-ink); }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
canvas { display: block; }
img { max-width: 100%; }
:is(button, a, input, select, [tabindex]):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

.mono { font-family: var(--mono); }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 20px; }

/* ============ hardware chrome ============ */
.module {
  background: var(--panel); border: 1px solid var(--line);
  box-shadow: var(--shadow); position: relative;
}
.module-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 12px; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--dim);
}
.module-head b { color: var(--ink); font-weight: 600; }
/* Panel screw: a shallow slotted head dished by a radial gradient and lit
   from the top-left, like the rest of the chrome. The slot is inset and
   clipped by the head — the old one was a full-width rule that poked past
   the rim once rotated, so it read as a "no entry" sign rather than a screw. */
.screw {
  width: 10px; height: 10px; border-radius: 50%; flex: none;
  position: relative; overflow: hidden;
  background:
    radial-gradient(circle at 34% 30%,
      color-mix(in srgb, var(--panel2) 74%, #fff),
      var(--well) 58%,
      color-mix(in srgb, var(--well) 74%, var(--ink)));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--line) 78%, var(--ink)),
    0 1px 1px rgba(0,0,0,.14);
}
/* The cut, plus the lit lip along its lower edge. Keep it SHORT — a slot
   that reaches for the rim reads as a prohibition sign, not a fastener. */
.screw::before, .screw::after {
  content: ""; position: absolute; top: 50%; left: 27%; right: 27%;
  height: 1px; border-radius: 1px;
}
/* Fixed alphas, not theme tokens: --ink inverts in dark mode, which made the
   cut and its highlight both light and fused them into one fat bright bar. */
.screw::before {
  background: rgba(0, 0, 0, .5);
  transform: translateY(-50%) rotate(38deg);
}
.screw::after {
  background: rgba(255, 255, 255, .5);
  transform: translateY(-50%) rotate(38deg) translateY(1px);
}
.led {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 6px var(--accent); flex: none;
}

/* ============ buttons ============ */
.btn {
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; border: 1px solid var(--line-hard);
  background: var(--panel); color: var(--ink); border-radius: 2px;
  transition: background .12s, color .12s;
}
.btn:hover { background: var(--ink); color: var(--ground); }
.btn-solid { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-solid:hover { background: var(--ink); border-color: var(--ink); color: var(--ground); }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .45; pointer-events: none; }

/* ============ topbar ============ */
#topbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--ground); border-bottom: 1px solid var(--line-hard);
}
#topbar .row { display: flex; align-items: stretch; height: 54px; }
.brand {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  padding-right: 20px; border-right: 1px solid var(--line);
}
.brand svg { width: 22px; height: 22px; }
.brand .wordmark {
  font-family: var(--mono); font-weight: 700; font-size: 14px; letter-spacing: .12em;
}
.brand sup { font-size: 8px; color: var(--dim); }
#topbar nav { display: flex; align-items: stretch; flex: 1; }
#topbar nav a {
  display: flex; align-items: center; padding: 0 18px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; text-decoration: none; color: var(--dim);
  border-right: 1px solid var(--line);
}
#topbar nav a:hover { color: var(--ink); background: var(--panel); }
#topbar nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }
#cartbtn {
  display: flex; align-items: center; gap: 10px; padding: 0 18px;
  border: none; border-left: 1px solid var(--line-hard); background: var(--ground);
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase;
}
#cartbtn:hover { background: var(--panel); }
#cartcount {
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 2px;
  background: var(--accent); color: var(--accent-ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
}

/* ============ hero ============ */
#hero { border-bottom: 1px solid var(--line-hard); }
#hero .grid {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 32px; padding: 56px 0 48px; align-items: center;
}
.eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--dim);
  display: flex; align-items: center; gap: 10px; margin: 0 0 18px;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--accent); }
#hero h1 {
  margin: 0 0 22px; font-family: var(--sans); font-weight: 800;
  /* Syne's extrabold sets much wider than a Helvetica bold, so the fluid
     floors sit lower than they would for a normal grotesque — otherwise the
     display lines run off a phone screen. */
  font-size: clamp(34px, 7.2vw, 96px); line-height: .92;
  letter-spacing: -.035em; text-transform: uppercase; text-wrap: balance;
}
#hero h1 .flip { color: var(--accent); }
#hero .lede { max-width: 54ch; color: var(--dim); font-size: 16.5px; margin: 0 0 30px; }
#hero .lede b { color: var(--ink); font-weight: 600; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; }

#demo-module .stage {
  background: var(--well); padding: 26px; display: flex;
  align-items: center; justify-content: center; min-height: 320px;
}
#demo-canvas {
  max-width: 100%; height: auto;
  box-shadow: 0 14px 34px rgba(0,0,0,.32), 0 2px 6px rgba(0,0,0,.22);
  background: #fff;
}
#demo-readout {
  padding: 8px 12px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  color: var(--dim); display: flex; justify-content: space-between; gap: 10px;
  white-space: nowrap; overflow: hidden;
}
#demo-readout .live { color: var(--accent); }

/* ============ spec strip ============ */
#specs { border-bottom: 1px solid var(--line-hard); background: var(--panel); }
#specs .row { display: grid; grid-template-columns: repeat(4, 1fr); }
#specs .cell { padding: 22px 20px; border-right: 1px solid var(--line); }
#specs .cell:last-child { border-right: none; }
#specs .num {
  font-family: var(--mono); font-size: 30px; font-weight: 700;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
#specs .num span { color: var(--accent); }
#specs .lbl {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--dim); margin-top: 4px;
}

/* ============ sections ============ */
section.block { padding: 72px 0; }
.sec-head { margin-bottom: 36px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sec-head h2 {
  margin: 8px 0 0; font-weight: 800; text-transform: uppercase;
  font-size: clamp(22px, 4vw, 46px); letter-spacing: -.03em; line-height: 1;
}
.sec-head .more { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); text-decoration: none; }
.sec-head .more:hover { color: var(--accent); }

/* ============ versus ============ */
/* A comparison table that argues in pictures: one real painting against a
   wall of identical copies of it, then a diagram per row. Three columns —
   the dimension, our side, the print's side — folding to stacked cards on
   a phone so the two claims stay next to each other. */
#versus { border-bottom: 1px solid var(--line-hard); }
.vs { border: 1px solid var(--line-hard); background: var(--panel); }
.vs-hero, .vs-head, .vs-row {
  display: grid; grid-template-columns: 132px 1fr 1fr; align-items: stretch;
}
.vs-row + .vs-row, .vs-head + .vs-row { border-top: 1px solid var(--line); }

/* the two artefacts */
.vs-hero { border-bottom: 1px solid var(--line-hard); }
.vs-hero > .vs-us, .vs-hero > .vs-them {
  padding: 26px 20px; display: flex; flex-direction: column;
  align-items: center; justify-content: space-between; gap: 16px;
  min-height: 260px;
}
.vs-hero > .vs-us { background: var(--panel2); border-left: 2px solid var(--accent); }
/* fit-content, or the absolutely-positioned badge anchors to the cell edge
   instead of the painting's corner */
.vs-art {
  position: relative; line-height: 0;
  width: fit-content; align-self: center;
}
.vs-art img {
  box-shadow: 0 14px 30px rgba(0,0,0,.30), 0 2px 6px rgba(0,0,0,.20);
  background: #fff;
}
.vs-badge {
  position: absolute; top: -10px; right: -10px; z-index: 1;
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: .08em; line-height: 1; padding: 6px 8px; border-radius: 2px;
}
.vs-tile {
  position: relative; display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 4px; align-self: center;
}
.vs-tile img {
  box-shadow: 0 1px 2px rgba(0,0,0,.25); background: #fff;
  opacity: .82; filter: grayscale(.2);
}
/* a chip, not a full wash — the point is that you can still see every copy */
.vs-count {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-family: var(--mono); font-size: 15px; letter-spacing: .06em;
  color: var(--ink); background: var(--panel);
  border: 1px solid var(--line-hard); padding: 6px 12px; white-space: nowrap;
}
.vs-tag {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; text-align: center;
}
.vs-hero > .vs-us .vs-tag { color: var(--ink); }
.vs-hero > .vs-them .vs-tag { color: var(--dim); }

/* column header */
.vs-head {
  background: var(--panel2); border-bottom: 1px solid var(--line-hard);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase;
}
.vs-head > * { padding: 10px 16px; }
.vs-head .vs-us { color: var(--accent); font-weight: 500; }
.vs-head .vs-them { color: var(--dim); }

/* one dimension, diagrammed on both sides */
.vs-row > * { padding: 14px 16px; }
.vs-row .vs-key {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--dim); align-self: center;
}
.vs-row .vs-us {
  border-left: 2px solid var(--accent); background: var(--panel2); color: var(--ink);
}
.vs-row .vs-them { color: var(--dim); }
.vs-row p { margin: 8px 0 0; font-size: 13.5px; }
.vs-fig { display: block; width: 100%; max-width: 190px; height: 38px; }
.vs-row .vs-us p::before,
.vs-row .vs-them p::before {
  font-family: var(--mono); font-size: 11px; margin-right: 7px;
}
.vs-row .vs-us p::before { content: "✓"; color: var(--accent); }
.vs-row .vs-them p::before { content: "✕"; }
.dg-dim-fill { fill: var(--dim); }
.dg-stroke-fill { fill: var(--ink); }

/* ============ process ============ */
#process { border-bottom: 1px solid var(--line-hard); }
.proc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.proc .body { padding: 18px; }
.proc .step-num { font-family: var(--mono); font-size: 11px; color: var(--accent); letter-spacing: .18em; }
.proc h3 { margin: 6px 0 10px; text-transform: uppercase; font-size: 18px; font-weight: 700; }
.proc p { margin: 0; color: var(--dim); font-size: 14px; }
.proc .diagram {
  height: 120px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  background: var(--panel2);
}
.proc .diagram svg { width: 84%; height: 84%; }
.dg-stroke { stroke: var(--ink); fill: none; stroke-width: 2; }
.dg-dim { stroke: var(--dim); fill: none; stroke-width: 1.4; }
.dg-acc { stroke: var(--accent); fill: none; stroke-width: 2; }
.dg-accfill { fill: var(--accent); }
.dg-fill { fill: var(--ink); }

/* ============ builder ============ */
.builder {
  display: grid; grid-template-columns: 290px minmax(0, 1fr) 320px;
  align-items: stretch; border: 1px solid var(--line-hard);
  box-shadow: var(--shadow); background: var(--panel);
}
.b-col { min-width: 0; display: flex; flex-direction: column; }
.b-col + .b-col { border-left: 1px solid var(--line); }

#gen-rail { max-height: 760px; }
#gen-list { overflow-y: auto; padding: 6px; flex: 1; }
.gen-row { position: relative; margin: 2px 0; }
.gen-item {
  display: flex; gap: 10px; align-items: center; width: 100%;
  padding: 7px; text-align: left;
  background: none; border: 1px solid transparent; border-radius: 2px;
}
.gen-item:hover { background: var(--panel2); }
.gen-item[aria-pressed="true"] { background: var(--panel2); border-color: var(--accent); }
.gen-item img {
  width: 88px; height: 110px; flex: none; object-fit: cover;
  border: 1px solid var(--line); background: #fff;
}
.gen-item .meta { min-width: 0; }
.gen-item .nm { font-weight: 700; font-size: 13px; text-transform: uppercase; display: block; }
.gen-item .tg { color: var(--dim); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }

#stagecol .stage {
  flex: 1; background: var(--well); display: flex; align-items: center;
  justify-content: center; padding: 14px; min-height: 480px; position: relative;
}
/* The frame stretches to the width the flex row gives it, so it has to centre
   the painting itself. Without this the image sat against the left padding
   whenever it was wider than tall: a landscape canvas hit the width cap while
   the frame kept the full column, and nothing was centring the two. */
#preview-frame {
  position: relative; font-size: 0; max-width: 100%;
  display: flex; align-items: center; justify-content: center;
}
#preview-img {
  max-width: 100%; max-height: min(74vh, 680px); width: auto; height: auto;
  background: #fff;
  box-shadow: 0 18px 44px rgba(0,0,0,.34), 0 3px 8px rgba(0,0,0,.22);
  cursor: zoom-in;
}
#lightbox {
  position: fixed; inset: 0; z-index: 60; display: none; align-items: center;
  justify-content: center; padding: 3vmin;
  background: color-mix(in srgb, var(--ground) 12%, rgba(0,0,0,.88));
  cursor: zoom-out;
}
#lightbox.on { display: flex; }
#lightbox img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  background: #fff;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
}
#lightbox-close {
  position: absolute; top: 16px; right: 16px; width: 40px; height: 40px;
  background: var(--panel); color: var(--ink); border: 1px solid var(--line);
  font-size: 16px; cursor: pointer; box-shadow: var(--shadow);
}
#lightbox-close:hover { background: var(--accent); color: var(--accent-ink); }
body.lightbox-open { overflow: hidden; }
#veil {
  position: absolute; inset: 0; display: none; align-items: center;
  justify-content: center; background: color-mix(in srgb, var(--well) 55%, transparent);
  z-index: 2;
}
#veil.on { display: flex; }
.spin {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--accent);
  animation: r .8s linear infinite;
}
@keyframes r { to { transform: rotate(360deg); } }
#stagecol .statusline {
  border-top: 1px solid var(--line); padding: 8px 12px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  color: var(--dim); display: flex; justify-content: space-between; gap: 12px;
  flex-wrap: wrap;
}
#stagecol .statusline .err { color: var(--accent); }

#paramcol { max-height: 760px; }
#param-scroll { overflow-y: auto; flex: 1; padding: 14px 16px 6px; }
.p-about { color: var(--dim); font-size: 12.5px; margin: 0 0 14px; }
.field { margin: 0 0 16px; }
.field > label, .field > .flabel {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--dim); margin-bottom: 7px;
}
.field .val { color: var(--ink); font-variant-numeric: tabular-nums; }
.field select, .field input[type="number"], .field input[type="text"] {
  width: 100%; padding: 9px 10px; border-radius: 2px; font: 13px var(--mono);
  border: 1px solid var(--line); background: var(--panel2); color: var(--ink);
}
.seedrow { display: flex; gap: 6px; align-items: center; }
.seedrow input { flex: 1; }
.dice {
  padding: 0; border: 0; background: none; line-height: 1;
  font-family: var(--mono); font-size: 30px; color: var(--dim); cursor: pointer;
}
.dice:hover { color: var(--accent); }
.dice:active { transform: rotate(90deg); }
/* Ten palettes per algorithm, laid out 2 across x 5 down. */
.chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.chip {
  display: flex; align-items: center; gap: 7px; padding: 5px 9px 5px 6px;
  border: 1px solid var(--line); background: var(--panel2); border-radius: 2px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em;
  text-transform: uppercase; min-width: 0; text-align: left;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chip:hover { border-color: var(--dim); }
.chip[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.chip .sw { display: flex; flex: none; }
.chip .sw i { width: 10px; height: 16px; display: block; border-right: 1px solid rgba(0,0,0,.12); }
.segs { display: flex; border: 1px solid var(--line); border-radius: 2px; overflow: hidden; }
.segs button {
  flex: 1; padding: 8px 4px; background: var(--panel2); border: none;
  border-right: 1px solid var(--line);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--dim);
}
.segs button:last-child { border-right: none; }
.segs button[aria-pressed="true"] { background: var(--ink); color: var(--ground); }
.toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.toggle input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; }
.toggle span {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--dim);
}

#buybar { border-top: 1px solid var(--line); padding: 14px 16px; background: var(--panel); }
#pricebox { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--mono); margin-bottom: 12px; }
#price-desc { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
#price-amt { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }


/* ============ shop ============ */
.shop-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.drop { display: flex; flex-direction: column; }
.drop .art {
  background: var(--well); padding: 22px; display: flex;
  align-items: center; justify-content: center; border-bottom: 1px solid var(--line);
  position: relative; min-height: 220px;
}
.drop .art img {
  max-width: 100%; max-height: 240px; width: auto; height: auto; background: #fff;
  box-shadow: 0 8px 22px rgba(0,0,0,.3), 0 2px 5px rgba(0,0,0,.2);
}
.drop.sold .art img { filter: grayscale(1) contrast(.82); opacity: .55; }
.drop .soldstamp {
  position: absolute; inset: auto auto 12px 12px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em;
  color: var(--accent); border: 1px solid var(--accent); padding: 3px 8px;
  text-transform: uppercase; background: var(--panel);
}
.drop .info { padding: 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.drop .name { font-weight: 700; text-transform: uppercase; font-size: 15px; }
.drop .spec { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; color: var(--dim); text-transform: uppercase; }
.drop .buyrow { margin-top: auto; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.drop .price { font-family: var(--mono); font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; }
.drop .btn { padding: 9px 14px; }
.tag-11 {
  font-family: var(--mono); font-size: 9px; letter-spacing: .14em;
  color: var(--accent); border: 1px solid var(--accent);
  padding: 2px 5px; border-radius: 2px;
}

/* ============ blog ============ */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.post-card { display: flex; flex-direction: column; text-decoration: none; }
.post-card .art {
  background: var(--well); padding: 18px; display: flex; align-items: center;
  justify-content: center; border-bottom: 1px solid var(--line); min-height: 170px;
}
.post-card .art img { max-height: 190px; width: auto; box-shadow: 0 8px 22px rgba(0,0,0,.3); background: #fff; }
.post-card .info { padding: 14px; }
.post-card .date { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--dim); text-transform: uppercase; }
.post-card h3 { margin: 6px 0 8px; font-size: 17px; text-transform: uppercase; letter-spacing: -.01em; }
.post-card p { margin: 0; color: var(--dim); font-size: 13.5px; }
.post-card:hover h3 { color: var(--accent); }

.article { max-width: 720px; margin: 0 auto; padding: 56px 20px 80px; }
.article .cover { background: var(--well); border: 1px solid var(--line); box-shadow: var(--shadow); padding: 26px; display: flex; justify-content: center; margin: 26px 0; }
.article .cover img { max-height: 420px; width: auto; box-shadow: 0 14px 34px rgba(0,0,0,.32); background: #fff; }
.article h1 { font-size: clamp(24px, 4.4vw, 52px); text-transform: uppercase; letter-spacing: -.03em; line-height: 1; margin: 10px 0 12px; text-wrap: balance; }
.article .byline { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.article .body p { font-size: 16.5px; line-height: 1.7; margin: 0 0 20px; max-width: 65ch; }

/* ============ checkout / confirmed ============ */
.sheet-wrap { max-width: 640px; margin: 0 auto; padding: 56px 20px 80px; }
.sheet { background: var(--ground); border: 1px solid var(--line-hard); box-shadow: var(--shadow); }
.co-body { padding: 20px; }
.co-summary {
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--dim); border: 1px solid var(--line);
  background: var(--panel); padding: 12px 14px; margin-bottom: 18px;
}
.co-summary .row { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.co-summary .row.total { color: var(--ink); font-weight: 700; border-top: 1px solid var(--line); margin-top: 6px; padding-top: 8px; }
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fgrid .span2 { grid-column: 1 / -1; }
.fgrid label {
  display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--dim); margin-bottom: 5px;
}
.fgrid input, .fgrid select, .fgrid textarea {
  width: 100%; padding: 10px; border-radius: 2px; font: 13px var(--mono);
  border: 1px solid var(--line); background: var(--panel2); color: var(--ink);
}
.fgrid textarea { resize: vertical; min-height: 84px; line-height: 1.5; }
.fgrid label .opt { text-transform: none; letter-spacing: .04em; opacity: .7; }
.form-error { font-family: var(--mono); font-size: 11px; color: var(--accent); letter-spacing: .08em; text-transform: uppercase; margin: 0 0 12px; }
#paybtn { margin-top: 18px; }

/* Not-shipping-yet notice on the checkout page. Loud enough that nobody gets
   as far as the form thinking they are buying something today. */
.notready {
  border: 1px solid var(--accent); border-left-width: 3px;
  background: var(--panel); padding: 14px 16px; margin-bottom: 18px;
}
.notready-lead {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 8px;
}
.notready p { font-size: 13.5px; line-height: 1.6; color: var(--dim); margin: 0; }
.co-note {
  font-family: var(--mono); font-size: 10px; line-height: 1.6; letter-spacing: .04em;
  text-transform: none; color: var(--dim); margin: 10px 0 0;
}
.confirm { text-align: center; padding: 46px 26px; }
.confirm .bigcheck {
  width: 68px; height: 68px; margin: 0 auto 20px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink); font-size: 32px;
  display: flex; align-items: center; justify-content: center;
}
.confirm h3 { margin: 0 0 8px; text-transform: uppercase; font-size: 22px; }
.confirm .ordno { font-family: var(--mono); color: var(--accent); letter-spacing: .14em; }
.confirm p { color: var(--dim); font-size: 14px; max-width: 42ch; margin: 12px auto 22px; }
.confirm .items { text-align: left; max-width: 380px; margin: 0 auto 24px; }
.confirm .items .ci { border-top: 1px solid var(--line); }

/* ============ manifesto / footer ============ */
#manifesto { border-top: 1px solid var(--line-hard); background: var(--panel); }
#manifesto .inner { padding: 64px 0; max-width: 780px; }
#manifesto p.big {
  font-size: clamp(17px, 2.6vw, 30px); font-weight: 700; line-height: 1.3;
  letter-spacing: -.015em; margin: 0 0 18px; text-wrap: balance;
}
#manifesto p.big em { font-style: normal; color: var(--accent); }
#manifesto p.small { color: var(--dim); max-width: 60ch; margin: 0; }

footer { border-top: 1px solid var(--line-hard); background: var(--ground); }
.barcode {
  height: 34px; margin: 26px 0 10px; max-width: 220px;
  background: repeating-linear-gradient(90deg,
    var(--ink) 0 2px, transparent 2px 5px, var(--ink) 5px 6px, transparent 6px 11px,
    var(--ink) 11px 14px, transparent 14px 16px);
}
footer .cols {
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding-bottom: 30px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--dim);
}
footer .cols a { text-decoration: none; }
footer .cols a:hover { color: var(--accent); }

/* ============ cart drawer ============ */
#scrim {
  position: fixed; inset: 0; background: rgba(10,10,8,.5); z-index: 90;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
#scrim.on { opacity: 1; pointer-events: auto; }
#cart {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100vw);
  background: var(--ground); border-left: 1px solid var(--line-hard); z-index: 100;
  transform: translateX(102%); transition: transform .25s ease;
  display: flex; flex-direction: column;
}
#cart.on { transform: none; }
#cart header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--line-hard);
  font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
}
#cart header button { background: none; border: none; font-size: 18px; padding: 4px 8px; }
#cart-items { flex: 1; overflow-y: auto; padding: 10px 18px; }
.cart-empty { color: var(--dim); font-family: var(--mono); font-size: 12px; letter-spacing: .08em; padding: 30px 0; text-transform: uppercase; }
.ci { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.ci img { width: 62px; height: auto; align-self: flex-start; border: 1px solid var(--line); background: #fff; }
.ci .mid { flex: 1; min-width: 0; }
.ci .nm { font-weight: 700; text-transform: uppercase; font-size: 13.5px; }
.ci .sp { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; color: var(--dim); text-transform: uppercase; margin-top: 3px; line-height: 1.7; }
.ci .right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ci .pr { font-family: var(--mono); font-weight: 700; font-variant-numeric: tabular-nums; }
.ci .rm { background: none; border: none; color: var(--dim); font-size: 14px; padding: 2px 6px; }
.ci .rm:hover { color: var(--accent); }
#cart footer { border-top: 1px solid var(--line-hard); padding: 16px 18px; background: var(--ground); }
#cart .totrow {
  display: flex; justify-content: space-between; font-family: var(--mono);
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim);
  margin-bottom: 6px;
}
#cart .totrow.grand { color: var(--ink); font-size: 15px; font-weight: 700; margin: 10px 0 14px; }
#cart .totrow .n { font-variant-numeric: tabular-nums; }

/* toast */
#toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px);
  background: var(--ink); color: var(--ground); z-index: 120;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em;
  text-transform: uppercase; padding: 12px 20px; border-radius: 2px;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
#toast.on { opacity: 1; transform: translate(-50%, 0); }
#toast.has-action { pointer-events: auto; display: flex; align-items: center; gap: 14px; }
#toast .undo {
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  color: var(--accent); background: none; border: 0; padding: 0;
  border-bottom: 1px solid currentColor;
}

/* ============ responsive ============ */
@media (max-width: 1080px) {
  .builder { grid-template-columns: 260px minmax(0,1fr); }
  #paramcol { grid-column: 1 / -1; border-left: none; border-top: 1px solid var(--line); max-height: none; }
  .shop-grid { grid-template-columns: repeat(2, 1fr); }
  .post-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  #hero .grid { grid-template-columns: 1fr; }
  #specs .row { grid-template-columns: repeat(2, 1fr); }
  #specs .cell:nth-child(2) { border-right: none; }
  #specs .cell { border-bottom: 1px solid var(--line); }
  .proc-grid { grid-template-columns: 1fr; }
  .vs-head { display: none; }
  .vs-hero, .vs-row { grid-template-columns: 1fr; }
  .vs-hero > .vs-key, .vs-row > .vs-key:empty { display: none; }
  .vs-row .vs-key { padding-bottom: 0; }
  .vs-hero > .vs-us, .vs-row .vs-us {
    border-left: none; border-top: 2px solid var(--accent);
  }
  .vs-hero > .vs-us, .vs-hero > .vs-them { min-height: 0; }
  #topbar nav a { padding: 0 10px; }
  #topbar nav a[data-optional] { display: none; }
}
@media (max-width: 700px) {
  /* The topbar's brand + nav + cart could not shrink past ~520px, so every
     page scrolled sideways on a phone. Tighten the chrome and let the nav
     itself be the thing that gives. */
  .brand { padding-right: 12px; }
  .brand .wordmark { font-size: 11px; letter-spacing: .06em; }
  #topbar nav { min-width: 0; overflow-x: auto; scrollbar-width: none; }
  #topbar nav::-webkit-scrollbar { display: none; }
  #topbar nav a { padding: 0 12px; white-space: nowrap; }
  #cartbtn { padding: 0 12px; }
  .builder { grid-template-columns: 1fr; }
  #gen-rail { max-height: 260px; }
  #stagecol { border-left: none; border-top: 1px solid var(--line); }
  .shop-grid { grid-template-columns: 1fr; }
  .fgrid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  #cart, #scrim, #toast { transition: none; }
  .spin { animation-duration: 1.6s; }
}

/* orientation toggle: two buttons that show the shape they select */
.seg { display: flex; gap: 6px; }
.seg-btn {
  flex: 1 1 0; display: flex; align-items: center; justify-content: center;
  gap: 8px; padding: 9px 10px; cursor: pointer; border-radius: 2px;
  font: 13px var(--mono); text-transform: capitalize;
  color: var(--dim); background: var(--panel2); border: 1px solid var(--line);
}
.seg-btn:hover { color: var(--ink); border-color: var(--dim); }
.seg-btn[aria-pressed="true"] {
  color: var(--ink); border-color: var(--line-hard);
  box-shadow: inset 0 0 0 1px var(--line-hard);
}
.seg-btn .turn {
  display: block; flex: none; border: 1.5px solid currentColor;
}
.seg-btn .turn.portrait  { width: 11px; height: 15px; }
.seg-btn .turn.landscape { width: 15px; height: 11px; }