:root {
  --bg:      oklch(97% 0.018 196);
  --surface: oklch(100% 0 0);
  --fg:      oklch(17% 0.032 235);
  --muted:   oklch(45% 0.034 230);
  --border:  oklch(82% 0.048 196);
  --accent:  oklch(69% 0.19 178);

  --font-display: 'Söhne', 'Avenir Next', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-body:    -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;

  --ink-soft: oklch(28% 0.045 235);
  --surface-raised: oklch(100% 0 0 / 0.82);
  --surface-tint: oklch(94% 0.05 178);
  --surface-blue: oklch(94% 0.055 232);
  --surface-rose: oklch(96% 0.045 333);
  --secondary: oklch(64% 0.22 247);
  --signal: oklch(78% 0.18 92);
  --danger: oklch(62% 0.2 28);
  --hot-pink: oklch(72% 0.24 340);
  --chrome: oklch(86% 0.035 235);
  --copper: oklch(68% 0.16 58);
  --grid-line: oklch(52% 0.16 188 / 0.16);
  --scanline: oklch(100% 0 0 / 0.12);
  --shadow: 0 22px 60px oklch(17% 0.06 235 / 0.18);
  --radius: 18px;
  --radius-sm: 12px;
  --max: 1180px;
}

:root[data-theme="night"],
:root.theme-night {
  --bg:      oklch(13% 0.054 282);
  --surface: oklch(19% 0.07 285);
  --fg:      oklch(96% 0.018 318);
  --muted:   oklch(73% 0.06 318);
  --border:  oklch(63% 0.2 322);
  --accent:  oklch(76% 0.22 333);
  --ink-soft: oklch(86% 0.05 326);
  --surface-raised: oklch(21% 0.08 285 / 0.78);
  --surface-tint: oklch(25% 0.12 317);
  --surface-blue: oklch(23% 0.11 238);
  --surface-rose: oklch(24% 0.12 20);
  --secondary: oklch(78% 0.19 215);
  --signal: oklch(82% 0.17 92);
  --danger: oklch(70% 0.22 30);
  --hot-pink: #FF71CE;
  --chrome: oklch(82% 0.04 246);
  --copper: oklch(72% 0.18 56);
  --grid-line: oklch(76% 0.18 215 / 0.19);
  --scanline: oklch(100% 0 0 / 0.16);
  --shadow: 0 28px 80px oklch(6% 0.05 282 / 0.58);
}

* {
  box-sizing: border-box;
}

html {
  min-width: 0;
  scroll-behavior: smooth;
}

body {
  min-width: 0;
  margin: 0;
  background:
    radial-gradient(circle at 12% 12%, oklch(82% 0.17 179 / 0.54), transparent 26rem),
    radial-gradient(circle at 82% 8%, oklch(77% 0.2 245 / 0.26), transparent 24rem),
    linear-gradient(180deg, var(--bg), oklch(92% 0.025 208));
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  transition: background 240ms ease, color 240ms ease;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(180deg, black, transparent 76%);
}

body::after {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  content: "";
  background:
    repeating-linear-gradient(0deg, transparent 0 5px, var(--scanline) 5px 6px),
    radial-gradient(circle at 50% 120%, transparent 0 48%, oklch(0% 0 0 / 0.08) 100%);
  opacity: 0.32;
  mix-blend-mode: soft-light;
}

:root[data-theme="night"] body,
:root.theme-night body {
  background:
    radial-gradient(circle at 14% 16%, oklch(72% 0.22 333 / 0.3), transparent 26rem),
    radial-gradient(circle at 80% 12%, oklch(75% 0.2 210 / 0.28), transparent 28rem),
    radial-gradient(circle at 58% 82%, oklch(72% 0.18 58 / 0.2), transparent 30rem),
    linear-gradient(180deg, oklch(8% 0.052 282), oklch(16% 0.085 304) 46%, oklch(9% 0.058 248));
}

:root[data-theme="night"] body::before,
:root.theme-night body::before {
  background-image:
    linear-gradient(to right, color-mix(in oklch, var(--secondary) 52%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklch, var(--hot-pink) 35%, transparent) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: linear-gradient(180deg, black 0 64%, transparent 92%);
}

:root[data-theme="night"] body::after,
:root.theme-night body::after {
  opacity: 0.78;
  mix-blend-mode: screen;
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, oklch(100% 0 0 / 0.18) 3px 4px),
    linear-gradient(90deg, oklch(72% 0.24 340 / 0.16), transparent 34%, oklch(76% 0.19 215 / 0.14)),
    radial-gradient(circle at 50% 110%, oklch(72% 0.18 56 / 0.22), transparent 38rem);
}

a {
  color: inherit;
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

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

.site-shell {
  width: min(100%, var(--max));
  margin-inline: auto;
  padding-inline: clamp(18px, 4vw, 36px);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklch, var(--bg) 82%, transparent);
  backdrop-filter: blur(18px);
}

