/* ============================================================
   KELHEM - PORTFOLIO
   Palette: near-black + cyan, warm amber as the rare accent.
   ============================================================ */

:root {
  /* base */
  --bg:          #04070a;
  --bg-2:        #070c11;
  --surface:     #0b1219;
  --surface-2:   #0f1922;
  --line:        rgba(255,255,255,.07);
  --line-strong: rgba(0,229,255,.28);

  /* text */
  --text:        #e7f2f6;
  --text-dim:    #93a6b2;
  --text-faint:  #5d6f7c;

  /* accents */
  --cyan:        #00e5ff;
  --cyan-soft:   #6ff2ff;
  --cyan-deep:   #0891a8;
  --amber:       #ffb066;          /* used sparingly - CTA + flagship */
  --amber-soft:  #ffd0a3;

  /* glow */
  --glow-cyan:   0 0 24px rgba(0,229,255,.35), 0 0 64px rgba(0,229,255,.12);
  --glow-amber:  0 0 24px rgba(255,176,102,.35), 0 0 64px rgba(255,176,102,.12);

  /* type */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;

  /* layout */
  --wrap: 1240px;
  --gut: clamp(20px, 4vw, 56px);
  --ease: cubic-bezier(.22,1,.36,1);
}

/* cross-document page transitions (progressive enhancement, motion-gated) */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* The cover fx deliberately bleed past the cards (canvases overscan by
   200px, the sakura and the controllers hang off the edges). overflow-x
   hidden on body alone does not stop a phone from PANNING sideways to
   that overflow: it makes body a scroll container, and mobile browsers
   still let the viewport drift. clip on both roots forbids horizontal
   scrolling outright and creates no scroll container at all. */
html, body { overflow-x: clip; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

::selection { background: var(--cyan); color: #001016; }

/* scrollbar */
::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #16242e; border-radius: 9px; }
::-webkit-scrollbar-thumb:hover { background: var(--cyan-deep); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gut); }

/* ---------- scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: calc(var(--d, 0) * 90ms);
}
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px var(--gut);
  transition: background .4s var(--ease), padding .4s var(--ease), border-color .4s;
  border-bottom: 1px solid transparent;
}
.nav.stuck {
  background: rgba(4,7,10,.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
  padding-block: 13px;
}
.nav__logo {
  font-family: var(--font-display);
  font-weight: 700; font-size: 17px; letter-spacing: .16em;
}
.nav__logo .dot { color: var(--cyan); text-shadow: var(--glow-cyan); }

.nav__links { display: flex; align-items: center; gap: 30px; }
.nav__links a {
  font-size: 13.5px; font-weight: 500; letter-spacing: .04em;
  color: var(--text-dim);
  transition: color .25s;
  position: relative;
}
.nav__links a:not(.nav__cta)::after {
  content: ''; position: absolute; left: 0; bottom: -5px;
  width: 100%; height: 1px; background: var(--cyan);
  transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--ease);
  box-shadow: 0 0 8px var(--cyan);
}
.nav__links a:hover { color: var(--text); }
.nav__links a:not(.nav__cta):hover::after { transform: scaleX(1); transform-origin: left; }

.nav__cta {
  border: 1px solid var(--line-strong);
  color: var(--cyan) !important;
  padding: 8px 18px; border-radius: 100px;
  transition: box-shadow .3s, background .3s;
}
.nav__cta:hover { background: rgba(0,229,255,.08); box-shadow: var(--glow-cyan); }

@media (max-width: 640px) {
  .nav__links a:not(.nav__cta) { display: none; }
}

/* ============================================================
   HERO   (replaceable module)
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  /* bottom padding reserves room for the tools ticker (86px offset + its height),
     so it can never overlap the CTA buttons at any viewport */
  padding: 120px var(--gut) 150px;
  overflow: hidden;
}
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 30%, transparent 20%, rgba(4,7,10,.5) 70%, var(--bg) 100%),
    linear-gradient(to bottom, rgba(4,7,10,.55) 0%, transparent 30%, transparent 60%, var(--bg) 100%);
}

.hero__inner { position: relative; z-index: 2; width: 100%; max-width: var(--wrap); margin: 0 auto; }

.hero__eyebrow {
  font-family: var(--font-display);
  font-size: 12.5px; font-weight: 600;
  letter-spacing: .34em; text-transform: uppercase;
  color: var(--cyan);
  text-shadow: 0 0 18px rgba(0,229,255,.5);
  margin-bottom: 26px;
}
.hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.9rem, 7.4vw, 6.4rem);
  font-weight: 700; line-height: 1.02; letter-spacing: -.03em;
  margin-bottom: 28px;
}
.hero__title .grad {
  background: linear-gradient(100deg, var(--cyan) 0%, var(--cyan-soft) 45%, var(--amber) 110%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 26px rgba(0,229,255,.3));
}
.hero__lead {
  max-width: 54ch; font-size: clamp(15px, 1.35vw, 18px);
  color: var(--text-dim); margin-bottom: 40px;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

.hero__eyebrow .nick {
  color: var(--amber);
  text-shadow: 0 0 18px rgba(255,176,102,.45);
  margin-left: 10px;
}

/* ---- tools ticker ---- */
.hero__tools {
  position: absolute; left: 0; right: 0; bottom: 86px; z-index: 2;
  pointer-events: none;   /* decorative: must never steal taps from the CTAs */
}
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track {
  display: inline-flex; align-items: center;
  white-space: nowrap;
  animation: marquee 36s linear infinite;
  will-change: transform;
}
/* spacing lives on the children, not flex gap: the track is two identical
   halves, and translateX(-50%) only lands on the seam if each half is
   exactly half the track width (a gap would add half a gap of drift) */
.marquee__track > * { margin-right: 28px; }
.marquee__track span {
  font-family: var(--font-display);
  font-size: 12.5px; font-weight: 600;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--text-faint);
}
.marquee__track i {
  font-style: normal; color: var(--cyan);
  text-shadow: 0 0 10px rgba(0,229,255,.5);
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}
@media (max-height: 760px) { .hero__tools { display: none; } }

.hero__scroll {
  position: absolute; bottom: 30px; left: 50%; translate: -50% 0; z-index: 2;
  width: 22px; height: 46px;
}
.hero__scroll-line {
  position: absolute; left: 50%; top: 0; width: 1px; height: 100%;
  background: linear-gradient(to bottom, transparent, var(--cyan));
  animation: scrollpulse 2.4s var(--ease) infinite;
  opacity: .6;
}
@keyframes scrollpulse {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 0; }
  40%  { transform: scaleY(1); transform-origin: top; opacity: .8; }
  60%  { transform: scaleY(1); transform-origin: bottom; opacity: .8; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}
/* must come AFTER the scrollpulse declaration to win the cascade */
@media (prefers-reduced-motion: reduce) {
  .hero__scroll-line { animation: none; }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 14px; font-weight: 600; letter-spacing: .02em;
  padding: 14px 30px; border-radius: 100px;
  border: 1px solid transparent;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease),
              background .3s, color .3s, border-color .3s;
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }

.btn--primary {
  background: var(--cyan); color: #00161c;
  box-shadow: 0 0 0 rgba(0,229,255,0);
}
.btn--primary:hover { box-shadow: var(--glow-cyan); }

.btn--ghost {
  border-color: var(--line-strong); color: var(--cyan);
  background: rgba(0,229,255,.03);
}
.btn--ghost:hover {
  background: rgba(0,229,255,.09);
  box-shadow: var(--glow-cyan);
}

/* ============================================================
   SECTION SHELL
   ============================================================ */
.section { position: relative; padding: clamp(90px, 12vw, 160px) 0; }

.sec-head { max-width: 720px; margin-bottom: clamp(44px, 6vw, 72px); }
.sec-head__tag {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 11.5px; font-weight: 600;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--cyan); margin-bottom: 16px;
}
.sec-head__title {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4.6vw, 3.6rem);
  font-weight: 700; letter-spacing: -.025em; line-height: 1.06;
  margin-bottom: 18px;
}
.sec-head__sub { color: var(--text-dim); font-size: clamp(15px, 1.2vw, 17px); max-width: 60ch; }

/* ============================================================
   PLACEHOLDERS  (delete once real assets land)
   ============================================================ */
.ph {
  position: relative;
  display: grid; place-items: center;
  border: 1px dashed rgba(0,229,255,.22);
  border-radius: 14px;
  background:
    radial-gradient(120% 120% at 30% 10%, rgba(0,229,255,.07), transparent 60%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.018) 0 12px, transparent 12px 24px),
    var(--surface);
  overflow: hidden;
  transition: border-color .4s, box-shadow .4s;
}
.ph::after {
  content: attr(data-ph);
  font-family: var(--font-display);
  font-size: 11px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--text-faint);
  text-align: center; padding: 0 14px;
}
.ph--video   { aspect-ratio: 16/9; }
.ph--sq      { aspect-ratio: 1/1; }
.ph--wide    { aspect-ratio: 16/10; }
.ph--card    { aspect-ratio: 4/3; border-radius: 0; border: 0; }
.ph--portrait{ aspect-ratio: 3/4; }

/* ============================================================
   WORK - editorial index (alternating rows)
   ============================================================ */
.index { display: flex; flex-direction: column; gap: clamp(26px, 4.5vw, 60px); }

.entry {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(16px, 1.8vw, 26px);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  overflow: hidden;   /* keeps the ghost index number inside the card */
  transition: transform .55s var(--ease), border-color .45s, box-shadow .45s;
  will-change: transform;
}
/* .is-hot is the touch twin of :hover, set by js/mobile.js when the card
   crosses the middle of the viewport (a phone has nothing to hover with).
   Every hover rule that describes CARD STATE carries the twin right here,
   so the two can never drift apart. */
.entry:hover,
.entry.is-hot {
  transform: translateY(-4px);
  border-color: rgba(0,229,255,.4);
  box-shadow: 0 40px 80px -44px rgba(0,0,0,.9), 0 0 40px rgba(0,229,255,.1);
}
/* zigzag: flip the media side on every other row */
.entry:nth-child(even) .entry__media { order: 2; }

.entry__media {
  position: relative;
  aspect-ratio: 16/10;
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface-2);
}
.entry__media .ph { width: 100%; height: 100%; border: 0; border-radius: 0; }
.entry__media img,
.entry__media video {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .9s var(--ease), opacity .5s;
}
.entry:hover .entry__media img,
.entry.is-hot .entry__media img { transform: scale(1.04); }
.entry__media video { position: absolute; inset: 0; opacity: 0; }
.entry:hover .entry__media video,
.entry.is-hot .entry__media video { opacity: 1; }


.entry__wip {
  position: absolute; top: 14px; left: 14px; z-index: 3;
  font-family: var(--font-display);
  font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--amber);
  background: rgba(4,7,10,.7);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,176,102,.35);
  border-radius: 100px; padding: 5px 11px;
}

.entry__info { position: relative; padding: 6px clamp(4px, 2vw, 28px); }
/* Anchored to the info column's own top, never above it. The card clips
   (overflow: hidden), and the info column is vertically centred in the grid
   row, so how far it sits from the card's top edge depends on how tall its
   copy runs. A negative offset that cleared the edge on one card sheared the
   digit off on the card with the longest role text (VR at wide widths). */
.entry__index {
  position: absolute; top: 0; right: 0;
  font-family: var(--font-display);
  font-size: clamp(4rem, 9vw, 8rem); font-weight: 700;
  line-height: 1; letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.06);
  pointer-events: none; z-index: 0;
}
.entry__cat {
  position: relative; z-index: 1; display: block; margin-bottom: 14px;
  font-family: var(--font-display);
  font-size: 11px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
  color: var(--cyan);
}
.entry__title {
  position: relative; z-index: 1; margin-bottom: 14px;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.3rem); font-weight: 700;
  letter-spacing: -.02em; line-height: 1.05;
  transition: color .35s;
}
.entry:hover .entry__title,
.entry.is-hot .entry__title { color: var(--cyan-soft); }
.entry__role {
  position: relative; z-index: 1; margin-bottom: 20px;
  color: var(--text-dim); font-size: 15px; max-width: 46ch;
}
.entry__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; }
.entry__tags span {
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-faint);
  border: 1px solid var(--line); border-radius: 4px; padding: 3px 8px;
}
.entry__go {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 600; letter-spacing: .04em;
  color: var(--text);
  display: inline-flex; align-items: center; gap: 8px;
}
.entry__go::after {
  content: '→'; color: var(--cyan);
  transition: transform .35s var(--ease);
}
.entry:hover .entry__go::after,
.entry.is-hot .entry__go::after { transform: translateX(6px); }

@media (max-width: 820px) {
  .entry { grid-template-columns: 1fr; gap: 22px; }
  .entry:nth-child(even) .entry__media { order: 0; }
  /* stacked layout: digits sit in the gap between poster and info,
     not painted over the poster's bottom edge */
  .entry__index { font-size: 3.4rem; }
}

/* ============================================================
   ABOUT
   ============================================================ */
.about { background: var(--bg-2); border-block: 1px solid var(--line); }
.about__wrap {
  display: grid; gap: clamp(36px, 6vw, 72px);
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 900px) { .about__wrap { grid-template-columns: 1fr; } }

.about__media img { border-radius: 16px; width: 100%; border: 1px solid var(--line); }
.about__text p { color: var(--text-dim); margin-bottom: 16px; max-width: 62ch; }
.about__text p strong { color: var(--text); }
.about__text p em { color: var(--amber-soft); font-style: normal; }

