@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Noto+Sans+SC:wght@300;400;500;600&display=swap');
:root{--deep:#0b2638;--deep2:#123d50;--ocean:#28677a;--mist:#a8d0d7;--foam:#e7f2ef;--sand:#dfcdb3;--gold:#e8cfa5;--ink:#173747;--serif:"Cormorant Garamond",Georgia,serif;--sans:"Noto Sans SC","Microsoft YaHei",sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--deep)}body{margin:0;color:var(--foam);font-family:var(--sans);font-weight:300;overflow-x:hidden;background:var(--deep)}button{font:inherit;color:inherit;cursor:pointer}.grain{position:fixed;inset:0;pointer-events:none;z-index:20;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}.ambient-glow{position:fixed;width:45vw;height:45vw;border-radius:50%;filter:blur(100px);opacity:.12;pointer-events:none;z-index:0}.glow-one{background:#50b4c4;top:10%;left:-20%}.glow-two{background:#b0a3d2;bottom:0;right:-20%}
.topbar{position:fixed;z-index:30;top:0;left:0;width:100%;padding:22px 5vw;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(180deg,rgba(5,24,36,.45),transparent);font-size:10px;letter-spacing:.2em}.brand{color:#e5f2f0;text-decoration:none;font-family:var(--serif);font-size:17px;letter-spacing:.16em}.brand-mark{font-size:22px;margin-right:8px;color:#a9d7d8}.topbar-right{display:flex;gap:25px;align-items:center}.chapter-indicator{color:#b8d1d4}.sound-toggle{border:0;background:none;color:#d6e6e4;display:flex;align-items:center;gap:10px;font-size:10px;letter-spacing:.1em}.sound-bars{height:15px;display:flex;align-items:center;gap:2px}.sound-bars i{width:2px;height:5px;background:#b6d9d8;display:block;border-radius:2px}.sound-bars i:nth-child(2){height:11px}.sound-bars i:nth-child(3){height:7px}.sound-bars i:nth-child(4){height:13px}.sound-toggle.playing .sound-bars i{animation:equalize .7s ease-in-out infinite alternate}.sound-toggle.playing .sound-bars i:nth-child(2){animation-delay:.2s}.sound-toggle.playing .sound-bars i:nth-child(3){animation-delay:.4s}
.scene{position:relative;min-height:100svh;overflow:hidden;isolation:isolate}.hero{display:grid;place-items:center;background:linear-gradient(180deg,#102e42 0%,#477e8a 48%,#d1c8b4 100%)}.hero-sky{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 42%,rgba(244,226,190,.38),transparent 32%),linear-gradient(180deg,rgba(7,29,46,.25),transparent 62%)}.hero-horizon{position:absolute;left:0;right:0;top:52%;height:1px;background:rgba(255,245,222,.65);box-shadow:0 0 35px 10px rgba(255,235,199,.23)}.hero-water{position:absolute;inset:53% 0 0;background:linear-gradient(180deg,rgba(34,92,107,.55),#123b4e 78%,#0b293b);overflow:hidden}.hero-water:before,.hero-water:after{content:"";position:absolute;inset:-30% -10%;background:repeating-radial-gradient(ellipse at 50% 0%,transparent 0 38px,rgba(211,239,226,.11) 40px 42px,transparent 44px 85px);transform:rotate(-5deg);animation:waterDrift 14s ease-in-out infinite alternate}.hero-water:after{opacity:.45;transform:translateX(10%) scale(1.2);animation-direction:alternate-reverse}.hero-content{position:relative;z-index:2;text-align:center;margin-top:-4vh;padding:100px 20px 70px}.eyebrow{font-size:10px;letter-spacing:.28em;color:#a9cbd0;margin:0 0 24px}.hero-title,.scene h2{font-family:var(--serif);font-weight:400;letter-spacing:.04em;line-height:1.13;font-size:clamp(48px,7vw,92px);margin:0;color:#f0f3e9}.hero-title em,.scene h2 em{font-style:normal;color:#d8d2bd}.hero-subtitle{font-size:13px;letter-spacing:.18em;color:#e2e8df;margin:28px 0 38px}.primary-button{border:1px solid rgba(238,245,231,.65);background:rgba(230,242,234,.08);padding:15px 27px;min-width:190px;border-radius:40px;letter-spacing:.12em;font-size:12px;backdrop-filter:blur(12px);transition:.35s}.primary-button:hover{background:rgba(230,242,234,.2);transform:translateY(-3px);box-shadow:0 12px 40px #173d4b66}.primary-button span{margin-left:22px}.scroll-hint{font:10px var(--serif);letter-spacing:.28em;color:#d0dcd5;margin-top:75px}.hero-note{position:absolute;bottom:35px;left:5vw;font:11px var(--serif);letter-spacing:.2em;color:#d7e5dc}
.underwater{background:linear-gradient(180deg,#16495d,#0b2d43 55%,#082638);min-height:110svh}.underwater-bg{position:absolute;inset:0;background:radial-gradient(ellipse at 52% -10%,rgba(177,225,218,.46),transparent 42%),radial-gradient(ellipse at 15% 75%,rgba(39,123,138,.26),transparent 40%),linear-gradient(180deg,#28687a 0%,#12465d 35%,#092b40 100%)}.sun-rays{position:absolute;top:-20%;left:28%;width:50%;height:90%;background:repeating-conic-gradient(from 8deg at 50% 0%,rgba(222,248,225,.10) 0deg,transparent 5deg,transparent 13deg);filter:blur(17px);opacity:.6;mask-image:linear-gradient(#000,transparent 85%);animation:rayMove 16s ease-in-out infinite alternate}.caustics{position:absolute;inset:0;background:repeating-radial-gradient(ellipse at 50% 0%,transparent 0 70px,rgba(185,232,220,.06) 72px 75px,transparent 78px 140px);opacity:.7;animation:waterDrift 22s linear infinite}.scene-heading{position:relative;z-index:2;text-align:center;padding:150px 20px 0}.scene h2{font-size:clamp(38px,5vw,66px)}.scene-heading>p:last-child,.section-intro{color:#b5ced0;font-size:13px;line-height:2;letter-spacing:.08em;margin:22px auto 0;max-width:560px}.discovery-area{position:relative;z-index:3;max-width:850px;height:410px;margin:20px auto 0}.discovery{position:absolute;border:1px solid rgba(203,237,228,.2);background:rgba(172,224,218,.08);backdrop-filter:blur(8px);border-radius:50%;width:112px;height:112px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:#e3f1e9;font-size:11px;letter-spacing:.12em;transition:.4s;box-shadow:0 10px 50px #061d2a33}.discovery:hover{transform:translateY(-8px) scale(1.05);background:rgba(195,238,225,.16);box-shadow:0 0 45px #9ed9d355}.object-icon{font:38px var(--serif);color:#d6e8d9}.bottle{left:13%;top:26%}.pearl{left:43%;top:10%;width:90px;height:90px}.jelly{right:12%;top:30%}.jelly-shape{font-size:38px;color:#c6e4e1;text-shadow:0 0 18px #a5ece9;animation:jellyFloat 3s ease-in-out infinite}.chest{left:44%;bottom:4%;width:100px;height:100px}.chest small{font-size:8px;color:#a7c5c9}.chest.locked{opacity:.55;filter:grayscale(.6)}.explore-progress{position:relative;z-index:3;width:min(300px,80vw);margin:0 auto;text-align:center;color:#b8d2d1;font-size:10px;letter-spacing:.12em}.progress-track{height:2px;background:#b4d1ce33;margin-top:12px}.progress-track i{display:block;width:0;height:100%;background:#d9e8d8;transition:width .5s}.secret-fish{position:absolute;right:4%;bottom:12%;border:0;background:none;font-size:22px;opacity:.35;filter:grayscale(.5);transition:.3s}.secret-fish:hover{opacity:1;transform:translateX(-8px)}.seaweed{position:absolute;bottom:-30px;width:150px;height:260px;opacity:.35;border-left:3px solid #78a99a;border-radius:50%;transform:rotate(-10deg)}.seaweed:before,.seaweed:after{content:"";position:absolute;width:70px;height:140px;border-left:3px solid #78a99a;border-radius:50%;left:22px;top:20px;transform:rotate(25deg)}.seaweed:after{left:50px;top:75px;transform:rotate(-24deg)}.seaweed-left{left:3%}.seaweed-right{right:3%;transform:scaleX(-1) rotate(-10deg)}.bubble{position:absolute;bottom:-30px;border:1px solid #d7f2eb66;border-radius:50%;background:#bde5e51c;animation:bubbleUp linear infinite}.text-link{border:0;background:none;color:#d7e9e3;font-size:11px;letter-spacing:.16em}.next-link{position:relative;display:block;margin:22px auto 45px}.next-link span{margin-left:10px}.radio-scene{background:linear-gradient(135deg,#102e42,#1d5265 55%,#0d3045);padding:140px 20px 100px}.radio-backdrop{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 55%,#7cb6b222,transparent 48%)}.section-wrap{position:relative;z-index:2;max-width:1050px;margin:0 auto;text-align:center}.section-wrap h2{font-size:clamp(38px,5vw,64px)}.radio-card{width:min(500px,100%);margin:48px auto 0;padding:36px 38px 30px;border:1px solid #c4e0df38;border-radius:5px;background:linear-gradient(145deg,#d5e9e512,#0b263866);box-shadow:0 30px 90px #051a2a55;backdrop-filter:blur(15px)}.record-wrap{position:relative;width:160px;height:160px;margin:0 auto 28px;display:grid;place-items:center}.record{width:145px;height:145px;border-radius:50%;background:repeating-radial-gradient(circle,#17232a 0 2px,#283b42 3px 4px,#17232a 5px 7px);display:grid;place-items:center;box-shadow:0 12px 30px #061b28aa}.record.playing{animation:spin 5s linear infinite}.record-center{width:42px;height:42px;border-radius:50%;background:#b7d0c7;color:#244352;display:grid;place-items:center;font:16px var(--serif);letter-spacing:.1em}.record-orbit{position:absolute;inset:0;border:1px solid #d4ece344;border-radius:50%;transform:scale(1.12)}.radio-meta{font-size:9px;letter-spacing:.22em;color:#a9cbd0}.live-dot{display:inline-block;width:6px;height:6px;background:#b8d6be;border-radius:50%;margin-right:8px;box-shadow:0 0 10px #b8d6be}.radio-card h3{font:26px var(--serif);font-weight:400;margin:13px 0 7px}.track-name{font-size:11px;color:#a9c6ca}.audio-controls{display:flex;align-items:center;gap:14px;margin:25px 0}.round-control{width:38px;height:38px;border:1px solid #d7e8df77;border-radius:50%;background:#e3eee912;font-size:12px}.track-line{height:2px;background:#d7e8df33;flex:1}.track-line i{height:100%;width:0;display:block;background:#d9e7d9}.audio-time{font-size:9px;color:#adc7c9}.secondary-audio{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.audio-chip{border:1px solid #c6e0dd44;background:#d8ecec0d;padding:12px 18px;border-radius:30px;font-size:11px;color:#dcebe6}.audio-chip span{color:#9cc7c8;margin-left:10px}.audio-tip{font-size:10px;color:#8fb0b5;margin:20px 0 0}
.wishes-scene{background:linear-gradient(180deg,#214c5a 0%,#6e9190 38%,#d4bda0 100%);padding:145px 20px 90px;min-height:105svh}.shore-sun{position:absolute;width:220px;height:220px;border-radius:50%;background:#f1d8ad;filter:blur(2px);opacity:.65;top:14%;left:calc(50% - 110px);box-shadow:0 0 90px #f2d7a966}.shore-water{position:absolute;bottom:0;left:0;right:0;height:38%;background:repeating-linear-gradient(175deg,#285969aa 0 2px,#416e78aa 3px 5px,transparent 6px 22px),linear-gradient(180deg,#315f6c,#173d50)}.wishes-wrap{max-width:900px}.wishes-scene .eyebrow,.wishes-scene .section-intro{color:#e3eee5}.wish-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:52px auto 0}.wish-card{min-height:160px;border:1px solid #f4eee18c;background:#f1eee326;backdrop-filter:blur(12px);color:#f8f1e4;padding:20px 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;transition:.35s}.wish-card:hover,.wish-card.lit{background:#f5eadc44;transform:translateY(-7px);box-shadow:0 15px 35px #183b4055}.wish-icon{font:30px var(--serif);color:#f5dfb6}.wish-card strong{font-size:12px;font-weight:400;letter-spacing:.08em}.wish-card small{font-size:9px;color:#e1e9dc}.wish-footnote{font-size:10px;color:#e6e8dc;margin:25px 0}.wishes-scene .next-link{margin-top:35px}
.cat-scene{background:radial-gradient(ellipse at 50% 48%,#2e7280 0%,#16485d 38%,#092c41 78%);padding:140px 20px 90px;min-height:100svh}.cat-cave-glow{position:absolute;left:50%;top:40%;width:520px;height:520px;transform:translate(-50%,-50%);border-radius:50%;background:#a5d8c722;filter:blur(50px)}.cat-wrap h2{font-size:clamp(36px,5vw,60px)}.cat-stage{margin:30px auto 0;max-width:440px}.cat-photo{position:relative;width:250px;height:230px;margin:0 auto;display:grid;place-items:center;cursor:pointer;outline:none}.cat-halo{position:absolute;width:230px;height:190px;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;background:#f5c98a20;filter:blur(25px)}.cat-illustration{position:relative;width:210px;height:170px;filter:drop-shadow(0 20px 22px #061c2c88);animation:catBreath 3.5s ease-in-out infinite}.cat-body{position:absolute;bottom:5px;left:20px;width:175px;height:112px;border-radius:48% 48% 42% 42%;background:radial-gradient(ellipse at 45% 28%,#ffd18c,#e99b4e 65%,#bd672e);box-shadow:inset -12px -10px 20px #a94e2866}.cat-body:before{content:"";position:absolute;inset:18px 35px 8px;border-radius:50%;background:repeating-linear-gradient(95deg,transparent 0 18px,#bd692f44 19px 22px,transparent 23px 38px)}.cat-head{position:absolute;left:57px;top:3px;width:112px;height:105px;border-radius:47% 47% 45% 45%;background:radial-gradient(ellipse at 40% 25%,#ffd99b,#efa657 68%,#c77538);z-index:2}.ear{position:absolute;top:-12px;width:36px;height:40px;background:#e99b4e;clip-path:polygon(50% 0,100% 100%,0 100%)}.ear:after{content:"";position:absolute;inset:12px 9px 5px;background:#e9a2a0;clip-path:polygon(50% 0,100% 100%,0 100%)}.ear.left{left:5px;transform:rotate(-18deg)}.ear.right{right:5px;transform:rotate(18deg)}.eye{position:absolute;top:47px;width:7px;height:10px;border-radius:50%;background:#382a23}.eye.left{left:31px}.eye.right{right:31px}.nose{position:absolute;top:62px;left:52px;width:9px;height:7px;background:#a95e60;clip-path:polygon(50% 100%,0 0,100% 0)}.mouth{position:absolute;top:69px;left:49px;width:15px;height:8px;border-bottom:1px solid #74433a;border-radius:50%}.whisker{position:absolute;top:70px;width:31px;height:1px;background:#f5dfbf;opacity:.8}.w1{left:-2px;transform:rotate(8deg)}.w2{right:-2px;transform:rotate(-8deg)}.cat-paw{position:absolute;z-index:3;bottom:0;width:52px;height:34px;border-radius:50%;background:#f2b66d;box-shadow:inset 0 -5px 8px #b96a3d55}.paw-left{left:42px}.paw-right{right:23px}.cat-tail{position:absolute;right:-5px;bottom:18px;width:70px;height:48px;border:16px solid #d9823d;border-left-color:transparent;border-bottom-color:transparent;border-radius:50%;transform:rotate(20deg)}.cat-sparkle{position:absolute;color:#f4dfb4;font-size:23px;animation:sparkle 2.8s ease-in-out infinite}.s1{top:20px;left:5px}.s2{right:4px;top:58px;animation-delay:.7s}.s3{bottom:15px;left:20px;animation-delay:1.2s}.cat-caption{font:20px var(--serif);color:#e4eee2;margin:10px}.cat-pat{border:1px solid #d7e9df77;background:#e1eee90e;border-radius:30px;padding:11px 25px;font-size:11px;letter-spacing:.12em;margin-top:12px}.cat-secret{font-size:10px;color:#9fc4c5;margin-top:16px}.cat-next{margin-top:45px}
.letter-scene{background:radial-gradient(ellipse at 50% 25%,#315c70,#102f45 52%,#071e30 100%);padding:140px 20px 100px;min-height:120svh}.letter-stars{position:absolute;inset:0;background-image:radial-gradient(#e7eee0 1px,transparent 1px),radial-gradient(#d6e6e2 1px,transparent 1px);background-size:110px 110px,170px 170px;background-position:0 0,40px 60px;opacity:.22}.letter-wrap{max-width:720px}.letter-scene h2{font-size:clamp(38px,5vw,62px)}.envelope{position:relative;display:block;width:240px;height:160px;margin:55px auto 15px;border:0;background:transparent;perspective:800px}.envelope-back{position:absolute;inset:0;background:#cbb99b;border-radius:3px;box-shadow:0 20px 50px #041b2a77}.letter-paper{position:absolute;left:15px;right:15px;bottom:12px;height:125px;background:#f1e9d8;color:#34505a;z-index:1;display:flex;flex-direction:column;align-items:flex-start;padding:15px 18px;gap:7px;text-align:left;transition:transform .8s cubic-bezier(.2,.8,.2,1)}.letter-paper span{font:9px var(--serif);letter-spacing:.2em;color:#8b9b91}.letter-paper b{font:17px var(--serif);font-weight:500}.letter-paper i{font-size:10px;font-style:normal;color:#82918b}.envelope-front{position:absolute;inset:0;background:linear-gradient(145deg,#d8c8aa,#b8a889);clip-path:polygon(0 0,50% 58%,100% 0,100% 100%,0 100%);z-index:3}.envelope-flap{position:absolute;inset:0;background:#e4d5b8;clip-path:polygon(0 0,100% 0,50% 65%);transform-origin:top;transition:transform .65s;z-index:4}.seal{position:absolute;z-index:5;left:50%;top:56%;transform:translate(-50%,-50%);width:31px;height:31px;background:#9c6660;border-radius:50%;display:grid;place-items:center;color:#f5e6d3}.envelope.open .envelope-flap{transform:rotateX(180deg);z-index:0}.envelope.open .letter-paper{transform:translateY(-90px);z-index:2}.envelope.open .seal{opacity:0}.envelope-hint{font-size:10px;color:#a9c5c8;letter-spacing:.1em}.final-letter{display:none;text-align:left;margin:45px auto 0;max-width:540px;padding:42px 46px;background:#f1eadb;color:#294653;box-shadow:0 25px 70px #031a2a66;line-height:2}.final-letter.show{display:block;animation:fadeUp .9s both}.letter-to{font:11px var(--serif);letter-spacing:.2em;color:#83938b}.final-letter h3{font:24px var(--serif);font-weight:500;margin:20px 0}.letter-main{font-size:17px;line-height:2.1;white-space:pre-line}.letter-sign{text-align:right;font:18px var(--serif);margin-top:35px}.letter-end{font:9px var(--serif);letter-spacing:.13em;color:#879991;border-top:1px solid #c9cbbd;padding-top:15px;margin-top:25px}.final-line{font:clamp(18px,2vw,25px) var(--serif);color:#e2e8d9;margin:45px 0 0;opacity:0;transition:opacity 1s}.final-line.show{opacity:1}.restart-button{margin-top:25px;border:0;background:none;color:#a9c6c9;font-size:10px;letter-spacing:.15em;opacity:0;pointer-events:none}.restart-button.show{opacity:1;pointer-events:auto}
.modal{position:fixed;inset:0;z-index:50;display:none;place-items:center;padding:20px}.modal.open{display:grid}.modal-backdrop{position:absolute;inset:0;background:#041a28bb;backdrop-filter:blur(8px)}.modal-card{position:relative;width:min(420px,100%);padding:42px 35px 34px;background:linear-gradient(145deg,#e4efea,#cbdedb);color:#244654;text-align:center;box-shadow:0 25px 90px #03162488;animation:fadeUp .45s both}.modal-close{position:absolute;right:15px;top:10px;border:0;background:none;color:#42616a;font-size:25px}.modal-symbol{font:42px var(--serif);color:#779e9e}.modal-card .eyebrow{color:#6e999d;margin:15px 0}.modal-card h3{font:28px var(--serif);font-weight:500;margin:10px 0}.modal-card p:last-of-type{font-size:13px;line-height:2;color:#557078}.modal-ok{margin-top:18px;border:1px solid #75999b;background:transparent;color:#345965;padding:10px 25px;border-radius:30px;font-size:11px;letter-spacing:.1em}
.reveal{animation:fadeUp 1s both}.delay-1{animation-delay:.2s}.delay-2{animation-delay:.4s}.delay-3{animation-delay:.65s}.delay-4{animation-delay:.9s}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@keyframes waterDrift{from{transform:translateX(-2%) translateY(0)}to{transform:translateX(3%) translateY(12px)}}@keyframes rayMove{from{transform:translateX(-3%) rotate(-2deg)}to{transform:translateX(4%) rotate(3deg)}}@keyframes bubbleUp{to{transform:translateY(-115vh) translateX(35px);opacity:0}}@keyframes jellyFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes equalize{to{height:14px}}@keyframes catBreath{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.025)}}@keyframes sparkle{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}
@media(max-width:760px){.topbar{padding:17px 20px}.brand{font-size:14px}.chapter-indicator{display:none}.topbar-right{gap:8px}.hero-content{margin-top:-2vh}.hero-title{font-size:58px}.hero-note{left:20px;bottom:24px}.scene-heading{padding-top:125px}.discovery-area{height:370px;margin-top:5px}.discovery{width:92px;height:92px;font-size:10px}.bottle{left:8%;top:28%}.pearl{left:42%;top:9%;width:78px;height:78px}.jelly{right:7%;top:31%}.chest{left:41%;bottom:4%;width:88px;height:88px}.explore-progress{margin-top:0}.secret-fish{right:5%;bottom:9%}.radio-scene,.wishes-scene,.cat-scene,.letter-scene{padding-top:120px}.radio-card{padding:28px 20px}.wish-grid{grid-template-columns:repeat(2,1fr);gap:9px;margin-top:35px}.wish-card{min-height:130px;padding:15px 8px}.wish-card:last-child{grid-column:1/-1;min-height:110px}.wishes-scene{padding-bottom:65px}.final-letter{padding:30px 25px}.letter-main{font-size:15px}.section-intro{font-size:12px}.cat-photo{transform:scale(.9);margin-top:10px}.cat-next{margin-top:20px}}
@media(max-width:380px){.hero-title{font-size:49px}.sound-toggle{font-size:9px}.discovery{width:82px;height:82px}.bottle{left:3%}.jelly{right:3%}.chest{left:39%}.wish-card strong{font-size:11px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}


/* Real orange-cat photos supplied for the personal easter egg. */
.cat-photo{width:min(320px,82vw);height:245px;border-radius:24px;overflow:hidden;isolation:isolate;box-shadow:0 22px 55px #061c2c88}
.cat-real-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%;border-radius:inherit;z-index:1;transition:transform .55s ease,filter .55s ease}
.cat-illustration{display:none!important}
.cat-photo .cat-sparkle{z-index:3;text-shadow:0 0 14px #fff4d8}
.cat-photo.cat-petted .cat-real-photo{animation:catPhotoPat .7s ease}
@keyframes catPhotoPat{0%,100%{transform:scale(1)}35%{transform:scale(1.045) rotate(-.8deg)}70%{transform:scale(.99) rotate(.6deg)}}
.cat-sleepy-photo{width:min(320px,82vw);margin:20px auto 0;text-align:center}
.cat-sleepy-photo img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:center 48%;border:1px solid #d7e9df55;border-radius:16px;box-shadow:0 12px 32px #061c2c55}
.cat-sleepy-photo figcaption{margin-top:8px;color:#a9cbd0;font-size:10px;letter-spacing:.08em;line-height:1.8}
@media(max-width:760px){.cat-photo{width:min(300px,82vw);height:225px}}
@media(prefers-reduced-motion:reduce){.cat-photo.cat-petted .cat-real-photo{animation:none}}


/* Full-bleed cinematic video backgrounds: one clip shared by each page pair. */
.scene{background:transparent!important}
.scene-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;z-index:0;pointer-events:none;background:#092638}
.scene-video-shade{position:absolute;inset:0;z-index:1;pointer-events:none}
.shade-ocean-01{background:linear-gradient(180deg,rgba(5,25,39,.32) 0%,rgba(7,35,48,.18) 42%,rgba(5,25,39,.42) 100%)}
.shade-ocean-02{background:linear-gradient(180deg,rgba(4,27,46,.40) 0%,rgba(5,35,55,.28) 48%,rgba(4,25,43,.56) 100%)}
.shade-ocean-03{background:linear-gradient(180deg,rgba(4,19,39,.42) 0%,rgba(5,24,45,.30) 48%,rgba(3,17,35,.62) 100%)}
.hero-sky,.hero-horizon,.hero-water,.underwater-bg,.radio-backdrop,.shore-sun,.shore-water,.cat-cave-glow,.letter-stars{display:none!important}
.hero-content,.hero-note,.scene-heading,.discovery-area,.explore-progress,.secret-fish,.section-wrap,.cat-next{position:relative;z-index:2}
.hero-content{z-index:3}
.scene-video{transform:scale(1.015)}
@media(max-width:760px){.scene-video{object-position:center center;transform:scale(1.04)}}
@media(prefers-reduced-motion:reduce){.scene-video{display:none}.scene{background:#0b2638!important}}


/* =========================================================
   Paged slide navigation (方案B): 每章一屏，滑动一次进一页
   ========================================================= */
html, body{height:100%;overflow:hidden}
#journey{position:fixed;inset:0;height:100vh;height:100svh;overflow:hidden;touch-action:none}
.scene{position:absolute;top:0;left:0;width:100%;height:100%;min-height:0!important;margin:0;
  will-change:transform;transition:transform .72s cubic-bezier(.22,.61,.36,1)}
.scene:not(.active){transform:translateY(100%)}
.scene.active{transform:translateY(0);z-index:2}
#journey.dragging .scene{transition:none}

/* 最后一章信件：打开后可在本章内上下滚动阅读 */
#letter.open-scroll .section-wrap{height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;padding-bottom:56px}

/* 内容超出屏幕时的兜底：本章内上下滚动，绝不裁切 */
.scene.overflows{overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;scrollbar-width:none}
.scene.overflows::-webkit-scrollbar{display:none}

/* ===== 移动端一屏化排版收紧（方案B 配套） ===== */
@media (max-width:760px){
  .scene{padding-top:0}
  .hero-content{margin-top:-2vh;padding:60px 20px 36px}
  .hero-title{font-size:50px}
  .hero-subtitle{margin:14px 0 22px;font-size:12px}
  .scroll-hint{margin-top:34px}
  .hero-note{bottom:22px}
  .scene-heading{padding:58px 20px 0}
  .scene h2,.section-wrap h2{font-size:32px}
  .scene-heading>p:last-child,.section-intro{font-size:12px;margin-top:8px;line-height:1.75}
  .radio-scene,.wishes-scene,.cat-scene,.letter-scene{padding:58px 20px 0}
  .discovery-area{height:228px;margin-top:10px}
  .discovery{width:82px;height:82px;font-size:10px}
  .pearl{width:66px;height:66px}
  .chest{width:78px;height:78px}
  .explore-progress{margin-top:2px}
  .secret-fish{right:5%;bottom:7%}
  .radio-card{margin-top:16px;padding:16px 16px 14px}
  .record-wrap{width:104px;height:104px;margin-bottom:12px}
  .record{width:94px;height:94px}
  .record-center{width:28px;height:28px;font-size:12px}
  .radio-card h3{font-size:21px;margin:8px 0 4px}
  .audio-controls{margin:10px 0}
  .audio-chip{padding:10px 16px;font-size:11px}
  .audio-tip{margin:12px 0 0}
  .wish-grid{margin-top:14px;gap:8px}
  .wish-card{min-height:94px;padding:9px 6px;gap:6px}
  .wish-icon{font-size:21px}
  .wish-card strong{font-size:11px}
  .wish-footnote{margin:10px 0}
  .wishes-scene .next-link{margin-top:14px}
  .cat-stage{margin-top:8px}
  .cat-photo{width:min(210px,64vw);height:158px}
  .cat-caption{font-size:15px;margin:5px}
  .cat-pat{padding:8px 18px;margin-top:8px;font-size:10px}
  .cat-secret{margin-top:9px}
  .cat-sleepy-photo{width:min(176px,56vw);margin-top:6px}
  .cat-next{margin-top:14px}
  .envelope{width:172px;height:114px;margin:20px auto 8px}
  .envelope-hint{font-size:10px}
  .final-letter{padding:20px 18px;margin-top:18px}
  .letter-main{font-size:15px}
  .letter-scene{padding-bottom:0}
  .next-link{margin:12px auto 0}
}
@media (max-width:760px) and (max-height:660px){
  .hero-title{font-size:45px}
  .scroll-hint{display:none}
  .cat-sleepy-photo{width:min(160px,52vw)}
  .cat-photo{width:min(192px,60vw);height:146px}
  .hero-content{padding:54px 20px 28px}
  .scene-heading{padding:54px 20px 0}
  .radio-scene,.wishes-scene,.cat-scene,.letter-scene{padding:54px 20px 0}
  .discovery-area{height:196px}
  .wish-card{min-height:86px}
  .radio-card{margin-top:12px;padding:14px 14px 12px}
  .record-wrap{width:92px;height:92px;margin-bottom:10px}
  .record{width:84px;height:84px}
}