:root[data-theme="night"] .topbar,
:root.theme-night .topbar {
  border-bottom-color: color-mix(in oklch, var(--hot-pink) 55%, transparent);
  background: oklch(10% 0.06 282 / 0.78);
  box-shadow: 0 0 36px color-mix(in oklch, var(--hot-pink) 24%, transparent);
}

.topbar-inner {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--fg);
  font-family: var(--font-display);
  font-weight: 800;
  text-decoration: none;
}

.mark {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1.5px solid var(--fg);
  border-radius: 12px;
  background: var(--surface);
  color: var(--accent);
  font-weight: 900;
  box-shadow: 4px 4px 0 var(--fg), 0 0 22px color-mix(in oklch, var(--accent) 48%, transparent);
}

:root[data-theme="night"] .mark,
:root.theme-night .mark {
  border-color: var(--hot-pink);
  background: linear-gradient(145deg, oklch(17% 0.09 284), oklch(25% 0.11 318));
  color: var(--copper);
  box-shadow:
    4px 4px 0 var(--hot-pink),
    0 0 20px color-mix(in oklch, var(--hot-pink) 66%, transparent),
    0 0 34px color-mix(in oklch, var(--secondary) 30%, transparent);
}

.nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav a,
.nav button {
  min-height: 42px;
  padding: 10px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.theme-toggle-icon {
  width: 18px;
  height: 18px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  box-shadow: inset -6px -2px 0 color-mix(in oklch, var(--accent) 58%, transparent);
}

:root[data-theme="night"] .theme-toggle-icon,
:root.theme-night .theme-toggle-icon {
  border-radius: 4px;
  box-shadow: inset 0 0 0 5px color-mix(in oklch, var(--copper) 66%, transparent), 0 0 14px var(--hot-pink);
  transform: rotate(45deg);
}

.nav a[aria-current="page"],
.nav a:hover,
.nav a:focus-visible,
.nav button:hover,
.nav button:focus-visible {
  background: var(--surface);
  color: var(--fg);
  outline: none;
}

:root[data-theme="night"] .nav a[aria-current="page"],
:root[data-theme="night"] .nav a:hover,
:root[data-theme="night"] .nav a:focus-visible,
:root[data-theme="night"] .nav button:hover,
:root[data-theme="night"] .nav button:focus-visible,
:root.theme-night .nav a[aria-current="page"],
:root.theme-night .nav a:hover,
:root.theme-night .nav a:focus-visible,
:root.theme-night .nav button:hover,
:root.theme-night .nav button:focus-visible {
  background: color-mix(in oklch, var(--hot-pink) 18%, var(--surface));
  color: var(--fg);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--hot-pink) 62%, transparent);
}

.mobile-menu-button {
  display: none;
}

.hero {
  position: relative;
  display: grid;
  min-height: clamp(680px, 92svh, 980px);
  align-items: center;
  padding-block: clamp(54px, 8vw, 104px);
  overflow: clip;
}

.hero::before {
  position: absolute;
  inset: 8% -10% 0;
  z-index: -1;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(115deg, transparent 0 34%, color-mix(in oklch, var(--accent) 28%, transparent) 34% 34.6%, transparent 34.6% 100%),
    radial-gradient(circle at 74% 42%, color-mix(in oklch, var(--secondary) 18%, transparent), transparent 28rem);
  transform: skewY(-6deg);
}

:root[data-theme="night"] .hero::before,
:root.theme-night .hero::before {
  inset: 2% -12% -6%;
  background:
    linear-gradient(115deg, transparent 0 31%, color-mix(in oklch, var(--hot-pink) 48%, transparent) 31% 31.5%, transparent 31.5% 100%),
    linear-gradient(68deg, transparent 0 58%, color-mix(in oklch, var(--copper) 32%, transparent) 58% 58.6%, transparent 58.6% 100%),
    radial-gradient(circle at 76% 38%, color-mix(in oklch, var(--secondary) 34%, transparent), transparent 25rem);
  filter: saturate(1.35);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(320px, 0.78fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  gap: 8px;
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.eyebrow::before {
  width: 32px;
  height: 2px;
  background: var(--accent);
  content: "";
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--fg);
  font-family: var(--font-display);
  letter-spacing: 0;
  text-wrap: balance;
}

h1 {
  max-width: 980px;
  font-size: clamp(3.25rem, 8vw, 7.6rem);
  font-weight: 900;
  line-height: 0.9;
  text-shadow: 0 0 28px color-mix(in oklch, var(--accent) 18%, transparent);
}

:root[data-theme="night"] h1,
:root.theme-night h1 {
  text-shadow:
    0 0 16px color-mix(in oklch, var(--hot-pink) 48%, transparent),
    0 0 34px color-mix(in oklch, var(--secondary) 24%, transparent);
}

h2 {
  font-size: clamp(2.1rem, 4.2vw, 4.4rem);
  font-weight: 880;
  line-height: 0.96;
}

h3 {
  font-size: clamp(1.18rem, 1.5vw, 1.45rem);
  font-weight: 830;
  line-height: 1.08;
}

.lead {
  max-width: 760px;
  margin: 24px 0 0;
  color: var(--ink-soft);
  font-size: clamp(1.08rem, 1.7vw, 1.32rem);
  line-height: 1.62;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.mission-hud {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-width: 760px;
  margin-top: 26px;
}

.hud-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding: 14px;
  border: 1.5px solid var(--fg);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 4px 4px 0 var(--fg);
}

:root[data-theme="night"] .hud-card,
:root.theme-night .hud-card {
  border-color: color-mix(in oklch, var(--hot-pink) 72%, var(--fg));
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--surface) 84%, transparent), color-mix(in oklch, var(--surface-blue) 54%, transparent));
  box-shadow:
    4px 4px 0 var(--hot-pink),
    0 0 24px color-mix(in oklch, var(--secondary) 22%, transparent);
}

