:root {
  --bg: #07080c;
  --frame: #10131c;
  --ink: #f4efe6;
  --muted: rgba(244, 239, 230, 0.62);
  --accent: #e0c37a;
  --accent-deep: #c9a46a;
  --letterbox: linear-gradient(
    to top,
    rgba(5, 6, 10, 0.92) 0%,
    rgba(5, 6, 10, 0.78) 55%,
    rgba(5, 6, 10, 0) 100%
  );
  --letterbox-side: linear-gradient(
    to left,
    rgba(5, 6, 10, 0.94) 0%,
    rgba(5, 6, 10, 0.82) 52%,
    rgba(5, 6, 10, 0) 100%
  );
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --wipe-ease: cubic-bezier(0.37, 0, 0.12, 1);
  --tap: 0.22s var(--ease);
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.32s;
  animation-timing-function: var(--ease);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font-family: Outfit, system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100dvh;
  overscroll-behavior: none;
}

.app {
  position: relative;
  min-height: 100dvh;
  min-height: 100svh;
}

.app.is-title {
  overflow: hidden;
  height: 100dvh;
  height: 100svh;
}

.app.is-reading {
  overflow: hidden;
  height: 100dvh;
  height: 100svh;
}

html:has(.app.is-reading),
html:has(.app.is-reading) body {
  overflow: hidden;
  height: 100%;
  overscroll-behavior: none;
}

.ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #05060a;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.9s var(--ease);
}

.view-title,
.view-library,
.util-rail,
.util-wash,
.now-playing,
.site-dock {
  transition: opacity 0.75s var(--ease);
}

html.is-booting .ambient,
html.is-booting .view-title,
html.is-booting .view-library,
html.is-booting .util-rail,
html.is-booting .util-wash,
html.is-booting .now-playing,
html.is-booting .site-dock {
  opacity: 0;
  transition: none;
}

.hero {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  transform: scale(1.08);
  animation: kenburns 28s var(--ease) infinite alternate;
  filter: saturate(1.05);
}

.app.has-title-video #hero,
.app.has-library-bed #hero {
  opacity: 0;
  animation: none;
}

@property --wipe-x {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

.hero-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 0.7s var(--ease);
}

.hero-layer.is-idle {
  z-index: 0;
  opacity: 0;
}

.hero-layer.is-under {
  z-index: 0;
  opacity: 1;
}

.hero-layer.is-wipe {
  z-index: 2;
  opacity: 1;
  transition: none;
  --wipe-x: 100%;
  -webkit-mask-image: linear-gradient(
    97deg,
    #000 0%,
    #000 42%,
    rgba(0, 0, 0, 0.55) 50%,
    transparent 62%,
    transparent 100%
  );
  mask-image: linear-gradient(
    97deg,
    #000 0%,
    #000 42%,
    rgba(0, 0, 0, 0.55) 50%,
    transparent 62%,
    transparent 100%
  );
  -webkit-mask-size: 260% 140%;
  mask-size: 260% 140%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: var(--wipe-x) 50%;
  mask-position: var(--wipe-x) 50%;
}

.hero-layer.is-wipe-in {
  --wipe-x: 0%;
  transition: --wipe-x 1.5s var(--wipe-ease);
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: none;
  animation: none;
  object-fit: cover;
  object-position: 72% 28%;
  background: transparent;
  opacity: 1;
  filter: none;
}

.hero-video.is-portrait-src {
  object-position: center 22%;
}

.hero-video.is-tall-crop {
  object-fit: cover;
  object-position: 50% 28%;
}

@keyframes kenburns {
  from {
    transform: scale(1.08) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.16) translate3d(-2%, -1.5%, 0);
  }
}

.veil {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(
    90deg,
    rgba(5, 6, 10, 0.55) 0%,
    rgba(5, 6, 10, 0.18) 24%,
    rgba(5, 6, 10, 0) 48%
  );
  transition: background 0.4s var(--ease);
}

.app.is-title .veil {
  background: transparent;
}

.app.is-library .veil {
  background:
    linear-gradient(to top, rgba(5, 6, 10, 0.4) 0%, transparent 40%),
    rgba(5, 6, 10, 0.66);
}

.app.is-library.is-lore-world .veil {
  background:
    linear-gradient(
      90deg,
      rgba(5, 6, 10, 0.9) 0%,
      rgba(5, 6, 10, 0.82) 22%,
      rgba(5, 6, 10, 0.58) 46%,
      rgba(5, 6, 10, 0.38) 72%,
      rgba(5, 6, 10, 0.32) 100%
    ),
    linear-gradient(to top, rgba(5, 6, 10, 0.55) 0%, transparent 42%);
}

.app.is-library.is-lore-world #library-bed-layer .hero-video {
  filter: brightness(0.52) saturate(0.78);
}

.app.is-reading:not(.is-library) .veil {
  background: rgba(5, 6, 10, 0.42);
}

.app.is-library #library-bed-layer .hero-video {
  filter: brightness(0.66) saturate(0.82);
  transition: opacity 0.45s var(--ease);
}

.app.is-library #library-bed-layer.is-swap .hero-video {
  opacity: 0;
}

.grain {
  position: absolute;
  inset: 0;
  z-index: 4;
  opacity: 0.09;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

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

.embers span {
  position: absolute;
  bottom: -8%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  filter: blur(0.4px);
  animation: rise linear infinite;
}

@keyframes rise {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.6);
  }
  12% {
    opacity: 0.85;
  }
  100% {
    opacity: 0;
    transform: translate3d(18px, -110vh, 0) scale(1.1);
  }
}

.view {
  position: relative;
  z-index: 1;
}

.view[hidden] {
  display: none !important;
}

.view-title {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  isolation: isolate;
  position: fixed;
  top: 0;
  right: auto;
  bottom: 0;
  left: 0;
  z-index: 1;
  overflow: auto;
  width: min(42rem, 100%);
  min-height: 0;
  padding: clamp(1.4rem, 4vw, 3rem);
  padding-top: max(clamp(1.4rem, 4vw, 3rem), env(safe-area-inset-top));
  padding-bottom: max(2.4rem, env(safe-area-inset-bottom));
  padding-left: max(clamp(1.4rem, 4vw, 3rem), env(safe-area-inset-left));
  padding-right: max(clamp(1.4rem, 4vw, 3rem), env(safe-area-inset-right), 9rem);
}

.title-wash {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(40rem, 100vw);
  z-index: 0;
  pointer-events: none;
}

.title-wash-dim,
.title-wash-soft,
.title-wash-hard {
  position: absolute;
  inset: 0;
}

