/*
 * Mobile stability layer.
 * Decorative motion is paused only while it is far outside the viewport or
 * while the page is hidden. The visible typography and entrance choreography
 * remain unchanged.
 */
:root {
  --font-geist-sans: ui-sans-serif, system-ui, sans-serif;
  --font-geist-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    monospace;
  --font-noto-serif: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
}

.novel-page.performance-progress-ready::before {
  content: none !important;
}

.novel-runtime-progress {
  z-index: 90;
  pointer-events: none;
  background: var(--wine);
  width: 100%;
  height: 2px;
  transform: scaleX(0);
  transform-origin: 0 50%;
  position: fixed;
  top: 76px;
  left: 0;
  box-shadow: 0 0 16px var(--wine);
}

/*
 * Once a landing-page letter entrance is complete, keep every glyph in the
 * exact same box but release its animation work. This prevents layout height
 * changes while the visitor is already deep in the page.
 */
.js-split.is-settled .split-char {
  opacity: 1 !important;
  visibility: visible !important;
  -webkit-clip-path: inset(0) !important;
  clip-path: inset(0) !important;
  filter: none !important;
  animation: none !important;
  transition: none !important;
  transform: none !important;
  will-change: auto !important;
}

.performance-offscreen
  :where(
    [class*="aura"],
    [class*="glitch"],
    [class*="ghost"],
    [class*="ticker"],
    [class*="arrow"],
    [class*="clock"],
    [class*="orbit"],
    [class*="rain"],
    [class*="leaf"],
    [class*="river-art"],
    [class*="memory-box"],
    [class*="slashes"],
    [class*="piano"],
    [class*="wave"],
    [class*="floating-word"],
    [class*="page-turn"],
    [class*="art-book"]
  ),
.performance-offscreen
  :where(
    [class*="aura"],
    [class*="glitch"],
    [class*="ghost"],
    [class*="ticker"],
    [class*="arrow"],
    [class*="clock"],
    [class*="orbit"],
    [class*="rain"],
    [class*="leaf"],
    [class*="river-art"],
    [class*="memory-box"],
    [class*="slashes"],
    [class*="piano"],
    [class*="wave"],
    [class*="floating-word"],
    [class*="page-turn"],
    [class*="art-book"]
  )::before,
.performance-offscreen
  :where(
    [class*="aura"],
    [class*="glitch"],
    [class*="ghost"],
    [class*="ticker"],
    [class*="arrow"],
    [class*="clock"],
    [class*="orbit"],
    [class*="rain"],
    [class*="leaf"],
    [class*="river-art"],
    [class*="memory-box"],
    [class*="slashes"],
    [class*="piano"],
    [class*="wave"],
    [class*="floating-word"],
    [class*="page-turn"],
    [class*="art-book"]
  )::after,
html.is-page-hidden
  :where(
    [class*="aura"],
    [class*="glitch"],
    [class*="ghost"],
    [class*="ticker"],
    [class*="arrow"],
    [class*="clock"],
    [class*="orbit"],
    [class*="rain"],
    [class*="leaf"],
    [class*="river-art"],
    [class*="memory-box"],
    [class*="slashes"],
    [class*="piano"],
    [class*="wave"],
    [class*="floating-word"],
    [class*="page-turn"],
    [class*="art-book"]
  ) {
  animation-play-state: paused !important;
}

.music-overture p,
.music-overture strong {
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
}

.music-note-display.has-piano-word {
  visibility: visible !important;
  opacity: 1 !important;
}

.music-note-display.has-piano-word strong {
  visibility: visible !important;
  opacity: 1 !important;
  filter: none !important;
  animation: piano-word-response 0.62s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

@media (max-width: 900px), (pointer: coarse) {
  html,
  body {
    overscroll-behavior-y: none;
  }

  .split-char,
  .novel-char,
  .music-char,
  .music-motion-char {
    will-change: auto !important;
  }

  .music-scene-word,
  .novel-chapter-art,
  .closing-ghost,
  .statement-ghost,
  .music-page [data-reveal],
  .music-hero-piano > i {
    will-change: auto !important;
  }
}

.music-piano-guide {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
  color: var(--music-gold);
  font-size: clamp(13px, 1.15vw, 17px);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.7;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
}

.music-piano-guide::before {
  content: "TAP";
  flex: 0 0 auto;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 4px 9px;
  font-family: var(--font-geist-mono), monospace;
  font-size: 8px;
  letter-spacing: 0.18em;
  animation: piano-tap-cue 1.6s ease-in-out infinite;
}

.music-piano-volume {
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr) 46px;
  align-items: center;
  gap: 14px;
  margin: 0 0 25px;
  padding: 15px 18px;
  border: 1px solid color-mix(in srgb, var(--music-gold) 38%, transparent);
  background: color-mix(in srgb, var(--music-navy) 82%, transparent);
}