.hud-card::after {
  position: absolute;
  right: -18px;
  bottom: -22px;
  width: 66px;
  height: 66px;
  border: 1px solid oklch(20% 0.02 240 / 0.18);
  border-radius: 999px;
  content: "";
}

.hud-card small {
  display: block;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hud-card strong {
  display: block;
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.1vw, 1.8rem);
  line-height: 0.95;
}

.hud-card span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.xp-meter {
  position: relative;
  height: 10px;
  overflow: hidden;
  margin-top: 10px;
  border: 1px solid var(--fg);
  border-radius: 999px;
  background: oklch(94% 0.018 240);
}

:root[data-theme="night"] .xp-meter,
:root.theme-night .xp-meter,
:root[data-theme="night"] .quest-progress,
:root.theme-night .quest-progress {
  border-color: color-mix(in oklch, var(--hot-pink) 66%, var(--fg));
  background: oklch(10% 0.055 282);
}

.xp-meter::before {
  display: block;
  width: var(--xp, 72%);
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--secondary), var(--signal));
  content: "";
}

.button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 18px;
  border: 1.5px solid var(--fg);
  border-radius: 999px;
  background: var(--fg);
  color: var(--bg);
  font-weight: 800;
  text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, color 160ms ease;
}

:root[data-theme="night"] .button,
:root.theme-night .button {
  border-color: var(--hot-pink);
  background: linear-gradient(90deg, var(--hot-pink), var(--secondary));
  color: oklch(9% 0.055 282);
  box-shadow: 0 0 24px color-mix(in oklch, var(--hot-pink) 36%, transparent);
}

.button:hover,
.button:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px oklch(20% 0.02 240 / 0.16);
  outline: none;
}

.button.secondary {
  background: var(--surface);
  color: var(--fg);
}

:root[data-theme="night"] .button.secondary,
:root.theme-night .button.secondary,
:root[data-theme="night"] .button.ghost,
:root.theme-night .button.ghost {
  border-color: color-mix(in oklch, var(--secondary) 72%, var(--fg));
  background: color-mix(in oklch, var(--surface) 82%, transparent);
  color: var(--fg);
}

.button.ghost {
  border-color: var(--border);
  background: transparent;
  color: var(--fg);
}

.pixel-cat-layer {
  position: fixed;
  inset: 0;
  z-index: 40;
  overflow: hidden;
  pointer-events: none;
}

.pixel-cat {
  position: absolute;
  left: 0;
  top: 0;
  width: 92px;
  height: 122px;
  border: 0;
  background-color: transparent;
  background-image: url("../assets/mascot/bobo-cat-spritesheet.png");
  background-repeat: no-repeat;
  background-size: 400% 100%;
  cursor: crosshair;
  image-rendering: pixelated;
  opacity: 0;
  pointer-events: auto;
  transform: translate3d(var(--cat-x, -120px), var(--cat-y, 70vh), 0) scaleX(var(--cat-face, 1));
  transform-origin: 50% 88%;
  transition: opacity 140ms steps(2, end), filter 180ms ease;
  filter:
    drop-shadow(0 0 10px color-mix(in oklch, var(--accent) 48%, transparent))
    drop-shadow(7px 9px 0 oklch(10% 0.04 245 / 0.24));
}

.pixel-cat.is-visible {
  opacity: 1;
}

.pixel-cat.is-paused {
  animation-play-state: paused;
}

.pixel-cat.frame-0 { background-position: 0% 0; }
.pixel-cat.frame-1 { background-position: 33.333% 0; }
.pixel-cat.frame-2 { background-position: 66.666% 0; }
.pixel-cat.frame-3 { background-position: 100% 0; }

