/* ============================================================================
   MARCO v2 — styles
   Editorial typography for the page, physical-metal Console3D at its center.
   ============================================================================ */

/* ----- Base page ----- */
.v2-shell {
  background: var(--paper);
  color: var(--ink);
  height: 100vh;
  font-family: var(--font-sans);
  display: grid;
  grid-template-columns: 260px 1fr;
  max-width: 1600px;
  margin: 0 auto;
  overflow: hidden;
}
.v2-shell .mono { font-family: var(--font-mono); }

.v2-main {
  padding: 0 56px 96px;
  min-width: 0;
  border-left: 1px solid var(--rule-dim);
  overflow-y: auto;
  height: 100vh;
}
.v2-page { padding-top: 16px; }

/* ============================================================================
   SIDEBAR — persistent section nav
   ============================================================================ */
.v2-side {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 28px 22px;
  display: flex; flex-direction: column; gap: 20px;
  overflow-y: auto;
  background: var(--paper);
}

.v2-side-brand {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 16px; border-bottom: 1px solid var(--rule);
}
.v2-side-logo {
  width: 36px; height: 36px;
  background: var(--ink); color: var(--paper);
  font-family: var(--font-serif-headline); font-size: 24px; font-weight: 500;
  display: flex; align-items: center; justify-content: center;
  font-variation-settings: "SOFT" 40, "WONK" 0;
  line-height: 1;
}
.v2-side-brand-name {
  font-family: var(--font-serif-headline);
  font-size: 22px; font-weight: 400; letter-spacing: -0.01em; line-height: 1;
  font-variation-settings: "SOFT" 30;
}
.v2-side-brand-vol { font-size: 9px; letter-spacing: 0.2em; color: var(--fg-muted); margin-top: 4px; }

.v2-side-cmd {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: transparent; border: 1px solid var(--rule);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink); cursor: pointer;
}
.v2-side-cmd:hover { background: var(--ink); color: var(--paper); }
.v2-side-cmd .v2-kbd { color: inherit; }

.v2-side-heading {
  font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-muted);
  padding-bottom: 6px; margin-bottom: 2px;
  border-bottom: 1px solid var(--rule-dim);
}

.v2-side-nav { display: flex; flex-direction: column; gap: 0; }
.v2-side-link {
  display: grid; grid-template-columns: 36px 1fr auto; gap: 10px;
  padding: 10px 6px;
  align-items: baseline;
  border-bottom: 1px solid var(--rule-dim);
  color: var(--ink); text-decoration: none;
  transition: background 120ms ease;
}
.v2-side-link:hover { background: rgba(154,83,38,0.06); }
.v2-side-link.is-active { background: var(--ink); color: var(--paper); }
.v2-side-link.is-active .v2-side-num,
.v2-side-link.is-active .v2-side-link-desk { color: rgba(247,242,232,0.7); }

.v2-side-num { font-size: 10px; color: var(--fg-muted); letter-spacing: 0.1em; }
.v2-side-link-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.v2-side-link-label {
  font-family: var(--font-sans);
  font-weight: 500; font-size: 15px; line-height: 1.2;
  letter-spacing: -0.005em;
}
.v2-side-link-desk { display: none; }
.v2-side-link-blurb { display: none; }
.v2-side-ext { font-family: var(--font-mono); font-size: 11px; color: var(--fg-muted); }

.v2-side-footer {
  margin-top: auto;
  padding-top: 14px; border-top: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 10px;
}
.v2-side-footer-label { font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-muted); }
.v2-side-weather { display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.v2-side-weather > div { display: flex; justify-content: space-between; }
.v2-side-weather .mono { font-size: 9px; letter-spacing: 0.14em; color: var(--fg-muted); text-transform: uppercase; }
.v2-side-weather b { font-family: var(--font-sans); font-weight: 600; font-size: 13px; color: var(--ink); }

/* ============================================================================
   STICKY SUB-NAV within main — scrolls with page but sticks to top
   ============================================================================ */
.v2-subnav {
  position: sticky; top: 0;
  display: flex; gap: 0; align-items: stretch;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  padding: 10px 0;
  margin-bottom: 24px;
  z-index: 50;
}
.v2-subnav-item {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 6px 14px;
  color: var(--fg-muted); text-decoration: none;
  border-right: 1px solid var(--rule-dim);
  cursor: pointer;
  background: transparent; border-top: 0; border-bottom: 0; border-left: 0;
  font-weight: 400;
}
.v2-subnav-item:first-child { padding-left: 0; }
.v2-subnav-item:last-child { border-right: 0; }
.v2-subnav-item.is-active { color: var(--ink); }
.v2-subnav-item:hover { color: var(--ink); }
.v2-subnav-flex { flex: 1; border-right: 0; }
.v2-subnav-time { font-family: var(--font-mono); font-size: 10px; color: var(--fg-muted); letter-spacing: 0.14em; text-transform: uppercase; padding: 6px 0; }

/* ============================================================================
   PLACEHOLDER SECTION
   ============================================================================ */
.v2-placeholder { padding-top: 60px; max-width: 700px; }
.v2-placeholder-back {
  background: transparent; border: 0; padding: 0; cursor: pointer;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-muted); margin-bottom: 48px;
}
.v2-placeholder-back:hover { color: var(--ink); }
.v2-placeholder-kicker {
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--hi); margin-bottom: 14px;
}
.v2-placeholder-head {
  font-family: var(--font-serif-headline);
  font-weight: 400; font-size: clamp(48px, 6vw, 88px);
  letter-spacing: -0.02em; line-height: 0.95;
  font-variation-settings: "SOFT" 40, "WONK" 0, "opsz" 144;
  margin: 0 0 28px;
}
.v2-placeholder-body {
  font-family: var(--font-sans); font-size: 16px; line-height: 1.55;
  max-width: 55ch; margin: 0 0 16px;
}
.v2-placeholder-body code {
  font-size: 14px; padding: 2px 6px; background: rgba(154,83,38,0.08);
  border-radius: 2px;
}

/* ============================================================================
   MASTHEAD
   ============================================================================ */
.v2-masthead { border-bottom: 2px solid var(--rule); padding-bottom: 18px; margin-bottom: 28px; }

.v2-mast-topstrip {
  display: flex; gap: 18px; align-items: center;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-muted);
  padding-bottom: 10px; border-bottom: 1px solid var(--rule-dim);
}
.v2-mast-flex { flex: 1; }

.v2-mast-name {
  padding: 18px 0 14px;
  display: flex; align-items: flex-end; gap: 24px;
  border-bottom: 1px solid var(--rule-dim);
}
.v2-mast-wordmark { flex: 1; min-width: 0; }
.v2-mast-wordmark {
  font-family: var(--font-serif-headline);
  font-weight: 400;
  letter-spacing: -0.03em;
  font-size: clamp(48px, 6vw, 86px);
  line-height: 0.9;
  font-variation-settings: "SOFT" 30, "WONK" 0, "opsz" 144;
}
.v2-mast-motto {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--fg-muted);
  max-width: 38ch;
  margin-left: auto;
  text-align: right;
  padding-bottom: 8px;
  flex: 0 0 auto;
}

.v2-mast-dateline {
  display: flex; gap: 16px; align-items: center;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 10px 0; border-bottom: 1px solid var(--rule);
  color: var(--fg-muted);
}
.v2-mast-cmd {
  background: transparent; border: 1px solid var(--rule);
  padding: 4px 10px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; color: var(--ink);
  letter-spacing: 0.1em;
}
.v2-mast-cmd:hover { background: var(--ink); color: var(--paper); }
.v2-kbd {
  display: inline-block; padding: 1px 6px;
  border: 1px solid currentColor; border-radius: 2px;
  font-size: 10px; line-height: 1;
}

.v2-mast-weather {
  list-style: none; padding: 8px 0 0; margin: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
}
.v2-mast-weather li {
  padding: 4px 12px;
  border-right: 1px solid var(--rule-dim);
  display: flex; flex-direction: column; gap: 2px;
}
.v2-mast-weather li:last-child { border-right: 0; }
.v2-mast-weather li:first-child { padding-left: 0; }
.v2-weather-key { font-size: 9px; letter-spacing: 0.16em; color: var(--fg-muted); }
.v2-weather-val { font-family: var(--font-sans); font-weight: 500; font-size: 14px; color: var(--ink); }

/* ============================================================================
   CONSOLE — Teenage Engineering pocket operator styled hardware.
   Small beige/grey plastic device placed on the home page as if on a desk.
   Slight tilt, cast shadow. Everything is flat CSS (no 3D transforms on
   the body — only the stage is tilted).
   ============================================================================ */

/* ============================================================================
   CONSOLE + DESK SCENE
   Axonometric (2D-skewed) view: top-down-ish, 3/4 perspective.
   The desk is a solid 4-legged table. The device sits on top of it.
   ============================================================================ */

.po-stage {
  position: relative;
  margin: 40px auto 32px;
  width: 820px;
  max-width: 100%;
  perspective: 2400px;
  perspective-origin: 50% 0%;
  padding-bottom: 24px;
}

