/* Piku Print Club, the site. Step 1 (Snap): the camera screen (it lives in the pinned tour phone), and the step's satellites (film strip, instant print).
   Everything inside .scr-cam is sized from --u (one unit = 1/360 of the screen width, set on .in in screens.css).
   Text never renders below 11px: small labels use max(calc(11px*var(--fl,1)), calc(N*var(--u))). Controls are at least 44px.
   v3.3: the camera's riso touches (the app's commits 20d1332, 0414209, bff9016, beb2c7a, 5957109, bc1d4d1). The riso INK EDGE is the app's RisoEdge: an ink line
   1.5 units wide just inside a control's edge, and a copy of the shape in the fluoro pink printed a hair off register (-1.1, +0.9) under it. Where the control is
   filled (every one here) the copy only shows as a thin pink crescent outside the ink line, and a solid offset copy is exactly that, so it is a box-shadow
   (--ghost); the shutter's ring is the one place with real ring geometry, and it is drawn in svg. The focus ring (base.css) is on the BUTTON; the edge is
   always drawn on an inner element, so the focus recipe's own box-shadow never replaces it. */
/* ============ screen: camera ============ */
.scr-cam{--acc:var(--teal)}
.scr-cam img{-webkit-touch-callout:none}
.scr-cam .in{--rl:max(calc(1px*var(--fl,1)),calc(1.5*var(--u)));--ghost:calc(-1.1*var(--u)) calc(.9*var(--u)) 0 0 var(--pink);--rec:#F23D52;
  padding:calc(20*var(--u)) 0 calc(16*var(--u));justify-content:space-between}
.cam-top{flex:none;height:calc(58*var(--u));padding:0 calc(18*var(--u)) 0 calc(16*var(--u));display:flex;align-items:center;justify-content:space-between}
.cam-av{width:calc(58*var(--u));height:calc(58*var(--u));rotate:-3deg;margin:0 0 0 calc(-4*var(--u))}
/* the film counter: a tiny riso canister with just the number on its paper label (the app writes it at the label's measured place: 11.3% in, 30.6% down,
   42.3% by 47.9% of the drawing's square). A button: it opens "Today's film". Shown whenever there is a daily limit, zero included. */