.pixel-cat::after {
  position: absolute;
  left: 19px;
  bottom: 10px;
  width: 52px;
  height: 9px;
  border-radius: 999px;
  background: oklch(12% 0.045 250 / 0.24);
  content: "";
  filter: blur(1px);
  transform: scaleX(var(--shadow-scale, 1));
}

.pixel-cat-bubble {
  position: absolute;
  left: 52px;
  bottom: 106px;
  min-width: 82px;
  padding: 6px 8px;
  border: 1.5px solid var(--fg);
  border-radius: 0;
  background: color-mix(in oklch, var(--surface) 90%, transparent);
  color: var(--fg);
  font-family: ui-monospace, "IBM Plex Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  opacity: 0;
  box-shadow: 4px 4px 0 var(--fg);
  transform: translateY(5px);
  transition: opacity 120ms steps(2, end), transform 120ms steps(2, end);
  white-space: nowrap;
}

.pixel-cat-bubble::after {
  position: absolute;
  left: 12px;
  bottom: -7px;
  width: 10px;
  height: 10px;
  border-right: 1.5px solid var(--fg);
  border-bottom: 1.5px solid var(--fg);
  background: inherit;
  content: "";
  transform: rotate(45deg);
}

.pixel-cat.is-talking .pixel-cat-bubble {
  opacity: 1;
  transform: translateY(0);
}

.pixel-cat-ping {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 1.5px solid var(--accent);
  background: color-mix(in oklch, var(--surface) 72%, transparent);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(var(--ping-x, 0), var(--ping-y, 0), 0);
}

.pixel-cat-ping.is-on {
  animation: catPing 520ms steps(4, end);
}

@keyframes catPing {
  0% { opacity: 0; transform: translate3d(var(--ping-x), var(--ping-y), 0) scale(0.8); }
  22% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--ping-x), var(--ping-y), 0) scale(3.2); }
}

:root[data-theme="night"] .pixel-cat,
:root.theme-night .pixel-cat {
  filter:
    drop-shadow(0 0 12px color-mix(in oklch, var(--hot-pink) 64%, transparent))
    drop-shadow(0 0 22px color-mix(in oklch, var(--secondary) 38%, transparent))
    drop-shadow(8px 9px 0 oklch(4% 0.05 285 / 0.42));
}

:root[data-theme="night"] .pixel-cat-bubble,
:root.theme-night .pixel-cat-bubble {
  background: oklch(13% 0.054 282 / 0.9);
  color: var(--fg);
  border-color: var(--hot-pink);
  box-shadow: 4px 4px 0 var(--hot-pink);
}

.orbit-card {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  border: 1.5px solid var(--fg);
  border-radius: var(--radius);
  background:
    linear-gradient(145deg, color-mix(in oklch, var(--surface) 92%, transparent), color-mix(in oklch, var(--surface-tint) 72%, transparent)),
    var(--surface);
  box-shadow: 10px 10px 0 var(--fg), var(--shadow);
}

.orbit-card canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.orbit-caption {
  position: absolute;
  right: 18px;
  bottom: 18px;
  left: 18px;
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: oklch(100% 0 0 / 0.78);
  backdrop-filter: blur(16px);
}

:root[data-theme="night"] .orbit-card,
:root.theme-night .orbit-card,
:root[data-theme="night"] .orbit-card-wide,
:root.theme-night .orbit-card-wide {
  border-color: var(--hot-pink);
  background:
    radial-gradient(circle at 20% 22%, color-mix(in oklch, var(--hot-pink) 18%, transparent), transparent 18rem),
    linear-gradient(145deg, color-mix(in oklch, var(--surface) 90%, transparent), color-mix(in oklch, var(--surface-blue) 52%, transparent));
  box-shadow:
    10px 10px 0 color-mix(in oklch, var(--hot-pink) 74%, black),
    0 0 48px color-mix(in oklch, var(--secondary) 20%, transparent);
}

:root[data-theme="night"] .orbit-caption,
:root.theme-night .orbit-caption {
  border-color: color-mix(in oklch, var(--hot-pink) 46%, var(--border));
  background: oklch(11% 0.06 282 / 0.74);
}

.orbit-caption strong {
  font-family: var(--font-display);
  font-size: 1.05rem;
}

.orbit-caption span,
.muted {
  color: var(--muted);
}

.hero-video-stage {
  min-width: 0;
  overflow: hidden;
  border: 1.5px solid var(--fg);
  border-radius: var(--radius);
  background:
    linear-gradient(145deg, color-mix(in oklch, var(--surface) 86%, transparent), color-mix(in oklch, var(--surface-blue) 44%, transparent)),
    var(--surface);
  box-shadow: 10px 10px 0 var(--fg), 0 0 34px color-mix(in oklch, var(--secondary) 20%, transparent), var(--shadow);
}