/* -- experience timeline (About): newest first, cyan dots on a hairline -- */
.xp { margin-top: 38px; }
.xp__h {
  font-family: var(--font-display); font-size: 12px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--text-faint);
  margin-bottom: 20px;
}
.xp__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 24px; }
.xp__item { position: relative; padding-left: 28px; }
.xp__item::before {
  content: ''; position: absolute; left: 0; top: 5px;
  width: 9px; height: 9px; border-radius: 50%;
  background: linear-gradient(120deg, var(--cyan), var(--cyan-soft));
  box-shadow: 0 0 12px rgba(0, 229, 255, .4);
}
.xp__item::after {
  content: ''; position: absolute; left: 4px; top: 20px; bottom: -24px;
  width: 1px; background: var(--line);
}
.xp__item:last-child::after { display: none; }
.xp__when {
  font-family: var(--font-display); font-size: 12.5px; font-weight: 600;
  letter-spacing: .05em; color: var(--cyan);
}
.xp__role { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--text); margin: 7px 0 6px; }
.xp__role a {
  color: inherit; text-decoration: none;
  border-bottom: 1px solid var(--cyan-deep);
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.xp__role a:hover { color: var(--cyan); border-color: var(--cyan); }
.xp__note { font-size: 14.5px; line-height: 1.65; color: var(--text-dim); max-width: 58ch; }

.skills {
  display: grid; gap: 26px;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 40px; padding-top: 32px;
  border-top: 1px solid var(--line);
}
@media (max-width: 640px) { .skills { grid-template-columns: 1fr; } }
.skills h4 {
  font-family: var(--font-display);
  font-size: 11.5px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--cyan); margin-bottom: 10px;
}
.skills p { font-size: 13.5px; color: var(--text-faint); line-height: 1.75; }

/* toolset: icon grid of the core tools (the icons ship their own cyan glow) */
.toolset { margin-top: clamp(28px, 4vw, 40px); padding-top: 30px; border-top: 1px solid var(--line); }
.toolset__h {
  font-family: var(--font-display);
  font-size: 11.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--cyan); margin-bottom: 20px;
}
.toolset__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
  gap: 18px 10px;
}
.toolset__grid li {
  display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center;
}
.toolset__grid img {
  width: 50px; height: 50px; object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0,229,255,.14));
  transition: transform .3s var(--ease);
}
.toolset__grid li:hover img { transform: translateY(-4px) scale(1.07); }
.toolset__grid span { font-size: 11px; letter-spacing: .02em; color: var(--text-dim); line-height: 1.3; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact {
  text-align: center;
  background:
    radial-gradient(70% 90% at 50% 100%, rgba(0,229,255,.09), transparent 65%),
    var(--bg);
}
.contact__wrap { display: flex; flex-direction: column; align-items: center; }

.contact__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.8rem);
  font-weight: 700; letter-spacing: -.03em; line-height: 1.08;
  margin-bottom: 40px;
}
.contact__mail {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 3vw, 2.1rem);
  font-weight: 600; color: var(--cyan);
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(0,229,255,.3);
  text-shadow: 0 0 30px rgba(0,229,255,.35);
  transition: text-shadow .35s, border-color .35s;
  word-break: break-all;
}
.contact__mail:hover {
  text-shadow: 0 0 44px rgba(0,229,255,.75);
  border-color: var(--cyan);
}

.contact__sub {
  margin-top: 22px;
  color: var(--text-dim); font-size: 15px;
  max-width: 46ch;
}

.contact__links {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin-top: 44px;
}
.contact__links a {
  display: inline-block;
  font-size: 13px; letter-spacing: .06em;
  color: var(--text-dim);
  border: 1px solid var(--line); border-radius: 100px;
  padding: 9px 20px;
  transition: color .3s, border-color .3s, box-shadow .3s, transform .3s var(--ease);
}
.contact__links a:hover {
  color: var(--cyan); border-color: var(--line-strong);
  box-shadow: 0 0 18px rgba(0,229,255,.16);
  transform: translateY(-2px);
}

.contact__note {
  margin-top: 40px;
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-faint);
}

/* ============================================================
   PROJECT DETAIL PAGE  (project.html)
   ============================================================ */
.project-hero {
  position: relative;
  padding: clamp(120px, 16vw, 200px) 0 clamp(40px, 6vw, 64px);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(70% 60% at 82% 0%, rgba(0,229,255,.08), transparent 60%),
    var(--bg);
}
.back-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-size: 13px; font-weight: 600;
  letter-spacing: .04em; color: var(--text-dim);
  margin-bottom: 34px; transition: color .3s, gap .3s;
}
.back-link::before { content: '←'; color: var(--cyan); }
.back-link:hover { color: var(--text); gap: 12px; }

.project-hero__meta {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 14px;
  font-family: var(--font-display);
}
.project-hero__index {
  font-size: 13px; font-weight: 600; letter-spacing: .2em; color: var(--text-faint);
}
.project-hero__cat {
  font-size: 12px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
  color: var(--cyan);
}
.project-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6vw, 4.6rem); font-weight: 700;
  letter-spacing: -.03em; line-height: 1.02;
  margin: 22px 0 22px;
}
.project-hero__role {
  color: var(--text-dim); font-size: clamp(16px, 1.5vw, 19px);
  max-width: 62ch; margin-bottom: 26px;
}
.project-hero__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.project-hero__tags span {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-faint); border: 1px solid var(--line);
  border-radius: 5px; padding: 4px 10px;
}

/* hero 3D model (three.js dissolve port) — fills the empty right side of the
   hero. The text wrap sits visually on top (z-index) but is pointer-transparent
   so the cursor reaches the canvas below and can tear the model; the back-link
   stays clickable. On narrow screens the model drops to a block under the text. */
.project-hero.has-hero-model { overflow: hidden; }
.project-hero.has-hero-model .wrap { position: relative; z-index: 2; pointer-events: none; }
.project-hero.has-hero-model .wrap a { pointer-events: auto; }
.hero-model {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(52%, 680px);
  z-index: 1;
  pointer-events: auto;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 22%);
          mask-image: linear-gradient(to right, transparent, #000 22%);
}
@media (max-width: 900px) {
  .project-hero.has-hero-model .wrap { pointer-events: auto; }
  .hero-model {
    position: relative; right: auto;
    width: 100%; height: 52vw; min-height: 240px; margin-top: 30px;
    -webkit-mask-image: none; mask-image: none;
  }
}

.project-body { padding: clamp(46px, 7vw, 84px) 0; }
.project-body__media { border-radius: 16px; overflow: hidden; margin-bottom: 40px; }
.project-body__note {
  border: 1px dashed rgba(0,229,255,.22); border-radius: 14px;
  padding: clamp(24px, 4vw, 40px);
  color: var(--text-dim); font-size: 15px; line-height: 1.9;
  background: var(--surface);
}
.project-body__note a {
  color: var(--cyan);
  border-bottom: 1px solid rgba(0,229,255,.3);
  transition: border-color .3s, text-shadow .3s;
}
.project-body__note a:hover {
  border-color: var(--cyan);
  text-shadow: 0 0 16px rgba(0,229,255,.5);
}

.project-nav {
  display: flex; justify-content: space-between; gap: 20px;
  padding: 34px 0; border-top: 1px solid var(--line);
  font-family: var(--font-display); font-size: 14px; font-weight: 600;
}
.project-nav a { color: var(--text-dim); transition: color .3s; }
.project-nav a small {
  display: block; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-faint); font-weight: 500; margin-bottom: 5px;
}
.project-nav a:hover { color: var(--cyan); }
.project-nav .is-off { opacity: .28; pointer-events: none; }
.project-nav a:last-child { text-align: right; }

/* ============================================================
   SET-PIECES  (per-project visual modules, js/setpieces/)
   ============================================================ */

/* ---- theo-curtain: Oleh's rendered curtain over the carousel ---- */
/* The stage owns the width break-out, capped at the renders' own 1600px:
   edge to edge on a laptop, but on a 1920+ monitor a true 100vw stage
   upscaled the 1600x900 stills and they went soft. */
.sp-theo-stage {
  position: relative;
  --stage-w: min(100vw, 1600px);
  width: var(--stage-w); max-width: var(--stage-w);
  margin-left: calc(50% - var(--stage-w) / 2);
}
.sp-theo-host {
  position: relative;
  border-radius: 0;
}
/* No sticky and no extra scroll room. The stage is a gate: the show runs with
   the page held at one exact position, so there is nothing to pin and nothing
   to scrub. Sticky only bought a dead band where the picture did not move. */
.sp-theo-stage > .sp-theo-host {
  width: 100%; max-width: 100%; margin-left: 0;
}
.sp-theo-host .carousel { border-radius: 0; }
/* the strip sits under the render inside the stage, and waits out the curtain */
.sp-theo-host .thumbstrip {
  justify-content: center; padding: 0 16px 8px;
  transition: opacity .5s var(--ease);
}
.sp-theo-host .thumbstrip.is-hidden { opacity: 0; pointer-events: none; }
/* Lives inside .carousel, so it clips to the render box and the clips line up
   with the shots frame for frame (both 16:9). Hidden until js has proved the
   alpha survived: without it the clips decode opaque and bury the renders. */
.sp-theo-cov {
  position: absolute; inset: 0; z-index: 6;
  overflow: hidden; pointer-events: none;
  visibility: hidden;
}
.sp-theo-cov.is-on { visibility: visible; }
/* once fully open the last frame is empty anyway, and dropping it frees the
   carousel's own controls from sitting under a stacked layer */
.sp-theo-cov.is-open { visibility: hidden; }
/* One clip per phase, stacked: only the live one is ever shown, so nothing
   has to seek or play backwards. */
