/* The illustration continues to the viewport edges instead of sitting on a page. */
#room-surround{
  position:fixed;top:0;pointer-events:none;z-index:0;
  border-style:solid;border-color:transparent;
  border-image-source:url('assets/bakery-shelf-v12.png');
  border-image-slice:1;border-image-width:1;border-image-repeat:stretch;
}
main,body:is(.loading,.baking,.opening) main{z-index:1}
.scene>img{mix-blend-mode:normal}
body:has(.workspace.reveal) #room-surround{opacity:.5}
header{background:none;height:86px;padding:0 clamp(18px,4vw,60px);pointer-events:none}
header a,header button{pointer-events:auto}
.brand{
  position:relative;gap:13px;padding:10px 25px 10px 19px;
  border:1px solid #92846b;border-radius:5px 8px 4px 7px;
  background:#fffaf0;box-shadow:2px 3px 0 #95867035;
  transform:rotate(-1deg);font-size:23px;
}
.brand::before,.brand::after{
  content:'';position:absolute;top:8px;width:3px;height:3px;
  background:#83745f;border-radius:50%;box-shadow:0 1px 0 #ffffff;
}
.brand::before{left:8px}.brand::after{right:8px}
.brand small{font-size:10px;letter-spacing:1.5px}
.brand-mark{font-size:40px}
.basket-link{
  background:#fffcf0;border-color:#b7ac92;box-shadow:1px 2px 0 #95867025;
  transform:rotate(1deg);
}
.start-dock .primary{box-shadow:0 3px 0 #2d3d2c36}
.start-dock .demo-button{background:#fffaf0df}
@media(max-width:680px){
  header{height:72px;padding:0 12px}
  .brand{font-size:18px;gap:8px;padding:8px 13px 7px 10px}
  .brand-mark{font-size:32px;width:32px;letter-spacing:-11px}
  .brand small{font-size:8px;letter-spacing:.8px}
  .basket-link{font-size:12px;padding:7px 10px}
  .basket-link span{margin-left:5px;min-width:20px;height:20px}
}
@media(max-height:540px) and (min-width:681px){
  header{height:54px}.brand{padding:4px 18px 4px 13px;font-size:19px}
  .brand-mark{font-size:32px}.brand small{font-size:8px}
}

/* The collection entrance is a small illustrated basket, with a readable count. */
header .basket-link{
  position:relative;display:grid;place-items:center;flex:none;
  width:104px;height:78px;padding:2px 8px;margin:0;
  border:0;border-radius:14px;background:transparent;box-shadow:none;
  transform:none;transition:transform .2s ease;
}
.basket-illustration{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2px 1px #7256341a)}
header .basket-link #count{
  position:absolute;top:5px;right:0;display:grid;place-items:center;
  min-width:24px;height:24px;margin:0;padding:0 5px;border:1px solid #a2ae91;
  background:#fffaf0;border-radius:45% 52% 46% 48%;color:#405638;
  font:600 13px/1 system-ui,sans-serif;box-shadow:0 1px 2px #72563418;
}
header .basket-link:hover{transform:rotate(-4deg) translateY(-2px);background:transparent}
header .basket-link:active{transform:scale(.96)}
header .basket-link:focus-visible{outline:2px solid #b9654d;outline-offset:3px}
@media(max-width:680px){header .basket-link{width:82px;height:64px;padding:2px 6px}header .basket-link #count{top:2px;min-width:22px;height:22px;font-size:12px}}
@media(max-height:540px) and (min-width:681px){header .basket-link{width:74px;height:50px}header .basket-link #count{top:0;min-width:20px;height:20px;font-size:12px}}
@media(prefers-reduced-motion:reduce){header .basket-link{transition:none}header .basket-link:hover{transform:none}}
/* A quieter wall sign leaves more room for the kitchen. */
header .brand{font-size:19px;gap:9px;padding:7px 17px 7px 12px}
header .brand-mark{font-size:31px;width:32px}
header .brand small{font-size:9px;letter-spacing:1px}
@media(max-width:680px){header .brand{font-size:16px;padding:6px 12px 6px 9px;gap:6px}header .brand-mark{font-size:27px;width:27px}header .brand small{font-size:8px;letter-spacing:.5px}}

/* Move the shelf as a separate illustrated layer, leaving the oven registered. */
.scene>img:first-of-type{clip-path:polygon(evenodd,0 0,100% 0,100% 100%,0 100%,0 0,14% 0,14% 54%,25% 54%,25% 49%,35% 49%,35% 34%,46% 34%,46% 0,14% 0)}
.scene>img.shifted-shelf{position:absolute;inset:0;pointer-events:none;clip-path:polygon(14% 0,46% 0,46% 34%,35% 34%,35% 49%,25% 49%,25% 54%,14% 54%);transform:translate(-4%,-2%)}
#scene>.focus-hud{position:absolute;left:49%;top:68.5%;transform:translateX(-50%);z-index:15;padding:0 5px;gap:4px;border-radius:7px;background:#fff7df;backdrop-filter:none}
#scene .focus-hud .timer{display:none}
#scene .focus-tools>summary{width:auto;height:24px;line-height:24px;font-size:18px;padding:0 8px}
#scene .focus-menu{top:32px;left:50%;right:auto;transform:translateX(-50%);max-height:42dvh;overflow:auto}

.scene{background:#fff}
.scene{background:#fcfbf7}
/* The clock's cleared counter layer must not reintroduce the old plant tip. */
.scene>.clock-cleared-corner{clip-path:polygon(0 55%,18.5% 55%,18.5% 80%,0 80%)}

/* A visible trial invitation resting just above the oven. */
#scene>#demo-start{position:absolute;left:49%;top:37.5%;transform:translate(-50%,-100%) rotate(-2deg);z-index:8;display:block;width:max-content;max-width:40%;margin:0;padding:7px 13px;border:1px solid #b69068;border-radius:4px 7px 4px 6px;background:#fff0d6;color:#735237;box-shadow:2px 3px 0 #7f674820;font-size:15px;line-height:1.35}
#scene>#demo-start:hover:not(:disabled){background:#ffe3b5;transform:translate(-50%,-100%) rotate(0deg)}
#scene>#demo-start[hidden]{display:none}
@media(max-width:680px){#scene>#demo-start{font-size:12px;padding:6px 9px}}

/* Compact, equally tall controls leave more room for the illustrated bakery. */
#workspace.start-dock{width:640px;gap:8px}
#workspace.start-dock .setting-trigger{min-height:52px;padding:7px 11px;gap:8px;border-radius:10px}
#workspace.start-dock .setting-trigger small{font-size:12px;line-height:1.3}
#workspace.start-dock .setting-trigger strong{font-size:16px;line-height:1.35}
#workspace.start-dock .setting-icon{font-size:20px}
#workspace.start-dock .setting-chevron{font-size:16px}
#workspace.start-dock #begin-bake{min-height:52px;padding:9px 15px;gap:8px;font-size:17px}
#workspace.start-dock #begin-bake span{font-size:14px;white-space:nowrap}
@media(max-width:680px){
 #workspace.start-dock{width:340px;max-width:calc(100vw - 32px);gap:7px}
 #workspace.start-dock .setting-trigger{min-height:48px;padding:6px 10px;gap:7px}
 #workspace.start-dock .setting-trigger strong{font-size:15px}
 #workspace.start-dock #begin-bake{min-height:46px;padding:8px 15px;font-size:16px}
}

/* task&toast's handwritten ampersand replaces the old FB monogram. */
header .brand-mark{letter-spacing:0;width:26px;color:var(--red);font-size:32px}
@media(max-width:680px){header .brand-mark{width:23px;font-size:28px}}