.music-piano-volume > span {
  font-family: var(--font-geist-mono), monospace;
  font-size: 9px;
  letter-spacing: 0.16em;
  white-space: nowrap;
}

.music-piano-volume input {
  width: 100%;
  min-height: 32px;
  accent-color: var(--music-gold);
  cursor: pointer;
  touch-action: manipulation;
}

.music-piano-volume output {
  color: var(--music-gold);
  font-family: var(--font-geist-mono), monospace;
  font-size: 10px;
  text-align: right;
}

.music-keys {
  border-radius: 2px;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--music-gold) 40%, transparent),
    0 24px 50px rgb(0 0 0 / 28%);
}

.music-key {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.music-key:first-child::after {
  content: "TAP";
  position: absolute;
  right: 0;
  bottom: 35px;
  left: 0;
  color: var(--music-purple);
  font-family: var(--font-geist-mono), monospace;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-align: center;
  animation: piano-key-cue 1.6s ease-in-out infinite;
}

.music-key.is-piano-pressed {
  z-index: 6;
  background: var(--music-purple);
  color: var(--music-gold);
  transform: rotateX(-5deg) translateY(7px);
}

@keyframes piano-tap-cue {
  0%,
  100% {
    opacity: 0.6;
    transform: scale(0.96);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes piano-key-cue {
  0%,
  100% {
    opacity: 0.46;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(4px);
  }
}

@keyframes piano-word-response {
  from {
    opacity: 0.12;
    transform: translateY(16px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 640px) {
  .music-overture {
    padding-right: 12px;
    padding-left: 12px;
  }

  .music-overture strong {
    font-size: clamp(19px, 6vw, 25px) !important;
    letter-spacing: -0.055em;
  }

  .music-piano-guide {
    align-items: center;
    gap: 7px;
    margin-bottom: 14px;
    font-size: clamp(10.5px, 3vw, 12px);
    letter-spacing: 0;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
  }

  .music-piano-guide::before {
    padding: 3px 6px;
    font-size: 7px;
    letter-spacing: 0.12em;
  }

  .music-piano-volume {
    grid-template-columns: 1fr 42px;
    gap: 7px 10px;
    margin-bottom: 18px;
    padding: 12px 13px;
  }

  .music-piano-volume > span {
    grid-column: 1 / -1;
  }

  .music-key:first-child::after {
    bottom: 18px;
    font-size: 7px;
  }

  /*
   * The finale needs an explicit single-column grid on phones. Without it,
   * CSS Grid creates implicit side-by-side tracks and squeezes the copy into
   * a narrow strip even though the page itself has no horizontal overflow.
   */
  .music-finale {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-flow: row !important;
    justify-items: stretch;
    width: 100%;
    padding: 140px 22px 58px !important;
  }

  .music-finale-copy,
  .music-finale-signature,
  .music-back-home {
    grid-column: 1 / -1 !important;
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0;
    max-width: 100% !important;
    justify-self: stretch;
  }

  .music-finale-copy > p,
  .music-finale-signature > p {
    width: 100%;
    max-width: 100%;
    overflow-wrap: normal;
    word-break: normal;
  }

  .music-finale-beats {
    align-items: center;
    width: 100%;
  }

  .music-finale-beats > span {
    width: 100%;
    white-space: nowrap;
  }

  .music-finale-signature {
    margin-top: 82px;
  }

  .music-finale-signature strong {
    font-size: clamp(86px, 31vw, 110px);
  }

  .music-back-home {
    justify-content: center;
    margin-top: 76px;
  }
}

/*
 * Keep the complete novel hero closing line inside narrow phone screens.
 * This changes only responsive sizing; the original letter animation remains.
 */
@media (max-width: 480px) {
  .novel-hero h1 > .novel-hero-final-line {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    padding-right: 2px;
    overflow: visible;
  }

  .novel-hero-final-line > .novel-split {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: flex-start;
  }

  .novel-hero-final-line .novel-char:nth-child(-n + 8) {
    font-size: 0.34em !important;
    letter-spacing: -0.085em !important;
  }

  .novel-hero-final-line .novel-char:nth-child(n + 9) {
    font-size: 0.56em !important;
    letter-spacing: -0.12em !important;
  }
}

@media (max-width: 350px) {
  .novel-hero-final-line .novel-char:nth-child(-n + 8) {
    font-size: 0.32em !important;
  }

  .novel-hero-final-line .novel-char:nth-child(n + 9) {
    font-size: 0.53em !important;
  }
}

/*
 * Mobile clarity and meaningful illustration pass.
 * These rules deliberately leave the original hero and split-text timings
 * untouched. They improve final-state legibility and the illustrations that
 * explain each passage.
 */

/* The old two-column diagram in the freedom definition now reads as a
   broken cage on the left and a bird choosing the open sky on the right. */
.freedom-definition .freedom-split-screen {
  isolation: isolate;
  display: grid !important;
  grid-template-columns: minmax(92px, 31%) minmax(0, 1fr) !important;
  min-height: 330px !important;
  max-height: none !important;
  opacity: 1 !important;
  overflow: hidden;
  border: 1px solid rgb(242 241 238 / 28%);
  background:
    radial-gradient(circle at 79% 23%, rgb(242 241 238 / 18%) 0 5%, transparent 24%),
    linear-gradient(150deg, #070707 0 31%, #13090b 31% 48%, #1a2028 100%) !important;
  box-shadow: inset 0 0 80px rgb(0 0 0 / 48%), 0 26px 70px rgb(0 0 0 / 30%);
}

.freedom-definition .freedom-split-screen::before {
  content: "";
  position: absolute;
  z-index: 2;
  right: 10%;
  bottom: 25%;
  width: 132px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(209 8 28 / 86%), transparent);
  transform: rotate(-24deg);
  transform-origin: right center;
}

.freedom-definition .freedom-split-screen::after {
  content: "";
  position: absolute;
  z-index: 4;
  top: 37%;
  left: 65%;
  width: 28px;
  height: 12px;
  border-top: 3px solid rgb(242 241 238 / 82%);
  border-radius: 50%;
  filter: drop-shadow(0 0 9px rgb(242 241 238 / 24%));
  transform: rotate(-11deg);
}

.freedom-definition .freedom-split-screen > div {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-width: 0;
  overflow: visible !important;
}

.freedom-definition .freedom-split-screen > div:first-child {
  border-right: 1px solid rgb(209 8 28 / 46%);
  background:
    repeating-linear-gradient(90deg, transparent 0 13px, rgb(242 241 238 / 44%) 13px 15px),
    linear-gradient(180deg, rgb(0 0 0 / 6%), rgb(0 0 0 / 72%)) !important;
  box-shadow: 20px 0 54px rgb(209 8 28 / 10%);
}

.freedom-definition .freedom-split-screen > div:first-child::after {
  content: "";
  position: absolute;
  z-index: 3;
  right: -2px;
  bottom: 18%;
  width: 44px;
  height: 148px;
  border: 2px solid rgb(242 241 238 / 72%);
  border-left-color: rgb(209 8 28 / 82%);
  background: repeating-linear-gradient(90deg, transparent 0 12px, rgb(242 241 238 / 45%) 12px 14px);
  box-shadow: 10px 10px 28px rgb(0 0 0 / 36%);
  transform: perspective(180px) rotateY(-48deg);
  transform-origin: right center;
}

.freedom-definition .freedom-split-screen > div:nth-child(2) {
  background:
    linear-gradient(162deg, transparent 0 64%, rgb(209 8 28 / 13%) 64% 65%, transparent 65%),
    radial-gradient(circle at 80% 18%, rgb(242 241 238 / 19%), transparent 23%) !important;
}

.freedom-definition .freedom-split-screen > div > span {
  position: absolute !important;
  z-index: 5;
  top: 20px !important;
  right: auto !important;
  bottom: auto !important;
  left: 18px !important;
  width: auto !important;
  color: transparent !important;
  font-size: 0 !important;
  writing-mode: horizontal-tb !important;
  transform: none !important;
}

.freedom-definition .freedom-split-screen > div > span::after {
  color: rgb(242 241 238 / 78%);
  font-family: var(--font-geist-mono), monospace;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.13em;
  line-height: 1.7;
  white-space: pre-line;
}

.freedom-definition .freedom-split-screen > div:first-child > span::after {
  content: "CAGE\A選ばされた人生";
}

.freedom-definition .freedom-split-screen > div:nth-child(2) > span::after {
  content: "OPEN SKY\A自分で選ぶ人生";
  color: rgb(242 241 238 / 92%);
}

/* Main bird. The body and two curved wings are built from the existing <i>. */
.freedom-definition .freedom-split-screen > div:nth-child(2) > i {
  position: absolute !important;
  z-index: 6;
  top: 62% !important;
  left: 19% !important;
  width: 26px !important;
  height: 9px !important;
  border: 0 !important;
  border-radius: 70% 70% 45% 45% !important;
  background: #f2f1ee !important;
  opacity: 1 !important;
  box-shadow: 0 0 18px rgb(242 241 238 / 32%);
  transform: rotate(-10deg);
  transform-origin: center;
}

.freedom-definition .freedom-split-screen > div:nth-child(2) > i::before,
.freedom-definition .freedom-split-screen > div:nth-child(2) > i::after {
  content: "";
  position: absolute;
  top: -5px;
  width: 46px;
  height: 24px;
  border-top: 5px solid #f2f1ee;
  border-radius: 60% 60% 0 0;
  transform-origin: bottom center;
}

.freedom-definition .freedom-split-screen > div:nth-child(2) > i::before {
  right: 12px;
  transform: rotate(-15deg);
}

.freedom-definition .freedom-split-screen > div:nth-child(2) > i::after {
  left: 12px;
  transform: rotate(15deg);
}

.freedom-definition.is-visible .freedom-split-screen > div:nth-child(2) > i {
  animation: freedom-bird-flight 4.8s cubic-bezier(.42, 0, .28, 1) infinite;
}

.freedom-definition.is-visible .freedom-split-screen > div:nth-child(2) > i::before {
  animation: freedom-left-wing 820ms ease-in-out infinite;
}

.freedom-definition.is-visible .freedom-split-screen > div:nth-child(2) > i::after {
  animation: freedom-right-wing 820ms ease-in-out infinite;
}

@keyframes freedom-bird-flight {
  0% { transform: translate(-20px, 30px) rotate(-13deg) scale(.78); }
  46% { transform: translate(72px, -35px) rotate(-8deg) scale(.94); }
  100% { transform: translate(166px, -88px) rotate(-4deg) scale(1.06); }
}

@keyframes freedom-left-wing {
  0%, 100% { transform: rotate(-15deg) scaleY(.82); }
  50% { transform: rotate(20deg) scaleY(1.18); }
}

@keyframes freedom-right-wing {
  0%, 100% { transform: rotate(15deg) scaleY(.82); }
  50% { transform: rotate(-20deg) scaleY(1.18); }
}

/* A selector in the original sheet makes every nested span 8px. Restore the
   profile sentences to their intended strong size. */
.profile-disciplines > article > span {
  color: rgb(255 255 255 / 72%);
  font-size: 10px;
}

.profile-disciplines strong,
.profile-disciplines strong .js-split,
.profile-disciplines strong .split-char,
.profile-disciplines strong .jp-no-orphan {
  color: #fff !important;
  font: inherit !important;
  font-size: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
}

@media (max-width: 640px) {
  html,
  body,
  main {
    max-width: 100%;
    overflow-x: clip;
  }

  /* Letter spacing on each individually animated final character can add a
     few invisible pixels past the content box. Compact only the protected
     ending so punctuation never gets clipped at the phone edge. */
  .jp-no-orphan {
    letter-spacing: 0 !important;
  }

  /* Main page — readable body copy without altering headline animation. */
  main.is-ready .manifesto-copy p,
  main.is-ready .heading-note,
  main.is-ready .discipline-body,
  main.is-ready .music-portal-body,
  main.is-ready .school-cover-lead,
  main.is-ready .school-result,
  main.is-ready .school-copy,
  main.is-ready .keizoku-small,
  main.is-ready .keizoku-definition,
  main.is-ready .batta-copy,
  main.is-ready .honki-copy,
  main.is-ready .life-copy,
  main.is-ready .release-memory,
  main.is-ready .profile-intro p,
  main.is-ready .closing-last-word {
    color: rgb(255 255 255 / 84%) !important;
    font-size: clamp(14.5px, 3.9vw, 16px) !important;
    line-height: 1.95 !important;
  }

  main.is-ready .eyebrow,
  main.is-ready .section-index,
  main.is-ready .music-portal-index,
  main.is-ready .novel-portal-index,
  main.is-ready .freedom-index,
  main.is-ready .lc-index,
  main.is-ready .lc-scene-index,
  main.is-ready .profile-kicker,
  main.is-ready .profile-roles {
    opacity: 1 !important;
    font-size: clamp(9.5px, 2.7vw, 11px) !important;
  }

  main.is-ready .hero-role {
    color: rgb(255 255 255 / 72%);
    font-size: clamp(8.5px, 2.35vw, 10px) !important;
  }

  main.is-ready .school-cover-meta,
  main.is-ready .keizoku-cover-meta,
  main.is-ready .batta-cover-meta,
  main.is-ready .life-cover-meta {
    color: rgb(255 255 255 / 62%);
    font-size: 9px !important;
  }

  main.is-ready .school-truth-label,
  main.is-ready .batta-label {
    font-size: 10px !important;
  }

  /* Keep the previously reported wide headlines inside the phone canvas. */
  main.is-ready .batta h2,
  main.is-ready .batta-brand-final,
  main.is-ready .batta-bamboo-verdict,
  main.is-ready .honki h3,
  main.is-ready .honki-why,
  main.is-ready .honki-action-line,
  main.is-ready .life h2,
  main.is-ready .life blockquote,
  main.is-ready .life-today-verdict {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    padding-right: 3px;
    letter-spacing: -0.065em !important;
    overflow: visible !important;
  }

  main.is-ready .honki-signs p {
    font-size: clamp(18px, 5.1vw, 20px) !important;
  }

  main.is-ready .life-cover-copy h2 {
    font-size: clamp(44px, 12.8vw, 50px) !important;
  }

  main.is-ready .life-cover-copy {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
  }

  main.is-ready .life-cover {
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: stretch;
  }

  main.is-ready .life-someday-list p {
    font-size: clamp(30px, 8.7vw, 34px) !important;
  }

  main.is-ready .life-today-verdict {
    font-size: clamp(34px, 10vw, 39px) !important;
  }

  main.is-ready .money-three h3 {
    font-size: clamp(27px, 7.4vw, 29px) !important;
  }

  main.is-ready .closing-signature {
    font-size: clamp(17px, 4.6vw, 18px) !important;
    letter-spacing: .04em !important;
  }

  main.is-ready footer p {
    font-size: 9px;
  }

  /* Make the three disciplines a deliberate, mysterious sequence. */
  main.is-ready .profile-copy {
    width: 100%;
    min-width: 0;
  }

  main.is-ready .profile-disciplines {
    gap: 12px;
    border-top: 0;
  }

  main.is-ready .profile-disciplines article {
    min-height: 132px;
    padding: 25px 22px 24px !important;
    border: 1px solid rgb(255 255 255 / 15%);
    background:
      linear-gradient(105deg, rgb(209 8 28 / 15%), transparent 48%),
      rgb(255 255 255 / 2%);
    box-shadow: inset 3px 0 0 rgb(209 8 28 / 82%);
    overflow: hidden;
  }

  main.is-ready .profile-disciplines article::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -44%;
    width: 38%;
    background: linear-gradient(90deg, transparent, rgb(255 255 255 / 10%), transparent);
    transform: skewX(-18deg);
  }

  main.is-ready .profile-disciplines article::after {
    content: "—";
    right: 18px;
    color: rgb(209 8 28 / 90%);
    font-size: 22px;
  }

  main.is-ready .profile-disciplines strong {
    max-width: 92%;
    font-size: clamp(20px, 5.6vw, 24px) !important;
    line-height: 1.7 !important;
  }

  main.is-ready .profile-disciplines article:has(.js-split.is-visible)::before {
    animation: profile-light-pass 2.2s cubic-bezier(.16, 1, .3, 1) both;
  }

  /* Existing illustrations are already tied to the copy (cage, road, clock,
     book, piano, memory). Increase final contrast only when their scene has
     actually been revealed. */
  main.is-ready .is-visible :is(
    .novel-portal-book,
    .life-clock,
    .freedom-cage-art,
    .freedom-clock-art,
    .freedom-road-art,
    .freedom-scale-art,
    .freedom-orbit-art,
    .freedom-chain-art,
    .freedom-door-art,
    .lc-notebook,
    .lc-art,
    .money-clock,
    .dekinai-cage,
    .mottainai-two-roads
  ) {
    opacity: .76 !important;
    filter: none !important;
  }

  /* Music page — gold copy and the piano/staff must remain clearly visible. */
  .music-page .music-hero-prelude,
  .music-page .music-piano-guide,
  .music-page .music-instrument-caption,
  .music-page .music-memory-text p,
  .music-page .music-finale-copy p,
  .music-page .music-finale-signature p {
    color: rgb(232 217 181 / 90%) !important;
    font-size: clamp(13px, 3.7vw, 15px) !important;
    line-height: 1.9 !important;
  }

  .music-page .music-section-number {
    color: rgb(232 217 181 / 82%) !important;
    opacity: 1 !important;
    font-size: 11px !important;
  }

  .music-page .music-piano-guide {
    gap: 5px;
    font-size: clamp(10.8px, 3.1vw, 12px) !important;
  }

  .music-page .music-portrait,
  .music-page .music-portrait-wash,
  .music-page .music-hero-piano,
  .music-page .music-staff-lines,
  .music-page .music-memory-orbit {
    opacity: .82 !important;
    filter: none !important;
  }

  .music-page .music-hero.is-visible .music-hero-piano {
    animation: meaningful-piano-breathe 3.8s ease-in-out infinite !important;
  }

  .music-page .music-memory.is-visible .music-memory-orbit {
    animation: meaningful-memory-orbit 13s linear infinite !important;
  }

  .music-page .music-visualizer.is-playing i {
    opacity: .95 !important;
    animation-play-state: running !important;
  }

  .music-page .music-text-split.is-settled .music-motion-char,
  .music-page .music-split.is-settled .music-motion-char {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }

  /* Novel page — keep the sentence and its book/turning pages equally clear. */
  .novel-page .novel-hero-final-line {
    color: #ed4658 !important;
    text-shadow: 0 0 20px rgb(225 33 51 / 28%);
  }

  .novel-page .novel-hero h1 {
    max-width: 100%;
    font-size: clamp(39px, 10.9vw, 43px) !important;
    letter-spacing: -0.07em !important;
  }

  .novel-page .novel-hero-final-line .novel-char {
    color: #ed4658 !important;
  }

  .novel-page .novel-chapter p {
    color: rgb(244 240 229 / 90%);
  }

  .novel-page .novel-prologue p,
  .novel-page .novel-prologue p .novel-char,
  .novel-page .novel-finale p,
  .novel-page .novel-finale p .novel-char {
    color: #19342f !important;
    text-shadow: none !important;
  }

  .novel-page .novel-chapter-art,
  .novel-page .novel-art-book,
  .novel-page .novel-rising-words,
  .novel-page .novel-closing-book {
    opacity: .86 !important;
    filter: none !important;
  }

  .novel-page .novel-chapter.is-visible .novel-art-book {
    animation: meaningful-book-breathe 4.6s ease-in-out infinite !important;
  }

  .novel-page .novel-chapter.is-visible .novel-page-turns u {
    animation-play-state: running !important;
  }

  .novel-page .novel-split.is-settled .novel-char {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }

  .novel-page .novel-scroll {
    right: 18px !important;
    box-sizing: border-box;
    width: 200px !important;
    max-width: calc(100vw - 36px);
    padding-right: 12px;
    font-size: 10px !important;
    letter-spacing: .12em !important;
    white-space: nowrap;
    overflow: visible !important;
  }
}

@keyframes profile-light-pass {
  from { left: -44%; opacity: 0; }
  24% { opacity: 1; }
  to { left: 116%; opacity: 0; }
}

@keyframes meaningful-piano-breathe {
  0%, 100% { transform: translateY(0); filter: drop-shadow(0 0 0 transparent); }
  50% { transform: translateY(-7px); filter: drop-shadow(0 12px 22px rgb(111 54 151 / 26%)); }
}

@keyframes meaningful-memory-orbit {
  to { transform: rotate(360deg); }
}

@keyframes meaningful-book-breathe {
  0%, 100% { transform: translateY(0) rotateX(0); }
  50% { transform: translateY(-8px) rotateX(2deg); }
}

@media (prefers-reduced-motion: reduce) {
  .freedom-definition.is-visible .freedom-split-screen > div:nth-child(2) > i,
  .freedom-definition.is-visible .freedom-split-screen > div:nth-child(2) > i::before,
  .freedom-definition.is-visible .freedom-split-screen > div:nth-child(2) > i::after,
  .music-page .music-hero.is-visible .music-hero-piano,
  .music-page .music-memory.is-visible .music-memory-orbit,
  .novel-page .novel-chapter.is-visible .novel-art-book {
    animation: none !important;
  }
}

/* The typography guard wraps the final characters in a span. Do not let the
   old decorative-arrow rule turn that text red and place it on top. */
.closing-link,
.closing-link:hover,
.closing-link:focus-visible,
.closing-link .jp-no-orphan {
  color: #fff !important;
}

.closing-link .jp-no-orphan {
  position: static !important;
  inset: auto !important;
  font: inherit !important;
  font-size: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
  transform: none !important;
  transition: none !important;
}

@media (max-width: 640px) {
  main.is-ready .closing-link {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 286px);
    max-width: calc(100vw - 40px);
    min-height: 52px;
    padding: 14px 22px !important;
    border: 1px solid rgb(255 255 255 / 42%);
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: .1em;
    text-align: center;
    white-space: nowrap;
  }

  main.is-ready .closing-link .jp-no-orphan {
    color: #fff !important;
    font-size: inherit !important;
  }
}

/* On compact phones, keep complete Japanese phrases together instead of
   leaving punctuation or a single character on a separate line. */
@media (max-width: 360px) {
  .music-page .music-for-hidden-feeling {
    max-width: 100%;
    font-size: 30px !important;
    line-height: 1.65 !important;
    word-break: keep-all;
    overflow-wrap: normal;
    overflow: visible !important;
  }

  .music-page .music-for-closing-copy {
    max-width: 100%;
    font-size: 15px !important;
    line-height: 2.1 !important;
    word-break: keep-all;
    overflow-wrap: normal;
    overflow: visible !important;
  }

  .music-page .music-prose-single {
    font-size: 16px !important;
    line-height: 2 !important;
  }

  .music-page .music-wide-copy {
    font-size: 21px !important;
    line-height: 2.05 !important;
  }

  .music-page .music-confession p {
    font-size: 14px !important;
    letter-spacing: 0 !important;
  }

  .music-page .music-confession strong {
    margin: 28px 0;
    font-size: 29px !important;
  }

  .music-page .music-piano-copy > p[data-reveal] {
    font-size: 15px !important;
    line-height: 2 !important;
  }

  .music-page .music-melody-manifesto p {
    font-size: 14px !important;
    line-height: 2 !important;
  }

  .music-page .music-ten-years,
  .music-page .music-ten-years p {
    font-size: 14px !important;
    line-height: 2 !important;
  }

  .music-page .music-answer-copy p {
    font-size: 14px !important;
    line-height: 2 !important;
  }

  .music-page .music-reason-close {
    font-size: 17px !important;
    line-height: 2 !important;
  }

  .music-page .music-entrust-promise {
    font-size: 28px !important;
    line-height: 1.85 !important;
  }

  .music-page .music-text-split,
  .music-page [data-reveal] {
    max-width: 100%;
    overflow: visible !important;
    line-break: strict;
    overflow-wrap: normal;
    word-break: normal;
  }
}