:root {

  --glass-shadow:
    0 40px 100px color-mix(in srgb, var(--bg-0) 62%, transparent),
    0 12px 30px color-mix(in srgb, var(--bg-0) 40%, transparent);
  --glass-hair: color-mix(in srgb, var(--text-1) 11%, transparent);
  --glass-lip: color-mix(in srgb, var(--text-1) 13%, transparent);
  --glass-sheen: color-mix(in srgb, var(--text-1) 12%, transparent);
}

.hero {
  position: relative;
  isolation: isolate;
  min-height: min(100svh, 1000px);
  padding: calc(var(--topbar) + clamp(12px, 2.4vw, 40px)) 0 clamp(20px, 3vw, 44px);
  display: grid;
  align-content: center;

  overflow-x: clip;
}

.hero-aurora {
  position: absolute; inset: -25% -10%; z-index: -1; pointer-events: none;

  -webkit-mask-image: linear-gradient(to bottom, var(--bg-0) 55%, transparent 92%);
  mask-image: linear-gradient(to bottom, var(--bg-0) 55%, transparent 92%);
}

.hero.is-resting .hero-aurora i { animation-play-state: paused; }
.hero-aurora i { position: absolute; border-radius: 50%; animation: hero-drift 32s ease-in-out infinite alternate; }
.hero-aurora i:nth-child(1) { width: 30vw; height: 30vw; left: 54%; top: 10%; background: radial-gradient(circle, var(--aurora-1), transparent 62%); }
.hero-aurora i:nth-child(2) { width: 28vw; height: 28vw; left: 70%; top: 40%; background: radial-gradient(circle, var(--aurora-2), transparent 62%); animation-duration: 38s; }
.hero-aurora i:nth-child(3) { width: 24vw; height: 24vw; left: 48%; top: 52%; background: radial-gradient(circle, var(--aurora-3), transparent 62%); animation-duration: 44s; }
.hero-aurora i:nth-child(4) { width: 20vw; height: 20vw; left: 82%; top: 6%; background: radial-gradient(circle, var(--aurora-4), transparent 62%); animation-duration: 50s; }
@keyframes hero-drift { to { transform: translate(-5vw, 5vh) scale(1.14); } }

.hero-grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(16px, 3vw, 48px);
  align-items: center;
}
.hero-copy { position: relative; z-index: 2; display: grid; gap: 24px; align-content: center; max-width: 600px; }
.hero-copy .deck { max-width: 42ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.hero-note { position: relative; z-index: 2; margin-top: clamp(8px, 1.6vw, 20px); font-size: 13px; color: var(--text-3); text-align: right; }

@media (hover: hover) { .hero-note .on-touch { display: none; } }
@media (hover: none) { .hero-note .on-hover { display: none; } }

.hero-pill {
  justify-self: start;
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: -4px;
  padding: 6px 14px 6px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--text-1) 4%, transparent);
  font-size: 13.5px; font-weight: 500; letter-spacing: -0.005em; line-height: 1.3;
  color: var(--text-2);
}
.hero-pill-dot {
  flex: none; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent), 0 0 10px color-mix(in srgb, var(--accent) 55%, transparent);
}

.lb-stage {
  position: relative;
  height: clamp(420px, calc(100svh - 230px), 700px);
  container-type: size;
  perspective: 1700px;
  perspective-origin: 42% 42%;
}

.lb-threads { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.lb-scene {
  position: absolute; inset: 0; z-index: 1;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 6deg)) rotateY(var(--ry, -16deg));
  pointer-events: none;
}

