/* ============================================================================
   VIVARIUM — THE WING (overview): intro, stations, glass panes, index rail, report
   ========================================================================== */

.wing { position: relative; z-index: var(--z-content); }
.wing { transition: opacity var(--d-slow) var(--e-out); }
body.is-booting .wing { opacity: 0; }

/* ── Intro ─────────────────────────────────────────────────────────────── */
.wing__intro {
  min-height: 92svh;
  display: flex; flex-direction: column; justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-16) var(--gutter) var(--sp-8);
  max-width: 1100px;
}
.wing__intro-tag { font-size: var(--t-micro); letter-spacing: 0.34em; color: var(--live); }
.wing__intro-title {
  font-family: var(--f-display); font-weight: 700;
  font-size: var(--t-title); line-height: 0.96; color: var(--ink);
  letter-spacing: -0.01em;
}
.wing__intro-title em { color: var(--ink-soft); }
.wing__intro-body {
  max-width: 52ch; font-size: var(--t-lead); color: var(--ink-mute); line-height: 1.65;
}

/* ── Stations ──────────────────────────────────────────────────────────── */
.stations { display: flex; flex-direction: column; }

.station {
  min-height: var(--station-h);
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  align-items: center;
  gap: clamp(1.5rem, 1rem + 4vw, 5rem);
  padding: var(--sp-12) var(--gutter);
  position: relative;
}
.station:nth-child(even) { grid-template-columns: 1fr 1.55fr; }
.station:nth-child(even) .station__pane { order: 2; }
.station:nth-child(even) .station__meta { order: 1; }

/* divider tick between stations */
.station::before {
  content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter);
  height: 1px; background: linear-gradient(90deg, var(--line), transparent 60%);
  opacity: 0.5;
}

/* ── Pane / glass ──────────────────────────────────────────────────────── */
.station__pane { position: relative; }
.pane__hit {
  display: block; width: 100%; text-align: left; position: relative;
  cursor: none;
}
@media (hover: none), (pointer: coarse) { .pane__hit { cursor: pointer; } }
.pane__glass {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 5px;
  overflow: hidden;
  background: var(--void-deep);
  box-shadow:
    inset 0 0 0 1px oklch(40% 0.02 250 / 0.6),
    0 30px 80px -40px oklch(4% 0.01 250 / 0.9);
  transform: translateZ(0);
  transition: box-shadow var(--d-slow) var(--e-soft), transform var(--d-slow) var(--e-out);
}
.pane__screen { position: absolute; inset: 0; overflow: hidden; }
.pane__poster {
  position: absolute; inset: -6% 0 -6% 0;
  width: 100%; height: 112%;
  object-fit: cover; object-position: top center;
  filter: saturate(0.82) brightness(0.74) contrast(1.04);
  transition: filter var(--d-slow) var(--e-soft);
}
.pane__live {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  overflow: hidden;                         /* clip the scaled 1440px embed to the pane */
  transition: opacity var(--d-mid) var(--e-soft);
}
.pane__live iframe { width: 100%; height: 100%; border: 0; display: block; background: var(--void-deep); }
.pane__live.is-shown { opacity: 1; }

.pane__scan {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg,
    oklch(80% 0.05 220 / 0.35) 0px, oklch(80% 0.05 220 / 0.35) 1px,
    transparent 2px, transparent 3px);
  opacity: 0.22; mix-blend-mode: soft-light;
}

/* scanning beam — the instrument examining the live specimen (active pane only) */
.pane__scanbeam {
  position: absolute; left: 0; right: 0; top: 0; height: 34%;
  z-index: 4; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, transparent, oklch(85% 0.13 214 / 0.14) 80%, transparent);
  transition: opacity var(--d-mid) var(--e-soft);
}
.pane__scanbeam::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: oklch(92% 0.16 214);
  box-shadow: 0 0 18px 2px oklch(82% 0.15 214 / 0.75);
}
.station.is-active .pane__scanbeam { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .station.is-active .pane__scanbeam { animation: scanSweep 4s var(--e-soft) infinite; }
}
@keyframes scanSweep { 0% { transform: translateY(-110%); } 100% { transform: translateY(330%); } }
body[data-signal="live"] .station.is-active .pane__scanbeam { animation-duration: 2.3s; }

