/* Voxsol website
   Brand: Inter; Vivid Blue #0369FC, Dark Blue #081B42, Gray #CCCCCC, black, white.
   Mood from the approved coming-soon page: #081B43 ground with soft blue-greys.
   The ground is one shaded navy on every page: lit from the top left, a little
   deeper toward the foot, nothing drawn on it. Square corners, voxel marks,
   one moving object per page at most. */

/* Inter, served from this site (SIL Open Font License 1.1, see
   assets/fonts/Inter-OFL.txt), so no visitor data goes to a font service. One
   variable file per script with the weight and optical-size axes, the same
   Latin and extended-Latin cuts Google Fonts served. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;
  --bg: #081b43;
  --bg-deep: #06163a;
  --ink: #eef2f9;
  --ink-2: #c6d2e6;
  --muted: #a9b7cf;
  --quiet: #8c9dbb;
  --line: rgba(183, 201, 234, 0.14);
  --line-strong: rgba(183, 201, 234, 0.28);
  /* Form fields need a 3:1 boundary against the page (WCAG 1.4.11). */
  --line-field: rgba(183, 201, 234, 0.55);
  --ice: #b7c9ea;
  --voxel: #96b6e1;
  --blue: #0369fc;
  --gray: #cccccc;
  --paper: #ffffff;
  --paper-ink: #081b42;
  --gutter: clamp(20px, 5vw, 64px);
  --max: 1200px;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  --font: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --section: clamp(88px, 12vw, 168px);
  /* A damped spring: on target in about a quarter of the time, one soft
     overshoot, settled. Browsers without linear() get a plain overshoot. */
  --spring: cubic-bezier(0.34, 1.45, 0.64, 1);
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --spring: linear(0, 0.024, 0.087, 0.178, 0.286, 0.403, 0.521, 0.635, 0.741, 0.834, 0.915, 0.982, 1.034, 1.074, 1.101, 1.118, 1.125, 1.126, 1.12, 1.11, 1.097, 1.083, 1.068, 1.053, 1.039, 1.027, 1.016, 1.006, 0.999, 0.993, 0.989, 0.986, 0.985, 0.984, 0.984, 0.985, 0.987, 0.989, 0.99, 0.992, 1);
  }
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
}

html {
  background-color: #050e2a;
  background-image:
    radial-gradient(1300px 900px at 14% 0%, rgba(3, 105, 252, 0.2), transparent 62%),
    radial-gradient(1000px 700px at 92% 28%, rgba(3, 105, 252, 0.09), transparent 62%),
    linear-gradient(180deg, #0a2254 0%, #081b43 38%, #061535 78%, #050e2a 100%);
  background-repeat: no-repeat;
}

body {
  margin: 0;
  min-width: 300px;
  background: transparent;
  color: var(--ink-2);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, canvas, svg { display: block; max-width: 100%; }

/* Atmosphere. Behind the content: a sparse dot graticule fixed to the screen,
   like an instrument's, under a soft vignette. Over everything: a fine film
   grain, so flat navy reads as a surface. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 125% 100% at 50% 36%, transparent 48%, rgba(2, 6, 22, 0.62) 100%),
    radial-gradient(circle, rgba(190, 212, 248, 0.2) 0.9px, transparent 1.4px);
  background-size: 100% 100%, 34px 34px;
  background-position: 0 0, 17px 17px;
}
body::after {
  content: "";
  position: fixed;
  inset: -50%;
  z-index: 60;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.055;
}
/* The grain shimmers with the rest of the ambient motion; reduced motion stills it. */
html:not(.motion-off) body::after { animation: grain 1.1s steps(5) infinite; }
html.has-smooth-scroll { scroll-behavior: auto; }
@keyframes grain {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-2%, 1.5%); }
  40% { transform: translate(1.5%, -2.5%); }
  60% { transform: translate(-1%, -1%); }
  80% { transform: translate(2.5%, 2%); }
  100% { transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
}

a { color: inherit; }

::selection { background: #3e6cb3; color: #fff; }

:focus-visible {
  outline: 2px solid var(--voxel);
  outline-offset: 4px;
}

/* Display type: Inter at its display optical size, tracked tight but not
   cramped, a little air between lines and words, so large lines read calm. */
h1, h2, h3 {
  color: var(--ink);
  margin: 0;
  font-weight: 500;
  font-optical-sizing: auto;
  text-wrap: balance;
}

h1 {
  font-size: clamp(42px, 5.4vw, 80px);
  line-height: 1.05;
  letter-spacing: -0.032em;
  word-spacing: 0.1em;
}

h2 {
  font-size: clamp(32px, 4vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.028em;
  word-spacing: 0.04em;
}

h3 {
  font-size: clamp(20px, 1.7vw, 24px);
  line-height: 1.25;
  letter-spacing: -0.016em;
  font-weight: 500;
}

p { margin: 0; text-wrap: pretty; }

.wrap {
  width: 100%;
  max-width: calc(var(--max) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.skip-link {
  position: fixed;
  z-index: 50;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  background: var(--ink);
  color: var(--bg);
  text-decoration: none;
  transform: translateY(-160%);
}
.skip-link:focus { transform: none; }

/* Small label with the three-pixel mark from the coming-soon page. */
.label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.pixels {
  position: relative;
  flex: 0 0 13px;
  width: 13px;
  height: 13px;
}
.pixels::before, .pixels::after, .pixels i {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  background: var(--voxel);
}
.pixels::before { top: 0; right: 0; opacity: 0.9; }
.pixels::after { bottom: 0; left: 0; opacity: 0.45; }
.pixels i { bottom: 0; right: 0; opacity: 0.7; }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 8px;
  border: 1px solid rgba(204, 204, 204, 0.45);
  color: var(--gray);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
}
.tag::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--gray);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 22px;
  border: 0;
  border-radius: 2px;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.004em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}

/* A block with a hard offset shadow: it presses down like a key. */
.btn-primary {
  background: #fff;
  color: var(--paper-ink);
  box-shadow: 4px 4px 0 var(--blue);
}
.btn-primary:hover {
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 var(--blue);
}
.btn-primary:active {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 var(--blue);
}

.btn-small {
  min-height: 38px;
  padding: 8px 14px;
  font-size: 14px;
  box-shadow: 3px 3px 0 var(--blue);
}
.btn-small:hover { box-shadow: 4px 4px 0 var(--blue); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
.link-arrow::after {
  content: "";
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--voxel);
  border-right: 2px solid var(--voxel);
  transform: rotate(45deg);
  transition: transform 140ms ease;
}
.link-arrow:hover::after { transform: translateX(3px) rotate(45deg); }
.link-arrow:hover { color: #fff; }

/* ---------- Header ---------- */

.site-header {
  position: relative;
  z-index: 20;
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 84px;
}
/* The brand lockup: the approved mark, larger and lit from behind by a slow
   breathing glow, with the company line set small beside it. The mark itself
   is used as delivered. */
.brand-lockup { display: flex; align-items: center; gap: 20px; min-width: 0; }
.brand {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.brand img {
  width: 156px;
  height: auto;
  filter: drop-shadow(0 0 1px rgba(200, 225, 255, 0.6)) drop-shadow(0 0 14px rgba(3, 105, 252, 0.55));
}
.brand::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -14%;
  right: -14%;
  top: -40%;
  bottom: -40%;
  background: radial-gradient(closest-side, rgba(3, 105, 252, 0.42), rgba(3, 105, 252, 0.12) 55%, transparent);
  filter: blur(6px);
  opacity: 0.8;
  pointer-events: none;
}
html:not(.motion-off) .brand::before { animation: brand-breathe 6s ease-in-out infinite; }
@keyframes brand-breathe {
  0%, 100% { opacity: 0.55; transform: scale(0.94); }
  50% { opacity: 1; transform: scale(1.04); }
}
.brand-tagline {
  max-width: 196px;
  padding-left: 20px;
  border-left: 1px solid rgba(183, 201, 234, 0.28);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.015em;
  color: var(--muted);
  text-wrap: balance;
}
/* The brand line stays at every width, only smaller. */
@media (max-width: 600px) {
  .brand-lockup { gap: 12px; }
  .brand-tagline { max-width: 150px; padding-left: 12px; font-size: 10.5px; line-height: 1.35; }
}
@media (max-width: 440px) {
  .brand img { width: 108px; }
  .brand-tagline { max-width: 128px; font-size: 10px; }
  .menu-toggle .menu-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.6vw, 34px);
  margin-left: auto;
}
.nav a:not(.btn) {
  color: var(--muted);
  font-size: 15px;
  text-decoration: none;
  padding: 10px 0;
}
.nav a:not(.btn):hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"] {
  box-shadow: inset 0 -2px 0 var(--blue);
}

.menu-toggle {
  display: none;
  margin-left: auto;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 4px;
  background: none;
  border: 0;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.menu-toggle .bars {
  display: grid;
  grid-template-columns: repeat(2, 6px);
  gap: 3px;
}
.menu-toggle .bars i {
  width: 6px;
  height: 6px;
  background: var(--voxel);
}
.menu-toggle .bars i:nth-child(2) { opacity: 0.5; }
.menu-toggle .bars i:nth-child(3) { opacity: 0.7; }

@media (max-width: 760px) {
  .header-inner { min-height: 68px; }
  .brand img { width: 124px; }
}
/* The nav folds into the menu before the brand line would have to go. */
/* Narrow windows: the links fold into a small panel that drops from the Menu
   button, on the right and only as wide as its links, in the text size of
   the Menu label. */
@media (max-width: 1020px) {
  .menu-toggle { display: inline-flex; }
  .nav {
    display: none;
    position: absolute;
    top: calc(100% - 10px);
    right: var(--gutter);
    left: auto;
    width: max-content;
    min-width: 188px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6px 18px 18px;
    background: rgba(8, 24, 62, 0.97);
    border: 1px solid rgba(150, 182, 225, 0.24);
    box-shadow: inset 0 1px 0 rgba(200, 220, 255, 0.12), 0 24px 48px -16px rgba(0, 0, 0, 0.6), 0 0 40px rgba(3, 105, 252, 0.12);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
  .nav.is-open { display: flex; }
  html:not(.motion-off) .nav.is-open { animation: menu-in 160ms ease-out; }
  .nav a:not(.btn) {
    padding: 11px 0;
    font-size: 15px;
    border-bottom: 1px solid var(--line);
  }
  .nav a[aria-current="page"] { box-shadow: none; color: var(--ink); }
  .nav .btn { margin-top: 16px; }
}
@keyframes menu-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nav.is-open { animation: none !important; }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  padding-bottom: clamp(56px, 8vw, 96px);
  overflow: hidden;
}

.stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  align-items: center;
  width: 100%;
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.stage-art {
  position: relative;
  height: clamp(400px, 58vh, 640px);
}
.stage-art::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 86%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(3, 105, 252, 0.36), rgba(3, 105, 252, 0.1) 55%, transparent);
  pointer-events: none;
}

