:root {
  color-scheme: dark;
  --ink: #10110e;
  --paper: #f1eedf;
  --lime: #c9ff36;
  --blue: #4058ff;
  --red: #ff4d32;
  --cyan: #58e4dc;
  --violet: #9d79ff;
  --line: rgb(241 238 223 / 0.24);
  --display: "Bodoni 72 Smallcaps", Didot, "Times New Roman", serif;
  --condensed: "Avenir Next Condensed", "Franklin Gothic Medium", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  color: var(--paper);
  background:
    radial-gradient(circle at 82% 8%, rgb(201 255 54 / 0.08), transparent 28rem),
    linear-gradient(90deg, rgb(241 238 223 / 0.035) 1px, transparent 1px) 0 0 / 36px 36px,
    linear-gradient(rgb(241 238 223 / 0.035) 1px, transparent 1px) 0 0 / 36px 36px,
    var(--ink);
  font-family: var(--condensed);
  font-size: 18px;
  line-height: 1.45;
}

a { color: inherit; }
a:focus-visible, button:focus-visible, select:focus-visible { outline: 4px solid var(--lime); outline-offset: 5px; }
[hidden] { display: none !important; }
.sr-only { width: 1px; height: 1px; position: absolute; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 99; padding: 10px 14px; color: var(--ink); background: var(--lime); font-weight: 900; }
.skip-link:focus { top: 16px; }
.psp-wave-field, .xmb-categories, .xmb-selection-status, .system-clock, .character-label, .sound-toggle { display: none; }

.topbar {
  width: min(1440px, calc(100% - 44px));
  height: 80px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto auto 1fr;
  align-items: center;
  gap: 24px;
  border-bottom: 1px solid var(--line);
  text-transform: uppercase;
  letter-spacing: 0.11em;
  font-size: 0.72rem;
  font-weight: 800;
}

