/* Piku Print Club, the site. Step 3 (Decorate): the stage (chips, Boom, the sticker explosion), then the screen. Stickers, draw, frame, colour, the "Throw away" dialog.
   v3: the screen lives in the ONE pinned tour phone (partials/screen-decorate.html); the step is a mint band (css/tour.css lays out its title, line, chips,
   Show me). This file holds what is Decorate's own: the chips that open a tool, the Boom button, and THE STICKER FIELD (.boom-field).
   Everything inside the screen is sized in --u (one phone point, set on .scr .in). Text never renders below 11px: where --u would
   make it smaller (phones) the size floors at 11px through --fs-s / --fs-m / --fs-l. Controls are at least 44px across.
   Screen parts that also live on the wall (the pinned print) are styled without .scr-deco so a cloned print looks the same.
   Media queries are at the end (only 980 is needed here), then one container query, then reduced motion. */

/* ============ the stage: chips, Boom, the halftone ============ */
/* the halftone patch is IN the stage (the frame the phone is pinned in), low and left, under the title (never behind the title or the line) */
.dc-dots::before{right:auto;top:auto;left:-8%;bottom:-10%;width:min(52vw,1200px);
  -webkit-mask-image:radial-gradient(closest-side at 30% 60%,#000 28%,transparent 100%);mask-image:radial-gradient(closest-side at 30% 60%,#000 28%,transparent 100%)}

/* the four tool chips (tour.css lays them out and gives them their icon badge): here they are real buttons that open that tool on the phone.
   Only the open one has a flat white fill (tour.css); no rings, no card edges. */
.dc-chip{cursor:pointer;transition:scale .35s var(--spring-pop),background-color .2s;-webkit-tap-highlight-color:transparent}
.dc-chip:active{scale:.96;transition-duration:.1s}
/* the chip's picture is the app's own drawing of the tool (a die-cut sticker with its white edge, no disc behind it): the step-ico box keeps its size, the art grows a little past it */
.tour .dc-chip .step-ico.is-art{width:2.1em;height:2.1em;border:0;border-radius:0;background:none;overflow:visible}
.dc-chip .step-ico.is-art img{display:block;width:110%;height:110%;max-width:none;object-fit:contain;pointer-events:none;-webkit-user-drag:none;filter:drop-shadow(0 .06em .09em rgba(30,42,36,.3))}
html:not(.js) .dc-chip{cursor:default}

/* Boom: a wide flat pink starburst with an ink edge (no white halo, no text shadow), one soft shadow. It throws the stickers out of the phone again.
   (Size and spacing come from tour.css, .tour .step-side .dc-boom; it is hidden on small layouts.) */
.dc-boom{--bw:clamp(170px,14vw,380px);position:relative;display:grid;place-items:center;width:var(--bw);height:calc(var(--bw) * .41);padding:0;border:0;background:none;cursor:pointer;rotate:-3deg;
  font-family:var(--font-title);font-weight:700;font-variation-settings:"wght" 700,"wdth" 100;font-size:calc(var(--bw) * .148);line-height:1;color:var(--ink);letter-spacing:.01em;-webkit-tap-highlight-color:transparent;
  filter:drop-shadow(0 4px 6px rgba(30,42,36,.2));transition:scale .35s var(--spring-pop)}
.dc-boom-star{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.dc-boom span{position:relative}
.dc-boom:hover{scale:1.05}
.dc-boom:active{scale:.95}
.dc-boom:focus-visible{border-radius:50%/42%}
/* JS off: Boom does nothing, so it is invisible, but it keeps its space so the baked sticker fallback lines up with the live layout */
html:not(.js) .dc-boom{visibility:hidden}
/* a short, wide window (a phone on its side): the side column is already full, so Boom goes (a tap on the phone still throws the stickers) */
@media (max-height:600px){.tour .step-side .dc-boom{display:none}}

/* ---------- the loose stickers ----------
   .boom-field  fills the stage (the sticky one-screen frame): the stickers are placed in ITS coordinates, so they lie round the pinned phone in the viewport
   .bs          the slot (position, size; its own translate is the drag offset; the burst animates its transform)
   .bf          the idle float (a CSS animation, transform only, only once they have landed, paused when the section is off screen)
   .bi          the tilt, and the pop on hover (scale)
   Sizes are design pixels (1440 x 900) times --k, so the whole scatter grows with the screen (the mean of the width and the height ratio, so a very wide screen
   does not make them huge: up to a 1.9x cap). Where each one sits is set by the script (inline left and top, in px, from the stage's own size); --x --y are the percent
   fallback for JS off, and --fit is the script's "shrink a little to fit" factor. */
.boom-field{--k:clamp(.55px,calc((100vw / 1440 + var(--vh100,100vh) / 900) / 2),1.9px);position:absolute;inset:0;z-index:12;pointer-events:none;overflow:visible}
.bs{--w:calc(var(--sz) * var(--k) * var(--fit,1));position:absolute;left:var(--x);top:var(--y);width:var(--w);translate:-50% -50%;z-index:var(--z,4);
  pointer-events:auto;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.bs[hidden]{display:none}
.bs img{display:block;width:100%;height:auto;pointer-events:none;-webkit-user-drag:none}
.bf{display:block}
.bi{display:block;rotate:var(--rot,0deg);transition:scale .38s var(--spring-pop)}
.boom-field.is-armed .bs{opacity:0;pointer-events:none}      /* waiting for the burst: invisible and not touchable either */
.bs.is-drag{z-index:30;cursor:grabbing}
.bs.is-drag .bi{scale:1.14;transition-duration:.15s}
@media (hover:hover) and (pointer:fine){.bs:hover .bi{scale:1.16}}
/* the four word pills: the app's own word stamps, big (Nunito Black, a flat colour, an ink edge, a die-cut edge like every sticker) */
.bs.word{width:max-content}
.bs.word b{display:block;font-family:var(--font-body);font-weight:900;font-size:calc(var(--w) * .27);line-height:1;padding:.42em .62em .46em;border-radius:.5em;color:#2B2A33;background:var(--wc);
  border:.12em solid #2B2A33;box-shadow:0 0 0 .13em #fff,0 .12em .32em .12em rgba(30,42,36,.28);white-space:nowrap}
/* JS off: only the ones the baked fallback has room for (see the comment in the partial) */
html:not(.js) .bs[data-nb]{display:none}
html:not(.js) .bs{--fit:var(--bf,1)}
/* the float: five slightly different loops so nothing moves in step (the drift grows with the screen too) */
.boom-field{--kf:max(var(--k),.8px)}
.boom-field.is-out .bf{animation:bfloat var(--fd,4.4s) ease-in-out var(--fl,0s) infinite}
.boom-field.is-asleep .bf{animation-play-state:paused}
.bs:nth-child(5n+1){--fd:4.1s;--fy:calc(-10 * var(--kf));--fx:calc(2 * var(--kf));--fr:1.6deg;--fl:.1s}
.bs:nth-child(5n+2){--fd:5.2s;--fy:calc(-7 * var(--kf));--fx:calc(-3 * var(--kf));--fr:-1.4deg;--fl:1.3s}
.bs:nth-child(5n+3){--fd:3.7s;--fy:calc(-12 * var(--kf));--fx:calc(-2 * var(--kf));--fr:2.2deg;--fl:.6s}
.bs:nth-child(5n+4){--fd:4.8s;--fy:calc(-8 * var(--kf));--fx:calc(3 * var(--kf));--fr:-2deg;--fl:1.9s}
.bs:nth-child(5n){--fd:5.6s;--fy:calc(-11 * var(--kf));--fx:0px;--fr:1.2deg;--fl:.3s}
@keyframes bfloat{0%,100%{transform:translate3d(0,0,0) rotate(0deg)}50%{transform:translate3d(var(--fx,0),var(--fy,-9px),0) rotate(var(--fr,1.5deg))}}
/* the bits the burst throws (made once by the script, animated with transform and opacity only) */
.boom-ring,.boom-bit,.boom-ghost{position:absolute;left:0;top:0;pointer-events:none;opacity:0}
.boom-ring{--rs:calc(240 * var(--kf));z-index:1;width:var(--rs);height:var(--rs);margin:calc(var(--rs) * -.5) 0 0 calc(var(--rs) * -.5);border-radius:50%;border:calc(12 * var(--kf)) solid #fff}
.boom-ring.r2{border-color:var(--pink);border-width:calc(7 * var(--kf))}
.boom-bit{--bz:calc(12 * var(--kf));z-index:2;width:var(--bz);height:var(--bz);margin:calc(var(--bz) * -.5) 0 0 calc(var(--bz) * -.5);border-radius:50%;background:var(--bc,#fff)}
.boom-bit.sq{border-radius:3px}
.boom-bit.pill{width:calc(var(--bz) * .58);height:calc(var(--bz) * 1.5);margin:calc(var(--bz) * -.75) 0 0 calc(var(--bz) * -.29);border-radius:4px}
.boom-ghost{z-index:40}

/* The small layouts follow tour.css (the same two queries): the words sit in the top zone and the phone is below them, so the stickers settle in the gutters beside
   the phone and a little over its edge. A tablet (700 to 999 wide) shows 22 of the 30 (data-m and data-t); a phone (under 700) shows 14 (data-m). */
@media (max-width:999.98px) and (min-height:521px),(max-width:699.98px){
  .boom-field{--k:clamp(.5px,calc(100vw / 1000),.85px)}
  .bs{left:var(--mx,var(--x));top:var(--my,var(--y))}
  .bs:not([data-m]):not([data-t]){display:none}
  html:not(.js) .bs[data-mnb]{display:none}
  html:not(.js) .bs{--fit:var(--tbf,1)}
}
@media (min-width:700px) and (max-width:999.98px) and (min-height:521px){
  .bs{left:var(--tx,var(--mx,var(--x)));top:var(--ty,var(--my,var(--y)))}
  html:not(.js) .bs[data-tnb]{display:none}
}
@media (max-width:699.98px){
  /* stickers beside a phone that is 78% of the width: small (52 to 92px), the biggest ones capped */
  .boom-field{--k:clamp(.34px,calc(100vw / 1000),.44px)}
  .bs{--w:calc(clamp(52px,var(--sz) * var(--k),88px) * var(--fit,1))}
  .bs:not([data-m]){display:none}
}

/* ============ the screen ============ */
.scr-deco .in{--fs-s:max(calc(11px*var(--ffl,1)),calc(13*var(--u)));--fs-m:max(calc(12px*var(--ffl,1)),calc(15*var(--u)));--fs-l:max(calc(14px*var(--ffl,1)),calc(17*var(--u)));--tap:max(calc(44px*var(--fl,1)),calc(44*var(--u)))}
.dc-main{display:flex;flex-direction:column;flex:1;min-height:0}
/* on screen: the bar, the print, the panel, the tool bar. In the page the tool bar comes before its panel. */
.dc-bar{order:0}.dc-stage{order:1}.dc-panel{order:2}.dc-tools{order:3}
/* JS off: the print is a still picture, nothing here can be pressed */
html:not(.js) .dc-bar,html:not(.js) .dc-panel,html:not(.js) .dc-tools{display:none}

/* The app prints its small controls like the shutter (RisoEdge in CameraHome.swift): an ink line just inside the edge, 1.5 thick, and a copy of it in the drawings' fluoro
   pink printed a hair off register, a touch left and down (-1.1, +0.9), multiplied, UNDER the control's own colour so it only shows on the paper beside the line.
   Here: the line is an inset box-shadow, the ghost is the same shape shifted (a box-shadow is never drawn under its own box, so only the crescent on the paper shows) in
   pink already multiplied with the paper (#F3439D, the pink times #F3EEE3). Keep, Undo and the two buttons of the Throw away card wear it. */
.scr-deco .in{--edge:max(calc(1px*var(--fl,1)),calc(1.5*var(--u)));--gx:calc(-1.1*var(--u));--gy:calc(.9*var(--u));--ghost:#F3439D;--edge-ink:inset 0 0 0 var(--edge) var(--ink)}
.dc-keep,.dc-undo,.dc-dlg button{box-shadow:var(--edge-ink),var(--gx) var(--gy) 0 var(--ghost)}
.dc-keep:focus-visible,.dc-undo:focus-visible,.dc-dlg button:focus-visible{box-shadow:var(--edge-ink),0 0 0 5px #fff}

/* top bar: Cancel (ink, bold), Undo (centred: a white circle, an ink arrow, the ink edge, as tall as Keep), Keep (pink fill, ink text: 4.8:1, the ink edge).
   Both are drawn 42 high and keep a 44px touch area (the ::after). */
.scr-deco .dc-bar{height:max(calc(52px*var(--fl,1)),calc(52*var(--u)));padding:0 calc(14*var(--u));align-items:center}
.scr-deco .dc-cancel{font-size:var(--fs-l);color:var(--ink);min-width:var(--tap);min-height:var(--tap);padding:0 max(calc(6px*var(--fl,1)),calc(4*var(--u)));display:flex;align-items:center}
.dc-undo{position:absolute;left:50%;top:50%;translate:-50% -50%;width:max(calc(40px*var(--fl,1)),calc(42*var(--u)));height:max(calc(40px*var(--fl,1)),calc(42*var(--u)));padding:0;border:0;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center}
.dc-undo::after,.scr-deco .dc-keep::after{content:"";position:absolute;inset:min(0px,calc((100% - 44px)/2))}
.dc-undo[aria-disabled=true]{opacity:.35;cursor:default}
.dc-undo .ic{width:max(calc(19px*var(--fl,1)),calc(19*var(--u)));height:max(calc(19px*var(--fl,1)),calc(19*var(--u)));stroke-width:2.5}
.scr-deco .dc-keep{position:relative;background:var(--pink);color:var(--ink);height:max(calc(40px*var(--fl,1)),calc(42*var(--u)));min-width:max(calc(84px*var(--fl,1)),calc(84*var(--u)));padding:0 calc(22*var(--u));font-size:var(--fs-l)}

/* the stage and the print */
.dc-stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;gap:calc(12*var(--u))}
.dc-print{container-type:inline-size;position:relative;flex:none;width:calc(262*var(--u));touch-action:pan-y;box-shadow:0 calc(12*var(--u)) calc(30*var(--u)) rgba(30,42,36,.22),0 1px 3px rgba(30,42,36,.12)}
.dc-print,.dc-pin{--bs:.14;--wk:84}
.dc-print.is-strip,.dc-pin.is-strip{--bs:.3;--wk:90}
/* a booth strip: the strip drawing is the paper, so the card is undone */
.dc-print.is-strip{width:calc(100*var(--u));aspect-ratio:1370/4750;padding:0;border-radius:0;background:none;box-shadow:none;filter:drop-shadow(0 calc(8*var(--u)) calc(12*var(--u)) rgba(30,42,36,.22))}
.dc-base{display:contents}
.dc-base[hidden]{display:none}
.dc-base-strip .bstrip{position:relative;width:100%;display:block}
.dc-side{flex:1 1 0;min-width:0;max-width:calc(128*var(--u));font-size:var(--fs-s);font-weight:800;line-height:1.3;color:var(--ink);background:#fff;border-radius:calc(14*var(--u));padding:calc(10*var(--u)) calc(11*var(--u));box-shadow:var(--bx-sticker);rotate:2deg}
.dc-side[hidden]{display:none}

/* the pinned strip on the wall: narrow, centred in its slot */
.dc-pin.is-strip{container-type:inline-size;position:relative;width:46%;margin:0 auto;aspect-ratio:1370/4750;filter:drop-shadow(0 2px 4px rgba(30,42,36,.2)) drop-shadow(0 10px 14px rgba(30,42,36,.28))}
.dc-pin.is-strip .bstrip{position:relative;width:100%;display:block}
/* the picture, its frame, the ink, the stickers (these also style the pinned copy on the wall) */
.dc-photo{position:absolute;inset:0;transition:filter .3s}
.dc-photo .rig{left:9%;width:82%}
.dc-photo .colwrap .rig{left:11%;width:78%}
.dc-frame{position:absolute;inset:0;pointer-events:none;z-index:3}
.dc-frame svg{display:block;width:100%;height:100%}
.dc-ink,.dc-inkimg{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none}
/* the canvas catches the pointer, and stops the page scrolling under a finger, ONLY while Draw is the tool */
.dc-ink.on{pointer-events:auto;touch-action:none;cursor:crosshair}
.dc-stk{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden;border-radius:3.5%/2.5%}
.dc-print.is-strip .dc-stk,.dc-pin.is-strip .dc-stk{border-radius:0}
.stk{position:absolute;left:var(--x);top:var(--y);width:var(--w);translate:-50% -50%;rotate:var(--rot,0deg);scale:var(--sc,1);transition:scale .3s var(--spring-pop)}
.stk img{display:block;width:100%;height:auto;pointer-events:none;-webkit-user-drag:none}
/* a small sticker still has a 44px touch area (the box grows only where the sticker is smaller than that) */
.scr-deco .stk::before{content:"";position:absolute;top:min(0px,calc((100% - 44px)/2));bottom:min(0px,calc((100% - 44px)/2));left:min(0px,calc((100% - 44px)/2));right:min(0px,calc((100% - 44px)/2))}
/* live stickers only: not the still ones, not the pinned copy on the wall */
.scr-deco[data-tool=stickers] .stk{pointer-events:auto;cursor:grab;touch-action:none}
.scr-deco .stk.dragging{cursor:grabbing;transition:none}
.stk.in-anim{animation:stkin .55s var(--spring-pop) both}
@keyframes stkin{from{opacity:0;scale:calc(var(--sc,1)*.5);rotate:calc(var(--rot,0deg) + 16deg)}to{opacity:1}}
.stk.word{width:auto;display:flex;align-items:center;justify-content:center;white-space:nowrap;font-weight:900;line-height:1;color:#2B2A33;background:var(--wc);
  --ph:calc(var(--bs)*var(--wk)*1cqw);height:var(--ph);font-size:calc(var(--ph)*.55);border:calc(var(--ph)*.076) solid #2B2A33;border-radius:calc(var(--ph)*.3);padding:0 calc(var(--ph)*.3);box-shadow:0 0 0 calc(var(--ph)*.08) #fff,0 calc(var(--ph)*.06) calc(var(--ph)*.16) rgba(30,42,36,.3)}
/* the picked sticker: a dashed outline and three round handles (turn top left, remove top right, resize bottom left) */
.dc-hdl{position:absolute;z-index:6;left:var(--x);top:var(--y);width:var(--bw);height:var(--bh);translate:-50% -50%;rotate:var(--rot);border:max(calc(2px*var(--fl,1)),calc(2.5*var(--u))) dashed #fff;border-radius:calc(10*var(--u));pointer-events:none;filter:drop-shadow(0 0 1.5px rgba(0,0,0,.55))}
.dc-hdl[hidden]{display:none}
.hd{--hs:max(calc(28px*var(--ffl,1)),calc(30*var(--u)));position:absolute;width:var(--hs);height:var(--hs);padding:0;border:max(calc(2px*var(--fl,1)),calc(2*var(--u))) solid #fff;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;pointer-events:auto;cursor:pointer;touch-action:none;box-shadow:0 1px 3px rgba(0,0,0,.35)}
/* the touch area: 44px wide whatever the drawn size */
.hd::before{content:"";position:absolute;inset:calc((var(--hs) - 44px)/2 - 3px)}
.hd .ic{width:58%;height:58%;stroke-width:2.6}
.hd-turn{left:calc(var(--hs)*-.62);top:calc(var(--hs)*-.62)}
.hd-del{right:calc(var(--hs)*-.62);top:calc(var(--hs)*-.62);background:#E0475E}
.hd-size{left:calc(var(--hs)*-.62);bottom:calc(var(--hs)*-.62)}

/* the "Throw away your decorating?" card (the app's ThrowAwayCard: a Piku card, not the grey system alert). The ink-dim behind it takes every tap and a tap there is
   Carry on; the bin drawing (96), the question in the title font (22), one soft line (15), then two full-width pills, CARRY ON FIRST and filled (kids tap fast, so the
   safe answer is the easy one), Throw away second, white, in the deeper bin red (#BD2642, 6:1). Paper card, radius 28, the ink edge. The rest of the screen is inert while it is open. */
.dc-alert{position:absolute;inset:0;z-index:10;display:grid;place-items:center;background:rgba(30,42,36,.35);animation:fadein .2s ease-out both}
.dc-dlg{width:min(calc(320*var(--u)),calc(100% - 48*var(--u)));background:var(--paper);border-radius:calc(28*var(--u));padding:calc(22*var(--u));display:flex;flex-direction:column;align-items:center;text-align:center;
  box-shadow:var(--edge-ink),var(--gx) var(--gy) 0 #A8306E,0 calc(12*var(--u)) calc(24*var(--u)) rgba(30,42,36,.25);animation:dlgin .36s var(--spring-pop) both}
.dc-dlg-bin{display:block;width:max(calc(72px*var(--fl,1)),calc(96*var(--u)));height:max(calc(72px*var(--fl,1)),calc(96*var(--u)));margin:0 0 calc(8*var(--u));object-fit:contain;pointer-events:none;-webkit-user-drag:none;user-select:none}
.dc-dlg b{display:block;font-family:var(--font-title);font-weight:700;font-variation-settings:"wght" 700,"wdth" 100;font-size:max(calc(18px*var(--ffl,1)),calc(22*var(--u)));line-height:1.15;color:var(--ink)}
.dc-dlg p{margin:calc(8*var(--u)) 0 0;font-size:max(calc(13px*var(--ffl,1)),calc(15*var(--u)));font-weight:600;line-height:1.3;color:var(--ink72)}
.dc-dlg-b{align-self:stretch;display:flex;flex-direction:column;gap:calc(12*var(--u));margin-top:calc(22*var(--u))}
.dc-dlg button{width:100%;min-height:max(calc(44px*var(--fl,1)),calc(50*var(--u)));border:0;border-radius:999px;background:#fff;font-weight:800;font-size:max(calc(15px*var(--ffl,1)),calc(17*var(--u)));color:#BD2642}
.dc-dlg .da-n{background:var(--pink);color:var(--ink)}
@keyframes dlgin{from{opacity:0;scale:.86}to{opacity:1;scale:1}}
.dc-toast{z-index:9;top:calc(62*var(--u));bottom:auto}

/* ============ the docked panel ============ */
.scr-deco .pn-panel{height:calc(172*var(--u));padding-top:calc(4*var(--u));gap:0}
.dc-pane{display:flex;flex-direction:column;gap:calc(2*var(--u));flex:1;min-height:0}
.dc-pane[hidden]{display:none}
.dc-pane.mid{justify-content:center}
.scr-deco .pn-tabs{height:max(calc(44px*var(--fl,1)),calc(40*var(--u)));margin-bottom:calc(2*var(--u))}
.scr-deco .pn-tabs button{font-size:var(--fs-m);min-height:calc(44px*var(--fl,1))}
.scr-deco .pn-tabs button[aria-selected=false]{font-weight:700}
/* the chosen pack's underline is an ink bar printed with its off-register pink copy, a touch left and down (the app's InkUnderline: risoGhost, offset -1.1, 0.9) */
.scr-deco .pn-tabs button[aria-selected=true]::before{bottom:2px;box-shadow:var(--gx) var(--gy) 0 var(--pink)}
/* a row that scrolls sideways: edge fade and a chevron that says there is more */
.dc-rowwrap{position:relative;flex:none}
/* room at the end of a row, so its last tile scrolls clear of the round chevron */
.scr-deco .pn-tiles::after,.dc-inks::after{content:"";flex:none;width:calc(var(--tap) - 4px)}
.scr-deco .pn-tiles,.dc-inks{height:auto;padding:8px max(calc(16px*var(--fl,1)),calc(16*var(--u)));overscroll-behavior:auto;scroll-padding-inline:calc(16*var(--u))}
.dc-rowwrap.fade-r .pn-tiles,.dc-rowwrap.fade-r .dc-inks{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 58px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 58px),transparent)}
.dc-rowwrap.fade-l .pn-tiles,.dc-rowwrap.fade-l .dc-inks{-webkit-mask-image:linear-gradient(270deg,#000 calc(100% - 58px),transparent);mask-image:linear-gradient(270deg,#000 calc(100% - 58px),transparent)}
.dc-rowwrap.fade-l.fade-r .pn-tiles,.dc-rowwrap.fade-l.fade-r .dc-inks{-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 58px),transparent);mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 58px),transparent)}
.dc-more{position:absolute;right:calc(4*var(--u));top:50%;translate:0 -50%;z-index:3;width:var(--tap);height:var(--tap);padding:0;border:0;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;box-shadow:0 1px 2px rgba(30,42,36,.25),0 calc(3*var(--u)) calc(10*var(--u)) rgba(30,42,36,.22)}
.dc-more .ic{width:max(calc(20px*var(--fl,1)),calc(20*var(--u)));height:max(calc(20px*var(--fl,1)),calc(20*var(--u)));stroke-width:2.6}
.dc-more.back .ic{rotate:180deg}
.dc-more[hidden]{display:none}

/* sticker tiles */
.scr-deco .tile{font-size:var(--fs-s);min-width:max(calc(76*var(--u)),calc(66px*var(--fl,1)));height:max(calc(84*var(--u)),calc(66px*var(--fl,1)))}
.scr-deco .tile .tp{width:calc(60*var(--u));height:calc(60*var(--u));min-width:calc(44px*var(--fl,1));min-height:calc(44px*var(--fl,1))}
.scr-deco .tile.wd{width:auto;padding:0 max(calc(8px*var(--fl,1)),calc(6*var(--u)))}
.scr-deco .tile.wd .tp{width:auto;height:auto;min-width:0;min-height:0}
.word-tile{display:inline-flex;align-items:center;justify-content:center;height:max(calc(26px*var(--fl,1)),calc(28*var(--u)));padding:0 max(calc(8px*var(--fl,1)),calc(8*var(--u)));background:var(--wc);border:max(calc(2px*var(--fl,1)),calc(2*var(--u))) solid #2B2A33;border-radius:max(calc(8px*var(--fl,1)),calc(9*var(--u)));font-weight:900;font-size:var(--fs-s);line-height:1;color:#2B2A33;white-space:nowrap}
/* frame and colour tiles are a choice of one (radio): the picked one wears the app's ring */
.scr-deco .tile[aria-checked=true]{background:var(--sel);box-shadow:inset 0 0 0 max(calc(2px*var(--fl,1)),calc(2.5*var(--u))) var(--ink)}
.scr-deco .tile.fr{height:max(calc(96*var(--u)),calc(82px*var(--fl,1)));gap:calc(6*var(--u));width:max(calc(76*var(--u)),calc(68px*var(--fl,1)))}
.scr-deco .tile.fr .th{position:relative;display:block;flex:none;width:max(calc(38*var(--u)),calc(30px*var(--fl,1)));aspect-ratio:3/4;border-radius:calc(4*var(--u));overflow:hidden}
.scr-deco .tile.fr .th .rig{left:-25%;width:150%}
.scr-deco .tile.fr .th.ph::before{opacity:.4}
.scr-deco .tile.fr .tn{white-space:normal;text-align:center;line-height:1.05;max-width:100%;overflow-wrap:anywhere}
.dc-hint{flex:none;text-align:center;font-size:var(--fs-s);font-weight:700;line-height:1.25;color:var(--ink78);padding:0 calc(16*var(--u))}

/* draw: ten inks, four pens, the eraser */
.dc-inks{display:flex;gap:max(calc(8px*var(--fl,1)),calc(10*var(--u)));overflow-x:auto;overflow-y:hidden;scrollbar-width:none;flex:none;transition:opacity .2s}
.dc-inks::-webkit-scrollbar{display:none}
.ink{flex:none;position:relative;width:var(--tap);height:var(--tap);padding:0;border:max(calc(1px*var(--fl,1)),calc(1*var(--u))) solid #D8D1C4;border-radius:50%;background:#fff}
.ink::after{content:"";position:absolute;inset:max(calc(4px*var(--fl,1)),calc(4*var(--u)));border-radius:50%;background:var(--ic);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.ink[aria-checked=true]{border:max(calc(2.5px*var(--fl,1)),calc(2.5*var(--u))) solid var(--ink)}
.ink[aria-checked=true]::after{inset:max(calc(5px*var(--fl,1)),calc(5*var(--u)))}
.dc-pens{display:flex;align-items:center;gap:max(calc(6px*var(--fl,1)),calc(8*var(--u)));padding:8px max(calc(16px*var(--fl,1)),calc(16*var(--u)))}
.pen{position:relative;flex:none;display:grid;place-items:center;width:var(--tap);height:var(--tap);padding:0;border:0;border-radius:50%;background:var(--tile);transition:opacity .2s}
.pen i{display:block;width:var(--pd);height:var(--pd);border-radius:50%;background:var(--pc,#F23D52);box-shadow:0 0 0 1px rgba(0,0,0,.14)}
.pen[aria-checked=true]{box-shadow:inset 0 0 0 max(calc(2.5px*var(--fl,1)),calc(2.5*var(--u))) var(--ink)}
.dc-penset{display:flex;gap:max(calc(6px*var(--fl,1)),calc(8*var(--u)))}
.dc-pens .gap{flex:1}
.erase{display:flex;align-items:center;gap:calc(6*var(--u));height:var(--tap);padding:0 max(calc(12px*var(--fl,1)),calc(14*var(--u)));border:0;border-radius:999px;background:var(--tile);font-weight:800;font-size:var(--fs-s);color:var(--ink)}
.erase .ic{width:max(calc(18px*var(--fl,1)),calc(18*var(--u)));height:max(calc(18px*var(--fl,1)),calc(18*var(--u)))}
.erase[aria-pressed=true]{background:var(--sel);box-shadow:inset 0 0 0 max(calc(2.5px*var(--fl,1)),calc(2.5*var(--u))) var(--ink)}
.dim{opacity:.4}

/* the tool bar (the FX family bar's look): each tool is a riso drawing (a die-cut sticker, 30 wide, with the app's soft shadow), its word, and a small ink dot once the tool
   has something on it (the app: Circle().fill(ink), 6 pt, 4 to 5 pt from the word). The open tool wears the pale tile (--sel) and the heavier word. */
.scr-deco .pn-nav{padding-bottom:calc(10*var(--u))}
.scr-deco .pn-nav button{font-size:var(--fs-s);height:max(calc(54*var(--u)),var(--tap))}
.scr-deco .pn-nav button[hidden]{display:none}
.scr-deco .pn-nav .tool-ic{flex:none;display:block;width:calc(30*var(--u));height:calc(30*var(--u));min-width:26px;min-height:26px;object-fit:contain;pointer-events:none;-webkit-user-drag:none;user-select:none;filter:drop-shadow(0 calc(1*var(--u)) calc(1.5*var(--u)) rgba(30,42,36,.3))}
.scr-deco .has-dot::after{width:max(calc(6px*var(--fl,1)),calc(6*var(--u)));height:max(calc(6px*var(--fl,1)),calc(6*var(--u)));background:var(--ink);margin-left:max(calc(4px*var(--fl,1)),calc(5*var(--u)))}

/* ============ Decorate: media, a container query, then reduced motion ============ */
/* small screens: the print steps back a little so the panel below never crowds it */
@media (max-width:980px){
  .dc-print{width:calc(256*var(--u))}
}
/* a narrow screen (a phone at 360 wide): the eraser stacks its icon over its label so the four pens and the eraser fit one row */
@container (max-width:300px){
  .scr-deco .pn-tabs{margin-inline:6px}
  .scr-deco .pn-tabs button{font-size:max(calc(11px*var(--ffl,1)),calc(12*var(--u)))}
  .scr-deco .erase{flex-direction:column;justify-content:center;gap:1px;width:max(calc(54px*var(--fl,1)),calc(54*var(--u)));padding:0}
  .scr-deco .dc-pens{padding-inline:12px}
}
@media (prefers-reduced-motion:reduce){
  .boom-field .bf{animation:none!important}
  .bi,.dc-chip,.dc-boom{transition:none}
  .bs:hover .bi,.bs.is-drag .bi,.dc-chip:hover,.dc-boom:hover{scale:1}
  .stk.in-anim{animation-duration:.01s!important;animation-delay:0s!important}
  .stk{transition-duration:.01s}
  .dc-alert,.dc-dlg{animation:none}
  .dc-photo{transition:none}
}

@media print{.dc-boom,.boom-ring,.boom-bit,.boom-ghost{display:none!important}.boom-field.is-armed .bs{opacity:1}}