/* Each shot owns its scenery. The crescent is a single open contour. */
#intro-view .intro-moon{background:none!important;border:0!important;border-radius:0;overflow:visible;color:var(--paper)}
#intro-view .intro-moon:after{display:none!important}
.intro-moon svg{width:100%;height:100%;overflow:visible}
#intro-view .intro-clock{opacity:0;visibility:hidden;animation:none}
#intro-view[data-scene=ready] .moon-orbit{transform:rotate(25deg)}
#intro-view[data-scene=ready] .intro-moon{transform:rotate(-25deg)}
#intro-view[data-scene=legend] .moon-orbit{animation:quiet-moon-rise var(--scene-duration) linear forwards}
#intro-view[data-scene=legend] .intro-moon{animation:quiet-moon-counter var(--scene-duration) linear forwards!important}
#intro-view[data-scene=legend] .intro-subtitles{bottom:10%;font-size:clamp(18px,4.8vw,24px);line-height:1.65}
#intro-view[data-scene=legend] .will-sleep,#intro-view[data-scene=legend] .intro-constellation>i{animation-delay:calc(.4s + var(--night-beat)*.55s);animation-duration:.6s}
#intro-view[data-scene=chant] .intro-city,#intro-view[data-scene=chant] .moon-orbit,#intro-view[data-scene=chant] .intro-horizon,#intro-view[data-scene=chant] .intro-constellation{display:none}
#intro-view[data-scene=chant] .intro-world{opacity:1;filter:none;transform:none;animation:none}
#intro-view[data-scene=chant] .intro-subtitles{inset:0 7%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;transform:none;text-align:center}
#intro-view[data-scene=chant] .intro-line.typed-line{font-size:clamp(19px,4.9vw,27px);min-height:2em}
#intro-view[data-scene=chant] .spell-question{font-size:46px;letter-spacing:.1em}
.spell-symbols{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--pale);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;display:none;overflow:visible}
#intro-view[data-scene=chant] .spell-symbols{display:block}
.spell-symbols g{transform-box:fill-box;transform-origin:center;animation:rune-arrive 1.05s var(--rune-delay) var(--ease) both,rune-drift 3s calc(var(--rune-delay) + 1s) ease-in-out infinite alternate}
.spell-symbols path{stroke-dasharray:200;animation:rune-draw 1.1s var(--rune-delay) ease-out both}
#intro-view[data-scene=blur] .intro-city{opacity:1;display:flex}
#intro-view[data-scene=blur] .moon-orbit{opacity:.85;display:block;transform:rotate(7deg)}
#intro-view[data-scene=blur] .intro-moon{transform:rotate(-7deg);opacity:1}
#intro-view[data-scene=blur] .night-window{opacity:.25}
#intro-view[data-scene=blur] .intro-constellation{opacity:.8}
#intro-view[data-scene=blur] .intro-constellation>i{opacity:.8}
#intro-view[data-scene=blur] .intro-world{animation:fall-asleep 5.2s ease-in both;filter:none}
#intro-view[data-scene=blur] .intro-subtitles{left:5%;right:5%;bottom:16%;animation:none;transform:none;font-size:clamp(20px,5.1vw,30px)}
#intro-view[data-scene=blur] .intro-line{letter-spacing:0}
.consciousness-line{animation:blur-caption 2.2s ease-out both!important}
.sleep-caption{min-height:2em;margin-top:15px}
#intro-view[data-scene=rewind] .intro-city,#intro-view[data-scene=rewind] .moon-orbit,#intro-view[data-scene=rewind] .intro-horizon,#intro-view[data-scene=rewind] .intro-constellation,#intro-view[data-scene=rewind] .intro-vignette{display:none}
#intro-view[data-scene=rewind] .intro-clock{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);animation:clock-focus .7s var(--ease) both;width:min(88vw,590px)}
#intro-view[data-scene=rewind] .intro-subtitles{display:none}
#intro-view[data-scene=rewind] .intro-world{animation:none;opacity:1;filter:none;transform:none}
.clock-hour,.clock-minute{stroke-width:1.5;stroke-linejoin:round}
.clock-hour .hand-solid{fill:var(--pale);stroke:none;fill-opacity:.8}
.clock-minute .hand-solid{fill:var(--paper);stroke:none;fill-opacity:.75}
.clock-hour circle{fill:var(--blue);stroke:var(--paper)}
.clock-minute>path:last-child{fill:var(--blue);stroke:var(--paper)}
.clock-center{fill:var(--flame);stroke:none}
#intro-view[data-scene=rewind] .clock-hour{animation:reverse-hour 3.6s cubic-bezier(.35,.02,.25,1) both}
#intro-view[data-scene=rewind] .clock-minute{animation:reverse-minute 3.6s cubic-bezier(.35,.02,.25,1) both}
.sleep-letters{display:flex;align-items:baseline;justify-content:center;gap:9px;letter-spacing:0;font:400 37px Manrope,'Birthday Sans',sans-serif}
.sleep-letter{display:block;transform-origin:50% 95%;animation:sleep-letter-in .16s var(--appear-delay) both,single-sleep-hop var(--hop-duration) var(--hop-delay) cubic-bezier(.3,.05,.35,1) both}
.sleep-letter:last-child{animation:sleep-letter-in .16s var(--appear-delay) both,single-sleep-hop var(--hop-duration) var(--hop-delay) cubic-bezier(.3,.05,.35,1) both,sleep-f-tip .55s 3260ms var(--ease) forwards}
.morning-world{display:none;position:absolute;inset:0;overflow:hidden;pointer-events:none}
#intro-view[data-scene=wake] .morning-world,#intro-view[data-scene=date] .morning-world{display:block}
#intro-view[data-scene=wake] .moon-orbit,#intro-view[data-scene=date] .moon-orbit{display:none}
.morning-sun{position:absolute;width:142px;height:142px;left:calc(69% - 71px);top:19%;border-radius:50%;background:#F1C99B;animation:morning-sunrise 2.6s var(--ease) both}
.morning-sun-rays{position:absolute;inset:-30%;width:160%;height:160%;overflow:visible;fill:none;stroke:#D6A568;stroke-width:1.4;stroke-linecap:round;animation:morning-ray-turn 6s ease-out both}
.morning-sun-rays path{stroke-dasharray:12;animation:morning-ray-open 1.5s .45s ease-out both}
.morning-rays{position:absolute;width:160%;height:160%;left:-30%;top:-40%;background:conic-gradient(from 143deg at 63% 39%,transparent 0deg 5deg,#F1C99B32 5deg 13deg,transparent 13deg 23deg,#F1C99B22 23deg 35deg,transparent 35deg 360deg);animation:morning-light 6s ease-out both;transform-origin:63% 39%}
.morning-clouds,.morning-birds{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.morning-clouds{fill:#DCE7F8;opacity:.55}
.cloud-one{animation:morning-cloud-drift 6s ease-out both}.cloud-two{animation:morning-cloud-drift 6s -.7s ease-out reverse both}
.morning-birds{stroke:var(--blue);stroke-width:1.6;stroke-linecap:round;fill:none;opacity:.75;animation:none}
.bird-flight{animation:morning-bird-flight 5.8s linear both}.bird-flight-2{animation-duration:6.2s;animation-delay:.2s}.bird-flight-3{animation-duration:5.4s;animation-delay:.55s}
.bird-wing{transform-box:fill-box;animation:morning-wing .65s ease-in-out infinite alternate}.wing-left{transform-origin:100% 100%}.wing-right{transform-origin:0 100%;animation-direction:alternate-reverse}.bird-flight-2 .bird-wing{animation-delay:-.25s}.bird-flight-3 .bird-wing{animation-delay:-.45s}
.morning-horizon{position:absolute;left:-15%;bottom:19%;width:130%;height:12%;border-top:1px solid #658CF344;border-radius:50%;transform:rotate(-9deg);animation:morning-ground 2.5s var(--ease) both}
#intro-view[data-scene=wake] .intro-subtitles{font-size:clamp(40px,11vw,75px);padding-top:12%;z-index:2}
#intro-view[data-scene=date] .morning-world{opacity:.85;transition:opacity .6s}
@keyframes quiet-moon-rise{from{transform:rotate(25deg)}to{transform:rotate(7deg)}}
@keyframes quiet-moon-counter{from{transform:rotate(-25deg)}to{transform:rotate(-7deg)}}
@keyframes rune-arrive{from{opacity:0;scale:.5;rotate:-18deg}to{opacity:.6;scale:1;rotate:0deg}}
@keyframes rune-drift{from{translate:0 0;opacity:.4}to{translate:0 -12px;opacity:.8}}
@keyframes rune-draw{from{stroke-dashoffset:200}to{stroke-dashoffset:0}}
@keyframes fall-asleep{0%{opacity:0;filter:blur(0);transform:scale(1)}12%{opacity:1;filter:blur(0)}55%{opacity:.7;filter:blur(4px)}100%{opacity:.05;filter:blur(14px);transform:scale(1.09)}}
@keyframes blur-caption{0%{opacity:0;translate:0 8px}20%,85%{opacity:1;translate:0 0}100%{opacity:.35}}
@keyframes clock-focus{from{opacity:0;scale:.82;filter:blur(4px)}to{opacity:1;scale:1;filter:blur(0)}}
@keyframes sleep-letter-in{from{opacity:0}to{opacity:1}}
@keyframes single-sleep-hop{0%,100%{translate:0 0;scale:1 1}20%{translate:0 2px;scale:1.12 .83}50%{translate:0 -25px;scale:.94 1.05}83%{translate:0 0;scale:1.1 .88}}
@keyframes sleep-f-tip{0%{rotate:0deg;translate:0 0}65%{rotate:26deg;translate:4px 0}82%{rotate:17deg;translate:2px 0}100%{rotate:21deg;translate:3px 0}}
@keyframes morning-sunrise{from{translate:-12px 110px;scale:.72;opacity:0;background:#E8AC7A}30%{opacity:1}to{translate:0 0;scale:1;opacity:1;background:#F1C99B}}
@keyframes morning-ray-open{from{stroke-dashoffset:12;opacity:0}to{stroke-dashoffset:0;opacity:.65}}
@keyframes morning-ray-turn{from{rotate:-15deg;scale:.85}to{rotate:10deg;scale:1}}
@keyframes morning-light{0%{opacity:0;rotate:-11deg;scaleX:.65}20%{opacity:.7}100%{opacity:1;rotate:3deg;scaleX:1.1}}
@keyframes morning-cloud-drift{from{translate:-35px 8px;opacity:0}22%{opacity:1}to{translate:45px -6px;opacity:.75}}
@keyframes morning-bird-flight{0%{translate:-130px 24px;opacity:0}12%,85%{opacity:1}100%{translate:340px -38px;opacity:0}}
@keyframes morning-wing{from{rotate:-16deg;scale:1 .65}to{rotate:15deg;scale:1 1.12}}
@keyframes morning-ground{from{opacity:0;translate:0 18px;scale:.8 1}to{opacity:1;translate:0 0;scale:1}}

/* Eight ingredients share one working surface; no scattered block puzzle. */
.game-field{flex-direction:column;isolation:isolate;overflow:hidden}
.game-field>svg.builder-cake{width:100%;height:0;flex:1;max-height:none;min-height:0;transform:none!important;overflow:visible;color:var(--pale)}
.builder-cake .cake-part{opacity:0;pointer-events:none}
.builder-cake .cake-part.part-added{opacity:1;animation:ingredient-settle .6s var(--ease) both;transform-box:fill-box;transform-origin:center bottom}
.builder-cake .cake-orbit{opacity:.25}
.builder-cake .part-cream.part-added{animation:cream-cover 1.1s cubic-bezier(.3,.1,.25,1) both}
.builder-cake .part-fruit.part-added{animation:none}
.builder-cake .part-fruit.part-added>g{animation:fruit-drop .6s var(--ease) both;transform-box:fill-box;transform-origin:center bottom}
.builder-cake .fruit-two{animation-delay:.12s!important}.builder-cake .fruit-three{animation-delay:.23s!important}.builder-cake .fruit-four{animation-delay:.34s!important}
.cake-drop-area{position:absolute;inset:0 0 116px;width:100%;height:auto;z-index:1;border:0;background:none;touch-action:none}
.cake-drop-area:focus-visible{outline:1px solid var(--pale);outline-offset:-12px}
.ingredient-tray{width:100%;height:116px;flex:0 0 116px;padding:0 22px 17px;position:relative;z-index:4;color:var(--paper)}
.recipe-progress{display:flex;align-items:center;justify-content:center;gap:7px;height:14px;margin-bottom:12px}
.recipe-progress i{width:15px;height:2px;background:#A9C7FF44;transition:background .3s,scale .3s}
.recipe-progress i.done{background:var(--pale)}.recipe-progress i.current{background:var(--paper);scale:1 1.8}
.ingredient-button{width:100%;height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 15px 0 0;border-top:1px solid #A9C7FF66;touch-action:none;gap:12px;text-align:left}
.ingredient-button>svg:first-child{height:65px;width:80px;flex:0 0 80px;fill:none;stroke:none;overflow:visible;transition:transform .18s var(--ease);pointer-events:none}
.ingredient-button>span{font-size:14px;flex:1;white-space:nowrap}
.ingredient-arrow{width:23px!important;height:23px!important;stroke:var(--paper);fill:none}
.game-field.assembled .ingredient-tray{display:none}.game-field.assembled>svg.builder-cake{transform:scale(1.04)!important;transition:transform .6s var(--ease)}
.puzzle-fire,.candle-flame{transform-origin:422px 160px}
.puzzle-fire{opacity:0;transform:scale(.1)}
.game-field.complete .puzzle-fire{animation:ignite .85s var(--ease) both,flicker 2.1s .85s ease-in-out infinite alternate}
.burnt-wick{stroke-width:5;transform-origin:422px 177px}
.candle-wax path{transform-origin:422px 177px}.candle-wax ellipse{transform-origin:422px 298px}
.plaque-lettering{font-weight:400;letter-spacing:.015em;pointer-events:none}
.ignite-target:focus-visible{outline:none}.ignite-target{opacity:0;width:80px;height:110px}
.blessing-overlay{position:fixed;inset:0;z-index:100;background:#00174599;display:flex;align-items:flex-start;justify-content:center;padding:20px 14px max(14px,env(safe-area-inset-bottom));overflow-y:auto}
.blessing-dialog{margin-top:auto;flex-shrink:0;position:relative;background:var(--paper);color:var(--blue);width:min(100%,430px);padding:40px 25px 25px;animation:writing-in .4s var(--ease) both}
.close-blessing{position:absolute;top:5px;right:6px;width:44px;height:44px;display:grid;place-items:center}
.blessing-dialog label{display:block;font-size:20px;margin-bottom:25px}
.plaque-preview{min-height:102px;width:min(100%,270px);margin:0 auto 24px;background:#203867;color:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;font:400 21px/1.4 'Birthday Sans',sans-serif;padding:8px;border-radius:50% / 8%}
.plaque-preview span{display:block;min-height:1.3em}
.blessing-dialog textarea{width:100%;height:78px;resize:none;border:0;border-bottom:1px solid #002FA766;background:transparent;color:var(--blue);font:400 16px/1.7 'Birthday Sans',sans-serif;border-radius:0;outline-offset:4px;caret-color:var(--blue);padding:8px 0}
.blessing-dialog textarea:focus{outline:1px solid var(--mid)}
.blessing-footer{display:flex;align-items:center;justify-content:space-between;margin-top:13px;gap:20px}
.blessing-footer>span{font:400 12px Manrope,sans-serif;color:var(--ink);font-variant-numeric:tabular-nums}
.blessing-footer>button{display:flex;align-items:center;justify-content:center;gap:30px;font-size:14px;padding:0 15px;min-width:108px;background:var(--blue);color:var(--paper)}
@keyframes ingredient-settle{from{opacity:0;transform:translateY(-58px) scale(.94)}75%{opacity:1;transform:translateY(3px) scale(1.01,.98)}to{opacity:1;transform:none}}
@keyframes cream-cover{from{opacity:1;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
@keyframes fruit-drop{from{opacity:0;transform:translateY(-65px) rotate(-12deg)}75%{opacity:1;transform:translateY(3px) rotate(3deg)}to{opacity:1;transform:none}}
@keyframes writing-in{from{opacity:0;transform:translateY(35px)}to{opacity:1;transform:none}}

/* The cursor sits on the angled shaft. Sparks are short hot streaks. */
.fairy-wand{transform:translate(-50%,-63%) rotate(24deg);transform-origin:50% 63%}
.wand-star{fill:none;stroke:#E7D9B4;stroke-width:2}
.wand-fire{display:none}.wand-sparks{top:17%}
.wand-sparks:before{content:'';position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:#FFF9D9;opacity:0;box-shadow:0 2px 9px 3px #FFAC7080}
.burning .wand-sparks:before{opacity:1;animation:spark-core .12s steps(2,end) infinite}
.wand-sparks i{width:2px;height:9px;border-radius:1px;background:#FFE8B0;transform-origin:center;animation:none!important}
.burning .wand-sparks i{animation:hot-spark var(--spark-time) var(--spark-delay) linear infinite!important}
.burning .wand-sparks i:nth-child(3n){height:3px;width:3px;background:#FFF9D9}
.burning .wand-sparks i:nth-child(5n){background:#FFAC70;height:6px}
@keyframes hot-spark{0%{opacity:0;transform:translate(0,0) rotate(var(--spark-angle)) scale(.3)}8%{opacity:1}60%{opacity:1}100%{opacity:0;transform:translate(var(--sx),var(--sy)) rotate(var(--spark-angle)) scale(.15)}}
@keyframes spark-core{from{scale:.75}to{scale:1.3}}

/* Shallow square box, as supplied in the user's three-stage sketch.
   No opacity/filter on a 3D ancestor: those flatten its planes. */
.present-button{width:320px;height:360px;perspective:1100px}
.present{left:calc(50% - 110px);top:calc(50% - 30px);width:220px;height:70px;transform:rotateX(-32deg) rotateY(-24deg) rotateZ(-6deg);transform-style:preserve-3d;animation:shallow-gift-float 4s ease-in-out infinite}
.gift-base{inset:0;width:220px;height:70px;transform-style:preserve-3d;overflow:visible;opacity:1}
.box-face{inset:auto;left:50%;top:50%;width:220px;height:70px;border:1px solid #A9C7FF99;backface-visibility:visible}
.box-front{transform:translate(-50%,-50%) translateZ(110px);background:#456FF0}
.box-right{transform:translate(-50%,-50%) rotateY(90deg) translateZ(110px);background:#173F9E}
.box-back{transform:translate(-50%,-50%) rotateY(180deg) translateZ(110px);background:#335AC1}
.box-left{transform:translate(-50%,-50%) rotateY(-90deg) translateZ(110px);background:#7497F2}
.box-bottom{width:220px;height:220px;transform:translate(-50%,-50%) rotateX(-90deg) translateZ(35px);background:#335AC1}
.box-inner{position:absolute;left:50%;top:50%;width:216px;height:216px;background:#A9C7FF;transform:translate(-50%,-50%) rotateX(90deg) translateZ(-30px);border:10px solid #94B5FF}
.present-lid{inset:auto;left:0;top:-16px;width:220px;height:24px;transform-style:preserve-3d;opacity:1}
.lid-front,.lid-right,.lid-back,.lid-left{position:absolute;left:50%;top:50%;width:236px;height:24px;backface-visibility:visible;border:1px solid #A9C7FF88;background:#7DA0FA}
.lid-front{transform:translate(-50%,-50%) translateZ(118px)}
.lid-right{transform:translate(-50%,-50%) rotateY(90deg) translateZ(118px);background:#4167CD}
.lid-back{transform:translate(-50%,-50%) rotateY(180deg) translateZ(118px)}
.lid-left{transform:translate(-50%,-50%) rotateY(-90deg) translateZ(118px)}
.lid-top{left:50%;top:50%;width:236px;height:236px;transform:translate(-50%,-50%) rotateX(90deg) translateZ(12px);background:#A2BDFF;border:1px solid #CBDCFF;backface-visibility:visible}
.present .rope{left:96px;width:28px}.lid-top .rope,.lid-front .rope,.lid-right .rope{left:104px}.lid-top .rope-cross{left:0;top:104px;width:236px;height:28px}
.lid-top{transform-style:preserve-3d}
.lid-top .present-bow{left:38px;top:53px;width:160px;height:80px;transform:translateZ(1px);stroke-width:7}
.loose-rope{width:24px;height:190px;left:98px;top:-115px;transform:rotateX(90deg) translateZ(30px);opacity:0}
.tap-ring{top:calc(50% - 32px);z-index:10}
.unwrapping .present{animation:none;transform:rotateX(-32deg) rotateY(-24deg) rotateZ(-6deg)}
.unwrapping .present-lid{animation:sketch-lid-slide 2.2s .9s var(--ease) both;opacity:1;transform-style:preserve-3d}
.unwrapping .gift-base{animation:sketch-box-leave 1.4s 2.5s cubic-bezier(.4,0,.3,1) both;opacity:1;transform-style:preserve-3d}
.unwrapping .loose-left{animation:sketch-ribbon-left 1.3s .05s ease-out both}
.unwrapping .loose-right{animation:sketch-ribbon-right 1.3s .12s ease-out both}
.unwrapping .loose-back{animation:sketch-ribbon-back 1.25s .18s ease-out both}
.unwrapping .loose-front{animation:sketch-ribbon-front 1.3s .23s ease-out both}
.gift-photo{animation:frame-from-shallow-box 1.65s var(--ease) both}
@keyframes shallow-gift-float{0%,100%{transform:translateY(0) rotateX(-32deg) rotateY(-24deg) rotateZ(-6deg)}50%{transform:translateY(-7px) rotateX(-30deg) rotateY(-22deg) rotateZ(-6deg)}}
@keyframes sketch-lid-slide{0%{transform:translate3d(0,0,0)}25%{transform:translate3d(0,-22px,0)}85%,100%{transform:translate3d(195px,-62px,-95px) rotateY(8deg) rotateZ(13deg)}100%{visibility:hidden}}
@keyframes sketch-box-leave{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-240px,210px,80px) rotateZ(-12deg);visibility:hidden}}
@keyframes sketch-ribbon-left{0%{opacity:1;transform:rotateX(90deg) translateZ(30px) rotateZ(0deg)}100%{opacity:0;transform:rotateX(65deg) translate3d(-230px,-30px,140px) rotateZ(-74deg)}}
@keyframes sketch-ribbon-right{0%{opacity:1;transform:rotateX(90deg) translateZ(30px)}100%{opacity:0;transform:rotateX(40deg) translate3d(230px,30px,170px) rotateZ(82deg)}}
@keyframes sketch-ribbon-back{0%{opacity:1;transform:rotateX(90deg) translateZ(30px)}100%{opacity:0;transform:translate3d(30px,-170px,-160px) rotateX(-15deg) rotateZ(20deg)}}
@keyframes sketch-ribbon-front{0%{opacity:1;transform:rotateX(90deg) translateZ(30px)}100%{opacity:0;transform:translate3d(-40px,190px,150px) rotateX(20deg) rotateZ(-25deg)}}
@keyframes frame-from-shallow-box{from{opacity:0;transform:translate(-50%,calc(-50% + 65px)) perspective(900px) rotateX(32deg) rotateZ(-6deg) scale(.62)}35%{opacity:1}to{opacity:1;transform:translate(-50%,-50%) perspective(900px) rotateX(0) rotateZ(-2.5deg) scale(1)}}
@media(min-width:700px){.ingredient-tray{max-width:440px;padding-left:30px;padding-right:30px}.game-field>svg.builder-cake{max-width:760px}.blessing-overlay{align-items:center}.blessing-dialog{margin-block:auto}.birthday-cake{max-height:min(620px,100%)}.morning-sun{width:180px;height:180px;left:calc(66% - 90px)}.spell-symbols{max-width:620px;left:calc(50% - 310px)}}
@media(max-height:700px) and (max-width:699px){.ingredient-tray{height:96px;flex-basis:96px;padding-bottom:6px}.recipe-progress{margin-bottom:4px}.ingredient-button{height:65px}.cake-drop-area{bottom:96px}.blessing-dialog{padding-top:34px;padding-bottom:16px}.plaque-preview{min-height:83px;margin-bottom:15px;font-size:19px}.blessing-dialog label{margin-bottom:18px}.blessing-dialog textarea{height:65px}.morning-sun{width:116px;height:116px;left:calc(69% - 58px)}}
@media(prefers-reduced-motion:reduce){#intro-view[data-scene=legend] .moon-orbit,#intro-view[data-scene=legend] .intro-moon,.spell-symbols g,.spell-symbols path,#intro-view[data-scene=blur] .intro-world,.consciousness-line,.sleep-letter,.sleep-letter:last-child,.morning-sun,.morning-rays,.morning-birds,.builder-cake .cake-part.part-added,.builder-cake .part-fruit.part-added>g,.present,.gift-photo{animation:none!important}.spell-symbols g{opacity:.6}.sleep-letter{opacity:1}.sleep-letter:last-child{rotate:21deg}#intro-view[data-scene=blur] .intro-world{opacity:.4;filter:blur(2px)}.builder-cake .part-cream.part-added{clip-path:none}.burning .wand-sparks i{animation:none!important;opacity:.6;transform:translate(calc(var(--sx)*.4),calc(var(--sy)*.4))}.unwrapping .present-lid,.unwrapping .gift-base{animation-duration:.01s;animation-delay:0s}.gift-photo{transform:translate(-50%,-50%) rotate(-2.5deg)}}

/* Ingredients are staged around the cake in three batches. Arrows demonstrate gestures. */
.game-field>svg.builder-cake{height:100%;flex:1}
.ingredient-orbit{position:absolute;inset:0;pointer-events:none;z-index:5}
.orbit-ingredient{position:absolute;left:var(--item-x);top:var(--item-y);transform:translate(-50%,-50%);width:76px;height:76px;padding:0;display:grid;place-items:center;pointer-events:auto;touch-action:none;isolation:isolate}
.orbit-ingredient>svg{width:76px;height:65px;fill:none;stroke:none;overflow:visible;transition:transform .25s var(--ease);pointer-events:none}
.orbit-ingredient:disabled{opacity:.27;pointer-events:none}.orbit-ingredient.current:not(.dragging){animation:ingredient-float 2.8s ease-in-out infinite}.orbit-ingredient.current:after{content:'';position:absolute;inset:0;border:1px solid #A9C7FF55;border-radius:50%;scale:.9;opacity:0;animation:ingredient-invitation 2.6s ease-out infinite;pointer-events:none}
.orbit-ingredient.dragging{z-index:10}.orbit-ingredient.dragging:after{display:none}.orbit-ingredient.dragging>svg{transition:none;filter:drop-shadow(0 7px 6px #001C6340)}.orbit-ingredient.is-ready>svg{filter:drop-shadow(0 3px 7px #FFE5AB66)}.orbit-ingredient.ingredient-used{opacity:0;pointer-events:none;transition:opacity .2s}
.game-field .gesture-guide{position:absolute;inset:0;width:100%;height:100%;max-height:none;min-height:0;pointer-events:none;z-index:3;overflow:visible;fill:none;stroke:var(--pale);stroke-width:1.2}
.drag-route{stroke-dasharray:3 11;opacity:.38;animation:drag-flow 1.2s linear infinite}.drag-arrow{stroke:var(--paper);stroke-width:1.5;opacity:.65;stroke-linecap:round;stroke-linejoin:round}.drag-destination{stroke:var(--paper);opacity:.55}
.game-field .recipe-progress{position:absolute;left:0;right:0;bottom:16px;margin:0;pointer-events:none;z-index:2}
.game-hint{position:absolute;left:14px;right:14px;bottom:48px;margin:0;text-align:center;font:400 14px/1.6 'Birthday Sans',sans-serif;letter-spacing:.04em;color:var(--paper);z-index:6;pointer-events:none}
.game-field.assembled .recipe-progress{display:none}
.cake-drop-area{inset:auto!important;width:1px!important;height:1px!important;min-height:0!important;clip-path:inset(50%);overflow:hidden}
.builder-cake .part-inserting.part-added{animation:insert-ornament .72s cubic-bezier(.3,.05,.25,1) both}
.sleep-caption{animation:sleep-caption-soften 3.7s 1.5s ease-in both}
.sleep-letter:last-child{animation:sleep-letter-in .2s var(--appear-delay) both,sleep-f-tip .55s 4250ms var(--ease) forwards}
.wand-sparks i{width:3px;height:16px}.burning .wand-sparks i:nth-child(3n){height:5px;width:4px}.burning .wand-sparks i:nth-child(5n){height:12px}.burning .wand-star{fill:#FFE9BB33;stroke:#FFE8B0;stroke-width:1.3}.wand-sparks:before{width:12px;height:12px;left:-6px;top:-6px;box-shadow:0 3px 15px 5px #FFAC7099}
.game-field.igniting .puzzle-fire{opacity:var(--ignite,0);transform:scale(calc(.12 + var(--ignite,0)*.88));transition:transform .12s linear,opacity .12s linear}
.game-field.complete .puzzle-fire{opacity:1;transform:scale(1);animation:flicker 2.1s ease-in-out infinite alternate}
@keyframes ingredient-float{0%,100%{translate:0 0}50%{translate:0 -5px}}
@keyframes ingredient-invitation{0%{opacity:.5;scale:.85}80%,100%{opacity:0;scale:1.25}}
@keyframes drag-flow{from{stroke-dashoffset:28}to{stroke-dashoffset:0}}
@keyframes insert-ornament{0%{opacity:0;transform:translateY(-76px)}35%{opacity:1;transform:translateY(-28px)}72%{transform:translateY(2px)}100%{opacity:1;transform:none}}
@keyframes sleep-caption-soften{0%,32%{filter:blur(0);opacity:1}80%{filter:blur(2px);opacity:.65}100%{filter:blur(5px);opacity:.15}}
@media(max-width:360px){.orbit-ingredient{width:68px;height:70px}.orbit-ingredient>svg{width:68px;height:60px}}
@media(prefers-reduced-motion:reduce){.orbit-ingredient.current,.orbit-ingredient.current:after,.drag-route,.builder-cake .part-inserting.part-added,.sleep-caption,.sleep-letter:last-child{animation:none!important}.sleep-letter:last-child{rotate:21deg}.game-field.igniting .puzzle-fire{transition:none}}

/* Live cream progress is driven only by movement, never by elapsed time. */
.builder-cake .part-cream.cream-working{opacity:1;animation:none!important;clip-path:inset(0 calc((1 - var(--cream-progress,0))*100%) 0 0);transition:none}
.builder-cake .part-cream.part-added{animation:none!important;clip-path:inset(0)!important;opacity:1}
.drag-route{stroke:#FFE0A0;stroke-width:2;stroke-dasharray:5 8;opacity:.82}.drag-arrow{stroke:#FFE0A0;stroke-width:2.3;opacity:1}.drag-destination{stroke:#FFE0A0;stroke-width:2;opacity:1}
#intro-view[data-scene=silence] .intro-city,#intro-view[data-scene=silence] .moon-orbit,#intro-view[data-scene=silence] .intro-horizon,#intro-view[data-scene=silence] .intro-constellation,#intro-view[data-scene=silence] .intro-clock{display:none!important}
#intro-view[data-scene=silence] .intro-world{opacity:0;transition:none!important;animation:none!important}
.consciousness-line{animation:consciousness-soften 5.2s ease-in both!important}
.sleep-letters{display:grid;grid-template-columns:repeat(6,36px);gap:14px;align-items:center;justify-content:center}
.sleep-letter{width:36px;height:48px;line-height:1;display:grid;place-items:center;text-align:center}
.sleep-letter.dot-letter:before{content:'';width:9px;height:9px;border:2px solid currentColor;border-radius:50%;transform:translateY(9px)}
.sleep-letter:last-child{animation:sleep-letter-in .2s var(--appear-delay) both,sleep-f-tip .55s 3800ms var(--ease) forwards}
@keyframes consciousness-soften{0%{opacity:0;filter:blur(0)}15%,25%{opacity:1;filter:blur(0)}65%{opacity:.55;filter:blur(2px)}100%{opacity:.08;filter:blur(5px)}}
@media(max-width:360px){.sleep-letters{grid-template-columns:repeat(6,32px);gap:12px}.sleep-letter{width:32px}}
@media(prefers-reduced-motion:reduce){.consciousness-line{animation:none!important;opacity:.5;filter:blur(1px)}.sleep-letter:last-child{animation:none!important;rotate:21deg}}

.plaque-preview{border-radius:8px}.plaque-preview:after{content:'';position:absolute;left:50%;top:100%;height:19px;width:3px;background:#D1B695;transform:rotate(12deg);transform-origin:top}.plaque-preview{position:relative}
.sleep-letters{position:relative}
.sleep-letter{grid-row:1}
.sleep-letter:nth-child(1){grid-column:1}.sleep-letter:nth-child(2){grid-column:2}.sleep-letter:nth-child(3){grid-column:3}.sleep-letter:nth-child(4){grid-column:4}.sleep-letter:nth-child(5){grid-column:5}.sleep-letter:nth-child(6){grid-column:6}
.sleep-letter:nth-child(6){animation:sleep-letter-in .16s var(--appear-delay) both,sleep-f-tip .3s 3250ms var(--ease) forwards}
.false-dot{position:relative;grid-column:5;grid-row:1;width:36px;height:48px;display:grid;place-items:center;pointer-events:none;animation:sleep-letter-in .16s .62s both}
.false-dot-ring{display:block;width:9px;height:9px;border:2px solid var(--paper);border-radius:50%;transform:translateY(9px);animation:erase-wrong-dot .1s 1.29s forwards}
.false-dot>svg{position:absolute;inset:0;width:36px;height:48px;fill:none;stroke:var(--flame);stroke-width:2;stroke-linecap:round;stroke-dasharray:30;stroke-dashoffset:30;animation:cross-wrong-dot .16s 1.06s forwards,erase-wrong-dot .1s 1.29s forwards}
.dot-shard{position:absolute;left:17px;top:32px;width:3px;height:4px;border:1px solid var(--paper);border-radius:1px;opacity:0;animation:dot-break .38s 1.29s ease-out both}
@keyframes erase-wrong-dot{to{opacity:0}}
@keyframes cross-wrong-dot{to{stroke-dashoffset:0}}
@keyframes dot-break{0%{opacity:1;transform:translate(0,0) scale(1)}70%{opacity:.8}100%{opacity:0;transform:translate(var(--shard-x),var(--shard-y)) rotate(var(--shard-rot)) scale(.3)}}
@media(max-width:360px){.false-dot{width:32px}.false-dot>svg{width:32px}}
@media(prefers-reduced-motion:reduce){.false-dot{animation:none;opacity:0}.sleep-letter:nth-child(6){animation:none!important;rotate:21deg}.dot-shard{animation:none!important}}

@media(max-width:699px){.birthday-watermark{font-size:15vw;top:175px;left:50%;transform:translate(-50%,-50%) rotate(-8deg);opacity:.13;white-space:nowrap;line-height:1;width:max-content}}
@media(max-height:700px) and (max-width:699px){.birthday-watermark{top:155px}}

/* The lyric is read at the visitor's pace after its final credit is typed. */
body.quote-mode{background:var(--paper);color:var(--blue)}
#quote-view #quote-title>span{color:var(--blue)}
#quote-view .lyric-lamp{color:#9A691C}#quote-view .lyric-wild{color:#B8577A}
#quote-view .quote-credit{color:var(--blue);bottom:max(100px,env(safe-area-inset-bottom))}
.quote-continue{position:absolute;left:50%;bottom:max(25px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;gap:25px;min-height:48px;padding:0 14px;font-size:13px;color:var(--blue);animation:continue-hint 2.4s ease-in-out infinite}
.quote-continue svg{width:23px;height:23px}.credit-line{display:inline}
@keyframes continue-hint{0%,100%{opacity:.65;translate:0 0}50%{opacity:1;translate:4px 0}}
@media(prefers-reduced-motion:reduce){.quote-continue{animation:none}}
#quote-view .quote-credit .credit-line{color:var(--blue)}

/* Keep the original monochrome layered motif and layout; only type carries accents. */
#quote-view .quote-decoration i,#quote-view .quote-decoration:after{background:var(--blue)}
#quote-view .lyric-cool{color:#5176C2}#quote-view .lyric-lamp,#quote-view .lyric-wild,#quote-view .lyric-cool{font-size:1.07em;font-weight:500}
@media(max-width:699px){#quote-view{padding:40px 8% 70px;gap:25px}#quote-view .quote-decoration{width:95px}#quote-view #quote-title{font-size:clamp(30px,8.6vw,43px)}}
@media(min-width:700px){#quote-view{grid-template-columns:.75fr 1.25fr;padding:4vh 9% 7vh;gap:8%}#quote-view .quote-decoration{max-width:340px}#quote-view #quote-title{font-size:clamp(31px,4.4vw,66px)}}
@media(min-width:700px) and (max-width:900px){#quote-view{grid-template-columns:.6fr 1.4fr;padding:5vh 8%;gap:7%}#quote-view #quote-title{font-size:clamp(32px,4.9vw,48px)}}
/* A fifth dot waits for two explicit taps before the film continues. */
.interactive-sleep .sleep-letter{position:relative;animation:sleep-entrance .65s var(--appear-delay) both}
.interactive-sleep .f-letter{visibility:hidden;opacity:0;animation:none}
.interactive-sleep .dot-letter:before{content:none}
.sleep-glyph{position:relative;display:grid;place-items:center;width:100%;height:48px;font-style:normal;transform-origin:center bottom}
.glyph-ink{position:absolute;inset:0;display:grid;place-items:center;font-style:normal}
.glyph-dot{width:9px;height:9px;border:2px solid currentColor;border-radius:50%;translate:0 9px}
.paint-ink{color:#7DA6FF;opacity:0}
.sleep-letter.painted .base-ink{visibility:hidden}
.sleep-letter.painted .paint-ink{opacity:1}
.interactive-sleep.ff-playing .dot-letter{opacity:1;animation:none}
.interactive-sleep.ff-playing .f-letter,.interactive-sleep.ff-playing .sleep-letter:nth-child(6){visibility:visible;animation:sleep-entrance .75s var(--appear-delay) both}
.interactive-sleep.ff-playing .sleep-glyph{animation:sleep-wave .96s var(--hop-delay) linear both}
.interactive-sleep.ff-playing .sleep-letter:nth-child(6) .f-glyph{animation:sleep-wave .96s var(--hop-delay) linear both,sleep-f-tip .3s 3.75s var(--ease) forwards}
@keyframes sleep-wave{0%,50%,100%{translate:0 0;scale:1}6.25%{translate:0 -6.89px}12.5%{translate:0 -12.73px}18.75%{translate:0 -16.63px}25%{translate:0 -18px}31.25%{translate:0 -16.63px}37.5%{translate:0 -12.73px}43.75%{translate:0 -6.89px}56.25%{translate:0 6.89px}62.5%{translate:0 12.73px}68.75%{translate:0 16.63px}75%{translate:0 18px}81.25%{translate:0 16.63px}87.5%{translate:0 12.73px}93.75%{translate:0 6.89px}}
.interactive-sleep .false-dot{min-height:48px;padding:0;pointer-events:auto;animation:sleep-entrance .65s 1.12s both;opacity:1;z-index:3}
.loading-dot{position:relative;grid-column:6;grid-row:1;width:36px;height:48px;display:grid;place-items:center;opacity:0;animation:loading-coda .8s 1.7s 2 both}
.loading-dot .false-dot-ring{animation:none}
.interactive-sleep.loading-coda .false-dot{animation:loading-coda .8s 1.5s 2 both}
.interactive-sleep.coda-paused .false-dot{animation:none;opacity:1}
@keyframes loading-coda{0%,100%{opacity:0}18%,58%{opacity:1}78%{opacity:0}}
.interactive-sleep .false-dot:before{content:'';position:absolute;inset:-6px}
.interactive-sleep .false-dot-ring,.interactive-sleep .false-dot>svg,.interactive-sleep .dot-shard{animation:none}
.interactive-sleep .false-dot>svg{stroke-dashoffset:30;opacity:1}
.interactive-sleep .dot-shard{opacity:0}
.interactive-sleep .false-dot.crossing>svg{animation:cross-wrong-dot .68s linear forwards}
.interactive-sleep .false-dot.shattering .false-dot-ring,.interactive-sleep .false-dot.shattering>svg{opacity:0;transition:opacity .08s}
.interactive-sleep .false-dot.shattering .dot-shard{animation:dot-break .48s ease-out both}
.sleep-question{position:fixed;left:54%;top:26%;transform:translate(-50%,-50%) rotate(-14deg);width:64px;height:64px;min-height:64px;font:400 42px/1 Manrope,sans-serif;color:var(--paper);padding:0;pointer-events:auto;animation:question-appear .75s ease-out both;z-index:4}
.sleep-question:focus-visible,.false-dot:focus-visible{outline:1px solid #fff9;outline-offset:4px;border-radius:50%}
.click-cue{position:absolute;left:65%;top:92%;width:38px;height:38px;display:grid;place-items:center;transform:translate(-50%,-10%);pointer-events:none;color:var(--paper);opacity:.75}
.click-cue>i{position:absolute;inset:6px;border:1px solid #ffffff44;border-radius:50%}
.tap-ring>i,.click-cue>i{animation:tap-ripple 2s ease-out infinite}.tap-ring>i:nth-child(2),.click-cue>i:nth-child(2){animation-delay:1s}
.tap-ring>svg,.click-cue>svg{animation:tap-gesture 2s ease-in-out infinite}
@keyframes tap-gesture{0%,100%{translate:0 0;scale:1;opacity:.78}35%{translate:0 -2px;scale:1.045;opacity:1}50%{translate:0 1px;scale:.94;opacity:.85}65%{translate:0 0;scale:1;opacity:1}}
@media(prefers-reduced-motion:reduce){.tap-ring>svg,.click-cue>svg{animation:none}}
.click-cue>svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.3}
.sleep-question .click-cue{rotate:14deg}
.false-dot>.click-cue{display:none;top:95%}.false-dot.is-target>.click-cue{display:grid}
@keyframes sleep-entrance{0%{opacity:0;translate:0 5px;scale:.94}36%{opacity:1;translate:0 -7px;scale:1.02}70%{translate:0 1px;scale:1 .98}100%{opacity:1;translate:0 0;scale:1}}
.tip-particles{position:absolute;inset:0;pointer-events:none;visibility:hidden}
.tip-particles.active{visibility:visible}
.tip-particles>i{position:absolute;left:calc(50% + 4px);top:6px;width:3px;height:3px;border-radius:50%;background:var(--tip-color);opacity:0}
.tip-particles>i:nth-child(3n){width:2px;height:6px;border-radius:2px}
.ff-playing .tip-particles>i{animation:head-tip-spark .6s 3.75s ease-out both}
@keyframes head-tip-spark{0%{opacity:0;transform:translate(0,0) scale(.2)}16%{opacity:1}70%{opacity:.7}100%{opacity:0;transform:translate(var(--tip-x),var(--tip-y)) rotate(60deg) scale(.3)}}
@keyframes question-appear{from{opacity:0;translate:0 7px}to{opacity:1;translate:0 0}}
@keyframes question-tap{0%{opacity:0;scale:.9}24%{opacity:.32}100%{opacity:0;scale:1.35}}
@media(prefers-reduced-motion:reduce){.interactive-sleep .sleep-letter,.interactive-sleep.ff-playing .dot-letter,.interactive-sleep.ff-playing .f-letter,.interactive-sleep.ff-playing .sleep-glyph,.interactive-sleep.ff-playing .paint-ink,.sleep-question,.click-cue>i,.interactive-sleep .false-dot.shattering .dot-shard,.ff-playing .tip-particles>i{animation:none!important}.interactive-sleep .sleep-letter:nth-child(6){rotate:0deg}.interactive-sleep.ff-playing .sleep-letter:nth-child(6) .f-glyph{rotate:21deg}.interactive-sleep.ff-playing .paint-ink{opacity:1}.interactive-sleep .false-dot.crossing>svg{animation-duration:.1s}.interactive-sleep .false-dot.shattering .dot-shard{opacity:0}.tip-particles{display:none}}
@media(prefers-reduced-motion:reduce){.interactive-sleep.ff-playing .f-letter{opacity:1}}
.celebrated #birthday-title{font-size:clamp(25px,7.6vw,44px);white-space:nowrap;min-height:1.3em}
.birthday-line{display:inline}
.lettering-measure{visibility:hidden;display:block}
.lettering-measure>span{display:block;font-size:.7em;line-height:1.25;text-align:center}
.birthday-ink{position:absolute;inset:-.35em 0 auto;width:100%;height:2.5em;overflow:visible}
@media(min-width:700px){.celebrated #birthday-title{font-size:clamp(24px,3.4vw,44px)}}
.lettering-stroke{fill:currentColor;fill-opacity:0;stroke:currentColor;stroke-width:.9;stroke-linecap:round;stroke-linejoin:round;transition:fill-opacity .12s}
.celebrated .birthday-watermark{visibility:hidden}
.celebrated.ink-ready .birthday-watermark{visibility:visible}
.birthday-quill{position:absolute;width:38px;height:57px;z-index:3;overflow:visible;pointer-events:none;transform:translate(-4px,-53px) rotate(12deg);transform-origin:4px 53px;opacity:.85}
@media(prefers-reduced-motion:reduce){.birthday-quill{display:none}.click-cue{opacity:.25}}
@media(prefers-reduced-motion:reduce){.morning-sun-rays,.morning-sun-rays path,.morning-cloud,.bird-flight,.bird-wing,.morning-horizon{animation:none!important}.morning-sun-rays path{opacity:.55;stroke-dashoffset:0}.morning-sun{opacity:1}.morning-clouds{opacity:.4}}

.sound-control{position:relative}.sound-hint{position:absolute;right:0;top:calc(100% + 9px);white-space:nowrap;font-size:11px;font-weight:400;color:currentColor;opacity:.8;pointer-events:none;animation:sound-hint-enter .45s var(--ease) both}.sound-hint:before{content:"";position:absolute;right:7px;top:-8px;width:8px;height:8px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(-18deg);opacity:.6}.sound-control[data-audio-state=waiting] .equalizer i{animation:none}.sound-control[data-audio-state=waiting]{opacity:.75}@keyframes sound-hint-enter{from{opacity:0;translate:0 4px}to{opacity:.8;translate:0 0}}@media(prefers-reduced-motion:reduce){.sound-hint{animation:none}}

/* A continuous 900ms morning-to-cake wipe, with no pause at full coverage. */
.scene-transition{transition-duration:var(--iris-time,650ms)}.scene-transition.cinematic{pointer-events:auto;transition-timing-function:cubic-bezier(.4,0,.6,1)}.scene-transition.cinematic.active{clip-path:circle(var(--cover-radius) at 73% 49%)}@media(prefers-reduced-motion:reduce){.scene-transition{transition-duration:.01s!important}}