/* tech-ai / lab-console (its own layout: variants/lab-console.html)
   The project as a lab instrument. The first screen is the front panel of a rack:
   modules in brushed graphite frames with corner screws and condensed engraved labels
   (A..F): the hero art in a round scope with a reticle, the unit's nameplate, the
   headline as the instrument's output, the calls to action as panel controls with an
   address readout, a trace drawn from the name's own letters, and the first
   infographic as glowing meters. Below, the rest of the brief is the rack's other
   modules, each on its own channel: the story, the capabilities, the signal chain,
   a log, status lights, the manual, the connection. Graphite, amber and the brand's
   accent as the glow; no phosphor green, no terminal type. */

:root {
  --lc-bg: #0d1014;
  --lc-panel: #161b22;
  --lc-panel-2: #1c222b;
  --lc-edge: #2a323d;
  --lc-label: #8894a6;
  --lc-text: #dde3ec;
  --lc-amber: #ffb347;
  --lc-glow: var(--wl-accent-on-dark);
  --lc-ok: #4ade80;
  --lc-bad: #f87171;
  --lc-cond: "Bahnschrift", "DIN Alternate", "DIN Condensed", "Barlow Condensed", "Roboto Condensed", "Arial Narrow", "Liberation Sans Narrow", "Liberation Sans", Arial, sans-serif;
  --lc-read: "Share Tech Mono", "OCR A Std", "Consolas", "SF Mono", ui-monospace, "Liberation Mono", monospace;

  --v-bg: var(--lc-bg);
  --v-fg: var(--lc-text);
  --v-soft: #b3bdcb;
  --v-faint: var(--lc-label);
  --v-line: var(--lc-edge);
  --v-line-strong: #3a4552;
  --v-surface: var(--lc-panel);
  --v-surface-2: #222a35;
  --v-card-bg: var(--lc-panel-2);
  --v-accent: var(--wl-accent);
  --v-accent-text: var(--lc-glow);
  --v-on-accent: var(--wl-on-accent);
  --v-secondary: var(--lc-amber);
  --v-seg-1: var(--lc-glow);
  --v-seg-2: var(--lc-amber);
  --v-seg-3: #a78bfa;
  --v-seg-4: #f472b6;
  --v-seg-5: #34d399;
  --v-seg-6: var(--lc-label);
  --v-font-body: -apple-system, "Segoe UI", system-ui, "Liberation Sans", Arial, sans-serif;
  --v-font-display: var(--lc-cond);
  --v-font-mono: var(--lc-read);
  --v-display-weight: 700;
  --v-display-tracking: 0.01em;
  --v-display-case: uppercase;
  --v-display-lh: 1.05;
  --v-title-size: clamp(1.4rem, 2.2vw, 1.9rem);
  --v-body-size: 0.98rem;
  --v-radius: 6px;
  --v-radius-sm: 4px;
  --v-radius-lg: 10px;
  --v-border: 1px solid var(--lc-edge);
  --v-shadow: none;
  --v-card-pad: 16px;
  --v-maxw: none;
  --v-pad-x: clamp(12px, 2.4vw, 28px);
  --v-sec-gap: 0px;
  --v-ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* the channel names */
  --wl-label-lore: "Notes";
  --wl-label-features: "Capabilities";
  --wl-label-supply: "Supply meters";
  --wl-label-flow: "Signal chain";
  --wl-label-timeline: "Log";
  --wl-label-comparison: "Meters";
  --wl-label-stats: "Readouts";
  --wl-label-tweet: "Transmission";
  --wl-label-gallery: "Captures";
  --wl-label-facts: "Status";
  --wl-label-quotes: "Observations";
  --wl-label-faq: "Manual";
  --wl-label-access: "Connection";
}

