*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: clip; }
body {
  font-family: var(--font-body); font-weight: 700; color: var(--color-ink);
  background: var(--color-base); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%;
}
h1, h2, p, ul, ol, figure { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
.defs { position: absolute; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--color-orange); outline-offset: 2px; }

.stage {
  height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr);
  background: linear-gradient(var(--color-line) 1px, transparent 1px) 0 0 / 100% 32px, var(--color-base);
}
.column { position: relative; width: 100%; max-width: var(--col); height: 100dvh; margin-inline: auto; overflow: hidden; background: var(--color-base); }
.rail { display: none; }
.slider { position: relative; z-index: 1; height: 100dvh; overflow-y: auto; overflow-x: hidden; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none; outline: none; }
.slider::-webkit-scrollbar { display: none; }

.site-header {
  position: absolute; inset: 0 0 auto 0; z-index: 20; height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs);
  padding-inline: var(--space-md); background: var(--color-base);
}
.logo { display: block; width: 122px; }
.logo img { display: block; width: 100%; height: auto; }
.header-nav { display: flex; gap: 6px; }
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-height: 36px; padding: 0 14px; border-radius: 999px;
  font-family: var(--font-body); font-weight: 900; font-size: 12.5px; letter-spacing: 0.06em; white-space: nowrap;
  border: 2px solid var(--color-ink); overflow: hidden; isolation: isolate;
  transition: color 300ms linear;
}
.btn--line { background: var(--color-paper); color: var(--color-ink); }
.btn--fill { background: var(--color-orange); color: var(--color-paper); }

.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--color-ink); transform: scaleX(0); transform-origin: 0 50%; transition: transform 420ms var(--ease-out); }
@media (hover: hover) { .btn:hover { color: var(--color-paper); } .btn:hover::before { transform: scaleX(1); } }

.page {
  position: relative; height: 100dvh; overflow: hidden;
  scroll-snap-align: start; scroll-snap-stop: always;
  font-size: clamp(10.5px, min(1.86dvh, 3.15vw), 15.2px); line-height: 1.75;
  word-break: auto-phrase;
}
.page__inner {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; justify-content: center; gap: 0.95em;
  padding: calc(var(--header-h) + 0.6em) 23px calc(3.6em + 10px);
}

.page--hero { background: var(--color-base); }
.hero__video { position: absolute; left: 0; right: 0; top: var(--header-h); width: 100%; height: calc(100% - var(--header-h)); object-fit: cover; }