/* Ground shadow — strong, visible, sits directly on the page */
.po-stage::after {
  content: '';
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 20px;
  height: 70px;
  background:
    radial-gradient(ellipse at 50% 0%,
      rgba(20, 12, 4, 0.55) 0%,
      rgba(20, 12, 4, 0.30) 30%,
      rgba(20, 12, 4, 0.10) 60%,
      transparent 85%);
  filter: blur(22px);
  pointer-events: none;
  z-index: 0;
}

/* Tight contact shadow — just under the device edge, crisper */
.po-stage::before {
  content: '';
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 72px;
  height: 14px;
  background:
    radial-gradient(ellipse at 50% 0%,
      rgba(20, 12, 4, 0.45) 0%,
      rgba(20, 12, 4, 0.18) 60%,
      transparent 100%);
  filter: blur(6px);
  pointer-events: none;
  z-index: 1;
}

/* No wood desk — just clean background */
.po-desk-scene,
.po-desk-top, .po-desk-apron, .po-desk-leg, .po-desk-floor-shadow,
.po-desk-top-grain { display: none; }

.po-device-wrap {
  position: relative;
  z-index: 2;
  /* Flat: no tilt — clean rectangular presentation on the page */
}

/* Old inline shadows disabled — we now use .po-stage::before/::after */
.po-shadow { display: none; }

.po-device {
  position: relative;
  background:
    linear-gradient(180deg, #eae5db 0%, #ddd7c9 38%, #cac3b2 100%);
  border-radius: 10px;
  overflow: hidden;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.9),
    inset 0 -3px 0 rgba(0,0,0,0.2),
    inset 2px 0 0 rgba(0,0,0,0.12),
    inset -2px 0 0 rgba(0,0,0,0.12),
    0 1px 0 #b8b0a0,
    0 2px 0 #ada596,
    0 3px 0 #a29a8c,
    0 4px 0 #988f82,
    0 5px 0 #8e8678,
    0 6px 0 #857d6f,
    0 7px 0 #7b7366,
    0 8px 0 #716a5d,
    0 12px 22px rgba(20,12,4,0.45),
    0 30px 60px rgba(20,12,4,0.25);
}
/* Subtle plastic grain */
.po-device::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse 120% 60% at 50% -20%, rgba(255,255,255,0.25), transparent 60%);
  pointer-events: none;
}

/* Top strip — dark panel with brand + LCD. Recessed. */
.po-top {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: stretch;
  gap: 18px;
  padding: 14px 18px 14px;
  background:
    linear-gradient(180deg, #2a2620 0%, #322d26 100%);
  border-bottom: 2px solid rgba(0,0,0,0.35);
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,0.4),
    inset 0 -1px 0 rgba(255,255,255,0.06);
}

.po-brand {
  display: flex; align-items: center; gap: 10px;
}
.po-brand-mark {
  width: 30px; height: 30px;
  background: linear-gradient(180deg, #f4efe6 0%, #d8d1c0 100%);
  color: #1a1612;
  font-family: var(--font-sans); font-weight: 800; font-size: 17px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 4px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    inset 0 -1px 0 rgba(0,0,0,0.15),
    0 1px 2px rgba(0,0,0,0.4);
}
.po-brand-name {
  font-family: var(--font-mono);
  font-size: 14px; letter-spacing: 0.22em;
  color: #f0ebe0; font-weight: 700;
}
.po-brand-model {
  font-family: var(--font-mono);
  font-size: 9px; letter-spacing: 0.22em;
  color: rgba(240,235,224,0.45);
  margin-top: 2px;
}

/* LCD — the big display. Now occupies its grid column fully; mascot moved
   out to the porthole, so the inner grid is single-column. */
.po-lcd {
  width: auto;              /* fill the .po-top grid column (was 380px hardcoded) */
  min-width: 0;
  padding: 6px;
  background: linear-gradient(180deg, #0a0806 0%, #18130d 55%, #24201a 100%);
  border-radius: 4px;
  box-shadow:
    inset 0 3px 5px rgba(0,0,0,0.9),
    inset 0 -1px 0 rgba(255,255,255,0.08),
    inset 1px 0 2px rgba(0,0,0,0.6),
    inset -1px 0 2px rgba(0,0,0,0.6),
    0 1px 0 rgba(255,255,255,0.15);
}
.po-lcd-inner {
  position: relative;
  background: #0a0f08;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.55) 0 1px, transparent 1px 2px),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.15) 0 1px, transparent 1px 3px);
  border-radius: 2px;
  padding: 12px 14px 14px;   /* comfortable bottom padding */
  font-family: var(--font-mono);
  min-height: 92px;
  display: flex !important;
  flex-direction: column;
  gap: 4px;
  box-shadow:
    inset 0 2px 3px rgba(0,0,0,0.85),
    inset 0 0 12px rgba(0,0,0,0.6);
  overflow: hidden;         /* clip the scanline gradient, not content */
  color: #7fb83a;
  height: 100%;              /* fill the LCD shell so ticker aligns at true bottom */
}
.po-lcd-inner::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 110% 10% at 50% 0%, rgba(127,184,58,0.08), transparent 70%);
  pointer-events: none;
}

