:root{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB",sans-serif;color:#152456;background:#edf1f9;font-synthesis:none;font-weight:500}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible,input:focus-visible{outline:3px solid #586fd0;outline-offset:4px}button:disabled{cursor:default;opacity:.65}button:active:not(:disabled){transform:translateY(2px)}[hidden]{display:none!important}#app{height:100svh;min-height:650px;max-width:460px;margin:auto;overflow:hidden;position:relative;display:flex;flex-direction:column;padding:26px 20px max(20px,env(safe-area-inset-bottom));isolation:isolate;background:radial-gradient(ellipse at 40% 44%,#e7edff00 0%,#e6edff55 42%,#cbd8fc70 100%),linear-gradient(125deg,#d5e0ff,#d5dcfa 50%,#d9e3ff)}.toolbar{height:46px;display:flex;justify-content:space-between;align-items:center;flex-shrink:0;z-index:4}.round{border:1.5px solid #ffffffcc;background:linear-gradient(135deg,#ffffffbb,#edf0ff7a);border-radius:50%;width:46px;height:46px;display:grid;place-items:center;font-size:27px;box-shadow:0 2px 5px #7e91c50b;flex-shrink:0}.round img{width:23px;height:23px}.page-title{text-align:center;height:90px;flex-shrink:0;padding-top:7px;z-index:2;pointer-events:none}.page-title h1{font-size:27px;line-height:1.3;letter-spacing:.5px;margin:0 0 8px;font-weight:750}.page-title p{font-size:13px;letter-spacing:2px;color:#485b89;margin:0}.stage{position:absolute;left:-6%;width:112%;top:154px;bottom:184px;z-index:0;touch-action:pan-y}.stage canvas{display:block;width:100%;height:100%;touch-action:none}.loading{position:absolute;top:40%;left:0;width:100%;text-align:center;font-size:14px;color:#50638c}.dock{margin-top:auto;z-index:3;border:1.5px solid #fff;border-radius:29px;padding:20px 20px 16px;background:linear-gradient(130deg,#fafdfff0,#f2f4ffc7);box-shadow:0 8px 25px #7486be0a;flex-shrink:0;min-height:182px}.primary{width:100%;height:76px;display:flex;align-items:center;justify-content:center;gap:17px;border-radius:40px;border:2px solid #23356d;background:linear-gradient(155deg,#6375a9 0%,#3d4c82 45%,#354578 80%,#536493);box-shadow:inset 0 2px 3px #bdcaf8bd,inset 0 -3px 5px #1b2b60,0 3px 0 #c4cdeb,0 9px 12px #43538340;color:#fff;font-weight:650;font-size:21px;letter-spacing:.5px;text-shadow:0 1px 2px #26345b}.button-symbol{font-size:30px;font-weight:400}.shade-row{display:flex;gap:28px;align-items:center;margin-top:24px}.shade-row label{font-size:16px;white-space:nowrap}.shade-row label>span{font-size:23px;margin-right:7px}.range-wrap{flex:1}.range-labels{display:flex;justify-content:space-between;font-size:13px;color:#50618a;padding:2px 0 0}input[type=range]{width:100%;accent-color:#415588;height:22px;cursor:pointer;margin:0}#shade{appearance:none;background:transparent}#shade::-webkit-slider-runnable-track{height:6px;border-radius:4px;background:linear-gradient(to right,#3f528b,#d1daf1);box-shadow:0 1px 1px white}#shade::-webkit-slider-thumb{appearance:none;width:27px;height:27px;background:linear-gradient(145deg,#ffe58b,#f6b92d);border:1px solid #cb9724;border-radius:50%;margin-top:-11px;box-shadow:inset 0 0 0 2px #fff3b6,0 2px 4px #5b638544}#shade::-moz-range-thumb{width:24px;height:24px;background:#f9ca52;border:2px solid #fff3b6;border-radius:50%}.text-button{display:block;border:0;background:transparent;font-size:13px;min-height:36px;padding:8px 5px;color:#455a8b;margin:9px auto -5px}.text-button span{margin-left:5px}.gesture{position:absolute;z-index:2;top:56%;left:21%;border:0;background:#fff8;border-radius:18px;padding:8px 12px;font-size:11px;color:#263c70;box-shadow:0 3px 15px #7991b622;pointer-events:auto;backdrop-filter:blur(8px)}.gesture span{font-size:24px;vertical-align:middle;margin-right:6px}.category{display:flex;gap:14px;align-items:center;margin-top:12px;z-index:2}.category>span:first-child{background:#172859;color:white;padding:10px 17px;border-radius:24px;font-size:13px;box-shadow:inset 0 1px 2px #7987ba}.category-note{font-size:12px;color:#627299}.home-panel{text-align:center;z-index:3;margin-top:auto;flex-shrink:0;padding:0 14px}.home-panel h2{font-size:28px;margin:0 0 8px;letter-spacing:.5px}.home-panel p{font-size:14px;letter-spacing:.3px;margin:0 0 20px;color:#4e608c}.home-panel .primary{height:58px;max-width:260px;margin:auto;font-size:17px}.edition{display:block;font-size:11px;letter-spacing:1.5px;color:#687b9f;margin-top:18px}.explanation{display:flex;align-items:center;gap:20px}.detail-view{width:44%;height:92px;overflow:hidden;border-radius:17px;background:linear-gradient(130deg,#41404a,#765844);flex-shrink:0}.detail-view canvas{width:100%;height:100%;display:block}.explanation p{font-size:16px;line-height:1.65;margin:6px 0 0}.small-label{font-size:10px;letter-spacing:.5px;color:#697696}.replay-controls{display:flex;gap:13px;align-items:center;margin-top:18px}.replay-controls input{min-width:30px;flex:1}.soft{border:1.5px solid #fff;background:linear-gradient(140deg,#fcfdffab,#e9eeff77);border-radius:20px;box-shadow:0 3px 6px #8999c519;min-height:49px;padding:0 14px;font-size:16px}.inside-panel{padding:16px 16px 10px}.inside-panel .round{width:47px;height:47px}.inside-panel .soft{min-width:58px;padding:0 8px;font-size:14px}.inside-panel .text-button{margin-top:4px;font-size:11px;min-height:26px}.done-panel{text-align:center;padding:22px 16px 20px}.done-panel h2{font-size:26px;margin:0 0 9px}.done-panel p{font-size:14px;color:#4e608c;margin:0 0 24px}.done-actions{display:flex;gap:14px}.done-actions .primary,.done-actions .soft{flex:1;height:62px;border-radius:21px;font-size:17px;gap:10px;white-space:nowrap}.done-actions span{font-size:23px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}#app[data-screen=home] .page-title{padding-top:18px;height:115px}#app[data-screen=home] h1{font-size:36px;letter-spacing:1px}#app[data-screen=home] .page-title p{font-size:14px;letter-spacing:.3px}#app[data-screen=home] .stage{top:225px;bottom:200px}#app[data-screen=inside] .stage{bottom:224px}#app[data-screen=done] .stage{top:137px;bottom:202px}#app[data-screen=done] .page-title{opacity:0}dialog{width:calc(100% - 40px);max-width:390px;border:1.5px solid white;border-radius:27px;background:#f1f4ff;color:#26365f;padding:23px;box-shadow:0 20px 90px #22345e44}dialog::backdrop{background:#19264a44;backdrop-filter:blur(7px)}.dialog-head{display:flex;justify-content:space-between;align-items:center}.dialog-head h2{font-size:21px;margin:0}.setting-row{display:flex;justify-content:space-between;padding:25px 0 15px}.setting-row input{width:22px;height:22px;accent-color:#3b4e84}dialog p{font-size:13px;line-height:1.9;color:#53658c}dialog .note{font-size:11px;color:#7a87a6}.full{width:100%;margin-top:12px}@media(min-width:650px){body{padding:24px}#app{height:calc(100svh - 48px);min-height:780px;max-height:920px;border-radius:26px;box-shadow:0 20px 65px #637ba51c}}@media(max-height:740px) and (max-width:649px){#app{padding:16px 16px 20px;min-height:580px}.toolbar{height:40px}.toolbar .round{height:40px;width:40px}.page-title{height:78px}.page-title h1{font-size:24px}.stage{top:123px;bottom:169px}.dock{min-height:158px;padding:15px}.primary{height:63px;font-size:19px}.shade-row{margin-top:18px}.category{margin-top:3px}.category-note{font-size:10px}#app[data-screen=home] .page-title{height:104px;padding-top:12px}#app[data-screen=home] h1{font-size:31px}#app[data-screen=home] .stage{top:199px;bottom:178px}.home-panel h2{font-size:25px}.home-panel p{font-size:12px;margin-bottom:15px}.home-panel .primary{height:49px}.edition{margin-top:12px}.inside-panel .detail-view{height:72px}.explanation p{font-size:14px}.replay-controls{margin-top:12px}#app[data-screen=inside] .stage{bottom:210px}#app[data-screen=done] .stage{top:110px;bottom:186px}.done-panel p{margin-bottom:18px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

#app[data-screen=home] .stage{left:0;width:100%}#app[data-screen=play] .stage{top:143px;bottom:177px}#app[data-screen=inside] .stage{top:147px}.gesture{left:28%;top:59%}

.collection{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin:16px -10px 0}.machine-card{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:81px;background:#eef2ff80;border:1.5px solid #ffffffbb;border-radius:18px;text-decoration:none;color:#53658e;padding:3px 2px 6px;font-size:10px;gap:0}.machine-card img{width:100%;height:53px;object-fit:contain;filter:drop-shadow(0 3px 2px #5c6f9025)}.machine-card[aria-current=true]{border-color:#879dff;box-shadow:0 0 0 2px #fffc,0 5px 13px #7f95d744;background:#f4f7ffc9;color:#172b62}.machine-card:hover{background:#fff9}.home-panel .primary{height:50px;font-size:16px}.home-panel p{margin-bottom:13px}.home-panel h2{font-size:26px}.prep-status{margin:0 0 12px;text-align:center;font-size:11px;color:#687ba0}.shade-row label>span#setting-label{font-size:16px;margin:0}#app[data-screen=home] .stage{top:214px;bottom:277px}#app[data-screen=home] .page-title{height:105px}#app[data-machine=blender] .stage{left:0;width:100%}#app[data-machine=coffee] .stage{left:0;width:100%}#app[data-machine=kettle] .stage{left:0;width:100%}#app[data-machine]:not([data-machine=toaster])[data-screen=play] .stage{bottom:207px}
@media(max-height:740px) and (max-width:649px){.collection{margin-top:12px;gap:7px}.machine-card{min-height:69px;border-radius:15px}.machine-card img{height:43px}.home-panel h2{font-size:23px}.home-panel p{font-size:11px}.home-panel .primary{height:43px}.prep-status{margin-bottom:8px}#app[data-screen=home] .stage{top:184px;bottom:253px}#app[data-machine]:not([data-machine=toaster])[data-screen=play] .stage{top:124px;bottom:190px}}
@media(min-width:650px) and (max-height:850px){body{padding:12px}#app{height:calc(100svh - 24px);min-height:650px;max-width:393px;padding-top:16px}.toolbar{height:40px}.toolbar .round{width:40px;height:40px}#app[data-screen=home] .page-title{height:96px;padding-top:10px}#app[data-screen=home] h1{font-size:31px}.category{margin-top:3px}.category-note{font-size:10px}#app[data-screen=home] .stage{top:181px;bottom:248px}.home-panel h2{font-size:23px}.home-panel p{font-size:11px}.home-panel .primary{height:43px}.collection{margin-top:12px}.machine-card{min-height:69px}.machine-card img{height:43px}.primary{height:60px;font-size:18px}.dock{min-height:160px;padding:15px}.shade-row{margin-top:17px}.prep-status{margin-bottom:8px}#app[data-screen=play] .stage{top:123px}#app[data-screen=inside] .stage{top:123px}.inside-panel .detail-view{height:75px}.explanation p{font-size:14px}}