.pane {
  --intro: 0px;
  position: absolute;
  left: 50%; top: 50%;
  display: block;
  width: calc(var(--w) * 1cqw);
  border-radius: 12px;
  outline: none;

  transform:
    translate(-50%, -50%)
    translate3d(calc(var(--x) * 1cqw + var(--hx, 0px)), calc(var(--y) * 1cqh + var(--hy, 0px)), calc(var(--z) + var(--intro) + var(--hz, 0px)))
    rotateY(var(--turn, 0deg))
    scale(var(--hk, 1));
  transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1), opacity 700ms ease, filter 400ms ease;
  -webkit-tap-highlight-color: transparent;
  pointer-events: auto;
}
.pane .veil { box-shadow: var(--glass-shadow), 0 0 0 1px var(--glass-hair), inset 0 1px 0 var(--glass-lip); transition: box-shadow 400ms ease; }

.pane.is-hot .veil {
  box-shadow:
    0 50px 120px color-mix(in srgb, var(--bg-0) 70%, transparent), 0 14px 34px color-mix(in srgb, var(--bg-0) 45%, transparent),
    0 0 0 1px color-mix(in srgb, var(--app-color) 60%, transparent), inset 0 1px 0 var(--glass-lip);
}

.pane:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.pane::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(520px circle at var(--sx, 20%) var(--sy, 10%), var(--glass-sheen), transparent 55%);
  mix-blend-mode: screen;
}

.lb-scene > .pane:nth-child(1) { --w: 43; --x: -25; --y: -28; --z: -210px; --turn: 6deg; }
.lb-scene > .pane:nth-child(2) { --w: 41; --x: 35;  --y: -31; --z: -320px; }
.lb-scene > .pane:nth-child(3) { --w: 56; --x: 4;   --y: -4;  --z: 0px; }
.lb-scene > .pane:nth-child(4) { --w: 37; --x: -28; --y: 30;  --z: -140px; --turn: 4deg; }
.lb-scene > .pane:nth-child(5) { --w: 49; --x: 27;  --y: 27;  --z: 150px; --turn: -4deg; }
.lb-scene > .pane:nth-child(6) { --w: 19; --x: -21; --y: 37;  --z: 250px; --turn: 8deg; }
.lb-scene > .pane:nth-child(7) { --w: 32; --x: 2;   --y: -42; --z: -460px; --turn: 2deg; }
.lb-scene > .pane:nth-child(8) { --w: 28; --x: 48;  --y: 8;   --z: -520px; --turn: -6deg; }
.lb-scene > .pane:nth-child(n+9) { display: none; }

@property --intro { syntax: "<length>"; inherits: false; initial-value: 0px; }
@media (scripting: enabled) {
  .hero:not(.is-in) .pane { --intro: -1100px; opacity: 0; animation: pane-arrive 900ms cubic-bezier(0.16, 1, 0.3, 1) 2.5s forwards; }
}
@keyframes pane-arrive { to { --intro: 0px; opacity: 1; } }
.lb-scene > .pane:nth-child(2) { transition-delay: 90ms; }
.lb-scene > .pane:nth-child(3) { transition-delay: 180ms; }
.lb-scene > .pane:nth-child(4) { transition-delay: 270ms; }
.lb-scene > .pane:nth-child(5) { transition-delay: 360ms; }
.lb-scene > .pane:nth-child(6) { transition-delay: 450ms; }
.lb-scene > .pane:nth-child(7) { transition-delay: 540ms; }
.lb-scene > .pane:nth-child(8) { transition-delay: 630ms; }
.hero.is-settled .pane { transition-delay: 0ms; }

.hero.has-hot .pane:not(.is-hot) { filter: saturate(0.75) brightness(0.6); }

