/* =====================================================================
   ESAForum · OBSIDIAN landing (presentation) page
   -----------------------------------------------------------------------
   The community's console. Dark, layered, hairline-built. Accent is spent
   with extreme economy: teal = interaction, green = online, amber = nearly
   full, red = danger. No neon, no bloom, no particles.

   Design tokens are OWNED by skin-obsidian.css ([data-skin="obsidian"]
   --ob-*). This file only CONSUMES them (always with a fallback so the page
   renders even if load order ever changes) and adds landing-only extras
   under the --lp- prefix.

   Typography: Inter for content; JetBrains Mono 11px uppercase .12em for
   HUD micro-labels (eyebrows, stat labels, timestamps, index numerals).

   Motion vocabulary (shared with the skin — the same seven, nothing else):
     1. hairline sweep      — 1px accent line scaling from the left
     2. corner ticks        — L-shaped HUD marks on hover/focus (pseudo only)
     3. status pulse        — dot + soft box-shadow pulse
     4. index numerals      — 01 / 02 … light up on hover
     5. reveal-on-hover     — secondary meta fades in
     6. counter tick        — numbers count up once, when seen
     7. scanline            — one rare 1px pass across the console
   Durations 140–260ms, var(--ob-ease), hover lift ≤ 2px, no bounce.

   Animation contract: final state without JS; `.lpob-anim` (added before
   first paint) arms reveals, only under prefers-reduced-motion: no-preference.

   Hard rules: no background-attachment:fixed; .container never styled (no
   z-index); decorative overlays pointer-events:none; .partners-section
   untouched; every selector carries the .lpob prefix.
   ===================================================================== */

