/* (c) 2026 Pretty Paperwork Network. All rights reserved. Not licensed for copying, redistribution or AI training. */
/* The Stage wall. Scoped to body[data-stg], which stage.js sets by the room the field has: full, mid, min, tiny.
   Theme tokens only, apart from what the dress code and the contact art bring with them. Motion steps like stop motion */
body[data-stg] .m-stage .field{--wall:color-mix(in srgb,var(--ink) 90%,var(--title-a));--on:var(--paper);--gap:14px;
 display:grid;gap:10px var(--gap);padding:0 14px 10px;background:var(--wall);border:var(--line);border-radius:30px 10px;box-shadow:8px 9px 0 var(--ink);overflow:hidden;
 transform:none;align-content:stretch}
body[data-stg=full] .m-stage .field{--gap:40px;grid-template:'top top top' 54px 'left main chip' auto 'left main lane' auto 'floor floor lane' minmax(128px,1fr)/minmax(140px,16%) minmax(0,1fr) minmax(190px,21%)}
body[data-stg=mid] .m-stage .field{grid-template:'top top' 34px 'left main' minmax(0,1fr) 'floor floor' auto 'lane lane' auto/minmax(120px,22%) minmax(0,1fr)}
body[data-stg=min] .m-stage .field{grid-template:'main' auto 'floor' auto 'lane' minmax(0,1fr)/minmax(0,1fr);padding:8px 8px 6px;gap:8px;border-radius:18px 8px;box-shadow:4px 5px 0 var(--ink)}
body[data-stg=tiny] .m-stage .field{grid-template:'main' minmax(0,1fr) 'floor' auto/minmax(0,1fr);padding:4px 6px;gap:4px;border-radius:12px 6px;box-shadow:none}
body[data-stg] #wires{display:none}
body[data-stg] .m-stage .screen{grid-area:main;align-self:start;justify-self:center;width:100%;max-width:var(--scrmax,none);max-height:none;box-shadow:6px 7px 0 color-mix(in srgb,var(--paper) 22%,transparent);border-color:var(--paper);position:relative;overflow:hidden;min-height:0}
body[data-stg=tiny] .m-stage .screen{height:100%;width:auto;padding:4px;box-shadow:none;border-radius:12px 4px}
/* truss */
.stg-top{grid-area:top;position:relative;margin:0 -14px;min-height:0;overflow:hidden;border-bottom:2px solid color-mix(in srgb,var(--paper) 30%,transparent)}
.stg-truss{position:absolute;inset:0;width:100%;height:100%}.stg-truss .rl{fill:none;stroke:var(--paper);stroke-width:2;opacity:.55;vector-effect:non-scaling-stroke}
.stg-truss .bm{fill:var(--accent);opacity:.3}.stg-truss .bm:nth-of-type(3n){fill:var(--title-b)}
.stg-dots{position:absolute;left:0;right:0;top:3px;display:flex;justify-content:space-around}
.stg-dots i{width:9px;height:9px;border-radius:50%;background:var(--paper);border:2px solid var(--ink);animation:stg-dot 1.8s steps(1) infinite}.stg-dots i:nth-child(3n){animation-delay:-.6s}.stg-dots i:nth-child(3n+1){animation-delay:-1.2s}
@keyframes stg-dot{0%,49%{opacity:1}50%,100%{opacity:.35}}
/* speaker tiles: the contact card art, in the site's ink line and hard drop */
.stg-left{grid-area:left;display:flex;flex-direction:column;gap:10px;justify-content:flex-start;min-height:0;min-width:0}
.stg-tile{background:var(--paper);color:var(--ink);border:2.5px solid var(--ink);border-radius:6px 16px 6px 14px;box-shadow:4px 5px 0 color-mix(in srgb,var(--paper) 22%,transparent);min-width:0}
.stg-tile .k,.stg-chip .k{display:block;font:700 10px/1.3 Tahoma,sans-serif;letter-spacing:.8px;text-transform:uppercase;opacity:.75}
.stg-tile b{display:block;font:italic 700 16px/1.15 'Josefin Sans',sans-serif;overflow-wrap:anywhere}.stg-tile small{display:block;font-size:12px;color:var(--sub)}
.stg-tile.now{padding:8px 10px 10px;display:grid;gap:3px;justify-items:start}
.stg-av{display:block;aspect-ratio:1;border:2.5px solid var(--ink);border-radius:6px;overflow:hidden;background:var(--tape-p,var(--paper));line-height:0}
.stg-tile.now .stg-av{width:min(100%,120px)}
.stg-av .ppnc-av{display:block;width:100%!important;height:100%!important}.stg-av svg{display:block;width:100%;height:100%}.stg-av img{width:100%;height:100%;object-fit:cover}
.stg-ini{display:grid;place-items:center;height:100%;aspect-ratio:1;font:700 20px/1 'Josefin Sans',sans-serif;background:var(--title-a);color:var(--title-ink)}
.stg-tile.up{display:flex;gap:8px;align-items:center;padding:5px 8px}.stg-tile.up .stg-av{width:40px;flex:none}.stg-un{min-width:0}.stg-tile.up b{font-size:13px}
.stg-next{font:700 13px/1 'Josefin Sans',sans-serif;background:var(--accent);color:var(--accent-ink);border:2.5px solid var(--paper);border-radius:99px;padding:8px 12px 5px;cursor:pointer;box-shadow:3px 3px 0 color-mix(in srgb,var(--paper) 22%,transparent);min-height:34px}
.stg-next:hover{transform:translate(-1px,-1px)}.stg-next:active{transform:translate(2px,2px);box-shadow:none}.stg-next:focus-visible{outline:3px solid var(--paper);outline-offset:2px}
/* the source chip and its three traces into the screen */
.stg-chip{grid-area:chip;position:relative;align-self:start;justify-self:stretch;background:var(--ink);color:var(--paper);border:2.5px solid var(--paper);border-radius:6px;padding:8px 10px;box-shadow:0 0 0 4px var(--wall),0 0 0 6px color-mix(in srgb,var(--paper) 40%,transparent);display:grid;gap:1px;min-width:0}
.stg-chip b{font:italic 700 16px/1.2 'Josefin Sans',sans-serif}.stg-chip small{font-size:12px;opacity:.8}
.stg-tr{position:absolute;right:100%;top:6px;bottom:6px;width:calc(var(--gap,44px) + 4px);height:calc(100% - 12px);overflow:visible;margin-right:6px}
.stg-tr path{fill:none;stroke:var(--paper);stroke-width:2;vector-effect:non-scaling-stroke;stroke-dasharray:6 5;animation:stg-tr 1.2s steps(6) infinite}@keyframes stg-tr{to{stroke-dashoffset:-22}}
/* the money surface stays, docked under the chip */
body[data-stg] .m-stage .lane{grid-area:lane;padding:0;gap:10px;justify-content:flex-start;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;perspective:none}
body[data-stg] .m-stage .lane .card{transform:none;padding:7px 10px 9px 20px;box-shadow:3px 4px 0 color-mix(in srgb,var(--paper) 22%,transparent)}
body[data-stg] .m-stage .lane .card.hot{padding-top:20px}
body[data-stg] .m-stage .lane .card .big{font-size:clamp(20px,1.9vw,26px)}body[data-stg] .m-stage .lane .card h3{font-size:14px}body[data-stg] .m-stage .lane .card p{font-size:12px}
body[data-stg] .m-stage .lane .acts{margin-top:4px;gap:6px}
body[data-stg=mid] .m-stage .lane{flex-direction:row;overflow:hidden}body[data-stg=mid] .m-stage .lane .card{flex:1 1 0;min-width:0}
body[data-stg=mid] .m-stage .lane .card p,body[data-stg=mid] .m-stage .lane .card ul,body[data-stg=mid] .m-stage .lane .card .fine,body[data-stg=mid] .m-stage .lane .card h3{display:none}
body[data-stg=tiny] .m-stage .lane{display:none}
body[data-stg=mid] .stg-chip,body[data-stg=min] .stg-chip,body[data-stg=tiny] .stg-chip,body[data-stg=min] .stg-top,body[data-stg=tiny] .stg-top,body[data-stg=min] .stg-left,body[data-stg=tiny] .stg-left{display:none}
body[data-stg=mid] .stg-tile.up{display:none}body[data-stg=mid] .stg-tile.now .stg-av{width:min(100%,72px)}
/* floor: bunnies and captions */
.stg-floor{grid-area:floor;position:relative;min-width:0;min-height:128px;--z:1}
.stg-buns{position:absolute;inset:0;pointer-events:none}
.stg-bun{position:absolute;bottom:2px;left:calc(var(--z)*(72px + var(--s,0)*76px));--w:calc(var(--z)*64px);--h:calc(var(--z)*84px);width:var(--w);height:var(--h);transition:left .42s steps(4)}
.stg-bun .shd{position:absolute;left:12%;right:12%;bottom:-3px;height:9px;border-radius:50%;background:var(--ink);opacity:.5}
.stg-bun .fig{position:absolute;inset:0;transform-origin:50% 95%;filter:drop-shadow(0 0 1px var(--paper))}
.stg-bun .f{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.stg-bun{--b:.3s}.stg-bun[data-suit=sunny]{--b:.26s}.stg-bun[data-suit=domino]{--b:.29s}.stg-bun[data-suit=toast]{--b:.31s}.stg-bun[data-suit=clay]{--b:.28s}
.stg-bun .f0{animation:sb-bf0 var(--b) steps(1) var(--dl) infinite}.stg-bun .f1{animation:sb-bf1 var(--b) steps(1) var(--dl) infinite}
.stg-bun .fig{animation:stg-idle var(--t) steps(3,end) var(--dl) infinite}@keyframes stg-idle{50%{transform:scaleY(1.03) translateY(-1px)}}
.stg-bun .fig.m-sway{animation-name:stg-sway}@keyframes stg-sway{0%,100%{transform:rotate(-2.4deg)}50%{transform:rotate(2.4deg)}}
.stg-bun .fig.m-sing{animation-name:stg-sing}@keyframes stg-sing{50%{transform:translateY(-6%) scale(1.03,.98)}}
.stg-bun .fig.m-rock{animation-name:stg-rock}@keyframes stg-rock{50%{transform:skewX(-3deg) translateX(2%)}}
.stg-bun.on{--w:calc(var(--z)*96px);--h:calc(var(--z)*126px);left:6px;z-index:2}
.stg-bun.on .shd{opacity:.7}
.stg-caps{position:absolute;left:calc(var(--z)*116px);right:0;top:2px;display:grid;grid-template-columns:.8fr 1.5fr 1fr;gap:18px;color:var(--paper)}
.stg-caps p{min-width:0;font-weight:400}.stg-caps b{display:block;font:italic 700 14px/1.2 'Josefin Sans',sans-serif}.stg-caps small{display:block;font-size:12px;line-height:1.25;opacity:.82;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
/* the image refresh: LED dots wipe up from the corner when the source changes, and a patch of them rests there */
.stg-led{position:absolute;left:10px;bottom:10px;width:92px;height:52px;z-index:3;pointer-events:none;border-radius:0 0 0 4px;
 background:radial-gradient(circle,var(--accent) 34%,transparent 40%) 0 0/8px 8px,radial-gradient(circle,var(--title-b) 34%,transparent 40%) 4px 4px/8px 8px,var(--ink);opacity:.9;
 clip-path:polygon(0 0,100% 100%,0 100%)}
.stg-led.go{animation:stg-wipe .72s steps(9) both}
@keyframes stg-wipe{0%{width:92px;height:52px;clip-path:polygon(0 0,100% 100%,0 100%)}40%,65%{width:calc(100% - 20px);height:calc(100% - 20px);clip-path:polygon(0 -100%,200% 100%,0 100%)}100%{width:92px;height:52px;clip-path:polygon(0 0,100% 100%,0 100%)}}
body.stg-play .stg-led:not(.go){opacity:0}
/* small rooms */
.nx2{display:none}
body[data-stg=min] .nx2{display:block;position:absolute;right:0;bottom:4px;font-size:12px;min-height:30px;padding:6px 10px 3px}
body[data-stg=mid] .stg-floor{min-height:94px;height:94px}body[data-stg=mid] .stg-bun{--w:44px;--h:58px;left:calc(84px + var(--s,0)*48px)}body[data-stg=mid] .stg-bun.on{--w:68px;--h:90px;left:4px}
body[data-stg=mid] .stg-caps{left:82px;top:0;grid-template-columns:.7fr 1.6fr;gap:12px}body[data-stg=mid] .stg-caps .c3{display:none}
body[data-stg=min] .stg-floor{min-height:78px;height:78px}
body[data-stg=min] .stg-bun:not(.on){display:none}body[data-stg=min] .stg-bun.on{--w:54px;--h:72px;left:0;bottom:0}
body[data-stg=min] .stg-caps{left:60px;bottom:auto;top:2px;grid-template-columns:minmax(0,1fr);gap:1px}body[data-stg=min] .stg-caps .c3,body[data-stg=min] .stg-caps .c1 small{display:none}
body[data-stg=min] .stg-caps small{-webkit-line-clamp:1}body[data-stg=tiny] .stg-bun{display:none}
body[data-stg=tiny] .stg-floor{height:auto;min-height:0}body[data-stg=tiny] .stg-buns,body[data-stg=tiny] .stg-caps .c1,body[data-stg=tiny] .stg-caps .c3,body[data-stg=tiny] .stg-caps small{display:none}
body[data-stg=tiny] .stg-caps{position:static;display:block}body[data-stg=tiny] .stg-caps b{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (prefers-reduced-motion:reduce){.stg-dots i,.stg-tr path,.stg-bun .fig,.stg-bun .f0,.stg-bun .f1,.stg-led{animation:none!important}.stg-bun{transition:none}.stg-bun .f1{opacity:0}.stg-bun .sb-a1{opacity:0}}