@media (prefers-reduced-motion: no-preference) {
  .hero.is-in:not(.is-shone) .veil::after { animation: veil-shimmer 1300ms cubic-bezier(0.45, 0, 0.25, 1) 650ms 1 backwards; }
  .hero.is-in:not(.is-shone) .lb-scene > .pane:nth-child(2) .veil::after { animation-delay: 740ms; }
  .hero.is-in:not(.is-shone) .lb-scene > .pane:nth-child(3) .veil::after { animation-delay: 830ms; }
  .hero.is-in:not(.is-shone) .lb-scene > .pane:nth-child(4) .veil::after { animation-delay: 920ms; }
  .hero.is-in:not(.is-shone) .lb-scene > .pane:nth-child(5) .veil::after { animation-delay: 1010ms; }
  .hero.is-in:not(.is-shone) .lb-scene > .pane:nth-child(6) .veil::after { animation-delay: 1100ms; }
  .hero.is-shone .pane.is-hot .veil::after { animation: veil-shimmer-again 1100ms cubic-bezier(0.45, 0, 0.25, 1) 120ms 1 backwards; }
}

.lb-light {
  position: absolute; inset: -45% -25% -45% -120%; z-index: 3;
  pointer-events: none;
  background: radial-gradient(220px circle at var(--lx, 72%) var(--ly, 45%), var(--light-pool), transparent 64%);
  mix-blend-mode: screen;
  opacity: 0; transition: opacity 400ms ease;
}
.hero.is-lit .lb-light { opacity: 1; }

.lb-tip {
  position: absolute; left: 0; top: 0; z-index: 5;
  width: max-content; max-width: 290px; padding: 12px 14px 13px;
  border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line-strong);
  box-shadow: 0 18px 40px color-mix(in srgb, var(--bg-0) 55%, transparent);
  pointer-events: none;
  font-size: 14px; line-height: 1.45; color: var(--text-2);
}
.lb-tip b { display: block; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--app-color, var(--accent)); font-weight: 400; }
.lb-tip span { display: block; margin-top: 4px; font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 1.25; letter-spacing: -0.02em; color: var(--text-1); }
.lb-tip p { margin-top: 4px; }
.lb-tip em { display: block; margin-top: 8px; font-style: normal; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-3); }

.veil {
  --u: 1cqi;
  --veil-h1: var(--hue-8);
  --veil-h2: var(--hue-10);
  position: relative;
  display: flex; flex-direction: column;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  container-type: inline-size;
  border-radius: inherit;
  background:
    linear-gradient(118deg, color-mix(in srgb, var(--text-1) 7%, transparent) 0%, transparent 34%),
    radial-gradient(130% 90% at 85% 0%, color-mix(in srgb, var(--app-color) 6%, transparent), transparent 60%),
    linear-gradient(170deg, color-mix(in srgb, var(--bg-3) 92%, transparent), color-mix(in srgb, var(--bg-2) 94%, transparent) 45%, color-mix(in srgb, var(--bg-1) 96%, transparent));
}
.veil i { display: block; border-radius: 999px; }

.veil-bar {
  flex: none;
  display: flex; align-items: center; gap: calc(var(--u) * 1.4);
  height: calc(var(--u) * 6.4);
  padding: 0 calc(var(--u) * 2.8);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--text-1) 3%, transparent);
}
.veil-bar i { flex: none; width: calc(var(--u) * 1.9); height: calc(var(--u) * 1.9); background: color-mix(in srgb, var(--text-1) 15%, transparent); transition: background-color 400ms ease; }
.veil-bar .veil-name { width: 22%; height: calc(var(--u) * 1.3); margin: 0 auto; transform: translateX(calc(var(--u) * -3)); background: color-mix(in srgb, var(--text-1) 9%, transparent); }

.veil-body { flex: 1; min-height: 0; display: flex; }
.veil-side {
  flex: 0 0 24%;
  display: flex; flex-direction: column; gap: calc(var(--u) * 2.3);
  padding: calc(var(--u) * 3.6) calc(var(--u) * 2.6);
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg-0) 16%, transparent);
}
.veil-side i { height: calc(var(--u) * 1.3); background: color-mix(in srgb, var(--text-1) 11%, transparent); }