/* The canvas reaches past the skull's column, left, up and across the light
   board, so blocks knocked loose fly out over the page instead of stopping at
   an invisible edge. It lets the pointer through to the films below; the
   skull reads the pointer from the stage. */
.skull-canvas {
  position: absolute;
  z-index: 3;
  left: -16%;
  top: -14%;
  width: 216%;
  height: 114%;
  max-width: none;
  pointer-events: none;
  opacity: 0;
  transition: opacity 400ms ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y;
  /* The neck dissolves into the page. */
  -webkit-mask-image: linear-gradient(to bottom, #000 84%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 84%, transparent 100%);
}

.stage-fallback {
  grid-column: 1 / -1;
  grid-row: 1;
  width: auto;
  max-width: 100%;
  height: clamp(300px, 54vh, 560px);
  object-fit: contain;
  margin: 0 auto;
  -webkit-mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 62%, transparent 100%);
  mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 62%, transparent 100%);
  /* Holds the space while the live scene loads; shown only without WebGL or
     without scripts (see the noscript style on the home page). */
  visibility: hidden;
}
.stage.no-gl .stage-fallback { visibility: visible; }

.stage-art, .planes-wrap { display: none; }

.stage.is-live .stage-fallback { display: none; }
.stage.is-live .stage-art, .stage.is-live .planes-wrap { display: block; }
.stage.is-live .skull-canvas { opacity: 1; }
/* A soft bloom like the artwork, on larger screens with a mouse only. When the
   renderer draws its own glow around the bright blocks, only the wide halo stays. */
@media (min-width: 861px) and (hover: hover) {
  .stage.is-live .skull-canvas { filter: drop-shadow(0 0 10px rgba(80, 160, 255, 0.5)) drop-shadow(0 0 42px rgba(3, 105, 252, 0.38)); }
  .stage.is-live.has-glow .skull-canvas { filter: drop-shadow(0 0 42px rgba(3, 105, 252, 0.34)); }
}

/* The light board from the artwork: one heavy, backlit unit holding three
   films. A navy housing with a lit edge and a stepped, voxel-like depth; a
   diffuser that glows through the gaps between the films; films without
   borders. A film lifts off the board on a spring when it is shown. */
.planes-wrap {
  position: relative;
  z-index: 2;
  perspective: 1200px;
}

