:root {
  color-scheme: dark;
  --bg: #04050b;
  --ink: #f7fbff;
  --muted: rgba(247, 251, 255, .72);
  --hot: #00f6ff;
  --warm: #ff2bd6;
  --gold: #ffcc5c;
  --shade: rgba(0, 0, 0, .54);
  --glass: rgba(8, 12, 24, .44);
  --line: rgba(255, 255, 255, .18);
  --font-main: "Space Grotesk Local", system-ui, sans-serif;
  --font-display: "Orbitron Local", system-ui, sans-serif;
  --bg-image: url("img/bg-neon.png");
  --grain: 0.22;
  --grain-alpha: var(--grain);
  --radius: 28px;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --mouse-x: 50%;
  --mouse-y: 50%;
  --parallax-x: 0px;
  --parallax-y: 0px;
  --speed: 1;
  --depth-z: 90px;
  --depth-power: 1;
  --depth-perspective: 1050px;
  --density: 1;
  --shape-width: min(94vw, 1160px);
  --shape-min-height: clamp(360px, 62vh, 760px);
  --shape-ratio: auto;
  --shape-radius: var(--radius);
  --shape-path: polygon(0 0, 100% 0, 100% 0, 100% 100%, 100% 100%, 0 100%, 0 100%, 0 0);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--bg);
}

body {
  min-height: 100vh;
  margin: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at var(--mouse-x) var(--mouse-y), color-mix(in srgb, var(--hot) 32%, transparent), transparent 25rem),
    linear-gradient(135deg, color-mix(in srgb, var(--warm) 22%, transparent), transparent 38%),
    var(--bg);
  color: var(--ink);
  font-family: var(--font-main);
  letter-spacing: 0;
  transition: background .75s ease, color .55s ease;
}

body::before,
body::after,
.bg-fader {
  content: "";
  position: fixed;
  inset: -10vmax;
  pointer-events: none;
}

body::before {
  z-index: 0;
  background:
    linear-gradient(115deg, transparent 0 24%, color-mix(in srgb, var(--hot) 24%, transparent) 25%, transparent 28% 54%, color-mix(in srgb, var(--warm) 22%, transparent) 55%, transparent 59%),
    var(--bg-image) center / cover no-repeat;
  mix-blend-mode: screen;
  opacity: .56;
  filter: saturate(1.4) contrast(1.08);
  transform: translate3d(var(--parallax-x), var(--parallax-y), 0) scale(1.04);
  transition: opacity 1s ease, filter 1s ease, transform .35s ease;
}

.bg-fader {
  z-index: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  opacity: 0;
  filter: saturate(1.4) contrast(1.08);
  transform: translate3d(var(--parallax-x), var(--parallax-y), 0) scale(1.04);
  transition: opacity 1.05s cubic-bezier(.2, .8, .2, 1), transform .35s ease;
}

.bg-fader.is-visible {
  opacity: .68;
}

body::after {
  z-index: 2;
  opacity: var(--grain-alpha);
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px),
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.08), transparent 18rem);
  mix-blend-mode: overlay;
  transition: opacity .35s ease;
}

body[data-fx-grain="off"]::after {
  opacity: 0;
}

#field {
  position: fixed;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}

[data-fx-particles="off"] #field {
  opacity: 0;
}

#field {
  transition: opacity .35s ease;
}

.stage {
  position: relative;
  z-index: 3;
  display: grid;
  min-height: 100vh;
  min-height: 100dvh;
  padding: clamp(1rem, 4vw, 4rem);
  place-items: center;
  perspective: var(--depth-perspective);
  transition: perspective .45s ease;
}

.artifact {
  position: relative;
  display: grid;
  width: var(--shape-width);
  min-height: var(--shape-min-height);
  aspect-ratio: var(--shape-ratio);
  padding: clamp(1.35rem, 5vw, 6rem);
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--shape-radius);
  clip-path: var(--shape-path);
  transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transform-style: preserve-3d;
  transition:
    width .95s cubic-bezier(.16, 1, .3, 1),
    min-height .95s cubic-bezier(.16, 1, .3, 1),
    aspect-ratio .95s cubic-bezier(.16, 1, .3, 1),
    border-radius .95s cubic-bezier(.16, 1, .3, 1),
    clip-path 1s cubic-bezier(.16, 1, .3, 1),
    box-shadow .7s ease,
    transform .18s ease,
    filter .55s ease;
}