.veil-side i:nth-child(1) {
  width: 100%; height: calc(var(--u) * 3.4);
  margin: calc(var(--u) * -1) 0 calc(var(--u) * -0.3);
  border-radius: calc(var(--u) * 1);
  background: linear-gradient(90deg, color-mix(in srgb, var(--app-color) 22%, transparent), color-mix(in srgb, var(--app-color) 8%, transparent));
}
.veil-side i:nth-child(2) { width: 64%; }
.veil-side i:nth-child(3) { width: 82%; }
.veil-side i:nth-child(4) { width: 52%; }
.veil-side i:nth-child(5) { width: 70%; }
.veil-side i:nth-child(6) { width: 44%; }
.veil-side i:nth-child(7) { width: 60%; }

.veil-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 2.6); padding: calc(var(--u) * 3.6) calc(var(--u) * 3.8); }
.veil-head { flex: none; display: flex; flex-direction: column; gap: calc(var(--u) * 1.4); }
.veil-head i:nth-child(1) { width: 46%; height: calc(var(--u) * 2.2); background: color-mix(in srgb, var(--text-1) 22%, transparent); }
.veil-head i:nth-child(2) { width: 30%; height: calc(var(--u) * 1.2); background: color-mix(in srgb, var(--text-1) 10%, transparent); }

.veil-tileset { flex: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 1.8); }
.veil-tileset > span {
  display: flex; flex-direction: column; gap: calc(var(--u) * 1.2);
  padding: calc(var(--u) * 1.8) calc(var(--u) * 1.9);
  border-radius: calc(var(--u) * 1.4);
  background: color-mix(in srgb, var(--text-1) 4%, transparent);
  box-shadow: inset 0 0 0 1px var(--line);
}
.veil-tileset i:nth-child(1) { width: 52%; height: calc(var(--u) * 1); background: color-mix(in srgb, var(--text-1) 11%, transparent); }
.veil-tileset i:nth-child(2) { width: 72%; height: calc(var(--u) * 2); background: color-mix(in srgb, var(--text-1) 20%, transparent); }
.veil-tileset > span:nth-child(1) i:nth-child(2) { background: color-mix(in srgb, var(--app-color) 62%, transparent); }
.veil-tileset > span:nth-child(2) i:nth-child(2) { width: 58%; }
.veil-tileset > span:nth-child(3) i:nth-child(2) { width: 64%; }

.veil-pic {
  --p1: 30% 70%; --p2: 74% 30%; --p3: 94% 96%;
  position: relative; flex: 1; min-height: 0;
  display: grid; place-items: center;
  overflow: hidden;
  container-type: size;
  border-radius: calc(var(--u) * 1.8);
  background:
    radial-gradient(58% 80% at var(--p1), color-mix(in srgb, var(--app-color) 30%, transparent), transparent 72%),
    radial-gradient(46% 70% at var(--p2), color-mix(in srgb, var(--veil-h1) 20%, transparent), transparent 70%),
    radial-gradient(36% 56% at var(--p3), color-mix(in srgb, var(--veil-h2) 11%, transparent), transparent 70%),
    color-mix(in srgb, var(--bg-0) 42%, transparent);
  box-shadow: inset 0 0 0 1px var(--line);
}

.veil-mark { position: relative; width: 44cqh; height: 44cqh; color: color-mix(in srgb, var(--app-color) 78%, var(--text-1)); }
.veil-mark::before {
  content: ""; position: absolute; inset: -55%;
  border-radius: 50%;
  background: radial-gradient(closest-side at var(--gx, 50%) var(--gy, 50%), color-mix(in srgb, var(--app-color) 34%, transparent), color-mix(in srgb, var(--app-color) 9%, transparent) 40%, transparent);
  pointer-events: none;
}
.veil-mark svg { position: relative; width: 100%; height: 100%; overflow: visible; }

.veil-mark [stroke-width="1.6"] { stroke-width: 1.05; }
.veil-mark [stroke-width="1.2"] { stroke-width: 0.8; }
.veil-mark [stroke-width="1"] { stroke-width: 0.7; }
.veil-core { fill: color-mix(in srgb, var(--app-color) 40%, var(--text-1)); }