:root[data-theme="night"] .hero-video-stage,
:root.theme-night .hero-video-stage {
  border-color: var(--hot-pink);
  background:
    linear-gradient(145deg, color-mix(in oklch, var(--surface) 82%, transparent), color-mix(in oklch, var(--surface-rose) 48%, transparent)),
    var(--surface);
  box-shadow:
    10px 10px 0 color-mix(in oklch, var(--hot-pink) 74%, black),
    0 0 42px color-mix(in oklch, var(--hot-pink) 35%, transparent),
    0 0 70px color-mix(in oklch, var(--secondary) 24%, transparent);
}

.stage-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
}

.combo-badge {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid var(--fg);
  border-radius: 999px;
  background: var(--surface-tint);
  color: var(--fg);
  font-size: 0.78rem;
  font-weight: 900;
}

:root[data-theme="night"] .combo-badge,
:root.theme-night .combo-badge,
:root[data-theme="night"] .pill,
:root.theme-night .pill {
  border-color: color-mix(in oklch, var(--hot-pink) 52%, var(--border));
  background: color-mix(in oklch, var(--surface-rose) 70%, transparent);
  color: var(--fg);
}

.hero-cover-shell,
.video-cover-stage {
  position: relative;
  overflow: hidden;
  background: oklch(15% 0.02 240);
}

.hero-cover-shell {
  aspect-ratio: 16 / 10;
  border-bottom: 1px solid var(--fg);
}

.hero-cover-shell img,
.video-cover-stage img,
.quest-thumb,
.cover-chip img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cover-scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent, oklch(10% 0.02 240 / 0.48)),
    linear-gradient(90deg, color-mix(in oklch, var(--accent) 28%, transparent), transparent 34%, color-mix(in oklch, var(--hot-pink) 18%, transparent)),
    repeating-linear-gradient(0deg, oklch(100% 0 0 / 0.12) 0 1px, transparent 1px 5px);
  mix-blend-mode: screen;
}

.play-chip {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border: 1.5px solid var(--fg);
  border-radius: 999px;
  background: var(--surface);
  color: var(--fg);
  font-weight: 900;
  text-decoration: none;
  box-shadow: 4px 4px 0 var(--fg), 0 0 20px color-mix(in oklch, var(--accent) 34%, transparent);
}

:root[data-theme="night"] .play-chip,
:root.theme-night .play-chip {
  border-color: var(--hot-pink);
  background: oklch(11% 0.06 282 / 0.9);
  color: var(--fg);
  box-shadow: 4px 4px 0 var(--hot-pink), 0 0 26px color-mix(in oklch, var(--hot-pink) 48%, transparent);
}

.play-chip:hover,
.play-chip:focus-visible {
  transform: translateY(-2px);
  outline: none;
}

.stage-copy {
  display: grid;
  gap: 10px;
  padding: 18px;
}

.stage-copy h2 {
  font-size: clamp(1.85rem, 3.2vw, 3.6rem);
  line-height: 0.94;
}

.stage-copy p {
  margin: 0;
  color: var(--muted);
}

.hero-cover-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  border-top: 1px solid var(--fg);
  background: var(--fg);
}

.cover-chip {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 92px;
  overflow: hidden;
  color: white;
  isolation: isolate;
  text-decoration: none;
}

.cover-chip::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, transparent, oklch(10% 0.02 240 / 0.78));
  content: "";
}

.cover-chip span {
  position: absolute;
  right: 8px;
  bottom: 8px;
  left: 8px;
  z-index: 2;
  font-size: 0.72rem;
  font-weight: 900;
}

.cover-chip.active {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}

.video-reel {
  border-block: 1px solid var(--border);
  background:
    linear-gradient(135deg, color-mix(in oklch, var(--accent) 22%, transparent), transparent 42%),
    radial-gradient(circle at 82% 12%, color-mix(in oklch, var(--hot-pink) 14%, transparent), transparent 20rem),
    linear-gradient(180deg, color-mix(in oklch, var(--surface) 78%, transparent), color-mix(in oklch, var(--bg) 80%, transparent));
}

:root[data-theme="night"] .video-reel,
:root.theme-night .video-reel {
  border-block-color: color-mix(in oklch, var(--hot-pink) 48%, var(--border));
  background:
    linear-gradient(135deg, color-mix(in oklch, var(--hot-pink) 26%, transparent), transparent 42%),
    radial-gradient(circle at 82% 12%, color-mix(in oklch, var(--secondary) 24%, transparent), transparent 22rem),
    linear-gradient(180deg, color-mix(in oklch, var(--surface) 78%, transparent), color-mix(in oklch, var(--bg) 88%, transparent));
}