.filmpill{position:relative;flex:none;display:grid;place-items:center;min-width:max(calc(58*var(--u)),calc(44px*var(--fl,1)));height:max(calc(46*var(--u)),calc(44px*var(--fl,1)));padding:0;border:0;background:none;border-radius:calc(12*var(--u));color:var(--ink)}
.film-art{position:relative;display:block;width:calc(46*var(--u));height:calc(46*var(--u))}
.film-img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-drag:none;filter:drop-shadow(0 calc(1.1*var(--u)) calc(1.3*var(--u)) rgba(30,42,36,.3))}
.film-n,.fc-can b{position:absolute;left:11.315%;top:30.595%;width:42.29%;height:47.89%;display:grid;place-items:center;white-space:nowrap;font-weight:900;font-variant-numeric:tabular-nums;line-height:1;color:var(--ink)}
.film-n{font-size:calc(.38*46*var(--u))}
.vf-card{flex:none;margin:0 calc(16*var(--u));padding:calc(13*var(--u)) calc(13*var(--u)) 0;background:var(--card);border-radius:calc(12*var(--u));box-shadow:0 calc(10*var(--u)) calc(22*var(--u)) rgba(30,42,36,.16),0 calc(2*var(--u)) calc(5*var(--u)) rgba(30,42,36,.1)}
.vf{aspect-ratio:3/4;border-radius:calc(6*var(--u));box-shadow:inset 0 0 0 1px rgba(0,0,0,.13)}
/* the Monster: poses are set with transform from the script; flipping the camera turns him round with a little spring (the scale property, so it never fights the pose) */
.vf .rig{left:4%;width:92%;transform-origin:50% 100%;transition:transform .5s var(--spring-glide),scale .4s var(--spring-pop)}
.vf-thumbs{position:absolute;left:calc(8*var(--u));top:calc(8*var(--u));display:flex;flex-direction:column;gap:calc(5*var(--u));z-index:3}
.vf-thumbs i{display:block;width:calc(38*var(--u));height:calc(38*var(--u));border:calc(2.5*var(--u)) solid #fff;border-radius:calc(4*var(--u));box-shadow:0 1px 3px rgba(0,0,0,.3);background:var(--teal);overflow:hidden;position:relative;animation:thumbin .5s var(--spring-pop)}
.vf-thumbs .rig{left:0;width:100%}
@keyframes thumbin{from{scale:.3;opacity:0}to{scale:1;opacity:1}}
/* the flip button: a 34 unit white circle with an ink glyph and the ink edge, inside a white die-cut ring (39), on the picture's corner; 44 to tap */
.vf-flip{position:absolute;top:calc(10*var(--u));right:calc(10*var(--u));z-index:3;width:max(calc(44*var(--u)),calc(44px*var(--fl,1)));height:max(calc(44*var(--u)),calc(44px*var(--fl,1)));padding:0;border:0;border-radius:50%;background:none;color:var(--ink);display:grid;place-items:center;transition:opacity .2s,visibility 0s,transform .34s var(--spring-press)}
.vf-face{position:relative;display:grid;place-items:center;width:calc(39*var(--u));height:calc(39*var(--u));border-radius:50%;background:#fff;box-shadow:0 calc(1*var(--u)) calc(2*var(--u)) rgba(0,0,0,.18)}
.vf-face::before{content:"";position:absolute;inset:calc(2.5*var(--u));border-radius:50%;background:#fff;box-shadow:inset 0 0 0 var(--rl) var(--ink),var(--ghost)}
.vf-face .ic{position:relative;width:calc(20*var(--u));height:calc(20*var(--u));min-width:17px;min-height:17px;stroke-width:2.2}
.count{position:absolute;inset:0;z-index:4;display:grid;place-items:center;pointer-events:none;font:700 calc(124*var(--u))/1 var(--font-title);color:#fff;-webkit-text-stroke:calc(7*var(--u)) var(--ink);paint-order:stroke fill;font-variation-settings:"wght" 700,"wdth" 100}
.count b{font-weight:inherit;animation:cnt .85s var(--spring-pop) both}
.flash.run{animation:flashpop .45s ease-out}
.cam-bottom{flex:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 calc(24*var(--u))}
.prints,.fxb{display:flex;flex-direction:column;align-items:center;width:calc(76*var(--u));font-weight:800;font-size:max(calc(11px*var(--ffl,1)),calc(14*var(--u)));color:var(--ink);text-decoration:none;transition:opacity .2s,visibility 0s,transform .34s var(--spring-press)}
.prints{justify-self:start;gap:calc(6*var(--u))}.fxb{justify-self:end;gap:calc(8*var(--u))}   /* 6 and 8, so the two labels line up (the app) */
.prints,.fxb,.rb{border-radius:calc(14*var(--u))}

/* Prints follows the camera's mode: its word (Prints, Strips, Videos) and its peek, the newest print of that mode (a polaroid, a mini strip, a polaroid with a
   play mark), or that mode's riso drawing while nothing is kept in it yet. One piece shows at a time; they fade (the app: .18 s). The peek keeps one height. */
.pk{position:relative;display:block;width:calc(64*var(--u));height:calc(60*var(--u))}
.pk>*{position:absolute;left:50%;bottom:0;translate:-50% 0;opacity:0;visibility:hidden;transition:opacity .18s ease-out,visibility 0s .18s}
.pk>.on{opacity:1;visibility:visible;transition:opacity .18s ease-out}
.pk-sp{display:block;width:calc(56*var(--u));height:calc(56*var(--u));object-fit:contain;pointer-events:none;-webkit-user-drag:none;filter:drop-shadow(0 calc(1.1*var(--u)) calc(1.3*var(--u)) rgba(30,42,36,.3))}
.mp{display:block;width:calc(52*var(--u));height:calc(60*var(--u));padding:calc(4*var(--u)) calc(4*var(--u)) calc(10*var(--u));background:#fff;border-radius:calc(3*var(--u));rotate:-5deg;box-shadow:0 calc(4*var(--u)) calc(9*var(--u)) rgba(30,42,36,.18)}
.mp .pph{height:100%;aspect-ratio:auto;border-radius:calc(1.5*var(--u));box-shadow:none}
.mp .pph .rig{left:2%;width:96%}
.mp.pk-strip{width:auto;height:auto;padding:calc(3*var(--u)) calc(3*var(--u)) calc(4*var(--u))}
.pk-bs{position:relative;display:block;height:calc(62*var(--u));width:auto}
.pk-play{position:absolute;right:calc(7*var(--u));bottom:calc(13*var(--u));width:calc(16*var(--u));height:calc(16*var(--u));border-radius:50%;background:var(--ink);box-shadow:var(--ghost);display:grid;place-items:center}
.pk-play .ic{width:calc(8*var(--u));height:calc(8*var(--u));fill:#fff;stroke:#fff;stroke-width:1.4;translate:calc(.5*var(--u)) 0}
/* FX is the bare riso wand (its own white edge and shadow), the count badge in the empty top left corner: the kid's colour as a fill, the number in ink, the ink edge */
.fxc{position:relative;display:grid;place-items:center;width:calc(58*var(--u));height:calc(58*var(--u))}
.fx-wand{display:block;width:calc(50*var(--u));height:calc(50*var(--u));object-fit:contain;pointer-events:none;-webkit-user-drag:none;filter:drop-shadow(0 calc(1.1*var(--u)) calc(1.3*var(--u)) rgba(30,42,36,.3))}
.fx-badge{position:absolute;left:calc(-7*var(--u));top:calc(-5*var(--u));min-width:max(calc(20px*var(--fl,1)),calc(24*var(--u)));height:max(calc(20px*var(--fl,1)),calc(24*var(--u)));padding:0 calc(5*var(--u));border-radius:999px;background:var(--acc);box-shadow:inset 0 0 0 var(--rl) var(--ink),var(--ghost);display:grid;place-items:center;font-style:normal;font-weight:900;font-size:max(calc(11px*var(--ffl,1)),calc(13*var(--u)));line-height:1;color:var(--ink);animation:cnt .5s var(--spring-pop) both}
.fx-badge[hidden]{display:none}

/* the shutter: a ring in the kid's colour (90 across, 7 thick, the paper showing between it and the white disc) printed with an ink line centred on each of its
   edges and its pink copy a hair off register, the white disc (68), a red dot in Video (60), a stop square while recording (34), the red progress ring over the band */
.shutter{position:relative;display:grid;place-items:center;width:calc(92*var(--u));height:calc(92*var(--u));padding:0;border:0;border-radius:50%;background:none}
.shutter svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;pointer-events:none}
.sh-ghost{mix-blend-mode:multiply;translate:calc(-1.1*var(--u)) calc(.9*var(--u))}
.sh-ghost circle{stroke:var(--pink);stroke-width:1.5}
.sh-band .bc{stroke:var(--acc);stroke-width:7;transition:opacity .2s}
.sh-band .bi{stroke:var(--ink);stroke-width:1.5}
.sh-in{position:relative;display:grid;place-items:center;width:calc(68*var(--u));height:calc(68*var(--u));border-radius:50%;background:#fff;box-shadow:0 calc(3*var(--u)) calc(6*var(--u)) rgba(30,42,36,.16);font-weight:900;font-size:max(calc(14px*var(--ffl,1)),calc(20*var(--u)));color:var(--ink);
  transition:width .3s var(--spring-pop),height .3s var(--spring-pop),border-radius .3s var(--spring-pop),background-color .2s,box-shadow .2s}
.shutter[data-mode=booth] .sh-in::after{content:"\00d7 4"}
.shutter[data-mode=video] .sh-in{width:calc(60*var(--u));height:calc(60*var(--u));background:var(--rec);box-shadow:none}
.shutter.rec .sh-in{width:calc(34*var(--u));height:calc(34*var(--u));border-radius:calc(8*var(--u));background:var(--rec);box-shadow:none}
.sh-ring{rotate:-90deg;stroke:var(--rec);stroke-width:7;stroke-linecap:round;stroke-dasharray:261;stroke-dashoffset:261;opacity:0}
.shutter.rec .sh-band .bc{opacity:.25}
.shutter.rec .sh-ring{opacity:1;animation:ring var(--dur,4s) linear forwards}
@keyframes ring{to{stroke-dashoffset:0}}
.shutter:disabled{opacity:.6}

/* mode switch: a touch taller than the app's, so every segment is a 44px tap target even on the smallest screen. The ink thumb carries its pink copy. */
.scr-cam .modes{height:max(calc(52*var(--u)),calc(50px*var(--fl,1)))}
.scr-cam .mthumb{box-shadow:var(--ghost)}
.scr-cam .modes button{font-size:max(calc(11px*var(--ffl,1)),calc(12*var(--u)));border-radius:999px}   /* the focus ring follows the pill */
.scr-cam .modes .ic{min-width:15px;min-height:15px}

/* while a booth runs or a clip records the app steps everything but the shutter out of the way (and out of the tab order); the film counter goes only while recording */
.scr-cam .in.shooting :is(.prints,.fxb,.vf-flip,.modes){opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s,visibility 0s .2s}
.scr-cam .in.is-rec .filmpill{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s,visibility 0s .2s}

/* ============ camera: transient cards on the picture ============ */
/* the booth hint: a white sticker label with ink text (never an ink bar) */
.cam-tip{position:absolute;left:50%;bottom:calc(14*var(--u));translate:-50% 0;z-index:5;width:max-content;max-width:88%;padding:calc(8*var(--u)) calc(16*var(--u));border-radius:999px;background:#fff;color:var(--ink);font-weight:800;font-size:max(calc(13px*var(--ffl,1)),calc(15*var(--u)));text-align:center;box-shadow:var(--bx-sticker);animation:cnt .5s var(--spring-pop) both}
.cam-tip[hidden]{display:none}
/* "That's today's roll!": white card, ink text, and two controls: the grown-up line (once) and a demo-only "Pretend it's tomorrow" */
.scr-cam .roll{bottom:calc(14*var(--u));display:flex;flex-direction:column;align-items:center;gap:calc(2*var(--u));max-width:92%;padding:calc(12*var(--u)) calc(16*var(--u)) calc(10*var(--u))}
.scr-cam .roll[hidden]{display:none}
.scr-cam .roll b{font-size:max(calc(16px*var(--ffl,1)),calc(18*var(--u)))}
.scr-cam .roll span{font-size:max(calc(13px*var(--ffl,1)),calc(14*var(--u)))}
.roll-gu{position:relative;display:flex;align-items:center;gap:6px;margin-top:calc(8*var(--u));padding:6px 12px;border-radius:999px;background:var(--blue);color:#fff;font-weight:700;font-size:max(calc(11px*var(--ffl,1)),calc(12*var(--u)));line-height:1.25;text-decoration:none;text-align:center}
.roll-gu[hidden]{display:none}
.roll-gu .ic{width:12px;height:12px;stroke-width:2.6}
.roll-gu::after{content:"";position:absolute;inset:-10px -4px}   /* a 44px tap target around the small chip */
.roll-new{margin-top:calc(6*var(--u));min-height:calc(44px*var(--fl,1));padding:0 calc(16px*var(--fl,1));border:0;border-radius:999px;background:var(--pink);color:var(--ink);font-weight:800;font-size:max(calc(13px*var(--ffl,1)),calc(14*var(--u)))}

/* ============ camera: "Today's film" (what the canister opens) ============
   A sheet over the camera, as the app's: the canister big (104) with the number on its label, a sticker slapped on at -3 degrees, the title in DynaPuff, two plain
   lines, a big "Got it" (an ink pill with its pink copy) and, for a kid without the Print Club, the club ticket's film version (no price: it goes to the Grown-ups
   section). The camera behind it is dimmed and inert; Esc, "Got it" and a tap on the dimmed part close it. */
.fc{position:absolute;inset:0 0 -1px;z-index:9;display:flex;align-items:flex-end}
.fc[hidden]{display:none}
.fc-scrim{position:absolute;inset:0;background:rgba(30,42,36,.4);animation:fadein .25s ease-out both}
.fc-sheet{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;text-align:center;padding:calc(30*var(--u)) calc(28*var(--u)) calc(20*var(--u));background:var(--paper);border-radius:calc(28*var(--u)) calc(28*var(--u)) 0 0;box-shadow:0 calc(-4*var(--u)) calc(24*var(--u)) rgba(30,42,36,.2);animation:fcup .42s cubic-bezier(.2,.8,.2,1) both}
@keyframes fcup{from{translate:0 100%}to{translate:0 0}}
@keyframes fcdown{to{translate:0 100%}}
@keyframes fcfade{to{opacity:0}}
.fc.out{pointer-events:none}
.fc.out .fc-sheet{animation:fcdown .2s ease-in both}
.fc.out .fc-scrim{animation:fcfade .2s ease-in both}
.fc-grab{position:absolute;top:calc(6*var(--u));left:50%;translate:-50% 0;width:calc(36*var(--u));height:calc(5*var(--u));border-radius:9px;background:rgba(30,42,36,.25)}
.fc-can{position:relative;flex:none;width:calc(104*var(--u));height:calc(104*var(--u));rotate:-3deg}
.fc-can img{display:block;width:100%;height:100%;object-fit:contain;-webkit-user-drag:none;filter:drop-shadow(0 calc(2*var(--u)) calc(3*var(--u)) rgba(30,42,36,.3))}
.fc-can b{font-size:calc(.38*104*var(--u))}
.fc-title{margin-top:calc(6*var(--u));font-family:var(--font-title);font-weight:700;font-variation-settings:"wght" 700,"wdth" 100;font-size:max(calc(20px*var(--ffl,1)),calc(28*var(--u)));line-height:1.2;color:var(--ink)}
.fc-lines{margin-top:calc(16*var(--u));display:flex;flex-direction:column;gap:calc(3*var(--u));color:var(--ink)}
.fc-l1{font-weight:800;font-size:max(calc(15px*var(--ffl,1)),calc(20*var(--u)));line-height:1.2}
.fc-l2{font-weight:600;font-size:max(calc(14px*var(--ffl,1)),calc(17*var(--u)));line-height:1.25;color:var(--ink78)}
.fc-got{margin-top:calc(22*var(--u));width:min(calc(240*var(--u)),100%);height:max(calc(56*var(--u)),calc(44px*var(--fl,1)));padding:0;border:0;border-radius:999px;background:var(--ink);color:var(--paper);font-weight:800;font-size:max(calc(15px*var(--ffl,1)),calc(20*var(--u)));box-shadow:var(--ghost)}
.fc-ticket{position:relative;display:block;flex:none;margin:calc(28*var(--u)) 0 calc(14*var(--u));width:calc(304*var(--u));max-width:100%;aspect-ratio:364/150;rotate:-1.25deg;border-radius:calc(14*var(--u));text-decoration:none}
.fc-ticket img{position:absolute;left:-3.2967%;top:-8%;width:106.5934%;max-width:none;height:auto;pointer-events:none;-webkit-user-drag:none}

/* ============ screen: camera, review ============ */
.review{position:absolute;inset:0 0 -1px;z-index:8;background:var(--paper);display:flex;flex-direction:column;align-items:center;padding:calc(26*var(--u)) 0 calc(24*var(--u));animation:fadein .3s ease-out both}
.review[hidden]{display:none}
.scr-cam .in.rv-open>[inert]{visibility:hidden;transition:visibility 0s .32s}   /* the camera behind the review, once the review has faded in */
.rv-stage{flex:1;min-height:0;width:100%;display:grid;place-items:center}
.rv-print{position:relative;width:calc(262*var(--u));rotate:-1.5deg;animation:glide .7s var(--spring-glide) both}
.rv-print.strip{width:calc(112*var(--u))}
.rv-print .bstrip{position:relative;width:100%}
/* a fresh photo develops from near-black to picture over about two seconds; a strip or a clip does not */
.rv-print .wash{position:absolute;inset:0;background:#140F0D;pointer-events:none;z-index:4;animation:develop 2s ease-out .25s both}
.rv-print.dive{animation:dive .5s ease-in both}
.rv-print.fly{animation:fly .45s ease-in both}
@keyframes dive{to{translate:0 calc(700*var(--u));scale:.22;opacity:.9}}
/* after the shot: Hold to bin, Decorate (the bare riso crayon, 76), Keep. Every cell is 76 tall so the labels share one line. Bin and Keep are 58 white circles with
   the ink edge and a tint ring just inside it (bin red at 35%, keep green-mint); Hold to bin's ring fills OUTSIDE the circle (5 wide, 4 clear of it, a faint track
   under it), only while held, so the thumb does not hide it. The circle sinks (.92) and the ring holds still. */
.rv-btns{flex:none;display:flex;gap:calc(16*var(--u));align-items:flex-start;animation:btnin .67s var(--spring-pop) .45s both}
.rb{display:flex;flex-direction:column;align-items:center;gap:calc(7*var(--u));width:calc(88*var(--u));padding:0;border:0;background:none;text-decoration:none;color:var(--ink72);font-weight:800;font-size:max(calc(11px*var(--ffl,1)),calc(13*var(--u)))}
.rb[hidden]{display:none}
.rb-c{display:grid;place-items:center;width:100%;height:calc(76*var(--u))}
.rb-c>*{grid-area:1/1}
.rb-f{position:relative;display:grid;place-items:center;width:max(calc(58*var(--u)),calc(46px*var(--fl,1)));height:max(calc(58*var(--u)),calc(46px*var(--fl,1)));border-radius:50%;background:#fff;
  box-shadow:inset 0 0 0 var(--rl) var(--ink),inset 0 0 0 calc(var(--rl) + 2.5*var(--u)) var(--ring),0 calc(3*var(--u)) calc(6*var(--u)) rgba(30,42,36,.16),var(--ghost);transition:scale .2s ease-out}
.rb-f .ic{width:calc(22*var(--u));height:calc(22*var(--u));min-width:19px;min-height:19px;stroke-width:2.3}
.rb-bin{--tint:#E0475E}
.rb-bin .rb-f{--ring:rgba(224,71,94,.35);color:var(--tint)}
.rb-keep .rb-f{--ring:#80D6B0;color:#1F9E6E}
.rb-keep .rb-f .ic{stroke-width:2.7}
.scr-cam .rb.holding{scale:1}
.scr-cam .rb.holding .rb-f{scale:.92}
.scr-cam .rb-ring{position:relative;inset:auto;width:calc(76*var(--u));height:calc(76*var(--u));max-width:none;rotate:-90deg;overflow:visible;fill:none;stroke-dasharray:none;stroke-dashoffset:0;pointer-events:none;opacity:0;transition:opacity 0s .2s}
.scr-cam .holding .rb-ring{opacity:1;stroke-dashoffset:0;transition:opacity .12s}
.scr-cam .rb-track{stroke:var(--tint);stroke-opacity:.22;stroke-width:5;stroke-dasharray:none;stroke-dashoffset:0}
.scr-cam .rb-fill{stroke:var(--tint);stroke-width:5;stroke-linecap:round;stroke-dasharray:223.1;stroke-dashoffset:223.1;transition:stroke-dashoffset .2s ease-out}
.scr-cam .holding .rb-fill{stroke-dashoffset:0;transition:stroke-dashoffset .6s linear}
.rb-crayon{display:block;width:max(calc(76*var(--u)),calc(62px*var(--fl,1)));height:max(calc(76*var(--u)),calc(62px*var(--fl,1)));object-fit:contain;pointer-events:none;-webkit-user-drag:none;filter:drop-shadow(0 calc(1.5*var(--u)) calc(2*var(--u)) rgba(30,42,36,.3))}
.rb-deco .rb-l{color:var(--ink)}
/* "Bin this print?" (keyboard and screen reader route; a pointer just holds) */
.ask{position:absolute;left:50%;bottom:calc(20*var(--u));translate:-50% 0;z-index:3;display:flex;flex-direction:column;align-items:center;gap:8px;width:max-content;max-width:92%;padding:12px 14px 14px;border-radius:22px;background:#fff;box-shadow:var(--bx-sticker),0 10px 28px rgba(30,42,36,.22);animation:cnt .4s var(--spring-pop) both}
.ask[hidden]{display:none}
.ask b{font-weight:800;font-size:max(calc(15px*var(--ffl,1)),calc(16*var(--u)))}
.ask-b{display:flex;gap:calc(8px*var(--fl,1))}
.ask button{min-height:calc(44px*var(--fl,1));padding:0 calc(18px*var(--fl,1));border:0;border-radius:999px;font-weight:800;font-size:max(calc(14px*var(--ffl,1)),calc(15*var(--u)))}
.ask-y{background:var(--pink);color:var(--ink)}
.ask-n{background:rgba(30,42,36,.08);color:var(--ink)}

/* ============ the step: Snap (v3) ============
   The words (title left, line + chips + Show me right) are laid out by css/tour.css. This file places the two satellites round the PINNED PHONE:
   they live in .step-sats, a box exactly on the phone (same left, top, width and height), so every number below is a fraction of --pw (its width)
   or --ph (its height) and the composition scales from 1000 to 3440px wide with the phone. Nothing here is a fixed pixel size.
   DESKTOP (the default here): the film STRIP hangs from behind the phone's LEFT side (its right tenth tucked behind the bezel, its bottom swinging
   out a little), and the words on the right sit exactly where the other steps put them. The instant PRINT
   sits in front of the phone's lower LEFT corner, under the huge title, and tucks only over the bezel (never over the Prints button).
   PHONES and TABLETS (the same media query as tour.css): the strip and the print peek out from behind the phone's two sides, as far as there is room.
   z-order (README): strip 1 < words 2 < phone 10 < the print 12 (.sat-over). */

/* the halftone: two feathered patches pinned in the stage's free corners (above the title, below the words), never behind text */
.sn-dots{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.sn-dots::before,.sn-dots::after{content:"";position:absolute;aspect-ratio:1.6;background:url(/assets/brand/halftone-paper.svg) center/contain no-repeat;
  -webkit-mask-image:radial-gradient(closest-side at 50% 50%,#000 24%,transparent 100%);mask-image:radial-gradient(closest-side at 50% 50%,#000 24%,transparent 100%)}
.sn-dots::before{left:-4%;top:-5%;width:clamp(420px,32vw,1300px);opacity:.42}
.sn-dots::after{right:-5%;bottom:-8%;width:clamp(480px,36vw,1400px);opacity:.5;scale:-1 1}

/* v3.2: the words column is in the SAME place as in the other steps (no margin): both pieces live on the LEFT of the phone, beside the title */
#snap{--sw:calc(var(--pw) * .3);--lean:4deg}

/* the booth strip: tucked behind the phone's LEFT side (its right tenth hidden behind the bezel), hung from near the top, its bottom swinging out to the left */
/* CONTEXTUAL (v3.2): the polaroid and the film strip are tucked away behind the phone until the app is making them. A photo pops the polaroid out (it
   develops, then it tucks back in); a booth pops the film strip out (it fills frame by frame, then it tucks back in). demo-camera.js toggles .is-out.
   Stowed = slid back toward the phone, shrunk and invisible; no script (or reduced motion) = out and still. --stow is the direction of "back to the phone". */
.js .sn-strip:not(.is-out),.js .sn-print:not(.is-out){opacity:0;scale:.55;rotate:calc(var(--r) + var(--spin,0deg));translate:calc(var(--pw) * var(--stow,.32)) calc(var(--pw) * -.06);pointer-events:none;
  transition:translate .34s cubic-bezier(.5,0,.8,.45),scale .34s cubic-bezier(.5,0,.8,.45),rotate .34s ease-in,opacity .22s ease-in .12s}
.js .sn-strip.is-out,.js .sn-print.is-out{opacity:1;scale:1;rotate:var(--r);translate:0 0;
  transition:translate .72s var(--spring-pop),scale .72s var(--spring-pop),rotate .72s var(--spring-pop),opacity .16s ease-out}
.sn-strip{--r:var(--lean);--spin:10deg;width:var(--sw);left:calc(var(--sw) * -.9);top:calc(var(--ph) * .03);transform-origin:100% 0;pointer-events:none}

.sn-strip .w .rig{left:6%;width:88%}   /* the Monster is taller than the Bear was: smaller, so the horns stay in the window */
.sn-strip .w.mirror .rig{scale:-1 1}
.sn-strip .w.empty .rig{display:none}
.sn-strip .wash{position:absolute;inset:0;z-index:4;background:#140F0D;pointer-events:none;animation:develop 1.05s ease-out .05s both}

/* the print: the see-through white frame (print.svg) over the picture, in front of the phone's lower left corner. Only its right edge tucks over the bezel. */
.sn-print{--r:-7deg;position:absolute;width:calc(var(--pw) * .52);aspect-ratio:1335/1744;left:calc(var(--pw) * -.47);bottom:calc(var(--pw) * -.09);pointer-events:none}
.sn-pphoto{position:absolute;left:12.547%;top:9.604%;width:74.906%;height:76.45%;z-index:0}
.sn-pphoto .rig{left:-4%;width:108%}
.sn-pphoto.mirror .rig{scale:-1 1}
.sn-pframe{position:absolute;inset:0;z-index:1;width:100%;height:100%;max-width:none}
.sn-print .stamp{z-index:2;left:14.5%;top:89.3%;height:3.1%}
.sn-print .wash{position:absolute;inset:0;z-index:4;background:#140F0D;pointer-events:none;animation:develop 2s ease-out .6s both}

.sn-print .play{width:20%;right:6%;bottom:5%;height:auto;aspect-ratio:1}
.sn-print .play .ic{width:54%;height:54%;translate:6% 0}

/* a narrow desktop (the words column is only ~200px): a slimmer strip and less lean, so the words keep their room */
@media (min-width:1000px) and (max-width:1199.98px){
  #snap{--sw:calc(var(--pw) * .27);--lean:3deg}
}

/* a short window on a desktop or a phone on its side (the words column is the height of the screen): drop the caption and shrink the words so they
   stay clear of the nav pill at the top */
@media (max-height:560px) and (min-width:1000px),(max-height:520px) and (min-width:700px){
  #snap .step-cap{display:none}
  #snap .step-line{font-size:1.25rem;margin-bottom:.5em}
  #snap .step-chips{font-size:1rem;margin-bottom:.8em}
}

/* ============ phones and tablets (tour.css's own media query) ============
   The phone fills the width on a phone, so there is no room beside it: both pieces peek out from BEHIND its sides, as far as the room goes
   (--out), and the print drops behind the phone too (nothing may cover the app's controls). A tablet has plenty of room: the pieces show whole. */
@media (max-width:999.98px) and (min-height:521px),(max-width:699.98px){
  #snap{--sw:calc(var(--pw) * .36);--lean:-3deg;
    --out:min(calc(var(--pw) * .3),max(18px,calc((100vw - var(--pw)) / 2 - 8px)))}
  .sn-strip{transform-origin:0 0;--stow:-.3;--spin:-10deg}
  .sn-dots::before{width:clamp(300px,70vw,700px);top:auto;bottom:-4%;left:-12%}
  .sn-dots::after{display:none}
  .sn-strip{left:calc(var(--pw) + var(--out) - var(--sw));top:calc(var(--ph) * .06)}
  #snap .sn-print{z-index:1;width:calc(var(--pw) * .44);left:calc(var(--out) * -1);bottom:calc(var(--pw) * .06)}
}

/* ============ camera: reduced motion ============ */
@media (prefers-reduced-motion:reduce){
  .count b,.rv-print,.rv-btns,.vf-thumbs i,.cam-tip,.ask,.fx-badge,.fc-sheet,.fc-scrim{animation-duration:.01s!important;animation-delay:0s!important}
  .pk>*,.pk>.on,.rb-f,.sh-in{transition:none}
  .rv-print .wash,.sn-print .wash,.sn-strip .wash{animation:none;opacity:0}
  .vf .rig{transition:none}
  .js .sn-strip,.js .sn-print{transition:opacity .2s ease-out!important}
}

/* the self-playing demo "taps" the shutter, the mode and Keep with a pink ring (as the FX demo does on its tiles); finite, removes itself */
.scr-cam .tap{position:absolute;left:50%;top:50%;z-index:4;width:calc(60*var(--u));height:calc(60*var(--u));margin:calc(-30*var(--u)) 0 0 calc(-30*var(--u));border:calc(3*var(--u)) solid var(--pink);border-radius:50%;pointer-events:none;animation:cam-tap .75s ease-out forwards}
.rb-keep{position:relative}
@keyframes cam-tap{from{opacity:.95;scale:.35}to{opacity:0;scale:1.25}}
@media (prefers-reduced-motion:reduce){.scr-cam .tap{display:none}}