.veil-lenses { --veil-h1: var(--hue-1); --veil-h2: var(--hue-10); }
.veil-lenses .veil-mark { --gx: 48%; --gy: 47%; }

.veil-tiles { --veil-h1: var(--hue-8); --veil-h2: var(--hue-5); }
.veil-tiles .veil-pic { --p1: 22% 80%; --p2: 70% 40%; --p3: 96% 6%; }

.veil-pair { --veil-h1: var(--hue-9); --veil-h2: var(--hue-1); }
.veil-pics { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.35fr 1fr; gap: calc(var(--u) * 2.2); }
.veil-pics .veil-pic:nth-child(2) { --p1: 70% 30%; --p2: 20% 80%; --p3: 4% 4%; }
.veil-pair .veil-main { padding-inline: calc(var(--u) * 4.4); }

.veil-lead { --veil-h1: var(--hue-8); --veil-h2: var(--hue-5); }
.veil-lead .veil-pic { --p1: 50% 50%; --p2: 84% 18%; --p3: 10% 92%; }
.veil-lead.veil-lenses { --veil-h1: var(--hue-1); --veil-h2: var(--hue-10); }

.veil-list .veil-pic { flex: 0 0 26%; --p1: 60% 60%; --p2: 18% 30%; --p3: 96% 10%; }
.veil-rows { flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; }
.veil-rows > span { display: flex; align-items: center; gap: calc(var(--u) * 1.8); padding-block: calc(var(--u) * 0.8); border-bottom: 1px solid var(--line); }
.veil-rows > span:last-child { border-bottom: 0; }
.veil-rows i:nth-child(1) { flex: none; width: calc(var(--u) * 1.8); height: calc(var(--u) * 1.8); background: color-mix(in srgb, var(--app-color) 55%, transparent); }
.veil-rows > span:nth-child(2) i:nth-child(1) { background: color-mix(in srgb, var(--veil-h1) 50%, transparent); }
.veil-rows > span:nth-child(3) i:nth-child(1) { background: color-mix(in srgb, var(--veil-h2) 45%, transparent); }
.veil-rows i:nth-child(2) { width: 48%; height: calc(var(--u) * 1.3); background: color-mix(in srgb, var(--text-1) 14%, transparent); }
.veil-rows > span:nth-child(2) i:nth-child(2) { width: 38%; }
.veil-rows > span:nth-child(3) i:nth-child(2) { width: 56%; }
.veil-rows i:nth-child(3) { width: 12%; height: calc(var(--u) * 1.3); margin-left: auto; background: color-mix(in srgb, var(--text-1) 9%, transparent); }

.veil-square { aspect-ratio: 1; --veil-h1: var(--hue-5); --veil-h2: var(--hue-8); }
.veil-square .veil-bar { height: calc(var(--u) * 10); padding-inline: calc(var(--u) * 5); gap: calc(var(--u) * 2.4); }
.veil-square .veil-bar i { width: calc(var(--u) * 3.2); height: calc(var(--u) * 3.2); }
.veil-square .veil-main { align-items: center; gap: calc(var(--u) * 5); padding: calc(var(--u) * 7) calc(var(--u) * 7) calc(var(--u) * 9); }
.veil-square .veil-pic {
  --p1: 50% 50%; --p2: 30% 30%; --p3: 80% 84%;
  width: 100%; border-radius: calc(var(--u) * 4);
  background:
    radial-gradient(closest-side at 50% 50%, color-mix(in srgb, var(--app-color) 34%, transparent), color-mix(in srgb, var(--app-color) 8%, transparent) 55%, transparent),
    radial-gradient(40% 40% at var(--p2), color-mix(in srgb, var(--veil-h1) 14%, transparent), transparent 70%),
    radial-gradient(40% 40% at var(--p3), color-mix(in srgb, var(--veil-h2) 11%, transparent), transparent 70%),
    color-mix(in srgb, var(--bg-0) 42%, transparent);
}
.veil-foot { flex: none; width: 100%; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 2.6); }
.veil-foot i:nth-child(1) { width: 58%; height: calc(var(--u) * 3.6); background: color-mix(in srgb, var(--text-1) 22%, transparent); }
.veil-foot i:nth-child(2) { width: 38%; height: calc(var(--u) * 2.4); background: color-mix(in srgb, var(--text-1) 10%, transparent); }

