/* Los Elijo: acid lime brutalist. Tokens first; components use tokens only.
   Light (day) is the bare :root; dark (night) follows the OS unless the visitor picks a mode. */
:root {
  --lime: #c7ff2e;
  --on-lime: #0b0b0b;
  --bg: #f2f4ea;
  --card: #ffffff;
  --fg: #0b0b0b;
  --muted: #4b5338;
  --line: #0b0b0b;
  --shadow: #0b0b0b;
  --band: #0b0b0b;
  --on-band: #c7ff2e;
  --hatch: rgba(11, 11, 11, 0.16);
  --soft: #e3e8d3;
  --focus: #0b0b0b;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b0c08; --card: #14160e; --fg: #eef2e3; --muted: #a6ae8e; --line: #e4ead3;
    --shadow: #c7ff2e; --band: #c7ff2e; --on-band: #0b0b0b; --hatch: rgba(199, 255, 46, 0.18);
    --soft: #1d2014; --focus: #c7ff2e; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0b0c08; --card: #14160e; --fg: #eef2e3; --muted: #a6ae8e; --line: #e4ead3;
  --shadow: #c7ff2e; --band: #c7ff2e; --on-band: #0b0b0b; --hatch: rgba(199, 255, 46, 0.18);
  --soft: #1d2014; --focus: #c7ff2e; color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 400 16px/1.55 "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.wrap { width: min(1240px, 100% - 32px); margin-inline: auto; }
.display { font-family: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif; font-weight: 900; text-transform: uppercase; line-height: 0.88; letter-spacing: 0.005em; }
.mono { font-family: "IBM Plex Mono", Menlo, monospace; }
.label {
  display: inline-block; font: 600 12px/1 "IBM Plex Mono", Menlo, monospace; letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--band); color: var(--on-band); padding: 6px 9px;
}
.chip {
  display: inline-block; font: 600 11px/1 "IBM Plex Mono", Menlo, monospace; letter-spacing: 0.1em; text-transform: uppercase;
  border: 2px solid var(--line); padding: 5px 7px;
}
.chip.on { background: var(--lime); color: var(--on-lime); border-color: var(--lime); }
.box { background: var(--card); border: 3px solid var(--line); box-shadow: 6px 6px 0 var(--shadow); }
h2.section-title { font-size: clamp(44px, 7vw, 96px); margin: 14px 0 16px; text-wrap: balance; }
.lede { font-size: clamp(17px, 1.6vw, 20px); max-width: 64ch; color: var(--fg); margin: 0; }
section { padding: clamp(56px, 8vw, 104px) 0; border-bottom: 3px solid var(--line); }

/* ── top bar ── */
.top {
  position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 3px solid var(--line);
}
.top .wrap { display: flex; align-items: center; gap: 18px; height: 60px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.brand-mark { width: 30px; height: 30px; }
.brand-name { font: 900 24px/1 "Big Shoulders Display", Impact, sans-serif; text-transform: uppercase; letter-spacing: 0.02em; }
.nav { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
.nav::-webkit-scrollbar { display: none; }
.nav a {
  font: 600 12px/1 "IBM Plex Mono", Menlo, monospace; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
  padding: 9px 10px; white-space: nowrap; border: 2px solid transparent;
}
.nav a:hover { border-color: var(--line); }
.nav a.xid { background: var(--lime); color: var(--on-lime); }
.mode {
  flex: none; display: flex; border: 3px solid var(--line); background: var(--card); padding: 0; cursor: pointer;
  font: 600 11px/1 "IBM Plex Mono", Menlo, monospace; letter-spacing: 0.12em; color: var(--fg);
}
.mode span { padding: 7px 9px; }
.mode .on { background: var(--fg); color: var(--bg); }

/* ── hero ── */
.hero { padding: clamp(28px, 4vw, 48px) 0 0; border-bottom: 3px solid var(--line); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: end; }
.kicker { font: 600 13px/1.3 "IBM Plex Mono", Menlo, monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.hero h1 { font-size: clamp(88px, 15vw, 212px); margin: 10px 0 0; }
.hero h1 .row2 { display: block; }
.hero .sub { font-size: clamp(18px, 1.8vw, 23px); line-height: 1.38; max-width: 34ch; margin: 18px 0 22px; font-weight: 500; }
.ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: clamp(24px, 4vw, 44px); }
.btn {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none; cursor: pointer;
  font: 700 14px/1 "IBM Plex Mono", Menlo, monospace; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 15px 18px; border: 3px solid var(--line); background: var(--card); color: var(--fg); box-shadow: 5px 5px 0 var(--shadow);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.btn:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--shadow); }
.btn:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--shadow); }
.btn.primary { background: var(--lime); color: var(--on-lime); border-color: var(--line); }
.city-frame { position: relative; border: 3px solid var(--line); border-bottom: 0; background: var(--card); }
.city-frame canvas { width: 100%; height: clamp(300px, 38vw, 520px); }
.city-tag { position: absolute; left: 0; top: 0; }
.city-legend { position: absolute; right: 10px; bottom: 10px; font: 600 11px/1.5 "IBM Plex Mono", Menlo, monospace; text-align: right; color: var(--muted); letter-spacing: 0.06em; }