.sp-theo-cov video {
  position: absolute;
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
/* The curtain's two clips meet on identical pictures (the last frame of the
   close IS the first frame of the open), so they hard-swap with nothing to
   hide. The render's alpha stops 10px short of its top edge and 15px short of
   its bottom, so at 1:1 a hairline of the still showed above and below the
   closed curtain; overscanning hides both, the sides the carousel clips. */
.sp-theo-cov__c {
  inset: 0; z-index: 1;
  transform: scale(1.06);   /* 1.04 left only 2px of margin at the bottom */
  visibility: hidden;
}
.sp-theo-cov__c.is-on { visibility: visible; }

/* Theo stands in FRONT of the curtain: he is on screen before it parts.
   His walk is animated in place, so this layer carries the travel. */
.sp-theo-teo {
  position: absolute; inset: 0;
  z-index: 2;
  will-change: transform;
}
/* Half size, anchored on the bottom edge rather than on him, so his feet keep
   the same overhang in proportion to his body instead of in pixels. */
.sp-theo-teo__fit {
  position: absolute; inset: 0;
  transform: scale(var(--teo-scale, .5));
  transform-origin: 49.3% 100%;   /* 49.3% is where he stands in the frame */
}
/* Hard cut everywhere by default. A dissolve does not remove a jump, it only
   makes the jump semi-transparent. The single exception is the landing, and js
   drives that one with inline opacity: see `landOnIdle`. DOM order matters
   there, the walk home must sit ABOVE the idle, so it is written last. */
.sp-theo-teo__v {
  left: 0; right: 0;
  top: var(--teo-drop, 5%);   /* dropped so his feet run past the bottom edge */
  visibility: hidden;
}
.sp-theo-teo__v.is-on { visibility: visible; }
/* The walk home is mirrored in the render itself, which mirrors WHERE he
   stands along with him: he is centred on 49.3% of the frame, so flipping
   throws him to 50.7%. This pulls the flipped clip back onto his own axis.
   Measured against the encoded frames, not guessed. */
.sp-theo-teo__v[data-k="home"] { transform: translateX(-1.25%); }

/* ---- render carousel + thumbnail strip ---- */
.has-carousel { position: relative; }
.carousel { position: relative; aspect-ratio: 16/9; overflow: hidden; background: #070405; }
.carousel__track { position: absolute; inset: 0; }
.carousel__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0;
  transition: opacity .55s var(--ease);
}
.carousel__img.on { opacity: 1; }
.carousel__arrow {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 3;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 24px; line-height: 1; color: var(--text);
  background: rgba(4,7,10,.55); backdrop-filter: blur(6px);
  border: 1px solid var(--line); cursor: pointer;
  transition: background .3s, border-color .3s, box-shadow .3s;
}
.carousel__arrow--prev { left: 14px; }
.carousel__arrow--next { right: 14px; }
.carousel__arrow:hover {
  color: var(--cyan); border-color: var(--line-strong);
  background: rgba(0,229,255,.1); box-shadow: var(--glow-cyan);
}
.carousel__count {
  position: absolute; bottom: 12px; right: 14px; z-index: 3;
  font-family: var(--font-display);
  font-size: 12px; letter-spacing: .08em; color: var(--text-dim);
  background: rgba(4,7,10,.55); backdrop-filter: blur(6px);
  border: 1px solid var(--line); border-radius: 100px; padding: 4px 12px;
}
.thumbstrip {
  display: flex; gap: 10px; margin-top: 12px;
  overflow-x: auto; padding-bottom: 8px;
  scrollbar-width: thin; scrollbar-color: var(--cyan-deep) transparent;
}
.thumbstrip__t {
  flex: 0 0 auto; width: 108px; aspect-ratio: 16/10;
  padding: 0; border: 1px solid var(--line); border-radius: 8px;
  overflow: hidden; cursor: pointer; opacity: .5;
  background: #070405;
  transition: opacity .3s, border-color .3s, box-shadow .3s;
}
.thumbstrip__t img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumbstrip__t:hover { opacity: .85; }
.thumbstrip__t.on {
  opacity: 1; border-color: var(--line-strong);
  box-shadow: 0 0 18px rgba(0,229,255,.2);
}

/* ---- soul (page accent + intro), palette borrowed from aevus-web ---- */
.sp-soul { --soul: #818cf8; --soul-cyan: #22d3ee; }
.sp-soul .project-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(70% 60% at 82% 0%, rgba(129,140,248,.10), transparent 60%),
    #04060b;
}
.sp-soul .project-hero .wrap { position: relative; z-index: 2; }
.sp-soul .project-hero__cat { color: var(--soul); }
.sp-soul .project-hero__tags span { border-color: rgba(129,140,248,.32); color: #aab4ff; }
.sp-soul .project-body__note { border-color: rgba(129,140,248,.28); }
.sp-soul .project-body__note a {
  color: var(--soul); border-bottom-color: rgba(129,140,248,.35);
}
.sp-soul .project-body__note a:hover { text-shadow: 0 0 16px rgba(129,140,248,.5); }
/* the aevus neural web behind the hero */
.sp-soul-field {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
}

.sp-soul-intro {
  position: fixed; inset: 0; z-index: 999;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 26px;
  background: #06070d;
  opacity: 0; transition: opacity .6s ease;
  pointer-events: none;
}
.sp-soul-intro.on { opacity: 1; pointer-events: auto; }
.sp-soul-intro.off { opacity: 0; transition: opacity .9s ease; pointer-events: none; }
.sp-soul-intro__orb {
  width: 130px; height: 130px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, rgba(223,246,255,.92), rgba(129,140,248,.5) 45%, rgba(34,211,238,.14) 75%, transparent);
  box-shadow: 0 0 60px rgba(129,140,248,.5), 0 0 140px rgba(34,211,238,.22);
  animation: soulbreathe 2.6s ease-in-out infinite;
}
@keyframes soulbreathe {
  0%, 100% { transform: scale(.94); }
  50%      { transform: scale(1.06); }
}
.sp-soul-intro__word {
  font-family: var(--font-display);
  font-size: 2.4rem; font-weight: 600; letter-spacing: .2em;
  color: #e8ecff;
  animation: soulfade 1.1s .4s both;
}
.sp-soul-intro__tag {
  font-size: 12px; letter-spacing: .34em; text-transform: uppercase;
  color: #7d88c4;
  animation: soulfade 1.1s .9s both;
}
@keyframes soulfade {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.sp-soul-intro__vid {
  width: min(92vw, 900px); max-height: 86vh;
  border-radius: 14px;
  box-shadow: 0 40px 120px -30px rgba(129,140,248,.5);
}

/* ---- playable embed ---- */
/* the real game iframe replaces the hero media */
.sp-play-host { aspect-ratio: 16/9; background: #04070a; }
.sp-play-frame {
  width: 100%; height: 100%; display: block;
  border: 0; background: #04070a;
}
/* fullscreen control lives in .sp-play__bar below the game,
   so it never covers in-game UI like the pause button */

/* ---- model particles ---- */
.sp-parts {
  position: relative; aspect-ratio: 16/9;
  background:
    radial-gradient(80% 80% at 50% 45%, rgba(0,229,255,.05), transparent 70%),
    var(--surface-2);
}
.sp-parts__canvas { width: 100%; height: 100%; display: block; }
.sp-parts__dots {
  position: absolute; bottom: 14px; left: 50%; translate: -50% 0; z-index: 2;
  display: flex; gap: 8px;
}
.sp-parts__dot {
  font-family: var(--font-display);
  font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-faint);
  background: rgba(4,7,10,.55);
  border: 1px solid var(--line); border-radius: 100px;
  padding: 6px 15px; cursor: pointer;
  transition: color .3s, border-color .3s, box-shadow .3s;
}
.sp-parts__dot:hover { color: var(--text); }
.sp-parts__dot.on {
  color: var(--cyan); border-color: var(--line-strong);
  box-shadow: 0 0 16px rgba(0,229,255,.15);
}
.sp-parts__hint {
  position: absolute; top: 14px; right: 16px; z-index: 2;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-faint);
}

/* ---- modular environment inspector ---- */
.project-body__media.has-modular-inspector {
  width: min(96vw, 1500px);
  max-width: none;
  margin-left: calc(50% - min(96vw, 1500px) / 2);
  overflow: visible;
  border-radius: 18px;
}
.mi {
  --mi-panel: rgba(7,13,17,.82);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  color: #dffaff;
  background: #05090c;
  border: 1px solid rgba(77,211,231,.22);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 35px 120px rgba(0,0,0,.42), inset 0 0 80px rgba(0,229,255,.025);
}
.mi.is-library { grid-template-columns: minmax(0, 1fr) clamp(220px, 22vw, 320px); }
.mi__topbar {
  grid-column: 1 / -1;
  min-height: 64px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 22px;
  padding: 10px 16px 10px 20px;
  background: rgba(4,8,11,.94);
  border-bottom: 1px solid rgba(77,211,231,.16);
}
.mi__asset-catalog {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  align-items: stretch;
  min-width: 0;
  padding: 10px 12px;
  gap: 10px;
  background: rgba(4,9,12,.96);
  border-bottom: 1px solid rgba(77,211,231,.14);
}
.mi__asset-catalog-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 9px 12px;
  border: 1px solid rgba(77,211,231,.12); border-radius: 8px;
  background: linear-gradient(135deg, rgba(0,229,255,.055), rgba(255,255,255,.012));
}
.mi__asset-catalog-head span { display: block; }
.mi__asset-catalog-head small,
.mi__asset-card small {
  display: block; color: var(--cyan); font-size: 6px;
  letter-spacing: .18em; text-transform: uppercase;
}
.mi__asset-catalog-head strong {
  display: block; margin-top: 4px; color: #eaffff;
  font: 650 9px/1.2 var(--font-display); letter-spacing: .08em; text-transform: uppercase;
}
.mi__asset-catalog-head > b {
  flex: none; color: rgba(223,250,255,.42);
  font: 650 9px/1 var(--font-display); letter-spacing: .08em;
}
.mi__asset-catalog-list {
  display: flex; min-width: 0; gap: 8px; overflow-x: auto; scrollbar-width: thin;
}
.mi__asset-card {
  flex: 0 0 210px; min-width: 0; height: 66px;
  display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 5px 9px 5px 5px; color: rgba(223,250,255,.64); text-decoration: none;
  border: 1px solid rgba(255,255,255,.075); border-radius: 8px;
  background: rgba(255,255,255,.018); transition: border-color .22s, background .22s, transform .22s;
}
.mi__asset-card:hover { transform: translateY(-1px); border-color: rgba(0,229,255,.38); background: rgba(0,229,255,.05); }
.mi__asset-card.is-on { border-color: rgba(0,229,255,.5); background: rgba(0,229,255,.075); box-shadow: inset 3px 0 var(--cyan); }
.mi__asset-card img { width: 76px; height: 54px; display: block; object-fit: cover; border-radius: 5px; background: #05090c; }
.mi__asset-card span { min-width: 0; }
.mi__asset-card strong {
  display: block; overflow: hidden; color: #effeff;
  font: 650 10px/1.2 var(--font-display); letter-spacing: .04em; text-overflow: ellipsis; white-space: nowrap;
}
.mi__asset-card small { margin-top: 5px; color: rgba(199,231,236,.38); font-size: 5px; }
.mi__asset-card > i { color: rgba(0,229,255,.42); font: normal 650 8px/1 var(--font-display); }
.mi__brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
.mi__brand i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 13px var(--cyan);
  animation: miblink 2.2s ease-in-out infinite;
}
@keyframes miblink { 50% { opacity: .35; } }
.mi__brand span {
  font-family: var(--font-display); font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
}
.mi__brand small {
  color: var(--cyan); border: 1px solid rgba(0,229,255,.3);
  border-radius: 3px; padding: 2px 5px;
  font-size: 8px; letter-spacing: .13em;
}
.mi__modes, .mi__looks {
  display: flex; align-items: center; gap: 4px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 8px; padding: 3px;
}
.mi__modes button, .mi__looks button, .mi__reset {
  border: 0; border-radius: 5px; cursor: pointer;
  color: var(--text-faint); background: transparent;
  font-family: var(--font-display); font-weight: 600;
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  padding: 8px 12px;
  transition: color .25s, background .25s, box-shadow .25s;
}
.mi__modes button:hover, .mi__looks button:hover { color: var(--text); }
.mi__modes button.is-on, .mi__looks button.is-on {
  color: var(--cyan-soft);
  background: rgba(0,229,255,.09);
  box-shadow: inset 0 0 0 1px rgba(0,229,255,.12);
}
.mi__modes .mi__lod-back {
  color: var(--cyan-soft);
  background: rgba(0,229,255,.075);
  box-shadow: inset 0 0 0 1px rgba(0,229,255,.12);
}
.mi__modes .mi__lod-back:hover { color: #fff; background: rgba(0,229,255,.14); }
.mi__looks { position: relative; justify-self: end; }
.mi__looks button { padding-inline: 9px; }
.mi__path-toggle.is-on {
  color: #001316;
  background: var(--cyan);
  box-shadow: 0 0 18px rgba(0, 229, 255, .28);
}
.mi__path-toggle:disabled {
  opacity: .38;
  cursor: wait;
}
.mi__path-toggle[hidden] { display: none !important; }
.mi__look-trigger {
  min-width: 136px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.mi__look-trigger i {
  width: 7px; height: 7px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .2s;
}
.mi__look-trigger[aria-expanded="true"] i { transform: rotate(225deg) translate(-2px, -1px); }
.mi__look-menu {
  position: absolute; z-index: 12; top: calc(100% + 8px); right: 0;
  width: 220px; padding: 7px;
  border: 1px solid rgba(77,211,231,.25); border-radius: 8px;
  background: rgba(4,8,11,.97);
  box-shadow: 0 20px 55px rgba(0,0,0,.55);
  backdrop-filter: blur(16px);
}
.mi__look-menu[hidden] { display: none; }
.mi__look-menu small {
  display: block; padding: 12px 9px 5px;
  color: rgba(199,231,236,.38); font-size: 7px;
  letter-spacing: .18em; text-transform: uppercase;
}
.mi__look-menu button {
  width: 100%; display: block; padding: 8px 9px;
  text-align: left; letter-spacing: .08em;
}
.mi__look-menu button.is-on::after {
  content: '●'; float: right; color: var(--cyan);
  text-shadow: 0 0 8px var(--cyan);
}
.mi__viewport {
  --mi-background: #202224;
  --mi-glow-soft: rgba(58,61,64,.08);
  --mi-glow-strong: rgba(58,61,64,.14);
  --mi-vignette-opacity: .66;
  position: relative;
  min-width: 0;
  height: clamp(520px, calc(100vh - 120px), 820px);
  overflow: hidden;
  background:
    radial-gradient(ellipse at 74% 26%, var(--mi-glow-strong), transparent 42%),
    radial-gradient(ellipse at 22% 70%, var(--mi-glow-soft), transparent 46%),
    var(--mi-background);
}
.mi__viewport::before {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  inset: -18%;
  background:
    radial-gradient(circle at 78% 30%, var(--mi-glow-strong), transparent 22%),
    radial-gradient(circle at 34% 62%, var(--mi-glow-soft), transparent 27%),
    radial-gradient(circle at 56% 42%, var(--mi-glow-soft), transparent 31%);
  filter: blur(46px);
  animation: miBackdropDrift 13s ease-in-out infinite alternate;
}
.mi__viewport::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(110% 82% at 50% 38%, transparent 28%, rgba(3,7,10,.48) 82%, rgba(3,6,9,.78) 100%),
    linear-gradient(to bottom, rgba(3,7,10,.18), transparent 25%, transparent 75%, rgba(3,7,10,.44));
  opacity: var(--mi-vignette-opacity);
}
@keyframes miBackdropDrift {
  from { transform: translate3d(-1.5%, 1%, 0) scale(1); }
  to { transform: translate3d(1.5%, -1%, 0) scale(1.04); }
}
.mi__canvas {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; display: block;
  cursor: grab; touch-action: none;
}
.mi__canvas:active { cursor: grabbing; }
.mi__asset-nav {
  position: absolute; z-index: 9; inset: 50% 16px auto;
  display: flex; justify-content: space-between; pointer-events: none;
  transform: translateY(-50%);
}
.mi__asset-nav a, .mi__asset-nav button {
  width: 42px; height: 58px; display: grid; place-items: center; pointer-events: auto;
  padding: 0; color: #dffaff; background: rgba(3,10,14,.68);
  border: 1px solid rgba(0,229,255,.28); border-radius: 8px; cursor: pointer;
  font: 300 30px/1 var(--font-display); text-decoration: none;
  box-shadow: 0 12px 34px rgba(0,0,0,.34); backdrop-filter: blur(12px);
  transition: color .2s, background .2s, border-color .2s, transform .2s;
}
.mi__asset-nav a:hover { color: #001316; background: var(--cyan); border-color: var(--cyan); transform: scale(1.04); }
.mi__asset-nav button:disabled { opacity: .2; cursor: default; }
.mi__poster {
  position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none;
  background: #111518; opacity: 1; transition: opacity .65s ease;
}
.mi__poster::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 52% 45%, transparent 25%, rgba(3,7,10,.5) 100%);
}
.mi__poster img {
  width: 100%; height: 100%; display: block; object-fit: cover;
  filter: blur(12px) saturate(.78) brightness(.72); transform: scale(1.055);
}
.mi__poster.is-hidden { opacity: 0; }
.mi__quality {
  position: absolute; z-index: 7; left: 50%; top: 17px; width: min(390px, calc(100% - 38px));
  display: grid; gap: 8px; transform: translateX(-50%);
  padding: 10px 12px; border: 1px solid rgba(0,229,255,.28); border-radius: 7px;
  color: rgba(220,250,253,.82); background: rgba(3,9,12,.88); backdrop-filter: blur(12px);
  box-shadow: 0 10px 34px rgba(0,0,0,.28), 0 0 24px rgba(0,229,255,.055);
  font: 600 8px/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase;
  transition: opacity .35s ease, border-color .35s ease;
}
.mi__quality > div { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; }
.mi__quality i { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.mi__quality b { color: var(--cyan-soft); font: inherit; font-variant-numeric: tabular-nums; }
.mi__quality em { position: relative; display: block; height: 3px; overflow: hidden; border-radius: 99px; background: rgba(130,224,235,.12); }
.mi__quality u {
  position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; text-decoration: none;
  background: linear-gradient(90deg, #00aeca, #52edff); box-shadow: 0 0 12px rgba(0,229,255,.45);
  transition: width .18s ease-out;
}
.mi__quality.is-indeterminate u { width: 32% !important; animation: miQualityScan 1.05s ease-in-out infinite alternate; }
@keyframes miQualityScan { from { transform: translateX(-10%); } to { transform: translateX(220%); } }
.mi__quality.is-ready { border-color: rgba(91,255,181,.25); }
.mi__quality.is-ready i { background: #69ffb9; box-shadow: 0 0 8px #69ffb9; }
.mi__quality.is-ready u { background: #69ffb9; box-shadow: 0 0 12px rgba(105,255,185,.42); }
.mi__quality.is-hidden { opacity: 0; }

/* Reusable in-viewer calibration drawer. It stays deliberately quiet in the
   public composition, but gives the artist a complete per-model look-dev rig. */
.tt {
  position: absolute; z-index: 14; top: 0; right: 0; bottom: 0;
  pointer-events: none;
}
.tt__handle {
  position: absolute; pointer-events: auto; cursor: pointer;
  top: 78px; right: 0; width: 19px; height: 54px; padding: 0;
  writing-mode: vertical-rl;
  color: rgba(151,224,236,.48); background: rgba(4,9,12,.48);
  border: 1px solid rgba(77,211,231,.16); border-right: 0;
  border-radius: 6px 0 0 6px;
  font-family: var(--font-display); font-size: 6px; font-weight: 700;
  letter-spacing: .18em;
  opacity: .24; transition: opacity .2s, color .2s, background .2s, transform .3s;
}
.tt__handle:hover, .tt__handle:focus-visible, .tt.is-open .tt__handle {
  opacity: 1; color: var(--cyan); background: rgba(4,9,12,.9);
}
.tt.is-open .tt__handle { transform: translateX(-294px); }
.tt__panel {
  position: absolute; pointer-events: auto;
  top: 12px; right: 10px; bottom: 12px; width: 284px;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  border: 1px solid rgba(77,211,231,.25); border-radius: 10px;
  color: #dffaff; background: rgba(4,9,12,.94);
  box-shadow: 0 24px 70px rgba(0,0,0,.58);
  backdrop-filter: blur(18px);
  transform: translateX(calc(100% + 22px));
  opacity: 0; visibility: hidden;
  transition: transform .32s var(--ease), opacity .22s, visibility .32s;
}
.tt.is-open .tt__panel { transform: none; opacity: 1; visibility: visible; }
.tt__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 14px 12px; border-bottom: 1px solid rgba(255,255,255,.07);
}
.tt__head small {
  display: block; margin-bottom: 3px; color: var(--cyan);
  font-size: 6px; letter-spacing: .2em;
}
.tt__head strong { font-family: var(--font-display); font-size: 13px; }
.tt__close {
  width: 26px; height: 26px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.08); border-radius: 5px;
  color: var(--text-faint); background: transparent; font-size: 17px; line-height: 1;
}
.tt__close:hover { color: var(--cyan); border-color: rgba(0,229,255,.25); }
.tt__body {
  overflow-y: auto; padding: 4px 14px 12px;
  scrollbar-width: thin; scrollbar-color: var(--cyan-deep) transparent;
}
.tt__group { padding-top: 14px; }
.tt__group + .tt__group { margin-top: 8px; border-top: 1px solid rgba(255,255,255,.065); }
.tt__group h3 {
  margin: 0 0 11px; color: rgba(199,231,236,.42);
  font-family: var(--font-display); font-size: 7px; letter-spacing: .18em;
  text-transform: uppercase;
}
.tt__row {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 4px 12px; margin-bottom: 11px;
  color: var(--text-dim); font-size: 9px;
}
.tt__row output {
  min-width: 34px; color: var(--cyan-soft); text-align: right;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 8px;
}
.tt__row input {
  grid-column: 1 / -1; width: 100%; height: 12px; margin: 0;
  accent-color: var(--cyan); cursor: ew-resize;
}
.tt__row input[type="color"] {
  height: 28px; padding: 2px; cursor: pointer;
  border: 1px solid rgba(77,211,231,.18); border-radius: 5px;
  background: rgba(255,255,255,.025);
}
.tt__row input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.tt__row input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 3px; }
.tt__foot {
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 7px;
  padding: 10px 12px 12px; border-top: 1px solid rgba(255,255,255,.07);
}
.tt__foot button {
  min-height: 31px; cursor: pointer;
  border: 1px solid rgba(77,211,231,.18); border-radius: 5px;
  color: var(--text-faint); background: rgba(0,229,255,.035);
  font-family: var(--font-display); font-size: 8px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
}
.tt__foot button:hover { color: var(--cyan); border-color: rgba(0,229,255,.4); }
.mi__loading {
  position: absolute; inset: 0; z-index: 8;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px;
  background: rgba(5,9,12,.66); backdrop-filter: blur(2px);
  transition: opacity .45s;
}
.mi__loading.is-done { opacity: 0; pointer-events: none; }
.mi__loading b {
  font-family: var(--font-display); font-size: 13px;
  letter-spacing: .16em; text-transform: uppercase;
}
.mi__loading small { color: var(--text-faint); font-size: 11px; }
.mi__loader {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(0,229,255,.16); border-top-color: var(--cyan);
  box-shadow: 0 0 24px rgba(0,229,255,.12);
  animation: miload .9s linear infinite;
}
@keyframes miload { to { transform: rotate(1turn); } }
.mi__loading.is-error .mi__loader { display: none; }
.mi__worldcard {
  position: absolute; top: 0; left: 0; z-index: 5;
  width: 258px; padding: 15px 16px 14px;
  border: 1px solid rgba(0,229,255,.34);
  border-radius: 8px;
  background: var(--mi-panel);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 50px rgba(0,0,0,.34), inset 3px 0 0 rgba(0,229,255,.65);
  opacity: 0; pointer-events: none;
}
.mi__worldcard.is-visible { opacity: 1; }
.mi__worldcard.is-summary { width: 310px; }

/* Collapse toggle. The card is click-through (pointer-events none) so orbiting
   passes straight through it; only this button opts back in, so it catches the
   click without stealing drags from the model behind it. */
.mi__worldcard-toggle {
  position: absolute; top: 9px; right: 9px; z-index: 2;
  width: 22px; height: 22px; padding: 0; cursor: pointer;
  pointer-events: auto;
  display: grid; place-items: center;
  border: 1px solid rgba(0,229,255,.34); border-radius: 6px;
  background: rgba(0,229,255,.06);
  transition: background .2s, border-color .2s, box-shadow .2s;
}
.mi__worldcard-toggle:hover {
  background: rgba(0,229,255,.14); border-color: rgba(0,229,255,.6);
  box-shadow: 0 0 12px rgba(0,229,255,.28);
}
.mi__worldcard-toggle i {
  width: 8px; height: 8px; border-right: 1.5px solid var(--cyan);
  border-bottom: 1.5px solid var(--cyan);
  transform: translateY(-2px) rotate(45deg);   /* chevron down = collapse */
  transition: transform .25s var(--ease);
}
.mi__worldcard.is-collapsed .mi__worldcard-toggle i {
  transform: translateY(1px) rotate(-135deg);   /* chevron up = expand */
}
/* Collapsed: fold to a slim bar, keeping the kicker + name so it still reads
   and shows it can reopen. Everything below folds away. */
.mi__worldcard.is-collapsed {
  width: auto; min-width: 168px; padding-bottom: 12px;
}
.mi__worldcard.is-collapsed .mi__worldcard-name { margin-bottom: 0; }
.mi__worldcard.is-collapsed .mi__worldcard-stats,
.mi__worldcard.is-collapsed .mi__worldcard-tech,
.mi__worldcard.is-collapsed .mi__worldcard-lod { display: none; }
.mi__lodcards {
  position: absolute; inset: 0; z-index: 6;
  pointer-events: none;
}
.mi__lodcard {
  position: absolute; top: 0; left: 0;
  pointer-events: auto;
  width: 202px; padding: 11px 12px 10px;
  border: 1px solid rgba(0,229,255,.38); border-radius: 7px;
  color: #dffaff; background: rgba(5,12,16,.86);
  backdrop-filter: blur(14px);
  box-shadow: 0 15px 42px rgba(0,0,0,.36), inset 2px 0 0 rgba(0,229,255,.72);
}
.mi__lodcard-tools {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: -3px -3px 8px; padding: 0 0 7px;
  border-bottom: 1px solid rgba(255,255,255,.075);
}
.mi__lodcard-tools > span {
  color: rgba(199,231,236,.48); font-size: 6px;
  letter-spacing: .14em; text-transform: uppercase;
}
.mi__lod-wire-toggle {
  position: relative; width: 30px; height: 15px; padding: 0;
  pointer-events: auto; cursor: pointer;
  border: 1px solid rgba(0,229,255,.25); border-radius: 20px;
  background: rgba(0,229,255,.045);
}
.mi__lod-wire-toggle i {
  position: absolute; top: 2px; left: 2px; width: 9px; height: 9px;
  border-radius: 50%; background: rgba(210,248,255,.45);
  transition: transform .2s, background .2s, box-shadow .2s;
}
.mi__lod-wire-toggle.is-on {
  border-color: rgba(0,229,255,.65); background: rgba(0,229,255,.16);
}
.mi__lod-wire-toggle.is-on i {
  transform: translateX(15px); background: var(--cyan);
  box-shadow: 0 0 8px rgba(0,229,255,.7);
}
.mi__lodcard::before {
  content: ''; position: absolute; left: 50%; top: 100%;
  width: 1px; height: 22px;
  background: linear-gradient(to bottom, rgba(0,229,255,.75), transparent);
  box-shadow: 0 0 7px rgba(0,229,255,.45);
}
.mi__lodcard > span {
  display: block; margin-bottom: 5px;
  color: var(--cyan); font-size: 6px; letter-spacing: .19em; text-transform: uppercase;
}
.mi__lodcard > strong {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-family: var(--font-display); font-size: 12px;
}
.mi__lodcard > strong em {
  flex: none; padding: 3px 5px;
  border: 1px solid rgba(0,229,255,.26); border-radius: 3px;
  color: var(--cyan); font-size: 7px; font-style: normal; letter-spacing: .08em;
}
.mi__lodcard-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px;
  margin-top: 9px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.09);
}
.mi__lodcard b {
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
  color: #f1ffff; font-family: var(--font-display); font-size: 10px;
}
.mi__lodcard b small {
  display: block; margin-top: 2px;
  color: rgba(199,231,236,.4); font: 500 5px/1.2 var(--font-body);
  letter-spacing: .1em; text-transform: uppercase;
}
.mi.is-lod-compare .mi__canvas { cursor: grab; }
.mi__worldcard-kicker {
  display: block; color: var(--cyan);
  font-size: 8px; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 6px;
}
.mi__worldcard-name {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-display); font-size: 16px; line-height: 1.2;
}
.mi__worldcard-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 12px; }
.mi__worldcard.is-summary .mi__worldcard-stats { grid-template-columns: repeat(4, 1fr); }
.mi__worldcard-stats span { min-width: 0; border-top: 1px solid rgba(255,255,255,.1); padding-top: 7px; }
.mi__worldcard-stats small {
  display: block; color: var(--text-faint); font-size: 7px;
  letter-spacing: .12em; text-transform: uppercase;
}
.mi__worldcard-stats b {
  display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis;
  font-family: var(--font-display); font-size: 12px; color: #eaffff;
}
.mi__worldcard-tech {
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.mi__worldcard-tech > span { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.mi__worldcard-tech small {
  color: var(--text-faint); font-size: 7px; letter-spacing: .12em;
  text-transform: uppercase;
}
.mi__worldcard-tech b {
  color: #eaffff; font-family: var(--font-display);
  font-size: 8px; font-weight: 600; white-space: nowrap;
}
.mi__worldcard-tech div { display: flex; gap: 5px; margin-top: 8px; }
.mi__worldcard-tech i {
  min-width: 29px; padding: 4px 6px;
  border: 1px solid rgba(0,229,255,.23); border-radius: 3px;
  color: var(--cyan); background: rgba(0,229,255,.035);
  font-style: normal; font-size: 7px; font-weight: 700; text-align: center;
}
.mi__worldcard-tech em {
  display: block; margin-top: 7px; color: rgba(199,231,236,.36);
  font-style: normal; font-size: 7px; letter-spacing: .03em;
}
.mi__worldcard-lod {
  display: flex; align-items: center; gap: 7px; margin-top: 11px;
  color: var(--text-faint); font-size: 8px; line-height: 1.35;
}
.mi__worldcard-lod b {
  flex: none; color: var(--cyan); font-size: 9px;
  border: 1px solid rgba(0,229,255,.28); border-radius: 3px; padding: 3px 5px;
}
.mi.is-lod .mi__worldcard-lod b { color: #ffbd68; border-color: rgba(255,189,104,.35); }
.mi__wire { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; }
.mi__wire[hidden] { display: none !important; }
.mi__wire line { stroke: rgba(0,229,255,.58); stroke-width: 1; stroke-dasharray: 3 4; }
.mi__wire circle { fill: var(--cyan); filter: drop-shadow(0 0 5px var(--cyan)); }
.mi__feature-tools {
  position: absolute; z-index: 7; left: 18px; top: 18px;
  display: flex; align-items: stretch; gap: 8px;
}
.mi__textures-open, .mi__xray-toggle {
  position: relative;
  min-width: 206px; display: flex; align-items: center; justify-content: space-between;
  gap: 22px; padding: 11px 12px 11px 14px; cursor: pointer;
  color: #eaffff; background: rgba(4,13,17,.88);
  border: 1px solid rgba(0,229,255,.58); border-radius: 7px;
  box-shadow: 0 0 0 1px rgba(0,229,255,.08), 0 12px 38px rgba(0,0,0,.38), inset 3px 0 var(--cyan);
  backdrop-filter: blur(14px);
  transition: transform .25s var(--ease), background .25s, box-shadow .25s;
}
.mi__xray-toggle { min-width: 166px; border-color: rgba(0,229,255,.28); box-shadow: 0 12px 38px rgba(0,0,0,.28); }
.mi__xray-toggle:disabled { opacity: .42; cursor: wait; }
.mi__xray-toggle[aria-pressed="true"] {
  color: #001316; border-color: var(--cyan); background: var(--cyan);
  box-shadow: 0 0 28px rgba(0,229,255,.3), 0 14px 40px rgba(0,0,0,.38);
}
.mi__xray-toggle[aria-pressed="true"] small, .mi__xray-toggle[aria-pressed="true"] > b { color: #00373d; text-shadow: none; }
.mi__textures-open::after {
  content: ''; position: absolute; inset: -1px; pointer-events: none;
  border: 1px solid rgba(0,229,255,.32); border-radius: inherit;
  animation: miTexturePulse 2.8s ease-out infinite;
}
@keyframes miTexturePulse {
  0%, 55% { opacity: 0; transform: scale(1); }
  68% { opacity: .65; }
  100% { opacity: 0; transform: scale(1.075, 1.22); }
}
.mi__textures-open:hover, .mi__xray-toggle:not(:disabled):hover {
  transform: translateY(-2px); background: rgba(0,229,255,.12);
  box-shadow: 0 0 28px rgba(0,229,255,.2), 0 16px 44px rgba(0,0,0,.42), inset 3px 0 var(--cyan);
}
.mi__textures-open span, .mi__xray-toggle span { display: block; text-align: left; }
.mi__textures-open small, .mi__xray-toggle small {
  display: block; margin-bottom: 3px; color: var(--cyan);
  font-size: 6px; letter-spacing: .2em; text-transform: uppercase;
}
.mi__textures-open strong, .mi__xray-toggle strong {
  display: block; font-family: var(--font-display); font-size: 10px;
  letter-spacing: .09em; text-transform: uppercase;
}
.mi__textures-open > b, .mi__xray-toggle > b {
  color: var(--cyan); font: 400 18px/1 var(--font-display);
  text-shadow: 0 0 12px rgba(0,229,255,.7);
}
.mi__split-control {
  position: absolute; z-index: 8; left: 232px; top: 76px;
  display: flex; align-items: center; gap: 10px; padding: 7px 9px 7px 11px;
  color: rgba(220,250,253,.58); background: rgba(3,9,12,.88);
  border: 1px solid rgba(0,229,255,.24); border-radius: 6px; backdrop-filter: blur(12px);
  font: 600 7px/1 var(--font-display); letter-spacing: .13em; text-transform: uppercase;
}
.mi__split-control[hidden], .mi__split-labels[hidden] { display: none !important; }
.mi__split-control > div { display: flex; gap: 3px; }
.mi__split-control button {
  min-width: 28px; height: 24px; padding: 0 7px; border: 1px solid rgba(0,229,255,.16); border-radius: 4px;
  color: var(--text-faint); background: transparent; cursor: pointer;
  font: 700 8px/1 var(--font-display); text-transform: uppercase;
}
.mi__split-control button:hover, .mi__split-control button.is-on { color: #001316; background: var(--cyan); border-color: var(--cyan); }
.mi__split-labels {
  --mi-split-count: 5;
  position: absolute; z-index: 5; inset: auto 18px 55px 18px;
  display: grid; grid-template-columns: repeat(var(--mi-split-count), minmax(0,1fr)); pointer-events: none;
}
.mi__split-labels span {
  justify-self: center; max-width: 92%; padding: 5px 7px; overflow: hidden; text-overflow: ellipsis;
  color: rgba(227,253,255,.8); background: rgba(3,9,12,.72); border: 1px solid rgba(0,229,255,.22); border-radius: 4px;
  font: 700 7px/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.mi.is-split .mi__worldcard, .mi.is-split .mi__wire { opacity: 0; pointer-events: none; }
@media (max-width: 720px) {
  .mi__feature-tools { left: 10px; right: 10px; top: 10px; gap: 5px; }
  .mi__textures-open, .mi__xray-toggle { flex: 1 1 0; min-width: 0; gap: 6px; padding: 9px 8px 9px 10px; }
  .mi__textures-open strong, .mi__xray-toggle strong { font-size: 8px; }
  .mi__textures-open small, .mi__xray-toggle small { font-size: 5px; }
  .mi__textures-open > b, .mi__xray-toggle > b { font-size: 14px; }
  .mi__split-control { left: auto; right: 10px; top: 66px; }
  .mi__split-labels { inset-inline: 8px; bottom: 48px; }
  .mi__split-labels span { font-size: 5px; padding-inline: 4px; }
}
.mi__texture-browser {
  position: absolute; inset: 0; z-index: 20;
  display: grid; place-items: center; padding: 24px;
}
.mi__texture-browser[hidden] { display: none !important; }
.mi__texture-backdrop {
  position: absolute; inset: 0; border: 0; cursor: default;
  background: rgba(2,6,8,.83); backdrop-filter: blur(18px);
}
.mi__texture-panel {
  position: relative; width: min(1120px, 96%); max-height: calc(100% - 10px);
  display: grid; grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden; color: #dffaff; background: rgba(5,11,15,.97);
  border: 1px solid rgba(0,229,255,.34); border-radius: 12px;
  box-shadow: 0 30px 100px rgba(0,0,0,.7), inset 0 0 60px rgba(0,229,255,.025);
}
.mi__texture-panel > header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 18px 20px 15px; border-bottom: 1px solid rgba(255,255,255,.075);
}
.mi__texture-panel header small, .mi__texture-set-kicker {
  display: block; color: var(--cyan); font-size: 7px;
  letter-spacing: .2em; text-transform: uppercase;
}
.mi__texture-panel h2 {
  margin: 4px 0 0; font: 700 19px/1.1 var(--font-display);
  letter-spacing: .02em;
}
.mi__texture-close {
  width: 34px; height: 34px; padding: 0; cursor: pointer;
  color: var(--text-faint); background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.1); border-radius: 6px; font-size: 22px;
}
.mi__texture-close:hover { color: var(--cyan); border-color: rgba(0,229,255,.42); }
.mi__texture-tabs {
  display: grid; grid-template-columns: 1fr 1fr;
  padding: 8px; background: rgba(255,255,255,.018);
  border-bottom: 1px solid rgba(255,255,255,.075);
}
.mi__texture-tabs button {
  min-height: 38px; cursor: pointer; color: var(--text-faint); background: transparent;
  border: 0; border-radius: 5px; font: 600 9px/1 var(--font-display);
  letter-spacing: .12em; text-transform: uppercase;
}
.mi__texture-tabs button:hover { color: #fff; }
.mi__texture-tabs button.is-on {
  color: var(--cyan-soft); background: rgba(0,229,255,.09);
  box-shadow: inset 0 0 0 1px rgba(0,229,255,.14);
}
.mi__texture-stage {
  min-height: 0; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(270px, .7fr);
}
.mi__texture-stage figure {
  min-width: 0; min-height: 0; margin: 0; padding: 18px;
  display: grid; place-items: center; overflow: auto;
  background:
    linear-gradient(45deg, rgba(255,255,255,.035) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.035) 75%),
    linear-gradient(45deg, rgba(255,255,255,.035) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.035) 75%),
    #090d10;
  background-size: 24px 24px; background-position: 0 0, 12px 12px;
}
.mi__texture-stage img {
  display: block; max-width: 100%; max-height: 520px; object-fit: contain;
  border: 1px solid rgba(255,255,255,.09); box-shadow: 0 18px 55px rgba(0,0,0,.45);
}
.mi__texture-stage > aside {
  min-width: 0; overflow-y: auto; padding: 23px 20px;
  border-left: 1px solid rgba(255,255,255,.075);
}
.mi__texture-name {
  margin: 6px 0 8px; color: #f1ffff;
  font: 700 17px/1.2 var(--font-display);
}
.mi__texture-description {
  margin: 0 0 18px; color: var(--text-faint); font-size: 10px; line-height: 1.55;
}
.mi__texture-channels { display: grid; gap: 7px; }
.mi__texture-channels button {
  width: 100%; min-width: 0; display: grid; grid-template-columns: 34px 1fr;
  align-items: center; gap: 10px; padding: 9px; cursor: pointer; text-align: left;
  color: var(--text-dim); background: rgba(255,255,255,.018);
  border: 1px solid rgba(255,255,255,.075); border-radius: 6px;
}
.mi__texture-channels button:hover, .mi__texture-channels button.is-on {
  color: #fff; border-color: rgba(0,229,255,.38); background: rgba(0,229,255,.065);
}
.mi__texture-channels button > b {
  display: grid; place-items: center; width: 34px; height: 30px;
  color: var(--cyan); border: 1px solid rgba(0,229,255,.25); border-radius: 4px;
  font: 700 8px/1 var(--font-display);
}
.mi__texture-channels span {
  min-width: 0; font: 600 10px/1.25 var(--font-display);
}
.mi__texture-channels small {
  display: block; margin-top: 3px; overflow: hidden; text-overflow: ellipsis;
  color: rgba(199,231,236,.38); font: 500 7px/1.2 var(--font-body); white-space: nowrap;
}
.mi__texture-full {
  display: flex; align-items: center; justify-content: center; margin-top: 15px;
  min-height: 35px; color: #001316; background: var(--cyan);
  border-radius: 5px; font: 700 8px/1 var(--font-display);
  letter-spacing: .1em; text-transform: uppercase;
  box-shadow: 0 0 20px rgba(0,229,255,.18);
}
.mi__texture-full:hover { color: #001316; background: #7af3ff; }
.mi__help {
  position: absolute; z-index: 4; left: 18px; bottom: 16px;
  display: flex; gap: 15px; pointer-events: none;
  color: rgba(199,231,236,.42); font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
}
.mi__help span::before { content: '◇'; color: var(--cyan); margin-right: 6px; }
.mi__reset {
  position: absolute; z-index: 5; right: 16px; bottom: 13px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(4,8,11,.7);
}
.mi__reset:hover { color: var(--cyan); border-color: rgba(0,229,255,.26); }
.mi__rail {
  min-width: 0; height: clamp(520px, calc(100vh - 120px), 820px);
  border-left: 1px solid rgba(77,211,231,.16);
  background: rgba(4,8,11,.92);
  overflow: hidden;
}
.mi__rail-head {
  height: 74px; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 0 15px; border-bottom: 1px solid rgba(255,255,255,.07);
}
.mi__rail-head small {
  display: block; color: var(--cyan); font-size: 8px; letter-spacing: .18em;
  text-transform: uppercase; margin-bottom: 3px;
}
.mi__rail-head strong { font-family: var(--font-display); font-size: 14px; }
.mi__rail-count { color: var(--text-faint); font-size: 9px; letter-spacing: .1em; }
.mi__rail-list {
  height: calc(100% - 74px); overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--cyan-deep) transparent;
}
.mi__rail-list button {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; text-align: left; cursor: pointer;
  color: var(--text-dim); background: transparent; border: 0;
  border-bottom: 1px solid rgba(255,255,255,.055);
  transition: color .2s, background .2s;
}
.mi__rail-list button:hover, .mi__rail-list button.is-on {
  color: var(--text); background: rgba(0,229,255,.055);
}
.mi__rail-list button.is-on { box-shadow: inset 2px 0 var(--cyan); }
.mi__rail-list span { min-width: 0; }
.mi__rail-list b {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-display); font-size: 11px; font-weight: 600;
}
.mi__rail-list small { display: block; color: var(--text-faint); font-size: 9px; margin-top: 3px; }
.mi__rail-list em {
  flex: none; color: var(--cyan); font-style: normal; font-size: 8px;
  border: 1px solid rgba(0,229,255,.22); border-radius: 3px; padding: 3px 5px;
}
.mi.is-lod .mi__rail-list em { color: #ffbd68; border-color: rgba(255,189,104,.28); }
.mi__footer {
  grid-column: 1 / -1;
  min-height: 76px; display: grid;
  grid-template-columns: repeat(4, minmax(90px, 145px)) 1fr;
  align-items: center; gap: 26px; padding: 12px 20px;
  background: rgba(4,8,11,.96); border-top: 1px solid rgba(77,211,231,.16);
}
.mi__footer small {
  display: block; color: var(--text-faint); font-size: 8px; letter-spacing: .14em;
  text-transform: uppercase; margin-bottom: 3px;
}
.mi__footer strong { font-family: var(--font-display); font-size: 15px; color: #eaffff; }
.mi__status {
  justify-self: end; max-width: 44ch; color: var(--text-faint);
  font-size: 10px; line-height: 1.5; text-align: right;
}

/* Playable Unity build. The iframe is deliberately created only after the
   visitor opts in, so the 240+ MiB development build never blocks the case. */
.mi-game {
  --game-line: rgba(77,211,231,.2);
  position: relative;
  margin-top: 26px;
  color: #dffaff;
  background:
    radial-gradient(circle at 78% 18%, rgba(0,229,255,.06), transparent 34%),
    linear-gradient(145deg, #050a0d, #030608 72%);
  border: 1px solid var(--game-line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 35px 100px rgba(0,0,0,.36), inset 0 0 80px rgba(0,229,255,.018);
}
.mi-game::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .28;
  background-image:
    linear-gradient(rgba(77,211,231,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(77,211,231,.055) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(110deg, #000, transparent 68%);
}
.mi-game__head {
  position: relative; z-index: 1;
  min-height: 82px; padding: 18px 22px;
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  background: rgba(3,8,11,.78); border-bottom: 1px solid rgba(77,211,231,.14);
}
.mi-game__head small, .mi-game__intro > small {
  display: block; color: var(--cyan); font: 700 8px/1.2 var(--font-display);
  letter-spacing: .17em; text-transform: uppercase;
}
.mi-game__head h2 {
  margin: 7px 0 0; font: 600 clamp(18px, 2vw, 25px)/1.05 var(--font-display);
  letter-spacing: -.02em;
}
.mi-game__head > span {
  flex: none; padding: 7px 10px; color: var(--text-faint);
  border: 1px solid rgba(255,255,255,.09); border-radius: 4px;
  font: 600 8px/1 var(--font-display); letter-spacing: .13em; text-transform: uppercase;
}
.mi-game__launch {
  position: relative; z-index: 1; min-height: 530px; padding: clamp(22px, 3.5vw, 52px);
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(330px, .85fr);
  align-items: stretch; gap: clamp(28px, 4vw, 72px);
}
.mi-game__launch[hidden], .mi-game__player[hidden] { display: none !important; }
.mi-game__art {
  position: relative; min-height: 390px; overflow: hidden; border-radius: 12px;
  border: 1px solid rgba(77,211,231,.17); background: #070b0e;
  box-shadow: inset 0 0 80px rgba(0,0,0,.65), 0 25px 60px rgba(0,0,0,.34);
}
.mi-game__art::before {
  content: ''; position: absolute; inset: -3%;
  background:
    linear-gradient(90deg, rgba(2,6,8,.82), transparent 42%, rgba(2,6,8,.16)),
    linear-gradient(0deg, rgba(2,6,8,.8), transparent 48%),
    var(--mi-game-poster) center / cover no-repeat;
  filter: saturate(.7) contrast(1.12); transform: scale(1.04);
  transition: filter .5s, transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.mi-game__art::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(0,229,255,.13) 50%, transparent 65%);
  transform: translateX(-100%); animation: migamescan 4.8s ease-in-out infinite;
}
@keyframes migamescan { 55%,100% { transform: translateX(120%); } }
.mi-game__art i {
  position: absolute; z-index: 2; left: 50%; top: 50%; width: 76px; height: 76px;
  translate: -50% -50%; border: 1px solid rgba(0,229,255,.62); border-radius: 50%;
  background: rgba(2,8,11,.66); box-shadow: 0 0 0 10px rgba(0,229,255,.035), 0 0 35px rgba(0,229,255,.14);
}
.mi-game__art i::after {
  content: ''; position: absolute; left: 31px; top: 24px;
  border-left: 19px solid var(--cyan); border-top: 13px solid transparent; border-bottom: 13px solid transparent;
}
.mi-game__art b {
  position: absolute; z-index: 2; left: 50%; top: calc(50% + 58px); translate: -50% 0;
  color: rgba(222,252,255,.5); font: 700 8px/1 var(--font-display); letter-spacing: .24em;
}
.mi-game__launch:hover .mi-game__art::before { filter: saturate(.88) contrast(1.08); transform: scale(1.075); }
.mi-game__intro { align-self: center; padding-right: clamp(0px, 2vw, 20px); }
.mi-game__intro h3 {
  margin: 12px 0 16px; max-width: 13ch;
  font: 600 clamp(27px, 3.2vw, 48px)/.98 var(--font-display); letter-spacing: -.045em;
}
.mi-game__intro p { max-width: 52ch; margin: 0; color: var(--text-dim); font-size: 12px; line-height: 1.75; }
.mi-game__facts {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  margin: 25px 0; overflow: hidden; border: 1px solid rgba(255,255,255,.075); border-radius: 6px;
  background: rgba(255,255,255,.075);
}
.mi-game__facts span { min-width: 0; padding: 11px; background: rgba(4,9,12,.94); color: var(--text-faint); font-size: 8px; line-height: 1.35; }
.mi-game__facts b { display: block; margin-bottom: 4px; color: #eaffff; font: 700 10px/1 var(--font-display); }
.mi-game__start {
  width: 100%; min-height: 54px; padding: 0 16px 0 20px; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  color: #001216; background: var(--cyan); border: 0; border-radius: 5px;
  font: 700 10px/1 var(--font-display); letter-spacing: .15em; text-transform: uppercase;
  box-shadow: 0 0 32px rgba(0,229,255,.17); transition: color .25s, background .25s, box-shadow .25s;
}
.mi-game__start b { font-size: 20px; transition: transform .25s; }
.mi-game__start:hover { color: #eaffff; background: #079db2; box-shadow: 0 0 42px rgba(0,229,255,.25); }
.mi-game__start:hover b { transform: translateX(4px); }
.mi-game__intro > em { display: block; margin-top: 10px; color: var(--text-faint); font-size: 8px; font-style: normal; text-align: center; }
.mi-game__player { position: relative; z-index: 2; }
.mi-game__toolbar {
  min-height: 48px; padding: 8px 12px 8px 18px; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  background: rgba(2,7,10,.96); border-bottom: 1px solid rgba(77,211,231,.14);
}
.mi-game__state { min-width: 0; display: flex; align-items: center; gap: 9px; color: var(--text-dim); font-size: 9px; }
.mi-game__state i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: #ffbd68; box-shadow: 0 0 10px currentColor; }
.mi-game__state span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mi-game__state b { color: var(--cyan); font: 700 9px/1 var(--font-display); }
.mi-game.is-ready .mi-game__state i { color: var(--cyan); background: var(--cyan); }
.mi-game__toolbar > div:last-child { flex: none; display: flex; gap: 6px; }
.mi-game__toolbar button {
  padding: 8px 11px; cursor: pointer; color: var(--text-dim); background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.09); border-radius: 4px;
  font: 600 8px/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase;
}
.mi-game__toolbar button:hover { color: var(--cyan-soft); border-color: rgba(0,229,255,.3); }
.mi-game__frame { position: relative; aspect-ratio: 16 / 10; min-height: 520px; background: #080808; overflow: hidden; }
.mi-game__iframe { display: block; width: 100%; height: 100%; border: 0; background: #080808; }
.mi-game__progress { position: absolute; z-index: 3; left: 0; right: 0; top: 0; height: 2px; pointer-events: none; background: rgba(255,255,255,.06); }
.mi-game__progress i { display: block; width: 0; height: 100%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); transition: width .2s ease-out; }
.mi-game.is-ready .mi-game__progress { opacity: 0; transition: opacity .5s 1s; }


/* Cover hook: an abstract plan assembles under one scanner sweep. It hints at
   the production system without giving away the exploded-view interaction. */
.fx-modular { z-index: 2; overflow: hidden; }
.fxm__blueprint { position: absolute; inset: 16% 54% 16% 4%; transform: perspective(500px) rotateX(58deg) rotateZ(-34deg); }
.fxm__block {
  position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%);
  width: 15%; height: 21%;
  border: 1px solid rgba(0,229,255,.5);
  background: rgba(0,229,255,.035);
  box-shadow: inset 0 0 10px rgba(0,229,255,.08);
  opacity: .15; transform: translateY(18px) scale(.82);
  transition: opacity .35s, transform .55s var(--ease);
  transition-delay: calc(var(--i) * 18ms);
}
.entry:hover .fxm__block, .entry.is-hot .fxm__block { opacity: .8; transform: none; }
.fxm__scan {
  position: absolute; inset: -30% 48% -30% -18%; opacity: 0;
  background: linear-gradient(90deg, transparent 42%, rgba(0,229,255,.5) 50%, transparent 58%);
  filter: blur(1px); transform: translateX(-60%);
}
.entry:hover .fxm__scan, .entry.is-hot .fxm__scan { opacity: .7; animation: fxmscan 1.7s .15s ease-out both; }
@keyframes fxmscan { to { transform: translateX(180%); } }
.fxm__stamp {
  position: absolute; left: 5%; bottom: 8%;
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; transform: translateY(8px);
  transition: opacity .35s .45s, transform .35s .45s;
}
.entry:hover .fxm__stamp, .entry.is-hot .fxm__stamp { opacity: 1; transform: none; }
.fxm__stamp b { color: var(--cyan); font: 700 11px/1 var(--font-display); letter-spacing: .18em; }
.fxm__stamp small { color: rgba(210,248,255,.45); font-size: 8px; letter-spacing: .14em; }

/* Modular Building cover: the poster is a lightweight live GLB. The house
   stays assembled; hover only changes its inspection light and technical HUD. */
.fx-modular-host .entry__media {
  background:
    radial-gradient(ellipse at 74% 26%, rgba(76,132,184,.13), transparent 42%),
    radial-gradient(ellipse at 22% 70%, rgba(76,132,184,.07), transparent 46%),
    #2b2b2b;
  box-shadow: inset 0 0 0 1px rgba(0,229,255,.06);
}
.fx-modular-host .entry__media::after {
  content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background:
    radial-gradient(110% 82% at 50% 38%, transparent 28%, rgba(3,7,10,.48) 82%, rgba(3,6,9,.78) 100%),
    linear-gradient(to bottom, rgba(3,7,10,.18), transparent 25%, transparent 75%, rgba(3,7,10,.44));
  opacity: .22;
}
.fxm__preview {
  position: absolute; inset: 0; z-index: 1; overflow: hidden;
  background:
    radial-gradient(ellipse at 74% 26%, rgba(76,132,184,.13), transparent 42%),
    radial-gradient(ellipse at 22% 70%, rgba(76,132,184,.07), transparent 46%),
    #2b2b2b;
}
.fxm__poster {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: .96; filter: blur(2px); transform: scale(1.015);
  transition: opacity .5s ease, filter .5s ease;
}
.fxm__preview.is-ready .fxm__poster { opacity: 0; filter: blur(0); }
.fxm__canvas { width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .65s; }
.fxm__preview.is-ready .fxm__canvas { opacity: 1; }
.fxm__wirecanvas {
  --fxm-scan-y: -8%;
  position: absolute; z-index: 3; inset: 0;
  width: 100%; height: 100%; display: block; pointer-events: none;
  opacity: 0; mix-blend-mode: screen;
  filter: drop-shadow(0 0 3px rgba(0,229,255,.7));
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0%,
    transparent calc(var(--fxm-scan-y) - 48%),
    rgba(0,0,0,.08) calc(var(--fxm-scan-y) - 38%),
    rgba(0,0,0,.42) calc(var(--fxm-scan-y) - 20%),
    #000 calc(var(--fxm-scan-y) - 2%),
    #000 var(--fxm-scan-y),
    transparent calc(var(--fxm-scan-y) + .8%),
    transparent 100%);
  mask-image: linear-gradient(to bottom,
    transparent 0%,
    transparent calc(var(--fxm-scan-y) - 48%),
    rgba(0,0,0,.08) calc(var(--fxm-scan-y) - 38%),
    rgba(0,0,0,.42) calc(var(--fxm-scan-y) - 20%),
    #000 calc(var(--fxm-scan-y) - 2%),
    #000 var(--fxm-scan-y),
    transparent calc(var(--fxm-scan-y) + .8%),
    transparent 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.entry:hover .fxm__wirecanvas,
.entry.is-hot .fxm__wirecanvas {
  animation: fxmWireScan 2.5s .08s cubic-bezier(.2,.72,.2,1) infinite;
}
.fxm__scanline {
  position: absolute; z-index: 4; left: -10%; right: -10%; top: -12%; height: 2px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(0,229,255,.9) 26%, #dfffff 50%, rgba(0,229,255,.8) 74%, transparent);
  box-shadow: 0 0 12px rgba(0,229,255,.75), 0 18px 42px rgba(0,229,255,.16);
}
.entry:hover .fxm__scanline,
.entry.is-hot .fxm__scanline { animation: fxmCoverScan 2.5s .08s cubic-bezier(.2,.72,.2,1) infinite; }
@keyframes fxmCoverScan {
  0% { top: -8%; opacity: 0; }
  10%, 74% { opacity: .9; }
  82%, 100% { top: 108%; opacity: 0; }
}
@property --fxm-scan-y {
  syntax: '<percentage>';
  inherits: false;
  initial-value: -8%;
}
@keyframes fxmWireScan {
  0% { --fxm-scan-y: -8%; opacity: 0; }
  10% { opacity: .94; }
  82% { --fxm-scan-y: 108%; opacity: .94; }
  100% { --fxm-scan-y: 108%; opacity: 0; }
}
.fxm__corners { position: absolute; z-index: 6; inset: 13px; pointer-events: none; }
.fxm__corners i { position: absolute; width: 18px; height: 18px; opacity: .32; transition: opacity .3s, width .5s, height .5s; }
.fxm__corners i::before, .fxm__corners i::after { content: ''; position: absolute; background: var(--cyan); }
.fxm__corners i::before { width: 100%; height: 1px; }
.fxm__corners i::after { width: 1px; height: 100%; }
.fxm__corners i:nth-child(1) { top: 0; left: 0; }
.fxm__corners i:nth-child(2) { top: 0; right: 0; transform: rotate(90deg); }
.fxm__corners i:nth-child(3) { right: 0; bottom: 0; transform: rotate(180deg); }
.fxm__corners i:nth-child(4) { bottom: 0; left: 0; transform: rotate(270deg); }
.entry:hover .fxm__corners i,
.entry.is-hot .fxm__corners i { width: 28px; height: 28px; opacity: .78; }
.fxm__live {
  position: absolute; z-index: 7; top: 18px; left: 20px;
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-display); letter-spacing: .12em;
}
.fxm__live i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 9px var(--cyan);
  animation: miblink 1.7s ease-in-out infinite;
}
.fxm__live span { color: #dfffff; font-size: 8px; font-weight: 700; }
.fxm__live b {
  color: rgba(210,248,255,.42); font-size: 7px; font-weight: 500;
  border-left: 1px solid rgba(255,255,255,.12); padding-left: 7px;
}
.fxm__metrics {
  position: absolute; z-index: 7; left: 20px; right: 20px; bottom: 18px;
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid rgba(0,229,255,.18); border-radius: 5px;
  background: rgba(4,9,12,.72); backdrop-filter: blur(8px);
  opacity: .66; transform: translateY(4px);
  transition: opacity .35s, transform .45s var(--ease), border-color .35s;
}
.entry:hover .fxm__metrics,
.entry.is-hot .fxm__metrics {
  opacity: 1; transform: none; border-color: rgba(0,229,255,.38);
}
.fxm__metrics span { min-width: 0; padding: 8px 10px; }
.fxm__metrics span + span { border-left: 1px solid rgba(255,255,255,.08); }
.fxm__metrics small {
  display: block; color: rgba(199,231,236,.38);
  font-size: 6px; letter-spacing: .13em; white-space: nowrap;
}
.fxm__metrics b {
  display: block; margin-top: 3px; overflow: hidden; text-overflow: ellipsis;
  color: #eaffff; font: 700 9px/1.1 var(--font-display); white-space: nowrap;
}
.fxm__systems {
  position: absolute; z-index: 7; top: 47px; right: 20px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 5px;
}
.fxm__systems i {
  padding: 4px 7px; border: 1px solid rgba(0,229,255,.18); border-radius: 3px;
  color: rgba(210,248,255,.45); background: rgba(4,9,12,.5);
  font-style: normal; font-size: 6px; letter-spacing: .13em;
  opacity: 0; transform: translateX(9px);
  transition: opacity .3s, transform .45s var(--ease), color .3s;
}
.entry:hover .fxm__systems i,
.entry.is-hot .fxm__systems i { opacity: 1; transform: none; color: var(--cyan); }
.entry:hover .fxm__systems i:nth-child(2),
.entry.is-hot .fxm__systems i:nth-child(2) { transition-delay: .07s; }
.entry:hover .fxm__systems i:nth-child(3),
.entry.is-hot .fxm__systems i:nth-child(3) { transition-delay: .14s; }
.fxm__load {
  position: absolute; z-index: 7; left: 0; right: 0; top: 50%;
  color: rgba(210,248,255,.42); text-align: center;
  font: 600 7px/1 var(--font-display); letter-spacing: .16em;
  transition: opacity .35s, transform .35s;
}
.fxm__preview.is-ready .fxm__load { opacity: 0; transform: translateY(7px); }
.fxm__outer-glow {
  position: absolute; left: 3%; top: 8%; width: 46%; height: 70%;
  opacity: 0; filter: blur(30px); border-radius: 50%;
  background: rgba(0,229,255,.13); transition: opacity .5s;
}
.entry:hover .fxm__outer-glow,
.entry.is-hot .fxm__outer-glow { opacity: .65; }

/* ============================================================
   COVER HOVER FX  (js/hover-fx.js; desktop pointer only)
   ============================================================ */
.entry.has-fx {
  transition: transform .55s var(--ease), border-color .45s,
              box-shadow .45s, margin .5s var(--ease);
}
/* The margin is a MOUSE-ONLY courtesy: it eases the neighbours apart while
   the ornaments play. On touch the same shift would shove the whole feed
   around as cards go hot mid-scroll, so .is-hot opens only the overflow. */
.entry.has-fx:hover { margin-block: 34px; }
.entry.has-fx:hover,
.entry.has-fx.is-hot { overflow: visible; }
.entry__fx {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 4;   /* ships fly over the card */
}
/* the fx canvas bleeds beyond the card; its buffer size is set in JS and its
   display size is pinned to match (1:1), so it must escape the global
   `canvas { max-width: 100% }` reset or the drawing scales and the pointer
   mapping drifts (ship + dendrites land off the card) */
.entry__fxcanvas { position: absolute; pointer-events: none; max-width: none; }
/* Soul: star field painted inside the card media (deep-space interior) */
.entry__starcanvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* Soul: the neural web sits BEHIND the card content (above the card's
   own background, below its media + text), so it reads as coming from
   behind the card - only the edges and a few over-strands show */
.entry__fx.fx-soul { z-index: 0; }
.fx-soul-host .entry__media,
.fx-soul-host .entry__info { position: relative; z-index: 3; }
/* the badge is already absolutely placed in the media's corner; it only needs
   lifting over the web. Giving it `position: relative` here put it back in the
   flow, where it took a line box and shoved the poster 26px down the card,
   so the still sat low until the video (absolute, correct) faded in over it. */
.fx-soul-host .entry__wip { z-index: 3; }
/* The fx layer used to be display:none under 820px, from the era when small
   screens had no way to trigger it. js/mobile.js now drives it by scroll
   position, and css/mobile.css resizes the ornaments for the stacked card. */

/* -- theo: the rendered bear pops up from behind the card's top edge --
   assets/theo/bear/bear-strip.webp is 20 frames side by side, each 350x248.
   `bottom: 100%` sits the strip's bottom edge exactly on the card's top
   border: the frames are already cut off there, so the card reads as the
   ledge he is hiding behind. At rest the card clips him away (overflow
   hidden); on hover `.entry.has-fx:hover` opens the overflow and the
   sequence plays: frame 1 is the ears, frame 2 he is already up, so it
   lands as a cartoon pop, then he blinks and looks around.
   steps(20, jump-none) walks all 20 frames and `forwards` freezes the last
   one until the pointer leaves the card, which drops back to frame 1. */
.fx-theo .fxt {
  position: absolute;
  bottom: 100%;          /* strip bottom edge == card top edge */
  right: 11%;
  width: var(--bear-w, 230px);
  aspect-ratio: 350 / 248;
  background: url(../assets/theo/bear/bear-strip.webp) 0 0 / 2000% 100% no-repeat;
}
@keyframes fxt-play {
  from { background-position: 0% 0; }
  to   { background-position: 100% 0; }
}
/* 20 frames at the 12 fps they were animated at */
.entry:hover .fx-theo .fxt,
.entry.is-hot .fx-theo .fxt {
  animation: fxt-play calc(20 / 12 * 1s) steps(20, jump-none) forwards;
}

/* -- theo: the cat sits in the card's bottom-right corner and washes himself --
   Anchors measured off the clip's own alpha: his feet rest at 83.7% of the
   frame's height and his body ends at 83.4% of its width; the slack around
   that is room for the tail to swing through. The calc()s pin those two
   points a fixed inset from the card's corner, so --cat-w resizes him in
   place instead of sliding him around.
   He scales with the window because the card does: 150px reads right on a
   laptop and looks like a kitten on a 1920 monitor. The 230px ceiling is
   where his head reaches the tag chips. Reserving space in the info column
   instead (the pillars used padding-right) wraps the tags onto a second line
   and leaves this one card 26px taller than the other eight at rest, which is
   a worse trade for an ornament that only shows on hover. */
.fx-theo .plc {
  --cat-w: clamp(150px, 12vw, 230px);
  position: absolute;
  right: calc(26px - 0.166 * var(--cat-w));
  bottom: calc(10px - 0.119 * var(--cat-w));
  width: var(--cat-w);
  aspect-ratio: 1661 / 1214;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.fx-theo .plc__art { width: 100%; height: 100%; max-width: none; }
.entry:hover .fx-theo .plc,
.entry.is-hot .fx-theo .plc { opacity: 1; }

/* -- level art: the vine creeps over the card and freezes when grown --
   The clip was framed in Blender against a render of this very card, which
   sits inside the 1920x1080 frame at x 0.0185..0.9854, y 0.1329..0.6717
   (y up). These numbers put that embedded card rect back exactly onto the
   real one: the box is 1/0.9669 of the card wide, and translateY is a % of
   the box's OWN height (unlike `bottom`), which is what lets the frame hang
   the right amount below the card's bottom edge while the aspect stays 16:9.
   Re-render with a different camera and all three numbers change. */
.fx-levelart .fxv {
  position: absolute;
  left: -1.913%;         /* frame's left edge, in card widths */
  bottom: 0;
  width: 103.424%;       /* card is 0.9669 of the frame wide */
  aspect-ratio: 1920 / 1080;
  transform: translateY(13.29%);   /* frame bottom sits below the card's */
  opacity: 0;
  transition: opacity .28s var(--ease);
}
.fx-levelart .fxv__art { width: 100%; height: 100%; max-width: none; }
.entry:hover .fx-levelart .fxv,
.entry.is-hot .fx-levelart .fxv { opacity: 1; }

/* -- level art: the sakura grows out of the card's bottom-right corner --
   The render reserves the bottom 11.1% of its height for petals falling past
   the ground line, so the box is dropped by that much to stand the trunk on
   the card's bottom edge, and the pivot sits on the ground line rather than
   the asset's edge so it grows out of the ground instead of sliding up. */
.fx-levelart .fxs {
  position: absolute;
  /* Hang it off the card's right edge, and let the canopy bleed off the page
     on a wide window rather than hugging the edge. The card is centred, so
     `50vw - 50%` is the margin beside it; the +90px is how much bleed we
     tolerate. The cap is not there to prevent bleed, it is there because that
     margin does not scale with the card: on a narrow window an uncapped push
     would sail the trunk clean off the right of the page. */
  right: calc(-1 * min(var(--sakura-push, 56%), 50vw - 50% + 240px));
  bottom: calc(var(--sakura-w, 760px) * -0.101);
  width: var(--sakura-w, 760px);
  aspect-ratio: 640 / 580;
  transform-origin: 50% 88.9%;
  transform: scale(.4) rotate(-5deg);
  opacity: 0;
  transition: transform .62s cubic-bezier(.2, 1.35, .38, 1), opacity .3s var(--ease);
}
.fx-levelart .fxs__art {
  width: 100%; height: 100%;
  max-width: none; object-fit: contain;
}
/* The tree sprouts only once the vine has finished creeping over the card, so
   the two read as one beat. The delay lives on the :hover rule alone, which is
   what makes leaving snap back immediately instead of waiting it out again.
   --vine-dur is set by js from the clip's real length. */
.entry:hover .fx-levelart .fxs,
.entry.is-hot .fx-levelart .fxs {
  transform: scale(1) rotate(0deg);
  opacity: 1;
  transition-delay: var(--vine-dur, 2500ms);
}
/* js holds .fx-room through the leave transition, so the shrink is not
   clipped off the moment :hover stops matching */
.entry.fx-levelart-host.fx-room { overflow: visible; }

/* -- stylised renders: cut-out models drift onto the card on hover --
   The slot carries the bob (a transform animation), the img carries the pop-in
   (a transform transition); nesting keeps the two transforms from fighting. */
.entry.fx-renders-host.fx-room { overflow: visible; }
/* VR rig spawn reuses the fxr machinery; the headset floats up and the controllers
   spill past the card's sides, so it also needs the overflow held open on leave. */
.entry.fx-vrrig-host.fx-room { overflow: visible; }
/* the rig sits BEHIND the WHOLE card. A child can't paint behind its parent's own
   background, so the card's fill moves to an opaque .entry__face (z-index 0); the fx
   layer drops behind it (z-index -1) and the content rides above it (z-index 1). Only
   what pokes past the card's outer edges shows, so it reads as being behind the card. */
.entry.fx-vrrig-host { background: transparent; isolation: isolate; }
.entry__face {
  position: absolute; inset: 0;
  background: var(--surface); border-radius: 18px;
  z-index: 0;
}
.fx-vrrig-host .entry__fx { z-index: -1; }
.fx-vrrig-host .entry__media,
.fx-vrrig-host .entry__info { position: relative; z-index: 1; }
/* the headset is a FOREGROUND prop: its layer paints over media and info */
.entry__fxf {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 2;
}
/* Whatever escapes a hovered card must clear its neighbours: cards paint in
   DOM order, so without this the next card down covers the sakura's canopy
   and the stylised renders that pop past the bottom edge. */
.entry.fx-room,
.entry.has-fx:hover,
.entry.has-fx.is-hot { z-index: 5; }
.fx-vrrig-host .fxr__m {
  filter: drop-shadow(0 16px 30px rgba(0,0,0,.6)) drop-shadow(0 0 20px rgba(0,229,255,.16));
}
.fxr__slot {
  position: absolute; pointer-events: none;
  animation: fxr-bob 3.4s ease-in-out infinite;
  will-change: transform;
}
.fxr__m {
  width: 100%; height: 100%; object-fit: contain; display: block;
  opacity: 0;
  transform: scale(.25) rotate(var(--rot, 0deg));
  transform-origin: 50% 72%;
  filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .5));
  transition: opacity .5s var(--ease),
              transform .6s cubic-bezier(.2, 1.4, .35, 1);
}
.entry.fx-spawn .fxr__m { opacity: 1; transform: scale(1) rotate(var(--rot, 0deg)); }
@keyframes fxr-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
@media (prefers-reduced-motion: reduce) { .fxr__slot { animation: none; } }

/* -- soul + ships: rendered on canvas by js/hover-fx.js --
   (live dendrite tentacles ported from aevus NeuralBackground;
   the Neon Swarm dogfight ported from the game's own renderer) */
.entry__stars {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none; opacity: .85;
}

/* -- vr: headset above the card, controllers float at the sides -- */
.fx-vr .fxv { position: absolute; inset: 0; }
.fxv__hmd {
  position: absolute; top: -74px; left: 50%; margin-left: -95px; width: 190px;
  opacity: 0; transition: opacity .4s;
  animation: fxvFloat 4s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 14px rgba(0,229,255,.35));
}
.fxv__ctrl {
  position: absolute; width: 54px;
  opacity: 0; transition: opacity .4s .12s;
  filter: drop-shadow(0 0 10px rgba(0,229,255,.3));
}
.fxv__ctrl--l { left: -32px; top: 26%; animation: fxvFloat 3.4s ease-in-out -1.2s infinite alternate; }
.fxv__ctrl--r { right: -32px; top: 38%; animation: fxvFloat 3.8s ease-in-out -2.3s infinite alternate; }
.entry:hover .fxv__hmd,
.entry:hover .fxv__ctrl { opacity: 1; }
@keyframes fxvFloat {
  from { translate: 0 -5px; }
  to   { translate: 0 7px; }
}

/* ============================================================
   PROJECT PAGE MEDIA  (gallery + gameplay video)
   ============================================================ */
.pagevideo { margin-top: 44px; }
.pagevideo video {
  width: 100%; border-radius: 14px;
  border: 1px solid var(--line);
  background: #000;
}
.gallery { margin-top: 10px; }
.gallery__title {
  font-family: var(--font-display);
  font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em;
  margin: 40px 0 18px;
}
.gallery__clips {
  display: flex; gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--cyan-deep) rgba(255,255,255,.05);
}
.gallery__clips::-webkit-scrollbar { height: 8px; }
.gallery__clips::-webkit-scrollbar-track {
  background: rgba(255,255,255,.04); border-radius: 100px;
}
.gallery__clips::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, var(--cyan-deep), var(--cyan));
  border-radius: 100px;
}
.gallery__clips::-webkit-scrollbar-thumb:hover {
  background: var(--cyan); box-shadow: var(--glow-cyan);
}
.gallery__clip {
  position: relative; flex: 0 0 auto;
  width: min(230px, 58vw); aspect-ratio: 9/16;
  border-radius: 12px; overflow: hidden;
  border: 1px solid var(--line);
  background: #000;
  scroll-snap-align: start;
  cursor: pointer;
  transition: border-color .3s, box-shadow .3s;
}
.gallery__clip:hover {
  border-color: rgba(0,229,255,.4);
  box-shadow: 0 0 24px rgba(0,229,255,.12);
}
.gallery__clip video { width: 100%; height: 100%; object-fit: cover; }
.gallery__playbtn {
  position: absolute; inset: 0; margin: auto;
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong);
  background: rgba(4,7,10,.6);
  color: var(--cyan); font-size: 15px;
  cursor: pointer;
  transition: opacity .3s, box-shadow .3s;
}
.gallery__playbtn::after { content: '▶'; margin-left: 3px; }
.gallery__clip:hover .gallery__playbtn { box-shadow: var(--glow-cyan); }
.gallery__clip.playing .gallery__playbtn { opacity: 0; }
.gallery__stills {
  display: grid; gap: 14px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 860px) { .gallery__stills { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .gallery__stills { grid-template-columns: 1fr; } }
.gallery__stills img {
  width: 100%; border-radius: 12px;
  border: 1px solid var(--line);
}

/* -- youtube devlogs: click-to-load facades --
   The button and the iframe that replaces it are both 16:9 grid cells, so the
   swap on click does not reflow the row. */
.ytgrid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 680px) { .ytgrid { grid-template-columns: 1fr; } }
.ytlite,
.ytlite__frame {
  width: 100%; aspect-ratio: 16 / 9;
  border-radius: 12px; display: block;
}
.ytlite {
  position: relative; overflow: hidden; padding: 0;
  border: 1px solid var(--line);
  background: #000; cursor: pointer;
  transition: border-color .3s, box-shadow .3s;
}
.ytlite:hover { border-color: rgba(0,229,255,.4); box-shadow: 0 0 24px rgba(0,229,255,.12); }
.ytlite__frame { border: 0; }
.ytlite__thumb {
  width: 100%; height: 100%; object-fit: cover;
  opacity: .9; transition: opacity .3s, transform .9s var(--ease);
}
.ytlite:hover .ytlite__thumb { opacity: 1; transform: scale(1.03); }
.ytlite__play {
  position: absolute; inset: 0; margin: auto;
  width: 64px; height: 64px; border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: rgba(4,7,10,.55); backdrop-filter: blur(4px);
  transition: box-shadow .3s, background .3s;
}
.ytlite__play::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 0; height: 0; margin-left: 25px;   /* nudge the triangle optically centre */
  border-style: solid; border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent var(--cyan);
}
.ytlite:hover .ytlite__play { box-shadow: var(--glow-cyan); background: rgba(4,7,10,.4); }
.ytlite__label {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 14px 12px; text-align: left;
  font-family: var(--font-display);
  font-size: 13px; font-weight: 600; letter-spacing: .01em;
  color: var(--text);
  background: linear-gradient(to top, rgba(4,7,10,.82), transparent);
}

/* -- project case study -- */
.case { margin-top: 46px; }
.case__facts {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden;
}
@media (max-width: 720px) { .case__facts { grid-template-columns: repeat(2, 1fr); } }
.fact {
  display: flex; flex-direction: column; gap: 6px;
  padding: 18px 20px; background: var(--bg);
}
.fact__k {
  font-family: var(--font-display); font-size: 11px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--cyan);
}
.fact__v { font-size: 14px; color: var(--text-dim); line-height: 1.4; }

