@font-face {
  font-family: "Noto Serif JP Headings";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("noto-serif-jp-headings.woff2") format("woff2");
  unicode-range: U+20, U+30-39, U+45, U+49, U+4C, U+4E, U+3001-3002, U+3042, U+304A-304C, U+304F-3050, U+3053-3054, U+3057-305A, U+305F-3062, U+3066-306B, U+306E-3070, U+307E, U+3084, U+3089-308A, U+3092, U+3099, U+4ECA, U+4FBF, U+5C4A, U+5E97, U+5EA6, U+5F85, U+66F2, U+6765, U+6CC1, U+8FD1, U+FF01;
}
:root {
  color-scheme: dark;
  --night: #090a14;
  --ivory: #f7f5ff;
  --muted: #d3d6e6;
  --accent: #b4caff;
  --lp-ink: #f7f5ff;
  --lp-paper: #12152a;
  --story-width: 640px;
  --inlay: clamp(22px, 6vw, 49px);
  --typeface: "Yu Gothic", YuGothic, "Hiragino Sans", "Noto Sans JP", "Noto Sans CJK JP", sans-serif;
  --heading-typeface: "Noto Serif JP Headings", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Noto Serif JP", serif;
}
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--ivory);
  background: #06070e;
  font-family: var(--typeface);
  line-height: 1.8;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 81% 17%, #3c145c83, transparent 48%),
    radial-gradient(ellipse at 16% 29%, #102c7087, transparent 51%),
    #06070e;
  pointer-events: none;
}
h1, h2, h3, p, figure { margin: 0; }
img { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.story {
  position: relative;
  max-width: var(--story-width);
  margin-inline: auto;
  overflow: clip;
  background: var(--night);
  box-shadow: 0 0 110px #0009;
}
.inlay { padding-inline: var(--inlay); }
h1, h2 {
  font-family: var(--heading-typeface);
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -.04em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
h2 { font-size: clamp(30px, 7.6vw, 50px); }

.hero {
  min-height: clamp(660px, 94svh, 850px);
  display: grid;
  align-content: end;
  padding-block: 345px 40px;
}
.hero-art { --scene-fade-out: 68%; }
.hero-art picture { display: block; width: 100%; height: 100%; }
.hero-art[data-scene-drift] picture { transform: translateY(var(--drift-y, 0px)) scale(1.075); }
.hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%; }
.hero-lens {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, #090a143d, transparent 19%, transparent 35%, #090a144a 51%, #090a14d4 75%, var(--night) 99%),
    linear-gradient(90deg, #080d2450, transparent 70%);
  pointer-events: none;
}
.brand {
  width: clamp(95px, 25vw, 138px);
  aspect-ratio: 2.05;
  overflow: clip;
  mix-blend-mode: screen;
}
.brand img { width: 100%; height: auto; transform: translateY(-25%); }
.hero > .brand { position: absolute; left: var(--inlay); top: max(20px, env(safe-area-inset-top)); }
.hero-copy {
  position: relative;
  text-shadow: 0 2px 18px #050611d9;
}
h1 {
  margin-block: 0 17px;
  font-size: clamp(38px, 13vw, 78px);
  font-weight: 700;
  letter-spacing: -.06em;
  line-height: 1.12;
}
.title-line { display: block; overflow: clip; padding-bottom: .06em; }
.title-line > span { display: block; }
.title-line:first-child { font-size: .65em; margin-bottom: .15em; }
.title-accent {
  color: #edf1ff;
  text-shadow: 0 3px 20px #050611, 0 0 32px #648bff40;
}
.hero-description {
  margin-bottom: 22px;
  font-size: clamp(15px, 4vw, 17px);
  line-height: 1.75;
}
.scene-cta { width: 100%; max-width: 420px; text-shadow: none; }
.hero-copy > .scene-cta { margin-inline: auto; }
.hero-copy > .cta-note { text-align: center; }
.line-bubble {
  display: grid;
  place-items: center;
  position: relative;
  width: 32px;
  height: 24px;
  border-radius: 50%;
  background: #123c2c;
  color: #efffec;
  font-weight: 800;
  font-size: .58rem;
  line-height: 1;
  letter-spacing: -.025em;
}
.line-bubble::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  left: 7px;
  bottom: -2px;
  background: inherit;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.cta-arrow {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background: #f3ffe938;
  box-shadow: inset 0 0 0 1px #193d2f24;
  font-size: 1.18rem;
}
.cta-note { margin-top: 13px; color: var(--muted); font-size: .78rem; }

.session {
  display: grid;
  align-content: end;
  min-height: clamp(410px, 115vw, 640px);
  margin-top: -12px;
  padding-block: clamp(190px, 58vw, 380px) 48px;
}
.session-art {
  --scene-fade-in: 15%;
  --scene-fade-out: 59%;
  --scene-image-position: 49% 43%;
  inset: -18px 0 9px;
}
.session-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #0b0c2030 10%, transparent 40%, #090a14bd 84%);
}
[data-scene-drift] > img { transform: translateY(var(--drift-y, 0px)) scale(1.11); }
.session-copy { text-shadow: 0 2px 14px #050610; }
.session-copy p,
.signoff > p:not(.cta-note) {
  max-width: 32em;
  margin-top: 17px;
  color: var(--muted);
  font-size: clamp(14px, 3.8vw, 16px);
}

.dispatch {
  --dispatch-inlay: var(--inlay);
  padding-block: 28px clamp(70px, 15vw, 110px);
}
.dispatch::before, .signoff::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  mask-image: linear-gradient(transparent, #000 24%, #000 76%, transparent);
  pointer-events: none;
}
.dispatch::before {
  background:
    radial-gradient(ellipse at 4% 44%, #1f39795b, transparent 70%),
    radial-gradient(ellipse at 99% 79%, #5c205744, transparent 65%);
}
.dispatch h2 { color: var(--ivory); }
.dispatch-list { list-style: none; margin: 15px calc(-1 * var(--dispatch-inlay)) 0; padding: 0; }
.dispatch-entry {
  position: relative;
  isolation: isolate;
  display: grid;
  justify-items: end;
  align-items: center;
  min-height: clamp(172px, 53vw, 275px);
  padding: 30px var(--dispatch-inlay);
  --photo-side: left;
  --photo-focus: 38%;
  --light: #3d52c75c;
}
.dispatch-entry:nth-child(2) {
  --photo-side: right;
  --photo-focus: 64%;
  --light: #9a2f9162;
  justify-items: start;
}
.dispatch-entry:nth-child(3) { --photo-focus: 34%; --light: #542f8268; }
.dispatch-entry::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: -24% -5%;
  background: radial-gradient(ellipse at var(--photo-focus) 48%, var(--light), transparent 66%);
  pointer-events: none;
}
.dispatch-image {
  position: absolute;
  z-index: -1;
  inset-block: -15%;
  inset-inline: 0;
  overflow: clip;
  mask-image: radial-gradient(ellipse 64% 57% at var(--photo-focus) 50%, #000 24%, #000a 47%, transparent 94%);
  pointer-events: none;
}
.dispatch-image > img {
  position: absolute;
  left: 0;
  width: 69%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
  mask-image: linear-gradient(to var(--photo-side), transparent, #0007 26%, #000 49%, #000 83%, transparent);
  filter: saturate(1.1) brightness(.87);
}
.dispatch-entry:nth-child(2) .dispatch-image > img { left: auto; right: 0; }
.dispatch-entry:nth-child(3) .dispatch-image > img { object-position: 38% 59%; }
.dispatch-text {
  width: 47%;
  text-shadow: 0 1px 12px #060711, 0 1px 5px #060711;
}
.dispatch-text h3 { color: var(--accent); font-size: clamp(16px, 4.6vw, 24px); font-weight: 800; line-height: 1.35; }
.dispatch-text p { margin-top: 6px; color: var(--muted); font-size: .875rem; line-height: 1.65; }
.dispatch-entry[data-scene-played] .dispatch-image { animation: image-reveal .86s cubic-bezier(.19,.75,.25,1) both; }
.dispatch-entry[data-scene-played] .dispatch-text { animation: copy-arrive .8s .19s cubic-bezier(.19,.75,.25,1) both; }
@keyframes image-reveal {
  from { opacity: .34; transform: scale(.96); }
  to { opacity: 1; transform: none; }
}
@keyframes copy-arrive {
  from { opacity: .45; transform: translateY(13px); }
  to { opacity: 1; transform: none; }
}

.signoff {
  display: grid;
  justify-items: center;
  text-align: center;
  padding-bottom: 48px;
}
.signoff::before {
  background:
    radial-gradient(ellipse at 33% 35%, #233f8b62, transparent 62%),
    radial-gradient(ellipse at 75% 39%, #6d22685c, transparent 65%);
}
.character-stage {
  position: relative;
  width: min(54%, 255px);
  min-width: min(147px, 52%);
  margin-block: -18px 13px;
}
.character-stage::before {
  content: "";
  position: absolute;
  inset: 12% -16% 5%;
  z-index: -1;
  background: radial-gradient(ellipse, #7454ac65, #26376e42 54%, transparent 74%);
}
.character { width: 100%; height: auto; filter: drop-shadow(0 8px 20px #040612a0); transform-origin: 50% 86%; }
.signoff[data-scene-played] .character { animation: greet 1.65s cubic-bezier(.18,.74,.22,1) both; }
@keyframes greet {
  0% { transform: translateY(23px) rotate(-5deg) scale(.9); opacity: .72; }
  36% { transform: translateY(-13px) rotate(6deg) scale(1.04); opacity: 1; }
  66% { transform: translateY(3px) rotate(-2.5deg); }
  82% { transform: translateY(-3px) rotate(1.25deg); }
  100% { transform: none; }
}
.signoff h2 { font-size: clamp(22px, 6.5vw, 42px); text-wrap: balance; }
.signoff h2 span { white-space: nowrap; }
.signoff .scene-cta { margin-top: 25px; }
.site-footer { display: grid; justify-content: center; padding: 6px 0 37px; }
.site-footer .brand { opacity: .82; }
.sticky-line {
  background: linear-gradient(transparent, #090a14f5 24%);
  padding-top: 15px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
}
.sticky-line .scene-cta { min-height: 54px; max-width: 540px; }

dialog.exit-dialog {
  border: 1px solid #8e9bd956;
  background: radial-gradient(ellipse at 0 0, #2a244f, var(--lp-paper) 65%);
  box-shadow: 0 24px 80px #000c;
  padding-top: 48px;
}
.exit-dialog h2 { font-size: clamp(29px, 7vw, 43px); }
.exit-dialog p { margin-block: 12px 21px; color: var(--muted); font-size: .94rem; }
.dialog-close { position: absolute; right: 8px; top: 5px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 1.55rem; }
.leave { display: block; min-height: 44px; margin: 10px auto 0; padding: 3px 12px; border: 0; background: transparent; color: var(--muted); text-decoration: underline; text-underline-offset: .2em; }

.stage-lights {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: clip;
  pointer-events: none;
}
.stage-lights::before, .stage-lights::after {
  content: "";
  position: absolute;
  opacity: 0;
  mix-blend-mode: screen;
}
.stage-lights::before {
  inset: -23% -20% 28%;
  background:
    radial-gradient(ellipse at 23% 30%, #3069ffa8, transparent 46%),
    radial-gradient(ellipse at 77% 22%, #da3af38c, transparent 43%);
  transform-origin: 50% 10%;
}
.stage-lights::after {
  inset: 3% 0 34%;
  background:
    radial-gradient(ellipse at 17% 14%, #80b7ff88, transparent 7%),
    radial-gradient(ellipse at 86% 25%, #ff6eb873, transparent 10%),
    radial-gradient(ellipse at 71% 46%, #566dff6b, transparent 12%);
}
[data-scene-played] > .stage-lights::before { animation: light-sweep 3.5s ease-in-out both; }
[data-scene-played] > .stage-lights::after { animation: light-glints 3s .35s ease-out both; }
.signoff > .stage-lights::before { inset: -5% -10% 18%; }
@keyframes light-sweep {
  0% { opacity: 0; transform: translateX(-14%) rotate(-9deg); }
  30% { opacity: .52; }
  62% { opacity: .25; }
  100% { opacity: 0; transform: translateX(18%) rotate(9deg); }
}
@keyframes light-glints {
  0%, 100% { opacity: 0; }
  32% { opacity: .68; }
  52% { opacity: .12; }
  71% { opacity: .4; }
}
.hero-copy > .scene-cta::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(109deg, transparent 37%, #fff0 44%, #f6ffeeb0 50%, transparent 61%);
  background-size: 250% 100%;
  background-position: 112% 0;
  opacity: 0;
  pointer-events: none;
}
.hero[data-scene-played] .scene-cta::after { animation: button-sheen 1.05s .8s ease-in-out both; }
@keyframes button-sheen {
  0% { opacity: 0; background-position: 112% 0; }
  25%, 66% { opacity: .74; }
  100% { opacity: 0; background-position: -12% 0; }
}

@media (max-width: 359px) {
  .hero { padding-top: 300px; }
  .scene-cta { font-size: .92rem; }
  .cta-arrow { width: 26px; height: 26px; }
  .dispatch-text { width: 49%; }
  .dispatch-text p { font-size: .8125rem; }
}
@media (min-width: 700px) {
  .hero { min-height: clamp(745px, 95svh, 880px); }
  .hero-art img { object-position: 50% 22%; }
  .hero-copy { padding-bottom: 6px; }
  .session { padding-bottom: 62px; }
}
@media (min-width: 700px) {
  .sticky-line {
    width: min(100%, var(--story-width));
    margin-inline: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-scene-drift] > img, .hero-art[data-scene-drift] picture { transform: none; }
  [data-scene-played] > .stage-lights::before, [data-scene-played] > .stage-lights::after,
  .hero[data-scene-played] .scene-cta::after, .signoff[data-scene-played] .character,
  .dispatch-entry[data-scene-played] .dispatch-image, .dispatch-entry[data-scene-played] .dispatch-text { animation: none; }
}