.lightboard {
  position: relative;
  padding: 12px 12px 20px;
  transform: rotateY(-16deg) rotateX(3deg);
  transform-origin: 0 50%;
  transform-style: preserve-3d;
  background: linear-gradient(168deg, #1b3c80 0%, #0e275c 32%, #0a1d48 70%, #071538 100%);
  box-shadow:
    inset 0 1px 0 rgba(200, 220, 255, 0.4),
    inset 1px 0 0 rgba(200, 220, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45),
    1px 1px 0 #0b1f4e, 2px 2px 0 #0a1c47, 3px 3px 0 #091a41, 4px 4px 0 #08173b,
    5px 5px 0 #071535, 6px 6px 0 #06122f, 7px 7px 0 #051029, 8px 8px 0 #040e24,
    0 46px 70px -24px rgba(0, 0, 0, 0.7),
    0 0 110px rgba(3, 105, 252, 0.32);
}
/* The diffuser: brightest at the centre, falling off to the housing. */
.lightboard::before {
  content: "";
  position: absolute;
  inset: 12px 12px 20px;
  background: radial-gradient(95% 80% at 50% 42%, #eef5ff 0%, #b4d0ff 30%, #5d93f5 64%, #2556c9 88%, #1a47ad 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), inset 0 0 26px rgba(4, 26, 90, 0.55), 0 0 34px rgba(130, 185, 255, 0.4);
  transition: filter 260ms ease;
}
.stage.has-plane .lightboard::before { filter: brightness(1.08); }
/* A small status light on the housing, like the artwork's square nodes. */
.lightboard-led {
  position: absolute;
  right: 14px;
  bottom: 7px;
  width: 5px;
  height: 5px;
  background: #8ec3ff;
  box-shadow: 0 0 6px #8ec3ff, 0 0 14px rgba(3, 105, 252, 0.8);
}

.planes {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.1vw, 15px);
  padding: clamp(10px, 1.1vw, 15px);
  transform-style: preserve-3d;
  /* Films sit a hair in front of the board, so the pointer always finds a
     film and never the board behind it. */
  transform: translateZ(1px);
  pointer-events: none;
}

.plane {
  --lift: 2px;
  --grow: 1;
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  pointer-events: auto;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(var(--lift)) scale(var(--grow));
  transform-origin: 50% 50%;
  transition: transform 620ms var(--spring), filter 180ms ease, opacity 180ms ease;
}
.plane:focus-visible { outline: none; }
.plane:focus-visible .film { outline: 2px solid var(--ice); outline-offset: 3px; }

.film {
  position: relative;
  display: block;
  aspect-ratio: 0.72;
  overflow: hidden;
  background: #020817;
  box-shadow: 0 0 0 1px rgba(2, 8, 23, 0.7), 0 2px 4px rgba(0, 0, 0, 0.45);
  transition: box-shadow 260ms ease;
}
/* Glass on the film: a soft sheen from the top left and light bleeding in at the rim. */
.film::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.05) 26%, transparent 42%);
  box-shadow: inset 0 0 16px rgba(120, 170, 255, 0.22);
}
.plane canvas {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* The shown film comes off the board toward the viewer and glows; the others
   settle back a little. No border: the lift and the light carry it. */
.plane.is-active { --lift: 70px; --grow: 1.62; z-index: 3; }
.plane.is-active .film {
  box-shadow: 0 30px 60px -10px rgba(0, 0, 0, 0.7), 0 0 46px rgba(110, 170, 255, 0.55), 0 0 0 1px rgba(2, 8, 23, 0.4);
}
.stage.has-plane .plane:not(.is-active) { --grow: 0.94; filter: brightness(0.62) saturate(0.85); }
/* The outer films grow toward the board's centre, so a lifted film stays clear of the skull. */
.plane[data-plane="sagittal"] { transform-origin: 30% 50%; }
.plane[data-plane="coronal"] { transform-origin: 70% 50%; }

@media (prefers-reduced-motion: reduce) {
  .plane { transition: transform 140ms ease, filter 140ms ease; }
}

/* More of the family around the stage on wide screens: two smaller Voxi and
   a few plain cubes, spread into the open space around the skull and panels. */
.stage-extras {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.stage-extras canvas { position: absolute; pointer-events: auto; }
.stage-extras .voxi-scan { left: 86%; top: 8%; width: 64px; height: 64px; }
.stage-extras .voxi-nod { left: 64%; top: 80%; width: 56px; height: 56px; }
.stage-extras .cube-a { left: 29%; top: 3%; width: 32px; height: 32px; }
.stage-extras .cube-b { left: 57%; top: 24%; width: 20px; height: 20px; }
.stage-extras .cube-c { left: 94%; top: 60%; width: 38px; height: 38px; }
.stage-extras .cube-d { left: 41%; top: 90%; width: 18px; height: 18px; }
.float-cube { cursor: default; }
/* Out-of-focus voxels in front of and behind the scene give it depth of field. */
.bokeh, .stage-extras .bokeh {
  position: absolute;
  display: block;
  pointer-events: none;
  background: linear-gradient(150deg, #a9ccff 0%, #3f7ff3 55%, #1b50c2 100%);
}
.bokeh-a { left: 44%; top: 86%; width: 120px; height: 120px; rotate: 24deg; filter: blur(18px); opacity: 0.26; }
.bokeh-b { left: 76%; top: -4%; width: 64px; height: 64px; rotate: -16deg; filter: blur(9px); opacity: 0.24; }
.bokeh-c { left: 6%; top: 12%; width: 30px; height: 30px; rotate: 12deg; filter: blur(3px); opacity: 0.32; }
.bokeh-d { left: 95%; top: 76%; width: 190px; height: 190px; rotate: 38deg; filter: blur(30px); opacity: 0.16; }
/* Hairlines with a square node, as in the artwork, from the skull to the board. */
.lead-line {
  position: absolute;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(142, 195, 255, 0), rgba(142, 195, 255, 0.55) 45%, rgba(142, 195, 255, 0.12));
  opacity: 0.6;
  transition: opacity 300ms ease;
}
.lead-line i {
  position: absolute;
  left: 46%;
  top: -3px;
  width: 7px;
  height: 7px;
  background: #8ec3ff;
  box-shadow: 0 0 8px #8ec3ff, 0 0 18px rgba(3, 105, 252, 0.9);
}
.lead-a { left: 39%; top: 27%; width: 15%; rotate: -6deg; }
.lead-b { left: 41%; top: 68%; width: 12%; rotate: 9deg; }
.stage.has-plane .lead-line { opacity: 1; }
.stage.is-live .stage-extras { display: block; }
@media (max-width: 860px) {
  .stage-extras .bokeh, .stage-extras .lead-line, .stage-extras .float-cube { display: none; }
  .stage-extras .voxi-scan { left: 82%; top: 50%; width: 46px; height: 46px; }
  .stage-extras .voxi-nod { left: 80%; top: 6%; width: 42px; height: 42px; }
}

.hero-copy {
  position: relative;
  z-index: 3;
  margin: clamp(12px, 5.5vh, 72px) auto 0;
  padding: 0 var(--gutter);
  text-align: center;
}
/* As the hero scrolls away it sinks back and dims, so the next screen rises over it. */
.hero .stage, .hero-copy {
  translate: 0 calc(var(--leave, 0) * 110px);
  opacity: calc(1 - var(--leave, 0) * 0.75);
}
@media (min-width: 861px) and (min-height: 640px) {
  .hero {
    box-sizing: border-box;
    min-height: calc(100svh - var(--header-h, 84px));
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: clamp(24px, 3vh, 40px);
  }
}

/* Scroll cues pinned to a screen's right corners: down at the foot of the
   hero and the workspace, up at the top of the workspace and the closing. */
.hero-hud, .section-hud {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  max-width: calc(var(--max) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(8px, 1.6vh, 18px);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--quiet);
  pointer-events: none;
}
.section-hud.at-top { top: 0; bottom: auto; padding: clamp(8px, 1.6vh, 18px) var(--gutter) 0; }
/* The up and down cues only make sense where the page runs screen by screen. */
.section-hud { display: none; }
@media (min-width: 861px) and (min-height: 640px) {
  .section-hud { display: flex; }
}
.scroll-cue { display: inline-flex; align-items: center; gap: 12px; }
/* On phones and tablets only the moving line stays; the word could sit on the content. */
@media (max-width: 860px) {
  .scroll-cue { font-size: 0; gap: 0; }
}
.scroll-cue i {
  position: relative;
  width: 1px;
  height: 30px;
  overflow: hidden;
  background: rgba(183, 201, 234, 0.22);
}
.scroll-cue i::after {
  content: "";
  position: absolute;
  left: 0;
  top: -40%;
  width: 1px;
  height: 40%;
  background: var(--ice);
}
html:not(.motion-off) .scroll-cue i::after { animation: cue 1.9s cubic-bezier(0.6, 0, 0.2, 1) infinite; }
html:not(.motion-off) .scroll-cue.is-up i::after { animation-name: cue-up; }
@keyframes cue {
  0% { top: -40%; }
  100% { top: 100%; }
}
@keyframes cue-up {
  0% { top: 100%; }
  100% { top: -40%; }
}

@media (max-width: 860px) {
  .stage {
    grid-template-columns: minmax(0, 1fr);
  }
  .stage-art { height: clamp(260px, 70vw, 420px); }
  .skull-canvas { left: -6%; top: -8%; width: 112%; height: 108%; }
  .voxi-hero { left: 6%; top: 60%; width: 17%; }
  .planes-wrap { perspective: none; max-width: 380px; margin: 0 auto; width: 100%; }
  .lightboard { transform: none; }
  .plane.is-active { --lift: 2px; --grow: 1.2; }
  .stage-fallback { width: 100%; height: auto; }
  .hero { padding-bottom: 76px; }
  .hero-copy { margin-top: 10px; }
}

/* ---------- Sections ---------- */

.section { padding-top: var(--section); padding-bottom: var(--section); }
.section-deep { background: var(--bg-deep); }
.section.tight-top { padding-top: 0; }

.points {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  max-width: 470px;
}
.points li {
  position: relative;
  padding: 12px 0 12px 24px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.45;
}
.points li:last-child { border-bottom: 1px solid var(--line); }
.points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 19px;
  width: 7px;
  height: 7px;
  background: var(--voxel);
}

/* ---------- Reveals and depth ---------- */

/* Words rise from a mask as a headline comes into view. */
.rw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.rw > span { display: inline-block; transition: transform 900ms cubic-bezier(0.2, 0.75, 0.15, 1); }
.can-reveal [data-reveal="words"]:not(.is-revealed) .rw > span { transform: translateY(108%); }
/* Everything else fades up a touch. */
.can-reveal [data-reveal]:not([data-reveal="words"]) {
  transition: opacity 900ms ease, scale 900ms cubic-bezier(0.2, 0.75, 0.15, 1);
}
.can-reveal [data-reveal]:not([data-reveal="words"]):not(.is-revealed) { opacity: 0; scale: 0.96; }

@media (min-width: 861px) {
  .hero h1, .closing h2 { max-width: none; white-space: nowrap; }
}

/* Each section carries its own light, like the hero: a pool of blue behind
   the content and a few out-of-focus voxels. */
.atmos { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.atmos ~ .wrap { position: relative; z-index: 1; }
.glow { position: absolute; display: block; }
.glow-ws {
  right: -12%;
  top: 50%;
  width: 1200px;
  height: 860px;
  translate: 0 -50%;
  background: radial-gradient(closest-side, rgba(3, 105, 252, 0.3), rgba(3, 105, 252, 0.1) 55%, transparent);
}
.glow-closing {
  left: 50%;
  top: 50%;
  width: 1000px;
  height: 640px;
  translate: -50% -50%;
  background: radial-gradient(closest-side, rgba(3, 105, 252, 0.26), rgba(3, 105, 252, 0.08) 60%, transparent);
}
.bokeh-e { left: 3%; top: 12%; width: 96px; height: 96px; rotate: 18deg; filter: blur(16px); opacity: 0.22; }
.bokeh-f { left: 44%; top: 82%; width: 40px; height: 40px; rotate: -12deg; filter: blur(5px); opacity: 0.3; }
.bokeh-g { left: 91%; top: 10%; width: 170px; height: 170px; rotate: 30deg; filter: blur(28px); opacity: 0.16; }
.bokeh-h { left: 10%; top: 58%; width: 130px; height: 130px; rotate: 22deg; filter: blur(22px); opacity: 0.2; }
.bokeh-i { left: 80%; top: 22%; width: 52px; height: 52px; rotate: -18deg; filter: blur(6px); opacity: 0.28; }
.lead-c { left: 57%; top: 31%; width: 17%; rotate: -8deg; opacity: 0.55; }

/* ---------- Workspace: one screen for review, report and what comes next ---------- */

.workspace { position: relative; overflow: hidden; padding: clamp(80px, 10vw, 140px) 0; }
@media (min-width: 861px) and (min-height: 640px) {
  .workspace { box-sizing: border-box; min-height: 100svh; display: flex; align-items: center; }
  .workspace-inner { width: 100%; }
}
.workspace-inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 28px clamp(32px, 4vw, 72px);
  align-items: center;
}
.workspace-copy h2 {
  max-width: 17ch;
  font-size: clamp(32px, 3.3vw, 52px);
  line-height: 1.06;
  text-wrap: balance;
}
.workspace-copy .link-arrow { margin-top: 32px; }
.workspace-stage { position: relative; height: clamp(440px, 40vw, 600px); perspective: 1600px; }
.ws-card { position: absolute; transform-style: preserve-3d; }
.ws-viewer { left: 0; top: 2%; width: 76%; z-index: 1; transform: rotateY(-9deg) rotateX(4deg); }
.ws-report { right: -2%; top: 15%; width: 40%; z-index: 3; transform: rotateY(-14deg) rotateZ(1.5deg) translateZ(40px); transition-delay: 120ms; }
.ws-findings { left: -4%; bottom: -6%; width: 38%; z-index: 4; transform: rotateY(-6deg) rotateZ(-1.2deg) translateZ(70px); transition-delay: 240ms; }
.ws-report .report-figure { max-width: none; margin: 0; padding: 0; }
.ws-report .paper { max-width: none; padding: 22px 22px 26px; }

/* Masks over the viewer, in the auto-segmentation's colours, swept on by a scan line. */
.viewer { position: relative; }
.pane canvas.mask { filter: drop-shadow(0 0 3px rgba(80, 220, 255, 0.45)); }
.workspace-stage.can-play .pane canvas.mask { transition: clip-path 900ms cubic-bezier(0.45, 0, 0.2, 1) 450ms; }
.workspace-stage.can-play .pane-wide canvas.mask { transition-delay: 950ms; }
.workspace-stage.can-play:not(.is-playing) .pane canvas.mask { clip-path: inset(0 0 100% 0); }
.workspace-stage.is-playing .pane canvas.mask { clip-path: inset(0 0 0 0); }
.scan-sweep {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, #8ef0ff 20%, #e9fbff 50%, #8ef0ff 80%, transparent);
  box-shadow: 0 0 14px #6fd8ff, 0 0 32px rgba(3, 105, 252, 0.8);
}
.workspace-stage.can-play.is-playing .scan-sweep { animation: scan-sweep 1.5s cubic-bezier(0.45, 0, 0.2, 1) 350ms 1 both; }
@keyframes scan-sweep {
  0% { top: 0; opacity: 0; }
  10% { opacity: 1; }
  88% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* Findings: dark glass, a tooth number on each row, ticked one by one. */
.findings {
  padding: 12px 16px;
  background: rgba(7, 22, 58, 0.9);
  border: 1px solid rgba(150, 182, 225, 0.3);
  box-shadow: 10px 10px 0 rgba(3, 105, 252, 0.35), 0 24px 50px rgba(0, 0, 0, 0.45);
}
.finding {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid rgba(150, 182, 225, 0.14);
}
.finding:first-child, .voice + .finding { border-top: 0; }
.finding b {
  flex: 0 0 34px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ice);
}
.finding .bar { height: 6px; background: rgba(183, 201, 234, 0.22); transition: background-color 300ms ease; }
.tick { position: relative; flex: 0 0 14px; width: 14px; height: 14px; border: 1px solid rgba(150, 182, 225, 0.6); }
.tick::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: #8ec3ff;
  box-shadow: 0 0 8px #8ec3ff;
  transition: opacity 200ms ease, transform 380ms var(--spring);
}
.workspace-stage.can-play:not(.is-playing) .tick::after { opacity: 0; transform: scale(0.3); }
.workspace-stage.can-play:not(.is-playing) .finding .bar { background: rgba(183, 201, 234, 0.12); }
.workspace-stage.is-playing .finding:nth-child(1) .tick::after, .workspace-stage.is-playing .finding:nth-child(1) .bar { transition-delay: 1.5s; }
.workspace-stage.is-playing .finding:nth-child(2) .tick::after, .workspace-stage.is-playing .finding:nth-child(2) .bar { transition-delay: 1.75s; }
.workspace-stage.is-playing .finding:nth-child(3) .tick::after, .workspace-stage.is-playing .finding:nth-child(3) .bar { transition-delay: 2s; }
.workspace-stage.is-playing .finding:nth-child(4) .tick::after, .workspace-stage.is-playing .finding:nth-child(4) .bar { transition-delay: 2.25s; }