.video-console {
  display: grid;
  grid-template-columns: minmax(320px, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(18px, 3vw, 32px);
  align-items: stretch;
}

.quest-panel,
.video-preview {
  min-width: 0;
  border: 1.5px solid var(--fg);
  border-radius: var(--radius);
  background: color-mix(in oklch, var(--surface) 88%, transparent);
  box-shadow: 8px 8px 0 var(--fg), 0 0 28px color-mix(in oklch, var(--accent) 15%, transparent);
  backdrop-filter: blur(10px);
}

:root[data-theme="night"] .quest-panel,
:root[data-theme="night"] .video-preview,
:root.theme-night .quest-panel,
:root.theme-night .video-preview {
  border-color: color-mix(in oklch, var(--hot-pink) 68%, var(--fg));
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--surface) 86%, transparent), color-mix(in oklch, var(--surface-blue) 42%, transparent));
  box-shadow:
    8px 8px 0 color-mix(in oklch, var(--hot-pink) 72%, black),
    0 0 30px color-mix(in oklch, var(--hot-pink) 24%, transparent),
    0 0 58px color-mix(in oklch, var(--secondary) 16%, transparent);
}

.quest-panel {
  display: grid;
  gap: 12px;
  padding: clamp(16px, 2.4vw, 22px);
}

.quest-status {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.quest-status strong {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.4vw, 2.1rem);
  line-height: 1;
}

.quest-progress {
  position: relative;
  grid-column: 1 / -1;
  height: 10px;
  overflow: hidden;
  border: 1px solid var(--fg);
  border-radius: 999px;
  background: oklch(94% 0.018 240);
}

.quest-progress::before {
  display: block;
  width: var(--progress, 16%);
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--secondary));
  content: "";
  transition: width 180ms ease;
}

.quest-card {
  display: grid;
  grid-template-columns: 78px auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  min-height: 88px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-raised);
  color: var(--fg);
  text-align: left;
}

:root[data-theme="night"] .quest-card,
:root.theme-night .quest-card {
  border-color: color-mix(in oklch, var(--secondary) 38%, var(--border));
  background: color-mix(in oklch, var(--surface) 74%, transparent);
}

.quest-card:hover,
.quest-card:focus-visible,
.quest-card.active {
  border-color: var(--fg);
  background: var(--surface-tint);
  outline: none;
}

:root[data-theme="night"] .quest-card:hover,
:root[data-theme="night"] .quest-card:focus-visible,
:root[data-theme="night"] .quest-card.active,
:root.theme-night .quest-card:hover,
:root.theme-night .quest-card:focus-visible,
:root.theme-night .quest-card.active {
  border-color: var(--hot-pink);
  background: color-mix(in oklch, var(--surface-rose) 68%, var(--surface));
}

.quest-card.active {
  box-shadow: 4px 4px 0 var(--fg);
}

:root[data-theme="night"] .quest-card.active,
:root.theme-night .quest-card.active {
  box-shadow: 4px 4px 0 var(--hot-pink), 0 0 20px color-mix(in oklch, var(--hot-pink) 28%, transparent);
}

.quest-thumb {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--fg);
  border-radius: 10px;
  background: oklch(18% 0.02 240);
}

.quest-index {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--fg);
  border-radius: 10px;
  background: var(--fg);
  color: var(--bg);
  font-weight: 900;
}

:root[data-theme="night"] .quest-index,
:root.theme-night .quest-index {
  border-color: var(--hot-pink);
  background: var(--hot-pink);
  color: oklch(9% 0.055 282);
}

.quest-card strong {
  display: block;
  overflow-wrap: anywhere;
  font-family: var(--font-display);
  line-height: 1.05;
}

.quest-card span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.quest-time {
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 900;
  white-space: nowrap;
}

.video-preview {
  display: grid;
  grid-template-rows: auto minmax(280px, 1fr) auto auto;
  overflow: hidden;
}

.video-preview header {
  display: grid;
  gap: 8px;
  padding: clamp(18px, 2.6vw, 26px);
  border-bottom: 1px solid var(--border);
}

.video-preview h3 {
  font-size: clamp(1.7rem, 3vw, 3.2rem);
  line-height: 0.94;
}

.video-original {
  color: var(--ink-soft);
  font-weight: 850;
}

.video-cover-stage {
  min-height: 360px;
  border-bottom: 1px solid var(--fg);
}

.video-frame-wrap[hidden] {
  display: none;
}

.video-frame-wrap {
  position: relative;
  min-height: 320px;
  background:
    linear-gradient(90deg, oklch(20% 0.02 240 / 0.1) 1px, transparent 1px),
    linear-gradient(0deg, oklch(20% 0.02 240 / 0.1) 1px, transparent 1px),
    oklch(15% 0.02 240);
  background-size: 24px 24px;
}

