:root {
  --scale: 0.3333333;
  --accent: #5af3ff;
  --accent-deep: #0054ff;
  --red: #f40012;
  --navy: #041056;
  --ink: #020308;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  background: #030618;
  color: white;
  overflow: hidden;
}

body {
  font-family: "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

button {
  font: inherit;
}

[data-sub-control] {
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    color 140ms ease,
    background-color 140ms ease,
    border-color 140ms ease,
    box-shadow 160ms ease,
    filter 160ms ease,
    transform 180ms cubic-bezier(0.16, 1, 0.2, 1);
}

[data-sub-control]:focus-visible {
  outline: 4px solid #fff200;
  outline-offset: 3px;
}

.no-script-warning {
  position: fixed;
  left: max(14px, env(safe-area-inset-left));
  right: max(14px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 20000;
  padding: 14px 16px;
  color: #050505;
  background: #fff200;
  border: 3px solid white;
  box-shadow: -6px 7px 0 rgba(0, 0, 0, 0.75);
  font: italic 900 16px/1.15 Impact, "Arial Black", sans-serif;
  text-align: center;
  text-transform: uppercase;
}

.opening-water {
  position: fixed;
  inset: 0;
  z-index: 30000;
  overflow: hidden;
  pointer-events: auto;
  isolation: isolate;
  contain: strict;
  animation: openingOverlayExit 2050ms linear both;
}

.opening-water__flash,
.opening-water__wash,
.opening-water__surface,
.opening-water__rays,
.opening-water__figure,
.opening-water__front,
.opening-water__bubbles {
  position: absolute;
  pointer-events: none;
}

.opening-water__flash {
  inset: 0;
  z-index: 0;
  background: white;
  animation: openingFlash 2050ms linear both;
}

.opening-water__wash {
  inset: 0;
  z-index: 1;
  overflow: hidden;
  background:
    radial-gradient(circle at 72% 40%, rgba(123, 229, 255, 0.17) 0 1.7%, transparent 2.2%),
    radial-gradient(circle at 62% 58%, rgba(146, 238, 255, 0.13) 0 1%, transparent 1.55%),
    radial-gradient(circle at 80% 67%, rgba(121, 229, 255, 0.12) 0 1.25%, transparent 1.8%),
    linear-gradient(180deg, #5ee8f7 0%, #2abce9 10%, #2378d7 31%, #173dcc 66%, #080994 100%);
  clip-path: inset(0 0 100% 0);
  transform: translate3d(0, 0, 0);
  will-change: clip-path;
  animation: openingWaterCurtain 2050ms cubic-bezier(0.64, 0, 0.24, 1) both;
}

.opening-water__surface {
  left: -6%;
  right: -6%;
  top: -5%;
  height: 31%;
  opacity: 0.72;
  background:
    radial-gradient(ellipse at 5% 8%, rgba(223, 255, 255, 0.88) 0 5%, transparent 5.8%),
    radial-gradient(ellipse at 19% 16%, rgba(189, 252, 255, 0.78) 0 8%, transparent 8.8%),
    radial-gradient(ellipse at 35% 2%, rgba(230, 255, 255, 0.76) 0 7%, transparent 7.8%),
    radial-gradient(ellipse at 50% 20%, rgba(176, 248, 255, 0.68) 0 9%, transparent 9.8%),
    radial-gradient(ellipse at 68% 5%, rgba(224, 255, 255, 0.76) 0 8%, transparent 8.9%),
    radial-gradient(ellipse at 85% 17%, rgba(184, 250, 255, 0.72) 0 9%, transparent 9.8%),
    linear-gradient(180deg, rgba(231, 255, 255, 0.8), rgba(81, 225, 245, 0.22) 42%, transparent 88%);
  mix-blend-mode: screen;
  transform: translate3d(-2%, 0, 0) scaleX(1.04);
  animation: openingSurfaceDrift 1450ms ease-in-out infinite alternate;
}

.opening-water__rays {
  inset: -10% -8%;
  opacity: 0.2;
  background:
    linear-gradient(104deg, transparent 0 12%, rgba(205, 255, 255, 0.36) 17%, transparent 24%),
    linear-gradient(78deg, transparent 0 42%, rgba(153, 242, 255, 0.3) 48%, transparent 55%),
    linear-gradient(101deg, transparent 0 73%, rgba(198, 255, 255, 0.24) 78%, transparent 84%);
  mix-blend-mode: screen;
  transform: translate3d(-2%, -5%, 0);
  will-change: transform;
  animation: openingRayFall 2050ms linear both;
}

.opening-water__figure {
  z-index: 2;
  left: clamp(-90px, -4.5vw, -28px);
  bottom: -10%;
  width: clamp(350px, 38vw, 620px);
  aspect-ratio: 410 / 690;
  opacity: 0;
  transform: translate3d(-2%, -3%, 0) rotate(180deg);
  transform-origin: 50% 50%;
  filter: drop-shadow(7px -2px 0 rgba(0, 35, 159, 0.54));
  will-change: transform, opacity;
  animation: openingFigureFloat 2050ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.opening-water__figure svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.opening-water__figure .coat,
.opening-water__figure .face,
.opening-water__figure .hand,
.opening-water__figure .neck {
  fill: url("#openingCoatBlue");
}

.opening-water__figure .hair {
  fill: url("#openingHairBlue");
}

.opening-water__front {
  left: -8%;
  width: 116%;
  height: 84px;
  opacity: 0;
  background:
    radial-gradient(ellipse at 7% 44%, rgba(244, 255, 255, 0.96) 0 5%, transparent 5.7%),
    radial-gradient(ellipse at 25% 60%, rgba(156, 250, 255, 0.92) 0 7%, transparent 7.8%),
    radial-gradient(ellipse at 46% 35%, rgba(232, 255, 255, 0.92) 0 6%, transparent 6.8%),
    radial-gradient(ellipse at 69% 57%, rgba(124, 241, 255, 0.9) 0 8%, transparent 8.8%),
    radial-gradient(ellipse at 91% 38%, rgba(236, 255, 255, 0.94) 0 6%, transparent 6.8%),
    linear-gradient(180deg, rgba(237, 255, 255, 0.9), rgba(73, 224, 255, 0.58) 42%, transparent 78%);
  mix-blend-mode: screen;
  will-change: transform, opacity;
}

.opening-water__front::before,
.opening-water__front::after {
  content: "";
  position: absolute;
  top: 34px;
  width: 38px;
  height: 58px;
  border-radius: 48% 52% 58% 42% / 38% 42% 58% 62%;
  background: linear-gradient(180deg, rgba(221, 255, 255, 0.92), rgba(68, 218, 255, 0.22));
}

.opening-water__front::before {
  left: 31%;
  transform: rotate(-9deg) scale(0.82);
}

.opening-water__front::after {
  left: 74%;
  transform: rotate(11deg) scale(1.18);
}

.opening-water__front--fill {
  top: -84px;
  animation: openingFrontFill 2050ms cubic-bezier(0.64, 0, 0.24, 1) both;
}

.opening-water__front--drain {
  top: -84px;
  transform: rotate(180deg);
  animation: openingFrontDrain 2050ms cubic-bezier(0.64, 0, 0.24, 1) both;
}

.opening-water__bubbles {
  inset: 0;
}

.opening-water__bubbles i {
  position: absolute;
  left: var(--bubble-x);
  top: var(--bubble-y);
  width: var(--bubble-size);
  height: var(--bubble-size);
  border: 2px solid rgba(213, 255, 255, 0.62);
  border-radius: 50%;
  opacity: 0;
  box-shadow: inset 3px 3px 0 rgba(255, 255, 255, 0.24);
  will-change: transform, opacity;
  animation: openingBubbleRise 1350ms var(--bubble-delay) ease-in both;
}

.opening-water__bubbles i:nth-child(1) { --bubble-x: 52%; --bubble-y: 82%; --bubble-size: 11px; --bubble-delay: 270ms; }
.opening-water__bubbles i:nth-child(2) { --bubble-x: 61%; --bubble-y: 92%; --bubble-size: 7px; --bubble-delay: 410ms; }
.opening-water__bubbles i:nth-child(3) { --bubble-x: 72%; --bubble-y: 72%; --bubble-size: 17px; --bubble-delay: 320ms; }
.opening-water__bubbles i:nth-child(4) { --bubble-x: 79%; --bubble-y: 88%; --bubble-size: 8px; --bubble-delay: 510ms; }
.opening-water__bubbles i:nth-child(5) { --bubble-x: 88%; --bubble-y: 77%; --bubble-size: 13px; --bubble-delay: 370ms; }
.opening-water__bubbles i:nth-child(6) { --bubble-x: 43%; --bubble-y: 94%; --bubble-size: 6px; --bubble-delay: 590ms; }
.opening-water__bubbles i:nth-child(7) { --bubble-x: 68%; --bubble-y: 98%; --bubble-size: 8px; --bubble-delay: 650ms; }
.opening-water__bubbles i:nth-child(8) { --bubble-x: 83%; --bubble-y: 96%; --bubble-size: 10px; --bubble-delay: 710ms; }
.opening-water__bubbles i:nth-child(9) { --bubble-x: 25%; --bubble-y: 86%; --bubble-size: 5px; --bubble-delay: 330ms; }
.opening-water__bubbles i:nth-child(10) { --bubble-x: 35%; --bubble-y: 94%; --bubble-size: 9px; --bubble-delay: 480ms; }
.opening-water__bubbles i:nth-child(11) { --bubble-x: 57%; --bubble-y: 99%; --bubble-size: 5px; --bubble-delay: 760ms; }
.opening-water__bubbles i:nth-child(12) { --bubble-x: 92%; --bubble-y: 90%; --bubble-size: 7px; --bubble-delay: 540ms; }

@keyframes openingOverlayExit {
  0%, 95% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes openingFlash {
  0%, 50% { opacity: 1; }
  53%, 100% { opacity: 0; }
}

@keyframes openingWaterCurtain {
  0%, 4% { clip-path: inset(0 0 100% 0); }
  50%, 63% { clip-path: inset(0 0 0 0); }
  97%, 100% { clip-path: inset(100% 0 0 0); }
}

@keyframes openingFrontFill {
  0%, 4% { opacity: 0; transform: translate3d(0, 0, 0); }
  6% { opacity: 0.88; }
  50% { opacity: 0.88; transform: translate3d(0, calc(100svh + 84px), 0); }
  51%, 100% { opacity: 0; transform: translate3d(0, calc(100svh + 84px), 0); }
}

@keyframes openingFrontDrain {
  0%, 62% { opacity: 0; transform: translate3d(0, 0, 0) rotate(180deg); }
  64% { opacity: 0.82; }
  97% { opacity: 0.82; transform: translate3d(0, calc(100svh + 84px), 0) rotate(180deg); }
  100% { opacity: 0; transform: translate3d(0, calc(100svh + 84px), 0) rotate(180deg); }
}

@keyframes openingSurfaceDrift {
  from { transform: translate3d(-2%, 0, 0) scaleX(1.04); }
  to { transform: translate3d(2%, 5px, 0) scaleX(1.08); }
}

@keyframes openingRayFall {
  from { transform: translate3d(-2%, -5%, 0); }
  to { transform: translate3d(2%, 8%, 0); }
}

@keyframes openingFigureFloat {
  0%, 6% { opacity: 0; transform: translate3d(-3%, -5%, 0) rotate(180deg); }
  24%, 72% { opacity: 1; }
  100% { opacity: 0.96; transform: translate3d(0, 1%, 0) rotate(180deg); }
}

@keyframes openingBubbleRise {
  0% { opacity: 0; transform: translate3d(0, 8vh, 0) scale(0.72); }
  18% { opacity: 0.58; }
  78% { opacity: 0.42; }
  100% { opacity: 0; transform: translate3d(18px, -54vh, 0) scale(1.12); }
}

/* Start the visual clock only when the opening audio has had time to load. */
.opening-water:not(.opening-running),
.opening-water:not(.opening-running) .opening-water__effect,
.opening-water:not(.opening-running) .opening-water__effect * {
  animation-play-state: paused !important;
}

/* Layered water-splash wipe matched to the opening's frame progression. */
.opening-water {
  pointer-events: none;
  background: #fff;
  animation: openingEffectExit 1680ms linear both;
}

.opening-water > :not(.opening-water__effect) {
  display: none;
}

.opening-water:not(.opening-running) {
  animation: none;
  background: transparent;
}

.opening-water:not(.opening-running) .opening-water__effect {
  visibility: hidden;
}

.is-awaiting-entry .menu-stack,
.is-awaiting-entry .quick-panel,
.is-awaiting-entry .wallet,
.is-awaiting-entry .date-card,
.is-awaiting-entry .music-toggle,
.is-awaiting-entry .music-select,
.is-awaiting-entry .prompt,
.is-awaiting-entry .mega-word,
.is-awaiting-entry .hero-figure,
.is-awaiting-entry .side-word,
.is-awaiting-entry .white-slab,
.is-awaiting-entry .shards,
.is-awaiting-entry .mobile-controls {
  visibility: hidden;
}

.opening-water > .opening-enter:not([hidden]) {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  left: 50%;
  top: 50%;
  width: min(520px, calc(100% - 40px));
  min-height: 100px;
  padding: 18px 28px;
  border: 0;
  color: #ed2424;
  background: white;
  clip-path: polygon(7% 0, 100% 0, 93% 100%, 0 100%);
  transform: translate(-50%, -50%) rotate(-7deg);
  font: italic 900 48px/1.05 Impact, 'Arial Black', sans-serif;
  text-transform: uppercase;
  text-shadow: -4px 4px 0 #050505;
  cursor: pointer;
  touch-action: manipulation;
  transition: color 160ms ease, background-color 160ms ease;
  animation: openingEntryPlate 680ms cubic-bezier(0.16, 0.72, 0.22, 1) backwards;
}

.opening-enter__label {
  display: block;
  animation: openingEntryLabel 460ms 140ms cubic-bezier(0.16, 0.72, 0.22, 1) backwards;
}

@keyframes openingEntryPlate {
  0% { opacity: 0; translate: 0 -68px; }
  25% { opacity: 1; }
  78% { translate: 0 3px; }
  100% { opacity: 1; translate: 0 0; }
}

@keyframes openingEntryLabel {
  0% { opacity: 0; translate: -22px -10px; }
  100% { opacity: 1; translate: 0 0; }
}

.opening-water > .opening-enter:hover,
.opening-water > .opening-enter:focus-visible {
  color: #050505;
  background: #70f8ff;
  text-shadow: -3px 3px 0 white;
  outline: none;
}

@media (max-width: 520px) {
  .opening-water > .opening-enter:not([hidden]) {
    font-size: 34px;
    min-height: 82px;
    padding: 18px 20px;
  }
}

.opening-water__effect {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #fff;
  pointer-events: none;
}

.opening-water__base,
.opening-water__back-splash,
.opening-water__mid-splash,
.opening-water__light-splash,
.opening-water__drips,
.opening-water__foam-flecks,
.opening-water__rings,
.opening-water__small-bubbles,
.opening-water__surface-shine,
.opening-water__first-drops {
  transform-box: view-box;
  transform-origin: 50% 0;
  will-change: transform, opacity;
}

.opening-water__base {
  transform-origin: 50% 0;
  animation: openingBaseFill 650ms 300ms cubic-bezier(0.68, 0, 0.18, 1) both;
}

.opening-water__back-splash {
  fill: #145cd8;
  stroke: #145cd8;
  stroke-width: 18;
  stroke-linejoin: round;
  animation: openingBackDrop 780ms 210ms cubic-bezier(0.72, 0, 0.2, 1) both;
}

.opening-water__mid-splash {
  fill: #65ecf4;
  stroke: #65ecf4;
  stroke-width: 14;
  stroke-linejoin: round;
  animation: openingMidDrop 700ms 255ms cubic-bezier(0.66, 0, 0.16, 1) both;
}

.opening-water__light-splash {
  fill: #b4ffff;
  stroke: #b4ffff;
  stroke-width: 12;
  stroke-linejoin: round;
  animation: openingLightDrop 660ms 285ms cubic-bezier(0.62, 0, 0.15, 1) both;
}

.opening-water__drips {
  fill: #028acf;
  opacity: 0.94;
  animation: openingDripDrop 690ms 315ms cubic-bezier(0.68, 0, 0.18, 1) both;
}

.opening-water__first-drops {
  fill: #72effb;
  animation: openingFirstDrops 540ms 190ms cubic-bezier(0.25, 0.8, 0.18, 1) both;
}

.opening-water__foam-flecks {
  fill: #cfffff;
  animation: openingFoamBurst 600ms 390ms cubic-bezier(0.2, 0.75, 0.18, 1) both;
}

.opening-water__rings {
  fill: rgba(176, 250, 255, 0.12);
  stroke: rgba(198, 255, 255, 0.88);
  stroke-width: 3;
  animation: openingRingBurst 690ms 430ms cubic-bezier(0.18, 0.7, 0.2, 1) both;
}

.opening-water__rings > path:nth-child(6n + 3) {
  stroke-width: 5;
  opacity: 0.72;
}

.opening-water__rings > path:nth-child(8n + 1) {
  stroke: rgba(61, 225, 249, 0.94);
}

.opening-water__rings .opening-water__bubble-glint {
  fill: none;
  stroke: #e7ffff;
  stroke-width: 1.5;
  stroke-linecap: round;
  opacity: 0.9;
}

.opening-water__small-bubbles {
  fill: #b9fbff;
  opacity: 0.9;
  animation: openingBubbleScatter 660ms 465ms ease-out both;
}

.opening-water__surface-shine {
  fill: rgba(190, 255, 255, 0.58);
  stroke: none;
  stroke-width: 0;
  stroke-linecap: round;
  animation: openingSurfaceSettle 520ms 790ms ease-out both;
}

.opening-water__surface-shine path:last-child {
  fill: rgba(190, 255, 255, 0.58);
  opacity: 0.68;
}

@keyframes openingBaseFill {
  0%, 2% { transform: scaleY(0); }
  76%, 100% { transform: scaleY(1); }
}

@keyframes openingBackDrop {
  0%, 3% { transform: translate3d(0, -860px, 0) scale(0.65); }
  54% { transform: translate3d(-24px, 80px, 0) scale(1.2, 1.05); }
  100% { transform: translate3d(60px, -520px, 0) scale(1.16, 0.75); }
}

@keyframes openingMidDrop {
  0%, 3% { transform: translate3d(0, -780px, 0) scale(0.55); }
  48% { transform: translate3d(-40px, 110px, 0) scale(1.08, 1.1); }
  100% { transform: translate3d(55px, -650px, 0) scale(1.12, 0.86); }
}

@keyframes openingLightDrop {
  0%, 3% { transform: translate3d(0, -760px, 0) scale(0.6); }
  46% { transform: translate3d(-25px, 100px, 0) scale(1.08, 1.12); }
  100% { transform: translate3d(45px, -640px, 0) scale(1.05, 0.86); }
}

@keyframes openingDripDrop {
  0%, 4% { opacity: 0; transform: translate3d(0, -760px, 0) scaleY(0.52); }
  20% { opacity: 0.96; }
  46% { transform: translate3d(-25px, 100px, 0) scaleY(1.15); }
  100% { opacity: 0; transform: translate3d(45px, -420px, 0) scaleY(0.86); }
}

@keyframes openingFirstDrops {
  0% { opacity: 0; transform: translate3d(0, -210px, 0) scale(0.55); }
  24% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(0, 300px, 0) scale(1.12); }
}

@keyframes openingFoamBurst {
  0% { opacity: 0; transform: translate3d(0, -390px, 0) scale(0.5); }
  35% { opacity: 0.98; }
  100% { opacity: 0; transform: translate3d(0, 55px, 0) scale(1.08); }
}

@keyframes openingRingBurst {
  0% { opacity: 0; transform: translate3d(0, -160px, 0) scale(0.48); }
  28% { opacity: 0.92; }
  100% { opacity: 0.7; transform: translate3d(10px, -8px, 0) scale(1.1); }
}

@keyframes openingBubbleScatter {
  0% { opacity: 0; transform: translate3d(0, 90px, 0) scale(0.55); }
  35% { opacity: 0.94; }
  100% { opacity: 0.62; transform: translate3d(-8px, -45px, 0) scale(1.12); }
}

@keyframes openingSurfaceSettle {
  from { opacity: 0; transform: translate3d(-30px, -25px, 0); }
  to { opacity: 1; transform: translate3d(14px, 0, 0); }
}

@keyframes openingEffectExit {
  0%, 76% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

/* The entry and resume share one continuously animated background. */
.opening-water {
  pointer-events: auto;
  background: transparent;
  animation: none;
}

.opening-water .opening-water__effect {
  display: block;
  background: transparent;
  animation: none;
  opacity: 1;
}

.opening-water__effect > :not(defs):not(.opening-water__flow) {
  display: none;
}

.opening-water__base,
.opening-water__first-drops {
  display: none;
}

.opening-water__flow {
  transform-box: view-box;
  transform-origin: 50% 0;
  will-change: transform;
  animation: none;
}

.opening-water__flow > g {
  animation: none;
  will-change: auto;
}

.opening-water__flow > .opening-leading-bubbles {
  animation: openingBubbleLead 1095ms var(--bubble-delay) cubic-bezier(0.32, 0.06, 0.62, 0.55) both;
  transform-box: view-box;
  transform-origin: 50% 0;
}

@keyframes openingBubbleLead {
  0% { transform: translate3d(0, -1150px, 0); }
  100% { transform: translate3d(0, 4100px, 0); }
}

.is-building-menu .shards span {
  animation-play-state: paused;
}

.opening-water__spray {
  fill: #d8ffff;
  stroke: rgba(255, 255, 255, 0.68);
  stroke-width: 2;
  opacity: 0.86;
}

.opening-water__spray > * {
  transform-box: fill-box;
  transform-origin: center;
  animation: openingSprayPop 780ms cubic-bezier(0.2, 0.8, 0.25, 1) both;
}

.opening-water__spray > :nth-child(3n) { animation-delay: 80ms; }
.opening-water__spray > :nth-child(3n + 1) { animation-delay: 150ms; }

.opening-water__surface-shine {
  display: block;
  animation: openingSurfaceGlint 1500ms cubic-bezier(0.2, 0.8, 0.25, 1) 680ms both;
}

@keyframes openingSprayPop {
  0% { opacity: 0; transform: scale(0.2) translateY(-14px); }
  52% { opacity: 1; transform: scale(1.08) translateY(0); }
  100% { opacity: 0.82; transform: scale(0.88) translateY(18px); }
}

@keyframes openingSurfaceGlint {
  0% { opacity: 0; transform: translateY(-48px) scale(0.92); }
  55% { opacity: 0.74; }
  100% { opacity: 0.34; transform: translateY(160px) scale(1); }
}

.opening-water__rings {
  opacity: 0.85;
}

/* Reveal content independently without resetting the background animation. */
.is-building-menu .stage-scale > :where(:not(.classroom):not(.water-layer):not(.hair-water-bridge):not(.menu-stack):not(.wallet):not(.quick-panel)) {
  visibility: visible;
  animation: openingSecondaryReveal 560ms 2989ms cubic-bezier(0.16, 0.72, 0.22, 1) both;
}

.is-building-menu .stage-scale .menu-stack,
.is-building-menu .stage-scale .quick-panel,
.is-building-menu .stage-scale .wallet {
  visibility: visible;
}

.is-building-menu .stage-scale .menu-stack { animation: none; }

.is-building-menu .stage-scale .hero-figure { animation-delay: 2509ms; }
.is-building-menu .stage-scale .slab-left { animation-delay: 2629ms; }
.is-building-menu .stage-scale .slab-right { animation-delay: 2773ms; }
.is-building-menu .stage-scale .side-word { animation-delay: 2877ms; }
.is-building-menu .stage-scale .date-card { animation-delay: 3085ms; }
.is-building-menu .stage-scale .prompt { animation-delay: 3197ms; }

@keyframes openingSecondaryReveal {
  0% { visibility: hidden; opacity: 0; translate: 0 -80px; }
  80% { visibility: visible; translate: 0 2px; }
  100% { visibility: visible; translate: 0 0; }
}

.is-building-menu .mobile-controls {
  visibility: visible;
  opacity: 1;
  pointer-events: none;
  animation: openingSecondaryReveal 560ms 3197ms cubic-bezier(0.16, 0.72, 0.22, 1) both;
}

@keyframes openingWaterFall {
  0% { transform: translate3d(0, -920px, 0); }
  100% { transform: translate3d(0, 1300px, 0); }
}

.is-building-menu .menu-item {
  opacity: 1;
  animation: menuRowDrop 544ms cubic-bezier(0.16, 0.65, 0.22, 1) both;
  animation-delay: calc(1165ms + var(--water-order, 0) * 100ms);
}

.is-building-menu .menu-item:nth-child(1) { --water-order: 0; }
.is-building-menu .menu-item:nth-child(2) { --water-order: 1; }
.is-building-menu .menu-item:nth-child(3) { --water-order: 2; }
.is-building-menu .menu-item:nth-child(4) { --water-order: 3; }
.is-building-menu .menu-item:nth-child(5) { --water-order: 4; }
.is-building-menu .menu-item:nth-child(6) { --water-order: 5; }
.is-building-menu .menu-item:nth-child(7) { --water-order: 6; }
.is-building-menu .menu-item:nth-child(8) { --water-order: 7; }
.is-building-menu .menu-item:nth-child(9) { --water-order: 8; }

.is-building-menu .wallet {
  opacity: 1;
  animation: menuWaterSettle 560ms 2925ms cubic-bezier(0.18, 0.65, 0.22, 1) both;
}

.is-building-menu .quick-panel {
  opacity: 0;
  animation: menuWaterSettle 560ms 2749ms cubic-bezier(0.18, 0.65, 0.22, 1) both;
}

/* Retire completed entrance animations instead of keeping their fill layers alive. */
.is-building-menu .stage-scale > .opening-landed,
.is-building-menu .menu-item.opening-landed,
.is-building-menu .mobile-controls.opening-landed,
.is-building-menu .mobile-volume.opening-landed {
  animation: none !important;
  visibility: visible !important;
  translate: 0 0 !important;
}

.is-building-menu .menu-item.opening-landed,
.is-building-menu .wallet.opening-landed {
  opacity: 1 !important;
}

@keyframes menuRowDrop {
  0% { opacity: 0; translate: 0 -10px; }
  80%, 100% { opacity: 1; translate: 0 0; }
}

@keyframes menuWaterSettle {
  0% { opacity: 0; translate: 0 -44px; }
  80% { opacity: 1; translate: 0 2px; }
  100% { opacity: 1; translate: 0 0; }
}

@keyframes openingMenuReveal {
  0% {
    visibility: visible;
    opacity: 1;
    clip-path: polygon(0 -20%, 12% -23%, 26% -18%, 39% -24%, 53% -20%, 66% -25%, 81% -18%, 93% -22%, 100% -20%, 100% 100%, 0 100%);
  }
  32% {
    visibility: visible;
    opacity: 1;
    clip-path: polygon(0 30%, 12% 27%, 26% 32%, 39% 26%, 53% 30%, 66% 25%, 81% 32%, 93% 28%, 100% 30%, 100% 100%, 0 100%);
  }
  68% {
    visibility: visible;
    opacity: 1;
    clip-path: polygon(0 90%, 12% 87%, 26% 92%, 39% 86%, 53% 90%, 66% 85%, 81% 92%, 93% 88%, 100% 90%, 100% 160%, 0 160%);
  }
  99.9% {
    visibility: visible;
    opacity: 1;
    clip-path: polygon(0 142%, 12% 139%, 26% 144%, 39% 138%, 53% 142%, 66% 137%, 81% 144%, 93% 140%, 100% 142%, 100% 160%, 0 160%);
  }
  100% {
    visibility: hidden;
    opacity: 1;
    clip-path: polygon(0 142%, 12% 139%, 26% 144%, 39% 138%, 53% 142%, 66% 137%, 81% 144%, 93% 140%, 100% 142%, 100% 160%, 0 160%);
  }
}

.viewport {
  position: relative;
  width: 100vw;
  height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(circle at 46% 38%, rgba(0, 114, 255, 0.32), transparent 28%),
    linear-gradient(135deg, #03040e 0%, #08113a 48%, #00020b 100%);
}

.scene {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3840px;
  height: 2160px;
  overflow: hidden;
  overflow: clip;
  transform: translate(-50%, -50%) scale(var(--scale));
  transform-origin: center;
  isolation: isolate;
  contain: layout paint size;
  backface-visibility: hidden;
  will-change: transform;
  background:
    linear-gradient(180deg, #1aeee9 0%, #19c8f3 15%, #098af0 34%, #064be5 57%, #0720df 78%, #1000cf 100%);
}

.stage-scale {
  position: absolute;
  left: 0;
  top: 0;
  width: 1280px;
  height: 720px;
  transform: scale(3);
  transform-origin: 0 0;
}

.scene::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -6;
  opacity: 0.42;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0 1px, transparent 1px 124px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0 1px, transparent 1px 92px);
  mix-blend-mode: screen;
}

.classroom {
  position: absolute;
  inset: 0;
  z-index: -5;
  opacity: 0.32;
  mask-image: linear-gradient(#000 0%, #000 45%, transparent 90%);
  filter: saturate(120%) contrast(115%);
  background:
    linear-gradient(90deg, transparent 0 7%, rgba(1, 18, 88, 0.58) 7% 7.7%, transparent 7.7% 18%, rgba(2, 20, 94, 0.5) 18% 18.7%, transparent 18.7% 52%, rgba(0, 16, 83, 0.5) 52% 52.8%, transparent 52.8%),
    linear-gradient(180deg, rgba(203, 255, 255, 0.18) 0 8%, transparent 8% 60%, rgba(0, 9, 73, 0.3) 60% 100%);
}

.window {
  position: absolute;
  top: 50px;
  width: 236px;
  height: 272px;
  border: 7px solid rgba(2, 20, 86, 0.42);
  border-left-width: 11px;
  background:
    linear-gradient(90deg, transparent 47%, rgba(1, 24, 92, 0.46) 47% 51%, transparent 51%),
    linear-gradient(180deg, transparent 46%, rgba(1, 24, 92, 0.46) 46% 50%, transparent 50%),
    rgba(111, 232, 255, 0.12);
}

.window-a {
  left: 520px;
}

.window-b {
  left: 808px;
}

.desk {
  position: absolute;
  width: 154px;
  height: 62px;
  transform: skewX(-13deg);
  border-top: 7px solid rgba(0, 9, 80, 0.5);
  background: rgba(0, 27, 123, 0.32);
  box-shadow: 10px 31px 0 rgba(0, 11, 70, 0.18);
}

.desk-a {
  left: 610px;
  top: 424px;
}

.desk-b {
  left: 817px;
  top: 430px;
}

.desk-c {
  left: 1003px;
  top: 464px;
}

.student {
  position: absolute;
  width: 32px;
  height: 88px;
  border-radius: 16px 16px 7px 7px;
  background: rgba(4, 15, 83, 0.54);
  box-shadow: 0 -24px 0 -7px rgba(4, 15, 83, 0.62);
}

.student-a {
  left: 681px;
  top: 281px;
}

.student-b {
  left: 909px;
  top: 286px;
}

.student-c {
  left: 1021px;
  top: 286px;
}

.water-layer {
  position: absolute;
  inset: 0;
  z-index: -4;
  opacity: 1;
  pointer-events: none;
  background: linear-gradient(180deg, #66fff32b, transparent 30%, #1000cf55 100%);
}

.water-layer::before,
.water-layer::after {
  content: "";
  position: absolute;
  inset: -25px -90px auto;
  height: 180px;
  background:
    radial-gradient(ellipse at 22% 40%, #b0fff9a6 0 11%, transparent 14%) 0 0 / 240px 52px,
    radial-gradient(ellipse at 63% 50%, #baffff80 0 16%, transparent 20%) 60px 18px / 310px 65px,
    radial-gradient(ellipse at 45% 40%, #39fff3a6 0 24%, transparent 29%) 25px 8px / 190px 42px;
  mask-image: linear-gradient(#000, #0009 48%, transparent);
  transform-origin: 50% 0;
  will-change: transform, opacity;
  animation: surfaceDrift 4.8s ease-in-out infinite alternate;
}

.water-layer::after {
  height: 145px;
  background:
    radial-gradient(ellipse at 28% 46%, #d3fffda6 0 8%, transparent 13%) 35px 12px / 270px 47px,
    radial-gradient(ellipse at 74% 28%, #80ffed80 0 17%, transparent 24%) 90px 5px / 340px 61px;
  animation: surfaceCounterflow 3.6s ease-in-out infinite alternate;
}

@keyframes surfaceDrift {
  0% { transform: translate3d(-36px, -5px, 0) skewX(-24deg) scaleY(0.88); opacity: 0.65; }
  50% { opacity: 1; }
  100% { transform: translate3d(36px, 7px, 0) skewX(-12deg) scaleY(1.12); opacity: 0.8; }
}

@keyframes surfaceCounterflow {
  0% { transform: translate3d(42px, 10px, 0) skewX(16deg) scaleY(1.12); opacity: 0.3; }
  55% { opacity: 0.72; }
  100% { transform: translate3d(-42px, -2px, 0) skewX(-8deg) scaleY(0.84); opacity: 0.42; }
}

.white-slab {
  position: absolute;
  pointer-events: none;
  background: white;
  z-index: -1;
}

.slab-left {
  left: 0;
  top: 0;
  width: 395px;
  height: 720px;
  clip-path: polygon(0 0, 100% 0, 86% 22%, 75% 44%, 63% 65%, 43% 100%, 0 100%);
}

.slab-right {
  display: none;
  right: -260px;
  bottom: -154px;
  width: 610px;
  height: 520px;
  clip-path: polygon(40% 0, 100% 0, 100% 100%, 0 100%, 20% 55%);
  opacity: 0.98;
}

.side-word {
  position: absolute;
  left: -122px;
  top: 96px;
  z-index: 0;
  color: #050505;
  font: 900 154px/0.74 Impact, "Arial Black", sans-serif;
  transform: rotate(90deg) skewX(-9deg);
  transition: opacity 260ms ease;
}

.scene.detail-open .side-word {
  opacity: 0.12;
}

.mega-word {
  position: absolute;
  left: 404px;
  bottom: -34px;
  z-index: 0;
  color: rgba(0, 0, 0, 0.18);
  font: 900 178px/0.8 Impact, "Arial Black", sans-serif;
  transform: skewX(-11deg);
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform 340ms cubic-bezier(0.2, 1, 0.15, 1), opacity 260ms ease;
}

.scene.detail-open .mega-word {
  opacity: 0.05;
  transform: translateX(-150px) skewX(-11deg);
}

.wallet {
  position: absolute;
  left: 112px;
  top: 38px;
  z-index: 12;
  width: 171px;
  height: 66px;
  padding: 9px 12px 8px;
  border: 2px solid #202020;
  background: rgba(255, 255, 255, 0.92);
  color: #050505;
  transform: skewX(-1deg);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.18);
}

.wallet strong {
  display: block;
  font: 900 25px/1 Impact, "Arial Black", sans-serif;
}

.wallet span {
  display: block;
  margin-top: 5px;
  font-weight: 900;
  font-style: italic;
  color: #050505;
}

.date-card {
  position: absolute;
  right: 36px;
  top: 9px;
  z-index: 14;
  width: 166px;
  min-height: 48px;
  padding: 5px 10px 6px 16px;
  color: #050505;
  background: white;
  clip-path: polygon(5% 0, 100% 0, 92% 100%, 0 100%);
  transform: skewX(-9deg);
  box-shadow: -6px 5px 0 rgba(0, 0, 0, 0.84);
}

.date-card b,
.date-card span,
.date-card em {
  display: inline-block;
  transform: skewX(9deg);
}

.date-card b {
  font: 900 25px/1 Impact, "Arial Black", sans-serif;
}

.date-card span {
  margin-left: 7px;
  color: white;
  background: #0436d9;
  padding: 2px 8px 3px;
  font: 900 13px/1 Arial, sans-serif;
}

.date-card em {
  display: block;
  margin-top: 3px;
  color: #0436d9;
  font-size: 12px;
  font-weight: 900;
  font-style: italic;
}

.music-toggle {
  position: absolute;
  right: 235px;
  top: 22px;
  z-index: 31;
  width: 128px;
  height: 34px;
  border: 0;
  color: #050505;
  background: white;
  clip-path: polygon(10% 0, 100% 0, 91% 100%, 0 100%);
  box-shadow: -5px 5px 0 rgba(0, 0, 0, 0.84);
  font: italic 900 15px/1 Impact, "Arial Black", sans-serif;
  cursor: pointer;
  transform: skewX(-10deg);
  transition:
    opacity 160ms ease,
    color 130ms ease,
    background 130ms ease,
    transform 150ms cubic-bezier(0.16, 1, 0.2, 1),
    filter 150ms ease;
}

.music-toggle::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 13px;
  bottom: 5px;
  height: 4px;
  background: linear-gradient(90deg, #00edff, #fff200);
  transform: skewX(10deg) scaleX(0.76);
  transform-origin: left center;
  transition: transform 180ms ease;
}

.music-toggle[aria-pressed="false"] {
  color: white;
  background: #06135b;
}

.music-toggle[aria-pressed="false"]::after {
  transform: skewX(10deg) scaleX(0.18);
  background: #5af3ff;
}

.music-toggle:hover,
.music-toggle:focus-visible {
  filter: brightness(1.1) contrast(1.08);
}

.music-toggle:active {
  transform: skewX(-10deg) translateY(2px) scale(0.96);
}

.music-volume {
  position: absolute;
  right: 377px;
  top: 22px;
  z-index: 31;
  display: flex;
  align-items: center;
  gap: 9px;
  width: 236px;
  height: 34px;
  padding: 0 18px;
  isolation: isolate;
  color: #06135b;
  background: transparent;
  font: italic 900 13px/1 Impact, "Arial Black", sans-serif;
  text-transform: uppercase;
}
.music-volume::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #fff;
  clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%);
  transition: background 150ms ease;
}
.music-volume.is-adjusting::before { background: #fff200; }
.music-volume > span { flex: 0 0 auto; }
.music-volume input { --volume-fill: 5%; }
.music-volume-input {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
}
.music-volume-input {
  min-width: 0;
  width: 100%;
  height: 32px;
  margin: 0;
  cursor: pointer;
  touch-action: pan-y;
}
.music-volume-input::-webkit-slider-runnable-track {
  height: 6px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(90deg, #00bfcf var(--volume-fill), #06135b var(--volume-fill));
}
.music-volume-input::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 12px;
  height: 20px;
  margin-top: -7px;
  border: 2px solid #06135b;
  border-radius: 0;
  background: #5af3ff;
  transform: skewX(-12deg);
  box-shadow: 2px 2px 0 #06135b;
}
.music-volume-input::-moz-range-track {
  height: 6px;
  border: 0;
  border-radius: 0;
  background: #06135b;
}
.music-volume-input::-moz-range-progress { height: 6px; background: #00bfcf; }
.music-volume-input::-moz-range-thumb {
  width: 8px;
  height: 16px;
  border: 2px solid #06135b;
  border-radius: 0;
  background: #5af3ff;
  transform: skewX(-12deg);
  box-shadow: 2px 2px 0 #06135b;
}
.music-volume-input:focus-visible { outline: 1px dashed #06135b; outline-offset: 2px; }
.music-volume output { flex: 0 0 34px; text-align: right; font-size: 17px; font-variant-numeric: tabular-nums; }
.mobile-volume { display: none; }
.is-awaiting-entry .music-volume,
.is-building-menu .mobile-volume { visibility: hidden; pointer-events: none; }
.is-building-menu .mobile-volume {
  animation: openingSecondaryReveal 560ms 3197ms cubic-bezier(0.16, 0.72, 0.22, 1) both;
}
.scene.detail-open .music-volume { visibility: hidden; pointer-events: none; }
.phone-portrait .stage-scale .music-volume { display: none; }
.phone-portrait .mobile-volume {
  display: flex;
  top: auto;
  bottom: max(12px, env(safe-area-inset-bottom));
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: min(280px, calc(100% - 32px));
  height: 44px;
}

.music-select {
  position: absolute;
  right: 264px;
  top: 72px;
  z-index: 30;
  display: flex;
  gap: 8px;
  transform: skewX(-10deg);
  transition: opacity 160ms ease;
}

.music-track {
  position: relative;
  width: 142px;
  height: 28px;
  border: 0;
  color: #06135b;
  background: rgba(255, 255, 255, 0.92);
  clip-path: polygon(8% 0, 100% 0, 91% 100%, 0 100%);
  box-shadow: -4px 4px 0 rgba(0, 0, 0, 0.78);
  font: italic 900 9px/1 Impact, "Arial Black", sans-serif;
  text-transform: uppercase;
  cursor: pointer;
  letter-spacing: 0;
  transition: color 130ms ease, background 130ms ease, transform 130ms ease;
}

.music-track::before {
  content: "";
  position: absolute;
  left: 12px;
  right: 15px;
  bottom: 4px;
  height: 3px;
  background: #06135b;
  transform: scaleX(0.22);
  transform-origin: left center;
  transition: transform 170ms cubic-bezier(0.2, 1, 0.2, 1), background 130ms ease;
}

.music-track[aria-pressed="true"] {
  color: #050505;
  background: #fff200;
  transform: translateY(-2px);
}

.music-track[aria-pressed="true"]::before {
  background: linear-gradient(90deg, #00edff, #ffffff);
  transform: scaleX(0.82);
}

.music-track:hover,
.music-track:focus-visible {
  filter: brightness(1.12) contrast(1.08);
}

.music-track:active {
  transform: translateY(1px) scale(0.96);
}

.scene.detail-open .music-toggle {
  right: 36px;
  top: 72px;
  opacity: 1;
  pointer-events: auto;
}

.scene.detail-open .music-select {
  opacity: 0;
  pointer-events: none;
}

.hero-figure {
  position: absolute;
  left: -48px;
  top: -82px;
  z-index: 3;
  width: 470px;
  height: 790px;
  transform: rotate(180deg);
  transform-origin: 48% 49%;
  filter: drop-shadow(7px -3px 0 rgba(0, 28, 168, 0.56));
  transition: transform 520ms cubic-bezier(0.16, 1, 0.2, 1), left 430ms ease, top 430ms ease, opacity 280ms ease;
}

.scene.menu-shift .hero-figure {
  transform: rotate(180deg) translateY(-14px) translateX(9px);
}

.scene.detail-open .hero-figure {
  left: 640px;
  top: -96px;
  opacity: 0.72;
  transform: rotate(180deg) scale(1.06);
}

.hero-figure svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.coat,
.face,
.hand,
.neck {
  fill: url("#coatBlue");
  stroke: #0583ff;
  stroke-width: 3;
}

.coat-line,
.shirt-line,
.finger,
.mouth,
.headphone-band,
.cord {
  fill: none;
  stroke: #030713;
  stroke-width: 5;
  stroke-linecap: round;
}

.shirt-line,
.finger {
  stroke: #06a7ff;
  stroke-width: 3;
}

.tie {
  fill: #03134e;
}

.tie-line {
  fill: none;
  stroke: #0cf4ff;
  stroke-width: 5;
  stroke-linecap: round;
}

.hair {
  fill: url("#hairBlue");
  stroke: #03124f;
  stroke-width: 3;
}

.hair-back {
  opacity: 0.95;
}

.shadow-face {
  fill: rgba(3, 20, 84, 0.2);
}

.eye {
  fill: white;
  stroke: #020204;
  stroke-width: 3;
}

.iris {
  fill: #25f4ff;
  stroke: #020204;
  stroke-width: 2;
}

.headphone {
  fill: white;
  stroke: #041258;
  stroke-width: 5;
}

.headphone-core {
  fill: #dffcff;
  stroke: #12b8ff;
  stroke-width: 3;
}

@font-face {
  font-family: 'Resume Menu';
  src: url('assets/fonts/FOT-Rodin-Pro-DB.otf') format('opentype');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

.menu-stack {
  position: absolute;
  left: 492px;
  top: 188px;
  z-index: 10;
  width: 420px;
  transform: rotate(-7deg) skewX(-4deg);
  transition: opacity 260ms ease, transform 430ms cubic-bezier(0.16, 1, 0.18, 1);
}

.scene.detail-open .menu-stack {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-96px) rotate(-7deg) skewX(-4deg) scale(0.9);
}

.menu-item {
  --word-angle: 0deg;
  --word-offset: 0px;
  position: relative;
  display: block;
  width: 100%;
  height: 41px;
  margin: 0;
  padding: 0;
  border: 0;
  color: #a2f9ff;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transform-origin: 28% 50%;
  transition: transform 260ms cubic-bezier(0.16, 1.16, 0.18, 1), filter 180ms ease;
}

.menu-item:nth-child(2) { --word-offset: 28px; --word-angle: -3deg; color: #12d5f5; }
.menu-item:nth-child(3) { --word-offset: 9px; --word-angle: -1deg; }
.menu-item:nth-child(4) { --word-offset: -18px; --word-angle: -3deg; }
.menu-item:nth-child(5) { --word-offset: 17px; --word-angle: 3deg; color: #12d5f5; }
.menu-item:nth-child(6) { --word-offset: -8px; --word-angle: -2deg; }
.menu-item:nth-child(7) { --word-offset: 9px; --word-angle: 1deg; }
.menu-item:nth-child(8) { --word-offset: -15px; --word-angle: 3deg; }
.menu-item:nth-child(9) { --word-offset: 24px; --word-angle: 10deg; color: #12d5f5; }

.menu-item:focus-visible {
  outline: 3px solid white;
  outline-offset: 5px;
}

.menu-item::before {
  display: none;
  content: "";
  position: absolute;
  left: -43px;
  top: 4px;
  width: 410px;
  height: 43px;
  background: white;
  clip-path: polygon(0 66%, 100% 0, 88% 100%, 5% 100%);
  transform: scaleX(0.08) translateX(-80px);
  transform-origin: 0 50%;
  opacity: 0;
  transition: transform 300ms cubic-bezier(0.12, 1.18, 0.18, 1), opacity 180ms ease;
}

.menu-item .menu-shadow,
.menu-item .menu-label {
  position: absolute;
  left: var(--word-offset);
  top: 0;
  font: italic 600 38px/1 'Resume Menu', "Arial Black", Arial, sans-serif;
  -webkit-text-stroke: 0.075em currentColor;
  paint-order: stroke fill;
  scale: 1 1.08;
  rotate: var(--word-angle);
  transform-origin: left center;
  text-transform: uppercase;
  white-space: nowrap;
  letter-spacing: 0;
  transition: color 170ms ease, transform 300ms cubic-bezier(0.12, 1.18, 0.18, 1), opacity 170ms ease;
}

.menu-item .menu-shadow {
  color: #001b7b;
  opacity: 0.12;
  transform: translate(2px, 3px);
}

.menu-item:hover {
  transform: translateX(8px) scale(1.03);
}

.menu-item.active {
  z-index: 5;
  transform: translateX(-14px) scale(1.13);
}

.menu-item.active::before {
  opacity: 1;
  transform: scaleX(1) translateX(0);
}

.menu-item.active .menu-label {
  --selection-cut: polygon(0 100%, 100% 0, 91% 100%);
  color: #030303;
  padding: 0 14px;
  width: max-content;
  isolation: isolate;
  transform: translate(18px, -1px);
  text-shadow: none;
}

/* The white shape and red glyphs share one box and clipping boundary. */
.menu-item.active .menu-label::before,
.menu-item.active .menu-label::after {
  position: absolute;
  inset: 0;
  clip-path: var(--selection-cut);
  pointer-events: none;
}

.menu-item.active .menu-label::before {
  content: '';
  z-index: -1;
  background: #fff;
}

.menu-item.active .menu-label::after {
  content: attr(data-word);
  color: #fa131e;
  padding: 0 14px;
}

.scene.selection-change .menu-item.active .menu-label {
  animation: activePunch 390ms cubic-bezier(0.12, 1.28, 0.18, 1);
}

.scene.selection-change .menu-item.active::before {
  animation: activeBlade 390ms cubic-bezier(0.12, 1.22, 0.18, 1);
}

.menu-item.active .menu-shadow {
  color: #030303;
  opacity: 0;
  transform: translate(12px, 4px);
}

@keyframes activePunch {
  0% {
    transform: translate(-14px, -1px) scaleX(0.82);
  }
  42% {
    transform: translate(25px, -1px) scaleX(1.08);
  }
  68% {
    transform: translate(14px, -1px) scaleX(0.98);
  }
  100% {
    transform: translate(18px, -1px) scaleX(1);
  }
}

@keyframes activeBlade {
  0% {
    transform: scaleX(0.18) translateX(-140px);
    opacity: 0;
  }
  42% {
    transform: scaleX(1.08) translateX(8px);
    opacity: 1;
  }
  70% {
    transform: scaleX(0.96) translateX(-4px);
    opacity: 1;
  }
  100% {
    transform: scaleX(1) translateX(0);
    opacity: 1;
  }
}

@keyframes detailSnap {
  0% {
    opacity: 0;
    transform: translateX(-58px) skewX(-12deg) scaleX(0.9);
  }
  46% {
    opacity: 1;
    transform: translateX(13px) skewX(-12deg) scaleX(1.035);
  }
  72% {
    opacity: 1;
    transform: translateX(-4px) skewX(-12deg) scaleX(0.992);
  }
  100% {
    opacity: 1;
    transform: translateX(0) skewX(-12deg) scaleX(1);
  }
}

@keyframes tabButtonGlint {
  0% {
    opacity: 0;
    transform: translateX(-120%);
  }
  34% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(120%);
  }
}

@keyframes upperTabSwipe {
  0% {
    opacity: 0;
    transform: translate3d(-58px, -50%, 0) skewX(-8deg) scaleX(0.28);
  }
  38% {
    opacity: 1;
    transform: translate3d(12px, -50%, 0) skewX(-8deg) scaleX(1.06);
  }
  68% {
    opacity: 0.92;
    transform: translate3d(4px, -50%, 0) skewX(-8deg) scaleX(0.96);
  }
  100% {
    opacity: 0;
    transform: translate3d(62px, -50%, 0) skewX(-8deg) scaleX(0.42);
  }
}

@keyframes upperTabSwipePrev {
  0% {
    opacity: 0;
    transform: translate3d(58px, -50%, 0) skewX(-8deg) scaleX(0.28);
  }
  38% {
    opacity: 1;
    transform: translate3d(-12px, -50%, 0) skewX(-8deg) scaleX(1.06);
  }
  68% {
    opacity: 0.92;
    transform: translate3d(-4px, -50%, 0) skewX(-8deg) scaleX(0.96);
  }
  100% {
    opacity: 0;
    transform: translate3d(-62px, -50%, 0) skewX(-8deg) scaleX(0.42);
  }
}

@keyframes upperContentSwap {
  0% {
    opacity: 0.72;
    transform: translate3d(0, 0, 0) skewX(0deg);
    filter: saturate(1);
  }
  33% {
    opacity: 0;
    transform: translate3d(-38px, 0, 0) skewX(-4deg);
    filter: saturate(1.22);
  }
  34% {
    opacity: 0;
    transform: translate3d(44px, 0, 0) skewX(4deg);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) skewX(0deg);
    filter: saturate(1);
  }
}

@keyframes upperContentSwapPrev {
  0% {
    opacity: 0.72;
    transform: translate3d(0, 0, 0) skewX(0deg);
    filter: saturate(1);
  }
  33% {
    opacity: 0;
    transform: translate3d(38px, 0, 0) skewX(4deg);
    filter: saturate(1.22);
  }
  34% {
    opacity: 0;
    transform: translate3d(-44px, 0, 0) skewX(-4deg);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) skewX(0deg);
    filter: saturate(1);
  }
}

@keyframes upperBadgeSwap {
  0% {
    opacity: 0.72;
    transform: rotate(-8deg) skewX(-6deg) translate3d(0, 0, 0);
    filter: saturate(1);
  }
  33% {
    opacity: 0;
    transform: rotate(-8deg) skewX(-6deg) translate3d(-38px, 0, 0);
    filter: saturate(1.22);
  }
  34% {
    opacity: 0;
    transform: rotate(-8deg) skewX(-6deg) translate3d(44px, 0, 0);
  }
  100% {
    opacity: 1;
    transform: rotate(-8deg) skewX(-6deg) translate3d(0, 0, 0);
    filter: saturate(1);
  }
}

@keyframes upperBadgeSwapPrev {
  0% {
    opacity: 0.72;
    transform: rotate(-8deg) skewX(-6deg) translate3d(0, 0, 0);
    filter: saturate(1);
  }
  33% {
    opacity: 0;
    transform: rotate(-8deg) skewX(-6deg) translate3d(38px, 0, 0);
    filter: saturate(1.22);
  }
  34% {
    opacity: 0;
    transform: rotate(-8deg) skewX(-6deg) translate3d(-44px, 0, 0);
  }
  100% {
    opacity: 1;
    transform: rotate(-8deg) skewX(-6deg) translate3d(0, 0, 0);
    filter: saturate(1);
  }
}

@keyframes railReveal {
  0% {
    opacity: 0;
    transform: translateX(-76px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes sheetReveal {
  0% {
    opacity: 0;
    transform: translateX(-54px) skewX(-2deg) scaleX(0.96);
  }
  52% {
    opacity: 1;
    transform: translateX(9px) skewX(-2deg) scaleX(1.02);
  }
  100% {
    opacity: 1;
    transform: translateX(0) skewX(0) scaleX(1);
  }
}

@keyframes artReveal {
  0% {
    opacity: 0;
    transform: translateX(42px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.quick-panel {
  position: absolute;
  right: 44px;
  top: 164px;
  z-index: 7;
  width: 422px;
  min-height: 255px;
  padding: 23px 58px 25px 34px;
  color: white;
  background: rgba(0, 15, 99, 0.68);
  clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
  border-left: 8px solid var(--accent);
  box-shadow: -18px 18px 0 rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: skewX(-7deg) translateX(120px);
  pointer-events: none;
  transition: transform 400ms cubic-bezier(0.16, 1, 0.18, 1), opacity 240ms ease, border-color 220ms ease;
}

.quick-panel > * {
  transform: skewX(7deg);
  transform-origin: left center;
}

.scene:not(.detail-open) .quick-panel {
  opacity: 1;
  transform: skewX(-7deg) translateX(0);
}

.scene.detail-open .quick-panel {
  opacity: 0;
  transform: skewX(-7deg) translateX(80px);
  pointer-events: none;
}

.quick-topline {
  display: inline-block;
  padding: 3px 12px 5px;
  color: #050505;
  background: var(--accent);
  font: italic 900 18px/1 Impact, "Arial Black", sans-serif;
  text-transform: uppercase;
}

.quick-panel h1 {
  margin: 9px 0 9px;
  max-width: 292px;
  color: white;
  font: italic 900 44px/0.85 Impact, "Arial Black", sans-serif;
  text-transform: uppercase;
  text-shadow: -5px 4px 0 #030303;
  letter-spacing: 0;
}

.quick-panel p {
  margin: 0;
  max-width: 270px;
  font-size: 19px;
  line-height: 1.12;
  font-weight: 800;
}

.quick-stats {
  display: grid;
  gap: 8px;
  margin-top: 17px;
}

.quick-stat {
  display: grid;
  grid-template-columns: 98px 1fr;
  gap: 10px;
  align-items: center;
  font-weight: 900;
  font-style: italic;
  color: #dffcff;
}

.quick-stat span {
  color: var(--accent);
  font-size: 17px;
}

.quick-stat i {
  position: relative;
  height: 7px;
  transform: skewX(-22deg);
  background: rgba(255, 255, 255, 0.16);
  overflow: hidden;
}

.quick-stat i::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--v);
  background: linear-gradient(90deg, var(--accent), #fff200);
}

.detail-screen {
  position: absolute;
  inset: 0;
  z-index: 8;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-66px);
  transition: opacity 260ms ease, transform 520ms cubic-bezier(0.16, 1, 0.18, 1);
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.scene.detail-open .detail-screen {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.detail-screen::before {
  content: "";
  position: absolute;
  left: 350px;
  top: -92px;
  width: 860px;
  height: 850px;
  background: white;
  clip-path: polygon(0 0, 100% 0, 82% 57%, 99% 100%, 19% 100%, 33% 46%);
  z-index: -1;
}

.detail-screen::after {
  content: "";
  position: absolute;
  right: -80px;
  top: -80px;
  width: 520px;
  height: 820px;
  background: rgba(0, 32, 137, 0.7);
  clip-path: polygon(27% 0, 100% 0, 100% 100%, 0 100%, 18% 36%);
  z-index: -2;
}

.detail-big {
  position: absolute;
  left: 360px;
  top: 19px;
  z-index: 0;
  color: rgba(0, 0, 0, 0.18);
  font: italic 900 124px/0.8 Impact, "Arial Black", sans-serif;
  text-transform: uppercase;
}

.detail-tabs {
  position: absolute;
  left: 394px;
  top: 18px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 650px;
  height: 36px;
  color: #050505;
  transform: skewX(-12deg);
}

.detail-tabs::before {
  content: "";
  position: absolute;
  left: -46px;
  right: -40px;
  top: 50%;
  z-index: -1;
  height: 48px;
  opacity: 0;
  background:
    linear-gradient(90deg, transparent 0 8%, rgba(255, 255, 255, 0.95) 8% 22%, var(--red) 22% 30%, rgba(3, 22, 155, 0.94) 30% 74%, rgba(255, 255, 255, 0.96) 74% 90%, transparent 90% 100%);
  clip-path: polygon(4% 0, 100% 0, 94% 100%, 0 100%);
  transform: translate3d(-52px, -50%, 0) skewX(-8deg) scaleX(0.34);
  transform-origin: left center;
  pointer-events: none;
}

.scene.detail-open.detail-enter .detail-tabs {
  animation: detailSnap 540ms 130ms cubic-bezier(0.16, 1.12, 0.18, 1) both;
}

.detail-tabs span,
.detail-tabs b {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 84px;
  height: 28px;
  padding: 0 14px;
  border-radius: 14px;
  color: white;
  background: #05125b;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  transform: skewX(12deg);
  overflow: hidden;
  box-shadow: -3px 4px 0 rgba(0, 0, 0, 0.34);
}

.detail-tabs span::after,
.detail-tabs b::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(112deg, transparent 0 42%, rgba(255, 255, 255, 0.62) 48% 54%, transparent 60% 100%);
  opacity: 0;
  transform: translateX(-120%);
  pointer-events: none;
}

.detail-tabs span:hover,
.detail-tabs b:hover,
.detail-tabs span:focus-visible,
.detail-tabs b:focus-visible {
  filter: brightness(1.18) contrast(1.08);
}

.detail-tabs span:hover::after,
.detail-tabs b:hover::after,
.detail-tabs .is-pressing::after {
  animation: tabButtonGlint 250ms cubic-bezier(0.18, 1, 0.2, 1) both;
}

.detail-tabs .is-pressing {
  transform: skewX(12deg) translateY(2px) scale(0.94);
  filter: brightness(1.24) contrast(1.12);
}

.detail-tabs b {
  min-width: 110px;
  color: #050505;
  background: white;
  border: 2px solid #05125b;
  box-shadow: -4px 5px 0 rgba(0, 0, 0, 0.48);
}

.detail-tabs .tab-arrow {
  min-width: 58px;
  color: #e60016;
  background: white;
  font: italic 900 25px/1 Impact, "Arial Black", sans-serif;
}

.scene.detail-tab-shift .detail-tabs::before {
  animation: upperTabSwipe 390ms cubic-bezier(0.16, 1, 0.2, 1) both;
}

.scene.detail-tab-shift .detail-tabs {
  animation: none !important;
}

.scene[data-tab-direction="prev"].detail-tab-shift .detail-tabs::before {
  animation-name: upperTabSwipePrev;
}

.party-rail {
  position: absolute;
  left: 0;
  top: 108px;
  z-index: 5;
  width: 420px;
}

.scene.detail-open.detail-enter .detail-screen:not(.page-persona):not(.page-stats):not(.page-social-link):not(.page-calendar):not(.page-system) .party-rail {
  animation: railReveal 440ms 90ms cubic-bezier(0.16, 1.15, 0.2, 1) both;
}

.rail-row {
  position: relative;
  height: 58px;
  margin-bottom: 3px;
  color: white;
  background: #050505;
  clip-path: polygon(0 0, 100% 0, 95% 100%, 0 100%);
  transform: translateX(-26px);
  transition: transform 260ms cubic-bezier(0.2, 1, 0.2, 1);
}

.rail-row.selected {
  color: #050505;
  background: white;
  transform: translateX(-12px);
}

.rail-row.selected::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 8px;
  height: 100%;
  background: var(--red);
}

.rail-row.selected b,
.rail-row.selected em {
  color: #050505;
}

.scene.detail-open .rail-row:nth-child(1) {
  transition-delay: 70ms;
}

.scene.detail-open .rail-row:nth-child(2) {
  transition-delay: 95ms;
}

.scene.detail-open .rail-row:nth-child(3) {
  transition-delay: 120ms;
}

.scene.detail-open .rail-row:nth-child(4) {
  transition-delay: 145ms;
}

.scene.detail-open .rail-row:nth-child(5) {
  transition-delay: 170ms;
}

.rail-row::before {
  content: "";
  position: absolute;
  left: 78px;
  top: 0;
  width: 78px;
  height: 100%;
  background: var(--accent);
  clip-path: polygon(0 0, 100% 0, 70% 100%, 0 100%);
}

.rail-row.magenta::before {
  background: #ff37d8;
}

.rail-row.cobalt::before {
  background: #1559ff;
}

.rail-row.red::before {
  background: #eb1136;
}

.rail-row.gold::before {
  background: #ffd400;
}

.rail-role {
  position: absolute;
  left: 17px;
  top: 9px;
  transform: rotate(-16deg);
  font: italic 900 28px/1 Impact, "Arial Black", sans-serif;
}

.rail-row b {
  position: absolute;
  left: 172px;
  top: 10px;
  font-size: 26px;
  line-height: 1;
}

.rail-row em {
  position: absolute;
  right: 23px;
  top: 15px;
  color: #e8e8e8;
  font-size: 17px;
  font-weight: 900;
}

.rail-bars {
  position: absolute;
  right: 18px;
  bottom: 10px;
  width: 108px;
  display: grid;
  gap: 4px;
}

.rail-bars i {
  position: relative;
  display: block;
  height: 4px;
  background: rgba(255, 255, 255, 0.18);
}

.rail-bars i::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--v);
  background: #52efff;
}

.rail-bars i:nth-child(2)::before {
  background: #e9de36;
}

.detail-sheet {
  position: absolute;
  left: 470px;
  top: 154px;
  z-index: 3;
  width: 560px;
  min-height: 374px;
  padding: 24px 34px 28px;
  color: #040404;
  background: rgba(255, 255, 255, 0.94);
  clip-path: polygon(4% 0, 100% 0, 94% 100%, 0 100%);
  border-top: 6px solid var(--red);
  box-shadow: -15px 16px 0 rgba(0, 0, 0, 0.22);
  overflow: hidden;
}

.scene.detail-open.detail-enter .detail-sheet {
  animation: sheetReveal 500ms 150ms cubic-bezier(0.16, 1.18, 0.2, 1) both;
}

.detail-kicker {
  display: inline-block;
  padding: 6px 17px 5px;
  color: white;
  background: #03135b;
  clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
  font: italic 900 18px/1 Impact, "Arial Black", sans-serif;
}

.detail-sheet h2 {
  margin: 12px 0 11px;
  font: italic 900 50px/0.92 Impact, "Arial Black", sans-serif;
  text-transform: uppercase;
  text-wrap: balance;
}

.detail-sheet p {
  margin: 0;
  font-size: 22px;
  line-height: 1.16;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.detail-list {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}

.detail-item {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 10px;
  align-items: center;
  min-height: 34px;
  font-weight: 900;
  font-size: 18px;
  line-height: 1.12;
}

.detail-item b {
  display: inline-block;
  padding: 6px 12px 6px;
  color: #5af3ff;
  background: #02125d;
  clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%);
  font-style: italic;
  white-space: nowrap;
}

.detail-item span {
  color: #03123d;
  overflow-wrap: anywhere;
}

.detail-item.selected b {
  color: #050505;
  background: #fff200;
}

.detail-item.selected span {
  color: var(--red);
}

.detail-badge {
  position: absolute;
  right: 80px;
  top: 190px;
  z-index: 2;
  width: 220px;
  height: 250px;
  color: #050505;
  transform: rotate(-8deg) skewX(-6deg);
}

.detail-badge span {
  display: block;
  font: italic 900 195px/0.78 Impact, "Arial Black", sans-serif;
  text-shadow: -10px 8px 0 white;
}

.detail-badge b {
  display: block;
  margin-top: -10px;
  padding: 10px 14px;
  color: var(--red);
  background: #050505;
  font: italic 900 42px/0.9 Impact, "Arial Black", sans-serif;
}

.page-art {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.scene.detail-open.detail-enter .page-art {
  animation: artReveal 560ms 180ms cubic-bezier(0.16, 1.08, 0.2, 1) both;
}

.scene.detail-tab-shift .detail-big,
.scene.detail-tab-shift .detail-sheet,
.scene.detail-tab-shift .page-art {
  animation: upperContentSwap 390ms cubic-bezier(0.16, 1, 0.2, 1) both !important;
}

.scene.detail-tab-shift .detail-badge {
  animation: upperBadgeSwap 390ms cubic-bezier(0.16, 1, 0.2, 1) both !important;
}

.scene[data-tab-direction="prev"].detail-tab-shift .detail-big,
.scene[data-tab-direction="prev"].detail-tab-shift .detail-sheet,
.scene[data-tab-direction="prev"].detail-tab-shift .page-art {
  animation-name: upperContentSwapPrev !important;
}

.scene[data-tab-direction="prev"].detail-tab-shift .detail-badge {
  animation-name: upperBadgeSwapPrev !important;
}

.detail-screen.page-skill .detail-sheet {
  left: 446px;
  top: 388px;
  width: 500px;
  min-height: 118px;
  padding: 18px 30px 18px;
  background: rgba(2, 18, 88, 0.88);
  color: white;
  border-top-color: var(--accent);
}

.detail-screen.page-skill .detail-badge {
  display: none;
}

.detail-screen.page-skill .detail-sheet h2,
.detail-screen.page-skill .detail-sheet p,
.detail-screen.page-skill .detail-item span {
  color: white;
}

.detail-screen.page-skill .detail-sheet h2 {
  margin: 8px 0 8px;
  font-size: 36px;
}

.detail-screen.page-skill .detail-sheet p {
  font-size: 16px;
  line-height: 1.12;
}

.detail-screen.page-skill .detail-list {
  display: none;
}

.skill-cost {
  position: absolute;
  right: 46px;
  top: 82px;
  width: 126px;
  text-align: center;
  color: #050505;
  transform: skewX(-8deg);
}

.skill-cost b {
  display: block;
  color: #050505;
  font: italic 900 32px/1 Impact, "Arial Black", sans-serif;
}

.skill-cost span,
.skill-cost em {
  display: inline-grid;
  place-items: center;
  min-width: 52px;
  height: 29px;
  margin: 4px 0;
  color: #fff200;
  background: #050505;
  font: 900 22px/1 Impact, "Arial Black", sans-serif;
}

.skill-cost em {
  min-width: 35px;
  color: #050505;
  background: #fff200;
}

.skill-list {
  position: absolute;
  right: 170px;
  top: 112px;
  z-index: 4;
  width: 430px;
  color: #68f6ff;
  transform: skewX(-9deg);
}

.skill-list strong {
  display: block;
  margin-bottom: 10px;
  color: white;
  font-size: 22px;
}

.skill-list ol,
.inventory-panel ol,
.request-board ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.skill-list li,
.inventory-panel li {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  padding: 8px 42px 8px 14px;
  background: rgba(0, 0, 0, 0.9);
  clip-path: polygon(5% 0, 100% 0, 94% 100%, 0 100%);
  font-size: 21px;
  font-weight: 900;
}

.skill-list li.selected,
.inventory-panel li.selected {
  color: #050505;
  background: white;
  border-top: 3px solid var(--red);
}

.inventory-panel {
  position: absolute;
  left: 475px;
  top: 105px;
  width: 520px;
  padding: 18px 24px 24px;
  color: white;
  background: rgba(0, 16, 88, 0.82);
  clip-path: polygon(5% 0, 100% 0, 94% 100%, 0 100%);
  transform: skewX(-7deg);
}

.inventory-panel b {
  display: block;
  margin-bottom: 12px;
  color: var(--accent);
  font: italic 900 46px/0.85 Impact, "Arial Black", sans-serif;
}

.inventory-panel li em {
  color: #fff200;
  font-style: normal;
}

.detail-screen.page-persona .party-rail,
.detail-screen.page-social-link .party-rail,
.detail-screen.page-calendar .party-rail,
.detail-screen.page-system .party-rail {
  opacity: 0;
}

.detail-screen.page-item .detail-sheet {
  left: 80px;
  top: 165px;
  width: 370px;
  min-height: 240px;
}

.detail-screen.page-quest .detail-sheet {
  left: 76px;
  top: 445px;
  width: 560px;
  min-height: 132px;
  color: white;
  background: rgba(1, 13, 75, 0.94);
}

.detail-screen.page-quest .detail-sheet h2,
.detail-screen.page-quest .detail-sheet p,
.detail-screen.page-quest .detail-item span {
  color: white;
}

.detail-screen.page-quest .detail-list,
.detail-screen.page-equip .detail-list,
.detail-screen.page-persona .detail-list,
.detail-screen.page-social-link .detail-list {
  display: none;
}

.detail-screen.page-equip .detail-sheet,
.detail-screen.page-equip .detail-badge {
  display: none;
}

.detail-screen.page-quest .detail-sheet,
.detail-screen.page-equip .detail-sheet,
.detail-screen.page-persona .detail-sheet {
  padding: 18px 30px 20px;
}

.detail-screen.page-quest .detail-sheet h2,
.detail-screen.page-equip .detail-sheet h2,
.detail-screen.page-persona .detail-sheet h2 {
  margin: 8px 0 8px;
  font-size: 41px;
  line-height: 0.96;
}

.detail-screen.page-quest .detail-sheet p,
.detail-screen.page-equip .detail-sheet p,
.detail-screen.page-persona .detail-sheet p {
  font-size: 19px;
  line-height: 1.14;
}

.equip-stack {
  position: absolute;
  left: 470px;
  top: 130px;
  width: 600px;
}

.equip-row {
  display: grid;
  grid-template-columns: 130px 1fr 150px;
  align-items: center;
  min-height: 58px;
  margin-bottom: 9px;
  padding: 8px 22px;
  color: #4ff6ff;
  background: rgba(1, 13, 75, 0.88);
  clip-path: polygon(4% 0, 100% 0, 95% 100%, 0 100%);
  font-size: 22px;
  font-weight: 900;
  transform: skewX(-8deg);
}

.equip-row b,
.equip-row span,
.equip-row em {
  transform: skewX(8deg);
}

.equip-row b {
  color: white;
  font-style: italic;
}

.equip-row em {
  color: #fff;
  font-style: normal;
  text-align: right;
}

.equip-row.selected {
  color: #050505;
  background: white;
  border-top: 4px solid var(--red);
}

.equip-row.selected b,
.equip-row.selected span,
.equip-row.selected em {
  color: #050505;
}

.detail-screen.page-equip .detail-sheet {
  left: 86px;
  top: 455px;
  width: 560px;
  min-height: 120px;
  color: #5af3ff;
  background: rgba(0, 13, 75, 0.93);
  border-top-color: transparent;
}

.detail-screen.page-equip .detail-sheet h2,
.detail-screen.page-equip .detail-sheet p,
.detail-screen.page-equip .detail-item span {
  color: white;
}

.persona-beast {
  position: absolute;
  right: 40px;
  top: 112px;
  width: 420px;
  height: 390px;
  filter: drop-shadow(-12px 10px 0 rgba(0, 12, 92, 0.5));
}

.persona-beast span,
.persona-beast i,
.persona-beast em {
  position: absolute;
  display: block;
}

.persona-beast span {
  inset: 35px 40px 50px 30px;
  border-radius: 46% 54% 44% 56%;
  background: radial-gradient(circle at 40% 35%, #fff6a4 0 4%, #17245d 5% 13%, #061043 14% 42%, #056f9c 43% 100%);
  clip-path: polygon(0 50%, 14% 24%, 34% 30%, 49% 0, 65% 31%, 94% 14%, 82% 49%, 100% 72%, 65% 71%, 42% 100%, 32% 72%);
}

.persona-beast i {
  right: 30px;
  bottom: 10px;
  width: 300px;
  height: 90px;
  border-radius: 50%;
  border-bottom: 28px solid #061043;
  transform: rotate(-10deg);
}

.persona-beast em {
  left: 6px;
  top: 70px;
  width: 350px;
  height: 110px;
  border-top: 16px solid #d8fdff;
  transform: rotate(-23deg);
}

.persona-stat-card {
  position: absolute;
  left: 70px;
  top: 148px;
  width: 520px;
  color: #4ff6ff;
}

.persona-stat-card b {
  display: inline-block;
  padding: 8px 16px;
  color: #050505;
  background: white;
  font: italic 900 36px/1 Impact, "Arial Black", sans-serif;
  transform: skewX(-10deg);
}

.persona-stat-card strong {
  display: block;
  margin-top: 14px;
  color: #4ff6ff;
  font: italic 900 92px/0.8 Impact, "Arial Black", sans-serif;
  text-transform: uppercase;
}

.persona-stat-card p {
  display: inline-block;
  margin: 18px 0 0;
  padding: 12px 20px;
  color: #050505;
  background: white;
  font-size: 28px;
  font-weight: 900;
  transform: skewX(-9deg);
}

.detail-screen.page-persona .detail-sheet {
  left: 74px;
  top: 455px;
  width: 520px;
  color: white;
  background: rgba(1, 16, 88, 0.91);
}

.detail-screen.page-persona .detail-sheet h2,
.detail-screen.page-persona .detail-sheet p,
.detail-screen.page-persona .detail-item span {
  color: white;
}

.social-orbits {
  position: absolute;
  left: 570px;
  top: 330px;
  width: 390px;
  height: 230px;
}

.social-orbits span {
  position: absolute;
  display: grid;
  place-items: center;
  width: 145px;
  height: 145px;
  border-radius: 50%;
  color: white;
  background: rgba(18, 112, 255, 0.82);
  font-size: 18px;
  font-weight: 900;
  text-align: center;
}

.social-orbits span:nth-child(1) { left: 0; top: 55px; }
.social-orbits span:nth-child(2) { left: 112px; top: 0; background: rgba(88, 218, 255, 0.78); }
.social-orbits span:nth-child(3) { right: 0; top: 70px; background: rgba(0, 63, 218, 0.82); }
.social-orbits b {
  display: block;
  font: italic 900 58px/0.8 Impact, "Arial Black", sans-serif;
}

.portrait-slice {
  position: absolute;
  right: 60px;
  top: 118px;
  width: 330px;
  height: 430px;
  color: white;
  background: linear-gradient(135deg, #efefef 0 52%, #061058 52% 100%);
  clip-path: polygon(20% 0, 100% 0, 83% 100%, 0 100%);
}

.portrait-slice::before {
  content: "";
  position: absolute;
  left: 52px;
  top: 68px;
  width: 220px;
  height: 250px;
  border-radius: 48% 52% 42% 58%;
  background: linear-gradient(135deg, #050505 0 45%, #f6f6f6 46% 100%);
  clip-path: polygon(48% 0, 84% 15%, 100% 60%, 74% 100%, 28% 93%, 0 58%, 12% 18%);
}

.portrait-slice b,
.portrait-slice em {
  position: absolute;
  right: 26px;
  bottom: 56px;
  font: italic 900 42px/0.9 Impact, "Arial Black", sans-serif;
  text-transform: uppercase;
}

.portrait-slice em {
  bottom: 26px;
  color: var(--red);
  font-size: 28px;
}

.request-board {
  position: absolute;
  left: 430px;
  top: 102px;
  width: 610px;
  color: white;
  background: rgba(0, 13, 75, 0.82);
  padding: 20px 28px;
  clip-path: polygon(4% 0, 100% 0, 95% 100%, 0 100%);
}

.request-board strong {
  color: white;
  font: italic 900 45px/1 Impact, "Arial Black", sans-serif;
}

.request-board li {
  display: grid;
  grid-template-columns: 128px 1fr;
  gap: 14px;
  margin-top: 10px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 18px;
  font-weight: 900;
}

.request-board li.selected {
  color: #050505;
  background: white;
  border-top: 4px solid var(--red);
}

.tarot-card {
  position: absolute;
  left: 62px;
  top: 115px;
  width: 400px;
  height: 170px;
  color: #050505;
  background: white;
  clip-path: polygon(0 0, 100% 0, 93% 100%, 7% 100%);
  transform: skewX(-9deg);
}

.tarot-card b,
.tarot-card span,
.tarot-card em {
  position: absolute;
  transform: skewX(9deg);
}

.tarot-card b {
  left: 42px;
  top: 52px;
  font: italic 900 58px/0.8 Impact, "Arial Black", sans-serif;
}

.tarot-card span {
  right: 40px;
  top: 28px;
  font: italic 900 130px/0.8 Impact, "Arial Black", sans-serif;
}

.tarot-card em {
  right: 64px;
  top: 22px;
  font-weight: 900;
  text-transform: uppercase;
}

.link-grid {
  position: absolute;
  right: 320px;
  top: 80px;
  display: grid;
  grid-template-columns: repeat(3, 86px);
  gap: 10px;
}

.link-grid span {
  width: 86px;
  height: 64px;
  background: linear-gradient(135deg, white 0 44%, #9cecff 45% 100%);
  border: 4px solid #05105b;
  clip-path: polygon(9% 0, 100% 0, 91% 100%, 0 100%);
}

.profile-card {
  position: absolute;
  right: 78px;
  bottom: 152px;
  width: 430px;
  padding: 18px 26px;
  color: white;
  background: rgba(1, 13, 75, 0.9);
  clip-path: polygon(6% 0, 100% 0, 92% 100%, 0 100%);
}

.profile-card b {
  color: #5af3ff;
  font: italic 900 42px/0.9 Impact, "Arial Black", sans-serif;
}

.profile-card p {
  margin: 8px 0 0;
  font-size: 21px;
  line-height: 1.06;
  font-weight: 900;
}

.detail-screen.page-social-link .detail-sheet {
  left: 64px;
  top: 320px;
  width: 470px;
  min-height: 188px;
  color: white;
  background: rgba(1, 13, 75, 0.94);
}

.detail-screen.page-social-link .detail-sheet h2,
.detail-screen.page-social-link .detail-sheet p,
.detail-screen.page-social-link .detail-item span {
  color: white;
}

.calendar-orb {
  position: absolute;
  left: -72px;
  top: 46px;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  color: white;
  background: radial-gradient(circle at 35% 30%, #42edff, #034cff 62%, #00055c 63%);
}

.calendar-orb b {
  position: absolute;
  left: 210px;
  top: 40px;
  font: italic 900 230px/0.8 Impact, "Arial Black", sans-serif;
}

.calendar-orb span {
  position: absolute;
  left: 192px;
  top: 230px;
  font: italic 900 38px/1 Impact, "Arial Black", sans-serif;
}

.calendar-days {
  position: absolute;
  left: 380px;
  top: 165px;
  display: grid;
  grid-template-columns: repeat(5, 58px);
  gap: 15px;
}

.calendar-days span {
  display: grid;
  place-items: center;
  width: 58px;
  height: 38px;
  color: white;
  background: rgba(0, 13, 75, 0.72);
  font-weight: 900;
}

.calendar-days .today {
  color: #050505;
  background: #fff200;
  border: 4px solid #ff2b7d;
}

.detail-screen.page-calendar .detail-sheet {
  left: 735px;
  top: 120px;
  width: 380px;
  min-height: 280px;
}

.system-ring {
  position: absolute;
  left: 45px;
  top: 5px;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  color: white;
  background: radial-gradient(circle at 50% 50%, rgba(3, 50, 210, 0.72) 0 48%, #050505 49% 55%, transparent 56%);
}

.system-ring b {
  position: absolute;
  left: 210px;
  top: 245px;
  color: var(--red);
  font: italic 900 58px/0.9 Impact, "Arial Black", sans-serif;
  text-shadow: -12px 7px 0 #050505;
}

.system-ring span {
  position: absolute;
  left: 270px;
  top: 80px;
  font: italic 900 34px/0.9 Impact, "Arial Black", sans-serif;
  text-transform: uppercase;
}

.system-ring span:nth-child(3) { left: 390px; top: 170px; }
.system-ring span:nth-child(4) { left: 375px; top: 330px; }
.system-ring span:nth-child(5) { left: 250px; top: 455px; }
.system-ring span:nth-child(6) { left: 92px; top: 320px; color: #5af3ff; }

.detail-screen.page-system::before {
  left: 600px;
  width: 590px;
  clip-path: polygon(20% 0, 100% 0, 86% 100%, 0 100%);
}

.detail-screen.page-system .detail-sheet {
  left: 650px;
  top: 160px;
  width: 470px;
  color: white;
  background: rgba(1, 13, 75, 0.93);
}

.detail-screen.page-system .detail-sheet h2,
.detail-screen.page-system .detail-sheet p,
.detail-screen.page-system .detail-item span {
  color: white;
}

/* Close reference pass: make the detail pages use P3R-like UI modules instead of poster layouts. */
.detail-screen.page-item .detail-sheet,
.detail-screen.page-persona .detail-sheet,
.detail-screen.page-stats .detail-sheet,
.detail-screen.page-social-link .detail-sheet,
.detail-screen.page-calendar .detail-sheet,
.detail-screen.page-system .detail-sheet,
.detail-screen.page-item .detail-badge,
.detail-screen.page-persona .detail-badge,
.detail-screen.page-stats .detail-badge,
.detail-screen.page-social-link .detail-badge,
.detail-screen.page-calendar .detail-badge,
.detail-screen.page-system .detail-badge {
  display: none;
}

.detail-screen.page-stats .party-rail {
  opacity: 0 !important;
  animation: none !important;
}

.p3r-list-panel {
  box-shadow: -16px 16px 0 rgba(0, 0, 0, 0.24);
}

.p3r-subtabs {
  display: flex;
  gap: 7px;
  margin: -4px 0 13px;
  color: #08145a;
  font-size: 14px;
  font-weight: 900;
  transform: skewX(7deg);
}

.p3r-subtabs span {
  padding: 5px 12px;
  color: white;
  background: rgba(0, 0, 0, 0.78);
  clip-path: polygon(9% 0, 100% 0, 92% 100%, 0 100%);
}

.p3r-subtabs .active {
  color: #050505;
  background: white;
  border-top: 3px solid var(--red);
}

.inventory-panel {
  left: 448px;
  top: 106px;
  width: 610px;
  min-height: 380px;
  padding: 18px 30px 24px;
  background: rgba(1, 13, 75, 0.88);
}

.inventory-panel p {
  margin: 16px 0 0;
  padding: 12px 16px;
  color: #050505;
  background: rgba(255, 255, 255, 0.94);
  clip-path: polygon(5% 0, 100% 0, 95% 100%, 0 100%);
  font-size: 18px;
  font-weight: 900;
  transform: skewX(7deg);
}

.equip-stack {
  left: 480px;
  top: 118px;
  z-index: 3;
  width: 640px;
  padding-top: 44px;
}

.equip-stack::before {
  content: "Testing File";
  position: absolute;
  left: 18px;
  top: 0;
  color: #06135b;
  background: white;
  padding: 7px 18px;
  clip-path: polygon(0 0, 100% 0, 94% 100%, 6% 100%);
  font: italic 900 26px/1 Impact, "Arial Black", sans-serif;
  transform: skewX(-9deg);
}

.equip-row {
  grid-template-columns: 120px minmax(0, 1fr) 132px;
  min-height: 52px;
  margin-bottom: 8px;
  background: rgba(1, 13, 75, 0.94);
  box-shadow: -8px 8px 0 rgba(0, 0, 0, 0.18);
}

.equip-portrait {
  position: absolute;
  right: -115px;
  top: 110px;
  z-index: 1;
  width: 255px;
  height: 410px;
  color: white;
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.92) 0 28%, rgba(5, 14, 72, 0.95) 28% 60%, rgba(15, 226, 255, 0.8) 60% 100%);
  clip-path: polygon(22% 0, 100% 0, 78% 100%, 0 100%);
  filter: drop-shadow(-14px 12px 0 rgba(0, 0, 0, 0.26));
}

.equip-portrait::before,
.p3r-portrait i {
  content: "";
  position: absolute;
  left: 52px;
  top: 70px;
  width: 160px;
  height: 230px;
  background:
    radial-gradient(circle at 68% 40%, #21f5ff 0 5px, #050505 6px 11px, transparent 12px),
    linear-gradient(138deg, #050505 0 44%, #f8f8f8 45% 100%);
  clip-path: polygon(45% 0, 90% 14%, 100% 62%, 74% 100%, 27% 92%, 0 55%, 13% 17%);
}

.equip-portrait b,
.equip-portrait span {
  position: absolute;
  right: 28px;
  bottom: 72px;
  font: italic 900 31px/0.9 Impact, "Arial Black", sans-serif;
}

.equip-portrait span {
  bottom: 45px;
  color: var(--red);
  font-size: 22px;
}

.equip-readout {
  position: absolute;
  left: 390px;
  bottom: 142px;
  z-index: 4;
  display: flex;
  gap: 8px;
  color: white;
  font-size: 14px;
  font-weight: 900;
}

.equip-readout span {
  padding: 7px 10px;
  background: rgba(0, 13, 75, 0.9);
  clip-path: polygon(8% 0, 100% 0, 91% 100%, 0 100%);
}

.persona-cutin,
.stats-cutin,
.social-profile {
  position: absolute;
  color: white;
  filter: drop-shadow(-14px 14px 0 rgba(0, 0, 0, 0.26));
}

.persona-cutin {
  left: 30px;
  top: 112px;
  width: 430px;
  height: 505px;
  background: linear-gradient(138deg, rgba(255, 255, 255, 0.9) 0 35%, rgba(0, 13, 75, 0.9) 36% 100%);
  clip-path: polygon(0 0, 88% 0, 70% 100%, 0 100%);
}

.persona-cutin i,
.stats-cutin i,
.social-profile i {
  left: 110px;
  top: 62px;
  width: 210px;
  height: 305px;
}

.persona-cutin b,
.stats-cutin b {
  position: absolute;
  left: 44px;
  bottom: 42px;
  color: white;
  font: italic 900 37px/0.9 Impact, "Arial Black", sans-serif;
  text-shadow: -8px 6px 0 #050505;
}

.persona-card-panel {
  position: absolute;
  left: 440px;
  top: 82px;
  width: 720px;
  height: 158px;
  color: #050505;
  background: white;
  clip-path: polygon(8% 0, 100% 0, 94% 100%, 0 100%);
  transform: skewX(-10deg);
  box-shadow: -16px 15px 0 rgba(0, 0, 0, 0.22);
}

.persona-card-top,
.persona-icon-row,
.persona-stat-lines {
  transform: skewX(10deg);
}

.persona-card-top {
  display: grid;
  grid-template-columns: 110px 1fr 150px;
  gap: 18px;
  align-items: center;
  padding: 20px 48px 8px;
  font-weight: 900;
}

.persona-card-top b {
  color: #050505;
  font: italic 900 44px/0.9 Impact, "Arial Black", sans-serif;
}

.persona-card-top em {
  color: #06135b;
  font-style: normal;
  text-align: right;
}

.persona-icon-row {
  display: flex;
  gap: 8px;
  padding-left: 190px;
}

.persona-icon-row i {
  width: 29px;
  height: 29px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffd400 0 48%, #07165f 49% 100%);
  border: 3px solid #050505;
}

.persona-icon-row i.selected {
  background: linear-gradient(135deg, #ffffff 0 48%, var(--red) 49% 100%);
  box-shadow: -4px 4px 0 #050505;
}

.persona-stat-lines {
  display: flex;
  gap: 14px;
  margin-top: 9px;
  padding-left: 190px;
  color: #0920a4;
  font-size: 19px;
  font-weight: 900;
}

.persona-skill-panel {
  position: absolute;
  left: 445px;
  bottom: 72px;
  width: 550px;
  color: white;
  background: rgba(0, 13, 75, 0.92);
  padding: 16px 22px 18px;
  clip-path: polygon(4% 0, 100% 0, 94% 100%, 0 100%);
}

.persona-skill-panel ol,
.social-link-list,
.system-menu-panel {
  margin: 0;
  padding: 0;
  list-style: none;
}

.persona-skill-panel li {
  display: grid;
  grid-template-columns: 1fr 120px;
  padding: 8px 14px;
  margin-bottom: 7px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 20px;
  font-weight: 900;
}

.persona-skill-panel .selected {
  color: #050505;
  background: white;
  border-top: 4px solid var(--red);
}

.stats-cutin {
  left: 25px;
  top: 92px;
  width: 500px;
  height: 548px;
  background: linear-gradient(135deg, rgba(5, 9, 24, 0.96) 0 47%, rgba(255, 255, 255, 0.86) 48% 100%);
  clip-path: polygon(0 0, 100% 0, 72% 100%, 0 100%);
}

.stats-cutin b {
  left: 52px;
  bottom: 52px;
  font-size: 42px;
}

.stats-card {
  position: absolute;
  right: 102px;
  top: 108px;
  width: 520px;
  min-height: 410px;
  color: #050505;
  background: rgba(255, 255, 255, 0.94);
  clip-path: polygon(7% 0, 100% 0, 93% 100%, 0 100%);
  padding: 24px 34px 30px 54px;
  box-shadow: -17px 17px 0 rgba(0, 0, 0, 0.22);
}

.stats-top {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr) 78px;
  align-items: end;
  gap: 10px;
}

.stats-top span {
  color: white;
  background: #050505;
  padding: 7px 12px;
  font-weight: 900;
  clip-path: polygon(8% 0, 100% 0, 90% 100%, 0 100%);
}

.stats-top b {
  color: #06135b;
  font: italic 900 50px/0.86 Impact, "Arial Black", sans-serif;
  min-width: 0;
}

.stats-top em {
  color: var(--red);
  font: italic 900 26px/1 Impact, "Arial Black", sans-serif;
  justify-self: end;
  white-space: nowrap;
}

.stats-meters {
  display: grid;
  gap: 14px;
  margin-top: 30px;
}

.stats-meters p {
  position: relative;
  display: grid;
  grid-template-columns: 96px 112px minmax(150px, 1fr);
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 20px;
  font-weight: 900;
}

.stats-meters i {
  position: relative;
  height: 11px;
  background: rgba(4, 15, 83, 0.18);
  transform: skewX(-16deg);
}

.stats-meters i::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--v);
  background: linear-gradient(90deg, #00eaff, #fff200);
}

.stats-meters p.selected {
  color: #fff200;
  transform: translateX(8px);
}

.social-stat-strip {
  display: flex;
  gap: 8px;
  margin-top: 30px;
}

.social-stat-strip span,
.party-mini-list span {
  padding: 8px 12px;
  color: white;
  background: #06135b;
  clip-path: polygon(8% 0, 100% 0, 91% 100%, 0 100%);
  font-weight: 900;
}

.social-stat-strip span.selected {
  color: #050505;
  background: white;
  border-top: 4px solid var(--red);
}

.party-mini-list {
  position: absolute;
  left: 430px;
  bottom: 164px;
  display: flex;
  gap: 7px;
}

.party-mini-list .active {
  color: #050505;
  background: white;
  border-top: 4px solid var(--red);
}

.social-link-list {
  position: absolute;
  left: 62px;
  top: 120px;
  width: 450px;
}

.link-row {
  display: grid;
  grid-template-columns: 148px 1fr 82px;
  align-items: center;
  gap: 9px;
  margin-bottom: 9px;
  padding: 9px 15px;
  color: white;
  background: rgba(1, 13, 75, 0.91);
  clip-path: polygon(4% 0, 100% 0, 94% 100%, 0 100%);
  font-size: 18px;
  font-weight: 900;
}

.link-row.selected {
  color: #050505;
  background: white;
  border-top: 4px solid var(--red);
}

.link-row em {
  font-style: normal;
  text-align: right;
}

.social-profile {
  right: 70px;
  top: 78px;
  width: 410px;
  height: 520px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0 40%, rgba(4, 14, 74, 0.94) 41% 100%);
  clip-path: polygon(18% 0, 100% 0, 82% 100%, 0 100%);
}

.social-profile b {
  position: absolute;
  left: 70px;
  bottom: 130px;
  color: #5af3ff;
  font: italic 900 38px/0.9 Impact, "Arial Black", sans-serif;
}

.social-profile p {
  position: absolute;
  left: 72px;
  right: 58px;
  bottom: 42px;
  margin: 0;
  font-size: 18px;
  line-height: 1.1;
  font-weight: 900;
}

.social-rank-card {
  position: absolute;
  left: 90px;
  bottom: 116px;
  width: 320px;
  height: 122px;
  color: #050505;
  background: white;
  clip-path: polygon(0 0, 100% 0, 91% 100%, 7% 100%);
  transform: skewX(-10deg);
}

.social-rank-card b {
  position: absolute;
  right: 34px;
  top: 0;
  font: italic 900 124px/0.8 Impact, "Arial Black", sans-serif;
}

.social-rank-card span {
  position: absolute;
  left: 34px;
  top: 48px;
  font-weight: 900;
  transform: skewX(10deg);
}

.calendar-panel {
  position: absolute;
  left: 320px;
  top: 70px;
  width: 720px;
  height: 515px;
  padding: 28px 42px 36px;
  color: #05135d;
  background: rgba(255, 255, 255, 0.88);
  clip-path: polygon(10% 0, 100% 0, 91% 100%, 0 100%);
  box-shadow: -18px 18px 0 rgba(0, 0, 0, 0.2);
}

.calendar-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 38px;
}

.calendar-header b {
  font: italic 900 64px/0.8 Impact, "Arial Black", sans-serif;
}

.calendar-header span {
  color: white;
  background: #06135b;
  padding: 6px 12px;
  font-weight: 900;
}

.calendar-header em {
  color: #06135b;
  font-style: normal;
  font-weight: 900;
}

.calendar-week,
.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 68px);
  gap: 9px;
  margin-left: 42px;
}

.calendar-week {
  margin-top: 18px;
  color: white;
}

.calendar-week span {
  display: grid;
  place-items: center;
  height: 28px;
  background: #06135b;
  font-size: 12px;
  font-weight: 900;
}

.calendar-days {
  position: static;
  margin-top: 9px;
}

.calendar-days span {
  width: 68px;
  height: 47px;
  color: #06135b;
  background: rgba(5, 19, 93, 0.08);
  border-bottom: 2px solid rgba(5, 19, 93, 0.32);
  font-size: 21px;
}

.calendar-days .today {
  color: white;
  background: var(--red);
  border: 0;
  box-shadow: -5px 5px 0 #050505;
}

.calendar-days span.selected {
  color: white;
  background: #06135b;
  border: 0;
  box-shadow: -5px 5px 0 rgba(0, 0, 0, 0.48);
}

.calendar-days span.today.selected {
  background: var(--red);
}

.calendar-event {
  position: absolute;
  left: 72px;
  bottom: 92px;
  width: 360px;
  padding: 16px 22px;
  color: white;
  background: rgba(1, 13, 75, 0.92);
  clip-path: polygon(5% 0, 100% 0, 93% 100%, 0 100%);
}

.calendar-event b {
  display: block;
  color: #5af3ff;
  font: italic 900 46px/0.85 Impact, "Arial Black", sans-serif;
}

.calendar-event span {
  display: block;
  margin-top: 7px;
  font-size: 17px;
  font-weight: 900;
}

.calendar-number {
  position: absolute;
  left: 74px;
  top: 42px;
  color: rgba(0, 0, 0, 0.72);
  font: italic 900 252px/0.8 Impact, "Arial Black", sans-serif;
  transform: skewX(-10deg);
}

.system-menu-panel {
  position: absolute;
  left: 598px;
  top: 226px;
  width: 500px;
}

.system-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 14px;
  align-items: center;
  margin-bottom: 7px;
  padding: 9px 20px;
  color: white;
  background: rgba(2, 12, 70, 0.88);
  clip-path: polygon(6% 0, 100% 0, 92% 100%, 0 100%);
  font-size: 15px;
  font-weight: 900;
  box-shadow: -8px 8px 0 rgba(0, 0, 0, 0.18);
}

.system-row b {
  color: #5af3ff;
  font: italic 900 28px/0.86 Impact, "Arial Black", sans-serif;
}

.system-row.selected {
  color: #050505;
  background: white;
  border-top: 5px solid var(--red);
}

.system-row.selected b {
  color: var(--red);
}

.system-disc {
  position: absolute;
  left: 55px;
  top: 30px;
  width: 610px;
  height: 610px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(7, 44, 210, 0.88) 0 47%, #050505 48% 55%, transparent 56%);
  opacity: 0.9;
}

.system-disc span {
  position: absolute;
  left: 118px;
  top: 135px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  border: 22px solid rgba(255, 255, 255, 0.9);
  border-left-color: transparent;
  transform: rotate(-22deg);
}

.system-disc b {
  position: absolute;
  right: 60px;
  bottom: 70px;
  color: white;
  font: italic 900 118px/0.8 Impact, "Arial Black", sans-serif;
  text-shadow: -14px 9px 0 #050505;
}

.detail-screen.page-persona .detail-big,
.detail-screen.page-stats .detail-big,
.detail-screen.page-social-link .detail-big,
.detail-screen.page-system .detail-big {
  display: none;
}

.detail-screen.page-persona::before {
  left: -30px;
  top: -74px;
  width: 780px;
  height: 245px;
  opacity: 0.82;
  clip-path: polygon(0 0, 100% 0, 84% 100%, 0 100%);
}

.detail-screen.page-persona::after {
  right: -170px;
  top: 80px;
  width: 670px;
  height: 550px;
  background: rgba(0, 20, 120, 0.35);
  clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%, 20% 46%);
}

.persona-title-ghost,
.stats-page-title,
.social-title-ghost {
  position: absolute;
  z-index: 1;
  color: rgba(255, 255, 255, 0.78);
  font: italic 900 126px/0.75 Impact, "Arial Black", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0;
  pointer-events: none;
}

.persona-title-ghost {
  left: -10px;
  top: 18px;
  color: rgba(255, 255, 255, 0.65);
}

.persona-roster {
  position: absolute;
  left: 56px;
  top: 130px;
  z-index: 5;
  width: 455px;
  margin: 0;
  padding: 0;
  list-style: none;
  transform: skewX(-8deg);
}

.persona-roster li {
  display: grid;
  grid-template-columns: 150px 54px minmax(0, 1fr);
  column-gap: 8px;
  align-items: center;
  height: 42px;
  margin-bottom: 3px;
  padding: 0 16px 0 22px;
  color: #55f5ff;
  background: rgba(0, 8, 55, 0.92);
  clip-path: polygon(5% 0, 100% 0, 94% 100%, 0 100%);
  font-size: 23px;
  font-weight: 900;
  box-shadow: -7px 6px 0 rgba(0, 0, 0, 0.18);
}

.persona-roster li > * {
  transform: skewX(8deg);
}

.persona-roster b {
  color: #55f5ff;
  font: italic 900 25px/1 Impact, "Arial Black", sans-serif;
}

.persona-roster strong {
  color: #59f7ff;
  font: italic 900 29px/1 Impact, "Arial Black", sans-serif;
  text-align: right;
}

.persona-roster span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.persona-roster li.selected {
  color: #050505;
  background: white;
  border-top: 5px solid var(--red);
}

.persona-roster li.selected b,
.persona-roster li.selected strong {
  color: #0520c8;
}

.persona-summon {
  position: absolute;
  right: -52px;
  top: 112px;
  z-index: 3;
  width: 720px;
  height: 450px;
  pointer-events: none;
}

.persona-summon i {
  position: absolute;
  display: block;
}

.summon-orb {
  right: 18px;
  top: 34px;
  width: 380px;
  height: 285px;
  border-radius: 44% 56% 42% 58%;
  background:
    radial-gradient(circle at 36% 44%, #fff778 0 16px, #08105a 17px 30px, transparent 31px),
    linear-gradient(128deg, #071154 0 28%, #0b7fa0 29% 52%, #08145c 53% 100%);
  clip-path: polygon(0 50%, 14% 24%, 37% 31%, 51% 0, 68% 29%, 96% 13%, 84% 47%, 100% 72%, 66% 70%, 43% 100%, 32% 72%);
  filter: drop-shadow(-13px 12px 0 rgba(0, 0, 0, 0.35));
}

.summon-horn {
  width: 250px;
  height: 54px;
  background: #d7dfc8;
  clip-path: polygon(0 48%, 100% 0, 84% 36%, 100% 70%, 0 64%);
}

.summon-horn.horn-a {
  right: 220px;
  top: 48px;
  transform: rotate(-18deg);
}

.summon-horn.horn-b {
  right: 28px;
  top: 210px;
  transform: rotate(24deg) scaleX(0.82);
}

.summon-neck {
  right: -8px;
  top: 214px;
  width: 440px;
  height: 160px;
  border: 32px solid #071154;
  border-left-color: transparent;
  border-top-color: transparent;
  border-radius: 50%;
  transform: rotate(-13deg);
}

.summon-head {
  right: 360px;
  top: 172px;
  width: 230px;
  height: 128px;
  background: #071154;
  clip-path: polygon(0 62%, 23% 12%, 71% 0, 100% 32%, 84% 72%, 35% 100%);
  transform: rotate(-7deg);
}

.summon-eye {
  right: 495px;
  top: 219px;
  width: 20px;
  height: 14px;
  border-radius: 50%;
  background: #fff200;
  box-shadow: 0 0 0 3px #050505;
}

.summon-eye.eye-b {
  right: 446px;
  top: 207px;
}

.persona-summon b {
  position: absolute;
  right: 94px;
  top: 270px;
  color: rgba(91, 243, 255, 0.72);
  font: italic 900 66px/0.85 Impact, "Arial Black", sans-serif;
  text-transform: uppercase;
}

.persona-command-panel {
  position: absolute;
  right: 54px;
  bottom: 44px;
  z-index: 6;
  width: 430px;
  color: white;
  text-align: right;
  text-shadow: -3px 3px 0 rgba(0, 0, 0, 0.85);
}

.persona-command-panel b {
  display: block;
  font: italic 900 23px/1 Impact, "Arial Black", sans-serif;
}

.persona-command-panel ol {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin: 9px 0 0;
  padding: 0;
  list-style: none;
}

.persona-command-panel li,
.persona-affinity-grid span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  color: #5af3ff;
  background: rgba(1, 13, 75, 0.88);
  clip-path: polygon(8% 0, 100% 0, 91% 100%, 0 100%);
  font-weight: 900;
}

.persona-command-panel li.selected,
.persona-affinity-grid span.selected {
  color: #050505;
  background: white;
  border-top: 4px solid var(--red);
}

.persona-command-panel em {
  color: #fff200;
  font-style: normal;
}

.persona-affinity-grid {
  position: absolute;
  left: 540px;
  bottom: 96px;
  z-index: 5;
  display: flex;
  gap: 7px;
  transform: skewX(-8deg);
}

.stats-page-title {
  right: 24px;
  top: 572px;
  color: rgba(255, 255, 255, 0.46);
  font-size: 104px;
  transform: skewX(-10deg);
}

.stats-page-number {
  position: absolute;
  left: -72px;
  top: 118px;
  z-index: 3;
  color: #050505;
  font: italic 900 360px/0.75 Impact, "Arial Black", sans-serif;
  pointer-events: none;
}

.stats-shoulder-card {
  position: absolute;
  left: 92px;
  top: 94px;
  z-index: 5;
  width: 715px;
  color: #050505;
  transform: rotate(-7deg) skewX(-7deg);
}

.stats-nav-line {
  display: grid;
  grid-template-columns: 88px 1fr 88px;
  align-items: center;
  height: 42px;
  color: white;
  font: italic 900 38px/1 Impact, "Arial Black", sans-serif;
}

.stats-nav-line i {
  height: 9px;
  border-top: 4px dotted white;
}

.stats-nav-line span,
.stats-nav-line strong {
  color: white;
  text-shadow: -4px 3px 0 var(--red);
}

.stats-summary-strip,
.stats-persona-line,
.stats-attack-line {
  box-shadow: -10px 10px 0 rgba(0, 0, 0, 0.16);
}

.stats-summary-strip {
  display: grid;
  grid-template-columns: 182px 48px 68px 124px 124px;
  align-items: center;
  min-height: 78px;
  padding: 10px 26px 10px 195px;
  color: white;
  background: #050505;
  clip-path: polygon(5% 0, 100% 0, 92% 100%, 0 100%);
}

.stats-summary-strip > * {
  transform: skewX(7deg);
}

.stats-summary-strip b {
  font: 900 24px/0.98 Arial, sans-serif;
  text-align: center;
}

.stats-summary-strip span {
  color: #dfe8ff;
  font-size: 18px;
}

.stats-summary-strip strong {
  font: italic 900 48px/1 Impact, "Arial Black", sans-serif;
}

.stats-summary-strip em {
  color: #e7f5ff;
  font-style: normal;
  font-weight: 900;
}

.stats-summary-strip em i {
  color: #5af3ff;
  font-style: italic;
  font-size: 28px;
}

.stats-summary-strip em:last-child i {
  color: #fff200;
}

.stats-persona-line {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  align-items: center;
  margin-top: 26px;
  min-height: 70px;
  padding: 10px 32px 10px 250px;
  background: white;
  clip-path: polygon(7% 0, 100% 0, 90% 100%, 0 100%);
  border-top: 5px solid var(--red);
}

.stats-persona-line > * {
  transform: skewX(7deg);
}

.stats-persona-line span {
  color: #050505;
  font: italic 900 38px/1 Impact, "Arial Black", sans-serif;
}

.stats-persona-line b {
  font: 900 29px/1 Arial, sans-serif;
}

.stats-attack-line {
  display: grid;
  grid-template-columns: 150px 128px 170px 190px;
  gap: 13px;
  align-items: center;
  margin-top: 22px;
  min-height: 66px;
  padding: 9px 28px 9px 214px;
  background: white;
  clip-path: polygon(5% 0, 98% 0, 90% 100%, 0 100%);
}

.stats-attack-line > * {
  transform: skewX(7deg);
}

.stats-attack-line span {
  color: #8a8a8a;
  font: italic 900 20px/0.9 Impact, "Arial Black", sans-serif;
}

.stats-attack-line b,
.stats-attack-line strong {
  font: italic 900 30px/1 Impact, "Arial Black", sans-serif;
}

.stats-portrait-card {
  position: absolute;
  right: 0;
  top: 46px;
  z-index: 4;
  width: 585px;
  height: 610px;
  color: white;
  background:
    linear-gradient(148deg, rgba(230, 230, 230, 0.92) 0 31%, rgba(85, 91, 105, 0.88) 31% 54%, rgba(0, 33, 170, 0.66) 54% 100%);
  clip-path: polygon(28% 0, 100% 0, 100% 100%, 8% 100%, 34% 46%);
  filter: drop-shadow(-16px 14px 0 rgba(0, 0, 0, 0.26));
}

.stats-portrait-card i {
  left: 150px;
  top: 42px;
  width: 310px;
  height: 405px;
}

.stats-portrait-card b {
  position: absolute;
  right: 58px;
  bottom: 88px;
  padding: 14px 22px;
  color: var(--red);
  background: #050505;
  clip-path: polygon(7% 0, 100% 0, 92% 100%, 0 100%);
  font: italic 900 40px/1 Impact, "Arial Black", sans-serif;
}

.stats-portrait-card b::before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-right: 12px;
  background: var(--red);
  vertical-align: -4px;
}

.stats-portrait-card span {
  position: absolute;
  right: 86px;
  bottom: 42px;
  font: italic 900 26px/1 Impact, "Arial Black", sans-serif;
  text-transform: uppercase;
}

.stats-member-tabs {
  position: absolute;
  left: 190px;
  bottom: 56px;
  z-index: 8;
  display: flex;
  gap: 8px;
  transform: skewX(-8deg);
}

.stats-member-tabs span {
  min-width: 82px;
  padding: 8px 11px;
  color: #5af3ff;
  background: rgba(1, 13, 75, 0.88);
  clip-path: polygon(9% 0, 100% 0, 91% 100%, 0 100%);
  font-weight: 900;
  text-align: center;
}

.stats-member-tabs span.active {
  color: #050505;
  background: white;
  border-top: 4px solid var(--red);
}

.detail-screen.page-social-link::before {
  left: -60px;
  top: -50px;
  width: 740px;
  height: 290px;
  opacity: 0.82;
  clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%);
}

.social-title-ghost {
  left: -5px;
  top: 24px;
  z-index: 5;
  color: rgba(255, 255, 255, 0.9);
  font-size: 92px;
}

.social-rank-panel {
  position: absolute;
  left: 0;
  top: 112px;
  z-index: 6;
  width: 560px;
  min-height: 280px;
  color: white;
  background: rgba(0, 50, 185, 0.45);
  clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%);
}

.social-rank-top {
  position: relative;
  height: 118px;
  color: #050505;
  background: white;
  border-top: 5px solid var(--red);
  clip-path: polygon(0 0, 100% 0, 94% 100%, 0 100%);
}

.social-rank-top span {
  position: absolute;
  left: 58px;
  top: 54px;
  padding: 6px 12px;
  color: white;
  background: #050505;
  font: italic 900 18px/1 Impact, "Arial Black", sans-serif;
  transform: skewX(-10deg);
}

.social-rank-top b {
  position: absolute;
  left: 132px;
  top: 38px;
  font: italic 900 55px/1 Impact, "Arial Black", sans-serif;
}

.social-rank-top em {
  position: absolute;
  right: 42px;
  top: 20px;
  font: italic 900 24px/1 Impact, "Arial Black", sans-serif;
  font-style: italic;
}

.social-rank-top strong {
  display: inline-block;
  margin-left: 8px;
  font-size: 106px;
  line-height: 0.72;
}

.social-rank-pips {
  display: flex;
  gap: 4px;
  padding: 10px 56px 6px;
}

.social-rank-pips span {
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  color: rgba(255, 255, 255, 0.45);
  font: 900 23px/1 Arial, sans-serif;
}

.social-rank-pips span.selected {
  color: white;
  text-shadow: -2px 2px 0 #050505;
}

.social-rank-panel p {
  margin: 10px 52px 18px;
  width: 388px;
  color: white;
  font: 900 21px/1.16 Arial, sans-serif;
  text-shadow: -3px 3px 0 rgba(0, 0, 0, 0.35);
}

.social-tarot-card {
  position: absolute;
  left: 580px;
  top: 142px;
  z-index: 5;
  width: 125px;
  height: 185px;
  padding: 10px;
  background: white;
  border: 4px solid #06135b;
  transform: rotate(-4deg);
  box-shadow: -8px 10px 0 rgba(0, 0, 0, 0.28);
}

.social-tarot-card i {
  display: block;
  width: 100%;
  height: 132px;
  background:
    radial-gradient(circle at 50% 45%, #bffcff 0 22%, #06135b 23% 30%, transparent 31%),
    repeating-conic-gradient(from 8deg, #06135b 0 10deg, #5af3ff 10deg 18deg);
}

.social-tarot-card b {
  display: block;
  margin-top: 5px;
  color: #06135b;
  font: italic 900 23px/1 Impact, "Arial Black", sans-serif;
  text-align: center;
}

.social-character-card {
  position: absolute;
  right: 44px;
  top: 88px;
  z-index: 4;
  width: 510px;
  height: 500px;
  background:
    linear-gradient(139deg, rgba(255, 255, 255, 0.86) 0 42%, rgba(4, 14, 74, 0.94) 43% 100%);
  clip-path: polygon(22% 0, 100% 0, 86% 100%, 0 100%);
  filter: drop-shadow(-14px 14px 0 rgba(0, 0, 0, 0.25));
  overflow: hidden;
}

.social-character-card i {
  left: 156px;
  top: 38px;
  width: 235px;
  height: 285px;
  filter: grayscale(1) contrast(1.06);
}

.social-character-card b {
  position: absolute;
  left: 104px;
  right: 54px;
  top: 348px;
  color: #5af3ff;
  font: italic 900 34px/0.95 Impact, "Arial Black", sans-serif;
  white-space: nowrap;
  text-shadow: -4px 4px 0 rgba(0, 0, 0, 0.72);
}

.social-character-card p {
  position: absolute;
  left: 104px;
  right: 68px;
  top: 394px;
  margin: 0;
  color: white;
  font: 900 17px/1.13 Arial, sans-serif;
  overflow-wrap: anywhere;
}

.scene.subpage-pulse .social-rank-top > b,
.scene.subpage-pulse .social-rank-number,
.scene.subpage-pulse .social-rank-panel > p,
.scene.subpage-pulse .social-tarot-card b,
.scene.subpage-pulse .social-character-card b,
.scene.subpage-pulse .social-character-card p {
  animation: enrichmentContentIn 260ms cubic-bezier(0.16, 1, 0.2, 1) both;
}

@keyframes enrichmentContentIn {
  from {
    opacity: 0.25;
    transform: translate3d(10px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.social-command-stack {
  position: absolute;
  left: 52px;
  bottom: 86px;
  z-index: 7;
  display: flex;
  gap: 8px;
  transform: skewX(-9deg);
}

.social-command-stack span {
  padding: 8px 13px;
  color: #5af3ff;
  background: rgba(1, 13, 75, 0.9);
  clip-path: polygon(8% 0, 100% 0, 91% 100%, 0 100%);
  font-weight: 900;
}

.social-command-stack span.active {
  color: #050505;
  background: white;
  border-top: 4px solid var(--red);
}

.detail-screen.page-system::before {
  left: -70px;
  top: -10px;
  width: 560px;
  height: 780px;
  background: white;
  opacity: 0.96;
  clip-path: polygon(0 0, 72% 0, 100% 100%, 0 100%);
}

.detail-screen.page-system::after {
  right: -120px;
  top: -40px;
  width: 980px;
  height: 880px;
  background: rgba(1, 30, 170, 0.74);
  clip-path: circle(54% at 52% 46%);
}

.system-orb {
  position: absolute;
  left: 310px;
  top: -88px;
  z-index: 4;
  width: 830px;
  height: 830px;
  border-radius: 50%;
  color: white;
  background:
    radial-gradient(circle at 52% 46%, rgba(0, 42, 189, 0.86) 0 55%, #050505 56% 63%, transparent 64%);
  overflow: visible;
}

.system-orb > b {
  position: absolute;
  left: -240px;
  bottom: 132px;
  color: #050505;
  font: italic 900 154px/0.8 Impact, "Arial Black", sans-serif;
  transform: rotate(72deg);
  text-transform: uppercase;
}

.system-wheel-list {
  position: absolute;
  right: 66px;
  top: 154px;
  display: grid;
  gap: 5px;
  width: 430px;
}

.system-wheel-list span {
  position: relative;
  display: block;
  color: #7af7ff;
  font: italic 900 41px/0.9 Impact, "Arial Black", sans-serif;
  text-transform: uppercase;
  text-shadow: -5px 5px 0 rgba(0, 0, 0, 0.58);
  transform: skewX(-8deg);
}

.system-wheel-list span.selected {
  width: 410px;
  padding-left: 26px;
  color: var(--red);
  background: white;
  clip-path: polygon(9% 0, 100% 0, 91% 100%, 0 100%);
  text-shadow: -10px 7px 0 #050505;
}

.system-file-list {
  position: absolute;
  left: 448px;
  bottom: 76px;
  z-index: 6;
  width: 398px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: white;
  transform: skewX(-8deg);
}

.system-file-list li {
  margin-bottom: 6px;
  padding: 7px 16px;
  color: #8af9ff;
  background: rgba(0, 9, 65, 0.86);
  clip-path: polygon(5% 0, 100% 0, 93% 100%, 0 100%);
  font-weight: 900;
}

.system-file-list li.selected {
  color: #050505;
  background: white;
  border-top: 4px solid var(--red);
}

.system-caption {
  position: absolute;
  right: 40px;
  bottom: 48px;
  z-index: 6;
  width: 320px;
  color: white;
  font: italic 900 24px/1.05 Arial, sans-serif;
  text-align: right;
  text-shadow: -4px 4px 0 rgba(0, 0, 0, 0.82);
}

.prompt {
  position: absolute;
  right: 0;
  bottom: 16px;
  z-index: 22;
  width: 390px;
  min-height: 78px;
  padding: 9px 16px 10px 20px;
  text-align: right;
  background: linear-gradient(90deg, rgba(0, 7, 69, 0), rgba(0, 7, 69, 0.5) 34%, rgba(0, 7, 69, 0.88));
  clip-path: polygon(7% 0, 100% 0, 96% 100%, 0 100%);
  text-shadow: -3px 3px 0 rgba(0, 0, 0, 0.9), 0 0 3px black;
}

.prompt strong {
  display: block;
  font: italic 900 22px/1.04 Arial, sans-serif;
  overflow-wrap: anywhere;
}

.prompt span {
  display: block;
  font-size: 12px;
  font-weight: 900;
}

.buttons {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  margin-top: 7px;
  color: white;
  font-size: 20px;
  font-weight: 900;
}

.button-key {
  display: inline-grid !important;
  place-items: center;
  width: 38px;
  height: 26px;
  border: 3px solid white;
  border-radius: 4px;
  background: #1d278e;
  font: 900 15px/1 Arial, sans-serif !important;
}

.close-detail {
  position: absolute;
  right: 34px;
  bottom: 34px;
  z-index: 30;
  display: none;
  width: 46px;
  height: 38px;
  border: 3px solid white;
  border-radius: 4px;
  color: white;
  background: #1d278e;
  font-weight: 900;
  cursor: pointer;
}

.scene.detail-open .close-detail {
  display: grid;
  place-items: center;
}

.mobile-controls {
  position: fixed;
  left: max(12px, env(safe-area-inset-left));
  right: max(12px, env(safe-area-inset-right));
  bottom: max(72px, calc(env(safe-area-inset-bottom) + 48px));
  z-index: 10000;
  display: none;
  grid-template-columns: 54px 54px minmax(62px, 1fr) minmax(62px, 1fr) 54px;
  gap: 9px;
  pointer-events: auto;
  touch-action: manipulation;
}

.mobile-control {
  min-width: 44px;
  height: 54px;
  border: 3px solid white;
  border-radius: 50%;
  color: white;
  background: #121a86;
  box-shadow: -4px 5px 0 rgba(0, 0, 0, 0.72);
  font: 900 19px/1 Arial, sans-serif;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.mobile-key {
  justify-self: end;
  border-radius: 30px;
}

.mobile-primary {
  color: #050505;
  background: white;
  border-color: #fff200;
}

.mobile-arrow {
  color: #5af3ff;
}

.mobile-music {
  color: #fff200;
}

.mobile-music.is-off {
  color: #9ddaff;
  background: #050b3d;
}

@media (orientation: portrait) and (max-width: 1100px), (pointer: coarse) and (orientation: portrait) {
  .mobile-controls {
    display: grid;
    bottom: max(72px, calc(env(safe-area-inset-bottom) + 48px));
  }
}

.shards {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.shards span {
  position: absolute;
  width: 19px;
  height: 31px;
  background: #ff1c94;
  clip-path: polygon(0 0, 100% 18%, 62% 100%, 0 76%);
  opacity: 0.7;
  animation: shardFloat 7s ease-in-out infinite;
}

.shards span:nth-child(1) { left: 204px; top: 128px; animation-delay: -1s; }
.shards span:nth-child(2) { left: 452px; top: 170px; background: #ff3d20; animation-delay: -2.1s; }
.shards span:nth-child(3) { left: 302px; top: 568px; background: #4df6ff; animation-delay: -0.4s; }
.shards span:nth-child(4) { left: 870px; top: 96px; background: #1233ff; animation-delay: -3.6s; }
.shards span:nth-child(5) { left: 706px; top: 512px; background: #ff6237; animation-delay: -2.9s; }
.shards span:nth-child(6) { left: 1160px; top: 330px; background: #ffffff; animation-delay: -4.1s; }
.shards span:nth-child(7) { left: 620px; top: 84px; background: #ffffff; animation-delay: -5.2s; }
.shards span:nth-child(8) { left: 1008px; top: 575px; background: #00eeff; animation-delay: -2.7s; }
.shards span:nth-child(9) { left: 148px; top: 462px; background: #142bff; animation-delay: -6s; }
.shards span:nth-child(10) { left: 980px; top: 220px; background: #ff006b; animation-delay: -4.5s; }

.screen-wipe {
  position: fixed;
  left: -48vw;
  top: -28vh;
  z-index: 200;
  width: 196vw;
  height: 156vh;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-148vw, 0, 0) rotate(-7deg);
  transform-origin: 50% 50%;
  background:
    linear-gradient(90deg, transparent 0 8%, white 8% 21%, #0315a3 21% 73%, white 73% 86%, transparent 86% 100%);
  will-change: transform, opacity;
  backface-visibility: hidden;
  contain: layout paint size;
}

.screen-wipe::before {
  content: "";
  position: absolute;
  left: 18vw;
  top: 12vh;
  width: min(72vmin, 680px);
  height: min(72vmin, 680px);
  border-radius: 50%;
  background:
    radial-gradient(circle at 44% 48%, rgba(5, 42, 214, 0.98) 0 45%, rgba(255, 255, 255, 0.96) 45% 54%, rgba(0, 6, 56, 0.96) 54% 60%, rgba(2, 42, 198, 0.95) 60% 100%);
  transform: translate3d(-8vw, 0, 0) scale(0.42);
  transform-origin: 38% 55%;
  opacity: 0;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.screen-wipe::after {
  content: attr(data-label);
  position: absolute;
  left: 18vw;
  top: 58vh;
  color: black;
  font: italic 900 clamp(70px, 12vw, 150px)/0.82 Impact, "Arial Black", sans-serif;
  transform: rotate(67deg) skewX(-8deg);
  opacity: 0;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.screen-wipe.is-active {
  animation: slashWipe 620ms cubic-bezier(0.82, 0, 0.16, 1) both;
}

.screen-wipe.is-active::before {
  animation: circlePunch 620ms cubic-bezier(0.82, 0, 0.16, 1) both;
}

.screen-wipe.is-active::after {
  animation: wipeWord 620ms cubic-bezier(0.82, 0, 0.16, 1) both;
}

.scene.is-wiping .water-layer {
  animation-play-state: paused;
  opacity: 0.76;
}

.scene.is-wiping .shards span {
  animation-play-state: paused;
}

.scene.is-wiping .side-word,
.scene.is-wiping .mega-word,
.scene.is-wiping .hero-figure,
.scene.is-wiping .menu-stack,
.scene.is-wiping .menu-item,
.scene.is-wiping .quick-panel,
.scene.is-wiping .detail-screen,
.scene.is-wiping .detail-tabs,
.scene.is-wiping .party-rail,
.scene.is-wiping .rail-row,
.scene.is-wiping .detail-sheet,
.scene.is-wiping .page-art,
.scene.is-wiping .close-detail,
.scene.is-wiping .music-toggle,
.scene.is-wiping .music-select {
  transition-duration: 0ms !important;
}

@keyframes slashWipe {
  0% {
    opacity: 0;
    transform: translate3d(-148vw, 0, 0) rotate(-7deg);
  }
  10% {
    opacity: 1;
  }
  42% {
    opacity: 1;
    transform: translate3d(-18vw, 0, 0) rotate(-7deg);
  }
  58% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(-7deg);
  }
  100% {
    opacity: 0;
    transform: translate3d(148vw, 0, 0) rotate(-7deg);
  }
}

@keyframes circlePunch {
  0% {
    opacity: 0;
    transform: translate3d(-10vw, 0, 0) scale(0.36);
  }
  36% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1.02);
  }
  62% {
    opacity: 0.92;
    transform: translate3d(4vw, 0, 0) scale(0.78);
  }
  100% {
    opacity: 0;
    transform: translate3d(8vw, 0, 0) scale(0.64);
  }
}

@keyframes wipeWord {
  0% {
    opacity: 0;
    transform: translate3d(-6vw, 6vh, 0) rotate(67deg) skewX(-8deg) scale(0.92);
  }
  42% {
    opacity: 0.82;
    transform: translate3d(0, 0, 0) rotate(67deg) skewX(-8deg) scale(1.03);
  }
  100% {
    opacity: 0;
    transform: translate3d(8vw, -8vh, 0) rotate(67deg) skewX(-8deg) scale(0.98);
  }
}

@keyframes waterSurge {
  0% {
    opacity: 0.62;
    transform: translate3d(-24px, 0, 0) scaleX(1);
  }
  38% {
    opacity: 0.86;
    transform: translate3d(54px, -14px, 0) scaleX(1.06);
  }
  100% {
    opacity: 0.62;
    transform: translate3d(-24px, 0, 0) scaleX(1);
  }
}

@keyframes waterDrift {
  0% {
    transform: translate3d(-24px, 0, 0) scaleX(1);
  }
  50% {
    transform: translate3d(42px, -10px, 0) scaleX(1.04);
  }
  100% {
    transform: translate3d(-24px, 0, 0) scaleX(1);
  }
}

@keyframes shardFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-12deg);
  }
  50% {
    transform: translate3d(16px, -20px, 0) rotate(21deg);
  }
}

.phone-portrait .mobile-controls,
.phone-landscape .mobile-controls {
  display: grid;
}

.phone-landscape .mobile-controls {
  left: auto;
  width: min(340px, calc(100vw - 24px));
  grid-template-columns: 42px 42px 1fr 1fr 42px;
  bottom: max(12px, env(safe-area-inset-bottom));
}

.phone-landscape .mobile-control {
  height: 42px;
  min-width: 40px;
  font-size: 16px;
}

.phone-portrait .viewport {
  background:
    radial-gradient(circle at 50% 15%, rgba(79, 245, 255, 0.28), transparent 30%),
    linear-gradient(180deg, #050816 0%, #061358 43%, #0009b8 100%);
}

.phone-portrait .scene {
  left: calc(50% - 20px);
  top: 50%;
  width: 1280px;
  height: 720px;
  background:
    linear-gradient(104deg, rgba(255, 255, 255, 0.18) 0 8%, transparent 8% 27%, rgba(0, 22, 178, 0.22) 27% 52%, transparent 52% 100%),
    radial-gradient(circle at 55% 18%, rgba(116, 255, 255, 0.34), transparent 25%),
    linear-gradient(180deg, rgba(35, 247, 255, 0.9) 0%, rgba(23, 124, 255, 0.96) 36%, rgba(0, 49, 211, 0.98) 74%, #0204a3 100%);
}

.phone-landscape .scene {
  width: 1280px;
  height: 720px;
}

.phone-portrait .stage-scale,
.phone-landscape .stage-scale {
  transform: none;
}

.phone-portrait .scene::before,
.phone-landscape .scene::before {
  opacity: 0.3;
  mix-blend-mode: normal;
}

.phone-portrait .classroom,
.phone-landscape .classroom {
  filter: none;
}

.phone-portrait .wallet,
.phone-portrait .date-card,
.phone-portrait .quick-panel,
.phone-portrait .music-toggle,
.phone-portrait .music-select,
.phone-portrait .prompt,
.phone-portrait .detail-badge,
.phone-portrait .party-rail,
.phone-portrait .equip-portrait,
.phone-portrait .equip-readout,
.phone-portrait .persona-cutin,
.phone-portrait .stats-cutin,
.phone-portrait .social-profile,
.phone-portrait .social-rank-card,
.phone-portrait .calendar-event,
.phone-portrait .system-disc {
  display: none !important;
}

.phone-portrait .water-layer {
  inset: 0;
  opacity: 1;
  filter: none;
  animation: none;
  background: linear-gradient(180deg, #66fff32b, transparent 30%, #1000cf55 100%);
}

.phone-portrait .slab-left {
  left: 280px;
  top: -110px;
  width: 245px;
  height: 890px;
  opacity: 1;
}

.phone-portrait .slab-right {
  right: 270px;
  bottom: -160px;
  width: 480px;
  height: 420px;
}

.phone-portrait .side-word {
  left: 390px;
  top: 86px;
  font-size: 104px;
  opacity: 0.42;
}

.phone-portrait .mega-word {
  left: 505px;
  bottom: 72px;
  max-width: 330px;
  font-size: 114px;
  opacity: 0.14;
  overflow: hidden;
}

.phone-portrait .hero-figure {
  left: 240px;
  top: -52px;
  width: 330px;
  height: 760px;
  opacity: 0.35;
  filter: none;
  will-change: transform, opacity;
}

.phone-portrait .scene.detail-open .hero-figure {
  left: 570px;
  top: -90px;
  opacity: 0.34;
  transform: rotate(180deg) scale(1.04);
}

.phone-portrait .menu-stack {
  left: 552px;
  top: 116px;
  z-index: 16;
  width: 274px;
  transform: rotate(-6deg) skewX(-4deg);
  will-change: transform;
}

.phone-portrait .scene.detail-open .menu-stack {
  transform: translateX(-72px) rotate(-6deg) skewX(-4deg) scale(0.92);
}

.phone-portrait .menu-item {
  height: 34px;
  margin: 0;
}

.phone-portrait .menu-item::before {
  left: -22px;
  top: 3px;
  width: 308px;
  height: 38px;
  box-shadow: -7px 6px 0 rgba(0, 0, 0, 0.82);
}

.phone-portrait .menu-item .menu-shadow,
.phone-portrait .menu-item .menu-label {
  font-size: 26px;
  line-height: 1;
}

.phone-portrait .menu-item.active .menu-label {
  text-shadow: none;
  transform: translate(11px, 0);
}

.phone-portrait .close-detail {
  display: none !important;
}

.phone-portrait .detail-screen::before {
  left: 388px;
  top: -90px;
  width: 720px;
  height: 900px;
  clip-path: polygon(14% 0, 100% 0, 83% 58%, 100% 100%, 0 100%, 18% 44%);
}

.phone-portrait .detail-screen::after {
  right: 226px;
  top: -120px;
  width: 420px;
  height: 900px;
}

.phone-portrait .detail-big {
  left: 500px;
  top: 76px;
  width: 330px;
  font-size: 82px;
  overflow: hidden;
}

.phone-portrait .detail-tabs {
  left: 496px;
  top: 32px;
  z-index: 100;
  width: 330px;
  height: 34px;
  gap: 6px;
  padding: 3px 7px;
  background: rgba(3, 13, 78, 0.9);
  clip-path: polygon(5% 0, 100% 0, 94% 100%, 0 100%);
  box-shadow: -5px 6px 0 rgba(0, 0, 0, 0.48);
}

.phone-portrait .detail-tabs span:not(.tab-arrow) {
  display: none;
}

.phone-portrait .detail-tabs span,
.phone-portrait .detail-tabs b {
  min-width: 44px;
  height: 28px;
  padding: 0 9px;
  border-radius: 14px;
  font-size: 11px;
}

.phone-portrait .detail-tabs b {
  min-width: 124px;
}

.phone-portrait .detail-tabs .tab-arrow {
  min-width: 44px;
  font-size: 18px;
}

.phone-portrait .detail-sheet {
  left: 492px;
  top: 132px;
  width: 336px;
  min-height: 354px;
  padding: 18px 24px 22px;
  border-left: 7px solid #fff200;
  background:
    linear-gradient(104deg, rgba(255, 255, 255, 0.98) 0 74%, rgba(224, 253, 255, 0.96) 74% 100%);
  box-shadow: -10px 11px 0 rgba(0, 0, 0, 0.24);
}

.phone-portrait .detail-kicker {
  padding: 5px 13px 4px;
  font-size: 14px;
}

.phone-portrait .detail-sheet h2 {
  margin: 10px 0 8px;
  font-size: 37px;
  line-height: 0.9;
}

.phone-portrait .detail-sheet p {
  font-size: 16px;
  line-height: 1.12;
}

.phone-portrait .detail-list {
  gap: 7px;
  margin-top: 14px;
}

.phone-portrait .detail-item {
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 7px;
  min-height: 30px;
  font-size: 12px;
}

.phone-portrait .detail-item b {
  padding: 5px 8px;
}

.phone-portrait .detail-screen.page-skill .detail-sheet,
.phone-portrait .detail-screen.page-quest .detail-sheet {
  left: 492px;
  top: 440px;
  width: 336px;
  min-height: 86px;
  padding: 11px 20px 12px;
}

.phone-portrait .detail-screen.page-skill .detail-sheet h2,
.phone-portrait .detail-screen.page-quest .detail-sheet h2 {
  font-size: 26px;
}

.phone-portrait .detail-screen.page-skill .detail-sheet p,
.phone-portrait .detail-screen.page-quest .detail-sheet p {
  font-size: 12px;
  line-height: 1.08;
}

.phone-portrait .skill-cost {
  display: none;
}

.phone-portrait .skill-list {
  left: 500px;
  right: auto;
  top: 116px;
  width: 316px;
}

.phone-portrait .skill-list strong {
  font-size: 18px;
}

.phone-portrait .skill-list li,
.phone-portrait .inventory-panel li {
  margin-bottom: 7px;
  padding: 8px 24px 8px 13px;
  font-size: 15px;
}

.phone-portrait .inventory-panel,
.phone-portrait .request-board,
.phone-portrait .equip-stack,
.phone-portrait .persona-card-panel,
.phone-portrait .persona-skill-panel,
.phone-portrait .stats-card,
.phone-portrait .social-link-list,
.phone-portrait .calendar-panel,
.phone-portrait .system-menu-panel {
  left: 492px;
  width: 336px;
}

.phone-portrait .inventory-panel {
  top: 118px;
  min-height: 390px;
  padding: 16px 22px 20px;
}

.phone-portrait .inventory-panel b {
  font-size: 36px;
}

.phone-portrait .inventory-panel p {
  font-size: 13px;
}

.phone-portrait .p3r-subtabs {
  gap: 5px;
  font-size: 11px;
}

.phone-portrait .p3r-subtabs span {
  padding: 5px 9px;
}

.phone-portrait .request-board {
  top: 102px;
  padding: 12px 18px;
}

.phone-portrait .request-board strong {
  font-size: 28px;
}

.phone-portrait .request-board li {
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 8px;
  margin-top: 7px;
  padding: 6px 8px;
  font-size: 11px;
  line-height: 1.08;
}

.phone-portrait .equip-stack {
  top: 110px;
  padding-top: 38px;
}

.phone-portrait .equip-stack::before {
  font-size: 22px;
}

.phone-portrait .equip-row {
  grid-template-columns: 72px minmax(0, 1fr);
  min-height: 55px;
  padding: 8px 16px;
  font-size: 13px;
}

.phone-portrait .equip-row em {
  display: none;
}

.phone-portrait .persona-card-panel {
  top: 90px;
  height: 170px;
}

.phone-portrait .persona-card-top {
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 8px;
  padding: 18px 28px 8px 38px;
}

.phone-portrait .persona-card-top b {
  font-size: 31px;
}

.phone-portrait .persona-card-top em {
  display: none;
}

.phone-portrait .persona-icon-row,
.phone-portrait .persona-stat-lines {
  padding-left: 94px;
}

.phone-portrait .persona-stat-lines {
  flex-wrap: wrap;
  gap: 7px;
  font-size: 15px;
}

.phone-portrait .persona-skill-panel {
  top: 306px;
  bottom: auto;
  padding: 14px 18px;
}

.phone-portrait .persona-skill-panel li {
  grid-template-columns: 1fr 76px;
  font-size: 15px;
}

.phone-portrait .stats-card {
  right: auto;
  top: 110px;
  min-height: 430px;
  padding: 22px 24px 26px 38px;
}

.phone-portrait .stats-top {
  grid-template-columns: 72px minmax(0, 1fr);
}

.phone-portrait .stats-top b {
  font-size: 36px;
}

.phone-portrait .stats-top em {
  display: none;
}

.phone-portrait .stats-meters p {
  grid-template-columns: 48px 82px minmax(82px, 1fr);
  gap: 8px;
  font-size: 14px;
}

.phone-portrait .social-stat-strip,
.phone-portrait .party-mini-list {
  flex-wrap: wrap;
}

.phone-portrait .party-mini-list {
  left: 500px;
  bottom: 118px;
  width: 320px;
}

.phone-portrait .social-link-list {
  top: 116px;
}

.phone-portrait .link-row {
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 7px;
  font-size: 13px;
}

.phone-portrait .link-row em {
  display: none;
}

.phone-portrait .calendar-number {
  left: 478px;
  top: 34px;
  font-size: 164px;
  opacity: 0.36;
}

.phone-portrait .calendar-panel {
  top: 106px;
  height: 430px;
  padding: 24px 24px 28px;
}

.phone-portrait .calendar-header {
  gap: 8px;
  margin-left: 22px;
}

.phone-portrait .calendar-header b {
  font-size: 42px;
}

.phone-portrait .calendar-header em {
  display: none;
}

.phone-portrait .calendar-week,
.phone-portrait .calendar-days {
  grid-template-columns: repeat(7, 34px);
  gap: 5px;
  margin-left: 20px;
}

.phone-portrait .calendar-week span {
  height: 24px;
  font-size: 8px;
}

.phone-portrait .calendar-days span {
  width: 34px;
  height: 36px;
  font-size: 15px;
}

.phone-portrait .system-menu-panel {
  top: 128px;
}

.phone-portrait .system-row {
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 9px;
  margin-bottom: 8px;
  padding: 9px 15px;
  font-size: 12px;
}

.phone-portrait .system-row b {
  font-size: 21px;
}

.phone-portrait .shards span {
  opacity: 0.42;
  animation: none;
  transform: translate3d(0, 0, 0) rotate(-12deg);
}

.phone-portrait .screen-wipe,
.phone-landscape .screen-wipe {
  left: -36vw;
  top: -18vh;
  width: 170vw;
  height: 136vh;
}

.phone-portrait .screen-wipe::before,
.phone-landscape .screen-wipe::before {
  width: min(62vmin, 430px);
  height: min(62vmin, 430px);
}

.phone-portrait .screen-wipe::after,
.phone-landscape .screen-wipe::after {
  font-size: clamp(54px, 15vw, 104px);
}

.phone-portrait .screen-wipe.is-active,
.phone-landscape .screen-wipe.is-active,
.phone-portrait .screen-wipe.is-active::before,
.phone-landscape .screen-wipe.is-active::before,
.phone-portrait .screen-wipe.is-active::after,
.phone-landscape .screen-wipe.is-active::after {
  animation-duration: 420ms;
}

.phone-portrait .scene.detail-open.detail-enter .detail-tabs,
.phone-landscape .scene.detail-open.detail-enter .detail-tabs,
.phone-portrait .scene.detail-open.detail-enter .party-rail,
.phone-landscape .scene.detail-open.detail-enter .party-rail,
.phone-portrait .scene.detail-open.detail-enter .detail-sheet,
.phone-landscape .scene.detail-open.detail-enter .detail-sheet,
.phone-portrait .scene.detail-open.detail-enter .page-art,
.phone-landscape .scene.detail-open.detail-enter .page-art {
  animation-delay: 35ms;
  animation-duration: 360ms;
}

.phone-portrait .scene.detail-tab-shift .detail-tabs::before,
.phone-landscape .scene.detail-tab-shift .detail-tabs::before,
.phone-portrait .scene.detail-tab-shift .detail-big,
.phone-landscape .scene.detail-tab-shift .detail-big,
.phone-portrait .scene.detail-tab-shift .detail-sheet,
.phone-landscape .scene.detail-tab-shift .detail-sheet,
.phone-portrait .scene.detail-tab-shift .detail-badge,
.phone-landscape .scene.detail-tab-shift .detail-badge,
.phone-portrait .scene.detail-tab-shift .page-art,
.phone-landscape .scene.detail-tab-shift .page-art {
  animation-duration: 320ms !important;
}

.phone-portrait .persona-title-ghost,
.phone-portrait .persona-summon,
.phone-portrait .persona-affinity-grid,
.phone-portrait .stats-page-title,
.phone-portrait .stats-page-number,
.phone-portrait .stats-portrait-card,
.phone-portrait .social-title-ghost,
.phone-portrait .social-tarot-card,
.phone-portrait .social-character-card {
  display: none !important;
}

.phone-portrait .persona-roster {
  left: 492px;
  top: 94px;
  width: 336px;
}

.phone-portrait .persona-roster li {
  grid-template-columns: 98px 42px minmax(0, 1fr);
  height: 36px;
  margin-bottom: 4px;
  padding: 0 13px 0 16px;
  font-size: 15px;
}

.phone-portrait .persona-roster b {
  font-size: 18px;
}

.phone-portrait .persona-roster strong {
  font-size: 20px;
}

.phone-portrait .persona-command-panel {
  left: 492px;
  right: auto;
  bottom: 178px;
  width: 336px;
  text-align: left;
}

.phone-portrait .persona-command-panel b {
  font-size: 17px;
}

.phone-portrait .persona-command-panel ol {
  flex-wrap: wrap;
}

.phone-portrait .persona-command-panel li {
  padding: 6px 9px;
  font-size: 12px;
}

.phone-portrait .stats-shoulder-card {
  left: 500px;
  top: 106px;
  width: 328px;
  transform: skewX(-6deg);
}

.phone-portrait .stats-nav-line {
  display: none;
}

.phone-portrait .stats-summary-strip {
  grid-template-columns: 74px 28px 42px minmax(0, 1fr);
  min-height: 66px;
  padding: 8px 16px;
  clip-path: polygon(0 0, 100% 0, 91% 100%, 0 100%);
}

.phone-portrait .stats-summary-strip b {
  font-size: 16px;
}

.phone-portrait .stats-summary-strip span {
  font-size: 12px;
}

.phone-portrait .stats-summary-strip strong {
  font-size: 34px;
}

.phone-portrait .stats-summary-strip em {
  font-size: 10px;
}

.phone-portrait .stats-summary-strip em i {
  font-size: 18px;
}

.phone-portrait .stats-summary-strip em:last-child {
  display: none;
}

.phone-portrait .stats-persona-line {
  grid-template-columns: 126px minmax(0, 1fr);
  margin-top: 16px;
  min-height: 58px;
  padding: 8px 18px;
  clip-path: polygon(0 0, 100% 0, 91% 100%, 0 100%);
}

.phone-portrait .stats-persona-line span {
  font-size: 22px;
}

.phone-portrait .stats-persona-line b {
  font-size: 19px;
}

.phone-portrait .stats-attack-line {
  grid-template-columns: 72px 64px minmax(0, 1fr);
  margin-top: 16px;
  min-height: 58px;
  padding: 8px 14px;
  clip-path: polygon(0 0, 100% 0, 91% 100%, 0 100%);
}

.phone-portrait .stats-attack-line span {
  font-size: 12px;
}

.phone-portrait .stats-attack-line b,
.phone-portrait .stats-attack-line strong {
  font-size: 17px;
}

.phone-portrait .stats-attack-line strong:last-child {
  display: none;
}

.phone-portrait .stats-member-tabs {
  left: 492px;
  bottom: 178px;
  width: 336px;
  flex-wrap: wrap;
}

.phone-portrait .stats-member-tabs span {
  min-width: 62px;
  padding: 7px 8px;
  font-size: 12px;
}

.phone-portrait .social-rank-panel {
  left: 492px;
  top: 252px;
  width: 336px;
  min-height: 224px;
}

.phone-portrait .social-rank-top {
  height: 82px;
}

.phone-portrait .social-rank-top span {
  left: 28px;
  top: 38px;
  font-size: 13px;
}

.phone-portrait .social-rank-top b {
  left: 84px;
  top: 30px;
  font-size: 32px;
}

.phone-portrait .social-rank-top em {
  right: 24px;
  top: 18px;
  font-size: 16px;
}

.phone-portrait .social-rank-top strong {
  font-size: 52px;
}

.phone-portrait .social-rank-pips {
  flex-wrap: wrap;
  padding: 10px 34px 4px;
}

.phone-portrait .social-rank-panel p {
  margin: 10px 34px 0;
  width: 250px;
  font-size: 14px;
}

.phone-portrait .social-command-stack {
  left: 492px;
  bottom: 178px;
  width: 336px;
  flex-wrap: wrap;
}

.phone-portrait .social-command-stack span {
  font-size: 12px;
  padding: 7px 10px;
}

.phone-portrait .system-orb {
  left: 430px;
  top: 210px;
  width: 460px;
  height: 460px;
}

.phone-portrait .system-orb > b {
  left: -118px;
  bottom: 82px;
  font-size: 74px;
}

.phone-portrait .system-wheel-list {
  right: 38px;
  top: 82px;
  width: 260px;
  gap: 4px;
}

.phone-portrait .system-wheel-list span {
  font-size: 23px;
}

.phone-portrait .system-wheel-list span.selected {
  width: 258px;
  padding-left: 18px;
}

.phone-portrait .system-file-list {
  left: 492px;
  bottom: 178px;
  width: 336px;
}

.phone-portrait .system-file-list li {
  padding: 7px 12px;
  font-size: 12px;
}

.phone-portrait .system-caption {
  display: none;
}

/* Mobile repair pass: keep every detail page inside the visible phone slice. */
.phone-portrait .detail-tabs {
  top: 170px;
  left: 506px;
  width: 310px;
  padding: 4px 8px;
  background: rgba(4, 15, 78, 0.94);
  box-shadow: -5px 6px 0 rgba(0, 0, 0, 0.5);
}

.phone-portrait .skill-list,
.phone-portrait .inventory-panel,
.phone-portrait .equip-stack,
.phone-portrait .request-board,
.phone-portrait .calendar-panel {
  top: 214px;
}

.phone-portrait .skill-list {
  left: 518px;
  width: 296px;
}

.phone-portrait .skill-list strong {
  margin: 0 0 8px 18px;
}

.phone-portrait .skill-list li,
.phone-portrait .inventory-panel li {
  padding-right: 18px;
}

.phone-portrait .detail-screen.page-item .detail-sheet {
  display: none;
}

.phone-portrait .detail-screen.page-skill .detail-sheet,
.phone-portrait .detail-screen.page-quest .detail-sheet {
  left: 506px;
  width: 306px;
}

.phone-portrait .inventory-panel {
  left: 540px;
  width: 260px;
  min-height: 350px;
  padding: 14px 20px 18px;
}

.phone-portrait .equip-stack {
  left: 516px;
  width: 296px;
  overflow: visible;
  padding-top: 30px;
}

.phone-portrait .equip-row {
  grid-template-columns: 58px minmax(0, 1fr);
  margin-left: 4px;
  margin-right: 8px;
  padding-left: 16px;
  padding-right: 16px;
}

.phone-portrait .request-board {
  left: 512px;
  width: 302px;
  padding: 14px 18px;
}

.phone-portrait .calendar-panel {
  left: 512px;
  width: 302px;
  height: 314px;
  padding: 16px 18px 18px;
}

.phone-portrait .calendar-header {
  margin-left: 16px;
}

.phone-portrait .calendar-week,
.phone-portrait .calendar-days {
  margin-left: 14px;
}

.phone-portrait .calendar-event {
  display: block !important;
  left: 502px;
  top: 510px;
  bottom: auto;
  z-index: 7;
  width: 314px;
  padding: 10px 14px 12px;
  background: rgba(1, 13, 75, 0.92);
  box-shadow: -5px 6px 0 rgba(0, 0, 0, 0.28);
}

.phone-portrait .calendar-event b {
  font-size: 22px;
}

.phone-portrait .calendar-event span {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.08;
}

.phone-portrait .persona-roster,
.phone-portrait .stats-shoulder-card,
.phone-portrait .social-rank-panel,
.phone-portrait .persona-command-panel,
.phone-portrait .stats-member-tabs,
.phone-portrait .social-command-stack,
.phone-portrait .system-file-list {
  left: 516px;
  width: 292px;
}

.phone-portrait .persona-roster {
  left: 520px;
  width: 286px;
}

.phone-portrait .persona-roster {
  top: 214px;
}

.phone-portrait .persona-roster li {
  grid-template-columns: 76px 50px minmax(0, 1fr);
  column-gap: 6px;
  height: 29px;
  margin-bottom: 3px;
  padding: 0 11px 0 14px;
  font-size: 14px;
}

.phone-portrait .persona-roster li:nth-child(n+8) {
  display: none;
}

.phone-portrait .persona-roster b {
  font-size: 16px;
}

.phone-portrait .persona-roster strong {
  font-size: 18px;
}

.phone-portrait .persona-command-panel {
  top: 454px;
  bottom: auto;
  color: white;
  text-align: left;
  padding: 8px 10px 9px;
  background: rgba(1, 13, 75, 0.9);
  clip-path: polygon(6% 0, 100% 0, 92% 100%, 0 100%);
  text-shadow: -2px 2px 0 rgba(0, 0, 0, 0.85);
}

.phone-portrait .persona-command-panel b {
  display: block;
  width: 300px;
  font-size: 13px;
  line-height: 1.05;
}

.phone-portrait .persona-command-panel ol {
  justify-content: flex-start;
  gap: 5px;
  margin-top: 7px;
}

.phone-portrait .persona-command-panel li {
  padding: 6px 8px;
  font-size: 11px;
}

.phone-portrait .stats-shoulder-card {
  top: 214px;
}

.phone-portrait .stats-summary-strip {
  grid-template-columns: 72px 26px 40px minmax(0, 1fr);
  min-height: 58px;
  padding: 7px 13px;
}

.phone-portrait .stats-summary-strip b {
  font-size: 14px;
}

.phone-portrait .stats-summary-strip strong {
  font-size: 30px;
}

.phone-portrait .stats-summary-strip em {
  font-size: 9px;
}

.phone-portrait .stats-summary-strip em i {
  font-size: 16px;
}

.phone-portrait .stats-persona-line {
  grid-template-columns: 114px minmax(0, 1fr);
  margin-top: 10px;
  min-height: 48px;
  padding: 7px 14px;
}

.phone-portrait .stats-persona-line span {
  font-size: 19px;
}

.phone-portrait .stats-persona-line b {
  font-size: 17px;
}

.phone-portrait .stats-attack-line {
  grid-template-columns: 68px 58px minmax(0, 1fr);
  margin-top: 10px;
  min-height: 48px;
  padding: 7px 12px;
}

.phone-portrait .stats-attack-line span {
  font-size: 11px;
}

.phone-portrait .stats-attack-line b,
.phone-portrait .stats-attack-line strong {
  font-size: 15px;
}

.phone-portrait .stats-member-tabs {
  top: 438px;
  bottom: auto;
  gap: 6px;
}

.phone-portrait .stats-member-tabs span {
  min-width: 55px;
  padding: 6px 7px;
  font-size: 11px;
}

.phone-portrait .social-rank-panel {
  top: 214px;
  height: 290px;
  min-height: 290px;
  clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%);
  overflow: hidden;
}

.phone-portrait .social-rank-top {
  height: 74px;
}

.phone-portrait .social-rank-top span {
  left: 20px;
  top: 34px;
  padding: 5px 9px;
  font-size: 11px;
}

.phone-portrait .social-rank-top b {
  left: 70px;
  top: 29px;
  font-size: 29px;
}

.phone-portrait .social-rank-top em {
  right: 20px;
  top: 16px;
  font-size: 14px;
}

.phone-portrait .social-rank-top strong {
  font-size: 45px;
}

.phone-portrait .social-rank-pips {
  gap: 3px;
  padding: 9px 24px 3px;
}

.phone-portrait .social-rank-pips span {
  width: 19px;
  height: 19px;
  font-size: 18px;
}

.phone-portrait .social-rank-panel p {
  margin: 8px 24px 0;
  width: 224px;
  font-size: 14px;
  line-height: 1.1;
}

.phone-portrait .social-command-stack {
  left: 514px;
  top: 486px;
  bottom: auto;
  gap: 6px;
}

.phone-portrait .social-command-stack span {
  padding: 6px 9px;
  font-size: 11px;
}

.phone-portrait .system-orb {
  left: 510px;
  width: 296px;
  top: 166px;
  height: 270px;
  border-radius: 0;
  background: rgba(1, 29, 156, 0.86);
  clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
  border-top: 5px solid var(--red);
  border-bottom: 12px solid #050505;
  overflow: visible;
}

.phone-portrait .system-orb > b {
  display: none;
}

.phone-portrait .system-wheel-list {
  left: 24px;
  right: auto;
  top: 48px;
  width: 244px;
  gap: 3px;
}

.phone-portrait .system-wheel-list span {
  font-size: 20px;
  line-height: 1.05;
  word-spacing: 4px;
  min-height: 24px;
  overflow: visible;
}

.phone-portrait .system-wheel-list span.selected {
  width: 246px;
  padding-left: 16px;
}

.phone-portrait .system-file-list {
  top: 454px;
  bottom: auto;
}

.phone-portrait .system-file-list li {
  margin-bottom: 4px;
  padding: 6px 11px;
  font-size: 11px;
}

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

/* Document subpage uses the same scene background and menu wipe. */
.document-viewer[hidden]{display:none}
.document-viewer{position:absolute;inset:0;z-index:12;color:white;pointer-events:auto;background:transparent;font:16px Arial,sans-serif;}
.document-shell{position:absolute;inset:85px 105px 85px 105px;display:flex;flex-direction:column;}
.document-shell header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 12px;}
.document-shell small,.document-description,.document-shell footer>span{display:none}
.document-shell h2{display:inline-block;margin:0;padding:10px 24px;background:#061753;color:#5af3ff;transform:skewX(-8deg);font:italic 900 24px/1.12 Impact,'Arial Black',sans-serif;text-transform:uppercase;}
.document-close,.document-tabs button{border:0;transform:skewX(-8deg);background:#071753;color:#5af3ff;padding:10px 20px;cursor:pointer;font:italic 900 17px Impact,'Arial Black',sans-serif;}
.document-close{white-space:nowrap;background:white;color:#061753;}
.document-close:hover,.document-close:focus-visible,.document-tabs button:hover{background:#ffdf36;color:#061753;outline:2px solid white;}
.document-tabs{display:flex;gap:8px;flex-shrink:0;margin-bottom:12px;}
.document-tabs button[aria-pressed=true]{background:white;color:#061753;}
.document-paper{flex:1;min-height:0;background:transparent;border:4px solid white;box-shadow:-10px 10px 0 #061753;}
.document-paper iframe{height:100%;width:100%;border:0;background:white;display:block;}
.document-shell footer{display:flex;justify-content:flex-end;margin-top:12px;}
.document-external{display:inline-block;transform:skewX(-8deg);background:#071753;color:white;padding:7px 18px;font:italic 900 15px Impact,'Arial Black',sans-serif;}
.document-link-card{height:100%;box-sizing:border-box;background:#061753eb;color:white;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:25px;padding:35px;text-align:center;}
.document-link-card a{background:white;color:#061753;padding:12px 25px;}
.document-page-open .detail-screen>*{visibility:hidden;pointer-events:none}
.document-page-open .bottom-hints,.document-page-open .command-prompt{visibility:hidden}
.document-arriving .document-paper{animation:document-land 650ms 100ms cubic-bezier(.16,1,.3,1) both;}
.document-arriving header{animation:document-heading 450ms 60ms cubic-bezier(.16,1,.3,1) both;}
.document-arriving .document-tabs{animation:document-heading 500ms 130ms cubic-bezier(.16,1,.3,1) both;}
@keyframes document-land{from{opacity:0;transform:translate(170px,60px) rotate(-7deg) scale(.85)}to{opacity:1;transform:none}}
@keyframes document-heading{from{opacity:0;transform:translateX(-100px)}to{opacity:1;transform:none}}
.calendar-event [data-resume-record]{pointer-events:auto;cursor:pointer}
.social-command-stack{max-height:350px;overflow:auto;pointer-events:auto}
@media(prefers-reduced-motion:reduce){.document-arriving .document-paper,.document-arriving header,.document-arriving .document-tabs{animation:none}}
.phone-portrait .document-shell{inset:90px 40px 85px;}

.document-page-open .stage-scale > :not(.classroom):not(.detail-screen):not(.document-viewer){visibility:hidden;pointer-events:none}
.phone-portrait .document-shell{inset:auto;left:var(--doc-left);top:var(--doc-top);width:var(--doc-width);height:var(--doc-height)}
.phone-portrait .document-shell h2{font-size:16px;padding:8px 12px}
.phone-portrait .document-close{font-size:13px;padding:10px}
.phone-portrait .document-tabs{flex-wrap:wrap}
.phone-portrait .document-tabs button{font-size:12px;padding:8px 12px}
.phone-portrait .document-external{font-size:12px}
/* Paper presentation, with no embedded PDF chrome. */
.document-paper{border:0;box-shadow:none;display:flex;flex-direction:column;position:relative;overflow:visible;background:none;}
.paper-gallery{flex:1;min-height:0;padding:18px 24px;overflow:auto;display:flex;align-items:center;justify-content:center;scrollbar-color:#5af3ff #061753;}
.paper-outline{position:relative;height:100%;max-width:100%;padding:9px;background:#fffff6;border:2px solid #061753;box-shadow:7px 7px 0 #5af3ff,-7px -7px 0 #061753,14px 17px 0 #06175388;transform:rotate(-1deg);box-sizing:border-box;cursor:zoom-in;}
.paper-outline::before{content:'';position:absolute;inset:-14px;pointer-events:none;border:2px solid #fff;clip-path:polygon(0 0,28% 0,28% 2%,2% 2%,2% 28%,0 28%,0 0,100% 100%,72% 100%,72% 98%,98% 98%,98% 72%,100% 72%,100% 100%);}
.paper-image{height:100%;width:auto;max-width:100%;object-fit:contain;display:block;background:white;}
.paper-paging{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:10px;font:italic 900 18px Impact,sans-serif;color:#061753;}
.paper-paging span{background:white;padding:6px 18px;transform:skew(-8deg);}
.paper-paging button{border:0;padding:8px 20px;background:#061753;color:white;cursor:pointer;transform:skew(-8deg);}
.paper-paging button:disabled{opacity:.35;cursor:default}
.paper-gallery.is-zoomed{display:block;text-align:center;}
.paper-gallery.is-zoomed .paper-outline{height:auto;width:94%;margin:15px auto;cursor:zoom-out;transform:none;}
.paper-gallery.is-zoomed .paper-image{height:auto;width:100%;}
.paper-turn{animation:paper-turn-in 400ms cubic-bezier(.16,1,.3,1) both;}
@keyframes paper-turn-in{from{opacity:0;transform:translateX(65px) rotate(5deg)}to{opacity:1;transform:rotate(-1deg)}}
@media(prefers-reduced-motion:reduce){.paper-turn{animation:none}}

.reference-detail::before,.reference-detail::after{display:none}
.reference-detail>.detail-big,.reference-detail>.detail-tabs,.reference-detail>.detail-sheet,.reference-detail>.detail-badge{display:none!important}
.reference-detail .page-art{inset:0;pointer-events:auto;}
.ref-page{position:absolute;inset:0;color:#66ffff;overflow:hidden;--list-left:35px;--list-top:120px;--list-width:500px;--panel-left:700px;--panel-top:400px;--panel-width:490px;}
.ref-art{position:absolute;inset:0;background-position:center;background-size:100% 100%;pointer-events:none;}
.ref-page-word{position:absolute;left:-10px;top:-45px;font:italic 900 115px/.9 Impact,'Arial Black',sans-serif;letter-spacing:-4px;color:#fff9;transform:rotate(-5deg);white-space:nowrap;pointer-events:none;}
.ref-nav{position:absolute;left:52px;top:65px;width:505px;display:flex;align-items:center;justify-content:space-between;gap:12px;z-index:4;transform:skew(-8deg);}
.ref-nav button{border:0;background:transparent;color:white;text-shadow:2px 2px #061753,-1px -1px #061753;font:italic 900 36px/1 Impact,sans-serif;cursor:pointer;}
.ref-nav button:hover,.ref-nav button:focus-visible{color:#ff0745;outline:none}
.ref-nav b{padding:5px 35px;background:white;color:#061753;font:italic 900 18px Impact,sans-serif;clip-path:polygon(5% 0,100% 0,95% 100%,0 100%);}
.ref-list{position:absolute;left:var(--list-left);top:var(--list-top);width:var(--list-width);max-height:495px;overflow:auto;padding:4px 18px 14px 8px;transform:skew(-7deg);scrollbar-width:thin;scrollbar-color:#5af3ff #001449;z-index:4;}
.ref-row{position:relative;display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:9px;width:100%;min-height:44px;margin:0 0 5px;padding:8px 18px;border:0;background:#020513ed;color:#5af3ff;text-align:left;font:700 19px/1.1 Arial,sans-serif;clip-path:polygon(3% 0,100% 0,97% 100%,0 100%);cursor:pointer;transition:transform 130ms;}
.ref-row::before{content:'';position:absolute;inset:0 auto 0 0;width:5px;background:#5af3ff;}
.ref-row.selected{background:white;color:#07144b;outline:none;border-top:4px solid #ff003e;transform:translateX(7px);}
.ref-row-no{font:italic 900 19px Impact,sans-serif;opacity:.7}
.ref-row-title{min-width:0;font-family:Georgia,serif;font-size:19px;}
.ref-row em{font:italic 900 18px Impact,sans-serif;color:inherit;white-space:nowrap;}
.ref-record-panel{position:absolute;left:var(--panel-left);top:var(--panel-top);width:var(--panel-width);max-height:260px;padding:16px 24px;background:#03094bdd;transform:skew(-6deg);z-index:4;box-sizing:border-box;border-top:3px solid #5af3ff;}
.ref-record-heading{display:flex;align-items:center;gap:12px;}
.ref-record-index{font:italic 900 46px/.9 Impact,sans-serif;color:white;}
.ref-record-heading h2{margin:0;color:#5af3ff;font:italic 900 25px/1.05 Impact,sans-serif;}
.ref-record-description{max-height:140px;overflow:auto;scrollbar-width:thin;margin:12px 0 10px;color:white;font:16px/1.35 Georgia,serif;}
.ref-record-open{border:0;background:white;color:#061753;padding:7px 15px;font:italic 900 15px Impact,sans-serif;cursor:pointer;}
.ref-record-open:hover,.ref-record-open:focus-visible{background:#ffdb31;outline:2px solid #5af3ff;}
.ref-help{position:absolute;right:30px;bottom:30px;text-align:right;color:white;z-index:3;text-shadow:1px 1px #001444;}
.ref-help i{display:block;font:italic 900 20px Impact,sans-serif;}.ref-help small{font:13px Arial,sans-serif;}
.scene.detail-open:has(.reference-detail) .prompt{display:none;}
.ref-skill{--list-top:100px;--list-width:525px;--panel-left:820px;--panel-top:110px;--panel-width:410px;}
.ref-skill .ref-record-panel{background:#061753cf;max-height:425px;}
.ref-skill .ref-record-description{max-height:240px;}
.ref-item{--list-left:620px;--list-top:130px;--list-width:600px;--panel-left:620px;--panel-top:360px;--panel-width:570px;}
.ref-item .ref-nav{left:630px;width:550px;}.ref-item .ref-page-word{left:0;top:-15px;font-size:155px;}
.ref-item .ref-list{max-height:210px;}.ref-item .ref-record-panel{max-height:235px;}
.ref-equip{--list-left:35px;--list-top:150px;--list-width:670px;--panel-left:65px;--panel-top:460px;--panel-width:590px;}
.ref-equip .ref-nav{left:50px;width:670px;top:55px;}.ref-equip .ref-page-word{font-size:85px;top:-15px;left:30px;}
.ref-equip .ref-list{max-height:300px;}.ref-equip .ref-record-panel{max-height:150px;}.ref-equip .ref-record-description{max-height:65px;}
.ref-persona{--list-left:35px;--list-top:130px;--list-width:525px;--panel-left:650px;--panel-top:420px;--panel-width:565px;}
.ref-persona .ref-list{max-height:465px;}.ref-persona .ref-page-word{font-size:135px;top:-15px;}
.ref-stats{--list-left:20px;--list-top:105px;--list-width:520px;--panel-left:40px;--panel-top:360px;--panel-width:500px;}
.ref-stats .ref-nav{left:600px;top:60px;width:575px;}.ref-stats .ref-record-panel{max-height:240px;}.ref-stats .ref-page-word{font-size:90px;top:0;}
.ref-quest{--list-left:45px;--list-top:140px;--list-width:800px;--panel-left:70px;--panel-top:465px;--panel-width:720px;}
.ref-quest .ref-list{max-height:315px;}.ref-quest .ref-nav{width:780px;top:80px;}.ref-quest .ref-page-word{top:-15px;font-size:120px;}.ref-quest .ref-record-panel{max-height:145px;}.ref-quest .ref-record-description{max-height:55px;}
.ref-social-link{--list-left:40px;--list-top:135px;--list-width:540px;--panel-left:690px;--panel-top:470px;--panel-width:520px;}
.ref-social-link .ref-row{min-height:55px;}.ref-social-link .ref-list{max-height:455px;}.ref-social-link .ref-page-word{font-size:100px;top:0;}
.ref-calendar{--list-left:805px;--list-top:100px;--list-width:430px;--panel-left:805px;--panel-top:300px;--panel-width:420px;}
.ref-calendar .ref-list{max-height:190px;}.ref-calendar .ref-row{grid-template-columns:24px 1fr;}.ref-calendar .ref-row em{grid-column:2;font-size:16px;}.ref-calendar .ref-nav{left:760px;top:35px;width:460px;}.ref-calendar .ref-page-word{top:0;font-size:105px;}.ref-calendar .ref-record-panel{max-height:305px;}.ref-calendar .ref-record-description{max-height:175px;}
.ref-calendar .ref-record-heading h2{font-size:23px;}
.ref-calendar .ref-art{opacity:.65;}
.ref-calendar .ref-calendar{position:absolute;left:35px;top:125px;width:700px;color:white;}
.ref-month{display:flex;align-items:center;gap:20px;}.ref-month strong{font:italic 900 100px/1 Impact,sans-serif;color:#ff1d63}.ref-month b{font:italic 900 28px Impact,sans-serif;}.ref-month span{display:block;color:#5af3ff;font-size:20px;}
.ref-week,.ref-days{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;text-align:center;}.ref-week{font:italic 900 17px Impact,sans-serif;margin:15px 0;}.ref-days button{background:transparent;border:0;color:white;font:italic 28px/1.2 Georgia,serif;cursor:pointer;padding:8px;}.ref-days button.selected,.ref-days button:hover{background:#ffcb26;color:#061753;border-radius:50%;}.ref-calendar p{font:17px/1.5 Georgia,serif;margin-top:15px;color:#b4ffff;}
.ref-system{--list-left:530px;--list-top:160px;--list-width:675px;--panel-left:490px;--panel-top:440px;--panel-width:680px;}
.ref-system .ref-nav{left:520px;width:680px;top:85px;}.ref-system .ref-page-word{left:0;top:270px;transform:rotate(55deg);font-size:140px;color:#fff;}.ref-system .ref-row{background:transparent;min-height:55px;}.ref-system .ref-row-title{font:italic 900 25px Impact,sans-serif;}.ref-system .ref-row.selected{background:white;}.ref-system .ref-row-no{display:none;}.ref-system .ref-row{grid-template-columns:1fr 45px;}.ref-system .ref-record-panel{top:470px;max-height:160px;}.ref-system .ref-list{max-height:300px;}.ref-system .ref-record-description{max-height:70px;}
.ref-detail-change{animation:ref-note-in 240ms ease-out both;}
@keyframes ref-note-in{from{opacity:.4;translate:15px 0}to{opacity:1;translate:0 0}}
.scene.detail-enter .ref-list{animation:ref-list-enter 550ms 100ms cubic-bezier(.16,1,.3,1) both;}
.scene.detail-enter .ref-art{animation:ref-art-enter 650ms 80ms cubic-bezier(.16,1,.3,1) both;}
.scene.detail-enter .ref-record-panel{animation:ref-note-in 450ms 180ms ease-out both;}
@keyframes ref-list-enter{from{opacity:0;translate:-120px 0}to{opacity:1;translate:0 0}}
@keyframes ref-art-enter{from{translate:130px 0;scale:1.08}to{translate:0 0;scale:1}}
/* Document sheets stay in the same full-page scene. */
.document-shell h2{border-top:4px solid #ff0342;box-shadow:-7px 6px 0 #ffffffaa;}
.paper-outline{box-shadow:8px 9px 0 #5af3ff,-8px -8px 0 #061753,18px 20px 0 #06175388;}
.paper-outline::after{content:'';position:absolute;right:-18px;top:10%;height:52%;width:5px;background:#ff0342;transform:skewY(-35deg);}
@media(prefers-reduced-motion:reduce){.ref-detail-change,.scene.detail-enter .ref-list,.scene.detail-enter .ref-art,.scene.detail-enter .ref-record-panel{animation:none}}
/* Portrait composition: retain angled lists, artwork, and a dedicated detail area. */
html.phone-portrait .scene{left:0;top:0;width:100vw;height:100dvh;transform:none;contain:layout paint size;}html.phone-portrait .scene.detail-open .stage-scale{width:100%;height:100%;transform:none;}
html.phone-portrait .reference-detail .ref-page{inset:0;width:100%;height:100%;}
html.phone-portrait .ref-art{background-size:auto 100%;background-position:60% center;opacity:.55;}
html.phone-portrait .ref-page .ref-page-word{left:12px;top:10px;font-size:61px;transform:rotate(-6deg);color:#fff9;}
html.phone-portrait .ref-page .ref-nav{left:16px;top:77px;width:calc(100% - 32px);}
html.phone-portrait .ref-nav button{font-size:28px;}
html.phone-portrait .ref-nav b{font-size:16px;padding:6px 16px;}
html.phone-portrait .ref-page .ref-list{left:14px;top:125px;width:calc(100% - 32px);max-height:34dvh;padding:5px 8px 12px 0;box-sizing:border-box;}
html.phone-portrait .ref-row{min-height:43px;grid-template-columns:24px minmax(0,1fr) auto;gap:7px;padding:9px 14px;margin-bottom:5px;}
html.phone-portrait .ref-row-title{font-size:16px;line-height:1.2;}
html.phone-portrait .ref-row-no{font-size:16px;}
html.phone-portrait .ref-row em{font-size:14px;}
html.phone-portrait .ref-page .ref-record-panel{left:22px;top:calc(135px + 34dvh);width:calc(100% - 44px);max-height:calc(66dvh - 270px);padding:13px 16px;transform:skew(-4deg);display:flex;flex-direction:column;}
html.phone-portrait .ref-record-index{font-size:33px;}
html.phone-portrait .ref-record-heading h2{font-size:21px;}
html.phone-portrait .ref-page .ref-record-description{font-size:15px;line-height:1.4;max-height:110px;overflow:auto;min-height:25px;}
html.phone-portrait .ref-record-open{align-self:flex-start;font-size:14px;flex-shrink:0;}
html.phone-portrait .ref-help{right:18px;bottom:120px;max-width:90%;}
html.phone-portrait .ref-help i{font-size:14px;}.phone-portrait .ref-help small{display:none;}
html.phone-portrait .ref-calendar .ref-calendar{left:22px;top:125px;width:calc(100% - 44px);}
html.phone-portrait .ref-month strong{font-size:45px;}.phone-portrait .ref-month b{font-size:18px;}.phone-portrait .ref-month span{font-size:14px;}
html.phone-portrait .ref-week{margin:5px 0;font-size:12px;gap:2px;}
html.phone-portrait .ref-days{gap:1px;}.phone-portrait .ref-days button{font-size:18px;padding:3px;}
html.phone-portrait .ref-calendar .ref-calendar p{display:none;}
html.phone-portrait .ref-calendar .ref-list{top:370px;max-height:120px;}
html.phone-portrait .ref-calendar .ref-record-panel{top:505px;max-height:calc(100dvh - 650px);}
html.phone-portrait .ref-calendar .ref-row em{grid-column:auto;}
html.phone-portrait .ref-system .ref-row{grid-template-columns:1fr 25px;}
/* Keep only the reference's character art; reconstruct all UI natively. */
.ref-page::before{content:'';position:absolute;inset:0;background:#fff;clip-path:polygon(0 0,43% 0,18% 100%,0 100%);pointer-events:none;}
.ref-skill::before{clip-path:polygon(0 0,43% 0,39% 100%,0 100%);}
.ref-item::before{clip-path:polygon(0 0,58% 0,38% 100%,0 100%);}
.ref-equip::before{clip-path:polygon(0 0,72% 0,42% 100%,0 100%);}
.ref-persona::before{clip-path:polygon(0 0,57% 0,28% 100%,0 100%);}
.ref-stats::before{clip-path:polygon(0 0,30% 0,54% 100%,0 100%);}
.ref-quest::before{clip-path:polygon(0 0,20% 0,1% 100%,0 100%);}
.ref-social-link::before{clip-path:polygon(73% 0,100% 0,100% 100%,32% 100%);}
.ref-calendar::before{clip-path:ellipse(65% 95% at 18% 0%);}
.ref-system::before{clip-path:polygon(0 0,28% 0,53% 100%,0 100%);}
.ref-page .ref-art{z-index:1;}.ref-page .ref-page-word{z-index:2;}
.ref-page-word{color:#0617532a;}
.ref-calendar .ref-calendar{z-index:3;}
.ref-calendar .ref-week,.ref-calendar .ref-days button{color:#061753;}
.ref-calendar .ref-calendar p{color:#061753;}
.scene.detail-open .wallet,.scene.detail-open .date-card,.scene.detail-open .music-select,.scene.detail-open .music-volume,.scene.detail-open .music-toggle{visibility:hidden;pointer-events:none;}
.scene.detail-open .white-slab,.scene.detail-open .side-word,.scene.detail-open .mega-word,.scene.detail-open .shards{opacity:0;}
.ref-persona .ref-art{background-position:center -5px;}
.ref-persona .ref-record-panel{top:415px;}
html.phone-portrait .ref-page::before{opacity:.75;clip-path:polygon(0 0,70% 0,15% 100%,0 100%);}
html.phone-portrait .ref-page .ref-page-word{color:#06175335;}
html.phone-portrait .ref-calendar .ref-week,html.phone-portrait .ref-calendar .ref-days button{color:#061753;}
.scene.detail-enter .ref-row{animation:ref-row-arrive 350ms calc(100ms + var(--ref-i)*35ms) cubic-bezier(.16,1,.3,1) both;}
@keyframes ref-row-arrive{from{opacity:0;translate:-60px 0}to{opacity:1;translate:0 0}}
.ref-art{animation:reference-idle 7s ease-in-out infinite alternate;}
@keyframes reference-idle{from{translate:0 0}to{translate:0 3px}}
html.phone-portrait .ref-help{bottom:142px;}
html.phone-portrait .ref-record-description:focus-visible{outline:2px solid white;}
@media(prefers-reduced-motion:reduce){.ref-art,.scene.detail-enter .ref-row{animation:none}}
.ref-record-panel{display:flex;flex-direction:column;overflow:hidden;}
.ref-record-heading{flex-shrink:0;}
.ref-record-description{min-height:0;flex:1;}
.ref-record-open{align-self:flex-start;flex-shrink:0;}
.ref-social-link .ref-record-panel{top:425px;max-height:220px;}
.ref-persona .ref-record-panel{max-height:220px;}
html.phone-portrait .ref-social-link .ref-record-panel{top:calc(135px + 34dvh);max-height:calc(66dvh - 270px);}
.scene.detail-open:has(.reference-detail) .close-detail{display:none;}
.ref-help button{border:0;background:none;color:white;font:italic 17px Impact,sans-serif;margin-left:12px;padding:5px;cursor:pointer;}
.ref-help button span{display:inline-block;border:2px solid white;padding:1px 4px;font:12px Arial,sans-serif;}
.ref-help button:hover,.ref-help button:focus-visible{color:#5af3ff;outline:none;}
.ref-help small{display:inline-block;}
html.phone-portrait .ref-help button{display:none;}

/* Original artwork and procedural motion, never video-frame backgrounds. */
.ref-page{--pointer-x:0px;--pointer-y:0px;}
.ref-page .ref-art{inset:auto;left:550px;top:5px;width:460px;height:700px;background:none!important;animation:none;overflow:visible;pointer-events:none;transform:translate(var(--pointer-x),var(--pointer-y));transition:transform 140ms ease-out;}
.ref-art img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(12px 16px 0 #00226a44);--art-angle:180deg;animation:original-character-float 5.5s ease-in-out infinite;transform-origin:50% 50%;}
.ref-page .ref-art-stats{left:610px;top:130px;width:650px;height:520px;}
.ref-art-stats img,.ref-art-social-link img{--art-angle:0deg;}
.ref-page .ref-art-persona{left:660px;top:70px;width:560px;height:530px;}
.ref-art-persona img{--art-angle:-8deg;animation-duration:4.8s;}
.ref-page .ref-art-item{left:120px;top:140px;width:500px;height:560px;}
.ref-page .ref-art-equip{left:760px;top:80px;width:500px;height:630px;}
.ref-art-equip img{--art-angle:-28deg;}
.ref-page .ref-art-quest{left:850px;top:120px;width:400px;height:520px;}
.ref-art-quest img{--art-angle:10deg;}
.ref-page .ref-art-social-link{left:690px;top:65px;width:580px;height:570px;}
.ref-page .ref-art-calendar{left:760px;top:40px;width:380px;height:580px;opacity:.12;}
.ref-page .ref-art-system{left:75px;top:120px;width:460px;height:540px;}
.ref-art-system img{--art-angle:15deg;}
.ref-current{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:.45;}
.ref-current svg{width:120%;height:100%;margin-left:-10%;fill:none;stroke:#5af3ff;stroke-width:55;}
.ref-current-a{animation:water-current-a 8s ease-in-out infinite alternate;}
.ref-current-b{stroke:#1c8cff;stroke-width:100;opacity:.55;animation:water-current-b 10s ease-in-out infinite alternate;}
.ref-shards{position:absolute;inset:0;pointer-events:none;z-index:2;overflow:hidden;}
.ref-shards i{position:absolute;left:var(--shard-x);top:var(--shard-y);width:var(--shard-size);height:calc(var(--shard-size)*1.7);background:#6ffaffaa;clip-path:polygon(20% 0,100% 20%,65% 100%,0 65%);animation:original-shard-drift 7s var(--shard-delay) ease-in-out infinite alternate;}
.ref-shards i:nth-child(4n){background:#ff1c7f;opacity:.65;}.ref-shards i:nth-child(3n){background:white;opacity:.5;}
.ref-emblem{position:absolute;right:90px;top:90px;width:410px;height:410px;border:1px solid #5af3ff55;border-radius:50%;pointer-events:none;opacity:.45;animation:emblem-orbit 35s linear infinite;}
.ref-emblem::before,.ref-emblem::after{content:'';position:absolute;inset:20px;border:2px dashed #b7ffff88;border-radius:50%;}
.ref-emblem::after{inset:45px;border:1px solid #5af3ff77;}
.ref-emblem i,.ref-emblem b{position:absolute;inset:60px;border:1px solid #5af3ff88;transform:rotate(45deg);}
.ref-emblem b{transform:rotate(15deg);}
.ref-row{transition:transform 180ms cubic-bezier(.16,1,.3,1),background-color 120ms,color 120ms;}
.ref-row.selected{box-shadow:-6px 0 0 #ff0446;}
.ref-row.selected::after{content:'';position:absolute;right:5px;top:10px;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:9px solid #ff0446;animation:selected-marker-beat 1.2s ease-in-out infinite alternate;}
.ref-record-panel.ref-detail-change{animation:original-record-flip 360ms cubic-bezier(.16,1,.3,1) both;}
.paper-outline{transition:filter 250ms,box-shadow 250ms;}
.paper-outline:hover{filter:brightness(1.035);box-shadow:12px 12px 0 #5af3ff,-10px -9px 0 #061753,24px 25px 0 #06175366;}
@keyframes original-character-float{0%,100%{transform:translateY(0) rotate(var(--art-angle))}50%{transform:translateY(-15px) rotate(calc(var(--art-angle) + 1.7deg))}}
@keyframes water-current-a{from{transform:translate(-40px,35px) rotate(-3deg)}to{transform:translate(45px,-25px) rotate(3deg)}}
@keyframes water-current-b{from{transform:translate(40px,-30px)}to{transform:translate(-50px,40px)}}
@keyframes original-shard-drift{from{transform:translate(-10px,20px) rotate(0deg);opacity:.15}to{transform:translate(18px,-35px) rotate(35deg);opacity:.8}}
@keyframes emblem-orbit{to{transform:rotate(360deg)}}
@keyframes selected-marker-beat{from{translate:-3px 0}to{translate:1px 0}}
@keyframes original-record-flip{from{opacity:0;translate:30px 0;rotate:1.5deg}to{opacity:1;translate:0 0;rotate:0deg}}
html.phone-portrait .ref-page .ref-art{left:42%;top:80px;width:70%;height:calc(100dvh - 190px);opacity:.26;}
html.phone-portrait .ref-page .ref-art-stats,html.phone-portrait .ref-page .ref-art-social-link{left:25%;top:150px;width:95%;height:480px;opacity:.3;}
html.phone-portrait .ref-page .ref-emblem{width:290px;height:290px;right:-80px;top:150px;opacity:.35;}
@media(prefers-reduced-motion:reduce){.ref-art img,.ref-current-a,.ref-current-b,.ref-shards i,.ref-emblem,.ref-row.selected::after,.ref-record-panel.ref-detail-change{animation:none!important}.ref-page .ref-art{transform:none;transition:none;}}
/* Keep the old main-menu illustration only on the main menu. */
.scene.detail-open .stage-scale>.hero-figure{display:none!important;}

/* Identity artwork: preserve the menu composition with painted blue light. */
.hero-figure .hoang-menu-character{width:100%;height:100%;object-fit:contain;filter:drop-shadow(16px 8px 0 #00196866) drop-shadow(-5px 0 12px #13cbff44);animation:hoang-menu-drift 6s ease-in-out infinite;}
.ref-art img{filter:drop-shadow(16px 18px 0 #00185366) drop-shadow(-4px 0 8px #17dfff33);}
.ref-art-persona img,.ref-art-system img,.ref-art-quest img{--art-angle:0deg;}
@keyframes hoang-menu-drift{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-12px) rotate(-1deg)}}
@media(prefers-reduced-motion:reduce){.hero-figure .hoang-menu-character{animation:none;}}

/* Menu rhythm and selector motion studied from deltea/p3r-pause-menu. */
.scene:not(.detail-open) .menu-stack{top:174px;left:500px;transform:rotate(-3deg) skewX(-4deg);}
.menu-item:nth-child(1){--word-angle:-20deg;--word-offset:-25px;color:#77fefc;}
.menu-item:nth-child(2){--word-angle:-12deg;--word-offset:14px;color:#16cffb;}
.menu-item:nth-child(3){--word-angle:-17deg;--word-offset:-5px;color:#7de6fd;}
.menu-item:nth-child(4){--word-angle:-12deg;--word-offset:-28px;color:#77fefc;}
.menu-item:nth-child(5){--word-angle:0deg;--word-offset:8px;color:#16cffb;}
.menu-item:nth-child(6){--word-angle:-11deg;--word-offset:-14px;color:#7de6fd;}
.menu-item:nth-child(7){--word-angle:-5deg;--word-offset:0px;color:#77fefc;}
.menu-item:nth-child(8){--word-angle:-2deg;--word-offset:-20px;color:#16cffb;}
.menu-item:nth-child(9){--word-angle:8deg;--word-offset:20px;color:#7de6fd;}
.menu-item.active{transform:translateX(-8px) scale(1.25);}
.menu-item.active::before{display:block;left:calc(var(--word-offset) + 11px);top:-4px;width:var(--selector-width,280px);height:50px;background:#fd77d9;clip-path:polygon(0 100%,100% 0,86% 96%);rotate:var(--word-angle);transform:scale(1.04);opacity:1;animation:reference-selector-beat 750ms infinite;}
.menu-item.active .menu-label{--selection-cut:polygon(0 100%,100% 0,86% 100%);}
.scene.selection-change .menu-item.active{animation:reference-selection-spring 240ms cubic-bezier(.16,1.5,.35,1);}
@keyframes reference-selection-spring{0%{transform:translateX(-8px) scale(1)}65%{transform:translateX(-8px) scale(1.3)}100%{transform:translateX(-8px) scale(1.25)}}
@keyframes reference-selector-beat{0%,79%,100%{transform:scale(1.04)}87%{transform:scale(1.09)}93%{transform:scale(1.04)}}
@media(prefers-reduced-motion:reduce){.menu-item.active::before,.scene.selection-change .menu-item.active{animation:none;}}
.phone-portrait .scene:not(.detail-open) .menu-stack{left:552px;top:116px;transform:rotate(-6deg) skewX(-4deg);}
.phone-portrait .menu-item.active::before{height:38px;box-shadow:none;}
body:not(.phone-portrait) .menu-item{height:44px;}

/* Fit the actual rotated words, including the enlarged selection. */
.scene:not(.detail-open) .menu-stack{top:138px;transform:none;}
.phone-portrait .scene:not(.detail-open) .menu-stack{top:116px;transform:none;}
.menu-stack .menu-item{position:absolute;height:44px;}
.menu-stack .menu-item .menu-label,.menu-stack .menu-item .menu-shadow{font-size:var(--fitted-menu-font,34px);}
.menu-stack.menu-measuring *,.menu-stack.menu-measuring *::before,.menu-stack.menu-measuring *::after{animation:none!important;transition:none!important;}
.hero-figure .hoang-menu-character,.ref-art img{filter:drop-shadow(1px 0 0 #0065c9);}
.menu-item:nth-child(1){--word-angle:-12deg;}
.menu-item:nth-child(2),.menu-item:nth-child(4){--word-angle:-7deg;}
.menu-item:nth-child(3){--word-angle:-8deg;}
.menu-item:nth-child(6){--word-angle:-6deg;}
.menu-item:nth-child(7){--word-angle:-3deg;}
.menu-item:nth-child(9){--word-angle:6deg;}
.menu-stack .menu-item.active::before{height:calc(var(--fitted-menu-font,34px) * 1.15);top:0;}
/* Hand-drawn SVG scene: no raster character or video background. */
.classroom{overflow:hidden;}
.coded-classroom{position:absolute;inset:0;width:100%;height:100%;opacity:.78;}
.classroom>.window,.classroom>.desk,.classroom>.student{display:none;}
.hero-figure>.coded-character{width:100%;height:100%;overflow:visible;animation:coded-body-drift 7s ease-in-out infinite;}
.coded-character .vector-coat{transform-origin:210px 240px;animation:coded-coat-sway 5s ease-in-out infinite;}
.coded-character .vector-arm-low{transform-origin:145px 215px;animation:coded-arm-sway 6s ease-in-out infinite;}
.coded-character .vector-legs{transform-origin:210px 395px;animation:coded-leg-sway 7s ease-in-out infinite;}
.ref-art>.coded-character{height:100%;width:100%;overflow:visible;--art-angle:180deg;animation:original-character-float 6s ease-in-out infinite;}
.ref-art-stats>.coded-character,.ref-art-social-link>.coded-character,.ref-art-persona>.coded-character,.ref-art-quest>.coded-character,.ref-art-system>.coded-character{--art-angle:0deg;}
.ref-art-equip>.coded-character{--art-angle:-85deg;}
.ref-art-equip{transform:translate(0,45px)!important;}
.ref-art-stats>.coded-character{transform-origin:40% 50%;}
.ref-page .ref-current{opacity:.18;}
.ref-page .ref-emblem{display:none;}
.ref-page .ref-row-title{font-family:'Resume Menu',Arial,sans-serif;font-size:16px;letter-spacing:-.6px;}
.ref-page .ref-row{min-height:40px;margin-bottom:3px;}
.ref-page .ref-page-word{opacity:.22;letter-spacing:-8px;}
.ref-persona .ref-record-panel{background:transparent;border:0;box-shadow:none;}
.ref-persona .ref-record-heading h2{font-size:44px;line-height:.9;text-transform:uppercase;color:#3fffff;text-shadow:2px 3px #0738a8;}
.ref-system::before{clip-path:polygon(0 0,25% 0,42% 82%,100% 100%,0 100%);}
.ref-system .ref-page-word{left:-120px;top:405px;transform:rotate(42deg);font-size:185px;color:#000;opacity:1;}
.ref-quest .ref-row{clip-path:none;background:#081546b8;border-bottom:1px solid #4fffff33;min-height:36px;}
.ref-quest .ref-row.selected{background:white;}
.ref-social-link .ref-row{border-left:10px solid #36ffff;min-height:53px;background:#081a65;box-shadow:4px 5px 0 #041547;}
.ref-social-link .ref-row.selected{background:#aaffff;}
.coded-caustics{animation:coded-light-flow 8s ease-in-out infinite alternate;transform-origin:center;}
@keyframes coded-body-drift{0%,100%{transform:translate(0,0) rotate(-2deg)}50%{transform:translate(5px,-10px) rotate(0deg)}}
@keyframes coded-coat-sway{50%{transform:skewX(1.4deg)}}
@keyframes coded-arm-sway{50%{transform:rotate(3deg)}}
@keyframes coded-leg-sway{50%{transform:rotate(-2deg)}}
@keyframes coded-light-flow{to{transform:translate(-35px,10px) scale(1.1);opacity:.42}}
@media(prefers-reduced-motion:reduce){.coded-character,.coded-character *,.coded-caustics{animation:none!important;}}
/* Each video chapter has its own diagonal composition. */
.ref-skill::before{clip-path:polygon(73% 0,100% 0,100% 100%,55% 100%);}
.ref-item::before{clip-path:polygon(0 0,100% 0,100% 14%,30% 17%,0 10%);}
.ref-equip::before{clip-path:polygon(45% 0,65% 0,100% 61%,100% 84%);}
.ref-persona::before,.ref-quest::before{display:none;}
.ref-stats::before{clip-path:polygon(60% 0,100% 0,100% 64%,84% 35%,59% 23%);}
.ref-social-link::before{clip-path:polygon(69% 0,100% 0,100% 100%,87% 100%,61% 35%);}
.ref-calendar::before{clip-path:polygon(75% 0,100% 0,100% 100%,44% 100%,69% 47%);}
.ref-quest{background:linear-gradient(120deg,#03154b77,#03145b22);}
.ref-persona .ref-row{background:transparent;border-bottom:1px solid #3effff55;clip-path:none;min-height:38px;}
.ref-persona .ref-row.selected{background:#fff;}
.ref-skill .ref-page-word,.ref-stats .ref-page-word,.ref-persona .ref-page-word,.ref-quest .ref-page-word{color:#e5f6ff;opacity:.48;}
.ref-skill .ref-record-panel{background:#00113c99;}
html.phone-portrait .ref-page::before{clip-path:polygon(0 0,68% 0,18% 100%,0 100%);opacity:.6;}
html.phone-portrait .ref-persona::before,html.phone-portrait .ref-quest::before{display:none;}
.ref-help{text-shadow:1px 1px 0 #061753,-1px -1px 0 #061753,1px -1px 0 #061753,-1px 1px 0 #061753;}
html.phone-portrait .ref-persona .ref-row{background:#061753df;}
html.phone-portrait .ref-persona .ref-row.selected{background:white;}

/* Close-up framing: hair and the upper water share one continuous current. */
.scene:not(.detail-open) .hero-figure{left:-112px;top:-168px;width:650px;height:920px;transform:rotate(180deg);filter:none;transform-origin:50% 50%;}
.hero-figure .menu-closeup{width:100%;height:100%;object-fit:contain;display:block;filter:none;}
.hair-water-bridge{position:absolute;inset:0;width:1280px;height:720px;z-index:2;pointer-events:none;overflow:visible;}
.hair-water-current{transform-origin:300px 670px;animation:hair-water-breathe 7s ease-in-out infinite alternate;}
.hair-water-surface{animation:water-surface-slide 8s ease-in-out infinite alternate;}
.scene.detail-open .hair-water-bridge,.document-page-open .hair-water-bridge{display:none;}
.phone-portrait .scene:not(.detail-open) .hero-figure{left:190px;top:-85px;width:475px;height:840px;opacity:.45;}
.phone-portrait .hair-water-bridge{opacity:.45;}
@keyframes hair-water-breathe{to{transform:skewX(1.5deg) scaleX(1.025);}}
@keyframes water-surface-slide{to{transform:translateX(-45px);opacity:.35;}}
@media(prefers-reduced-motion:reduce){.hair-water-current,.hair-water-surface{animation:none;}}
.scene:not(.detail-open) .hero-figure{left:-25px;top:-115px;width:560px;height:880px;}
.scene:not(.detail-open) .menu-stack{left:600px;}
.phone-portrait .scene:not(.detail-open) .hero-figure{left:205px;top:-85px;width:475px;height:840px;}
.phone-portrait .scene:not(.detail-open) .menu-stack{left:552px;}
/* Chapter compositions measured against the supplied gameplay videos. */
.chapter-roster,.chapter-cost,.chapter-sort,.chapter-equipment-name,.chapter-quest-tabs,.chapter-table-head,.chapter-link-title,.chapter-calendar-title{position:absolute;z-index:5;}
.chapter-roster{left:14px;top:70px;width:520px;display:grid;gap:5px;transform:skew(-5deg);}
.chapter-member{height:55px;padding:0 12px 0 94px;display:flex;align-items:center;gap:10px;position:relative;background:#02081a;border:0;border-bottom:2px solid #78faff;color:#fff;text-align:left;cursor:pointer;clip-path:polygon(4% 0,100% 0,98% 100%,0 100%);}
.chapter-member.is-current,.chapter-member:hover,.chapter-member:focus-visible{background:white;color:#061753;border-top:5px solid #ff0045;outline:none;}
.member-name{font:18px Georgia,serif;flex:1;white-space:nowrap;}
.member-meter{font:italic 25px Georgia,serif;color:#5fffff;border-bottom:3px solid #e2ee28;}.member-meter small{font:9px Arial,sans-serif;}
.is-current .member-meter{color:#061753;}
.member-cutout{position:absolute;left:15px;top:0;bottom:0;width:83px;background:var(--member-color);clip-path:polygon(0 0,100% 0,85% 100%,0 100%);overflow:hidden;}
.member-cutout svg{position:absolute;width:88px;height:140px;left:-5px;top:-5px;}
.chapter-cost{right:55px;top:60px;transform:skew(-8deg);font:italic 900 30px Impact,sans-serif;color:#020513;}.chapter-cost span{display:block;background:#000;color:#f0ef00;text-align:center;}
.chapter-sort{left:770px;top:65px;color:#061753;font:17px Georgia,serif;text-align:center;}.chapter-sort span{display:block;letter-spacing:10px;margin-top:8px;}
.chapter-equipment-name{left:400px;top:80px;width:600px;background:white;color:#071753;text-align:center;padding:12px 20px;font:20px Georgia,serif;transform:skew(-6deg);}.chapter-equipment-name small{display:block;font:11px Arial,sans-serif;margin-top:4px;letter-spacing:4px;}
.chapter-award-seal{position:absolute;left:915px;top:185px;width:200px;height:240px;color:#7fffff;z-index:2;opacity:.8;transform:rotate(-8deg);animation:chapter-seal-float 5s ease-in-out infinite alternate;}
.chapter-award-word{position:absolute;left:670px;top:490px;width:550px;text-align:center;color:#4bffff;font:900 51px/.88 'Resume Menu',Impact,sans-serif;letter-spacing:-3px;z-index:3;}
.chapter-status-stripe{position:absolute;left:550px;top:15px;width:760px;height:80px;background:#999cd2;transform:rotate(-15deg);}
.chapter-quest-tabs{left:90px;top:90px;display:flex;gap:35px;align-items:center;font:20px Georgia,serif;color:white;}.chapter-quest-tabs b{background:white;color:#061753;padding:6px 35px;transform:skew(-10deg);}
.chapter-table-head{left:96px;top:150px;width:740px;display:grid;grid-template-columns:50px 1fr 120px;font:italic 16px Georgia,serif;color:#b7cdf7;border-bottom:2px solid #9abaff;padding-bottom:8px;}
.chapter-link-title{left:50px;top:100px;font:italic 900 46px Impact,sans-serif;color:white;}
.chapter-link-diagonal{position:absolute;left:790px;top:300px;font:italic 900 100px Impact,sans-serif;transform:rotate(-45deg);color:#8c8c8c;z-index:2;letter-spacing:-5px;}
.chapter-calendar-title{left:30px;top:18px;font:italic 900 63px Impact,sans-serif;color:white;}.chapter-calendar-title small{display:block;font-size:16px;text-align:right;letter-spacing:3px;}
.chapter-system-arc{position:absolute;left:10px;top:-300px;width:1350px;height:990px;border:110px solid white;border-radius:50%;transform:rotate(25deg);box-sizing:border-box;pointer-events:none;}
.ref-page .ref-art img{filter:none;object-fit:contain;}
@keyframes chapter-seal-float{to{transform:translateY(-12px) rotate(-4deg)}}
html:not(.phone-portrait) .ref-page .ref-record-heading h2{font-family:Georgia,serif;font-size:23px;font-weight:400;}
html:not(.phone-portrait) .ref-page .ref-row-title{font:18px Georgia,serif;letter-spacing:-.5px;}
html:not(.phone-portrait) .ref-page .ref-record-index{font-size:30px;}
html:not(.phone-portrait) .ref-page .ref-record-panel{border:0;box-shadow:none;}
html:not(.phone-portrait) .ref-skill{--list-left:805px;--list-top:100px;--list-width:415px;--panel-left:810px;--panel-top:355px;--panel-width:405px;}
html:not(.phone-portrait) .ref-skill .ref-nav{left:790px;top:25px;width:420px;}
html:not(.phone-portrait) .ref-skill .ref-page-word{left:-35px;top:-70px;font-size:200px;transform:rotate(90deg);transform-origin:70px 100px;}
html:not(.phone-portrait) .ref-skill .ref-art{left:475px;top:-120px;width:410px;height:930px;}
html:not(.phone-portrait) .ref-skill .ref-row{background:transparent;clip-path:none;min-height:42px;border:0;}
html:not(.phone-portrait) .ref-skill .ref-row.selected{background:#5fffff;color:#061753;}
html:not(.phone-portrait) .ref-skill .ref-row-no{display:none;}
html:not(.phone-portrait) .ref-skill .ref-row{grid-template-columns:1fr 40px;}
html:not(.phone-portrait) .ref-skill .ref-record-panel{background:#031a63cc;max-height:260px;}
html:not(.phone-portrait) .ref-skill .ref-record-description{max-height:165px;}
html:not(.phone-portrait) .ref-item{--list-left:625px;--list-top:150px;--list-width:600px;--panel-left:660px;--panel-top:420px;--panel-width:560px;}
html:not(.phone-portrait) .ref-item .ref-nav{left:600px;top:35px;width:630px;}
html:not(.phone-portrait) .ref-item .ref-nav b{visibility:hidden;}
html:not(.phone-portrait) .ref-item .ref-list{max-height:250px;}
html:not(.phone-portrait) .ref-item .ref-art{left:400px;top:160px;width:600px;height:540px;opacity:.16;}
.ref-art-item img{--art-angle:0deg;}
html:not(.phone-portrait) .ref-item .ref-row{clip-path:none;min-height:42px;grid-template-columns:35px 1fr auto;background:transparent;border-bottom:1px solid #35a7f244;}
html:not(.phone-portrait) .ref-item .ref-row.selected{background:white;border-top:3px solid #ff0045;}
html:not(.phone-portrait) .ref-item .ref-page-word{font-size:155px;top:-35px;color:#777;opacity:.55;}
html:not(.phone-portrait) .ref-equip{--list-left:360px;--list-top:160px;--list-width:640px;--panel-left:390px;--panel-top:475px;--panel-width:535px;}
html:not(.phone-portrait) .ref-equip .ref-nav{left:360px;top:15px;width:650px;}
html:not(.phone-portrait) .ref-equip .ref-nav b{visibility:hidden;}
html:not(.phone-portrait) .ref-equip .ref-page-word{left:280px;top:360px;font-size:160px;opacity:.2;}
html:not(.phone-portrait) .ref-equip .ref-art{left:825px;top:190px;width:480px;height:600px;}
.ref-art-equip img{--art-angle:85deg;}
html:not(.phone-portrait) .ref-equip .ref-row{background:transparent;min-height:68px;clip-path:none;grid-template-columns:40px 1fr auto;border:0;}
html:not(.phone-portrait) .ref-equip .ref-row.selected{background:#fff;}
html:not(.phone-portrait) .ref-persona{--list-left:25px;--list-top:160px;--list-width:500px;--panel-left:650px;--panel-top:560px;--panel-width:570px;}
html:not(.phone-portrait) .ref-persona .ref-nav{left:30px;top:105px;width:490px;}
html:not(.phone-portrait) .ref-persona .ref-page-word{left:5px;top:-45px;font-size:165px;opacity:.65;}
html:not(.phone-portrait) .ref-persona .ref-art{left:665px;top:70px;width:550px;height:530px;opacity:.85;}
html:not(.phone-portrait) .ref-persona .ref-record-heading{display:none;}
html:not(.phone-portrait) .ref-persona .ref-record-description{max-height:45px;margin:0 0 5px;font-size:14px;}
html:not(.phone-portrait) .ref-persona .ref-row{min-height:48px;}
html:not(.phone-portrait) .ref-stats{--list-left:20px;--list-top:80px;--list-width:520px;--panel-left:690px;--panel-top:495px;--panel-width:535px;}
html:not(.phone-portrait) .ref-stats .ref-row{min-height:58px;}
html:not(.phone-portrait) .ref-stats .ref-nav{left:575px;top:50px;width:630px;transform:rotate(-12deg);}
html:not(.phone-portrait) .ref-stats .ref-page-word{display:none;}
html:not(.phone-portrait) .ref-stats .ref-art{left:530px;top:70px;width:770px;height:560px;}
.ref-art-stats img{--art-angle:0deg;}
html:not(.phone-portrait) .ref-stats .ref-record-panel{background:linear-gradient(90deg,transparent,#04185ac9);max-height:145px;}
html:not(.phone-portrait) .ref-stats .ref-record-description{font-size:14px;max-height:60px;}
html:not(.phone-portrait) .ref-quest{--list-left:70px;--list-top:185px;--list-width:800px;--panel-left:85px;--panel-top:485px;--panel-width:750px;}
html:not(.phone-portrait) .ref-quest .ref-list{max-height:285px;}
html:not(.phone-portrait) .ref-quest .ref-nav{left:45px;top:20px;width:830px;}
html:not(.phone-portrait) .ref-quest .ref-page-word{font-size:130px;top:-20px;opacity:.12;}
html:not(.phone-portrait) .ref-quest .ref-row{min-height:40px;background:transparent;clip-path:none;grid-template-columns:40px 1fr 110px;}
html:not(.phone-portrait) .ref-quest .ref-row.selected{background:white;}
html:not(.phone-portrait) .ref-quest .ref-art{left:1010px;top:-160px;width:200px;height:350px;opacity:.65;}
html:not(.phone-portrait) .ref-quest .ref-record-panel{background:transparent;max-height:145px;}
html:not(.phone-portrait) .ref-quest .ref-record-heading h2{color:#5affff;font-size:21px;}
html:not(.phone-portrait) .ref-quest .ref-record-description{font-size:17px;max-height:55px;}
html:not(.phone-portrait) .ref-social-link{--list-left:40px;--list-top:150px;--list-width:490px;--panel-left:870px;--panel-top:445px;--panel-width:355px;}
html:not(.phone-portrait) .ref-social-link .ref-page-word{display:none;}
html:not(.phone-portrait) .ref-social-link .ref-nav{left:50px;top:35px;width:490px;}
html:not(.phone-portrait) .ref-social-link .ref-row{min-height:70px;margin-bottom:12px;padding:6px 15px;border-left:9px solid #60ffff;clip-path:polygon(3% 0,100% 0,95% 100%,0 100%);grid-template-columns:38px 1fr auto;background:#72ffff;color:#051440;border-top:5px solid #061753;}
html:not(.phone-portrait) .ref-social-link .ref-row.selected{background:white;border-top-color:#ff0045;}
html:not(.phone-portrait) .ref-social-link .ref-row-title{font-size:22px;line-height:1;}
html:not(.phone-portrait) .ref-social-link .ref-row-no{font-size:36px;font-family:Georgia,serif;}
html:not(.phone-portrait) .ref-social-link .ref-list{max-height:475px;}
html:not(.phone-portrait) .ref-social-link .ref-art{left:450px;top:-60px;width:540px;height:850px;}
.ref-art-social-link img{--art-angle:0deg;}
html:not(.phone-portrait) .ref-social-link .ref-record-panel{background:#07164fa6;max-height:185px;}
html:not(.phone-portrait) .ref-social-link .ref-record-description{font-size:14px;max-height:75px;}
html:not(.phone-portrait) .ref-calendar .ref-page-word{display:none;}
html:not(.phone-portrait) .ref-calendar .ref-nav{left:30px;top:110px;width:650px;}
html:not(.phone-portrait) .ref-calendar .ref-calendar{top:140px;width:650px;left:35px;}
html:not(.phone-portrait) .ref-calendar .ref-art{display:none;}
html:not(.phone-portrait) .ref-calendar .ref-list{left:820px;top:105px;width:400px;}
html:not(.phone-portrait) .ref-calendar .ref-record-panel{left:820px;top:350px;width:400px;background:transparent;color:#061753;}
html:not(.phone-portrait) .ref-calendar .ref-record-description{color:#061753;font-size:17px;}
html:not(.phone-portrait) .ref-calendar .ref-record-heading h2{color:#061753;}
html:not(.phone-portrait) .ref-calendar .ref-record-index{color:#061753;}
html:not(.phone-portrait) .ref-system{--list-left:660px;--list-top:140px;--list-width:490px;--panel-left:620px;--panel-top:475px;--panel-width:580px;}
html:not(.phone-portrait) .ref-system .ref-nav{left:650px;top:55px;width:500px;}
html:not(.phone-portrait) .ref-system .ref-row{min-height:50px;background:transparent;transform:rotate(-6deg);clip-path:none;}
html:not(.phone-portrait) .ref-system .ref-row.selected{background:white;}
html:not(.phone-portrait) .ref-system .ref-row-title{font:italic 900 35px/.95 'Resume Menu',Impact,sans-serif;letter-spacing:-1px;}
html:not(.phone-portrait) .ref-system .ref-art{display:none;}
html:not(.phone-portrait) .ref-system .ref-page-word{left:-70px;top:420px;transform:rotate(45deg);font-size:220px;}
@media(prefers-reduced-motion:reduce){.chapter-award-seal{animation:none;}}
html.phone-portrait .chapter-roster,html.phone-portrait .chapter-cost,html.phone-portrait .chapter-sort,html.phone-portrait .chapter-equipment-name,html.phone-portrait .chapter-award-word,html.phone-portrait .chapter-award-seal,html.phone-portrait .chapter-status-stripe,html.phone-portrait .chapter-quest-tabs,html.phone-portrait .chapter-table-head,html.phone-portrait .chapter-link-title,html.phone-portrait .chapter-link-diagonal,html.phone-portrait .chapter-calendar-title,html.phone-portrait .chapter-system-arc{display:none;}
.member-cutout img{position:absolute;left:-10px;top:-10px;width:110px;height:160px;object-fit:cover;object-position:50% 0;}
html:not(.phone-portrait) .ref-skill .ref-art{left:490px;top:-120px;width:430px;height:940px;}
html:not(.phone-portrait) .ref-skill .ref-row{color:#061753;background:#ffffffb3;}
html:not(.phone-portrait) .ref-skill .ref-row.selected{background:#61ffff;}
html:not(.phone-portrait) .ref-equip .ref-row{color:#5fffff;background:#061753c9;}
html:not(.phone-portrait) .ref-equip .ref-row.selected{color:#061753;background:white;}
html:not(.phone-portrait) .ref-stats .ref-record-panel{left:40px;top:430px;width:490px;background:#061753e8;max-height:190px;}
html:not(.phone-portrait) .ref-stats .ref-record-description{max-height:90px;font-size:16px;}
html:not(.phone-portrait) .ref-persona .chapter-award-word{top:435px;font-size:44px;}
html:not(.phone-portrait) .ref-persona .ref-record-panel{top:535px;max-height:110px;background:#061753b3;}
html:not(.phone-portrait) .ref-persona .ref-record-description{font-size:16px;max-height:50px;}
html:not(.phone-portrait) .ref-calendar .ref-days button{color:#a8ffff;}
html:not(.phone-portrait) .ref-calendar .ref-days button.selected{color:#061753;}
html:not(.phone-portrait) .ref-calendar .ref-week{color:white;}
html:not(.phone-portrait) .ref-system .ref-row-title{-webkit-text-stroke:1px currentColor;}
html:not(.phone-portrait) .ref-system .ref-row em{display:none;}
html:not(.phone-portrait) .chapter-cost{right:100px;top:50px;font-size:20px;}
html:not(.phone-portrait) .ref-stats .ref-art{left:545px;top:105px;width:850px;height:720px;overflow:hidden;}
html:not(.phone-portrait) .ref-stats .ref-art img{object-fit:cover;object-position:50% 0;}
html:not(.phone-portrait) .scene.detail-enter .ref-stats .ref-art{animation:chapter-status-enter 620ms cubic-bezier(.16,1,.3,1) both;}
html:not(.phone-portrait) .scene.detail-enter .ref-social-link .ref-art{animation:chapter-link-enter 650ms cubic-bezier(.16,1,.3,1) both;}
html:not(.phone-portrait) .scene.detail-enter .chapter-roster{animation:chapter-roster-enter 450ms 70ms cubic-bezier(.16,1,.3,1) both;}
@keyframes chapter-status-enter{from{transform:translate(150px,80px) rotate(8deg)}to{transform:none}}
@keyframes chapter-link-enter{from{transform:translateY(170px)}to{transform:none}}
@keyframes chapter-roster-enter{from{opacity:0;translate:-150px 0}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){.scene.detail-enter .ref-art,.scene.detail-enter .chapter-roster{animation:none!important;}}
/* Per-chapter white plates are now measured SVG contours. */
.chapter-geometry{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;}
html:not(.phone-portrait) .ref-page::before{display:none;}
html:not(.phone-portrait) .ref-page .ref-art{z-index:2;}
html:not(.phone-portrait) .ref-page .ref-current{display:none;}
html:not(.phone-portrait) .chapter-system-arc{display:none;}
.classroom{opacity:.58;mask-image:linear-gradient(#000 0%,#000 70%,#0007 100%);}
.coded-classroom{opacity:1;}
html:not(.phone-portrait) .ref-skill .ref-row{color:#72ffff;background:#032b7e66;}
html:not(.phone-portrait) .ref-skill .ref-row.selected{color:#051753;background:#71ffff;}
html:not(.phone-portrait) .ref-skill .ref-record-panel{background:#04184ad9;}
html:not(.phone-portrait) .ref-skill .ref-art{left:455px;top:-135px;width:465px;height:960px;}
html:not(.phone-portrait) .ref-skill .ref-record-panel{top:365px;}
html:not(.phone-portrait) .ref-stats .chapter-status-stripe{top:5px;left:550px;width:760px;height:76px;transform:rotate(-13deg);}
html:not(.phone-portrait) .ref-stats .ref-art{left:555px;top:110px;width:850px;height:650px;overflow:visible;}
html:not(.phone-portrait) .ref-stats .ref-art img{object-fit:contain;object-position:50% 0;}
html:not(.phone-portrait) .ref-system .ref-list{left:690px;top:150px;transform:rotate(-4deg) skew(-8deg);width:450px;}
html:not(.phone-portrait) .ref-system .ref-row{min-height:53px;}
html:not(.phone-portrait) .ref-system .ref-page-word{top:425px;left:-40px;transform:rotate(48deg);font-size:210px;}
html.phone-portrait .chapter-geometry{display:none;}
html:not(.phone-portrait) .ref-art-stats::before{content:'';position:absolute;inset:-35px -50px 35px 20px;background:#7e85aa;mask:url('assets/original/hoang-status-corrected.webp') 50% 0/contain no-repeat;opacity:.6;transform:translate(35px,-24px);}
html:not(.phone-portrait) .ref-art-social-link::before{content:'';position:absolute;inset:0;background:#777b97;mask:url('assets/original/hoang-social-final.webp') center/contain no-repeat;transform:translate(65px,-25px);opacity:.6;}
html:not(.phone-portrait) .ref-calendar .ref-calendar p{color:#aeffff;}
html:not(.phone-portrait) .ref-art-stats::before{mask:none;background:transparent url('assets/original/hoang-status-corrected.webp') 50% 0/contain no-repeat;filter:grayscale(1) brightness(.65);opacity:.4;}
html:not(.phone-portrait) .ref-art-social-link::before{mask:none;background:transparent url('assets/original/hoang-social-final.webp') center/contain no-repeat;filter:grayscale(1) brightness(.65);opacity:.4;}
html:not(.phone-portrait) .ref-system .ref-row{isolation:isolate;overflow:visible;min-height:58px;padding:4px 16px;border:0;grid-template-columns:1fr;}
html:not(.phone-portrait) .ref-system .ref-row::before{display:none;}
html:not(.phone-portrait) .ref-system .ref-row.selected{background:transparent;transform:translateX(-12px) rotate(-6deg) scale(1.12);}
html:not(.phone-portrait) .ref-system .ref-row.selected::after{content:'';position:absolute;inset:-3px -18px -3px -12px;z-index:-1;border:0;background:#fd77d9;clip-path:polygon(0 100%,100% 0,87% 100%);animation:reference-selector-beat 750ms infinite;}
html:not(.phone-portrait) .ref-system .ref-row-title{position:relative;isolation:isolate;font:italic 900 31px/.95 'Resume Menu',Impact,sans-serif;-webkit-text-stroke:1.3px currentColor;}
html:not(.phone-portrait) .ref-system .ref-row.selected .ref-row-title::before{content:'';position:absolute;inset:-3px -9px;z-index:-1;background:white;clip-path:polygon(0 100%,100% 0,88% 100%);}
html:not(.phone-portrait) .ref-system .ref-row.selected .ref-row-title::after{content:attr(data-word);position:absolute;inset:0;color:#ff001e;clip-path:polygon(0 100%,100% 0,88% 100%);}
html:not(.phone-portrait) .ref-social-link .ref-list{width:435px;left:45px;top:165px;max-height:470px;}
html:not(.phone-portrait) .ref-social-link .ref-row{height:82px;margin-bottom:13px;grid-template-columns:35px 1fr 40px;align-items:start;padding:5px 13px 22px;border-bottom:18px solid #061753;}
html:not(.phone-portrait) .ref-social-link .ref-row::after{content:'COURSEWORK';position:absolute;left:60px;bottom:-16px;border:0;width:auto;height:auto;color:white;background:none;font:11px/1 Arial,sans-serif;animation:none;}
html:not(.phone-portrait) .ref-social-link .ref-row-title{font-size:20px;}
html:not(.phone-portrait) .ref-social-link .ref-row em{font-size:34px;line-height:1;}
html:not(.phone-portrait) .ref-social-link .ref-art{left:445px;width:560px;}
html:not(.phone-portrait) .ref-system{background:linear-gradient(#061d7d66,#06118588);}
/* Actual font families supplied with the chosen reference implementation. */
@font-face{font-family:'P3 Rodin';src:url('assets/fonts/Rodin-Pro-UB.otf') format('opentype');font-weight:900;font-display:swap;}
@font-face{font-family:'P3 Rodin';src:url('assets/fonts/Rodin-Pro-EB.otf') format('opentype');font-weight:700;font-display:swap;}
@font-face{font-family:'P3 NewRodin';src:url('assets/fonts/NewRodin-Pro-DB.otf') format('opentype');font-weight:400;font-display:swap;}
@font-face{font-family:'P3 Skip';src:url('assets/fonts/Skip-Std-B.otf') format('opentype');font-weight:400;font-display:swap;}
@font-face{font-family:'P3 Expressway';src:url('assets/fonts/Expressway-Bold.ttf') format('truetype');font-weight:700;font-display:swap;}
.menu-stack .menu-item .menu-label,.menu-stack .menu-item .menu-shadow{font-family:'P3 Rodin',sans-serif;font-weight:900;letter-spacing:-.105em;-webkit-text-stroke:0;scale:1 1;}
.menu-stack .menu-item.active .menu-label::after{font:inherit;letter-spacing:inherit;}
.ref-page .ref-page-word{font-family:'P3 Rodin',sans-serif!important;font-weight:900!important;letter-spacing:-.105em!important;line-height:.9;}
html:not(.phone-portrait) .ref-page .ref-row-title,html:not(.phone-portrait) .ref-page .ref-record-heading h2,.chapter-member .member-name,.chapter-sort,.chapter-equipment-name,.chapter-quest-tabs,.ref-record-description{font-family:'P3 Skip',serif!important;font-weight:400;}
.ref-page .ref-row-title{font-family:'P3 Skip',serif!important;font-size:17px!important;letter-spacing:-.06em!important;}
.ref-page .ref-row em,.ref-page .ref-row-no,.member-meter,.ref-record-index{font-family:'P3 Expressway',sans-serif!important;}
.ref-page .ref-nav b,.ref-record-open,.chapter-link-title,.chapter-calendar-title,.chapter-cost,.chapter-award-word{font-family:'P3 Rodin',sans-serif!important;font-weight:900;letter-spacing:-.09em;}
.ref-page .ref-nav b{font-size:17px;}
.ref-page .ref-help,.ref-page .ref-help i,.ref-page .ref-help small,.ref-page .ref-help button{font-family:'P3 NewRodin',sans-serif!important;}
.ref-page .ref-help i{font-size:17px!important;font-weight:400;letter-spacing:-1px;}
.ref-page .ref-help small{font-size:11px;}
.ref-page .ref-help button{margin-left:12px;border:0;background:none;color:white;cursor:pointer;font-size:13px;}
.ref-page .ref-help button span{display:inline-flex;border:1.5px solid white;box-shadow:0 0 0 1px #071753;border-radius:50%;height:17px;width:17px;align-items:center;justify-content:center;margin-right:3px;font-size:12px;font-style:normal;}
.ref-confirm-hint{display:inline-flex;align-items:center;font-size:13px;margin-left:14px;}
.ref-confirm-hint b{display:inline-flex;border:1.5px solid white;border-radius:50%;width:17px;height:17px;align-items:center;justify-content:center;margin-right:3px;font-size:12px;font-weight:400;}
html:not(.phone-portrait) .ref-system .ref-row-title{font-family:'P3 Rodin',sans-serif!important;font-size:33px!important;font-weight:900!important;letter-spacing:-.1em!important;-webkit-text-stroke:0;}
html:not(.phone-portrait) .ref-social-link .ref-row-title{font-family:'P3 NewRodin',sans-serif!important;font-size:20px!important;letter-spacing:-.08em!important;}
html:not(.phone-portrait) .ref-persona .ref-row-title{font-family:'P3 NewRodin',sans-serif!important;font-size:18px!important;letter-spacing:-.07em!important;}
html:not(.phone-portrait) .chapter-member .member-name{font-size:18px;letter-spacing:-.06em;}
html:not(.phone-portrait) .ref-record-description{font-size:16px;letter-spacing:-.04em;line-height:1.4;}
html:not(.phone-portrait) .ref-page{background:linear-gradient(180deg,transparent,#001d7e66 30%,#030d8f88 100%);}
html:not(.phone-portrait) .ref-system{background:linear-gradient(#061d7d66,#06118599);}
html:not(.phone-portrait) .ref-skill .ref-record-panel,html:not(.phone-portrait) .ref-stats .ref-record-panel{background:#021245d9;}
html:not(.phone-portrait) .ref-quest .ref-row-title{font-size:17px!important;}
html:not(.phone-portrait) .ref-calendar .ref-days button{font-family:'P3 Skip',serif;font-size:28px;}
html:not(.phone-portrait) .ref-calendar .ref-week{font-family:'P3 Rodin',sans-serif;font-size:15px;}
html:not(.phone-portrait) .ref-persona .ref-page-word{font-size:145px;top:-20px;left:0;}
html:not(.phone-portrait) .ref-item .ref-page-word{font-size:118px;top:-20px;}
html:not(.phone-portrait) .ref-quest .ref-page-word{font-size:135px;top:-25px;}
.water-layer::before,.water-layer::after{display:none;}
.water-facets{position:absolute;left:-45px;top:-12px;width:1370px;height:205px;opacity:.75;mask-image:linear-gradient(#000 30%,#0009 75%,transparent);}
.water-facets g{animation:water-facets-drift 7s ease-in-out infinite alternate;transform-origin:center;}
@keyframes water-facets-drift{to{transform:translate(24px,4px) skewX(-8deg) scaleY(1.08);}}
@media(prefers-reduced-motion:reduce){.water-facets g{animation:none;}}
html:not(.phone-portrait) .ref-system .ref-row{width:max-content;max-width:450px;min-height:62px;grid-template-columns:minmax(0,1fr);}
html:not(.phone-portrait) .ref-system .ref-row-title{width:max-content;max-width:100%;font-size:44px!important;}
html:not(.phone-portrait) .ref-system .ref-row.selected::after{inset:-3px -12px -3px -12px;}
html:not(.phone-portrait) .ref-skill .ref-nav,html:not(.phone-portrait) .ref-persona .ref-nav,html:not(.phone-portrait) .ref-social-link .ref-nav,html:not(.phone-portrait) .ref-system .ref-nav{visibility:hidden;pointer-events:none;}
html:not(.phone-portrait) .ref-skill .chapter-cost{right:45px;top:40px;font-size:25px;}
html:not(.phone-portrait) .ref-persona .ref-list{top:145px;}
.ref-page .ref-help i,.ref-page .ref-help button,.ref-page .ref-help small,.ref-page .ref-confirm-hint{color:white!important;text-shadow:1px 1px #071344,-1px -1px #071344,1px -1px #071344,-1px 1px #071344;}
.ref-page .ref-help button span,.ref-confirm-hint b{background:#092461;}
html:not(.phone-portrait) .ref-system .ref-list{max-height:355px;padding-bottom:20px;}
html:not(.phone-portrait) .ref-system .ref-record-panel{top:535px;max-height:100px;}
html:not(.phone-portrait) .ref-system .ref-record-heading{display:none;}
html:not(.phone-portrait) .ref-system .ref-record-description{max-height:35px;font-size:15px;margin:0 0 8px;}
/* Short-screen audit: keep record actions above the fixed gamepad. */
html.phone-portrait .ref-page .ref-help{display:none;}
html.phone-portrait .ref-calendar .ref-list{top:350px;max-height:90px;}
html.phone-portrait .ref-calendar .ref-record-panel{top:450px;height:min(180px,calc(100dvh - 580px));max-height:none;padding:8px 12px;}
html.phone-portrait .ref-calendar .ref-record-heading{display:none;}
html.phone-portrait .ref-calendar .ref-record-description{flex:1;min-height:0;max-height:none;margin:0 0 5px;font-size:14px;line-height:1.3;}
html.phone-portrait .ref-calendar .ref-record-open{flex:0 0 auto;padding:6px 12px;font-size:12px;}
html:not(.phone-portrait) .ref-calendar .ref-record-panel{top:345px;max-height:260px;}
html:not(.phone-portrait) .ref-calendar .ref-record-description{max-height:130px;}
@media(max-height:720px){
 html.phone-portrait .ref-page .ref-record-panel{height:calc(66dvh - 270px);}
 html.phone-portrait .ref-page .ref-record-heading{display:none;}
 html.phone-portrait .ref-page .ref-record-description{flex:1;min-height:0;max-height:none;margin:0 0 6px;font-size:14px;}
 html.phone-portrait .ref-page .ref-record-open{font-size:12px;padding:6px 12px;}
 html.phone-portrait .ref-calendar .ref-month strong{font-size:32px;}
 html.phone-portrait .ref-calendar .ref-month b{font-size:16px;}
 html.phone-portrait .ref-calendar .ref-month span{font-size:12px;}
 html.phone-portrait .ref-calendar .ref-week{font-size:11px;margin:3px 0;}
 html.phone-portrait .ref-calendar .ref-days button{font-size:14px;line-height:1.2;padding:0;}
 html.phone-portrait .ref-calendar .ref-list{top:285px;max-height:82px;}
 html.phone-portrait .ref-calendar .ref-row{min-height:34px;margin-bottom:4px;padding:6px 12px;}
 html.phone-portrait .ref-calendar .ref-row-title{font-size:14px!important;}
 html.phone-portrait .ref-calendar .ref-row em{font-size:12px;}
 html.phone-portrait .ref-calendar .ref-record-panel{top:380px;height:min(150px,calc(100dvh - 510px));}
}
html.phone-portrait .ref-calendar .ref-days button{color:white;text-shadow:1px 1px #061753,-1px -1px #061753;}
html.phone-portrait .ref-calendar .ref-days button.selected{color:#061753;text-shadow:none;}
/* Motion pass: chapter entry silhouettes, swinging plates, grouped lists. */
.screen-wipe[data-motion^="chapter"]{left:0;top:0;width:100vw;height:100vh;transform:none;background:none;contain:paint;}
.screen-wipe[data-motion^="chapter"]::before{inset:0;width:100%;height:100%;border-radius:0;background:#0535c4;transform:none;clip-path:polygon(0 0,48% 0,76% 100%,0 100%);}
.screen-wipe[data-motion^="chapter"]::after{left:40vw;top:42vh;font-family:'P3 Rodin',sans-serif;font-size:8vw;letter-spacing:-.12em;transform:rotate(-17deg);color:#00187a;}
.screen-wipe[data-motion^="chapter"].is-active{animation:chapter-cover 620ms linear both;}
.screen-wipe[data-motion^="chapter"].is-active::before{animation:chapter-blue-plane 620ms cubic-bezier(.2,.7,.2,1) both;}
.screen-wipe[data-motion^="chapter"].is-active::after{animation:chapter-word-pass 620ms linear both;}
.wipe-character{position:absolute;left:-8vw;top:-15vh;width:57vw;height:125vh;object-fit:contain;transform:rotate(180deg);filter:brightness(0) saturate(100%) invert(22%) sepia(100%) saturate(3900%) hue-rotate(210deg);animation:chapter-silhouette-pass 620ms cubic-bezier(.2,.7,.2,1) both;}
.screen-wipe[data-motion="chapter-close"]{scale:-1 1;}
.screen-wipe[data-motion="chapter-close"]::after{scale:-1 1;}
.scene.is-wiping .water-layer,.scene.is-wiping .shards span{animation-play-state:running;opacity:1;}
.scene.detail-enter .ref-page .ref-row{animation:chapter-group-list 200ms 100ms ease-out both;}
.scene.detail-enter .ref-page .ref-list,.scene.detail-enter .chapter-roster{animation:chapter-group-list 240ms 90ms ease-out both;}
.scene.detail-enter .chapter-geometry{animation:chapter-plane-open 430ms cubic-bezier(.18,.8,.2,1) both;transform-origin:58% 0;}
.scene.detail-enter .ref-system .chapter-geometry,.scene.detail-enter .ref-calendar .chapter-geometry{animation:chapter-circle-open 500ms cubic-bezier(.16,1,.3,1) both;transform-origin:0 100%;}
.scene.detail-enter .ref-quest .chapter-geometry{animation:chapter-board-open 420ms cubic-bezier(.16,1,.3,1) both;}
.scene.detail-enter .ref-page .ref-record-panel{animation:chapter-note-open 220ms 150ms ease-out both;}
.ref-page .ref-art img{animation:chapter-portrait-idle 10s ease-in-out infinite;transform-origin:50% 90%;}
.ref-art-equip img{animation:equip-long-idle 20s ease-in-out infinite;transform-origin:55% 65%;}
.ref-art-stats img{animation:status-hand-idle 9s ease-in-out infinite;transform-origin:70% 90%;}
.ref-art-social-link img{animation:social-card-idle 8s ease-in-out infinite;transform-origin:50% 85%;}
.ref-art-persona img{animation:award-idle 6s ease-in-out infinite;}
.ref-record-panel.ref-detail-change{animation:chapter-selection-note 170ms ease-out both;}
.ref-row{transition:background-color 65ms,color 65ms,transform 100ms;}
@keyframes chapter-cover{0%,100%{opacity:0}6%,80%{opacity:1}}
@keyframes chapter-blue-plane{0%{opacity:0;translate:-100% 0}25%,40%{opacity:1;translate:0 0}100%{opacity:0;translate:130% 0}}
@keyframes chapter-silhouette-pass{0%{opacity:0;transform:translateX(-30vw) rotate(180deg) scale(1.2)}20%,36%{opacity:1;transform:translateX(5vw) rotate(180deg) scale(1.35)}100%{opacity:0;transform:translateX(90vw) rotate(180deg) scale(1.1)}}
@keyframes chapter-word-pass{0%,10%,100%{opacity:0}25%,45%{opacity:.5}}
@keyframes chapter-plane-open{from{transform:rotate(-30deg) scale(1.18)}to{transform:none}}
@keyframes chapter-circle-open{from{clip-path:circle(0% at 0 100%)}to{clip-path:circle(150% at 0 100%)}}
@keyframes chapter-board-open{from{transform:translateX(65%) rotate(14deg)}to{transform:none}}
@keyframes chapter-group-list{from{opacity:0;translate:-35px 0}to{opacity:1;translate:0 0}}
@keyframes chapter-note-open{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
@keyframes chapter-portrait-idle{0%,100%{transform:rotate(var(--art-angle)) scale(1)}50%{transform:rotate(calc(var(--art-angle) + .7deg)) scale(1.008)}}
@keyframes equip-long-idle{0%,30%,100%{transform:rotate(85deg) translate(0,0)}42%{transform:rotate(79deg) translate(-5px,7px)}58%{transform:rotate(72deg) translate(-12px,15px)}74%{transform:rotate(78deg) translate(-6px,6px)}88%{transform:rotate(85deg) translate(0,0)}}
@keyframes status-hand-idle{0%,100%{transform:rotate(0deg) scale(1)}50%{transform:rotate(-.8deg) scale(1.012)}}
@keyframes social-card-idle{0%,100%{transform:rotate(0deg)}50%{transform:rotate(.8deg) translateY(-2px)}}
@keyframes award-idle{0%,100%{transform:rotate(0deg)}50%{transform:rotate(-1deg) translateY(-3px)}}
@keyframes chapter-selection-note{from{opacity:.35;translate:12px 0}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){.screen-wipe[data-motion^="chapter"],.screen-wipe[data-motion^="chapter"]::before,.screen-wipe[data-motion^="chapter"]::after,.wipe-character,.ref-page .ref-art img,.scene.detail-enter .chapter-geometry,.scene.detail-enter .ref-page .ref-row,.scene.detail-enter .ref-page .ref-list,.scene.detail-enter .ref-page .ref-record-panel,.ref-record-panel.ref-detail-change{animation:none!important;}.screen-wipe[data-motion^="chapter"]{display:none;}}
/* Whole-viewport, opaque cover followed by a growing silhouette cutout. */
.screen-wipe[data-motion^="chapter"]{position:fixed;inset:0;left:0;top:0;width:100vw;height:100dvh;background:#0643ce;transform:none;scale:1;opacity:0;contain:paint;overflow:hidden;}
.screen-wipe[data-motion^="chapter"]::before,.screen-wipe[data-motion^="chapter"]::after{display:none;animation:none!important;}
.screen-wipe[data-motion^="chapter"].is-active{animation:full-scene-cover 620ms linear both;}
.full-scene-transition{position:absolute;inset:0;width:100%;height:100%;display:block;background:transparent;}
.screen-wipe[data-motion^="chapter"]{background:transparent;}
.wipe-silhouette-fixed{filter:brightness(0) saturate(100%) invert(16%) sepia(100%) saturate(3000%) hue-rotate(210deg);opacity:.85;}
.wipe-scene-label{font:italic 900 110px 'P3 Rodin',sans-serif;letter-spacing:-10px;fill:#001a78;}
.wipe-reveal-hole{animation:full-scene-unmask 620ms cubic-bezier(.24,.6,.25,1) both;transform-origin:0 0;}
.screen-wipe[data-motion="chapter-close"] .full-scene-transition{transform:scaleX(-1);}
@keyframes full-scene-cover{0%{opacity:1;clip-path:circle(0 at 20% 48%)}28%{opacity:1;clip-path:circle(150vmax at 20% 48%)}99%{opacity:1;clip-path:circle(150vmax at 20% 48%)}100%{opacity:0;clip-path:circle(150vmax at 20% 48%)}}
@keyframes full-scene-unmask{0%,30%{transform:scale(0)}100%{transform:scale(14)}}
html.phone-portrait .screen-wipe[data-motion^="chapter"],html.phone-landscape .screen-wipe[data-motion^="chapter"]{inset:0;width:100vw;height:100dvh;animation-duration:620ms;}
@media(prefers-reduced-motion:reduce){.screen-wipe[data-motion^="chapter"],.wipe-reveal-hole{animation:none!important;}.screen-wipe[data-motion^="chapter"]{display:none;}}
/* Quieter main-menu scene, close to the reference's restrained backdrop. */
.scene:not(.detail-open) .hair-water-current path:nth-child(n+3){display:none;}
.scene:not(.detail-open) .hair-water-current{animation:none;}
.scene:not(.detail-open) .hair-water-surface{display:none;}
.scene:not(.detail-open) .water-facets{opacity:.3;height:150px;}
.scene:not(.detail-open) .water-facets g{animation-duration:16s;}
.scene:not(.detail-open) .classroom{opacity:.36;}
.scene:not(.detail-open) .coded-caustics{opacity:.12;animation-duration:18s;}
.scene:not(.detail-open) .shards span{width:7px;height:10px;opacity:.3;animation-duration:18s;}
.scene:not(.detail-open) .shards span:nth-child(n+4){display:none;}
.scene:not(.detail-open) .shards span{filter:opacity(.4);}
/* Restrained main-character buoyancy, with the connected water moving in sync. */
html:not(.is-building-menu):not(.is-awaiting-entry) .scene:not(.detail-open) .hero-figure{animation:menu-character-buoyancy 9s ease-in-out infinite;}
html:not(.is-building-menu):not(.is-awaiting-entry) .scene:not(.detail-open) .hair-water-bridge{animation:menu-current-buoyancy 9s ease-in-out infinite;transform-origin:300px 600px;}
@keyframes menu-character-buoyancy{0%,100%{translate:0 0;rotate:-.35deg;}50%{translate:3px -8px;rotate:.35deg;}}
@keyframes menu-current-buoyancy{0%,100%{translate:0 0;rotate:-.15deg;}50%{translate:3px -8px;rotate:.15deg;}}
@media(prefers-reduced-motion:reduce){.scene:not(.detail-open) .hero-figure,.scene:not(.detail-open) .hair-water-bridge{animation:none!important;}}
/* Keep the complete head inside the frame; dissolve only the water-facing edge. */
.scene:not(.detail-open) .hero-figure{left:0;top:-70px;width:520px;height:780px;}
.hero-figure .menu-closeup{mask-image:linear-gradient(90deg,transparent 0%,#000b 9%,#000 24%,#000 100%);}
.scene:not(.detail-open) .hair-water-current{transform:translate(25px,-10px);}
.phone-portrait .scene:not(.detail-open) .hero-figure{left:205px;top:-30px;width:440px;height:730px;}
/* Keep all section portraits inside the visible scene, including their idle motion. */
html:not(.phone-portrait) .ref-skill .ref-art{left:545px;top:30px;width:340px;height:640px;}
html:not(.phone-portrait) .ref-item .ref-art{left:440px;top:155px;width:365px;height:490px;}
html:not(.phone-portrait) .ref-equip .ref-art{left:710px;top:180px;width:520px;height:360px;transform:translate(var(--pointer-x),var(--pointer-y))!important;}
html:not(.phone-portrait) .ref-persona .ref-art{left:660px;top:55px;width:530px;height:540px;}
html:not(.phone-portrait) .ref-stats .ref-art{left:560px;top:125px;width:680px;height:450px;overflow:visible;}
html:not(.phone-portrait) .ref-stats .ref-art img{object-fit:contain;object-position:center;}
html:not(.phone-portrait) .ref-quest .ref-art{left:1040px;top:55px;width:170px;height:350px;}
html:not(.phone-portrait) .ref-social-link .ref-art{left:490px;top:30px;width:420px;height:660px;}
html:not(.phone-portrait) .ref-art-stats::before,html:not(.phone-portrait) .ref-art-social-link::before{inset:0;transform:translate(15px,-10px);}
html.phone-portrait .ref-page .ref-art{left:25%;top:145px;width:70%;height:min(460px,calc(100dvh - 280px));overflow:visible;}
html.phone-portrait .ref-page .ref-art-stats,html.phone-portrait .ref-page .ref-art-social-link{left:15%;top:145px;width:80%;height:min(460px,calc(100dvh - 280px));}
html.phone-portrait .ref-page .ref-art-equip{left:25px;top:180px;width:calc(100% - 50px);height:210px;transform:none!important;}
.ref-art-equip img{transform-origin:50% 50%;}
/* Rotation must use the image center, especially for inverted/sideways poses. */
.ref-page .ref-art img{transform-origin:50% 50%;object-fit:contain;}
.ref-page .ref-art-equip img{animation:equip-long-idle 20s ease-in-out infinite;transform-origin:50% 50%;}
.ref-page .ref-art-stats img{animation:status-hand-idle 9s ease-in-out infinite;}
.ref-page .ref-art-social-link img{animation:social-card-idle 8s ease-in-out infinite;}
.ref-page .ref-art-persona img{animation:award-idle 6s ease-in-out infinite;}
@media(prefers-reduced-motion:reduce){.ref-page .ref-art img{animation:none!important;}}
html:not(.phone-portrait) .ref-skill .ref-art{top:50px;height:600px;}
html.phone-portrait .ref-page .ref-art-equip{left:35px;width:calc(100% - 70px);height:190px;}
/* Dedicated chapter artwork: poses are drawn in their displayed orientation. */
.ref-page .ref-art-skill img,.ref-page .ref-art-item img{--art-angle:0deg;}
.ref-page .ref-art-equip img{--art-angle:0deg;animation:tests-reclining-idle 20s ease-in-out infinite;}
html:not(.phone-portrait) .ref-item .ref-art{left:550px;top:150px;width:540px;height:540px;opacity:.75;}
html:not(.phone-portrait) .ref-equip .ref-art{left:720px;top:250px;width:510px;height:370px;}
html.phone-portrait .ref-page .ref-art-equip{left:20px;top:175px;width:calc(100% - 40px);height:300px;}
html.phone-portrait .ref-calendar .ref-art,html.phone-portrait .ref-system .ref-art{display:none;}
@keyframes tests-reclining-idle{0%,30%,100%{transform:rotate(0deg) translate(0,0)}48%{transform:rotate(-1.5deg) translate(-2px,3px)}64%{transform:rotate(-3deg) translate(-4px,5px)}82%{transform:rotate(-1deg) translate(-1px,2px)}}
@media(prefers-reduced-motion:reduce){.ref-page .ref-art-equip img{animation:none!important;}}
html:not(.phone-portrait) .ref-equip .ref-art{left:930px;top:400px;width:330px;height:270px;}
.ref-page .ref-art-item img{mask-image:linear-gradient(#000 0 82%,transparent 100%);}

/* Match each reference composition instead of shrinking art around the panels. */
html:not(.phone-portrait) .ref-skill .ref-art{left:510px;top:14px;width:405px;height:682px;}
html:not(.phone-portrait) .ref-item .ref-art{left:340px;top:100px;width:650px;height:610px;}
html:not(.phone-portrait) .ref-equip{--list-left:35px;--list-top:150px;--list-width:735px;--panel-left:65px;--panel-top:505px;--panel-width:590px;}
html:not(.phone-portrait) .ref-equip .ref-nav{left:50px;top:15px;width:670px;}
html:not(.phone-portrait) .ref-equip .ref-art{left:660px;top:235px;width:590px;height:455px;}

/* Give the water surface depth behind the character, beyond the top edge. */
.water-facets{top:-18px;height:310px;opacity:.7;mask-image:linear-gradient(#000 0%,#000 40%,#0009 72%,transparent 100%);}
.scene:not(.detail-open) .water-facets{height:245px;opacity:.55;}
.water-facets g{animation:water-facets-drift 12s ease-in-out infinite alternate;}
.scene:not(.detail-open) .water-facets g{animation-duration:14s;}
@keyframes water-facets-drift{from{transform:translate(-12px,-3px) skewX(2deg) scaleY(.96)}to{transform:translate(18px,10px) skewX(-4deg) scaleY(1.08)}}
@media(prefers-reduced-motion:reduce){.water-facets g{animation:none!important;}}

/* Dissolve unfinished garment edges into the scene; preserve faces and hands. */
.ref-page .ref-art{overflow:visible;}
.ref-page .ref-art img{mask-repeat:no-repeat;mask-size:100% 100%;}
.ref-page .ref-art-skill img{mask-image:linear-gradient(90deg,#000 0 84%,transparent 100%);}
.ref-page .ref-art-equip img{mask-image:linear-gradient(90deg,#000 0 82%,transparent 100%),linear-gradient(#000 0 87%,transparent 100%);mask-composite:intersect;}
.ref-page .ref-art-item img{mask-image:linear-gradient(#000 0 68%,transparent 100%);}
.ref-page .ref-art-persona img,.ref-page .ref-art-stats img,.ref-page .ref-art-quest img,.ref-page .ref-art-social-link img{mask-image:linear-gradient(#000 0 76%,transparent 100%),linear-gradient(90deg,transparent 0%,#000 7% 91%,transparent 100%);mask-composite:intersect;}
html:not(.phone-portrait) .ref-art-stats::before,html:not(.phone-portrait) .ref-art-social-link::before{mask-image:linear-gradient(#000 0 70%,transparent 100%);}

/* Leadership uses complete extended artwork, with no duplicate limbs behind it. */
html:not(.phone-portrait) .ref-stats .ref-art{left:500px;top:95px;width:760px;height:570px;overflow:visible;}
html:not(.phone-portrait) .ref-art-stats::before{display:none;}
.ref-page .ref-art-stats img{object-fit:contain;object-position:center;mask-image:linear-gradient(#000 0 72%,transparent 94%);mask-composite:add;}

.opening-music:not([hidden]){position:absolute;z-index:4;left:50%;top:calc(50% + 105px);display:flex;align-items:center;gap:13px;padding:14px 26px;border:0;background:#061753;color:#70ffff;clip-path:polygon(5% 0,100% 0,95% 100%,0 100%);transform:translateX(-50%) rotate(-7deg);font:italic 700 14px/1.2 'P3 Rodin',sans-serif;white-space:nowrap;cursor:pointer;animation:openingEntryPlate 550ms 260ms backwards;transition:background .2s,color .2s;}
.opening-music:hover,.opening-music:focus-visible{background:#fff;color:#061753;outline:3px solid #ff258c;outline-offset:5px;}
.opening-music__state{min-width:38px;padding:5px 9px;background:#263661;color:#bcc9e6;text-align:center;}
.opening-music[aria-pressed=true] .opening-music__state{background:#64ffff;color:#061753;}
.opening-music__bars{display:flex;align-items:center;gap:3px;height:23px;}
.opening-music__bars i{width:3px;height:5px;background:currentColor;transition:height .2s;}
.opening-music[aria-pressed=true] .opening-music__bars i{height:20px;animation:entryEqualizer 700ms ease-in-out infinite alternate;}
.opening-music__bars i:nth-child(2){animation-delay:-300ms!important;}.opening-music__bars i:nth-child(3){animation-delay:-500ms!important;}.opening-music__bars i:nth-child(4){animation-delay:-150ms!important;}
@keyframes entryEqualizer{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
@media(max-width:520px){.opening-music:not([hidden]){top:calc(50% + 85px);font-size:11px;gap:10px;padding:12px 20px;}}
@media(prefers-reduced-motion:reduce){.opening-music,.opening-music__bars i{animation:none!important;}}

/* Independent surface currents keep the main-menu water visibly alive. */
.scene:not(.detail-open) .water-facets g{animation:menu-surface-flow 6s ease-in-out infinite alternate;}
.scene:not(.detail-open) .water-facets path{transform-box:fill-box;transform-origin:center;animation:menu-ripple-flex 3.8s ease-in-out infinite alternate;}
.scene:not(.detail-open) .water-facets path:nth-child(3n){animation-delay:-1.4s;animation-duration:4.6s;}
.scene:not(.detail-open) .water-facets path:nth-child(3n + 1){animation-delay:-2.8s;animation-direction:alternate-reverse;}
.scene:not(.detail-open) .hair-water-current{animation:menu-hair-current 6s ease-in-out infinite alternate;}
@keyframes menu-surface-flow{from{transform:translate(-30px,-5px) skewX(3deg) scaleY(.96)}to{transform:translate(35px,12px) skewX(-5deg) scaleY(1.12)}}
@keyframes menu-ripple-flex{from{transform:translate(0,-2px) scaleX(.88);opacity:.35}to{transform:translate(12px,5px) scaleX(1.18);opacity:.75}}
@keyframes menu-hair-current{from{transform:translate(25px,-10px) skewX(-.5deg)}to{transform:translate(29px,-5px) skewX(1.2deg)}}
@media(prefers-reduced-motion:reduce){.scene:not(.detail-open) .water-facets g,.scene:not(.detail-open) .water-facets path,.scene:not(.detail-open) .hair-water-current{animation:none!important;}}

/* Profile: one identity plate, suspended portrait, and four readable records. */
.profile-identity{display:none;}
html:not(.phone-portrait) .ref-skill{--list-left:825px;--list-top:145px;--list-width:405px;--panel-left:810px;--panel-top:375px;--panel-width:420px;}
html:not(.phone-portrait) .ref-skill .chapter-roster{left:25px;top:75px;width:405px;}
html:not(.phone-portrait) .ref-skill .chapter-member{height:65px;border-top:4px solid #ff217f;background:#fff;color:#071753;}
html:not(.phone-portrait) .ref-skill .chapter-member .member-name{font:italic 900 25px 'P3 Rodin',sans-serif!important;}
html:not(.phone-portrait) .ref-skill .profile-identity{display:block;position:absolute;left:48px;top:210px;width:355px;z-index:4;transform:rotate(-5deg);}
.profile-caption{font:700 12px 'P3 Expressway',sans-serif;letter-spacing:3px;color:#68ffff;}
.profile-identity h1{margin:20px 0 18px;font:italic 900 63px/.95 'P3 Rodin',sans-serif;letter-spacing:-4px;color:#fff;}
.profile-identity h1 strong{color:#64ffff;font-size:76px;}
.profile-identity p{font:20px/1.55 'P3 Skip',serif;color:#fff;margin:0;}
.profile-year{margin-top:30px;display:flex;align-items:center;gap:15px;color:#061753;background:#68ffff;width:250px;padding:9px 20px;clip-path:polygon(5% 0,100% 0,95% 100%,0 100%);}
.profile-year span{font:700 11px 'P3 Expressway',sans-serif;letter-spacing:1px;}.profile-year b{font:italic 700 36px 'P3 Expressway',sans-serif;}
html:not(.phone-portrait) .ref-skill .ref-art{left:405px;top:15px;width:430px;height:680px;}
html:not(.phone-portrait) .ref-skill .ref-art img{mask-image:none;}
html:not(.phone-portrait) .ref-skill .chapter-geometry{opacity:.8;}
html:not(.phone-portrait) .ref-skill .ref-page-word{left:10px;top:590px;font-size:140px;transform:rotate(-5deg);transform-origin:center;opacity:.12;}
html:not(.phone-portrait) .ref-skill .chapter-cost{top:55px;right:55px;display:flex;align-items:center;gap:18px;color:#fff;}
html:not(.phone-portrait) .ref-skill .chapter-cost b{font:italic 900 31px 'P3 Rodin',sans-serif;}
html:not(.phone-portrait) .ref-skill .chapter-cost span{font:italic 700 40px 'P3 Expressway',sans-serif;color:#67ffff;background:none;}
html:not(.phone-portrait) .ref-skill .ref-row{min-height:48px;margin-bottom:4px;padding-left:22px;clip-path:polygon(3% 0,100% 0,97% 100%,0 100%);background:#061753c9;}
html:not(.phone-portrait) .ref-skill .ref-row.selected{background:#fff;border-left:5px solid #ff217f;}
html:not(.phone-portrait) .ref-skill .ref-record-panel{max-height:240px;padding:22px 25px;background:#031343ed;clip-path:polygon(4% 0,100% 0,96% 100%,0 100%);}
html:not(.phone-portrait) .ref-skill .ref-record-heading h2{font-size:23px;}
html:not(.phone-portrait) .ref-skill .ref-record-description{font-size:16px;line-height:1.55;max-height:135px;}
html:not(.phone-portrait) .scene.detail-enter .profile-identity{animation:profile-identity-enter 550ms 130ms both;}
@keyframes profile-identity-enter{from{opacity:0;translate:-55px 15px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){.profile-identity{animation:none!important;}}

/* Education: inventory-like school ledger with an oversized blue portrait. */
.education-year,.education-context,.education-timeline{display:none;}
html:not(.phone-portrait) .ref-item{--list-left:610px;--list-top:195px;--list-width:610px;--panel-left:640px;--panel-top:405px;--panel-width:570px;}
html:not(.phone-portrait) .ref-item .chapter-roster{left:22px;top:72px;width:420px;}
html:not(.phone-portrait) .ref-item .chapter-member{height:64px;border-top:4px solid #ff217f;background:#fff;color:#071753;}
html:not(.phone-portrait) .ref-item .chapter-member .member-name{font:italic 900 23px 'P3 Rodin',sans-serif!important;}
html:not(.phone-portrait) .ref-item .ref-page-word{left:25px;top:-25px;font-size:100px;opacity:.28;letter-spacing:-7px;}
html:not(.phone-portrait) .ref-item .ref-nav{left:600px;top:40px;width:635px;}
html:not(.phone-portrait) .ref-item .chapter-sort{left:735px;top:48px;width:370px;font:italic 900 21px 'P3 Rodin',sans-serif!important;letter-spacing:-.5px;}
html:not(.phone-portrait) .ref-item .chapter-sort span{font:700 10px 'P3 Expressway',sans-serif;letter-spacing:2px;margin-top:10px;}
html:not(.phone-portrait) .ref-item .ref-art{left:35px;top:155px;width:640px;height:550px;opacity:.9;}
html:not(.phone-portrait) .ref-item .ref-art img{mask-image:linear-gradient(#000 0 62%,transparent 98%);}
html:not(.phone-portrait) .ref-item .education-year{display:block;position:absolute;left:44px;top:165px;z-index:3;color:#6affff;transform:rotate(-5deg);}
.education-year small{font:700 11px 'P3 Expressway',sans-serif;letter-spacing:2px;}.education-year b{display:block;font:italic 700 93px/1 'P3 Expressway',sans-serif;letter-spacing:-5px;color:#fff;}
html:not(.phone-portrait) .ref-item .ref-list{max-height:175px;}
html:not(.phone-portrait) .ref-item .ref-row{min-height:75px;padding:15px 24px;margin-bottom:8px;clip-path:polygon(3% 0,100% 0,97% 100%,0 100%);background:#05174dcf;border:0;grid-template-columns:40px 1fr 70px;}
html:not(.phone-portrait) .ref-item .ref-row.selected{background:#fff;border-left:5px solid #ff217f;color:#071753;}
html:not(.phone-portrait) .ref-item .ref-row-title{font-size:22px;}
html:not(.phone-portrait) .ref-item .ref-row em{font:italic 700 28px 'P3 Expressway',sans-serif;}
html:not(.phone-portrait) .ref-item .education-context{display:block;position:absolute;left:657px;top:365px;z-index:5;color:#75ffff;font:700 10px 'P3 Expressway',sans-serif;letter-spacing:1.5px;}
.education-context b{display:block;margin-top:6px;font-size:11px;color:#fff;}
.education-previous{display:none;}.ref-item[data-selected-record="1"] .education-current{display:none;}.ref-item[data-selected-record="1"] .education-previous{display:block;}
html:not(.phone-portrait) .ref-item .ref-record-panel{padding:27px 30px;min-height:170px;max-height:205px;background:#041344eb;clip-path:polygon(3% 0,100% 0,96% 100%,0 100%);border-top:2px solid #65ffff;}
html:not(.phone-portrait) .ref-item .ref-record-description{font-size:21px;line-height:1.5;max-height:80px;}
html:not(.phone-portrait) .ref-item .ref-record-heading{display:none;}
html:not(.phone-portrait) .ref-item .education-timeline{display:flex;position:absolute;left:100px;top:590px;width:430px;align-items:center;gap:17px;color:#fff;font:italic 700 27px 'P3 Expressway',sans-serif;transform:rotate(-4deg);}
.education-timeline i{height:3px;flex:1;background:#68ffff;position:relative;}.education-timeline i:after{content:'';position:absolute;right:0;top:-5px;width:12px;height:12px;background:#ff217f;transform:rotate(45deg);}.education-timeline b{color:#68ffff;}
/* Research: a publication index, with editorial scale and game-menu selection. */
.research-masthead{position:absolute;left:55px;top:120px;width:560px;z-index:3;transform:rotate(-5deg);}
.research-masthead small{font:700 14px 'P3 Expressway',sans-serif;letter-spacing:3px;color:#70ffff;}
.research-masthead h1{font:italic 900 68px/.98 'P3 Rodin',sans-serif;letter-spacing:-4px;color:white;margin:25px 0;}
.research-masthead h1 em{color:#67ffff;}.research-masthead p{font:18px 'P3 Skip',serif;color:#fff;}
.research-count{position:absolute;left:75px;top:470px;display:flex;align-items:center;gap:22px;transform:rotate(-5deg);color:#fff;}
.research-count b{font:italic 700 110px/1 'P3 Expressway',sans-serif;color:#67ffff;}.research-count span{font:italic 900 18px/1.3 'P3 Rodin',sans-serif;}
.research-status{position:absolute;right:60px;top:85px;display:flex;gap:20px;font:700 10px 'P3 Expressway',sans-serif;letter-spacing:1px;color:#061753;z-index:4;}
html:not(.phone-portrait) .ref-calendar{--list-left:620px;--list-top:175px;--list-width:610px;--panel-left:650px;--panel-top:400px;--panel-width:560px;}
html:not(.phone-portrait) .ref-calendar .chapter-geometry{display:none;}
html:not(.phone-portrait) .ref-calendar::before{clip-path:polygon(0 0,100% 0,100% 16%,53% 20%,0 8%);}
html:not(.phone-portrait) .ref-calendar .ref-page-word{left:25px;top:-20px;font-size:97px;color:#061753;opacity:.2;}
html:not(.phone-portrait) .ref-calendar .ref-nav{left:595px;top:15px;width:640px;}
html:not(.phone-portrait) .ref-calendar .ref-nav b{visibility:hidden;}
html:not(.phone-portrait) .ref-calendar .ref-list{max-height:205px;}
html:not(.phone-portrait) .ref-calendar .ref-row{min-height:88px;margin-bottom:10px;padding:15px 22px;grid-template-columns:35px 1fr 105px;background:#031548df;clip-path:polygon(3% 0,100% 0,97% 100%,0 100%);}
html:not(.phone-portrait) .ref-calendar .ref-row.selected{background:#fff;color:#061753;border-left:5px solid #ff217f;}
html:not(.phone-portrait) .ref-calendar .ref-row-title{font-size:22px;}
html:not(.phone-portrait) .ref-calendar .ref-record-panel{max-height:220px;background:#031344ef;padding:22px 25px;clip-path:polygon(3% 0,100% 0,96% 100%,0 100%);}
html:not(.phone-portrait) .ref-calendar .ref-record-description{max-height:105px;font-size:16px;line-height:1.5;}
.phone-portrait .research-masthead{left:25px;top:130px;width:calc(100% - 50px);transform:rotate(-3deg);}
.phone-portrait .research-masthead h1{font-size:37px;letter-spacing:-2px;margin:10px 0;}.phone-portrait .research-masthead small{font-size:10px;}.phone-portrait .research-masthead p{font-size:12px;}
.phone-portrait .research-count,.phone-portrait .research-status{display:none;}
html.phone-portrait .ref-calendar .ref-list{top:300px;max-height:110px;}
html.phone-portrait .ref-calendar .ref-record-panel{top:435px;height:min(210px,calc(100dvh - 570px));}
@media(max-height:720px){html.phone-portrait .research-masthead{top:120px;}html.phone-portrait .research-masthead h1{font-size:27px;margin:6px 0;}html.phone-portrait .research-masthead p{display:none;}html.phone-portrait .ref-calendar .ref-list{top:235px;max-height:100px;}html.phone-portrait .ref-calendar .ref-record-panel{top:355px;height:calc(100dvh - 480px);}}
/* Shared full-record archive: native typography, angular plates, readable prose. */
.document-viewer{font:18px/1.6 'P3 Skip',serif;}
.document-viewer::before{content:'';position:absolute;inset:0;background:linear-gradient(125deg,#061753a8,#034bc14d 65%,#061753aa);pointer-events:none;}
.document-viewer::after{content:'ARCHIVE';position:absolute;left:-20px;bottom:-25px;font:italic 900 155px/1 'P3 Rodin',sans-serif;color:#68ffff12;pointer-events:none;z-index:-1;}
.document-shell{inset:40px 65px 48px;}
.document-shell header{align-items:flex-start;gap:25px;margin-bottom:20px;flex-shrink:0;}
.document-shell header>div{min-width:0;max-width:85%;}
.document-shell header small{display:block;margin:0 0 10px 15px;color:#70ffff;font:700 11px 'P3 Expressway',sans-serif;letter-spacing:2px;}
.document-shell h2{font:italic 900 31px/1.2 'P3 Rodin',sans-serif;letter-spacing:-1px;max-width:100%;padding:12px 28px;color:#061753;background:#fff;border-top:4px solid #ff217f;box-shadow:-7px 7px 0 #68ffff;overflow-wrap:anywhere;}
.document-close,.document-tabs button,.document-external,.paper-paging{font:italic 700 14px/1.3 'P3 Rodin',sans-serif;}
.document-close{margin-top:24px;padding:12px 22px;}
.document-tabs{gap:10px;flex-wrap:wrap;margin:0 0 20px;}
.document-tabs button{background:#041344;color:#70ffff;border-bottom:2px solid #51b4dc;padding:11px 22px;}
.document-tabs button[aria-pressed=true]{background:#68ffff;color:#061753;border-bottom-color:#ff217f;}
.document-paper{min-height:0;}
.record-dossier{position:relative;height:100%;overflow:auto;padding:30px 50px 25px 65px;background:#031343e8;border-left:5px solid #68ffff;border-top:2px solid #ffffffaa;scrollbar-color:#68ffff #061753;isolation:isolate;}
.record-watermark{position:absolute;right:25px;top:10px;font:italic 700 200px/1 'P3 Expressway',sans-serif;color:#68ffff0d;z-index:-1;pointer-events:none;}
.record-dossier-label{color:#68ffff;font:700 11px 'P3 Expressway',sans-serif;letter-spacing:3px;margin-bottom:20px;}
.record-facts{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px;}.record-facts span{background:#1557a9;color:#fff;padding:7px 15px;font:700 12px 'P3 Expressway',sans-serif;border-left:3px solid #ff217f;}
.record-prose{max-width:900px;}.record-prose p{font:21px/1.7 'P3 Skip',serif;color:#fff;margin:0 0 22px;overflow-wrap:anywhere;}
.record-dossier-end{display:flex;align-items:center;gap:20px;margin-top:35px;font:700 10px 'P3 Expressway',sans-serif;letter-spacing:2px;color:#68ffff;}.record-dossier-end i{flex:1;height:1px;background:#68ffff55;}.record-dossier-end b{font-weight:400;color:#fff;}
.document-link-card{font:25px/1.5 'P3 Skip',serif;border-left:4px solid #68ffff;}.document-link-card a{font:italic 700 16px 'P3 Rodin',sans-serif;}
.document-shell footer{margin-top:15px;min-height:0;}.document-shell footer:has(a[hidden]){display:none;}
.document-external{background:#68ffff;color:#061753;text-decoration:none;}
.document-tabs button:focus-visible,.document-external:focus-visible,.paper-paging button:focus-visible{outline:3px solid #ff217f;outline-offset:4px;}
.phone-portrait .document-shell header>div{max-width:calc(100% - 70px);}
.phone-portrait .document-shell header small{font-size:8px;letter-spacing:1px;margin-left:0;}
.phone-portrait .document-shell h2{font:italic 900 18px/1.25 'P3 Rodin',sans-serif;padding:10px 14px;}
.phone-portrait .document-close{font-size:10px;padding:9px;margin-top:22px;}
.phone-portrait .document-tabs{gap:7px;margin-bottom:13px;}.phone-portrait .document-tabs button{font-size:10px;padding:8px 12px;}
.phone-portrait .record-dossier{padding:20px 18px;border-left-width:3px;}.phone-portrait .record-prose p{font-size:16px;line-height:1.65;}.phone-portrait .record-dossier-label{font-size:9px;letter-spacing:1px;}.phone-portrait .record-facts span{font-size:10px;padding:6px 10px;}.phone-portrait .record-dossier-end{font-size:8px;gap:8px;letter-spacing:.5px;}
.phone-portrait .record-watermark{font-size:110px;}
/* Remove legacy calendar placement and ink colors from the publication screen. */
html:not(.phone-portrait) .ref-calendar .ref-list{left:620px;top:175px;width:610px;}
html:not(.phone-portrait) .ref-calendar .ref-row em{grid-column:auto;font:italic 700 14px 'P3 Expressway',sans-serif;}
html:not(.phone-portrait) .ref-calendar .ref-record-panel{left:650px;top:400px;width:560px;color:white;}
html:not(.phone-portrait) .ref-calendar .ref-record-description{color:white;}
html:not(.phone-portrait) .ref-calendar .ref-record-heading h2,html:not(.phone-portrait) .ref-calendar .ref-record-index{color:#68ffff;}
html.phone-portrait .ref-calendar .ref-record-panel{max-height:none;}
@media(max-width:360px){.phone-portrait .mobile-controls{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;}.phone-portrait .mobile-control{width:46px;min-width:44px;height:48px;justify-self:center;font-size:16px;}}
html:not(.phone-portrait) .ref-calendar .ref-row{color:#68ffff;}
html:not(.phone-portrait) .ref-calendar .ref-row.selected{color:#061753;}
.research-status{color:#d5ffff;}

/* Visible, draggable archive and list scrollbars with native wheel scrolling. */
.ref-list,.ref-record-description,.record-dossier,.paper-gallery,.social-command-stack{overscroll-behavior:contain;scrollbar-width:auto;scrollbar-color:#68ffff #061753;scrollbar-gutter:stable;}
.ref-record-description{min-height:0;padding-right:10px;}
.ref-list::-webkit-scrollbar,.ref-record-description::-webkit-scrollbar,.record-dossier::-webkit-scrollbar,.paper-gallery::-webkit-scrollbar,.social-command-stack::-webkit-scrollbar{width:12px;height:12px;}
.ref-list::-webkit-scrollbar-track,.ref-record-description::-webkit-scrollbar-track,.record-dossier::-webkit-scrollbar-track,.paper-gallery::-webkit-scrollbar-track,.social-command-stack::-webkit-scrollbar-track{background:#061753;border:1px solid #4277b5;}
.ref-list::-webkit-scrollbar-thumb,.ref-record-description::-webkit-scrollbar-thumb,.record-dossier::-webkit-scrollbar-thumb,.paper-gallery::-webkit-scrollbar-thumb,.social-command-stack::-webkit-scrollbar-thumb{background:#68ffff;border:2px solid #061753;min-height:32px;}
.ref-list::-webkit-scrollbar-thumb:hover,.ref-record-description::-webkit-scrollbar-thumb:hover,.record-dossier::-webkit-scrollbar-thumb:hover,.paper-gallery::-webkit-scrollbar-thumb:hover{background:#fff;}
.document-tabs{max-height:125px;overflow-y:auto;scrollbar-color:#68ffff #061753;}
/* Reading mode gives the paper the viewport, with persistent explicit controls. */
body:has(.document-page-open) .mobile-controls,body:has(.document-page-open) .mobile-volume{display:none;}
.document-viewer[data-mode=document] .document-shell{inset:15px 25px 15px;}
.document-viewer[data-mode=document] .document-shell header{margin-bottom:10px;}
.document-viewer[data-mode=document] .document-shell header small{display:none;}
.document-viewer[data-mode=document] .document-shell h2{font-size:21px;padding:7px 22px;}
.document-viewer[data-mode=document] .document-close{margin-top:0;font-size:12px;padding:10px 17px;}
.document-viewer[data-mode=document] .document-tabs{margin-bottom:10px;gap:7px;}
.document-viewer[data-mode=document] .document-tabs button{padding:7px 15px;font-size:11px;}
.document-viewer[data-mode=document] footer{margin-top:7px;}
.paper-tools{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 14px;background:#041344;flex-shrink:0;border-bottom:2px solid #68ffff;z-index:2;font:700 12px 'P3 Expressway',sans-serif;}
.paper-page-controls,.paper-zoom-controls{display:flex;align-items:center;gap:9px;}
.paper-tools button{padding:8px 13px;min-height:36px;border:0;background:#1557a9;color:white;font:700 13px 'P3 Expressway',sans-serif;cursor:pointer;}
.paper-tools button:disabled{opacity:.35;cursor:default;}.paper-tools button:hover:not(:disabled),.paper-tools button[aria-pressed=true]{background:#68ffff;color:#061753;}
.paper-tools button:focus-visible,.paper-page-input:focus-visible{outline:2px solid #ff217f;outline-offset:2px;}
.paper-page-input{width:55px;margin-left:6px;background:white;color:#061753;border:0;padding:7px;font:700 15px 'P3 Expressway',sans-serif;}
.paper-zoom-value{min-width:45px;text-align:center;}
.paper-reader{display:block;padding:20px 18px;background:#02123888;overflow:auto;text-align:center;}
.paper-reader .paper-outline{height:auto;width:var(--paper-zoom,100%);max-width:none;margin:0 auto;padding:5px;transform:none;cursor:auto;box-shadow:5px 6px 0 #68ffff55;transition:none;}
.paper-reader .paper-image{width:100%;height:auto;max-width:none;display:block;}
.paper-reader .paper-outline:before,.paper-reader .paper-outline:after{display:none;}
.paper-reader[data-fit=page]{display:flex;align-items:center;justify-content:center;}
.paper-reader[data-fit=page] .paper-outline{height:100%;width:auto;max-width:100%;margin:auto;}
.paper-reader[data-fit=page] .paper-image{height:100%;width:auto;max-width:100%;object-fit:contain;}
.paper-announcement{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
.phone-portrait .document-viewer[data-mode=document] .document-shell{inset:auto;left:var(--doc-left);top:var(--doc-top);width:var(--doc-width);height:var(--doc-height);}
.phone-portrait .document-viewer[data-mode=document] .document-shell h2{font-size:15px;padding:7px 12px;}
.phone-portrait .document-viewer[data-mode=document] .document-tabs button{font-size:9px;padding:7px 10px;}
.phone-portrait .paper-tools{padding:7px;gap:7px;}.phone-portrait .paper-page-controls,.phone-portrait .paper-zoom-controls{gap:5px;}.phone-portrait .paper-tools button{padding:7px 10px;min-height:34px;font-size:11px;}.phone-portrait .paper-page-input{width:46px;padding:6px;}.phone-portrait .paper-reader{padding:12px 7px;}.phone-portrait .paper-zoom-value{min-width:34px;font-size:10px;}

/* Rows are the primary record action; the preview no longer needs a second button. */
.ref-page .ref-record-open{display:none!important;}
.ref-page .ref-row{cursor:pointer;}
.ref-page .ref-row:focus-visible{outline:3px solid #ff217f;outline-offset:-3px;}

/* Hover gives motion and emphasis; the selected record changes only on activation. */
.ref-page .ref-row{transform-origin:50% 50%;transition:scale 150ms cubic-bezier(.2,.8,.2,1),filter 150ms,box-shadow 150ms;}
@media(hover:hover) and (pointer:fine){.ref-page .ref-row:hover{scale:1.035;filter:brightness(1.18);z-index:2;box-shadow:-5px 0 0 #ff217f,5px 0 0 #68ffff;}.ref-page .ref-row:not(.selected):hover{background:#1258a4;color:#fff;}}
.ref-page .ref-row:active{scale:1.015;}
@media(prefers-reduced-motion:reduce){.ref-page .ref-row{transition:none;}.ref-page .ref-row:hover{scale:1;}}

/* Selection, hover and keyboard focus must not leak ink colors into each other. */
html .ref-page .ref-row:not(.selected){color:#68ffff!important;}
html .ref-page.ref-social-link .ref-row:not(.selected){background:#72ffff;color:#051440!important;}
html .ref-page .ref-row.selected{color:#061753!important;}
html .ref-page .ref-row:not(.selected):focus-visible{outline:3px solid #ff217f;outline-offset:-3px;}
@media(hover:hover) and (pointer:fine){html .ref-page .ref-row:not(.selected):hover{background:#1258a4;color:#fff!important;}}
/* Skills selectors need room for the complete word and its angled highlight. */
html:not(.phone-portrait) .ref-system .ref-list{left:635px;top:140px;width:570px;max-height:380px;padding:25px 40px 30px;}
html:not(.phone-portrait) .ref-system .ref-row{width:100%;max-width:none;min-height:72px;margin-bottom:16px;padding:12px 16px;clip-path:none;}
html:not(.phone-portrait) .ref-system .ref-row-title{width:auto;max-width:100%;font-size:32px!important;line-height:1.25;letter-spacing:-.04em!important;white-space:normal;overflow-wrap:normal;}
html:not(.phone-portrait) .ref-system .ref-row.selected{transform:translateX(2px) rotate(-3deg) scale(1.04);}
html .ref-page.ref-system .ref-row:focus,html .ref-page.ref-system .ref-row:focus-visible{outline:none!important;box-shadow:none;}
html .ref-page.ref-system .ref-row:focus-visible .ref-row-title{text-decoration:underline;text-decoration-color:#68ffff;text-underline-offset:6px;}
/* A focused record stays readable without a rectangular return-focus frame. */
html .ref-page .ref-row:focus,html .ref-page .ref-row:focus-visible{outline:none!important;}
html .ref-page .ref-row:focus-visible .ref-row-title{text-decoration:underline;text-decoration-color:currentColor;text-underline-offset:5px;text-decoration-thickness:2px;}
/* The course footer must not inherit the selected-arrow's top position. */
html:not(.phone-portrait) .ref-social-link .ref-row{height:auto;min-height:100px;padding-bottom:25px;}
html:not(.phone-portrait) .ref-social-link .ref-row::after,html:not(.phone-portrait) .ref-social-link .ref-row.selected::after{top:auto;right:auto;bottom:-16px;left:60px;line-height:12px;transform:none;animation:none;pointer-events:none;}
html:not(.phone-portrait) .ref-social-link .ref-row{grid-template-columns:36px minmax(0,1fr) 78px;}
html:not(.phone-portrait) .ref-social-link .ref-row em{font-size:24px;text-align:right;}
html:not(.phone-portrait) .ref-social-link .ref-row-title{font-size:18px;line-height:1.2;}
html:not(.phone-portrait) .ref-social-link .ref-row:last-child::after{content:'RESEARCH';}
/* Document controls follow the game's cut-paper command plates. */
.paper-tools{position:relative;background:#031344;border:0;border-bottom:3px solid #65ffff;padding:10px 18px 13px;gap:12px;box-shadow:0 6px 0 #03134477;}
.paper-page-controls{padding:4px 13px 4px 5px;background:#fff;color:#061753;transform:skew(-7deg);clip-path:polygon(3% 0,100% 0,97% 100%,0 100%);gap:12px;}
.paper-tools .paper-page-controls button{background:#061753;color:#68ffff;min-width:40px;clip-path:polygon(10% 0,100% 0,90% 100%,0 100%);}
.paper-page-controls label{font:italic 900 11px 'P3 Rodin',sans-serif;letter-spacing:1px;display:flex;align-items:center;gap:7px;}
.paper-page-input{background:#061753;color:#fff;border-bottom:3px solid #ff217f;width:60px;text-align:center;font:italic 700 24px/1 'P3 Expressway',sans-serif;padding:3px 2px;margin:0;}
.paper-total{font:italic 700 20px 'P3 Expressway',sans-serif;color:#061753;}
.paper-zoom-controls{gap:6px;}
.paper-tools .paper-zoom-controls button{font:italic 900 12px 'P3 Rodin',sans-serif;background:#0b3679;padding:11px 18px;transform:skew(-7deg);border-bottom:2px solid #347bb5;}
.paper-tools .paper-zoom-controls [data-zoom]{font:italic 700 23px/1 'P3 Expressway',sans-serif;padding:6px 13px;min-width:36px;}
.paper-zoom-value{font:italic 700 18px 'P3 Expressway',sans-serif;color:#68ffff;min-width:57px;}
.paper-tools .paper-zoom-controls button[aria-pressed=true]{background:#fff;color:#061753;border-bottom:3px solid #ff217f;box-shadow:-4px 4px 0 #68ffff;}
.paper-tools button:hover:not(:disabled){background:#68ffff;color:#061753;}
.document-viewer[data-mode=document] .document-tabs button{clip-path:polygon(4% 0,100% 0,96% 100%,0 100%);border-bottom:0;padding:9px 20px;}
.document-viewer[data-mode=document] .document-tabs button[aria-pressed=true]{background:white;box-shadow:0 3px 0 #ff217f;}
.document-viewer[data-mode=document] .document-shell h2{background:#fff;color:#061753;letter-spacing:-.7px;}
.document-viewer[data-mode=document] .document-close{clip-path:polygon(8% 0,100% 0,92% 100%,0 100%);border-bottom:3px solid #ff217f;}
.paper-reader{background:linear-gradient(115deg,#021238c9,#0757a366);border-left:2px solid #68ffff66;border-right:2px solid #68ffff66;}
.document-viewer[data-mode=document] .document-external{clip-path:polygon(5% 0,100% 0,95% 100%,0 100%);padding:8px 25px;}
.phone-portrait .paper-tools{padding:7px 7px 10px;gap:10px;}
.phone-portrait .paper-page-controls{gap:8px;padding:3px 10px 3px 4px;}
.phone-portrait .paper-tools .paper-page-controls button{min-width:32px;padding:6px 9px;}
.phone-portrait .paper-page-controls label{font-size:9px;letter-spacing:0;gap:4px;}
.phone-portrait .paper-page-input{font-size:20px;width:46px;padding:3px;}
.phone-portrait .paper-total{font-size:17px;}
.phone-portrait .paper-zoom-controls{gap:5px;width:100%;justify-content:space-between;}
.phone-portrait .paper-tools .paper-zoom-controls button{font-size:10px;padding:9px 12px;}
.phone-portrait .paper-tools .paper-zoom-controls [data-zoom]{font-size:20px;padding:5px 10px;min-width:30px;}
.phone-portrait .paper-zoom-value{font-size:14px;min-width:42px;}
.sfx-panel{position:absolute;left:30px;top:22px;z-index:32;display:flex;align-items:center;gap:12px;padding:7px 17px;background:#061753e8;border-bottom:2px solid #68ffff;transform:skew(-7deg);color:white;font:italic 700 11px 'P3 Rodin',sans-serif;}
.sfx-toggle{border:0;background:#68ffff;color:#061753;padding:7px 12px;font:inherit;cursor:pointer;min-width:82px;}
.sfx-toggle[aria-pressed=false]{background:#fff;color:#061753;}
.sfx-panel label{display:flex;align-items:center;gap:10px;}.sfx-panel input{width:110px;accent-color:#68ffff;cursor:pointer;}.sfx-panel output{min-width:33px;}
.sfx-panel button:focus-visible,.sfx-panel input:focus-visible{outline:2px solid white;outline-offset:3px;}
.is-awaiting-entry .sfx-panel,.is-building-menu .sfx-panel,.scene.detail-open .sfx-panel,.document-page-open .sfx-panel{display:none;}
.phone-portrait .sfx-panel{position:fixed;left:16px;right:16px;top:15px;transform:none;padding:5px 10px;gap:9px;justify-content:space-between;}
.phone-portrait .sfx-panel input{width:85px;}.phone-portrait .sfx-panel label{gap:5px;}.phone-portrait .sfx-toggle{min-width:65px;padding:7px;}
html:not(.phone-portrait) .sfx-panel{left:320px;gap:8px;padding:7px 12px;}
html:not(.phone-portrait) .sfx-panel input{width:90px;}
/* A single quiet command rail replaces the competing document control plates. */
.paper-tools{padding:9px 16px;gap:10px;background:#041344;border-bottom:2px solid #68ffff;box-shadow:none;}
.paper-page-controls{background:none;color:#fff;transform:none;clip-path:none;padding:0;gap:9px;}
.paper-page-controls label{font:700 10px 'P3 Expressway',sans-serif;letter-spacing:1px;gap:8px;}
.paper-tools .paper-page-controls button{background:transparent;color:#68ffff;clip-path:none;min-width:32px;padding:7px;border:1px solid #4275a6;}
.paper-page-input{background:#fff;color:#061753;border:0;width:48px;padding:4px;font:italic 700 20px 'P3 Expressway',sans-serif;}
.paper-total{font:700 14px 'P3 Expressway',sans-serif;color:#a8c9e7;}
.paper-zoom-controls{gap:5px;}
.paper-tools .paper-zoom-controls button{transform:none;background:transparent;border:0;box-shadow:none;padding:8px 14px;font:700 12px 'P3 Expressway',sans-serif;}
.paper-tools .paper-zoom-controls [data-zoom]{border:1px solid #4275a6;min-width:32px;padding:5px 9px;font:700 20px/1 'P3 Expressway',sans-serif;}
.paper-zoom-value{font:700 13px 'P3 Expressway',sans-serif;min-width:48px;}
.paper-tools .paper-zoom-controls button[data-fit]{margin-left:4px;border-bottom:2px solid transparent;}
.paper-tools .paper-zoom-controls button[aria-pressed=true]{background:transparent;color:#68ffff;border-bottom:2px solid #68ffff;box-shadow:none;}
.paper-tools button:hover:not(:disabled){background:#15518d;color:#fff;}
.document-viewer[data-mode=document] .document-tabs{gap:3px;}
.document-viewer[data-mode=document] .document-tabs button{clip-path:none;transform:none;background:#041344;color:#b5e7ff;padding:8px 16px;border:0;border-bottom:2px solid transparent;box-shadow:none;}
.document-viewer[data-mode=document] .document-tabs button[aria-pressed=true]{background:#041344;color:#fff;border-bottom:2px solid #ff217f;box-shadow:none;}
.document-viewer[data-mode=document] .document-close{clip-path:none;transform:none;background:#041344;color:#fff;border:1px solid #68ffff66;}
.document-viewer[data-mode=document] .document-shell h2{font-size:19px;border-top:3px solid #ff217f;box-shadow:-4px 4px 0 #68ffff;padding:7px 18px;}
.phone-portrait .paper-tools{padding:8px;gap:9px;}
.phone-portrait .paper-page-controls{padding:0;gap:7px;}
.phone-portrait .paper-tools .paper-page-controls button{min-width:30px;padding:5px;}
.phone-portrait .paper-page-input{font-size:18px;width:42px;}
.phone-portrait .paper-total{font-size:12px;}
.phone-portrait .paper-zoom-controls{width:100%;justify-content:flex-start;gap:5px;}
.phone-portrait .paper-tools .paper-zoom-controls button{padding:7px 10px;font-size:11px;}
.phone-portrait .paper-tools .paper-zoom-controls [data-zoom]{font-size:18px;padding:4px 8px;min-width:30px;}
.phone-portrait .paper-zoom-value{font-size:12px;min-width:42px;}
/* Continuous overlapping currents, without a visible start/stop at each loop. */
.water-facets g,.scene:not(.detail-open) .water-facets g{animation:water-continuous-swell 10s linear infinite;transform-origin:center;}
.water-facets path,.scene:not(.detail-open) .water-facets path{transform-box:fill-box;transform-origin:center;animation:water-ripple-lap 5s ease-in-out infinite;}
.water-facets path:nth-child(3n),.scene:not(.detail-open) .water-facets path:nth-child(3n){animation-duration:6.5s;animation-delay:-2.2s;}
.water-facets path:nth-child(3n + 1),.scene:not(.detail-open) .water-facets path:nth-child(3n + 1){animation-duration:4.8s;animation-delay:-3.6s;animation-direction:normal;}
.water-facets path:nth-child(5n){animation-delay:-1.4s;}
.scene:not(.detail-open) .hair-water-current{animation:water-connected-flow 8s linear infinite;}
.coded-caustics{transform-origin:850px 150px;animation:water-caustic-light 9s linear infinite;}
@keyframes water-continuous-swell{0%,100%{transform:translate(-12px,0) skewX(0deg) scaleY(1)}25%{transform:translate(13px,5px) skewX(-2deg) scaleY(1.05)}50%{transform:translate(25px,0) skewX(0deg) scaleY(1)}75%{transform:translate(0,-4px) skewX(2deg) scaleY(.97)}}
@keyframes water-ripple-lap{0%,100%{transform:translate(-5px,0) scale(1,.88);opacity:.4}25%{transform:translate(2px,2px) scale(1.12,1);opacity:.58}50%{transform:translate(9px,0) scale(1.18,.9);opacity:.68}75%{transform:translate(1px,-2px) scale(1.08,.8);opacity:.52}}
@keyframes water-connected-flow{0%,100%{transform:translate(25px,-10px) skewX(0deg)}25%{transform:translate(28px,-7px) skewX(.7deg)}50%{transform:translate(26px,-4px) skewX(1deg)}75%{transform:translate(23px,-7px) skewX(.3deg)}}
@keyframes water-caustic-light{0%,100%{transform:translate(0,0) skewX(0deg);opacity:.25}25%{transform:translate(10px,3px) skewX(-2deg);opacity:.32}50%{transform:translate(18px,0) skewX(0deg);opacity:.26}75%{transform:translate(7px,-3px) skewX(2deg);opacity:.2}}
@media(prefers-reduced-motion:reduce){.water-facets g,.water-facets path,.scene:not(.detail-open) .water-facets g,.scene:not(.detail-open) .water-facets path,.scene:not(.detail-open) .hair-water-current,.coded-caustics{animation:none!important;}}

/* Sound-effects controls removed from the menu. */
.sfx-panel{display:none!important;}
html:not(.keyboard-navigation) .ref-page .ref-row .ref-row-title{text-decoration:none!important;}
html.keyboard-navigation .ref-page .ref-row:not(.selected) .ref-row-title{text-decoration:none!important;}

.ref-help i{font:italic 700 14px/1.5 'P3 Rodin',sans-serif;max-width:600px;}
html.phone-portrait .ref-page::after{content:'Tap to select · Tap again to view full record';position:absolute;left:20px;right:20px;bottom:140px;color:#fff;font:700 10px/1.4 'P3 Expressway',sans-serif;text-align:center;pointer-events:none;z-index:6;text-shadow:1px 1px #061753;}

.ref-help kbd{display:inline-block;padding:3px 7px;margin-right:4px;border:1px solid #ffffffa0;background:#061753;color:#fff;font:700 11px 'P3 Expressway',sans-serif;box-shadow:0 2px 0 #001044;}
.record-hover-hint[hidden]{display:none;}
.record-hover-hint{position:fixed;z-index:12000;pointer-events:none;padding:11px 20px 11px 17px;max-width:calc(100vw - 28px);background:#68ffff;color:#061753;border-left:4px solid #ff217f;box-shadow:4px 4px 0 #061753;font:italic 900 11px/1.35 'P3 Rodin',sans-serif;letter-spacing:.2px;clip-path:polygon(0 0,100% 0,96% 100%,0 100%);animation:record-hint-in 150ms ease-out both;}
@keyframes record-hint-in{from{opacity:0;translate:-7px 0}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){.record-hover-hint{animation:none;}}
/* Tests pairs a score dashboard with the game's equipment-list composition. */
.tests-score,.tests-ap-summary,.tests-list-label{display:none;}
html:not(.phone-portrait) .ref-equip .chapter-geometry{opacity:.3;}
html:not(.phone-portrait) .ref-equip::before{clip-path:polygon(0 0,100% 0,100% 13%,44% 17%,0 9%);}
html:not(.phone-portrait) .ref-equip .chapter-equipment-name{left:58px;top:30px;color:#061753;font:italic 900 29px 'P3 Rodin',sans-serif;z-index:5;}
html:not(.phone-portrait) .ref-equip .chapter-equipment-name small{font:700 10px 'P3 Expressway',sans-serif;letter-spacing:2px;margin-top:5px;}
html:not(.phone-portrait) .ref-equip .ref-nav{left:805px;top:24px;width:400px;}
html:not(.phone-portrait) .ref-equip .ref-page-word{left:10px;top:575px;font-size:130px;opacity:.13;}
html:not(.phone-portrait) .ref-equip .tests-score{display:block;position:absolute;left:65px;top:140px;width:515px;transform:rotate(-4deg);color:#fff;z-index:3;}
.tests-score>small{font:700 12px 'P3 Expressway',sans-serif;letter-spacing:2px;color:#68ffff;}
.tests-score>b{display:block;font:italic 700 112px/1.1 'P3 Expressway',sans-serif;letter-spacing:-4px;margin:10px 0;}
.tests-score>b>span{font-size:25px;letter-spacing:0;color:#68ffff;margin-left:12px;}
.tests-score>div{display:flex;gap:25px;border-top:2px solid #68ffff;padding-top:14px;font:700 10px 'P3 Expressway',sans-serif;letter-spacing:1px;}
.tests-score strong{display:block;font:italic 700 33px 'P3 Expressway',sans-serif;color:#68ffff;margin-top:4px;}
html:not(.phone-portrait) .ref-equip .tests-ap-summary{display:flex;position:absolute;left:70px;top:410px;gap:22px;width:500px;padding:18px 20px;background:#041344e8;border-left:4px solid #ff217f;transform:skew(-5deg);z-index:3;}
.tests-ap-summary>span{flex:1;}.tests-ap-summary i{display:block;font:700 10px 'P3 Expressway',sans-serif;color:#68ffff;letter-spacing:1px;margin-bottom:12px;}.tests-ap-summary b{display:block;font:16px/1.6 'P3 Skip',serif;color:#fff;}.tests-ap-summary em{color:#68ffff;white-space:nowrap;margin-left:8px;}
html:not(.phone-portrait) .ref-equip .tests-list-label{display:flex;justify-content:space-between;position:absolute;left:660px;top:135px;width:540px;font:700 12px 'P3 Expressway',sans-serif;letter-spacing:2px;color:white;}
.tests-list-label span{font-size:9px;color:#68ffff;}
html:not(.phone-portrait) .ref-equip .ref-list{left:630px;top:165px;width:590px;max-height:315px;}
html:not(.phone-portrait) .ref-equip .ref-row{min-height:52px;margin-bottom:5px;padding:10px 18px;grid-template-columns:32px minmax(0,1fr) 85px;clip-path:polygon(3% 0,100% 0,97% 100%,0 100%);background:#061753df;}
html:not(.phone-portrait) .ref-equip .ref-row.selected{background:white;border-left:4px solid #ff217f;}
html:not(.phone-portrait) .ref-equip .ref-row-title{font-size:19px;}
html:not(.phone-portrait) .ref-equip .ref-row em{font:italic 700 23px 'P3 Expressway',sans-serif;text-align:right;}
html:not(.phone-portrait) .ref-equip .ref-record-panel{left:65px;top:565px;width:515px;max-height:105px;padding:13px 18px;background:#031344d9;}
html:not(.phone-portrait) .ref-equip .ref-record-heading{display:none;}
html:not(.phone-portrait) .ref-equip .ref-record-description{font-size:15px;line-height:1.5;max-height:70px;margin:0;}
html:not(.phone-portrait) .ref-equip .ref-art{left:720px;top:415px;width:490px;height:240px;opacity:.85;}
html:not(.phone-portrait) .ref-equip .ref-help{bottom:15px;}
html:not(.phone-portrait) .ref-equip .chapter-equipment-name{font-family:'P3 Rodin',sans-serif!important;font-weight:900!important;font-size:25px;letter-spacing:-1px;}
/* Keep archive chrome stable while only the tab content changes. */
.document-viewer[data-mode=document] .document-shell{inset:40px 65px 48px;}
.document-viewer[data-mode=document] .document-shell header{margin-bottom:20px;}
.document-viewer[data-mode=document] .document-shell header small{display:block;}
.document-viewer[data-mode=document] .document-shell h2{font:italic 900 31px/1.2 'P3 Rodin',sans-serif;letter-spacing:-1px;padding:12px 28px;border-top:4px solid #ff217f;box-shadow:-7px 7px 0 #68ffff;}
.document-viewer[data-mode=document] .document-close{margin-top:24px;padding:12px 22px;font:italic 700 14px/1.3 'P3 Rodin',sans-serif;transform:skewX(-8deg);background:white;color:#061753;border:0;clip-path:none;}
.document-viewer[data-mode=document] .document-tabs{gap:10px;margin:0 0 20px;}
.document-viewer[data-mode=document] .document-tabs button{font:italic 700 14px/1.3 'P3 Rodin',sans-serif;transform:skewX(-8deg);padding:11px 22px;background:#041344;color:#70ffff;border-bottom:2px solid #51b4dc;clip-path:none;box-shadow:none;}
.document-viewer[data-mode=document] .document-tabs button[aria-pressed=true]{background:#68ffff;color:#061753;border-bottom-color:#ff217f;box-shadow:none;}
.phone-portrait .document-viewer[data-mode=document] .document-shell{inset:auto;left:var(--doc-left);top:var(--doc-top);width:var(--doc-width);height:var(--doc-height);}
.phone-portrait .document-viewer[data-mode=document] .document-shell header small{font-size:8px;letter-spacing:1px;margin-left:0;}
.phone-portrait .document-viewer[data-mode=document] .document-shell h2{font:italic 900 18px/1.25 'P3 Rodin',sans-serif;padding:10px 14px;}
.phone-portrait .document-viewer[data-mode=document] .document-close{font-size:10px;padding:9px;margin-top:22px;}
.phone-portrait .document-viewer[data-mode=document] .document-tabs{gap:7px;margin-bottom:13px;}
.phone-portrait .document-viewer[data-mode=document] .document-tabs button{font-size:10px;padding:8px 12px;}
/* Broader, slow buoyancy keeps the portrait and attached water in one current. */
html:not(.is-building-menu):not(.is-awaiting-entry) .scene:not(.detail-open) .hero-figure,html:not(.is-building-menu):not(.is-awaiting-entry) .scene:not(.detail-open) .hair-water-bridge{animation-duration:8s;animation-timing-function:ease-in-out;}
@keyframes menu-character-buoyancy{0%,100%{translate:0 0;rotate:-.8deg;}25%{translate:10px -6px;rotate:0deg;}50%{translate:15px -15px;rotate:.8deg;}75%{translate:4px -8px;rotate:0deg;}}
@keyframes menu-current-buoyancy{0%,100%{translate:0 0;rotate:-.35deg;}25%{translate:10px -6px;rotate:0deg;}50%{translate:15px -15px;rotate:.35deg;}75%{translate:4px -8px;rotate:0deg;}}
@media(prefers-reduced-motion:reduce){.scene:not(.detail-open) .hero-figure,.scene:not(.detail-open) .hair-water-bridge{animation:none!important;}}
/* Eight section-specific overview layouts. Research retains its archive sheet. */
.section-overview{padding:0;border:0;background:#041344ef;}
.section-overview h3,.section-overview p{overflow-wrap:anywhere;}
.section-overview h3{margin:0;font:italic 900 30px/1.2 'P3 Rodin',sans-serif;letter-spacing:-.7px;}
.section-overview .record-prose p{font-size:20px;line-height:1.65;}
.overview-eyebrow{font:700 11px/1.5 'P3 Expressway',sans-serif;letter-spacing:2px;color:#68ffff;margin-bottom:20px;overflow-wrap:anywhere;}
.section-overview .record-dossier-end{margin-top:30px;}
.section-overview .record-facts{margin-bottom:24px;}
.section-overview:focus-visible{outline:2px solid #68ffff;outline-offset:-3px;}
/* Profile / identity file */
.identity-layout{display:grid;grid-template-columns:290px minmax(0,1fr);min-height:100%;}
.identity-card{padding:25px 26px 35px;background:linear-gradient(155deg,#156cbe,#06378a);border-right:4px solid #68ffff;}
.identity-art{height:190px;margin:-5px 0 20px;overflow:hidden;border-bottom:2px solid #68ffff;}
.identity-art img{width:100%;height:100%;object-fit:contain;object-position:center top;mask-image:linear-gradient(#000 0 75%,transparent);}
.identity-card small{font:700 10px 'P3 Expressway',sans-serif;letter-spacing:1px;color:#b7ffff;}
.identity-card h3{margin:17px 0 22px;font-size:36px;line-height:1;}.identity-card h3 em{color:#68ffff;}
.identity-card>span{font:700 11px 'P3 Expressway',sans-serif;letter-spacing:2px;background:#fff;color:#061753;padding:8px 12px;display:inline-block;transform:skew(-6deg);}
.identity-copy{padding:40px 45px;align-self:center;min-width:0;}.identity-rule{width:70px;height:5px;background:#ff217f;margin-bottom:28px;}
/* Education / transcript */
.overview-item{background:#f4f8ff;color:#061753;border-top:5px solid #68ffff;}
.transcript-top{display:flex;gap:20px;align-items:center;justify-content:space-between;padding:20px 35px;border-bottom:2px solid #061753;}
.transcript-top .overview-eyebrow{color:#061753;margin:0;}.transcript-top>b{font:italic 700 48px/1 'P3 Expressway',sans-serif;}.transcript-top>span{font:700 10px 'P3 Expressway',sans-serif;letter-spacing:2px;}
.transcript-layout{display:grid;grid-template-columns:300px minmax(0,1fr);}
.transcript-layout>aside{padding:30px;background:#dcecff;border-right:1px solid #89b9df;}
.transcript-monogram{width:76px;height:76px;display:grid;place-items:center;border:3px solid #061753;font:italic 900 29px 'P3 Rodin',sans-serif;transform:rotate(-6deg);margin-bottom:25px;}
.transcript-layout h3{font-size:24px;margin-bottom:18px;}.transcript-layout aside p{font:14px/1.7 'P3 Expressway',sans-serif;margin:7px 0;}
.transcript-results{padding:35px;}.transcript-results .overview-eyebrow{color:#0c548a;}
.transcript-line{display:grid;grid-template-columns:32px minmax(0,1fr);gap:15px;padding:20px 0;border-bottom:1px solid #9bbbd5;}
.transcript-line>span{font:italic 700 21px 'P3 Expressway',sans-serif;color:#187ca8;}
.transcript-line p{color:#061753!important;margin:0!important;}.overview-item .record-dossier-end{color:#17577e;}.overview-item .record-dossier-end b{color:#061753;}.overview-item .record-dossier-end i{background:#17577e55;}
/* Tests / score sheet */
.exam-layout{display:grid;grid-template-columns:36% minmax(0,1fr);min-height:100%;}
.exam-score{padding:40px 30px;background:#68ffff;color:#061753;display:flex;flex-direction:column;justify-content:center;}
.exam-score .overview-eyebrow{color:#061753;}.exam-score>strong{font:italic 700 clamp(70px,8vw,105px)/1 'P3 Expressway',sans-serif;letter-spacing:-5px;}.exam-score>span{font:italic 700 24px 'P3 Expressway',sans-serif;margin:12px 0 30px;}
.exam-score-track{height:9px;background:#06175333;}.exam-score-track i{display:block;height:100%;background:#061753;}
.exam-details{padding:35px 40px;align-self:center;min-width:0;}.exam-status{display:flex;justify-content:space-between;border-bottom:2px solid #ff217f;padding-bottom:13px;margin-bottom:25px;font:700 11px 'P3 Expressway',sans-serif;letter-spacing:2px;color:#fff;}.exam-status b{font-size:20px;color:#68ffff;}
/* Awards / honor display */
.overview-persona{background:linear-gradient(135deg,#092a73,#061239 70%);border-top:4px solid #e6e48a;}
.honor-banner{position:relative;display:grid;grid-template-columns:100px minmax(0,1fr) 60px;align-items:center;gap:30px;padding:30px 40px;background:#0e3780;border-bottom:1px solid #e6e48a88;}
.honor-insignia{width:100px;height:120px;color:#e6e48a;}.honor-banner .overview-eyebrow{color:#f4ed9c;margin-bottom:12px;}.honor-banner h3{color:#fff;}.honor-banner .record-facts{margin:18px 0 0;}.honor-banner .record-facts span{background:#061753;border-left-color:#e6e48a;}
.honor-number{font:italic 700 55px 'P3 Expressway',sans-serif;color:#4c76b4;align-self:start;}
.honor-body{padding:30px 50px;}.honor-body .record-prose{max-width:950px;}.honor-body .record-dossier-end{color:#e6e48a;}
/* Leadership / activity brief */
.leadership-layout{display:grid;grid-template-columns:180px minmax(0,1fr);min-height:100%;}
.leadership-rail{background:#164caa;padding:35px 24px;border-right:5px solid #ff217f;display:flex;flex-direction:column;gap:24px;}
.leadership-rail small{font:700 10px 'P3 Expressway',sans-serif;letter-spacing:2px;}.leadership-rail>b{font:italic 700 88px/1 'P3 Expressway',sans-serif;color:#68ffff;}.leadership-rail>span{font:italic 900 22px/1.2 'P3 Rodin',sans-serif;}.leadership-rail>div{font:italic 900 40px 'P3 Rodin',sans-serif;color:#68ffff;letter-spacing:4px;margin-top:auto;}
.leadership-copy{padding:35px 45px;min-width:0;}.brief-heading{display:flex;justify-content:space-between;align-items:start;gap:20px;border-bottom:1px solid #68ffff88;margin-bottom:22px;}.brief-heading>span{font:700 9px 'P3 Expressway',sans-serif;white-space:nowrap;color:#b0d4ed;}
.leadership-statement{border-left:2px solid #286eb4;padding-left:25px;}
/* Service / quest log */
.overview-quest{border-left:5px solid #8df5d5;}
.service-top{display:flex;align-items:center;justify-content:space-between;padding:20px 30px;background:#105481;border-bottom:1px solid #8df5d5;gap:20px;}.service-top .overview-eyebrow{margin:0;color:#c4ffec;}.service-top>span{font:italic 700 15px 'P3 Expressway',sans-serif;white-space:nowrap;}
.service-layout{display:grid;grid-template-columns:270px minmax(0,1fr);}.service-layout>aside{padding:30px;background:#082846;}.service-symbol{font:400 90px/.9 'P3 Expressway',sans-serif;color:#8df5d5;margin-bottom:20px;}.service-layout h3{font-size:29px;margin-bottom:25px;}.service-layout h3 em{color:#8df5d5;}.service-layout .record-facts{display:block;}.service-layout .record-facts span{display:block;margin:0 0 9px;background:#105481;border-left-color:#8df5d5;}
.service-entries{padding:30px 35px;min-width:0;}.service-entry{display:grid;grid-template-columns:35px minmax(0,1fr);gap:15px;padding-bottom:25px;}.service-entry>span{font:italic 700 25px 'P3 Expressway',sans-serif;color:#8df5d5;}.service-entry small{font:700 10px 'P3 Expressway',sans-serif;color:#8df5d5;letter-spacing:1px;}.service-entry p{margin-top:12px!important;}
/* Enrichment / course notebook */
.overview-social-link{background:#eaf4ff;color:#061753;}
.notebook-layout{display:grid;grid-template-columns:80px minmax(0,1fr);min-height:100%;}
.notebook-spine{background:#071753;display:flex;flex-direction:column;align-items:center;padding:30px 10px;gap:35px;border-right:5px solid #b899ff;}.notebook-spine>span{writing-mode:vertical-rl;font:italic 900 23px 'P3 Rodin',sans-serif;letter-spacing:3px;color:#b899ff;}.notebook-spine>b{font:italic 700 32px 'P3 Expressway',sans-serif;color:#fff;}
.notebook-page{padding:30px 45px;min-width:0;}.notebook-heading{display:flex;justify-content:space-between;gap:20px;border-bottom:2px solid #7595ba;padding-bottom:18px;margin-bottom:25px;}.notebook-heading .overview-eyebrow{color:#285779;margin:0;}.notebook-heading>span{font:700 10px 'P3 Expressway',sans-serif;color:#285779;white-space:nowrap;}.notebook-page h3{font-size:29px;max-width:900px;}
.notebook-provider{display:inline-block;background:#b899ff;padding:7px 14px;margin:18px 0 10px;font:700 12px 'P3 Expressway',sans-serif;}
.notebook-notes{margin-top:25px;border-top:1px solid #b3cde5;padding-top:20px;}.notebook-notes p{color:#061753!important;}.overview-social-link .record-dossier-end{color:#285779;}.overview-social-link .record-dossier-end i{background:#28577955;}.overview-social-link .record-dossier-end b{color:#061753;}
/* Skills / personal system */
.overview-system{background:#03192e;border:2px solid #286a9c;}
.system-sheet-top{display:flex;justify-content:space-between;align-items:center;gap:20px;background:#0b3555;border-bottom:1px solid #68ffff;padding:16px 25px;font:700 10px 'P3 Expressway',sans-serif;letter-spacing:2px;}.system-sheet-top>b{color:#68ffff;}.system-sheet-top>span:last-child{color:#b0d9ef;}
.system-lights{display:flex;gap:6px;}.system-lights i{width:7px;height:7px;background:#68ffff;}.system-lights i:nth-child(2){background:#ff72ba;}.system-lights i:nth-child(3){background:#a6c4ff;}
.system-sheet-body{padding:35px 40px;}.system-entry{display:grid;grid-template-columns:40px minmax(0,1fr);gap:20px;padding:20px 0;border-bottom:1px solid #23587b;}.system-entry>span{font:700 14px 'P3 Expressway',sans-serif;color:#4b9bbd;}.system-entry p{margin:0!important;}.system-sheet-body .record-dossier-end{margin-top:45px;}
/* Portrait layouts preserve each theme while putting prose into one column. */
.phone-portrait .section-overview .record-prose p{font-size:16px;line-height:1.65;}
.phone-portrait .section-overview .overview-eyebrow{font-size:9px;letter-spacing:1px;}
.phone-portrait .identity-layout,.phone-portrait .transcript-layout,.phone-portrait .exam-layout,.phone-portrait .service-layout{grid-template-columns:minmax(0,1fr);}
.phone-portrait .identity-card{padding:20px;border-right:0;border-bottom:3px solid #68ffff;display:grid;grid-template-columns:90px 1fr;gap:10px 15px;}
.phone-portrait .identity-art{grid-row:1/4;height:125px;margin:0;}.phone-portrait .identity-card small{font-size:8px;}.phone-portrait .identity-card h3{font-size:27px;margin:0;}.phone-portrait .identity-card>span{font-size:8px;padding:5px 7px;justify-self:start;}.phone-portrait .identity-copy{padding:25px 20px;}
.phone-portrait .transcript-top{padding:16px;gap:10px;flex-wrap:wrap;}.phone-portrait .transcript-top>b{font-size:34px;}.phone-portrait .transcript-top>span{font-size:8px;}.phone-portrait .transcript-layout>aside{padding:20px;border-right:0;border-bottom:1px solid #89b9df;}.phone-portrait .transcript-monogram{width:48px;height:48px;font-size:21px;margin:0 0 18px;}.phone-portrait .transcript-layout h3{font-size:22px;}.phone-portrait .transcript-results{padding:22px 18px;}.phone-portrait .transcript-line{gap:8px;grid-template-columns:25px 1fr;padding:15px 0;}
.phone-portrait .exam-score{padding:25px;}.phone-portrait .exam-score>strong{font-size:72px;}.phone-portrait .exam-score>span{font-size:19px;margin-bottom:18px;}.phone-portrait .exam-details{padding:25px 20px;}
.phone-portrait .honor-banner{padding:20px;grid-template-columns:55px minmax(0,1fr);gap:15px;}.phone-portrait .honor-insignia{width:55px;height:75px;}.phone-portrait .honor-banner h3{font-size:21px;}.phone-portrait .honor-number{display:none;}.phone-portrait .honor-banner .record-facts{grid-column:1/-1;}.phone-portrait .honor-body{padding:25px 20px;}
.phone-portrait .leadership-layout{grid-template-columns:65px minmax(0,1fr);}.phone-portrait .leadership-rail{padding:20px 10px;gap:18px;border-right-width:3px;}.phone-portrait .leadership-rail small{writing-mode:vertical-rl;font-size:9px;}.phone-portrait .leadership-rail>b{font-size:36px;}.phone-portrait .leadership-rail>span{display:none;}.phone-portrait .leadership-rail>div{font-size:21px;letter-spacing:0;}.phone-portrait .leadership-copy{padding:24px 17px;}.phone-portrait .brief-heading{display:block;}.phone-portrait .brief-heading>span{display:block;margin-bottom:15px;}.phone-portrait .leadership-statement{padding-left:12px;}
.phone-portrait .service-top{padding:16px;gap:10px;}.phone-portrait .service-top>span{font-size:11px;}.phone-portrait .service-layout>aside{padding:20px;}.phone-portrait .service-symbol{font-size:50px;float:right;}.phone-portrait .service-layout h3{font-size:25px;}.phone-portrait .service-entries{padding:25px 17px;}.phone-portrait .service-entry{grid-template-columns:25px 1fr;gap:10px;}
.phone-portrait .notebook-layout{grid-template-columns:35px minmax(0,1fr);}.phone-portrait .notebook-spine{padding:20px 5px;border-right-width:3px;}.phone-portrait .notebook-spine>span{font-size:16px;letter-spacing:1px;}.phone-portrait .notebook-spine>b{font-size:20px;}.phone-portrait .notebook-page{padding:23px 16px;}.phone-portrait .notebook-heading{display:block;}.phone-portrait .notebook-heading>span{display:block;margin-top:10px;font-size:9px;}.phone-portrait .notebook-page h3{font-size:21px;}.phone-portrait .notebook-provider{font-size:10px;line-height:1.5;}
.phone-portrait .system-sheet-top{padding:13px 15px;gap:12px;letter-spacing:.5px;}.phone-portrait .system-sheet-top>span:last-child{display:none;}.phone-portrait .system-sheet-body{padding:25px 18px;}.phone-portrait .system-entry{grid-template-columns:23px 1fr;gap:10px;}
/* Awards: scale the title down and balance a wider ledger against the full figure. */
html:not(.phone-portrait) .ref-persona .ref-page-word{left:35px;top:15px;font-size:100px;opacity:.55;}
html:not(.phone-portrait) .ref-persona .ref-list{left:40px;top:170px;width:690px;max-height:375px;}
html:not(.phone-portrait) .ref-persona .ref-row{min-height:55px;margin-bottom:5px;padding:12px 20px;grid-template-columns:35px minmax(0,1fr) 105px;background:#041344a8;}
html:not(.phone-portrait) .ref-persona .ref-row.selected{background:white;}
html:not(.phone-portrait) .ref-persona .ref-row-title{font-size:19px!important;letter-spacing:-.03em!important;}
html:not(.phone-portrait) .ref-persona .ref-row em{font-size:16px;}
html:not(.phone-portrait) .ref-persona .ref-art{left:785px;top:165px;width:410px;height:440px;}
html:not(.phone-portrait) .ref-persona .chapter-award-word{left:790px;top:115px;width:400px;font-size:22px;line-height:1.1;letter-spacing:-1px;}
html:not(.phone-portrait) .ref-persona .chapter-award-seal{left:1065px;top:440px;width:115px;height:140px;opacity:.3;}
html:not(.phone-portrait) .ref-persona .ref-record-panel{left:55px;top:565px;width:675px;max-height:100px;padding:16px 22px;}
html:not(.phone-portrait) .ref-persona .ref-record-description{font-size:16px;max-height:68px;margin:0;line-height:1.5;}
/* Award overviews use an honor plate alongside the narrative rather than a tall empty banner. */
html:not(.phone-portrait) .overview-persona{display:grid;grid-template-columns:330px minmax(0,1fr);align-content:start;}
html:not(.phone-portrait) .honor-banner{display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding:30px;min-height:100%;border-bottom:0;border-right:1px solid #e6e48a88;}
html:not(.phone-portrait) .honor-insignia{width:78px;height:94px;}
html:not(.phone-portrait) .honor-banner h3{font-size:25px;line-height:1.3;}
html:not(.phone-portrait) .honor-number{position:absolute;right:22px;top:20px;font-size:38px;}
html:not(.phone-portrait) .honor-body{padding:35px 38px;min-width:0;}
html:not(.phone-portrait) .honor-body .record-prose p{font-size:19px;line-height:1.7;}
html:not(.phone-portrait) .ref-persona .ref-row{height:52px;min-height:52px;padding:8px 20px;align-items:center;}
html:not(.phone-portrait) .overview-persona{align-content:stretch;}
html:not(.phone-portrait) .honor-body{display:flex;flex-direction:column;justify-content:center;}
/* Education: angled white transcript plates over saturated game-blue fields. */
.overview-item{background:#092976;color:#fff;border-top:4px solid #ff217f;}
.transcript-top{background:#68ffff;color:#061753;border:0;transform:skew(-4deg);margin:16px 24px 0;padding:16px 25px;}
.transcript-top>b{font-size:56px;}.transcript-layout{padding:25px;gap:25px;grid-template-columns:280px minmax(0,1fr);}
.transcript-layout>aside{background:#0b4196;border:0;border-left:4px solid #68ffff;padding:25px;}
.transcript-monogram{border-color:#68ffff;color:#68ffff;width:85px;height:85px;box-shadow:6px 6px 0 #061753;}
.transcript-layout h3{font-size:27px;color:#fff;}.transcript-layout aside p{color:#c5eeff;}
.transcript-results{padding:10px 5px;}.transcript-results .overview-eyebrow{color:#68ffff;}
.transcript-line{background:#f4faff;color:#061753;border:0;border-left:4px solid #ff217f;margin-bottom:15px;padding:18px 20px;transform:skew(-4deg);}
.transcript-line>span{font-weight:700;color:#0b6199;}.overview-item .record-dossier-end{color:#68ffff;}.overview-item .record-dossier-end b{color:white;}.overview-item .record-dossier-end i{background:#68ffff66;}
/* Service: mint quest header, black command rail, numbered activity plates. */
.overview-quest{background:#061c5c;border:0;}
.service-top{background:#eaffff;color:#061753;transform:skew(-4deg);margin:18px 25px 0;border-top:4px solid #ff217f;border-bottom:0;}
.service-top .overview-eyebrow{color:#061753;}.service-top>span{color:#061753;}
.service-layout{grid-template-columns:250px minmax(0,1fr);gap:25px;padding:25px;}
.service-layout>aside{background:#020e30;border-left:4px solid #68ffff;transform:skew(-3deg);padding:25px;}
.service-symbol{font-size:85px;color:#68ffff;}.service-layout h3{font-size:30px;letter-spacing:-1px;}.service-layout h3 em{color:#68ffff;}
.service-entries{padding:5px 0;}.service-entry{padding:22px;background:#0c3983;border-left:4px solid #68ffff;margin-bottom:18px;gap:18px;}
.service-entry>span{font:italic 700 36px 'P3 Expressway',sans-serif;color:#68ffff;}.service-entry small{color:#68ffff;}.service-entry p{margin-bottom:0!important;}
/* Skills: large system commands and split white/cyan information plates. */
.overview-system{background:linear-gradient(125deg,#073bb0,#041344 75%);border:0;}
.system-sheet-top{background:#fff;color:#061753;border-top:4px solid #ff217f;border-bottom:0;margin:18px 25px 0;transform:skew(-5deg);padding:17px 24px;}
.system-sheet-top>b{color:#061753;font:italic 900 18px 'P3 Rodin',sans-serif;letter-spacing:-.5px;}.system-sheet-top>span:last-child{color:#285779;}
.system-lights i{background:#061753;}.system-lights i:nth-child(2){background:#009aca;}.system-lights i:nth-child(3){background:#ff217f;}
.system-sheet-body{padding:35px 40px;}.system-sheet-body>.overview-eyebrow{font:italic 900 28px/1.25 'P3 Rodin',sans-serif;letter-spacing:-1px;color:#68ffff;max-width:850px;border-bottom:2px solid #68ffff55;padding-bottom:20px;}
.system-entry{grid-template-columns:65px minmax(0,1fr);background:#041344dd;border:0;padding:27px;gap:22px;}
.system-entry>span{font:italic 700 44px/1 'P3 Expressway',sans-serif;color:#68ffff;}.system-entry p{color:#fff;border-left:4px solid #ff217f;padding-left:25px;}
.phone-portrait .transcript-top{margin:12px 12px 0;padding:14px;}.phone-portrait .transcript-top>b{font-size:36px;}
.phone-portrait .transcript-layout{padding:16px;gap:20px;}.phone-portrait .transcript-layout>aside{padding:20px;border-bottom:0;}.phone-portrait .transcript-results{padding:0;}.phone-portrait .transcript-line{padding:16px 12px;}
.phone-portrait .service-top{margin:12px 12px 0;padding:13px;}.phone-portrait .service-layout{padding:16px;gap:20px;}.phone-portrait .service-layout>aside{padding:20px;}.phone-portrait .service-entries{padding:0;}.phone-portrait .service-entry{padding:18px 12px;gap:10px;grid-template-columns:28px 1fr;}.phone-portrait .service-entry>span{font-size:26px;}
.phone-portrait .system-sheet-top{margin:12px 12px 0;padding:13px;}.phone-portrait .system-sheet-top>b{font-size:13px;}.phone-portrait .system-sheet-body{padding:25px 17px;}.phone-portrait .system-sheet-body>.overview-eyebrow{font-size:21px;line-height:1.3;letter-spacing:-.5px;}.phone-portrait .system-entry{padding:18px 12px;grid-template-columns:25px 1fr;gap:10px;}.phone-portrait .system-entry>span{font-size:25px;}.phone-portrait .system-entry p{padding-left:12px;border-left-width:3px;}

/* Profile heading needs no record-count badge. */
.ref-skill .chapter-cost>span{display:none;}
/* Service / Quest: slanted map board and a large, upright character portrait. */
.quest-board-map{position:absolute;left:0;top:0;width:1030px;height:720px;z-index:1;opacity:.38;pointer-events:none;clip-path:polygon(0 15%,79% 0,100% 100%,10% 100%);}
html:not(.phone-portrait) .ref-quest .ref-page-word{left:15px;top:-30px;font-size:120px;opacity:.35;transform:rotate(-7deg);}
html:not(.phone-portrait) .ref-quest .ref-nav{left:150px;top:20px;width:700px;}
html:not(.phone-portrait) .ref-quest .ref-nav b{visibility:hidden;}
html:not(.phone-portrait) .ref-quest .chapter-quest-tabs{left:350px;top:35px;gap:15px;font-size:16px;}
html:not(.phone-portrait) .ref-quest .chapter-quest-tabs b{padding:7px 25px;}
html:not(.phone-portrait) .ref-quest .chapter-table-head{left:70px;top:115px;width:785px;grid-template-columns:45px 1fr 105px;border-bottom:0;}
html:not(.phone-portrait) .ref-quest .ref-list{left:38px;top:145px;width:860px;max-height:320px;padding-right:22px;}
html:not(.phone-portrait) .ref-quest .ref-row{height:44px;min-height:44px;margin-bottom:4px;padding:7px 18px;grid-template-columns:40px minmax(0,1fr) 110px;border-bottom:1px solid #68ffff22;}
html:not(.phone-portrait) .ref-quest .ref-row-title{font-size:18px!important;letter-spacing:-.03em;}
html:not(.phone-portrait) .ref-quest .ref-row.selected{border-radius:3px;}
html:not(.phone-portrait) .ref-quest .ref-record-panel{left:135px;top:490px;width:700px;max-height:150px;padding:15px 20px;background:#0b104c88;border:0;}
html:not(.phone-portrait) .ref-quest .ref-record-heading h2{font-size:20px;line-height:1.2;}
html:not(.phone-portrait) .ref-quest .ref-record-index{display:none;}
html:not(.phone-portrait) .ref-quest .ref-record-description{font-size:18px;max-height:95px;line-height:1.45;}
html:not(.phone-portrait) .ref-quest .ref-art{left:890px;top:105px;width:350px;height:465px;opacity:1;z-index:2;}
.ref-page .ref-art-quest img{--art-angle:0deg;mask-image:linear-gradient(#000 0 67%,transparent 100%);}
html.phone-portrait .quest-board-map{display:none;}
.ref-page .ref-art-quest img{scale:-1 1;mask-image:linear-gradient(#000 0 68%,transparent 100%),linear-gradient(90deg,transparent,#000 9% 92%,transparent);mask-composite:intersect;}
/* Restore the award title layered across the lower character. */
html:not(.phone-portrait) .ref-persona .chapter-award-word{left:765px;top:440px;width:455px;font:italic 900 35px/.95 'P3 Rodin',sans-serif!important;letter-spacing:-1.7px;text-align:center;transform:rotate(-4deg);color:#68ffff;text-shadow:3px 3px 0 #063582;z-index:5;}
/* Separate the trophy from the overlapping title and portrait. */
html:not(.phone-portrait) .ref-persona .chapter-award-seal{left:1095px;top:285px;width:125px;height:150px;opacity:.85;z-index:4;transform:rotate(8deg);}
/* Tests' subdued geometry must not animate to an opaque white flash. */
html:not(.phone-portrait) .scene.detail-enter .ref-equip .chapter-geometry{animation:tests-plane-open 430ms cubic-bezier(.18,.8,.2,1) both;}
@keyframes tests-plane-open{from{transform:rotate(-30deg) scale(1.18);opacity:.1}to{transform:none;opacity:.3}}
@media(prefers-reduced-motion:reduce){html:not(.phone-portrait) .scene.detail-enter .ref-equip .chapter-geometry{animation:none!important;}}
/* Enrichment selection: dark command plate with a pink edge and cyan ink. */
html .ref-page.ref-social-link .ref-row.selected{background:#061753!important;color:#fff!important;border-top:4px solid #ff217f;border-left:9px solid #ff217f;border-bottom-color:#ff217f;box-shadow:6px 4px 0 #68ffff;transform:translateX(10px);}
html .ref-page.ref-social-link .ref-row.selected .ref-row-no{color:#68ffff;opacity:1;}
html .ref-page.ref-social-link .ref-row.selected .ref-row-title{color:#fff;text-shadow:1px 1px #00103b;}
html .ref-page.ref-social-link .ref-row.selected em{color:#68ffff;}
html:not(.phone-portrait) .ref-social-link .ref-row.selected::after{color:#fff;font-weight:700;letter-spacing:2px;}
html .ref-page.ref-social-link .ref-row.selected::before{display:block;content:'▶';position:absolute;left:auto;right:6px;top:50%;width:auto;height:auto;background:none;color:#ff73c6;font:700 13px 'P3 Expressway',sans-serif;transform:translateY(-50%);}
html .ref-page.ref-social-link .ref-row.selected:hover{background:#0b2e6b!important;}
/* Enrichment selected plate: game-white, cobalt ink and restrained pink accent. */
html .ref-page.ref-social-link .ref-row.selected{background:#fff!important;color:#071753!important;border-top-color:#ff217f;border-left-color:#fff;border-bottom-color:#071753;box-shadow:6px 4px 0 #17ddf5;}
html .ref-page.ref-social-link .ref-row.selected .ref-row-no{color:#0865b5;}
html .ref-page.ref-social-link .ref-row.selected .ref-row-title{color:#071753;text-shadow:none;}
html .ref-page.ref-social-link .ref-row.selected em{color:#0865b5;}
html .ref-page.ref-social-link .ref-row.selected::before{color:#ff217f;}
html .ref-page.ref-social-link .ref-row.selected:hover{background:#eaffff!important;}
html .ref-page.ref-social-link .ref-row:not(.selected){background:#1268ae!important;color:#a8ffff!important;}
html .ref-page.ref-social-link .ref-row:not(.selected):hover{background:#2086c8!important;color:#fff!important;}

.music-volume input{--volume-fill:3%;}
/* Keep the final Skills command clear of the preview panel. */
html:not(.phone-portrait) .ref-system .ref-list{top:95px;max-height:390px;padding-top:22px;padding-bottom:25px;}
html:not(.phone-portrait) .ref-system .ref-row{min-height:62px;margin-bottom:10px;padding:9px 16px;}
html:not(.phone-portrait) .ref-system .ref-row-title{font-size:30px!important;line-height:1.2;}
html:not(.phone-portrait) .ref-system .ref-record-panel{top:550px;}

/* The water ribbon keeps one uninterrupted float clock before and after entry. */
.scene:not(.detail-open) .hair-water-bridge{visibility:visible;animation:menu-current-buoyancy 8s ease-in-out infinite;transform-origin:300px 600px;}
@media(prefers-reduced-motion:reduce){.scene:not(.detail-open) .hair-water-bridge{animation:none!important;}}
/* Fit the updated name on the Profile identity plate. */
.profile-identity h1{font-size:50px;line-height:1.05;letter-spacing:-2.5px;}

.profile-identity h1 small{font:italic 900 28px/1 "P3 Rodin",sans-serif;color:#fff;letter-spacing:-1px;}
.identity-card h3 small{font:italic 900 19px/1 "P3 Rodin",sans-serif;color:#fff;letter-spacing:0;}

.identity-art.identity-original-photo{height:260px;border:3px solid #68ffff;background:#061753;transform:rotate(-3deg);box-shadow:5px 5px 0 #ff217f;}
.identity-original-photo img{object-fit:cover;object-position:50% 18%;mask-image:none;}
.phone-portrait .identity-art.identity-original-photo{height:125px;transform:rotate(-3deg);}

/* Reference-paced menu handoff: opaque blue sweep, moving silhouette, round reveal. */
.screen-wipe[data-motion^="chapter"].is-active{animation:chapter-fluid-cover 660ms linear both!important;will-change:clip-path;}
.screen-wipe[data-motion^="chapter"] .full-scene-transition{transform:none;}
.screen-wipe[data-motion="chapter-close"] .full-scene-transition{transform:scaleX(-1);}
.chapter-iris{transform:scale(0);transform-origin:0 0;animation:chapter-fluid-iris 660ms linear both;}
.chapter-silhouette-drift{animation:chapter-fluid-silhouette 660ms cubic-bezier(.22,.65,.2,1) both;}
.screen-wipe .wipe-silhouette-fixed{opacity:.6;filter:brightness(0) saturate(100%) invert(12%) sepia(98%) saturate(4200%) hue-rotate(218deg);}
.scene.is-wiping[data-transition-motion^="chapter"] .water-layer{animation-play-state:running;opacity:1;}
.scene.is-wiping[data-transition-motion^="chapter"] .shards span{animation-play-state:running;}
@keyframes chapter-fluid-cover{
  0%{opacity:1;clip-path:ellipse(0% 0% at 20% 50%)}
  12%{opacity:1;clip-path:ellipse(35% 65% at 27% 50%)}
  25%,100%{opacity:1;clip-path:ellipse(150% 170% at 35% 50%)}
}
@keyframes chapter-fluid-iris{
  0%,29%{transform:scale(0)}
  40%{transform:scale(.55)}
  55%{transform:scale(2.4)}
  74%{transform:scale(5.6)}
  100%{transform:scale(12)}
}
@keyframes chapter-fluid-silhouette{
  0%{transform:translate(-65px,12px) scale(1.02)}
  32%{transform:translate(0,0) scale(1.08)}
  100%{transform:translate(145px,-16px) scale(1.18)}
}
@media(prefers-reduced-motion:reduce){
 .screen-wipe[data-motion^="chapter"].is-active,.chapter-iris,.chapter-silhouette-drift{animation:none!important;}
 .screen-wipe[data-motion^="chapter"]{display:none!important;}
}

/* Small creator signature; expands without navigating away from the menu. */
.site-credits{position:fixed;left:18px;bottom:14px;z-index:11000;max-width:calc(100vw - 36px);color:#7efaff;font:11px/1.5 'P3 Rodin',sans-serif;}
.site-credits summary{cursor:pointer;list-style:none;letter-spacing:.5px;padding:7px 12px;background:#061343e8;border-left:3px solid #69ffff;transition:color .15s,background .15s;}
.site-credits summary::-webkit-details-marker{display:none;}
.site-credits summary span{color:white;margin-left:12px;}
.site-credits summary:hover,.site-credits summary:focus-visible{color:#061343;background:#7efaff;outline:2px solid white;outline-offset:3px;}
.site-credits summary:hover span{color:#061343;}
.site-credits section{position:absolute;bottom:calc(100% + 10px);left:0;width:min(420px,calc(100vw - 36px));max-height:65dvh;overflow:auto;padding:24px;background:#061343f7;border-top:4px solid #ff267e;border-left:4px solid #69ffff;box-shadow:8px 8px 0 #06257c;animation:credits-arrive .2s ease-out;}
.site-credits small{letter-spacing:2px;font-size:9px;}
.site-credits h2{font:italic 900 25px/1.15 'P3 Rodin',sans-serif;color:white;margin:12px 0 18px;}
.site-credits h2 strong{color:#70ffff;}
.site-credits p{font:14px/1.6 'P3 NewRodin',sans-serif;color:white;margin:12px 0;}
.site-credits .credits-note{font-size:11px;color:#a8cbed;}
body:has(.scene.detail-open) .site-credits,body:has(.scene.is-wiping) .site-credits,.is-awaiting-entry .site-credits,.is-building-menu .site-credits{visibility:hidden;pointer-events:none;}
@keyframes credits-arrive{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
@media(max-width:600px){.site-credits{left:12px;bottom:auto;top:12px;font-size:8px;max-width:calc(100vw - 24px);}.site-credits summary{padding:6px 8px;}.site-credits section{top:calc(100% + 8px);bottom:auto;width:calc(100vw - 24px);max-height:65dvh;padding:18px;}.site-credits summary span{margin-left:6px;}}
@media(prefers-reduced-motion:reduce){.site-credits section{animation:none;}}

.site-credits summary,.site-credits small{font-family:'P3 Expressway',sans-serif;font-weight:700;}
.site-credits h2{font-family:'P3 Rodin',sans-serif;letter-spacing:-1px;}
.site-credits p{font-family:'P3 NewRodin',sans-serif;letter-spacing:-.3px;}