:root{font-family:'Trebuchet MS','Segoe UI',system-ui,sans-serif;color:#44315f;background:#f6eddc;font-synthesis:none;--ink:#44315f;--purple:#7650b8;--deep:#49326c;--gold:#ffe09a;--mint:#b2e8cf;--cream:#fffaf0}
*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;border:0;cursor:pointer;min-width:48px;min-height:48px;touch-action:manipulation;transition:transform .15s,box-shadow .15s,background .15s}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible{outline:4px solid #de6a99;outline-offset:4px}button:hover:not(:disabled){filter:brightness(1.04);transform:translateY(-2px)}button:active:not(:disabled){transform:translateY(2px)}button svg{pointer-events:none}h1,h2,p{margin:0}svg{display:block;width:100%;height:100%}[hidden]{display:none!important}.skip{position:fixed;top:-60px;left:15px;z-index:100;background:white;padding:15px}.skip:focus{top:8px}.topbar{height:82px;background:#fff8e9;display:flex;justify-content:space-between;align-items:center;padding:10px max(5%,calc((100vw - 1320px)/2));gap:20px;border-bottom:3px solid #dfc9b0}.brand{display:flex;gap:11px;align-items:center;font-size:26px;line-height:1;font-weight:900;letter-spacing:-1px;color:#503970}.brand img{width:45px;height:45px}.brand small{display:block;font-size:8px;letter-spacing:2.5px;font-weight:700;color:#8f7391;margin-top:9px}.utilities{display:flex;gap:12px}.utility{width:59px;background:#f1e8f5;border:1px solid #e4d5ee;border-radius:17px;padding:6px 10px;display:flex;flex-direction:column;align-items:center;gap:2px;box-shadow:0 3px 0 #dfcfe6}.utility>span{width:28px;height:28px;display:block}.utility small{font-size:10px;font-weight:800;white-space:nowrap}main{max-width:1600px;margin:auto}.world{height:510px;position:relative;overflow:hidden;border-bottom:8px solid #c294ad;background:#4f397b}.scene{position:absolute;inset:0}.factory-art{width:100%;height:100%;object-fit:cover}.world-heading{position:absolute;top:39px;left:5.5%;z-index:1;color:#fff6dc;text-shadow:0 3px 14px #35245770;pointer-events:none}.world-heading>p{font-size:10px;font-weight:800;letter-spacing:3px;color:#f4d39d;margin-bottom:12px}.world-heading h1{font-family:Georgia,serif;font-size:48px;line-height:1.06;letter-spacing:-1.7px;font-weight:700}.world-heading em{font-weight:400;color:#ffe2a2}.room-tag{position:absolute;right:5.5%;top:28px;z-index:1;font-size:9px;font-weight:800;letter-spacing:1.7px;color:#fff1cb;background:#4b376ed9;border:1px solid #af8aac;padding:10px 15px;border-radius:40px}.room-tag span{color:#ffd97c;font-size:15px;margin-right:5px}.potion-goal{position:absolute;left:5.5%;bottom:37px;display:flex;align-items:center;gap:13px;background:#fff7e9ed;padding:12px 25px 12px 14px;border:2px solid #eac7ad;border-radius:22px;box-shadow:0 7px 0 #54387030}.potion-goal>span{width:38px;height:58px}.potion-goal small{display:block;font-size:8px;letter-spacing:2px;color:#987b8c;margin-bottom:7px}.potion-goal strong{font-size:18px}.scene-note{position:absolute;bottom:18px;right:6%;color:#fff0d9;font-size:11px;font-weight:700;text-shadow:0 2px 5px #47325a}.workbench{position:relative;margin:-10px auto 0;width:min(1120px,92%);background:var(--cream);border:3px solid #e5c5a0;border-radius:27px;box-shadow:0 7px 0 #c7aa8c40,0 20px 50px #70505012;z-index:2;scroll-margin-top:15px}.guide-wrap{display:flex;align-items:center;gap:17px;border-bottom:2px dashed #e6cdb3;padding:12px 28px;background:#fff4dc;border-radius:24px 24px 0 0;min-height:106px}.guide-portrait{flex:0 0 68px;height:72px;position:relative;overflow:hidden;background:#e9d9f8;border:3px solid #cbb3e7;border-radius:50%}.guide-portrait svg{height:123px;width:101px;position:absolute;top:-4px;left:-18px}.guide{flex:1;min-width:0}.guide strong{display:block;font-family:Georgia,serif;font-size:23px;line-height:1.2;color:#5b3c7a;margin-bottom:5px}.guide p{font-size:14px;color:#765e78;line-height:1.45;max-width:720px}.replay{width:64px;height:67px;flex:0 0 64px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:18px;background:#e9dcf7;box-shadow:0 4px 0 #cbb1e4;color:#69449b;gap:2px}.replay>span{height:29px;width:29px}.replay small{font-weight:800;font-size:11px}.bench-body{display:grid;grid-template-columns:113px 1fr;min-height:292px}.steps{padding:19px 17px;border-right:2px solid #eedfcb;display:flex;flex-direction:column;gap:8px;background:#f7efdf;border-radius:0 0 0 20px}.steps button{position:relative;width:76px;min-height:62px;border-radius:15px;display:flex;align-items:center;gap:6px;padding:8px 6px;background:transparent;color:#937c99;font-weight:800;font-size:12px}.steps button>svg{width:28px;height:28px;flex-shrink:0}.steps small{position:absolute;font-size:8px;top:4px;right:6px;opacity:.7}.steps button[aria-current=true]{background:#8060b9;color:#fff4df;box-shadow:0 4px 0 #5c3f8d}.play-area{min-width:0;padding:18px 27px 20px}.recipe-strip{display:flex;justify-content:center;align-items:center;gap:18px;margin-bottom:12px;min-height:51px}.recipe-label{font-size:11px;font-weight:800;color:#9a7992;white-space:nowrap}.recipe-pictures{display:flex;align-items:center;gap:7px}.recipe-piece{position:relative;width:43px;height:43px;border:2px dashed #cdb9cc;border-radius:12px;padding:4px;opacity:.52;background:#faf4e9}.recipe-piece.filled{opacity:1;border-style:solid;border-color:#92c8ad;background:#e6f7e8}.recipe-piece i{position:absolute;right:-5px;bottom:-5px;width:16px;height:16px;background:#65a688;border-radius:50%;color:white;font-size:10px;text-align:center;line-height:16px;font-style:normal}.recipe-divider{font-size:16px;color:#c3a7b8;margin:0 6px}.recipe-detail{width:39px;height:39px;position:relative}.recipe-detail b{position:absolute;right:-2px;bottom:-2px;font-size:12px;background:#fff3d6;border-radius:50%;width:20px;height:20px;text-align:center;line-height:20px;border:1px solid #dbb89a}.step-panel{position:relative;text-align:center}.ingredient-list{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;max-width:680px;margin:auto}.ingredient{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;background:#fffaf2;border:2px solid #ebd4b8;box-shadow:0 4px 0 #debea0;border-radius:20px;padding:9px 10px 11px;min-height:123px}.ingredient b{font-size:13px;white-space:nowrap}.jar-art{display:block;width:72px;height:76px;position:relative;border-radius:15px 15px 23px 23px;background:#ffe1ec;border:2px solid #edb5ca;box-shadow:inset 3px 3px 0 #ffffff90;padding:8px}.jar-art:before{content:'';position:absolute;top:-6px;left:15%;width:70%;height:9px;background:#d2a36e;border:2px solid #b68961;border-radius:3px}.jar-dew{background:#dbf4ff;border-color:#a8d6e8}.jar-sun{background:#fff0bf;border-color:#e6c781}.jar-moss{background:#e0f4d8;border-color:#afd49f}.jar-art i{position:absolute;right:-7px;bottom:-4px;width:25px;height:25px;border-radius:50%;background:#fff3d7;border:2px solid #d8bb99;font-style:normal;font-weight:800;font-size:19px;line-height:20px}.bowl-row{margin:18px auto 12px;display:flex;align-items:center;justify-content:center;gap:14px;min-height:56px}.bowl-label{font-size:10px;color:#9b7f8a;display:flex;flex-direction:column;align-items:center;gap:3px;flex-shrink:0}.bowl-label>span{width:28px;height:23px}.batch{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;min-height:50px;padding:2px 6px}.batch button{width:49px;height:49px;border-radius:13px;background:#f1e8e9;position:relative;padding:7px;border:1px solid #e0ccd5}.batch button>span{position:absolute;right:-2px;bottom:-2px;border-radius:50%;background:#80668d;color:white;width:18px;height:18px;line-height:16px;font-size:15px}.empty-bowl{font-size:12px;color:#a68e9c;font-style:italic}.empty-bowl>span{margin-left:8px;color:#c1a3c6}.next-button,.primary{border-radius:18px;background:#7651b3;color:#fff8e9;font-weight:800;padding:12px 22px;box-shadow:0 5px 0 #51367e;border:2px solid #966fcd;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:53px;font-size:16px}.next-button>span{width:25px;height:25px}.primary>svg,.secondary>svg{width:26px;height:26px;flex-shrink:0}.secondary{border:2px solid #d8c3d3;background:#f4e9f5;padding:12px 20px;display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:17px;font-weight:800;color:#6b4c88;box-shadow:0 3px 0 #deccd8}.suggested:not(:disabled){outline:3px solid #e5b64f;outline-offset:4px;animation:invite 2s ease-in-out infinite}.stir-play{min-height:188px;display:flex;align-items:center;justify-content:center;gap:32px;padding:7px 0 14px}.stir-button{width:156px;height:156px;min-width:156px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at 35% 20%,#ccf7d5,#81d2be);border:6px solid #fff0c9;box-shadow:0 6px 0 #699b91,0 0 0 3px #cbb998;gap:1px}.stir-button>span{width:83px;height:83px;transform:rotate(-8deg)}.stir-button b{font-size:20px;color:#365e69}.round{width:67px;height:67px;min-width:67px;border-radius:50%;padding:8px;display:flex;flex-direction:column;gap:0}.round>span{width:31px;height:31px}.round small{font-size:9px}.swirl-goal{width:100px;display:flex;flex-direction:column;gap:12px;align-items:center}.dots{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;max-width:100px}.dots i{width:23px;height:23px;border:2px dashed #c5afcb;border-radius:50%;font-style:normal;font-size:13px;line-height:19px;color:white}.dots .filled{background:#83bca2;border-color:#83bca2;border-style:solid}.dots .extra{background:#c68eaf;border-color:#ad769b}.swirl-goal small{font-weight:800;font-size:12px;color:#967b9c}.heat-options{display:flex;justify-content:center;gap:23px;min-height:188px;align-items:center;padding:10px 0 20px}.heat-options button{width:130px;height:138px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;background:#f6edee;border-radius:24px;border:3px solid #e4cdd5;box-shadow:0 5px 0 #d5bbc9;font-size:17px}.heat-options button>span{width:69px;height:69px}.heat-options [aria-pressed=true]{background:#fff0c7;border-color:#d5ad64;box-shadow:0 5px 0 #b48f57}.test-play{min-height:240px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:17px}.test-button{width:250px;max-width:100%;background:#ebe1f7;border:3px solid #c3a8e1;box-shadow:0 6px 0 #ab8ecc;border-radius:45px;padding:5px 25px 17px}.test-button>span{display:block;width:155px;height:115px;margin:auto}.test-button b{display:flex;justify-content:center;align-items:center;gap:9px;font-size:21px}.test-button b>span{width:25px;height:25px}.test-play>p{font-size:12px;color:#927b99}.result-panel{text-align:center;min-height:270px;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:9px 0;gap:15px}.result-heading{display:flex;gap:14px;align-items:center}.result-heading>svg{width:55px;height:65px}.result-heading>.pip-art{width:90px;height:75px}.result-heading h2{font:700 34px Georgia,serif;color:#704698}.result-panel p{font-size:15px;color:#8d6f8c;line-height:1.5}.result-actions{display:flex;justify-content:center;gap:14px;margin-top:8px}.bench-footer{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #eedfcb;padding:0 19px;min-height:52px;gap:10px}.text-button{font-size:11px;background:transparent;text-decoration:underline;text-underline-offset:4px;color:#98798c;min-height:48px;padding:8px}.bench-footer>span{font-size:9px;color:#ad949b}footer{padding:27px 20px 24px;display:flex;gap:24px;justify-content:center;font-size:10px;font-weight:700;color:#ad8d91}footer span{color:#bda292}dialog{color:var(--ink);border:3px solid #ddbdd6;border-radius:32px;width:min(590px,calc(100% - 28px));padding:30px;box-shadow:0 18px 80px #1f123a80;background:#fff8e9;text-align:center;max-height:calc(100dvh - 32px);overflow:auto}dialog::backdrop{background:#21143ab8;backdrop-filter:blur(7px)}dialog h2{font:700 34px/1.1 Georgia,serif;color:#61428b;margin:8px 0 15px}.eyebrow{font-size:9px;letter-spacing:2px;color:#a184a3;font-weight:800;margin-top:7px}#modal-copy>p{font-size:14px;line-height:1.55;color:#8b718f;margin:10px 0}#modal-copy>p.small-copy,.small-copy{font-size:11px;line-height:1.55}.modal-replay{position:absolute;right:12px;top:12px;width:48px;height:48px;border-radius:50%;background:#f1e2f4;padding:11px;z-index:2}.modal-replay>span{display:block;height:25px;width:25px}#modal-art{width:76px;height:76px;margin:0 auto 10px}#modal-art:empty{display:none}.character-picks{display:flex;gap:22px;justify-content:center;margin:22px 0}.character-picks button{width:155px;background:#f0e8f7;border:3px solid #e0d0e8;border-radius:24px;padding:5px 13px 10px;box-shadow:0 5px 0 #d4c2e1}.character-picks svg{height:164px}.character-picks button[aria-pressed=true]{border-color:#b79a56;background:#fff0c7;box-shadow:0 5px 0 #d7b371}.character-picks span{font-size:12px;font-weight:800;letter-spacing:1px}.intro-note{font-style:italic}#modal-actions{display:flex;flex-wrap:wrap;gap:13px;justify-content:center;margin-top:25px}#modal-actions button{min-width:160px}.settings{display:flex;flex-direction:column;gap:12px;margin:24px 0}.settings button{display:flex;align-items:center;gap:12px;background:#eae0f3;border:2px solid #d2bde3;border-radius:17px;padding:12px 17px;font-weight:700;text-align:left}.settings svg{width:30px;height:30px}.settings button>b{margin-left:auto;font-size:13px}.settings [aria-pressed=true]{background:#e4f1df;border-color:#bdd5a9}.help-pictures{display:flex;gap:16px;justify-content:center;margin:25px 0}.help-pictures>span{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:12px}.help-pictures svg{width:60px;height:60px;background:#eee1f7;border-radius:18px;padding:10px}.discovery-shelf{display:flex;align-items:flex-end;justify-content:center;gap:13px;padding:15px 0 18px;margin-top:8px;border-bottom:9px solid #ba8d9e;border-radius:5px}.shelf-potion{background:transparent;display:flex;flex-direction:column;align-items:center;padding:6px;min-width:0;flex:1;gap:10px}.shelf-potion b{font-size:12px}.shelf-potion small{font-size:9px}.shelf-bottle{display:block}.rainbow-bottle .shelf-bottle{width:105px;height:150px}.small-bottle .shelf-bottle{width:60px;height:85px}.pip-rainbow,.star-hiccups,.giant-bottle{opacity:0}.success-rainbow .pip-rainbow,.success-rainbow .star-hiccups,.success-rainbow .giant-bottle{opacity:1}.giant-bottle{transition:opacity .6s}.pip-body{transform-box:fill-box;transform-origin:center bottom;animation:bob 4s ease-in-out infinite}.bubbles{animation:bubbles 3s ease-in-out infinite;transform-box:fill-box;transform-origin:center}.motes{animation:glimmer 4s ease-in-out infinite}.floating-book{animation:book-float 5s ease-in-out infinite}.wizard-eyes{animation:blink 6s infinite;transform-box:fill-box;transform-origin:center}.wand-arm{transform-box:fill-box;transform-origin:left center}.adding .wand-arm{animation:wand-wave .7s ease-in-out}.adding .bubbles{animation:pop .6s ease-out}.stirring #spoon-art{transform-box:fill-box;transform-origin:center bottom;animation:spoon-swirl .7s ease-in-out}.success-rainbow .pip-body{animation:boing 1.6s ease-in-out infinite}.success-float .pip-body{animation:float-high 3s ease-in-out infinite}.success-wobble .pip-body,.effect-wobble.testing .pip-body{animation:wiggle .8s ease-in-out infinite}.effect-puff.testing .pip-body{animation:puff 1s ease-in-out infinite}.effect-spin.testing .pip-body{animation:wiggle .5s ease-in-out infinite}.effect-peek.testing .pip-body{animation:peek 1s ease-in-out infinite}.testing #brew-swirl{opacity:.3}.paused *,.paused *::before,.paused *::after{animation-play-state:paused!important}
@keyframes invite{0%,100%{box-shadow:0 4px 0 #c7a767,0 0 0 5px #ffe4a500}50%{box-shadow:0 4px 0 #c7a767,0 0 0 9px #ffe4a548}}@keyframes bob{50%{transform:translateY(-7px)}}@keyframes bubbles{50%{transform:translateY(-12px);opacity:.5}}@keyframes glimmer{50%{opacity:.4}}@keyframes book-float{50%{translate:0 -8px}}@keyframes blink{0%,44%,48%,100%{transform:scaleY(1)}46%{transform:scaleY(.12)}}@keyframes wand-wave{50%{transform:rotate(-14deg)}}@keyframes pop{50%{transform:translateY(-28px) scale(1.2)}}@keyframes spoon-swirl{30%{transform:rotate(-25deg)}70%{transform:rotate(12deg)}}@keyframes boing{0%,100%{transform:translateY(0) scaleY(.95)}50%{transform:translateY(-27px) scaleY(1.04)}}@keyframes float-high{50%{transform:translateY(-65px) rotate(5deg)}}@keyframes wiggle{25%{transform:skewX(-11deg) rotate(-6deg)}75%{transform:skewX(11deg) rotate(6deg)}}@keyframes puff{50%{transform:scale(1.25,.95)}}@keyframes peek{50%{transform:scale(.72)}}
@media(min-width:1601px){.world{border-radius:0 0 40px 40px}}
@media(max-width:1100px){.world{height:440px}.world-heading h1{font-size:39px}.world-heading{top:35px}.potion-goal{padding:9px 17px 9px 11px;bottom:40px}.potion-goal strong{font-size:16px}.bench-body{grid-template-columns:95px 1fr}.steps{padding:17px 10px}.play-area{padding:15px 20px}.world-heading>p{letter-spacing:2px;font-size:8px}.workbench{width:94%}}
@media(max-width:760px){.topbar{height:72px;padding:9px 4%;gap:9px}.brand{font-size:22px}.brand img{width:36px;height:36px}.brand small{font-size:7px;letter-spacing:1.7px}.utilities{gap:8px}.utility{width:49px;padding:5px 8px;border-radius:14px;min-height:48px}.utility>span{width:25px;height:25px}.utility small{font-size:8px}.world{height:370px}.factory-art{width:100%;height:100%}.world-heading{top:22px;left:4%}.world-heading h1{font-size:31px}.world-heading>p{font-size:7px;letter-spacing:1.7px;margin-bottom:7px}.room-tag{top:21px;right:3%;font-size:7px;letter-spacing:1px;padding:7px 9px}.potion-goal{bottom:24px;left:3%;padding:8px 12px;gap:8px;border-radius:16px}.potion-goal>span{width:25px;height:35px}.potion-goal small{font-size:6px;margin-bottom:4px}.potion-goal strong{font-size:12px}.scene-note{font-size:8px;bottom:10px;right:3%}.workbench{width:94%;margin-top:-5px;border-radius:23px}.guide-wrap{padding:12px 15px;gap:10px;min-height:100px;border-radius:20px 20px 0 0}.guide-portrait{width:52px;flex-basis:52px;height:58px}.guide-portrait svg{width:82px;height:103px;left:-17px}.guide strong{font-size:19px}.guide p{font-size:12px}.replay{width:53px;flex-basis:53px;height:59px;border-radius:15px}.replay>span{width:25px;height:25px}.replay small{font-size:9px}.bench-body{display:block}.steps{flex-direction:row;justify-content:center;border-right:0;border-bottom:1px solid #e8d8c0;border-radius:0;padding:10px 13px;gap:11px}.steps button{min-height:48px;width:100%;max-width:140px;justify-content:center;padding:6px 8px;gap:7px}.steps button>svg{width:25px;height:25px}.steps small{display:none}.play-area{padding:15px 18px 18px}.ingredient-list{gap:10px}.ingredient{padding:10px 4px;min-height:114px;border-radius:18px}.ingredient b{font-size:11px}.jar-art{width:61px;height:66px;padding:6px}.recipe-strip{margin-bottom:14px}.bench-footer{padding:0 10px}.bench-footer>span{font-size:8px}footer{padding:20px 10px;font-size:9px;gap:12px}}
@media(max-width:500px){.topbar{height:67px;padding:7px 12px}.brand{font-size:18px;gap:7px;letter-spacing:-.6px}.brand small{font-size:6px;letter-spacing:1.4px;margin-top:7px}.brand img{width:30px;height:34px}.utilities{gap:6px}.utility{width:48px;min-width:48px;padding:5px 8px;box-shadow:0 2px 0 #dfcfe6}.world{height:300px;border-bottom-width:5px}.scene .factory-art{width:100%;height:100%;object-fit:cover}.world-heading{top:16px;left:5%;}.world-heading h1{font-size:28px;letter-spacing:-1px}.world-heading>p{font-size:6px;margin-bottom:7px;letter-spacing:1.5px}.room-tag{display:none}.potion-goal{bottom:17px;left:12px;padding:6px 8px;background:#fff7e9ef;border-width:1px;gap:6px;border-radius:12px}.potion-goal>span{width:19px;height:29px}.potion-goal strong{font-size:10px}.potion-goal small{font-size:5px;letter-spacing:1px}.scene-note{bottom:7px;font-size:6px;max-width:60%;text-align:right}.workbench{width:calc(100% - 18px);border-width:2px;border-radius:21px}.guide-wrap{padding:10px 12px;gap:9px;min-height:99px}.guide-portrait{display:none}.guide strong{font-size:18px}.guide p{font-size:11px;line-height:1.4}.replay{flex-basis:50px;width:50px;height:56px;min-width:50px}.steps{padding:9px 11px;gap:7px}.steps button{gap:4px;font-size:10px;min-height:48px;border-radius:12px;padding:4px 5px}.steps button>svg{width:23px;height:23px}.play-area{padding:13px 11px 17px}.recipe-strip{gap:10px;margin-bottom:13px;min-height:40px}.recipe-label{font-size:9px}.recipe-pictures{gap:5px}.recipe-piece{width:33px;height:33px;border-radius:10px;padding:2px}.recipe-piece i{width:13px;height:13px;font-size:8px;line-height:13px;right:-3px;bottom:-3px}.recipe-detail{width:29px;height:29px}.recipe-detail b{width:16px;height:16px;font-size:10px;line-height:16px}.recipe-divider{margin:0 3px;font-size:13px}.ingredient-list{gap:7px}.ingredient{padding:10px 2px 8px;border-radius:15px;min-height:97px;gap:6px}.ingredient b{font-size:9px}.jar-art{width:50px;height:54px;padding:4px;border-radius:10px 10px 17px 17px}.jar-art:before{height:8px;top:-6px}.jar-art i{width:20px;height:20px;font-size:15px;line-height:16px;right:-5px;bottom:-3px}.bowl-row{gap:7px;margin:13px 0 10px;min-height:48px}.bowl-label{font-size:8px}.batch{gap:5px;padding:0}.batch button{width:48px;height:48px;padding:6px}.empty-bowl{font-size:10px}.next-button,.primary{min-height:51px;font-size:14px;padding:11px 18px;gap:9px}.secondary{padding:11px 15px;font-size:13px}.bench-footer{padding:0 8px;gap:3px;min-height:48px}.text-button{font-size:9px;padding:7px}.bench-footer>span{font-size:7px}.stir-play{min-height:174px;gap:20px}.stir-button{width:126px;height:126px;min-width:126px;border-width:5px}.stir-button>span{width:66px;height:66px}.stir-button b{font-size:17px}.round{width:52px;height:52px;min-width:52px;gap:0;padding:4px;border-radius:50%}.round>span{width:26px;height:26px}.round small{font-size:8px}.swirl-goal{width:67px;gap:9px}.dots{gap:5px}.dots i{width:18px;height:18px;font-size:10px;line-height:14px}.swirl-goal small{font-size:9px}.heat-options{gap:12px;min-height:174px}.heat-options button{width:90px;height:113px;gap:8px;border-radius:19px;font-size:14px}.heat-options button>span{width:54px;height:54px}.test-play{min-height:224px}.test-button{width:220px}.result-panel{min-height:235px;gap:13px}.result-heading{gap:8px}.result-heading h2{font-size:27px}.result-panel p{font-size:12px}.result-actions{gap:10px}.result-heading>svg{width:40px;height:50px}dialog{padding:35px 19px 24px;border-radius:26px}dialog h2{font-size:28px}#modal-copy>p{font-size:12px}.character-picks{gap:15px;margin:18px 0}.character-picks button{width:125px;padding:6px 9px 10px}.character-picks svg{height:143px}.discovery-shelf{gap:3px}.rainbow-bottle .shelf-bottle{width:85px;height:121px}.small-bottle .shelf-bottle{width:49px;height:70px}.shelf-potion b{font-size:10px}.shelf-potion small{font-size:8px}.help-pictures{gap:8px}.help-pictures svg{width:53px;height:53px}.settings{margin-top:20px}#modal-actions{margin-top:20px}#modal-actions button{min-width:135px}footer{font-size:8px;gap:9px}}
@media(max-width:360px){.brand img{display:none}.brand{font-size:17px}.topbar{padding:7px 10px}.utilities{gap:5px}.world{height:270px}.world-heading h1{font-size:25px}.world-heading>p{font-size:5.5px}.ingredient b{font-size:8px}.jar-art{width:44px;height:49px}.ingredient{min-height:92px}.recipe-strip{gap:6px}.recipe-pictures{gap:3px}.recipe-piece{width:29px;height:29px}.recipe-detail{width:25px;height:25px}.stir-play{gap:13px}.stir-button{width:113px;height:113px;min-width:113px}.steps button{font-size:9px;gap:3px}.steps button>svg{width:21px;height:21px}.heat-options{gap:9px}.heat-options button{width:80px}.guide strong{font-size:17px}.guide p{font-size:10px}.result-actions{flex-wrap:wrap}.discovery-shelf{gap:0}.rainbow-bottle .shelf-bottle{width:75px;height:107px}.small-bottle .shelf-bottle{width:43px;height:61px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Desktop is a complete play station: world and controls stay in view together. */
@media(min-width:1180px){
  main{display:grid;grid-template-columns:minmax(0,1fr) 520px;gap:20px;padding:18px 24px 10px;align-items:center;max-width:1700px}
  .world{height:calc(100dvh - 120px);min-height:600px;border:3px solid #cba8c5;border-radius:29px;box-shadow:0 7px 0 #d9c4c34d}
  .world-heading{left:6%;top:30px}.world-heading h1{font-size:39px}.world-heading>p{font-size:8px;letter-spacing:2px}.room-tag{right:5%;top:auto;bottom:117px;font-size:7px;padding:7px 10px;letter-spacing:1px}
  .potion-goal{left:6%;bottom:26px;padding:9px 14px;gap:10px;border-radius:18px}.potion-goal>span{width:29px;height:44px}.potion-goal strong{font-size:14px}.potion-goal small{font-size:7px;margin-bottom:5px}.scene-note{right:5%;bottom:14px;font-size:8px;max-width:50%;text-align:right}
  .workbench{width:100%;margin:0;border-radius:24px}.guide-wrap{padding:13px 16px;min-height:107px;gap:10px}.guide strong{font-size:20px}.guide p{font-size:12px}.guide-portrait{width:54px;flex-basis:54px;height:59px}.guide-portrait svg{width:85px;height:106px;left:-17px}.replay{width:53px;flex-basis:53px;height:59px;border-radius:15px}
  .bench-body{display:block;min-height:0}.steps{flex-direction:row;gap:10px;justify-content:center;border-right:0;border-bottom:1px solid #e8d8c0;border-radius:0;padding:13px 16px}.steps button{width:100%;max-width:120px;min-height:50px;justify-content:center;font-size:12px;padding:7px}.steps small{display:none}.steps button>svg{width:27px;height:27px}
  .play-area{padding:18px 17px 21px}.ingredient-list{gap:11px}.ingredient{min-height:124px;padding:12px 4px 10px}.ingredient b{font-size:11px}.jar-art{width:61px;height:66px;padding:6px}.recipe-strip{margin-bottom:20px;gap:15px}.recipe-piece{width:39px;height:39px}.recipe-detail{width:33px;height:33px}.bowl-row{margin:20px 0 16px;min-height:54px}.batch button{width:49px;height:49px}.bowl-label{font-size:9px}.next-button{min-height:54px}.bench-footer{padding:2px 12px}.bench-footer>span{font-size:8px}.text-button{font-size:10px}.stir-play,.heat-options{min-height:230px}.heat-options{gap:17px}.heat-options button{width:123px}.test-play{min-height:284px}.result-panel{min-height:350px}.result-heading h2{font-size:30px}.result-panel p{font-size:13px}
  footer{grid-column:1/-1;padding:3px 0;font-size:8px}
}
@media(min-width:1180px){.room-tag{top:25px;bottom:auto;right:4%}}
@media(min-width:1180px){footer{display:none}}
@media(min-width:1180px) and (max-height:800px){.topbar{height:68px;padding-top:5px;padding-bottom:5px}.utility{padding-top:4px;padding-bottom:4px}.world{height:calc(100dvh - 104px);min-height:570px}}
@media(min-width:1180px){.world{max-height:680px}}
/* Every attempt gets a gentle, readable magical response. */
.scene{isolation:isolate}.magic-particles,.ambient-sparkles{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:2}.magic-particle{position:absolute;display:block;width:var(--size);height:var(--size);background:var(--color);opacity:0;filter:drop-shadow(0 0 4px var(--color));animation:magic-burst 1.5s ease-out var(--delay) both;will-change:transform,opacity;clip-path:polygon(50% 0,61% 37%,100% 50%,63% 62%,50% 100%,38% 63%,0 50%,37% 37%)}.magic-particle.bubble{clip-path:none;border-radius:50%;background:radial-gradient(circle at 30% 27%,#ffffffdc 0 14%,transparent 17%),radial-gradient(circle at 40% 40%,#ffffff20 35%,var(--color));border:1px solid #fff9}.magic-particle.heart{clip-path:polygon(50% 95%,7% 48%,0 26%,10% 8%,30% 0,50% 17%,70% 0,90% 8%,100% 26%,93% 48%);background:#ffd1eb}.magic-caption{position:absolute;z-index:4;pointer-events:none;max-width:80%;transform:translateX(-50%);font-size:19px;font-weight:900;white-space:nowrap;color:#6f468f;background:#fff5dceF;border:2px solid #f6d486;border-radius:30px;padding:9px 17px;box-shadow:0 4px 0 #6b3a8b24}.magic-caption.appear{animation:magic-word 2.4s ease-out both}.ambient-sparkles{z-index:1}.ambient-sparkles span{position:absolute;color:#fff0b5;text-shadow:0 0 9px #ffe8ba;font-size:12px;opacity:.4;animation:ambient-drift 6s ease-in-out infinite}.next-clue{display:flex;align-items:center;gap:12px;text-align:left;border:2px solid #d7b5e6;background:linear-gradient(110deg,#f5e7ff,#fff0d4);border-radius:18px;padding:9px 14px;min-width:235px;max-width:100%;box-shadow:0 3px 0 #d9c4d5}.next-clue>span{width:46px;height:46px;flex-shrink:0;background:#fff8ef;border-radius:12px;padding:4px}.next-clue small{display:block;color:#9b76a4;font-size:8px;letter-spacing:1.4px;margin-bottom:5px}.next-clue b{font-size:15px;color:#6c438e}.next-clue>svg{width:27px;height:27px;margin-left:auto}.result-heading h2{max-width:350px}.result-panel:has(.next-clue){gap:12px}.result-panel:has(.next-clue) .result-heading>.pip-art{width:66px;height:55px}.result-panel:has(.next-clue) .result-heading h2{font-size:27px}.result-panel:has(.next-clue) p{font-size:13px}.result-panel:has(.next-clue) .primary{margin-top:3px}
@keyframes magic-burst{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}15%{opacity:1}75%{opacity:.85}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--turn)) scale(.35)}}
@keyframes magic-word{0%{opacity:0;translate:0 12px;scale:.88}16%,78%{opacity:1;translate:0 0;scale:1}100%{opacity:0;translate:0 -8px}}
@keyframes ambient-drift{0%,100%{opacity:.17;translate:0 0}50%{opacity:.75;translate:0 -10px}}
@media(max-width:500px){.magic-caption{font-size:12px;padding:6px 10px;border-width:1px}.result-panel:has(.next-clue){gap:10px;padding-top:3px;padding-bottom:4px}.result-panel:has(.next-clue) .result-heading h2{font-size:22px;max-width:195px}.result-panel:has(.next-clue) .result-heading>.pip-art{width:49px;height:43px}.result-panel:has(.next-clue) p{font-size:11px}.next-clue{min-width:210px;padding:6px 11px;gap:9px}.next-clue>span{width:36px;height:36px}.next-clue b{font-size:13px}.next-clue small{font-size:7px}.next-clue>svg{width:22px;height:22px}}
@media(prefers-reduced-motion:reduce){.magic-particle{animation:none!important;opacity:.65;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy)));filter:none}.magic-caption.appear{animation:none!important;opacity:1}.ambient-sparkles span{animation:none!important;opacity:.25}}
.reassuring .wand-arm{animation:wand-wave 1.2s ease-in-out 2}.testing.effect-puff #pip .pip-body>path:first-child{fill:#ffe9f5}.testing.effect-wobble #pip .pip-body>path:first-child{fill:#daf6d6}.testing.effect-spin #pip .pip-body>path:first-child{fill:#fff0c9}.testing.effect-peek #pip .pip-body>path:first-child{fill:#e4f5ff}
/* Enchanted-room pass: slow living scenery, clear action trails, soft light. */
.aurora-ribbons{animation:aurora-flow 14s ease-in-out infinite;transform-origin:700px 200px}.window-constellation{animation:constellation-glow 7s ease-in-out infinite}.cauldron-runes{opacity:.48;transition:opacity .5s}.rune-track{animation:runes-flow 18s linear infinite}.testing .cauldron-runes,.stirring .cauldron-runes,.adding .cauldron-runes,.success-rainbow .cauldron-runes{opacity:1}.magic-steam{opacity:.28;stroke-dasharray:44 110;animation:steam-curl 5s linear infinite}.library-firefly{animation:firefly-wander 11s ease-in-out infinite;filter:drop-shadow(0 0 6px #f9eab4)}.shelf-bottle:nth-of-type(11n)>path:nth-of-type(2){animation:bottle-glint 9s ease-in-out infinite}.extra-book{animation-duration:7s}.lantern{transform-origin:929px 0;animation:lantern-sway 9s ease-in-out infinite}.wizard-body{transform-box:fill-box;transform-origin:center bottom;animation:wizard-breathe 5s ease-in-out infinite}.pip-eyes{transform-box:fill-box;transform-origin:center;animation:blink 7s infinite}.wand-arm>path:last-child{filter:drop-shadow(0 0 5px #fff0a9)}.success-rainbow #giant-bottle{animation:rainbow-hover 4s ease-in-out infinite;filter:drop-shadow(0 0 12px #f5e4a1)}.success-rainbow .star-hiccups{animation:hiccup-stars 2.1s ease-in-out infinite}.narrating .guide-portrait{border-color:#bd92da;box-shadow:0 0 0 4px #e6c6fc55,0 0 18px #c7a1e855}.ambient-sparkles span{font-size:var(--glint-size,12px);color:var(--glint-color,#fff0b5);animation-duration:7s}.magic-particle{animation-duration:1.95s;filter:drop-shadow(0 0 4px var(--color))}.magic-caption.appear{animation-duration:2.6s}.magic-ripple{position:absolute;width:52px;height:28px;margin-left:-26px;margin-top:-14px;border:2px solid var(--ring-color);border-radius:50%;box-shadow:0 0 10px var(--ring-color),inset 0 0 8px var(--ring-color);animation:spell-ripple 1.6s ease-out both;pointer-events:none}.flying-ingredient{position:absolute;width:46px;height:46px;margin:-23px;border-radius:50%;background:#fff8dfb3;box-shadow:0 0 18px #fff1c9;padding:5px;animation:ingredient-flight .76s cubic-bezier(.3,.1,.6,1) both;pointer-events:none}.magic-caption{box-shadow:0 4px 0 #6b3a8b24,0 0 20px #fff0c740}.next-clue{box-shadow:0 3px 0 #d9c4d5,0 0 17px #d5b0f12e}
@keyframes aurora-flow{0%,100%{translate:-12px 0;opacity:.65}50%{translate:12px -8px;opacity:1}}
@keyframes constellation-glow{0%,100%{opacity:.5}50%{opacity:.95}}
@keyframes runes-flow{to{stroke-dashoffset:-176}}
@keyframes steam-curl{0%{stroke-dashoffset:150;opacity:.08}50%{opacity:.35}100%{stroke-dashoffset:0;opacity:.08}}
@keyframes firefly-wander{0%,100%{translate:0 0;opacity:.6}25%{translate:16px -13px;opacity:1}65%{translate:-13px -23px;opacity:.7}}
@keyframes bottle-glint{0%,65%,100%{opacity:.35}80%{opacity:1}}
@keyframes lantern-sway{0%,100%{rotate:-1deg}50%{rotate:1deg}}
@keyframes wizard-breathe{0%,100%{scale:1 1}50%{scale:1.006 1.009}}
@keyframes rainbow-hover{0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes hiccup-stars{0%,100%{translate:0 0;opacity:.55}35%{translate:7px -9px;opacity:1}70%{translate:12px -16px;opacity:.2}}
@keyframes spell-ripple{0%{opacity:.7;scale:.3}100%{opacity:0;scale:4 3}}
@keyframes ingredient-flight{0%{opacity:1;transform:translate(0,0) scale(.75) rotate(-15deg)}45%{opacity:1;transform:translate(calc(var(--flight-x)*.45),-95px) scale(1.08) rotate(10deg)}100%{opacity:.2;transform:translate(var(--flight-x),var(--flight-y)) scale(.35) rotate(30deg)}}
@keyframes magic-burst{0%{opacity:.7;transform:translate(-50%,-50%) scale(.65)}18%{opacity:1}70%{opacity:.85}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--turn)) scale(.35)}}
@media(max-width:500px){.flying-ingredient{width:32px;height:32px;margin:-16px;padding:3px}.magic-ripple{width:34px;height:18px;margin-left:-17px;margin-top:-9px}.ambient-sparkles span{font-size:calc(var(--glint-size,12px)*.8)}}
@media(prefers-reduced-motion:reduce){.aurora-ribbons,.window-constellation,.rune-track,.magic-steam,.library-firefly,.shelf-bottle,.extra-book,.lantern,.wizard-body,.pip-eyes,.star-hiccups,#giant-bottle{animation:none!important}.magic-ripple{animation:none!important;opacity:.35;scale:1.4}.flying-ingredient{display:none}.magic-particle{animation:none!important;opacity:.55;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy)));filter:none}}
/* Publication surfaces stay separate from the child's play controls. */
.preview-page{margin:0;overflow:hidden;background:#46366f}.preview-page .scene{position:fixed;inset:0}.preview-page .factory-art{width:100%;height:100%}.information-page main{display:block;max-width:780px;margin:0 auto;padding:35px 24px 60px}.information-page h1{font:700 38px Georgia,serif;margin:30px 0 20px}.information-page h2{font-size:22px;margin:28px 0 12px}.information-page p{font-size:16px;line-height:1.7;margin:12px 0}.information-page p a{color:#69449b;text-underline-offset:4px}.information-page .primary{color:#fff8e9;text-decoration:none}.information-page .small-copy{font-size:12px;color:#806d86}footer a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;color:#806b87;text-underline-offset:3px}
@media(min-width:1180px){footer{display:flex;grid-column:1/-1;padding:0;gap:16px;min-height:44px}}