:root {
  --ink: #070710;
  --paper: #f3efe6;
  --blue: #67d7ff;
  --violet: #7d5cff;
  --pink: #ff4ca4;
  --gold: #f2c76e;
  --ease: cubic-bezier(.2,.75,.2,1);
}

* { box-sizing: border-box; }

html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }

body {
  color: #fff;
  background: var(--ink);
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

button { color: inherit; font: inherit; }
button, img { -webkit-user-drag: none; }
button:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }

.film-grain {
  position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
  animation: grain .22s steps(2) infinite;
}

.flash { position: fixed; inset: 0; z-index: 100; background: white; opacity: 0; pointer-events: none; }
.flash.is-flashing { animation: flash .65s ease-out; }

.hud {
  position: fixed; z-index: 80; top: 0; left: 0; right: 0; height: 76px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 clamp(20px, 4vw, 70px); mix-blend-mode: difference;
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
}

.hud__steps { display: flex; gap: 8px; }
.hud__steps span { width: 26px; height: 2px; background: rgba(255,255,255,.28); transition: .5s var(--ease); }
.hud__steps span.is-active { width: 48px; background: #fff; }
.sound-toggle {
  justify-self: end; display: flex; align-items: center; gap: 10px; border: 0; padding: 8px;
  background: transparent; cursor: pointer; font-size: 10px; letter-spacing: .14em;
}
.sound-bars { height: 14px; display: flex; align-items: end; gap: 2px; }
.sound-bars i { display: block; width: 2px; background: currentColor; animation: sound 1s ease-in-out infinite alternate; }
.sound-bars i:nth-child(1) { height: 6px; }.sound-bars i:nth-child(2) { height: 13px; animation-delay: -.35s; }.sound-bars i:nth-child(3) { height: 9px; animation-delay: -.7s; }
.sound-toggle.is-muted .sound-bars i { animation: none; height: 2px; }

.experience, .scene { width: 100%; height: 100%; }
.scene {
  position: absolute; inset: 0; visibility: hidden; opacity: 0; overflow: hidden;
  transform: scale(1.025); transition: opacity .8s ease, transform 1.2s var(--ease), visibility .8s;
}
.scene.is-active { visibility: visible; opacity: 1; transform: scale(1); z-index: 2; }

.scene--cover {
  display: grid; place-items: center; text-align: center;
  background:
    radial-gradient(circle at 50% 42%, rgba(103,74,255,.2), transparent 27%),
    radial-gradient(circle at 20% 80%, rgba(255,48,113,.1), transparent 22%),
    #080711;
}
.scene--cover::before, .scene--cover::after { content: ""; position: absolute; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; }
.scene--cover::before { width: 72vw; height: 72vw; max-width: 840px; max-height: 840px; }
.scene--cover::after { width: 54vw; height: 54vw; max-width: 630px; max-height: 630px; }

.cover-orbit { position: absolute; width: min(66vw,760px); aspect-ratio: 1; border: 1px dashed rgba(255,255,255,.12); border-radius: 50%; animation: rotate 36s linear infinite; }
.cover-orbit span { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 25px var(--blue); }
.cover-orbit span:nth-child(1) { top: 7%; left: 28%; }.cover-orbit span:nth-child(2) { right: 2%; top: 54%; background: var(--pink); }.cover-orbit span:nth-child(3) { left: 8%; bottom: 17%; background: var(--gold); }
.cover-copy { position: relative; z-index: 2; padding: 24px; }
.eyebrow, .chapter-no { font-size: 11px; letter-spacing: .34em; text-transform: uppercase; opacity: .72; }
.cover-title { margin: 20px 0 18px; line-height: .88; }
.cover-title span { display: block; font-size: clamp(26px, 3.2vw, 50px); font-weight: 300; letter-spacing: .4em; text-indent: .4em; }
.cover-title strong { display: block; font: 900 clamp(74px, 12vw, 170px)/.86 "Microsoft YaHei", sans-serif; letter-spacing: -.08em; background: linear-gradient(125deg,#fff 20%,#8ee6ff 56%,#bf72ff 85%); -webkit-background-clip: text; color: transparent; }
.cover-sub { margin: 0 auto 32px; max-width: 520px; color: rgba(255,255,255,.64); font: 300 clamp(13px,1.5vw,17px)/1.9 "Microsoft YaHei", sans-serif; letter-spacing: .1em; }
.primary-btn {
  min-width: 210px; height: 56px; display: inline-flex; align-items: center; justify-content: space-between; gap: 30px;
  padding: 0 20px 0 26px; border: 1px solid rgba(255,255,255,.42); background: rgba(255,255,255,.05); backdrop-filter: blur(10px);
  cursor: pointer; font-size: 13px; letter-spacing: .16em; transition: .3s ease;
}
.primary-btn b { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: #111; }
.primary-btn:hover { background: #fff; color: #080711; transform: translateY(-3px); }
.primary-btn:hover b { background: #111; color: #fff; }
.scroll-mark { position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%); font-size: 8px; letter-spacing: .25em; opacity: .35; writing-mode: vertical-rl; }
.scroll-mark::after { content:""; display:block; width:1px; height:38px; margin:10px auto 0; background:currentColor; animation: breathe 1.5s infinite; }

.reveal { opacity: 0; transform: translateY(18px); animation: reveal .8s var(--ease) forwards; }
.reveal:nth-child(2) { animation-delay: .12s; }.reveal:nth-child(3) { animation-delay: .24s; }.reveal:nth-child(4) { animation-delay: .36s; }

.scene-media { position: absolute; inset: 0; background-position: center; background-size: cover; transform: scale(1.04); transition: transform 7s linear; }
.scene.is-active .scene-media { transform: scale(1); }
.scene-media--sasuke { background-image: url("assets/sasuke-hero.jpg"); background-position: 60% center; image-rendering: auto; }
.scene--ninja { background: #040714; }
.ninja-vignette { position:absolute; inset:0; background: linear-gradient(90deg,rgba(2,4,14,.96) 0%,rgba(4,7,18,.7) 35%,rgba(2,4,12,.05) 66%), linear-gradient(0deg,rgba(2,4,14,.8),transparent 45%); }
.electric-field { position: absolute; inset: 0; opacity: 0; pointer-events: none; background: repeating-linear-gradient(112deg,transparent 0 8%,rgba(136,227,255,.22) 8.1%,transparent 8.4% 16%); }
.electric-field.is-live { animation: electric .9s steps(2); }
.chapter-card { position: absolute; z-index: 4; top: 50%; transform: translateY(-46%); max-width: 570px; }
.chapter-card--left { left: clamp(28px,8vw,140px); }
.chapter-card h2, .race-copy h2, .band-copy h2 { margin: 16px 0 24px; font: 900 clamp(58px,8vw,124px)/.84 "Microsoft YaHei",sans-serif; letter-spacing: -.1em; }
.chapter-card h2 em, .race-copy h2 em, .band-copy h2 em { color: var(--blue); font-style: normal; }
.chapter-copy { color: rgba(255,255,255,.65); font-size: 14px; line-height: 2; letter-spacing: .08em; margin-bottom: 30px; }
.primary-btn--blue { border-color: rgba(103,215,255,.7); box-shadow: 0 0 45px rgba(70,170,255,.12); }
.character-stamp { position:absolute; z-index:3; right:clamp(20px,5vw,82px); bottom:46px; display:flex; flex-direction:column; align-items:flex-end; mix-blend-mode:overlay; }
.character-stamp b { font-size: clamp(44px,8vw,130px); letter-spacing:-.06em; line-height:.78; }.character-stamp span { font-size:13px; letter-spacing:.55em; }

.scene--race { background: #e9f8ff; color:#101b30; }
.scene-media--race { background-image:url("assets/uma-group.jpg"); background-position:center; }
.race-overlay { position:absolute; inset:0; background: linear-gradient(90deg,rgba(246,252,255,.98) 0%,rgba(246,252,255,.82) 25%,rgba(246,252,255,.08) 55%),linear-gradient(0deg,rgba(236,250,255,.88),transparent 45%); }
.race-copy { position:absolute; z-index:3; top:17%; left:clamp(24px,7vw,120px); }
.race-copy h2 { font-size:clamp(58px,7.5vw,116px); margin-top:14px; text-shadow:0 2px 0 rgba(255,255,255,.5); }
.race-copy h2 em { color:#f0445b; }
.race-console { position:absolute; z-index:4; left:clamp(24px,7vw,120px); bottom:clamp(35px,8vh,90px); width:min(470px,calc(100vw - 48px)); color:#101b30; }
.race-status { display:flex; justify-content:space-between; align-items:end; margin-bottom:9px; font-size:11px; letter-spacing:.24em; }
.race-status b { font-size:22px; letter-spacing:-.04em; }
.race-meter { height:7px; background:rgba(17,34,52,.13); overflow:hidden; }
.race-meter i { display:block; width:0%; height:100%; background:linear-gradient(90deg,#25a7df,#9edb3e,#ffca34,#f0445b); box-shadow:0 0 18px #f0445b; transition:width .08s linear; }
.race-button { margin-top:18px; width:100%; height:68px; border:0; color:#fff; background:#101b30; display:flex; align-items:center; justify-content:space-between; padding:0 23px; cursor:pointer; box-shadow:8px 8px 0 rgba(24,126,170,.22); user-select:none; touch-action:none; transition:.16s ease; }
.race-button:active,.race-button.is-holding { transform:translate(5px,5px); box-shadow:3px 3px 0 rgba(24,126,170,.22); background:#f0445b; }
.race-button span { font-size:17px;font-weight:700;letter-spacing:.14em; }.race-button small { font-size:8px;letter-spacing:.2em;opacity:.65; }
.race-tip { margin:12px 0 0;font-size:11px;opacity:.6; }
.speed-lines { position:absolute;inset:-20%;opacity:0;background:repeating-linear-gradient(102deg,transparent 0 8%,rgba(255,255,255,.65) 8.1% 8.2%,transparent 8.3% 12%);transform:translateX(-20%); }
.speed-lines.is-fast { opacity:.65; animation:speed .34s linear infinite; }
.next-link { margin-top:15px; padding:0; border:0; background:transparent; color:#112031; font-size:12px;font-weight:700;letter-spacing:.12em;cursor:pointer; }
.next-link b { margin-left:10px;font-size:18px; }.next-link--light { position:absolute; z-index:5; right:clamp(26px,6vw,100px); bottom:48px; color:#fff; }

.scene--band { background:#110b16; }
.scene-media--band { background-image:url("assets/bocchi-group-crop.png");background-position:center; }
.band-wash { position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,6,12,.98) 0%,rgba(8,6,12,.72) 39%,rgba(8,6,12,.06) 72%),linear-gradient(0deg,rgba(8,6,12,.86),transparent 46%); }
.band-copy { position:absolute;z-index:4;left:clamp(24px,7vw,115px);top:16%;max-width:520px; }
.band-copy h2 { font-size:clamp(56px,7.5vw,112px); }.band-copy h2 em { color:var(--pink); }.band-copy>p:last-child { color:rgba(255,255,255,.65);font-size:13px;letter-spacing:.08em; }
.stage-lights { position:absolute;inset:0;overflow:hidden;opacity:.22; }
.stage-lights i { position:absolute;top:-25%;width:18%;height:100%;background:linear-gradient(180deg,rgba(255,255,255,.7),transparent 78%);filter:blur(18px);transform-origin:top;animation:spot 4s ease-in-out infinite alternate; }
.stage-lights i:nth-child(1){left:12%;transform:rotate(-23deg)}.stage-lights i:nth-child(2){left:36%;transform:rotate(-9deg);animation-delay:-1s}.stage-lights i:nth-child(3){left:58%;transform:rotate(12deg);animation-delay:-2s}.stage-lights i:nth-child(4){left:78%;transform:rotate(25deg);animation-delay:-3s}
.mixer { position:absolute;z-index:5;left:clamp(24px,7vw,115px);bottom:clamp(35px,8vh,82px);display:grid;grid-template-columns:repeat(4,minmax(86px,110px));gap:10px; }
.pad { height:92px;border:1px solid rgba(255,255,255,.18);background:rgba(10,8,14,.72);backdrop-filter:blur(12px);display:flex;flex-direction:column;align-items:flex-start;justify-content:end;padding:12px;color:#fff;cursor:pointer;position:relative;overflow:hidden;transition:.25s ease; }
.pad i { position:absolute;top:11px;right:11px;width:8px;height:8px;border-radius:50%;background:#49434f;box-shadow:none;transition:.3s; }
.pad b { font-size:17px;letter-spacing:.06em; }.pad span { font-size:8px;letter-spacing:.16em;opacity:.55;margin-top:3px; }
.pad::before { content:"";position:absolute;inset:auto 0 0;height:3px;background:var(--pad);transform:scaleX(0);transform-origin:left;transition:.3s; }
.pad.is-on { border-color:var(--pad);transform:translateY(-7px);box-shadow:0 12px 30px color-mix(in srgb,var(--pad) 26%,transparent); }.pad.is-on i { background:var(--pad);box-shadow:0 0 16px var(--pad); }.pad.is-on::before { transform:scaleX(1); }
.pad--pink{--pad:#ff4ca4}.pad--yellow{--pad:#ffca32}.pad--blue{--pad:#48b7ff}.pad--red{--pad:#ff554b}

.scene--finale { display:grid;place-items:center;background:radial-gradient(circle at 50% 42%,#22204a 0%,#111127 37%,#070711 76%);text-align:center; }
.finale-stars { position:absolute;inset:0; }.finale-stars i { position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;box-shadow:0 0 8px #fff;animation:twinkle 1.8s ease-in-out infinite alternate; }
.moon { position:absolute;top:14%;left:50%;width:min(52vw,540px);aspect-ratio:1;border-radius:50%;transform:translateX(-50%);background:radial-gradient(circle at 44% 38%,#fffdf2,#dcd9ff 48%,#9996d8 72%);box-shadow:0 0 90px rgba(174,167,255,.25);opacity:.12; }
.finale-intro { position:absolute;z-index:3;top:12%;transition:.8s ease; }.finale-intro h2 { margin:10px 0 7px;font:900 clamp(48px,7vw,92px)/1 "Microsoft YaHei",sans-serif;letter-spacing:-.08em; }.finale-intro>p:last-child { color:rgba(255,255,255,.5);font-size:12px;letter-spacing:.1em; }
.cake-wrap { position:absolute;z-index:3;bottom:14%;width:300px;height:280px;transition:1s var(--ease); }
.cake { position:absolute;left:50%;transform:translateX(-50%);background:linear-gradient(90deg,#e7bd8d,#fff0ce 48%,#d8a976);box-shadow:inset 0 -12px 0 rgba(115,55,48,.12),0 16px 30px rgba(0,0,0,.25); }
.cake--top { bottom:80px;width:190px;height:72px;border-radius:7px 7px 15px 15px;display:grid;place-items:center;color:#713a42;font:700 9px/1 sans-serif;letter-spacing:.16em; }
.cake--top::before,.cake--bottom::before { content:"";position:absolute;left:0;right:0;top:0;height:17px;border-radius:50%;background:#fff3da;box-shadow:0 7px 0 #d88fa1; }
.cake--bottom { bottom:15px;width:275px;height:85px;border-radius:8px 8px 22px 22px; }
.cake-plate { position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:340px;height:16px;border-radius:50%;background:linear-gradient(90deg,#74708c,#e7e5f4,#74708c); }
.candle { position:absolute;z-index:4;left:50%;bottom:152px;transform:translateX(-50%);width:14px;height:70px; }
.candle span { position:absolute;inset:0;background:repeating-linear-gradient(145deg,#805de7 0 7px,#fff 7px 12px);border-radius:5px; }
.flame { position:absolute;z-index:2;left:50%;bottom:66px;width:25px;height:39px;transform:translateX(-50%) rotate(45deg);border-radius:50% 50% 48% 10%;background:radial-gradient(circle at 70% 70%,#fff 0 10%,#ffdf65 28%,#ff8a38 61%,rgba(255,91,30,.2) 75%);box-shadow:0 0 30px #ffb83d,0 0 70px rgba(255,169,58,.65);animation:flame .18s ease-in-out infinite alternate;transition:.5s ease; }
.wish-button { position:absolute;z-index:5;right:clamp(24px,10vw,160px);bottom:13%;width:116px;height:116px;border:0;border-radius:50%;background:transparent;cursor:pointer;display:grid;place-items:center;user-select:none;touch-action:none; }
.wish-button svg { position:absolute;inset:0;transform:rotate(-90deg); }.wish-button circle { fill:none;stroke:rgba(255,255,255,.15);stroke-width:2; }.wish-button .wish-progress { stroke:var(--gold);stroke-width:3;stroke-dasharray:339.3;stroke-dashoffset:339.3;transition:stroke-dashoffset .04s linear; }
.wish-button span { font-size:11px;letter-spacing:.14em; }
.letter { position:absolute;z-index:7;width:min(820px,calc(100vw - 42px));min-height:430px;background:linear-gradient(145deg,#f7f1e2,#e7ddc6);color:#241d20;box-shadow:0 30px 100px rgba(0,0,0,.55);transform:rotate(-1deg);animation:letterIn 1s var(--ease) both;overflow:hidden; }
.letter::before { content:"";position:absolute;inset:10px;border:1px solid rgba(63,43,35,.18);pointer-events:none; }
.letter::after { content:"";position:absolute;inset:17px;border:1px solid rgba(139,29,42,.1);pointer-events:none; }
.letter-page { position:relative;z-index:1;min-height:430px;padding:clamp(56px,7vw,78px) clamp(34px,8vw,105px) clamp(42px,5vw,60px);display:flex;flex-direction:column;justify-content:center;animation:pageIn .65s var(--ease) both; }
.letter-page.is-leaving { animation:pageOut .34s ease-in forwards; }
.letter blockquote { position:relative;margin:24px 0 20px;font-family:"STKaiti","KaiTi",serif;font-size:clamp(27px,4vw,48px);line-height:1.75;letter-spacing:.14em;font-weight:600;text-align:center; }
.letter blockquote::before,.letter blockquote::after { position:absolute;color:rgba(139,29,42,.18);font:72px/1 Georgia,serif; }
.letter blockquote::before { content:"“";left:-28px;top:-35px; }.letter blockquote::after { content:"”";right:-18px;bottom:-58px; }
.letter blockquote span { display:block;white-space:nowrap; }
.letter-signature { margin-right:3%;font-family:"STKaiti","KaiTi",serif;font-size:clamp(16px,2.2vw,23px);letter-spacing:.12em;text-align:right;color:#554348; }
.letter-wish { margin:25px 0 26px;font-family:"STKaiti","KaiTi",serif;font-size:clamp(38px,5.8vw,66px);font-weight:600;line-height:1.45;letter-spacing:.16em;text-align:center;color:#302328; }
.letter-wish span { display:block; }
.letter-ornament { display:flex;align-items:center;justify-content:center;gap:12px;color:#8b1d2a;font-size:7px;opacity:.6; }
.letter-ornament i { display:block;width:min(24vw,170px);height:1px;background:linear-gradient(90deg,transparent,currentColor); }
.letter-ornament i:last-child { transform:scaleX(-1); }
.letter-ornament--bottom { margin-top:28px; }
.letter-seal { position:absolute;right:24px;bottom:20px;width:54px;height:54px;display:grid;grid-template-columns:1fr 1fr;place-items:center;padding:8px;background:#8b1d2a;color:#f4ddc5;font-family:"STKaiti","KaiTi",serif;font-size:16px;line-height:1;box-shadow:inset 0 0 0 3px #8b1d2a,inset 0 0 0 4px rgba(244,221,197,.55);transform:rotate(4deg); }
.page-turn { align-self:flex-end;margin:20px 3% 0;padding:8px 0;border:0;border-bottom:1px solid rgba(85,67,72,.35);background:transparent;color:#554348;font-family:"STKaiti","KaiTi",serif;font-size:14px;letter-spacing:.12em;cursor:pointer;transition:.25s ease; }
.page-turn b { display:inline-block;margin-left:9px;transition:transform .25s ease; }.page-turn:hover { color:#8b1d2a;border-color:#8b1d2a; }.page-turn:hover b { transform:translateX(5px); }
.page-number { position:absolute;left:30px;bottom:24px;font:9px/1 Georgia,serif;letter-spacing:.18em;color:rgba(85,67,72,.45); }
.replay { position:absolute;z-index:8;bottom:7%;border:0;background:transparent;color:rgba(255,255,255,.6);font-size:10px;letter-spacing:.18em;cursor:pointer; }
.confetti { position:absolute;inset:0;z-index:6;pointer-events:none; }.confetti i { position:absolute;top:-8%;width:8px;height:15px;background:var(--c);animation:confetti var(--d) linear forwards;transform:rotate(var(--r)); }
.finale-intro.is-gone { opacity:0;transform:translateY(-25px); }.cake-wrap.is-gone { opacity:.2;transform:translateY(60px) scale(.7);filter:blur(6px); }.flame.is-out { opacity:0;transform:translateX(-50%) translateY(-16px) rotate(45deg) scale(.2); }

[hidden] { display:none !important; }

@keyframes reveal { to{opacity:1;transform:none} }
@keyframes rotate { to{transform:rotate(360deg)} }
@keyframes breathe { 0%,100%{opacity:.2;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)} }
@keyframes grain { 0%{transform:translate(0,0)}25%{transform:translate(2%,-1%)}50%{transform:translate(-1%,2%)}75%{transform:translate(1%,1%)}100%{transform:translate(-2%,-2%)} }
@keyframes flash { 0%{opacity:0}12%{opacity:.95}22%{opacity:.1}34%{opacity:.75}100%{opacity:0} }
@keyframes sound { to{height:3px} }
@keyframes electric { 0%,100%{opacity:0}15%,32%,46%{opacity:1;transform:translateX(0)}20%,38%{opacity:.2;transform:translateX(12px)} }
@keyframes speed { to{transform:translateX(25%)} }
@keyframes spot { to{transform:rotate(18deg) translateX(50px)} }
@keyframes twinkle { to{opacity:.15;transform:scale(.5)} }
@keyframes flame { to{transform:translateX(-50%) rotate(43deg) scale(.92,1.08)} }
@keyframes letterIn { from{opacity:0;transform:translateY(60px) rotate(2deg) scale(.92)}to{opacity:1;transform:rotate(-1deg) scale(1)} }
@keyframes pageIn { from{opacity:0;transform:translateX(45px)}to{opacity:1;transform:none} }
@keyframes pageOut { to{opacity:0;transform:translateX(-45px)} }
@keyframes confetti { to{top:110%;transform:translateX(var(--x)) rotate(720deg)} }

@media (max-width: 760px) {
  .hud { height:60px;padding:0 16px;grid-template-columns:1fr auto; }.hud__steps{display:none}.sound-toggle span:last-child{display:none}
  .hud__brand { font-size:8px;letter-spacing:.12em; }
  .cover-title span{font-size:22px}.cover-title strong{font-size:72px;line-height:.92}.cover-sub{font-size:12px;padding:0 20px}
  .scene-media--sasuke { background-position:62% center; }.ninja-vignette{background:linear-gradient(0deg,rgba(2,4,14,.98) 0%,rgba(2,4,14,.72) 45%,rgba(2,4,14,.05) 78%)}
  .chapter-card { top:auto;bottom:46px;transform:none;max-width:calc(100% - 48px); }.chapter-card--left{left:24px}.chapter-card h2{font-size:62px;margin:11px 0 14px}.chapter-copy{font-size:12px;margin-bottom:18px}.character-stamp{display:none}
  .scene-media--race{background-size:contain;background-repeat:no-repeat;background-position:center 8%;background-color:#c9efff}.race-overlay{background:linear-gradient(0deg,rgba(246,252,255,.97) 0%,rgba(246,252,255,.72) 42%,rgba(246,252,255,.06) 74%)}
  .race-copy{top:auto;bottom:250px;left:24px}.race-copy h2{font-size:54px;margin:7px 0}.race-console{left:24px;bottom:30px}.race-tip{font-size:9px}
  .scene-media--band{background-size:contain;background-repeat:no-repeat;background-position:center 5%;background-color:#100b13}.band-wash{background:linear-gradient(0deg,rgba(8,6,12,.98) 0%,rgba(8,6,12,.72) 52%,rgba(8,6,12,.08) 82%)}
  .band-copy{top:auto;bottom:176px;left:24px}.band-copy h2{font-size:52px;margin:9px 0 12px}.band-copy>p:last-child{font-size:10px}.mixer{left:18px;right:18px;bottom:46px;grid-template-columns:repeat(4,1fr);gap:6px}.pad{min-width:0;height:86px;padding:9px}.pad b{font-size:13px}.pad span{font-size:6px}.next-link--light{right:24px;bottom:15px}
  .finale-intro{top:10%}.finale-intro h2{font-size:48px}.cake-wrap{bottom:19%;transform:scale(.82)}.wish-button{right:50%;bottom:4%;transform:translateX(50%);width:92px;height:92px}.letter{min-height:350px}.letter-page{min-height:350px;padding:46px 24px 38px}.letter blockquote{font-size:clamp(21px,6.2vw,28px);line-height:1.85;letter-spacing:.06em;margin:20px 0 14px}.letter blockquote span{white-space:normal}.letter blockquote::before{left:-8px;top:-31px}.letter blockquote::after{right:-4px;bottom:-54px}.letter-wish{font-size:clamp(32px,9vw,44px);letter-spacing:.1em;margin:20px 0}.letter-signature{font-size:15px;margin-right:24px}.page-turn{margin-top:14px;font-size:13px}.page-number{left:20px;bottom:17px}.letter-ornament--bottom{margin-top:22px}.letter-seal{width:44px;height:44px;right:17px;bottom:13px;font-size:13px}.replay{bottom:3%}
}

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