/* big-number strip (the "in numbers" row) */
.case__stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  margin-top: 16px;
}
@media (max-width: 620px) { .case__stats { grid-template-columns: repeat(2, 1fr); } }
.stat { display: flex; flex-direction: column; gap: 4px; }
.stat__n {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.4rem, 2.6vw, 2rem); letter-spacing: -.02em;
  line-height: 1;
  background: linear-gradient(100deg, var(--cyan), var(--cyan-soft));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stat__l { font-size: 12.5px; color: var(--text-faint); line-height: 1.35; }

.case__block { margin-top: 44px; }
.case__h {
  font-family: var(--font-display); font-size: 1.15rem; font-weight: 600;
  letter-spacing: -.01em; margin-bottom: 20px;
  padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.case__note { font-size: 14px; color: var(--text-faint); margin: -8px 0 20px; }

/* two readings of one project: overview vs under-the-hood */
.case__tabs {
  display: inline-flex; gap: 4px; margin-top: 34px;
  padding: 4px; border: 1px solid var(--line); border-radius: 100px;
  background: rgba(255,255,255,.02);
}
.case__tab {
  appearance: none; cursor: pointer; border: 0; border-radius: 100px;
  padding: 9px 20px; background: transparent;
  font-family: var(--font-display); font-size: 13.5px; font-weight: 600;
  letter-spacing: .01em; color: var(--text-faint);
  transition: color .25s var(--ease), background .25s var(--ease);
}
.case__tab:hover { color: var(--text-dim); }
.case__tab.is-on {
  color: var(--bg);
  background: linear-gradient(100deg, var(--cyan), var(--cyan-soft));
}
.case__panel[hidden] { display: none; }
.case__panel.is-on { animation: caseFade .4s var(--ease); }
@keyframes caseFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.case__lead {
  font-size: clamp(1.02rem, 1.7vw, 1.22rem); line-height: 1.55; color: var(--text);
  max-width: 62ch; margin: 30px 0 4px;
}
.case__panel > .case__block:first-child { margin-top: 30px; }
/* an umbrella-page tab opens with its own facts grid (no shared header above) */
.case__panel > .case__facts:first-child { margin-top: 30px; }
/* per-tab media placeholder (a tab whose footage is not shot yet) */
.case__ph { margin-top: 30px; }
/* per-tab real footage */
.case__media { margin-top: 30px; border-radius: 14px; overflow: hidden; }
.case__media video { display: block; }

/* -- umbrella page: project selector cards in the hero media slot --
   The media wrapper clips overflow for videos; cards need their hover lift
   and glow to breathe, so the takeover lifts the clipping. */
.project-body__media.has-projcards { overflow: visible; border-radius: 0; }
.case__projcards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
@media (max-width: 720px) { .case__projcards { grid-template-columns: 1fr; } }
.projcard {
  appearance: none; cursor: pointer; text-align: left; padding: 0;
  font: inherit; color: inherit;
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
  background: var(--surface);
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.projcard:hover { transform: translateY(-4px); border-color: rgba(0, 229, 255, .35); }
.projcard.is-on {
  border-color: var(--cyan);
  box-shadow: 0 0 0 1px var(--cyan), 0 14px 44px rgba(0, 229, 255, .10);
}
.projcard__media { position: relative; display: block; aspect-ratio: 16 / 9; background: #000; }
.projcard__media img,
.projcard__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.projcard__media video { opacity: 0; transition: opacity .4s; }
.projcard:hover .projcard__media video,
.projcard.is-hot .projcard__media video { opacity: 1; }
.projcard__media .ph { position: absolute; inset: 0; border: 0; border-radius: 0; }
.projcard__body { display: block; padding: 18px 20px 20px; }
.projcard__t {
  display: block;
  font-family: var(--font-display); font-weight: 700; font-size: 19px;
  letter-spacing: -.01em; color: var(--text);
}
.projcard__b { display: block; margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--text-dim); }
.projcard__go {
  display: inline-block; margin-top: 14px;
  font-family: var(--font-display); font-size: 13px; font-weight: 600;
  color: var(--cyan);
}
/* inline links inside case copy (e.g. the venue a project was shown at) */
.hl__b a, .case__note a, .fact__v a {
  color: var(--text);
  border-bottom: 1px solid var(--cyan-deep);
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.hl__b a:hover, .case__note a:hover, .fact__v a:hover { color: var(--cyan); border-color: var(--cyan); }

/* highlights: the hard problems, two-up */
.case__hl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 720px) { .case__hl { grid-template-columns: 1fr; } }
.hl {
  padding: 22px 22px 24px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface);
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.hl:hover { border-color: rgba(0,229,255,.35); transform: translateY(-3px); }
.hl__n {
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  letter-spacing: .1em; color: var(--cyan); opacity: .55;
}
.hl__t {
  font-family: var(--font-display); font-size: 1.02rem; font-weight: 600;
  letter-spacing: -.01em; margin: 6px 0 10px;
}
.hl__b { font-size: 14px; line-height: 1.6; color: var(--text-dim); }

/* systems: the breadth, four columns */
.case__sys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 22px; }
@media (max-width: 860px) { .case__sys { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .case__sys { grid-template-columns: 1fr; } }
.sys__t {
  font-family: var(--font-display); font-size: 12px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text);
  margin-bottom: 12px;
}
.sys__l { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.sys__l li {
  position: relative; padding-left: 14px;
  font-size: 13px; line-height: 1.35; color: var(--text-faint);
}
.sys__l li::before {
  content: ''; position: absolute; left: 0; top: 7px;
  width: 4px; height: 4px; border-radius: 50%; background: var(--cyan-deep);
}

/* tooling */
.case__tool { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.case__tool li {
  position: relative; padding-left: 20px;
  font-size: 14px; line-height: 1.6; color: var(--text-dim);
}
.case__tool li::before {
  content: ''; position: absolute; left: 0; top: 10px;
  width: 9px; height: 1px; background: var(--cyan);
}

/* built with: logo marks + keyword chips */
.case__stack { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.techmark {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 16px 10px 13px;
  border: 1px solid var(--line-strong); border-radius: 100px;
  background: rgba(255,255,255,.02);
  font-family: var(--font-display); font-size: 13.5px; font-weight: 600; color: var(--text);
}
.techmark__i { width: 18px; height: 18px; fill: var(--cyan); flex: 0 0 auto; }
.case__kw { display: flex; flex-wrap: wrap; gap: 8px; }
.case__kw span {
  font-size: 12px; letter-spacing: .02em; color: var(--text-faint);
  padding: 5px 12px; border: 1px solid var(--line); border-radius: 100px;
}

/* -- playable control bar (below the game, never over it) -- */
.sp-play__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-top: 12px;
  padding: 10px 14px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface);
}
.sp-play__barnote {
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-faint);
}
.sp-play__fsbtn {
  font-family: var(--font-display);
  font-size: 12.5px; font-weight: 600; letter-spacing: .06em;
  color: var(--cyan);
  background: rgba(0,229,255,.05);
  border: 1px solid var(--line-strong); border-radius: 100px;
  padding: 8px 18px; cursor: pointer;
  transition: background .3s, box-shadow .3s;
}
.sp-play__fsbtn:hover { background: rgba(0,229,255,.1); box-shadow: var(--glow-cyan); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { border-top: 1px solid var(--line); padding: 26px 0; }
.footer__wrap {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12.5px; color: var(--text-faint);
}
.footer a:hover { color: var(--cyan); }