/* The paragraph writes itself from the ticked findings, a caret leading each line. */
.draft .bar { width: var(--w); }
.workspace-stage.can-play:not(.is-playing) .draft .bar { width: 0; }
.workspace-stage.can-play.is-playing .draft .bar {
  width: 0;
  background: linear-gradient(90deg, #dfe5ef calc(100% - 7px), var(--blue) calc(100% - 7px));
  animation-name: type-line, type-settle;
  animation-duration: 620ms, 1ms;
  animation-timing-function: steps(18), linear;
  animation-fill-mode: forwards, forwards;
}
.workspace-stage.can-play.is-playing .draft .bar:nth-child(1) { animation-delay: 2.4s, 3.02s; }
.workspace-stage.can-play.is-playing .draft .bar:nth-child(2) { animation-delay: 3.02s, 3.64s; }
.workspace-stage.can-play.is-playing .draft .bar:nth-child(3) { animation-delay: 3.64s, 4.26s; }
.workspace-stage.can-play.is-playing .draft .bar:nth-child(4) { animation-delay: 4.26s, 4.88s; }
@keyframes type-line { from { width: 0; } to { width: var(--w); } }
@keyframes type-settle { to { background: #dfe5ef; } }

/* A hairline from the findings to the paragraph they become. */
.ws-link {
  position: absolute;
  left: 34%;
  bottom: 22%;
  z-index: 5;
  width: 17%;
  height: 1px;
  rotate: -26deg;
  transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(142, 195, 255, 0.1), rgba(142, 195, 255, 0.7));
  transition: opacity 400ms ease 2.2s;
}
.ws-link i {
  position: absolute;
  right: -3px;
  top: -3px;
  width: 7px;
  height: 7px;
  background: #8ec3ff;
  box-shadow: 0 0 8px #8ec3ff, 0 0 16px rgba(3, 105, 252, 0.9);
}
.workspace-stage.can-play:not(.is-playing) .ws-link { opacity: 0; transition-delay: 0s; }


/* A label on each piece, in the HUD voice of the hero. */
.hud-tag {
  position: absolute;
  left: 0;
  bottom: calc(100% + 12px);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.hud-tag::before {
  content: "";
  width: 6px;
  height: 6px;
  background: #8ec3ff;
  box-shadow: 0 0 8px #8ec3ff, 0 0 16px rgba(3, 105, 252, 0.8);
}
.hud-tag em {
  margin-left: 4px;
  padding: 3px 7px 2px;
  border: 1px solid rgba(204, 204, 204, 0.4);
  color: var(--gray);
  font-style: normal;
  letter-spacing: 0.1em;
}
.ws-findings .hud-tag { bottom: auto; top: calc(100% + 14px); }
.ws-report .hud-tag { left: auto; right: 0; bottom: auto; top: calc(100% + 14px); }

@media (max-width: 860px) {
  .workspace-inner { grid-template-columns: minmax(0, 1fr); }
  .workspace-copy h2 { max-width: 14ch; }
  .workspace-stage { height: auto; perspective: none; display: grid; gap: 56px; margin-top: 40px; }
  .ws-card { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: 100%; transform: none; }
  .ws-report { width: 88%; margin-left: auto; }
  .ws-findings { width: 80%; margin-bottom: 30px; }
  .ws-link { display: none; }
}

/* ---------- Figures (illustrations until product captures exist) ---------- */

figure { margin: 0; }

.figure-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  font-size: 12px;
  color: var(--quiet);
}
.figure-note::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--quiet);
  flex: 0 0 auto;
}