.artifact::before,
.artifact::after,
.aura {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.artifact::before {
  z-index: -2;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--hot) 45%, transparent), transparent 28% 72%, color-mix(in srgb, var(--warm) 42%, transparent)),
    color-mix(in srgb, var(--bg) 70%, transparent);
  border: 1px solid var(--line);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--hot) 32%, transparent) inset,
    0 34px 140px var(--shade),
    0 0 76px color-mix(in srgb, var(--hot) 32%, transparent),
    0 0 130px color-mix(in srgb, var(--warm) 20%, transparent);
  backdrop-filter: blur(18px) saturate(1.2);
  transition: background .75s ease, border-color .55s ease, box-shadow .55s ease, backdrop-filter .55s ease;
}

[data-fx-glow="off"] .artifact::before {
  animation: none;
  box-shadow:
    0 0 0 1px var(--line) inset,
    0 24px 72px var(--shade);
}

.artifact::after {
  z-index: -1;
  inset: -12%;
  background:
    radial-gradient(ellipse at var(--mouse-x) var(--mouse-y), color-mix(in srgb, var(--gold) 20%, transparent), transparent 18rem),
    linear-gradient(105deg, transparent 8%, color-mix(in srgb, var(--hot) 18%, transparent) 31%, rgba(255,255,255,.16) 47%, color-mix(in srgb, var(--warm) 16%, transparent) 61%, transparent 84%);
  filter: blur(9px);
  mask-image: linear-gradient(105deg, transparent 0 14%, rgba(0,0,0,.18) 26%, #000 43% 57%, rgba(0,0,0,.16) 72%, transparent 100%);
  opacity: .74;
  animation: scan calc(5.4s / var(--speed)) ease-in-out infinite;
}

[data-fx-scan="off"] .artifact::after {
  display: none;
}

.aura {
  z-index: -3;
  inset: -12%;
  background:
    radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--hot) 44%, transparent), transparent 22rem),
    radial-gradient(circle at 80% 70%, color-mix(in srgb, var(--warm) 44%, transparent), transparent 25rem);
  filter: blur(24px);
  opacity: .72;
  animation: breathe calc(4.4s / var(--speed)) ease-in-out infinite alternate;
}

.copy {
  display: grid;
  width: min(100%, 920px);
  max-width: min(100%, 920px);
  align-self: center;
  justify-self: center;
  justify-items: center;
  gap: clamp(.8rem, 2.4vw, 1.35rem);
  transform: translateZ(var(--depth-z));
  text-align: center;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), opacity .35s ease, filter .35s ease;
}

.eyebrow,
.subline {
  margin: 0;
  color: var(--muted);
  text-align: center;
  text-wrap: balance;
  transform: translateZ(24px);
}

.eyebrow {
  position: relative;
  display: inline-grid;
  min-height: 2.8rem;
  padding: .52rem .92rem .5rem;
  gap: .08rem;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--hot) 40%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 48%, transparent);
  box-shadow: 0 0 22px color-mix(in srgb, var(--hot) 22%, transparent);
  font-size: clamp(.78rem, 1.4vw, .96rem);
  font-weight: 700;
  text-transform: uppercase;
}

.eyebrow span,
.eyebrow small {
  display: block;
}

.eyebrow small {
  color: color-mix(in srgb, var(--muted) 86%, var(--hot));
  font-size: .58em;
  font-weight: 900;
  letter-spacing: .06em;
}

h1 {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 9.5ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 8.8vw, 8.6rem);
  font-weight: 900;
  line-height: .86;
  text-align: center;
  text-wrap: balance;
  letter-spacing: 0;
  color: var(--ink);
  text-shadow:
    0 0 .08em color-mix(in srgb, var(--hot) 68%, transparent),
    .035em .05em 0 color-mix(in srgb, var(--warm) 60%, transparent),
    0 .08em .8em var(--shade);
  animation: titleFloat calc(5.8s / var(--speed)) ease-in-out infinite alternate;
  transition: color .55s ease, text-shadow .55s ease, filter .35s ease;
}