/* scan status badge */
.pane__scanlabel {
  position: absolute; top: 0.75rem; left: 0.85rem; z-index: 5;
  display: none; align-items: center; gap: 0.55em;
  font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: 0.2em;
  color: var(--live); text-shadow: 0 0 12px oklch(80% 0.145 214 / 0.45);
}
.pane__scanlabel::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--live); box-shadow: var(--glow-live);
  animation: pulse 1.4s var(--e-soft) infinite;
}
.station.is-active .pane__scanlabel { display: inline-flex; }

.pane__rim {
  position: absolute; inset: 0; border-radius: 5px; pointer-events: none; z-index: 3;
  box-shadow: inset 0 0 0 1px oklch(55% 0.06 230 / 0.25);
  transition: box-shadow var(--d-slow) var(--e-soft);
}
.pane__edge {
  position: absolute; inset: -1px; border-radius: 6px; pointer-events: none; z-index: 2;
  background: conic-gradient(from var(--edge-a, 0deg),
    transparent 0deg, oklch(82% 0.13 214 / 0) 40deg,
    oklch(85% 0.14 214 / 0.55) 90deg, transparent 140deg, transparent 360deg);
  opacity: 0;
  padding: 1px;
  -webkit-mask: linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  -webkit-mask-composite: xor; mask-composite: exclude;
  transition: opacity var(--d-mid) var(--e-soft);
}