.wordmark { font-family: var(--display); font-size: 1.65rem; line-height: 1; letter-spacing: -0.07em; text-decoration: none; text-transform: lowercase; }
.wordmark span { color: var(--red); }
.topbar-note { display: flex; align-items: center; gap: 10px; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 5px rgb(201 255 54 / 0.12); }
.topbar-controls { display: flex; align-items: center; gap: 16px; }
.theme-picker { display: flex; align-items: center; gap: 8px; color: rgb(241 238 223 / 0.62); font-size: 0.61rem; letter-spacing: 0.13em; }
.theme-select-frame { min-height: 38px; position: relative; display: inline-flex; align-items: center; color: var(--paper); border: 1px solid var(--line); background: rgb(241 238 223 / 0.04); }
.theme-select-frame select { min-width: 118px; min-height: 38px; appearance: none; padding: 0 30px 0 11px; color: inherit; background: transparent; border: 0; border-radius: 0; font: 800 0.66rem/1 var(--condensed); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
.theme-select-frame option { color: #10110e; background: #f1eedf; }
.select-chevron { position: absolute; right: 10px; top: 50%; pointer-events: none; transform: translateY(-55%); }
.jump { justify-self: end; text-decoration-thickness: 1px; text-underline-offset: 4px; }

.hero {
  width: min(1440px, calc(100% - 44px));
  min-height: calc(100svh - 80px);
  margin: 0 auto;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
  align-items: center;
  gap: clamp(30px, 6vw, 100px);
  padding: 72px 0 92px;
}

.eyebrow { margin: 0 0 22px; color: var(--lime); font-size: 0.72rem; font-weight: 900; letter-spacing: 0.18em; text-transform: uppercase; }
.hero h1 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(4.2rem, 9.8vw, 9.6rem);
  font-weight: 900;
  line-height: 0.76;
  letter-spacing: -0.075em;
  text-transform: uppercase;
}
.hero h1 em { position: relative; z-index: 0; color: var(--ink); font-style: italic; white-space: nowrap; }
.hero h1 em::before { position: absolute; inset: 5% -2% 1%; z-index: -1; content: ""; background: var(--lime); transform: rotate(-1.5deg); }
.hero-deck { max-width: 610px; margin: 38px 0 0; color: rgb(241 238 223 / 0.74); font-family: Georgia, serif; font-size: clamp(1.05rem, 1.8vw, 1.45rem); line-height: 1.48; }
.hero-actions { display: flex; align-items: center; gap: 26px; margin-top: 34px; }
.primary-action { display: inline-flex; align-items: center; justify-content: space-between; gap: 36px; min-width: 230px; padding: 15px 18px 13px; color: var(--ink); background: var(--paper); box-shadow: 6px 6px 0 var(--red); font-weight: 900; letter-spacing: 0.08em; text-decoration: none; text-transform: uppercase; transition: transform 150ms ease, box-shadow 150ms ease; }
.primary-action:hover { transform: translate(3px, 3px); box-shadow: 3px 3px 0 var(--red); }

.character-stage {
  aspect-ratio: 1;
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
  perspective: 900px;
  transform: rotate(var(--stage-rotate, 0deg));
}
.character-stage::before { width: 76%; aspect-ratio: 1; position: absolute; content: ""; z-index: -3; border-radius: 45% 55% 62% 38% / 40% 42% 58% 60%; background: var(--blue); transform: rotate(8deg); box-shadow: 22px 22px 0 var(--lime); }
.character-stage::after { width: 52%; height: 7%; position: absolute; bottom: 12%; content: ""; z-index: -2; border-radius: 50%; background: rgb(0 0 0 / 0.65); filter: blur(12px); }
.mini-me-fallback { width: min(88%, 620px); height: min(88%, 620px); position: absolute; z-index: 1; pointer-events: none; object-fit: contain; clip-path: circle(43% at 50% 50%); mix-blend-mode: multiply; filter: brightness(1.45) saturate(1.15) drop-shadow(0 18px 8px rgb(0 0 0 / 0.42)); transition: opacity 300ms ease; }
.mini-me { width: min(96%, 680px); height: min(96%, 680px); position: relative; z-index: 2; pointer-events: none; opacity: 0; background: transparent; transform: translate3d(var(--figure-x, 0), var(--figure-y, 0), 0) rotate(var(--figure-r, -2deg)); filter: drop-shadow(0 18px 8px rgb(0 0 0 / 0.42)); transition: opacity 300ms ease, transform 180ms ease-out; --poster-color: transparent; }
.character-stage.is-model-ready .mini-me { opacity: 1; }
.character-stage.is-model-ready .mini-me-fallback { opacity: 0; }
.character-stage.is-model-error .mini-me { opacity: 0; }
.character-stage.is-model-error .mini-me-fallback { opacity: 1; }
.mini-me::part(default-progress-bar), .mini-me [slot="progress-bar"] { display: none; }
.orbit { position: absolute; z-index: -1; border: 1px solid rgb(241 238 223 / 0.42); border-radius: 50%; }
.orbit-one { width: 94%; height: 38%; transform: rotate(-18deg); }
.orbit-two { width: 76%; height: 30%; transform: rotate(68deg); }
.hero-index { position: absolute; inset: auto 0 22px; display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; color: rgb(241 238 223 / 0.45); font-size: 0.62rem; font-weight: 900; letter-spacing: 0.15em; }
.hero-index span:nth-child(2)::after { display: inline-block; width: calc(100% - 110px); height: 1px; margin: 0 0 3px 14px; content: ""; background: var(--line); }

.ticker { width: 100%; overflow: hidden; color: var(--ink); background: var(--lime); border-block: 2px solid var(--ink); }
.ticker-track { width: max-content; display: flex; align-items: center; gap: 28px; padding: 14px 0 11px; font-size: 0.8rem; font-weight: 900; letter-spacing: 0.16em; animation: ticker 26s linear infinite; }
.ticker-track b { color: var(--red); font-size: 1.1rem; }
@keyframes ticker { to { transform: translateX(-50%); } }

.suite { width: min(1440px, calc(100% - 44px)); margin: 0 auto; padding: 120px 0 140px; }
.section-heading { display: grid; grid-template-columns: 1fr minmax(260px, 420px); gap: 40px; align-items: end; margin-bottom: 44px; }
.section-heading h2 { margin: 0; font-family: var(--display); font-size: clamp(3.4rem, 7.5vw, 7rem); line-height: 0.8; letter-spacing: -0.065em; text-transform: uppercase; }
.section-heading > p { margin: 0; color: rgb(241 238 223 / 0.62); font-family: Georgia, serif; font-size: 1.1rem; }
.app-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--paper); border-left: 2px solid var(--paper); }
.app-card { --card-bg: var(--paper); --card-fg: var(--ink); min-height: 335px; position: relative; display: flex; flex-direction: column; padding: 24px; overflow: hidden; color: var(--card-fg); background: var(--card-bg); border-right: 2px solid var(--paper); border-bottom: 2px solid var(--paper); text-decoration: none; transition: transform 180ms ease, filter 180ms ease; }
.app-card::after { width: 150px; height: 150px; position: absolute; right: -70px; bottom: -70px; display: grid; place-items: start center; padding-top: 22px; content: "↗"; border: 2px solid currentColor; border-radius: 50%; font: 900 2rem/1 Georgia, serif; transform: scale(0.2); opacity: 0; transition: transform 220ms ease, opacity 160ms ease; }
.app-card:hover { z-index: 3; transform: translateY(-7px); filter: saturate(1.1); }
.app-card:hover::after { transform: scale(1); opacity: 1; }
.app-card:nth-child(3n) { transform-origin: right center; }
.card-wide { grid-column: span 2; }
.card-glyph { display: none; }
.card-no, .card-type { position: absolute; top: 22px; font-size: 0.66rem; font-weight: 900; letter-spacing: 0.13em; text-transform: uppercase; }
.card-no { left: 24px; }
.card-type { right: 24px; padding: 3px 6px 2px; border: 1px solid currentColor; }
.app-card h3 { margin: auto 0 14px; font-family: var(--display); font-size: clamp(3rem, 5vw, 5.5rem); line-height: 0.75; letter-spacing: -0.07em; text-transform: uppercase; }
.app-card p { max-width: 34rem; margin: 0 0 28px; font-family: Georgia, serif; font-size: 0.92rem; line-height: 1.45; }
.card-link { margin-top: auto; font-size: 0.68rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; }
.tone-lime { --card-bg: var(--lime); }
.tone-blue { --card-bg: var(--blue); --card-fg: white; }
.tone-coral { --card-bg: #ff765e; }
.tone-cream { --card-bg: var(--paper); }
.tone-mix { --card-bg: #20231c; --card-fg: #ffd267; }
.tone-mix::before { content: ""; position: absolute; inset: 0; opacity: 0.22; background: repeating-linear-gradient(90deg, transparent 0 34px, currentColor 35px, transparent 36px); pointer-events: none; }
.tone-violet { --card-bg: var(--violet); }
.tone-red { --card-bg: var(--red); }
.tone-radio { --card-bg: #ff553d; }
.tone-fx { --card-bg: #24173f; --card-fg: #8dffe5; }
.tone-fx::before { content: ""; position: absolute; inset: 0; opacity: 0.48; background: radial-gradient(circle at 78% 25%, #ff4fd8 0 4%, transparent 5%), radial-gradient(circle at 64% 46%, #6b56ff 0 8%, transparent 9%), repeating-radial-gradient(circle at 70% 36%, transparent 0 18px, currentColor 19px 20px, transparent 21px 34px); pointer-events: none; }
.tone-chat {
  --card-bg:
    radial-gradient(circle at 82% 18%, rgb(201 255 54 / 0.22) 0 2px, transparent 3px),
    repeating-radial-gradient(circle at 82% 18%, transparent 0 31px, rgb(201 255 54 / 0.14) 32px 33px),
    #15221f;
  --card-fg: #e8ffe1;
}
.tone-terminal { --card-bg: #78f0a5; }
.tone-team { --card-bg: #6246db; --card-fg: white; }
.tone-cyan { --card-bg: var(--cyan); }
.tone-screen {
  --card-bg:
    linear-gradient(90deg, transparent 49.7%, rgb(255 255 255 / 0.1) 50%, transparent 50.3%),
    repeating-linear-gradient(0deg, transparent 0 31px, rgb(255 255 255 / 0.07) 32px 33px),
    #171914;
  --card-fg: #f5f0e5;
}
.tone-screen .card-type { color: #ff5748; }
.tone-todo {
  --card-bg:
    radial-gradient(ellipse at 110% 120%, transparent 0 47%, rgb(214 248 255 / 0.23) 47.4% 47.8%, transparent 48.2%),
    radial-gradient(circle at 78% 20%, rgb(186 243 255 / 0.22), transparent 32%),
    linear-gradient(145deg, #0a70cf, #053875);
  --card-fg: #effcff;
}
.tone-todo .card-glyph { color: #baf3ff; }
.tone-todo .card-type { color: #baf3ff; }
.tone-water { --card-bg: #287fbe; --card-fg: white; }
.tone-snow { --card-bg: #d9eff5; }
.tone-sun { --card-bg: #ffc928; }
.tone-league { --card-bg: #16346f; --card-fg: #f4ecd8; }
.tone-league .card-glyph { color: #ff7a3c; }
.tone-league .card-type { color: #ff7a3c; }

footer { min-height: 110px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding: 20px max(22px, calc((100vw - 1440px) / 2)); color: var(--ink); background: var(--lime); font-size: 0.68rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }
.footer-mark { font-size: 2rem; }
footer p { text-align: center; }
footer > a:last-child { justify-self: end; }

/* PSP / XMB — a system-software composition, not a palette swap. */
html[data-theme="psp"] {
  --ink: #061942;
  --paper: #f5fbff;
  --lime: #b7efff;
  --blue: #0c67bb;
  --red: #7fdfff;
  --line: rgb(231 247 255 / 0.24);
  color-scheme: dark;
  background: #06235c;
}

html[data-theme="psp"] body {
  color: #f5fbff;
  background:
    radial-gradient(circle at 72% 18%, rgb(121 218 255 / 0.14), transparent 25rem),
    radial-gradient(circle at 15% 78%, rgb(39 95 210 / 0.38), transparent 36rem),
    linear-gradient(145deg, #021432 0%, #063c7e 48%, #07518f 100%);
  background-attachment: fixed;
  font-family: "Avenir Next", "Helvetica Neue", sans-serif;
}

html[data-theme="psp"] .topbar,
html[data-theme="psp"] main,
html[data-theme="psp"] footer { position: relative; z-index: 1; }

html[data-theme="psp"] .psp-wave-field { position: fixed; inset: 0; z-index: 0; display: block; overflow: hidden; pointer-events: none; }
html[data-theme="psp"] .psp-wave-field::before { width: 55vw; aspect-ratio: 1; position: absolute; right: -15vw; top: -24vw; content: ""; border-radius: 50%; background: radial-gradient(circle, rgb(198 246 255 / 0.2), transparent 68%); filter: blur(10px); }
html[data-theme="psp"] .psp-wave-field span { width: 145vw; height: 38vh; position: absolute; left: -24vw; top: 49%; border-top: 3px solid rgb(229 251 255 / 0.42); border-radius: 50%; filter: drop-shadow(0 -5px 12px rgb(117 224 255 / 0.32)); transform: rotate(-6deg); animation: xmb-wave 13s ease-in-out infinite alternate; }
html[data-theme="psp"] .psp-wave-field span:nth-child(2) { top: 55%; border-width: 12px; border-color: rgb(115 212 247 / 0.15); filter: blur(8px); transform: rotate(4deg); animation-duration: 17s; animation-direction: alternate-reverse; }
html[data-theme="psp"] .psp-wave-field span:nth-child(3) { top: 62%; border-width: 1px; border-color: rgb(255 255 255 / 0.3); transform: rotate(-2deg); animation-duration: 20s; }
@keyframes xmb-wave { from { translate: -3vw -2vh; scale: 1 0.82; } to { translate: 4vw 3vh; scale: 1 1.15; } }

html[data-theme="psp"] .topbar { width: min(1520px, calc(100% - 70px)); height: 96px; border-bottom-color: rgb(255 255 255 / 0.14); font-size: 0.65rem; font-weight: 500; }
html[data-theme="psp"] .wordmark { font-family: "Avenir Next", "Helvetica Neue", sans-serif; font-size: 1.2rem; font-weight: 500; letter-spacing: 0.02em; }
html[data-theme="psp"] .wordmark span { color: #aeefff; }
html[data-theme="psp"] .topbar-note { color: rgb(244 251 255 / 0.88); font-weight: 500; }
html[data-theme="psp"] .pulse { background: white; box-shadow: 0 0 14px rgb(183 239 255 / 0.9); }
html[data-theme="psp"] .system-clock { display: block; color: rgb(255 255 255 / 0.96); font-variant-numeric: tabular-nums; letter-spacing: 0.08em; white-space: nowrap; }
html[data-theme="psp"] .sound-toggle { min-height: 38px; display: inline-flex; align-items: center; gap: 7px; padding: 0 10px; color: rgb(255 255 255 / 0.9); background: rgb(255 255 255 / 0.07); border: 1px solid rgb(255 255 255 / 0.2); border-radius: 4px; font: 500 0.58rem/1 "Avenir Next", "Helvetica Neue", sans-serif; letter-spacing: 0.11em; text-transform: uppercase; cursor: pointer; transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease; }
html[data-theme="psp"] .sound-toggle:hover { color: white; background: rgb(255 255 255 / 0.14); border-color: rgb(255 255 255 / 0.36); }
html[data-theme="psp"] .sound-toggle-icon { width: 14px; position: relative; display: inline-grid; place-items: center; color: #d6f8ff; font-size: 1rem; text-shadow: 0 0 9px rgb(167 239 255 / 0.9); }
html[data-theme="psp"][data-sound="off"] .sound-toggle { color: rgb(255 255 255 / 0.58); background: rgb(2 22 73 / 0.18); }
html[data-theme="psp"][data-sound="off"] .sound-toggle-icon { color: rgb(255 255 255 / 0.45); text-shadow: none; }
html[data-theme="psp"][data-sound="off"] .sound-toggle-icon::after { width: 18px; height: 1px; position: absolute; content: ""; background: currentColor; transform: rotate(-48deg); }
html[data-theme="psp"] .theme-picker { color: rgb(255 255 255 / 0.88); font-weight: 500; }
html[data-theme="psp"] .theme-select-frame { border-color: rgb(255 255 255 / 0.28); border-radius: 4px; background: linear-gradient(rgb(255 255 255 / 0.13), rgb(255 255 255 / 0.05)); box-shadow: inset 0 1px rgb(255 255 255 / 0.18), 0 8px 24px rgb(0 15 64 / 0.2); }
html[data-theme="psp"] .theme-select-frame select { font-family: "Avenir Next", "Helvetica Neue", sans-serif; font-weight: 500; }
html[data-theme="psp"] .jump { color: rgb(255 255 255 / 0.94); font-weight: 500; }

html[data-theme="psp"] .hero { min-height: calc(100svh - 96px); grid-template-columns: minmax(0, 0.9fr) minmax(400px, 1.1fr); gap: clamp(30px, 4vw, 80px); padding: 72px 0 110px; }
html[data-theme="psp"] .hero-copy { align-self: center; }
html[data-theme="psp"] .eyebrow { color: rgb(226 248 255 / 0.96); font-weight: 500; letter-spacing: 0.22em; }
html[data-theme="psp"] .hero h1 { font-family: "Avenir Next", "Helvetica Neue", sans-serif; font-size: clamp(4rem, 8vw, 8.5rem); font-weight: 300; line-height: 0.86; letter-spacing: -0.065em; text-transform: none; text-shadow: 0 6px 24px rgb(0 20 80 / 0.22); }
html[data-theme="psp"] .hero h1 em { color: #f5fbff; font-style: normal; white-space: nowrap; }
html[data-theme="psp"] .hero h1 em::before { display: none; }
html[data-theme="psp"] .hero-deck { max-width: 540px; color: rgb(245 252 255 / 0.94); font-family: "Avenir Next", "Helvetica Neue", sans-serif; font-size: clamp(1rem, 1.4vw, 1.25rem); font-weight: 400; }
html[data-theme="psp"] .primary-action { min-width: 220px; color: white; background: linear-gradient(100deg, rgb(255 255 255 / 0.22), rgb(255 255 255 / 0.08)); border: 1px solid rgb(255 255 255 / 0.4); border-radius: 5px; box-shadow: inset 0 1px rgb(255 255 255 / 0.24), 0 14px 40px rgb(0 22 76 / 0.28); font-size: 0.72rem; font-weight: 500; }
html[data-theme="psp"] .primary-action:hover { transform: translateY(-2px); box-shadow: inset 0 1px rgb(255 255 255 / 0.3), 0 18px 45px rgb(0 22 76 / 0.34); }
html[data-theme="psp"] .character-stage::before { width: 76%; border: 1px solid rgb(255 255 255 / 0.3); border-radius: 50%; background: radial-gradient(circle at 34% 26%, rgb(255 255 255 / 0.28), rgb(74 179 235 / 0.18) 42%, rgb(1 30 100 / 0.18) 72%); box-shadow: inset 0 0 55px rgb(213 246 255 / 0.18), 0 0 70px rgb(116 225 255 / 0.22); transform: none; }
html[data-theme="psp"] .character-stage::after { bottom: 13%; background: rgb(0 16 72 / 0.38); filter: blur(18px); }
html[data-theme="psp"] .mini-me-fallback { filter: brightness(1.45) saturate(1.15) drop-shadow(0 20px 22px rgb(0 18 67 / 0.38)); }
html[data-theme="psp"] .mini-me { filter: drop-shadow(0 20px 22px rgb(0 18 67 / 0.38)); }
html[data-theme="psp"] .orbit { border-color: rgb(231 250 255 / 0.35); }
html[data-theme="psp"] .character-label { position: absolute; right: 8%; bottom: 8%; z-index: 4; display: flex; align-items: center; gap: 8px; margin: 0; color: rgb(255 255 255 / 0.94); font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; }
html[data-theme="psp"] .character-label span { width: 6px; height: 6px; border-radius: 50%; background: #d6f8ff; box-shadow: 0 0 10px #a7efff; }
html[data-theme="psp"] .hero-index { color: rgb(229 247 255 / 0.48); font-weight: 500; }
html[data-theme="psp"] .ticker { display: none; }

html[data-theme="psp"] .suite { width: min(1180px, calc(100% - 70px)); padding: 100px 0 140px; }
html[data-theme="psp"] .section-heading { grid-template-columns: 1fr minmax(260px, 390px); margin-bottom: 54px; }
html[data-theme="psp"] .section-heading h2 { font-family: "Avenir Next", "Helvetica Neue", sans-serif; font-size: clamp(3.2rem, 6vw, 6.4rem); font-weight: 300; letter-spacing: -0.055em; text-transform: none; }
html[data-theme="psp"] .section-heading > p { color: rgb(248 253 255 / 0.96); font-family: "Avenir Next", "Helvetica Neue", sans-serif; font-size: 1rem; }
html[data-theme="psp"] .xmb-categories { display: flex; align-items: flex-start; justify-content: center; gap: clamp(16px, 4vw, 54px); margin: 0 auto 32px; padding: 18px 24px 24px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory; scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / 0.28) transparent; }
html[data-theme="psp"] .xmb-category { min-width: 68px; min-height: 82px; display: grid; place-items: center; gap: 5px; padding: 5px; color: rgb(244 252 255 / 0.9); background: transparent; border: 0; font-family: inherit; cursor: pointer; scroll-snap-align: center; transition: color 180ms ease, filter 180ms ease, transform 180ms ease; }
html[data-theme="psp"] .xmb-category span { font: 300 2rem/1 "Avenir Next", sans-serif; }
html[data-theme="psp"] .xmb-category small { font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase; }
html[data-theme="psp"] .xmb-category:hover { color: white; }
html[data-theme="psp"] .xmb-category.is-active { color: white; filter: drop-shadow(0 0 10px rgb(203 246 255 / 0.95)); transform: scale(1.22); }
html[data-theme="psp"] .xmb-selection-status { max-width: 920px; display: flex; justify-content: space-between; margin: 0 auto 10px; padding: 0 18px 12px; color: rgb(247 253 255 / 0.94); border-bottom: 1px solid rgb(255 255 255 / 0.32); font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase; }
html[data-theme="psp"] .app-grid { max-width: 920px; display: flex; flex-direction: column; margin: 0 auto; border: 0; }
html[data-theme="psp"] .app-card { --card-bg: transparent; --card-fg: white; width: 100%; min-height: 92px; display: grid; grid-template-columns: 62px minmax(150px, 220px) minmax(220px, 1fr) auto; grid-template-areas: "icon title description link"; align-items: center; gap: 16px; padding: 12px 18px; overflow: visible; color: white; background: transparent; border: 0; border-bottom: 1px solid rgb(255 255 255 / 0.12); filter: none; transition: background-color 180ms ease, transform 180ms ease; }
html[data-theme="psp"] .card-glyph { grid-area: icon; display: block; color: rgb(226 248 255 / 0.84); font: 300 2rem/1 "Avenir Next", sans-serif; text-align: center; text-shadow: 0 0 12px rgb(175 235 255 / 0.32); }
html[data-theme="psp"] .app-card::after { display: none; }
html[data-theme="psp"] .app-card:hover,
html[data-theme="psp"] .app-card:focus-visible { z-index: 2; background: linear-gradient(90deg, rgb(255 255 255 / 0.2), rgb(255 255 255 / 0.05)); filter: none; transform: translateX(10px); }
html[data-theme="psp"] .app-card:focus-visible { outline-color: white; outline-offset: 2px; }
html[data-theme="psp"] .app-card.is-launching { z-index: 3; pointer-events: none; background: linear-gradient(90deg, rgb(224 249 255 / 0.32), rgb(255 255 255 / 0.06)); box-shadow: inset 3px 0 #d7f8ff; transform: translateX(16px); }
html[data-theme="psp"] .app-card.is-launching .card-glyph { color: white; filter: drop-shadow(0 0 9px rgb(198 244 255 / 0.95)); transform: scale(1.12); }
html[data-theme="psp"] .card-wide { grid-column: auto; }
html[data-theme="psp"] .card-no,
html[data-theme="psp"] .card-type { display: none; }
html[data-theme="psp"] .app-card h3 { grid-area: title; margin: 0; font-family: "Avenir Next", "Helvetica Neue", sans-serif; font-size: 1.45rem; font-weight: 400; line-height: 1; letter-spacing: -0.025em; text-transform: none; }
html[data-theme="psp"] .app-card p { grid-area: description; max-width: none; margin: 0; color: rgb(248 253 255 / 0.94); font-family: "Avenir Next", "Helvetica Neue", sans-serif; font-size: 0.78rem; line-height: 1.45; }
html[data-theme="psp"] .card-link { grid-area: link; margin: 0; color: rgb(250 254 255 / 0.96); font-size: 0.58rem; font-weight: 500; white-space: nowrap; }
html[data-theme="psp"] footer { color: rgb(248 253 255 / 0.94); background: rgb(1 20 67 / 0.38); border-top: 1px solid rgb(255 255 255 / 0.24); font-weight: 500; }

@media (max-width: 1050px) {
  .topbar-note { display: none; }
  .hero { grid-template-columns: 1fr 0.8fr; }
  .hero h1 { font-size: clamp(4rem, 10vw, 7rem); }
  .app-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-theme="psp"] .hero { grid-template-columns: minmax(0, 0.9fr) minmax(330px, 1.1fr); }
  html[data-theme="psp"] .hero h1 { font-size: clamp(3.7rem, 8.7vw, 6rem); }
  html[data-theme="psp"] .app-card { grid-template-columns: 54px minmax(130px, 180px) minmax(180px, 1fr); grid-template-areas: "icon title description"; }
  html[data-theme="psp"] .card-link { display: none; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .topbar { width: calc(100% - 28px); height: auto; min-height: 80px; grid-template-columns: 1fr auto; gap: 12px; }
  .topbar-note { display: none; }
  .topbar-controls { justify-self: end; }
  .theme-label { position: absolute; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .theme-select-frame select { min-width: 116px; min-height: 42px; }
  .jump { display: none; }
  .hero { width: calc(100% - 28px); min-height: auto; grid-template-columns: 1fr; padding: 70px 0 82px; }
  .hero-copy { z-index: 2; }
  .hero h1 { font-size: clamp(3.7rem, 19vw, 6rem); }
  .hero h1 em { white-space: normal; }
  .hero-deck { margin-top: 28px; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .primary-action { width: calc(100% - 8px); }
  .character-stage { width: min(92vw, 520px); margin: -20px auto 0; }
  .hero-index { bottom: 12px; }
  .hero-index span:last-child { display: none; }
  .hero-index { grid-template-columns: auto 1fr; }
  .suite { width: calc(100% - 28px); padding: 90px 0; }
  .section-heading { grid-template-columns: 1fr; }
  .section-heading h2 { font-size: clamp(3.2rem, 17vw, 5rem); }
  .app-grid { grid-template-columns: 1fr; }
  .card-wide { grid-column: auto; }
  .app-card { min-height: 290px; }
  footer { grid-template-columns: 1fr auto; }
  footer p { display: none; }

  html[data-theme="psp"] .topbar { width: calc(100% - 28px); min-height: 78px; }
  html[data-theme="psp"] .system-clock { display: none; }
  html[data-theme="psp"] .topbar-controls { gap: 8px; }
  html[data-theme="psp"] .sound-toggle { width: 42px; min-height: 42px; justify-content: center; padding-inline: 8px; }
  html[data-theme="psp"] .sound-toggle-label { position: absolute; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  html[data-theme="psp"] .hero { width: calc(100% - 28px); min-height: auto; grid-template-columns: 1fr; padding: 58px 0 78px; }
  html[data-theme="psp"] .hero h1 { font-size: clamp(3.25rem, 16vw, 5.2rem); }
  html[data-theme="psp"] .hero h1 em { white-space: normal; }
  html[data-theme="psp"] .hero-deck { margin-top: 26px; }
  html[data-theme="psp"] .character-stage { width: min(92vw, 480px); margin-top: -12px; }
  html[data-theme="psp"] .character-label { right: 4%; bottom: 7%; }
  html[data-theme="psp"] .suite { width: calc(100% - 28px); padding: 82px 0 100px; }
  html[data-theme="psp"] .section-heading { grid-template-columns: 1fr; margin-bottom: 38px; }
  html[data-theme="psp"] .section-heading h2 { font-size: clamp(3rem, 15vw, 4.8rem); }
  html[data-theme="psp"] .xmb-categories { justify-content: flex-start; gap: 18px; margin-inline: -14px; padding-inline: 22px; }
  html[data-theme="psp"] .xmb-category { min-width: 64px; min-height: 76px; }
  html[data-theme="psp"] .xmb-selection-status { padding-inline: 10px; }
  html[data-theme="psp"] .app-grid { display: flex; }
  html[data-theme="psp"] .app-card { min-height: 104px; grid-template-columns: 48px 1fr; grid-template-areas: "icon title" "icon description"; gap: 3px 12px; padding: 14px 10px; }
  html[data-theme="psp"] .card-glyph { font-size: 1.65rem; }
  html[data-theme="psp"] .app-card h3 { align-self: end; font-size: 1.25rem; }
  html[data-theme="psp"] .app-card p { align-self: start; font-size: 0.72rem; }
  html[data-theme="psp"] .app-card:hover,
  html[data-theme="psp"] .app-card:focus-visible { transform: translateX(4px); }
}

@media (max-height: 600px) and (orientation: landscape) {
  html[data-theme="psp"] .topbar { height: 72px; min-height: 72px; }
  html[data-theme="psp"] .hero { min-height: 520px; padding-block: 34px 70px; }
  html[data-theme="psp"] .hero h1 { font-size: clamp(3rem, 8vw, 4.8rem); }
  html[data-theme="psp"] .character-stage { max-width: 390px; }
}

@media (forced-colors: active) {
  .theme-select-frame, .xmb-category, .app-card { border: 1px solid CanvasText; }
  html[data-theme="psp"] .xmb-category.is-active { outline: 3px solid Highlight; }
}

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