.lpob {
    /* landing-only extras — never redefine the --ob-* contract here */
    --lp-w: 1240px;
    --lp-gutter: clamp(18px, 4vw, 44px);
    --lp-sec: clamp(56px, 7vw, 104px);
    --lp-font: var(--font, 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif);
    --lp-mono: var(--ob-mono, 'JetBrains Mono', ui-monospace, monospace);
    --lp-ease: var(--ob-ease, cubic-bezier(.4, 0, .2, 1));
    --lp-fast: var(--ob-fast, 140ms);
    --lp-med: var(--ob-med, 220ms);
    --lp-on-accent: #07110f;                 /* dark ink on the teal fill */
    --lp-grid: rgba(255, 255, 255, .025);    /* 1px grid fragment */

    /* full-bleed: escape main.container (padding 0 18px; inline 10/26px). */
    margin: -10px calc(50% - 50vw) -26px;
    background: var(--ob-bg, #0e1116);
    color: var(--ob-text, #e7ecf3);
    font-family: var(--lp-font);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;                        /* never scroll sideways; not a scroll container, so sticky still works */
}
.lpob *, .lpob *::before, .lpob *::after { box-sizing: border-box; }
.lpob a { color: inherit; text-decoration: none; }
.lpob img { display: block; max-width: 100%; }
.lpob h1, .lpob h2, .lpob p, .lpob dl, .lpob dd, .lpob ol { margin: 0; }
.lpob ol { padding: 0; list-style: none; }
.lpob button { font: inherit; color: inherit; }
.lpob :focus-visible { outline: 1px solid var(--ob-accent, #46c6b8); outline-offset: 3px; }

.lpob-w {
    width: 100%;
    max-width: var(--lp-w);
    margin: 0 auto;
    padding: 0 var(--lp-gutter);
    position: relative;
}
.lpob-tnum { font-variant-numeric: tabular-nums; }

/* ── HUD micro-type ──────────────────────────────────────────────── */
.lpob-label,
.lpob-idx,
.lpob-eyebrow {
    font-family: var(--lp-mono);
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ob-mute, #64707f);
}
.lpob-label { display: inline-flex; align-items: center; gap: 8px; }
.lpob-label--dim { color: var(--ob-mute, #64707f); opacity: .8; }
.lpob-label--on { color: var(--ob-online, #56d364); }
.lpob-label--link { color: var(--ob-dim, #9aa7b8); transition: color var(--lp-fast) var(--lp-ease); }
.lpob-label--link:hover { color: var(--ob-accent, #46c6b8); }
.lpob-idx { transition: color var(--lp-fast) var(--lp-ease); }

/* status dot + pulse */
.lpob-dot {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--ob-mute, #64707f);
    flex: none;
    vertical-align: middle;
}
.lpob-dot--on {
    background: var(--ob-online, #56d364);
    box-shadow: 0 0 0 0 rgba(86, 211, 100, .45);
    animation: lpob-pulse 2.6s var(--lp-ease) infinite;
}
.lpob-dot--off { background: var(--ob-mute, #64707f); opacity: .55; }
@keyframes lpob-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(86, 211, 100, .45); }
    60%  { box-shadow: 0 0 0 6px rgba(86, 211, 100, 0); }
    100% { box-shadow: 0 0 0 0 rgba(86, 211, 100, 0); }
}

/* ── BUTTONS ─────────────────────────────────────────────────────── */
.lpob-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    font-family: var(--lp-font);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1;
    color: var(--ob-text, #e7ecf3);
    background: var(--ob-surface, #141920);
    border: 1px solid var(--ob-line-2, rgba(255, 255, 255, .11));
    border-radius: var(--ob-r, 10px);
    cursor: pointer;
    transition: transform var(--lp-fast) var(--lp-ease), border-color var(--lp-fast) var(--lp-ease), background-color var(--lp-fast) var(--lp-ease), color var(--lp-fast) var(--lp-ease);
}
.lpob-btn b { font-weight: 600; color: var(--ob-accent, #46c6b8); }
.lpob-btn span[aria-hidden] { transition: transform var(--lp-fast) var(--lp-ease); }
.lpob-btn:hover { transform: translateY(-1px); border-color: var(--ob-accent-line, rgba(70, 198, 184, .35)); background: var(--ob-surface-2, #1a2028); }
.lpob-btn:hover span[aria-hidden] { transform: translateX(3px); }
.lpob-btn--primary {
    color: var(--lp-on-accent);
    background: var(--ob-accent, #46c6b8);
    border-color: var(--ob-accent, #46c6b8);
}
.lpob-btn--primary:hover { background: var(--ob-accent, #46c6b8); border-color: var(--ob-accent, #46c6b8); filter: brightness(1.06); }
.lpob-btn--sm { padding: 8px 12px; font-size: 12px; border-radius: 8px; }
/* corner ticks — pseudo only, discovered on hover/focus */
.lpob-btn::before, .lpob-btn::after,
.lpob-index-item::before, .lpob-index-item::after,
.lpob-face::before, .lpob-face::after,
.lpob-node-mini::before, .lpob-node-mini::after {
    content: '';
    position: absolute;
    width: 9px; height: 9px;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--lp-med) var(--lp-ease), transform var(--lp-med) var(--lp-ease);
}
.lpob-btn::before, .lpob-index-item::before, .lpob-face::before, .lpob-node-mini::before {
    top: -4px; left: -4px;
    border-top: 1px solid var(--ob-accent, #46c6b8);
    border-left: 1px solid var(--ob-accent, #46c6b8);
    transform: translate(3px, 3px);
}
.lpob-btn::after, .lpob-index-item::after, .lpob-face::after, .lpob-node-mini::after {
    right: -4px; bottom: -4px;
    border-right: 1px solid var(--ob-accent, #46c6b8);
    border-bottom: 1px solid var(--ob-accent, #46c6b8);
    transform: translate(-3px, -3px);
}
.lpob-btn:hover::before, .lpob-btn:hover::after, .lpob-btn:focus-visible::before, .lpob-btn:focus-visible::after,
.lpob-index-item:hover::before, .lpob-index-item:hover::after, .lpob-index-item:focus-visible::before, .lpob-index-item:focus-visible::after,
.lpob-face:hover::before, .lpob-face:hover::after, .lpob-face:focus-visible::before, .lpob-face:focus-visible::after,
.lpob-node-mini:hover::before, .lpob-node-mini:hover::after, .lpob-node-mini:focus-visible::before, .lpob-node-mini:focus-visible::after {
    opacity: 1;
    transform: translate(0, 0);
}
.lpob-btn--primary::before, .lpob-btn--primary::after { display: none; }

/* text link with hairline sweep */
.lpob-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ob-dim, #9aa7b8);
    padding-bottom: 2px;
    transition: color var(--lp-fast) var(--lp-ease);
}
.lpob-link::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 1px;
    background: var(--ob-accent, #46c6b8);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--lp-med) var(--lp-ease);
    pointer-events: none;
}
.lpob-link span[aria-hidden] { transition: transform var(--lp-fast) var(--lp-ease); }
.lpob-link:hover { color: var(--ob-text, #e7ecf3); }
.lpob-link:hover::after { transform: scaleX(1); }
.lpob-link:hover span[aria-hidden] { transform: translateX(3px); }

/* ── SECTIONS ────────────────────────────────────────────────────── */
.lpob-sec {
    position: relative;
    padding: var(--lp-sec) 0;
    border-top: 1px solid var(--ob-line, rgba(255, 255, 255, .06));
}
.lpob-sec-head {
    display: grid;
    grid-template-columns: minmax(140px, 2fr) minmax(0, 10fr);
    gap: 24px clamp(24px, 4vw, 64px);
    align-items: start;
    margin-bottom: clamp(32px, 4vw, 56px);
}
.lpob-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding-top: 10px;
    white-space: nowrap;
}
.lpob-eyebrow .lpob-idx { color: var(--ob-accent, #46c6b8); }
.lpob-eyebrow::after {
    content: '';
    flex: 1 1 24px;
    min-width: 24px;
    height: 1px;
    background: var(--ob-line-2, rgba(255, 255, 255, .11));
}
.lpob-sec-title h2 {
    font-size: clamp(26px, 3vw, 40px);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -.022em;
    color: var(--ob-text, #e7ecf3);
    max-width: 22ch;
}
.lpob-sec-title p {
    margin-top: 14px;
    max-width: 58ch;
    font-size: 15px;
    line-height: 1.65;
    color: var(--ob-dim, #9aa7b8);
}
.lpob-sec-title p b { font-weight: 600; color: var(--ob-text, #e7ecf3); }
.lpob-sec-title h2 .lpob-tnum { color: var(--ob-accent, #46c6b8); }

/* empty state — a single hairline row, never a box */
.lpob-empty {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 0;
    border-top: 1px solid var(--ob-line, rgba(255, 255, 255, .06));
    border-bottom: 1px solid var(--ob-line, rgba(255, 255, 255, .06));
    font-size: 14px;
    color: var(--ob-dim, #9aa7b8);
}
.lpob-empty .lpob-link { color: var(--ob-text, #e7ecf3); }

/* ── 01 / CONSOLE ────────────────────────────────────────────────── */
.lpob-console {
    position: relative;
    padding: clamp(28px, 4vw, 52px) 0 clamp(20px, 3vw, 36px);
    min-height: min(calc(100vh - var(--header-h, 64px)), 900px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    isolation: isolate;
    overflow: hidden;                        /* clips the scanline pass */
}
.lpob-console > .lpob-w { z-index: 1; }

/* background — alive but almost imperceptible; supports, never competes */
.lpob-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(900px 520px at 72% -10%, rgba(70, 198, 184, .07), transparent 62%),
        radial-gradient(700px 480px at 8% 108%, rgba(138, 151, 168, .06), transparent 60%),
        radial-gradient(1200px 700px at 50% 40%, var(--ob-surface, #141920), transparent 70%),
        var(--ob-bg, #0e1116);
}
.lpob-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--lp-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--lp-grid) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: radial-gradient(90% 80% at 62% 30%, #000 20%, transparent 75%);
            mask-image: radial-gradient(90% 80% at 62% 30%, #000 20%, transparent 75%);
}
/* SVG turbulence grain, data-URI, very low opacity */
.lpob-grain {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .035;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-size: 160px 160px;
}
/* one rare scanline pass */
.lpob-scan {
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 1px;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--ob-accent-line, rgba(70, 198, 184, .35)) 30%, var(--ob-accent-line, rgba(70, 198, 184, .35)) 70%, transparent);
    opacity: 0;
}
.lpob-anim .lpob-scan { animation: lpob-scan 18s linear 4s infinite; }
@keyframes lpob-scan {
    0%    { transform: translateY(0);      opacity: 0; }
    1%    { opacity: .7; }
    9%    { transform: translateY(100vh);  opacity: .7; }
    10%   { opacity: 0; }
    100%  { transform: translateY(100vh);  opacity: 0; }
}

/* HUD strip */
.lpob-hud {
    display: flex;
    align-items: center;
    gap: 0 clamp(16px, 2.4vw, 32px);
    padding-bottom: 14px;
    border-bottom: 1px solid var(--ob-line, rgba(255, 255, 255, .06));
    font-family: var(--lp-mono);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ob-mute, #64707f);
}
.lpob-hud-cell { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.lpob-hud-cell b { font-weight: 500; color: var(--ob-text, #e7ecf3); }
.lpob-hud-id .lpob-idx { color: var(--ob-accent, #46c6b8); }
.lpob-hud-sep { width: 18px; height: 1px; background: var(--ob-line-2, rgba(255, 255, 255, .11)); }
.lpob-hud-live { color: var(--ob-dim, #9aa7b8); }
.lpob-hud-clock { margin-left: auto; color: var(--ob-dim, #9aa7b8); }
.lpob-hud-clock .lpob-tnum { color: var(--ob-text, #e7ecf3); }

/* console grid: identity (wide) + telemetry (narrow), top-aligned */
.lpob-console-grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(32px, 6vw, 96px);
    align-items: start;
    padding-top: clamp(32px, 5vw, 72px);
}

/* identity */
.lpob-brand {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 26px;
}
.lpob-brand-logo {
    width: auto;
    height: 44px;
    max-width: 200px;
    object-fit: contain;
    flex: none;
}
.lpob-brand-line { flex: 0 1 64px; height: 1px; background: var(--ob-line-2, rgba(255, 255, 255, .11)); }
.lpob-brand-meta {
    font-family: var(--lp-mono);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ob-mute, #64707f);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lpob-title {
    font-size: clamp(34px, 5vw, 64px);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -.03em;
    color: var(--ob-text, #e7ecf3);
    overflow-wrap: anywhere;
}
.lpob-tagline {
    margin-top: 14px;
    font-size: clamp(16px, 1.6vw, 20px);
    font-weight: 500;
    letter-spacing: -.01em;
    color: var(--ob-dim, #9aa7b8);
}
.lpob-desc {
    margin-top: 16px;
    max-width: 54ch;
    font-size: 15px;
    line-height: 1.7;
    color: var(--ob-dim, #9aa7b8);
}

/* transmission — fragments of recent discussion, rotating */
.lpob-tx {
    margin-top: 34px;
    max-width: 560px;
    border-top: 1px solid var(--ob-line, rgba(255, 255, 255, .06));
    padding-top: 14px;
}
.lpob-tx-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.lpob-tx-count { font-family: var(--lp-mono); font-size: 11px; letter-spacing: .12em; color: var(--ob-mute, #64707f); }
.lpob-tx-body {
    position: relative;
    display: grid;
    margin-top: 12px;
    padding-left: 18px;
    min-height: 3.2em;
}
.lpob-tx-item {
    grid-area: 1 / 1;
    display: block;
    font-size: 14px;
    line-height: 1.55;
    color: var(--ob-dim, #9aa7b8);
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity var(--lp-med) var(--lp-ease), transform var(--lp-med) var(--lp-ease);
}
.lpob-tx-item.is-on { opacity: 1; transform: none; pointer-events: auto; }
.lpob-tx-who {
    font-family: var(--lp-mono);
    font-size: 12px;
    color: var(--ob-accent, #46c6b8);
    margin-right: 8px;
}
.lpob-tx-who i { font-style: normal; margin-left: 4px; color: var(--ob-mute, #64707f); }
.lpob-tx-what {
    color: var(--ob-text, #e7ecf3);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.lpob-tx-item:hover .lpob-tx-what { text-decoration: underline; text-decoration-color: var(--ob-accent-line, rgba(70, 198, 184, .35)); text-underline-offset: 3px; }
.lpob-tx-when {
    display: block;
    margin-top: 4px;
    font-family: var(--lp-mono);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ob-mute, #64707f);
}
.lpob-tx-item--empty .lpob-tx-what { color: var(--ob-dim, #9aa7b8); }
.lpob-caret {
    position: absolute;
    left: 0; top: .35em;
    width: 7px; height: 1em;
    background: var(--ob-accent, #46c6b8);
    opacity: .9;
    pointer-events: none;
}
.lpob-anim .lpob-caret { animation: lpob-caret 1.1s steps(1) infinite; }
@keyframes lpob-caret { 0%, 50% { opacity: .9; } 50.01%, 100% { opacity: 0; } }

.lpob-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }

/* telemetry stack */
.lpob-telemetry {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding-top: 4px;
}
.lpob-tele-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--ob-line, rgba(255, 255, 255, .06));
}
.lpob-readouts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--ob-line, rgba(255, 255, 255, .06));   /* hairline lattice */
    border: 1px solid var(--ob-line, rgba(255, 255, 255, .06));
    border-radius: var(--ob-r, 10px);
    overflow: hidden;
}
.lpob-readout {
    background: var(--ob-bg, #0e1116);
    padding: 16px 18px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: background-color var(--lp-fast) var(--lp-ease);
}
.lpob-readout:hover { background: var(--ob-surface, #141920); }
.lpob-readout dt {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--lp-mono);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ob-mute, #64707f);
}
.lpob-readout dd {
    font-size: clamp(26px, 2.6vw, 34px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--ob-text, #e7ecf3);
}
.lpob-readout--live dd { color: var(--ob-online, #56d364); }

/* busiest node — the one floating panel of the console, offset into the gutter */
.lpob-node-mini {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 18px 18px;
    margin-left: calc(-1 * clamp(0px, 2vw, 28px));
    background: var(--ob-surface, #141920);
    border: 1px solid var(--ob-line-2, rgba(255, 255, 255, .11));
    border-radius: var(--ob-r, 10px);
    transition: transform var(--lp-fast) var(--lp-ease), border-color var(--lp-fast) var(--lp-ease);
}
a.lpob-node-mini:hover { transform: translateY(-2px); border-color: var(--ob-accent-line, rgba(70, 198, 184, .35)); }
.lpob-node-mini--off { opacity: .8; }
.lpob-node-mini-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.lpob-node-mini-name { font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--ob-text, #e7ecf3); }
.lpob-node-mini-meta { font-family: var(--lp-mono); font-size: 12px; color: var(--ob-dim, #9aa7b8); }
.lpob-node-mini-num { margin-top: 2px; font-size: 13px; font-weight: 600; color: var(--ob-text, #e7ecf3); }
.lpob-node-mini-num span { font-weight: 400; color: var(--ob-mute, #64707f); }

/* segmented capacity meter */
.lpob-meter {
    position: relative;
    display: block;
    width: 100%;
    height: 6px;
    margin-top: 6px;
    border-radius: 1px;
    background: repeating-linear-gradient(90deg, var(--ob-line-2, rgba(255, 255, 255, .11)) 0 6px, transparent 6px 9px);
    overflow: hidden;
}
.lpob-meter i {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--pct, 0%);
    background: repeating-linear-gradient(90deg, var(--ob-online, #56d364) 0 6px, transparent 6px 9px);
    transition: width 700ms var(--lp-ease);
}
.lpob-meter.is-full i { background: repeating-linear-gradient(90deg, var(--ob-warn, #e3b341) 0 6px, transparent 6px 9px); }
.lpob-anim .lpob-node-mini .lpob-meter i { animation: lpob-fill 900ms var(--lp-ease) 300ms both; }
@keyframes lpob-fill { from { width: 0; } }

/* latest arrivals */
.lpob-arrivals-row { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.lpob-arrival {
    position: relative;
    display: block;
    width: 32px; height: 32px;
    border-radius: 50%;
    outline: 1px solid var(--ob-line-2, rgba(255, 255, 255, .11));
    outline-offset: 2px;
    transition: outline-color var(--lp-fast) var(--lp-ease), transform var(--lp-fast) var(--lp-ease);
}
.lpob-arrival img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--ob-surface-2, #1a2028); }
.lpob-arrival:hover { outline-color: var(--ob-accent, #46c6b8); transform: translateY(-2px); }
.lpob-arrival-name {
    position: absolute;
    left: 50%; top: calc(100% + 8px);
    transform: translate(-50%, -4px);
    padding: 4px 8px;
    font-family: var(--lp-mono);
    font-size: 11px;
    letter-spacing: .06em;
    white-space: nowrap;
    color: var(--ob-text, #e7ecf3);
    background: var(--ob-surface-3, #212932);
    border: 1px solid var(--ob-line-2, rgba(255, 255, 255, .11));
    border-radius: 6px;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--lp-fast) var(--lp-ease), transform var(--lp-fast) var(--lp-ease);
    z-index: 2;
}
.lpob-arrival:hover .lpob-arrival-name, .lpob-arrival:focus-visible .lpob-arrival-name { opacity: 1; transform: translate(-50%, 0); }

/* console foot */
.lpob-console-foot {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: clamp(36px, 6vw, 80px);
}
.lpob-foot-line { flex: 1; height: 1px; background: var(--ob-line, rgba(255, 255, 255, .06)); position: relative; overflow: hidden; }
.lpob-foot-line::after {
    content: '';
    position: absolute;
    left: 0; top: 0;
    width: 64px; height: 1px;
    background: var(--ob-accent, #46c6b8);
    opacity: .6;
    transform: translateX(-100%);
}
.lpob-anim .lpob-foot-line::after { animation: lpob-foot 6s var(--lp-ease) 1s infinite; }
@keyframes lpob-foot {
    0%   { transform: translateX(-100%); }
    40%, 100% { transform: translateX(2000px); }
}

/* ── 02 / NODES — the rack ───────────────────────────────────────── */
.lpob-rack { border-top: 1px solid var(--ob-line-2, rgba(255, 255, 255, .11)); }
.lpob-rack-cols,
.lpob-node {
    display: grid;
    grid-template-columns: 44px minmax(0, 2.2fr) minmax(0, 1.2fr) minmax(0, 1.4fr) 120px minmax(0, 1.6fr);
    gap: 0 20px;
    align-items: center;
}
.lpob-rack-cols {
    padding: 12px 0;
    font-family: var(--lp-mono);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ob-mute, #64707f);
    border-bottom: 1px solid var(--ob-line, rgba(255, 255, 255, .06));
}
.lpob-node {
    position: relative;
    padding: 18px 0;
    border-bottom: 1px solid var(--ob-line, rgba(255, 255, 255, .06));
    transition: background-color var(--lp-fast) var(--lp-ease);
}
/* hairline sweep along the bottom edge */
.lpob-node::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 1px;
    background: var(--ob-accent, #46c6b8);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--lp-med) var(--lp-ease);
    pointer-events: none;
}
.lpob-node:hover::after, .lpob-node:focus-within::after { transform: scaleX(1); }
.lpob-node:hover { background: linear-gradient(90deg, var(--ob-surface, #141920), transparent 80%); }
.lpob-node:hover .lpob-node-idx { color: var(--ob-accent, #46c6b8); }
.lpob-node-toggle { display: none; }
.lpob-node-id { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lpob-node-name {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 16px; font-weight: 600; letter-spacing: -.01em;
    color: var(--ob-text, #e7ecf3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lpob-node-game, .lpob-node-map {
    font-family: var(--lp-mono);
    font-size: 12px;
    color: var(--ob-dim, #9aa7b8);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lpob-node-map em { font-style: normal; color: var(--ob-mute, #64707f); }
.lpob-node-cap .lpob-meter { margin-top: 0; }
.lpob-node-off { font-family: var(--lp-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ob-mute, #64707f); }
.lpob-node-num { font-size: 15px; font-weight: 600; color: var(--ob-text, #e7ecf3); white-space: nowrap; }
.lpob-node-num span { font-weight: 400; color: var(--ob-mute, #64707f); }
.lpob-node-num small { display: block; font-family: var(--lp-mono); font-size: 10.5px; font-weight: 400; letter-spacing: .08em; color: var(--ob-mute, #64707f); margin-top: 2px; }
.lpob-node.is-off .lpob-node-name, .lpob-node.is-off .lpob-node-num { color: var(--ob-mute, #64707f); }
/* reveal-on-hover meta: address + connect */
.lpob-node-act {
    display: flex; align-items: center; justify-content: flex-end; gap: 14px;
    opacity: 0;
    transform: translateX(6px);
    transition: opacity var(--lp-med) var(--lp-ease), transform var(--lp-med) var(--lp-ease);
}
.lpob-node:hover .lpob-node-act, .lpob-node:focus-within .lpob-node-act { opacity: 1; transform: none; }
.lpob-node-addr { font-family: var(--lp-mono); font-size: 12px; color: var(--ob-mute, #64707f); }
.lpob-rack-foot {
    display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
    padding-top: 16px;
}
.lpob-rack-foot .lpob-label { text-transform: none; letter-spacing: .02em; font-size: 12px; }
/* armed meters grow when the row reveals */
.lpob-anim .lpob-node:not(.is-in) .lpob-meter i { width: 0; }

/* ── 03 / WIRE — threads (big) + signal (small, floating) ────────── */
.lpob-wire-grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: start;
}
.lpob-threads { border-top: 1px solid var(--ob-line-2, rgba(255, 255, 255, .11)); }
.lpob-thread {
    position: relative;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 32px;
    gap: 0 20px;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid var(--ob-line, rgba(255, 255, 255, .06));
    transition: background-color var(--lp-fast) var(--lp-ease);
}
.lpob-thread::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 1px;
    background: var(--ob-accent, #46c6b8);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--lp-med) var(--lp-ease);
    pointer-events: none;
}
.lpob-thread:hover::after { transform: scaleX(1); }
.lpob-thread:hover .lpob-thread-idx { color: var(--ob-accent, #46c6b8); }
.lpob-thread-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lpob-thread-title {
    font-size: clamp(17px, 1.7vw, 21px);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.015em;
    color: var(--ob-text, #e7ecf3);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: transform var(--lp-med) var(--lp-ease);
}
.lpob-thread:hover .lpob-thread-title { transform: translateX(4px); }
.lpob-thread-meta { display: flex; gap: 14px; align-items: center; }
.lpob-thread-who { font-size: 13px; color: var(--ob-dim, #9aa7b8); }
.lpob-thread-when { font-family: var(--lp-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ob-mute, #64707f); }
.lpob-thread-arrow {
    justify-self: end;
    font-size: 18px;
    color: var(--ob-accent, #46c6b8);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity var(--lp-med) var(--lp-ease), transform var(--lp-med) var(--lp-ease);
}
.lpob-thread:hover .lpob-thread-arrow, .lpob-thread:focus-visible .lpob-thread-arrow { opacity: 1; transform: none; }
.lpob-threads-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 16px; }

/* the signal — a floating instrument, pulled up over the section head line */
.lpob-signal {
    position: sticky;
    top: calc(var(--header-h, 64px) + 24px);
    margin-top: -36px;
    padding: 18px 20px 20px;
    background: var(--ob-surface, #141920);
    border: 1px solid var(--ob-line-2, rgba(255, 255, 255, .11));
    border-radius: var(--ob-r-lg, 16px);
    box-shadow: 0 24px 48px -28px rgba(0, 0, 0, .7);
}
.lpob-signal-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--ob-line, rgba(255, 255, 255, .06)); }
.lpob-signal-list { position: relative; margin-top: 4px; }
.lpob-signal-list::before {
    content: '';
    position: absolute;
    left: 61px; top: 8px; bottom: 8px;
    width: 1px;
    background: var(--ob-line, rgba(255, 255, 255, .06));
    pointer-events: none;
}
.lpob-signal-item a {
    position: relative;
    display: grid;
    grid-template-columns: 52px 22px minmax(0, 1fr);
    gap: 0 10px;
    align-items: start;
    padding: 11px 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--ob-dim, #9aa7b8);
    transition: color var(--lp-fast) var(--lp-ease);
}
.lpob-signal-item a:hover { color: var(--ob-text, #e7ecf3); }
.lpob-signal-item + .lpob-signal-item a { border-top: 1px solid var(--ob-line, rgba(255, 255, 255, .06)); }
.lpob-signal-when { font-family: var(--lp-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ob-mute, #64707f); padding-top: 3px; text-align: right; white-space: nowrap; }
.lpob-signal-ico {
    position: relative;
    z-index: 1;
    display: inline-grid; place-items: center;
    width: 22px; height: 22px;
    font-size: 12px;
    background: var(--ob-surface-2, #1a2028);
    border: 1px solid var(--ob-line-2, rgba(255, 255, 255, .11));
    border-radius: 6px;
    transition: border-color var(--lp-fast) var(--lp-ease);
}
.lpob-signal-item a:hover .lpob-signal-ico { border-color: var(--ob-accent-line, rgba(70, 198, 184, .35)); }
.lpob-signal-txt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lpob-signal-txt b { font-weight: 600; color: var(--ob-text, #e7ecf3); }
.lpob-signal-empty { padding: 18px 0 6px; font-size: 13px; color: var(--ob-mute, #64707f); }
.lpob-signal-more { margin-top: 14px; }
/* signal rows cascade in after the panel reveals */
.lpob-anim .lpob-signal.is-in .lpob-signal-item { animation: lpob-rise 420ms var(--lp-ease) both; animation-delay: calc(var(--d, 0) * 55ms + 120ms); }
@keyframes lpob-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── 04 / ROSTER — faces ─────────────────────────────────────────── */
.lpob-faces {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    background: var(--ob-line, rgba(255, 255, 255, .06));
    border: 1px solid var(--ob-line, rgba(255, 255, 255, .06));
}
.lpob-face {
    position: relative;
    flex: 1 1 112px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 26px 12px 20px;
    background: var(--ob-bg, #0e1116);
    transition: background-color var(--lp-fast) var(--lp-ease);
}
.lpob-face:hover, .lpob-face:focus-visible { background: var(--ob-surface, #141920); z-index: 1; }
.lpob-face-idx { position: absolute; left: 10px; top: 10px; }
.lpob-face:hover .lpob-face-idx { color: var(--ob-accent, #46c6b8); }
.lpob-face img {
    width: 64px; height: 64px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--ob-surface-2, #1a2028);
    outline: 1px solid var(--ob-line-2, rgba(255, 255, 255, .11));
    outline-offset: 3px;
    filter: grayscale(.4) contrast(1.04);
    transition: filter var(--lp-med) var(--lp-ease), outline-color var(--lp-med) var(--lp-ease), transform var(--lp-med) var(--lp-ease);
}
.lpob-face:hover img, .lpob-face:focus-visible img { filter: none; outline-color: var(--ob-accent, #46c6b8); transform: translateY(-2px); }
.lpob-face-meta { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; max-width: 100%; }
.lpob-face-name {
    font-size: 13px; font-weight: 600;
    color: var(--ob-dim, #9aa7b8);
    max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: color var(--lp-fast) var(--lp-ease);
}
.lpob-face:hover .lpob-face-name { color: var(--ob-text, #e7ecf3); }
.lpob-face-when {
    font-family: var(--lp-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ob-mute, #64707f);
    opacity: 0;
    transform: translateY(3px);
    transition: opacity var(--lp-med) var(--lp-ease), transform var(--lp-med) var(--lp-ease);
}
.lpob-face:hover .lpob-face-when, .lpob-face:focus-visible .lpob-face-when { opacity: 1; transform: none; }
.lpob-roster-foot { display: flex; gap: 28px; flex-wrap: wrap; padding-top: 18px; }
.lpob-anim .lpob-faces.is-in .lpob-face { animation: lpob-rise 420ms var(--lp-ease) both; animation-delay: calc(var(--d, 0) * 45ms); }

/* ── 05 / SYSTEMS — the index lattice ────────────────────────────── */
.lpob-index {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    background: var(--ob-line, rgba(255, 255, 255, .06));
    border: 1px solid var(--ob-line, rgba(255, 255, 255, .06));
}
.lpob-index-item {
    position: relative;
    flex: 1 1 250px;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: 'idx arrow' 'name arrow' 'desc arrow';
    gap: 6px 12px;
    align-items: center;
    padding: 20px 22px;
    background: var(--ob-bg, #0e1116);
    transition: background-color var(--lp-fast) var(--lp-ease);
}
.lpob-index-item:hover, .lpob-index-item:focus-visible { background: var(--ob-surface, #141920); z-index: 1; }
.lpob-index-item .lpob-idx { grid-area: idx; margin-bottom: 6px; }
.lpob-index-item:hover .lpob-idx { color: var(--ob-accent, #46c6b8); }
.lpob-index-name { grid-area: name; font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: var(--ob-text, #e7ecf3); }
.lpob-index-desc { grid-area: desc; font-size: 13px; color: var(--ob-mute, #64707f); transition: color var(--lp-fast) var(--lp-ease); }
.lpob-index-item:hover .lpob-index-desc { color: var(--ob-dim, #9aa7b8); }
.lpob-index-arrow {
    grid-area: arrow;
    font-size: 16px;
    color: var(--ob-accent, #46c6b8);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity var(--lp-med) var(--lp-ease), transform var(--lp-med) var(--lp-ease);
}
.lpob-index-item:hover .lpob-index-arrow, .lpob-index-item:focus-visible .lpob-index-arrow { opacity: 1; transform: none; }
.lpob-anim .lpob-index.is-in .lpob-index-item { animation: lpob-rise 420ms var(--lp-ease) both; animation-delay: calc(var(--d, 0) * 40ms); }

/* ── 06 / ACCESS ─────────────────────────────────────────────────── */
.lpob-access { padding-bottom: calc(var(--lp-sec) + 8px); }
.lpob-access-grid {
    display: grid;
    grid-template-columns: minmax(140px, 2fr) minmax(0, 7fr) minmax(160px, 3fr);
    gap: 24px clamp(24px, 4vw, 64px);
    align-items: start;
}
.lpob-access-body h2 {
    font-size: clamp(26px, 3vw, 40px);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -.022em;
    max-width: 20ch;
}
.lpob-access-body p { margin-top: 14px; max-width: 52ch; font-size: 15px; line-height: 1.65; color: var(--ob-dim, #9aa7b8); }
.lpob-access-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    padding-top: 10px;
    padding-left: 24px;
    border-left: 1px solid var(--ob-line, rgba(255, 255, 255, .06));
    text-align: right;
    min-height: 100%;
}
.lpob-access-stat { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ob-dim, #9aa7b8); }
.lpob-access-stat b { font-weight: 600; color: var(--ob-text, #e7ecf3); }
.lpob-access-side > .lpob-label:last-child { margin-top: 8px; }

/* ── SCROLL REVEALS (armed only with JS + motion allowed) ────────── */
@media (prefers-reduced-motion: no-preference) {
    .lpob-anim .lpob-rv {
        opacity: 0;
        transform: translateY(10px);
        transition: opacity 460ms var(--lp-ease), transform 460ms var(--lp-ease);
        transition-delay: calc(var(--d, 0) * 60ms);
    }
    .lpob-anim .lpob-rv.is-in { opacity: 1; transform: none; }
}

/* ── RESPONSIVE — real redesigns, not shrinks ────────────────────── */

/* ≥1440: wider stage, bigger identity, roomier rack */
@media (min-width: 1440px) {
    .lpob { --lp-w: 1360px; }
    .lpob-title { font-size: clamp(56px, 4.8vw, 76px); }
    .lpob-console-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
    .lpob-rack-cols, .lpob-node { grid-template-columns: 56px minmax(0, 2.4fr) minmax(0, 1.2fr) minmax(0, 1.6fr) 140px minmax(0, 1.6fr); }
}

/* ≤1024: console stacks; telemetry becomes a two-column bench; wire stacks;
   the signal stops floating and sits as a wide strip under the threads */
@media (max-width: 1024px) {
    .lpob-console { min-height: 0; }
    .lpob-console-grid { grid-template-columns: 1fr; gap: 40px; }
    .lpob-telemetry {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 20px 32px;
        align-items: start;
    }
    .lpob-telemetry > .lpob-tele-head { grid-column: 1 / -1; }
    .lpob-node-mini { margin-left: 0; }
    .lpob-arrivals { grid-column: 1 / -1; }
    .lpob-sec-head { grid-template-columns: 1fr; gap: 18px; }
    .lpob-eyebrow { padding-top: 0; }
    .lpob-wire-grid { grid-template-columns: 1fr; }
    .lpob-signal { position: static; margin-top: 0; }
    .lpob-signal-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
    .lpob-signal-list::before { display: none; }
    .lpob-signal-item:nth-child(2) a { border-top: 0; }
    .lpob-access-grid { grid-template-columns: minmax(0, 1fr) minmax(160px, auto); }
    .lpob-access-grid > .lpob-eyebrow { grid-column: 1 / -1; }
    .lpob-face { flex-basis: 20%; }
}

/* ≤768: the rack collapses to tappable rows; readouts become a strip;
   signal becomes a single column; HUD loses its poll cell */
@media (max-width: 768px) {
    .lpob { --lp-sec: 52px; }
    .lpob-hud { gap: 0 16px; }
    .lpob-hud-poll, .lpob-hud-id .lpob-hud-sep { display: none; }
    .lpob-hud-id { gap: 10px; }
    .lpob-console-grid { padding-top: 28px; gap: 32px; }
    .lpob-tx { max-width: none; }
    .lpob-telemetry { grid-template-columns: 1fr; gap: 20px; }
    .lpob-readouts { grid-template-columns: repeat(4, 1fr); }
    .lpob-readout { padding: 14px 12px 12px; }
    .lpob-readout dd { font-size: 22px; }
    .lpob-arrivals-row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
    .lpob-arrivals-row::-webkit-scrollbar { display: none; }
    .lpob-arrival-name { display: none; }

    /* rack → rows */
    .lpob-rack-cols { display: none; }
    .lpob-node {
        grid-template-columns: 32px minmax(0, 1fr) auto;
        grid-template-areas: 'idx id num' 'map map map' 'cap cap cap' 'act act act';
        gap: 0 14px;
        padding: 16px 0;
    }
    .lpob-node-toggle {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 1;
        background: transparent;
        border: 0;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
    }
    .lpob-node-toggle:focus-visible { outline-offset: -2px; }
    .lpob-node-idx { grid-area: idx; }
    .lpob-node-id { grid-area: id; }
    .lpob-node-num { grid-area: num; text-align: right; }
    .lpob-node-num small { display: none; }
    .lpob-node-map, .lpob-node-cap, .lpob-node-act { display: none; }
    .lpob-node.is-open .lpob-node-map { display: block; grid-area: map; margin-top: 12px; padding-left: 46px; }
    .lpob-node.is-open .lpob-node-cap { display: block; grid-area: cap; margin-top: 10px; padding-left: 46px; }
    .lpob-node.is-open .lpob-node-act { display: flex; grid-area: act; margin-top: 14px; padding-left: 46px; justify-content: space-between; opacity: 1; transform: none; position: relative; z-index: 2; }
    .lpob-node.is-open .lpob-node-map::before { content: 'Map  '; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ob-mute, #64707f); white-space: pre; }
    .lpob-node.is-open { background: var(--ob-surface, #141920); margin: 0 calc(-1 * var(--lp-gutter)); padding-left: var(--lp-gutter); padding-right: var(--lp-gutter); }
    .lpob-node.is-open::after { transform: scaleX(1); }
    /* the index numeral doubles as the disclosure mark */
    .lpob-node-idx::after { content: '+'; margin-left: 6px; color: var(--ob-accent, #46c6b8); }
    .lpob-node.is-open .lpob-node-idx::after { content: '\2013'; }

    .lpob-thread { grid-template-columns: 32px minmax(0, 1fr); gap: 0 14px; padding: 16px 0; }
    .lpob-thread-arrow { display: none; }
    .lpob-signal { padding: 16px; }
    .lpob-signal-list { grid-template-columns: 1fr; }
    .lpob-signal-item:nth-child(2) a { border-top: 1px solid var(--ob-line, rgba(255, 255, 255, .06)); }

    /* faces → horizontal strip */
    .lpob-faces {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 1px;
        border-left: 0; border-right: 0;
        margin: 0 calc(-1 * var(--lp-gutter));
        padding: 0 var(--lp-gutter);
        scrollbar-width: none;
    }
    .lpob-faces::-webkit-scrollbar { display: none; }
    .lpob-face { flex: 0 0 132px; scroll-snap-align: start; }
    .lpob-face-when { opacity: 1; transform: none; }
    .lpob-face img { filter: none; }

    .lpob-index-item { flex-basis: 40%; padding: 16px; }
    .lpob-index-desc { display: none; }
    .lpob-index-arrow { opacity: 1; transform: none; color: var(--ob-mute, #64707f); }

    .lpob-access-grid { grid-template-columns: 1fr; }
    .lpob-access-side { display: none; }
}

/* ≤390: phones — tighter type, one column everywhere, full-width actions */
@media (max-width: 390px) {
    .lpob { --lp-gutter: 16px; --lp-sec: 44px; }
    .lpob-hud { font-size: 10px; letter-spacing: .1em; }
    .lpob-hud-id { display: none; }
    .lpob-hud-clock { margin-left: auto; }
    .lpob-brand-line { display: none; }
    .lpob-brand-logo { height: 36px; }
    .lpob-title { font-size: 34px; }
    .lpob-tagline { font-size: 16px; }
    .lpob-desc { font-size: 14px; }
    .lpob-readouts { grid-template-columns: 1fr 1fr; }
    .lpob-readout dd { font-size: 24px; }
    .lpob-actions { flex-direction: column; }
    .lpob-actions .lpob-btn { width: 100%; justify-content: center; }
    .lpob-sec-title h2 { font-size: 24px; }
    .lpob-sec-title p { font-size: 14px; }
    .lpob-node-name { font-size: 15px; }
    .lpob-thread-title { font-size: 16px; }
    .lpob-face { flex-basis: 120px; }
    .lpob-index-item { flex-basis: 100%; }
    .lpob-rack-foot, .lpob-threads-foot { flex-direction: column; align-items: flex-start; }
    .lpob-console-foot { display: none; }
}

/* touch devices: hover-revealed meta is always visible */
@media (hover: none) {
    .lpob-node-act { opacity: 1; transform: none; }
    .lpob-thread-arrow, .lpob-index-arrow { opacity: 1; transform: none; }
    .lpob-face-when { opacity: 1; transform: none; }
    .lpob-face img { filter: none; }
}

/* ── REDUCED MOTION — the final state, instantly ─────────────────── */
@media (prefers-reduced-motion: reduce) {
    .lpob *, .lpob *::before, .lpob *::after {
        animation: none !important;
        transition: none !important;
    }
    .lpob-scan { display: none; }
    .lpob-dot--on { box-shadow: none; }
    .lpob-meter i { width: var(--pct, 0%) !important; }
    .lpob-tx-item { transition: none; }
}

/* ── PRINT: no decorations, no sticky ────────────────────────────── */
@media print {
    .lpob-bg, .lpob-grain, .lpob-scan, .lpob-console-foot { display: none; }
    .lpob-signal { position: static; }
}