.marq { position: absolute; z-index: 1; left: 0; top: calc(var(--header-h) + 2%); white-space: nowrap; pointer-events: none; }
.marq span { display: inline-block; font-family: var(--font-display); font-weight: 800; font-size: 7em; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px #dedede; animation: marq 30s linear infinite; }
.marq--b { top: auto; bottom: 5%; }
.marq--b span { -webkit-text-stroke-color: #f4dccf; animation-direction: reverse; animation-duration: 36s; }
@keyframes marq { to { transform: translateX(-50%); } }

.ttl { font-family: var(--font-display); font-weight: 800; font-size: 1.05em; letter-spacing: 0.04em; --on: var(--color-blue); }
.mega { font-family: "Dela Gothic One", var(--font-body); font-weight: 400; font-size: 2.15em; line-height: 1.32; letter-spacing: 0.01em; }
.mega--q { font-size: 2em; }
.hero-ttl { display: grid; font-family: "Dela Gothic One", var(--font-body); font-weight: 400; line-height: 1.08; }
.hero-ttl .s { font-size: 2.3em; }
.hero-ttl .l { font-size: 3.7em; --on: var(--color-blue); }
.big { font-weight: 900; font-size: 1.55em; line-height: 1.45; }
.big--blue { --on: var(--color-blue); }
.body { font-weight: 900; font-size: 1.18em; line-height: 1.72; }
.body--accent { --on: var(--color-orange); }
.body--strong { font-size: 1.3em; }
.key { --on: var(--color-orange); }
.words { display: grid; font-family: "Dela Gothic One", var(--font-body); font-weight: 400; font-size: 2.35em; line-height: 1.14; }
.words .w1 { --on: var(--color-blue); }
.words .w2 { --on: var(--color-orange); margin-left: 1.1em; }
.words .w3 { margin-left: 2.2em; }
.ln { display: block; }

.kara .ph { white-space: nowrap; }
.kara .c { font-style: normal; color: var(--off, #cfcfcf); transition: color 240ms linear; transition-delay: var(--ct, 0ms); }
.page.play .kara .c { color: var(--on, var(--color-ink)); }

.mk { background: linear-gradient(transparent 60%, var(--color-marker) 60%) no-repeat 0 0 / 0% 100%; transition: background-size 700ms var(--ease-in-out); transition-delay: var(--t2, 0ms); }
.page.play .mk { background-size: 100% 100%; }

.film {
  position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px;
  margin-inline: -23px; padding: 16px 12px 10px; background: var(--color-ink);
  --off: #5a5a5a; --on: var(--color-on-dark);
}
.film::before, .film::after { content: ""; position: absolute; left: 0; right: 0; height: 6px; background: repeating-linear-gradient(90deg, var(--color-base) 0 7px, transparent 7px 16px); opacity: 0.9; }
.film::before { top: 4px; }
.film::after { bottom: 4px; }
.film__f { display: grid; gap: 0.35em; align-content: start; }
.film__f figure { aspect-ratio: 4 / 3; overflow: hidden; background: #000; border-radius: 3px; }
.film__f img { display: block; width: 100%; height: 100%; object-fit: cover; }
.film__f:nth-child(3) img { object-position: 50% 40%; }
.film__f .ln { font-size: 0.92em; font-weight: 900; line-height: 1.45; padding-bottom: 0.4em; min-width: 0; }
.film .ph { white-space: normal; }
.film__f { min-width: 0; }

.film { clip-path: inset(0 0 0 100%); transition: clip-path 900ms var(--ease-in-out) 500ms; }
.page.play .film { clip-path: inset(0 0 0 0); }
.film__f img { filter: grayscale(1); transform: scale(1.12); transition: filter 1200ms linear, transform 1600ms var(--ease-out); transition-delay: 1100ms; }
.page.play .film__f img { filter: none; transform: none; }

.stairs { display: grid; grid-template-columns: 36% minmax(0, 1fr); align-items: end; gap: 0.9em; }
.stairs__svg { width: 100%; height: auto; overflow: visible; }
.st rect { fill: var(--color-blue-tint); }
.st text { font-family: var(--font-display); font-weight: 800; font-size: 13px; text-anchor: middle; fill: var(--color-ink); }
.st--4 rect { fill: var(--color-blue); }
.st--4 text, .st--5 text { fill: var(--color-paper); }
.st--5 rect { fill: var(--color-orange); }
.st { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); transition: transform 700ms var(--ease-out); }
.page.play .st { transform: none; }
.page.play .st:nth-child(1) { transition-delay: 900ms; } .page.play .st:nth-child(2) { transition-delay: 1000ms; } .page.play .st:nth-child(3) { transition-delay: 1100ms; }
.page.play .st:nth-child(4) { transition-delay: 1200ms; } .page.play .st:nth-child(5) { transition-delay: 1300ms; }
.stairs__txt { display: grid; gap: 0.3em; font-weight: 900; font-size: 1em; line-height: 1.55; }
.step { padding-left: 0.7em; border-left: 4px solid var(--color-blue); }
.step--5 { border-color: var(--color-orange); }

.nextbtn {
  position: absolute; right: 16px; bottom: 14px; z-index: 5;
  display: inline-flex; align-items: center; gap: 12px; padding: 8px 10px 8px 14px;
  background: var(--color-ink); color: var(--color-paper); border-radius: 6px; overflow: hidden; isolation: isolate;
  font-weight: 900; font-size: 12px; line-height: 1.2;
}
.nextbtn small { display: block; font-family: var(--font-display); font-weight: 700; font-size: 9.5px; letter-spacing: 0.14em; color: var(--color-orange); }
.nextbtn__arrow { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--color-orange); font-family: var(--font-display); font-size: 14px; }
.nextbtn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--color-blue); transform: scaleX(0); transform-origin: 0 50%; transition: transform 420ms var(--ease-out); }
@media (hover: hover) { .nextbtn:hover::before { transform: scaleX(1); } }

.nextbtn__arrow i { font-style: normal; animation: drift 1.8s var(--ease-in-out) infinite; }
@keyframes drift { 0% { transform: translateY(-5px); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(5px); opacity: 0; } }

.pager { position: absolute; left: 16px; bottom: 18px; z-index: 6; display: flex; align-items: baseline; gap: 4px; font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.06em; }
.pager__now { font-size: 18px; }
.column[data-page="top"] .pager { display: none; }

.loader { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--color-base); transition: opacity 500ms linear, visibility 0s linear 500ms; }
.loader.is-done { opacity: 0; visibility: hidden; }
.loader__in { display: grid; justify-items: center; gap: 40px; }
.loader__count { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.loader__mark { position: relative; width: 80px; height: 82px; overflow: hidden; }
.loader__logo { position: absolute; left: 0; bottom: 0; width: 80px; height: 82px; overflow: visible; }
.loader__logo .mk--1, .loader__logo .mk--2, .loader__logo .mk--3 { transform: translateY(110%); animation: mk-up 760ms var(--ease-out) both; }
.loader__logo .mk--3 { animation-delay: 150ms; }
.loader__logo .mk--2 { animation-delay: 330ms; }
.loader__logo .mk--1 { animation-delay: 510ms; }
@keyframes mk-up { to { transform: none; } }

@media (max-height: 620px) {
  .page__inner { gap: 0.75em; padding-bottom: calc(3.3em + 8px); }
  .film { padding: 13px 10px 8px; }
  .film__f figure { aspect-ratio: 16 / 10; }
}

@media (min-width: 960px) {
  .stage { grid-template-columns: minmax(0, 1fr) var(--col) minmax(0, 1fr); }
  .column { box-shadow: 0 0 0 1px var(--color-line), 0 20px 60px rgb(33 33 33 / 0.08); }
  .rail { position: relative; display: grid; place-items: center; height: 100dvh; padding: var(--space-xl); }
  .rail__vert { position: absolute; top: 50%; left: 26px; writing-mode: vertical-rl; transform: translateY(-50%); font-family: var(--font-en); font-weight: 700; font-size: 11px; letter-spacing: 0.32em; color: var(--color-ink-soft); }
  .rail__vert--r { left: auto; right: 26px; }
  .rail-logo { display: grid; justify-items: start; gap: var(--space-md); width: min(100%, 340px); }
  .rail-logo__img { width: 100%; height: auto; }
  .rail-logo__en { font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.04em; }
  .rail-logo__en em { font-style: normal; color: var(--color-orange); }
  .rail-side { width: min(100%, 280px); display: grid; }
  .rail-side__label { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.16em; color: var(--color-orange); }
  .rail-side__concept { margin-top: 8px; font-family: "Dela Gothic One", var(--font-body); font-size: 30px; line-height: 1.3; color: var(--color-blue); }
  .rail-side__page { margin-top: var(--space-xl); display: flex; align-items: baseline; gap: var(--space-sm); padding-bottom: var(--space-sm); border-bottom: 1.5px solid var(--color-ink); font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.08em; }
  .rail-side__now { font-size: 40px; line-height: 1; }
  .rail-side__btns { margin-top: var(--space-lg); display: grid; gap: var(--space-sm); }
  .btn--lg { min-height: 54px; font-size: 16px; }
}

.page__inner { gap: 1.2em; }
.body { font-size: 1.32em; line-height: 1.9; }
.body--strong { font-size: 1.32em; }
.big { font-size: 1.7em; line-height: 1.5; }
.stairs__txt { font-size: 1.08em; }

.marq span { color: #ebebeb; -webkit-text-stroke: 0; }
.marq--b span { color: #f7e4da; }

.enlab { display: flex; flex-wrap: wrap; align-items: center; column-gap: 0.28em; row-gap: 0.1em; line-height: 1; margin-bottom: -0.2em; }
.enlab__a { font-family: var(--font-display); font-weight: 800; font-size: 2.15em; letter-spacing: -0.01em; }
.enlab__pic { display: inline-block; width: 4.6em; height: 2.1em; border-radius: 999px; overflow: hidden; background: var(--color-ink); }
.enlab__pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.enlab__b { font-family: var(--font-script); font-size: 2.3em; color: var(--color-orange); margin-top: -0.15em; }
.enlab__c { flex-basis: 100%; font-family: var(--font-en); font-weight: 800; font-size: 1.05em; letter-spacing: 0.2em; color: var(--color-blue); }
.enlab > * { opacity: 0; transform: translateX(2.5em) skewX(-24deg); }
.page.play .enlab > * { animation: dash 520ms cubic-bezier(0.2, 1.5, 0.45, 1) both; }
.page.play .enlab > :nth-child(2) { animation-delay: 140ms; }
.page.play .enlab > :nth-child(3) { animation-delay: 260ms; }
.page.play .enlab > :nth-child(4) { animation-delay: 380ms; }
@keyframes pill { 0% { opacity: 0; transform: none; width: 0; } 100% { opacity: 1; transform: none; width: 4.6em; } }

.kara .c { display: inline-block; opacity: 0; transform: translateX(1.3em) skewX(-24deg); transition: none; }
.page.play .kara .c {
  animation: dash 460ms cubic-bezier(0.2, 1.5, 0.45, 1) var(--ct, 0ms) both, ink 280ms linear calc(var(--ct, 0ms) + 380ms) both;
}
@keyframes dash {
  0% { opacity: 0; transform: translateX(1.5em) skewX(-28deg); }
  55% { opacity: 1; transform: translateX(-0.14em) skewX(12deg); }
  80% { transform: translateX(0.04em) skewX(-4deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes ink { from { color: var(--off, #cfcfcf); } to { color: var(--on, #212121); } }

.kara .ln { position: relative; width: fit-content; max-width: 100%; }
.kara .ln::after {
  content: ""; position: absolute; top: 0.3em; height: 0.8em; width: 1.8em; left: 0; pointer-events: none; opacity: 0;
  background: repeating-linear-gradient(to bottom, var(--off, #cfcfcf) 0 2px, transparent 2px 7px);
}
.page.play .kara .ln::after { animation: speed var(--ld, 600ms) linear var(--lt, 0ms) both; }
@keyframes speed { 0% { opacity: 0; left: 0; } 12% { opacity: 0.9; } 88% { opacity: 0.9; } 100% { opacity: 0; left: calc(100% - 1.2em); } }
.words .ln::after, .film .ln::after { content: none; }

.page.play .mega .c, .page.play .hero-ttl .c {
  animation: thud 520ms cubic-bezier(0.25, 1.6, 0.5, 1) var(--ct, 0ms) both, ink 260ms linear calc(var(--ct, 0ms) + 300ms) both;
}
@keyframes thud { 0% { opacity: 0; transform: translateY(-0.7em) scale(1.35); } 60% { opacity: 1; transform: translateY(0.06em) scale(0.96, 1.06); } 100% { opacity: 1; transform: none; } }

.page.play .words .w1 .c { animation: ponder 900ms var(--ease-in-out) var(--ct, 0ms) both, ink 300ms linear calc(var(--ct, 0ms) + 500ms) both; }
@keyframes ponder { 0% { opacity: 0; transform: rotate(-24deg) translateY(0.3em); } 30% { opacity: 1; transform: rotate(16deg); } 55% { transform: rotate(-10deg); } 78% { transform: rotate(5deg); } 100% { opacity: 1; transform: none; } }

.page.play .words .w2 .c { animation: busy 820ms steps(1) var(--ct, 0ms) both, ink 260ms linear calc(var(--ct, 0ms) + 600ms) both; }
@keyframes busy {
  0% { opacity: 0; transform: translate(0.5em, -0.4em); } 10% { opacity: 1; transform: translate(-0.35em, 0.25em); } 20% { transform: translate(0.3em, 0.3em); }
  30% { transform: translate(-0.25em, -0.3em); } 40% { transform: translate(0.2em, -0.15em); } 50% { transform: translate(-0.15em, 0.2em); }
  60% { transform: translate(0.1em, 0.08em); } 70% { transform: translate(-0.06em, -0.06em); } 85%, 100% { opacity: 1; transform: none; }
}

.page.play .words .w3 .c { animation: block 620ms cubic-bezier(0.3, 1.3, 0.5, 1) var(--ct, 0ms) both, ink 240ms linear calc(var(--ct, 0ms) + 360ms) both; }
@keyframes block { 0% { opacity: 0; transform: translateY(-2.6em); } 55% { opacity: 1; transform: translateY(0) scale(1.18, 0.78); } 78% { transform: translateY(-0.12em) scale(0.95, 1.06); } 100% { opacity: 1; transform: none; } }

.film { clip-path: none; transition: none; transform: translateY(-150%) rotate(-6deg); opacity: 0; --off: #9a9a9a; --on: var(--color-ink); }
.page.play .film { animation: film-drop 900ms cubic-bezier(0.3, 1.35, 0.5, 1) 250ms both; }
@keyframes film-drop { 0% { opacity: 1; transform: translateY(-150%) rotate(-6deg); } 100% { opacity: 1; transform: none; } }
.film__f figure { position: relative; }
.film__f img { filter: none; transform: translateX(105%); transition: none; }
.page.play .film__f img { animation: flowout 700ms var(--ease-out) var(--pd, 1100ms) both, pan 5s var(--ease-in-out) calc(var(--pd, 1100ms) + 700ms) infinite alternate; }
.film__f:nth-child(2) { --pd: 1250ms; } .film__f:nth-child(3) { --pd: 1400ms; }
@keyframes flowout { from { transform: translateX(105%); } to { transform: scale(1.08); } }
@keyframes pan { from { transform: scale(1.08) translateX(-3%); } to { transform: scale(1.14) translateX(3%); } }
.film__f .ln.kara {
  justify-self: start; margin-top: 0.15em; padding: 0.22em 0.65em; border-radius: 0.9em; background: var(--color-paper); color: var(--color-ink);
  font-size: 0.8em; line-height: 1.4; transform: scale(0) rotate(-10deg); transform-origin: 20% 50%;
}
.page.play .film__f .ln.kara { animation: tag 460ms cubic-bezier(0.3, 1.6, 0.5, 1) var(--tg, 1900ms) both; }
.film__f:nth-child(2) .ln.kara { --tg: 2150ms; } .film__f:nth-child(3) .ln.kara { --tg: 2400ms; }
.film__f:nth-child(2) .ln.kara { rotate: 2deg; } .film__f:nth-child(3) .ln.kara { rotate: -2deg; }
@keyframes tag { from { transform: scale(0) rotate(-10deg); } to { transform: none; } }

.kara .ln::after { content: none !important; }
.page--level .page__inner { gap: 0.85em; }

.shot { display: grid; gap: 0.5em; }
.shot__stage { position: relative; height: 11.5em; margin-inline: -23px; overflow: hidden; }
.shot__cam { position: absolute; z-index: 4; left: 50%; top: 50%; width: 5.4em; height: 4em; translate: -50% -50%; opacity: 0; transform: scale(0.4); }
.page.play .shot__cam { animation: cam 1300ms var(--ease-out) 200ms both; }
@keyframes cam { 0% { opacity: 0; transform: scale(0.4); } 30% { opacity: 1; transform: scale(1.1); } 45% { transform: scale(1); } 62% { transform: scale(0.92); } 75% { opacity: 1; transform: scale(1.05); } 100% { opacity: 0; transform: scale(1.8); } }
.shot__flash { position: absolute; inset: 0; z-index: 3; background: #fff; opacity: 0; pointer-events: none; }
.page.play .shot__flash { animation: flash 700ms ease-out 1050ms both; }
@keyframes flash { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }

.orb { position: absolute; inset: 0; opacity: 0; }
.page.play .orb { animation: orb-in 1ms linear 1120ms both; }
@keyframes orb-in { to { opacity: 1; } }
.orb__c {
  position: absolute; left: 50%; top: 0.6em; width: 7.2em; margin-left: -3.6em; aspect-ratio: 4 / 5;
  padding: 0.28em; background: #fff; box-shadow: 0.35em 0.35em 0 #8eb1de, 0.7em 0.7em 0 #c9dcf2;
  transform-origin: 50% 330%; opacity: 0;
}
.orb__c img { display: block; width: 100%; height: 100%; object-fit: cover; }
.page.play .orb__c { animation: orbit 15s linear calc(var(--k) * -2.5s) infinite; }
.page.play .orb__c img { animation: develop 1400ms ease-out 1150ms both; }
@keyframes orbit {
  0% { transform: rotate(46deg) scale(0.7); opacity: 0; filter: grayscale(1); }
  12% { opacity: 1; }
  40% { filter: grayscale(0.6); }
  50% { transform: rotate(0deg) scale(1); filter: grayscale(0); }
  60% { filter: grayscale(0.6); }
  88% { opacity: 1; }
  100% { transform: rotate(-46deg) scale(0.7); opacity: 0; filter: grayscale(1); }
}

@keyframes develop { 0% { filter: brightness(2.4) contrast(0.4) blur(3px); } 100% { filter: none; } }
.shot__tags { display: flex; flex-wrap: wrap; gap: 0.35em 0.4em; justify-content: center; --off: #b8b8b8; --on: var(--color-ink); }
.shot__tags li { padding: 0.2em 0.75em; border-radius: 999px; background: #fff; box-shadow: 0 0 0 2px var(--color-ink); font-weight: 900; font-size: 0.95em; transform: scale(0); }
.page.play .shot__tags li { animation: tag 460ms cubic-bezier(0.3, 1.6, 0.5, 1) var(--tg, 2100ms) both; }
.shot__tags li:nth-child(2) { --tg: 2350ms; rotate: 1.5deg; } .shot__tags li:nth-child(3) { --tg: 2600ms; rotate: -1.5deg; }

.hook { position: relative; display: flex; align-items: flex-end; gap: 0.15em; margin-bottom: 0.05em; }
.hook__n { font-size: 2.3em; line-height: 1; --on: var(--color-orange); }
.hook__eyes { width: 2em; height: 1.12em; margin-bottom: 0.6em; opacity: 0; transform: scale(0); }
.page.play .hook__eyes { animation: eyes-pop 420ms cubic-bezier(0.3, 1.7, 0.5, 1) 900ms both; }
@keyframes eyes-pop { to { opacity: 1; transform: none; } }
.eye { transform-box: fill-box; transform-origin: 50% 50%; animation: eye-blink 3.6s steps(1) 1.6s infinite; }
@keyframes eye-blink { 0%, 90%, 100% { transform: none; } 92%, 95% { transform: scaleY(0.1); } }

.climb { display: grid; grid-template-columns: 3.2em minmax(0, 1fr); column-gap: 0.9em; }
.climb__route { position: relative; display: grid; grid-template-rows: repeat(5, 1fr); height: 10.8em; margin: 0; padding: 0; list-style: none; }
.climb__route::before { content: ""; position: absolute; left: 50%; top: 0.9em; bottom: 0.9em; width: 4px; margin-left: -2px; background: repeating-linear-gradient(to bottom, var(--color-ink) 0 6px, transparent 6px 11px); }
.climb__stop { position: relative; display: grid; place-items: center; }
.climb__stop b { display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2.5px var(--color-ink); font-family: var(--font-display); font-weight: 800; font-size: 0.95em; transition: background-color 300ms linear, color 300ms linear; }
.climb__stop b::before { content: attr(data-n); }
.climb__me { position: absolute; left: 50%; width: 1.1em; height: 1.1em; margin-left: -0.55em; border-radius: 3px; background: var(--color-orange); box-shadow: 0.18em 0.18em 0 var(--color-blue); bottom: 0.95em; z-index: 2; }

.page.play .climb__me { animation: climb 3.6s cubic-bezier(0.65, 0, 0.35, 1) var(--cs, 900ms) both; }
@keyframes climb {
  0% { bottom: 0.95em; } 14% { bottom: 0.95em; }
  22%, 32% { bottom: calc(0.95em + 25% * 0.92); } 40%, 50% { bottom: calc(0.95em + 50% * 0.92); }
  58%, 70% { bottom: calc(0.95em + 75% * 0.92); } 82%, 100% { bottom: calc(100% - 2em); }
}
.page.play .climb__stop:nth-child(5) b { background: var(--color-blue-tint); transition-delay: calc(var(--cs, 900ms) + 300ms); }
.page.play .climb__stop:nth-child(4) b { background: var(--color-blue-tint); transition-delay: calc(var(--cs, 900ms) + 800ms); }
.page.play .climb__stop:nth-child(3) b { background: var(--color-blue-tint); transition-delay: calc(var(--cs, 900ms) + 1450ms); }
.page.play .climb__stop:nth-child(2) b { background: var(--color-blue); color: #fff; transition-delay: calc(var(--cs, 900ms) + 2100ms); }
.page.play .climb__stop:nth-child(1) b { background: var(--color-orange); color: #fff; transition-delay: calc(var(--cs, 900ms) + 2950ms); }
.climb__txt { display: grid; grid-template-rows: repeat(5, 1fr); height: 10.8em; font-weight: 900; font-size: 1em; line-height: 1.5; }
.climb__l { align-self: center; }
.climb__l--5 { grid-row: 1; padding-left: 0.6em; border-left: 4px solid var(--color-orange); }
.climb__l--4 { grid-row: 2; padding-left: 0.6em; border-left: 4px solid var(--color-blue); }
.climb__l--1 { grid-row: 4 / span 2; color: var(--color-ink-soft); }

.g-scroll .climb__box { height: 12.5em; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; }
.g-scroll .climb__box::-webkit-scrollbar { display: none; }
.g-scroll .climb { height: 36em; align-items: end; }
.g-scroll .climb__route, .g-scroll .climb__txt { position: sticky; bottom: 0; }
.g-scroll .page.play .climb__me { animation: none; transition: bottom 400ms var(--ease-out); }
.g-scroll .climb__hint { display: block; }
.climb__hint { display: none; font-family: var(--font-display); font-weight: 700; font-size: 0.8em; letter-spacing: 0.12em; color: var(--color-orange); }

.g-flow .climb { grid-template-columns: 1fr; row-gap: 0.6em; }
.g-flow .climb__route { grid-template-rows: none; grid-template-columns: repeat(5, 1fr); height: auto; direction: rtl; }
.g-flow .climb__route::before { left: 0.9em; right: 0.9em; top: 50%; bottom: auto; width: auto; height: 4px; margin: -2px 0 0; background: repeating-linear-gradient(to right, var(--color-ink) 0 6px, transparent 6px 11px); }
.g-flow .climb__me { display: none; }
.g-flow .climb__txt { grid-template-rows: none; height: 4.6em; }
.g-flow .climb__l { grid-row: 1 !important; grid-column: 1; opacity: 0; transition: opacity 300ms linear; }
.g-flow .climb__l.is-on { opacity: 1; }
.g-flow .page.play .climb__stop b { background: #fff; color: var(--color-ink); transition: none; }
.g-flow .climb__stop.is-on b { background: var(--color-orange) !important; color: #fff !important; }

.ttl--co { font-family: "Dela Gothic One", var(--font-body); font-weight: 400; font-size: 1.75em; line-height: 1.25; letter-spacing: 0.02em; }

.shot__tags { gap: 0.55em 0.5em; }
.shot__tags li {
  position: relative; padding: 0.7em 0.8em 0.45em; border-radius: 1px; background: #fff; box-shadow: 0.12em 0.18em 0 rgb(33 33 33 / 0.18), 0 0 0 1.5px rgb(33 33 33 / 0.12);
  font-size: 0.92em;
}
.shot__tags li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 0.32em; background: var(--color-orange); opacity: 0.85; }
.shot__tags li:nth-child(2)::before { background: var(--color-blue); }
.shot__tags li:nth-child(3)::before { background: #8eb1de; }
.shot__tags li::after { content: ""; position: absolute; right: 0; bottom: 0; width: 0.7em; height: 0.7em; background: linear-gradient(135deg, #fff 0 48%, #dcdcdc 50% 100%); box-shadow: -1px -1px 2px rgb(0 0 0 / 0.08); }
.shot__tags li:nth-child(1) { rotate: -2deg; }
.page.play .shot__tags li { animation: stick 520ms cubic-bezier(0.3, 1.4, 0.5, 1) var(--tg, 2100ms) both; }
@keyframes stick { 0% { transform: translateY(-0.6em) scale(1.25) rotate(-6deg); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; opacity: 1; } }

.mega:has(.q2) { position: relative; }
.mega__2 { white-space: nowrap; }
.q2 { display: inline-block; color: var(--color-orange); rotate: 12deg; margin-left: -0.08em; opacity: 0; transform: translateY(-0.5em) scale(0.4); }
.page.play .q2 { animation: q2 520ms cubic-bezier(0.3, 1.7, 0.5, 1) 1500ms both; }
@keyframes q2 { to { opacity: 1; transform: none; } }

.shot__cam { width: 7.4em; height: 5.5em; }
.page.play .shot__cam { animation: cam2 1500ms var(--ease-out) 150ms both; }
@keyframes cam2 {
  0% { opacity: 0; transform: scale(0.3) rotate(-8deg); } 22% { opacity: 1; transform: scale(1.08) rotate(2deg); } 34% { transform: scale(1) rotate(0); }
  52% { transform: scale(1); } 60% { transform: scale(0.84); } 68% { opacity: 1; transform: scale(1.06); } 100% { opacity: 0; transform: scale(1.5); }
}
.shot__flash { position: fixed; inset: 0; z-index: 30; background: radial-gradient(circle at 50% 50%, #fff 0 35%, rgb(255 255 255 / 0.85) 60%, rgb(255 255 255 / 0.6) 100%); }
.page.play .shot__flash { animation: flash2 1100ms ease-out 1020ms both; }
@keyframes flash2 { 0% { opacity: 0; } 8% { opacity: 1; } 35% { opacity: 0.9; } 100% { opacity: 0; } }
.page.play .orb { animation: burst 900ms cubic-bezier(0.2, 1.2, 0.4, 1) 1100ms both; transform-origin: 50% 55%; }
@keyframes burst { 0% { opacity: 1; transform: scale(0.12) translateY(30%); } 100% { opacity: 1; transform: none; } }
.page.play .orb__c img { animation: develop2 2200ms ease-out 1150ms both; }
@keyframes develop2 { 0% { filter: brightness(3.2) contrast(0.25) saturate(0) blur(3px); } 45% { filter: brightness(1.7) contrast(0.6) saturate(0.4) blur(1px); } 100% { filter: none; } }

.key--big { font-size: 1.2em; line-height: 1.2; }
.nb { white-space: nowrap; }

.g-flow .climb__txt { height: auto; gap: 0.35em; }
.g-flow .climb__l { grid-row: auto !important; opacity: 1; transition: none; align-self: flex-start; }
.g-flow .climb__l--1 { order: 1; } .g-flow .climb__l--4 { order: 2; } .g-flow .climb__l--5 { order: 3; }
.g-flow .climb__txt { display: flex; flex-direction: column; }
.g-flow .climb__stop b { transition: background-color 250ms linear, color 250ms linear, transform 300ms var(--ease-back); }
.g-flow .climb__stop.is-on b { transform: scale(1.18); }
.g-flow .climb__stop.is-done b { background: var(--color-blue-tint) !important; }
.g-flow .climb__stop:nth-child(2).is-done b { background: var(--color-blue) !important; color: #fff !important; }

.diary { display: grid; gap: 0.5em; }
.diary__stage { position: relative; height: 7.4em; margin-inline: -23px; overflow: hidden; }
.diary__cards { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.diary__c {
  position: absolute; left: 50%; top: 0.3em; width: 8.6em; margin-left: -4.3em; aspect-ratio: 4 / 3;
  padding: 0.3em 0.3em 1.3em; background: #fff; box-shadow: 0 0.25em 0.8em rgb(33 33 33 / 0.12);
  transform: translateX(calc(var(--off, 0) * 72%)) scale(calc(1 - var(--abs, 0) * 0.2)) rotate(calc(var(--off, 0) * 5deg));
  filter: grayscale(calc(var(--abs, 0) * 1)); opacity: calc(1 - var(--abs, 0) * 0.25); z-index: calc(10 - var(--abs, 0));
  transition: transform 900ms var(--ease-in-out), filter 900ms linear, opacity 900ms linear;
}
.diary__c img { display: block; width: 100%; height: 100%; object-fit: cover; }
.diary__day { position: absolute; left: 0.5em; bottom: 0.05em; font-family: var(--font-script); font-size: 1.1em; color: var(--color-orange); }
.diary__ruler { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.6em; }
.diary__ruler .diary__ticks { width: auto; margin-inline: 0; }
.diary__no { font-family: var(--font-display); font-weight: 800; font-size: 1.1em; line-height: 1; }
.diary__ticks { display: block; width: calc(100% + 46px); height: 0.7em; margin-inline: -23px; background: repeating-linear-gradient(90deg, rgb(33 33 33 / 0.35) 0 1px, transparent 1px 7px); position: relative; }
.diary__ticks::after { content: ""; position: absolute; left: 50%; top: -0.4em; bottom: 0; width: 2px; margin-left: -1px; background: var(--color-ink); }
.diary__pill { padding: 0.2em 0.9em; border-radius: 999px; background: #fff; box-shadow: 0 0 0 2px var(--color-ink); font-family: var(--font-display); font-weight: 700; font-size: 0.75em; letter-spacing: 0.1em; }
.diary__pill em { font-style: normal; color: var(--color-orange); }

.diary__txt { display: flex; flex-direction: column; gap: 0.3em; height: auto; font-weight: 900; line-height: 1.55; }
.diary__txt .climb__l { grid-row: auto; align-self: flex-start; padding-left: 0.6em; border-left: 4px solid var(--color-blue-tint); }
.diary__txt .climb__l { border-left-color: transparent !important; transition: border-color 200ms linear var(--lt, 0ms); }
.page.play .diary__txt .climb__l--1 { border-left-color: var(--color-blue-tint) !important; }
.page.play .diary__txt .climb__l--4 { border-left-color: var(--color-blue) !important; }
.page.play .diary__txt .climb__l--5 { border-left-color: var(--color-orange) !important; }

.levels { display: grid; gap: 0.4em; }
.levels__head { display: flex; align-items: flex-end; gap: 0.25em; line-height: 0.82; }
.levels__lv { font-family: var(--font-display); font-weight: 800; font-size: 1em; letter-spacing: 0.14em; padding-bottom: 0.35em; writing-mode: vertical-rl; rotate: 180deg; }
.levels__num { position: relative; display: block; height: 0.86em; width: 2.3em; overflow: hidden; font-family: var(--font-display); font-weight: 800; font-size: 5.6em; letter-spacing: -0.03em; }
.levels__n { position: absolute; left: 0; top: 0; display: block; color: var(--lv-c, var(--color-ink)); transition: color 400ms linear; }
.levels__n.is-in { animation: lv-in 620ms cubic-bezier(0.2, 1.1, 0.35, 1) 180ms both; }
.levels__n.is-out { animation: lv-out 260ms ease-in both; }
@keyframes lv-in { from { transform: translateY(105%) skewY(8deg); } to { transform: none; } }
@keyframes lv-out { to { transform: translateY(-105%) skewY(-8deg); opacity: 0; } }
.levels__tag { margin: 0 0 0.55em 0.3em; padding: 0.15em 0.7em; border-radius: 999px; font-weight: 900; font-size: 1.1em; color: #fff; background: var(--lv-c, var(--color-ink)); opacity: 0; transform: translateX(-0.6em); transition: opacity 300ms linear, transform 500ms var(--ease-out), background-color 300ms linear; }
.levels__tag.is-on { opacity: 1; transform: none; }

.levels__txt { display: flex; flex-direction: column; gap: 0.15em; height: auto; font-weight: 900; }
.levels__txt .climb__l { grid-row: auto; align-self: flex-start; font-size: 1.35em; line-height: 1.4; transition: font-size 500ms var(--ease-out), opacity 500ms linear; }
.levels__txt .climb__l.is-past { font-size: 0.95em; opacity: 0.5; }
.levels__txt .climb__l--4 { --on: var(--color-blue); }
.levels__txt .climb__l--5 { --on: var(--color-orange); }
.levels__txt .climb__l.is-wait { max-height: 0; overflow: hidden; margin: 0; }
.levels__txt .climb__l { max-height: 4em; border: 0 !important; padding-left: 0 !important; }

.key--blue { --on: var(--color-blue); }
.page--level .body + .body--steps, .page--level .body--steps + .body { margin-top: calc(var(--u) * 1.5); }

.page--level .body + .gallery, .page--level .gallery + .body--steps { margin-top: calc(var(--u) * 1.5); }
.gallery .diary__c { padding-bottom: 0.3em; }
.gallery .diary__stage { height: 6.4em; }
.page--level .hook__n { font-size: 2em; }
.page--level .mega--q { font-size: 1.8em; }
@media (min-width: 960px) { .page--level .body { line-height: 1.72; } }
.gallery .diary__c { width: 7.8em; margin-left: -3.9em; }

.page__inner { justify-content: flex-start; padding-top: calc(var(--header-h) + 0.8em); padding-bottom: calc(4.2em + 10px); }
.page--concept .page__inner { gap: 1.05em; }
.page__inner > :first-child { margin-top: auto; }
.page__inner > :last-child { margin-bottom: auto; }

.page__inner > .enlab + * { margin-top: -0.55em; }

.page { --u: clamp(10.5px, min(1.86dvh, 3.15vw), 15.2px); }
.page__inner { gap: 0 !important; }
.page__inner > * + * { margin-top: calc(var(--u) * 1.1); }

.page--about .enlab + .ttl { margin-top: calc(var(--u) * 0.05) !important; }
.page--about .ttl + .mega { margin-top: calc(var(--u) * 1.5); }
.page--about .mega + .shot, .page--about .shot + .body { margin-top: calc(var(--u) * 1.6); }

.page--concept .enlab + .hero-ttl { margin-top: calc(var(--u) * 1.3) !important; }
.page--concept .hero-ttl + .big { margin-top: calc(var(--u) * 1.6); }
.page--concept .big + .body { margin-top: calc(var(--u) * 1.5); }
.page--concept .body + .words { margin-top: calc(var(--u) * 1.6); }
.page--concept .words + .body { margin-top: calc(var(--u) * 1.3); }

.page--level .mega + .body { margin-top: calc(var(--u) * 1.5); }
.page--level .body + .levels, .page--level .levels + .body { margin-top: calc(var(--u) * 1.6); }

.hero-ttl .l { font-size: 3.3em; }
.words { font-size: 2.1em; }
.shot__stage { height: 10.5em; }

@media (max-height: 740px) {
  .page__inner { gap: 0.8em; padding-top: calc(var(--header-h) + 0.3em); }
  .enlab__a { font-size: 1.7em; } .enlab__b { font-size: 1.8em; } .enlab__pic { height: 1.65em; width: 3.8em; } .enlab__c { font-size: 0.9em; }
  @keyframes pill { 0% { opacity: 0; transform: none; width: 0; } 100% { opacity: 1; transform: none; width: 3.8em; } }
  .hero-ttl .s { font-size: 1.7em; } .hero-ttl .l { font-size: 2.6em; }
  .page--concept .body { line-height: 1.62; } .page--concept .body--strong { font-size: 1.25em; } .page--concept .big { font-size: 1.5em; }
  .page--about .body { line-height: 1.7; }
  .words { font-size: 1.8em; }
  .mega { font-size: 1.95em; } .mega--q { font-size: 1.8em; }
  .body { line-height: 1.75; }
  .film { padding: 13px 10px 8px; }
  .film__f figure { aspect-ratio: 16 / 10; }
  .climb__route, .climb__txt { height: 9.4em; } .climb__stop b { width: 1.6em; height: 1.6em; }
  .hook__n { font-size: 2em; }
  .page--level .page__inner { gap: 0.6em; }
  .shot__stage { height: 8.8em; } .orb__c { width: 6.4em; margin-left: -3.2em; } .shot__cam { width: 6.2em; height: 4.6em; }
  .ttl--co { font-size: 1.5em; }

  .diary__stage { height: 6.2em; } .diary__c { width: 7.2em; margin-left: -3.6em; }
  .page--level .hook__n { font-size: 1.7em; }
  .page--level .page__inner { padding-top: calc(var(--header-h) + 0.4em); padding-bottom: calc(3.4em + 8px); }
  .page--level .body { line-height: 1.6; }
  .page--level .big { font-size: 1.45em; }
  .page--level .hook__eyes { margin-bottom: 0.45em; }
  .levels__num { font-size: 4.4em; } .levels__txt .climb__l { font-size: 1.2em; }
  .diary { gap: 0.35em; } .diary__txt { gap: 0.15em; line-height: 1.45; }
}
@media (max-height: 600px) {
  .shot__stage { height: 8em; }
  .page__inner { gap: 0.6em; }
  .enlab__c { display: none; }
  .hero-ttl .l { font-size: 2.8em; } .words { font-size: 1.75em; } .big { font-size: 1.5em; }
  .body { line-height: 1.65; }
}

@media (prefers-reduced-motion: reduce) {
  .kara .c { color: var(--on, var(--color-ink)) !important; transition: none !important; }
  .mk { background-size: 100% 100% !important; transition: none !important; }
  .film, .film__f img, .st { clip-path: none !important; filter: none !important; transform: none !important; transition: none !important; }
  .marq span, .nextbtn__arrow i, .loader__logo .mk--1, .loader__logo .mk--2, .loader__logo .mk--3 { animation: none !important; transform: none !important; }
  .kara .c, .enlab > *, .film, .film__f img, .film__f .ln.kara { animation: none !important; opacity: 1 !important; transform: none !important; color: var(--on, #212121) !important; }
  .enlab__pic { width: 4.6em !important; }
  .kara .ln::after { content: none !important; }
.page--level .page__inner { gap: 0.85em; }
  .loader { transition: none; }
}

.page__inner { padding-bottom: calc(14px + 46px + var(--u) * 2); }
.nb { white-space: nowrap; }
.gallery { opacity: 0; }
.page.play .gallery { animation: gal-in 650ms var(--ease-out) var(--gt, 0ms) both; }
@keyframes gal-in { 0% { opacity: 0; transform: translateY(0.8em); } 100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .gallery { opacity: 1; } .page.play .gallery { animation: none; } }

.hero-ttl .s { font-size: 2.1em; } .hero-ttl .l { font-size: 3em; }
.words { font-size: 1.9em; }
.page--concept .enlab + .hero-ttl { margin-top: calc(var(--u) * 1.1) !important; }
.page--concept .hero-ttl + .big, .page--concept .body + .words { margin-top: calc(var(--u) * 1.5); }
.page--concept .words + .body { margin-top: calc(var(--u) * 1.2); }
.page--concept .big { font-size: 1.55em; }
@media (max-height: 740px) {
  .page__inner { padding-top: calc(var(--header-h) + 0.2em); }
  .hero-ttl .s { font-size: 1.6em; } .hero-ttl .l { font-size: 2.4em; }
  .words { font-size: 1.6em; }
  .page--concept .big { font-size: 1.4em; }
  .page--concept .body--strong { font-size: 1.15em; }
  .page--level .hook__n { font-size: 1.5em; }
  .page--level .big { font-size: 1.35em; }
  .gallery .diary__stage { height: 5.6em; } .gallery .diary__c { width: 6.8em; margin-left: -3.4em; }
}
@media (max-height: 600px) {
  .hero-ttl .l { font-size: 2.2em; } .words { font-size: 1.45em; }
  .page--level .page__inner > * + * { margin-top: calc(var(--u) * 0.9); }
}

.mk { transition-delay: 0ms !important; }
.page.play .mk:not(.is-on) { background-size: 0% 100%; }
.page.play .gallery { animation: none; }
.page.play .gallery.is-on { animation: gal-in 650ms var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) { .page.play .gallery { opacity: 1; animation: none !important; } }

.orb__c { width: 9em; margin-left: -4.5em; aspect-ratio: 1 / 1; padding: 0.3em; }
.shot__stage { height: 12.2em; }

.shot__tags { gap: 0.9em 0.55em; padding-top: 0.35em; }
.shot__tags li { padding: 0.75em 0.85em 0.5em; transform-origin: 50% 0.15em; box-shadow: 0.1em 0.35em 0.45em -0.1em rgb(33 33 33 / 0.28), 0 0 0 1px rgb(33 33 33 / 0.08); }
.shot__tags li::before {
  left: 50%; right: auto; top: -0.32em; width: 0.78em; height: 0.78em; margin-left: -0.39em; border-radius: 50%; opacity: 1; z-index: 2;
  background: radial-gradient(circle at 35% 32%, #fff 0 14%, var(--pin, var(--color-orange)) 30% 100%);
  box-shadow: 0.12em 0.2em 0.12em rgb(33 33 33 / 0.3);
}
.shot__tags li:nth-child(2) { --pin: var(--color-blue); }
.shot__tags li:nth-child(3) { --pin: var(--color-orange); }
.shot__tags li:nth-child(2)::before, .shot__tags li:nth-child(3)::before { background: radial-gradient(circle at 35% 32%, #fff 0 14%, var(--pin) 30% 100%); }
.shot__tags li:nth-child(1) { rotate: -3deg; } .shot__tags li:nth-child(2) { rotate: 2.5deg; } .shot__tags li:nth-child(3) { rotate: -1.5deg; }
.page.play .shot__tags li { animation: pin-in 560ms cubic-bezier(0.3, 1.4, 0.5, 1) var(--tg, 2100ms) both, sway 3.2s var(--ease-in-out) calc(var(--tg, 2100ms) + 560ms) infinite; }
.shot__tags li:nth-child(2) { animation-duration: 560ms, 3.8s !important; }
@keyframes pin-in { 0% { opacity: 0; transform: translateY(-0.8em) scale(1.2) rotate(-8deg); } 55% { opacity: 1; transform: translateY(0.08em) scale(0.98) rotate(4deg); } 100% { opacity: 1; transform: none; } }
@keyframes sway { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(2.2deg); } }

.boom { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; margin: 0; pointer-events: none; opacity: 0; }
.boom__n { font-family: "Dela Gothic One", var(--font-body); font-size: clamp(90px, 30vw, 150px); line-height: 1; color: var(--color-orange); }
.page.play .boom { animation: boom-wrap 1450ms linear both; }
.page.play .boom__n { animation: boom 1450ms cubic-bezier(0.3, 1.5, 0.5, 1) both; }
@keyframes boom-wrap { 0% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes boom {
  0% { transform: scale(0.2) rotate(-14deg); }
  18% { transform: scale(1.12) rotate(4deg); }
  28% { transform: scale(1) rotate(0deg); }
  66% { transform: scale(1) rotate(0deg); }
  100% { transform: translate(-28%, -32vh) scale(0.25); }
}

.page--level .marq { opacity: 0; }
.page--level.play .marq { animation: gal-in 600ms var(--ease-out) 1300ms both; }
.page--level.play .hook__eyes { animation-delay: 1900ms; }

.gallery .diary__stage { height: 8.6em; }
.gallery .diary__c {
  width: 9.4em; margin-left: -4.7em; top: 0.6em; padding: 0.35em 0.35em 1.25em;
  box-shadow: 0.1em 0.3em 0.6em rgb(33 33 33 / 0.22);
  transform: translateX(calc(var(--off, 0) * 70%)) scale(calc(1 - var(--abs, 0) * 0.2)) rotate(calc(var(--off, 0) * 6deg + var(--tilt, 0deg)));
}
.gallery .diary__c:nth-child(1) { --tilt: -3deg; } .gallery .diary__c:nth-child(2) { --tilt: 2.5deg; } .gallery .diary__c:nth-child(3) { --tilt: -1.5deg; }
.gallery .diary__c:nth-child(4) { --tilt: 3deg; } .gallery .diary__c:nth-child(5) { --tilt: -2deg; }
.gallery .diary__c::before { content: ""; position: absolute; left: 50%; top: -0.35em; width: 2.6em; height: 0.75em; margin-left: -1.3em; rotate: -4deg; background: rgb(242 105 35 / 0.45); }
.gallery .diary__c:nth-child(even)::before { background: rgb(5 99 174 / 0.35); rotate: 5deg; }

@media (max-height: 740px) {
  .orb__c { width: 7.8em; margin-left: -3.9em; }
  .shot__stage { height: 10.4em; }
  .gallery .diary__stage { height: 7.4em; } .gallery .diary__c { width: 8.2em; margin-left: -4.1em; }
}
@media (max-height: 600px) {
  .orb__c { width: 7em; margin-left: -3.5em; } .shot__stage { height: 9.2em; }
  .gallery .diary__stage { height: 6.6em; } .gallery .diary__c { width: 7.4em; margin-left: -3.7em; }
}
@media (prefers-reduced-motion: reduce) {
  .boom { display: none; } .page--level .marq { opacity: 1; animation: none !important; }
  .page.play .shot__tags li { animation: none !important; opacity: 1; transform: none; }
}

.page--level .big { font-size: 1.5em; }
.shot__tags { gap: 0.75em 0.5em; }
@media (max-height: 740px) { .shot__stage { height: 9.8em; } .orb__c { width: 7.5em; margin-left: -3.75em; } }
@media (max-height: 740px) {
  .shot__stage { height: 9.2em; } .orb__c { top: 0.4em; }
  .shot__tags { gap: 0.6em 0.45em; padding-top: 0.25em; } .shot__tags li { padding: 0.6em 0.8em 0.4em; }
  .page--about .mega { font-size: 1.8em; }
  .gallery .diary__stage { height: 7em; }
}

.gallery .diary__c::before { opacity: calc(1 - var(--abs, 0)); transition: opacity 600ms linear; }
.gallery .diary__c { top: 0.5em; }
.gallery .diary__stage { height: 8.9em; }
@media (max-height: 740px) { .gallery .diary__stage { height: 7.4em; } }
@media (max-height: 600px) { .gallery .diary__stage { height: 6.9em; } }

.page--level .page__inner { padding-bottom: calc(18px + 24px + var(--u) * 1.8) !important; }
@media (max-height: 740px) {
  .page--level .mega + .body, .page--level .body + .gallery, .page--level .gallery + .body--steps, .page--level .body--steps + .body { margin-top: calc(var(--u) * 1.3); }
  .page--level .body { line-height: 1.55; }
  .gallery .diary__stage { height: 7em; } .gallery .diary__c { width: 7.8em; margin-left: -3.9em; }
}

@media (min-height: 741px) {
  .page { font-size: clamp(10.5px, min(1.6dvh, 3.15vw), 15.2px); --u: clamp(10.5px, min(1.6dvh, 3.15vw), 15.2px); }
}
@media (max-height: 600px) { .shot__stage { height: 8.4em; } .orb__c { width: 6.8em; margin-left: -3.4em; } }
@media (max-height: 680px) { .shot__stage { height: 8.6em; } }
@media (max-height: 560px) { .shot__stage { height: 7.8em; } .orb__c { width: 6.3em; margin-left: -3.15em; } }