/* Mascot column — on the left, separated by dashed line */
.po-lcd-mascot-col {
  display: flex; flex-direction: column; align-items: center;
  justify-content: space-between;
  padding-right: 8px;
  border-right: 1px dashed rgba(127,184,58,0.35);
}
.po-mascot-grid {
  display: grid;
  grid-template-columns: repeat(16, 6px);
  grid-template-rows: repeat(16, 6px);
  gap: 0;
  transition: transform 260ms steps(2);
  image-rendering: pixelated;
}
.po-px {
  width: 6px; height: 6px;
  display: block;
  background: transparent;
  image-rendering: pixelated;
}
/* CGA pal1-high: K=outline, C=cyan, M=magenta, W=white */
.po-px.px-K { background: #000000; }
.po-px.px-C { background: #55FFFF; }
.po-px.px-M { background: #FF55FF; }
.po-px.px-W { background: #FFFFFF; }
/* legacy aliases (kept for any leftover references) */
.po-px.on      { background: #55FFFF; }
.po-px.eye     { background: #FFFFFF; }
.po-px.mouth   { background: #FF55FF; }
.po-px.dim     { background: #000000; }
.po-px.accent  { background: #FFFFFF; }
.po-px.drop    { background: #55FFFF; }

.po-mascot-label {
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #5a8a2a;
  margin-top: 3px;
}
.po-mascot[data-pose='alert'] .po-mascot-label { color: #d4ff60; }

/* Right column wrapper */
.po-lcd-data-col {
  display: flex; flex-direction: column;
  gap: 4px;
  min-width: 0;
}
/* Header: label · tier · time — single row */
.po-lcd-hdr {
  display: flex !important;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(127,184,58,0.28);
}
.po-lcd-mode   { color: #a8dc4f; letter-spacing: 0.2em; font-size: 12px; }
.po-lcd-tier   { color: #5a8a2a; }
.po-lcd-time   { margin-left: auto; color: #7fb83a; font-variant-numeric: tabular-nums; letter-spacing: 0.06em; }

/* Three meter rows — label · blocks · value */
.po-lcd-meters {
  display: grid !important;
  grid-template-columns: 38px 1fr 28px;
  column-gap: 8px;
  row-gap: 3px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.po-lcd-mlbl { color: #5a8a2a; }
.po-lcd-mval {
  color: #a8dc4f;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.po-lcd-meter {
  display: flex !important;
  gap: 2px;
  height: 9px;
}
.po-lcd-block {
  flex: 1;
  background: rgba(127,184,58,0.1);
  border-radius: 0;
  transition: background 160ms ease;
}
.po-lcd-meter--amber   .po-lcd-block.on { background: #ff9820; box-shadow: 0 0 3px rgba(255,152,32,0.8); }
.po-lcd-meter--magenta .po-lcd-block.on { background: #ff4db0; box-shadow: 0 0 3px rgba(255,77,176,0.8); }
.po-lcd-meter--cyan    .po-lcd-block.on { background: #5ce0ff; box-shadow: 0 0 3px rgba(92,224,255,0.8); }

/* ---------- Extra LCD information rows ---------- */
/* Top strip: flags, signal bars, battery, version */
.po-lcd-strip {
  display: flex !important; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.14em;
  padding-bottom: 3px;
  border-bottom: 1px dashed rgba(127,184,58,0.22);
  color: #5a8a2a;
}
.po-lcd-flag {
  padding: 1px 4px;
  border: 1px solid currentColor;
  color: #3a5a1a;
  border-radius: 1px;
  line-height: 1;
}
.po-lcd-flag.on   { color: #7fb83a; background: rgba(127,184,58,0.12); }
.po-lcd-flag.warn { color: #ff4db0; background: rgba(255,77,176,0.12); border-color: #ff4db0; }
.po-lcd-sep { color: #3a5a1a; }
.po-lcd-bars { display: inline-flex !important; gap: 1px; align-items: flex-end; height: 9px; }
.po-lcd-bars span { width: 2px; background: #3a5a1a; }
.po-lcd-bars span:nth-child(1) { height: 2px; } .po-lcd-bars span:nth-child(2) { height: 4px; }
.po-lcd-bars span:nth-child(3) { height: 6px; } .po-lcd-bars span:nth-child(4) { height: 8px; }
.po-lcd-bars span:nth-child(5) { height: 10px; }
.po-lcd-bars span.on { background: #5ce0ff; box-shadow: 0 0 2px rgba(92,224,255,0.8); }
.po-lcd-batt {
  display: inline-block;
  width: 18px; height: 8px;
  border: 1px solid #7fb83a; border-radius: 1px; position: relative;
}
.po-lcd-batt::after {
  content: ''; position: absolute; right: -3px; top: 2px;
  width: 2px; height: 4px; background: #7fb83a;
}
.po-lcd-batt span {
  display: block; height: 100%; background: #7fb83a;
}
.po-lcd-ver { margin-left: auto; color: #5a8a2a; letter-spacing: 0.1em; }

/* Hdr — add seed + bpm */
.po-lcd-seed { color: #ff9820; font-size: 10px; letter-spacing: 0.12em; font-variant-numeric: tabular-nums; }
.po-lcd-bpm  { color: #ff4db0; font-size: 10px; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }

/* Confidence bar */
.po-lcd-conf {
  display: flex !important; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.12em;
  margin-top: 2px;
}
.po-lcd-conf-lbl { color: #5a8a2a; width: 32px; }
.po-lcd-conf-track {
  flex: 1; height: 6px;
  background: rgba(127,184,58,0.1);
  position: relative;
  border: 1px solid rgba(127,184,58,0.3);
}
.po-lcd-conf-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, #5ce0ff 0%, #ffe880 55%, #ff4db0 100%);
  box-shadow: 0 0 3px rgba(255,200,60,0.5);
}
.po-lcd-conf-val { color: #ffe880; width: 32px; text-align: right; font-variant-numeric: tabular-nums; }

/* Data rows — 3-column key/value grid, packed */
.po-lcd-rows {
  display: flex !important; flex-direction: column; gap: 2px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em;
  padding: 2px 0;
  border-top: 1px dashed rgba(127,184,58,0.22);
  border-bottom: 1px dashed rgba(127,184,58,0.22);
}
.po-lcd-row {
  /* legacy block removed — override lives in the LCD section below */
}
.po-lcd-k { color: #5a8a2a; font-size: 9px; }
.po-lcd-v { color: #a8dc4f; font-variant-numeric: tabular-nums; font-size: 11px; margin-right: 4px; }
.po-lcd-v.amber   { color: #ffe880; text-shadow: 0 0 4px rgba(255,200,60,0.5); }
.po-lcd-v.magenta { color: #ff4db0; text-shadow: 0 0 4px rgba(255,77,176,0.5); }
.po-lcd-v.cyan    { color: #5ce0ff; text-shadow: 0 0 4px rgba(92,224,255,0.5); }
.po-lcd-v.green   { color: #7fb83a; }

/* Signal strip — 3-way BUY/WAIT/SELL */
.po-lcd-sig {
  display: flex !important; align-items: center; gap: 2px;
  height: 11px;
  font-family: var(--font-mono); font-size: 8px; font-weight: 700;
  letter-spacing: 0.08em;
}
.po-lcd-sig-lbl { width: 30px; color: #5a8a2a; font-size: 9px; }
.po-lcd-sig-seg {
  display: inline-flex; align-items: center; justify-content: center;
  height: 100%;
  padding: 0 3px;
  color: #0a0f08;
  min-width: 0; overflow: hidden;
  white-space: nowrap;
}
.po-lcd-sig-seg.buy  { background: #7fb83a; box-shadow: inset 0 0 2px rgba(0,0,0,0.3); }
.po-lcd-sig-seg.wait { background: #ffe880; }
.po-lcd-sig-seg.sell { background: #ff4db0; color: #fff; }

/* Last event + tick counter */
.po-lcd-last {
  display: flex !important; align-items: baseline; gap: 6px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em;
}
.po-lcd-last-lbl { color: #5a8a2a; font-size: 9px; }
.po-lcd-last-val { color: #5ce0ff; text-shadow: 0 0 3px rgba(92,224,255,0.5); flex: 1; }
.po-lcd-last-n   { color: #ff9820; font-variant-numeric: tabular-nums; font-size: 10px; }

/* Scrolling ticker */
.po-lcd-ticker {
  overflow: hidden;
  height: 22px;
  line-height: 22px;
  border-top: 1px dashed rgba(127,184,58,0.22);
  padding: 0;
  margin-top: 2px;
  flex-shrink: 0;
  display: block;
}
.po-lcd-ticker-track {
  display: inline-block;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 22px;      /* match container so text is vertically centered */
  vertical-align: top;
  color: #ffe880;
  animation: po-ticker 28s linear infinite;
}
@keyframes po-ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Main LCD needs to be taller now */
.po-lcd--main .po-lcd-inner { min-height: 160px; gap: 3px; }

/* Foot: waveform + Q counter */
.po-lcd-foot {
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  padding-top: 4px;
  border-top: 1px solid rgba(127,184,58,0.28);
}
.po-lcd-wave {
  display: flex !important;
  align-items: flex-end;
  gap: 1.5px;
  height: 14px; flex: 1;
}
.po-lcd-bar {
  flex: 1;
  background: #7fb83a;
  min-height: 2px;
  border-radius: 0;
  transition: height 180ms ease-out;
}
.po-lcd-q {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700;
  color: #a8dc4f;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

/* Legacy classes — superseded by the LCD section below */
.po-lcd-small, .po-lcd-val { display: none; }
.po-lcd-mode { font-size: 13px; font-weight: 800; letter-spacing: 0.2em; }
.po-lcd-time { font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 700; }
.po-lcd-wave {
  display: flex; align-items: flex-end; gap: 2px;
  height: 20px; padding: 1px 0;
}
.po-lcd-bar {
  flex: 1;
  background: #0a1505;
  min-height: 2px;
  border-radius: 0.5px;
  transition: height 180ms ease-out;
}

/* Body — the lighter, lower section with controls */
.po-body {
  position: relative;
  padding: 22px 24px 28px;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 28px;
  align-items: start;
}

/* Controls column — switches on top row, actions bottom row */
.po-controls {
  display: grid;
  grid-template-rows: auto auto;
  gap: 14px;
}
.po-controls-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 18px;
}

/* A labeled control block (MODE, TONE, ACT) */
.po-switch-block,
.po-action-block {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.po-switch-label {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6f6555;
  padding-left: 2px;
}

/* ---------- Physical toggle switch (detented) ----------
   Track has labels positioned BELOW, thumb slides to position.
   Thumb has knurled grip ridges like a real fader cap. */

.po-switch {
  position: relative;
  display: block;
  background: linear-gradient(180deg, #1d1810 0%, #0e0b06 100%);
  border-radius: 4px;
  padding: 0;
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.7),
    inset 0 -1px 0 rgba(255,255,255,0.05),
    0 1px 0 rgba(255,255,255,0.5);
  border: 1px solid rgba(0,0,0,0.4);
  height: 28px;
  margin-bottom: 16px; /* room for labels beneath */
}
.po-switch--3 { --slots: 3; }
.po-switch--2 { --slots: 2; }

/* Tick marks on the track (detent positions) */
.po-switch::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 3px;
  background-image:
    radial-gradient(circle at 16.66% 50%, rgba(255,255,255,0.18) 0 1.5px, transparent 2px),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.18) 0 1.5px, transparent 2px),
    radial-gradient(circle at 83.33% 50%, rgba(255,255,255,0.18) 0 1.5px, transparent 2px);
  pointer-events: none;
}
.po-switch--2::before {
  background-image:
    radial-gradient(circle at 25% 50%, rgba(255,255,255,0.18) 0 1.5px, transparent 2px),
    radial-gradient(circle at 75% 50%, rgba(255,255,255,0.18) 0 1.5px, transparent 2px);
}

/* The invisible click-regions, stacked as grid */
.po-switch-opt {
  position: absolute;
  top: 0; bottom: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
  z-index: 3;
  display: block;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  color: transparent; /* we render visible labels below the track */
}
.po-switch-opt:focus-visible { outline: 1px dashed #d9ffa8; outline-offset: 2px; }

.po-switch--3 .po-switch-opt:nth-child(1) { left: 0; width: 33.333%; }
.po-switch--3 .po-switch-opt:nth-child(2) { left: 33.333%; width: 33.333%; }
.po-switch--3 .po-switch-opt:nth-child(3) { left: 66.666%; width: 33.334%; }
.po-switch--2 .po-switch-opt:nth-child(1) { left: 0; width: 50%; }
.po-switch--2 .po-switch-opt:nth-child(2) { left: 50%; width: 50%; }

/* Render the visible label text BELOW the track, using the button's content
   via a pseudo-element on the button itself. We need to write the label into
   a data-attr so CSS can project it under the track. */
.po-switch-opt::after {
  content: attr(data-name);
  position: absolute;
  left: 0; right: 0;
  top: calc(100% + 4px);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-align: center;
  color: #6f6555;
  line-height: 1;
  transition: color 160ms;
}
.po-switch-opt[data-active='true']::after {
  color: var(--ink);
}
/* Hide the original span content (we've routed it through data-name) */
.po-switch-opt-name, .po-switch-opt-sub { display: none; }

/* THE THUMB — physical cap with knurled grip */
.po-switch-slider {
  position: absolute;
  top: 2px;
  bottom: 2px;
  border-radius: 3px;
  background:
    /* grip ridges */
    repeating-linear-gradient(90deg,
      rgba(0,0,0,0.22) 0 1px,
      rgba(255,255,255,0.08) 1px 2px,
      rgba(0,0,0,0.0) 2px 3px),
    /* cap face */
    linear-gradient(180deg, #f8f4e8 0%, #e8e2d0 45%, #cfc6b2 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -2px 2px rgba(0,0,0,0.25),
    inset 1px 0 0 rgba(0,0,0,0.18),
    inset -1px 0 0 rgba(0,0,0,0.18),
    0 2px 4px rgba(0,0,0,0.4),
    0 1px 0 rgba(0,0,0,0.3);
  transition: transform 240ms cubic-bezier(0.5, 1.6, 0.6, 1);
  z-index: 2;
  pointer-events: none;
  /* A subtle dimple in the center — simulates indented finger rest */
}
.po-switch-slider::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 5px; height: 5px;
  margin-left: -2.5px; margin-top: -2.5px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 70%);
  box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.2);
}

.po-switch--3 .po-switch-slider {
  width: calc(33.333% - 4px);
  left: 2px;
}
.po-switch--3[data-pos='0'] .po-switch-slider { transform: translateX(0); }
.po-switch--3[data-pos='1'] .po-switch-slider { transform: translateX(calc(100% + 2px)); }
.po-switch--3[data-pos='2'] .po-switch-slider { transform: translateX(calc(200% + 4px)); }

.po-switch--2 .po-switch-slider {
  width: calc(50% - 4px);
  left: 2px;
}
.po-switch--2[data-pos='0'] .po-switch-slider { transform: translateX(0); }
.po-switch--2[data-pos='1'] .po-switch-slider { transform: translateX(calc(100% + 2px)); }

/* Hide inline sub-labels on the switch (too cramped); we label with MODE header */
.po-switch-opt-sub { display: none; }

/* Action grid — 4 push buttons, physical plastic keys */
.po-action-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.po-act {
  cursor: pointer;
  border: 1px solid rgba(0,0,0,0.25);
  border-radius: 4px;
  padding: 10px 6px;
  background: linear-gradient(180deg, #f6f2e7 0%, #eae3d2 60%, #d8d0bc 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    inset 0 -2px 0 rgba(0,0,0,0.18),
    0 2px 0 #b8b0a0,
    0 3px 3px rgba(0,0,0,0.2);
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  transition: transform 80ms, box-shadow 80ms;
}
.po-act:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    inset 0 -1px 0 rgba(0,0,0,0.12),
    0 0 0 #b8b0a0,
    0 1px 2px rgba(0,0,0,0.2);
}
.po-act-name {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #2a2418;
  line-height: 1;
}
.po-act-sub {
  font-size: 8px;
  letter-spacing: 0.1em;
  color: #6f6555;
  text-transform: lowercase;
  line-height: 1;
}
.po-act[data-color='amber'] {
  background: linear-gradient(180deg, #ffd57a 0%, #f5b340 60%, #d08a1c 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    inset 0 -2px 0 rgba(0,0,0,0.25),
    0 2px 0 #9a6412,
    0 3px 3px rgba(0,0,0,0.2);
}
.po-act[data-color='amber'] .po-act-name { color: #2a1908; }
.po-act[data-color='amber'] .po-act-sub { color: #6a4412; }
.po-act[data-color='green'] {
  background: linear-gradient(180deg, #c3e89a 0%, #8fc260 60%, #618e3a 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    inset 0 -2px 0 rgba(0,0,0,0.2),
    0 2px 0 #416219,
    0 3px 3px rgba(0,0,0,0.2);
}
.po-act[data-color='green'] .po-act-name { color: #1f3009; }
.po-act[data-color='green'] .po-act-sub { color: #3d5f18; }
.po-act[data-color='red'] {
  background: linear-gradient(180deg, #f5b0a0 0%, #e07860 60%, #a84830 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    inset 0 -2px 0 rgba(0,0,0,0.22),
    0 2px 0 #742a18,
    0 3px 3px rgba(0,0,0,0.2);
}
.po-act[data-color='red'] .po-act-name { color: #34110a; }
.po-act[data-color='red'] .po-act-sub { color: #731f10; }

/* Encoders row — 4 rotary knobs in a single vertical column on left */
.po-encoders {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 0;
}
.po-enc {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px;
}
.po-enc-knob {
  width: 54px; height: 54px;
  border-radius: 50%;
  /* Multi-layer knob: outer skirt (darker, sits on body) + top cap (lighter) */
  background:
    radial-gradient(circle at 50% 22%, #4a4238 0%, #2a251e 48%, #14110d 100%);
  position: relative;
  cursor: grab;
  touch-action: none;
  /* Skirt shadow on body + gloss highlight on top */
  box-shadow:
    0 1px 0 rgba(255,255,255,0.5),
    0 2px 3px rgba(0,0,0,0.25),
    0 5px 8px -1px rgba(0,0,0,0.3),
    0 9px 14px -3px rgba(0,0,0,0.25),
    inset 0 2px 1px rgba(255,255,255,0.25),
    inset 0 -3px 4px rgba(0,0,0,0.55);
}
/* Inner cap — raised disc on top of the knob */
.po-enc-knob::before {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 25%, #52493d 0%, #2c271f 70%, #1a1712 100%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.25),
    inset 0 -2px 3px rgba(0,0,0,0.6),
    0 1px 2px rgba(0,0,0,0.35);
  pointer-events: none;
}
/* Grip ridges — faint radial lines around rim, purely decorative */
.po-enc-knob::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 0deg, rgba(255,255,255,0.06) 0deg 3deg, transparent 3deg 9deg);
  mix-blend-mode: overlay;
  pointer-events: none;
}
.po-enc.is-dragging .po-enc-knob { cursor: grabbing; }
.po-enc-cap {
  position: absolute; inset: 0;
  transition: transform 0ms;
  z-index: 2;
}
.po-enc-dot {
  position: absolute;
  top: 2px; left: 50%;
  width: 3.5px; height: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #ffe880 15%, #ff9820 60%, #ff5a10 100%);
  border-radius: 2px;
  transform: translateX(-50%);
  box-shadow:
    0 0 1px #ffffff,
    0 0 3px #fff4a0,
    0 0 8px rgba(255, 200, 60, 1),
    0 0 16px rgba(255, 150, 30, 0.95),
    0 0 26px rgba(255, 110, 10, 0.8),
    0 0 40px rgba(255, 80, 0, 0.55),
    0 0 60px rgba(255, 60, 0, 0.3),
    inset 0 1px 1px rgba(255, 255, 255, 1);
  filter: saturate(1.3) brightness(1.1);
}

/* Radio-tuning sweep — conic arc filling from -150° (0%) to +150° (100%).
   Sits underneath the knob cap but above the knob body so it's visible as
   a halo. Dims when not dragging so the UI doesn't scream all the time. */
.po-enc-knob {
  /* custom properties used by the inline conic-gradient on .po-enc-sweep */
  --swp-hot:  rgba(255, 168, 40, 0.85);
  --swp-cold: rgba(255, 168, 40, 0.12);
}
.po-enc-sweep {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  /* feather the outer edge so it reads as a glow, not a solid ring */
  mask: radial-gradient(circle,
                        transparent 50%,
                        black 56%,
                        black 78%,
                        transparent 85%);
  -webkit-mask: radial-gradient(circle,
                                transparent 50%,
                                black 56%,
                                black 78%,
                                transparent 85%);
  opacity: 0.35;
  transition: opacity 180ms ease, filter 180ms ease;
  pointer-events: none;
  z-index: 1;
}
.po-enc.is-dragging .po-enc-sweep {
  opacity: 1;
  filter: drop-shadow(0 0 6px rgba(255, 168, 40, 0.7));
}

/* Tick marks — 11 around the 300° arc (every 30°). Faint when idle, amber
   when this encoder is being tuned. */
.po-enc-ticks {
  position: absolute; inset: -2px;
  pointer-events: none;
  z-index: 2;
}
.po-enc-tick {
  position: absolute;
  top: 50%; left: 50%;
  width: 1px; height: 4px;
  background: rgba(255, 255, 255, 0.18);
  transform-origin: 50% 0;
  margin-top: -30px; /* push to outer edge of knob */
  transition: background 160ms ease;
}
.po-enc.is-dragging .po-enc-tick {
  background: rgba(255, 200, 80, 0.55);
}

/* SEEK pulse — text badge that only appears while actively tuning. Sits
   beside the knob label, fades in on drag. Mirrors the LCD "SEEK" read. */
.po-enc-seek {
  position: absolute;
  top: -10px; right: -14px;
  padding: 1px 5px;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.12em;
  color: #ffcc55;
  background: rgba(20, 10, 2, 0.9);
  border: 1px solid rgba(255, 180, 60, 0.5);
  border-radius: 3px;
  opacity: 0;
  transform: translateY(2px) scale(0.9);
  transition: opacity 140ms ease, transform 140ms ease;
  z-index: 3;
  pointer-events: none;
}
.po-enc.is-dragging .po-enc-seek {
  opacity: 1;
  transform: translateY(0) scale(1);
  animation: po-seek-pulse 900ms ease-in-out infinite;
}
@keyframes po-seek-pulse {
  0%, 100% { box-shadow: 0 0 4px rgba(255, 180, 60, 0.4); }
  50%      { box-shadow: 0 0 10px rgba(255, 180, 60, 0.9); }
}

/* LCD seek — while any knob is being turned, LST line flips to 'SEEK' and
   gets a scanning amber underline. Reads like a tuner dial looking for a
   station. */
.po-lcd-last.is-seeking .po-lcd-last-lbl {
  color: #ffbb33;
  animation: po-lcd-seek-blink 420ms linear infinite;
}
.po-lcd-last.is-seeking .po-lcd-last-val {
  position: relative;
}
.po-lcd-last.is-seeking .po-lcd-last-val::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: linear-gradient(90deg,
              transparent 0%,
              rgba(255, 187, 51, 0.85) 50%,
              transparent 100%);
  background-size: 30% 100%;
  background-repeat: no-repeat;
  animation: po-lcd-seek-scan 1100ms linear infinite;
}
@keyframes po-lcd-seek-blink {
  0%, 60% { opacity: 1; }
  70%, 100% { opacity: 0.35; }
}
@keyframes po-lcd-seek-scan {
  0%   { background-position:   0% 0; }
  100% { background-position: 100% 0; }
}

.po-enc-label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em;
  color: #1a1612; font-weight: 700;
}
.po-enc-val {
  font-family: var(--font-mono); font-size: 11px;
  color: #1a1612; font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* Button grid — 2 rows × 4 cols */
.po-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 0;
}
.po-btn {
  position: relative;
  background: #e8e1d2;   /* flat matte, no gradient */
  border: 0;
  border-radius: 5px;
  padding: 10px 4px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  cursor: pointer;
  font-family: var(--font-mono);
  color: #1a1612;
  min-height: 52px;
  /* Matte keycap: NO gloss, just thickness (inset bottom + drop shadow) */
  box-shadow:
    /* chamfered bottom edge — "side" of the cap */
    inset 0 -3px 0 rgba(0,0,0,0.18),
    /* faint side shading */
    inset 1px 0 0 rgba(0,0,0,0.04),
    inset -1px 0 0 rgba(0,0,0,0.04),
    /* drop shadow — cap sitting above board */
    0 1px 0 rgba(0,0,0,0.14),
    0 2px 0 rgba(0,0,0,0.1),
    0 3px 4px -1px rgba(0,0,0,0.2),
    0 4px 8px -2px rgba(0,0,0,0.15);
  transition: transform 80ms ease, box-shadow 80ms ease, background 100ms ease;
}
.po-btn::before { display: none; }  /* kill the gloss sheen */
.po-btn:hover { background: #f0eadd; }
.po-btn.is-pressed, .po-btn:active {
  transform: translateY(2px);
  background: #dcd5c5;
  box-shadow:
    inset 0 2px 3px rgba(0,0,0,0.25),
    inset 0 -1px 0 rgba(0,0,0,0.08),
    0 1px 0 rgba(0,0,0,0.08);
}
.po-btn-label {
  font-size: 12px; letter-spacing: 0.14em; font-weight: 800;
}
.po-btn-sub {
  font-size: 8px; color: rgba(26,22,18,0.5);
  letter-spacing: 0.14em; font-weight: 600;
}

/* Button color variants */
.po-btn[data-color='amber'] {
  background: linear-gradient(180deg, #ffc070 0%, #ea9a38 55%, #b86818 100%);
  color: #1a0d02;
  box-shadow:
    inset 0 1.5px 0 rgba(255,240,210,0.85),
    inset 1px 0 0 rgba(255,220,180,0.4),
    inset -1px 0 0 rgba(80,40,5,0.25),
    inset 0 -3px 0 rgba(70,35,5,0.35),
    inset 0 -4px 2px -1px rgba(70,35,5,0.25),
    0 1px 0 rgba(90,45,5,0.3),
    0 2px 0 rgba(70,35,5,0.22),
    0 3px 6px -1px rgba(160,85,15,0.45),
    0 6px 14px -3px rgba(160,85,15,0.3);
}
.po-btn[data-color='amber']:hover {
  background: linear-gradient(180deg, #ffc880 0%, #f0a544 55%, #c47020 100%);
}
.po-btn[data-color='amber'] .po-btn-sub { color: rgba(26,13,2,0.65); }

.po-btn[data-color='red'] {
  background: linear-gradient(180deg, #e87060 0%, #c04428 55%, #881f12 100%);
  color: #fff2ec;
  box-shadow:
    inset 0 1.5px 0 rgba(255,200,180,0.6),
    inset 1px 0 0 rgba(255,180,160,0.25),
    inset -1px 0 0 rgba(50,10,5,0.3),
    inset 0 -3px 0 rgba(50,10,5,0.4),
    inset 0 -4px 2px -1px rgba(50,10,5,0.3),
    0 1px 0 rgba(70,15,8,0.32),
    0 2px 0 rgba(50,10,5,0.25),
    0 3px 6px -1px rgba(140,35,20,0.5),
    0 6px 14px -3px rgba(140,35,20,0.35);
}
.po-btn[data-color='red']:hover {
  background: linear-gradient(180deg, #ec7a68 0%, #c84e30 55%, #942818 100%);
}
.po-btn[data-color='red'] .po-btn-sub { color: rgba(255,240,235,0.75); }

.po-btn.is-active {
  background: linear-gradient(180deg, #2a2620 0%, #14110d 60%, #0a0805 100%);
  color: #f4efe6;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.12),
    inset 1px 0 0 rgba(255,255,255,0.05),
    inset -1px 0 0 rgba(0,0,0,0.5),
    inset 0 -3px 0 rgba(0,0,0,0.5),
    inset 0 2px 8px rgba(0,0,0,0.4),
    0 1px 0 rgba(0,0,0,0.18),
    0 2px 0 rgba(0,0,0,0.12),
    0 3px 6px -1px rgba(0,0,0,0.35),
    0 6px 14px -3px rgba(0,0,0,0.25);
}
.po-btn.is-active::before { opacity: 0.12; }
.po-btn.is-active .po-btn-sub { color: rgba(244,239,230,0.65); }

/* ============================================================================
   DECISION STACK — 1-at-a-time Tinder cards, editorial framed
   ============================================================================ */
.v2-stack-frame {
  position: relative;
  padding: 40px 0;
  border-top: 2px solid var(--rule);
  border-bottom: 2px solid var(--rule);
  margin: 36px 0;
  min-height: 520px;
}
.v2-stack-header {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 10px; border-bottom: 1px solid var(--rule-dim);
  margin-bottom: 28px;
}
.v2-stack-title {
  font-family: var(--font-serif-headline);
  font-size: 28px; font-weight: 400; letter-spacing: -0.02em; margin: 0;
}
.v2-stack-progress { font-family: var(--font-mono); font-size: 11px; color: var(--fg-muted); letter-spacing: 0.1em; }

.v2-stack-area {
  position: relative;
  display: grid; grid-template-columns: 1fr 420px 1fr; gap: 24px;
  align-items: stretch;
  min-height: 440px;
}

.v2-stack-cards {
  position: relative;
  grid-column: 2;
  height: 440px;
}
.v2-stack-card {
  position: absolute;
  inset: 0;
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 28px 32px;
  display: flex; flex-direction: column; gap: 14px;
  box-shadow:
    0 1px 0 var(--rule-dim),
    0 14px 28px -8px rgba(42,31,21,0.18),
    0 28px 48px -12px rgba(42,31,21,0.12);
  transition:
    transform var(--dur-fold) var(--ease-card),
    opacity var(--dur-fold) var(--ease-card);
  will-change: transform, opacity;
}
.v2-stack-card.is-1 { transform: translateY(12px) scale(0.96); opacity: 0.55; z-index: 1; }
.v2-stack-card.is-2 { transform: translateY(24px) scale(0.92); opacity: 0.3; z-index: 0; }
.v2-stack-card.is-top {
  background: var(--paper);
}
.v2-stack-card.is-top { z-index: 3; }
.v2-stack-card.leaving-right {
  transform: translateX(140%) rotate(10deg);
  opacity: 0;
}
.v2-stack-card.leaving-left {
  transform: translateX(-140%) rotate(-10deg);
  opacity: 0;
}
.v2-stack-card.leaving-up {
  transform: translateY(-120%) scale(1.02);
  opacity: 0;
}

.v2-card-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--fg-muted);
  padding-bottom: 10px; border-bottom: 1px solid var(--rule-dim);
}
.v2-card-platform { color: var(--hi); }
.v2-card-kicker {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--hi);
}
.v2-card-head {
  font-family: var(--font-serif-headline);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
  font-variation-settings: "SOFT" 30, "WONK" 0, "opsz" 96;
  text-wrap: balance;
}
.v2-card-head em { font-family: "Instrument Serif", Georgia, serif; font-style: italic; color: var(--hi); font-variation-settings: normal; }
.v2-card-body {
  font-family: var(--font-sans);
  font-size: 15px; line-height: 1.55;
  color: var(--ink);
  flex: 1;
  text-wrap: pretty;
}
.v2-card-signals {
  display: flex; gap: 14px;
  padding-top: 10px; border-top: 1px solid var(--rule-dim);
  font-family: var(--font-mono); font-size: 10px; color: var(--fg-muted); letter-spacing: 0.1em; text-transform: uppercase;
}
.v2-card-signals b { color: var(--hi); font-weight: 600; }

/* ----- stack hints (left/right flags) ----- */
.v2-stack-hint {
  display: flex; flex-direction: column; justify-content: center; gap: 10px;
  padding: 24px;
  color: var(--fg-muted);
}
.v2-stack-hint-l { grid-column: 1; align-items: flex-end; text-align: right; }
.v2-stack-hint-r { grid-column: 3; align-items: flex-start; text-align: left; }
.v2-stack-hint-big {
  font-family: var(--font-serif-headline);
  font-size: 54px; font-weight: 400; line-height: 0.95;
  letter-spacing: -0.025em;
  font-variation-settings: "SOFT" 40, "WONK" 20;
}
.v2-stack-hint-sub {
  font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-size: 16px;
}
.v2-stack-hint-kbd {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--fg-muted);
}

/* ----- stack actions (button row) ----- */
.v2-stack-actions {
  display: flex; justify-content: center; gap: 18px;
  margin-top: 28px;
}
.v2-stack-btn {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  padding: 12px 22px;
  border: 1px solid var(--rule);
  background: var(--paper); color: var(--ink);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px;
}
.v2-stack-btn:hover { background: var(--ink); color: var(--paper); }
.v2-stack-btn.is-primary { background: var(--hi); color: #fff; border-color: var(--hi); }
.v2-stack-btn.is-primary:hover { filter: brightness(1.1); }
.v2-stack-btn .mini-kbd {
  font-size: 9px; border: 1px solid currentColor; padding: 1px 5px;
  opacity: 0.6;
}

.v2-stack-empty {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  gap: 12px;
  padding: 40px;
  color: var(--fg-muted);
}
.v2-stack-empty-head {
  font-family: var(--font-serif-headline); font-size: 42px; color: var(--ink);
  font-variation-settings: "SOFT" 40, "WONK" 10;
}

/* ============================================================================
   PROJECT LEDGER
   ============================================================================ */
.v2-ledger { border-top: 2px solid var(--rule); padding-top: 28px; margin-top: 36px; }
.v2-ledger-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 10px; margin-bottom: 20px;
  border-bottom: 1px solid var(--rule-dim);
}
.v2-ledger-title { font-family: var(--font-serif-headline); font-size: 32px; font-weight: 400; letter-spacing: -0.02em; margin: 0; }

.v2-ledger-table {
  display: grid;
  grid-template-columns: 40px 2fr 1fr 1fr 1fr 120px;
  gap: 0 16px;
  font-size: 14px;
}
.v2-ledger-th, .v2-ledger-td {
  padding: 12px 0;
  border-bottom: 1px solid var(--rule-dim);
}
.v2-ledger-th {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--fg-muted);
  border-bottom: 1px solid var(--rule);
}
.v2-ledger-name {
  font-family: var(--font-serif-headline); font-size: 22px; line-height: 1.05;
  font-variation-settings: "SOFT" 30;
}
.v2-ledger-rank { font-family: var(--font-mono); font-size: 11px; color: var(--fg-muted); }
.v2-ledger-signal {
  display: flex; align-items: center; gap: 8px;
}
.v2-ledger-meter {
  flex: 1; height: 4px; background: var(--rule-dim); position: relative; overflow: hidden;
}
.v2-ledger-meter-bar {
  position: absolute; inset: 0;
  background: var(--hi);
  transition: width 300ms var(--ease-card), background 300ms;
}
.v2-ledger-meter-bar.is-cool { background: var(--fg-muted); }
.v2-ledger-pct { font-family: var(--font-mono); font-size: 11px; min-width: 34px; text-align: right; }
.v2-ledger-verdict {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 3px 8px; border: 1px solid currentColor;
  display: inline-block;
}
.v2-ledger-verdict--backing { color: var(--ok); }
.v2-ledger-verdict--watch { color: var(--fg-muted); }
.v2-ledger-verdict--cooling { color: var(--err); }

/* ============================================================================
   FLYWHEEL — fine-tuning feedback meter
   ============================================================================ */
.v2-flywheel {
  display: grid; grid-template-columns: auto 1fr; gap: 40px;
  padding: 24px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin-top: 36px;
  align-items: center;
}
.v2-fw-graphic {
  width: 200px; height: 200px;
  position: relative;
}
.v2-fw-graphic svg { width: 100%; height: 100%; }
.v2-fw-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: var(--font-mono);
}
.v2-fw-num { font-family: var(--font-serif-headline); font-size: 48px; font-weight: 400; color: var(--hi); line-height: 1; }
.v2-fw-label { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-muted); margin-top: 6px; }

.v2-fw-text { display: flex; flex-direction: column; gap: 12px; }
.v2-fw-head { font-family: var(--font-serif-headline); font-size: 32px; font-weight: 400; letter-spacing: -0.02em; margin: 0; font-variation-settings: "SOFT" 40; }
.v2-fw-body { font-family: var(--font-sans); font-size: 14px; line-height: 1.55; color: var(--fg-muted); max-width: 50ch; }

/* ============================================================================
   COMMAND BAR — floating overlay
   ============================================================================ */
.v2-cmd-overlay {
  position: fixed; inset: 0;
  background: rgba(42,31,21,0.55);
  backdrop-filter: blur(4px);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 15vh;
  z-index: 100;
  opacity: 0; pointer-events: none;
  transition: opacity 180ms ease;
}
.v2-cmd-overlay.is-open { opacity: 1; pointer-events: auto; }
.v2-cmd-box {
  width: min(680px, 92vw);
  background: var(--paper);
  border: 1px solid var(--rule);
  box-shadow: 0 40px 100px -24px rgba(0,0,0,0.5);
  padding: 0;
  transform: translateY(-10px);
  transition: transform 180ms ease;
  overflow: hidden;
}
.v2-cmd-overlay.is-open .v2-cmd-box { transform: translateY(0); }

.v2-cmd-head {
  display: flex; align-items: baseline; gap: 12px;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--rule);
}
.v2-cmd-prompt {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--hi);
}
.v2-cmd-input {
  flex: 1;
  font-family: var(--font-sans);
  font-size: 17px; font-weight: 400;
  border: 0; outline: 0;
  background: transparent;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.v2-cmd-input::placeholder { color: var(--fg-muted); font-style: normal; }

.v2-cmd-sectionlabel {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 14px 22px 6px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--fg-muted);
}

.v2-cmd-suggestions { padding: 0 10px 10px; }
.v2-cmd-suggest {
  display: flex; align-items: baseline; gap: 14px;
  width: 100%;
  padding: 10px 12px;
  border: 0; background: transparent; text-align: left;
  font-family: var(--font-sans); font-size: 14px; color: var(--ink);
  cursor: pointer;
  border-radius: 2px;
}
.v2-cmd-suggest:hover,
.v2-cmd-suggest.is-active { background: rgba(154,83,38,0.09); }
.v2-cmd-suggest-key {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--fg-muted); letter-spacing: 0.16em; text-transform: uppercase;
  min-width: 68px;
}
.v2-cmd-suggest:hover .v2-cmd-suggest-key,
.v2-cmd-suggest.is-active .v2-cmd-suggest-key { color: var(--hi); }
.v2-cmd-suggest-text { flex: 1; letter-spacing: -0.005em; }
.v2-cmd-suggest-meta {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--fg-muted); letter-spacing: 0.08em;
}

.v2-cmd-foot {
  display: flex; align-items: center; gap: 18px;
  padding: 10px 22px;
  border-top: 1px solid var(--rule);
  background: rgba(42,31,21,0.025);
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--fg-muted);
}
.v2-cmd-foot kbd {
  font-family: var(--font-mono); font-size: 9px;
  padding: 2px 5px; margin-right: 6px;
  background: var(--paper); border: 1px solid var(--rule);
  color: var(--ink);
}

/* ============================================================================
   TOP NAV (small, non-competing)
   ============================================================================ */
.v2-nav {
  display: flex; gap: 4px;
  padding: 0; margin-bottom: 20px;
  border-bottom: 1px solid var(--rule-dim);
}
.v2-nav a {
  font-family: var(--font-mono); font-size: 11px;
  padding: 8px 14px;
  color: var(--fg-muted);
  text-decoration: none;
  letter-spacing: 0.14em; text-transform: uppercase;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.v2-nav a.is-active { color: var(--ink); border-bottom-color: var(--hi); }
.v2-nav a:hover { color: var(--ink); }

.v2-nav-right { margin-left: auto; display: flex; gap: 14px; align-items: center; }

/* ============================================================================
   RESPONSIVE — tablet (≤900px) and mobile (≤640px)
   ============================================================================ */
@media (max-width: 900px) {
  .v2-shell {
    grid-template-columns: 1fr;
    max-width: 100%;
  }
  .v2-side {
    position: sticky; top: 0;
    border-right: 0;
    border-bottom: 1px solid var(--rule-dim);
    background: var(--paper);
    z-index: 50;
    padding: 12px 20px;
  }
  .v2-side-nav {
    flex-direction: row; overflow-x: auto;
    gap: 4px;
    -webkit-overflow-scrolling: touch;
  }
  .v2-side-nav::-webkit-scrollbar { display: none; }
  .v2-side-link {
    grid-template-columns: auto auto;
    flex: 0 0 auto;
    padding: 6px 10px;
    border: 1px solid var(--rule-dim);
    border-radius: 2px;
    white-space: nowrap;
  }
  .v2-side-link .v2-side-link-body,
  .v2-side-link .v2-side-desk { display: none; }
  .v2-main {
    padding: 20px 20px 72px;
    border-left: 0;
  }

  /* Masthead compact */
  .v2-mast {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .v2-mast-subline { text-align: left; margin-left: 0; max-width: none; }
  .v2-mast-weather { grid-template-columns: repeat(2, 1fr); }

  /* Console — scale down, keep landscape shape */
  .po-stage { width: 100%; margin: 20px auto 40px; }
  .po-device { transform: rotateX(6deg) rotateZ(0deg); }
  .po-top { grid-template-columns: 1fr; gap: 10px; padding: 12px 14px; }
  .po-lcd { width: 100%; }
  .po-body {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 18px 14px 20px;
  }
  .po-enc-knob { width: 46px; height: 46px; }

  /* Decision stack */
  .v2-stack-area { grid-template-columns: 1fr; gap: 16px; min-height: auto; }

  /* Ledger table collapses */
  .v2-ledger-table {
    grid-template-columns: 1fr auto;
    gap: 4px 12px;
  }
  .v2-ledger-table > *:nth-child(6n+1),
  .v2-ledger-table > *:nth-child(6n+3),
  .v2-ledger-table > *:nth-child(6n+4) { display: none; }

  /* Flywheel */
  .v2-flywheel { grid-template-columns: 1fr; gap: 20px; }
  .v2-fw-graphic { width: 140px; height: 140px; margin: 0 auto; }

  /* Command bar */
  .v2-cmd-box { width: 92vw; }
  .v2-cmd-input { font-size: 15px; }
}

@media (max-width: 640px) {
  .v2-main { padding: 16px 14px 72px; }
  .v2-mast-wordmark { font-size: clamp(34px, 10vw, 56px) !important; }
  .v2-mast-weather { grid-template-columns: 1fr 1fr; }
  .po-brand-name { font-size: 12px; }
  .po-lcd-inner { min-height: 56px; padding: 6px 8px; }
  .po-lcd-mode { font-size: 11px; }
  .po-lcd-val { font-size: 11px; }
  .po-encoders { gap: 8px; }
  .po-enc-knob { width: 42px; height: 42px; }
  .po-enc-label { font-size: 9px; }
  .po-grid { gap: 6px; }
  .po-btn { padding: 8px 3px 6px; min-height: 46px; }
  .po-btn-label { font-size: 11px; letter-spacing: 0.1em; }
  .po-btn-sub { font-size: 7px; }

  /* Command bar footer wraps */
  .v2-cmd-foot { flex-wrap: wrap; gap: 10px; }
  .v2-cmd-suggest { flex-wrap: wrap; gap: 6px 12px; padding: 10px 10px; }
  .v2-cmd-suggest-text { flex: 1 1 100%; order: 3; }
  .v2-cmd-suggest-key { min-width: 0; }
}

/* ============================================================================
   LCD — full-width CRT screen. CGI-noise look (not neon).
   Grid-based interior so rows never collide.
   ============================================================================ */

.po-top {
  padding: 18px 18px 14px;
  width: 100%;
}

.po-lcd {
  position: relative;
  width: 100%;
  background: linear-gradient(180deg, #1a1611 0%, #0e0c08 100%);
  border-radius: 6px;
  padding: 8px;
  box-shadow:
    inset 0 2px 0 rgba(0,0,0,0.7),
    inset 0 -1px 0 rgba(255,255,255,0.04),
    inset 0 0 24px rgba(0,0,0,0.8),
    0 1px 0 rgba(255,255,255,0.3);
}

.po-lcd-inner {
  position: relative;
  background: #0a1208;
  border-radius: 3px;
  padding: 12px 20px 20px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  line-height: 1.35;
  color: #9fd67c;
  overflow: hidden;

  /* ========================================================================
     CGA pal1-high palette — black / cyan / magenta / white only.
     LCD reads as a little CRT mini-game unit.
     ======================================================================== */
  background-image:
    /* horizontal scanlines */
    repeating-linear-gradient(180deg,
      rgba(0,0,0,0) 0 2px,
      rgba(0,0,0,0.35) 2px 3px),
    /* subtle vertical aperture grille */
    repeating-linear-gradient(90deg,
      rgba(255,255,255,0.025) 0 1px,
      rgba(0,0,0,0) 1px 2px),
    /* vignette + base — pure CGA black */
    radial-gradient(ellipse at center, #000508 0%, #000000 100%);
  box-shadow:
    inset 0 0 2px rgba(85, 255, 255, 0.18),
    inset 0 0 22px rgba(0,0,0,0.95);
  color: #FFFFFF;
  text-shadow: 0 0 1px currentColor;
}

/* SVG noise overlay — cyan+magenta grain, not green */
.po-lcd-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.33  0 0 0 0 1  0 0 0 0 1  0 0 0 0.06 0'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");
  opacity: 0.45;
  mix-blend-mode: screen;
  pointer-events: none;
}

/* Content above noise */
.po-lcd-inner > * { position: relative; z-index: 1; }

/* CGA pal1-high custom-properties + 2-column grid layout */
.po-lcd-inner {
  --cga-k: #000000;
  --cga-c: #55FFFF;
  --cga-m: #FF55FF;
  --cga-w: #FFFFFF;
  /* explicit 2-column grid: content | mascot gutter (narrower now) */
  display: grid;
  grid-template-columns: 1fr 92px;
  column-gap: 14px;
  align-content: start;
}
.po-lcd-inner > *:not(.po-lcd-mascot-slot) {
  grid-column: 1;
  min-width: 0;
}
/* Mascot pinned to column 2, spanning the full height of content */
.po-lcd-mascot-slot {
  grid-column: 2;
  grid-row: 1 / span 20;   /* enough to span all content rows */
  align-self: start;
  justify-self: end;
}

/* Header row — flex, no wrap */
.po-lcd-hdr,
.po-lcd-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
}
.po-lcd-hdr { font-size: 11px; margin-bottom: 2px; }
.po-lcd-sub { font-size: 10px; margin-bottom: 8px; }

.po-lcd-brand {
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--cga-w);
  margin-right: 4px;
}
.po-lcd-brand span {
  margin-left: 6px;
  font-weight: 400;
  color: var(--cga-c);
  letter-spacing: 0.1em;
}

.po-lcd-flag {
  display: inline-block;
  padding: 1px 5px;
  border: 1px solid var(--cga-c);
  border-radius: 0;            /* pixel-art crispness */
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--cga-c);
  opacity: 0.45;
}
.po-lcd-flag.on {
  color: var(--cga-k);
  background: var(--cga-c);
  border-color: var(--cga-c);
  opacity: 1;
}
.po-lcd-flag.warn {
  color: var(--cga-k);
  background: var(--cga-m);
  border-color: var(--cga-m);
  opacity: 1;
}

.po-lcd-mode    { color: var(--cga-m); font-weight: 700; letter-spacing: 0.1em; }
.po-lcd-spacer  { flex: 1; }
.po-lcd-time    { color: var(--cga-w); font-variant-numeric: tabular-nums; }
.po-lcd-sub-item{ color: var(--cga-c); }

.po-lcd-bars { display: inline-flex; gap: 2px; }
.po-lcd-bars span {
  width: 3px; height: 8px;
  background: rgba(85, 255, 255, 0.22);
}
.po-lcd-bars span.on { background: var(--cga-c); }

.po-lcd-batt {
  display: inline-block;
  width: 22px; height: 8px;
  border: 1px solid var(--cga-c);
  position: relative;
}
.po-lcd-batt::after {
  content: '';
  position: absolute;
  right: -3px; top: 2px;
  width: 2px; height: 4px;
  background: var(--cga-c);
}
.po-lcd-batt span {
  position: absolute; inset: 1px;
  background: var(--cga-c);
}
.po-lcd-ver { color: var(--cga-m); opacity: 0.7; font-size: 9px; }

/* Mascot slot — column 2 of the LCD grid */
.po-lcd-mascot-slot {
  /* grid positioning set above; style only the content here */
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  padding-top: 2px;
}
.po-lcd-mascot-slot .po-mascot {
  transform: scale(1);
  transform-origin: top right;
}

/* CONF bar */
.po-lcd-conf {
  display: grid;
  grid-template-columns: 46px 1fr 36px;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.po-lcd-conf-lbl { color: var(--cga-c); font-size: 10px; letter-spacing: 0.1em; }
.po-lcd-conf-track {
  height: 6px;
  background: rgba(85, 255, 255, 0.15);
  border: 1px solid rgba(85,255,255,0.3);
  overflow: hidden;
}
.po-lcd-conf-fill {
  display: block; height: 100%;
  /* CGA-only dither: magenta ←→ cyan */
  background: repeating-linear-gradient(
    90deg,
    var(--cga-m) 0 2px,
    var(--cga-w) 2px 3px,
    var(--cga-c) 3px 5px,
    var(--cga-w) 5px 6px
  );
}
.po-lcd-conf-val { text-align: right; color: var(--cga-w); }

/* Meters grid */
.po-lcd-meters {
  display: grid;
  grid-template-columns: 46px 1fr 36px;
  align-items: center;
  gap: 4px 8px;
  margin-bottom: 8px;
}
.po-lcd-mlbl { color: var(--cga-c); font-size: 10px; letter-spacing: 0.1em; }
.po-lcd-mval { text-align: right; color: var(--cga-w); }
.po-lcd-meter {
  height: 8px;
  display: flex;
  gap: 1px;
}
.po-lcd-meter-seg {
  flex: 1;
  background: rgba(85, 255, 255, 0.14);
}
/* All hues land on the same 4-color palette — but each series picks a different one */
.po-lcd-meter[data-hue='amber']   .po-lcd-meter-seg.on { background: var(--cga-w); }
.po-lcd-meter[data-hue='magenta'] .po-lcd-meter-seg.on { background: var(--cga-m); }
.po-lcd-meter[data-hue='cyan']    .po-lcd-meter-seg.on { background: var(--cga-c); }

/* Rows of KV pairs — flex-wrap, each pair is an rigid inline unit */
.po-lcd-rows { margin-bottom: 6px; }
.po-lcd-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 10px;
  row-gap: 2px;
  font-size: 10px;
  line-height: 1.5;
}
.po-lcd-kv {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;          /* NEVER break a pair */
  flex: 0 0 auto;
}
.po-lcd-k { color: var(--cga-c); letter-spacing: 0.08em; }
.po-lcd-v { color: var(--cga-w); font-weight: 700; font-variant-numeric: tabular-nums; }
.po-lcd-v.amber   { color: var(--cga-w); }
.po-lcd-v.magenta { color: var(--cga-m); }
.po-lcd-v.cyan    { color: var(--cga-c); }
.po-lcd-v.green   { color: var(--cga-w); }

/* Signal segmented bar */
.po-lcd-sig {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 10px;
  margin-bottom: 6px;
  font-size: 9px;
}
.po-lcd-sig-lbl { color: var(--cga-c); width: 24px; flex: none; }
.po-lcd-sig-seg {
  height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--cga-k);
  font-weight: 800;
  letter-spacing: 0.05em;
  overflow: hidden;
  min-width: 0;
}
.po-lcd-sig-seg.buy  { background: var(--cga-c); }
.po-lcd-sig-seg.wait { background: var(--cga-w); }
.po-lcd-sig-seg.sell { background: var(--cga-m); }

/* Waveform + queue */
.po-lcd-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 20px;
  margin-bottom: 4px;
}
.po-lcd-wave {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 1px;
  height: 100%;
}
.po-lcd-bar {
  flex: 1;
  background: var(--cga-c);
  min-height: 2px;
}
.po-lcd-bar:nth-child(3n) { background: var(--cga-m); }
.po-lcd-bar:nth-child(5n) { background: var(--cga-w); }
.po-lcd-q { color: var(--cga-w); font-size: 10px; }

/* LST line */
.po-lcd-last {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  padding-top: 4px;
  border-top: 1px dashed rgba(85, 255, 255, 0.3);
}
.po-lcd-last-lbl { color: var(--cga-c); }
.po-lcd-last-val { color: var(--cga-w); flex: 1; }
.po-lcd-last-n   { color: var(--cga-m); }

/* Ticker — final authoritative rules (overrides the earlier block) */
.po-lcd-ticker {
  margin-top: 4px;
  padding: 0;
  border-top: 1px dashed rgba(85, 255, 255, 0.3);
  overflow: hidden;
  height: 26px;
  line-height: 26px;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--cga-m);
  font-weight: 600;
  flex-shrink: 0;
  display: block;
}
.po-lcd-ticker-track {
  display: inline-block;
  white-space: nowrap;
  line-height: 26px;
  vertical-align: top;
  animation: po-ticker 30s linear infinite;
}
@keyframes po-ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* =========================================================================
   Mascot — CGA pal1-high, 80×80 pixel grid @ 1.5px/cell = 120×120 render.
   Dense pixel-art snowman/panda-cat with cyan headset.
   ========================================================================= */
.po-mascot { display: inline-block; line-height: 0; image-rendering: pixelated; }
/* 80×80 "snowman cat" — the rich chubby mascot. 1.4px per pixel → 112×112 render. */
.po-mascot-grid {
  display: grid !important;
  grid-template-columns: repeat(80, 1.4px) !important;
  grid-template-rows: repeat(80, 1.4px) !important;
  grid-auto-rows: 1.4px !important;
  gap: 0;
  width: 112px !important;
  height: 112px !important;
  image-rendering: pixelated;
  transition: transform 260ms steps(2);
}
.po-px { width: 1.4px !important; height: 1.4px !important; display: block; }
.po-px.px-K { background: var(--cga-k, #000000); }
.po-px.px-C { background: var(--cga-c, #55FFFF); }
.po-px.px-M { background: var(--cga-m, #FF55FF); }
.po-px.px-W { background: var(--cga-w, #FFFFFF); }

/* Mascot slot inside LCD — top-right corner, CGA cat anchors there */
.po-lcd-mascot-slot {
  display: none;
}

/* Porthole — mascot lives here, beside the LCD, not inside it.
   Overrides the original .po-top grid to give porthole a dedicated column.
   The two windows (LCD + porthole) are SEPARATE bezels now, so the .po-top
   no longer needs its own padding/background — the device body shows through. */
.po-top {
  display: grid !important;
  grid-template-columns: 1fr 140px !important;
  gap: 12px !important;
  align-items: stretch;
  padding: 0 !important;
  background: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
.po-lcd { min-width: 0; }

/* The porthole is its own CGA scene — magenta twilight sky, cyan ground,
   a couple of pixel stars, a faint horizon line. The cat walks on the ground.
   Stars twinkle; ground moves subtly to feel alive. */
.po-porthole {
  width: 140px;
  border: 2px solid rgba(0,0,0,0.9);
  border-radius: 10px;
  padding: 0;            /* let the scene fill edge-to-edge */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,0.9),
    inset 0 -1px 2px rgba(85,255,255,0.06);
  position: relative;
  overflow: hidden;
  /* Base sky→horizon→ground. Stars are a separate animated layer (::before). */
  background:
    linear-gradient(180deg,
      #000000 0%,
      #000000 58%,
      #FF55FF 60%,
      #FF55FF 62%,
      #55FFFF 64%,
      #55FFFF 100%);
}
/* Twinkling starfield — animated via background-position drift + opacity pulse */
.po-porthole::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 60%;           /* only covers the sky portion */
  background:
    radial-gradient(1px 1px at 22px 18px, #FFFFFF 50%, transparent 51%),
    radial-gradient(1px 1px at 78px 12px, #FFFFFF 50%, transparent 51%),
    radial-gradient(1px 1px at 108px 26px, #FFFFFF 50%, transparent 51%),
    radial-gradient(1px 1px at 46px 34px, #FF55FF 50%, transparent 51%),
    radial-gradient(1px 1px at 96px 44px, #FF55FF 50%, transparent 51%),
    radial-gradient(1px 1px at 14px 42px, #FFFFFF 50%, transparent 51%),
    radial-gradient(1px 1px at 62px 8px,  #FFFFFF 50%, transparent 51%),
    radial-gradient(1px 1px at 128px 52px, #FFFFFF 50%, transparent 51%);
  animation: po-twinkle 2.4s steps(3) infinite;
  pointer-events: none;
  z-index: 1;
}
/* Scrolling ground texture — dither stripes crawl left, selling parallax */
.po-porthole::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 36%;
  background:
    repeating-linear-gradient(90deg,
      rgba(0,0,0,0.18) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(0deg,
      rgba(255,255,255,0.05) 0 1px, transparent 1px 3px);
  animation: po-ground 3.8s linear infinite;
  pointer-events: none;
  z-index: 2;
}
/* Scanlines — flat overlay on top of everything */
.po-porthole > .po-scanlines {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0.22) 0 1px,
    transparent 1px 3px
  );
  border-radius: 10px;
  pointer-events: none;
  z-index: 4;
}
@keyframes po-twinkle {
  0%   { opacity: 1;   transform: translateX(0px); }
  33%  { opacity: 0.5; transform: translateX(1px); }
  66%  { opacity: 1;   transform: translateX(-1px); }
  100% { opacity: 0.7; transform: translateX(0px); }
}
@keyframes po-ground {
  from { background-position: 0 0, 0 0; }
  to   { background-position: -24px 0, 0 0; }
}
.po-porthole-inner {
  flex: 1;
  display: flex;
  align-items: flex-end;     /* cat stands ON the ground, not floating */
  justify-content: center;
  width: 100%;
  padding-bottom: 20px;
  padding-top: 8px;
  position: relative;
  z-index: 3;                /* above ground, below scanlines */
}
.po-porthole-label {
  display: none; /* removed — the scene speaks for itself, no caption needed */
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  color: var(--cga-c, #55FFFF);
  padding-top: 6px;
  border-top: 1px dashed rgba(85,255,255,0.3);
  width: 100%;
  text-align: center;
}