.table-basket{position:absolute;left:14.8%;top:45%;width:17%;height:36%;border:0;padding:0;background:none;z-index:6;cursor:pointer;overflow:visible;transform-origin:50% 88%;-webkit-tap-highlight-color:transparent}
.basket-drawing{position:absolute;inset:0;transition:transform .25s;transform-origin:50% 90%;pointer-events:none}
.basket-back,.basket-front{position:absolute;left:0;bottom:0;width:100%;height:65%;object-fit:contain;pointer-events:none}
.basket-back{z-index:0}.basket-front{z-index:2;clip-path:polygon(0 30%,15% 38%,38% 42%,62% 41%,80% 35%,100% 29%,100% 100%,0 100%)}
.basket-loaves{position:absolute;inset:0;z-index:1}
.basket-loaf{position:absolute;width:var(--bread-width,40%);left:var(--bread-left,30%);bottom:var(--bread-bottom,27%);z-index:var(--bread-layer,1);transform:rotate(var(--bread-turn,0deg));transform-origin:50% 90%}
.basket-loaf.demo-loaf{opacity:.7}
.basket-paper{position:absolute;z-index:3;left:50%;bottom:5%;min-width:96px;transform:translateX(-50%) rotate(-4deg);padding:5px 7px 4px;background:#fff7df;border:1px solid #90795c;border-radius:3px 6px 3px 5px;box-shadow:1px 2px 0 #6b523a20;color:#5e4936;white-space:nowrap;font:16px/1.15 BasketHand,'Kaiti SC',KaiTi,cursive}
.basket-paper:before{content:'';position:absolute;width:4px;height:4px;border:1px solid #a28d70;border-radius:50%;left:5px;top:4px;background:#dfcfaa}
.basket-demo{display:block;font:12px/1.2 BasketHand,'Kaiti SC',KaiTi,cursive;color:#8b7359;margin-top:3px}
.table-basket:hover:not(:disabled) .basket-drawing{transform:rotate(-3deg) translateY(-3px)}
.table-basket:hover:not(:disabled) .basket-paper{background:#ffefc9}
.table-basket:focus-visible{outline:2px dashed #ad6c50;outline-offset:5px;border-radius:12px}
header #basket-open{display:none}.basket-offscreen header #basket-open{display:grid}
body.collecting .workspace{visibility:hidden}body.collecting .scene-side{opacity:1!important}
body.collecting #room-surround{opacity:1!important}body.collecting .scene.prepared .oven-door{transform:perspective(550px) rotateX(-78deg)}
.bread-to-basket{position:fixed;z-index:50;pointer-events:none;aspect-ratio:4/3}
@media(max-width:680px){.basket-paper{min-width:86px;font-size:14px;padding:4px 6px}.basket-demo{font-size:12px}}
@media(prefers-reduced-motion:reduce){.basket-drawing{transition:none}.table-basket:hover:not(:disabled) .basket-drawing{transform:none}}

.table-basket:disabled{opacity:1;cursor:default}
body.collecting .oven-invitation{display:none}
.basket-offscreen .basket-paper{visibility:hidden}

.collection{grid-template-columns:repeat(auto-fill,minmax(min(100%,180px),1fr));align-items:stretch}
.bread-card{display:flex;flex-direction:column;align-items:stretch;gap:8px;min-width:0;padding:14px}
.bread-card .sprite{width:100%;margin:0 auto;flex-shrink:0}
.bread-card .record-task{display:block;white-space:pre-wrap;overflow-wrap:anywhere;font:18px/1.5 BakeryHand,"Kaiti SC",KaiTi,cursive;text-align:left;color:#4c563f}
.bread-card .record-task-label{display:block;font:12px/1.6 -apple-system,BlinkMacSystemFont,sans-serif;color:#858875;margin-bottom:3px}
.bread-card>small{display:block;margin-top:auto;padding-top:4px}

/* Match the clock tag's 18-unit lettering and 28-unit paper height.
   Clock width is 12% of the scene; basket width is 17%. */
.table-basket{container-type:inline-size}
#table-basket .basket-paper{min-width:0;height:9.88235cqw;padding:0 3.5cqw;display:flex;align-items:center;justify-content:center;font-size:6.35294cqw;line-height:1;transform:translateX(-50%) rotate(-2deg);border-width:.35cqw;border-radius:1cqw;box-shadow:none}
#table-basket .basket-paper::before{width:1.5cqw;height:1.5cqw;left:1cqw;top:1cqw;border-width:.35cqw}
#table-basket .basket-demo{position:absolute;top:100%;left:50%;transform:translateX(-50%);font-size:5.5cqw;margin-top:1cqw}