#craft {
  --cake-paper: #fff8ef;
  --cake-cream: #fffdf8;
  --cake-rose: #f3e3e4;
  --cake-line: #c6aca3;
  --cake-ink: #554a42;
  --cake-blue: #e2ebf5;
  --cake-blue-ink: #3d536a;
  box-sizing: border-box;
  width: min(970px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  margin: auto;
  padding: clamp(14px, 3vw, 26px);
  overflow: auto;
  overscroll-behavior: contain;
  color: var(--cake-ink);
  background: var(--cake-paper);
  border: 2px solid #998477;
  border-radius: 16px 12px 18px 10px;
  box-shadow: 8px 10px 0 #554a4229;
}
#craft::backdrop { background: #42352e7a; }
#craft * { box-sizing: border-box; }
#craft h1, #craft h2, #craft p { margin: 0; }
#craft h1 { font-size: clamp(21px, 4vw, 30px); }
#craft h2 { font-size: 15px; }
#craft p { font-size: 13px; line-height: 1.55; }
#craft button, #craft a.secondary {
  min-width: 44px; min-height: 44px; padding: 7px 12px;
  color: inherit; font: inherit; font-size: 13px;
  background: var(--cake-cream); border: 1px solid var(--cake-line);
  border-radius: 10px; cursor: pointer;
}
#craft button:hover { background: var(--cake-rose); }
#craft button:disabled { opacity: .45; cursor: default; }
#craft :focus-visible { outline: 3px solid #72526d; outline-offset: 2px; }
#craft :is(.primary,[aria-pressed=true]) {
  color: var(--cake-blue-ink); background: var(--cake-blue);
  border-color: #8199b2; font-weight: 600;
}
#craft .workshop-header { position: relative; padding-right: 52px; margin-bottom: 10px; }
#craft .dialog-close { position: absolute; top: 0; right: 0; font-size: 22px; padding: 0; }
#craft .workshop-step { padding: 8px 0; margin-bottom: 10px; border-bottom: 1px dashed var(--cake-line); }
#craft .workshop-layout { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(300px,1fr); gap: 16px; align-items: start; }
#craft .workshop-stage {
  position: sticky; top: 0; display: grid; justify-items: center;
  padding: 8px; border: 1px solid var(--cake-line); border-radius: 12px 9px 14px 8px;
  background: repeating-linear-gradient(90deg,#f4e2e6 0 22px,#fcf2ed 22px 44px);
}
#craft canvas, #craft img { image-rendering: pixelated; }
#craft .dessert-canvas { display: block; width: min(100%, 350px); height: auto; aspect-ratio: 1; touch-action: none; cursor: crosshair; }
#craft :is(.workshop-guidance,.workshop-status,.hint) { padding: 7px 10px; border-radius: 7px; background: var(--cake-cream); }
#craft .workshop-status { margin-top: 4px; }
#craft .workshop-status:empty { display: none; }
#craft .workshop-shelf { display: grid; gap: 9px; min-width: 0; }
#craft .workshop-shelf > img { width: 75px; height: 75px; object-fit: contain; justify-self: center; }
#craft :is(.inline-actions,.workshop-tools) { display: flex; flex-wrap: wrap; gap: 7px; }
#craft .workshop-materials { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; }
#craft .material { min-height: 63px; padding: 3px; touch-action: none; }
#craft .material img { width: 37px; height: 37px; object-fit: contain; display: block; margin: auto; pointer-events: none; }
#craft .workshop-footer { margin-top: 10px; }
#craft .craft-meter { position: relative; height: 18px; border: 1px solid var(--cake-line); background: var(--cake-rose); border-radius: 5px; }
#craft .sweet-zone { position: absolute; inset: 0 auto 0 62%; width: 23%; background: #9bb392; }
#craft .needle { position: absolute; top: -3px; bottom: -3px; width: 3px; background: var(--cake-ink); }
#craft .workshop-recipes { margin: 12px 0; }
#craft .workshop-recipe { display: grid; justify-items: center; width: 100%; padding: 8px 14px 14px; }
#craft .workshop-recipe img { width: 128px; height: 112px; object-fit: contain; }
#craft > .hint { margin-top: 10px; }
#craft .workshop-album { display: grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap: 10px; margin: 12px 0; }
#craft .workshop-album-card { padding: 10px; background: var(--cake-cream); border: 1px solid var(--cake-line); border-radius: 8px; }
#craft .workshop-album-card canvas { display: block; width: min(100%,160px); height: auto; margin: auto; }
#craft .workshop-export { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
#craft .workshop-export img { width: 58px; height: 58px; }
#craft .workshop-export a { display: inline-flex; align-items: center; }
@media (max-width: 680px) {
  #craft .workshop-layout { grid-template-columns: minmax(0,1fr); gap: 10px; }
  #craft .workshop-stage { position: relative; }
  #craft .dessert-canvas { width: min(100%, 230px); }
}