h1::before,
h1::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}

.subline {
  max-width: min(100%, 56ch);
  font-size: clamp(1rem, 2vw, 1.38rem);
  font-weight: 700;
  line-height: 1.35;
  text-shadow: 0 .14em .9em var(--shade);
}

.menu-toggle,
.panel button {
  border: 0;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
}

.menu-toggle {
  position: fixed;
  z-index: 8;
  right: clamp(1rem, 3vw, 2rem);
  top: clamp(1rem, 3vw, 2rem);
  display: grid;
  width: 54px;
  height: 54px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: color-mix(in srgb, var(--bg) 58%, transparent);
  box-shadow: 0 18px 48px var(--shade), 0 0 28px color-mix(in srgb, var(--hot) 28%, transparent);
  backdrop-filter: blur(18px);
}

.menu-toggle span {
  position: absolute;
  left: 13px;
  right: 13px;
  top: 50%;
  display: block;
  height: 2.5px;
  border-radius: 99px;
  background: currentColor;
  transform-origin: center;
  transition: transform .3s ease, opacity .3s ease;
}

.menu-toggle span:nth-child(1) {
  transform: translateY(-8px);
}

.menu-toggle span:nth-child(2) {
  transform: translateY(0);
}

.menu-toggle span:nth-child(3) {
  transform: translateY(8px);
}

.menu-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(0) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.menu-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(0) rotate(-45deg);
}

.panel {
  position: fixed;
  z-index: 7;
  right: clamp(1rem, 3vw, 2rem);
  top: calc(clamp(1rem, 3vw, 2rem) + 68px);
  display: grid;
  gap: 14px;
  width: min(92vw, 430px);
  max-height: min(78vh, 760px);
  padding: 16px;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  box-shadow: 0 22px 80px var(--shade);
  backdrop-filter: blur(20px) saturate(1.28);
  opacity: 0;
  transform: translateY(-10px) scale(.96);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}

.panel.is-open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.panel-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
}

.panel-head span,
.control-group p {
  margin: 0;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.panel-head strong {
  font-size: 1.1rem;
}

.control-group {
  display: grid;
  gap: 9px;
}

.theme-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.theme-choice,
.choice,
.toggle-option,
.surprise-button {
  min-width: 0;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 62%, transparent);
  box-shadow: 0 10px 24px var(--shade), 0 0 0 1px rgba(255,255,255,.04) inset;
  backdrop-filter: blur(12px);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.theme-choice {
  display: grid;
  min-height: 70px;
  padding: 9px 7px;
  gap: 7px;
  place-items: center;
  border-radius: 18px;
  font-size: clamp(.7rem, 1.8vw, .82rem);
  font-weight: 900;
  overflow: hidden;
  text-align: center;
}

.theme-choice span:last-child,
.choice,
.toggle-option {
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.theme-choice:hover,
.choice:hover,
.toggle-option:hover,
.surprise-button:hover {
  transform: translateY(-2px) scale(1.04);
}

.theme-choice.is-active,
.choice.is-active,
.toggle-option.is-active {
  border-color: color-mix(in srgb, var(--hot) 72%, white 12%);
  box-shadow: 0 12px 26px var(--shade), 0 0 0 2px var(--ink) inset, 0 0 28px var(--hot);
}

.swatch-dot {
  display: block;
  width: min(42px, 11vw);
  height: min(42px, 11vw);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--a), var(--b), var(--c));
  box-shadow: 0 0 20px var(--a);
}

