:root{--paper:#f7f3ea;--ink:#41364f;--muted:#817789;--gold:#bc8a4d;--line:#ded6d2;--serif:'Songti TC','Noto Serif TC','PMingLiU',serif}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,'PingFang TC',sans-serif;font-size:14px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid #ac743c;outline-offset:5px}button{border:0;background:none}a{color:inherit;text-decoration:none}.header{height:104px;max-width:1300px;margin:auto;padding:0 54px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{font-size:34px;font-weight:700;letter-spacing:-2px;line-height:.85}.brand span{font-size:13px;letter-spacing:2px}.brand small{display:block;font-weight:400;font-size:9px;letter-spacing:2px;margin:10px 0 0 3px}.edition{font-size:10px;letter-spacing:2px}.edition span{margin:0 16px;color:#b5a6a5}.replay{font-size:18px;padding:12px}.replay span{font-size:11px;margin-left:7px}main{max-width:1300px;margin:auto}.hero{display:grid;grid-template-columns:43% 57%;min-height:570px;align-items:center;padding:50px 54px 35px;gap:0}.hero-copy{position:relative;z-index:1}.eyebrow{font-size:10px;letter-spacing:3px;font-weight:500;color:#9b7552}.hero h1{font:48px/1.6 var(--serif);letter-spacing:5px;margin:24px 0 15px}.subtitle{font:26px var(--serif);letter-spacing:6px;margin:0 0 23px}.subtitle span{font:12px -apple-system,sans-serif;letter-spacing:4px;padding-left:16px;vertical-align:middle}.description{font-size:13px;line-height:2.1;color:var(--muted);letter-spacing:1px}.primary{background:var(--ink);color:var(--paper);border-radius:3px;padding:17px 22px;margin-top:20px;min-width:236px;text-align:left;font-size:12px;letter-spacing:2px;transition:background .2s,transform .2s}.primary:hover{background:#655078;transform:translateY(-2px)}.primary span{float:right;font-size:17px}.tiny-note{font-size:10px;letter-spacing:1px;color:#9b8d8e;margin-top:15px}.scene{height:490px;position:relative;overflow:hidden;border-radius:48% 48% 44% 44%;isolation:isolate}.sky{width:100%;height:100%;position:absolute;object-fit:cover;object-position:72% center;filter:saturate(.65)}.scene:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#45375138,transparent 60%,#77608725);z-index:-1}.sky{z-index:-2}.stars{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:shimmer 5s ease-in-out infinite}.floating-world{position:absolute;left:12%;width:80%;bottom:35px;height:330px;animation:float 7s ease-in-out infinite}.world{width:100%;position:absolute;bottom:0}.friends{width:49%;position:absolute;bottom:36%;left:29%;transform:rotate(-7deg)}.planet-label{position:absolute;top:40px;left:0;right:0;text-align:center;font-size:9px;letter-spacing:3px;color:#fff2da}.planet-label i{padding:0 6px}.scene-caption{position:absolute;bottom:24px;left:0;right:0;text-align:center;color:#fff9e9;font:12px var(--serif);letter-spacing:2px}.scene-orbit{position:absolute;width:85%;height:58%;border:1px solid #fff6e338;border-radius:50%;left:8%;top:19%;transform:rotate(-30deg)}.orbit-two{transform:rotate(35deg);width:72%;left:13%}.star-symbol{position:absolute;color:#fff0b7}.s1{top:20%;left:16%;font-size:42px;animation:shimmer 4s infinite}.s2{top:40%;right:14%;font-size:24px}.s3{top:12%;right:28%;font-size:20px}.chapter-links{margin:10px 54px 0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.chapter-links button{display:flex;text-align:left;gap:20px;padding:30px 18px 30px 0;align-items:flex-start}.chapter-links button+button{border-left:1px solid var(--line);padding-left:25px}.chapter-no{font:italic 16px Georgia,serif;color:#b7a391;padding-top:2px}.chapter-links small{font-size:9px;letter-spacing:2px;color:var(--gold)}.chapter-links h2{font:20px var(--serif);letter-spacing:2px;margin:9px 0}.chapter-links p{font-size:10px;color:var(--muted);margin:0}.arrow{margin-left:auto;font-size:20px;color:var(--gold)}.colophon{padding:23px 54px;display:flex;justify-content:space-between;font-size:9px;letter-spacing:2px;color:#9b8d8e}footer{text-align:center;font-size:9px;color:#9b8d8e;letter-spacing:1px;padding:24px 20px 115px}footer span{margin:0 10px}.bottom-nav{position:fixed;z-index:8;bottom:20px;left:50%;transform:translateX(-50%);display:flex;width:380px;background:#faf7f0f5;backdrop-filter:blur(15px);border:1px solid #dbd0cc;border-radius:60px;padding:7px 14px;box-shadow:0 6px 32px #4036530c}.bottom-nav button{flex:1;font-size:10px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px;color:#9a8e97;letter-spacing:2px}.bottom-nav button span{font-size:21px;line-height:22px}.bottom-nav .selected{color:var(--ink);position:relative}.bottom-nav .selected:after{content:'';position:absolute;bottom:0;background:var(--gold);width:3px;height:3px;border-radius:50%}.inner{padding:54px;min-height:650px}.inner h1{font:36px var(--serif);letter-spacing:4px;margin:18px 0}.section-top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:25px}.section-top>img{height:110px;transform:rotate(6deg);margin-right:40px}.section-top p:not(.eyebrow),.section-desc{font-size:12px;color:var(--muted);letter-spacing:1px}.music-layout{display:grid;grid-template-columns:320px 1fr;gap:60px;margin-top:36px}.album{aspect-ratio:1;position:relative;border-radius:3px;overflow:hidden;text-align:center;padding-top:205px;color:#fff7df;box-shadow:0 15px 30px #40365312;isolation:isolate}.album-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:brightness(.75) saturate(.6)}.album>img:not(.album-bg){position:absolute;top:25px;height:165px;left:50%;transform:translateX(-50%)}.album>span{font-size:8px;letter-spacing:4px}.album h2{font:36px var(--serif);letter-spacing:12px;margin:8px 0}.album p{font-size:10px;letter-spacing:3px}.list-heading{display:flex;justify-content:space-between;font-size:12px;letter-spacing:1px;margin-bottom:10px}.list-heading small{font-size:9px;color:var(--muted)}.track{width:100%;display:flex;align-items:center;gap:17px;padding:15px 4px;border-bottom:1px solid var(--line);text-align:left}.track:hover{background:#ebe3e44d}.track .number{font:italic 14px Georgia;color:var(--gold);width:25px}.track .track-name{flex:1;font:17px var(--serif);letter-spacing:1px}.track small{font:9px sans-serif;display:block;color:var(--muted);margin-top:5px}.track .play{border:1px solid #cfc2c7;border-radius:50%;width:29px;height:29px;display:grid;place-items:center;font-size:10px}.preview-note{font-size:10px;line-height:1.8;color:var(--muted);letter-spacing:.5px}.rights{display:flex;align-items:center;gap:15px;border-top:1px solid var(--line);margin-top:35px;padding-top:18px;color:var(--muted)}.rights>span{font-size:25px}.rights p{font-size:10px;line-height:1.9;letter-spacing:.6px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin:35px 0}.character{text-align:left;padding:0}.character-art{height:340px;border-radius:48% 48% 4px 4px;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:transform .4s}.character:hover .character-art{transform:translateY(-6px)}.lilac{background:#e2dce9}.peach{background:#f0ded0}.blue{background:#dde4e9}.character-art img{max-width:85%;height:85%;object-fit:contain}.character small{display:block;margin-top:22px;color:var(--gold);font-size:9px;letter-spacing:2px}.character h2{font:23px var(--serif);letter-spacing:3px}.character h2 span{float:right;color:var(--gold);font:20px sans-serif}.letter-view{text-align:center}.letter{max-width:600px;margin:30px auto 20px;min-height:370px;border:1px solid #d8ceda;background:#eee8f0;position:relative;overflow:hidden;padding:36px 20px 100px}.letter-star{display:block;font-size:35px;color:var(--gold);margin-bottom:17px}.letter>small{font-size:9px;letter-spacing:3px;color:#8c7794}.letter>p{font:22px/2 var(--serif);letter-spacing:3px;position:relative;z-index:1}.letter-sign{font-size:10px;letter-spacing:2px;color:var(--muted)}.letter>img{position:absolute;bottom:0;left:0;width:100%;opacity:.65}.text-button{font-size:12px;letter-spacing:2px;border-bottom:1px solid #b4a4b4;padding:12px}.toast{position:fixed;bottom:115px;left:50%;transform:translate(-50%,20px);padding:15px 22px;background:var(--ink);color:var(--paper);font-size:12px;border-radius:6px;opacity:0;pointer-events:none;transition:.3s;z-index:30;max-width:90%;text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}dialog{border:1px solid #d9ccd8;border-radius:120px 120px 8px 8px;background:var(--paper);color:var(--ink);width:min(370px,90vw);padding:40px 30px 30px;text-align:center}dialog::backdrop{background:#30243eaa;backdrop-filter:blur(5px)}dialog>img{height:270px;max-width:100%;object-fit:contain}dialog h2{font:28px var(--serif);letter-spacing:5px}dialog p{font-size:12px;line-height:2;color:var(--muted)}dialog small{display:block;font-size:9px;letter-spacing:2px;color:var(--gold)}.dialog-close{position:absolute;top:24px;right:28px;font-size:27px}.intro{position:fixed;inset:0;background:#403653;z-index:100;color:#fff1d9;overflow:hidden;transition:opacity .8s,visibility .8s;isolation:isolate}.intro:before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#352b4be8,#53436990),url('assets/sky.png') center/cover;z-index:-2}.intro.finished{opacity:0;visibility:hidden;pointer-events:none}.skip{position:absolute;right:25px;top:25px;color:#fff1d9;font-size:11px;letter-spacing:2px;z-index:2;padding:12px}.intro-stars{position:absolute;inset:-10%;background:url('assets/stars.png') center/cover;animation:star-journey 6s ease-out both}.intro-copy{position:absolute;top:21%;width:100%;text-align:center;animation:intro-copy 5.6s both}.intro-copy .eyebrow{color:#d9be98;font-size:9px}.intro-copy p{font:28px/1.9 var(--serif);letter-spacing:5px}.intro-prince{position:absolute;height:52%;top:41%;left:50%;animation:prince-journey 5.6s cubic-bezier(.2,.6,.3,1) both}.intro-title{position:absolute;top:25%;width:100%;text-align:center;animation:title-reveal 5.6s both}.intro-title>span{font:11px Georgia;letter-spacing:6px}.intro-title h2{font:70px var(--serif);letter-spacing:16px;margin:20px 0}.intro-title p{font-size:11px;letter-spacing:5px}.intro-line{position:absolute;bottom:35px;height:1px;background:#ead0a8;left:calc(50% - 40px);animation:intro-progress 5.6s linear both}.view.active{animation:page-in .5s ease-out}@keyframes float{50%{transform:translateY(-11px) rotate(1deg)}}@keyframes shimmer{50%{opacity:.4}}@keyframes page-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes star-journey{from{opacity:0;transform:scale(1.2)}to{opacity:.8;transform:scale(1)}}@keyframes intro-copy{0%,7%{opacity:0;transform:translateY(15px)}20%,43%{opacity:1;transform:translateY(0)}60%,100%{opacity:0;transform:translateY(-15px)}}@keyframes prince-journey{0%{opacity:0;transform:translate(-100%,90px) rotate(-12deg)}22%{opacity:1}60%,100%{opacity:1;transform:translate(-50%,0) rotate(4deg)}}@keyframes title-reveal{0%,55%{opacity:0;transform:translateY(18px)}75%,100%{opacity:1;transform:translateY(0)}}@keyframes intro-progress{from{width:0}to{width:80px}}
@media(min-width:1500px){.hero{padding-top:65px;padding-bottom:50px}.scene{height:530px}}
@media(max-width:760px){.header{height:82px;padding:0 24px}.brand{font-size:29px}.brand span{font-size:11px}.brand small{font-size:8px}.edition{display:none}.replay span{font-size:10px}.hero{display:flex;flex-direction:column-reverse;padding:25px 24px 32px;min-height:0}.scene{width:100%;height:340px;max-width:460px;border-radius:48% 48% 43% 43%}.floating-world{height:240px;bottom:25px;width:83%;left:10%}.planet-label{top:30px;font-size:8px;letter-spacing:2px}.scene-caption{font-size:10px;bottom:19px}.hero-copy{text-align:center;width:100%;padding-top:26px}.eyebrow{font-size:8px;letter-spacing:2.5px}.hero h1{font-size:33px;line-height:1.65;letter-spacing:5px;margin:16px 0 13px}.subtitle{font-size:23px;margin-bottom:15px}.description{font-size:11px;line-height:2}.primary{margin-top:14px;min-width:250px;font-size:11px}.tiny-note{font-size:9px}.chapter-links{margin:0 24px;display:block}.chapter-links button{width:100%;gap:20px;padding:23px 0}.chapter-links button+button{border-left:0;border-top:1px solid var(--line);padding-left:0}.chapter-links h2{font-size:20px;margin:6px 0}.chapter-links p{font-size:10px}.chapter-links small{font-size:8px}.arrow{align-self:center}.colophon{padding:23px 24px;gap:15px;letter-spacing:1px;font-size:8px}.colophon span:last-child{font:10px var(--serif)}.bottom-nav{bottom:12px;width:calc(100% - 40px);max-width:400px;padding-bottom:max(7px,env(safe-area-inset-bottom))}.inner{padding:35px 24px;min-height:70vh}.inner h1{font-size:29px;letter-spacing:3px}.section-top>img{height:90px;margin-right:5px}.section-top p:not(.eyebrow){font-size:10px}.music-layout{grid-template-columns:1fr;gap:30px;margin-top:27px}.album{width:230px;justify-self:center;padding-top:145px}.album>img:not(.album-bg){height:120px;top:17px}.album h2{font-size:28px;margin:5px 0}.album>span{font-size:7px;letter-spacing:3px}.album p{font-size:8px}.cards{grid-template-columns:1fr;gap:30px;max-width:360px;margin:30px auto}.character-art{height:330px}.character small{margin-top:15px}.character h2{margin:10px 0}.letter{min-height:350px;padding-left:12px;padding-right:12px}.letter>p{font-size:19px;letter-spacing:1px}.intro-copy{top:22%}.intro-copy p{font-size:25px}.intro-prince{height:45%;top:45%;max-width:88%;object-fit:contain}.intro-title{top:29%}.intro-title h2{font-size:56px}.intro-title>span{font-size:9px}.intro-title p{font-size:10px}.intro-line{bottom:45px}footer{font-size:8px;line-height:2;padding-bottom:110px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.intro-copy{display:none}.intro-title{opacity:1}.intro-prince{transform:translateX(-50%)}.intro-stars{opacity:.7}}

@media(max-width:760px){.intro-prince{top:49%;height:42%}}

.intro-title{top:19%}.official-title{display:block;width:min(410px,76vw);height:auto;margin:0 auto}.intro-title p{margin-top:8px}
@media(max-width:760px){.intro-title{top:23%}.official-title{width:min(340px,80vw)}.intro-title p{margin-top:0;font-size:9px;letter-spacing:3px}}

/* Hand-drawn official title: original black/white assets, no color filters. */
.home-title-art{display:block;width:210px;max-width:75%;height:auto;margin:0 0 20px}.album>img.album-title-art{position:relative;display:block;top:auto;left:auto;transform:none;height:auto;width:155px;max-width:80%;margin:-6px auto 0}.album>p{margin-top:10px}.official-title{width:min(410px,78vw)}
@media(max-width:760px){.home-title-art{width:185px;margin:0 auto 18px}.album>img.album-title-art{width:120px;margin:-8px auto 0}.album>p{margin-top:7px}.official-title{width:min(340px,80vw)}}

.brand{display:block;background:var(--ink);padding:12px 16px;border-radius:2px;letter-spacing:0;line-height:1}.brand>img{display:block;width:125px;height:auto}.brand small{color:var(--paper);font-size:8px;letter-spacing:1.5px;margin:8px 0 0;text-align:center}
@media(max-width:760px){.brand{padding:10px 12px}.brand>img{width:108px}.brand small{font-size:7px;margin-top:6px}}

.intro-brand{display:block;width:128px;height:auto;margin:0 auto 17px}

/* Light pages: official logo rendered in the page ink color. */
.brand{background:transparent;padding:0;border-radius:0}.brand>img{filter:brightness(0) saturate(100%) invert(20%) sepia(13%) saturate(1135%) hue-rotate(230deg) brightness(91%) contrast(87%)}.brand small{color:var(--ink)}
@media(max-width:760px){.brand{padding:0}}
/* Opening title: leave clear space above the flying illustration. */
.intro-title{top:18%}.official-title{width:min(320px,62vw)}.intro-title p{margin-top:12px}
@media(max-width:760px){.intro-title{top:21%}.official-title{width:min(260px,64vw)}.intro-title p{margin-top:10px;font-size:9px;letter-spacing:3px}}
.home-cast{margin:15px 54px 38px;padding:30px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1.3fr;gap:30px;align-items:center}.home-cast h2{font:25px/1.7 var(--serif);letter-spacing:2px}.home-cast .text-button{font-size:10px}.home-cast-portraits{display:flex;gap:16px}.home-cast figure{flex:1;min-width:0;margin:0;text-align:center}.home-cast figure img{width:100%;height:180px;object-fit:contain}.home-cast figcaption{font-size:9px;letter-spacing:1px;color:var(--muted);margin-top:10px}.cast-group{margin-top:40px}.cast-heading{display:flex;align-items:center;gap:20px;border-bottom:1px solid var(--line);padding-bottom:12px}.cast-heading h2{font:25px var(--serif);letter-spacing:4px;margin:0}.cast-heading small{font-size:9px;letter-spacing:2px;color:var(--gold)}.cast-group .cards{margin-top:24px}.character h3{font:21px var(--serif);letter-spacing:2px;margin-top:10px}.character h3 span{float:right;color:var(--gold);font:18px sans-serif}.album>img.album-cast{height:185px;top:10px}.album{padding-top:205px}
@media(max-width:760px){.home-cast{margin:0 24px 30px;padding-top:25px;display:block;text-align:center}.home-cast h2{font-size:21px}.home-cast-portraits{margin-top:24px;gap:8px}.home-cast figure img{height:150px}.home-cast figcaption{font-size:8px;letter-spacing:0}.cast-group .cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:none;gap:24px 16px}.cast-group .character-art{height:230px}.cast-group .character-art img{height:90%;max-width:95%}.character h3{font-size:19px}.cast-group .character small{font-size:9px}.album{padding-top:145px}.album>img.album-cast{height:130px;top:8px}}
.encounter{margin:18px 0 8px;max-width:350px}.encounter-count{font:17px/1.9 var(--serif);letter-spacing:1px;margin:0 0 12px}.encounter-count strong{font:italic 29px Georgia,serif;color:var(--gold);padding:0 3px}.encounter summary{display:inline-block;font-size:10px;letter-spacing:1px;color:var(--muted);cursor:pointer;border-bottom:1px solid #cfc2c7;padding:3px 0}.encounter summary:focus-visible{outline:2px solid var(--gold);outline-offset:4px}.encounter form{margin-top:13px;padding:15px;background:#eee7e8;border-radius:4px;text-align:left}.encounter label{display:block;font-size:10px;margin-bottom:9px;letter-spacing:1px}.date-controls{display:flex;gap:8px}.date-controls input{font:12px -apple-system,sans-serif;min-width:0;flex:1;padding:10px 7px;border:1px solid #cfc2c7;border-radius:3px;background:var(--paper);color:var(--ink)}.date-controls button{background:var(--ink);color:var(--paper);font-size:10px;white-space:nowrap;border-radius:3px;padding:10px}#encounter-help{font-size:9px;line-height:1.7;color:var(--muted);margin-bottom:0}#encounter-error{font-size:11px;color:#9a3535;margin:8px 0 0}#encounter-error:empty{display:none}.home-cast figcaption{font-size:11px}
@media(max-width:760px){.encounter{margin:20px auto 10px}.encounter-count{font-size:16px}.encounter-count strong{font-size:29px}.home-cast figcaption{font-size:10px}}

#encounter-clear{font-size:9px;color:var(--muted);padding:9px 0 0;text-decoration:underline}
/* Flight sequence: 3s arrival, eight passing illustrations, then the title. */
.intro-copy{animation:intro-prologue 3s ease both;z-index:3;pointer-events:none}
.intro-stars{animation:star-journey 19.5s ease-out both}
.intro-prince{z-index:2;top:48%;height:43%;animation:prince-long-flight 19.5s ease-in-out both;pointer-events:none}
.intro-landscapes{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.journey-layer{position:absolute;left:50%;top:13%;width:min(390px,72vw);height:35%;object-fit:contain;opacity:0;animation:landscape-pass 2.7s cubic-bezier(.2,.5,.6,1) var(--arrival) both;filter:drop-shadow(0 10px 25px #21133022)}
.journey-0{width:min(690px,110vw);height:36%;top:12%}
.journey-3{width:min(520px,88vw);height:30%;top:18%}
.journey-7{width:min(530px,88vw);height:31%;top:18%}
.intro-title{z-index:3;animation:journey-title 19.5s ease both;pointer-events:none}
.intro-line{animation:intro-progress 19.5s linear both}
.skip{z-index:5}
@keyframes intro-prologue{0%,8%{opacity:0;transform:translateY(15px)}28%,67%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-15px)}}
@keyframes landscape-pass{0%{opacity:0;transform:translate(80vw,40px) scale(.82) rotate(5deg)}25%{opacity:.95}50%{opacity:1;transform:translate(-45%,0) scale(1) rotate(0)}76%{opacity:.95}100%{opacity:0;transform:translate(-130vw,-25px) scale(.88) rotate(-4deg)}}
@keyframes prince-long-flight{0%{opacity:0;transform:translate(-100%,110px) rotate(-12deg)}13%{opacity:1;transform:translate(-50%,0) rotate(4deg)}28%{transform:translate(-47%,-12px) rotate(0)}44%{transform:translate(-52%,8px) rotate(-3deg)}60%{transform:translate(-47%,-10px) rotate(3deg)}77%{transform:translate(-52%,6px) rotate(0)}90%,100%{opacity:1;transform:translate(-50%,0) rotate(4deg)}}
@keyframes journey-title{0%,82%{opacity:0;transform:translateY(18px)}88%,100%{opacity:1;transform:translateY(0)}}
@media(max-width:760px){.intro-prince{top:50%;height:40%}.journey-layer{top:14%;height:32%}.journey-0{top:12%;height:35%}.journey-3,.journey-7{top:18%;height:28%}}
@media(prefers-reduced-motion:reduce){.intro-landscapes{display:none}.intro-prince{opacity:1;transform:translateX(-50%)}.intro-title{opacity:1;transform:none}.intro-copy{display:none}}

/* A shared field of memories receding into the universe, not separate slides. */
.intro-landscapes{perspective:850px;perspective-origin:50% 36%}
.journey-layer,.journey-0,.journey-3,.journey-7{left:50%;top:28%;width:min(330px,58vw);height:29%;transform-origin:50% 50%;animation:cosmic-memory 9s cubic-bezier(.15,.35,.4,1) var(--arrival) both;filter:drop-shadow(0 0 14px #f4e6c31a)}
.journey-0{width:min(540px,85vw);height:30%}
.journey-3,.journey-7{width:min(420px,75vw);height:24%}
@keyframes cosmic-memory{
 0%{opacity:0;transform:translate(-50%,-30%) translateZ(60px) scale(.82) rotate(0deg)}
 14%{opacity:.8}
 38%{opacity:.75}
 72%{opacity:.36}
 100%{opacity:0;transform:translate(calc(-50% + var(--drift-x)),calc(-30% + var(--drift-y))) translateZ(-950px) scale(.25) rotate(var(--tilt))}
}
@media(max-width:760px){.journey-layer,.journey-0,.journey-3,.journey-7{top:29%;height:25%;width:52vw}.journey-0{width:85vw;height:27%}.journey-3,.journey-7{width:70vw;height:22%}}
@media(prefers-reduced-motion:reduce){.intro-landscapes{display:none}}
/* Reveal the title early and keep it above the receding illustrations. */
.intro-title{top:13%;animation:early-journey-title 19.5s ease both}
.journey-layer,.journey-0,.journey-3,.journey-7{top:39%}
@keyframes early-journey-title{0%,12%{opacity:0;transform:translateY(15px) scale(.94)}20%,100%{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:760px){.intro-title{top:15%}.journey-layer,.journey-0,.journey-3,.journey-7{top:39%}}
@media(prefers-reduced-motion:reduce){.intro-title{opacity:1;transform:none}}

.intro-title .intro-encounter{font-size:11px;letter-spacing:1.5px;line-height:1.8;padding:0 16px}.intro-encounter span{display:inline-block;min-width:28px;padding:0 4px;color:#f0d5aa;font:italic 19px Georgia,serif}
@media(max-width:760px){.intro-title .intro-encounter{font-size:10px;letter-spacing:1px}.intro-encounter span{font-size:18px}}

.header-actions{display:flex;align-items:center;gap:18px}.account-link{font-size:11px;letter-spacing:1px;border-bottom:1px solid #b8a7b5;padding:7px 0}@media(max-width:760px){.header-actions{gap:8px}.account-link{font-size:10px}}

.colophon.production-credit{display:block;text-align:center;padding:28px 24px 12px}.production-credit p{margin:0;font-size:10px;line-height:2;letter-spacing:1.2px;color:var(--muted)}
.record-player{text-align:center;align-self:start}.record-art{height:320px;position:relative;isolation:isolate;border-radius:48% 48% 5px 5px;background:radial-gradient(ellipse at 50% 65%,#dfd7e4,#eee7ed 65%);overflow:hidden}.vinyl{position:absolute;width:260px;height:260px;right:-32px;top:24px;border-radius:50%;background:repeating-radial-gradient(circle at center,transparent 0 2px,#ffffff0b 2.5px 3px,transparent 3.5px 5px),conic-gradient(from 30deg,#19151f,#504956 26deg,#211b29 55deg,#17131d 150deg,#49414f 200deg,#211b29 235deg,#17131d);box-shadow:0 5px 20px #21152b30;animation:vinyl-spin 12s linear infinite;animation-play-state:paused;z-index:-1}.vinyl.spinning{animation-play-state:running}.vinyl-label{position:absolute;inset:34%;background:#bd9d7c;border:4px solid #d7bd99;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#403653;gap:12px}.vinyl-label span{font:6px Georgia,serif;letter-spacing:1px}.vinyl-label i{width:9px;height:9px;border-radius:50%;background:#211b29;border:2px solid #e5cda7}.vinyl-label small{font:5px sans-serif;letter-spacing:1px}.record-character{position:absolute;left:0;bottom:0;height:96%;width:78%;object-fit:contain;object-position:left bottom;filter:drop-shadow(4px 5px 8px #40365318)}.record-spark{position:absolute;left:23px;top:25px;color:var(--gold);font-size:32px}.record-title{width:145px;height:auto;display:block;margin:20px auto 0}.record-credit{font-size:10px;letter-spacing:2px;color:var(--muted);margin:12px 0}.record-toggle{padding:12px 20px;border:1px solid #bdabbc;border-radius:30px;font-size:10px;letter-spacing:1px}.record-toggle:hover{background:#e9e0eb}.record-player .preview-note{font-size:9px}.music-layout{grid-template-columns:340px 1fr;gap:50px}@keyframes vinyl-spin{to{transform:rotate(360deg)}}
@media(max-width:760px){.music-layout{grid-template-columns:1fr;gap:30px}.record-player{width:100%;max-width:330px;justify-self:center}.record-art{height:310px}.vinyl{width:250px;height:250px;right:-24px}.record-title{width:125px;margin-top:17px}}
@media(prefers-reduced-motion:reduce){.vinyl{animation:none}.vinyl.spinning{animation:none}}

.record-toggle{margin-top:20px}.vinyl-label{gap:0}
/* Keep the entire illustration, including papers and table legs, inside the frame. */
.record-character{left:12px;bottom:15px;width:76%;height:87%;object-fit:contain;object-position:center bottom}
@media(max-width:760px){.record-character{left:12px;bottom:15px;width:76%;height:87%}}
.record-character{filter:none}.author-art{position:relative;height:100%;aspect-ratio:893 / 1100;max-width:100%;margin:auto}.author-art>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.author-still{clip-path:url(#author-still)}.author-paper{pointer-events:none;animation:paper-drift 5.2s ease-in-out var(--paper-delay,0s) infinite}.author-paper.paper-1,.author-paper.paper-4{animation-name:paper-sway;animation-duration:6.3s}.author-paper.paper-2{animation-duration:6.8s}.author-paper.paper-5{animation-duration:5.8s}.author-paper.typed-paper{clip-path:polygon(15.4% 44.4%,27.7% 45.9%,31.2% 53.8%,21.3% 51.5%);transform-origin:29% 53%;animation:typed-paper-sway 4.6s ease-in-out infinite}
@keyframes paper-drift{0%,100%{transform:translate(0,0) rotate(-2deg)}50%{transform:translate(3px,-7px) rotate(5deg)}}
@keyframes paper-sway{0%,100%{transform:translate(0,0) rotate(2deg)}50%{transform:translate(-4px,6px) rotate(-6deg)}}
@keyframes typed-paper-sway{0%,100%{transform:rotate(0deg)}50%{transform:rotate(-1.8deg)}}
@media(prefers-reduced-motion:reduce){.author-paper,.author-paper.typed-paper{animation:none}}

/* Opening entry action at the bottom, clear of the flying prince. */
.intro .skip{top:auto;right:auto;left:50%;bottom:max(22px,env(safe-area-inset-bottom));transform:translateX(-50%);padding:14px 24px;min-height:46px;white-space:nowrap;border:1px solid #f4e2c478;border-radius:30px;background:#40365338;backdrop-filter:blur(8px);color:#fff1d9;font-size:12px;letter-spacing:2px;z-index:5}.intro .skip:hover{background:#40365388;border-color:#fff1d9}.intro-line{display:none}

.alternate-author{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom}
/* Meadow turntable: a half-record rises beyond the wheat horizon. */
.record-player{width:100%;max-width:430px}.record-art.meadow-scene{height:370px;border-radius:0;background:transparent;overflow:hidden;isolation:isolate}.meadow-scene:before{content:'';position:absolute;inset:10px 0 28px;background:radial-gradient(ellipse at 50% 48%,#e4d5c88c,transparent 69%);z-index:-2}.vinyl-window{position:absolute;top:45px;left:5%;width:90%;aspect-ratio:2 / 1;overflow:hidden;z-index:0}.vinyl-window .vinyl{width:100%;height:auto;aspect-ratio:1;top:0;left:0;right:auto;z-index:0;box-shadow:none;background:repeating-radial-gradient(circle at center,transparent 0 2px,#f4e7c710 2.5px 3px,transparent 3.5px 5px),conic-gradient(from 30deg,#28212c,#635661 26deg,#29212f 55deg,#201b25 150deg,#5b4f5b 200deg,#302532 235deg,#201b25)}.vinyl-window .vinyl-label{background:#bfa079;border-color:#d7bb91}.meadow-scene .record-character{left:16%;bottom:28px;width:68%;height:78%;z-index:2}.wheat-back{position:absolute;bottom:13px;left:-14%;width:128%;height:145px;object-fit:cover;object-position:center bottom;z-index:1;pointer-events:none}.wheat-front{position:absolute;bottom:0;left:-12%;width:124%;height:76px;object-fit:cover;object-position:center bottom;z-index:3;pointer-events:none}.now-playing{margin:23px 0 0;text-align:center}.now-playing small{font-size:8px;color:var(--gold);letter-spacing:2.5px}.now-playing p{font:24px/1.5 var(--serif);letter-spacing:3px;margin:10px 0 6px}.now-playing>span{display:block;font-size:10px;line-height:1.8;color:var(--muted);min-height:18px;letter-spacing:.5px}.record-toggle{margin-top:17px}.track.active-track{background:#eee6d9}.track.active-track .play{background:var(--ink);border-color:var(--ink);color:var(--paper)}
@media(max-width:760px){.record-player{max-width:390px}.record-art.meadow-scene{height:345px}.vinyl-window{top:45px}.meadow-scene .record-character{left:16%;bottom:28px;width:68%;height:78%}.wheat-back{height:145px}.wheat-front{height:73px}.now-playing{margin-top:20px}.now-playing p{font-size:23px}}
/* Overlap the wheat horizon with the record so no bare seam remains. */
.wheat-back{height:170px;bottom:13px}.vinyl-window{top:52px}
@media(max-width:760px){.wheat-back{height:170px;bottom:13px}.vinyl-window{top:52px}}
/* Let the figure rise above the record while keeping its feet in the wheat. */
.meadow-scene .record-character{bottom:34px;height:87%;left:13%;width:74%}
@media(max-width:760px){.meadow-scene .record-character{bottom:34px;height:87%;left:13%;width:74%}}
/* Upper-body portraits: the wheat conceals the crop at the waist. */
.meadow-scene .record-character.portrait-bust{overflow:hidden;left:20%;width:60%;height:83%;bottom:49px}.portrait-bust .alternate-author{position:absolute;width:100%;height:auto;top:0;left:0;object-fit:initial;max-height:none}
.meadow-scene .record-character.portrait-rose{height:83%;bottom:37px;left:18%;width:64%;overflow:visible}.portrait-rose .alternate-author{transform:rotate(12deg);transform-origin:50% 70%;object-position:center bottom}
@media(max-width:760px){.meadow-scene .record-character.portrait-bust{left:20%;width:60%;height:83%;bottom:49px}.meadow-scene .record-character.portrait-rose{height:83%;bottom:37px;left:18%;width:64%}}

.portrait-bust.bust-hsu .alternate-author{width:125%;left:-12.5%}
/* Give Hao-chung's outstretched sheep box enough horizontal room. */
.meadow-scene .record-character.portrait-bust.bust-hsu{left:13%;width:80%;height:83%;bottom:49px}.portrait-bust.bust-hsu .alternate-author{width:100%;left:0}
@media(max-width:760px){.meadow-scene .record-character.portrait-bust.bust-hsu{left:13%;width:80%;height:83%;bottom:49px}}
.portrait-bust.bust-hsu .alternate-author{width:92%;left:0}
/* A small rose figure sitting farther away in the right-hand wheat. */
.meadow-scene .record-character.portrait-rose{left:57%;width:34%;height:51%;bottom:57px;overflow:visible}.portrait-rose .alternate-author{transform:rotate(12deg);transform-origin:50% 70%}
@media(max-width:760px){.meadow-scene .record-character.portrait-rose{left:57%;width:34%;height:51%;bottom:57px}}
/* Maintain the horizon overlap on the taller desktop scene as well. */
.wheat-back{height:195px}@media(max-width:760px){.wheat-back{height:170px}}
/* Smaller group portrait, nestled into the meadow. */
.meadow-scene .record-character.portrait-fox{left:24%;width:52%;height:56%;bottom:66px}
@media(max-width:760px){.meadow-scene .record-character.portrait-fox{left:24%;width:52%;height:56%;bottom:66px}}
body{transition:background-color .8s,color .8s}.night-stars{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity 1s}.night-stars i{position:absolute;left:var(--sx);top:var(--sy);width:var(--size);height:var(--size);background:#f7edcf;border-radius:50%;box-shadow:0 0 7px #d7e6ff99;animation:night-twinkle var(--duration) ease-in-out var(--delay) infinite;animation-play-state:paused}.night-flight{--paper:#101c36;--ink:#f1e9d9;--muted:#b4bfd4;--line:#53617c66;--gold:#e1bb83;background:#101c36;color:#f1e9d9;isolation:isolate}.night-flight .night-stars{opacity:1}.night-flight .night-stars i{animation-play-state:running}.night-flight .brand>img{filter:none}.night-flight .brand small{color:#e6e1d6}.night-flight .section-top{border-color:#53617c66}.night-flight .record-art.meadow-scene:before{background:radial-gradient(ellipse at 50% 48%,#52618a40,transparent 70%)}.night-flight .wheat-back,.night-flight .wheat-front{filter:brightness(.58) saturate(.55) hue-rotate(8deg);transition:filter .8s}.night-flight .vinyl-window .vinyl{box-shadow:0 0 20px #809ee91a}.night-flight .track.active-track{background:#7087bc24}.night-flight .track .play{border-color:#7182a0}.night-flight .track.active-track .play{background:#d7c6a7;color:#101c36;border-color:#d7c6a7}.night-flight .record-toggle{border-color:#96a5c0;color:#efe5d4}.night-flight .record-toggle:hover{background:#768bb333}.night-flight .bottom-nav{background:#172640ed;border-color:#53617c;box-shadow:0 6px 32px #0003}.night-flight .bottom-nav button{color:#a0aec7}.night-flight .bottom-nav .selected{color:#f1dfbb}.night-flight .rights,.night-flight footer,.night-flight .list-heading small{color:#b4bfd4}.night-flight .toast{background:#e9dfcd;color:#101c36}.night-flight .eyebrow{color:#dfb782}.night-flight .chapter-links small{color:#dfb782}.night-flight .home-title-art{filter:brightness(0) invert(1)}
@keyframes night-twinkle{0%,100%{opacity:.15;transform:scale(.6)}50%{opacity:.95;transform:scale(1.25)}}
@media(prefers-reduced-motion:reduce){body,.night-stars{transition:none}.night-stars i{animation:none;opacity:.6}}
/* Water-blue versions of The Reason the Desert Is Beautiful. */
.water-ripples{position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:0;overflow:hidden;transition:opacity 1s}.water-ripples i{position:absolute;left:50%;top:52%;width:65vw;height:40vw;min-width:300px;min-height:180px;border:1px solid #fff9;border-radius:50%;box-shadow:0 0 18px #ffffff30,inset 0 0 18px #ffffff20;animation:water-expand 12s linear infinite;animation-play-state:paused}.water-ripples i:nth-child(2){animation-delay:-3s}.water-ripples i:nth-child(3){animation-delay:-6s}.water-ripples i:nth-child(4){animation-delay:-9s}.desert-water{--paper:#d9eef2;--ink:#294e60;--muted:#527582;--line:#80aeb255;--gold:#8b734e;background:#d9eef2;color:#294e60;isolation:isolate}.desert-water .water-ripples{opacity:1}.desert-water .water-ripples i{animation-play-state:running}.desert-water .record-art.meadow-scene:before{background:radial-gradient(ellipse at 50% 48%,#b5dbe166,transparent 70%)}.desert-water .track.active-track{background:#a5d6df50}.desert-water .bottom-nav{background:#e6f5f5ed;border-color:#a5c8cf}.desert-water .bottom-nav button{color:#6e949d}.desert-water .bottom-nav .selected{color:#294e60}.desert-water .wheat-back,.desert-water .wheat-front{filter:saturate(.7)}.desert-water .record-toggle{border-color:#84adb8}.desert-water .record-toggle:hover{background:#b9dfe666}.desert-water footer{color:#64848e}.desert-water .toast{background:#294e60;color:#f6f3e8}
@keyframes water-expand{0%{transform:translate(-50%,-50%) scale(.3);opacity:0}15%{opacity:.6}70%{opacity:.25}100%{transform:translate(-50%,-50%) scale(3.5);opacity:0}}
@media(prefers-reduced-motion:reduce){.water-ripples{transition:none}.water-ripples i{animation:none;transform:translate(-50%,-50%);opacity:.4}.water-ripples i:nth-child(2){transform:translate(-50%,-50%) scale(1.5)}.water-ripples i:nth-child(3){transform:translate(-50%,-50%) scale(2)}.water-ripples i:nth-child(4){transform:translate(-50%,-50%) scale(2.5)}}
/* Mobile meadow reaches both viewport edges; the figure and record stay centered. */
@media(max-width:760px){
 .music-layout>.record-player{width:calc(100vw - 48px);max-width:none;min-width:0}
 .record-art.meadow-scene{width:100vw;margin-left:calc((100% - 100vw)/2)}
 .vinyl-window{width:81%;left:9.5%;max-width:351px;right:0;margin:0 auto}
 .meadow-scene .record-character{width:64%;left:18%}
 .meadow-scene .record-character.portrait-bust{width:52%;left:24%}
 .meadow-scene .record-character.portrait-bust.bust-hsu{width:70%;left:17%}
 .meadow-scene .record-character.portrait-rose{width:30%;left:56%}
 .meadow-scene .record-character.portrait-fox{width:46%;left:27%}
 .wheat-back{width:124%;left:-12%;height:170px;max-width:none}
 .wheat-front{width:124%;left:-12%;max-width:none}
}
@media(max-width:760px){.vinyl-window{left:50%;right:auto;margin:0;transform:translateX(-50%)}}
.voice-intro{margin:32px 0;padding:30px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.voice-intro>span{font-size:9px;letter-spacing:2px;color:var(--gold)}.voice-intro h2{font:28px var(--serif);letter-spacing:3px;margin:15px 0}.voice-intro p{font-size:12px;line-height:2;color:var(--muted)}#voice-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px}.voice-card{display:flex;align-items:center;gap:18px;padding:22px 0;text-align:left;border-bottom:1px solid var(--line)}.voice-no{font:italic 17px Georgia,serif;color:var(--gold)}.voice-details{flex:1}.voice-details strong{font:18px var(--serif);letter-spacing:1px}.voice-details small{display:block;font-size:10px;color:var(--muted);margin-top:8px;letter-spacing:1px}.voice-play{width:34px;height:34px;border:1px solid #b7a9b9;border-radius:50%;display:grid;place-items:center;font-size:12px}@media(max-width:760px){#voice-gallery{grid-template-columns:1fr}.voice-intro h2{font-size:25px}.voice-card{padding:20px 0}}

.voice-details .voice-actor[hidden]{display:none}.voice-revealed .voice-actor{animation:page-in .4s ease-out}.voice-card .voice-details strong{line-height:1.7}.voice-card:hover .voice-play{background:#e9e0eb}
/* Nine chapters, each with a distinct atmosphere inspired by the story. */
body[data-song]{isolation:isolate;background:var(--scene-bg,var(--paper));color:var(--ink)}
body[data-song="encounter"]{--scene-bg:#f5e5d2;--paper:#f5e5d2;--ink:#584348;--muted:#846e6d;--gold:#ac743a;--line:#bfa29855;--glow:#ffc68680}
body[data-song="planet-dusk"]{--scene-bg:#e9e0f2;--paper:#e9e0f2;--ink:#493a64;--muted:#7a6c8e;--gold:#a1794d;--line:#aa9bb755;--glow:#fad6b38c}
body[data-song="planet-blue"]{--scene-bg:#dfe8f5;--paper:#dfe8f5;--ink:#354d70;--muted:#657d99;--gold:#90744c;--line:#8fa9be55;--glow:#c8dcffb0}
body[data-song="adults"]{--scene-bg:#e2e5e7;--paper:#e2e5e7;--ink:#434c59;--muted:#6d7781;--gold:#8b745a;--line:#8e99a755;--glow:#c5cad040}
body[data-song="rose"]{--scene-bg:#f4e1e3;--paper:#f4e1e3;--ink:#654452;--muted:#926d7a;--gold:#ac7158;--line:#bc8d9d55;--glow:#f5bfc270}
body[data-song="fox"]{--scene-bg:#f5e9c9;--paper:#f5e9c9;--ink:#62503c;--muted:#897454;--gold:#a16f2e;--line:#b69b6655;--glow:#ffce6680}
body[data-song="water-day"]{--scene-bg:#d9eef2;--glow:#b6e6ef66}
body[data-song="water-evening"]{--scene-bg:#cde6e5;--paper:#cde6e5;--ink:#294f58;--muted:#537780;--gold:#8b734e;--glow:#c3f0e766}
body[data-song="night"]{--scene-bg:#101c36;--glow:#344d7f44}
.song-atmosphere{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}.song-glow{position:absolute;inset:-20%;background:radial-gradient(ellipse at 32% 35%,var(--glow,transparent),transparent 57%);opacity:0;transition:opacity 1.2s;animation:song-breath 12s ease-in-out infinite}.song-grid{position:absolute;inset:-80px;opacity:0;background:repeating-linear-gradient(90deg,transparent 0 89px,#53647a12 90px 91px),repeating-linear-gradient(0deg,transparent 0 89px,#53647a12 90px 91px);animation:measured-grid 18s linear infinite}.song-particles i{position:absolute;left:var(--px);top:var(--py);width:3px;height:3px;background:#fff4cf;border-radius:50%;box-shadow:0 0 9px #fff2cb88;opacity:0;animation:gentle-mote 9s ease-in-out var(--pd) infinite;animation-play-state:paused}
body[data-song] .song-glow{opacity:1}body[data-song="adults"] .song-grid{opacity:1}
body[data-song="encounter"] .song-particles i,body[data-song="fox"] .song-particles i,body[data-song="rose"] .song-particles i{animation-play-state:running}
body[data-song="rose"] .song-particles i{width:7px;height:10px;border-radius:70% 20% 70% 20%;background:#c98a9c55;box-shadow:none;animation-name:rose-petal;animation-duration:16s}
body[data-song="planet-dusk"] .night-stars,body[data-song="planet-blue"] .night-stars{opacity:.85}
body[data-song="planet-dusk"] .night-stars i,body[data-song="planet-blue"] .night-stars i{animation-play-state:running;background:#8d70ae;box-shadow:0 0 8px #fff8}
body[data-song="planet-blue"] .night-stars i{background:#6086ad}
body[data-song]:not(.night-flight) .bottom-nav{background:color-mix(in srgb,var(--paper) 94%,transparent);border-color:var(--line)}
body[data-song]:not(.night-flight) .track.active-track{background:color-mix(in srgb,var(--ink) 8%,transparent)}
body[data-song]:not(.night-flight) .bottom-nav button{color:var(--muted)}body[data-song]:not(.night-flight) .bottom-nav .selected{color:var(--ink)}
body[data-song]:not(.night-flight) .record-toggle{border-color:var(--line)}body[data-song]:not(.night-flight) .record-toggle:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)}
@keyframes song-breath{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(4%,3%) scale(1.08)}}
@keyframes measured-grid{to{transform:translateY(90px)}}
@keyframes gentle-mote{0%,100%{opacity:0;transform:translateY(12px)}35%,65%{opacity:.7}80%{transform:translateY(-22px)}}
@keyframes rose-petal{0%{opacity:0;transform:translate(0,-20px) rotate(0)}25%,65%{opacity:.6}100%{opacity:0;transform:translate(26px,80px) rotate(80deg)}}
@media(prefers-reduced-motion:reduce){.song-glow,.song-grid,.song-particles i{animation:none!important;transition:none}.song-particles i{opacity:0!important}}
.adult-numbers{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:-1;opacity:0;transition:opacity 1s}.adult-numbers span{position:absolute;left:var(--nx);top:var(--ny);font:var(--ns)/1 Georgia,serif;color:#536275;opacity:0;animation:number-drift var(--nt) ease-in-out var(--nd) infinite;animation-play-state:paused}body[data-song="adults"] .adult-numbers{opacity:1}body[data-song="adults"] .adult-numbers span{animation-play-state:running}@keyframes number-drift{0%{opacity:0;transform:translate(0,50px) rotate(calc(var(--nr) * -1))}20%,65%{opacity:.2}100%{opacity:0;transform:translate(var(--dx),-130px) rotate(var(--nr))}}
@media(prefers-reduced-motion:reduce){.adult-numbers{transition:none}.adult-numbers span{animation:none;opacity:.12}}
.photo-banner{margin:30px 0 23px;padding:28px 30px;display:flex;align-items:center;gap:24px;background:#ebe3ed;border:1px solid #dfd3e1;border-radius:3px}.photo-banner-star{font:46px Georgia;color:#b58b54}.photo-banner div>span{font-size:10px;letter-spacing:2px;color:#9b7552}.photo-banner h2{font:25px/1.6 var(--serif);letter-spacing:2px;margin:10px 0}.photo-banner p{font-size:11px;line-height:1.9;color:#817789;margin:0}.photo-summary{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);letter-spacing:1px;margin-bottom:18px}#photo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 22px}.photo-card{border:1px solid var(--line);border-radius:3px;overflow:hidden}.photo-placeholder{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;flex-direction:column;position:relative;background:linear-gradient(140deg,#e9e3ee,#e2d9e5);color:#887992}.photo-sequence{position:absolute;top:15px;left:16px;font:italic 14px Georgia;color:#a9947b}.photo-lock{font-size:32px;line-height:1.5;font-weight:200}.photo-state{font-size:10px;letter-spacing:1.5px;margin-top:5px}.unlocked .photo-placeholder{background:linear-gradient(140deg,#f1dfc3,#e4cfae);color:#8b734e}.photo-details{padding:17px 16px 14px}.photo-date{display:flex;justify-content:space-between;align-items:center;gap:10px}.photo-date h2{font:22px Georgia,serif;letter-spacing:2px;margin:0}.photo-date>span{font-size:11px;color:var(--gold)}.photo-cast{font-size:10px;line-height:1.9;color:var(--ink);margin:12px 0 8px}.photo-release{font-size:9px;color:var(--muted);margin:0;letter-spacing:.5px}.photo-home-link{margin:0 54px 30px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0}.photo-home-link>span{font-size:8px;letter-spacing:2px;color:var(--gold)}.photo-home-link button{display:flex;align-items:center;justify-content:space-between;width:100%;text-align:left;padding:12px 0 0;gap:16px}.photo-home-link strong{font:23px var(--serif);letter-spacing:3px}.photo-home-link button>span{font-size:10px;color:var(--muted)}
@media(max-width:760px){.bottom-nav{padding-left:8px;padding-right:8px}.bottom-nav button{letter-spacing:1px;padding-left:3px;padding-right:3px}.photo-banner{padding:21px 18px;gap:14px}.photo-banner h2{font-size:20px;letter-spacing:1px}.photo-banner-star{font-size:30px}.photo-banner p{font-size:10px}#photo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}.photo-placeholder{aspect-ratio:1}.photo-details{padding:13px 10px}.photo-date h2{font-size:17px;letter-spacing:1px}.photo-date>span{font-size:9px}.photo-cast{font-size:9px}.photo-release{font-size:8px}.photo-state{font-size:8px;letter-spacing:.5px}.photo-sequence{top:11px;left:11px}.photo-home-link{margin:0 24px 28px}.photo-home-link button{display:block}.photo-home-link button>span{display:block;margin-top:12px;font-size:10px}.photo-summary{font-size:9px;letter-spacing:.5px}}
/* Landscape photos keep their entire frame, including people at the edges. */
.photo-example{margin:30px 0 34px;padding-bottom:26px;border-bottom:1px solid var(--line)}.photo-example-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:16px}.photo-example-heading h2{font:22px var(--serif);letter-spacing:2px;margin:0}.photo-example-heading>span{font-size:9px;color:var(--gold);letter-spacing:1px;white-space:nowrap}.photo-example figure{max-width:800px;margin:0 auto}.photo-example figure>button{position:relative;display:block;padding:0;width:100%;background:#332c3c;border-radius:3px;overflow:hidden}.photo-example img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain}.photo-expand-hint{position:absolute;bottom:12px;right:12px;padding:7px 10px;background:#30263dbb;color:#fff7e7;border:1px solid #fff4;border-radius:3px;font-size:10px;letter-spacing:1px}.photo-example figcaption{font-size:9px;color:var(--muted);margin-top:10px;text-align:center;letter-spacing:1px}.photo-placeholder{aspect-ratio:16/9}#photo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
#photo-example-dialog{width:min(1100px,94vw);max-width:94vw;max-height:94dvh;padding:20px;border-radius:5px;overflow:auto;background:#f7f3ea;color:#41364f}#photo-example-dialog>img{display:block;width:100%;max-width:none;height:auto;max-height:75dvh;object-fit:contain;margin:20px 0 0}#photo-example-dialog h2{font:18px var(--serif);letter-spacing:2px;margin:17px 0 6px}#photo-example-dialog p{margin:0;font-size:10px;color:#817789}.photo-dialog-close{position:absolute;top:2px;right:8px;width:36px;height:36px;font-size:27px;padding:0}
@media(max-width:760px){.photo-example-heading{align-items:flex-start}.photo-example-heading h2{font-size:18px;letter-spacing:1px;line-height:1.7}.photo-example-heading>span{font-size:8px;padding-top:6px}.photo-example{margin:26px 0}.photo-example .photo-expand-hint{font-size:9px;padding:6px 8px;bottom:8px;right:8px}#photo-grid{grid-template-columns:1fr;gap:22px}.photo-placeholder{aspect-ratio:16/9}.photo-details{padding:16px}.photo-date h2{font-size:21px}.photo-date>span{font-size:11px}.photo-cast{font-size:11px}.photo-release{font-size:9px}#photo-example-dialog{padding:12px}#photo-example-dialog>img{margin-top:25px}}
#cards .home-cast{margin:28px 0 16px;padding:25px 0;grid-template-columns:1fr 1.3fr}#cards .home-cast h2{font-size:23px}#cards .home-cast-portraits{min-width:0}.voice-unlock-note{font-size:10px;color:var(--muted);letter-spacing:1px;margin:25px 0 8px;line-height:1.9}.voice-lock-icon{width:21px;flex:0 0 21px;color:var(--gold)}.voice-lock-icon svg{display:block;width:21px;height:24px}.voice-locked{cursor:default}.voice-locked .voice-details strong{color:var(--muted)}.voice-locked .voice-lock-icon{color:#a89bab}.voice-details .voice-date{font-size:9px;letter-spacing:1px;color:var(--muted)}.voice-unlocked .voice-lock-icon{opacity:.45}.voice-card.voice-locked:hover{background:none}
@media(max-width:760px){#cards .home-cast{display:block;margin:25px 0 15px;padding:22px 0}#cards .home-cast h2{font-size:20px}#cards .home-cast figure img{height:160px}.voice-card{gap:14px}.voice-unlock-note{font-size:9px}}

.production-credit .song-author-credit{margin-top:14px;line-height:2;letter-spacing:.5px}
/* Starlight: the opening's painted universe replaces the paper-and-card layout. */
.starlight-backdrop{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:0;visibility:hidden;background:linear-gradient(180deg,#352b4be8,#53436990),url('assets/sky.png') center/cover;transition:opacity .8s,visibility .8s}.starlight-dust{position:absolute;inset:0;background:url('assets/stars.png') center/cover;opacity:.8;animation:starlight-breathe 9s ease-in-out infinite;animation-play-state:paused}
body.starlight-page{--paper:#403653;--ink:#fff1d9;--muted:#e1d5d9;--line:#f2dfc62b;--gold:#e6c793;background:#403653;color:#fff1d9;isolation:isolate}body.starlight-page .starlight-backdrop{opacity:1;visibility:visible}body.starlight-page .starlight-dust{animation-play-state:running}body.starlight-page .brand>img{filter:none}body.starlight-page .brand small{color:#fff1d9}body.starlight-page .header{border-color:#fff1d926}body.starlight-page .edition,body.starlight-page .replay,body.starlight-page .account-link{color:#f1e5d0}body.starlight-page .account-link{border-color:#ead1af66}
body.starlight-page .letter-view{min-height:calc(100dvh - 190px);padding-top:54px;padding-bottom:40px}body.starlight-page .letter-view>.eyebrow{color:#e6c793;font-size:9px;letter-spacing:3px}body.starlight-page .letter-view>h1{font:34px/1.6 var(--serif);letter-spacing:6px;color:#fff1d9;margin:14px 0 0}
body.starlight-page .letter{position:relative;isolation:isolate;overflow:visible;min-height:310px;max-width:640px;margin:20px auto 10px;padding:32px 20px 36px;border:0;background:transparent;border-radius:0;display:flex;flex-direction:column;align-items:center;justify-content:center}body.starlight-page .letter:before{content:'';position:absolute;left:50%;top:50%;width:90%;height:85%;border:1px solid #f2dfc61c;border-radius:50%;transform:translate(-50%,-50%) rotate(-20deg);z-index:-1}body.starlight-page .letter:after{content:'✦';position:absolute;right:12%;top:22%;font-size:12px;color:#edce9c;opacity:.7}body.starlight-page .letter-star{color:#efd5a7;font-size:29px;margin:0 0 18px}body.starlight-page .letter>small{font-size:8px;letter-spacing:3px;color:#e1c8b2}body.starlight-page .letter>p{font:27px/2.1 var(--serif);letter-spacing:3px;color:#fff5e2;margin:23px 0 0;text-shadow:0 2px 15px #21182f33}
body.starlight-page #new-letter{border:1px solid #e6c79377;border-radius:30px;color:#f7e7cc;background:#352b4b2b;padding:14px 23px;font-size:11px;letter-spacing:2px;backdrop-filter:blur(5px)}body.starlight-page #new-letter:hover{background:#e7cc9b15;border-color:#edcda1}body.starlight-page .letter-view>.preview-note{color:#d4c3cc;font-size:9px;margin-top:20px}body.starlight-page footer{color:#dbcbd0}body.starlight-page .bottom-nav{background:#342c46d9;border-color:#efdbb94d;box-shadow:0 10px 35px #1e173333}body.starlight-page .bottom-nav button{color:#c6b9c9}body.starlight-page .bottom-nav .selected{color:#ffedcb}body.starlight-page .bottom-nav .selected:after{background:#efd09a}
body.starlight-page .song-atmosphere,body.starlight-page .night-stars,body.starlight-page .water-ripples,body.starlight-page .adult-numbers{opacity:0!important}
@keyframes starlight-breathe{0%,100%{opacity:.5}50%{opacity:.9}}
@media(max-width:760px){body.starlight-page .letter-view{padding:38px 24px 30px;min-height:calc(100dvh - 192px)}body.starlight-page .letter-view>h1{font-size:28px;letter-spacing:4px}body.starlight-page .letter{min-height:320px;margin:10px auto 6px;padding:30px 4px}body.starlight-page .letter>p{font-size:23px;letter-spacing:1.5px;line-height:2.15}body.starlight-page .letter:before{width:103%;height:77%}body.starlight-page .letter:after{right:6%;top:24%}body.starlight-page .letter-view>.preview-note{font-size:8px;letter-spacing:.5px}body.starlight-page footer{padding-top:12px}}
@media(prefers-reduced-motion:reduce){.starlight-backdrop{transition:none}.starlight-dust{animation:none}}
/* Memories, encounters, and starlight share the opening's painted sky. */
body.starlight-page .inner>.eyebrow{color:#e6c793}body.starlight-page .inner>.section-desc{color:#e1d5d9}body.starlight-page .photo-placeholder{background:linear-gradient(145deg,#fff1d90c,#d8c7ee12);color:#e7d9e3}body.starlight-page .photo-card{background:#30243d15;border-color:#f2dfc633}body.starlight-page .photo-details{background:#2e233b18}body.starlight-page .photo-lock,body.starlight-page .photo-sequence{color:#e3c69c}body.starlight-page .photo-state{color:#ddd0df}body.starlight-page .photo-release,body.starlight-page .photo-example figcaption{color:#d1c0d1}body.starlight-page .photo-example-heading>span{color:#e6c793}body.starlight-page .unlocked .photo-placeholder{background:linear-gradient(140deg,#cbb18d20,#e6c79315);color:#f3dab0}body.starlight-page .photo-example figure>button{border:1px solid #f2dfc633}body.starlight-page .home-cast{border-color:#f2dfc633}body.starlight-page .home-cast .eyebrow{color:#e6c793}body.starlight-page .home-cast figcaption{color:#e1d5d9}body.starlight-page .voice-lock-icon,body.starlight-page .voice-locked .voice-lock-icon{color:#dfc3a0}body.starlight-page .voice-locked .voice-details strong{color:#dfd2df}body.starlight-page .voice-play{border-color:#dfc3a066;color:#f3dfba}body.starlight-page .voice-card:hover .voice-play{background:#fff1d915}body.starlight-page .voice-card{border-color:#f2dfc633}body.starlight-page .preview-note{color:#d1c0d1}body.starlight-page .voice-revealed .voice-actor{color:#f4d9a8}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.song-transport{margin:20px auto 0;width:90%;max-width:340px}.song-transport[hidden]{display:none}#song-progress{display:block;width:100%;accent-color:var(--gold);cursor:pointer;height:20px;margin:0}.song-times{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums;margin-top:5px}.song-transport+#record-preview{margin-top:13px}
.photo-example img{aspect-ratio:auto}.memory-test-thumbnails{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;max-width:800px;margin:15px auto 0}.memory-test-thumbnails button{display:block;padding:0;border:1px solid #e6c79355;border-radius:3px;overflow:hidden;background:#241b30}.memory-test-thumbnails img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain}.memory-test-thumbnails button:hover{outline:1px solid #f1d4aa}.memory-album-cover{position:relative;display:block;padding:0;width:100%;background:#241b30}.memory-album-cover img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain}.memory-album-cover>span{position:absolute;bottom:10px;right:10px;background:#241b30cc;color:#fff1d9;padding:7px 9px;border-radius:3px;font-size:10px}#photo-example-dialog .memory-photo-controls{display:flex;align-items:center;justify-content:center;gap:28px;margin-top:10px}.memory-photo-controls button{width:44px;height:44px;border:1px solid #c4b3c8;border-radius:50%;font-size:20px}.memory-photo-controls span{font-size:12px;letter-spacing:2px;color:#817789}#photo-example-dialog>img{max-height:65dvh}#photo-example-dialog #memory-photo-credit{line-height:1.9}#photo-example-dialog h2{margin-top:8px}@media(max-width:760px){.memory-test-thumbnails{gap:5px}.memory-album-cover>span{font-size:9px}.photo-example-heading h2{font-size:20px}}