:root{--paper:#faf7f0;--ink:#363f35;--muted:#73796b;--green:#46583e;--red:#b66d55;--line:#dedfd0;--light:#eef0e4}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.65 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif}button,input,textarea{font:inherit}button,a,input,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{opacity:.5;cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #b66d55;outline-offset:5px}header{height:116px;max-width:1460px;margin:auto;padding:0 5%;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;gap:15px;align-items:center;text-decoration:none;color:var(--ink);font:600 25px Georgia,serif;letter-spacing:-.8px}.brand small{display:block;font:11px/2.4 -apple-system,sans-serif;letter-spacing:2px;color:var(--muted)}.brand-mark{font:italic 45px Georgia;position:relative;letter-spacing:-14px;width:46px;transform:rotate(-8deg)}.brand-mark span{color:var(--red)}.basket-link{background:none;border:1px solid #d9dccd;border-radius:40% 35% 40% 30% / 10% 20% 15% 20%;padding:10px 20px;color:var(--green);font-size:14px}.basket-link span{display:inline-grid;place-items:center;background:#e8ecdf;border-radius:50%;min-width:24px;height:24px;margin-left:12px}main{max-width:1460px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(320px,1fr);gap:5%;padding:22px 5% 26px;align-items:center}.scene-side{min-width:0}.scene-caption{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.eyebrow{font-size:11px;letter-spacing:2.2px;color:#777e6b;font-weight:600}.shop-label{font-size:12px;letter-spacing:2px;border-bottom:1px solid #adba9e;padding:3px 0;color:var(--green)}.scene{position:relative;isolation:isolate;width:100%;aspect-ratio:1;border-radius:5px;overflow:hidden}.scene>img{width:100%;height:100%;display:block;object-fit:contain;mix-blend-mode:multiply}.scene-note{font-family:Georgia,"Songti SC",serif;text-align:center;color:var(--muted);font-size:14px;margin:18px 0 0}.workspace{padding:28px 0;max-width:400px;width:100%}h1{font-family:Georgia,"Songti SC","Noto Serif CJK SC",serif;font-size:clamp(30px,3.1vw,45px);line-height:1.4;letter-spacing:1px;font-weight:500;margin:18px 0}.intro{color:var(--muted);line-height:1.9;font-size:15px;margin:0 0 28px}label{display:block;font-size:14px;margin-bottom:9px}textarea{width:100%;resize:none;padding:15px 16px;border:1px solid #cacfbf;border-radius:6px 8px 5px 9px;background:#fffdf8;color:var(--ink);font-size:16px;line-height:1.7}textarea::placeholder{color:#93998a}.form-row{display:flex;justify-content:space-between;font-size:12px;color:#8a907f;margin:5px 0 22px}.music-label{margin:0 0 12px}.sound-options{display:grid;grid-template-columns:1fr 1fr;gap:9px}.sound{border:1px solid #dedfd2;background:transparent;border-radius:7px;text-align:left;padding:11px 13px;position:relative;color:var(--ink)}.sound strong{display:block;font-weight:500;font-size:14px}.sound small{display:block;font-size:12px;color:var(--muted);margin-top:2px}.sound.selected{border-color:var(--green);background:#edf0e5}.sound.selected:after{content:'✓';position:absolute;right:12px;top:12px;color:var(--green);font-size:12px}.audio-row{display:flex;align-items:center;justify-content:space-between;margin:12px 0 22px;gap:12px}.text-button{border:0;background:none;color:var(--green);font-size:13px;padding:4px 0}.volume{display:flex;align-items:center;gap:8px;margin:0;font-size:12px;color:var(--muted)}input[type=range]{width:75px;accent-color:var(--green)}.primary{width:100%;border:1px solid var(--green);border-radius:7px 10px 8px 6px;padding:16px 22px;background:var(--green);color:#fffdf3;display:flex;justify-content:space-between;align-items:center;transition:transform .15s,background .15s}.primary:hover{background:#36482e;transform:translateY(-2px)}.primary span{font:14px Georgia,serif;letter-spacing:.5px}.gentle{font-size:12px;color:var(--muted);text-align:center;margin:12px 0 0}.demo-button{display:flex;justify-content:space-between;gap:12px;width:100%;border:0;border-top:1px dashed #d5d8c9;background:none;color:var(--muted);font-size:12px;padding:18px 0 0;margin-top:26px}footer{max-width:1460px;margin:0 auto;padding:20px 5% 28px;display:flex;justify-content:space-between;color:#8a907f;font-size:12px;letter-spacing:.5px}.oven-shade{position:absolute;left:34.2%;top:55.55%;width:29.7%;height:10.8%;background:#514b3e;border-radius:4%;opacity:.95;z-index:1}.oven-hotspot{position:absolute;left:28.5%;top:45%;width:43%;height:28%;background:none;border:0;border-radius:16%;z-index:3}.oven-hotspot:hover{box-shadow:0 0 0 2px #b66d5540}.dough-place{position:absolute;left:40%;top:54.5%;width:19%;height:14%;z-index:2;display:grid;place-items:center}.dough-place:empty:after{content:'准备好，就开炉吧';font-size:clamp(8px,.8vw,12px);color:#e6decd;letter-spacing:1px}.sprite{background-image:url('assets/breads.png');background-size:200% 200%;background-repeat:no-repeat;width:100%;aspect-ratio:1;background-position:0 0}.sprite.croissant{background-position:100% 0}.sprite.bear{background-position:0 100%}.sprite.loaf{background-position:100% 100%}.baking .oven-shade{background:#735038;box-shadow:0 0 25px #edbd6266 inset}.baking .dough-place .sprite{transform:scale(var(--rise,.65));filter:sepia(var(--gold,0));transition:transform 2s,filter 2s}.baking .oven-shade{animation:ovenGlow 5s ease-in-out infinite}.baking .oven-hotspot{cursor:default}.baking .scene-note{color:var(--red)}@keyframes ovenGlow{50%{box-shadow:0 0 25px #f4c87799 inset}}.session-tag{font-size:12px;color:var(--red);letter-spacing:2px;margin:0 0 14px}.task-quote{border-left:2px solid #d5bc9d;padding:0 0 0 16px;color:var(--muted);overflow-wrap:anywhere}.timer{font:400 34px Georgia,serif;letter-spacing:2px;margin:32px 0 3px;font-variant-numeric:tabular-nums}.timer.hidden-time{font-size:20px;letter-spacing:1px}.session-controls{margin-top:24px;display:flex;align-items:center;gap:24px}.secondary{width:100%;border:1px solid #cbd0c0;background:transparent;color:var(--green);padding:12px 16px;border-radius:7px;margin-top:10px}.small-note{font-size:12px;color:var(--muted)}.progress{height:3px;background:#e5e4d6;border-radius:2px;margin:22px 0 10px;overflow:hidden}.progress>i{display:block;height:100%;background:#b88b57;transition:width 1s linear}.reveal-art{width:185px;margin:10px auto}.reveal{text-align:center}.reveal h1{margin:4px 0}.reveal .primary{justify-content:center;margin-top:26px}.pill{display:inline-block;border:1px solid #d4dac8;color:#747f66;border-radius:30px;padding:3px 13px;font-size:12px}.dialog-heading{font:500 30px/1.4 Georgia,"Songti SC",serif;margin:8px 0 12px}dialog{width:min(600px,calc(100% - 32px));max-height:85vh;border:1px solid #d2d6c4;background:var(--paper);border-radius:13px;padding:35px;color:var(--ink);box-shadow:0 18px 90px #222c2430}dialog::backdrop{background:#30392c60;backdrop-filter:blur(4px)}.close{position:absolute;right:15px;top:8px;border:0;background:none;font-size:28px;color:var(--muted)}.empty{padding:38px 15px;text-align:center;border:1px dashed #cbd2bf;border-radius:8px;margin-top:24px;color:var(--muted)}.collection{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:25px 0}.bread-card{background:#fffaf0;border:1px solid #dedfce;border-radius:8px;padding:10px;color:var(--ink)}.bread-card .sprite{max-width:100px;margin:auto}.bread-card strong{display:block;font-size:14px}.bread-card small{font-size:12px;color:var(--muted)}.toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);background:#3e5037;color:white;padding:10px 22px;border-radius:8px;opacity:0;pointer-events:none;transition:.2s;z-index:20;font-size:14px}.toast.visible{opacity:1;transform:translate(-50%,0)}.reveal-in{animation:revealIn .65s both}@keyframes revealIn{from{opacity:0;transform:translateY(25px) rotate(-8deg) scale(.7)}to{opacity:1;transform:none}}.opening .scene{animation:rumble .18s 5}.opening .oven-shade{background:#e7b368;box-shadow:0 0 30px #efcf88}@keyframes rumble{50%{transform:translateX(2px)}}@media(min-width:1600px){main{padding-top:35px}.scene{max-width:740px}}@media(max-width:900px){header{height:90px;padding:0 6%}main{gap:4%;padding:15px 5%;grid-template-columns:1.15fr 1fr}.scene-caption .eyebrow{display:none}h1{font-size:31px}.workspace{padding:10px 0}.scene-note{font-size:12px}.sound{padding:9px}.sound.selected:after{right:5px;top:4px}.sound strong{font-size:13px}.sound small{font-size:11px}}@media(max-width:680px){header{height:85px}.brand{font-size:22px}.brand small{font-size:9px}.basket-link{padding:7px 12px;font-size:12px}.basket-link span{margin-left:4px}main{display:flex;flex-direction:column;padding:0 6% 25px;gap:20px}.scene-side{width:100%}.scene-caption{margin:4px 0 8px}.scene-caption .eyebrow{display:inline;font-size:9px;letter-spacing:1px}.shop-label{font-size:10px}.scene{max-width:460px;margin:auto}.scene-note{margin-top:7px}.workspace{max-width:460px;padding:5px 0}h1{font-size:32px;margin:10px 0 12px}h1 br{display:none}.intro br{display:none}.intro{font-size:14px;margin-bottom:22px}.sound strong{font-size:14px}.sound small{font-size:12px}.sound{padding:12px}.sound.selected:after{right:12px;top:12px}.eyebrow{font-size:10px}footer{padding:12px 6% 22px;font-size:10px}footer span:last-child{display:none}.baking main,.opening main{gap:12px}.baking .workspace{text-align:center}.baking .task-quote{border:0;padding:0}.baking .session-controls{justify-content:center}.timer{margin-top:15px}.collection{gap:8px}dialog{padding:30px 22px}.dough-place:empty:after{font-size:9px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
.oven-shade{top:54.2%;height:12.4%;opacity:1}.dough-place{top:53.6%}
@media(min-width:681px) and (max-height:850px){header{height:82px}main{padding-top:8px;padding-bottom:8px;gap:5%;align-items:center}.scene{max-width:555px;margin:auto}.scene-caption{margin-bottom:8px}.scene-note{margin-top:10px}.workspace{padding:5px 0}h1{font-size:34px;margin:8px 0 12px}.intro{font-size:14px;margin-bottom:15px;line-height:1.7}.intro br{display:none}textarea{padding:10px 13px;max-height:72px}.form-row{margin:3px 0 12px}.music-label{margin-bottom:8px}.sound{padding:8px 12px}.sound small{margin-top:0}.sound-options{gap:7px}.audio-row{margin:8px 0 14px}.primary{padding:12px 18px}.gentle{margin-top:8px}.demo-button{margin-top:14px;padding-top:12px}footer{padding-top:8px;padding-bottom:12px}.reveal-art{width:150px}.timer{margin-top:22px}}
/* Selectable bake duration */
[hidden]{display:none!important}.duration-field{border:0;padding:0;margin:17px 0 20px;min-width:0}.duration-field legend{font-size:14px;margin-bottom:9px;padding:0}.duration-options{display:flex;gap:7px}.duration-options button{flex:1;white-space:nowrap;padding:8px 5px;background:transparent;border:1px solid #d6dbcc;border-radius:6px;color:var(--ink);font-size:15px}.duration-options small{font-size:11px;color:var(--muted)}.duration-options button:last-child{flex:.8;font-size:13px}.duration-options button.selected{border-color:var(--green);background:var(--light);box-shadow:0 0 0 .5px var(--green)}.custom-duration{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:10px 0 0;font-size:13px}.custom-duration input{width:74px;border:1px solid #bec7b2;border-radius:5px;padding:5px 8px;background:#fffdf8;color:var(--ink)}.custom-duration span{font-size:12px;color:var(--muted)}
/* Generated hand-drawn assets are animated as layers over the supplied scene. */
.sprite{background-image:url('assets/baking-stages.png');background-size:300% 400%;background-position:0 0}.sprite.croissant{background-position:0 100%}.sprite.bear{background-position:50% 100%}.sprite.loaf{background-position:100% 100%}.sprite.dough{background-position:0 0}.dough-place{transform-origin:50% 85%;transition:none;z-index:3}.dough-place.on-counter{transform:translate(150%,80%) scale(.85)}.dough-place:empty:after{content:''}.bread-growth{position:relative;width:100%;aspect-ratio:1;transform-origin:50% 85%;transition:transform .3s linear}.growth-layer{position:absolute;inset:0;background-image:url('assets/baking-stages.png');background-repeat:no-repeat;background-size:300% 400%;opacity:0;transition:opacity .3s linear;background-position:var(--bread-x,0) var(--stage-y,0)}.growth-croissant{--bread-x:0%}.growth-bear{--bread-x:50%}.growth-loaf{--bread-x:100%}.stage-0{--stage-y:0%}.stage-1{--stage-y:33.333333%}.stage-2{--stage-y:66.666667%}.stage-3{--stage-y:100%}.baking .dough-place .sprite{transform:none;filter:none}.oven-door{position:absolute;left:32.8%;top:52.2%;width:32.8%;height:16%;z-index:4;transform-origin:50% 98%;transform:perspective(550px) rotateX(0deg);pointer-events:none;backface-visibility:visible}.oven-door>img{width:100%;height:100%;display:block;object-fit:fill}.oven-hotspot{z-index:5}.oven-hotspot:disabled{opacity:1;cursor:default}.oven-hotspot:disabled:hover{box-shadow:none}.loading .oven-door{animation:load-door 4400ms ease-in-out both;animation-delay:var(--load-offset,0ms)}.loading .dough-place{animation:load-dough 4400ms cubic-bezier(.4,0,.3,1) both;animation-delay:var(--load-offset,0ms)}.loading .oven-shade{background:#473b2e;box-shadow:0 0 18px #dcad6355 inset}.loading-caption{margin-top:30px;color:var(--red)}.loading .scene-note{color:var(--red)}.opening .oven-door{animation:unload-door 1550ms ease-in-out both}.opening .scene{animation:none}.opening .dough-place{animation:bread-ready 1550ms ease both}.opening .oven-shade{background:#775838;box-shadow:0 0 22px #efcf8877 inset}.opening .growth-layer{transition:none}
@keyframes load-door{0%,8%{transform:perspective(550px) rotateX(0)}26%,68%{transform:perspective(550px) rotateX(-78deg)}90%,100%{transform:perspective(550px) rotateX(0)}}
@keyframes load-dough{0%,24%{transform:translate(150%,80%) scale(.85);opacity:1}40%{transform:translate(80%,-18%) scale(.88)}64%,100%{transform:translate(0,0) scale(.78);opacity:1}}
@keyframes unload-door{0%,25%{transform:perspective(550px) rotateX(0)}75%,100%{transform:perspective(550px) rotateX(-78deg)}}
@keyframes bread-ready{0%,55%{transform:translate(0,0)}100%{transform:translate(0,12%)}}
@media(min-width:681px) and (max-height:850px){.duration-field{margin:10px 0 14px}.duration-options button{padding:6px 3px}.duration-field legend{margin-bottom:6px}.workspace h1{font-size:32px}.workspace .intro{margin-bottom:12px}.workspace .demo-button{margin-top:11px}}
@media(max-width:680px){.duration-field{margin:15px 0 20px}.duration-options button{min-height:42px}.loading .workspace{text-align:center}.loading .task-quote{border:0;padding:0}.loading main{gap:12px}.loading-caption{margin-top:14px}}
@media(prefers-reduced-motion:reduce){.loading .oven-door,.loading .dough-place,.opening .oven-door,.opening .dough-place{animation:none}.loading .dough-place{transform:none}.growth-layer,.bread-growth{transition:none}}
.sprite,.growth-layer{filter:url('#ink-key')}.baking .dough-place .sprite{filter:url('#ink-key')}.oven-door{overflow:visible}.oven-door>img{position:absolute;left:-10.4%;top:-21.4%;width:120.8%;height:143%;filter:url('#ink-key')}
.sprite,.bread-growth{aspect-ratio:4/3}.dough-place{align-items:center}
.loading .oven-door{z-index:4}.loading .dough-place{z-index:3}

/* Immersive baking: the scene is the working surface, controls stay tucked away. */
body:is(.loading,.baking,.opening){overflow:hidden}
body:is(.loading,.baking,.opening)>header,body:is(.loading,.baking,.opening)>footer{display:none}
body:is(.loading,.baking,.opening) main{position:fixed;inset:0;display:block;max-width:none;margin:0;padding:0;overflow:hidden;height:100dvh}
body:is(.loading,.baking,.opening) .scene-side{position:absolute;inset:0;width:100%;min-width:0}
body:is(.loading,.baking,.opening) .scene-caption,body:is(.loading,.baking,.opening) .scene-note{display:none}
body:is(.loading,.baking,.opening) .scene{position:absolute;left:50%;top:50%;width:min(100vw,128dvh);height:auto;aspect-ratio:1;max-width:none;margin:0;border-radius:0;transform:translate(-50%,-50%);overflow:visible}
body:is(.loading,.baking,.opening) .workspace{position:fixed;top:max(22px,env(safe-area-inset-top));right:max(25px,env(safe-area-inset-right));width:auto;max-width:none;padding:0;margin:0;z-index:10;text-align:left}
.focus-hud{display:flex;align-items:center;gap:12px;padding:7px 9px 7px 19px;border:1px solid #cdd1c280;border-radius:40px;background:#faf8f0dc;box-shadow:0 3px 20px #33432b08;backdrop-filter:blur(12px)}
.focus-hud .timer{font:400 25px/1.35 Georgia,serif;font-variant-numeric:tabular-nums;letter-spacing:1px;margin:0;min-width:70px;text-align:center;color:#42543c}.focus-hud .timer.hidden-time{font:14px/1.5 -apple-system,sans-serif;letter-spacing:1px;min-width:70px}.focus-hud .timer.is-paused:before{content:'Ⅱ';font:13px sans-serif;margin-right:8px;color:#9b7559}.focus-demo{font-size:11px;color:#967157;letter-spacing:1px}
.focus-tools{position:relative}.focus-tools summary{list-style:none;width:34px;height:34px;display:grid;place-items:center;font:24px/1 sans-serif;border-radius:50%;color:#6b7760;cursor:pointer;user-select:none}.focus-tools summary::-webkit-details-marker{display:none}.focus-tools summary:hover,.focus-tools[open] summary{background:#e6eadc}.focus-tools summary:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.focus-menu{position:absolute;top:48px;right:-8px;width:265px;max-width:calc(100vw - 32px);padding:19px 20px 15px;border:1px solid #d8dccd;border-radius:12px;background:#faf8f2f7;box-shadow:0 12px 35px #35433118;backdrop-filter:blur(15px)}.focus-task{font-size:14px;line-height:1.6;margin:0 0 14px;overflow-wrap:anywhere;color:#697360}.focus-menu .progress{margin:0 0 8px}.focus-menu .small-note{font-size:12px;margin:0 0 12px}.focus-menu .text-button{display:block;width:100%;text-align:left;font-size:14px;padding:9px 2px;margin:0}.focus-menu .text-button:hover{color:#ac6248}.focus-menu .end-focus{border-top:1px solid #e1e3d6;margin-top:8px;padding-top:13px;color:#9c6552}
.loading .workspace>*{display:none}.loading .workspace .loading-caption{display:block;padding:11px 18px;margin:0;font-size:14px;background:#faf8f0dc;border:1px solid #d8dccd80;border-radius:30px;backdrop-filter:blur(12px)}.opening .workspace{display:none}
@media(max-aspect-ratio:4/5){body:is(.loading,.baking,.opening) .scene{width:max(100vw,100dvh)}body:is(.loading,.baking,.opening) .workspace{top:max(18px,env(safe-area-inset-top));right:16px}.focus-hud{gap:8px;padding:6px 7px 6px 15px}.focus-hud .timer{font-size:23px}.focus-menu{right:-6px}}
@media(min-aspect-ratio:2/1){body:is(.loading,.baking,.opening) .scene{width:145dvh}}