@font-face{font-family:Mali;src:url('./fonts/mali-regular.ttf') format('truetype');font-style:normal;font-weight:400 500;font-display:swap}
@font-face{font-family:Mali;src:url('./fonts/mali-semibold.ttf') format('truetype');font-style:normal;font-weight:600 800;font-display:swap}
@font-face{font-family:Quicksand;src:url('./fonts/quicksand-semibold.ttf') format('truetype');font-style:normal;font-weight:400 800;font-display:swap}
:root{font-family:Mali,"Thonburi",sans-serif;--pink:#ffb8e7;--muted:#d3badf}
button{font-family:inherit;transition:background .25s,box-shadow .25s,transform .25s,color .25s}
button:active{transform:scale(.94)}
#cosmic-fx{position:absolute;inset:0;z-index:3;width:100%;height:100%;pointer-events:none}
#portal-flash{position:absolute;inset:0;z-index:7;pointer-events:none;opacity:0;background:radial-gradient(ellipse at center,#ffd7f7 0,#f4a3ff99 18%,#9a70ed44 36%,transparent 72%)}
.opening #portal-flash{animation:portal-flash 2.3s ease-out both}
.intro{overflow:hidden;background:#07021052;backdrop-filter:blur(1px);-webkit-backdrop-filter:blur(1px);perspective:1200px}
.aurora{position:absolute;width:85vw;height:70vh;border-radius:50%;opacity:.52;filter:blur(65px);pointer-events:none;will-change:transform}
.aurora-one{background:radial-gradient(ellipse,#b5388e4f,transparent 67%);top:-20%;left:-25%;animation:aurora-drift 17s ease-in-out infinite alternate}
.aurora-two{background:radial-gradient(ellipse,#7b45d653,transparent 66%);bottom:-23%;right:-20%;animation:aurora-drift 21s ease-in-out -9s infinite alternate-reverse}
.portal-orbits{position:absolute;width:min(760px,96vw);aspect-ratio:1;border-radius:50%;pointer-events:none;animation:orbit-turn 70s linear infinite}
.portal-orbits i{position:absolute;inset:0;border:1px solid #d794ee28;border-radius:50%;box-shadow:0 0 45px #ca69db08,inset 0 0 45px #bc53db08}
.portal-orbits i:nth-child(2){inset:-7%;border-style:dashed;border-color:#dcaaec12;transform:rotateX(60deg);animation:orbit-turn 32s linear infinite reverse}
.portal-orbits i:nth-child(3){inset:9%;border-color:#ffc4e718;transform:rotateY(60deg)}
.portal-orbits b{position:absolute;font-size:1.75rem;font-weight:400;color:#ffe0f7;filter:drop-shadow(0 0 14px #ff91d6);animation:star-breathe 4s ease-in-out infinite}
.portal-orbits b:nth-of-type(1){top:6%;left:23%}.portal-orbits b:nth-of-type(2){right:1%;top:53%;color:#cdb8ff;animation-delay:-1s}.portal-orbits b:nth-of-type(3){bottom:1%;left:39%;animation-delay:-2s}
.intro-card{z-index:1;width:min(560px,100%);padding:38px 30px 29px;border-radius:36px;border-color:#efb7e74f;background:linear-gradient(140deg,#361839db,#170d2feb 60%,#271137e8);box-shadow:0 0 0 6px #e6a6df03,0 25px 100px #02010888,0 0 70px #b952e31d,inset 0 1px 0 #ffe2f729;animation:card-arrive 1.4s cubic-bezier(.16,1,.3,1) both,card-float 7s 1.4s ease-in-out infinite}
.intro-card:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,transparent 28%,#ffc9fa06 43%,#ffffff0b 46%,transparent 59%);background-size:250% 100%;animation:card-sheen 9s ease-in-out infinite}
.intro .eyebrow{font-family:Quicksand,sans-serif;font-size:.75rem;letter-spacing:.19em;animation:rise-in .9s .35s both;color:#e6bee9}
h1{font-family:Mali,sans-serif;font-weight:600;font-size:clamp(2.1rem,4.1vw,3.35rem);line-height:1.52;letter-spacing:-.025em;margin:21px 0 12px;animation:rise-in 1s .5s both}
h1 span{background:linear-gradient(100deg,#ffb2e0 10%,#ffdaed 30%,#cbbaff 55%,#ffaedf 80%);background-size:230% auto;background-clip:text;-webkit-background-clip:text;color:transparent;animation:gradient-wander 8s ease-in-out infinite;text-shadow:0 0 40px #fb7dc81c}
.intro-copy{font-size:1rem;line-height:1.9;animation:rise-in 1s .7s both}
.heart-gate{min-height:204px;margin-top:11px;animation:rise-in 1s .85s both}
.heart-icon{width:114px;height:107px;filter:drop-shadow(0 0 6px #ff8bdcaa) drop-shadow(0 0 24px #f15ac877);animation:heart-double-beat 2.8s ease-in-out infinite}
.heart-icon path:first-of-type{stroke-dasharray:320;stroke-dashoffset:0;animation:heart-trace 2.4s ease both}
.heart-halo{width:120px;height:120px;top:15px;box-shadow:0 0 45px 12px #f46bbf2e,0 0 90px 40px #a850b011}
.gate-orbit{position:absolute;top:1px;width:145px;height:145px;border-radius:50%;border:1px solid #ffc5e72a;pointer-events:none;transform:rotateX(67deg) rotateZ(-30deg);animation:gate-orbit 10s linear infinite}
.gate-orbit:before{content:"";position:absolute;top:16px;left:17px;width:6px;height:6px;border-radius:50%;background:#ffc2ed;box-shadow:0 0 16px #ff8edc}
.gate-orbit-two{width:171px;height:171px;top:-12px;border-color:#bc9af52b;animation-duration:13s;animation-direction:reverse}
.gate-orbit-two:before{background:#c5bbff;box-shadow:0 0 16px #b5a1ff}
.heart-gate:hover .heart-icon{filter:drop-shadow(0 0 13px #ffb3e9) drop-shadow(0 0 32px #f57ddd99)}
.gate-label{font-weight:600;font-size:1rem;margin-top:24px;z-index:1;text-shadow:0 0 20px #ff71cb44}
.charge-track{width:165px;height:3px;bottom:7px;z-index:1}.charging .gate-orbit{animation-duration:1s}.charging .heart-icon{animation:heart-double-beat .7s ease-in-out infinite}.charging .intro-card{animation:charge-lift 1.7s ease-in both}.charging .charge-track span{transition-duration:1.9s}.charging .portal-orbits{animation-duration:10s}
.intro-foot{font-size:.8rem;color:#ccb0d3;animation:rise-in 1s 1.05s both}
.card-sparkles{position:absolute;inset:0;pointer-events:none}.card-sparkles span{position:absolute;color:#e6bfff;font-size:1.35rem;animation:star-breathe 3.6s ease-in-out infinite}.card-sparkles span:nth-child(1){left:9%;top:17%}.card-sparkles span:nth-child(2){right:7%;top:29%;animation-delay:-1.3s}.card-sparkles span:nth-child(3){left:12%;bottom:25%;font-size:.9rem;animation-delay:-2s}.card-sparkles span:nth-child(4){right:12%;bottom:15%;animation-delay:-.6s}
.intro-cat{position:absolute;bottom:-30px;left:-99px;width:155px;height:155px;z-index:4;animation:cat-entrance 1.1s 1.3s both}
.cat-character{object-fit:contain;filter:drop-shadow(0 0 18px #c36bd849);transform-origin:50% 85%;animation:cat-bob 4.2s ease-in-out infinite}
.intro-cat img{width:155px;height:155px}.mini-speech{position:absolute;top:-50px;left:-3px;border:1px solid #ffcbe689;background:linear-gradient(135deg,#fff3fb,#eedcff);color:#744672;padding:12px 15px;font-size:.85rem;font-weight:600;line-height:1.6;white-space:nowrap;border-radius:20px 20px 20px 5px;box-shadow:0 4px 28px #de84e137;animation:bubble-bob 4.2s -.4s ease-in-out infinite}.mini-speech span{color:#d861a7}.intro-bottom{font-family:Quicksand,sans-serif;font-style:normal;font-size:.8rem;letter-spacing:.05em;color:#bc9ece;animation:rise-in 1.2s 1.4s both}
.intro.is-leaving{transform:translateZ(160px) scale(1.32);filter:blur(8px);transition:opacity .9s,transform 1.4s cubic-bezier(.4,0,.2,1),filter 1.1s}
.scene-header{padding-top:max(28px,env(safe-area-inset-top))}.scene-header h2{font:600 3.5rem/1.2 Quicksand,sans-serif;letter-spacing:-.025em;background:linear-gradient(110deg,#fff1fc,#fca9dc,#ceb5ff,#fff1fc);background-size:250%;background-clip:text;-webkit-background-clip:text;color:transparent;animation:gradient-wander 10s ease-in-out infinite}.scene-header h2 span{font-family:Mali;font-size:2.25rem;color:#fcaae1}.scene-header .eyebrow{font:600 .75rem/1.7 Quicksand,sans-serif;letter-spacing:.11em}.scene-header p{font-size:.9rem}.scene-caption{font:500 .8rem Quicksand,sans-serif;letter-spacing:.03em;color:#d0b1da}.visible .scene-header>div{animation:rise-in 1.2s .2s both}.visible .note-button{animation:rise-in 1.2s .5s both,note-breathe 5s 2s ease-in-out infinite}.visible .scene-footer{animation:rise-in 1.2s .8s both}.round-button{font-size:.875rem;border-color:#e7a9e84d;box-shadow:0 0 24px #d76cce0b}.round-button:hover{box-shadow:0 0 24px #d76cce35;transform:translateY(-3px)}.control-bar{border-color:#e9b3ed40;box-shadow:0 0 26px #b965d70d}.control-bar button:hover{transform:translateY(-2px);box-shadow:inset 0 0 20px #e1a0e110}.gesture-hint{font-size:.875rem;color:#d3bddd}.motion-toggle{font-size:.875rem;color:#d0b2dc}.scene-caption{animation:star-breathe 6s infinite}
dialog{width:min(505px,calc(100% - 32px));padding:34px 28px 25px;border-radius:34px;background:linear-gradient(140deg,#38203aee,#1c1233f5 72%);border-color:#efbfe762;box-shadow:0 0 0 6px #ffc3ef04,0 25px 110px #050108ba,0 0 90px #c36dbb25}
dialog[open]{animation:dialog-arrive .65s cubic-bezier(.16,1,.3,1) both}dialog::backdrop{animation:backdrop-arrive .5s ease-out both}
dialog .eyebrow{font:600 .75rem/1.7 Quicksand,sans-serif;letter-spacing:.14em;color:#d8b5dd}
.cat-letter{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;min-height:148px;margin:17px 0 6px}.cat-letter img{position:relative;z-index:1;width:140px;height:140px;filter:drop-shadow(0 0 23px #dc99d550)}
.cat-hello{font-size:.875rem;max-width:165px;line-height:1.8;color:#f1cdea;text-align:left}.cat-hello span{display:block;color:#ffa8dc;font-size:1.5rem;animation:heart-double-beat 3s infinite}
.cat-orbit{position:absolute;width:160px;height:48px;border:1px solid #edbdfb40;border-radius:50%;left:calc(50% - 155px);bottom:2px;transform:rotate(-10deg);box-shadow:0 0 25px #c588e91c;animation:orbit-shimmer 5s infinite}
.letter-speech{position:relative;padding:19px 18px 15px;border-radius:24px;background:linear-gradient(135deg,#fff3fb,#eee2ff);color:#704971;box-shadow:0 8px 35px #dc93d222;animation:bubble-arrive .65s .16s cubic-bezier(.16,1,.3,1) both}
.letter-speech:before{content:"";position:absolute;top:-11px;left:25%;border-bottom:14px solid #fcf0fb;border-left:12px solid transparent;border-right:5px solid transparent}
dialog h2{font-weight:600;color:#934677;font-size:1.5rem;line-height:1.65;margin:0 0 8px}
#letter-body p{font-size:1rem;line-height:1.95;color:#765578;margin:13px 0}#letter-body p:first-child{margin-top:0}#letter-body p:last-child{margin-bottom:0}#letter-body strong{color:#b44f8f;font-weight:600}.speech-line{display:block;animation:speech-reveal .45s var(--delay,0s) both}.is-speaking .cat-letter img{animation:cat-talking .4s ease-in-out infinite alternate}
.letter-return{margin-top:20px;font-weight:600;min-height:48px;background:linear-gradient(100deg,#e592cf28,#a98aeb25);border-color:#e2b1e657;animation:rise-in .7s .5s both}.letter-return:hover{box-shadow:0 0 30px #f4a9dc25;transform:translateY(-2px)}.close-letter{color:#ebc9ea;z-index:3}.close-letter:hover{transform:rotate(90deg)}
.animations-paused .scene-header *,.animations-paused .scene-caption,.animations-paused .cat-character,.animations-paused .cat-orbit,.animations-paused .cat-hello span{animation-play-state:paused!important}
@keyframes orbit-turn{to{transform:rotate(360deg)}}@keyframes aurora-drift{0%{transform:translate(-6%,-8%) rotate(-20deg) scale(.9)}100%{transform:translate(16%,14%) rotate(20deg) scale(1.2)}}
@keyframes card-arrive{from{opacity:0;transform:translateY(35px) rotateX(9deg) scale(.93);filter:blur(7px)}to{opacity:1;transform:translateY(0) rotateX(0) scale(1);filter:blur(0)}}@keyframes card-float{0%,100%{transform:translateY(0) rotateZ(-.25deg)}50%{transform:translateY(-9px) rotateZ(.25deg)}}
@keyframes rise-in{from{opacity:0;transform:translateY(15px);filter:blur(3px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}@keyframes card-sheen{0%,45%{background-position:130% 0}80%,100%{background-position:-50% 0}}@keyframes gradient-wander{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes star-breathe{0%,100%{opacity:.5;transform:scale(.86)}50%{opacity:1;transform:scale(1.14)}}@keyframes heart-double-beat{0%,30%,70%,100%{transform:scale(1)}12%{transform:scale(1.12)}21%{transform:scale(1.025)}40%{transform:scale(1.07)}}@keyframes heart-trace{from{stroke-dashoffset:320}to{stroke-dashoffset:0}}
@keyframes gate-orbit{from{transform:rotateX(65deg) rotateZ(-30deg)}to{transform:rotateX(65deg) rotateZ(330deg)}}@keyframes charge-lift{from{transform:translateY(0) scale(1);box-shadow:0 0 70px #b952e31d}to{transform:translateY(-8px) scale(1.035);box-shadow:0 0 100px #ef91d95c}}
@keyframes cat-entrance{from{opacity:0;transform:translate(-25px,35px) rotate(-12deg)}to{opacity:1;transform:translate(0) rotate(0)}}@keyframes cat-bob{0%,100%{transform:translateY(0) rotate(-3deg) scale(1)}45%{transform:translateY(-8px) rotate(3deg) scale(1.025)}}@keyframes bubble-bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-5px) rotate(1deg)}}
@keyframes portal-flash{0%{opacity:0;transform:scale(.1)}30%{opacity:.72;transform:scale(1.15)}100%{opacity:0;transform:scale(2.6)}}@keyframes note-breathe{0%,100%{box-shadow:0 0 10px #ee97db08}50%{box-shadow:0 0 30px #ee97db29}}
@keyframes dialog-arrive{from{opacity:0;transform:translateY(38px) scale(.84) rotate(-2deg)}to{opacity:1;transform:translateY(0) scale(1) rotate(0)}}@keyframes backdrop-arrive{from{opacity:0}to{opacity:1}}@keyframes bubble-arrive{from{opacity:0;transform:scale(.9) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes speech-reveal{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@keyframes cat-talking{from{transform:translateY(0) rotate(-3deg) scale(1)}to{transform:translateY(-4px) rotate(2deg) scale(1.03)}}@keyframes orbit-shimmer{0%,100%{opacity:.4}50%{opacity:1}}
@media(max-width:760px){.intro-cat{left:-26px;bottom:-37px;width:122px;height:122px}.intro-cat img{width:122px;height:122px}.mini-speech{top:-51px;left:0;font-size:.75rem;padding:9px 11px}.intro-card{margin-bottom:35px}.intro-foot{padding-left:50px}.portal-orbits{width:110vw}.scene-caption{display:none}.scene-header h2{font-size:2.85rem}.scene-header .eyebrow{font-size:.75rem}.scene-header p{font-size:.875rem}.gesture-hint{font-size:.8rem;max-width:310px}.motion-toggle{font-size:.8rem}.control-bar .reset-control{font-size:.875rem}.intro-bottom{font-size:.75rem}}
@media(max-width:420px){.intro{padding:22px}.intro-card{padding:28px 16px 27px}h1{font-size:2rem;margin-top:16px}.intro .eyebrow{font-size:.75rem;letter-spacing:.055em}.heart-gate{min-height:190px}.intro-cat{bottom:-41px;left:-15px;width:104px;height:104px}.intro-cat img{width:104px;height:104px}.mini-speech{font-size:.75rem;left:-3px;top:-51px;padding:8px 10px}.intro-foot{font-size:.75rem;padding-left:45px}.scene-header{padding:23px 19px}.scene-header .eyebrow{letter-spacing:.04em}.note-button{padding:10px 12px}.cat-letter{min-height:126px;gap:5px}.cat-letter img{width:125px;height:125px}.cat-hello{font-size:.8rem;max-width:143px}dialog{padding:30px 19px 22px}.letter-speech{padding:16px 12px}.motion-toggle{right:8px;font-size:.75rem}}
@media(max-height:700px){.intro-card{padding-top:25px;padding-bottom:21px}.intro h1{font-size:2.2rem;line-height:1.4;margin:12px 0 8px}.intro-copy{font-size:.95rem}.heart-gate{min-height:181px;margin-top:0}.intro-cat{width:110px;height:110px;bottom:-32px}.intro-cat img{width:110px;height:110px}.cat-letter{min-height:102px;margin:9px 0}.cat-letter img{width:100px;height:100px}.letter-speech{padding-top:14px;padding-bottom:14px}#letter-body p{margin:9px 0;line-height:1.8}dialog{padding-top:27px}.letter-return{margin-top:15px}}
@media(max-height:560px) and (orientation:landscape){.intro-card{width:510px;padding:19px 26px 16px;margin:0}.intro h1{font-size:1.8rem;line-height:1.4;margin:10px 0 6px}.intro h1 br{display:none}.intro h1 span{margin-left:9px}.intro-copy{font-size:.875rem}.heart-gate{min-height:145px;margin-top:0}.heart-icon{height:70px;width:77px}.gate-orbit{width:96px;height:96px;top:-3px}.gate-orbit-two{width:118px;height:118px;top:-14px}.heart-halo{height:80px;width:80px;top:3px}.gate-label{margin-top:17px;font-size:.9rem}.intro-cat{left:-57px;bottom:-10px}.mini-speech{top:-54px}.intro-foot{font-size:.75rem}.intro-bottom{display:none}.scene-header h2{font-size:2.4rem}.gesture-hint{margin-bottom:9px}.scene-footer{padding-bottom:14px}.cat-letter{min-height:85px}.cat-letter img{height:85px;width:85px}}
@media(prefers-reduced-motion:reduce){.intro.is-leaving{transform:none;filter:none}.aurora{will-change:auto}.speech-line{opacity:1}.opening #portal-flash{display:none}}

/* Animate prepainted layers with transforms/opacity, without live backdrop blur. */
.intro,.round-button,.control-bar,dialog::backdrop{backdrop-filter:none;-webkit-backdrop-filter:none}
.intro{background:#09031250}.round-button,.control-bar{background:#25132be8}
dialog::backdrop{background:#090313d9}
.aurora{filter:none;will-change:transform;contain:strict}
.aurora-one{background:radial-gradient(ellipse,#a3388052 0,#67255823 30%,transparent 69%)}
.aurora-two{background:radial-gradient(ellipse,#7545b85b 0,#402a7029 30%,transparent 69%)}
.intro-card,.cat-character,.portal-orbits,.gate-orbit{will-change:transform}
.intro-card:after{animation:sheen-opacity 9s ease-in-out infinite}
h1 span,.scene-header h2{animation:none}
.intro.is-leaving{filter:none;transition:opacity .9s,transform 1.4s cubic-bezier(.4,0,.2,1)}
.cat-letter[data-pose="rest"] .cat-character{animation:cat-sleep-breathe 5s ease-in-out infinite;transform-origin:50% 70%}
.cat-letter[data-pose="care"] .cat-character{animation:cat-care-rock 4s ease-in-out infinite}
.cat-letter[data-pose="cheer"] .cat-character{animation:cat-cheer-hop 1.7s ease-in-out infinite}
.fps-meter{position:absolute;left:max(15px,env(safe-area-inset-left));bottom:max(15px,env(safe-area-inset-bottom));z-index:10;padding:6px 10px;border:1px solid #cda0de3a;background:#130b21de;border-radius:10px;color:#e4c3f1;font:600 13px/1.4 Quicksand,system-ui,sans-serif;font-variant-numeric:tabular-nums;pointer-events:none;min-width:69px;contain:layout paint}
@keyframes card-arrive{from{opacity:0;transform:translateY(35px) rotateX(9deg) scale(.93)}to{opacity:1;transform:translateY(0) rotateX(0) scale(1)}}
@keyframes rise-in{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
@keyframes charge-lift{from{transform:translateY(0) scale(1)}to{transform:translateY(-8px) scale(1.035)}}
@keyframes note-breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-2px) scale(1.02)}}
@keyframes sheen-opacity{0%,100%{opacity:.2}50%{opacity:1}}
@keyframes cat-sleep-breathe{0%,100%{transform:translateY(1px) scale(1)}50%{transform:translateY(-2px) scale(1.015)}}
@keyframes cat-care-rock{0%,100%{transform:rotate(-2deg)}50%{transform:translateY(-3px) rotate(2deg)}}
@keyframes cat-cheer-hop{0%,55%,100%{transform:translateY(0) rotate(-3deg)}25%{transform:translateY(-13px) rotate(3deg)}}
@media(prefers-reduced-motion:reduce){.intro-card,.cat-character,.portal-orbits,.gate-orbit{will-change:auto}}
.music-toggle{right:auto;left:max(34px,env(safe-area-inset-left))}
.music-toggle.is-playing #music-icon{animation:note-bounce 1.2s ease-in-out infinite}
.easter-toast{position:fixed;top:22%;left:50%;transform:translateX(-50%) translateY(-8px);z-index:12;padding:14px 28px;border-radius:999px;background:#2d1a3be8;border:1px solid #e9b4e64a;color:#ffe4f5;font-size:1.05rem;font-weight:600;white-space:nowrap;max-width:90vw;box-shadow:0 12px 40px #0006;opacity:0;transition:opacity .35s,transform .35s;pointer-events:none}
.easter-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@keyframes note-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media(max-width:600px){.music-toggle{left:13px}}
@media(max-height:640px) and (orientation:landscape){.music-toggle{left:13px}}