:root {
  --ink: #18140e;
  --ink-deep: #0d0a07;
  --ink-mid: #2a2116;
  --paper: #f0e3c6;
  --paper-warm: #c6ab78;
  --jade: #9eaa91;
  --gold: #d9ae62;
  --cinnabar: #a63b2b;
  --cinnabar-bright: #d35d42;
  --line: rgba(238, 220, 179, .18);
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: dark;
  font-family: "Noto Serif SC", "Songti SC", STSong, SimSun, Georgia, serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink-deep); }
body { min-width: 320px; margin: 0; overflow-x: hidden; color: var(--paper); background: radial-gradient(ellipse at 50% -10%, #41311d 0%, transparent 41rem), linear-gradient(180deg, #18130c 0%, var(--ink-deep) 65%, #171008 100%); }
button, input { font: inherit; }
button { border: 0; color: inherit; }
button:not(:disabled) { cursor: pointer; }
a { color: inherit; }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 100; padding: 10px 14px; border-radius: 999px; background: var(--paper); color: var(--ink); transition: top .2s ease; }
.skip-link:focus { top: 16px; }

.paper-grain, .ember-field { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
.paper-grain { opacity: .18; mix-blend-mode: soft-light; background-image: radial-gradient(rgba(255,255,255,.45) .45px, transparent .8px), radial-gradient(rgba(0,0,0,.52) .4px, transparent .9px); background-size: 5px 5px, 7px 7px; background-position: 0 0, 3px 1px; }
.ember-field { z-index: 0; opacity: .45; background-image: radial-gradient(circle at 12% 30%, var(--gold) 0 1px, transparent 1.5px), radial-gradient(circle at 86% 18%, #fff1ca 0 1px, transparent 1.5px), radial-gradient(circle at 71% 62%, var(--gold) 0 .8px, transparent 1.3px), radial-gradient(circle at 20% 82%, #fff1ca 0 .8px, transparent 1.3px); }

.topbar { position: fixed; z-index: 30; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: calc(12px + env(safe-area-inset-top, 0px)) 18px 12px; pointer-events: none; }
.topbar > * { pointer-events: auto; }
.seal { display: grid; width: 39px; height: 39px; place-items: center; border: 1px solid rgba(255, 229, 181, .52); border-radius: 50%; background: rgba(137, 42, 29, .84); box-shadow: 0 7px 28px rgba(0,0,0,.35), inset 0 0 0 2px rgba(255,255,255,.08); color: #fff2d8; font-size: 19px; font-weight: 800; text-decoration: none; }
.topbar__title { margin-left: auto; margin-right: 11px; color: rgba(244,225,188,.78); font-size: 12px; letter-spacing: .13em; }
.topbar__title span { color: var(--cinnabar-bright); }
.topbar__sound { width: 39px; height: 39px; border: 1px solid rgba(235,211,160,.34); border-radius: 50%; background: rgba(20,14,9,.55); backdrop-filter: blur(12px); }
.topbar__sound.is-paused { color: rgba(238,221,186,.52); }

.hero { position: relative; z-index: 1; isolation: isolate; min-height: max(720px, 100svh); overflow: clip; display: flex; align-items: end; padding: 128px 26px max(60px, env(safe-area-inset-bottom, 0px)); }
.hero__image { position: absolute; z-index: -3; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; filter: saturate(.82) contrast(1.04) brightness(.61); transform: scale(1.035); animation: heroDrift 22s ease-in-out infinite alternate; }
.hero__veil { position: absolute; z-index: -2; inset: 0; background: linear-gradient(180deg, rgba(15,9,4,.51) 0%, rgba(15,9,4,.04) 25%, rgba(15,9,4,.13) 54%, #100b06 100%), linear-gradient(90deg, rgba(0,0,0,.48), transparent 60%, rgba(0,0,0,.24)); }
.hero__ray { position: absolute; z-index: -1; border-radius: 50%; filter: blur(35px); background: rgba(223,171,75,.15); }
.hero__ray--one { width: 72vw; height: 26vw; bottom: 18%; left: -26vw; animation: rayMove 16s ease-in-out infinite alternate; }
.hero__ray--two { width: 59vw; height: 21vw; right: -27vw; bottom: 43%; opacity: .65; animation: rayMove 20s ease-in-out infinite alternate-reverse; }
.hero__copy { width: min(100%, 640px); padding-bottom: 12px; }
.eyebrow { margin: 0 0 14px; color: rgba(235,216,181,.65); font-size: 10px; font-weight: 800; letter-spacing: .22em; line-height: 1.6; text-transform: uppercase; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.stage__handwriting { display: block; width: auto; max-width: 74%; height: min(54svh, 470px); object-fit: contain; margin: 18px auto 0; mix-blend-mode: screen; filter: sepia(.28) drop-shadow(0 2px 8px rgba(0, 0, 0, .4)); animation: phraseAppear .7s var(--ease) both; }
.stage__handwriting[hidden] { display: none; }
.has-handwriting .stage__phrase { position: absolute; width: 1px; height: 1px; min-height: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.has-handwriting .stage__duality, .has-handwriting .stage__meaning, .has-handwriting .stage__caption { display: none; }
.has-handwriting .stage__chapter { margin-top: 24px; margin-bottom: 0; }
.has-handwriting .stage__open { margin-top: 18px; }
.scene__sheet--tall { display: grid; place-items: center; padding: 28px 20px; }
.sheet__handwriting { position: relative; z-index: 1; display: block; width: 100%; height: auto; max-height: 660px; object-fit: contain; mix-blend-mode: screen; filter: sepia(.28); }
.hero__title-art { --title-relief: drop-shadow(0 2px 5px rgba(25, 18, 9, .3)) drop-shadow(0 0 14px rgba(255, 229, 166, .18)); position: relative; width: min(100%, 620px); margin: 2px 0 0 -8px; line-height: 0; filter: var(--title-relief); }
.title-ripple-fx { position: absolute; overflow: hidden; pointer-events: none; }
.hero__title-art.is-rippling { filter: url("#titleWaterRipple") var(--title-relief); }
body.motion-reduced .hero__title-art.is-rippling { filter: var(--title-relief); }
@media (prefers-reduced-motion: reduce) { .hero__title-art.is-rippling { filter: var(--title-relief); } }
.hero__title-art img { display: block; width: 100%; height: auto; mix-blend-mode: screen; filter: brightness(1.08) sepia(.6) saturate(1.25); }
/* The supplied white brushwork is the luminance mask for the gold finish. */
@supports (mask-mode: luminance) {
  .hero__title-art img { opacity: 0; }
  .hero__title-art::after { position: absolute; inset: 0; content: ""; pointer-events: none; background: radial-gradient(ellipse at 28% 16%, rgba(255, 253, 236, .75), transparent 54%), linear-gradient(145deg, #fff9e3 0%, #f7e7ba 25%, #f0d591 48%, #fff4cc 64%, #e6c77e 83%, #fff1bf 100%); -webkit-mask-image: url("./assets/handwritten-title.png"); mask-image: url("./assets/handwritten-title.png"); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; mask-mode: luminance; }
}
.hero__subtitle { margin: 24px 0 0 4px; color: rgba(249,235,208,.92); font-size: clamp(17px, 4vw, 22px); letter-spacing: .12em; }
.hero__note { margin: 17px 0 0 4px; color: rgba(240,223,194,.59); font-size: 12px; line-height: 1.85; }
.hero__jump, .closing__button { margin: 28px 0 0 4px; min-height: 44px; padding: 0 19px; border: 1px solid rgba(239,214,164,.35); border-radius: 999px; background: rgba(27,18,10,.52); box-shadow: 0 12px 30px rgba(0,0,0,.3); backdrop-filter: blur(9px); font-size: 13px; letter-spacing: .08em; transition: transform .24s var(--ease), background .24s ease; }
.hero__jump:hover, .closing__button:hover { transform: translateY(-3px); background: rgba(150,50,31,.45); }
.hero__compass { position: absolute; right: 22px; bottom: 70px; display: grid; justify-items: center; gap: 5px; color: rgba(243,221,180,.58); font-size: 10px; letter-spacing: .1em; }.hero__compass i { display: block; width: 1px; height: 13px; background: linear-gradient(var(--cinnabar), transparent); }.hero__credit { position: absolute; right: 20px; bottom: max(17px, env(safe-area-inset-bottom, 0px)); width: min(250px, 62vw); margin: 0; color: rgba(241,221,184,.44); font-size: 9px; line-height: 1.7; text-align: right; }

.listening-stage { position: relative; z-index: 2; display: grid; min-height: 100svh; padding: 58px 18px; place-items: center; background: #171008; overflow: hidden; }.listening-stage::before { position: absolute; inset: 0; content: ""; opacity: .8; background: radial-gradient(circle at 70% 30%, rgba(222,184,110,.12), transparent 15rem), radial-gradient(circle at 10% 90%, rgba(166,58,41,.18), transparent 18rem), repeating-linear-gradient(118deg, rgba(255,255,255,.025) 0 1px, transparent 1px 16px); transition: background 1.1s var(--ease); }
.stage__shell { position: relative; isolation: isolate; width: min(100%, 660px); min-height: min(680px, 82svh); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(34px, 8vw, 68px); border: 1px solid rgba(239,213,163,.24); background: linear-gradient(145deg, rgba(53,36,18,.85), rgba(15,10,6,.94)); box-shadow: 0 35px 100px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.025); overflow: hidden; }.stage__image { position: absolute; z-index: -4; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 53% 50%; filter: saturate(.75) brightness(.46) contrast(1.05); transform: scale(1.03); }.stage__veil { position: absolute; z-index: -3; inset: 0; background: linear-gradient(90deg, rgba(14,9,5,.88), rgba(16,9,5,.36) 70%), linear-gradient(180deg, rgba(11,6,2,.25), rgba(11,6,2,.72)); }.stage__shell::before { position: absolute; z-index: -1; inset: 11px; content: ""; border: 1px solid rgba(239,216,169,.11); }
.stage__meta { display: flex; align-items: center; gap: 10px; color: rgba(241,218,175,.66); font-size: 11px; letter-spacing: .14em; }.stage__rule { width: 44px; height: 1px; background: linear-gradient(90deg, var(--cinnabar), transparent); }.stage__chapter { margin: 42px 0 14px; color: var(--gold); font-size: 13px; letter-spacing: .24em; }.stage__phrase { min-height: 1.18em; max-width: 5.4em; margin: 0; color: #f7e8cb; font-family: STKaiti, KaiTi, "Kaiti SC", serif; font-size: clamp(52px, 15vw, 88px); font-weight: 500; letter-spacing: .06em; line-height: 1.08; text-shadow: 0 15px 34px rgba(0,0,0,.42), 0 0 24px rgba(240,199,123,.13); animation: phraseAppear .7s var(--ease) both; }.stage__meaning { max-width: 22em; margin: 26px 0 0; color: rgba(241,227,201,.72); font-size: 14px; line-height: 1.8; }.stage__open { min-height: 45px; margin-top: 28px; padding: 0 20px; border: 1px solid rgba(238,211,161,.38); border-radius: 999px; background: linear-gradient(135deg, rgba(164,57,40,.9), rgba(59,21,14,.9)); box-shadow: 0 16px 38px rgba(0,0,0,.34); font-size: 13px; font-weight: 800; letter-spacing: .11em; transition: transform .2s ease, filter .2s ease; }.stage__open:hover { transform: translateY(-2px); filter: brightness(1.1); }.stage__caption { max-width: 31em; margin: 17px 0 0; color: rgba(244,222,183,.48); font-size: 11px; line-height: 1.7; }
.stage__thread { position: absolute; z-index: -1; top: -13%; right: 22%; bottom: -13%; width: 1px; overflow: hidden; background: rgba(237,209,157,.13); transform: rotate(18deg); }.stage__thread span { display: block; width: 100%; height: var(--audio-progress, 0%); background: linear-gradient(var(--cinnabar-bright), rgba(218,170,95,.1)); box-shadow: 0 0 12px var(--cinnabar); transition: height .25s linear; }.stage__orbit { position: absolute; z-index: -1; top: 8%; right: 7%; width: 138px; height: 138px; border: 1px solid rgba(225,193,132,.34); border-radius: 50%; transform: rotate(-20deg); }.stage__orbit::before { position: absolute; top: 18px; right: 10px; width: 13px; height: 13px; content: ""; border-radius: 50%; background: #f5d68c; box-shadow: 0 0 30px rgba(245,201,111,.75); }.stage__orbit i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--gold); }.stage__orbit i:nth-child(1) { top: 10%; left: 20%; }.stage__orbit i:nth-child(2) { bottom: 17%; left: 9%; }.stage__orbit i:nth-child(3) { right: 12%; bottom: 5%; }.stage__ink { position: absolute; z-index: -1; border-radius: 48% 52% 61% 39% / 41% 34% 66% 59%; filter: blur(4px); opacity: .6; }.stage__ink--left { bottom: -20%; left: -24%; width: 78%; height: 43%; background: radial-gradient(ellipse, rgba(75,64,41,.8), transparent 68%); transform: rotate(12deg); }.stage__ink--right { top: -12%; right: -30%; width: 69%; height: 45%; background: radial-gradient(ellipse, rgba(145,47,31,.38), transparent 68%); transform: rotate(-18deg); }
.listening-stage[data-tone="sword"]::before { background: radial-gradient(circle at 72% 32%, rgba(223,223,207,.1), transparent 16rem), linear-gradient(140deg, rgba(176,64,43,.18), transparent 50%), repeating-linear-gradient(118deg, rgba(255,255,255,.025) 0 1px, transparent 1px 16px); }.listening-stage[data-tone="sword"] .stage__orbit { transform: translate(-20px, 24px) scale(.86) rotate(40deg); }.listening-stage[data-tone="hands"]::before { background: radial-gradient(circle at 28% 67%, rgba(218,173,101,.22), transparent 17rem), radial-gradient(circle at 84% 22%, rgba(182,61,42,.2), transparent 19rem), repeating-linear-gradient(118deg, rgba(255,255,255,.025) 0 1px, transparent 1px 16px); }.listening-stage[data-tone="mirror"]::before { background: radial-gradient(ellipse at 50% 78%, rgba(167,190,183,.2), transparent 24rem), linear-gradient(0deg, rgba(112,138,124,.18), transparent 46%), repeating-linear-gradient(118deg, rgba(255,255,255,.025) 0 1px, transparent 1px 16px); }.listening-stage[data-tone="seal"]::before { background: radial-gradient(circle at 48% 50%, rgba(186,52,38,.22), transparent 18rem), radial-gradient(circle at 85% 18%, rgba(225,183,100,.12), transparent 15rem), repeating-linear-gradient(118deg, rgba(255,255,255,.025) 0 1px, transparent 1px 16px); }.listening-stage[data-tone="seal"] .stage__orbit { border-color: rgba(203,78,57,.68); transform: translate(-52px, 41px) scale(.85) rotate(100deg); }

.stage__seals { position: absolute; z-index: 2; top: 18px; right: 18px; width: 112px; padding: 10px 9px 8px; border: 1px solid rgba(237,213,165,.16); background: rgba(22,14,8,.31); backdrop-filter: blur(8px); }.stage__seals-label { display: block; margin-bottom: 7px; color: rgba(244,221,177,.48); font-size: 8px; letter-spacing: .18em; text-align: center; }.stage__seal-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }.stage__seal-grid button { display: grid; width: 15px; height: 15px; padding: 0; place-items: center; border: 1px solid rgba(235,210,158,.23); border-radius: 50%; background: rgba(12,8,5,.25); color: rgba(246,225,186,.62); font-family: STKaiti, KaiTi, serif; font-size: 10px; line-height: 1; transition: transform .25s var(--ease), color .25s ease, background .25s ease, box-shadow .25s ease; }.stage__seal-grid button:hover, .stage__seal-grid button:focus-visible { border-color: rgba(244,211,144,.75); outline: none; transform: scale(1.16); }.stage__seal-grid button.is-active { border-color: #ffe0a1; background: var(--cinnabar); color: #fff6e8; box-shadow: 0 0 0 3px rgba(206,74,53,.16), 0 0 14px rgba(240,190,103,.68); transform: scale(1.18); }
.stage__duality { max-width: 31em; margin: 20px 0 0; padding-top: 11px; border-top: 1px solid rgba(240,216,168,.17); }.stage__duality-line { display: flex; align-items: center; gap: 8px; color: var(--gold); font-size: 10px; font-weight: 800; letter-spacing: .22em; }.stage__duality-line span:last-child { color: #e69b8b; }.stage__duality-line i { display: block; width: 54px; height: 1px; background: linear-gradient(90deg, var(--gold), var(--cinnabar)); box-shadow: 0 0 10px rgba(211,83,60,.35); }.stage__duality p { margin: 8px 0 0; color: rgba(243,223,190,.56); font-size: 11px; line-height: 1.65; }

.lyric-reading { position: relative; z-index: 2; padding: 104px 18px 102px; overflow: hidden; background: radial-gradient(circle at 87% 15%, rgba(172,59,38,.18), transparent 18rem), radial-gradient(circle at 13% 90%, rgba(211,165,84,.14), transparent 20rem), #1a1209; }.lyric-reading::after { position: absolute; right: -18%; bottom: -22%; width: min(75vw, 620px); height: min(75vw, 620px); content: ""; border: 1px solid rgba(231,204,151,.1); border-radius: 50%; box-shadow: 0 0 0 26px rgba(231,204,151,.025), 0 0 0 57px rgba(231,204,151,.018); pointer-events: none; }.lyric-reading__heading, .lyric-reading__cards, .lyric-reading__jump { position: relative; z-index: 1; width: min(100%, 820px); margin-right: auto; margin-left: auto; }.lyric-reading__heading h2 { max-width: 12em; margin: 0; color: #f4e4c5; font-size: clamp(34px, 9vw, 58px); font-weight: 600; letter-spacing: -.07em; line-height: 1.12; }.lyric-reading__heading > p:last-child { max-width: 37em; margin: 22px 0 0; color: rgba(240,222,190,.69); font-size: 14px; line-height: 1.9; }.lyric-reading__cards { display: grid; gap: 9px; margin-top: 42px; }.lyric-reading__cards article { min-height: 168px; padding: 23px 20px; border: 1px solid rgba(235,207,153,.18); background: linear-gradient(140deg, rgba(249,231,192,.09), rgba(102,49,30,.13)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.018); }.lyric-reading__cards span { color: rgba(242,217,168,.45); font-family: Georgia, serif; font-size: 10px; letter-spacing: .13em; }.lyric-reading__cards h3 { margin: 18px 0 0; color: #f4dca9; font-family: STKaiti, KaiTi, serif; font-size: 31px; font-weight: 500; letter-spacing: .13em; }.lyric-reading__cards p { max-width: 21em; margin: 13px 0 0; color: rgba(242,224,195,.64); font-size: 13px; line-height: 1.78; }.lyric-reading__jump { display: block; min-height: 44px; margin-top: 31px; padding: 0 17px; border: 1px solid rgba(239,211,160,.35); border-radius: 999px; background: rgba(126,44,31,.28); color: #f4e0ba; font-size: 12px; letter-spacing: .08em; transition: transform .24s var(--ease), background .24s ease; }.lyric-reading__jump:hover { background: rgba(167,58,39,.43); transform: translateY(-2px); }

.sword-ritual { position: relative; z-index: 2; padding: 110px 18px; overflow: hidden; background: radial-gradient(circle at 48% 44%, rgba(199,145,72,.14), transparent 24rem), radial-gradient(circle at 14% 76%, rgba(154,45,33,.18), transparent 25rem), #100c07; }.sword-ritual::before { position: absolute; inset: 0; content: ""; opacity: .34; background: repeating-linear-gradient(118deg, rgba(255,255,255,.025) 0 1px, transparent 1px 16px); pointer-events: none; }.sword-ritual__copy { position: relative; z-index: 1; width: min(100%, 820px); margin: 0 auto 44px; }.sword-ritual__copy h2 { max-width: 12em; margin: 0; color: #f6e4bf; font-size: clamp(36px, 10vw, 62px); font-weight: 600; letter-spacing: -.07em; line-height: 1.1; }.sword-ritual__copy > p:last-child { max-width: 35em; margin: 22px 0 0; color: rgba(240,222,191,.68); font-size: 14px; line-height: 1.9; }
.sword-ritual__stage { position: relative; isolation: isolate; width: min(100%, 620px); min-height: 610px; margin: 0 auto; overflow: hidden; border: 1px solid rgba(235,205,145,.22); background: radial-gradient(circle at 50% 42%, rgba(233,197,122,.08), transparent 24%), linear-gradient(155deg, rgba(81,51,22,.56), rgba(12,8,5,.96)); box-shadow: 0 34px 95px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,255,255,.022); }.sword-ritual__stage::before { position: absolute; z-index: -1; inset: 11px; content: ""; border: 1px solid rgba(237,211,157,.12); }.sword-ritual__stage::after { position: absolute; z-index: 6; inset: 0; content: ""; opacity: 0; background: radial-gradient(ellipse at 52% 42%, rgba(255,230,165,.82), rgba(234,145,73,.24) 19%, transparent 49%); pointer-events: none; }.sword-ritual__stage.is-drawn::after { animation: swordFlash 1.05s ease-out both; }
.sword-ritual__circles { position: absolute; z-index: 0; top: 50%; left: 50%; width: min(74vw, 360px); aspect-ratio: 1; transform: translate(-50%, -53%); }.sword-ritual__circles::before, .sword-ritual__circles::after, .sword-ritual__circles i { position: absolute; inset: 0; content: ""; border: 1px solid rgba(231,201,139,.16); border-radius: 50%; transition: border-color .5s ease, box-shadow .5s ease, transform 1s var(--ease); }.sword-ritual__circles::after { inset: 13%; border-style: dashed; opacity: .72; }.sword-ritual__circles i:nth-child(1) { inset: 28%; border-color: rgba(177,62,43,.35); }.sword-ritual__circles i:nth-child(2) { inset: 7%; transform: rotate(45deg) scaleX(.72); }.sword-ritual__circles i:nth-child(3) { inset: 37%; border-color: rgba(239,214,159,.12); }.sword-ritual__stage.is-ready .sword-ritual__circles::before, .sword-ritual__stage.is-ready .sword-ritual__circles i:nth-child(1) { border-color: rgba(255,213,127,.74); box-shadow: 0 0 32px rgba(244,180,75,.28), inset 0 0 32px rgba(202,58,40,.14); }.sword-ritual__stage.is-ready .sword-ritual__circles i:nth-child(2) { animation: ritualSpin 11s linear infinite; }.sword-ritual__stage.is-drawn .sword-ritual__circles { animation: ritualPulse 1.25s ease-out both; }
.sword-ritual__sigils { position: absolute; z-index: 5; top: 50%; left: 50%; width: min(74vw, 360px); aspect-ratio: 1; transform: translate(-50%, -53%); }.sword-ritual__sigils button { position: absolute; top: 50%; left: 50%; display: grid; width: 36px; height: 36px; padding: 0; place-items: center; border: 1px solid rgba(241,211,151,.33); border-radius: 48% 52% 44% 56% / 53% 43% 57% 47%; background: rgba(19,12,7,.72); box-shadow: 0 8px 24px rgba(0,0,0,.28); color: rgba(249,226,179,.74); font-family: STKaiti, KaiTi, serif; font-size: 20px; line-height: 1; transition: transform .32s var(--ease), background .32s ease, border-color .32s ease, color .32s ease, box-shadow .32s ease; }.sword-ritual__sigils button:hover, .sword-ritual__sigils button:focus-visible { border-color: rgba(255,220,143,.9); outline: none; transform: translate(-50%, -50%) scale(1.13) !important; }.sword-ritual__sigils button.is-lit { border-color: #ffe1a1; background: radial-gradient(circle at 45% 35%, #ffe6ad, #c94a36 63%, #612117); box-shadow: 0 0 0 4px rgba(210,71,48,.12), 0 0 24px rgba(255,195,94,.78); color: #fffaf0; animation: runeLight .62s var(--ease) both; }.sword-ritual__sigils button:disabled { cursor: default; }.sword-ritual__sigils button:nth-child(1) { transform: translate(-50%, -50%) translateY(-158px); }.sword-ritual__sigils button:nth-child(2) { transform: translate(-50%, -50%) rotate(36deg) translateY(-158px) rotate(-36deg); }.sword-ritual__sigils button:nth-child(3) { transform: translate(-50%, -50%) rotate(72deg) translateY(-158px) rotate(-72deg); }.sword-ritual__sigils button:nth-child(4) { transform: translate(-50%, -50%) rotate(108deg) translateY(-158px) rotate(-108deg); }.sword-ritual__sigils button:nth-child(5) { transform: translate(-50%, -50%) rotate(144deg) translateY(-158px) rotate(-144deg); }.sword-ritual__sigils button:nth-child(6) { transform: translate(-50%, -50%) rotate(180deg) translateY(-158px) rotate(-180deg); }.sword-ritual__sigils button:nth-child(7) { transform: translate(-50%, -50%) rotate(216deg) translateY(-158px) rotate(-216deg); }.sword-ritual__sigils button:nth-child(8) { transform: translate(-50%, -50%) rotate(252deg) translateY(-158px) rotate(-252deg); }.sword-ritual__sigils button:nth-child(9) { transform: translate(-50%, -50%) rotate(288deg) translateY(-158px) rotate(-288deg); }.sword-ritual__sigils button:nth-child(10) { transform: translate(-50%, -50%) rotate(324deg) translateY(-158px) rotate(-324deg); }
.sword-ritual__weapon { position: absolute; z-index: 2; top: 48%; left: 50%; width: 132px; height: 400px; transform: translate(-50%, -47%) rotate(38deg); transform-origin: 50% 80%; transition: filter .8s ease; }.sword-ritual__aura { position: absolute; top: 3%; left: 50%; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(244,198,109,.28), rgba(190,51,36,.13) 35%, transparent 70%); filter: blur(8px); opacity: .18; transform: translateX(-50%) scale(.7); transition: opacity .8s ease, transform 1s var(--ease); }.sword-ritual__scabbard { position: absolute; bottom: 11px; left: 50%; width: 32px; height: 286px; border: 1px solid rgba(235,202,133,.35); border-radius: 50% 50% 17px 17px; background: linear-gradient(90deg, #1a120d, #6d4930 46%, #24160d 72%); box-shadow: inset 3px 0 4px rgba(255,232,182,.12), 0 11px 24px rgba(0,0,0,.36); transform: translateX(-50%); }.sword-ritual__scabbard::after { position: absolute; top: 16px; right: 5px; bottom: 16px; left: 5px; content: ""; border-right: 1px solid rgba(224,72,51,.45); border-left: 1px solid rgba(238,200,124,.22); }.sword-ritual__blade { position: absolute; bottom: 89px; left: 50%; width: 15px; height: 309px; overflow: hidden; background: linear-gradient(90deg, #76634a, #fff0bf 43%, #fffdf0 52%, #9d7851 72%, #4d3828); clip-path: polygon(50% 0, 100% 11%, 68% 100%, 32% 100%, 0 11%); box-shadow: 0 0 20px rgba(255,219,148,.2); transform: translate(-50%, 205px); transform-origin: 50% 92%; transition: transform 1.25s cubic-bezier(.16,.78,.19,1), filter .85s ease, box-shadow .85s ease; }.sword-ritual__blade i { position: absolute; top: 10%; bottom: 7%; left: 48%; width: 1px; background: rgba(111,55,31,.5); }.sword-ritual__guard { position: absolute; bottom: 76px; left: 50%; width: 91px; height: 13px; border: 1px solid rgba(249,210,135,.62); border-radius: 48% 52% 32% 68%; background: linear-gradient(90deg, #542116, #e1a143 50%, #572116); box-shadow: 0 0 16px rgba(235,147,60,.25); transform: translateX(-50%); }.sword-ritual__hilt { position: absolute; bottom: 31px; left: 50%; width: 17px; height: 63px; border: 1px solid rgba(232,194,119,.42); border-radius: 8px; background: repeating-linear-gradient(140deg, #3e2116 0 5px, #9d5131 5px 8px); box-shadow: 0 7px 13px rgba(0,0,0,.35); transform: translateX(-50%); }.sword-ritual__hilt::after { position: absolute; bottom: -16px; left: 50%; width: 26px; height: 26px; content: ""; border: 1px solid rgba(234,198,126,.62); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffdf98, #9c3425 65%); box-shadow: 0 0 16px rgba(226,130,56,.36); transform: translateX(-50%); }.sword-ritual__stage.is-ready .sword-ritual__aura { opacity: .62; transform: translateX(-50%) scale(1); }.sword-ritual__stage.is-drawn .sword-ritual__weapon { animation: swordShake .85s ease-in-out both; filter: brightness(1.23) saturate(1.18); }.sword-ritual__stage.is-drawn .sword-ritual__blade { box-shadow: 0 0 12px #fff3c1, 0 0 45px rgba(249,178,74,.88), 0 0 80px rgba(201,57,40,.5); filter: brightness(1.32); transform: translate(-50%, -148px) rotate(-3deg); }.sword-ritual__stage.is-drawn .sword-ritual__aura { opacity: .94; transform: translateX(-50%) scale(1.62); animation: auraBreath 1.7s ease-in-out infinite alternate; }.sword-ritual__stage.is-drawn .sword-ritual__scabbard { box-shadow: inset 3px 0 4px rgba(255,232,182,.12), 0 11px 24px rgba(0,0,0,.36), 0 0 25px rgba(221,81,54,.3); }
.sword-ritual__status, .sword-ritual__draw, .sword-ritual__reset { position: absolute; z-index: 8; left: 50%; transform: translateX(-50%); }.sword-ritual__status { bottom: 84px; width: 100%; margin: 0; color: rgba(246,221,174,.65); font-size: 11px; letter-spacing: .08em; text-align: center; }.sword-ritual__draw, .sword-ritual__reset { bottom: 27px; min-height: 43px; padding: 0 18px; border: 1px solid rgba(242,207,145,.4); border-radius: 999px; background: linear-gradient(135deg, rgba(166,58,39,.9), rgba(64,24,16,.9)); box-shadow: 0 14px 34px rgba(0,0,0,.32); color: #fff0d4; font-size: 12px; font-weight: 800; letter-spacing: .1em; transition: transform .24s var(--ease), filter .24s ease, opacity .24s ease; }.sword-ritual__draw:disabled { border-color: rgba(237,211,162,.16); background: rgba(245,221,180,.06); box-shadow: none; color: rgba(244,224,190,.37); cursor: not-allowed; }.sword-ritual__draw:not(:disabled):hover, .sword-ritual__reset:hover { filter: brightness(1.15); transform: translateX(-50%) translateY(-2px); }.sword-ritual__reset { background: rgba(245,219,168,.08); color: rgba(246,225,189,.78); }

/* 神纹不再是十个按钮：它们是蓄势时在剑匣周围浮起的碎片。 */
.sword-ritual__stage { min-height: 630px; background: linear-gradient(180deg, rgba(9,6,4,.38), rgba(10,7,4,.93)), radial-gradient(circle at 50% 42%, rgba(238,182,84,.11), transparent 27%), url("./assets/scene-landscape.png") center / cover; }.sword-ritual__stage::before { border-color: rgba(247,218,159,.16); }.sword-ritual__sigils { z-index: 4; }.sword-ritual__sigils i { position: absolute; top: 50%; left: 50%; display: block; width: 19px; height: 19px; border: 1px solid rgba(247,216,154,.25); background: linear-gradient(135deg, rgba(242,215,161,.16), rgba(133,46,31,.06)); clip-path: polygon(50% 0, 86% 20%, 100% 61%, 64% 100%, 19% 87%, 0 39%); opacity: .42; transform-origin: center; transition: opacity .28s ease, background .28s ease, border-color .28s ease, box-shadow .28s ease; }.sword-ritual__sigils i::after { position: absolute; top: 50%; left: 15%; width: 70%; height: 1px; content: ""; background: rgba(249,218,160,.55); transform: rotate(-38deg); }.sword-ritual__sigils i.is-lit { border-color: #ffe4a9; background: linear-gradient(135deg, #fff0c7, #d85e40 68%, #6a1f17); box-shadow: 0 0 0 4px rgba(227,78,50,.11), 0 0 27px rgba(255,193,82,.8); opacity: 1; animation: sigilBloom .48s var(--ease) both; }.sword-ritual__sigils i:nth-child(1) { transform: translate(-50%, -50%) translateY(-158px); }.sword-ritual__sigils i:nth-child(2) { transform: translate(-50%, -50%) rotate(36deg) translateY(-158px); }.sword-ritual__sigils i:nth-child(3) { transform: translate(-50%, -50%) rotate(72deg) translateY(-158px); }.sword-ritual__sigils i:nth-child(4) { transform: translate(-50%, -50%) rotate(108deg) translateY(-158px); }.sword-ritual__sigils i:nth-child(5) { transform: translate(-50%, -50%) rotate(144deg) translateY(-158px); }.sword-ritual__sigils i:nth-child(6) { transform: translate(-50%, -50%) rotate(180deg) translateY(-158px); }.sword-ritual__sigils i:nth-child(7) { transform: translate(-50%, -50%) rotate(216deg) translateY(-158px); }.sword-ritual__sigils i:nth-child(8) { transform: translate(-50%, -50%) rotate(252deg) translateY(-158px); }.sword-ritual__sigils i:nth-child(9) { transform: translate(-50%, -50%) rotate(288deg) translateY(-158px); }.sword-ritual__sigils i:nth-child(10) { transform: translate(-50%, -50%) rotate(324deg) translateY(-158px); }
.sword-ritual__stage.is-charging .sword-ritual__circles::before, .sword-ritual__stage.is-charging .sword-ritual__circles i:nth-child(1) { border-color: rgba(255,219,142,.76); box-shadow: 0 0 36px rgba(243,174,66,.32), inset 0 0 28px rgba(207,59,40,.15); }.sword-ritual__stage.is-charging .sword-ritual__circles i:nth-child(2) { animation: ritualSpin 7s linear infinite; }.sword-ritual__stage.is-charging .sword-ritual__aura { opacity: .68; transform: translateX(-50%) scale(1.08); }.sword-ritual__stage.is-charging .sword-ritual__weapon { filter: brightness(1.18); }.sword-ritual__stage.is-charging .sword-ritual__hilt { box-shadow: 0 7px 13px rgba(0,0,0,.35), 0 0 26px rgba(242,171,71,.46); }
.sword-ritual__blade { opacity: .13; }.sword-ritual__stage.is-drawn .sword-ritual__blade { opacity: 1; height: 362px; background: linear-gradient(90deg, #795b3f, #f8dca0 28%, #fffff5 51%, #f6c879 69%, #5d3d2b); }.sword-ritual__stage.is-drawn .sword-ritual__weapon { animation: swordRelease 1.06s cubic-bezier(.16,.78,.19,1) both; }.sword-ritual__stage.is-drawn .sword-ritual__guard { box-shadow: 0 0 28px rgba(255,179,65,.75); }.sword-ritual__stage.is-drawn .sword-ritual__sigils i { animation-delay: calc(var(--rune-index, 1) * 30ms); }
.sword-ritual__draw { display: inline-flex; min-width: 178px; justify-content: center; gap: 11px; overflow: hidden; border-color: rgba(245,215,152,.52); background: rgba(22,12,7,.73); touch-action: none; user-select: none; -webkit-user-select: none; }.sword-ritual__draw::before { position: absolute; z-index: -1; inset: 0 auto 0 0; width: var(--charge, 0%); content: ""; background: linear-gradient(90deg, #76271e, #d2533a 55%, #f1c16e); box-shadow: 0 0 23px rgba(241,164,67,.58); transition: width .08s linear; }.sword-ritual__draw span, .sword-ritual__draw b { position: relative; z-index: 1; }.sword-ritual__draw b { min-width: 27px; color: rgba(255,241,205,.78); font-family: Georgia, serif; font-size: 10px; font-weight: 400; letter-spacing: 0; }.sword-ritual__stage.is-charging .sword-ritual__draw { transform: translateX(-50%) scale(.98); }.sword-ritual__stage.is-drawn .sword-ritual__status { color: #ffe2a3; }.sword-ritual__reset { z-index: 9; }

/* 剑沿页面中轴竖直出鞘：收时藏锋，满纹后只向上抽出。 */
.sword-ritual__weapon { top: 51%; transform: translate(-50%, -47%); }.sword-ritual__stage.is-drawn .sword-ritual__weapon { animation: swordReleaseVertical 1.06s cubic-bezier(.16,.78,.19,1) both; }.sword-ritual__stage.is-drawn .sword-ritual__blade { transform: translate(-50%, -196px); }.sword-ritual__stage.is-drawn .sword-ritual__guard { box-shadow: 0 0 12px rgba(255,215,141,.85), 0 0 35px rgba(237,117,53,.5); }.sword-ritual__stage.is-drawn::after { background: linear-gradient(90deg, transparent 44%, rgba(255,235,181,.68) 49.4%, rgba(255,255,246,.95) 50%, rgba(255,225,153,.62) 50.6%, transparent 56%), radial-gradient(ellipse at 50% 42%, rgba(255,226,162,.7), rgba(223,104,50,.16) 23%, transparent 54%); }

.journey { position: relative; z-index: 1; padding: 112px 18px 34px; background: linear-gradient(180deg, #171008, #2a2013 40%, #110c07); overflow: clip; }.journey__heading { width: min(100%, 720px); margin: 0 auto 86px; }.journey__heading h2, .archive h2, .closing h2 { margin: 0; color: #f4e5c7; font-size: clamp(34px, 9vw, 58px); letter-spacing: -.07em; line-height: 1.08; }.journey__heading > p:last-child { max-width: 35em; margin: 22px 0 0; color: rgba(239,223,192,.69); font-size: 14px; line-height: 1.9; }.journey__thread { position: absolute; top: 385px; bottom: 160px; left: 50%; width: 1px; background: rgba(230,205,154,.17); transform: translateX(-50%); }.journey__thread span { display: block; width: 100%; height: var(--journey-progress, 0%); background: linear-gradient(var(--cinnabar), rgba(192,82,58,.1)); box-shadow: 0 0 13px rgba(201,79,57,.76); }
.scene { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; width: min(100%, 820px); min-height: 80svh; margin: 0 auto; padding: 42px 4px 98px; align-content: center; }.scene__index { position: absolute; top: 12%; left: 0; color: rgba(239,216,171,.46); font-size: 10px; letter-spacing: .16em; }.scene__copy { z-index: 2; max-width: 30rem; transition: opacity .8s ease, transform .9s var(--ease); opacity: .16; transform: translateY(25px); }.scene.is-visible .scene__copy { opacity: 1; transform: none; }.scene__tag { margin: 0 0 11px; color: var(--gold); font-size: 11px; font-weight: 800; letter-spacing: .19em; }.scene__copy h3 { margin: 0; color: #f5e5c7; font-size: clamp(31px, 8vw, 50px); font-weight: 600; letter-spacing: -.07em; line-height: 1.17; }.scene__copy > p:last-child { margin: 19px 0 0; color: rgba(239,223,192,.67); font-size: 14px; line-height: 1.9; }
.scene__sheet { position: relative; z-index: 1; min-height: 255px; border: 1px solid rgba(234,209,160,.2); background: linear-gradient(140deg, rgba(243,224,184,.11), rgba(232,194,124,.025)); box-shadow: 0 30px 75px rgba(0,0,0,.2), inset 0 0 0 1px rgba(255,255,255,.025); overflow: hidden; transition: transform 1.1s var(--ease), opacity .8s ease; opacity: .22; transform: translateY(42px) rotate(-4deg); }.scene.is-visible .scene__sheet { opacity: 1; transform: translateY(0) rotate(0); }.scene__sheet::after { position: absolute; inset: 0; content: ""; background: radial-gradient(circle at 15% 17%, rgba(255,255,255,.13), transparent 18%), linear-gradient(130deg, rgba(255,255,255,.06), transparent 38%); pointer-events: none; }.sheet__hint { position: absolute; top: 15px; left: 16px; margin: 0; color: rgba(237,218,181,.4); font-size: 9px; letter-spacing: .14em; }.ink-text { position: relative; z-index: 1; margin: 0; color: #f7e6c7; font-family: STKaiti, KaiTi, "Kaiti SC", serif; font-weight: 500; text-shadow: 0 10px 21px rgba(0,0,0,.35), 0 0 18px rgba(223,179,99,.08); }.ink-text--vertical { position: absolute; right: 18%; top: 20%; font-size: clamp(81px, 20vw, 122px); letter-spacing: .18em; writing-mode: vertical-rl; }.ink-text--small { position: absolute; bottom: 22px; left: 22px; color: var(--cinnabar-bright); font-size: 13px; letter-spacing: .2em; }.scene__sheet--sword { min-height: 310px; display: grid; place-items: center; transform-origin: 30% 60%; }.sword-line { position: absolute; z-index: 0; top: 48%; left: -9%; width: 118%; height: 1px; background: linear-gradient(90deg, transparent, var(--cinnabar-bright) 34%, #f4d895 51%, var(--cinnabar) 68%, transparent); box-shadow: 0 0 15px rgba(220,100,70,.7); transform: rotate(-10deg) scaleX(0); transform-origin: left; transition: transform 1.25s .25s var(--ease); }.scene.is-visible .sword-line { transform: rotate(-10deg) scaleX(1); }.ink-text--wide { font-size: clamp(55px, 15vw, 86px); letter-spacing: .07em; transform: rotate(-7deg); }.scene__sheet--pair { min-height: 310px; }.ink-text--left, .ink-text--right { position: absolute; font-size: clamp(58px, 17vw, 100px); letter-spacing: .08em; transition: transform 1.15s .2s var(--ease); }.ink-text--left { top: 18%; left: 10%; transform: translateX(-40px) rotate(-7deg); }.ink-text--right { right: 10%; bottom: 16%; transform: translateX(40px) rotate(7deg); }.scene.is-visible .ink-text--left, .scene.is-visible .ink-text--right { transform: translateX(0) rotate(0); }.pair-thread { position: absolute; z-index: 0; top: 53%; left: 19%; width: 62%; height: 1px; background: var(--cinnabar); box-shadow: 0 0 12px rgba(210,78,61,.75); transform: rotate(15deg) scaleX(0); transition: transform 1.2s .55s var(--ease); }.scene.is-visible .pair-thread { transform: rotate(15deg) scaleX(1); }.scene__sheet--mirror { min-height: 300px; display: grid; place-items: center; }.scene__sheet--mirror::before { position: absolute; inset: auto 0 0; height: 47%; content: ""; border-top: 1px solid rgba(226,233,214,.22); background: linear-gradient(180deg, rgba(153,181,165,.17), rgba(31,28,18,.18)); }.ink-text--moon { font-size: clamp(61px, 17vw, 103px); letter-spacing: .09em; transform: translateY(-30px); }.ink-text--reflection { position: absolute; bottom: -9%; font-size: clamp(61px, 17vw, 103px); letter-spacing: .09em; opacity: .15; transform: scaleY(-.72); filter: blur(2px); }.scene__sheet--seal { min-height: 305px; display: grid; place-items: center; }.seal-mark { position: absolute; right: 13%; top: 12%; display: grid; width: 110px; height: 110px; place-items: center; border: 4px solid rgba(204,70,50,.72); border-radius: 48% 52% 45% 55% / 55% 45% 52% 48%; color: rgba(219,88,67,.84); font-family: STKaiti, KaiTi, serif; font-size: 28px; font-weight: 900; line-height: .9; letter-spacing: .14em; transform: rotate(13deg) scale(.3); transition: transform 1s .2s var(--ease); }.scene.is-visible .seal-mark { transform: rotate(-6deg) scale(1); }.ink-text--ending { color: #f8e2b4; font-size: clamp(71px, 19vw, 112px); letter-spacing: .13em; transform: rotate(-10deg); }

.archive { position: relative; z-index: 2; display: grid; gap: 46px; padding: 114px 18px 100px; background: radial-gradient(circle at 80% 21%, rgba(175,59,39,.2), transparent 22rem), linear-gradient(135deg, #302113, #110c07 70%); }.archive > div { width: min(100%, 820px); margin: 0 auto; }.archive h2 { font-size: clamp(32px, 8vw, 52px); }.archive__cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; width: min(100%, 820px); margin: 0 auto; }.archive-card { position: relative; min-height: 158px; padding: 12px 4px; overflow: hidden; border: 1px solid rgba(233,208,158,.21); background: rgba(240,221,181,.1); color: rgba(248,231,198,.92); font-family: STKaiti, KaiTi, serif; font-size: clamp(17px, 4.8vw, 28px); letter-spacing: .05em; writing-mode: vertical-rl; transition: transform .32s var(--ease), background .32s ease; }.archive-card::before { position: absolute; content: ""; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.1), transparent 48%); }.archive-card:nth-child(even) { transform: translateY(19px); }.archive-card span { position: absolute; top: 11px; right: 7px; color: rgba(242,220,177,.4); font-family: Georgia, serif; font-size: 9px; letter-spacing: 0; writing-mode: initial; }.archive-card:hover, .archive-card:focus-visible { z-index: 3; background: rgba(170,55,38,.31); outline: 1px solid rgba(242,212,157,.72); transform: translateY(-9px); }.archive-card:nth-child(even):hover, .archive-card:nth-child(even):focus-visible { transform: translateY(-9px); }.archive-card--one { color: #e3c57f; }.archive-card--two { color: #d6dece; }.archive-card--three { color: #f3d6a8; }.archive-card--four { color: #c7d5cb; }.archive-card--five { color: #e9a68c; }

.closing { position: relative; z-index: 1; min-height: 72svh; display: grid; align-content: center; padding: 84px 26px calc(84px + env(safe-area-inset-bottom, 0px)); background: radial-gradient(circle at 52% 38%, rgba(207,157,78,.17), transparent 22rem), #100b06; text-align: center; }.closing .eyebrow { margin-bottom: 17px; }.closing h2 { font-size: clamp(44px, 11vw, 72px); }.closing p:not(.eyebrow) { max-width: 30em; margin: 24px auto 0; color: rgba(239,222,190,.67); font-size: 14px; line-height: 1.9; }.closing__button { margin: 31px auto 0; }

.audio-dock { position: fixed; z-index: 35; right: 12px; bottom: max(12px, env(safe-area-inset-bottom, 0px)); left: 12px; display: flex; align-items: center; gap: 11px; padding: 10px 12px; border: 1px solid rgba(234,208,157,.25); border-radius: 18px; background: rgba(18,12,7,.8); box-shadow: 0 22px 54px rgba(0,0,0,.38); backdrop-filter: blur(18px); }.audio-dock__play { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; background: var(--cinnabar); color: #fff3df; font-size: 13px; }.audio-dock__track { min-width: 0; flex: 1; }.audio-dock__labels { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 4px; color: rgba(245,224,188,.79); font-size: 10px; letter-spacing: .05em; }.audio-dock__labels span:last-child { color: rgba(244,222,183,.48); font-variant-numeric: tabular-nums; } input[type="range"] { width: 100%; height: 15px; margin: 0; accent-color: var(--cinnabar-bright); cursor: pointer; }.audio-dock__motion { min-height: 36px; padding: 0 9px; border: 1px solid rgba(239,211,160,.19); border-radius: 999px; background: transparent; color: rgba(244,222,183,.69); font-size: 10px; }.audio-dock__motion[aria-pressed="true"] { background: rgba(226,185,105,.16); color: #f6e8ca; }

.gate { position: fixed; z-index: 90; inset: 0; display: grid; padding: 22px; place-items: center; background: rgba(12,7,3,.76); backdrop-filter: blur(17px); transition: opacity .78s var(--ease), visibility .78s ease; }.gate[hidden] { display: none; }.gate.is-hidden { visibility: hidden; opacity: 0; pointer-events: none; }.gate__halo { position: absolute; width: min(98vw, 600px); height: min(98vw, 600px); border-radius: 50%; background: radial-gradient(circle, rgba(222,179,91,.18), rgba(163,46,32,.15) 33%, transparent 69%); filter: blur(8px); animation: halo 6s ease-in-out infinite alternate; }.gate__card { position: relative; width: min(100%, 460px); padding: 56px 30px 38px; overflow: hidden; border: 1px solid rgba(239,211,160,.25); border-radius: 48% 52% 45% 55% / 42% 45% 55% 58%; background: radial-gradient(circle at 50% 25%, rgba(235,199,130,.12), transparent 32%), linear-gradient(145deg, rgba(63,40,19,.91), rgba(14,9,5,.96)); box-shadow: 0 33px 90px rgba(0,0,0,.52); text-align: center; }.gate__card::after { position: absolute; inset: 10px; content: ""; border: 1px solid rgba(237,213,164,.1); border-radius: inherit; pointer-events: none; }.gate__card .eyebrow { position: relative; z-index: 1; }.gate__seal { position: relative; z-index: 1; display: grid; width: 47px; height: 47px; margin: 0 auto 21px; place-items: center; border: 1px solid rgba(255,227,177,.72); border-radius: 50%; background: #963829; color: #fff1da; font-size: 22px; }.gate h2 { position: relative; z-index: 1; margin: 0; color: #f6e6c6; font-size: clamp(43px, 11vw, 62px); letter-spacing: -.08em; line-height: 1; }.gate p { position: relative; z-index: 1; margin: 22px 0 0; color: rgba(244,225,193,.73); font-size: 14px; line-height: 1.8; }.gate__actions { position: relative; z-index: 1; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 28px; }.gate__open, .gate__quiet { min-height: 44px; padding: 0 16px; border: 1px solid rgba(241,210,158,.38); border-radius: 999px; font-size: 13px; letter-spacing: .06em; }.gate__open { background: linear-gradient(135deg, #af4632, #6e291e); box-shadow: 0 15px 34px rgba(0,0,0,.28); }.gate__quiet { background: rgba(238,214,170,.06); color: rgba(241,224,198,.76); }.gate small { position: relative; z-index: 1; display: block; max-width: 22em; margin: 20px auto 0; color: rgba(241,221,188,.44); font-size: 10px; line-height: 1.7; }

.ink-modal { position: fixed; z-index: 80; inset: 0; display: grid; padding: 20px; place-items: center; }.ink-modal[hidden] { display: none; }.ink-modal__backdrop { position: absolute; inset: 0; background: rgba(10,6,3,.85); backdrop-filter: blur(13px); }.ink-modal__card { position: relative; width: min(100%, 560px); min-height: 440px; padding: 48px 30px 34px; overflow: hidden; border: 1px solid rgba(235,210,160,.28); background: linear-gradient(145deg, #46311b, #140d07); box-shadow: 0 28px 100px rgba(0,0,0,.55); }.ink-modal__card::before { position: absolute; inset: 14px; content: ""; border: 1px solid rgba(237,214,166,.1); pointer-events: none; }.ink-modal__close { position: absolute; z-index: 2; top: 12px; right: 13px; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.08); font-size: 23px; }.ink-modal h2 { margin: 0; color: #f5e4c2; font-size: clamp(40px, 10vw, 65px); font-family: STKaiti, KaiTi, serif; font-weight: 500; }.ink-modal__sample { position: relative; z-index: 1; min-height: 176px; display: grid; margin-top: 21px; place-items: center; color: #f6e1ba; font-family: STKaiti, KaiTi, serif; font-size: clamp(60px, 17vw, 102px); letter-spacing: .09em; text-shadow: 0 14px 30px rgba(0,0,0,.34); }.ink-modal__card > p:not(.eyebrow) { position: relative; z-index: 1; max-width: 30em; margin: 0; color: rgba(241,225,199,.69); font-size: 13px; line-height: 1.8; }.ink-modal__line { position: absolute; right: -10%; bottom: 22%; left: 30%; height: 1px; background: linear-gradient(90deg, transparent, var(--cinnabar), transparent); transform: rotate(-10deg); }

body.motion-reduced *, body.motion-reduced *::before, body.motion-reduced *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
@media (min-width: 740px) { .topbar { padding-left: clamp(28px, 5vw, 70px); padding-right: clamp(28px, 5vw, 70px); }.hero { padding-left: clamp(42px, 10vw, 150px); }.hero__compass { right: clamp(40px, 8vw, 130px); }.hero__credit { right: clamp(40px, 7vw, 120px); }.stage__seals { top: 28px; right: 28px; width: 132px; }.stage__seal-grid { gap: 6px; }.stage__seal-grid button { width: 18px; height: 18px; font-size: 11px; }.lyric-reading { padding: 132px clamp(36px, 8vw, 120px) 128px; }.lyric-reading__cards { grid-template-columns: repeat(3, 1fr); }.lyric-reading__cards article { min-height: 212px; }.sword-ritual { padding: 136px clamp(36px, 8vw, 120px); }.sword-ritual__stage { min-height: 655px; }.sword-ritual__sigils button:nth-child(1) { transform: translate(-50%, -50%) translateY(-178px); }.sword-ritual__sigils button:nth-child(2) { transform: translate(-50%, -50%) rotate(36deg) translateY(-178px) rotate(-36deg); }.sword-ritual__sigils button:nth-child(3) { transform: translate(-50%, -50%) rotate(72deg) translateY(-178px) rotate(-72deg); }.sword-ritual__sigils button:nth-child(4) { transform: translate(-50%, -50%) rotate(108deg) translateY(-178px) rotate(-108deg); }.sword-ritual__sigils button:nth-child(5) { transform: translate(-50%, -50%) rotate(144deg) translateY(-178px) rotate(-144deg); }.sword-ritual__sigils button:nth-child(6) { transform: translate(-50%, -50%) rotate(180deg) translateY(-178px) rotate(-180deg); }.sword-ritual__sigils button:nth-child(7) { transform: translate(-50%, -50%) rotate(216deg) translateY(-178px) rotate(-216deg); }.sword-ritual__sigils button:nth-child(8) { transform: translate(-50%, -50%) rotate(252deg) translateY(-178px) rotate(-252deg); }.sword-ritual__sigils button:nth-child(9) { transform: translate(-50%, -50%) rotate(288deg) translateY(-178px) rotate(-288deg); }.sword-ritual__sigils button:nth-child(10) { transform: translate(-50%, -50%) rotate(324deg) translateY(-178px) rotate(-324deg); }.scene { grid-template-columns: 1fr 1fr; gap: clamp(44px, 9vw, 104px); align-items: center; }.scene:nth-of-type(even) .scene__copy { order: 2; }.scene:nth-of-type(even) .scene__sheet { order: 1; }.scene__index { top: 19%; }.journey__thread { left: 50%; }.archive { grid-template-columns: minmax(0, .82fr) minmax(360px, 1.18fr); align-items: center; padding-left: clamp(36px, 8vw, 120px); padding-right: clamp(36px, 8vw, 120px); }.archive > div, .archive__cards { width: 100%; }.audio-dock { right: 50%; left: auto; width: min(600px, calc(100vw - 32px)); transform: translateX(50%); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }
@keyframes heroDrift { from { transform: scale(1.035) translate3d(-.7%, -.4%, 0); } to { transform: scale(1.09) translate3d(.7%, .7%, 0); } }

/* UI refinement: make the hold gesture feel like an engraved sword seal, not a game control. */
.sword-ritual__stage { --charge: 0%; min-height: 680px; border-color: rgba(248, 219, 158, .26); box-shadow: 0 38px 110px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 244, 214, .035); }
.sword-ritual__stage::before { inset: 13px; border-color: rgba(247, 222, 170, .18); }
.sword-ritual__weapon { top: 46%; width: 150px; height: 450px; transform: translate(-50%, -47%); }
.sword-ritual__scabbard { width: 38px; height: 324px; border-color: rgba(247, 211, 138, .46); background: linear-gradient(90deg, #17100c, #735034 42%, #2b190f 73%, #120b08); }
.sword-ritual__blade { width: 19px; height: 348px; }
.sword-ritual__guard { width: 104px; height: 15px; border-color: rgba(255, 220, 153, .72); box-shadow: 0 0 20px rgba(235, 147, 60, .35); }
.sword-ritual__hilt { width: 19px; height: 71px; }
.sword-ritual__hilt::before { position: absolute; top: 8px; left: 50%; width: 28px; height: 46px; content: ""; border: 1px solid rgba(231, 191, 115, .3); border-top: 0; border-radius: 0 0 50% 50%; opacity: .65; transform: translateX(-50%); }
.sword-ritual__hilt::after { width: 28px; height: 28px; box-shadow: 0 0 18px rgba(226, 130, 56, .45); }
.sword-ritual__status { bottom: 154px; color: rgba(250, 229, 188, .72); letter-spacing: .14em; }
.sword-ritual__draw { isolation: isolate; bottom: 28px; display: grid; width: 110px; min-width: 110px; height: 110px; min-height: 110px; padding: 0; place-content: center; gap: 4px; overflow: visible; border: 1px solid rgba(253, 221, 157, .54); border-radius: 50%; background: radial-gradient(circle at 50% 42%, rgba(119, 39, 26, .86), rgba(39, 17, 10, .95) 66%); box-shadow: inset 0 0 0 7px rgba(8, 5, 3, .24), 0 14px 34px rgba(0, 0, 0, .42); color: #fff1d2; }
.sword-ritual__draw::before { position: absolute; z-index: 0; inset: -8px; width: auto; content: ""; border-radius: 50%; background: conic-gradient(from -90deg, #f7d48c var(--charge), rgba(198, 67, 42, .92) var(--charge), rgba(248, 222, 168, .14) var(--charge), rgba(248, 222, 168, .14) 100%); box-shadow: 0 0 22px rgba(243, 168, 68, .32); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); transition: background .08s linear, box-shadow .2s ease; }
.sword-ritual__draw::after { position: absolute; z-index: 0; inset: 8px; content: ""; border: 1px solid rgba(255, 229, 177, .2); border-radius: 50%; pointer-events: none; }
.sword-ritual__draw span, .sword-ritual__draw b { z-index: 1; }
.sword-ritual__draw span { font-family: STKaiti, KaiTi, serif; font-size: 14px; letter-spacing: .14em; }
.sword-ritual__draw b { min-width: 0; color: rgba(255, 233, 191, .72); font-family: Georgia, serif; font-size: 10px; }
.sword-ritual__draw:not(:disabled):hover, .sword-ritual__draw:not(:disabled):focus-visible { filter: brightness(1.12); outline: none; transform: translateX(-50%) scale(1.045); }
.sword-ritual__draw:focus-visible { box-shadow: 0 0 0 3px rgba(255, 227, 166, .8), 0 14px 34px rgba(0, 0, 0, .42); }
.sword-ritual__stage.is-charging .sword-ritual__draw { transform: translateX(-50%) scale(.97); }
.sword-ritual__stage.is-charging .sword-ritual__draw::before { box-shadow: 0 0 34px rgba(255, 188, 75, .8); }
.sword-ritual__stage.is-drawn .sword-ritual__weapon { animation: swordReleaseVertical 1.06s cubic-bezier(.16, .78, .19, 1) both; }
.sword-ritual__stage.is-drawn .sword-ritual__blade { height: 385px; transform: translate(-50%, -214px); }
.sword-ritual__reset { bottom: 38px; min-height: 48px; padding: 0 22px; border-radius: 999px; }
@media (min-width: 740px) { .sword-ritual__stage { min-height: 720px; } .sword-ritual__weapon { top: 45%; } }
@media (max-width: 390px) { .sword-ritual__stage { min-height: 640px; } .sword-ritual__weapon { transform: translate(-50%, -50%) scale(.9); } .sword-ritual__status { bottom: 145px; } .sword-ritual__draw { width: 98px; min-width: 98px; height: 98px; min-height: 98px; } }

/* Long-press release sequence: no audio asset is loaded or played. */
.sword-ritual__stage { perspective: 960px; }
.sword-ritual__trails, .sword-ritual__impact { position: absolute; z-index: 3; inset: 0; overflow: hidden; pointer-events: none; }
.sword-ritual__trails i { position: absolute; bottom: 18%; width: 1px; height: 0; background: linear-gradient(transparent, rgba(255, 230, 166, .92), transparent); box-shadow: 0 0 8px rgba(255, 192, 83, .75); opacity: 0; transform: rotate(var(--tilt, 0deg)); }
.sword-ritual__trails i:nth-child(1) { left: 22%; --tilt: -9deg; }.sword-ritual__trails i:nth-child(2) { left: 37%; --tilt: 4deg; }.sword-ritual__trails i:nth-child(3) { left: 49%; --tilt: -2deg; }.sword-ritual__trails i:nth-child(4) { left: 61%; --tilt: 7deg; }.sword-ritual__trails i:nth-child(5) { left: 74%; --tilt: -6deg; }.sword-ritual__trails i:nth-child(6) { left: 84%; --tilt: 11deg; }
.sword-ritual__impact { z-index: 7; display: grid; place-items: center; opacity: 0; }.sword-ritual__impact::before, .sword-ritual__impact::after { position: absolute; width: min(70vw, 420px); aspect-ratio: 1; content: ""; border: 1px solid rgba(255, 229, 171, .7); border-radius: 50%; transform: scale(.04); }.sword-ritual__impact::after { border-color: rgba(219, 75, 47, .62); }
.sword-ritual__impact i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #ffe8b2; box-shadow: 0 0 14px 3px rgba(255, 189, 80, .72); opacity: 0; }.sword-ritual__impact i:nth-child(1) { transform: translate(-92px, -76px); }.sword-ritual__impact i:nth-child(2) { transform: translate(118px, -42px); }.sword-ritual__impact i:nth-child(3) { transform: translate(-124px, 86px); }.sword-ritual__impact i:nth-child(4) { transform: translate(100px, 102px); }
.sword-ritual__stage.is-charging .sword-ritual__weapon { animation: swordTension .42s ease-in-out infinite alternate; }.sword-ritual__stage.is-charging .sword-ritual__trails i { animation: energyRise .92s ease-in infinite; }.sword-ritual__stage.is-charging .sword-ritual__trails i:nth-child(2n) { animation-delay: .21s; }.sword-ritual__stage.is-charging .sword-ritual__trails i:nth-child(3n) { animation-delay: .46s; }
.sword-ritual__stage.is-drawn .sword-ritual__trails i { animation: releaseTrail .92s cubic-bezier(.1,.72,.18,1) both; }.sword-ritual__stage.is-drawn .sword-ritual__trails i:nth-child(2) { animation-delay: .04s; }.sword-ritual__stage.is-drawn .sword-ritual__trails i:nth-child(3) { animation-delay: .09s; }.sword-ritual__stage.is-drawn .sword-ritual__trails i:nth-child(4) { animation-delay: .13s; }.sword-ritual__stage.is-drawn .sword-ritual__trails i:nth-child(5) { animation-delay: .18s; }.sword-ritual__stage.is-drawn .sword-ritual__trails i:nth-child(6) { animation-delay: .24s; }
.sword-ritual__stage.is-drawn .sword-ritual__impact { animation: impactFade 1.15s ease-out both; }.sword-ritual__stage.is-drawn .sword-ritual__impact::before { animation: impactRing .96s cubic-bezier(.08,.54,.19,1) both; }.sword-ritual__stage.is-drawn .sword-ritual__impact::after { animation: impactRing 1.06s .07s cubic-bezier(.08,.54,.19,1) both; }.sword-ritual__stage.is-drawn .sword-ritual__impact i { animation: emberBurst 1.08s ease-out both; }.sword-ritual__stage.is-drawn .sword-ritual__impact i:nth-child(2) { animation-delay: .06s; }.sword-ritual__stage.is-drawn .sword-ritual__impact i:nth-child(3) { animation-delay: .1s; }.sword-ritual__stage.is-drawn .sword-ritual__impact i:nth-child(4) { animation-delay: .14s; }
.sword-ritual__stage.is-drawn .sword-ritual__weapon { transform-style: preserve-3d; }.sword-ritual__stage.is-drawn .sword-ritual__scabbard { animation: scabbardRecoil .55s .13s ease-out both; }.sword-ritual__stage.is-drawn .sword-ritual__blade { animation: bladeIgnition .9s .08s ease-out both; }
@keyframes swordTension { from { transform: translate(-50%, -47%) translateX(-1px) rotateY(-1deg); } to { transform: translate(-50%, -47%) translateX(1px) rotateY(1deg); } }
@keyframes energyRise { 0% { height: 0; opacity: 0; transform: translateY(20px) rotate(var(--tilt)); } 24% { opacity: .78; } 100% { height: 46%; opacity: 0; transform: translateY(-280px) rotate(var(--tilt)); } }
@keyframes releaseTrail { 0% { height: 0; opacity: 0; transform: translateY(50px) rotate(var(--tilt)); } 26% { height: 32%; opacity: 1; } 100% { height: 70%; opacity: 0; transform: translateY(-170px) rotate(var(--tilt)); } }
@keyframes impactFade { 0%, 40% { opacity: 1; } 100% { opacity: 0; } }
@keyframes impactRing { 0% { opacity: .9; transform: scale(.04); } 100% { opacity: 0; transform: scale(1.24); } }
@keyframes emberBurst { 0% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x, 0), -92px) scale(4); } }
@keyframes scabbardRecoil { 0%, 36% { transform: translateX(-50%); } 55% { transform: translateX(-50%) translateY(8px); } 100% { transform: translateX(-50%); } }
@keyframes bladeIgnition { 0% { filter: brightness(1.1); } 38% { filter: brightness(2.1) saturate(1.35); } 100% { filter: brightness(1.32); } }
@media (prefers-reduced-motion: reduce) { .sword-ritual__stage.is-charging .sword-ritual__weapon, .sword-ritual__stage.is-charging .sword-ritual__trails i, .sword-ritual__stage.is-drawn .sword-ritual__trails i, .sword-ritual__stage.is-drawn .sword-ritual__impact, .sword-ritual__stage.is-drawn .sword-ritual__impact::before, .sword-ritual__stage.is-drawn .sword-ritual__impact::after, .sword-ritual__stage.is-drawn .sword-ritual__impact i, .sword-ritual__stage.is-drawn .sword-ritual__scabbard, .sword-ritual__stage.is-drawn .sword-ritual__blade { animation-duration: .01ms; animation-iteration-count: 1; } }

.sword-ritual__veil { position: absolute; z-index: 1; inset: 0; background: radial-gradient(ellipse at 50% 44%, transparent 0 14%, rgba(0, 0, 0, .14) 44%, rgba(0, 0, 0, .74) 100%); opacity: 0; pointer-events: none; transition: opacity .38s ease; }
.sword-ritual__stage.is-charging .sword-ritual__veil { opacity: .8; }.sword-ritual__stage.is-drawn .sword-ritual__veil { animation: veilBreak 1.5s ease-out both; }
.sword-ritual__continue { position: absolute; z-index: 9; bottom: 38px; left: calc(50% + 9px); min-height: 48px; padding: 0 19px; border: 1px solid rgba(252, 222, 160, .58); border-radius: 999px; background: linear-gradient(135deg, rgba(126, 43, 28, .88), rgba(49, 17, 11, .95)); box-shadow: 0 11px 26px rgba(0, 0, 0, .28), inset 0 1px rgba(255, 235, 193, .12); color: #fff1d2; font-family: STKaiti, KaiTi, serif; font-size: 14px; letter-spacing: .12em; transform: translateX(-50%); transition: transform .2s ease, filter .2s ease; }.sword-ritual__continue:hover, .sword-ritual__continue:focus-visible { filter: brightness(1.13); outline: none; transform: translateX(-50%) translateY(-2px); }
.sword-ritual__stage.is-drawn .sword-ritual__reset { left: calc(50% - 83px); transform: translateX(-50%); }.sword-ritual__stage.is-drawn .sword-ritual__reset:hover { transform: translateX(-50%) translateY(-2px); }
@keyframes veilBreak { 0% { opacity: .8; } 34% { opacity: .72; } 66% { opacity: .25; } 100% { opacity: .12; } }
@media (max-width: 390px) { .sword-ritual__continue { padding: 0 14px; font-size: 13px; } .sword-ritual__stage.is-drawn .sword-ritual__reset { left: calc(50% - 76px); padding: 0 15px; } }

/* The user's sword image is the interactive object: sheath stays, blade departs. */
.sword-ritual__stage { background: radial-gradient(ellipse at 50% 39%, rgba(255, 239, 197, .07), transparent 23%), radial-gradient(ellipse at 50% 74%, rgba(141, 33, 24, .18), transparent 38%), #020202; }
.sword-ritual__weapon { display: none; }
.sword-ritual__artifact { position: absolute; z-index: 5; top: 50%; left: 50%; width: min(74vw, 280px); height: 590px; transform: translate(-50%, -50%); pointer-events: none; }
.sword-ritual__artifact img { position: absolute; display: block; max-width: none; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .74)); user-select: none; -webkit-user-drag: none; }
.sword-ritual__artifact-sheath { bottom: 14px; left: 59%; height: 465px; transform: translateX(-50%); transition: transform .56s cubic-bezier(.18, .72, .2, 1), filter .45s ease; }
.sword-ritual__artifact-blade { bottom: 17px; left: 59%; height: 540px; clip-path: inset(0 0 73% 0); filter: brightness(.78) contrast(1.02) drop-shadow(0 14px 18px rgba(0, 0, 0, .74)); transform: translateX(-50%); transform-origin: 50% 80%; transition: left .9s cubic-bezier(.16, .78, .19, 1), transform .9s cubic-bezier(.16, .78, .19, 1), clip-path .35s ease, filter .55s ease; }
.sword-ritual__stage.is-charging .sword-ritual__artifact-blade { clip-path: inset(0 0 64% 0); filter: brightness(1.18) contrast(1.09) drop-shadow(0 0 18px rgba(255, 211, 128, .46)); animation: artifactTension .42s ease-in-out infinite alternate; }.sword-ritual__stage.is-charging .sword-ritual__artifact-sheath { filter: brightness(1.14) drop-shadow(0 0 18px rgba(198, 68, 44, .26)); }
.sword-ritual__stage.is-drawn .sword-ritual__artifact-blade { left: 21%; clip-path: inset(0); filter: brightness(1.32) contrast(1.08) drop-shadow(0 0 8px rgba(255, 235, 189, .95)) drop-shadow(0 0 38px rgba(237, 159, 67, .54)); transform: translateX(-50%) translateY(-32px) rotate(-1.5deg); }.sword-ritual__stage.is-drawn .sword-ritual__artifact-sheath { transform: translateX(-50%) translateY(8px) rotate(1.25deg); filter: brightness(1.06) drop-shadow(0 18px 24px rgba(0, 0, 0, .84)); }
.sword-ritual__stage.is-drawn .sword-ritual__circles { opacity: .46; transform: translate(-50%, -53%) scale(1.1); transition: opacity .8s ease, transform 1s ease; }
@keyframes artifactTension { from { transform: translateX(-50%) translateX(-1px) rotateY(-1deg); } to { transform: translateX(-50%) translateX(1px) rotateY(1deg); } }
@media (max-width: 390px) { .sword-ritual__artifact { height: 555px; } .sword-ritual__artifact-sheath { height: 430px; } .sword-ritual__artifact-blade { height: 500px; } }
@media (prefers-reduced-motion: reduce) { .sword-ritual__stage.is-charging .sword-ritual__artifact-blade { animation: none; } }

@keyframes rayMove { from { transform: translateX(-3%) scale(1); } to { transform: translateX(7%) scale(1.13); } }
@keyframes halo { from { transform: scale(.9); opacity: .62; } to { transform: scale(1.08); opacity: 1; } }
@keyframes runeLight { 0% { filter: brightness(.7); transform: translate(-50%, -50%) scale(.62); } 68% { filter: brightness(1.55); } 100% { filter: none; } }
@keyframes ritualSpin { to { transform: rotate(360deg) scaleX(.72); } }
@keyframes ritualPulse { 0% { transform: translate(-50%, -53%) scale(.86); opacity: .65; } 100% { transform: translate(-50%, -53%) scale(1.16); opacity: 0; } }
@keyframes swordShake { 0%, 100% { transform: translate(-50%, -47%) rotate(38deg); } 19% { transform: translate(-48%, -48%) rotate(35deg); } 38% { transform: translate(-52%, -46%) rotate(41deg); } 62% { transform: translate(-49%, -48%) rotate(36deg); } }
@keyframes swordFlash { 0% { opacity: 0; } 17% { opacity: .96; } 100% { opacity: 0; } }
@keyframes auraBreath { from { filter: blur(8px) brightness(1); } to { filter: blur(11px) brightness(1.35); } }
@keyframes sigilBloom { 0% { opacity: .1; filter: brightness(.6); } 65% { filter: brightness(1.7); } 100% { opacity: 1; filter: none; } }
@keyframes swordRelease { 0% { transform: translate(-50%, -47%) rotate(38deg); } 32% { transform: translate(-50%, -48%) rotate(35deg) scale(1.02); } 100% { transform: translate(-50%, -47%) rotate(38deg); } }
@keyframes swordReleaseVertical { 0%, 100% { transform: translate(-50%, -47%); } 28% { transform: translate(-50%, -49%) scaleX(.985); } 56% { transform: translate(-50%, -46%) scaleX(1.01); } }
@keyframes phraseAppear { from { opacity: 0; transform: translateY(18px); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }

/* Entrance sequence: the supplied sword and scabbard are the first scene, not decoration. */
body.gate-open { overflow: hidden; }
.gate { --gate-charge: 0; z-index: 90; display: grid; min-height: 100svh; padding: max(20px, env(safe-area-inset-top, 0px)) 22px max(24px, env(safe-area-inset-bottom, 0px)); align-items: end; overflow: hidden; isolation: isolate; background: #010101; backdrop-filter: none; }
.gate::before { position: absolute; z-index: -1; inset: 0; content: ""; background: radial-gradient(ellipse at 50% 36%, rgba(167, 75, 37, .14), transparent 31%), linear-gradient(180deg, rgba(61, 38, 17, .12), #010101 65%); }
.gate__intro-stage { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.gate__intro-stage::before { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg, rgba(0, 0, 0, .65), transparent 33% 67%, rgba(0, 0, 0, .72)), radial-gradient(ellipse at 50% 49%, transparent 31%, rgba(0, 0, 0, .82) 93%); }
.gate__light-column { position: absolute; top: -18%; bottom: -18%; left: 50%; width: min(34vw, 170px); background: linear-gradient(90deg, transparent, rgba(249, 225, 175, .12) 42%, rgba(255, 248, 224, .27) 50%, rgba(245, 201, 120, .1) 58%, transparent); filter: blur(13px); opacity: calc(.28 + var(--gate-charge)); transform: translateX(-50%) scaleX(calc(.88 + var(--gate-charge))); }
.gate__flare { position: absolute; top: 42%; left: 50%; width: min(72vw, 400px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 239, 189, .44), rgba(234, 162, 70, .17) 23%, rgba(176, 46, 28, .11) 43%, transparent 69%); filter: blur(5px); opacity: calc(.3 + var(--gate-charge)); transform: translate(-50%, -50%) scale(calc(.58 + var(--gate-charge))); }
.gate__ring { position: absolute; top: 44%; left: 50%; width: min(70vw, 360px); aspect-ratio: 1; border: 1px solid rgba(246, 212, 145, .16); border-radius: 50%; opacity: calc(.12 + var(--gate-charge)); transform: translate(-50%, -50%) scale(calc(.73 + var(--gate-charge))); }.gate__ring--two { width: min(45vw, 230px); border-color: rgba(188, 52, 35, .25); transform: translate(-50%, -50%) rotate(45deg) scale(calc(.82 + var(--gate-charge))); }
.gate__sword-artifact { position: absolute; top: 46%; left: 50%; width: min(76vw, 320px); height: min(74svh, 680px); min-height: 420px; isolation: isolate; transform: translate(-50%, -50%); }
.gate__sword-artifact img { position: absolute; display: block; max-width: none; user-select: none; -webkit-user-drag: none; mix-blend-mode: screen; }
.gate__blade-trail { position: absolute; z-index: 0; top: 4%; bottom: 9%; left: 50%; width: clamp(22px, 9vw, 40px); opacity: 0; background: linear-gradient(180deg, transparent 0 16%, rgba(255, 245, 214, .34) 39%, rgba(212, 90, 42, .18) 73%, transparent); filter: blur(9px); transform: translateX(-50%) scaleY(.25); transform-origin: 50% 72%; }
.gate__scabbard { z-index: 2; bottom: 8px; left: 50%; height: 73.53%; filter: brightness(calc(.77 + var(--gate-charge))) contrast(1.1) drop-shadow(0 22px 26px rgba(0, 0, 0, .86)); transform: translateX(-50%); transform-origin: 50% 78%; will-change: transform; }
.gate__blade { z-index: 1; bottom: 0; left: calc(50% + 8px); height: 100%; clip-path: inset(0 0 73.5% 0); filter: brightness(calc(.89 + var(--gate-charge))) contrast(1.06) drop-shadow(0 13px 22px rgba(0, 0, 0, .8)); transform: translateX(-50%); transform-origin: 50% 80%; will-change: clip-path, transform, filter; }
.gate__sheath-seam { position: absolute; z-index: 3; top: 24.2%; left: 50%; width: min(58%, 176px); height: 1px; opacity: calc(.1 + var(--gate-charge)); background: linear-gradient(90deg, transparent, rgba(255, 244, 207, .92) 42% 58%, transparent); box-shadow: 0 0 13px rgba(238, 177, 93, .5); transform: translateX(-50%) scaleX(calc(.72 + var(--gate-charge))); }
.gate__content { position: relative; z-index: 3; width: min(100%, 460px); margin: 0 auto; padding: 0 0 8px; background: none; text-align: center; transition: opacity .28s ease, transform .42s var(--ease); }
.gate__actions { display: flex; justify-content: center; margin: 0; }.gate__open { position: relative; min-width: 160px; min-height: 50px; padding: 0 20px; overflow: hidden; border: 1px solid rgba(241, 210, 158, .43); border-radius: 999px; background: linear-gradient(135deg, rgba(115, 35, 25, .94), rgba(47, 15, 11, .97)); box-shadow: 0 15px 34px rgba(0, 0, 0, .4), inset 0 1px rgba(255, 232, 184, .13); color: #fff2d7; font-family: inherit; font-size: 13px; letter-spacing: .1em; touch-action: none; transition: transform .2s var(--ease), border-color .2s ease, box-shadow .2s ease; }.gate__open::after { position: absolute; inset: 1px; content: ""; border: 1px solid rgba(255, 235, 191, .1); border-radius: inherit; pointer-events: none; }.gate__open:hover { border-color: rgba(255, 224, 157, .66); box-shadow: 0 17px 38px rgba(0, 0, 0, .46), inset 0 1px rgba(255, 232, 184, .18); }.gate__open:active { transform: translateY(1px) scale(.985); }.gate__open:focus-visible { outline: 2px solid #f5d290; outline-offset: 3px; }.gate__open:disabled { cursor: default; }.gate__hold-fill { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(230, 155, 68, .18), rgba(255, 235, 184, .53), rgba(203, 74, 42, .42)); transform: scaleX(var(--hold-progress, 0)); transform-origin: left; transition: transform .07s linear; }.gate__hold-label { position: relative; z-index: 1; }
.gate.is-charging .gate__blade { clip-path: inset(0 0 73.5% 0); filter: brightness(1.28) contrast(1.12) drop-shadow(0 0 18px rgba(255, 218, 151, .56)); animation: gateArtifactTension .34s ease-in-out infinite alternate; }.gate.is-charging .gate__scabbard { filter: brightness(1.12) contrast(1.12) drop-shadow(0 0 17px rgba(205, 67, 39, .3)); }.gate.is-charging .gate__flare { animation: gateChargeBloom .72s ease-in-out infinite alternate; }.gate.is-charging .gate__ring--one { animation: gateRing .9s linear infinite; }
.gate.is-drawing .gate__content { opacity: 0; transform: translateY(18px); }.gate.is-drawing .gate__blade { clip-path: inset(0); animation: gateBladeDraw 1.64s cubic-bezier(.22, .72, .16, 1) both; filter: brightness(1.48) contrast(1.11) drop-shadow(0 0 9px rgba(255, 242, 206, .96)) drop-shadow(0 0 48px rgba(238, 151, 63, .6)); }.gate.is-drawing .gate__scabbard { animation: gateScabbardRecoil 1.02s .08s cubic-bezier(.16, .72, .21, 1) both; }.gate.is-drawing .gate__blade-trail { animation: gateTrailRelease 1.24s .2s cubic-bezier(.14, .7, .2, 1) both; }.gate.is-drawing .gate__sheath-seam { animation: gateSeamRelease .64s .21s ease-out both; }.gate.is-drawing .gate__flare { animation: gateDrawFlash .92s .22s ease-out both; }.gate.is-drawing .gate__ring { animation: gateRingRelease 1.04s .21s cubic-bezier(.1, .65, .18, 1) both; }.gate.is-drawing .gate__light-column { animation: gateColumnRelease 1.18s .18s ease-out both; }
@keyframes gateArtifactTension { from { transform: translateX(-50%) translateY(0); } to { transform: translateX(-50%) translateY(2px); } }
@keyframes gateChargeBloom { from { opacity: .42; transform: translate(-50%, -50%) scale(.64); } to { opacity: .85; transform: translate(-50%, -50%) scale(.84); } }
@keyframes gateRing { to { transform: translate(-50%, -50%) rotate(1turn) scale(.84); } }
@keyframes gateBladeDraw { 0% { clip-path: inset(0 0 73.5% 0); transform: translateX(-50%) translateY(0) scale(1); } 12% { clip-path: inset(0 0 73.5% 0); transform: translateX(-50%) translateY(8px) scale(.995); } 28% { clip-path: inset(0 0 71.5% 0); transform: translateX(-50%) translateY(1px) scale(1); } 47% { clip-path: inset(0 0 52% 0); transform: translateX(-50%) translateY(-10%); } 66% { clip-path: inset(0 0 30% 0); transform: translateX(-50%) translateY(-27%); } 83% { clip-path: inset(0 0 8% 0); transform: translateX(-50%) translateY(-45%); } 100% { clip-path: inset(0); transform: translateX(-50%) translateY(-55%); } }
@keyframes gateScabbardRecoil { 0%, 18% { transform: translateX(-50%) translateY(0); } 37% { transform: translateX(-50%) translateY(4px); } 72% { transform: translateX(-50%) translateY(11px); } 100% { transform: translateX(-50%) translateY(6px); } }
@keyframes gateTrailRelease { 0% { opacity: 0; transform: translateX(-50%) scaleY(.25); } 32% { opacity: .82; transform: translateX(-50%) scaleY(.68); } 82% { opacity: .42; transform: translateX(-50%) scaleY(1.08); } 100% { opacity: 0; transform: translateX(-50%) scaleY(1.2); } }
@keyframes gateSeamRelease { 0% { opacity: .92; transform: translateX(-50%) scaleX(1); } 100% { opacity: 0; transform: translateX(-50%) scaleX(1.8); } }
@keyframes gateDrawFlash { 0% { opacity: .52; transform: translate(-50%, -50%) scale(.68); } 26% { opacity: 1; transform: translate(-50%, -50%) scale(1.25); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.82); } }
@keyframes gateRingRelease { 0% { opacity: .56; transform: translate(-50%, -50%) scale(.78); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.55); } }
@keyframes gateColumnRelease { 0% { opacity: .42; transform: translateX(-50%) scaleX(1); } 28% { opacity: .94; transform: translateX(-50%) scaleX(1.9); } 100% { opacity: 0; transform: translateX(-50%) scaleX(2.75); } }
@media (min-width: 740px) { .gate { padding-bottom: max(36px, env(safe-area-inset-bottom, 0px)); }.gate__sword-artifact { top: 47%; width: 330px; height: min(76svh, 730px); }.gate__content { padding-top: 28px; } }
@media (max-height: 620px) { .gate__sword-artifact { top: 42%; height: min(68svh, 510px); min-height: 330px; }.gate__content { padding-bottom: 0; } }
body.motion-reduced .gate.is-charging .gate__blade, body.motion-reduced .gate.is-drawing .gate__blade, body.motion-reduced .gate.is-drawing .gate__scabbard, body.motion-reduced .gate.is-drawing .gate__flare, body.motion-reduced .gate.is-drawing .gate__ring, body.motion-reduced .gate.is-drawing .gate__light-column { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }