:root{--ink:#1a2029;--red:#a82032;--blue:#7992b0;--paper:#fafbfd;--mx:0px;--my:0px}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:'Noto Serif SC',serif;color:var(--ink)}body{background:var(--paper)}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer;color:inherit}a,button{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:2px solid var(--red);outline-offset:5px}.app{isolation:isolate;position:relative;height:100svh;min-height:640px;display:flex;flex-direction:column;overflow:hidden;background:radial-gradient(ellipse at 50% 54%,#fff,#fafbfd 65%)}.world{position:absolute;inset:70px 0 95px;z-index:-1;pointer-events:none}.world-art{position:absolute;left:50%;top:0;height:100%;width:75%;object-fit:contain;transform:translateX(-50%) translate(var(--mx),var(--my));transition:transform .8s ease-out;opacity:.68;animation:manifest 1.8s both}.world-shade{display:none}.halo{position:absolute;width:400px;height:260px;left:50%;top:56%;transform:translateX(-50%);background:radial-gradient(ellipse,#ebd8b848,transparent 65%);animation:halo 6s ease-in-out infinite}#magic{position:absolute;inset:0;pointer-events:none;z-index:2;width:100%;height:100%}header{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:center;padding:25px 4.5%;gap:15px}.brand{display:flex;align-items:center;gap:12px;font:600 26px 'Cormorant Garamond',serif}.brand-symbol{font-size:34px;color:var(--red)}.brand small{display:block;font:9px Georgia,serif;letter-spacing:.16em;color:#7b8696;margin-top:3px}.header-actions{display:flex;align-items:center;gap:25px}.edition{font:11px Georgia,serif;letter-spacing:.12em;color:#7c8999}.icon-button{width:44px;height:44px;border:1px solid #7992b033;background:#ffffff9c;font:19px Georgia,serif;border-radius:50%}main{flex:1;min-height:0;position:relative;display:flex;align-items:center}.margin-note{position:absolute;left:4.5%;top:32%;font:10px Georgia,serif;writing-mode:vertical-rl;letter-spacing:.22em;color:#98a5b5}.page-area{position:relative;margin-left:9%;width:42%;max-width:540px;z-index:3;max-height:100%;overflow:auto;scrollbar-width:thin;padding:8px}.app:has(#prologue:not([hidden])) .page-area{margin:0;width:100%;max-width:none;height:100%;padding:0;overflow:visible}.page{outline:none;animation:pageIn .55s both}.page[hidden]{display:none}.prologue{position:absolute;top:47%;width:100%;text-align:center}.chapter{display:flex;align-items:center;gap:13px;font-size:13px;letter-spacing:.15em;color:#6e87a5;margin:0 0 18px}.chapter>span{height:1px;width:30px;background:#9aaabc}.prologue .chapter{justify-content:center;font:12px Georgia,serif;letter-spacing:.24em;margin-bottom:5px}.prologue .chapter>span{display:none}h1{font:600 clamp(72px,7.8vw,120px)/.94 'Cormorant Garamond',serif;letter-spacing:-.055em;margin:0;white-space:nowrap;text-shadow:0 0 35px #ffffffd9,0 0 12px #ffffffd9}h1>span{font-style:italic;color:var(--red);font-weight:500;font-size:1.17em;letter-spacing:-.065em;margin-left:6px}.rule{display:flex;align-items:center;gap:14px;color:var(--red);width:160px;margin:20px auto 13px;font-size:10px}.rule:before,.rule:after{content:'';height:1px;flex:1;background:#99a8bc4d}.intro{font-size:14px;line-height:2.05;color:#7a8594;margin:0 0 17px}.hero-subtitle{font-size:20px;color:#2c3441;letter-spacing:.21em}.primary{border:1px solid #a8203266;background:#ffffffc9;padding:11px 23px;display:inline-flex;align-items:center;gap:35px;color:var(--red);font-size:14px;transition:color .3s,background .3s,transform .3s}.primary:hover{background:var(--red);color:#fff;transform:translateY(-3px)}.primary>span{font-size:20px}.signature{font:italic 24px 'Cormorant Garamond',serif;margin:13px 0 0;color:#697b91}.signature>span{font-size:13px;margin-left:6px;color:#9aa4b1}.scene-caption{position:absolute;right:4.5%;bottom:12%;font:10px Georgia,serif;letter-spacing:.14em;color:#8190a2;display:flex;gap:12px;align-items:center}.scene-caption small{display:block;margin-top:7px;font:12px 'Noto Serif SC',serif;letter-spacing:.05em}.caption-line{height:1px;width:30px;background:#9aaabc}.spell{position:absolute;right:7%;top:32%;display:flex;flex-direction:column;align-items:center;background:transparent;border:0;z-index:3;color:#7188a3}.spell>span{display:grid;place-items:center;width:58px;height:58px;border:1px solid #8c9db250;border-radius:50%;font-size:39px;background:#ffffff70;box-shadow:0 0 24px #b9c5d525;animation:pulse 5s infinite}.spell small{font-size:12px;letter-spacing:.1em;margin-top:10px}.bottom-bar{display:flex;justify-content:space-between;align-items:center;margin:0 4.5%;border-bottom:1px solid #8393aa2e;z-index:3}nav{display:flex;gap:38px;position:relative}nav a{display:flex;align-items:center;gap:10px;padding:20px 0;font-size:14px;color:#929aaa}nav a[aria-current]{color:var(--red)}.nav-number{font:18px 'Cormorant Garamond',serif;color:#8897ad}nav small{font:10px Georgia,serif;letter-spacing:.12em}.nav-ink{position:absolute;bottom:-1px;left:0;height:2px;width:var(--nav-width,170px);transform:translateX(var(--nav-left,0px));background:var(--red);transition:width .4s,transform .4s}.page-number{font:20px 'Cormorant Garamond',serif;color:#9aa8ba;display:flex;align-items:center;gap:15px}.page-number>span{color:var(--red)}.page-number i{width:40px;height:1px;background:#a0afc3}footer{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:17px 4.5%;font:11px Georgia,'Noto Serif SC',serif;color:#8c96a5;z-index:3}footer div{display:flex;gap:14px}footer img{width:12px;height:12px;vertical-align:-2px;margin-right:4px}footer a:hover{text-decoration:underline}.footer-word{font-size:9px;letter-spacing:.13em}h2{font-size:44px;font-weight:500;margin:0 0 23px;letter-spacing:.02em}.star{font:30px Georgia,serif;color:var(--red);margin-left:15px}.profile-card{display:flex;gap:20px;align-items:center;border-bottom:1px solid #8194b233;padding-bottom:15px}.profile-card img{width:150px;height:170px;object-fit:contain;animation:float 6s infinite}.profile-name{font:35px 'Cormorant Garamond',serif;margin:0 0 8px}.profile-name small{font-size:20px;color:#8393a8}.profile-card p:not(.profile-name){font-size:16px;line-height:1.9;color:#738298}dl{margin:19px 0}dl div{display:flex;gap:32px;padding:9px 0;font-size:14px}dt{color:#8a98aa;width:38px;flex-shrink:0}dd{margin:0}.small-note{font-size:14px;color:#7d8da3}.gallery-frame{margin:0;border:1px solid #8194b22e;background:#ffffffc9;padding:12px;box-shadow:7px 7px 0 #b2bdca10}.gallery-frame>img{width:100%;height:250px;display:block;object-fit:contain}.gallery-frame figcaption{display:flex;align-items:center;justify-content:space-between;padding:12px 0 0;font-size:14px;color:#7b8ca1}.gallery-frame figcaption div{display:flex;gap:5px}.gallery-frame button{width:44px;height:44px;border:1px solid #8194b22e;background:#fff;font-size:20px}.gallery-frame button:hover{border-color:var(--red);color:var(--red)}.text-link{display:inline-flex;gap:25px;font-size:14px;color:var(--red);padding:12px 0 5px;border-bottom:1px solid #a8203240;margin-top:6px}.app:has(#profile:not([hidden])) .world-art,.app:has(#gallery:not([hidden])) .world-art{left:74%;width:52%;opacity:.23}.app:has(#profile:not([hidden])) .halo,.app:has(#gallery:not([hidden])) .halo{left:74%}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.page-area.turning{animation:pageTurn .48s both}.app.paused *{animation-play-state:paused!important}.app.paused .world-art{transform:translateX(-50%)}
@keyframes pageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes manifest{from{opacity:0;filter:blur(8px);transform:translateX(-50%) scale(.97)}to{opacity:.68;filter:blur(0);transform:translateX(-50%) scale(1)}}@keyframes halo{0%,100%{opacity:.3}50%{opacity:1}}@keyframes pulse{0%,100%{box-shadow:0 0 12px #afbfda20;transform:scale(1)}50%{box-shadow:0 0 35px #afbfda55;transform:scale(1.05)}}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}@keyframes pageTurn{0%{opacity:1;transform:perspective(1000px) rotateY(0)}45%{opacity:0;transform:perspective(1000px) rotateY(-12deg)}100%{opacity:1;transform:perspective(1000px) rotateY(0)}}
@media(max-height:780px) and (min-width:761px){.app{min-height:620px}header{padding-top:18px;padding-bottom:18px}.prologue{top:42%}h1{font-size:clamp(64px,7.3vw,100px)}.signature{display:none}.rule{margin-top:15px}.world{inset:60px 0 85px}.gallery-frame>img{height:190px}.profile-card img{height:130px;width:120px}.chapter{margin-bottom:12px}h2{font-size:38px;margin-bottom:18px}}
@media(max-width:1000px) and (min-width:761px){h1{font-size:72px}.page-area{width:50%;margin-left:6%}.edition,.footer-word{display:none}nav{gap:28px}nav small{display:none}.scene-caption{display:none}}
@media(max-width:760px){.app{min-height:640px}header{padding:17px 21px 12px;align-items:flex-start}.brand{font-size:23px;gap:8px}.brand-symbol{font-size:29px}.brand small{font-size:8px;letter-spacing:.07em}.edition{display:none}.header-actions{gap:0}.icon-button{width:44px;height:44px}.world{inset:70px 0 135px}.world-art{width:112%;height:75%;top:0;opacity:.7}.world-shade{display:none}.halo{width:240px;height:200px;top:48%}.prologue{top:48%;padding:0 18px}.prologue .chapter{font-size:10px;letter-spacing:.16em;margin-bottom:10px}h1{font-size:clamp(39px,10.5vw,68px);letter-spacing:-.05em}h1>span{margin-left:3px}.rule{margin:17px auto 12px;width:120px}.intro{font-size:13px;line-height:2.05;margin-bottom:20px}.hero-subtitle{font-size:18px;letter-spacing:.15em}.primary{font-size:14px;padding:12px 20px;gap:25px}.signature{font-size:24px;margin-top:18px}.signature>span{display:block;font-size:12px;margin-top:5px}.margin-note,.scene-caption{display:none}.spell{right:16px;top:15%}.spell>span{width:44px;height:44px;font-size:30px}.spell small{display:none}.bottom-bar{margin:0 21px}.page-number{display:none}nav{width:100%;justify-content:space-between;gap:10px}nav a{padding:15px 0;flex-wrap:wrap;justify-content:center;gap:6px;font-size:14px}nav small{display:block;flex-basis:100%;text-align:center;font-size:9px}footer{padding:12px 12px max(12px,env(safe-area-inset-bottom));font-size:10px;justify-content:center;flex-wrap:wrap;gap:5px}footer div{gap:7px;justify-content:center;flex-wrap:wrap}.footer-word{display:none}footer>span:first-child{order:2;width:100%;text-align:center;margin-top:3px}.page-area{margin:0 22px;width:calc(100% - 44px);padding:4px;max-width:none}.chapter{font-size:12px}h2{font-size:34px;margin:0 0 18px}.profile-card{gap:15px}.profile-card img{width:100px;height:140px}.profile-name{font-size:30px}.profile-card p:not(.profile-name){font-size:16px;line-height:1.8}dl div{font-size:14px;padding:8px 0}.small-note{font-size:14px}.gallery-frame{padding:9px}.gallery-frame>img{height:235px}.gallery-frame figcaption{font-size:12px}.app:has(#profile:not([hidden])) .world-art,.app:has(#gallery:not([hidden])) .world-art{left:50%;width:115%;opacity:.09}.app:has(#profile:not([hidden])) .halo,.app:has(#gallery:not([hidden])) .halo{left:50%}}
@media(max-width:760px) and (max-height:740px){.world-art{height:74%}.prologue{top:43%}.signature{display:none}.intro{margin-bottom:15px}.rule{margin:14px auto 9px}.gallery-frame>img{height:195px}.profile-card img{height:115px}header{padding-top:12px}h2{font-size:31px}.page-area{max-height:95%}}
@media(max-width:760px) and (max-height:640px){.app{min-height:560px}.prologue{top:40%}.hero-subtitle{font-size:16px}.intro{font-size:12px;margin-bottom:12px}.rule{margin:12px auto 7px}.primary{padding:10px 16px}.world{inset:60px 0 110px}.world-art{height:75%}header{padding:10px 17px}.brand{font-size:21px}.brand small{font-size:7px}nav a{padding:10px 0}footer{padding-top:8px;padding-bottom:8px}.gallery-frame>img{height:145px}.profile-card img{height:95px;width:85px}.profile-card p:not(.profile-name){font-size:14px}.chapter{margin-bottom:10px}h2{font-size:28px;margin-bottom:14px}dl{margin:10px 0}dl div{padding:6px 0}.small-note{margin-top:10px}}
@media(max-height:560px) and (min-width:761px){.app{min-height:0}header{padding:10px 4.5%}.brand small,.edition,.signature{display:none}.prologue{top:24%}h1{font-size:60px}.world{inset:10px 0 50px}.world-art{opacity:.36}.page-area{max-height:calc(100svh - 155px)}nav a{padding:12px 0}footer{padding:10px 4.5%}.gallery-frame>img{height:110px}h2{font-size:28px;margin-bottom:10px}.profile-card img{height:90px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.world-art{transform:translateX(-50%)}}

.app:has(#profile:not([hidden])) .world-art,.app:has(#gallery:not([hidden])) .world-art{animation:none}.ink-echo{position:absolute;left:50%;top:0;height:100%;width:75%;object-fit:contain;transform:translateX(-50%);opacity:0;filter:blur(4px);animation:inkEcho 9s ease-out infinite;pointer-events:none}.app:has(#profile:not([hidden])) .ink-echo,.app:has(#gallery:not([hidden])) .ink-echo{display:none}@keyframes inkEcho{0%,65%,100%{opacity:0;transform:translateX(-50%) scale(1)}74%{opacity:.09}90%{opacity:0;transform:translateX(-50%) scale(1.045)}}@media(max-width:760px){.ink-echo{width:112%;height:75%}}

.prologue .intro,.prologue .chapter{color:#657a94;text-shadow:0 0 8px #fff,0 0 15px #fff}.hero-subtitle{color:#303b4e}.prologue .primary{background:#ffffffeb}.prologue .signature{color:#657a94;text-shadow:0 0 8px #fff}

@media(min-width:761px) and (min-height:781px){.prologue{top:44%}}

/* Independently generated book, character and ink layers. */
.scene-stage{position:absolute;inset:0;left:50%;width:min(760px,78vw);transform:translateX(-50%) translate(var(--mx),var(--my));transition:transform .7s,opacity .6s;opacity:0;perspective:1200px}.scene-stage.scene-ready{opacity:1}.summon-wolf{position:absolute;left:12%;top:0;width:76%;height:78%;object-fit:contain;object-position:center bottom;opacity:1;filter:drop-shadow(0 0 16px #b7c5da18);transform-origin:center bottom}.summon-ribbons{position:absolute;left:5%;top:2%;width:90%;height:92%;object-fit:contain;opacity:.25;pointer-events:none}.book-spread{position:absolute;bottom:0;left:6%;width:88%;height:31%;perspective:1100px;isolation:isolate;opacity:.75}.book-half{position:absolute;inset:0;transform-origin:50% 50%;backface-visibility:hidden}.book-half img{width:100%;height:100%;object-fit:contain}.book-left{clip-path:inset(0 50% 0 0)}.book-right{clip-path:inset(0 0 0 50%)}.closed-intro{position:absolute;left:36%;bottom:4%;width:28%;height:28%;object-fit:contain;opacity:0;pointer-events:none}.spine-light{position:absolute;left:30%;bottom:4%;width:40%;height:30%;background:radial-gradient(ellipse,#f0d5a285,#e7c89b21 40%,transparent 72%);opacity:.55;mix-blend-mode:multiply;pointer-events:none}.scene-ready .book-left{animation:openLeft 1.65s .25s both}.scene-ready .book-right{animation:openRight 1.65s .25s both}.scene-ready .closed-intro{animation:unseal .95s both}.scene-ready .spine-light{animation:ignite 3.6s .7s both,glowBreath 7s 4.3s infinite}.scene-ready .summon-wolf{animation:emerge 2.6s 1.25s both,travelerFloat 8s 4.2s ease-in-out infinite}.scene-ready .summon-ribbons{animation:inkUnfurl 2.7s 1.8s both,ribbonDrift 10s 4.8s ease-in-out infinite}.profile-relic{position:absolute;right:0;bottom:2%;width:75px;height:100px;object-fit:contain;opacity:.22;pointer-events:none;transform:rotate(12deg)}.profile{position:relative}.art-thumbnails{display:flex;gap:7px;overflow-x:auto;padding:11px 0 3px;scrollbar-width:thin}.art-thumbnails button{flex:0 0 54px;height:48px;padding:3px;border:1px solid #8194b233;background:#fff;transition:border-color .2s,background .2s}.art-thumbnails button[aria-pressed=true]{border-color:var(--red);background:#a8203208}.art-thumbnails img{width:100%;height:100%;object-fit:contain}.gallery-frame>img{height:210px}.app:has(#profile:not([hidden])) .scene-stage,.app:has(#gallery:not([hidden])) .scene-stage{left:75%;opacity:.17}.app:has(#profile:not([hidden])) .scene-stage *,.app:has(#gallery:not([hidden])) .scene-stage *{animation:none}.app:has(#profile:not([hidden])) .summon-wolf,.app:has(#gallery:not([hidden])) .summon-wolf{opacity:1;clip-path:inset(0)}.app.paused .scene-stage{transform:translateX(-50%)}.app:not(.scene-loaded) .prologue{opacity:1}
@keyframes unseal{0%,45%{opacity:.7;transform:scale(.9) rotateY(0)}100%{opacity:0;transform:scale(.85) rotateY(85deg)}}
@keyframes openLeft{0%{transform:rotateY(88deg) rotateZ(6deg);filter:brightness(.8)}65%{transform:rotateY(-9deg) rotateZ(-1deg)}100%{transform:rotateY(0) rotateZ(0);filter:brightness(1)}}
@keyframes openRight{0%{transform:rotateY(-88deg) rotateZ(-6deg);filter:brightness(.8)}65%{transform:rotateY(9deg) rotateZ(1deg)}100%{transform:rotateY(0) rotateZ(0);filter:brightness(1)}}
@keyframes emerge{0%{opacity:0;transform:translateY(14%) scale(.88);clip-path:inset(100% 0 0 0);filter:blur(10px)}30%{opacity:.15;clip-path:inset(72% 0 0 0)}65%{opacity:.6;clip-path:inset(25% 0 0 0);filter:blur(2px)}100%{opacity:1;transform:translateY(0) scale(1);clip-path:inset(0);filter:blur(0)}}
@keyframes inkUnfurl{0%{opacity:0;clip-path:inset(100% 0 0);transform:scale(.85)}100%{opacity:.25;clip-path:inset(0);transform:scale(1)}}
@keyframes ignite{0%{opacity:0;transform:scale(.4)}35%{opacity:1;transform:scale(1.7)}100%{opacity:.55;transform:scale(1)}}
@keyframes glowBreath{0%,100%{opacity:.35}50%{opacity:.65}}
@keyframes travelerFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes ribbonDrift{0%,100%{transform:rotate(-1deg)}50%{transform:rotate(1deg)}}
@media(max-height:780px) and (min-width:761px){.gallery-frame>img{height:150px}.art-thumbnails button{height:44px}}
@media(max-width:760px){.scene-stage{width:110%;height:77%}.summon-wolf{width:82%;left:9%;height:77%}.book-spread{left:3%;width:94%;height:31%}.summon-ribbons{width:100%;left:0;height:95%}.closed-intro{bottom:3%}.gallery-frame>img{height:190px}.art-thumbnails{gap:6px}.art-thumbnails button{flex-basis:44px;height:44px}.profile-relic{width:60px}.app:has(#profile:not([hidden])) .scene-stage,.app:has(#gallery:not([hidden])) .scene-stage{left:50%;opacity:.08}}
@media(max-width:760px) and (max-height:740px){.gallery-frame>img{height:147px}}
@media(max-width:760px) and (max-height:640px){.gallery-frame>img{height:102px}.art-thumbnails{padding-top:7px}.art-thumbnails button{flex-basis:40px;height:40px}.scene-stage{height:76%}}
@media(prefers-reduced-motion:reduce){.closed-intro{opacity:0!important}.book-half{transform:none!important}.summon-wolf{opacity:1!important;clip-path:inset(0)!important;transform:none!important;filter:none!important}.summon-ribbons{opacity:.25!important;clip-path:inset(0)!important}.scene-stage{transition:none}}

.scene-ready .summon-wolf{animation:emerge 2.6s 1.95s both,travelerFloat 8s 4.8s ease-in-out infinite}.scene-ready .summon-ribbons{animation:inkUnfurl 2.7s 2.45s both,ribbonDrift 10s 5.3s ease-in-out infinite}@media(prefers-reduced-motion:reduce){.scene-ready .summon-wolf,.scene-ready .summon-ribbons{animation:none!important}}

.profile-card .profile-avatar{width:120px;height:120px;object-fit:cover;object-position:center;border-radius:50%;border:1px solid #8194b244;background:radial-gradient(ellipse,#f1f5fb,#fff);padding:3px;animation:none;flex-shrink:0}.app:has(#profile:not([hidden])) .world{visibility:hidden}@media(max-width:760px){.profile-card .profile-avatar{width:96px;height:96px}}@media(max-width:760px) and (max-height:640px){.profile-card .profile-avatar{width:80px;height:80px}}

.avatar-frame{display:block;width:120px;height:120px;flex-shrink:0;overflow:hidden;border-radius:50%;border:1px solid #8194b244;background:radial-gradient(ellipse,#f1f5fb,#fff)}.profile-card .profile-avatar{width:100%;height:100%;border:0;border-radius:0;background:none;padding:0;transform:scale(1.35);transform-origin:center 33%}.app:has(#profile:not([hidden])) .page-area{margin:auto}.app:has(#profile:not([hidden])) .spell,.app:has(#profile:not([hidden])) .scene-caption{display:none}@media(max-width:760px){.avatar-frame{width:96px;height:96px}}@media(max-width:760px) and (max-height:640px){.avatar-frame{width:80px;height:80px}}

/* Chapter links live on illustrated loose pages. */
.margin-note,.scene-caption{display:none}main{margin-bottom:62px}.spell{right:4%;top:13%}.app:has(#gallery:not([hidden])) .page-area{margin:auto}.app:has(#gallery:not([hidden])) .world{visibility:hidden}.app:has(#gallery:not([hidden])) .spell{display:none}
@keyframes loosePaperFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-9px) rotate(1deg)}}
@media(max-width:1100px) and (min-width:761px){.loose-pages .loose-page{width:132px;height:132px}.page-prologue{left:2%;top:27%}.page-profile{right:2%;top:40%}.page-gallery{left:3%;bottom:14%}.paper-text{gap:4px}.paper-text strong{font-size:16px}.paper-text em{font-size:13px}.paper-text small{font-size:8px}}
@media(max-width:760px){main{margin-bottom:0}.loose-pages{position:relative;inset:auto;height:112px;flex:0 0 112px;margin:0 13px;width:calc(100% - 26px);display:flex;justify-content:space-between;align-items:center;gap:0}.loose-pages .loose-page{position:relative;inset:auto;width:108px;height:108px;flex:0 0 30%;transform:rotate(var(--paper-angle))}.page-prologue{--paper-angle:-9deg}.page-profile{--paper-angle:5deg;top:-5px!important}.page-gallery{--paper-angle:11deg;top:4px!important}.paper-text{inset:33% 6% 12%;gap:3px}.paper-text strong{font-size:15px}.paper-text em{font-size:11px}.paper-text small{font-size:7px;letter-spacing:.025em}.spell{right:15px;top:12%}.prologue{top:43%}.signature{display:none}.app:has(#gallery:not([hidden])) .page-area{width:calc(100% - 44px)}.paper-body{animation-duration:8s}}
@media(max-width:760px) and (max-height:740px){.loose-pages{height:98px;flex-basis:98px}.loose-pages .loose-page{height:96px;width:96px}.prologue{top:39%}.gallery-frame>img{height:127px}}
@media(max-width:760px) and (max-height:640px){.loose-pages{height:85px;flex-basis:85px}.loose-pages .loose-page{height:84px;width:84px}.paper-text strong{font-size:14px}.paper-text em{font-size:10px}.prologue{top:36%}.gallery-frame>img{height:85px}.profile-card p:not(.profile-name){font-size:14px}.small-note{font-size:13px}}
@media(max-height:560px) and (min-width:761px){main{margin-bottom:0}.loose-pages .loose-page{width:105px;height:105px}.page-prologue{top:22%}.page-profile{top:38%}.page-gallery{bottom:12%}.paper-text strong{font-size:14px}.paper-text em{font-size:11px}.paper-text{gap:2px}}
@media(prefers-reduced-motion:reduce){.paper-body{animation:none!important}}


/* A unified grimoire: ivory stock, bluegray ink, vermilion seals. */
:root{--paper:#fcfbf7;--ink:#242b38;--blue:#758da6;--red:#a52132}
.app{background:radial-gradient(ellipse at 50% 45%,#fff 15%,#fcfbf7 70%,#eeeee8);}
.app:before{content:'';position:absolute;inset:15px;border:1px solid #8296ac38;pointer-events:none;z-index:6;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 98%,99% 98%,99% 2%,1% 2%,1% 98%,0 98%)}
.app:after{content:'';position:absolute;inset:23px;border:1px solid #8296ac1a;pointer-events:none;z-index:0}
header{padding-top:28px}.brand{letter-spacing:-.025em}.brand-symbol{font-size:31px}.edition{color:#738399;border-bottom:1px solid #8397ab55;padding:8px 0;letter-spacing:.2em}
.scene-stage{filter:none}.scene-stage.scene-ready{opacity:1}.scene-stage .summon-wolf{mask-image:none;-webkit-mask-image:none;mix-blend-mode:normal}.scene-stage .summon-ribbons{mix-blend-mode:multiply}.scene-stage .closed-intro{filter:grayscale(1)}.scene-stage .book-spread{opacity:.75}
.paper-illustration{filter:grayscale(.85) sepia(.13);opacity:.85}.paper-body{filter:drop-shadow(2px 5px 5px #52667a15)}.paper-text small{letter-spacing:.13em}.paper-text strong{letter-spacing:.13em}.paper-text em{font-variant:small-caps;font-style:normal}.loose-page[aria-current] .paper-text:after{content:'✦';position:absolute;bottom:-9px;color:var(--red);font-size:11px}
.chapter{font-size:11px;letter-spacing:.22em;text-transform:uppercase}.chapter>span{width:26px;background:var(--red)}h2{font-weight:600;letter-spacing:.12em;color:#30394a;margin-bottom:22px}.star{font-size:22px;color:#a52132}.page.profile,.page.gallery{position:relative;padding:30px 32px 26px;background:linear-gradient(110deg,#ffffffd9,#faf9f2e8);border:1px solid #8a9daf55;box-shadow:inset 0 0 0 5px #fcfbf7,inset 0 0 0 6px #91a0ad22,8px 12px 30px #667c8e0b}
.page.profile:before,.page.gallery:before{content:'✧';position:absolute;top:7px;right:13px;color:#8094aa;font-size:28px}.page.profile:after,.page.gallery:after{content:'';position:absolute;left:15px;right:15px;bottom:11px;height:4px;border-top:1px solid #8397ab44;border-bottom:1px solid #8397ab22;pointer-events:none}
.app:has(#profile:not([hidden])) .page-area,.app:has(#gallery:not([hidden])) .page-area{width:540px;max-width:calc(100% - 340px);padding:5px}
.profile-card{gap:22px;border-bottom:1px solid #8a9daf44;padding-bottom:20px}.avatar-frame{border:3px double #869bb0;border-radius:50%;box-shadow:0 0 0 5px #fcfbf7,0 0 0 6px #8b9cad38;background:#f4f5f3}.profile-name{font-size:38px;color:#3f5068}.profile-name small{font-size:17px;font-style:italic}.profile-card p:not(.profile-name){font-size:15px;color:#687b91}
dl{margin:18px 0}dl div{border-bottom:1px dotted #8c9baa40;padding:10px 0;gap:26px;font-size:13px}dt{font-size:12px;color:#a52132;letter-spacing:.1em}dd{color:#50627a}.small-note{font-size:12px;text-align:right;font-style:italic;color:#7b8a9a}
.gallery-frame{border:0;background:transparent;box-shadow:none;padding:0}.gallery-frame>img{background:#fff9;border:1px solid #8499ad44;padding:10px}.gallery-frame figcaption{font-size:12px;letter-spacing:.06em}.gallery-frame button{border:1px solid #889daf66;background:#fbfaf5;width:38px;height:38px;color:#546b85}.art-thumbnails button{background:#faf9f3;border:1px solid #869aaf55;box-shadow:2px 2px 0 #8093aa12}.art-thumbnails button[aria-pressed=true]{border:1px solid var(--red);background:#a5213209}.text-link{font-size:12px;letter-spacing:.1em}.gallery .chapter{margin-bottom:12px}.gallery h2{margin-bottom:16px}
footer{color:#8290a0;font-size:10px;padding-bottom:23px}.footer-word{letter-spacing:.19em}
@media(max-width:1100px) and (min-width:761px){.app:has(#profile:not([hidden])) .page-area,.app:has(#gallery:not([hidden])) .page-area{max-width:calc(100% - 280px)}.page.profile,.page.gallery{padding:22px}}
@media(max-width:760px){.app:before{inset:8px}.app:after{inset:13px}header{padding:19px 23px 12px}.app:has(#profile:not([hidden])) .page-area,.app:has(#gallery:not([hidden])) .page-area{width:calc(100% - 34px);max-width:none;margin:auto;padding:4px}.page.profile,.page.gallery{padding:21px 19px 19px}h2{font-size:30px;letter-spacing:.08em}.chapter{font-size:10px;letter-spacing:.1em}.profile-card{gap:18px;padding-bottom:15px}.profile-name{font-size:32px}.profile-card p:not(.profile-name){font-size:14px}.gallery-frame>img{height:190px}.paper-text strong{letter-spacing:.07em}.paper-text small{letter-spacing:.02em}.paper-text em{font-size:11px}.loose-page[aria-current] .paper-text:after{bottom:-6px;font-size:8px}footer{padding-bottom:max(16px,env(safe-area-inset-bottom));font-size:9px}.small-note{font-size:12px}dl div{padding:9px 0}}
@media(max-width:760px) and (max-height:740px){.page.profile,.page.gallery{padding:17px 17px 15px}.gallery-frame>img{height:132px}h2{font-size:27px;margin-bottom:15px}.profile-card{padding-bottom:10px}dl{margin:12px 0}dl div{padding:7px 0}.small-note{margin:10px 0}}
@media(max-width:760px) and (max-height:640px){header{padding-top:12px}.page.profile,.page.gallery{padding:14px 15px}.gallery-frame>img{height:95px}.chapter{font-size:9px;margin-bottom:9px}.gallery h2,h2{font-size:25px;margin-bottom:10px}.profile-name{font-size:28px}.profile-card p:not(.profile-name){font-size:12px}.profile-card{gap:14px}dl div{font-size:12px;padding:5px 0}footer{padding-bottom:12px}}

/* Single cover page, with ordered external-link leaves. */
.brand-emblem{width:58px;height:58px;object-fit:contain;flex-shrink:0}.brand{font-size:25px;gap:9px}.header-actions{display:none}.prologue{top:44%}.prologue .rule{margin:17px auto 9px}
.prologue .loose-pages{position:relative;inset:auto;display:flex;justify-content:center;align-items:center;width:auto;height:auto;margin:0;gap:18px;pointer-events:auto}.prologue .loose-pages .loose-page{position:relative;inset:auto!important;width:130px;height:154px;flex:0 0 130px;transform:none;--paper-angle:0deg}.prologue .paper-body{animation:orderedLeafFloat 8s var(--float-delay) ease-in-out infinite}.prologue .paper-text{inset:35% 10% 13%;gap:5px}.prologue .paper-text strong{font-size:17px}.prologue .paper-text em{font-size:12px}.prologue .loose-page:hover,.prologue .loose-page:focus-visible{transform:translateY(-5px)}.prologue .loose-page[aria-disabled=true]{cursor:default}.prologue .paper-text:after{display:none}main{margin-bottom:0}.world{inset:95px 0 100px}.scene-stage .book-spread{opacity:.45}
@keyframes orderedLeafFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media(max-width:760px){.brand-emblem{width:45px;height:45px}.brand{font-size:22px}.world{inset:75px 0 95px}.scene-stage{height:90%}.prologue{top:47%;padding:0 12px}.prologue .loose-pages{gap:7px;margin:0 auto;width:100%;height:auto;flex-basis:auto}.prologue .loose-pages .loose-page{width:96px;height:118px;flex:0 1 96px}.prologue .paper-text{inset:35% 6% 13%;gap:3px}.prologue .paper-text strong{font-size:14px}.prologue .paper-text small{font-size:7px}.prologue .paper-text em{font-size:10px}.prologue .rule{margin:15px auto 7px}.scene-stage .book-spread{bottom:0}}
@media(max-width:760px) and (max-height:640px){.prologue{top:43%}.prologue .loose-pages .loose-page{height:103px;flex-basis:88px}.brand-emblem{width:36px;height:36px}.world{inset:62px 0 70px}.prologue .rule{margin:10px auto 4px}}
@media(prefers-reduced-motion:reduce){.prologue .paper-body{animation:none}}

/* Center each two-line link label in the usable parchment area. */
.prologue .paper-text{inset:24% 7% 19%;gap:6px;justify-content:center;align-items:center}.prologue .paper-text strong{font:600 23px 'Cormorant Garamond',serif;letter-spacing:.02em;line-height:1.1}.prologue .paper-text em{font:500 14px 'Noto Serif SC',serif;letter-spacing:.12em;line-height:1.5}.prologue .loose-page{cursor:pointer}
@media(max-width:760px){.prologue .paper-text{inset:24% 6% 19%;gap:5px}.prologue .paper-text strong{font-size:20px}.prologue .paper-text em{font-size:12px}}
@media(max-width:760px) and (max-height:640px){.prologue .paper-text strong{font-size:18px}.prologue .paper-text em{font-size:11px}}

/* Optical centering follows the visible paper, not sprite-cell bounds. */
.prologue .page-prologue .paper-text{transform:translateX(4%)}.prologue .page-gallery .paper-text{transform:translateX(-4%)}

.music-controls{display:flex;gap:9px;align-items:center;position:relative}.music-controls button{width:40px;height:40px;display:grid;place-items:center;border:1px solid #8296ac65;border-radius:50%;background:#fcfbf7e8;color:#657e9a;font:16px Georgia,serif}.music-controls button:hover,.music-controls .is-playing{color:var(--red);border-color:#a5213266}.volume-control{position:relative}#volume-panel{position:absolute;right:0;top:49px;width:190px;padding:14px;background:#fcfbf7;border:1px solid #8296ac66;box-shadow:0 7px 20px #50677a15;display:flex;gap:9px;flex-wrap:wrap;align-items:center;font-size:12px;color:#657e9a}#volume-panel[hidden]{display:none}#volume-panel label{width:100%;font-size:11px}#music-volume{width:118px;accent-color:var(--red)}#volume-value{font:11px Georgia,serif}@media(max-width:760px){header{align-items:center;padding-right:20px}.music-controls{gap:5px}.music-controls button{width:36px;height:36px}.brand{font-size:20px}.brand-emblem{width:38px;height:38px}.brand{gap:6px}#volume-panel{top:44px}}@media(max-width:360px){.brand{font-size:18px}.brand-emblem{width:30px;height:30px}.music-controls button{width:32px;height:32px}header{padding-left:17px;padding-right:17px}}

/* Clear vector controls and a roomy touch slider. */
header{z-index:20}.music-controls button span{display:grid;place-items:center}.music-controls svg{width:18px;height:18px;fill:currentColor}.music-controls button{min-width:40px;min-height:40px}#volume-panel{width:246px;top:50px;padding:15px 17px;gap:8px;z-index:30}#volume-panel label{font-size:12px}#music-volume{--level:35%;width:172px;height:44px;margin:0;appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer;touch-action:none}#music-volume::-webkit-slider-runnable-track{height:5px;border-radius:4px;background:linear-gradient(to right,var(--red) var(--level),#c4ccd4 var(--level))}#music-volume::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:22px;height:22px;margin-top:-8.5px;border-radius:50%;border:2px solid #fcfbf7;background:var(--red);box-shadow:0 0 0 1px #a5213266}#music-volume::-moz-range-track{height:5px;border-radius:4px;background:#c4ccd4}#music-volume::-moz-range-progress{height:5px;background:var(--red)}#music-volume::-moz-range-thumb{width:18px;height:18px;border-radius:50%;border:2px solid #fcfbf7;background:var(--red)}#volume-value{width:30px;text-align:right;font-size:12px}@media(max-width:360px){.music-controls{gap:4px}.music-controls button{min-width:36px;min-height:40px}.brand{font-size:17px}header{padding-left:15px;padding-right:15px}}

/* Fixed square controls avoid mismatched mobile min-width/min-height. */
.music-controls{flex:0 0 auto}.volume-control{flex:0 0 auto}.music-controls button{appearance:none;-webkit-appearance:none;box-sizing:border-box;width:40px;height:40px;min-width:40px;min-height:40px;max-width:40px;max-height:40px;flex:0 0 40px;padding:0;line-height:1;display:inline-flex;justify-content:center;align-items:center;border-radius:50%}.music-controls button span{width:18px;height:18px;flex:0 0 18px}.music-controls svg{display:block;width:18px;height:18px;flex-shrink:0}.brand{min-width:0;white-space:nowrap}@media(max-width:360px){header{gap:8px}.music-controls{gap:4px}.brand{font-size:17px}.brand-emblem{width:28px;height:28px}}

/* A fourth leaf opens the Grancypher product log. */
.prologue .loose-pages .page-grancypher{--float-delay:-6s}
@media(min-width:761px){.prologue .loose-pages{gap:10px}.prologue .loose-pages .loose-page{width:118px;flex-basis:118px}.prologue .page-grancypher .paper-text strong{font-size:20px}}
@media(max-width:760px){.prologue .loose-pages{gap:2px;margin-inline:-2px;width:calc(100% + 4px)}.prologue .loose-pages .loose-page{width:78px;height:108px;flex:1 1 25%;min-width:0}.prologue .paper-text strong{font-size:16px}.prologue .page-grancypher .paper-text strong{font-size:13px}.prologue .paper-text em{font-size:10px}}
@media(max-width:380px){.prologue .loose-pages .loose-page{height:100px}.prologue .paper-text strong{font-size:14px}.prologue .page-grancypher .paper-text strong{font-size:12px}.prologue .paper-text em{font-size:9px}}
.prologue .page-grancypher .paper-text strong{font-size:23px}
@media(max-width:760px){.prologue .page-grancypher .paper-text strong{font-size:16px}}
@media(max-width:380px){.prologue .page-grancypher .paper-text strong{font-size:14px}}
.prologue .loose-pages{justify-content:center;gap:18px}
.prologue .loose-pages .loose-page{width:130px;flex:0 0 130px}
@media(max-width:760px){.prologue .loose-pages{gap:13px}.prologue .loose-pages .loose-page{width:108px;height:118px;flex:0 0 108px}}
@media(max-width:380px){.prologue .loose-pages .loose-page{width:94px;height:106px;flex-basis:94px}}

/* Conventional product entry, matching the site's paper and ink palette. */
.prologue .product-links{position:relative;display:flex;justify-content:center;align-items:center;width:auto;height:auto;gap:0;margin:23px auto 0;padding:0}
.prologue .product-links .product-button{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;flex-wrap:nowrap;gap:6px;min-height:48px;max-width:calc(100% - 20px);padding:13px 30px;border:1px solid #758da680;background:#fcfbf7f2;color:#4b647e;font-size:16px;line-height:1.4;white-space:nowrap;transition:background .2s,color .2s,border-color .2s}
.product-button>span{font:600 25px/1.1 'Cormorant Garamond',serif;letter-spacing:.02em}
.product-button>.product-name-cn{font:500 16px/1.5 'Noto Serif SC',serif;letter-spacing:.12em}
.prologue .product-links .product-button:hover{background:var(--red);border-color:var(--red);color:#fff}
@media(max-width:760px){.prologue .product-links{margin-top:20px}.prologue .product-links .product-button{gap:5px;padding:12px 26px;font-size:15px}.product-button>span{font-size:23px}.product-button>.product-name-cn{font-size:15px}}