/* Shared bread tokens + the slice + stickers. Directions add their own layout. */
@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&family=Caveat:wght@600;700&display=swap');
:root{
  --blue:#2E2CAB; --blue-deep:#23218C; --on:#fff; --on-2:#D8D8F6;
  --ink:#26251F; --ink-blue:#205BC4; --paper:#FAF8F2; --toast:#E3A34E; --crust:#A85320;
  --f-hand:"Patrick Hand",ui-rounded,system-ui,sans-serif;
  --f-quiet:"Patrick Hand","Comic Sans MS",cursive;
  --f-ink:"Caveat",cursive;
  --f-ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --lift:0 18px 30px -12px rgb(10 8 60 / .45),0 4px 8px -2px rgb(10 8 60 / .25);
  --rest:0 6px 12px -6px rgb(10 8 60 / .35),0 1px 2px rgb(10 8 60 / .2);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--blue);color:var(--on);font-family:var(--f-ui);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}

/* A slice: <div class="slice" style="--tex:url(...)"><div class="slice-bread"></div><div class="slice-layer">stickers</div></div>
   Width drives everything; the toast is 330.8 x 343.6. */
.slice{position:relative;aspect-ratio:330.814/343.631;touch-action:none;user-select:none;-webkit-user-select:none}
/* --cut: a bread with its own shape (a 575x600 cutout) is both the bread and its mask. */
.slice-bread{position:absolute;inset:0;background:var(--cut,var(--tex)) center/cover no-repeat;
  -webkit-mask:var(--cut,url(/site/toast.svg)) center/100% 100% no-repeat;mask:var(--cut,url(/site/toast.svg)) center/100% 100% no-repeat;
  filter:drop-shadow(0 30px 40px rgb(8 6 50 / .35))}
.slice-bread::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgb(255 255 255 / .06),inset 0 0 40px 6px rgb(90 40 10 / .35)}
.slice-shadow{position:absolute;inset:0;filter:drop-shadow(0 34px 38px rgb(8 6 50 / .38)) drop-shadow(0 6px 8px rgb(8 6 50 / .25))}
.slice-layer{position:absolute;inset:0;container-type:inline-size}

/* Stickers are placed in % of the slice (x,y = center), size in % of slice width, so any slice size works. */
.sticker{position:absolute;left:calc(var(--x)*1%);top:calc(var(--y)*1%);width:calc(var(--w)*1%);
  transform:translate(-50%,-50%) rotate(calc(var(--r)*1deg)) scale(var(--s,1));
  filter:drop-shadow(0 5px 6px rgb(40 20 0 / .35)) drop-shadow(0 1px 1px rgb(40 20 0 / .3));
  cursor:grab;transition:filter .18s, scale .18s;touch-action:none}
.sticker img{width:100%;pointer-events:none;-webkit-user-drag:none}
.sticker.is-lifted{cursor:grabbing;scale:1.04;z-index:50;
  filter:drop-shadow(0 22px 20px rgb(30 15 0 / .4)) drop-shadow(0 4px 4px rgb(30 15 0 / .3))}
/* Handwriting on the bread: Caveat, blue ink, white sticker edge. */
.note{width:auto;white-space:nowrap;font:700 calc(var(--fs,9)*1cqi)/.9 var(--f-ink);color:var(--ink-blue);
  paint-order:stroke fill;-webkit-text-stroke:.34em #fff;letter-spacing:.01em;padding:.15em .2em;outline:none}
.note[contenteditable="true"]{cursor:text}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}