:root {
  color-scheme: dark;
  --ink: #10070c;
  --wine: #6d0b22;
  --red: #a61131;
  --red-dark: #3b0713;
  --gold: #f0c66b;
  --paper: #f4e7ca;
  --blue: #18b7d6;
}

* { box-sizing: border-box; }

html {
  min-width: 1920px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

html::-webkit-scrollbar {
  width: 0;
  height: 0;
}

body {
  margin: 0;
  width: 1920px;
  min-width: 1920px;
  color: var(--paper);
  background:
    radial-gradient(circle at 50% -10%, #492139 0, transparent 38rem),
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 5px),
    #09080b;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
}

button, a { font: inherit; }
button { color: inherit; }

.page-shell {
  width: min(1420px, 100%);
  margin: 0 auto;
  padding: 14px 14px 54px;
}

.page-title {
  margin: 0 0 14px;
  text-align: center;
}

.page-title img,
.section-title img {
  display: block;
  width: auto;
  height: auto;
  margin: 0 auto;
}

.page-title img {
  max-width: 585px;
}

.section-title {
  margin: 42px 0 14px;
  text-align: center;
}

.section-title--playlist img {
  max-width: 494px;
}

.theatre {
  position: relative;
  overflow: hidden;
  height: 820px;
  min-height: 0;
  border: 10px solid #211619;
  outline: 1px solid rgba(240,198,107,.5);
  background: #08080b;
  box-shadow: 0 28px 80px #000, inset 0 0 0 2px #6b4a22;
  isolation: isolate;
}

.proscenium {
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
  height: 46px;
  border-bottom: 4px double #b8863d;
  background: linear-gradient(#281820, #0f090c);
  transition: transform 1.35s .38s cubic-bezier(.45,0,.3,1), opacity .8s .65s;
}

.theatre.is-open .proscenium {
  opacity: 0;
  transform: translateY(-115%);
}

.proscenium__ornament {
  width: 72px;
  margin: 7px auto 0;
  color: var(--gold);
  text-align: center;
  font-size: 1.4rem;
  background: #160d11;
  border: 1px solid #8b642e;
}

.stage {
  position: absolute;
  inset: 46px 0 132px;
  overflow: hidden;
  background: #170c08;
  transition:
    top 1.8s .25s cubic-bezier(.3,.05,.16,1),
    right 1.8s .25s cubic-bezier(.3,.05,.16,1),
    bottom 1.8s .25s cubic-bezier(.3,.05,.16,1),
    left 1.8s .25s cubic-bezier(.3,.05,.16,1);
}

.stage-scenery {
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(20,9,5,.86), transparent 18%, transparent 82%, rgba(20,9,5,.86)),
    radial-gradient(ellipse at 22% 28%, transparent 0 10%, rgba(20,8,3,.28) 10.5% 11.3%, transparent 12% 24%) 0 0 / 270px 94px,
    radial-gradient(ellipse at 72% 63%, transparent 0 12%, rgba(20,8,3,.24) 12.5% 13.4%, transparent 14% 26%) 40px 18px / 310px 112px,
    repeating-linear-gradient(0deg, rgba(255,215,152,.025) 0 1px, transparent 1px 7px),
    linear-gradient(#4f2c1b 0 68%, #2c180f 68% 70%, #170c08 70%);
}

.theatre.is-open .stage {
  top: -18px;
  right: -3.5%;
  bottom: -22px;
  left: -3.5%;
}

.stage-scenery::after {
  content: "";
  position: absolute;
  inset: auto -10% 0;
  z-index: 1;
  height: 32%;
  background:
    repeating-linear-gradient(90deg, transparent 0 9.4%, rgba(9,4,2,.6) 9.4% 10%),
    repeating-linear-gradient(3deg, rgba(255,208,134,.045) 0 2px, transparent 2px 8px),
    linear-gradient(90deg, #2b160d, #684027 18%, #3a2014 36%, #72472b 54%, #321a10 72%, #5b351f);
  transform: perspective(420px) rotateX(62deg);
  transform-origin: bottom;
}

.stage-camera {
  position: absolute;
  z-index: 2;
  inset: 0;
  transform: scale(1);
  transform-origin: 50% 42%;
  transition: transform 1.8s .25s cubic-bezier(.3,.05,.16,1);
}

.theatre.is-open .stage-camera {
  transform: scale(1.12) translateY(-2%);
}

.focus-camera {
  position: absolute;
  inset: 0;
  transform: scale(1);
  transform-origin: var(--focus-x, 50%) var(--focus-y, 58%);
  transition: transform .95s cubic-bezier(.2,.72,.18,1), transform-origin .75s cubic-bezier(.2,.72,.18,1);
}

.theatre.is-profile .focus-camera { transform: scale(1.24); }

.character-backdrop {
  position: absolute;
  z-index: 1;
  inset: -2%;
  opacity: 0;
  background-image:
    linear-gradient(rgba(8,7,9,.2), rgba(8,7,9,.48)),
    var(--character-bg);
  background-position: center;
  background-size: cover;
  clip-path: circle(0 at 50% 50%);
  filter: grayscale(1) contrast(1.08) brightness(.72);
  transform: scale(1.02);
}

.character-backdrop.is-revealing {
  animation: backdrop-reveal 1.05s .08s cubic-bezier(.2,.72,.18,1) both;
}

@keyframes backdrop-reveal {
  0% { opacity: 0; clip-path: circle(0 at 50% 50%); }
  12% { opacity: 1; }
  100% { opacity: 1; clip-path: circle(76% at 50% 50%); }
}

.stage-light {
  position: absolute;
  z-index: 2;
  inset: -20% 13% 4%;
  opacity: 0;
  background: radial-gradient(ellipse at 50% 76%, rgba(246,227,171,.45), rgba(240,198,107,.1) 38%, transparent 68%);
  clip-path: polygon(38% 0, 62% 0, 92% 100%, 8% 100%);
  transition: opacity 1.2s .55s ease;
}

.theatre.is-open .stage-light { opacity: 1; }

.stage-dust {
  position: absolute;
  z-index: 7;
  top: 3%;
  left: 4%;
  width: 92%;
  height: 47%;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.4s 1.35s ease;
}

.theatre.is-open .stage-dust { opacity: 1; }
.theatre.is-profile .stage-dust { opacity: .16; transition-delay: 0s; }

.stage-dust i {
  position: absolute;
  left: var(--dust-x);
  top: var(--dust-y);
  width: var(--dust-size);
  height: var(--dust-size);
  border-radius: 50%;
  background: rgba(255,244,191,.92);
  box-shadow:
    0 0 5px rgba(255,238,158,.9),
    0 0 13px rgba(246,206,112,.55);
  opacity: 0;
  animation: stage-dust-float var(--dust-speed) var(--dust-delay) ease-in-out infinite;
}

.stage-dust i:nth-child(1)  { --dust-x: 4%;  --dust-y: 56%; --dust-size: 3px; --dust-speed: 6.8s; --dust-delay: -1.2s; }
.stage-dust i:nth-child(2)  { --dust-x: 17%; --dust-y: 24%; --dust-size: 2px; --dust-speed: 8.2s; --dust-delay: -5.1s; }
.stage-dust i:nth-child(3)  { --dust-x: 30%; --dust-y: 69%; --dust-size: 4px; --dust-speed: 7.4s; --dust-delay: -3.8s; }
.stage-dust i:nth-child(4)  { --dust-x: 43%; --dust-y: 38%; --dust-size: 2px; --dust-speed: 9.1s; --dust-delay: -6.4s; }
.stage-dust i:nth-child(5)  { --dust-x: 57%; --dust-y: 16%; --dust-size: 3px; --dust-speed: 7.8s; --dust-delay: -2.6s; }
.stage-dust i:nth-child(6)  { --dust-x: 70%; --dust-y: 63%; --dust-size: 2px; --dust-speed: 6.4s; --dust-delay: -4.9s; }
.stage-dust i:nth-child(7)  { --dust-x: 83%; --dust-y: 32%; --dust-size: 4px; --dust-speed: 8.7s; --dust-delay: -7.1s; }
.stage-dust i:nth-child(8)  { --dust-x: 96%; --dust-y: 76%; --dust-size: 3px; --dust-speed: 7.1s; --dust-delay: -3.1s; }
@keyframes stage-dust-float {
  0%   { opacity: 0; transform: translate3d(-9px, 18px, 0) scale(.7); }
  18%  { opacity: .28; }
  42%  { opacity: .92; transform: translate3d(8px, -4px, 0) scale(1.25); }
  58%  { opacity: .34; }
  78%  { opacity: .8; }
  100% { opacity: 0; transform: translate3d(-3px, -31px, 0) scale(.6); }
}

.curtain {
  position: absolute;
  z-index: 12;
  top: 0;
  bottom: 0;
  width: 54%;
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent 16%),
    repeating-linear-gradient(90deg, #430714 0 8%, #8e1230 8% 16%, #2d050d 16% 23%);
  transition: transform 1.25s cubic-bezier(.76,0,.24,1);
  box-shadow: 0 0 35px #000;
}

.curtain--left { left: 0; border-right: 5px solid #29040b; }
.curtain--right { right: 0; border-left: 5px solid #29040b; transform: scaleX(-1); }
.theatre.is-open .curtain--left { transform: translateX(-104%); }
.theatre.is-open .curtain--right { transform: translateX(104%) scaleX(-1); }

.curtain-valance {
  position: absolute;
  z-index: 15;
  inset: 0 -2% auto;
  height: 80px;
  background: repeating-radial-gradient(ellipse at 50% -30%, #9b1735 0 24px, #490916 26px 46px);
  border-bottom: 6px solid #2a050c;
  filter: drop-shadow(0 8px 12px #000);
  transition: transform .7s .6s ease;
}

.theatre.is-open .curtain-valance { transform: translateY(-110%); }

.opening-panel {
  position: absolute;
  z-index: 18;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  background: radial-gradient(circle, transparent, rgba(0,0,0,.18));
  transition: opacity .4s, visibility .4s;
}

.theatre.is-open .opening-panel { opacity: 0; visibility: hidden; }

.open-button {
  width: 300px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  transform: translateY(0) scale(1);
  transition: transform .15s ease, filter .22s ease;
}

.open-button:hover,
.open-button:focus-visible {
  filter: brightness(1.08) drop-shadow(0 0 9px rgba(255,235,155,.7));
  transform: translateY(-3px) scale(1.035);
}

.open-button:active {
  filter: brightness(.9) drop-shadow(0 2px 2px rgba(0,0,0,.8));
  transform: translateY(8px) scale(.965);
  transition-duration: .045s;
}

.open-button:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid #26d4f3; outline-offset: 4px; }
.open-button img {
  display: block;
  width: 100%;
  height: auto;
  transition: filter .22s ease;
}

.cast {
  position: absolute;
  z-index: 5;
  inset: 24px 10% 7%;
  display: flex;
  justify-content: center;
  align-items: end;
  gap: clamp(20px, 9vw, 130px);
}

.cast-member {
  position: relative;
  height: 88%;
  width: min(34%, 290px);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  transition: opacity .65s, transform 1.8s cubic-bezier(.16,.76,.22,1), filter .2s;
}

.cast-member--left { transform: translateX(-70vw); }
.cast-member--right { transform: translateX(70vw); }
.theatre.is-open .cast-member { opacity: 1; transform: translateX(0); }
.theatre.is-open .cast-member--right { transition-delay: 2.15s; }

.theatre.is-open .cast-member--tenmen {
  animation: tenmen-enter 2.35s cubic-bezier(.18,.72,.2,1) 2s both;
}

@keyframes tenmen-enter {
  0% { opacity: 0; transform: translate(-70vw, 18px); }
  14% { opacity: 1; transform: translate(-53vw, 0); }
  38% { transform: translate(-25vw, -140px); }
  56% { transform: translate(-15vw, 0); }
  70% { transform: translate(-9vw, -34px); }
  82% { transform: translate(-5vw, 0); }
  92% { transform: translate(-2vw, -13px); }
  100% { opacity: 1; transform: translate(0, 0); }
}

.cast-member img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: brightness(0) drop-shadow(0 8px 1px rgba(0,0,0,.8));
  transition: filter .25s, transform .25s;
}

.figure-motion {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 50% 100%;
}

.figure-motion img {
  display: block;
}

.theatre.is-open .cast-member--right .figure-motion {
  animation: yamamoto-idle 3.8s ease-in-out 4.15s infinite;
}

.theatre.is-open .cast-member--tenmen .figure-motion {
  animation: tenmen-idle 3.1s ease-in-out 4.4s infinite;
}

@keyframes yamamoto-idle {
  0%, 100% { transform: translateY(0) scaleY(1); }
  50% { transform: translateY(-7px) scaleY(1.008); }
}

@keyframes tenmen-idle {
  0%, 100% { transform: translateY(0) scaleY(1); }
  50% { transform: translateY(-8px) scaleY(1.006); }
}

.theatre .cast-member .figure-motion.motion-tenmen-hop {
  animation: character-hop 1s cubic-bezier(.28,.7,.32,1) infinite both !important;
  animation-play-state: running !important;
}

.theatre .cast-member .figure-motion.motion-tenmen-hop-fast {
  animation: character-hop .5s cubic-bezier(.28,.7,.32,1) infinite both !important;
  animation-play-state: running !important;
}

.theatre .cast-member .figure-motion.motion-tenmen-spin {
  transform-origin: 50% 63%;
  animation: character-spin 2.5s ease-in-out infinite both !important;
  animation-play-state: running !important;
}

.theatre .cast-member .figure-motion.motion-tenmen-spin-fast {
  transform-origin: 50% 63%;
  animation: character-spin 1.25s ease-in-out infinite both !important;
  animation-play-state: running !important;
}

.theatre .cast-member .figure-motion.motion-tenmen-step {
  animation: character-step 1.25s ease-in-out infinite both !important;
  animation-play-state: running !important;
}

.theatre .cast-member .figure-motion.motion-tenmen-step-fast {
  animation: character-step .625s ease-in-out infinite both !important;
  animation-play-state: running !important;
}

.theatre .cast-member .figure-motion.motion-tenmen-flip {
  transform-origin: 50% 50%;
  animation: character-flip 2.5s ease-in-out infinite both !important;
  animation-play-state: running !important;
}

.theatre .cast-member .figure-motion.motion-tenmen-flip-fast {
  transform-origin: 50% 50%;
  animation: character-flip 1.25s ease-in-out infinite both !important;
  animation-play-state: running !important;
}

.theatre .cast-member .figure-motion.motion-yamamoto-stretch {
  animation: character-stretch 2.5s ease-in-out infinite both !important;
  animation-play-state: running !important;
}

.theatre .cast-member .figure-motion.motion-yamamoto-breathe {
  animation: character-breathe 2.5s ease-in-out infinite both !important;
  animation-play-state: running !important;
}

@keyframes character-hop {
  0%, 100% { transform: translateY(0); }
  18% { transform: translateY(-16px); }
  34% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
  64% { transform: translateY(0); }
  76% { transform: translateY(-3px); }
  86% { transform: translateY(0); }
}

@keyframes character-spin {
  0% { transform: rotate(0deg); }
  68%, 100% { transform: rotate(360deg); }
}

@keyframes character-step {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-10px); }
  40% { transform: translateX(0); }
  60% { transform: translateX(10px); }
  80% { transform: translateX(0); }
  90% { transform: translateX(-4px); }
}

@keyframes character-flip {
  0% { transform: perspective(600px) rotateY(0deg); }
  65%, 100% { transform: perspective(600px) rotateY(360deg); }
}

@keyframes character-stretch {
  0%, 100% { transform: scale(1); }
  22% { transform: scaleY(1.09) scaleX(.95); }
  43% { transform: scaleY(.96) scaleX(1.03); }
  64% { transform: scaleY(1.045) scaleX(.98); }
  82% { transform: scaleY(.99) scaleX(1.01); }
}

@keyframes character-breathe {
  0%, 100% { transform: scale(1); }
  42% { transform: scaleY(1.025) scaleX(.99); }
  76% { transform: scaleY(.992) scaleX(1.006); }
}

.cast-member:hover img, .cast-member:focus-visible img { filter: brightness(0) drop-shadow(0 0 16px rgba(240,198,107,.65)); transform: translateY(-8px); }

.theatre.is-profile .cast-member {
  pointer-events: none;
  transition-delay: 0s;
  transition-duration: .45s;
}

.theatre.is-profile-closing .cast-member { transition-delay: 0s; }

.theatre.is-profile .cast-member:not(.is-selected) {
  opacity: 0;
  filter: blur(5px);
}

.theatre.is-profile .cast-member.is-selected { z-index: 8; }
.theatre.is-profile .cast-member.is-selected .figure-motion { animation-play-state: paused; }
.theatre.is-profile .cast-member.is-selected img {
  filter: brightness(1) drop-shadow(0 12px 18px rgba(38,14,12,.24));
  transform: none;
  transition: filter .42s .48s ease, transform .25s ease;
}

.footlights {
  position: absolute;
  z-index: 22;
  left: 4%;
  right: 4%;
  bottom: 112px;
  display: flex;
  justify-content: space-around;
  height: 35px;
  border-top: 7px solid #3a2722;
  background: #0b0909;
  transition: transform 1.15s .2s cubic-bezier(.5,0,.8,.4), opacity .75s .3s;
}

.theatre.is-open .footlights {
  opacity: 0;
  transform: translateY(190px);
}

.footlights i {
  width: 18px;
  height: 18px;
  margin-top: -13px;
  border-radius: 50%;
  background: #d7a754;
  box-shadow: 0 -5px 16px #ffd684;
}

.audience {
  position: absolute;
  z-index: 21;
  inset: auto 0 0;
  display: flex;
  justify-content: space-around;
  align-items: end;
  height: 125px;
  padding: 0 4%;
  background:
    linear-gradient(transparent, rgba(3,3,4,.92) 32%),
    repeating-linear-gradient(90deg, transparent 0 12%, rgba(119,67,41,.08) 12% 13%);
  transition: transform 1.35s .1s cubic-bezier(.5,0,.75,.35), opacity .85s .32s;
}

.theatre.is-open .audience {
  opacity: 0;
  transform: translateY(125%);
}

.audience span {
  position: relative;
  width: 11.5%;
  height: 76%;
  border: 3px solid #120b0a;
  border-bottom-width: 8px;
  border-radius: 18px 18px 5px 5px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.05), transparent 24% 76%, rgba(0,0,0,.35)),
    linear-gradient(#3b1d1a, #160c0b 70%);
  box-shadow:
    inset 0 0 0 3px #090606,
    inset 0 0 22px rgba(0,0,0,.75),
    0 10px 0 #060505,
    0 16px 18px #000;
}

.audience span::before {
  content: "";
  position: absolute;
  left: -9%;
  right: -9%;
  bottom: 8%;
  height: 25%;
  border: 3px solid #0b0706;
  border-radius: 8px 8px 3px 3px;
  background: linear-gradient(#51251f, #180d0b);
  box-shadow: inset 0 -6px 10px rgba(0,0,0,.65);
}

.audience span::after {
  content: "";
  position: absolute;
  left: -12%;
  right: -12%;
  bottom: 7%;
  height: 37%;
  border-radius: 6px;
  background: linear-gradient(90deg, #100a09 0 10%, transparent 10% 90%, #100a09 90%);
}

.audience span:nth-child(2n) { height: 68%; }
.audience span:nth-child(3n) { height: 84%; }

.profile[hidden] { display: none; }
.profile {
  position: absolute;
  z-index: 10;
  inset: 20px clamp(22px, 6vw, 90px) 16px;
  display: grid;
  grid-template-columns: minmax(220px, .9fr) 1.1fr;
  align-items: center;
  gap: clamp(22px, 5vw, 72px);
  padding: 28px clamp(28px, 5vw, 64px);
  color: #170c10;
  background: transparent;
  border: 0;
  box-shadow: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.profile.is-arriving,
.profile.is-visible {
  opacity: 1;
  visibility: visible;
}

.profile.is-arriving { transition: opacity .2s ease; }
.profile.is-visible { pointer-events: auto; transition: opacity .25s ease; }
.profile.is-closing { opacity: 0; visibility: visible; transition: opacity .25s ease; }

.profile__portrait,
.profile__copy,
.profile__close,
.profile__arrow {
  opacity: 0;
}

.profile__copy { transform: translateY(18px); }

.profile.is-visible .profile__copy,
.profile.is-visible .profile__close,
.profile.is-visible .profile__arrow {
  opacity: 1;
  transition: opacity .42s ease;
}

.profile.is-visible .profile__copy {
  transform: translateY(0);
  transition: opacity .42s .1s ease, transform .52s .1s cubic-bezier(.22,1,.36,1);
}
.profile.is-visible .profile__arrow { transform: translateY(-50%); }
.profile--yamamoto .profile__portrait-wrap { grid-column: 2; grid-row: 1; }
.profile--yamamoto .profile__copy { grid-column: 1; grid-row: 1; }

.profile__portrait-wrap { position: relative; align-self: stretch; min-height: 0; border: 0; pointer-events: none; }
.profile__portrait { visibility: hidden; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.profile__copy {
  position: relative;
  z-index: 2;
  container-type: inline-size;
  max-height: 100%;
  overflow-y: auto;
  padding: clamp(24px, 4vw, 52px);
  font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  background:
    linear-gradient(135deg, rgba(166,17,49,.09) 25%, transparent 25%) 0 0/16px 16px,
    rgba(241,230,206,.96);
  border: 1px solid #c38d38;
  box-shadow: 0 25px 80px rgba(0,0,0,.72);
}
.profile--tenmen .profile__copy {
  background:
    linear-gradient(rgba(255,255,255,.64), rgba(255,255,255,.64)),
    url("assets/tenmen-profile-pattern.png") center / cover no-repeat;
}
.profile--yamamoto .profile__copy {
  background:
    linear-gradient(rgba(255,255,255,.58), rgba(255,255,255,.58)),
    url("assets/yamamoto-profile-pattern.png") center / cover no-repeat;
}
.profile__role { display: inline-block; margin: 0 0 10px; padding: 5px 9px; color: var(--paper); background: var(--red); font-size: .8rem; letter-spacing: .12em; }
.profile h2 { margin: 0; font-weight: 900; line-height: 1.06; letter-spacing: .015em; white-space: nowrap; }
.profile--yamamoto h2,
.profile--tenmen h2 { font-size: clamp(1.65rem, 10.6cqw, 3.25rem); }
.profile--yamamoto h2 { letter-spacing: -.025em; }
.profile__kana { margin: 12px 0 28px; color: var(--red); font: 700 .7rem/1 Arial, sans-serif; letter-spacing: .22em; }
.profile__lead { font-size: clamp(1rem, 1.6vw, 1.22rem); line-height: 1.9; }
.profile__voices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 18px 0 4px; }
.voice-button {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 7px;
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid rgba(23,12,16,.35);
  color: #170c10;
  background: rgba(255,255,255,.42);
  cursor: pointer;
  transition: color .18s, background .18s, border-color .18s, transform .18s;
}
.voice-button:hover { border-color: var(--red); transform: translateY(-2px); }
.voice-button.is-playing { color: #fff; background: var(--red); border-color: var(--red); }
.voice-button__icon { font-size: .8rem; }
.voice-button__label { font: 800 .72rem/1 Arial, sans-serif; letter-spacing: .1em; }
.voice-button__state { grid-column: 2; color: currentColor; font-size: .68rem; line-height: 1; opacity: .72; }
.profile__facts { margin: 26px 0 0; border-top: 1px solid rgba(23,12,16,.3); }
.profile__facts div { display: grid; grid-template-columns: 5em 1fr; padding: 9px 0; border-bottom: 1px solid rgba(23,12,16,.18); }
.profile__facts dt { color: var(--red); font-weight: 700; }
.profile__facts dd { margin: 0; }
.ability { margin-top: 22px; }
.ability h3 { margin: 0 0 6px; color: var(--red); font-size: 1rem; letter-spacing: .16em; }
.ability__chart { width: min(100%, 320px); margin: 0 auto; }
.ability__chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.ability__circle { fill: rgba(255,255,255,.16); stroke: rgba(23,12,16,.42); stroke-width: 1.5; }
.ability__grid polygon,
.ability__grid line { fill: none; stroke: rgba(23,12,16,.22); stroke-width: 1; }
.ability__value { fill: rgba(166,17,49,.34); stroke: var(--red); stroke-width: 2.5; stroke-linejoin: round; }
.ability__labels { fill: #170c10; font-size: 11px; font-weight: 800; text-anchor: middle; }
.ability__grade { fill: var(--red); font: 900 12px/1 Arial, sans-serif; }
.profile__close, .profile__arrow { position: absolute; z-index: 4; border: 0; cursor: pointer; }
.profile__close { top: 12px; right: 12px; width: 42px; height: 42px; color: #fff; background: #170c10; font: 300 1.5rem/1 Arial, sans-serif; }
.profile__arrow { top: 50%; width: 46px; height: 70px; color: var(--gold); background: #170c10; font: 300 3rem/1 Arial, sans-serif; transform: translateY(-50%); }
.profile__arrow--prev { left: -23px; }
.profile__arrow--next { right: -23px; }

.character-playlists {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: 0;
  padding: 38px 42px 44px;
  color: #171014;
  background: #f2f2f2;
  border: 7px solid #211619;
  outline: 1px solid rgba(240,198,107,.5);
  box-shadow: 0 24px 70px rgba(0,0,0,.58);
  font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
}

.playlist-top {
  position: static;
  padding: 0;
  background: transparent;
}

.playlist-top > :not(.playlist-beat-character) {
  position: relative;
  z-index: 1;
}

.playlist-bottom {
  position: relative;
  z-index: 1;
  margin-top: 34px;
  padding: 0;
  background: transparent;
}

.playlist-beat-character {
  position: absolute;
  z-index: 0;
  inset: 1010px 32px auto;
  height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.playlist-beat-character img {
  display: block;
  width: min(48%, 520px);
  height: auto;
  opacity: .2;
  transform-origin: 50% 50%;
  animation: playlist-heartbeat var(--playlist-beat-duration, .5s) cubic-bezier(.2,.7,.2,1) infinite;
  animation-play-state: paused;
}

.playlist-beat-character.is-beating img { animation-play-state: running; }

@keyframes playlist-heartbeat {
  0%, 100% { transform: scale(1); }
  12% { transform: scale(1.025); }
  28% { transform: scale(1.008); }
}

.playlist-tabs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  max-width: 760px;
  margin: 0 auto 34px;
}
.playlist-tabs button {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) 104px;
  align-items: center;
  gap: 12px;
  min-height: 76px;
  padding: 9px 18px;
  border: 3px solid #171014;
  color: #171014;
  background: #fff;
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
}
.playlist-tab__face {
  position: relative;
  display: block;
  width: 96px;
  height: 64px;
}
.playlist-tab__face img {
  position: absolute;
  top: -16px;
  left: 0;
  display: block;
  width: 96px;
  height: 96px;
  object-fit: contain;
}
.playlist-tab__face-wait,
.playlist-tabs button[aria-selected="false"] .playlist-tab__face-play {
  visibility: hidden;
  opacity: 0;
}
.playlist-tabs button[aria-selected="false"] .playlist-tab__face-wait {
  visibility: visible;
  opacity: 1;
}
.playlist-tab__label { grid-column: 2; }
.playlist-tabs button[aria-selected="true"] {
  color: #fff;
  background: var(--red);
  border-color: var(--red);
}

.playlist-guide {
  max-width: 900px;
  margin: 0 auto 24px;
  color: #5e5056;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.75;
  text-align: center;
}
.playlist-guide strong {
  font-size: 1.13em;
  font-weight: 1000;
}

.playlist-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 34px;
  align-items: start;
  max-width: 960px;
  margin: 0 auto;
}
.playlist-player {
  position: relative;
  z-index: 1;
  max-width: 960px;
  margin: 0 auto;
}
.playlist-player__screen {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
}
.playlist-player__screen iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.playlist-player__controls {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr) 140px;
  align-items: stretch;
  gap: 14px;
  margin-top: 16px;
}
.playlist-player__now {
  display: grid;
  place-content: center;
  gap: 6px;
  min-height: 74px;
  margin: 0;
  padding: 10px 18px;
  color: #171014;
  background: #fff7e4;
  border: 3px solid #171014;
  font-size: 20px;
  font-weight: 900;
  text-align: center;
}
.playlist-player__now-label {
  color: var(--red);
  font: 900 11px/1 Arial, sans-serif;
  letter-spacing: .2em;
}
.playlist-player__skip {
  padding: 10px 14px;
  color: #fff;
  background: var(--red);
  border: 3px solid #171014;
  box-shadow: 3px 3px 0 #171014;
  font-weight: 900;
  cursor: pointer;
}
.playlist-player__skip:hover,
.playlist-player__skip:focus-visible {
  background: #c91840;
}
.playlist-player__skip:focus-visible {
  outline: 3px solid #171014;
  outline-offset: 3px;
}
.playlist-apple-music {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  justify-self: center;
  margin-top: 0;
  padding: 10px 20px;
  color: #fff;
  background: #e9344b;
  border: 3px solid #171014;
  box-shadow: 4px 4px 0 #171014;
  font-size: 15px;
  font-weight: 900;
  text-decoration: none;
}
.playlist-apple-music:hover,
.playlist-apple-music:focus-visible {
  background: #fa4058;
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 #171014;
}
.playlist-apple-music:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -6px;
}
.playlist-apple-note {
  margin: -18px 0 0;
  color: #5e5056;
  font-size: 15px;
  font-weight: 800;
  text-align: center;
}

.playlist-tracks {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: playlist-track;
}
.playlist-track {
  counter-increment: playlist-track;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 62px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(23,16,20,.22);
}
.playlist-track::before {
  content: counter(playlist-track, decimal-leading-zero);
  color: var(--red);
  font: 900 14px/1 Arial, sans-serif;
}
.playlist-track__select {
  min-width: 0;
  padding: 4px 0;
  border: 0;
  color: #171014;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.playlist-track__select:disabled {
  cursor: default;
  opacity: .72;
}
.playlist-track__title,
.playlist-track__artist {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.playlist-track__title { font-size: 16px; font-weight: 900; }
.playlist-track__artist { margin-top: 4px; color: #706168; font-size: 12px; }
.playlist-track__external {
  padding: 7px 9px;
  color: var(--red);
  border: 1px solid currentColor;
  font-size: 11px;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}
.playlist-track__external--unavailable {
  color: #786d71;
  border-style: dashed;
  cursor: default;
}
.playlist-track.is-current { background: rgba(166,17,49,.1); }
.playlist-track.is-current .playlist-track__title { color: var(--red); }

.stage-nav,
.lower-nav {
  margin-top: 24px;
  color: rgba(244,231,202,.62);
  font-size: .85rem;
  text-align: center;
}
.stage-nav button,
.lower-nav a { color: var(--gold); border: 0; background: transparent; text-decoration: none; cursor: pointer; }

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