.veil::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(105deg, transparent 32%, color-mix(in srgb, var(--text-1) 11%, transparent) 48%, transparent 64%);
  transform: translateX(-110%);
  pointer-events: none;
}
@keyframes veil-shimmer { from { transform: translateX(-110%); } to { transform: translateX(110%); } }
@keyframes veil-shimmer-again { from { transform: translateX(-110%); } to { transform: translateX(110%); } }

.pane.is-hot .veil-bar i:nth-child(1), .veil-show .veil-bar i:nth-child(1) { background: color-mix(in srgb, var(--hue-0) 72%, transparent); }
.pane.is-hot .veil-bar i:nth-child(2), .veil-show .veil-bar i:nth-child(2) { background: color-mix(in srgb, var(--hue-2) 72%, transparent); }
.pane.is-hot .veil-bar i:nth-child(3), .veil-show .veil-bar i:nth-child(3) { background: color-mix(in srgb, var(--hue-4) 72%, transparent); }

@media (max-height: 760px) and (min-width: 900px) {
  .hero { padding-top: calc(var(--topbar) + 8px); }
  .lb-stage { height: clamp(380px, calc(100svh - 190px), 700px); }
  .hero-copy { gap: 20px; }
}

@media (max-width: 899.98px) {
  .hero { min-height: 0; align-content: start; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .hero-copy { max-width: none; gap: 20px; }
  .lb-stage { height: min(96vw, 620px); perspective: 1200px; }

  .lb-scene > .pane:nth-child(1) { --w: 52; --x: -18; --y: -33; }
  .lb-scene > .pane:nth-child(3) { --w: 72; --x: 4;   --y: -8; }
  .lb-scene > .pane:nth-child(5) { --w: 62; --x: 14;  --y: 21; }
  .lb-scene > .pane:nth-child(6) { --w: 27; --x: -15; --y: 30; }
  .lb-scene > .pane:nth-child(2), .lb-scene > .pane:nth-child(4), .lb-scene > .pane:nth-child(n+7) { display: none; }

  .lb-light { inset: -170% -30% -60% -30%; }

  .hero-note { text-align: left; margin-top: clamp(30px, 8vw, 56px); }
}

@media (max-width: 379.98px) {
  .hero-pill { gap: 8px; padding: 5px 11px 5px 10px; font-size: 12.5px; letter-spacing: -0.01em; }
}

@media (forced-colors: active) {
  .veil { border: 1px solid CanvasText; }
  .veil-bar, .veil-side { border-color: GrayText; }
  .veil i, .veil-pic, .veil-tileset > span { forced-color-adjust: none; background: GrayText; }
  .veil-pic { background: Canvas; box-shadow: none; outline: 1px solid GrayText; outline-offset: -1px; }
  .veil-mark { forced-color-adjust: none; color: CanvasText; }
  .veil-mark::before, .veil::after, .pane::after { display: none; }
  .veil-core { fill: CanvasText; }
  .pane.is-hot .veil { outline: 2px solid Highlight; outline-offset: 2px; }
  .pane:focus-visible { outline-color: Highlight; }
  .hero-pill-dot { forced-color-adjust: none; background: CanvasText; box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-aurora i { animation: none; }
  .pane { transition: opacity 200ms ease, filter 200ms ease; }
  .hero:not(.is-in) .pane { --intro: 0px; opacity: 1; animation: none; }
  .pane .veil, .veil-bar i { transition: none; }
}