@font-face{font-family:'DM Sans';font-style:normal;font-weight:100 1000;font-display:swap;src:url('/assets/fonts/dm-sans-latin.woff2') format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:200 1000;font-display:swap;src:url('/assets/fonts/nunito-latin.woff2') format('woff2')}

:root{font-family:'DM Sans',sans-serif;color:#38483b;background:#f9f8f1;font-synthesis:none;--green:#516c4d;--ink:#38483b;--muted:#788172;--line:#e5e7da;--cream:#f9f8f1}
*{box-sizing:border-box}body{margin:0}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}button:disabled{cursor:default}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #447fb9;outline-offset:5px}button{border:0}a{color:inherit;text-decoration:none}button, a{ -webkit-user-select:none; user-select:none}button svg{width:21px;height:21px;stroke:currentColor;stroke-width:1.7;fill:none}button svg path,button svg circle{vector-effect:non-scaling-stroke}[hidden]{display:none!important}
.site-header{max-width:1280px;margin:auto;min-height:108px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 48px}.brand{display:flex;align-items:center;gap:12px;font-family:Nunito,sans-serif;font-size:25px;font-weight:900;letter-spacing:-1px;line-height:1.1}.brand-mark{width:46px;height:46px;display:grid;place-items:center;background:#e8ecd9;border-radius:16px;color:var(--green);font-size:32px;transform:rotate(-8deg)}.brand-caption{display:block;font-family:'DM Sans',sans-serif;font-size:10px;letter-spacing:2px;font-weight:600;margin-top:8px;color:#84917c}.navigation{display:flex;gap:8px;padding:5px;background:#eeeee3;border-radius:30px}.nav-button{padding:11px 20px;border-radius:24px;background:transparent;font-size:14px;font-weight:600;color:#7b8174;display:flex;align-items:center;gap:9px}.nav-button>span{font-size:20px}.nav-button.selected{background:#fffef9;color:var(--green);box-shadow:0 2px 6px #45513b0c}.header-actions{display:flex;gap:10px}.icon-button{width:42px;height:42px;display:grid;place-items:center;border:1px solid #e2e5d7;background:transparent;border-radius:50%}.icon-button:hover{background:#eeeee3}main{max-width:1136px;margin:auto;padding:14px 32px 0}.section-heading{display:flex;justify-content:space-between;align-items:center;margin:12px 0 25px;gap:15px}.eyebrow{font-size:11px;font-weight:700;letter-spacing:1.9px;color:#819077}h1,h2{font-family:Nunito,sans-serif}h1{font-size:31px;letter-spacing:-.7px;font-weight:800;margin:6px 0 0}h2{font-size:24px;letter-spacing:-.4px}.round-counter{display:flex;align-items:center;gap:17px}.round-counter>span{font-size:12px;color:#87917e}.round-counter>div{display:flex;gap:9px}.round-star{display:grid;place-items:center;border-radius:50%;height:35px;width:35px;background:#eeeee0;color:#cecdb7;font-size:21px}.round-star.earned{background:#fff0b6;color:#b98a20}
.game-shell{border:1px solid #d8dfcd;border-radius:27px;overflow:hidden;background:#f5f7e9;box-shadow:0 7px 0 #e5e8dc,0 18px 38px #52604706}.meadow{height:337px;position:relative;background:#deebd1;background-image:linear-gradient(180deg,#eff7e5,#d6e6ba);background-size:cover;background-position:center 62%;isolation:isolate}.meadow.has-art{background-image:url('/assets/meadow.png')}.level-pill,.friend-pill{position:absolute;top:23px;display:flex;align-items:center;font-size:12px;font-weight:600;z-index:3;background:#fffef6db;border:1px solid #fffdf5d9;border-radius:20px;padding:9px 15px;color:#6b7f5b;backdrop-filter:blur(5px)}.level-pill{left:25px}.friend-pill{right:25px;gap:7px}.friend-dot{height:6px;width:6px;border-radius:50%;background:#86a970}.character-area{position:absolute;top:26px;left:50%;transform:translateX(-50%);height:282px;width:340px;display:flex;flex-direction:column;align-items:center}.speech-bubble{position:relative;background:#fffef8;border-radius:21px;padding:12px 24px;box-shadow:0 4px 0 #8ea46710;font-family:Nunito,sans-serif;font-weight:800;font-size:20px;white-space:nowrap;z-index:3;min-height:49px;text-align:center}.speech-bubble:after{content:'';position:absolute;bottom:-8px;left:calc(50% - 8px);width:16px;height:16px;transform:rotate(45deg);background:#fffef8;border-radius:0 0 4px 0}.milo-button{width:212px;height:210px;position:relative;background:transparent;margin-top:1px;padding:0;flex-shrink:0;z-index:2}.milo-art,.small-milo{display:block;background-size:200% 200%;background-repeat:no-repeat;background-position:0 0}.milo-art{width:100%;height:100%;position:relative;z-index:2;transform-origin:50% 90%;transition:transform .25s}.milo-art.has-art,.small-milo.has-art{background-image:url('/assets/milo-stages.png')}.milo-button:hover .milo-art{transform:rotate(-3deg) scale(1.04)}.milo-button.singing .milo-art{animation:sing .45s ease-in-out infinite alternate}.milo-shadow{position:absolute;bottom:22px;left:27%;width:46%;height:12px;background:#68835b24;border-radius:50%;filter:blur(3px);z-index:1}.primary-button{background:var(--green);color:#fffef7;border:1px solid #405c3d;border-radius:30px;padding:13px 28px;font-weight:700;font-size:16px;box-shadow:0 4px 0 #3b5438;display:flex;align-items:center;justify-content:center;gap:12px}.primary-button:hover{background:#435f40}.primary-button:active{transform:translateY(3px);box-shadow:0 1px 0 #3b5438}.scene-button{position:absolute;bottom:0;z-index:4;white-space:nowrap;min-width:157px}.scene-button:disabled{opacity:.7}.scene-caption{position:absolute;left:25px;bottom:18px;font-size:12px;color:#657754;max-width:32%;line-height:1.5}.melody-bubbles{position:absolute;bottom:4px;display:flex;gap:8px;z-index:3}.melody-token{min-width:34px;height:34px;border-radius:50%;background:#fffdf5ce;color:#77876d;display:grid;place-items:center;font-family:Nunito,sans-serif;font-weight:800;font-size:14px;border:2px solid #fffef8}.melody-token.heard,.melody-token.done{background:#fff6c9;color:#708149}.melody-token.current{transform:scale(1.15);border-color:#c6a24b}
.piano-area{padding:20px 29px 13px;background:#fffdf7}.piano-topline{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.instruction{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:500}.instruction-icon{width:27px;height:27px;display:grid;place-items:center;border-radius:50%;background:#eef1e3;color:#819370;font-size:19px}.repeat-button{background:transparent;color:#7b8870;font-size:12px;display:flex;align-items:center;gap:6px;padding:4px 0 4px 10px}.repeat-button span{font-size:23px}.repeat-button:disabled{opacity:.45}.keyboard{height:173px;display:flex;gap:7px;padding:7px;background:#ebeee3;border:1px solid #e1e5d7;border-radius:16px;position:relative;touch-action:manipulation}.piano-key{flex:1;min-width:0;position:relative;display:flex;align-items:flex-end;justify-content:center;border-radius:9px 9px 12px 12px;padding:0 0 20px;background:linear-gradient(#fffefa,#fffdf6);border:1px solid #e0e2d5;box-shadow:0 5px 0 #d7dbcf;transition:background .18s,transform .12s,box-shadow .12s;color:var(--note-color)}.key-label{display:grid;place-items:center;background:var(--note-light);width:43px;height:43px;border-radius:50%;font-family:Nunito,sans-serif;font-size:20px;font-weight:800}.piano-key:disabled{background:#f1f2e9;box-shadow:0 5px 0 #dce0d4;color:#a8aea0;border-color:#e3e6da}.piano-key:disabled .key-label{background:#e6e9dd;font-size:17px}.piano-key.cue{background:var(--note-light);border:2px solid var(--note-color);animation:glow 1.7s ease-in-out infinite}.piano-key.cue:before{content:'✦';position:absolute;top:29px;left:0;width:100%;font-size:26px;text-align:center;color:var(--note-color)}.piano-key.pressed,.piano-key:active:not(:disabled){transform:translateY(4px);box-shadow:0 1px 0 #c7cfbc;background:var(--note-light)}.piano-key.preview{background:var(--note-light);border-color:var(--note-color)}.piano-footer{display:flex;align-items:center;justify-content:space-between;padding-top:17px;font-size:11px;color:#909785;gap:12px}.piano-footer button{background:transparent;font-size:12px;font-weight:600;color:#7d8970;padding:4px}.piano-footer button span{margin-left:6px}.below-game{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:25px;font-size:12px;color:#8a9480}.tiny-star{color:#b6a157;margin-right:6px;font-size:17px}.below-game button,.text-button{background:transparent;font-size:12px;font-weight:600;color:#64775a;padding:8px 0}.below-game button span{margin-left:9px}.site-footer{max-width:1072px;margin:28px auto 0;border-top:1px solid #e9ebdf;padding:20px 0 25px;display:flex;justify-content:space-between;font-size:11px;color:#a0a693}.site-footer>span:last-child{font-size:18px;color:#a1af92}
.adventure-summary{display:flex;align-items:center;gap:24px;padding:20px 28px;border:1px solid #e0e5d6;border-radius:22px;background:#f0f2e5}.small-milo{width:100px;height:100px;flex-shrink:0}.adventure-summary h2{margin:0 0 8px}.adventure-summary p{font-size:14px;color:#7a8970;margin:0;line-height:1.6}.growth-track{display:flex;gap:8px;margin-left:auto}.growth-dot{width:32px;height:32px;background:#e1e6d3;border-radius:50%;display:grid;place-items:center;color:#939e81}.growth-dot.unlocked{background:#f5df94;color:#8d7330}.worlds{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:24px}.world-card{border:1px solid #dce3d1;border-radius:22px;background:#fffef8;padding:25px;overflow:hidden}.world-card.locked{background:#f2f2e8}.world-title{display:flex;justify-content:space-between;align-items:center}.world-card h2{font-size:23px;margin:8px 0}.world-card p{font-size:13px;color:#819071;line-height:1.5;margin:0}.level-path{display:flex;justify-content:space-between;position:relative;margin-top:25px;gap:12px}.level-path:before{content:'';position:absolute;top:24px;left:20px;right:20px;border-top:3px dashed #d8dfc9}.level-node{position:relative;background:#ecede0;border:3px solid #fffef8;color:#a0aa90;box-shadow:0 0 0 1px #dce3ce;width:51px;height:51px;border-radius:50%;font-family:Nunito,sans-serif;font-size:18px;font-weight:800}.level-node.complete{background:#e4edcb;color:#728b49}.level-node.current{background:#f4d677;color:#736534;box-shadow:0 0 0 3px #ead995}.level-node:disabled{font-size:16px}.map-note{text-align:center;font-size:12px;color:#89967d;margin:28px 0}.celebration{position:absolute;inset:0;pointer-events:none;z-index:5;overflow:hidden}.confetti{position:absolute;top:-25px;width:9px;height:16px;border-radius:3px;background:var(--confetti);left:var(--left);animation:confetti 2.7s var(--delay) ease-out both}.text-button{font-size:14px}.secondary-button{padding:13px 25px;background:#e9eddc;border:1px solid #d4dec5;border-radius:24px;font-weight:600}dialog{border:1px solid #dce3d1;border-radius:26px;padding:34px;max-width:460px;width:calc(100% - 36px);background:#fffdf6;color:var(--ink);box-shadow:0 20px 70px #29362535}dialog::backdrop{background:#26342f77;backdrop-filter:blur(4px)}dialog h2{font-size:29px;margin:8px 0 12px}dialog p{font-size:14px;color:#7b8772;line-height:1.7}dialog .dialog-close{position:absolute;right:15px;top:15px;width:33px;height:33px;font-size:25px}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:25px 0;font-size:14px}.setting-row small{display:block;font-size:12px;color:#8a947d;margin-top:6px;line-height:1.5}.setting-row input[type=checkbox]{width:25px;height:25px;accent-color:var(--green);flex-shrink:0}.setting-row input[type=range]{width:145px;accent-color:var(--green)}.settings-note{background:#f1f3e8;border-radius:15px;padding:15px;font-size:13px;margin-bottom:22px}.settings-note p{margin:4px 0;font-size:12px}#settings-done{width:100%}
@keyframes sing{to{transform:translateY(-7px) rotate(3deg) scale(1.03)}}@keyframes glow{50%{box-shadow:0 5px 0 #d7dbcf,0 0 17px var(--note-light);filter:brightness(1.03)}}@keyframes confetti{to{transform:translate(35px,400px) rotate(420deg);opacity:0}}
@media(min-width:1500px){main{padding-top:30px}.meadow{height:390px}.character-area{top:43px;transform:translateX(-50%) scale(1.12);transform-origin:50% 0}.keyboard{height:193px}.site-header{min-height:120px}.site-footer{margin-top:36px}}
@media(max-width:800px){.site-header{padding:22px 24px;gap:15px}.brand{font-size:21px}.brand-mark{width:39px;height:39px}.brand-caption{font-size:8px;letter-spacing:1.5px}.nav-button{padding:10px 13px;font-size:12px}.navigation{gap:0}.header-actions{gap:6px}.icon-button{width:36px;height:36px}main{padding:8px 24px 0}.round-counter>span{display:none}.meadow{height:330px}.piano-area{padding:18px 18px 13px}.keyboard{height:169px;gap:5px}.key-label{width:36px;height:36px;font-size:18px}.site-footer{margin-left:24px;margin-right:24px}.scene-caption{font-size:11px;max-width:25%}.friend-pill{font-size:11px;right:15px}.level-pill{left:15px}.world-card{padding:20px}.adventure-summary{padding:18px;gap:15px}.adventure-summary h2{font-size:21px}.growth-track{gap:5px}.growth-dot{width:24px;height:24px}}
@media(max-width:580px){.site-header{padding:18px 18px 0;flex-wrap:wrap;min-height:125px;gap:18px}.brand{font-size:23px}.brand-caption{font-size:9px}.header-actions{margin-left:auto;gap:9px}.icon-button{width:39px;height:39px}.navigation{order:3;width:100%;justify-content:center;margin-top:-3px}.nav-button{flex:1;justify-content:center;padding:10px 13px;font-size:13px}main{padding:17px 14px 0}.section-heading{margin:7px 4px 18px}.eyebrow{font-size:9px;letter-spacing:1.3px}h1{font-size:25px}.round-counter{gap:0}.round-counter>div{gap:5px}.round-star{width:27px;height:27px;font-size:17px}.game-shell{border-radius:22px}.meadow{height:320px;background-position:50% 65%}.level-pill,.friend-pill{top:15px;padding:7px 10px;font-size:10px}.friend-pill{right:12px}.level-pill{left:12px}.character-area{top:57px;width:300px;height:238px}.speech-bubble{font-size:17px;padding:10px 18px;min-height:41px}.milo-button{width:186px;height:183px;margin-top:0}.scene-button{bottom:1px;font-size:14px;padding:11px 22px}.scene-caption{display:none}.piano-area{padding:14px 10px 11px}.piano-topline{margin-bottom:14px;padding:0 2px;gap:6px}.instruction{font-size:12px;gap:6px}.instruction-icon{width:23px;height:23px;font-size:16px}.repeat-button{font-size:11px;gap:4px}.repeat-button span{font-size:19px}.keyboard{height:148px;gap:4px;padding:5px;border-radius:12px}.piano-key{border-radius:5px 5px 8px 8px;padding-bottom:16px}.key-label{width:29px;height:29px;font-size:15px}.piano-key:disabled .key-label{font-size:13px}.piano-key.cue:before{top:24px;font-size:21px}.piano-footer{font-size:10px;padding:15px 3px 0}.piano-footer button{font-size:11px}.below-game{margin:21px 4px 0;justify-content:center;font-size:11px}.below-game>button{display:none}.site-footer{margin:23px 18px 0;padding:17px 0;font-size:10px}.worlds{grid-template-columns:1fr;gap:15px}.adventure-summary{gap:10px;padding:13px}.small-milo{width:70px;height:70px}.adventure-summary h2{font-size:18px}.adventure-summary p{font-size:12px}.growth-track{display:none}.text-button{font-size:12px}.melody-bubbles{bottom:0}.melody-token{height:29px;min-width:29px;font-size:12px}.map-note{font-size:11px}.world-card h2{font-size:22px}}
@media(max-width:359px){.key-label{width:25px;height:25px;font-size:13px}.brand{font-size:21px}.instruction{font-size:11px}.keyboard{gap:3px}}
@media(max-width:580px) and (max-height:780px){.site-header{min-height:105px;padding-top:12px;gap:12px}.brand-mark{height:36px;width:36px}.brand{font-size:21px}.brand-caption{font-size:8px;margin-top:6px}.navigation{margin-top:0;padding:4px}.nav-button{padding:7px 12px}.header-actions .icon-button{height:36px;width:36px}main{padding-top:9px}.section-heading{margin:4px 4px 13px}h1{font-size:23px;margin-top:4px}.meadow{height:233px}.character-area{top:43px;height:176px}.speech-bubble{font-size:15px;min-height:35px;padding:8px 15px}.milo-button{width:143px;height:142px}.scene-button{padding:9px 20px;font-size:13px;bottom:-1px}.milo-shadow{bottom:13px}.level-pill,.friend-pill{top:11px;font-size:9px;padding:6px 9px}.keyboard{height:135px}.piano-topline{margin-bottom:10px}.piano-area{padding-top:11px}.piano-footer{padding-top:12px}.below-game{margin-top:15px;font-size:10px}.site-footer{margin-top:16px;padding:12px 0}.melody-bubbles{bottom:-2px}.melody-token{height:25px;min-width:25px;font-size:11px}}
.art-fallback{display:grid;place-items:center;font-family:Nunito,sans-serif;font-size:29px;font-weight:800;color:var(--green)}
.scene-caption{display:none}
.feedback-symbol{position:absolute;right:-2px;top:91px;width:96px;height:96px;display:grid;place-items:center;border-radius:50%;z-index:4;font-family:Nunito,sans-serif;font-size:75px;font-weight:900;line-height:1;pointer-events:none}
.game-shell[data-feedback="retry"]{border-color:#d78b2c;box-shadow:0 7px 0 #e4b66b,0 0 0 4px #ffe1ae}
.game-shell[data-feedback="retry"] .speech-bubble,.game-shell[data-feedback="retry"] .speech-bubble:after{background:#fff0ce;color:#8b490c}
.game-shell[data-feedback="retry"] .feedback-symbol{background:#fff0cc;color:#a8560d;border:4px solid #e7ac4e;box-shadow:0 5px 0 #b7752330}
.game-shell[data-feedback="success"]{border-color:#beaa4a;box-shadow:0 7px 0 #d7c269,0 0 0 4px #fff0b5}
.game-shell[data-feedback="success"] .speech-bubble,.game-shell[data-feedback="success"] .speech-bubble:after{background:#fff7d5;color:#756015}
.game-shell[data-feedback="success"] .feedback-symbol{color:#efb52f;background:#fff9df;border:4px solid #f1cf6b;text-shadow:0 3px 0 #c9951c;box-shadow:0 0 0 9px #fff8cf65;animation:star-arrive .65s ease-out}
.scene-button.action-retry,.scene-button.action-next{min-height:68px;min-width:240px;font-family:Nunito,sans-serif;font-size:23px;font-weight:900;gap:15px;padding:9px 26px;bottom:-7px;border-radius:25px}
.scene-button.action-retry{background:#edb657;border:2px solid #b77b24;color:#633609;box-shadow:0 6px 0 #b77b24;animation:button-invite 1.8s ease-in-out infinite}
.scene-button.action-retry:hover{background:#f5c56e}
.scene-button.action-next{background:#4d8758;border:2px solid #356b40;color:white;box-shadow:0 6px 0 #356b40;animation:button-invite 2.2s ease-in-out infinite}
.scene-button.action-next:hover{background:#437e4e}
.action-icon{font-size:35px;line-height:1}
/* The transformed character area must rise above scenery when its button invites a tap. */
.character-area:has(> .scene-button:not([hidden]):not(:disabled)){z-index:6}
.button-pointer{position:absolute;z-index:1;width:132px;height:132px;max-width:none;left:-40px;bottom:calc(100% - 7px);pointer-events:none;filter:drop-shadow(0 3px 2px #354a3540);animation:point-to-button 1.3s ease-in-out infinite}
.scene-button:disabled .button-pointer{display:none}
@keyframes point-to-button{0%,100%{transform:translateY(-7px)}55%{transform:translateY(1px)}}
@media(max-width:580px){.button-pointer{width:114px;height:114px;left:-32px}}
.piano-key.wrong,.piano-key.wrong:disabled{background:#ffe0ad;border:3px solid #c77719;box-shadow:0 5px 0 #c59043;color:#97520e;animation:key-wiggle .5s ease-in-out}
.piano-key.wrong .key-label{background:#f5c775;color:#753c08}
.piano-key.wrong:before{content:'↶';position:absolute;top:24px;left:0;width:100%;font-size:32px;text-align:center;color:#a7560e}
.piano-key.right,.piano-key.right:disabled{background:#e4f3ce;border:3px solid #76a147;box-shadow:0 5px 0 #86aa60;color:#427327}
.piano-key.right .key-label{background:#cae6a5;color:#3d6b23}
.piano-key.right:before{content:'✦';position:absolute;top:24px;left:0;width:100%;font-size:32px;text-align:center;color:#699530;animation:star-arrive .35s ease-out}
.milo-button.shaking .milo-art{animation:milo-no .6s ease-in-out}
.milo-button.nodding .milo-art{animation:milo-yes .35s ease-in-out}
.milo-button.celebrating .milo-art{animation:milo-hooray .65s ease-in-out 3}
@keyframes key-wiggle{20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}
@keyframes milo-no{20%,60%{transform:rotate(-7deg)}40%,80%{transform:rotate(7deg)}}
@keyframes milo-yes{50%{transform:translateY(8px) scaleY(.96)}}
@keyframes milo-hooray{45%{transform:translateY(-15px) rotate(-5deg)}75%{transform:translateY(-5px) rotate(4deg)}}
@keyframes star-arrive{0%{transform:scale(.3) rotate(-25deg)}65%{transform:scale(1.16) rotate(8deg)}100%{transform:scale(1) rotate(0)}}
@keyframes button-invite{50%{transform:scale(1.035)}}
@media(max-width:580px){.feedback-symbol{width:71px;height:71px;font-size:55px;right:0;top:80px}.scene-button.action-retry,.scene-button.action-next{min-width:218px;min-height:60px;font-size:21px;bottom:-6px}.action-icon{font-size:32px}.game-shell[data-feedback] .speech-bubble{font-size:22px;padding:9px 18px}.game-shell[data-feedback] .character-area{top:49px}}
@media(max-width:580px) and (max-height:780px){.feedback-symbol{width:59px;height:59px;right:29px;top:61px;font-size:45px}.scene-button.action-retry,.scene-button.action-next{min-height:54px;min-width:205px;font-size:20px;bottom:-10px}.action-icon{font-size:30px}.game-shell[data-feedback] .speech-bubble{font-size:19px;padding:8px 16px}.game-shell[data-feedback] .character-area{top:43px}.piano-key.wrong:before,.piano-key.right:before{top:20px;font-size:25px}}
.level-path{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.level-path.long-path{grid-template-columns:repeat(6,minmax(0,1fr))}
.level-path:before{top:34px}
.level-node{width:100%;height:74px;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.level-number{font-size:21px;line-height:1}.level-action{font-family:'DM Sans',sans-serif;font-size:10px;font-weight:700;white-space:nowrap}
.level-node.complete:hover{background:#d8e7b8;box-shadow:0 0 0 3px #b0c489}
@media(max-width:580px){.level-path{gap:7px}.level-path.long-path{grid-template-columns:repeat(3,minmax(0,1fr))}.level-path.long-path:before{display:none}.level-action{font-size:9px}}
/* Story breaks live in the meadow, with the piano tucked away until play resumes. */
.meadow.story-scene{height:410px;background-position:center 60%}
.story-scene .character-area{top:62px;width:min(100%,420px);height:314px;transform:translateX(-50%)}
.story-scene .speech-bubble{white-space:normal;max-width:95%;font-size:21px;line-height:1.25;padding:12px 20px}
.story-scene .milo-button{width:214px;height:212px;margin-top:5px;pointer-events:none}
.story-scene .scene-button{bottom:0;min-height:56px}
.story-scene .friend-pill{max-width:60%}
.story-scene .scene-caption{display:none}
.story-decor{position:absolute;inset:0;pointer-events:none}
.story-friend{position:absolute;width:170px;height:170px;bottom:90px;z-index:1;filter:drop-shadow(0 8px 4px #466d3c22)}
.friend-left{left:calc(50% - 285px);--arrival:-75px}
.friend-right{right:calc(50% - 285px);--arrival:75px}
.story-friend>span{display:block;width:100%;height:100%;background-image:url('/assets/milo-friends.png');background-size:200% 100%;background-repeat:no-repeat;transform-origin:50% 90%}
.friend-right>span{background-position:100% 0}
.story-scene[data-phase=arrive] .story-friend{animation:friend-arrive 2.6s ease-out both}
.story-scene[data-phase=dance] .story-friend>span,.story-scene[data-phase=dance] .milo-art{animation:friend-sway 2.4s ease-in-out infinite}
.story-scene[data-phase=dance] .friend-right>span{animation-delay:-1.2s}
.story-scene[data-phase=reveal] .story-friend>span{animation:friend-sway 2.4s ease-in-out 2}
.story-scene[data-phase=reveal] .milo-art{animation:outfit-reveal 1.8s ease-out both}
.story-rest-panel{padding:22px 26px 25px;text-align:center;background:#f5f3e6;border-top:1px solid #e2e5d4;min-height:100px}
.story-rest-panel p{margin:0 auto 9px;max-width:550px;font-family:Nunito,sans-serif;font-size:18px;font-weight:700;line-height:1.5;color:#52634c}
.story-rest-panel>span{font-size:12px;color:#7c876f}
.story-butterfly{display:none;position:absolute;width:7px;height:21px;border-radius:50%;background:#81654b;z-index:3;--wing:#eebf74}
.story-butterfly:before,.story-butterfly:after{content:'';position:absolute;top:-5px;width:21px;height:28px;background:var(--wing);border:2px solid #fff7d4b3;border-radius:70% 30% 65% 35%;transform-origin:right center;left:-19px;animation:butterfly-wing 1.1s ease-in-out infinite alternate}
.story-butterfly:after{left:5px;transform-origin:left center;border-radius:30% 70% 35% 65%}
.butterfly-one{left:23%;top:37%;animation:butterfly-float 7s ease-in-out infinite alternate}
.butterfly-two{left:73%;top:33%;--wing:#b7a8df;animation:butterfly-float 8s -3s ease-in-out infinite alternate}
.butterfly-three{left:49%;top:46%;--wing:#e7a59d;animation:butterfly-float 9s -5s ease-in-out infinite alternate}
[data-story=butterflies] .story-butterfly{display:block}
.picnic-blanket{display:none;position:absolute;left:50%;bottom:70px;transform:translateX(-50%) rotate(-3deg);width:470px;height:73px;border-radius:50%;background:repeating-linear-gradient(0deg,#fff5df75 0 11px,transparent 11px 22px),repeating-linear-gradient(90deg,#fff5df75 0 11px,#cf9d8955 11px 22px);border:4px solid #fff4d696;z-index:0}
[data-story=picnic] .picnic-blanket{display:block}
.picnic-basket{position:absolute;left:43%;top:16px;width:60px;height:38px;background:repeating-linear-gradient(0deg,#ad784c 0 3px,#cf9d62 3px 7px);border:3px solid #95643c;border-radius:4px 4px 17px 17px}
.picnic-basket:before{content:'';position:absolute;left:9px;top:-22px;width:29px;height:24px;border:5px solid #ad784c;border-bottom:0;border-radius:50% 50% 0 0}
.picnic-berry{position:absolute;top:22px;width:22px;height:27px;border-radius:50% 50% 50% 50%/35% 35% 65% 65%;background:radial-gradient(circle,#ffe6a9 1px,transparent 1.5px) 0 0/7px 8px,#c87968;box-shadow:inset -4px -2px 0 #a8524833}
.picnic-berry:before{content:'';position:absolute;top:-3px;left:3px;width:17px;height:7px;background:#76924e;border-radius:80% 0;transform:rotate(-15deg)}
.berry-one{left:32%;transform:rotate(-15deg)}.berry-two{left:62%;transform:rotate(15deg)}
.dance-note{display:none;position:absolute;top:37%;font-family:Nunito,sans-serif;font-size:34px;font-weight:800;color:#fff9d9;text-shadow:0 2px 3px #5b783f80;z-index:3;animation:note-drift 4s ease-in-out infinite}
.note-one{left:22%;color:#fff0bd}.note-two{right:23%;animation-delay:-2s}.note-three{left:54%;top:43%;font-size:26px;animation-delay:-1s}
[data-story=dance] .dance-note{display:block}
.story-gift{display:none;position:absolute;left:calc(50% - 38px);bottom:88px;width:76px;height:64px;border-radius:5px 5px 11px 11px;background:linear-gradient(90deg,#eabe75,#f7d99e 60%,#eabe75);border:2px solid #be9258;box-shadow:0 6px 8px #52683c25;z-index:3}
.story-gift:after{content:'';position:absolute;top:0;bottom:0;left:27px;width:18px;background:#b27f88}
.gift-lid{position:absolute;top:-12px;left:-6px;width:84px;height:19px;border-radius:5px;background:#f7d99e;border:2px solid #be9258;z-index:1;transition:transform 2s ease,opacity 2s ease}
.gift-lid:after{content:'';position:absolute;top:0;bottom:0;left:31px;width:18px;background:#c28c98}
.gift-bow{position:absolute;top:-31px;left:16px;width:25px;height:21px;border:6px solid #b87f8d;border-radius:60% 60% 0 60%;transform:rotate(12deg);z-index:2;transition:transform 2s ease,opacity 2s ease}
.gift-bow:after{content:'';position:absolute;top:-10px;left:14px;width:23px;height:20px;border:6px solid #b87f8d;border-radius:60% 60% 60% 0;transform:rotate(-30deg)}
[data-story=gift] [data-phase=present] .story-gift,[data-story=gift] [data-phase=unwrap] .story-gift{display:block;animation:gift-arrive 1.5s ease both}
[data-phase=unwrap] .gift-lid{transform:translate(-12px,-38px) rotate(-17deg)}
[data-phase=unwrap] .gift-bow{transform:translate(22px,-45px) rotate(30deg);opacity:0}
.gift-sparkles{display:none;position:absolute;left:calc(50% - 130px);top:145px;width:260px;height:150px;z-index:3;color:#fff4c0;text-shadow:0 2px 4px #8c753d99;font-size:35px}
.gift-sparkles span{position:absolute;animation:gentle-sparkle 2s ease-in-out 2}.gift-sparkles span:nth-child(1){left:0;top:35px}.gift-sparkles span:nth-child(2){right:0;top:0;animation-delay:.3s}.gift-sparkles span:nth-child(3){right:5px;bottom:0;animation-delay:.6s}.gift-sparkles span:nth-child(4){left:18px;bottom:0;animation-delay:.9s}
[data-story=gift] [data-phase=reveal] .gift-sparkles{display:block}
.story-scene[data-phase=rest] .story-butterfly,.story-scene[data-phase=rest] .story-butterfly:before,.story-scene[data-phase=rest] .story-butterfly:after,.story-scene[data-phase=rest] .dance-note{animation:none}
.story-scene[data-phase=rest] .dance-note{opacity:.3}
.story-scene.story-paused .story-decor *,.story-scene.story-paused .story-decor *:before,.story-scene.story-paused .story-decor *:after,.story-scene.story-paused .milo-art{animation-play-state:paused!important}
.story-scene.story-paused .story-gift,.story-scene.story-paused .story-friend,.story-scene.story-paused .milo-art{animation:none;opacity:1;transform:none}
.story-scene.story-settled .story-friend{animation:none;opacity:1;transform:none}
@keyframes friend-arrive{from{opacity:0;transform:translateX(var(--arrival))}to{opacity:1;transform:translateX(0)}}
@keyframes friend-sway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg) translateY(-4px)}}
@keyframes outfit-reveal{0%{opacity:.1;transform:scale(.9)}65%{opacity:1;transform:scale(1.05)}100%{transform:scale(1)}}
@keyframes butterfly-wing{to{scale:.45 1}}
@keyframes butterfly-float{50%{transform:translate(28px,-21px) rotate(8deg)}100%{transform:translate(-15px,9px) rotate(-8deg)}}
@keyframes note-drift{50%{transform:translateY(-14px) rotate(8deg);opacity:.65}}
@keyframes gift-arrive{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
@keyframes gentle-sparkle{0%,100%{transform:scale(.75);opacity:.45}50%{transform:scale(1.08);opacity:1}}
@media(max-width:580px){
  .meadow.story-scene{height:350px}
  .story-scene .character-area{top:56px;height:270px;width:100%}
  .story-scene .speech-bubble{font-size:17px;max-width:94%;min-height:44px;padding:10px 14px}
  .story-scene .milo-button{width:165px;height:164px;margin-top:13px}
  .story-scene .scene-button{min-height:54px;padding:11px 23px;font-size:16px}
  .story-friend{width:112px;height:112px;bottom:89px}
  .friend-left{left:1%}.friend-right{right:1%}
  .story-rest-panel{padding:17px 17px 20px;min-height:115px}
  .story-rest-panel p{font-size:16px;line-height:1.45}.story-rest-panel>span{font-size:11px}
  .picnic-blanket{width:92%;height:65px;bottom:76px}
  .story-gift{bottom:86px;scale:.85}
  .gift-sparkles{top:133px;width:200px;height:110px;left:calc(50% - 100px);font-size:28px}
  .butterfly-one{left:15%;top:36%}.butterfly-two{left:83%;top:34%}.butterfly-three{left:53%;top:46%}
  .note-one{left:13%;top:37%}.note-two{right:14%;top:34%}.note-three{top:44%}
}
@media(max-width:360px){.story-friend{width:92px;height:92px;bottom:96px}.story-scene .milo-button{width:150px;height:149px;margin-top:24px}.story-scene .speech-bubble{font-size:16px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.confetti{display:none}}