:root[data-theme="night"] .video-frame-wrap,
:root.theme-night .video-frame-wrap {
  background:
    linear-gradient(90deg, color-mix(in oklch, var(--secondary) 40%, transparent) 1px, transparent 1px),
    linear-gradient(0deg, color-mix(in oklch, var(--hot-pink) 30%, transparent) 1px, transparent 1px),
    oklch(9% 0.055 282);
  background-size: 24px 24px;
}

.video-frame-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-preview footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: clamp(18px, 2.6vw, 26px);
  border-top: 1px solid var(--border);
}

.video-preview p {
  margin: 0;
  color: var(--muted);
}

.repo-orbit-section {
  padding-top: 0;
}

.orbit-card-wide {
  min-height: clamp(440px, 58vw, 620px);
}

.section {
  padding-block: clamp(58px, 9vw, 108px);
}

.section-header {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(260px, 0.58fr);
  gap: clamp(22px, 5vw, 68px);
  align-items: end;
  margin-bottom: clamp(24px, 5vw, 52px);
}

.section-header p {
  margin: 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.4vw, 1.12rem);
}

.metric-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1.5px solid var(--fg);
  border-radius: var(--radius);
  background: var(--fg);
  box-shadow: 8px 8px 0 var(--fg);
}

.metric {
  min-width: 0;
  padding: clamp(18px, 2.4vw, 28px);
  background: var(--surface);
}

:root[data-theme="night"] .metric,
:root.theme-night .metric {
  background: linear-gradient(180deg, color-mix(in oklch, var(--surface) 92%, transparent), color-mix(in oklch, var(--surface-rose) 38%, transparent));
}

.metric strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 3.2rem);
  line-height: 0.94;
}

.metric span {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.83rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

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

.card {
  position: relative;
  min-width: 0;
  padding: clamp(20px, 2.6vw, 30px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-raised);
  box-shadow: var(--shadow);
  container-type: inline-size;
}

:root[data-theme="night"] .card,
:root.theme-night .card,
:root[data-theme="night"] .story-item,
:root.theme-night .story-item {
  border-color: color-mix(in oklch, var(--secondary) 36%, var(--border));
  background: color-mix(in oklch, var(--surface) 82%, transparent);
  box-shadow: 0 0 32px color-mix(in oklch, var(--secondary) 12%, transparent);
}

.card.tinted {
  border-color: oklch(78% 0.06 170);
  background: linear-gradient(160deg, var(--surface-tint), var(--surface));
}

:root[data-theme="night"] .card.tinted,
:root.theme-night .card.tinted {
  border-color: color-mix(in oklch, var(--hot-pink) 64%, var(--border));
  background: linear-gradient(160deg, color-mix(in oklch, var(--surface-rose) 74%, transparent), color-mix(in oklch, var(--surface) 82%, transparent));
}

.card.blue {
  border-color: oklch(80% 0.055 238);
  background: linear-gradient(160deg, var(--surface-blue), var(--surface));
}

:root[data-theme="night"] .card.blue,
:root.theme-night .card.blue {
  border-color: color-mix(in oklch, var(--secondary) 64%, var(--border));
  background: linear-gradient(160deg, color-mix(in oklch, var(--surface-blue) 78%, transparent), color-mix(in oklch, var(--surface) 82%, transparent));
}

.card.rose {
  border-color: oklch(84% 0.05 18);
  background: linear-gradient(160deg, var(--surface-rose), var(--surface));
}

:root[data-theme="night"] .card.rose,
:root.theme-night .card.rose {
  border-color: color-mix(in oklch, var(--copper) 68%, var(--border));
  background: linear-gradient(160deg, color-mix(in oklch, var(--surface-rose) 72%, transparent), color-mix(in oklch, var(--surface) 84%, transparent));
}

.card p {
  margin: 12px 0 0;
  color: var(--muted);
}

.card small,
.label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.story-stack {
  display: grid;
  gap: 14px;
}

.story-item {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 18px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

:root[data-theme="night"] .story-item,
:root.theme-night .story-item {
  border-left: 4px solid var(--hot-pink);
}

.story-item time {
  color: var(--accent);
  font-weight: 900;
}

.story-item p {
  margin: 6px 0 0;
  color: var(--muted);
}

.screen-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-block: 28px 0;
}

.screen-link {
  display: flex;
  min-height: 156px;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  padding: 22px;
  border: 1.5px solid var(--fg);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--fg);
  text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.screen-link:hover,
.screen-link:focus-visible {
  transform: translateY(-3px);
  background: var(--surface-tint);
  box-shadow: 7px 7px 0 var(--fg);
  outline: none;
}

.screen-link span {
  color: var(--muted);
  font-size: 0.88rem;
}

.project-rail {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.filters {
  position: sticky;
  top: 92px;
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-raised);
  box-shadow: var(--shadow);
}

.filters button {
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  font-weight: 800;
  text-align: left;
}

.filters button.active,
.filters button:hover,
.filters button:focus-visible {
  border-color: var(--fg);
  background: var(--surface-tint);
  color: var(--fg);
  outline: none;
}

.search {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1.5px solid var(--fg);
  border-radius: 16px;
  background: var(--surface);
}

.search input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--fg);
  outline: none;
}