/* ── fact band ── */
.band { background: var(--band); color: var(--on-band); border-bottom: 3px solid var(--line); }
.band .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding: 14px 0; font: 600 13px/1.2 "IBM Plex Mono", Menlo, monospace; letter-spacing: 0.1em; text-transform: uppercase; }
.band b { font-weight: 700; }

/* ── vision ── */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 40px; }
.pillar { padding: 24px 24px 26px; }
.pillar h3 { font: 900 34px/0.95 "Big Shoulders Display", Impact, sans-serif; text-transform: uppercase; margin: 0 0 12px; }
.pillar p { margin: 0; color: var(--fg); }

/* ── districts ── */
.districts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 40px; }
.district { display: flex; flex-direction: column; }
.district-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 18px 18px 0; }
.code { font: 900 46px/0.8 "Big Shoulders Display", Impact, sans-serif; color: var(--fg); -webkit-text-stroke: 0; }
.district h3 { font: 900 30px/0.95 "Big Shoulders Display", Impact, sans-serif; text-transform: uppercase; margin: 14px 18px 4px; }
.district .tag { margin: 0 18px 12px; font-weight: 600; color: var(--muted); font-size: 14px; }
.district ul { margin: 0 18px 14px; padding: 0; list-style: none; display: grid; gap: 7px; font-size: 14.5px; }
.district li { padding-left: 16px; position: relative; }
.district li::before { content: ""; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; background: var(--fg); }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 3px solid var(--line); margin-top: auto; }
.stats div { padding: 10px 12px; border-right: 2px solid var(--line); border-bottom: 2px solid var(--line); }
.stats div:nth-child(2n) { border-right: 0; }
.stats div:nth-last-child(-n+2) { border-bottom: 0; }
.stats dt { font: 600 10.5px/1.2 "IBM Plex Mono", Menlo, monospace; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.stats dd { margin: 3px 0 0; font: 800 22px/1 "Big Shoulders Display", Impact, sans-serif; font-variant-numeric: tabular-nums; }
details.more { border-top: 3px solid var(--line); }
details.more summary {
  list-style: none; cursor: pointer; padding: 11px 18px; font: 600 12px/1 "IBM Plex Mono", Menlo, monospace; letter-spacing: 0.12em; text-transform: uppercase;
  display: flex; justify-content: space-between;
}
details.more summary::-webkit-details-marker { display: none; }
details.more summary::after { content: "+"; font-size: 16px; line-height: 0.7; }
details.more[open] summary::after { content: "−"; }
details.more summary:hover { background: var(--soft); }
details.more .body { padding: 2px 18px 18px; font-size: 14.5px; }
details.more .body p { margin: 0 0 12px; }

/* ── XID ── */
.xid { background: var(--band); color: var(--on-band); }
.xid .label { background: var(--on-band); color: var(--band); }
.xid h2.section-title { color: var(--on-band); }
.xid .lede { color: var(--on-band); }
.xid-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 40px; border: 3px solid var(--on-band); }
.xid-grid article { padding: 22px; border-right: 3px solid var(--on-band); }
.xid-grid article:last-child { border-right: 0; }
.xid-grid h3 { font: 900 28px/0.95 "Big Shoulders Display", Impact, sans-serif; text-transform: uppercase; margin: 0 0 10px; }
.xid-grid p { margin: 0; font-size: 15px; opacity: 0.92; }
.xid-facts { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 26px; font: 600 13px/1.3 "IBM Plex Mono", Menlo, monospace; letter-spacing: 0.08em; text-transform: uppercase; }
.xid-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; }
.xid-mark { width: clamp(96px, 12vw, 150px); height: auto; border: 3px solid var(--on-band); }

/* ── technology ── */
.tech { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 40px; border: 3px solid var(--line); background: var(--card); box-shadow: 6px 6px 0 var(--shadow); }
.tech article { padding: 18px 18px 20px; border-right: 2px solid var(--line); border-bottom: 2px solid var(--line); }
.tech article:nth-child(4n) { border-right: 0; }
.tech article:nth-last-child(-n+4) { border-bottom: 0; }
.tech h3 { font: 900 24px/0.95 "Big Shoulders Display", Impact, sans-serif; text-transform: uppercase; margin: 12px 0 8px; }
.tech p { margin: 0; font-size: 14px; color: var(--fg); }