.swatch-dot.neon { --a: #00f6ff; --b: #ff2bd6; --c: #181cff; }
.swatch-dot.steampunk { --a: #ffb24c; --b: #7a3f1d; --c: #0b1f22; }
.swatch-dot.glass { --a: #dffbff; --b: #76ddff; --c: #9c7bff; }
.swatch-dot.paper { --a: #fff0c5; --b: #ef465d; --c: #263b57; }
.swatch-dot.cosmic { --a: #9d7cff; --b: #00ffc8; --c: #ffcc5c; }

.choice-grid,
.toggle-grid {
  display: grid;
  gap: 8px;
}

.choice-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.choice-grid.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.toggle-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.choice,
.toggle-option {
  display: grid;
  min-height: 50px;
  padding: 8px 7px;
  place-items: center;
  border-radius: 14px;
  color: var(--ink);
  font-size: clamp(.74rem, 1.8vw, .88rem);
  font-weight: 900;
}

.choice {
  gap: 5px;
}

.toggle-option:not(.is-active) {
  color: var(--muted);
  opacity: .76;
}

.sliders {
  gap: 12px;
}

.sliders label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: .86rem;
  font-weight: 900;
}

.sliders input {
  width: 100%;
  accent-color: var(--hot);
}

.surprise-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  border-radius: 16px;
  color: var(--ink);
  font-weight: 900;
}

.icon {
  position: relative;
  display: block;
  width: 24px;
  height: 24px;
}

.icon.grid {
  background:
    linear-gradient(var(--ink) 0 0) 0 0 / 9px 9px,
    linear-gradient(var(--ink) 0 0) 100% 0 / 9px 9px,
    linear-gradient(var(--ink) 0 0) 0 100% / 9px 9px,
    linear-gradient(var(--ink) 0 0) 100% 100% / 9px 9px;
  background-repeat: no-repeat;
}

.icon.card {
  border: 2px solid currentColor;
  border-radius: 8px;
  box-shadow: 0 0 12px var(--hot);
}

.icon.blade {
  background: currentColor;
  clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%);
}

.icon.orbit {
  border: 2px solid currentColor;
  border-radius: 50%;
}

.icon.orbit::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: var(--hot);
}

.icon.mono {
  border: 2px solid currentColor;
  border-radius: 4px 14px;
}

.icon.pulse {
  border: 2px solid var(--ink);
  border-radius: 50%;
}

.icon.pulse::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: inherit;
  background: var(--hot);
  box-shadow: 0 0 18px var(--hot);
}

.icon.spark::before,
.icon.spark::after {
  content: "";
  position: absolute;
  inset: 10px 0;
  background: var(--ink);
  box-shadow: 0 0 18px var(--gold);
}

.icon.spark::after {
  transform: rotate(90deg);
}

.theme-neon {
  --bg: #030414;
  --ink: #effcff;
  --hot: #00f6ff;
  --warm: #ff2bd6;
  --gold: #fff35c;
  --bg-image: url("img/bg-neon.png");
  --font-display: "Orbitron Local", system-ui, sans-serif;
  --radius: 28px;
}

.theme-steampunk {
  --bg: #150c05;
  --ink: #fff1d2;
  --hot: #f6a23a;
  --warm: #8b3f1f;
  --gold: #ffd36b;
  --bg-image: url("img/bg-steampunk.png");
  --font-display: "Cinzel Decorative Local", Georgia, serif;
  --grain: .34;
  --radius: 10px;
}

.theme-steampunk .artifact::before {
  background:
    repeating-radial-gradient(circle at 22% 28%, rgba(255,211,107,.2) 0 1px, transparent 2px 14px),
    linear-gradient(135deg, rgba(69, 33, 14, .76), rgba(15, 8, 4, .58));
}