html { background: var(--lc-bg); color-scheme: dark; }
body {
  color: var(--lc-text);
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, color-mix(in srgb, var(--wl-accent) 12%, transparent), transparent 70%),
    repeating-linear-gradient(0deg, rgb(255 255 255 / 0.012) 0 1px, transparent 1px 3px),
    var(--lc-bg);
}
::selection { background: var(--lc-amber); color: #111; }

/* ------------------------------------------------------------ the rack's top rail */
.lc-top {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 18px;
  height: 52px; padding: 0 var(--v-pad-x);
  background: linear-gradient(180deg, #20262f, #151a21);
  border-bottom: 1px solid #0a0c0f;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 6px 14px -8px #000;
}
.lc-plate { display: inline-flex; align-items: center; gap: 10px; flex: none; color: var(--lc-text); text-decoration: none; }
.lc-plate__mark { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #0a0c0f, 0 0 0 3px var(--lc-edge); }
.lc-plate__name { font-family: var(--lc-cond); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.12em; text-transform: uppercase; }
.lc-plate__tick { font-family: var(--lc-read); font-size: 0.78rem; color: var(--lc-amber); }
.lc-leds { margin: 0; display: flex; gap: 12px; flex: none; }
.lc-led { display: inline-flex; align-items: center; gap: 6px; font-family: var(--lc-cond); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lc-label); }
.lc-led::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #2c333d; }
.lc-led--on::before { background: var(--lc-ok); box-shadow: 0 0 8px var(--lc-ok); }
.lc-led--blink::before { background: var(--lc-amber); box-shadow: 0 0 8px var(--lc-amber); animation: lc-blink 1.4s steps(2, jump-none) infinite; }
@keyframes lc-blink { 50% { background: #3a2f1c; box-shadow: none; } }
.lc-channels { display: flex; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; margin-left: auto; }
.lc-channels::-webkit-scrollbar { display: none; }
.lc-channels { counter-reset: lc-ch; }
.lc-channels .wl-nav__link {
  counter-increment: lc-ch;
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 4px;
  background: linear-gradient(180deg, #262d37, #1b2129); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 1px 0 #07090b;
  color: var(--v-soft); text-decoration: none; white-space: nowrap;
  font-family: var(--lc-cond); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase;
  max-width: 16ch; overflow: hidden; text-overflow: ellipsis;
}
.lc-channels .wl-nav__link::before { content: counter(lc-ch, decimal-leading-zero); font-family: var(--lc-read); color: var(--lc-amber); }
.lc-channels .wl-nav__link:hover, .lc-channels .wl-nav__link.is-active { color: #fff; background: linear-gradient(180deg, #2e3743, #212833); }
.lc-net { flex: none; padding: 4px 9px; border: 1px solid var(--lc-edge); border-radius: 4px; font-family: var(--lc-read); font-size: 0.72rem; color: var(--lc-glow); }

/* ------------------------------------------------------------ modules */
.lc-mod, .lc-bay .wl-sec__inner, .lc-mod--meters .wl-sec__inner {
  position: relative;
  min-width: 0;
  padding: 30px 18px 18px;
  border-radius: var(--v-radius-lg);
  background:
    radial-gradient(circle at 9px 9px, #3b4553 0 2.4px, #0b0d10 2.8px, transparent 3.4px) top left / 100% 100% no-repeat,
    radial-gradient(circle at calc(100% - 9px) 9px, #3b4553 0 2.4px, #0b0d10 2.8px, transparent 3.4px) top left / 100% 100% no-repeat,
    radial-gradient(circle at 9px calc(100% - 9px), #3b4553 0 2.4px, #0b0d10 2.8px, transparent 3.4px) top left / 100% 100% no-repeat,
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), #3b4553 0 2.4px, #0b0d10 2.8px, transparent 3.4px) top left / 100% 100% no-repeat,
    linear-gradient(180deg, var(--lc-panel-2), var(--lc-panel));
  border: 1px solid var(--lc-edge);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05), 0 12px 24px -16px #000;
}
.lc-label {
  position: absolute; left: 22px; right: 22px; top: 9px; margin: 0;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--lc-cond); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--lc-label);
}
.lc-label__ch { padding: 0 5px; border: 1px solid var(--lc-edge); border-radius: 3px; font-family: var(--lc-read); letter-spacing: 0; }

/* ------------------------------------------------------------ the front panel */
.lc-deck {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr) minmax(250px, 310px);
  grid-template-areas:
    "scope unit  unit"
    "scope out   ctrl"
    "trace meter meter";
  gap: 12px;
  padding: 14px var(--v-pad-x) 12px;
  max-width: 1400px; margin: 0 auto;
}
.lc-mod--scope { grid-area: scope; display: grid; align-content: start; gap: 12px; }
.lc-mod--unit { grid-area: unit; display: grid; align-content: center; gap: 8px; padding-top: 34px; }
.lc-mod--out { grid-area: out; }
.lc-mod--ctrl { grid-area: ctrl; display: grid; align-content: start; gap: 14px; }
.lc-mod--trace { grid-area: trace; align-self: start; }
.lc-mod--meters { grid-area: meter; padding: 0; background: none; border: 0; box-shadow: none; }
.lc-mod--meters:not(:has(.wl-sec)) { display: none; }
.lc-deck:not(:has(.lc-mod--meters .wl-sec)) { grid-template-areas: "scope unit unit" "scope out ctrl" "trace trace trace"; }

/* the scope */
.lc-scope { position: relative; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: radial-gradient(circle, #0f1a22, #05080a); box-shadow: 0 0 0 6px #0a0d11, 0 0 0 7px var(--lc-edge), inset 0 0 40px #000; }
.lc-scope__img { position: absolute; inset: 0; }
.lc-scope__img .wl-hero-img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.15) contrast(1.05); }
.lc-scope__img.wl-media--post { padding: 18%; }
.lc-scope::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, transparent 58%, rgb(0 0 0 / 0.55)); pointer-events: none; }
.lc-scope__reticle { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; fill: none; stroke: color-mix(in srgb, var(--lc-glow) 55%, transparent); stroke-width: 0.6; pointer-events: none; }
.lc-ticks { stroke-width: 1.2; }
.lc-scope__cap { margin: 0; font-family: var(--lc-read); font-size: 0.74rem; line-height: 1.45; color: var(--lc-label); }
.lc-scope__cap::before { content: "> "; color: var(--lc-amber); }

/* the nameplate */
.lc-unit__name {
  margin: 0;
  font-family: var(--lc-cond); font-weight: 800;
  font-size: clamp(2.8rem, 6.4vw, 5.6rem); line-height: 0.92; letter-spacing: 0.04em; text-transform: uppercase;
  color: #f2f5f9;
  text-shadow: 0 0 22px color-mix(in srgb, var(--lc-glow) 35%, transparent);
}
.lc-unit__meta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.lc-chip { padding: 2px 8px; border: 1px solid var(--lc-edge); border-radius: 3px; font-family: var(--lc-read); font-size: 0.78rem; color: var(--lc-amber); }
.lc-unit__kicker { font-family: var(--lc-cond); font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--v-soft); }

/* the output */
.lc-out__headline {
  margin: 0 0 12px;
  font-family: var(--lc-read); font-weight: 400;
  font-size: clamp(1.45rem, 2.4vw, 2.15rem); line-height: 1.2; letter-spacing: 0;
  color: var(--lc-amber);
  text-shadow: 0 0 10px rgb(255 179 71 / 0.45);
}
.lc-out__sub { margin: 0; font-size: 0.98rem; line-height: 1.55; color: var(--v-soft); }

/* the controls */
.lc-ctrl { display: grid; gap: 8px; }
.lc-ctrl .wl-btn {
  justify-content: flex-start; gap: 10px;
  padding: 10px 12px; border-radius: 6px;
  border: 1px solid #07090b;
  background: linear-gradient(180deg, #2a323e, #1d232c);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08), 0 2px 0 #07090b;
  color: var(--lc-text);
  font-family: var(--lc-cond); font-size: 0.86rem; letter-spacing: 0.1em; text-transform: uppercase;
}
.lc-ctrl .wl-btn::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #2c333d; box-shadow: inset 0 1px 1px #000; }
.lc-ctrl .wl-btn:hover { transform: translateY(1px); border-color: #07090b; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08), 0 1px 0 #07090b; }
.lc-ctrl .wl-btn--primary { background: linear-gradient(180deg, color-mix(in srgb, var(--wl-accent) 85%, #fff), var(--wl-accent)); color: var(--wl-on-accent); }
.lc-ctrl .wl-btn--primary::before { background: #fff; box-shadow: 0 0 8px #fff; }
.lc-ctrl .wl-btn__ca { display: none; }
.lc-readout { margin: 0; display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 4px; background: #07090c; box-shadow: inset 0 1px 4px #000; font-family: var(--lc-read); font-size: 0.86rem; color: var(--lc-amber); text-shadow: 0 0 8px rgb(255 179 71 / 0.4); }
.lc-readout__k { color: var(--lc-label); text-shadow: none; text-transform: uppercase; }

/* the trace */
.lc-trace { display: block; width: 100%; height: 130px; border-radius: 4px; background: linear-gradient(transparent 49.5%, rgb(255 255 255 / 0.06) 50%, transparent 50.5%) 0 0 / 100% 26px, linear-gradient(90deg, transparent 49.5%, rgb(255 255 255 / 0.05) 50%, transparent 50.5%) 0 0 / 30px 100%, #06090c; }
.lc-trace path { fill: none; stroke: var(--lc-glow); stroke-width: 1.6; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 3px var(--lc-glow)); }
.lc-trace__cap { margin: 8px 0 0; font-family: var(--lc-read); font-size: 0.74rem; color: var(--lc-label); text-transform: uppercase; }

/* ------------------------------------------------------------ the rest of the rack */
.lc-bay { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0 var(--v-pad-x) 40px; max-width: 1400px; margin: 0 auto; grid-auto-flow: row dense; }
.lc-bay .wl-sec { padding: 0; min-width: 0; }
.lc-bay .wl-sec--infographic, .lc-bay .wl-sec--faq, .lc-bay .wl-sec--access, .lc-bay .wl-sec--gallery, .lc-bay .wl-sec--quotes { grid-column: 1 / -1; }
.wl-sec__inner { max-width: none; }
.lc-mod--meters .wl-sec { padding: 0; height: 100%; }
.lc-mod--meters .wl-sec__inner { height: 100%; }
.wl-sec__head { margin: 0 0 14px; max-width: none; }
.wl-kicker {
  position: absolute; left: 22px; right: 22px; top: 9px; margin: 0;
  display: flex; justify-content: space-between; gap: 10px;
  font-family: var(--lc-cond); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.22em; color: var(--lc-label);
}
.wl-kicker .wl-ord { order: 2; padding: 0 5px; border: 1px solid var(--lc-edge); border-radius: 3px; font-family: var(--lc-read); letter-spacing: 0; opacity: 1; color: var(--lc-amber); }
.wl-kicker .wl-ord::before { content: "CH "; color: var(--lc-label); }
.wl-sec__title { color: #f2f5f9; }

/* notes */
.wl-lore { max-width: none; }
.wl-lore__lead { font-size: 1.05rem; font-weight: 400; line-height: 1.6; color: var(--lc-text); }
.wl-lore__p { max-width: none; color: var(--v-soft); line-height: 1.65; }

/* capabilities: each in a bezel */
.wl-features { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.wl-feature { display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 14px; padding: 12px; border-radius: 6px; border: 1px solid #0a0d11; background: #11161c; box-shadow: inset 0 1px 3px #000; }
.wl-feature:hover { transform: none; border-color: #0a0d11; }
.wl-feature__icon { grid-row: span 2; width: 46px; height: 46px; margin: 0; border-radius: 50%; background: #0a0d11; box-shadow: 0 0 0 2px var(--lc-edge), 0 0 14px color-mix(in srgb, var(--lc-glow) 30%, transparent); color: var(--lc-glow); }
.wl-feature__icon .wl-glyph { width: 22px; height: 22px; }
.wl-feature .wl-ord { top: 12px; right: 12px; font-family: var(--lc-read); color: var(--lc-label); }
.wl-feature__title { margin: 0 0 2px; font-family: var(--lc-cond); font-size: 1rem; letter-spacing: 0.08em; text-transform: uppercase; color: #f2f5f9; }
.wl-feature__text { font-size: 0.92rem; color: var(--v-soft); }

/* meters: glowing bars, readouts, the table */
.wl-infographic { gap: 16px; }
.wl-bars { gap: 10px; }
.wl-bar { grid-template-columns: minmax(110px, 170px) minmax(0, 1fr) 72px; gap: 12px; }
.wl-bar__label { font-family: var(--lc-cond); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--v-soft); font-weight: 600; }
.wl-bar__track { height: 14px; border-radius: 2px; background: #06090c; box-shadow: inset 0 1px 3px #000; }
.wl-bar__bg { fill: #06090c; }
.wl-bar__fill { fill: var(--lc-glow) !important; filter: drop-shadow(0 0 4px var(--lc-glow)); }
.wl-bar:nth-child(even) .wl-bar__fill { fill: var(--lc-amber) !important; filter: drop-shadow(0 0 4px var(--lc-amber)); }
.wl-bar__value { font-family: var(--lc-read); font-size: 1.05rem; font-weight: 400; color: var(--lc-amber); text-shadow: 0 0 8px rgb(255 179 71 / 0.45); }
.wl-stats { gap: 8px; background: none; border: 0; border-radius: 0; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); }
.wl-stat { padding: 10px 12px; border-radius: 4px; background: #07090c; box-shadow: inset 0 1px 4px #000; }
.wl-stat__label { font-family: var(--lc-cond); font-size: 0.66rem; letter-spacing: 0.18em; color: var(--lc-label); }
.wl-stat__value, .wl-stat--word .wl-stat__value { font-family: var(--lc-read); font-weight: 400; font-size: clamp(1.1rem, 1.8vw, 1.5rem); letter-spacing: 0; color: var(--lc-glow); text-shadow: 0 0 10px color-mix(in srgb, var(--lc-glow) 50%, transparent); }
.wl-table-wrap { border: 1px solid #0a0d11; border-radius: 4px; background: #11161c; }
.wl-table { font-size: 0.88rem; }
.wl-table th, .wl-table td { padding: 8px 12px; border-bottom-color: var(--lc-edge); }
.wl-table thead th { font-family: var(--lc-cond); letter-spacing: 0.16em; color: var(--lc-label); }
.wl-table tbody th { font-family: var(--lc-cond); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.8rem; color: var(--v-soft); }
.wl-cell-yes { color: var(--lc-ok); }
.wl-cell-yes .wl-glyph { filter: drop-shadow(0 0 4px var(--lc-ok)); }
.wl-cell-no { color: var(--lc-bad); }
.wl-caption { font-family: var(--lc-read); font-size: 0.78rem; color: var(--lc-label); }
.wl-donut__track { stroke: #06090c; }
.wl-ring__track { stroke: #06090c; }

/* signal chain */
.wl-flowchart { gap: 0; }
.wl-node__card { padding: 12px 14px; border-radius: 6px; border: 1px solid #0a0d11; background: #11161c; box-shadow: inset 0 1px 3px #000; }
.wl-node__card .wl-ord { width: 30px; height: 30px; margin-bottom: 10px; border-radius: 4px; background: #07090c; color: var(--lc-amber); box-shadow: 0 0 0 1px var(--lc-edge); font-family: var(--lc-read); }
.wl-node__title { font-family: var(--lc-cond); font-size: 1rem; letter-spacing: 0.1em; text-transform: uppercase; color: #f2f5f9; }
.wl-node__text { font-size: 0.9rem; color: var(--v-soft); }
.wl-edge__line { stroke: var(--lc-glow); stroke-width: 2.4; filter: drop-shadow(0 0 3px var(--lc-glow)); }
.wl-edge__head { stroke: var(--lc-glow); }

/* the log */
.wl-milestones { gap: 0; max-width: none; padding: 10px 12px; border-radius: 4px; background: #07090c; box-shadow: inset 0 1px 4px #000; }
.wl-milestones::before { content: none; }
.wl-ms { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 6px 0; border-bottom: 1px dashed #1c232c; font-family: var(--lc-read); font-size: 0.86rem; }
.wl-ms:last-child { border-bottom: 0; }
.wl-ms__dot { display: none; }
.wl-ms__body { display: block; }
.wl-ms__when { display: inline; margin: 0 10px 0 0; font-family: var(--lc-read); font-size: 0.86rem; letter-spacing: 0; text-transform: none; color: var(--lc-amber); }
.wl-ms__when::before { content: "["; } .wl-ms__when::after { content: "]"; }
.wl-ms__title { display: inline; font-family: var(--lc-read); font-size: 0.86rem; font-weight: 400; color: var(--lc-glow); }
.wl-ms__text { margin: 2px 0 0; font-size: 0.84rem; color: var(--v-soft); }

/* status lights */
.wl-facts { gap: 6px; max-width: none; }
.wl-fact { grid-template-columns: 16px minmax(0, 1fr); gap: 12px; padding: 9px 12px; border: 1px solid #0a0d11; border-radius: 4px; background: #11161c; font-size: 0.94rem; }
.wl-fact__mark { width: 10px; height: 10px; margin-top: 6px; background: var(--lc-ok); box-shadow: 0 0 8px var(--lc-ok); }
.wl-fact__mark .wl-glyph { display: none; }

/* the manual */
.wl-faq { gap: 6px; max-width: none; }
.wl-qa { border: 1px solid #0a0d11; border-radius: 4px; background: #11161c; }
.wl-qa__q { padding: 12px 14px; font-family: var(--lc-cond); font-size: 0.96rem; letter-spacing: 0.06em; text-transform: uppercase; }
.wl-qa__a { padding: 0 14px 14px; color: var(--v-soft); }

/* the connection */
.wl-access { gap: 12px; max-width: none; }
.wl-access__net { font-family: var(--lc-cond); color: var(--lc-label); letter-spacing: 0.2em; }
.wl-ca { border: 1px solid #0a0d11; border-radius: 4px; background: #07090c; box-shadow: inset 0 1px 4px #000; }
.wl-ca__label { font-family: var(--lc-cond); color: var(--lc-label); }
.wl-ca__value { font-family: var(--lc-read); color: var(--lc-amber); text-shadow: 0 0 8px rgb(255 179 71 / 0.4); }
.wl-copy { border-radius: 4px; background: linear-gradient(180deg, color-mix(in srgb, var(--wl-accent) 85%, #fff), var(--wl-accent)); color: var(--wl-on-accent); font-family: var(--lc-cond); letter-spacing: 0.1em; text-transform: uppercase; }
.wl-link { border-radius: 4px; border: 1px solid #07090b; background: linear-gradient(180deg, #2a323e, #1d232c); font-family: var(--lc-cond); letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.84rem; }
.wl-link:hover { border-color: #07090b; }

/* anything else */
.wl-quotes { gap: 8px; }
.wl-quote { border-radius: 4px; background: #11161c; border-color: #0a0d11; }
.wl-quote::before { color: var(--lc-amber); }
.wl-gallery { gap: 8px; }
.wl-shot { border-radius: 4px; }
.wl-post { background: #11161c; border-color: #0a0d11; box-shadow: none; }

.lc-foot { max-width: 1400px; margin: 0 auto; padding: 26px var(--v-pad-x) 40px; border-top: 1px solid var(--lc-edge); color: var(--v-soft); }
.lc-foot .wl-foot__name { font-family: var(--lc-cond); letter-spacing: 0.12em; text-transform: uppercase; }

/* ------------------------------------------------------------ motion */
.lc-out__headline .wl-w { animation: lc-on 0.5s steps(3, end) both; animation-delay: calc(var(--i, 0) * 60ms + 0.2s); }
@keyframes lc-on { from { opacity: 0; } }
.lc-trace path { stroke-dasharray: 2400; animation: lc-sweep 1.4s linear both; }
@keyframes lc-sweep { from { stroke-dashoffset: 2400; } to { stroke-dashoffset: 0; } }
.lc-scope__reticle { animation: lc-fade 1s ease 0.2s both; }
@keyframes lc-fade { from { opacity: 0; } }
[data-wl-reveal="on"] .lc-bay .wl-reveal { transform: none; }

/* ------------------------------------------------------------ smaller screens */
@media (max-width: 1080px) {
  .lc-deck { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "unit unit" "scope out" "scope ctrl" "trace trace" "meter meter"; }
  .lc-channels { display: none; }
  .lc-net { margin-left: auto; }
}
@media (max-width: 700px) {
  .lc-top { gap: 12px; }
  .lc-leds { display: none; }
  .lc-deck { grid-template-columns: minmax(0, 1fr); grid-template-areas: "unit" "scope" "out" "ctrl" "trace" "meter"; }
  .lc-mod--scope .lc-scope { width: min(100%, 300px); justify-self: center; }
  .lc-bay { grid-template-columns: minmax(0, 1fr); }
  .lc-bay .wl-sec { grid-column: 1 / -1; }
  .wl-bar { grid-template-columns: minmax(0, 1fr) auto; }
}