/* Viewer illustration: three planes and a curved panoramic. */
.viewer {
  background: #000;
  border: 1px solid var(--line-strong);
  box-shadow: 10px 10px 0 rgba(3, 105, 252, 0.35);
}
.viewer-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
}
.viewer-bar i { width: 7px; height: 7px; background: rgba(183, 201, 234, 0.28); }
.viewer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
}
.pane {
  position: relative;
  background: #000;
  aspect-ratio: 0.82;
  overflow: hidden;
}
.pane-wide { grid-column: 1 / -1; aspect-ratio: 3.4; }
.pane canvas {
  position: absolute;
  inset: 30px 8% 8%;
  width: 84%;
  height: calc(92% - 30px);
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.pane-wide canvas { inset: 30px 3% 6%; width: 94%; height: calc(94% - 30px); object-fit: fill; }
.pane span {
  position: absolute;
  top: 8px;
  left: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* Report illustration: a printed page. */
.paper {
  position: relative;
  max-width: 440px;
  margin: 0 auto;
  padding: 30px 30px 34px;
  background: var(--paper);
  color: var(--paper-ink);
  box-shadow: 12px 12px 0 var(--blue);
  transform: rotate(-1.2deg);
}
.paper .letterhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--paper-ink);
}
.paper .seal {
  display: grid;
  grid-template-columns: repeat(3, 7px);
  gap: 2px;
}
.paper .seal i { width: 7px; height: 7px; background: var(--paper-ink); }
.paper .seal i:nth-child(2n) { opacity: 0.35; }
.bar {
  display: block;
  height: 7px;
  background: #dfe5ef;
}
.paper .letterhead .bars { display: grid; gap: 6px; justify-items: end; }
.paper h4 {
  margin: 22px 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #4b5d84;
}
.paper .lines { display: grid; gap: 7px; }
.paper .thumbs {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 10px;
  margin: 18px 0 30px;
}
/* The report figure: a view floats above the sheet and springs into its slot. */
.report-figure { position: relative; max-width: 440px; padding: 44px 0 0; }
.report-figure .paper { margin: 0; transform: none; }
.report-figure .paper .thumb { background: transparent; outline: 1px dashed #c3cde0; outline-offset: -1px; }
.report-figure .thumb-fly canvas {
  background: #000;
  transform: translate(150px, -170px) rotate(4deg) scale(1.15);
  transition: transform 520ms cubic-bezier(0.34, 1.4, 0.64, 1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.report-figure .thumb-fly .cursor {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 12px;
  height: 12px;
  background: var(--blue);
  transform: translate(150px, -170px);
  transition: transform 520ms cubic-bezier(0.34, 1.4, 0.64, 1), opacity 200ms;
}
.report-figure .thumb-fly small { opacity: 0; transition: opacity 300ms 400ms; }
.report-figure.is-in .thumb-fly canvas, .report-figure.is-in .thumb-fly .cursor { transform: none; }
.report-figure.is-in .thumb-fly .cursor { opacity: 0; }
.report-figure.is-in .thumb-fly small { opacity: 1; }
.report-figure .signature { stroke-dasharray: 260; stroke-dashoffset: 260; transition: stroke-dashoffset 700ms 500ms ease; }
.report-figure.is-in .signature { stroke-dashoffset: 0; }
@media (max-width: 600px) {
  .report-figure { padding: 36px 0 0; }
  .report-figure .thumb-fly canvas, .report-figure .thumb-fly .cursor { transform: translate(40px, -120px) rotate(4deg) scale(1.1); }
}

/* The check figure: dictation fills a line, then four checks land. */
.check-figure { max-width: 420px; margin: 0 auto; }
.paper.fragment { padding: 26px 26px 30px; transform: rotate(0.8deg); }
.dictate { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.wave { display: inline-flex; align-items: center; gap: 2px; height: 18px; }
.wave i { width: 3px; height: 6px; background: var(--blue); transform-origin: center; }
.wave i:nth-child(2), .wave i:nth-child(6) { height: 10px; }
.wave i:nth-child(3), .wave i:nth-child(5) { height: 14px; }
.wave i:nth-child(4) { height: 18px; }
.dictate .bar.fill { width: 0; height: 7px; background: var(--blue); transition: width 1.2s linear; }
.checks { display: flex; gap: 10px; margin-top: 18px; }
.checks i {
  position: relative;
  width: 14px;
  height: 14px;
  border: 1px solid #8fa2c4;
  transition: background-color 160ms, border-color 160ms;
}
.checks i::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 4px;
  width: 4px;
  height: 4px;
  background: #fff;
  opacity: 0;
  transition: opacity 160ms;
}
.check-figure.is-on .dictate .bar.fill { width: 70%; }
.check-figure.is-on .wave i { animation: wave 1.2s ease-in-out 1; }
.check-figure.is-on .checks i { background: var(--blue); border-color: var(--blue); }
.check-figure.is-on .checks i::after { opacity: 1; }
.check-figure.is-on .checks i:nth-child(1) { transition-delay: 1.3s; }
.check-figure.is-on .checks i:nth-child(2) { transition-delay: 1.45s; }
.check-figure.is-on .checks i:nth-child(3) { transition-delay: 1.6s; }
.check-figure.is-on .checks i:nth-child(4) { transition-delay: 1.75s; }
.check-figure.is-on .checks i::after { transition-delay: inherit; }
.wave i:nth-child(2) { animation-delay: 0.08s; } .wave i:nth-child(3) { animation-delay: 0.16s; }
.wave i:nth-child(4) { animation-delay: 0.24s; } .wave i:nth-child(5) { animation-delay: 0.32s; }
.wave i:nth-child(6) { animation-delay: 0.4s; } .wave i:nth-child(7) { animation-delay: 0.48s; }
@keyframes wave {
  0%, 100% { transform: scaleY(1); }
  25% { transform: scaleY(0.4); }
  50% { transform: scaleY(1.3); }
  75% { transform: scaleY(0.6); }
}
.paper .thumb {
  position: relative;
  background: #000;
  aspect-ratio: 1;
}
.paper .thumb.wide { aspect-ratio: auto; }
.paper .thumb canvas {
  position: absolute;
  inset: 6px;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.paper .thumb small {
  position: absolute;
  left: 6px;
  bottom: -18px;
  font-size: 10px;
  color: #4b5d84;
  letter-spacing: 0.04em;
}
.paper .sign {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: 34px;
}
.paper .sign svg { width: 120px; height: 34px; }
.paper .sign .bar { width: 120px; }

/* ---------- Voxi ---------- */

.voxi-cube {
  width: 112px;
  height: 112px;
  cursor: pointer;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
/* Voxi in the hero scene: the lower-left floating cube. */
.voxi-hero {
  position: absolute;
  left: 1%;
  top: 62%;
  width: 15%;
  height: auto;
  aspect-ratio: 1 / 1;
  max-width: 110px;
  z-index: 2;
}

/* ---------- Pages under development: one screen, Voxi at work ---------- */

.build-scene {
  display: block;
  width: min(720px, 100%);
  /* Short screens keep the headline in view under the scene. */
  width: min(720px, 100%, max(260px, calc((100svh - 400px) * 4 / 3)));
  aspect-ratio: 4 / 3;
  margin: 0 auto 10px;
  /* A soft bloom, like the hero skull's. */
  filter: drop-shadow(0 0 8px rgba(80, 160, 255, 0.3)) drop-shadow(0 0 30px rgba(3, 105, 252, 0.22));
}
@media (max-width: 600px) { .build-scene { width: min(100%, max(240px, calc(100svh - 400px))); aspect-ratio: 1 / 1; } }
.under-dev .label { justify-content: center; }
/* One screen: the scene, the label, the headline and the button all in view. */
.closing.under-dev { padding-top: clamp(16px, 4vh, 44px); padding-bottom: clamp(28px, 6vh, 64px); }
@media (min-width: 861px) and (min-height: 640px) {
  .closing.under-dev:has(> .atmos) { min-height: calc(100svh - var(--header-h, 84px)); }
}
.under-dev h1 { font-size: clamp(30px, 3.8vw, 54px); line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance; }

/* A few Voxi hang out beside the contact form (hangout.js). */
.voxi-hangout { display: block; width: min(440px, 100%); aspect-ratio: 3 / 2; margin-top: clamp(28px, 4vw, 64px); }
@media (max-width: 860px) {
  .voxi-hangout { width: min(320px, 100%); margin-top: 20px; }
}

/* ---------- Closing call to action ---------- */

.closing {
  position: relative;
  text-align: center;
}
.closing:has(> .atmos) { overflow: hidden; }
@media (min-width: 861px) and (min-height: 640px) {
  .closing:has(> .atmos) { box-sizing: border-box; min-height: 86svh; display: flex; align-items: center; }
  .closing:has(> .atmos) > .wrap { width: 100%; }
}
/* The closing mark, lit like the header logo: the approved white icon with a
   soft halo that breathes. */
.mark-halo {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 128px;
  height: 128px;
  margin: 0 auto 30px;
}
.mark-halo::before {
  content: "";
  position: absolute;
  inset: -6px;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(3, 105, 252, 0.55), rgba(3, 105, 252, 0.16) 55%, transparent);
  filter: blur(4px);
}
html:not(.motion-off) .mark-halo::before { animation: brand-breathe 6s ease-in-out infinite; }
.closing .mark {
  position: relative;
  width: 54px;
  height: auto;
  margin: 0;
  filter: drop-shadow(0 0 1px rgba(200, 225, 255, 0.7)) drop-shadow(0 0 14px rgba(3, 105, 252, 0.8));
}
.closing h2 { max-width: 18ch; margin: 0 auto; }
.closing:has(> .atmos) h2, .closing .closing-sub {
  font-size: clamp(36px, 5vw, 72px);
  line-height: 1.06;
  letter-spacing: -0.032em;
  font-weight: 500;
}
.closing .closing-sub { max-width: none; margin: 6px auto 0; color: rgba(183, 201, 234, 0.55); }
@media (min-width: 861px) { .closing h2 { max-width: none; } }
.closing p { max-width: 520px; margin: 22px auto 0; font-size: 18px; }
.closing .btn { margin-top: 34px; }

.closing p a, .prose a, .contact-aside a, .quiet-note a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: rgba(238, 242, 249, 0.4);
  text-underline-offset: 3px;
}
.closing p a:hover, .prose a:hover, .contact-aside a:hover, .quiet-note a:hover { text-decoration-color: currentColor; }

/* ---------- Footer ---------- */

.site-footer {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
  padding: clamp(64px, 8vw, 104px) 0 30px;
  font-size: 14px;
  color: var(--quiet);
}
.footer-glow {
  position: absolute;
  left: 0;
  top: 0;
  width: 900px;
  height: 520px;
  translate: -30% -45%;
  background: radial-gradient(closest-side, rgba(3, 105, 252, 0.2), transparent);
  pointer-events: none;
}
.site-footer > .wrap { position: relative; }
.footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px 48px;
}
.footer-slogan {
  margin-top: 24px;
  max-width: none;
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.3;
  letter-spacing: -0.02em;
  font-weight: 500;
  color: var(--ink);
  text-wrap: balance;
}
.footer-nav { display: flex; flex-wrap: wrap; gap: 4px 36px; }
.footer-nav a {
  display: inline-block;
  padding: 8px 0;
  font-size: 15px;
  color: var(--ink-2);
  text-decoration: none;
  transition: color 160ms ease;
}
.footer-nav a:hover { color: var(--ink); }
/* The legal line: small, quiet, last. Privacy and Terms are named but not
   linked until those pages are written. */
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  margin-top: 44px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--quiet);
}
.footer-legal { display: inline-flex; gap: 10px; color: rgba(140, 157, 187, 0.7); }