.theme-steampunk .artifact::after {
  mask-image: radial-gradient(circle at center, #000 0 42%, transparent 66%);
  animation-name: gearSweep;
  filter: blur(7px);
}

.theme-glass {
  --bg: #06131e;
  --ink: #f7fdff;
  --hot: #9eeaff;
  --warm: #9f83ff;
  --gold: #dffbff;
  --bg-image: url("img/bg-glass.png");
  --font-display: "Unbounded Local", system-ui, sans-serif;
  --radius: 36px;
}

.theme-paper {
  color-scheme: light;
  --bg: #f4ead2;
  --ink: #101724;
  --muted: rgba(16, 23, 36, .78);
  --hot: #1f7a8c;
  --warm: #d73d4b;
  --gold: #c99122;
  --bg-image: url("img/bg-paper.png");
  --shade: rgba(62, 42, 18, .26);
  --glass: rgba(255, 248, 230, .72);
  --line: rgba(28, 24, 18, .22);
  --font-display: "Special Elite Local", Georgia, serif;
  --grain: .42;
  --radius: 6px;
}

.theme-paper::before {
  mix-blend-mode: multiply;
  opacity: .44;
  filter: sepia(.28) saturate(.95) contrast(1.02);
}

.theme-paper::after {
  background-image:
    repeating-linear-gradient(0deg, rgba(16,23,36,.05) 0 1px, transparent 1px 4px),
    radial-gradient(circle at 24% 18%, rgba(16,23,36,.12), transparent 17rem);
  mix-blend-mode: multiply;
}

.theme-paper .artifact::before {
  background:
    linear-gradient(135deg, rgba(255, 246, 220, .84), rgba(255, 255, 255, .62) 48%, rgba(242, 218, 174, .78)),
    color-mix(in srgb, var(--bg) 78%, white);
}

.theme-paper h1 {
  color: #0f1724;
  text-shadow:
    0 .035em 0 rgba(255, 255, 255, .62),
    .035em .05em 0 rgba(215, 61, 75, .18),
    0 .16em .72em rgba(86, 65, 34, .24);
}

.theme-paper .subline,
.theme-paper .eyebrow,
.theme-paper .eyebrow small,
.theme-paper .panel-head span,
.theme-paper .panel-head strong,
.theme-paper .control-group p,
.theme-paper .sliders label,
.theme-paper .toggle-option:not(.is-active) {
  color: rgba(16, 23, 36, .84);
  text-shadow: none;
}

.theme-paper .menu-toggle,
.theme-paper .panel,
.theme-paper .theme-choice,
.theme-paper .choice,
.theme-paper .toggle-option,
.theme-paper .surprise-button {
  color: #101724;
  background: rgba(255, 248, 230, .82);
}

.theme-paper .artifact::after {
  background:
    radial-gradient(ellipse at var(--mouse-x) var(--mouse-y), rgba(201, 145, 34, .2), transparent 17rem),
    linear-gradient(105deg, transparent 8%, rgba(31,122,140,.14) 31%, rgba(255,255,255,.22) 47%, rgba(215,61,75,.12) 61%, transparent 84%);
  mix-blend-mode: multiply;
}

.theme-paper .theme-choice.is-active,
.theme-paper .choice.is-active,
.theme-paper .toggle-option.is-active {
  box-shadow: 0 12px 26px rgba(62, 42, 18, .2), 0 0 0 2px #101724 inset, 0 0 28px rgba(31, 122, 140, .28);
}

.theme-cosmic {
  --bg: #05030e;
  --ink: #f8f2ff;
  --hot: #00ffc8;
  --warm: #9d7cff;
  --gold: #ffcc5c;
  --bg-image: url("img/bg-cosmic.png");
  --font-display: "Space Grotesk Local", system-ui, sans-serif;
  --radius: 50px;
}

[data-type="tech"] {
  --font-display: "Orbitron Local", system-ui, sans-serif;
}

[data-type="editorial"] {
  --font-display: "Cinzel Decorative Local", Georgia, serif;
}

[data-type="clean"] {
  --font-display: "Space Grotesk Local", system-ui, sans-serif;
}

[data-layout="rift"] .artifact {
  --shape-width: min(94vw, 1160px);
  --shape-min-height: clamp(360px, 62vh, 760px);
  --shape-ratio: auto;
  --shape-radius: var(--radius);
  --shape-path: polygon(0 0, 100% 0, 100% 0, 100% 100%, 100% 100%, 0 100%, 0 100%, 0 0);
}

[data-layout="blade"] .artifact {
  --shape-width: min(94vw, 1120px);
  --shape-min-height: clamp(360px, 62vh, 760px);
  --shape-ratio: auto;
  --shape-radius: 8px;
  --shape-path: polygon(6% 0, 100% 0, 100% 0, 94% 100%, 94% 100%, 0 100%, 0 100%, 6% 0);
}

[data-layout="orbit"] .artifact {
  --shape-width: min(94vw, 860px);
  --shape-min-height: min(94vw, 860px);
  --shape-ratio: 1 / 1;
  --shape-radius: 50%;
  --shape-path: polygon(50% 0, 85% 15%, 100% 50%, 85% 85%, 50% 100%, 15% 85%, 0 50%, 15% 15%);
}

[data-layout="monolith"] .artifact {
  --shape-width: min(92vw, 760px);
  --shape-min-height: min(82vh, 920px);
  --shape-ratio: auto;
  --shape-radius: 40px 6px;
  --shape-path: polygon(0 0, 100% 0, 100% 0, 100% 92%, 92% 100%, 0 100%, 0 100%, 0 0);
}

[data-motion="calm"] {
  --speed: .46;
}

[data-motion="alive"] {
  --speed: 1.05;
}

[data-motion="glitch"] {
  --speed: 1.75;
}

[data-motion="hyperdrive"] {
  --speed: 2.8;
}

[data-motion="alive"] h1 {
  animation-name: titleHeartbeat;
  animation-duration: 1.45s;
  animation-timing-function: cubic-bezier(.34, 0, .28, 1);
}

[data-motion="alive"] .artifact::before {
  animation: panelHeartbeat 1.45s cubic-bezier(.34, 0, .28, 1) infinite;
}

[data-motion="glitch"] h1 {
  animation-name: titleGlitch;
}

[data-motion="hyperdrive"] h1 {
  animation-name: titleWarp;
  animation-duration: 2.35s;
  animation-timing-function: cubic-bezier(.2, .72, .12, 1);
}

[data-motion="hyperdrive"] h1::before,
[data-motion="hyperdrive"] h1::after {
  opacity: .68;
  mix-blend-mode: screen;
}

[data-motion="hyperdrive"] h1::before {
  color: var(--hot);
  clip-path: polygon(0 8%, 100% 0, 100% 28%, 0 38%);
  animation: warpSliceA 1.9s cubic-bezier(.2, .72, .12, 1) infinite;
}

[data-motion="hyperdrive"] h1::after {
  color: var(--warm);
  clip-path: polygon(0 62%, 100% 52%, 100% 88%, 0 96%);
  animation: warpSliceB 2.15s cubic-bezier(.2, .72, .12, 1) infinite;
}

[data-motion="hyperdrive"] .artifact::after {
  opacity: .92;
  animation-duration: calc(2.6s / var(--speed));
}

[data-motion="hyperdrive"] .aura {
  animation-name: hyperAura;
}

.is-switching .artifact {
  animation: morphFlow .78s cubic-bezier(.16, 1, .3, 1);
}

.is-switching .copy {
  filter: saturate(1.08);
}

@keyframes scan {
  0% { transform: translateX(-58%) skewX(-12deg) scale(1.04); opacity: .22; }
  42% { opacity: .82; }
  58% { opacity: .72; }
  100% { transform: translateX(58%) skewX(-12deg) scale(1.04); opacity: .24; }
}

@keyframes breathe {
  from { transform: scale(.94) rotate(-2deg); opacity: .45; }
  to { transform: scale(1.06) rotate(2deg); opacity: .84; }
}

@keyframes titleFloat {
  from { transform: translateZ(calc(var(--depth-z) * .78)) translateY(10px); }
  to { transform: translateZ(calc(var(--depth-z) * 1.1)) translateY(-10px); }
}

@keyframes titleHeartbeat {
  0%, 100% { transform: translateZ(calc(var(--depth-z) * .9)) scale(1); filter: brightness(1); }
  18% { transform: translateZ(calc(var(--depth-z) * 1.28)) scale(1.035); filter: brightness(1.22) saturate(1.12); }
  28% { transform: translateZ(calc(var(--depth-z) * .95)) scale(.992); }
  42% { transform: translateZ(calc(var(--depth-z) * 1.18)) scale(1.018); filter: brightness(1.13); }
  58% { transform: translateZ(calc(var(--depth-z) * .96)) scale(1); }
}

@keyframes panelHeartbeat {
  0%, 100% {
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--hot) 32%, transparent) inset,
      0 34px 140px var(--shade),
      0 0 76px color-mix(in srgb, var(--hot) 32%, transparent),
      0 0 130px color-mix(in srgb, var(--warm) 20%, transparent);
  }
  20%, 42% {
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--hot) 54%, transparent) inset,
      0 38px 150px var(--shade),
      0 0 102px color-mix(in srgb, var(--hot) 48%, transparent),
      0 0 160px color-mix(in srgb, var(--warm) 30%, transparent);
  }
}