.repo-list {
  display: grid;
  gap: 12px;
}

.repo-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  text-decoration: none;
}

.repo-row:hover,
.repo-row:focus-visible {
  border-color: var(--fg);
  outline: none;
}

.repo-row p {
  margin: 6px 0 0;
  color: var(--muted);
}

.repo-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.pill {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  padding: 5px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-blue);
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.tabs button {
  min-height: 42px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-weight: 800;
}

.tabs button[aria-selected="true"],
.tabs button:hover,
.tabs button:focus-visible {
  border-color: var(--fg);
  background: var(--fg);
  color: var(--bg);
  outline: none;
}

.tab-panel[hidden] {
  display: none;
}

.resume-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.74fr) minmax(300px, 0.46fr);
  gap: 18px;
  align-items: start;
}

.timeline {
  display: grid;
  gap: 14px;
}

.role {
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.role header {
  display: flex;
  justify-content: space-between;
  gap: 18px;
}

.role ul {
  margin: 16px 0 0;
  padding-left: 20px;
  color: var(--ink-soft);
}

.role li + li {
  margin-top: 8px;
}

.side-stack {
  display: grid;
  gap: 14px;
}

.contact-card {
  display: grid;
  gap: 12px;
  padding: 20px;
  border: 1.5px solid var(--fg);
  border-radius: var(--radius);
  background: var(--surface-tint);
  box-shadow: 6px 6px 0 var(--fg);
}

.contact-card a,
.contact-card button {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--fg);
  font-weight: 800;
  text-align: left;
  text-decoration: none;
}

.contact-card button,
.contact-card a {
  padding: 11px 12px;
}

.footer {
  padding-block: 44px;
  border-top: 1px solid var(--border);
  color: var(--muted);
}

:root[data-theme="night"] .footer,
:root.theme-night .footer {
  border-top-color: color-mix(in oklch, var(--hot-pink) 42%, var(--border));
  background:
    linear-gradient(90deg, color-mix(in oklch, var(--hot-pink) 12%, transparent), transparent 38%, color-mix(in oklch, var(--secondary) 10%, transparent)),
    oklch(8% 0.052 282);
}

.footer .site-shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

@container (max-width: 320px) {
  .card h3 {
    font-size: 1.08rem;
  }
}

@media (max-width: 1180px) {
  .metric-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .screen-nav,
  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .mobile-menu-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
  }

  .nav {
    position: fixed;
    top: 72px;
    right: 18px;
    left: 18px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
  }

  .nav[data-open="true"] {
    display: flex;
  }

  .nav a,
  .nav button {
    text-align: left;
  }

  .hero-grid,
  .section-header,
  .project-rail,
  .resume-grid,
  .video-console {
    grid-template-columns: 1fr;
  }

  .hero {
    min-height: auto;
  }

  .orbit-card {
    min-height: 440px;
    box-shadow: 6px 6px 0 var(--fg), var(--shadow);
  }

  .filters {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .site-shell {
    padding-inline: 16px;
  }

  .topbar-inner {
    min-height: 66px;
  }

  .brand span:last-child {
    max-width: 168px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .nav {
    top: 66px;
  }

  h1 {
    font-size: clamp(2.78rem, 14vw, 4.3rem);
  }

  .lead {
    font-size: 1.02rem;
  }

  .metric-strip,
  .card-grid,
  .screen-nav {
    grid-template-columns: 1fr;
  }

  .metric-strip {
    box-shadow: 5px 5px 0 var(--fg);
  }

  .repo-row {
    grid-template-columns: 1fr;
  }

  .mission-hud {
    grid-template-columns: 1fr;
  }

  .pixel-cat {
    width: 74px;
    height: 98px;
  }

  .pixel-cat-bubble {
    left: 38px;
    bottom: 86px;
    min-width: 68px;
    font-size: 9px;
  }

  .quest-card {
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: start;
  }

  .quest-thumb {
    grid-row: span 3;
  }

  .quest-time {
    grid-column: 2;
  }

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

  .cover-chip {
    min-height: 104px;
  }

  .video-cover-stage {
    min-height: 240px;
  }

  .video-preview {
    grid-template-rows: auto auto auto auto;
  }

  .video-preview footer {
    grid-template-columns: 1fr;
  }

  .repo-meta {
    justify-content: flex-start;
  }

  .story-item {
    grid-template-columns: 1fr;
  }

  .role header {
    flex-direction: column;
  }

  .filters {
    grid-template-columns: 1fr;
  }

  .footer .site-shell {
    align-items: flex-start;
    flex-direction: column;
  }
}

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