.pane__id {
  position: absolute; left: 0.85rem; bottom: 0.7rem; z-index: 4;
  font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: 0.22em;
  color: oklch(80% 0.04 220 / 0.7); text-shadow: 0 1px 0 oklch(0% 0 0 / 0.5);
  transition: color var(--d-mid);
}
.pane__corner {
  position: absolute; z-index: 4; width: 14px; height: 14px; pointer-events: none;
  border: 1px solid oklch(70% 0.06 220 / 0.4);
}
.pane__corner--tl { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.pane__corner--tr { top: 8px; right: 8px; border-left: 0; border-bottom: 0; }
.pane__corner--bl { bottom: 8px; left: 8px; border-right: 0; border-top: 0; }
.pane__corner--br { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }

.pane__boot {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  display: grid; place-items: center;
  font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: 0.2em;
  color: var(--live);
  background: oklch(8% 0.01 250 / 0.2);
  opacity: 0;
}

.pane__observe {
  position: absolute; right: 0; bottom: -1px; transform: translateY(100%);
  display: inline-flex; align-items: center; gap: 0.7em;
  margin-top: var(--sp-2); padding: 0.8em 1.2em;
  font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: 0.2em;
  color: var(--ink-mute);
  transition: color var(--d-mid);
}
.pane__observe span:last-child { color: var(--amber); transition: transform var(--d-fast) var(--e-out); }
.pane__observe:hover { color: var(--ink); }
.pane__observe:hover span:last-child { text-shadow: var(--glow-amber); }
.pane__observe:hover span:last-child { transform: translateX(4px); }

/* ── Active station (loupe settle / surge) ─────────────────────────────── */
.station.is-active .pane__glass {
  box-shadow: var(--rim-live),
    0 40px 120px -50px oklch(80% 0.12 214 / 0.35),
    0 30px 80px -40px oklch(4% 0.01 250 / 0.95);
}
.station.is-active .pane__poster { filter: saturate(1) brightness(0.92) contrast(1.04); }
.station.is-active .pane__rim { box-shadow: inset 0 0 0 1px oklch(80% 0.145 214 / 0.5), inset 0 0 36px oklch(80% 0.145 214 / 0.12); }
.station.is-active .pane__edge { opacity: calc(0.4 + var(--rim-energy) * 0.6); }
.station.is-active .pane__id { color: var(--live); }

@media (prefers-reduced-motion: no-preference) {
  /* poster stays still — the slow background zoom (posterDrift) was distracting AND
     kept a permanent will-change compositor layer alive. The pane edge no longer spins
     (edgeSpin was a 60fps main-thread conic re-raster). Both removed for smoothness. */
  body[data-signal="live"] .station.is-active .pane__screen { animation: screenFlicker 4.5s steps(60) infinite; }
}
@keyframes posterDrift { from { transform: translateY(0) scale(1.02); } to { transform: translateY(-6%) scale(1.06); } }
@keyframes edgeSpin { to { --edge-a: 360deg; } }
@keyframes screenFlicker {
  0%,100% { opacity: 1; } 4% { opacity: 0.86; } 6% { opacity: 1; }
  48% { opacity: 0.97; } 50% { opacity: 0.8; } 52% { opacity: 1; } 70% { opacity: 0.93; }
}
@property --edge-a { syntax: "<angle>"; inherits: true; initial-value: 0deg; }

/* ── Station meta (spec sheet) ─────────────────────────────────────────── */
.station__meta { display: flex; flex-direction: column; gap: var(--sp-2); max-width: 42ch; }
.meta__index { font-size: var(--t-micro); letter-spacing: 0.3em; color: var(--ink-faint); }
.meta__name {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(2rem, 1.2rem + 3vw, 3.6rem); line-height: 0.9; color: var(--ink);
  letter-spacing: -0.01em;
}
.station.is-active .meta__name { text-shadow: 0 0 40px oklch(80% 0.145 214 / 0.18); }
.meta__class { font-size: var(--t-micro); letter-spacing: 0.24em; color: var(--ink-soft); text-transform: uppercase; }
.meta__note { font-size: var(--t-body); color: var(--ink-mute); line-height: 1.65; }
.meta__note::before { content: "“"; color: var(--live); }
.meta__note::after  { content: "”"; color: var(--live); }

.meta__vitals { display: grid; grid-template-columns: auto 1fr; gap: 0.3em 1.2em; margin-top: var(--sp-1); }
.meta__vitals dt { font-size: var(--t-micro); letter-spacing: 0.18em; color: var(--ink-faint); }
.meta__vitals dd { font-size: var(--t-micro); letter-spacing: 0.08em; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.meta__vitals dd .ok { color: var(--live); }

.meta__status { margin-top: var(--sp-1); font-size: var(--t-micro); letter-spacing: 0.2em; color: var(--ink-mute); }
.meta__status b { color: var(--live); font-weight: 700; text-shadow: 0 0 12px oklch(80% 0.145 214 / 0.35); }

/* ── Index rail ────────────────────────────────────────────────────────── */
.rail {
  position: fixed; right: var(--gutter); top: 50%; transform: translateY(-50%);
  z-index: var(--z-hud);
  display: flex; flex-direction: column; gap: 0.55rem; align-items: flex-end;
  pointer-events: none;
  transition: opacity var(--d-slow);
}
body.is-booting .rail { opacity: 0; }
.rail__tick {
  pointer-events: auto;
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.16em; color: var(--ink-faint);
}
.rail__tick .n { opacity: 0; transition: opacity var(--d-fast); width: 1.4em; text-align: right; }
.rail__tick .bar { width: 14px; height: 2px; background: var(--line); transition: width var(--d-mid) var(--e-out), background var(--d-mid); }
.rail__tick:hover .n,
.rail__tick:focus-visible .n { opacity: 1; }
.rail__tick:hover .bar,
.rail__tick:focus-visible .bar { width: 22px; background: var(--ink-mute); }
.rail__tick.is-active .n { opacity: 1; color: var(--live); }
.rail__tick.is-active .bar { width: 30px; background: var(--live); box-shadow: var(--glow-live); }
@media (max-width: 860px) { .rail { display: none; } }

/* ── EXIT — field report ───────────────────────────────────────────────── */
.report {
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  gap: var(--sp-3); padding: var(--sp-16) var(--gutter);
  max-width: 1000px; margin: 0 auto;
}
.report__kicker { font-size: var(--t-micro); letter-spacing: 0.3em; color: var(--live); }
.report__sheet {
  border: 1px solid var(--line); border-radius: 3px;
  background: oklch(16% 0.012 250 / 0.5);
  backdrop-filter: blur(6px);
}
.report__row {
  display: grid; grid-template-columns: 9.5rem 1fr; gap: 1rem;
  padding: 0.9rem 1.3rem; border-bottom: 1px solid var(--line);
  font-size: var(--t-label);
}
.report__row:last-child { border-bottom: 0; }
.report__row .k { color: var(--ink-faint); letter-spacing: 0.2em; font-size: var(--t-micro); align-self: center; }
.report__row .v { color: var(--ink-soft); }
.report__row .v--live { color: var(--live); font-weight: 700; text-shadow: var(--glow-live); }
@media (max-width: 560px) { .report__row { grid-template-columns: 1fr; gap: 0.2rem; } }

.report__cta-title {
  margin-top: var(--sp-4);
  font-family: var(--f-display); font-weight: 700;
  font-size: var(--t-title); line-height: 0.95; color: var(--ink); letter-spacing: -0.01em;
}
.report__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.report__signoff { margin-top: var(--sp-4); font-size: var(--t-micro); letter-spacing: 0.18em; color: var(--ink-faint); }

/* ── Responsive: stack stations ────────────────────────────────────────── */
@media (max-width: 820px) {
  .station, .station:nth-child(even) { grid-template-columns: 1fr; gap: var(--sp-3); min-height: auto; padding: var(--sp-8) var(--gutter); }
  .station:nth-child(even) .station__pane { order: 1; }
  .station:nth-child(even) .station__meta { order: 2; }
  .pane__observe { position: static; transform: none; padding-left: 0; }
}

/* ════════ INCUBATOR — build your own mini-site ════════════════════════ */
.incubator { padding: var(--sp-16) var(--gutter); max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--sp-6); }
.incubator__tag { font-size: var(--t-micro); letter-spacing: 0.3em; color: var(--live); }
.incubator__title { font-family: var(--f-display); font-weight: 700; font-size: var(--t-title); line-height: 0.95; color: var(--ink); letter-spacing: -0.01em; }
.incubator__title em { color: var(--ink-soft); }
.incubator__lead { max-width: 52ch; font-size: var(--t-lead); color: var(--ink-mute); line-height: 1.6; }
.incubator__lab { display: grid; grid-template-columns: 320px 1fr; gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: start; }

.incubator__controls { display: flex; flex-direction: column; gap: var(--sp-3); }
.ctrl { display: flex; flex-direction: column; gap: 0.5em; min-width: 0; }
.ctrl > span { font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: 0.2em; color: var(--ink-faint); }
.ctrl input { width: 100%; min-width: 0; font-family: var(--f-mono); font-size: var(--t-body); color: var(--ink); background: oklch(16% 0.012 250 / 0.6); border: 1px solid var(--line); border-radius: 3px; padding: 0.7em 0.85em; transition: border-color var(--d-mid), box-shadow var(--d-mid); }
.ctrl input:focus { outline: none; border-color: var(--live-deep); box-shadow: 0 0 0 1px var(--live-deep); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; gap: 2px; align-self: flex-start; }
.seg button { font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: 0.1em; color: var(--ink-mute); padding: 0.6em 1em; border-radius: 999px; transition: background var(--d-mid), color var(--d-mid); }
.seg button.is-on { background: var(--live); color: var(--void-deep); font-weight: 700; }
.swatches { display: flex; gap: 0.6rem; }
.swatch { width: 26px; height: 26px; border-radius: 50%; background: var(--c); border: 2px solid transparent; transition: transform var(--d-fast), border-color var(--d-fast), box-shadow var(--d-fast); }
.swatch:hover { transform: scale(1.12); }
.swatch.is-on { border-color: var(--ink); box-shadow: 0 0 14px var(--c); }
.incubator__rand { align-self: flex-start; font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: 0.18em; color: var(--ink-soft); border: 1px solid var(--line); border-radius: 2px; padding: 0.9em 1.3em; transition: border-color var(--d-mid), color var(--d-mid); }
.incubator__rand:hover { border-color: var(--live-deep); color: var(--live); }

.incubator__stage { display: flex; flex-direction: column; gap: 0.8rem; }
.incubator__stage .pane__glass { aspect-ratio: 16 / 10; }
.incubator__hint { font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: 0.16em; color: var(--ink-faint); }
.incubator__preview { position: absolute; inset: 0; overflow: hidden; border-radius: 5px; }

/* richer controls */
.ctrl--row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.presets { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; }
.presets button { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--ink-mute); border: 1px solid var(--line); border-radius: 3px; padding: 0.75em 0.5em; transition: border-color var(--d-fast), color var(--d-fast), background var(--d-fast); }
.presets button:hover { border-color: var(--live-deep); color: var(--ink); }
.presets button.is-on { background: var(--live); color: var(--void-deep); border-color: var(--live); font-weight: 700; }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chips button { font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.1em; color: var(--ink-mute); border: 1px solid var(--line); border-radius: 999px; padding: 0.55em 0.85em; transition: border-color var(--d-fast), color var(--d-fast), background var(--d-fast); }
.chips button:hover { border-color: var(--live-deep); color: var(--ink); }
.chips button.is-on { background: var(--live-deep); border-color: var(--live-deep); color: var(--live); }