/* Privacy Policy and Terms of Use: one readable column. */
.legal { padding-bottom: clamp(64px, 9vw, 120px); }
.legal h2:first-child { margin-top: 8px; }
.legal ul { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.legal li { position: relative; padding-left: 22px; font-size: 17px; }
.legal li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 6px; height: 6px; background: var(--blue); box-shadow: 0 0 8px rgba(3, 105, 252, 0.8); }
.legal strong { color: var(--ink); font-weight: 600; }
.legal ul + p { margin-top: 14px; }
.footer-bottom a { color: var(--muted); text-decoration: none; transition: color 160ms ease; }
.footer-bottom a:hover { color: var(--ink); }
@media (max-width: 600px) {
  .footer-top { align-items: flex-start; flex-direction: column; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ---------- Inner pages ---------- */

.page-head {
  padding: clamp(48px, 8vw, 112px) 0 clamp(40px, 6vw, 80px);
}
.page-head h1 { max-width: 16ch; font-size: clamp(40px, 5.6vw, 72px); }
.page-head .lead {
  max-width: 620px;
  margin-top: 24px;
  font-size: clamp(18px, 1.5vw, 21px);
  color: var(--ink-2);
}
.page-head .status { margin-top: 22px; text-align: left; }

/* Product steps. */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.step {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 0 clamp(20px, 3vw, 40px);
  padding: clamp(48px, 6vw, 80px) 0;
  border-top: 1px solid var(--line);
}
.step-num {
  font-size: 15px;
  font-weight: 600;
  color: var(--voxel);
  font-variant-numeric: tabular-nums;
  padding-top: 10px;
}
.step-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px clamp(32px, 5vw, 80px); align-items: start; }
.step-body > :only-child, .step-body .step-text:only-child { grid-column: 1 / -1; }
.step h2 { font-size: clamp(28px, 3.2vw, 42px); max-width: 15ch; }
.step .body { margin-top: 18px; max-width: 480px; font-size: 18px; }
.step .points { margin-top: 24px; }
.step-wide .step-body { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
@media (max-width: 860px) {
  .step { grid-template-columns: minmax(0, 1fr); }
  .step-num { padding: 0 0 14px; }
  .step-body, .step-wide .step-body { grid-template-columns: minmax(0, 1fr); }
}

/* Voxi beside one line on the product page. */
.voxi-line {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  margin-top: 26px;
  max-width: 480px;
}
.voxi-line .voxi-cube { width: 72px; height: 72px; }
.voxi-line p { font-size: 15px; line-height: 1.5; color: var(--ink-2); }

/* Labs: one line per module. */
.modules-tag { margin-bottom: 18px; }
.modules { list-style: none; margin: 0; padding: 0; }
.modules li {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: 8px clamp(24px, 5vw, 80px);
  padding: 26px 0;
  border-top: 1px solid var(--line);
}
.modules li:last-child { border-bottom: 1px solid var(--line); }
.modules h2 { font-size: clamp(22px, 2.2vw, 28px); }
.modules p { font-size: 17px; color: var(--ink-2); }
@media (max-width: 700px) {
  .modules li { grid-template-columns: minmax(0, 1fr); }
}

/* About. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: 24px clamp(32px, 6vw, 96px);
  padding: clamp(44px, 6vw, 72px) 0;
  border-top: 1px solid var(--line);
}
.split h2 { font-size: clamp(28px, 3vw, 40px); max-width: 14ch; }
.split .body { font-size: 18px; max-width: 620px; }
.split .body + .body { margin-top: 16px; }
.team { list-style: none; margin: 0; padding: 0; }
.team li {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 6px 28px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  font-size: 16px;
}
.team li:last-child { border-bottom: 1px solid var(--line); }
.team b { color: var(--ink); font-weight: 600; }
.team span { color: var(--ink-2); }
@media (max-width: 860px) {
  .split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .team li { grid-template-columns: minmax(0, 1fr); }
}

/* Contact form. */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: 40px clamp(32px, 6vw, 96px);
  align-items: start;
}
/* One column that never grows past the card, whatever sits inside it. */
.form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.tracks {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.tracks legend, .field label {
  display: block;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.track-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.track-options label {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 10px 14px;
  border: 1px solid var(--line-field);
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.3;
  cursor: pointer;
}
.track-options input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.track-options label::before {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border: 1px solid var(--voxel);
}
.track-options input:checked + span { color: var(--ink); }
.track-options label:has(input:checked) {
  border-color: var(--voxel);
  background: rgba(3, 105, 252, 0.12);
}
.track-options label:has(input:checked)::before { background: var(--voxel); }
.track-options label:has(input:focus-visible) { outline: 2px solid var(--voxel); outline-offset: 2px; }
.track-note { margin-top: 12px; font-size: 15px; color: var(--muted); min-height: 3em; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.field input, .field textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  background: var(--bg-deep);
  border: 1px solid var(--line-field);
  border-radius: 0;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--voxel); outline-offset: 0; border-color: transparent; }
.field .optional { font-weight: 400; color: var(--quiet); }
.privacy-note {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-left: 3px solid var(--blue);
  background: rgba(3, 105, 252, 0.1);
  color: var(--ink);
  font-size: 15px;
}
.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
}
.form-status {
  padding: 14px 16px;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  font-size: 15px;
}
.form-status[data-state="ok"] { border-color: var(--ice); }
.form-status[data-state="error"] { border-color: var(--gray); border-left: 3px solid var(--gray); }
.contact-aside { font-size: 16px; }
.contact-aside .status { margin-top: 36px; text-align: left; }
.quiet-note { font-size: 15px; color: var(--muted); }
.cf-turnstile { min-height: 65px; }
.contact-aside h2 { font-size: 22px; letter-spacing: -0.02em; margin-bottom: 10px; }
.contact-aside p + h2 { margin-top: 36px; }
.contact-aside a { color: var(--ink); text-underline-offset: 3px; }
@media (max-width: 860px) {
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .track-options, .field-row { grid-template-columns: minmax(0, 1fr); }
}

/* Plain text pages. */
.prose { max-width: 680px; }
.prose h2 { font-size: 22px; letter-spacing: -0.02em; margin: 40px 0 10px; }
.prose p { font-size: 17px; }
.prose p + p { margin-top: 14px; }
.prose a { color: var(--ink); text-underline-offset: 3px; }

/* ---------- Motion preferences ---------- */

@media (max-width: 860px) {
  .paper { width: calc(100% - 16px); margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .paper { transform: none; }
}

@media print {
  body { background: #fff; color: #000; }
  .site-header .nav, .menu-toggle, .stage, .skip-link { display: none; }
}

.nowrap { white-space: nowrap; }

/* ---------- Contact, after the redesign ---------- */

.contact { position: relative; overflow: hidden; padding: clamp(40px, 6vw, 88px) 0 clamp(80px, 10vw, 140px); }
.glow-contact {
  left: -12%;
  top: 4%;
  width: 940px;
  height: 720px;
  background: radial-gradient(closest-side, rgba(3, 105, 252, 0.26), rgba(3, 105, 252, 0.08) 60%, transparent);
}
.contact .contact-grid {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 48px clamp(40px, 7vw, 120px);
}
.contact-intro { padding-top: 8px; }
.contact-intro .label { margin-bottom: 26px; }
.contact-intro h1 {
  font-size: clamp(52px, 6.6vw, 104px);
  line-height: 0.98;
  letter-spacing: -0.038em;
}
/* Details in the HUD voice: a small label over each line. */
.contact-details { display: grid; gap: 20px; margin: clamp(44px, 7vw, 88px) 0 0; max-width: 340px; }
.contact-details div { display: grid; gap: 6px; padding-top: 16px; border-top: 1px solid var(--line); }
.contact-details dt {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--quiet);
}
.contact-details dd { margin: 0; font-size: 18px; letter-spacing: -0.01em; color: var(--ink); }
.contact-details a {
  color: var(--ink);
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  background-size: 0 1px;
  padding-bottom: 2px;
  transition: background-size 320ms cubic-bezier(0.2, 0.75, 0.15, 1);
}
.contact-details a:hover, .contact-details a:focus-visible { background-size: 100% 1px; }

/* The form sits on a pane of dark glass with a lit top edge. */
.contact-card {
  position: relative;
  gap: 26px;
  padding: clamp(24px, 3.2vw, 44px);
  background: linear-gradient(160deg, rgba(16, 42, 100, 0.66), rgba(6, 19, 50, 0.78));
  border: 1px solid rgba(150, 182, 225, 0.22);
  box-shadow: inset 0 1px 0 rgba(200, 220, 255, 0.16), 0 50px 90px -40px rgba(0, 0, 0, 0.7), 0 0 80px rgba(3, 105, 252, 0.12);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.contact-card::before, .contact-card::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  background: #8ec3ff;
  box-shadow: 0 0 8px #8ec3ff;
}
.contact-card::before { left: -3px; top: -3px; }
.contact-card::after { right: -3px; bottom: -3px; }
.contact-card .tracks legend, .contact-card .field label {
  margin-bottom: 10px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.contact-card .field .optional { text-transform: none; letter-spacing: 0.02em; }
/* Topic as one segmented control: the dividers are 1px gaps over a line-coloured
   ground, so they stay right whether the topics sit in one row or two. */
.contact-card .track-options {
  gap: 1px;
  padding: 0;
  border: 1px solid var(--line-field);
  background: var(--line-field);
}
.contact-card .track-options label {
  justify-content: center;
  min-height: 48px;
  border: 0;
  background: #0b2152;
  font-size: 14px;
  text-align: center;
  transition: background-color 200ms ease, color 200ms ease;
}
.contact-card .track-options label::before { display: none; }
.contact-card .track-options label:hover { color: var(--ink); background: #10306f; }
.contact-card .track-options label:has(input:checked) { background: #123f95; box-shadow: inset 0 -2px 0 var(--voxel); }
/* Fields as lines; the message keeps a box. */
.contact-card .field input {
  min-height: 46px;
  padding: 10px 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-field);
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.contact-card .field textarea {
  min-height: 140px;
  background: rgba(4, 14, 38, 0.45);
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.contact-card .field input:focus, .contact-card .field textarea:focus {
  outline: none;
  border-color: var(--ice);
  box-shadow: 0 1px 0 var(--ice);
}
.contact-card .privacy-note {
  align-items: center;
  gap: 10px;
  margin-top: -8px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 13px;
  color: var(--muted);
}
.contact-card .privacy-note::before { content: ""; flex: 0 0 6px; width: 6px; height: 6px; background: var(--blue); }
.contact-card .form-actions { justify-content: flex-end; }
/* Every field is required: a small star rides at the upper left of each label,
   and one legend in the card's top right corner explains it. */
.contact-card .required-legend { position: absolute; top: clamp(24px, 3.2vw, 44px); right: clamp(24px, 3.2vw, 44px); margin: 0; line-height: 1.5; }
.contact-card .privacy-note a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(238, 242, 249, 0.4); text-underline-offset: 3px; }
.contact-card .privacy-note a:hover { text-decoration-color: currentColor; }
.req {
  display: inline-block;
  margin-right: 4px;
  font-size: 0.95em;
  line-height: 0;
  vertical-align: 0.45em;
  color: #8ec3ff;
}
.required-legend {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--quiet);
}
@media (max-width: 860px) {
  .contact .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .contact-details { margin-top: 32px; }
}
/* Fields in a row line up along their underline, whatever their labels wrap to. */
.contact-card .field-row { align-items: end; }

/* The prompt under the contact headline, and four topics in two rows of two
   when the pane is narrow. */
.contact-prompt { max-width: 26ch; margin-top: 26px; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }
.contact-card .track-options { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1180px) {
  .contact-card .track-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Light board finish ----------
   Anodised housing with a faint brushed grain, a real back plate behind it for
   depth, a frosted diffuser with a micro texture, and a sheet of glass over the
   films that a lifted film rises out of. */
.lightboard {
  border-radius: 3px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 3px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.8 0 0 0 0 0.88 0 0 0 0 1 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    linear-gradient(168deg, #1d3f86 0%, #10295f 30%, #0b1f4b 68%, #08183d 100%);
  box-shadow:
    inset 0 1px 0 rgba(210, 228, 255, 0.45),
    inset 1px 0 0 rgba(210, 228, 255, 0.16),
    inset -1px 0 0 rgba(0, 0, 0, 0.35),
    inset 0 -2px 0 rgba(0, 0, 0, 0.4),
    0 46px 70px -24px rgba(0, 0, 0, 0.7),
    0 0 110px rgba(3, 105, 252, 0.3);
  outline: 1px solid transparent; /* smoother edges under the 3D turn */
}
.lightboard-back {
  position: absolute;
  inset: 0;
  border-radius: 3px;
  transform: translateZ(-14px);
  background: linear-gradient(168deg, #0c2150, #050f2a);
  box-shadow: 0 30px 50px -20px rgba(0, 0, 0, 0.7);
  pointer-events: none;
}
.lightboard::before {
  border-radius: 1px;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 3px),
    radial-gradient(100% 85% at 50% 40%, #f2f7ff 0%, #c7dafc 28%, #84a9ef 62%, #4a76d4 88%, #3965c6 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.35),
    inset 0 3px 8px rgba(4, 20, 70, 0.45),
    inset 0 0 30px rgba(4, 26, 90, 0.4),
    0 0 36px rgba(140, 190, 255, 0.35);
}
/* Two screws of light at the corners, the motif of the contact pane. */
.lightboard::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 5px;
  width: 4px;
  height: 4px;
  background: #8ec3ff;
  box-shadow: 0 0 6px #8ec3ff;
  opacity: 0.8;
}
/* The glass over the films: a soft diagonal sheen and a lit top edge. */
.planes::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.04) 22%, transparent 38%, transparent 72%, rgba(255, 255, 255, 0.05) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transform: translateZ(4px);
}
/* Films: a fine edge where the light catches the film's cut. */
.film { box-shadow: 0 0 0 1px rgba(2, 8, 23, 0.7), inset 0 0 0 1px rgba(170, 205, 255, 0.08), 0 2px 4px rgba(0, 0, 0, 0.45); }

/* At rest the films float and breathe a little, out of step, so they read as
   something to touch. A lifted film holds still. */
@keyframes film-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4px) scale(1.018); }
}
html:not(.motion-off) .plane:not(.is-active) .film { animation: film-float 4.6s ease-in-out infinite; }
.plane[data-plane="axial"] .film { animation-delay: -1.5s; }
.plane[data-plane="coronal"] .film { animation-delay: -3s; }

/* Light and shadow on the board, from a light high on the left: the frame is
   brighter at its top-left edge and falls off toward the bottom right, the
   frame's lip shades the diffuser, each film throws a small shadow onto the
   lit sheet, and the whole board sits on the page with a close contact shadow
   and a wider soft one. */
.lightboard {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.02) 30%, transparent 55%, rgba(0, 0, 0, 0.32) 100%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 3px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.8 0 0 0 0 0.88 0 0 0 0 1 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    linear-gradient(168deg, #1d3f86 0%, #10295f 30%, #0b1f4b 68%, #08183d 100%);
  box-shadow:
    inset 0 1px 0 rgba(220, 235, 255, 0.55),
    inset 1px 0 0 rgba(220, 235, 255, 0.22),
    inset -1px 0 0 rgba(0, 0, 0, 0.45),
    inset 0 -2px 0 rgba(0, 0, 0, 0.5),
    6px 10px 14px -6px rgba(0, 0, 0, 0.6),
    14px 34px 60px -18px rgba(0, 0, 0, 0.75),
    0 0 110px rgba(3, 105, 252, 0.28);
}
.lightboard::before {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.3),
    inset 4px 5px 12px rgba(2, 14, 46, 0.6),
    inset -2px -2px 6px rgba(255, 255, 255, 0.12),
    inset 0 0 34px rgba(4, 26, 90, 0.35),
    0 0 36px rgba(140, 190, 255, 0.32);
}
.film {
  box-shadow:
    0 0 0 1px rgba(2, 8, 23, 0.7),
    inset 0 0 0 1px rgba(170, 205, 255, 0.08),
    3px 5px 9px rgba(2, 16, 56, 0.55),
    1px 2px 2px rgba(0, 0, 0, 0.4);
}