/* ── sustainability ── */
.big-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 40px; border: 3px solid var(--line); }
.big-stats div { padding: 18px 20px 20px; border-right: 3px solid var(--line); }
.big-stats div:last-child { border-right: 0; }
.big-stats b { display: block; font: 900 clamp(48px, 6vw, 84px)/0.85 "Big Shoulders Display", Impact, sans-serif; font-variant-numeric: tabular-nums; }
.big-stats span { font: 600 12px/1.3 "IBM Plex Mono", Menlo, monospace; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.big-stats div:first-child { background: var(--lime); color: var(--on-lime); }
.big-stats div:first-child span { color: var(--on-lime); }
.cycle-title { font: 900 30px/1 "Big Shoulders Display", Impact, sans-serif; text-transform: uppercase; margin: 46px 0 16px; }
.cycle { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; list-style: none; padding: 0; margin: 0; counter-reset: step; }
.cycle li { position: relative; border: 3px solid var(--line); margin-right: 26px; padding: 12px 12px 14px; background: var(--card); counter-increment: step; }
.cycle li:last-child { margin-right: 0; background: var(--lime); color: var(--on-lime); }
.cycle li:not(:last-child)::after { content: "→"; position: absolute; right: -24px; top: 50%; transform: translateY(-50%); font: 700 20px/1 "IBM Plex Mono", Menlo, monospace; color: var(--fg); }
.cycle li::before { content: counter(step, decimal-leading-zero); display: block; font: 600 11px/1 "IBM Plex Mono", Menlo, monospace; letter-spacing: 0.1em; opacity: 0.7; margin-bottom: 8px; }
.cycle b { display: block; font: 900 21px/0.95 "Big Shoulders Display", Impact, sans-serif; text-transform: uppercase; }
.cycle span { font-size: 13px; }

/* ── investment ── */
.alloc { margin-top: 40px; }
.alloc-bar { display: flex; height: 92px; border: 3px solid var(--line); box-shadow: 6px 6px 0 var(--shadow); }
.alloc-bar div { display: flex; flex-direction: column; justify-content: space-between; padding: 10px 12px; border-right: 3px solid var(--line); min-width: 0; }
.alloc-bar div:last-child { border-right: 0; }
.alloc-bar b { font: 900 34px/0.85 "Big Shoulders Display", Impact, sans-serif; }
.alloc-bar span { font: 600 11px/1 "IBM Plex Mono", Menlo, monospace; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alloc-bar .s0 { background: var(--fg); color: var(--bg); }
.alloc-bar .s1 { background: var(--lime); color: var(--on-lime); }
.alloc-bar .s2 { background: repeating-linear-gradient(135deg, var(--hatch) 0 2px, transparent 2px 9px), var(--card); }
.alloc-bar .s3 { background: var(--card); }
.alloc-scale { display: flex; justify-content: space-between; margin-top: 12px; font: 600 11px/1 "IBM Plex Mono", Menlo, monospace; color: var(--muted); letter-spacing: 0.08em; }
.verticals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin-top: 34px; }
.vertical { padding: 18px 18px 20px; }
.vertical .amt { font: 900 54px/0.85 "Big Shoulders Display", Impact, sans-serif; }
.vertical h3 { font: 900 24px/1 "Big Shoulders Display", Impact, sans-serif; text-transform: uppercase; margin: 8px 0 10px; }
.vertical p { margin: 0; font-size: 14.5px; }
.inquiry { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 0; margin-top: 46px; }
.inquiry-copy { background: var(--band); color: var(--on-band); padding: 26px; }
.inquiry-copy h3 { font: 900 40px/0.92 "Big Shoulders Display", Impact, sans-serif; text-transform: uppercase; margin: 0 0 12px; }
.inquiry-copy p { margin: 0 0 12px; font-size: 15px; }
form.box { box-shadow: 6px 6px 0 var(--shadow); padding: 22px; display: grid; gap: 14px; border-left: 0; }
form label { display: grid; gap: 6px; font: 600 11.5px/1 "IBM Plex Mono", Menlo, monospace; letter-spacing: 0.12em; text-transform: uppercase; }
form input, form select, form textarea {
  font: 400 16px/1.4 "IBM Plex Sans", Arial, sans-serif; color: var(--fg); background: var(--bg);
  border: 3px solid var(--line); padding: 11px 12px; border-radius: 0; width: 100%;
}
form textarea { min-height: 96px; resize: vertical; }
form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-note { font-size: 13px; color: var(--muted); margin: 0; }
.form-status { font: 600 13px/1.4 "IBM Plex Mono", Menlo, monospace; margin: 0; }
.disclaimer { margin-top: 26px; font-size: 13px; color: var(--muted); max-width: 90ch; }

/* ── life ── */
.life { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 40px; }
.life article { padding: 22px; }
.life h3 { font: 900 30px/0.95 "Big Shoulders Display", Impact, sans-serif; text-transform: uppercase; margin: 0 0 10px; }
.life p { margin: 0; font-size: 15px; }

/* ── roadmap ── */
.phases { margin-top: 40px; display: grid; gap: 22px; }
.phase { display: grid; grid-template-columns: 200px minmax(0, 1fr) 300px; }
.phase-when { padding: 20px; border-right: 3px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.phase-when b { font: 900 38px/0.88 "Big Shoulders Display", Impact, sans-serif; }
.phase-body { padding: 20px 22px; border-right: 3px solid var(--line); }
.phase-body h3 { font: 900 34px/0.95 "Big Shoulders Display", Impact, sans-serif; text-transform: uppercase; margin: 0 0 10px; }
.phase-body p { margin: 0; font-size: 15px; }
.phase-body .highlight { margin-top: 14px; display: inline-block; background: var(--lime); color: var(--on-lime); font: 700 12.5px/1.3 "IBM Plex Mono", Menlo, monospace; letter-spacing: 0.06em; text-transform: uppercase; padding: 7px 10px; border: 2px solid var(--line); }
.phase-ms { padding: 18px 20px; font-size: 14px; }
.phase-ms ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.phase-ms li { padding-left: 16px; position: relative; }
.phase-ms li::before { content: ""; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; border: 2px solid var(--fg); }
.phase-amt { display: grid; gap: 6px; }
.phase-amt span { font: 600 11px/1 "IBM Plex Mono", Menlo, monospace; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.phase-amt strong { font: 900 30px/0.9 "Big Shoulders Display", Impact, sans-serif; }
.phase-amt i { display: block; height: 10px; background: var(--fg); border: 2px solid var(--line); }
.phase.active .phase-when { background: var(--lime); color: var(--on-lime); }
.phase.active .phase-amt span { color: var(--on-lime); }
.phase.active .phase-amt i { background: var(--on-lime); border-color: var(--on-lime); }

/* ── footer ── */
footer { padding: 54px 0 30px; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 0.6fr)); gap: 28px; }
.foot-big { font-size: clamp(64px, 9vw, 128px); margin: 0 0 10px; }
.foot-grid h4 { font: 600 12px/1 "IBM Plex Mono", Menlo, monospace; letter-spacing: 0.14em; text-transform: uppercase; margin: 6px 0 12px; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot-grid a { text-decoration: none; border-bottom: 2px solid transparent; }
.foot-grid a:hover { border-bottom-color: var(--fg); }
.foot-grid a.powered { border-bottom: 3px solid var(--line); }
.powered { display: inline-flex; align-items: center; gap: 12px; border: 3px solid var(--line); padding: 8px 12px 8px 8px; margin-top: 8px; text-decoration: none; background: var(--card); }
.powered svg { width: 34px; height: 34px; }
.powered span { font: 600 12px/1.3 "IBM Plex Mono", Menlo, monospace; letter-spacing: 0.08em; text-transform: uppercase; }
.legal { margin-top: 40px; padding-top: 16px; border-top: 3px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font: 500 12px/1.5 "IBM Plex Mono", Menlo, monospace; color: var(--muted); }

/* ── responsive ── */
@media (max-width: 1080px) {
  .districts, .life { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tech { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tech article:nth-child(4n) { border-right: 2px solid var(--line); }
  .tech article:nth-child(2n) { border-right: 0; }
  .tech article:nth-last-child(-n+4) { border-bottom: 2px solid var(--line); }
  .tech article:nth-last-child(-n+2) { border-bottom: 0; }
  .xid-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xid-grid article:nth-child(2) { border-right: 0; }
  .xid-grid article:nth-child(-n+2) { border-bottom: 3px solid var(--on-band); }
  .verticals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cycle { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 18px; }
  .cycle li:nth-child(4)::after { display: none; }
  .phase { grid-template-columns: 170px minmax(0, 1fr); }
  .phase-ms { grid-column: 1 / -1; border-top: 3px solid var(--line); }
  .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot-grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .hero-grid { grid-template-columns: 1fr; }
  .grid-2, .districts, .life, .verticals, .xid-grid, .inquiry { grid-template-columns: 1fr; }
  .xid-grid article { border-right: 0; border-bottom: 3px solid var(--on-band); }
  .xid-grid article:last-child { border-bottom: 0; }
  .tech { grid-template-columns: 1fr; }
  .tech article, .tech article:nth-child(2n), .tech article:nth-child(4n) { border-right: 0; border-bottom: 2px solid var(--line); }
  .tech article:last-child { border-bottom: 0; }
  .big-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .big-stats div:nth-child(2) { border-right: 0; }
  .big-stats div:nth-child(-n+2) { border-bottom: 3px solid var(--line); }
  .cycle { grid-template-columns: 1fr; }
  .cycle li { margin-right: 0; margin-bottom: 22px; }
  .cycle li:not(:last-child)::after { content: "↓"; right: auto; left: 18px; top: auto; bottom: -24px; transform: none; display: block; }
  .alloc-bar { height: 120px; }
  .alloc-bar b { font-size: 26px; }
  .alloc-bar span { white-space: normal; font-size: 10px; }
  form.box { border-left: 3px solid var(--line); }
  form .two { grid-template-columns: 1fr; }
  .phase { grid-template-columns: 1fr; }
  .phase-when { border-right: 0; border-bottom: 3px solid var(--line); flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
  .phase-body { border-right: 0; }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand-name { display: none; }
  .top .wrap { gap: 10px; }
}

/* ── district explorer ── */
.explorer { margin-top: 40px; border: 3px solid var(--line); background: var(--card); box-shadow: 8px 8px 0 var(--shadow); }
.ex-tabs { display: flex; overflow-x: auto; border-bottom: 3px solid var(--line); scrollbar-width: thin; }
.ex-tabs button:last-child { border-right: 0; }
.ex-tabs button {
  flex: 1 0 auto; font: 600 11.5px/1 "IBM Plex Mono", Menlo, monospace; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap;
  padding: 13px 10px; border: 0; border-right: 2px solid var(--line); background: var(--card); color: var(--fg); cursor: pointer;
}
.ex-tabs button b { font-weight: 700; margin-right: 4px; }
.ex-tabs button:hover { background: var(--soft); }
.ex-tabs button.on { background: var(--lime); color: var(--on-lime); }
.ex-main { display: grid; grid-template-columns: minmax(0, 1fr) 360px; }
.ex-stage { position: relative; border-right: 3px solid var(--line); min-width: 0; }
.ex-stage canvas { width: 100%; height: clamp(420px, 52vw, 660px); outline-offset: -6px; }
.ex-hint { position: absolute; right: 12px; top: 12px; font: 600 11px/1 "IBM Plex Mono", Menlo, monospace; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); background: var(--card); padding: 6px 8px; border: 2px solid var(--line); }
.ex-ctrl { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 6px; }
.ex-ctrl button {
  min-width: 40px; height: 40px; padding: 0 10px; border: 3px solid var(--line); background: var(--card); color: var(--fg); cursor: pointer;
  font: 700 15px/1 "IBM Plex Mono", Menlo, monospace; box-shadow: 3px 3px 0 var(--shadow);
}
.ex-ctrl button[data-act="reset"] { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.ex-ctrl button:active { transform: translate(3px, 3px); box-shadow: none; }
.ex-panel { padding: 22px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ex-panel .code { font: 900 64px/0.8 "Big Shoulders Display", Impact, sans-serif; }
.ex-panel h3 { font: 900 34px/0.92 "Big Shoulders Display", Impact, sans-serif; text-transform: uppercase; margin: 4px 0 0; }
.ex-panel p { margin: 0; font-size: 15px; }
.ex-panel .tagline { font-weight: 600; color: var(--muted); }
.ex-panel ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; font-size: 14px; }
.ex-panel li { padding-left: 16px; position: relative; }
.ex-panel li::before { content: ""; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; background: var(--fg); }
.ex-panel .stats { border: 3px solid var(--line); margin-top: 4px; }
.ex-panel a.more { margin-top: auto; font: 700 12px/1 "IBM Plex Mono", Menlo, monospace; letter-spacing: 0.1em; text-transform: uppercase; }
@media (max-width: 900px) {
  .ex-main { grid-template-columns: 1fr; }
  .ex-stage { border-right: 0; border-bottom: 3px solid var(--line); }
  .ex-stage canvas { height: clamp(340px, 80vw, 520px); }
}

button.chip.view3d { background: var(--card); color: var(--fg); cursor: pointer; }
button.chip.view3d:hover { background: var(--lime); color: var(--on-lime); border-color: var(--line); }