.title-wash-dim {
  background: linear-gradient(
    90deg,
    rgba(5, 6, 10, 0.7) 0%,
    rgba(5, 6, 10, 0.42) 48%,
    rgba(5, 6, 10, 0.1) 76%,
    rgba(5, 6, 10, 0) 100%
  );
  mask-image:
    linear-gradient(90deg, #000 0%, #000 52%, transparent 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.45) 32%, #000 58%, #000 100%);
  mask-composite: intersect;
  -webkit-mask-image:
    linear-gradient(90deg, #000 0%, #000 52%, transparent 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.45) 32%, #000 58%, #000 100%);
  -webkit-mask-composite: source-in;
}

.title-wash-soft {
  backdrop-filter: blur(8px) saturate(0.9);
  -webkit-backdrop-filter: blur(8px) saturate(0.9);
  mask-image: radial-gradient(
    120% 95% at 0% 100%,
    #000 0%,
    #000 22%,
    rgba(0, 0, 0, 0.45) 48%,
    transparent 72%
  );
  -webkit-mask-image: radial-gradient(
    120% 95% at 0% 100%,
    #000 0%,
    #000 22%,
    rgba(0, 0, 0, 0.45) 48%,
    transparent 72%
  );
}

.title-wash-hard {
  backdrop-filter: blur(20px) saturate(0.85);
  -webkit-backdrop-filter: blur(20px) saturate(0.85);
  mask-image: radial-gradient(
    88% 68% at 8% 100%,
    #000 0%,
    #000 26%,
    rgba(0, 0, 0, 0.4) 48%,
    transparent 64%
  );
  -webkit-mask-image: radial-gradient(
    88% 68% at 8% 100%,
    #000 0%,
    #000 26%,
    rgba(0, 0, 0, 0.4) 48%,
    transparent 64%
  );
}

.view-title > :not(.title-wash) {
  position: relative;
  z-index: 1;
}

.mast h1 {
  margin: 0.15rem 0 0.45rem;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(3.4rem, 8vw, 6.2rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 0.9;
  text-shadow: 0 1px 24px rgba(5, 6, 10, 0.45);
}

.title-alpha {
  display: inline-block;
  margin-left: 0.12em;
  color: var(--accent);
  font-family: Outfit, system-ui, sans-serif;
  font-size: 0.28em;
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: none;
  vertical-align: 0.62em;
}

.eyebrow,
.boot-line,
.menu-key,
.card-meta {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
}

.tagline {
  margin: 0 0 2.2rem;
  max-width: 28rem;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.5;
  text-shadow: 0 1px 12px rgba(5, 6, 10, 0.55);
}

.eyebrow,
.boot-line {
  text-shadow: 0 1px 10px rgba(5, 6, 10, 0.5);
}

.title-menu {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: min(100%, 28rem);
}

.menu-item {
  appearance: none;
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.85rem;
  width: 100%;
  margin: 0;
  padding: 0.7rem 0.85rem;
  min-height: 3rem;
  border: 0;
  border-left: 2px solid transparent;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition:
    background 0.25s var(--ease),
    border-color 0.25s var(--ease),
    transform 0.25s var(--ease);
}

.menu-item.is-hot,
.menu-item:hover,
.menu-item:focus-visible {
  border-left-color: var(--accent);
  background: rgba(224, 195, 122, 0.08);
  transform: translateX(4px);
  outline: none;
}

.menu-item:active {
  transform: translateX(3px) scale(0.985);
  background: rgba(224, 195, 122, 0.14);
}

.menu-key {
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--accent-deep);
}

.menu-label {
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.menu-note {
  color: var(--muted);
  font-size: 0.82rem;
}

.boot-line {
  margin-top: 2rem;
  color: var(--muted);
  letter-spacing: 0.16em;
}

.visit-count {
  margin: 0.7rem 0 0;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  text-shadow: 0 1px 10px rgba(5, 6, 10, 0.5);
}

.view-library .browse-title,
.view-library .lore-tabs,
.view-library .lore-back,
.view-library .lead-stage,
.view-library .world-article,
.view-library .chapter-grid,
.view-library .extras-panel,
.view-library .extras-assets {
  transition:
    opacity 0.4s var(--ease),
    transform 0.4s var(--ease);
}

.app.is-reading .view-title,
.app.is-reading .view-library {
  pointer-events: none;
}

.view-library {
  min-height: 100dvh;
  min-height: 100svh;
  padding: clamp(1.2rem, 3vw, 2.4rem);
  padding-top: max(clamp(1.2rem, 3vw, 2.4rem), env(safe-area-inset-top));
  padding-bottom: max(5.4rem, calc(env(safe-area-inset-bottom) + 4.2rem));
  padding-left: max(clamp(1.2rem, 3vw, 2.4rem), env(safe-area-inset-left));
  padding-right: max(clamp(1.2rem, 3vw, 2.4rem), env(safe-area-inset-right), 9rem);
}

.util-wash {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 6;
  width: min(34rem, 52vw);
  height: min(11rem, 28vh);
  pointer-events: none;
}

.util-wash-frost,
.util-wash-dim {
  position: absolute;
  inset: 0;
}

.util-wash-frost {
  background: rgba(5, 6, 10, 0.22);
  backdrop-filter: blur(22px) saturate(0.86);
  -webkit-backdrop-filter: blur(22px) saturate(0.86);
  mask-image: radial-gradient(
    92% 88% at 100% 0%,
    #000 0%,
    #000 42%,
    rgba(0, 0, 0, 0.55) 64%,
    transparent 86%
  );
  -webkit-mask-image: radial-gradient(
    92% 88% at 100% 0%,
    #000 0%,
    #000 42%,
    rgba(0, 0, 0, 0.55) 64%,
    transparent 86%
  );
}

.util-wash-dim {
  background: radial-gradient(
    92% 88% at 100% 0%,
    rgba(5, 6, 10, 0.9) 0%,
    rgba(5, 6, 10, 0.72) 34%,
    rgba(5, 6, 10, 0.38) 58%,
    rgba(5, 6, 10, 0.1) 74%,
    transparent 88%
  );
}

.now-playing {
  position: fixed;
  top: max(0.85rem, env(safe-area-inset-top));
  left: max(0.95rem, env(safe-area-inset-left));
  z-index: 21;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  max-width: min(24rem, calc(100vw - 10rem));
  padding: 0.28rem 0.7rem 0.28rem 0.28rem;
  background: rgba(5, 6, 10, 0.55);
  color: var(--muted);
  pointer-events: auto;
}

.now-playing[hidden] {
  display: none !important;
}

.app.is-reading .now-playing {
  top: calc(max(0.5rem, env(safe-area-inset-top)) + 3.55rem);
  left: max(0.75rem, env(safe-area-inset-left));
  z-index: 23;
}

.now-playing-toggle {
  appearance: none;
  flex: none;
  display: grid;
  place-items: center;
  width: 2.15rem;
  height: 2.15rem;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(224, 195, 122, 0.35);
  background: rgba(224, 195, 122, 0.1);
  color: var(--ink);
  cursor: pointer;
}

.now-playing-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.now-playing-toggle:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

.now-playing-icon {
  width: 0.85rem;
  height: 0.85rem;
  fill: currentColor;
}

.now-playing.is-playing .is-play,
.now-playing:not(.is-playing) .is-pause {
  display: none;
}

.now-playing-copy {
  min-width: 0;
}

.now-playing-kicker,
.now-playing-title {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.now-playing-kicker {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.now-playing-title {
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  color: var(--ink);
  text-transform: none;
}

.util-rail {
  position: fixed;
  top: max(0.85rem, env(safe-area-inset-top));
  right: max(1.1rem, env(safe-area-inset-right));
  z-index: 22;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.55rem;
  width: max-content;
  max-width: calc(100vw - 2rem);
  padding: 0.75rem 1.05rem 1.15rem 1.35rem;
  pointer-events: none;
  text-align: right;
}

.util-rail > * {
  pointer-events: auto;
}

.util-tabs {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  white-space: nowrap;
}

.util-tab {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 0;
  border: 0;
  background: none;
  padding: 0;
  min-height: 2.4rem;
  line-height: 1;
  color: var(--muted);
  font: inherit;
  font-size: clamp(0.86rem, 1.25vw, 1rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  text-shadow: 0 1px 12px rgba(5, 6, 10, 0.75);
}

.util-tab.is-on,
.util-tab:hover,
.util-tab:focus-visible {
  color: var(--ink);
  outline: none;
}

.util-tab.is-on {
  color: var(--accent);
}

.site-overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right))
    max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
}

.site-overlay[hidden] {
  display: none !important;
}

.site-overlay-scrim {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: rgba(5, 6, 10, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
}

.site-overlay-panel {
  position: relative;
  z-index: 1;
  width: min(52rem, 100%);
  max-height: min(86vh, 52rem);
  overflow: auto;
  padding: 1.35rem 1.4rem 1.5rem;
  border: 1px solid rgba(224, 195, 122, 0.32);
  background: rgba(12, 14, 20, 0.94);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}

.overlay-close {
  float: right;
  margin: 0 0 0.6rem 1rem;
}

.overlay-kicker {
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

.overlay-title {
  margin: 0.25rem 0 1.1rem;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 500;
}

.overlay-pane[hidden] {
  display: none !important;
}

.news-item + .news-item {
  margin-top: 1.4rem;
  padding-top: 1.3rem;
  border-top: 1px solid rgba(244, 239, 230, 0.12);
}

.news-date {
  margin: 0 0 0.35rem;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.news-item h3 {
  margin: 0 0 0.35rem;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 500;
}

.news-sub,
.news-body {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.news-body {
  margin-top: 0.7rem;
  color: var(--ink);
}

.extras-lead,
.extras-empty {
  margin: 0 0 1rem;
  color: var(--muted);
  line-height: 1.45;
}

.extras-panel {
  max-width: min(36rem, 100%);
}

.extras-panel.is-assets {
  max-width: none;
}

.extras-panel[hidden] {
  display: none !important;
}

.extras-list {
  display: grid;
  gap: 0.45rem;
}

.extras-list[hidden],
.extras-assets[hidden] {
  display: none !important;
}

.extras-assets {
  display: grid;
  gap: 1.6rem;
}

.asset-group {
  display: grid;
  gap: 0.75rem;
}

.asset-group-heading {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  font-weight: 500;
}

.asset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: 0.85rem;
  align-items: start;
}

.extras-track {
  appearance: none;
  display: grid;
  gap: 0.15rem;
  width: 100%;
  margin: 0;
  padding: 0.7rem 0.85rem;
  border: 1px solid rgba(244, 239, 230, 0.12);
  border-radius: 0.35rem;
  background: rgba(244, 239, 230, 0.04);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.extras-track:hover,
.extras-track:focus-visible {
  border-color: rgba(224, 195, 122, 0.45);
  outline: none;
}

.extras-track.is-on {
  border-color: var(--accent);
  background: rgba(224, 195, 122, 0.1);
}

.extras-track-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.25rem;
}

.extras-track-note,
.extras-shuffle .extras-track-title {
  font-family: Outfit, system-ui, sans-serif;
}

.extras-shuffle .extras-track-title {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.extras-track-note {
  font-size: 0.78rem;
  color: var(--muted);
}

.pref-list {
  display: grid;
  gap: 1rem;
}

.pref-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 1rem;
  border: 1px solid rgba(244, 239, 230, 0.12);
  background: rgba(5, 6, 10, 0.35);
}

.pref-copy {
  min-width: 0;
}

.pref-name {
  margin: 0 0 0.3rem;
  font-size: 0.95rem;
}

.pref-hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.4;
}

.pref-switch {
  flex: none;
  appearance: none;
  min-width: 4.2rem;
  min-height: 2.6rem;
  padding: 0 0.85rem;
  border: 1px solid rgba(224, 195, 122, 0.45);
  background: rgba(224, 195, 122, 0.12);
  color: var(--ink);
  font: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}

.pref-switch[aria-checked="false"] {
  border-color: rgba(244, 239, 230, 0.18);
  background: transparent;
  color: var(--muted);
}

.pref-row-vol {
  align-items: center;
}

.pref-slider {
  flex: none;
  width: 8.5rem;
  accent-color: var(--accent);
  cursor: pointer;
}

.pref-foot {
  margin: 0.35rem 0.2rem 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.load-status {
  position: fixed;
  inset: 0;
  z-index: 26;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: rgba(5, 6, 10, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.load-status[hidden] {
  display: none !important;
}

.load-status-inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.1rem;
  max-width: min(22rem, 100%);
  background: #10131c;
  border: 1px solid rgba(224, 195, 122, 0.38);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
}

.load-pulse {
  flex: none;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--accent);
  animation: load-pulse 1.1s var(--ease) infinite;
}

.load-status-inner p {
  margin: 0;
  color: var(--ink);
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

@keyframes load-pulse {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.85);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

.entry-gate {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  padding-top: max(1.25rem, env(safe-area-inset-top));
  padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  background: rgba(5, 6, 10, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

html.has-entry .entry-gate,
.entry-gate[hidden] {
  display: none !important;
}

.load-status,
.load-status * {
  cursor: wait;
}

.entry-panel {
  width: min(100%, 22.5rem);
  padding: 1.35rem 1.3rem 1.25rem;
  background: #10131c;
  border: 1px solid rgba(224, 195, 122, 0.38);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  animation: card-in 0.35s var(--ease) both;
}

.entry-panel h2,
.entry-panel p {
  margin: 0;
}

.entry-panel h2 {
  margin: 0.35rem 0 0.65rem;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.7rem, 6vw, 2.2rem);
  font-weight: 500;
  line-height: 1.15;
  color: var(--ink);
}

.entry-panel p {
  color: var(--muted);
  line-height: 1.5;
}

.entry-panel p + p {
  margin-top: 0.7rem;
}

.entry-panel button {
  appearance: none;
  display: block;
  width: 100%;
  margin-top: 1.15rem;
  padding: 0.85rem 1rem;
  min-height: 2.85rem;
  border: 1px solid rgba(224, 195, 122, 0.45);
  background: rgba(224, 195, 122, 0.12);
  color: var(--ink);
  font: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
}

.site-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: none;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.1rem 1.75rem;
  padding: 0.75rem 1.2rem max(0.95rem, env(safe-area-inset-bottom));
  background: linear-gradient(
    to top,
    rgba(5, 6, 10, 0.92) 0%,
    rgba(5, 6, 10, 0.55) 62%,
    rgba(5, 6, 10, 0) 100%
  );
  pointer-events: none;
  transform: translateY(0);
  transition: transform 0.45s var(--ease);
}

.app.is-library .site-dock {
  display: flex;
}

.app.is-reading .site-dock {
  display: none;
}

.site-dock > * {
  pointer-events: auto;
}

.browse-link {
  appearance: none;
  border: 0;
  background: none;
  padding: 0.45rem 0;
  min-height: 2.75rem;
  color: var(--muted);
  font: inherit;
  font-size: clamp(0.88rem, 1.35vw, 1.12rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
}

.browse-link.is-on {
  color: var(--accent);
}

.browse-link:hover,
.browse-link:focus-visible {
  color: var(--ink);
}

.browse-link.is-on:hover,
.browse-link.is-on:focus-visible {
  color: var(--accent);
}

.lore-tab {
  appearance: none;
  flex: 1;
  border: 0;
  background: rgba(5, 6, 10, 0.35);
  padding: 1.05rem 1.5rem;
  min-height: 3.4rem;
  color: var(--muted);
  font: inherit;
  font-size: clamp(0.88rem, 1.35vw, 1.12rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
}

.lore-back {
  display: block;
  margin: 0 0 1rem;
  font-size: clamp(0.88rem, 1.35vw, 1.05rem);
  min-height: 2.75rem;
}

.browse-title h2 {
  margin: 0 0 0.35rem;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 500;
}

.library-sub {
  margin: 0 0 1.1rem;
  max-width: 36rem;
  color: var(--muted);
}

.world-article {
  max-width: 40rem;
  margin: 0 0 4rem;
  padding: 0.2rem 0 3rem;
}

.world-article[hidden] {
  display: none !important;
}

.world-article .article-title {
  margin: 0 0 0.45rem;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2.1rem, 4.6vw, 3.3rem);
  font-weight: 500;
  line-height: 1.08;
}

.world-article .article-hint {
  margin: 0 0 1.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.world-article .article-topic {
  margin: 0;
  border-top: 1px solid rgba(244, 239, 230, 0.12);
}

.world-article .article-topic:last-child {
  border-bottom: 1px solid rgba(244, 239, 230, 0.12);
}

.world-article summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  padding: 1.05rem 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  touch-action: manipulation;
}

.world-article summary::-webkit-details-marker {
  display: none;
}

.world-article summary::after {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  flex: 0 0 auto;
  border-right: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: rotate(45deg);
  opacity: 0.75;
  transition: transform 0.22s var(--ease);
}

.world-article .article-topic[open] summary::after {
  transform: rotate(225deg);
  translate: 0 0.2rem;
}

.world-article summary:hover {
  color: var(--accent);
}

.world-article .article-body {
  padding: 0 0 1.35rem;
}

.world-article p {
  margin: 0 0 0.9rem;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.12rem, 1.65vw, 1.3rem);
  line-height: 1.58;
  color: rgba(244, 239, 230, 0.9);
}

.world-article p:last-child {
  margin-bottom: 0;
}

.lore-tabs {
  display: flex;
  gap: 0;
  margin: 0 0 1.25rem;
  border: 1px solid rgba(244, 239, 230, 0.14);
}

.lore-tabs[hidden] {
  display: none !important;
}

.lore-tab.is-on {
  color: var(--ink);
  background: rgba(224, 195, 122, 0.14);
  box-shadow: inset 0 -3px 0 var(--accent);
}

.lore-back[hidden] {
  display: none !important;
}

.lead-stage {
  display: grid;
  grid-template-columns: minmax(15rem, 0.9fr) minmax(18rem, 1.15fr);
  gap: 1.15rem 1.6rem;
  align-items: start;
}

.lead-stage[hidden] {
  display: none !important;
}

.lead-portrait {
  position: relative;
  overflow: hidden;
  aspect-ratio: 23 / 35;
  max-height: min(72vh, 46rem);
  width: 100%;
  border: 1px solid rgba(244, 239, 230, 0.12);
  background: #0c0e14;
}

.lead-portrait video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.lead-panel {
  min-width: 0;
  padding: 0.85rem 1rem 1rem;
  border: 1px solid rgba(244, 239, 230, 0.12);
  background: rgba(5, 6, 10, 0.55);
}

.lead-sheet {
  display: grid;
  grid-template-columns: 6.4rem minmax(0, 1fr);
  gap: 0.55rem 0.9rem;
  margin: 0;
}

.lead-sheet dt {
  margin: 0;
  color: var(--accent);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding-top: 0.18rem;
}

.lead-sheet dd {
  margin: 0;
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.4;
}

.lead-blurb {
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.45;
}

.lead-blurb[hidden] {
  display: none !important;
}

.lead-episodes {
  margin-top: 1.15rem;
  grid-template-columns: minmax(0, 22rem);
}

.lead-fanart {
  margin-top: 1.75rem;
  padding-bottom: 1rem;
}

.lead-fanart[hidden] {
  display: none !important;
}

.lead-plates .asset-grid {
  grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
}

.lead-fanart-heading {
  margin: 0 0 0.85rem;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.45rem, 2.4vw, 1.9rem);
  font-weight: 500;
}

.fanart-groups {
  display: flex;
  flex-direction: column;
  gap: 1.45rem;
}

.fanart-rating-heading {
  margin: 0 0 0.65rem;
  color: var(--accent);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.fanart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
  gap: 0.75rem;
}

.fanart-card {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(244, 239, 230, 0.12);
  background: rgba(5, 6, 10, 0.55);
}

.fanart-card img {
  display: block;
  width: 100%;
  height: 18rem;
  object-fit: contain;
  background: #0c0e14;
  cursor: pointer;
  transition: transform 0.55s var(--ease);
}

.fanart-card:hover:not(.is-veiled) img,
.fanart-card:focus-within:not(.is-veiled) img {
  transform: scale(1.08) translate3d(0, -2%, 0);
}

.fanart-card figcaption {
  padding: 0.45rem 0.55rem 0.55rem;
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

.fanart-card.is-veiled img {
  filter: blur(48px) saturate(0.7);
  transform: scale(1.28);
  pointer-events: none;
}

.fanart-veil {
  appearance: none;
  position: absolute;
  z-index: 1;
  inset: 0 0 auto;
  height: 18rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 1rem;
  border: 0;
  background: rgba(5, 6, 10, 0.28);
  color: var(--ink);
  font: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  text-shadow: 0 1px 10px rgba(5, 6, 10, 0.9);
}

.fanart-veil:hover {
  color: var(--accent);
}

.fanart-lightbox {
  position: fixed;
  inset: 0;
  z-index: 24;
  display: grid;
  place-items: center;
  padding: max(0.75rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right))
    max(0.75rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
}

.fanart-lightbox[hidden] {
  display: none !important;
}

.fanart-lightbox-scrim {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: rgba(5, 6, 10, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  cursor: pointer;
}

.fanart-lightbox-stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(96vw, 92rem);
  max-height: min(94vh, 56rem);
}

.fanart-lightbox-stage img,
.fanart-lightbox-stage video {
  display: block;
  width: 100%;
  max-height: calc(min(94vh, 56rem) - 3.4rem);
  object-fit: contain;
  background: #0c0e14;
}

.fanart-lightbox-stage img[hidden],
.fanart-lightbox-stage video[hidden] {
  display: none !important;
}

.fanart-lightbox-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.55rem 0.15rem 0;
}

.fanart-lightbox-title {
  flex: 1;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 0.78rem;
}

.fanart-lightbox-bar .text-btn,
.fanart-lightbox-bar a {
  flex: none;
  text-decoration: none;
}

.chapter-grid[hidden] {
  display: none !important;
}

.chapter-card.is-locked {
  filter: grayscale(0.8) saturate(0.4);
  opacity: 0.55;
  cursor: default;
}

.chapter-card.is-locked:hover,
.chapter-card.is-locked:focus-visible {
  transform: none;
  border-color: rgba(244, 239, 230, 0.12);
}

.text-btn {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  color: var(--accent);
  font: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
  transition: color var(--tap), opacity var(--tap);
}

.text-btn:hover {
  color: var(--ink);
}

.text-btn:active {
  opacity: 0.65;
}

.chapter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 1rem;
  transition: opacity 0.22s var(--ease);
}

.chapter-grid.is-swap {
  opacity: 0;
}

.chapter-grid.is-main {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 32rem), 36rem));
  gap: 1.35rem;
}

.chapter-grid.is-main .chapter-card {
  min-height: min(62vh, 40rem);
}

.chapter-grid.is-main .card-meta {
  padding-top: 22rem;
}

.chapter-grid.is-main .card-title {
  font-size: clamp(1.85rem, 3vw, 2.35rem);
}

.chapter-card {
  position: relative;
  isolation: isolate;
  min-height: 340px;
  padding: 0;
  border: 1px solid rgba(244, 239, 230, 0.12);
  background: #0c0e14;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  animation: card-in 0.4s var(--ease) both;
  transition:
    transform 0.35s var(--ease),
    border-color 0.35s var(--ease);
}

.chapter-card:nth-child(1) {
  animation-delay: 0.03s;
}
.chapter-card:nth-child(2) {
  animation-delay: 0.07s;
}
.chapter-card:nth-child(3) {
  animation-delay: 0.11s;
}
.chapter-card:nth-child(4) {
  animation-delay: 0.15s;
}

@keyframes card-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.chapter-card img,
.chapter-card video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
  z-index: -2;
  pointer-events: none;
  transition: transform 0.6s var(--ease);
}

.card-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(5, 6, 10, 0.92) 0%, rgba(5, 6, 10, 0.15) 55%, rgba(5, 6, 10, 0.25) 100%);
}

