*{box-sizing:border-box} :root{color-scheme:light;--ink:#304b48;--muted:#738783;--green:#3f7772;--cream:#fbf8f0;--line:#dce5dc;font-family:-apple-system,BlinkMacSystemFont,'Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif}body{margin:0;background:var(--cream);color:var(--ink)}button,a,input{touch-action:manipulation}button{font:inherit;color:inherit;cursor:pointer;min-height:44px;border:1px solid var(--line);border-radius:9px;background:#fffdf6;padding:11px 15px}button:hover{border-color:#76a39b;background:#eef5ee}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible,canvas:focus-visible,summary:focus-visible{outline:3px solid #d18f66;outline-offset:3px}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline}main{max-width:1190px;margin:auto;padding:0 36px}.top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding:17px 0;font-size:12px;letter-spacing:.04em}.top div{display:flex;gap:7px}.top button{background:transparent;border:0;padding:7px 10px}.eyebrow{font-size:10px;letter-spacing:.2em;font-weight:650;color:var(--muted)}.title{position:relative;padding:38px 0 28px}.title h1{font-family:'Hiragino Mincho ProN','Yu Mincho',serif;font-size:43px;font-weight:500;letter-spacing:.1em;margin:13px 0 10px}.title h1 span{display:inline-block;font-family:inherit;font-size:19px;color:#7a9286;margin-left:27px;letter-spacing:.08em}.title>p:last-of-type{font-size:13px;line-height:1.9;color:var(--muted)}.seal{position:absolute;right:25px;top:45px;color:#df8474;font:68px 'Yu Mincho',serif;border:1px solid #e5b1a1;border-radius:50%;width:105px;height:105px;text-align:center;line-height:100px;transform:rotate(-9deg)}.workspace{display:grid;grid-template-columns:minmax(0,1.85fr) minmax(270px,1fr);border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fffdf7;box-shadow:0 20px 65px #3c60550b}.scene{min-width:0;position:relative;background:#eff4ed}.steps{display:flex;list-style:none;justify-content:space-around;padding:22px 12px 0;margin:0;font-size:11px;letter-spacing:.03em;color:#92a19a}.steps li{padding-bottom:13px;border-bottom:2px solid transparent}.steps [aria-current]{color:var(--green);border-color:var(--green)}#ice-canvas{display:block;width:100%;height:auto;touch-action:none} .meters{display:grid;grid-template-columns:1fr 1fr;padding:16px 22px 5px;gap:24px}.meters>div{display:grid;grid-template-columns:1fr auto;align-items:center;gap:7px}.meters span{font-size:11px;color:var(--muted)}.meters strong{font-size:19px;font-weight:500;font-variant-numeric:tabular-nums}.meters meter{width:100%;height:6px;grid-column:1/-1;accent-color:#68978b}.meter-note{grid-column:1/-1}.status{font-size:12px;line-height:1.8;min-height:60px;margin:12px 22px 16px;color:#4c6e62}.panel{padding:27px 24px;display:flex;flex-direction:column;border-left:1px solid var(--line)}h2{font-family:'Yu Mincho',serif;font-size:23px;font-weight:500;line-height:1.6;margin:10px 0 16px}.guide{font-size:12px;line-height:1.9;color:var(--muted);margin-bottom:25px}fieldset{border:0;padding:0;margin:22px 0}legend{font-size:11px;margin-bottom:10px}legend small{display:block;font-size:10px;color:var(--muted);margin-top:5px}.segmented{display:flex;gap:5px}.segmented button{flex:1;font-size:12px}.segmented [aria-pressed=true]{background:#e0ede3;border-color:#8db3a1}.hold{width:100%;background:#e7efe6;border-color:#c1d4c3;text-align:left;font-size:12px;display:flex;justify-content:space-between;align-items:center;user-select:none;touch-action:none;min-height:58px}.hold span{font:28px Georgia;color:#5a8e7e}.hold[aria-pressed=true]{background:#cce0d2}.hint{font-size:10px;color:var(--muted);margin:12px 0 24px}.primary{background:var(--green);color:#fff;border:0;width:100%;min-height:50px;font-size:12px;letter-spacing:.06em}.primary:hover{background:#315f5a;color:#fff}.quiet{border:0;background:transparent;font-size:11px;width:100%;margin-top:8px}.foot-actions{margin-top:auto;padding-top:28px;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:10px}.foot-actions button{font-size:10px;border:0;padding:8px;background:transparent}.flavors{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin:17px 0}.flavors button{padding:8px 7px;font-size:11px;display:flex;gap:7px;align-items:center}.flavors button:before{content:'';width:13px;height:13px;border-radius:50%;background:var(--flavor);flex-shrink:0}.flavors [aria-pressed=true]{border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}.toppings{display:flex;flex-wrap:wrap;gap:6px}.toppings button{font-size:11px;padding:8px 10px;min-height:44px}.toppings [aria-pressed=true]{background:#e0ede3;border-color:#83a994}.toppings [aria-pressed=true]:before{content:'✓ ';font-size:10px}footer{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);line-height:1.9;padding:27px 0 40px}footer nav{display:flex;gap:22px;align-items:center}dialog{border:1px solid var(--line);border-radius:18px;width:min(520px,calc(100% - 30px));max-height:90dvh;overflow:auto;background:var(--cream);color:var(--ink);padding:30px;box-shadow:0 30px 100px #223c3840}dialog::backdrop{background:#29433c85;backdrop-filter:blur(4px)}dialog h2{font-size:24px}.recipe{padding:0;list-style:none;margin:25px 0}.recipe li{padding:16px 0;border-top:1px solid var(--line)}.recipe b{font-size:13px;font-weight:600}.recipe p{font-size:12px;line-height:1.9;color:var(--muted);margin:8px 0 0}.small{font-size:10px;line-height:1.8;color:var(--muted)}.result{width:min(660px,calc(100% - 24px));padding:28px}.result-top{display:flex;justify-content:space-between;gap:6px;align-items:center}#secret{font-size:10px;color:#a37a32}#result-canvas{display:block;width:100%;height:auto;border-radius:10px}#result-note{font-size:12px;line-height:1.8}.result-buttons{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}.result-buttons button{font-size:11px;flex:1;white-space:nowrap}.result-buttons .primary{flex-basis:100%}.reference{border:1px solid var(--line);border-radius:8px;font-size:11px;padding:13px;margin-top:18px}.reference summary{cursor:pointer;min-height:24px}.reference canvas{width:100%;height:auto;margin-top:13px;border-radius:7px}.support{display:flex;justify-content:space-between;border-top:1px solid var(--line);margin-top:19px;padding:20px 0 0;font-size:11px}.support span{font-size:10px;color:var(--muted)}.reveal{position:fixed;inset:0;z-index:20;display:grid;place-content:center;text-align:center;background:#f7f8efed}.reveal[hidden],[hidden]{display:none!important}.reveal span{font:75px 'Yu Mincho',serif;color:#6c9e90;animation:breathe 1.1s ease-in-out infinite}.reveal p{font:18px 'Yu Mincho',serif}@keyframes breathe{50%{transform:translateY(-10px);opacity:.5}}@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}@media(max-width:760px){main{padding:0 16px}.title{padding:28px 0 20px}.title h1{font-size:34px}.title h1 span{display:block;margin:9px 0 0;font-size:16px}.seal{width:73px;height:73px;line-height:70px;font-size:45px;right:8px;top:52px}.workspace{grid-template-columns:1fr}.panel{border-left:0;border-top:1px solid var(--line);padding:23px 20px}.scene .status{min-height:45px}.panel .guide{margin-bottom:15px}.panel fieldset{margin:16px 0}.panel .flavors{grid-template-columns:repeat(4,1fr)}.flavors button{flex-direction:column;gap:6px;font-size:10px;padding:9px 3px;min-height:58px}.foot-actions{padding-top:17px}.meters{padding:12px 17px 0;gap:18px}.meters strong{font-size:17px}.steps{font-size:10px;padding:18px 10px 0}footer{display:block}footer nav{margin-top:15px}.top{font-size:10px}.top div{gap:0}.top button{font-size:11px;padding:7px}.result{padding:19px}.result h2{font-size:21px}}
@media(min-width:761px){.workspace{grid-template-columns:minmax(0,1.45fr) minmax(320px,1fr)}.panel .flavors{grid-template-columns:repeat(4,1fr);gap:5px}.panel .flavors button{padding:7px 4px;gap:4px;font-size:10px}.panel .flavors button:before{width:9px;height:9px}.panel .toppings{gap:5px}.panel .toppings button{padding:7px 9px}}
@media(min-width:761px){body main{max-width:1080px}body .top{padding:2px 0}body .title{padding:9px 0 12px}body .title h1{font-size:30px;margin:4px 0}body .title>p:last-of-type{line-height:1.6;margin:3px 0}body .title>p:last-of-type br{display:none}}
/* Bring the bowl and the current action into the same view. */
main{max-width:1160px;padding:0 24px}.top{padding:7px 0}.title{padding:13px 0 15px}.title .eyebrow{margin:0;font-size:9px}.title h1{margin:6px 0;font-size:34px}.title h1 span{font-size:15px}.title>p:last-of-type{margin:5px 0;font-size:11px}.seal{width:72px;height:72px;font-size:44px;line-height:68px;top:21px}.steps{padding:12px 10px 0;font-size:10px}.steps li{padding-bottom:8px}.panel{padding:18px}.panel .eyebrow{margin:0 0 5px}h2{margin:5px 0 10px;font-size:21px}.guide{margin:0 0 13px;font-size:11px}.panel fieldset{margin:13px 0}.hold{min-height:46px}.hint{margin:8px 0 15px}.meters{padding:9px 18px 0}.meters strong{font-size:16px}.status{font-size:11px;min-height:36px;margin:8px 18px 10px}.foot-actions{padding-top:14px}#result-title:focus{outline:none}.result-buttons button{min-height:44px}
@media(max-width:760px){main{padding:0 12px}.top{padding:3px 0;font-size:9px}.title{padding:12px 0}.title h1{font-size:27px}.title h1 span{display:inline-block;font-size:12px;margin:0 0 0 10px}.title>p:last-of-type{display:none}.seal{display:none}.workspace{grid-template-columns:1fr}.steps{font-size:9px;padding-top:10px}.meters{gap:14px;padding:8px 14px 0}.meters span{font-size:10px}.meters strong{font-size:14px}.scene .status{min-height:32px;line-height:1.65;margin:7px 14px 9px}.panel{padding:14px}.panel .guide{margin-bottom:10px;line-height:1.65}.panel h2{font-size:20px;margin:3px 0 7px}.panel fieldset{margin:10px 0}.panel .flavors{margin:10px 0;gap:5px}.flavors button{min-height:48px;padding:7px 2px;font-size:10px}.hint{margin:8px 0 12px}.hold{min-height:46px}.foot-actions{padding-top:8px}.result-buttons button{flex-basis:45%;white-space:normal}.top div{flex-wrap:wrap;justify-content:flex-end}.top>a{min-width:120px}}