/* ── the mini-site (preset-driven) ── */
.mini { position: absolute; inset: 0; display: flex; flex-direction: column; isolation: isolate; }
.mini__bg, .mini__grid, .mini__noise, .mini__scanlines { position: absolute; inset: 0; pointer-events: none; }
.mini__bg { z-index: 0; background-position: center; }
.mini__grid { z-index: 1; opacity: 0; }
.mini__noise { z-index: 6; opacity: 0; mix-blend-mode: soft-light; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.mini__scanlines { z-index: 6; opacity: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,0.5) 0 1px, transparent 1px 3px); mix-blend-mode: soft-light; }
.mini__bar { position: relative; z-index: 3; display: flex; justify-content: space-between; align-items: center; padding: 0.9em 1.1em; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.12em; }
.mini__nav { display: inline-flex; gap: 6px; }
.mini__nav i { width: 14px; height: 3px; background: currentColor; opacity: 0.5; border-radius: 2px; }
.mini__hero { position: relative; z-index: 3; flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 0.5em; padding: 0 1.4em; }
.mini__badge { align-self: flex-start; font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.2em; padding: 0.35em 0.7em; border-radius: 999px; }
.mini__name { font-weight: 800; line-height: 0.9; font-size: clamp(1.8rem, 6vw, 3.6rem); word-break: break-word; }
.mini__tag { font-size: 12px; max-width: 28ch; line-height: 1.45; }
.mini__cta { align-self: flex-start; margin-top: 0.4em; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.16em; padding: 0.75em 1.2em; border-radius: 3px; font-weight: 700; }
[data-align="center"] .mini__hero { align-items: center; text-align: center; }
[data-align="center"] .mini__badge, [data-align="center"] .mini__cta { align-self: center; }

