@font-face{font-family:Gaegu;src:url('assets/fonts/gaegu-bold-v7.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:Gowun;src:url('assets/fonts/gowun-v11.ttf') format('truetype');font-weight:400;font-display:swap}
:root{--paper:#fffaf0;--ink:#674b40;--pink:#db8f9b;--soft-pink:#f9e3e1;--line:#eadfcf;--muted:#a38b78}
*{box-sizing:border-box}html{background:var(--paper);color:var(--ink);-webkit-tap-highlight-color:transparent}body{margin:0;font-family:Gowun,'Apple SD Gothic Neo',sans-serif;background-image:radial-gradient(#c5ac8a25 .75px,transparent .75px);background-size:19px 19px}button{font:inherit;color:inherit;cursor:pointer;-webkit-user-select:none;user-select:none}button:focus-visible{outline:3px solid #a5b99c;outline-offset:5px}button:disabled{opacity:.4;cursor:default}button,svg,img{-webkit-touch-callout:none}button{touch-action:manipulation}.svg-defs{position:absolute;width:0;height:0;overflow:hidden}.page{max-width:1000px;margin:auto;min-height:100svh;display:flex;flex-direction:column;padding:0 max(22px,env(safe-area-inset-right)) 0 max(22px,env(safe-area-inset-left))}.topbar{height:82px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);gap:12px}.brand{font-size:13px;letter-spacing:.3px;display:flex;align-items:center;gap:8px;white-space:nowrap}.brand-flower{color:var(--pink);font-size:26px;line-height:1}.sound-button{display:flex;gap:7px;align-items:center;border:1px solid var(--line);background:#fffaf0b3;border-radius:30px;padding:10px 13px;font-size:11px;white-space:nowrap}.sound-button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.sound-button:not(.enabled) .sound-waves{display:none}.sound-button.enabled .mute-line{display:none}.sound-button.enabled{background:#f0f2e5;border-color:#d8dec4}main{flex:1;display:flex;flex-direction:column;align-items:center}.greeting{position:relative;text-align:center;padding-top:40px;width:100%;max-width:650px}.eyebrow{font-family:Gowun,sans-serif;font-size:10px;letter-spacing:2.4px;margin:0 0 16px;color:var(--muted)}h1{font-family:Gaegu,cursive;font-size:66px;line-height:1.03;letter-spacing:-3.4px;font-weight:700;margin:0;color:var(--ink)}h1>span:first-child{font-size:.85em}.title-heart{display:inline-block;transform:rotate(12deg);color:var(--pink);font-size:.82em;margin-left:4px}.subtitle{font-size:14px;margin:15px 0 0;color:#9d8271}.doodle{position:absolute;pointer-events:none}.doodle-star{font-family:serif;font-size:50px;color:#ceb16d;top:94px;left:12%;transform:rotate(-12deg)}.doodle-ribbon{width:54px;height:42px;color:#d9a0a8;top:67px;right:9%;transform:rotate(16deg)}.playground{position:relative;flex:1;width:min(100%,760px);min-height:310px;max-height:460px;isolation:isolate;margin-top:4px}.party-halo{position:absolute;left:50%;top:51%;transform:translate(-50%,-50%);width:min(100%,430px);aspect-ratio:1;background:radial-gradient(ellipse,#fce9da8c 0,#fbeedb50 40%,transparent 68%);pointer-events:none;z-index:-1}.floor{position:absolute;left:50%;top:67%;width:72%;height:22%;transform:translate(-50%,-50%);border:1px dashed #d8cbb34d;border-radius:50%;background:#f6ecd930;z-index:-1}.cake{position:absolute;left:50%;top:51%;transform:translate(-50%,-50%);width:280px;padding:0;border:0;background:transparent;z-index:160;transition:filter .25s}.cake:hover{filter:brightness(1.025)}.cake img{width:100%;height:auto;display:block;pointer-events:none;user-select:none;filter:drop-shadow(0 12px 9px #8e684512)}.cake-caption{position:absolute;top:100%;left:50%;transform:translateX(-50%) rotate(-3deg);font-family:Gaegu,cursive;color:#b49a85;font-size:18px;white-space:nowrap;margin-top:8px}.flame{position:absolute;width:11px;height:19px;border-radius:75% 25% 60% 40%;background:#ffc15e;left:49.7%;top:3%;transform-origin:center bottom;box-shadow:0 0 18px #ffd05f95;animation:flicker .8s ease-in-out infinite alternate}.flame:after{content:'';position:absolute;width:5px;height:10px;background:#fff0a1;left:4px;bottom:1px;border-radius:60% 25% 60% 40%}.cake.blown .flame{opacity:0;animation:none}.scatter{position:absolute;pointer-events:none;color:#c1cba5;font-family:Georgia,serif}.scatter-a{left:19%;top:35%;font-size:23px;transform:rotate(-10deg)}.scatter-b{right:15%;top:49%;font-size:30px;color:#e3b1b6;transform:rotate(15deg)}.scatter-c{left:28%;top:77%;font-size:23px;color:#d9bf79}
.pet{position:absolute;top:0;left:0;width:78px;height:110px;padding:0;border:0;background:none;touch-action:none;cursor:grab;will-change:transform;transform-origin:center bottom;overflow:visible}.pet:focus-visible{border-radius:40%;outline-offset:3px}.pet-shadow{position:absolute;left:22%;bottom:0;width:65%;height:9px;background:#c9ad8a38;border-radius:50%;transition:transform .15s,opacity .15s}.pet-art{display:block;width:100%;height:100%;overflow:visible;transform-origin:50% 95%;filter:drop-shadow(0 2px 0 #fffaf03d)}.pet.walking .pet-art{animation:waddle .38s ease-in-out infinite alternate}.pet.resting .pet-art{animation:breathe 2s ease-in-out infinite}.pet.held{cursor:grabbing;z-index:1000!important}.pet.held .pet-art{animation:dangle .65s ease-in-out infinite alternate;filter:drop-shadow(0 14px 8px #94794e20)}.pet.held .pet-shadow{transform:scale(.65) translateY(15px);opacity:.3}.pet.landing .pet-art{animation:land .4s ease-out}.pet.speaking .pet-art{animation:happy .45s ease-in-out infinite alternate}.speech{position:absolute;left:50%;bottom:103%;transform:translateX(-50%) rotate(-5deg);background:#fffdf7;border:1.5px solid #dcc8af;border-radius:45% 45% 40% 40%;padding:8px 12px;font-family:Gaegu,cursive;font-size:21px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s;box-shadow:0 3px 8px #76522c06}.speech:after{content:'';position:absolute;width:7px;height:7px;border-right:1.5px solid #dcc8af;border-bottom:1.5px solid #dcc8af;background:#fffdf7;bottom:-5px;left:43%;transform:rotate(45deg)}.speaking .speech,.held .speech{opacity:1}
.controls{position:relative;z-index:500;text-align:center;width:100%;padding-top:13px}.start-button{display:inline-flex;gap:12px;align-items:center;justify-content:center;background:#f2e9cf;border:1px solid #e6d7ae;border-radius:25px;font-size:12px;padding:10px 20px;margin-bottom:16px;box-shadow:0 3px 0 #e6d7ae55}.start-button span{color:#bd9d4a;font-size:17px}.start-button[hidden]{display:none}.pet-controls{display:flex;align-items:center;justify-content:center;gap:12px}.add-button{display:flex;align-items:center;justify-content:center;gap:10px;background:#f6dcdb;border:1.5px solid #dfb8b6;border-radius:16px;height:54px;padding:0 21px;box-shadow:0 4px 0 #e6c6c133;transition:transform .15s,background .15s;font-size:15px}.add-button:hover{background:#f4d0d1}.add-button:active{transform:translateY(3px)}.add-pet-icon{width:23px;height:34px}.plus{margin-left:6px;color:#b88583;font-size:23px}.round-button{width:42px;height:42px;background:var(--paper);border:1px solid var(--line);border-radius:50%;font-family:Arial,sans-serif;font-size:22px;display:grid;place-items:center}.round-button[aria-pressed=true]{background:#eee9dc}#pauseIcon{font-size:17px;letter-spacing:-3px;padding-right:3px}.guest-count{font-size:11px;color:#ad9785;margin:14px 0 0;letter-spacing:.4px}.guest-count>span:first-child{color:#8e7764;font-weight:bold}.tiny-heart{color:#d7a5a9;padding-left:6px;font-size:10px}.instructions{display:flex;align-items:center;justify-content:center;gap:8px;color:#9f8a78;font-size:11px;margin:20px 0 0;white-space:nowrap}.instructions i{font-style:normal;color:#cfbdab}footer{display:flex;justify-content:center;align-items:center;gap:14px;color:#c1ae96;font-family:Georgia,serif;font-size:8px;letter-spacing:2.2px;padding:27px 0 max(22px,env(safe-area-inset-bottom));margin-top:auto}.footer-flower{color:#d9b9ae;font-size:16px;line-height:1}.toast{position:fixed;left:50%;bottom:max(24px,env(safe-area-inset-bottom));transform:translate(-50%,12px);max-width:calc(100% - 32px);background:#70584aee;color:#fff9ee;border-radius:30px;padding:12px 20px;font-size:12px;text-align:center;white-space:nowrap;opacity:0;pointer-events:none;z-index:2000;transition:opacity .2s,transform .2s}.toast.visible{opacity:1;transform:translate(-50%,0)}dialog{position:fixed;max-width:calc(100vw - 38px);width:340px;border:1.5px solid #e4c7b4;border-radius:24px;padding:35px 22px 27px;text-align:center;background:var(--paper);color:var(--ink);box-shadow:0 18px 80px #7f55492b}dialog::backdrop{background:#6d51413b;backdrop-filter:blur(4px)}dialog>img{width:100px;height:100px;object-fit:contain;margin:0 0 20px}dialog .eyebrow{font-size:9px;letter-spacing:1.7px}dialog h2{font-family:Gaegu,cursive;font-size:34px;line-height:1.1;margin:10px 0 18px}dialog p:not(.eyebrow){font-size:13px;line-height:1.9}.dialog-close{position:absolute;right:12px;top:8px;width:36px;height:36px;font-size:26px;border:0;background:transparent;color:#b69a83}.wish-done{background:var(--soft-pink);border:1px solid #dfb8b6;border-radius:12px;padding:13px 20px;font-size:13px;margin-top:15px}#confetti{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:1500}.confetti-piece{position:absolute;width:7px;height:12px;left:50%;top:48%;border-radius:2px;animation:confetti 2.2s ease-out forwards}
@keyframes waddle{from{transform:rotate(-4deg) translateY(-1px)}to{transform:rotate(4deg) translateY(-4px)}}@keyframes step{from{transform:translateY(-3px) rotate(12deg)}to{transform:translateY(1px) rotate(-9deg)}}@keyframes arm{from{transform:rotate(-15deg)}to{transform:rotate(15deg)}}@keyframes ear-wiggle{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}@keyframes breathe{50%{transform:scaleY(.975)}}@keyframes dangle{from{transform:translateY(-16px) rotate(-8deg)}to{transform:translateY(-16px) rotate(8deg)}}@keyframes happy{to{transform:translateY(-7px) rotate(4deg)}}@keyframes land{0%{transform:translateY(-16px)}60%{transform:scaleY(.85) scaleX(1.12)}100%{transform:none}}@keyframes flicker{from{transform:rotate(-7deg) scale(.92)}to{transform:rotate(8deg) scale(1.06)}}@keyframes confetti{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--cx),var(--cy)) rotate(var(--cr))}}
@media(min-width:700px){.page{padding-inline:48px}.greeting{padding-top:42px}h1{font-size:82px}.playground{min-height:335px}.cake{width:315px}.doodle-star{left:7%}.doodle-ribbon{right:7%}.pet{width:88px;height:125px}.instructions{font-size:12px}footer{padding-top:30px}}
@media(max-width:420px){.topbar{height:68px}.brand{font-size:11px;gap:6px}.brand-flower{font-size:22px}.sound-button{font-size:10px;padding:9px 10px}.greeting{padding-top:31px}.eyebrow{font-size:8px;letter-spacing:1.9px;margin-bottom:14px}h1{font-size:60px}.subtitle{font-size:12px;margin-top:12px}.doodle-star{font-size:36px;left:1%;top:102px}.doodle-ribbon{width:42px;right:0;top:51px}.cake{width:250px}.playground{min-height:290px}.scatter-a{left:5%}.scatter-b{right:2%}.instructions{font-size:10px;gap:7px}.add-button{padding:0 16px;font-size:13px}.pet-controls{gap:10px}footer{font-size:7px;letter-spacing:1.8px;padding-top:23px}.pet{width:70px;height:99px}.cake-caption{font-size:17px}}
@media(max-height:740px) and (max-width:699px){.greeting{padding-top:20px}h1{font-size:52px}.eyebrow{margin-bottom:9px}.subtitle{margin-top:9px}.playground{min-height:240px}.cake{width:215px}.controls{padding-top:5px}.start-button{margin-bottom:12px;padding:7px 16px}.instructions{margin-top:15px}footer{padding-top:19px;padding-bottom:max(16px,env(safe-area-inset-bottom))}.cake-caption{margin-top:3px}.guest-count{margin-top:12px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
@media(max-width:350px){.pet-controls{gap:8px}.round-button{width:32px;height:32px;font-size:19px}.add-button{font-size:11px;padding:0 11px;gap:6px}.add-button>span{white-space:nowrap}.add-pet-icon{width:18px}.plus{font-size:20px;margin-left:0}.instructions{font-size:9px;gap:5px}.brand{font-size:10px}.topbar{gap:6px}}

.pet-facing{display:block;position:relative;width:100%;height:100%;transform-origin:50% 50%}
.pet-sprite{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}
.pet[data-facing=left] .pet-facing{transform:scaleX(-1)}
.pet.walking .pet-art,.pet.walking.speaking .pet-art{animation:intact-walk var(--stride,.43s) ease-in-out infinite}
.pet.speaking:not(.walking):not(.held) .pet-art{animation:intact-chat .55s ease-in-out infinite alternate}
.pet.held.speaking .pet-art{animation:dangle .65s ease-in-out infinite alternate}
.pet.walking .pet-shadow{animation:walk-shadow var(--stride,.43s) ease-in-out infinite}
.pet.walking:before,.pet.walking:after{content:'';position:absolute;bottom:-2px;width:6px;height:3px;border-radius:50%;background:#bea783;opacity:0;pointer-events:none;animation:footprint var(--stride,.43s) linear infinite}
.pet.walking:before{left:17px}.pet.walking:after{left:30px;animation-delay:calc(var(--stride,.43s) / -2)}
.pet[data-facing=left]:before{left:auto;right:17px}.pet[data-facing=left]:after{left:auto;right:30px}
.add-pet-icon{object-fit:contain;pointer-events:none}
@keyframes intact-walk{0%,100%{transform:translateY(0) rotate(-2.5deg) scale(1.015,.99)}25%{transform:translateY(-2.5px) rotate(0) scale(.995,1.005)}50%{transform:translateY(0) rotate(2.5deg) scale(1.015,.99)}75%{transform:translateY(-2.5px) rotate(0) scale(.995,1.005)}}
@keyframes intact-chat{from{transform:translateY(0) rotate(-1deg)}to{transform:translateY(-2px) rotate(1deg)}}
@keyframes walk-shadow{0%,50%,100%{transform:scaleX(1)}25%,75%{transform:scaleX(.88)}}
@keyframes footprint{0%{opacity:0;transform:translateX(0)}20%{opacity:.18}75%,100%{opacity:0;transform:translateX(-5px)}}

.music-card{width:min(100%,356px);margin:30px auto 0;padding:14px 0 0;border-top:1px solid var(--line);text-align:center}.music-card p{font-size:12px;color:var(--muted);margin:0 0 12px}.music-card iframe{display:block;width:100%;min-width:200px;height:200px;border:0;border-radius:12px}.music-card>a{display:inline-block;margin-top:10px;font-size:10px;color:var(--muted);text-decoration:none}

.subtitle{line-height:1.75}.subtitle-signature{display:inline-block;margin-top:2px;font-size:.9em}