/* Local concept: prepare a bake directly within the illustrated kitchen. */
[hidden]{display:none!important}
header{height:74px;position:relative;z-index:10;padding:0 4%}
.brand{font-size:24px}.brand-mark{font-size:43px}
main{display:block;height:calc(100dvh - 74px);max-width:none;padding:0;position:relative;overflow:clip}
.scene-side{width:min(100vw,calc(100dvh - 74px),900px);margin:-28px auto 0}
.scene{max-width:none;overflow:visible}
.scene-caption,.scene-note,footer{display:none}
.workspace.start-dock{position:fixed;inset:auto auto 18px 50%;transform:translateX(-50%);width:300px;max-width:calc(100vw - 40px);padding:0;z-index:12}
.start-dock .primary{justify-content:space-between;border-radius:50px;padding:13px 25px;box-shadow:0 5px 25px #faf7f0}
.start-dock .demo-button{display:block;width:auto;margin:4px auto 0;padding:3px 14px;border:0;background:#faf7f0df;border-radius:30px;font-size:12px}
.oven-invitation{position:absolute;left:34%;top:55.4%;width:30%;z-index:4;text-align:center;color:#f7ead4;font-family:Georgia,"Songti SC",serif;font-size:clamp(14px,2vw,21px);line-height:1.7;pointer-events:none}
.oven-invitation small{font-family:-apple-system,sans-serif;font-size:12px;color:#e0d5c2}
.preparing .oven-invitation,.prepared .oven-invitation{display:none}
.scene.preparing .oven-door{animation:prepare-door 2400ms ease both}
.scene.preparing .dough-place{animation:prepare-dough 2400ms ease both}
.scene.prepared .oven-door{transform:perspective(550px) rotateX(-78deg)}
.scene.prepared .dough-place{transform:none}
.scene.preparing .oven-shade,.scene.prepared .oven-shade{background:#554b3b}
@keyframes prepare-door{0%{transform:perspective(550px) rotateX(0)}35%,100%{transform:perspective(550px) rotateX(-78deg)}}
@keyframes prepare-dough{0%,28%{opacity:0;transform:translate(150%,80%) scale(.9)}40%{opacity:1;transform:translate(150%,80%) scale(.9)}85%,100%{opacity:1;transform:translate(0,0) scale(1)}}
.task-note{position:absolute;left:29%;top:75%;width:43%;z-index:7;padding:13px 18px 14px;background:#fffaf0;border:1px solid #dacdb9;border-radius:3px 5px 8px 4px;box-shadow:1px 5px 15px #67523a14;transform:rotate(-1deg);animation:note-arrives .4s ease both}
.task-note label{font:16px/1.5 Georgia,"Songti SC",serif;margin:0 0 5px;color:#645845}
.task-note input{display:block;width:100%;background:none;border:0;border-bottom:1px solid #d8cdbb;border-radius:0;padding:4px 0 6px;font-size:15px;color:var(--ink)}
.task-note input:focus{outline:0;border-bottom-color:#b66d55}.task-note input::placeholder{color:#a29684;font-size:13px}
.task-note input[aria-invalid=true]{border-color:#b66d55}
@keyframes note-arrives{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
.physical-knob{position:absolute;left:65.2%;width:5.8%;height:5.8%;padding:0;background:none;border:0;z-index:8;touch-action:none;cursor:grab;border-radius:50%}
.physical-knob:active{cursor:grabbing}.physical-knob:focus-visible{outline:2px dashed var(--red);outline-offset:2px}
.time-knob{top:55.9%}.music-knob{top:61.45%}
.knob-face{position:absolute;inset:21%;border-radius:50%;background-image:url('assets/bakery.png');background-size:3067% 3067%;background-position:68.83% 59.2%;transform:rotate(var(--knob-turn,0deg));transition:transform .25s ease;box-shadow:0 0 0 1px #71483a30}
.music-knob .knob-face{background-position:68.83% 65%}
.knob-label{position:absolute;left:100%;top:50%;transform:translateY(-50%);width:max-content;max-width:145px;text-align:left;padding:4px 9px;border-radius:6px;background:#faf7f0ec;color:#837866;font-size:11px;line-height:1.25;pointer-events:none}
.knob-label b{display:block;font-size:14px;font-weight:500;color:#48573d;margin-top:3px}
.physical-knob[aria-expanded=true] .knob-label{background:#eceddf}
.setting-panel{position:absolute;left:71.5%;top:47%;width:255px;max-width:calc(100vw - 32px);padding:18px;background:#fffcf5;border:1px solid #d9d7c6;border-radius:12px;box-shadow:0 12px 35px #4c483820;z-index:15}
.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:15px;margin-bottom:14px}
.panel-close{border:0;background:none;color:#898470;font:24px/1 sans-serif;padding:0 2px;cursor:pointer}
.setting-panel .duration-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.setting-panel .duration-options button{padding:8px;font-size:14px}
.setting-panel .duration-options button[aria-pressed=true]{border-color:var(--green);background:#edf0e5}
.setting-panel .sound-options{display:grid;grid-template-columns:1fr;gap:6px}
.setting-panel .sound{padding:8px 10px}.setting-panel .sound strong{font-size:14px}.setting-panel .sound small{font-size:12px}
.setting-panel .audio-row{margin:14px 0 0}.setting-panel .small-note{font-size:11px;margin:12px 0 0}
body:is(.loading,.baking,.opening) #prep-ui{display:none}
body.loading .scene.prepared .oven-door{animation:close-prepared-door 1000ms ease both;animation-delay:var(--load-offset,0ms)}
body.loading .dough-place{animation:none;transform:none}
@keyframes close-prepared-door{from{transform:perspective(550px) rotateX(-78deg)}to{transform:perspective(550px) rotateX(0)}}
body.baking .scene.prepared .oven-door{transform:perspective(550px) rotateX(0)}
.workspace:not(.start-dock){position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);background:#fffcf5f5;border:1px solid #dedace;border-radius:18px;padding:28px;z-index:15;width:390px;max-width:calc(100vw - 32px);max-height:88dvh;overflow:auto;box-shadow:0 15px 70px #343d2a1a}
body:is(.loading,.baking,.opening) .workspace{left:auto;transform:none;background:none;border:0;box-shadow:none;overflow:visible;max-height:none;padding:0;width:auto;border-radius:0}
body:has(.workspace.reveal) #prep-ui{display:none}
body:has(.workspace.reveal) .scene.prepared .oven-door{transform:perspective(550px) rotateX(0)}
body:has(.workspace.reveal) .scene-side{opacity:.5}
@media(max-width:900px){.setting-panel{position:fixed;left:50%;top:auto;bottom:120px;transform:translateX(-50%);width:300px}.scene-side{margin-top:-10px}.knob-label{max-width:110px}.knob-label b{font-size:12px}}
@media(max-width:680px){header{height:70px}.brand{font-size:20px}.brand small{font-size:9px}main{height:calc(100dvh - 70px);display:block;padding:0}.scene-side{width:100vw;margin-top:max(0px,calc((100dvh - 100vw - 200px)/2))}.scene{max-width:none;width:100vw}.task-note{left:16%;width:66%;top:82%;padding:11px 14px}.task-note label{font-size:15px}.task-note input{font-size:16px}.physical-knob{min-width:30px;min-height:30px;left:64.3%}.time-knob{top:55%}.music-knob{top:61%}.knob-label{left:87%;padding:4px 6px;max-width:88px;font-size:10px}.knob-label b{font-size:11px}.oven-invitation{font-size:15px;top:54.5%}.oven-invitation small{font-size:9px}.workspace.start-dock{bottom:max(14px,env(safe-area-inset-bottom));width:280px}.setting-panel{bottom:120px}.task-note input::placeholder{font-size:13px}}
@media(max-height:620px) and (min-width:681px){header{height:54px}main{height:calc(100dvh - 54px)}.scene-side{width:calc(100dvh - 30px);margin-top:-15px}.workspace.start-dock{left:calc(50% + 255px);width:210px;bottom:30px}.task-note{width:53%;left:24%}.knob-label b{font-size:12px}}
@media(prefers-reduced-motion:reduce){.preparing .dough-place{opacity:1;transform:none}.scene.preparing .oven-door{transform:perspective(550px) rotateX(-78deg)}.task-note{animation:none}}

body{height:100dvh;overflow:clip}
@media(max-width:680px){.knob-label{padding:4px 5px;line-height:1.2;max-width:105px;white-space:nowrap}.knob-label b{display:inline;margin:0 0 0 4px;font-size:11px}}

html{height:100%;overflow:hidden}body{position:fixed;inset:0;width:100%}

/* Clear primary entrances; the illustrated knobs remain a secondary control. */
.scene-side{width:min(100vw,calc(100dvh - 150px),900px)}
.workspace.start-dock{width:420px;bottom:16px;max-width:calc(100vw - 32px)}
.start-dock .task-note{position:relative;inset:auto;width:100%;margin:0 0 12px;padding:12px 18px;transform:rotate(-.5deg)}
.quick-settings{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.setting-trigger{display:flex;align-items:center;gap:11px;min-height:64px;padding:10px 14px;text-align:left;border:1px solid #bcc8b1;border-radius:12px;background:#fffdf6;color:var(--green);box-shadow:0 3px 12px #4a533d09;transition:background .18s,border-color .18s}
.setting-trigger:hover,.setting-trigger[aria-expanded=true]{border-color:var(--green);background:#edf1e4}
.setting-trigger:focus-visible{outline:3px solid #b66d55;outline-offset:3px}
.setting-trigger small{display:block;font-size:12px;line-height:1.4;color:#77816b}
.setting-trigger strong{display:block;font-size:16px;line-height:1.5;font-weight:500;white-space:nowrap}
.setting-icon{font-size:24px;line-height:1}.setting-chevron{margin-left:auto;font-size:20px;color:#7d896f}
.knob-label{display:none}
.setting-panel{position:fixed;left:50%;top:auto;bottom:190px;transform:translateX(-50%);width:360px;max-height:calc(100dvh - 270px);overflow-y:auto;z-index:20}
.setting-panel .sound-options{grid-template-columns:1fr 1fr}
.setting-panel .sound{padding:10px}.setting-panel .sound strong{font-size:13px}.setting-panel .sound.selected:after{right:6px;top:5px}
.setting-panel .small-note{font-size:12px}
@media(max-width:680px){.scene-side{width:100vw;margin-top:max(0px,calc((100dvh - 100vw - 350px)/2))}.workspace.start-dock{width:360px;bottom:max(12px,env(safe-area-inset-bottom))}.setting-trigger{padding:10px;gap:8px;min-height:60px}.setting-trigger strong{font-size:14px}.setting-icon{font-size:22px}.start-dock .task-note{padding:11px 14px;margin-bottom:10px}.setting-panel{bottom:185px;width:calc(100vw - 32px);max-height:calc(100dvh - 260px)}.setting-panel .sound-options{grid-template-columns:1fr}}
@media(max-height:620px) and (min-width:681px){.scene-side{width:calc(100dvh - 40px)}.workspace.start-dock{left:auto;right:20px;transform:none;width:300px}.setting-panel{left:auto;right:20px;transform:none;bottom:180px;width:300px;max-height:calc(100dvh - 200px)}}

/* Fit the complete kitchen between the header and controls; scale all layers together. */
header{position:fixed;inset:0 0 auto;width:100%;max-width:none;background:linear-gradient(#faf7f0f2,#faf7f000)}
body{--stage-top:74px;--stage-bottom:108px}
body:is(.loading,.baking,.opening){--stage-top:12px;--stage-bottom:12px}
main,body:is(.loading,.baking,.opening) main{position:fixed;inset:var(--stage-top) 0 var(--stage-bottom);width:100%;height:calc(100dvh - var(--stage-top) - var(--stage-bottom));margin:0;padding:0;max-width:none;overflow:clip}
.scene-side,body:is(.loading,.baking,.opening) .scene-side{position:absolute;inset:0;width:100%;height:100%;margin:0}
.scene,body:is(.loading,.baking,.opening) .scene{position:absolute;left:50%;top:50%;width:min(100vw,calc((100dvh - var(--stage-top) - var(--stage-bottom)) * 1920 / 819));height:auto;aspect-ratio:1920 / 819;max-width:none;margin:0;border-radius:0;transform:translate(-50%,-50%)}
.workspace.start-dock{left:50%;right:auto;bottom:max(12px,env(safe-area-inset-bottom));transform:translateX(-50%);width:760px;max-width:calc(100vw - 32px);display:grid;grid-template-columns:1fr 1fr 1.35fr;gap:8px 10px}
#task-slot{grid-column:1/-1;justify-self:center;width:min(100%,480px)}
#task-slot:empty,#task-slot:has(form[hidden]){display:none}
.start-dock .task-note{margin:0 0 2px}
.quick-settings{display:contents}
.start-dock .primary{margin:0;min-height:64px;padding:12px 20px;font-size:16px;gap:12px}
.start-dock .demo-button{grid-column:1/-1;margin:0 auto}
.setting-panel{left:50%;right:auto;bottom:120px;transform:translateX(-50%);width:360px;max-height:calc(100dvh - 200px)}
@media(max-width:680px){
  header{padding:0 16px}.basket-link{padding:8px 12px}
  .workspace.start-dock{width:420px;max-width:calc(100vw - 24px);grid-template-columns:1fr 1fr;gap:8px}
  .start-dock .primary{grid-column:1/-1;min-height:52px}
  .setting-trigger{min-height:54px;padding:8px 12px}
  .start-dock .task-note{padding:9px 14px}
  .setting-panel{bottom:185px;width:calc(100vw - 24px);max-height:calc(100dvh - 260px)}
}
@media(max-height:540px) and (min-width:681px){
  header{height:54px}.workspace.start-dock{bottom:8px;gap:5px 8px}
  .setting-trigger,.start-dock .primary{min-height:50px;padding:6px 12px}
  .start-dock .task-note{padding:7px 14px}.task-note label{display:none}
  .setting-panel{bottom:98px;max-height:calc(100dvh - 158px)}
}
/* Prevent focus from scrolling the oversized canvas inside its viewport. */
main,body:is(.loading,.baking,.opening) main{overflow:clip}

@media(max-width:680px){body{--stage-top:70px;--stage-bottom:180px}}
@media(max-height:540px) and (min-width:681px){body{--stage-top:54px;--stage-bottom:90px}}
.oven-invitation{font-size:clamp(12px,1.8dvh,17px);line-height:1.5}
.oven-invitation small{font-size:9px}

/* Registered to the spacious 1920 × 819 kitchen. */
.oven-shade{left:39.4%;top:48.5%;width:19.45%;height:20.1%;border-radius:7%}
.oven-door{left:38.75%;top:47.1%;width:20.73%;height:23%}
.dough-place{left:43%;top:50.6%;width:12%;height:18.5%}
.oven-hotspot{left:36.4%;top:38%;width:26.8%;height:38%}
.oven-invitation{left:40.2%;top:54%;width:18%;font-size:clamp(12px,2dvh,19px)}
.physical-knob{left:59.7%;width:3%;height:7%;min-width:0;min-height:0}
.time-knob{top:52.05%}.music-knob{top:60.35%}
.knob-face{inset:20%;background-image:url('assets/bakery-shelf-v12.png');background-size:5333.33% 2275%;background-position:61.412% 55.811%}
.music-knob .knob-face{background-position:61.412% 64.496%}
@media(max-width:680px){
 .scene,body:is(.loading,.baking,.opening) .scene{width:min(165vw,calc((100dvh - var(--stage-top) - var(--stage-bottom)) * 1920 / 819))}
 .oven-invitation{font-size:12px}.oven-invitation small{font-size:8px}
}