@keyframes titleGlitch {
  0%, 100% { transform: translateZ(var(--depth-z)) translate(0, 0); filter: none; }
  20% { transform: translateZ(var(--depth-z)) translate(-2px, 1px); filter: hue-rotate(18deg); }
  22% { transform: translateZ(var(--depth-z)) translate(3px, -2px); }
  24% { transform: translateZ(var(--depth-z)) translate(0, 0); }
  67% { text-shadow: .06em 0 var(--hot), -.04em 0 var(--warm), 0 .08em .8em var(--shade); }
}

@keyframes titleWarp {
  0%, 100% { transform: translateZ(calc(var(--depth-z) * 1.04)) perspective(500px) rotateX(0deg) scaleX(1); filter: saturate(1); }
  18% { transform: translateZ(calc(var(--depth-z) * 1.42)) perspective(500px) rotateX(3deg) scaleX(1.08); filter: saturate(1.5) contrast(1.12); }
  44% { transform: translateZ(calc(var(--depth-z) * 1.22)) perspective(500px) rotateX(-2deg) scaleX(.96); }
  68% { transform: translateZ(calc(var(--depth-z) * 1.58)) perspective(500px) rotateX(4deg) scaleX(1.12); text-shadow: .11em 0 var(--hot), -.08em 0 var(--warm), 0 .1em 1.1em var(--shade); }
}