/* Workspace labels: Segmentation sits over the viewer's right end. */
.hud-tag.hud-right { left: auto; right: 0; }

/* Dictation: a voice row heads the findings card. The wave moves while the
   transcript line writes, then the findings below are ticked. */
/* Dictation: its own small card. The wave moves while two transcript lines
   write, just before the findings are ticked. */
.ws-dictation { left: 37%; bottom: -10%; width: 24%; z-index: 5; transform: rotateY(-10deg) rotateZ(1deg) translateZ(90px); transition-delay: 360ms; }
.ws-dictation .hud-tag { bottom: auto; top: calc(100% + 14px); }
/* The assistants: three Voxi below and left of the findings, each with its
   own moment in the sequence. */
.ws-assistants {
  right: calc(104% + 14px);
  bottom: -11%;
  z-index: 4;
  display: flex;
  width: max-content;
  align-items: flex-end;
  gap: 4px;
  transform: translateZ(60px);
  transition-delay: 300ms;
}
.ws-assistants .voxi-cube { flex: none; width: 50px; height: 50px; }
.ws-assistants .voxi-cube:nth-of-type(2) { width: 64px; height: 64px; margin-bottom: 12px; }
.ws-assistants .voxi-cube:nth-of-type(3) { width: 46px; height: 46px; }
.dictation {
  display: grid;
  gap: 9px;
  padding: 14px 16px 16px;
  background: rgba(7, 22, 58, 0.92);
  border: 1px solid rgba(150, 182, 225, 0.3);
  box-shadow: 8px 8px 0 rgba(3, 105, 252, 0.35), 0 24px 50px rgba(0, 0, 0, 0.45);
}
.voice {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 4px;
}
.mic {
  position: relative;
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
}
.mic::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0;
  width: 6px;
  height: 9px;
  border-radius: 3px;
  background: #8ec3ff;
  box-shadow: 0 0 8px rgba(142, 195, 255, 0.8);
}
.mic::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 5px;
  width: 10px;
  height: 7px;
  border: 1.5px solid #8ec3ff;
  border-top: 0;
  border-radius: 0 0 6px 6px;
}
.voice .wave { display: inline-flex; align-items: center; gap: 2px; height: 16px; }
.voice .wave i { width: 2px; height: 4px; background: #8ec3ff; }
.voice .wave i:nth-child(2n) { height: 8px; }
.voice .wave i:nth-child(3n) { height: 12px; }
.dictation .said { display: block; height: 6px; width: 92%; background: rgba(183, 201, 234, 0.35); }
.dictation .said-2 { width: 58%; }
.workspace-stage.can-play:not(.is-playing) .dictation .said { width: 0; }
.workspace-stage.can-play.is-playing .dictation .said { width: 0; animation: voice-said 700ms steps(12) 500ms forwards; }
.workspace-stage.can-play.is-playing .dictation .said-2 { animation-name: voice-said-2; animation-delay: 1.2s; }
@keyframes voice-said { to { width: 92%; } }
@keyframes voice-said-2 { to { width: 58%; } }
.workspace-stage.is-playing .voice .wave i { animation: voice-wave 0.45s ease-in-out 500ms 2 alternate; }
.voice .wave i:nth-child(2) { animation-delay: 560ms; } .voice .wave i:nth-child(3) { animation-delay: 620ms; }
.voice .wave i:nth-child(4) { animation-delay: 680ms; } .voice .wave i:nth-child(5) { animation-delay: 740ms; }
.voice .wave i:nth-child(6) { animation-delay: 800ms; } .voice .wave i:nth-child(7) { animation-delay: 860ms; }
.voice .wave i:nth-child(8) { animation-delay: 920ms; } .voice .wave i:nth-child(9) { animation-delay: 980ms; }
@keyframes voice-wave { from { transform: scaleY(1); } to { transform: scaleY(2.2); } }
@media (prefers-reduced-motion: reduce) {
  .voice .wave i { animation: none !important; }
}

@media (max-width: 860px) {
  .ws-dictation { left: auto; bottom: auto; width: 70%; margin-left: auto; transform: none; }
  .ws-assistants { right: auto; bottom: auto; width: auto; transform: none; justify-self: start; margin: 50px 0 34px; }
  .ws-assistants .hud-tag { bottom: auto; top: calc(100% + 14px); }
}