/* effects */
.mini.is-grain .mini__noise { opacity: 0.6; }
.mini.is-scan .mini__scanlines { opacity: 0.22; }
.mini.is-glow .mini__name { text-shadow: 0 0 36px var(--accent), 0 0 10px color-mix(in oklch, var(--accent) 60%, transparent); }
.mini.is-glow .mini__cta { box-shadow: 0 0 24px var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .mini.is-animate .mini__bg { background-size: 220% 220%; animation: miniFlow 13s ease-in-out infinite alternate; }
}
@keyframes miniFlow { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }

/* LAB */
[data-preset="lab"] .mini { background: oklch(12% 0.012 250); color: oklch(90% 0.012 230); font-family: var(--f-mono); }
[data-preset="lab"] .mini__bar { color: var(--ink-mute); border-bottom: 1px solid oklch(28% 0.012 250); }
[data-preset="lab"] .mini__grid { opacity: 0.12; background: repeating-linear-gradient(0deg, color-mix(in oklch, var(--accent) 50%, transparent) 0 1px, transparent 1px 26px), repeating-linear-gradient(90deg, color-mix(in oklch, var(--accent) 50%, transparent) 0 1px, transparent 1px 26px); -webkit-mask: radial-gradient(130% 90% at 50% 0%, #000, transparent 78%); mask: radial-gradient(130% 90% at 50% 0%, #000, transparent 78%); }
[data-preset="lab"] .mini__badge { color: var(--accent); border: 1px solid color-mix(in oklch, var(--accent) 40%, transparent); }
[data-preset="lab"] .mini__name { font-family: var(--f-display); color: oklch(96% 0.01 230); }
[data-preset="lab"] .mini__tag { color: var(--ink-mute); }
[data-preset="lab"] .mini__cta { background: var(--accent); color: oklch(12% 0 0); }

/* VAPORWAVE */
[data-preset="vaporwave"] .mini { color: #fff; font-family: var(--f-display); }
[data-preset="vaporwave"] .mini__bg { background: radial-gradient(120px 120px at 50% 30%, color-mix(in oklch, var(--accent) 75%, #ffe), transparent 70%), linear-gradient(180deg, oklch(45% 0.18 350), oklch(33% 0.16 300) 45%, oklch(18% 0.12 280) 72%, oklch(9% 0.08 270)); }
[data-preset="vaporwave"] .mini__grid { opacity: 0.5; top: auto; bottom: 0; height: 46%; background-image: linear-gradient(color-mix(in oklch, var(--accent) 85%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in oklch, var(--accent) 85%, transparent) 1px, transparent 1px); background-size: 30px 30px; background-position: center bottom; transform: perspective(150px) rotateX(64deg); transform-origin: bottom; -webkit-mask: linear-gradient(transparent, #000 70%); mask: linear-gradient(transparent, #000 70%); }
[data-preset="vaporwave"] .mini__bar { font-family: var(--f-mono); color: color-mix(in oklch, var(--accent) 80%, white); }
[data-preset="vaporwave"] .mini__badge { font-family: var(--f-mono); color: var(--accent); text-shadow: 0 0 10px var(--accent); }
[data-preset="vaporwave"] .mini__name { background: linear-gradient(180deg, #fff 30%, var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -0.02em; }
[data-preset="vaporwave"] .mini__tag { font-family: var(--f-mono); color: oklch(92% 0.02 320); }
[data-preset="vaporwave"] .mini__cta { background: var(--accent); color: oklch(18% 0.06 320); }

/* AURORA */
[data-preset="aurora"] .mini { color: #fff; font-family: var(--f-display); }
[data-preset="aurora"] .mini__bg { background: radial-gradient(55% 55% at 18% 22%, color-mix(in oklch, var(--accent) 75%, transparent), transparent 60%), radial-gradient(45% 45% at 82% 28%, oklch(72% 0.2 200 / 0.85), transparent 60%), radial-gradient(60% 60% at 62% 92%, oklch(66% 0.24 320 / 0.75), transparent 60%), oklch(14% 0.04 280); }
[data-preset="aurora"] .mini__bar { font-family: var(--f-mono); color: rgba(255,255,255,0.82); }
[data-preset="aurora"] .mini__badge { font-family: var(--f-mono); color: #fff; background: rgba(255,255,255,0.16); backdrop-filter: blur(6px); }
[data-preset="aurora"] .mini__name { color: #fff; letter-spacing: -0.02em; }
[data-preset="aurora"] .mini__tag { color: rgba(255,255,255,0.84); font-family: var(--f-mono); }
[data-preset="aurora"] .mini__cta { background: #fff; color: oklch(22% 0.06 280); }

/* BRUTALIST */
[data-preset="brutalist"] .mini { background: oklch(95% 0.02 95); color: oklch(12% 0 0); font-family: var(--f-display); }
[data-preset="brutalist"] .mini__bar { font-family: var(--f-mono); color: oklch(12% 0 0); border-bottom: 2px solid oklch(12% 0 0); }
[data-preset="brutalist"] .mini__nav i { background: oklch(12% 0 0); opacity: 1; }
[data-preset="brutalist"] .mini__badge { font-family: var(--f-mono); color: oklch(96% 0.02 95); background: var(--accent); border-radius: 0; font-weight: 700; }
[data-preset="brutalist"] .mini__name { color: oklch(10% 0 0); font-size: clamp(2.2rem, 8vw, 4.8rem); line-height: 0.82; letter-spacing: -0.03em; }
[data-preset="brutalist"] .mini__tag { color: oklch(28% 0 0); font-family: var(--f-mono); }
[data-preset="brutalist"] .mini__cta { background: oklch(12% 0 0); color: oklch(96% 0.02 95); border-radius: 0; box-shadow: 5px 5px 0 var(--accent); }

/* GLASS */
[data-preset="glass"] .mini { color: #fff; font-family: var(--f-display); }
[data-preset="glass"] .mini__bg { background: radial-gradient(50% 55% at 25% 25%, color-mix(in oklch, var(--accent) 62%, transparent), transparent 62%), radial-gradient(55% 60% at 82% 72%, oklch(60% 0.2 250 / 0.8), transparent 62%), oklch(30% 0.08 272); }
[data-preset="glass"] .mini__hero { margin: auto 1.2em; padding: 1.3em 1.4em; border-radius: 16px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.22); backdrop-filter: blur(16px); flex: 0 0 auto; }
[data-preset="glass"] .mini__bar { color: rgba(255,255,255,0.85); font-family: var(--f-mono); }
[data-preset="glass"] .mini__badge { font-family: var(--f-mono); color: #fff; background: rgba(255,255,255,0.2); }
[data-preset="glass"] .mini__name { color: #fff; }
[data-preset="glass"] .mini__tag { color: rgba(255,255,255,0.85); font-family: var(--f-mono); }
[data-preset="glass"] .mini__cta { background: #fff; color: oklch(25% 0.06 270); }

/* EDITORIAL */
[data-preset="editorial"] .mini { background: oklch(95% 0.008 90); color: oklch(15% 0.01 60); font-family: var(--f-display); }
[data-preset="editorial"] .mini__bar { font-family: var(--f-mono); color: oklch(42% 0.01 60); border-bottom: 1px solid oklch(82% 0.01 80); }
[data-preset="editorial"] .mini__nav i { background: oklch(42% 0.01 60); }
[data-preset="editorial"] .mini__hero { padding: 0 1.6em; gap: 0.7em; }
[data-preset="editorial"] .mini__badge { font-family: var(--f-mono); color: var(--accent); background: transparent; padding: 0; letter-spacing: 0.3em; }
[data-preset="editorial"] .mini__name { color: oklch(14% 0.01 60); font-weight: 700; font-size: clamp(2rem, 7vw, 4rem); letter-spacing: -0.02em; }
[data-preset="editorial"] .mini__tag { color: oklch(35% 0.01 60); font-size: 13px; max-width: 30ch; }
[data-preset="editorial"] .mini__cta { background: oklch(15% 0.01 60); color: oklch(95% 0.008 90); }

@media (max-width: 820px) { .incubator__lab { grid-template-columns: 1fr; } }