@keyframes warpSliceA {
  0%, 100% { transform: translate3d(-.06em, -.03em, 0) scaleX(1.02); filter: blur(.01em); }
  36% { transform: translate3d(.16em, -.07em, 0) scaleX(1.14); filter: blur(.025em); }
  72% { transform: translate3d(-.12em, .02em, 0) scaleX(.96); }
}

@keyframes warpSliceB {
  0%, 100% { transform: translate3d(.08em, .03em, 0) scaleX(1.04); filter: blur(.015em); }
  44% { transform: translate3d(-.18em, .06em, 0) scaleX(1.16); filter: blur(.03em); }
  82% { transform: translate3d(.12em, -.01em, 0) scaleX(.94); }
}

@keyframes gearSweep {
  from { transform: rotate(0deg) scale(1.08); }
  to { transform: rotate(360deg) scale(1.08); }
}

@keyframes hyperAura {
  from { transform: scale(.92) rotate(-5deg); opacity: .58; filter: blur(18px); }
  to { transform: scale(1.14) rotate(5deg); opacity: .95; filter: blur(30px); }
}

@keyframes morphFlow {
  0% { filter: saturate(1.2) brightness(1.08); transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(.982); }
  38% { filter: saturate(1.32) brightness(1.12); transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(1.018); }
  100% { filter: none; transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(1); }
}

@media (max-width: 720px) {
  body {
    overflow: hidden auto;
  }

  .stage {
    padding: 4.8rem .82rem .82rem;
  }

  .artifact {
    width: min(94vw, 560px);
    min-height: min(70vh, 620px);
    padding: clamp(1.05rem, 5vw, 1.6rem);
    overflow: hidden;
  }

  .copy {
    width: 100%;
    gap: .85rem;
  }

  h1 {
    max-width: min(100%, 8.2ch);
    font-size: clamp(2.5rem, 12.4vw, 4.35rem);
    line-height: .9;
  }

  .subline {
    max-width: min(100%, 28rem);
    font-size: clamp(.94rem, 4.25vw, 1.12rem);
    line-height: 1.32;
  }

  [data-layout="orbit"] .artifact {
    --shape-width: min(94vw, 560px);
    --shape-min-height: min(94vw, 560px);
  }

  .panel {
    left: 1rem;
    right: 1rem;
    top: 5.25rem;
    width: auto;
    max-height: min(72vh, 680px);
    padding: 14px;
  }

  .theme-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .theme-choice {
    grid-template-columns: auto 1fr;
    min-height: 52px;
    justify-items: start;
    padding-inline: 10px;
    font-size: .82rem;
  }

  .swatch-dot {
    width: 30px;
    height: 30px;
  }

  .choice-grid.four,
  .toggle-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
}