.chapter-card:hover,
.chapter-card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--accent);
  outline: none;
}

.chapter-card:active {
  transform: translateY(-1px) scale(0.99);
}

.chapter-card:hover img,
.chapter-card:hover video,
.chapter-card:focus-visible img,
.chapter-card:focus-visible video {
  transform: scale(1.06);
}

.asset-card {
  appearance: none;
  display: grid;
  gap: 0.45rem;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(244, 239, 230, 0.12);
  border-radius: 0.35rem;
  background: rgba(5, 6, 10, 0.55);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition:
    transform 0.35s var(--ease),
    border-color 0.35s var(--ease);
}

.asset-card.is-portrait {
  max-width: 14rem;
}

.asset-card-media {
  display: block;
  overflow: hidden;
  background: #0c0e14;
}

.asset-card video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #0c0e14;
  pointer-events: none;
  transform-origin: 50% 28%;
  transition: transform 0.55s var(--ease);
}

.asset-card.is-portrait video {
  aspect-ratio: 9 / 16;
}

.asset-card.is-alpha video,
.fanart-lightbox-stage video.is-alpha {
  background:
    repeating-conic-gradient(#1c212c 0% 25%, #0c0e14 0% 50%)
    50% / 1.1rem 1.1rem;
}

.asset-card-title {
  padding: 0 0.7rem 0.7rem;
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

.asset-card:hover,
.asset-card:focus-visible {
  transform: translateY(-8px);
  border-color: var(--accent);
  outline: none;
}

.asset-card:hover video,
.asset-card:focus-visible video {
  transform: scale(1.1) translate3d(-1.5%, -2.5%, 0);
}

.asset-card:active {
  transform: translateY(-3px) scale(0.99);
}

.card-meta,
.card-title,
.card-copy {
  position: relative;
  display: block;
  padding: 0 1rem;
}

.card-meta {
  padding-top: 11.5rem;
}

.card-title {
  margin: 0.35rem 0 0.4rem;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.7rem;
}

.card-copy {
  padding-bottom: 1.1rem;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.4;
}

.view-reader {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: block;
  min-height: 0;
  padding: 0;
  background: transparent;
}

.view-reader.is-wipe {
  z-index: 5;
  clip-path: inset(0 100% 0 0);
}

.view-reader.is-wipe-play {
  transition: clip-path 1.65s var(--wipe-ease);
}

.view-reader.is-wipe-in {
  clip-path: inset(0 0 0 0);
}

.view-reader.is-wipe-out {
  clip-path: inset(0 0 0 100%);
}

.view-reader.is-title-card .letterbox,
.view-reader.is-title-card .reader-controls {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.chapter-card-screen {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.35rem;
  padding: 12vh 8vw 18vh;
  background:
    radial-gradient(120% 80% at 50% 40%, rgba(5, 6, 10, 0.28), rgba(5, 6, 10, 0.78) 58%, rgba(5, 6, 10, 0.92)),
    rgba(5, 6, 10, 0.42);
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.72s var(--wipe-ease);
}

.chapter-card-screen[hidden] {
  display: none;
}

.chapter-card-screen.is-away {
  opacity: 0;
  pointer-events: none;
}

.chapter-card-kicker,
.chapter-card-mark,
.chapter-card-hint {
  margin: 0;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.chapter-card-kicker {
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 500;
}

.chapter-card-title {
  margin: 0.15rem 0 0;
  max-width: 18ch;
  color: var(--ink);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2.4rem, 7vw, 4.4rem);
  font-weight: 500;
  line-height: 1.05;
  text-align: center;
  text-wrap: pretty;
}

.chapter-card-mark {
  margin-top: 0.85rem;
  color: var(--accent-deep);
  font-size: 0.78rem;
}

.chapter-card-mark[hidden] {
  display: none;
}

.chapter-card-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(5.2rem, calc(env(safe-area-inset-bottom) + 3.4rem));
  color: var(--muted);
  font-size: 0.62rem;
  text-align: center;
  pointer-events: none;
}

.reader-exit {
  position: absolute;
  top: max(0.5rem, env(safe-area-inset-top));
  left: max(0.75rem, env(safe-area-inset-left));
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
}

.reader-back {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 0;
  margin: 0;
  padding: 0.5rem 0.85rem 0.5rem 0.7rem;
  min-height: 2.75rem;
  max-width: min(22rem, calc(100% - 8.5rem));
  border-radius: 999px;
  background: rgba(5, 6, 10, 0.58);
  color: var(--ink);
  font: inherit;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}

.reader-back-arrow {
  color: var(--accent);
  font-size: 0.95rem;
  line-height: 1;
}

.reader-back:hover {
  color: var(--accent);
}

.reader-back:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 3px;
}

.reader-back-dest {
  display: inline;
}

.reader-ctrl-short {
  display: none;
}

.orient-card {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  padding-top: max(1.25rem, env(safe-area-inset-top));
  padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  background: rgba(5, 6, 10, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.orient-card[hidden] {
  display: none !important;
}

.orient-panel {
  width: min(100%, 22.5rem);
  padding: 1.35rem 1.3rem 1.25rem;
  background: #10131c;
  border: 1px solid rgba(224, 195, 122, 0.38);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  animation: card-in 0.35s var(--ease) both;
}

.orient-panel h2,
.orient-panel p,
.orient-kicker {
  margin: 0;
}

.orient-panel h2 {
  margin: 0.35rem 0 0.65rem;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.7rem, 6vw, 2.2rem);
  font-weight: 500;
  line-height: 1.15;
  color: var(--ink);
}

.orient-panel p {
  color: var(--muted);
  line-height: 1.5;
}

.orient-kicker {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

.orient-panel button {
  appearance: none;
  display: block;
  width: 100%;
  margin-top: 1.15rem;
  padding: 0.85rem 1rem;
  min-height: 2.85rem;
  border: 1px solid rgba(224, 195, 122, 0.45);
  background: rgba(224, 195, 122, 0.12);
  color: var(--ink);
  font: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
}

.orient-chip {
  position: absolute;
  top: max(3.4rem, calc(env(safe-area-inset-top) + 2.9rem));
  left: max(0.9rem, env(safe-area-inset-left));
  z-index: 4;
  margin: 0;
  padding: 0.35rem 0.55rem;
  max-width: calc(100% - 8.5rem);
  background: rgba(5, 6, 10, 0.78);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  pointer-events: none;
}

.orient-chip[hidden] {
  display: none !important;
}

.shell {
  position: relative;
  width: 100%;
  height: 100%;
}

.viewport {
  position: relative;
  width: 100%;
  height: 100%;
  background: transparent;
  cursor: pointer;
  outline: none;
  overflow: hidden;
  isolation: isolate;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

.viewport:focus-visible {
  box-shadow: inset 0 0 0 1px var(--accent);
}

.media-stack,
.layer {
  position: absolute;
  inset: 0;
}

.media-stack {
  background: #05060a;
}

.overlay-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.72s var(--ease);
}

.overlay-veil-frost,
.overlay-veil-dim {
  position: absolute;
  inset: 0;
  -webkit-mask-image: radial-gradient(115% 95% at 18% 58%, #000 0%, #000 34%, transparent 72%);
  mask-image: radial-gradient(115% 95% at 18% 58%, #000 0%, #000 34%, transparent 72%);
}

.overlay-veil-frost {
  backdrop-filter: blur(18px) saturate(0.86);
  -webkit-backdrop-filter: blur(18px) saturate(0.86);
  background: rgba(8, 10, 16, 0.18);
}

.overlay-veil-dim {
  background: radial-gradient(
    115% 95% at 18% 58%,
    rgba(5, 6, 10, 0.72) 0%,
    rgba(5, 6, 10, 0.5) 38%,
    rgba(5, 6, 10, 0) 72%
  );
}

.viewport.has-overlay .overlay-veil {
  opacity: 1;
}

.viewport.is-overlay-out .overlay-veil {
  opacity: 0;
}

.layer {
  opacity: 0;
  z-index: 0;
  transition: opacity 0.6s var(--ease);
  pointer-events: none;
}

.layer.is-under {
  opacity: 1;
  z-index: 0;
}

.layer.is-on {
  opacity: 1;
  z-index: 1;
}

.sprite-stack {
  position: absolute;
  inset: 0 0 16% 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}

.sprite-stack.is-on {
  opacity: 1;
}

.sprite-stack .sprite-media {
  max-width: min(48vw, 620px);
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: bottom center;
  background: transparent;
}

.viewport.has-overlay .sprite-stack {
  inset: 0 0 18% 0;
  justify-content: flex-start;
  padding-left: max(0.4rem, env(safe-area-inset-left));
}

.viewport.has-overlay .sprite-stack .sprite-media {
  max-width: min(58vw, 420px);
  max-height: 100%;
  object-position: bottom left;
}

.layer img,
.layer video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.still {
  position: absolute;
  inset: 0;
}

.still-bleed,
.still-fit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.still-bleed {
  object-fit: cover;
  object-position: center;
  filter: blur(32px) saturate(0.78) brightness(0.55);
  transform: scale(1.14);
}

.still-fit {
  object-fit: contain;
  object-position: center;
}

.layer video {
  object-fit: contain;
  object-position: center;
}

.letterbox {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 0 1.35rem 5.15rem;
  background: none;
  pointer-events: none;
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.35s var(--ease),
    transform 0.35s var(--ease);
}

.letterbox[hidden] {
  display: flex;
  opacity: 0;
  transform: translateY(16px);
  visibility: hidden;
}

.line-plate {
  position: relative;
  width: min(46rem, 100%);
  padding: 1.05rem 1.55rem 0.9rem;
  border-radius: 1.2rem;
  border: 1px solid rgba(224, 195, 122, 0.32);
  background:
    linear-gradient(180deg, rgba(10, 12, 18, 0.78) 0%, rgba(7, 8, 12, 0.9) 100%);
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(244, 239, 230, 0.08);
  backdrop-filter: blur(20px) saturate(1.15);
  -webkit-backdrop-filter: blur(20px) saturate(1.15);
  -webkit-text-size-adjust: 100%;
}

.letterbox.is-narration .line-plate {
  border-left: 3px solid rgba(224, 195, 122, 0.72);
}

.line-advance {
  display: block;
  width: 0.48rem;
  height: 0.48rem;
  margin: 0.7rem 0 0 auto;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
  opacity: 0.55;
  animation: line-advance 1.35s var(--ease) infinite;
}

@keyframes line-advance {
  0%,
  100% {
    opacity: 0.28;
    transform: rotate(45deg) translate(-1px, -1px);
  }
  50% {
    opacity: 0.95;
    transform: rotate(45deg) translate(2px, 2px);
  }
}

@media (orientation: landscape) {
  .overlay-veil-frost,
  .overlay-veil-dim {
    -webkit-mask-image: radial-gradient(70% 110% at 12% 55%, #000 0%, #000 42%, transparent 78%);
    mask-image: radial-gradient(70% 110% at 12% 55%, #000 0%, #000 42%, transparent 78%);
  }

  .overlay-veil-dim {
    background: radial-gradient(
      70% 110% at 12% 55%,
      rgba(5, 6, 10, 0.78) 0%,
      rgba(5, 6, 10, 0.52) 46%,
      rgba(5, 6, 10, 0) 78%
    );
  }

  .viewport.has-overlay .sprite-stack {
    inset: 0 auto 0 0;
    width: 34%;
    padding-left: max(0.6rem, env(safe-area-inset-left));
    padding-bottom: 0.4rem;
  }

  .viewport.has-overlay .sprite-stack .sprite-media {
    max-width: 100%;
    max-height: 96%;
    object-position: bottom left;
  }

  .viewport.has-overlay .letterbox {
    left: 30%;
    right: 5%;
    top: auto;
    bottom: 0;
    width: auto;
    justify-content: flex-start;
    padding: 0 1rem 5.15rem 0.4rem;
    transform: none;
  }

  .viewport.has-overlay .letterbox[hidden] {
    transform: translateY(16px);
  }

  .viewport.has-overlay .line-plate {
    width: min(40rem, 100%);
  }
}

.speaker {
  margin: 0 0 0.4rem;
  width: fit-content;
  padding: 0.08rem 0.15rem 0.08rem 0.55rem;
  border-left: 2px solid var(--accent);
  font-size: clamp(0.88rem, 1.5vw, 1.05rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}

.speaker:empty {
  display: none;
}

.line {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.45rem, 3.1vw, 2.15rem);
  font-weight: 500;
  line-height: 1.28;
  text-wrap: pretty;
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.45);
}

.hint {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.reader-controls {
  position: absolute;
  left: max(0.75rem, env(safe-area-inset-left));
  right: max(0.75rem, env(safe-area-inset-right));
  bottom: max(0.7rem, env(safe-area-inset-bottom));
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  pointer-events: none;
}

.reader-step {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  pointer-events: auto;
}

.reader-ctrl {
  pointer-events: auto;
  appearance: none;
  border: 1px solid rgba(244, 239, 230, 0.14);
  margin: 0;
  padding: 0.55rem 1rem;
  min-height: 2.85rem;
  border-radius: 999px;
  background: rgba(5, 6, 10, 0.62);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--muted);
  font: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
}

.reader-ctrl.is-primary {
  border-color: rgba(224, 195, 122, 0.48);
  color: var(--accent);
  padding-right: 1.15rem;
}

.reader-ctrl.is-primary::after {
  content: " →";
  letter-spacing: 0;
}

.reader-ctrl.is-primary.is-close::after {
  content: none;
}

.reader-ctrl:hover:not(:disabled) {
  color: var(--ink);
  border-color: rgba(244, 239, 230, 0.32);
}

.reader-ctrl.is-primary:hover:not(:disabled) {
  color: var(--accent);
  border-color: rgba(224, 195, 122, 0.8);
}

.reader-ctrl:disabled {
  opacity: 0.38;
  cursor: default;
}

.reader-ctrl:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 3px;
}

@media (max-width: 720px) {
  .util-rail {
    max-width: calc(100vw - 1.5rem);
  }

  .util-tabs {
    gap: 0.7rem;
  }

  .util-tab {
    font-size: 0.8rem;
    letter-spacing: 0.12em;
  }

  .view-title {
    width: 100%;
    max-width: none;
    padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right))
      max(1.4rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  }

  .mast h1 {
    font-size: clamp(2.35rem, 12vw, 3.6rem);
  }

  .tagline {
    margin-bottom: 1.1rem;
    font-size: 0.92rem;
    line-height: 1.4;
  }

  .menu-item {
    min-height: 2.55rem;
    padding: 0.45rem 0.55rem;
  }

  .menu-label {
    font-size: 0.95rem;
  }

  .menu-note {
    font-size: 0.75rem;
  }

  .boot-line {
    display: none;
  }

  .visit-count {
    margin-top: 1.35rem;
  }

  .letterbox {
    padding: 0 0.8rem max(4.55rem, calc(env(safe-area-inset-bottom) + 3.25rem));
  }

  .line-plate {
    padding: 0.72rem 0.95rem 0.62rem;
    border-radius: 0.95rem;
    max-height: min(34vh, 13.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    pointer-events: auto;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }

  .speaker {
    margin-bottom: 0.28rem;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
  }

  .line {
    font-size: clamp(1.12rem, 4.4vw, 1.4rem);
    line-height: 1.32;
  }

  .line-advance {
    margin-top: 0.45rem;
  }

  .reader-back-dest {
    display: none;
  }

  .reader-back {
    min-height: 2.5rem;
    padding: 0.4rem 0.75rem 0.4rem 0.6rem;
    font-size: 0.74rem;
    letter-spacing: 0.12em;
    max-width: min(9.5rem, calc(100% - 7.5rem));
  }

  .app.is-reading .now-playing-copy {
    display: none;
  }

  .app.is-reading .now-playing {
    top: max(0.45rem, env(safe-area-inset-top));
    left: auto;
    right: max(8.35rem, calc(env(safe-area-inset-right) + 7.6rem));
    max-width: none;
    gap: 0;
    padding: 0.12rem;
    background: rgba(5, 6, 10, 0.62);
  }

  .app.is-reading .now-playing-toggle {
    width: 2.35rem;
    height: 2.35rem;
  }

  .reader-controls {
    left: max(0.55rem, env(safe-area-inset-left));
    right: max(0.55rem, env(safe-area-inset-right));
    bottom: max(0.45rem, env(safe-area-inset-bottom));
    gap: 0.45rem;
  }

  .reader-ctrl {
    min-height: 2.75rem;
    padding: 0.45rem 0.8rem;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
  }

  .reader-ctrl-long {
    display: none;
  }

  .reader-ctrl-short {
    display: inline;
  }

  .chapter-card-title {
    font-size: clamp(1.9rem, 9vw, 3.1rem);
  }

  .chapter-card {
    min-height: 280px;
  }

  .chapter-grid.is-main .chapter-card {
    min-height: min(58vh, 32rem);
  }

  .card-meta {
    padding-top: 8rem;
  }

  .chapter-grid.is-main .card-meta {
    padding-top: 16rem;
  }

  .lead-stage {
    grid-template-columns: 1fr;
  }

  .lead-portrait {
    max-height: min(48vh, 28rem);
    margin-inline: auto;
  }

  .lead-sheet {
    grid-template-columns: 5.6rem minmax(0, 1fr);
  }

  .lead-episodes {
    grid-template-columns: 1fr;
  }
}

@media (max-aspect-ratio: 4/5) {
  .lead-stage {
    grid-template-columns: 1fr;
  }

  .lead-portrait {
    max-height: min(48vh, 28rem);
    margin-inline: auto;
  }
}

@media (orientation: portrait), (max-aspect-ratio: 4/5) {
  .now-playing {
    top: max(0.65rem, env(safe-area-inset-top));
    left: max(0.65rem, env(safe-area-inset-left));
    max-width: min(16rem, calc(100vw - 8.4rem));
    gap: 0.4rem;
    padding: 0.2rem 0.55rem 0.2rem 0.2rem;
    background: rgba(5, 6, 10, 0.72);
  }

  .now-playing-toggle {
    width: 2rem;
    height: 2rem;
  }

  .now-playing-kicker {
    display: none;
  }

  .now-playing-title {
    font-size: 0.8rem;
  }

  .util-rail {
    top: max(0.45rem, env(safe-area-inset-top));
    right: max(0.4rem, env(safe-area-inset-right));
    max-width: none;
    padding: 0.25rem 0.55rem 0.35rem 0.7rem;
  }

  .util-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.85rem;
  }

  .util-tab {
    min-height: 2.15rem;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
  }

  .util-tab.is-support,
  .util-tab[data-overlay="news"] {
    display: none;
  }

  .util-wash {
    width: min(16rem, 58vw);
    height: min(5.2rem, 12vh);
  }

  .util-wash-frost {
    mask-image: radial-gradient(
      90% 110% at 100% 0%,
      #000 0%,
      #000 38%,
      rgba(0, 0, 0, 0.4) 62%,
      transparent 86%
    );
    -webkit-mask-image: radial-gradient(
      90% 110% at 100% 0%,
      #000 0%,
      #000 38%,
      rgba(0, 0, 0, 0.4) 62%,
      transparent 86%
    );
  }

  .util-wash-dim {
    background: radial-gradient(
      90% 110% at 100% 0%,
      rgba(5, 6, 10, 0.72) 0%,
      rgba(5, 6, 10, 0.38) 42%,
      transparent 78%
    );
  }

  .view-title {
    justify-content: flex-end;
    width: 100%;
    max-width: none;
    padding-top: max(4.4rem, calc(env(safe-area-inset-top) + 3.6rem));
    padding-right: max(1rem, env(safe-area-inset-right));
    padding-bottom: max(1.35rem, env(safe-area-inset-bottom));
    padding-left: max(1rem, env(safe-area-inset-left));
  }

  .title-wash {
    width: 100%;
  }

  .title-wash-dim {
    background: linear-gradient(
      to top,
      rgba(5, 6, 10, 0.9) 0%,
      rgba(5, 6, 10, 0.68) 26%,
      rgba(5, 6, 10, 0.32) 52%,
      rgba(5, 6, 10, 0.08) 74%,
      transparent 90%
    );
    mask-image: none;
    -webkit-mask-image: none;
  }

  .title-wash-soft {
    mask-image: radial-gradient(
      140% 72% at 40% 100%,
      #000 0%,
      #000 30%,
      rgba(0, 0, 0, 0.42) 58%,
      transparent 78%
    );
    -webkit-mask-image: radial-gradient(
      140% 72% at 40% 100%,
      #000 0%,
      #000 30%,
      rgba(0, 0, 0, 0.45) 58%,
      transparent 78%
    );
  }

  .title-wash-hard {
    mask-image: radial-gradient(
      120% 58% at 22% 100%,
      #000 0%,
      #000 28%,
      rgba(0, 0, 0, 0.38) 52%,
      transparent 70%
    );
    -webkit-mask-image: radial-gradient(
      120% 58% at 22% 100%,
      #000 0%,
      #000 28%,
      rgba(0, 0, 0, 0.38) 52%,
      transparent 70%
    );
  }

  .mast h1 {
    font-size: clamp(2.15rem, 11vw, 3rem);
    margin: 0.08rem 0 0.7rem;
    text-shadow: 0 1px 22px rgba(5, 6, 10, 0.8);
  }

  .eyebrow {
    font-size: 0.64rem;
  }

  .view-title .tagline {
    display: none;
  }

  .title-menu {
    gap: 0.18rem;
    width: 100%;
  }

  .menu-item {
    column-gap: 0.55rem;
    min-height: 2.55rem;
    padding: 0.38rem 0.5rem;
  }

  .menu-item.is-hot,
  .menu-item:hover,
  .menu-item:focus-visible {
    background: rgba(5, 6, 10, 0.42);
  }

  .menu-key {
    font-size: 0.62rem;
  }

  .menu-label,
  .menu-note {
    text-shadow: 0 1px 12px rgba(5, 6, 10, 0.75);
  }

  .view-library {
    padding-top: max(4.8rem, calc(env(safe-area-inset-top) + 3.9rem));
    padding-right: max(1rem, env(safe-area-inset-right));
    padding-bottom: max(5.8rem, calc(env(safe-area-inset-bottom) + 4.6rem));
    padding-left: max(1rem, env(safe-area-inset-left));
  }

  .app.is-library.is-lore-world .veil {
    background:
      linear-gradient(
        to top,
        rgba(5, 6, 10, 0.78) 0%,
        rgba(5, 6, 10, 0.62) 38%,
        rgba(5, 6, 10, 0.5) 100%
      );
  }

  .app.is-reading .now-playing {
    top: max(0.45rem, env(safe-area-inset-top));
    left: auto;
    right: max(8.35rem, calc(env(safe-area-inset-right) + 7.6rem));
    max-width: none;
    gap: 0;
    padding: 0.12rem;
  }

  .app.is-reading .now-playing-copy {
    display: none;
  }

  .reader-back {
    max-width: min(9.5rem, calc(100% - 7.5rem));
  }

  .reader-back-dest {
    display: none;
  }

  .letterbox {
    padding: 0 0.75rem max(4.7rem, calc(env(safe-area-inset-bottom) + 3.4rem));
  }

  .viewport.has-overlay .sprite-stack {
    inset: 7% 0 36% 0;
    justify-content: center;
    padding-left: 0;
  }

  .viewport.has-overlay .sprite-stack .sprite-media {
    max-width: min(82vw, 420px);
    object-position: bottom center;
  }

  .overlay-veil-frost,
  .overlay-veil-dim {
    -webkit-mask-image: radial-gradient(88% 72% at 50% 38%, #000 0%, #000 36%, transparent 78%);
    mask-image: radial-gradient(88% 72% at 50% 38%, #000 0%, #000 36%, transparent 78%);
  }

  .overlay-veil-dim {
    background: radial-gradient(
      88% 72% at 50% 38%,
      rgba(5, 6, 10, 0.7) 0%,
      rgba(5, 6, 10, 0.46) 42%,
      rgba(5, 6, 10, 0) 78%
    );
  }

  .orient-chip {
    top: max(3.2rem, calc(env(safe-area-inset-top) + 2.7rem));
    left: max(0.75rem, env(safe-area-inset-left));
    max-width: calc(100% - 1.4rem);
  }

  .site-dock {
    gap: 0.35rem 1.15rem;
    padding: 0.55rem 0.7rem max(0.85rem, env(safe-area-inset-bottom));
  }

  .browse-link {
    min-height: 2.45rem;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
  }

  .site-overlay-panel {
    max-height: min(88dvh, 52rem);
    padding: 1.15rem 1.05rem 1.25rem;
  }

  .pref-row {
    flex-wrap: wrap;
  }

  .pref-slider {
    width: min(100%, 12rem);
  }

  .lore-tab {
    padding: 0.85rem 0.9rem;
    min-height: 3.1rem;
    font-size: 0.82rem;
  }
}

@media (orientation: landscape) and (max-height: 540px) {
  .app.is-title {
    overflow: hidden;
    height: 100svh;
  }

  .view-title {
    justify-content: flex-end;
    width: 100%;
    max-width: none;
    padding-top: max(0.45rem, env(safe-area-inset-top));
    padding-bottom: max(0.55rem, env(safe-area-inset-bottom));
    padding-left: max(0.85rem, env(safe-area-inset-left));
    padding-right: max(0.85rem, env(safe-area-inset-right), 7.5rem);
  }

  .eyebrow {
    font-size: 0.58rem;
    letter-spacing: 0.18em;
  }

  .mast h1 {
    margin: 0.04rem 0 0.28rem;
    font-size: clamp(1.45rem, 6.6vh, 2.05rem);
  }

  .view-title .tagline,
  .view-title .boot-line,
  .view-title .visit-count,
  .view-title .menu-note {
    display: none;
  }

  .title-menu {
    gap: 0.06rem;
    width: min(100%, 22rem);
  }

  .menu-item {
    grid-template-rows: auto;
    column-gap: 0.5rem;
    min-height: 2.15rem;
    padding: 0.28rem 0.5rem;
  }

  .menu-key {
    font-size: 0.58rem;
  }

  .menu-label {
    font-size: 0.82rem;
    letter-spacing: 0.1em;
  }

  .now-playing {
    top: max(0.3rem, env(safe-area-inset-top));
    left: max(0.55rem, env(safe-area-inset-left));
    max-width: min(14rem, calc(100vw - 9rem));
    padding: 0.12rem 0.45rem 0.12rem 0.12rem;
  }

  .now-playing-kicker {
    display: none;
  }

  .now-playing-title {
    font-size: 0.72rem;
  }

  .util-rail {
    top: max(0.22rem, env(safe-area-inset-top));
    right: max(0.35rem, env(safe-area-inset-right));
    padding: 0.12rem 0.4rem 0.18rem 0.5rem;
  }

  .util-tab {
    min-height: 1.85rem;
    font-size: 0.62rem;
    letter-spacing: 0.1em;
  }

  .util-wash {
    width: min(12rem, 36vw);
    height: min(3.2rem, 22vh);
  }

  .view-library {
    padding-top: max(2.6rem, calc(env(safe-area-inset-top) + 2.1rem));
    padding-right: max(0.7rem, env(safe-area-inset-right));
    padding-bottom: max(3.35rem, calc(env(safe-area-inset-bottom) + 2.55rem));
    padding-left: max(0.7rem, env(safe-area-inset-left));
  }

  .browse-title h2 {
    margin-bottom: 0.15rem;
    font-size: clamp(1.25rem, 5.4vh, 1.7rem);
  }

  .library-sub {
    display: none;
  }

  .lore-tabs {
    margin-bottom: 0.55rem;
  }

  .lore-tab {
    min-height: 2.15rem;
    padding: 0.35rem 0.7rem;
    font-size: 0.7rem;
  }

  .lore-back {
    margin-bottom: 0.45rem;
    min-height: 2.1rem;
    font-size: 0.78rem;
  }

  .site-dock {
    gap: 0.25rem 1rem;
    padding: 0.35rem 0.7rem max(0.45rem, env(safe-area-inset-bottom));
  }

  .browse-link {
    min-height: 2.05rem;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
  }

  .chapter-card {
    min-height: 9.5rem;
  }

  .chapter-grid.is-main .chapter-card {
    min-height: min(46vh, 12.5rem);
  }

  .chapter-grid.is-main .card-meta {
    padding-top: 4.5rem;
  }

  .card-title {
    font-size: 0.95rem;
  }

  .card-copy {
    display: none;
  }

  .lead-stage {
    grid-template-columns: minmax(15.5rem, 17.5rem) minmax(0, 1fr);
    align-items: start;
    gap: 0.85rem 1.15rem;
    min-height: 0;
  }

  .lead-portrait {
    width: 100%;
    height: auto;
    min-height: 24rem;
    max-height: none;
    max-width: none;
    aspect-ratio: 23 / 35;
    margin: 0;
  }

  .lead-portrait video {
    object-fit: contain;
  }

  .lead-blurb {
    margin-top: 0.45rem;
    font-size: 0.82rem;
  }

  .lead-sheet dd {
    font-size: 0.82rem;
  }

  .world-article .article-title {
    font-size: clamp(1.35rem, 5vh, 1.85rem);
  }

  .world-article .article-hint {
    margin-bottom: 0.7rem;
  }

  .world-article summary {
    font-size: 0.92rem;
  }

  .extras-track {
    min-height: 2.2rem;
    padding: 0.35rem 0.7rem;
  }

  .fanart-card img,
  .fanart-veil {
    height: 8.5rem;
  }

  .site-overlay-panel {
    max-height: min(86svh, 28rem);
    padding: 0.75rem 0.9rem 0.85rem;
  }

  .pref-row {
    padding: 0.55rem 0.75rem;
  }

  .pref-name {
    font-size: 0.85rem;
  }

  .pref-hint {
    font-size: 0.72rem;
  }

  .letterbox {
    padding: 0 0.75rem max(3.7rem, calc(env(safe-area-inset-bottom) + 2.6rem));
  }

  .line-plate {
    padding: 0.55rem 0.85rem 0.5rem;
    max-height: min(38vh, 9.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    pointer-events: auto;
  }

  .line {
    font-size: clamp(1.05rem, 3.4vh, 1.32rem);
    line-height: 1.28;
  }

  .reader-back-dest {
    display: none;
  }

  .app.is-reading .now-playing-copy {
    display: none;
  }

  .app.is-reading .now-playing {
    top: max(0.32rem, env(safe-area-inset-top));
    left: auto;
    right: max(8.35rem, calc(env(safe-area-inset-right) + 7.6rem));
    max-width: none;
    gap: 0;
    padding: 0.1rem;
  }

  .app.is-reading .util-rail {
    top: max(0.28rem, env(safe-area-inset-top));
    padding: 0.15rem 0.45rem 0.2rem 0.55rem;
  }

  .app.is-reading .util-tab {
    min-height: 1.9rem;
    font-size: 0.62rem;
  }

  .app.is-reading .util-wash {
    height: min(3.4rem, 22vh);
  }

  .reader-controls {
    bottom: max(0.3rem, env(safe-area-inset-bottom));
  }

  .reader-ctrl {
    min-height: 2.45rem;
    padding: 0.35rem 0.7rem;
  }

  .reader-ctrl-long {
    display: none;
  }

  .reader-ctrl-short {
    display: inline;
  }

  .viewport.has-overlay .letterbox {
    left: 28%;
    right: 4%;
    width: auto;
    padding: 0 0.7rem max(3.7rem, calc(env(safe-area-inset-bottom) + 2.6rem)) 0.3rem;
  }
}

@media (max-width: 960px), (max-height: 540px) and (hover: none) {
  .util-tab.is-support,
  .util-tab[data-overlay="news"] {
    display: none;
  }

  .app.is-reading .now-playing-copy {
    display: none;
  }

  .app.is-reading .now-playing {
    top: max(0.4rem, env(safe-area-inset-top));
    left: auto;
    right: max(8.35rem, calc(env(safe-area-inset-right) + 7.6rem));
    z-index: 23;
  }

  .view-title .title-alpha {
    font-size: 0.34em;
    vertical-align: 0.55em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero,
  .embers span,
  .chapter-card,
  .chapter-card img,
  .chapter-card video,
  .layer,
  .letterbox,
  .line-advance,
  .orient-panel,
  .ambient,
  .view-title,
  .view-library,
  .util-rail,
  .util-wash,
  .now-playing,
  .site-dock,
  .hero-layer {
    animation: none !important;
    transition: none;
  }

  .hero {
    transform: none;
  }

  .veil,
  .chapter-grid,
  .menu-item {
    transition: none;
  }

  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

html.no-menu-anim .hero,
html.no-menu-anim .embers span,
html.no-menu-anim .chapter-card,
html.no-menu-anim .chapter-card img,
html.no-menu-anim .chapter-card video,
html.no-menu-anim .orient-panel,
html.no-menu-anim .entry-panel,
html.no-menu-anim .load-status-inner,
html.no-menu-anim .site-overlay-panel,
html.no-menu-anim .ambient,
html.no-menu-anim .view-title,
html.no-menu-anim .view-library,
html.no-menu-anim .util-rail,
html.no-menu-anim .util-wash,
html.no-menu-anim .now-playing,
html.no-menu-anim .site-dock,
html.no-menu-anim .hero-layer {
  animation: none !important;
  transition: none;
}

html.no-menu-anim .load-pulse {
  animation: none !important;
}

html.no-menu-anim .hero {
  transform: none;
}

html.no-menu-anim .embers {
  display: none;
}

html.no-menu-anim .view-library .browse-title,
html.no-menu-anim .view-library .lore-tabs,
html.no-menu-anim .view-library .lore-back,
html.no-menu-anim .view-library .lead-stage,
html.no-menu-anim .view-library .world-article,
html.no-menu-anim .view-library .chapter-grid,
html.no-menu-anim .view-library .extras-panel,
html.no-menu-anim .site-dock,
html.no-menu-anim .veil,
html.no-menu-anim .menu-item {
  transition: none;
}

html.no-story-anim .layer,
html.no-story-anim .sprite-stack,
html.no-story-anim .overlay-veil,
html.no-story-anim .line-advance {
  transition: none;
  animation: none !important;
}

html.no-story-anim .view-reader.is-wipe,
html.no-story-anim .view-reader.is-wipe-play {
  clip-path: none;
  transition: none;
}

html.no-story-anim .chapter-card-screen {
  transition: none;
}