@font-face{font-family:'Barlow';font-weight:600;font-style:normal;font-display:swap;src:url('/fonts/Barlow-600.woff2') format('woff2')}
@font-face{font-family:'Barlow Condensed';font-weight:800;font-style:normal;font-display:swap;src:url('/fonts/BarlowCondensed-800.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:500;font-style:normal;font-display:swap;src:url('/fonts/IBMPlexMono-500.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-weight:400 600;font-style:normal;font-display:swap;src:url('/fonts/IBMPlexSans-400.woff2') format('woff2')}
:root{--tex-velvet:url("/art/site/texture-velvet-1024.8bb771245e.webp");--tex-velvet-black:url("/art/site/texture-velvet-black-1024.90e14701df.webp");--tex-neon:url("/art/site/texture-neon-1024.5c6feab7f6.webp");}
/* WYN Studios — a printed playbill in a neon showroom (docs/studio-site/DESIGN.md §2, §5, §11).
   Single-theme (dark) by design. Three panel objects only: .poster-frame (games), .ticket (receipts, kit, stubs),
   .bill (playbill columns: rules and whitespace, no box). Primary action = .btn-ticket; secondary = .link-arrow;
   pills only for chips and filters. Every number is Plex Mono. */
:root{
  --ink:#07090f; --velvet:#0e1322; --haze:#1a2140; --chalk:#f3efe6; --dim:#a9a7a0;
  --saffron:#ff9d2e; --magenta:#ff3d8f; --mint:#3ee6b0; --gold:#f3c860;
  --line:rgba(243,239,230,.12); --line-strong:rgba(243,239,230,.22); --rule:rgba(243,200,96,.32);
  --display:"Barlow Condensed","Arial Narrow",Impact,sans-serif;
  --sub:"Barlow","IBM Plex Sans",system-ui,sans-serif;
  --body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --gutter:clamp(16px,4vw,48px); --max:1280px;
  --ease:cubic-bezier(.2,.7,.2,1); --dur:.55s;
  --tungsten:radial-gradient(120% 90% at 0 0,rgba(255,196,120,.13),rgba(255,157,46,.04) 38%,transparent 62%);
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--chalk);font:16px/1.55 var(--body);overflow-x:hidden;min-height:100%}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
input,select,textarea{font:inherit;color:inherit}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--saffron);color:var(--ink);padding:8px 12px;z-index:100}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--saffron);outline-offset:3px}
.mono{font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums}
.dim{color:var(--dim)}
.gold{color:var(--gold)}
.display{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.005em;line-height:.9}
.lede{font-size:clamp(17px,2.1vw,21px);line-height:1.5;max-width:56ch;color:var(--chalk)}

/* light-dust canvas (desktop only) + cursor ring */
#dust{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;opacity:.8;display:none}
@media (hover:hover) and (min-width:760px){#dust{display:block}}
#cursor{position:fixed;left:0;top:0;width:18px;height:18px;margin:-9px 0 0 -9px;border:1.5px solid var(--saffron);border-radius:50%;pointer-events:none;z-index:200;transform:translate3d(-100px,-100px,0);opacity:0;transition:scale .15s var(--ease),opacity .3s}
body.has-cursor #cursor{opacity:1}
body.has-cursor #cursor.is-out{opacity:0}
#cursor.is-hot{scale:2.5;border-color:var(--magenta)}
#cursor.is-coin{scale:.8;border-color:transparent;background:radial-gradient(circle at 35% 30%,#fff1b8,#f3c860 45%,#b88722 80%);box-shadow:0 0 10px rgba(243,200,96,.6)}  /* 21 cursor coin */
@media (hover:none){#cursor{display:none}}

/* ---------- the playbill slug: index, rule, eyebrow ---------- */
.slug{display:flex;align-items:center;gap:12px;margin-bottom:18px;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.slug-no{color:var(--saffron);white-space:nowrap}
.slug-rule{flex:0 0 clamp(40px,7vw,96px);height:1px;background:linear-gradient(90deg,var(--saffron),var(--rule))}
.slug-label{color:var(--dim);min-width:0}
.slug-label a{color:var(--dim);text-decoration:none}
.slug-label a:hover{color:var(--chalk)}

/* ---------- buttons: the ticket (primary) and the sliding-arrow link (secondary) ---------- */
.btn-ticket{--n:9px;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:12px 40px 12px 22px;background:var(--saffron);color:var(--ink);font:600 15px/1 var(--sub);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;white-space:nowrap;
  clip-path:polygon(var(--n) 0,calc(100% - var(--n)) 0,100% var(--n),100% calc(100% - var(--n)),calc(100% - var(--n)) 100%,var(--n) 100%,0 calc(100% - var(--n)),0 var(--n));
  background-image:linear-gradient(180deg,rgba(255,255,255,.18),transparent 55%);transition:transform .2s var(--ease)}  /* no filter animation: an animated filter on a clip-path element crashes WebKit */
.btn-ticket::after{content:"";position:absolute;top:7px;bottom:7px;right:22px;border-left:2px dotted rgba(7,9,15,.5)}
.btn-ticket:hover{transform:translateY(-2px);background-color:#ffb04d}
.btn-ticket:active{transform:none}
.btn-ticket:focus-visible{outline:none;box-shadow:inset 0 0 0 3px var(--ink),inset 0 0 0 5px var(--chalk)}
.btn-ticket[disabled]{opacity:.6;pointer-events:none}
.btn-ticket-sm{min-height:38px;padding:9px 32px 9px 16px;font-size:13px;--n:7px}
.btn-ticket-sm::after{right:16px;top:6px;bottom:6px}
.btn-ticket-lg{min-height:54px;padding:16px 48px 16px 26px;font-size:16px;--n:11px}
.btn-ticket-lg::after{right:26px}
/* 18 link underline: the saffron line draws in from the left over a dim rule (background-position only); the arrow slides 4 px */
.link-arrow{display:inline-flex;align-items:baseline;gap:8px;color:var(--chalk);font:600 15px/1.3 var(--sub);letter-spacing:.04em;text-decoration:none;padding:10px 0 9px;background:linear-gradient(90deg,var(--saffron) 50%,rgba(243,239,230,.28) 50%) 100% 100%/200% 1px no-repeat;transition:background-position .2s var(--ease)}
.link-arrow .arr{display:inline-block;color:var(--saffron);transition:transform .2s var(--ease)}
.link-arrow:hover,.link-arrow:focus-visible{background-position:0 100%}
.link-arrow:hover .arr,.link-arrow:focus-visible .arr{transform:translateX(4px)}
button.link-arrow{cursor:pointer}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:26px}

/* ---------- header ---------- */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;display:flex;align-items:center;gap:20px;padding:12px var(--gutter);background:linear-gradient(to bottom,rgba(7,9,15,.94),rgba(7,9,15,.66));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand-logo{height:28px;width:auto;flex:none}
.brand-studios{font-family:var(--display);font-weight:800;font-size:15px;line-height:1;letter-spacing:.3em;text-transform:uppercase;color:var(--saffron);margin-right:-.3em;translate:0 2px}
.nav{margin-left:auto;display:flex;align-items:center;gap:24px}
.nav a:not(.btn-ticket){text-decoration:none;font:600 14px/1 var(--sub);letter-spacing:.08em;text-transform:uppercase;color:var(--dim);padding:10px 0}
.nav a:not(.btn-ticket):hover,.nav a[aria-current="page"]{color:var(--chalk)}
.nav a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--saffron);text-underline-offset:8px}
.menu-btn{display:none;margin-left:auto;width:44px;height:44px;flex-direction:column;justify-content:center;align-items:center;gap:6px}
.menu-btn span{display:block;width:22px;height:2px;background:var(--chalk);transition:transform .25s}
.menu-btn[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}
.menu{position:fixed;inset:0;z-index:49;background:rgba(7,9,15,.97);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:26px;padding:var(--gutter)}
.menu a:not(.btn-ticket){text-decoration:none;font-family:var(--display);font-weight:800;font-size:44px;text-transform:uppercase;letter-spacing:.03em}
@media (max-width:860px){.nav{display:none}.menu-btn{display:flex}}

/* ---------- stage / hero ---------- */
.stage{position:relative;isolation:isolate;overflow:hidden;min-height:min(92vh,920px);display:grid;align-items:end;padding:clamp(80px,14vh,160px) var(--gutter) clamp(48px,8vh,96px)}
.stage-short{min-height:min(62vh,560px)}
.stage-layers{position:absolute;inset:0;z-index:-1}
.layer{position:absolute;inset:0}
.layer-velvet{inset:-16px;background:radial-gradient(120% 80% at 50% 110%,#1a2140 0%,#0e1322 45%,#07090f 100%)}
.stage.tex .layer-velvet::after{content:"";position:absolute;inset:0;background:var(--tex-velvet) center/720px repeat;opacity:.06}
.layer-cast img,.layer-scene,.layer-backdrop{width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.04)}
.layer-cast{animation:rise 1.4s var(--ease) both}
.layer-scene,.layer-backdrop{animation:rise 1.2s var(--ease) both;opacity:.9}
.layer-sweep{background:linear-gradient(100deg,transparent 30%,rgba(255,220,160,.22) 48%,rgba(255,157,46,.14) 52%,transparent 70%);mix-blend-mode:screen;animation:sweep 1.6s var(--ease) .2s both;pointer-events:none}
.layer-confetti{background-image:radial-gradient(circle,rgba(255,157,46,.9) 1px,transparent 1.6px),radial-gradient(circle,rgba(255,61,143,.8) 1px,transparent 1.6px),radial-gradient(circle,rgba(62,230,176,.8) 1px,transparent 1.6px);background-size:160px 160px,220px 220px,300px 300px;background-position:0 0,40px 70px,100px 20px;opacity:.35;animation:drift 3.2s cubic-bezier(.16,.84,.3,1) .2s both;pointer-events:none}  /* confetti settles */
.stage::after{content:"";position:absolute;inset:auto 0 0 0;height:50%;background:linear-gradient(to top,var(--ink),transparent);z-index:-1;pointer-events:none}
@media (max-width:759px){.hero.stage::after{height:75%;background:linear-gradient(to top,var(--ink) 30%,rgba(7,9,15,.55) 70%,transparent)}}
.hero-copy{position:relative;max-width:var(--max);width:100%;margin:0 auto}
.hero-copy h1{font-size:clamp(60px,10.5vw,160px);line-height:.84;max-width:9ch;letter-spacing:-.005em}
.page-head .hero-copy h1{font-size:clamp(52px,8vw,120px)}
.hero-copy .lede{margin-top:22px}
.hero-copy .slug,.hero-copy .lede,.hero-tag{text-shadow:0 1px 3px rgba(7,9,15,.9),0 1px 12px rgba(7,9,15,.85)}
.hero-tag{margin-top:14px;font:600 clamp(16px,1.8vw,20px)/1.2 var(--sub);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.h1-num{font-size:.8em;letter-spacing:-.04em}
/* 2 neon strike: three flicker frames, then a halo that breathes (opacity) */
.neon{position:relative;color:var(--chalk);text-shadow:0 0 12px rgba(255,157,46,.45),0 0 40px rgba(255,157,46,.25);animation:flicker .9s steps(1,end) .3s both}
.neon::before{content:"";position:absolute;inset:-18% -8% -10% -12%;z-index:-1;background:radial-gradient(closest-side,rgba(255,157,46,.16),transparent);opacity:.4;animation:breathe 6s ease-in-out 1.4s infinite alternate;pointer-events:none}
@keyframes breathe{to{opacity:1}}
.scroll-hint{position:absolute;right:var(--gutter);bottom:24px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);text-decoration:none;padding-right:18px}
.scroll-hint::after{content:"";position:absolute;right:0;top:50%;width:8px;height:8px;border-right:1px solid var(--dim);border-bottom:1px solid var(--dim);transform:translateY(-70%) rotate(45deg);animation:bob 1.6s ease-in-out 1.6s 2}
@keyframes rise{from{opacity:0;transform:translateY(24px) scale(1.06)}to{opacity:1;transform:translateY(0) scale(1.04)}}
@keyframes sweep{from{transform:translateX(-60%)}to{transform:translateX(60%)}}
@keyframes drift{to{background-position:0 -160px,40px -150px,100px -280px}}
@keyframes flicker{0%{opacity:0}8%{opacity:1}12%{opacity:.3}18%{opacity:1}24%{opacity:.5}30%,100%{opacity:1}}
@keyframes bob{0%,100%{transform:translateY(-70%) rotate(45deg)}50%{transform:translateY(-20%) rotate(45deg)}}

/* the signature: the thief langur peeks from behind the last word, once per visit (site.js adds .peek) */
/* two frames on one canvas (art lane): the wall line (y 293 of 356) sits on the cap line of the last word */
.peek-host{position:relative;display:inline-block}
.langur{position:absolute;right:.02em;top:calc(var(--cap-top,.27em) - .4395em);width:.9em;height:.534em;pointer-events:none;z-index:1}
.langur img{position:absolute;inset:0;width:100%;height:100%;opacity:0}
.peek-host.peek .langur-duck{animation:langur-duck 3s linear both}
.peek-host.peek .langur-peek{animation:langur-peek 3s var(--ease) both}
@keyframes langur-duck{0%{opacity:0;transform:translateY(8%)}8%{opacity:1;transform:none}16%{opacity:1}22%{opacity:0}74%{opacity:0}80%{opacity:1}92%{opacity:1;transform:none}100%{opacity:0;transform:translateY(8%)}}
@keyframes langur-peek{0%,16%{opacity:0;transform:translateY(10%)}24%{opacity:1;transform:none}70%{opacity:1;transform:none}78%{opacity:0;transform:translateY(8%)}100%{opacity:0}}

/* ---------- marquee: on the neon tile, the crown-w as separator ---------- */
.marquee{position:relative;isolation:isolate;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:14px 0;background:#090c16}
.marquee::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--tex-neon) center/820px repeat;opacity:.45}
.marquee-track{display:flex;align-items:center;gap:30px;width:max-content;animation:marquee 44s linear infinite;font-family:var(--display);font-weight:800;font-size:24px;letter-spacing:.08em;text-transform:uppercase;color:var(--chalk);text-shadow:0 0 14px rgba(255,157,46,.35)}
.mq-mark{width:25px;height:18px;opacity:.95;filter:drop-shadow(0 0 6px rgba(255,157,46,.5))}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- sections: full-bleed grounds with the velvet tile; content on a 12-column editorial grid ---------- */
.section{position:relative;isolation:isolate;overflow-x:clip;padding:clamp(64px,10vh,128px) var(--gutter)}
.section.tex::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--tex-velvet) 0 0/640px repeat;opacity:.05;pointer-events:none}
.section-velvet::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--velvet)}
.section-velvet.tex::after{background-image:var(--tex-velvet-black);opacity:.06}
.wrap{max-width:var(--max);margin:0 auto;position:relative}
.ed,.rail-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2.4vw,36px);row-gap:32px;align-items:start}
.ed>.ed-head{grid-column:1/span 5;position:relative}
.ed>.ed-body{grid-column:6/span 7}
.ed.flip>.ed-head{grid-column:8/span 5;grid-row:1}
.ed.flip>.ed-body{grid-column:1/span 7;grid-row:1}
.rail-row>.ed-head{grid-column:1/span 4;position:sticky;top:96px}
.rail-row>.rail{grid-column:5/-1;margin-right:calc(-1 * max(var(--gutter),(100vw - var(--max)) / 2));padding-right:var(--gutter)}
.ed-head h2,.wide-head h2{font-size:clamp(38px,5.4vw,76px);margin-bottom:16px}
.ed-head .dim,.wide-head .dim{max-width:46ch}
.wide-head{max-width:820px;margin-bottom:34px}
.more{margin-top:14px}
.bignum{position:absolute;left:calc(-1 * var(--gutter) - .06em);top:-.2em;z-index:-1;font-size:clamp(160px,24vw,360px);line-height:1;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1px rgba(243,200,96,.16);pointer-events:none;user-select:none}
@media (max-width:900px){
  .ed>.ed-head,.ed>.ed-body,.ed.flip>.ed-head,.ed.flip>.ed-body,.rail-row>.ed-head{grid-column:1/-1;grid-row:auto;position:relative;top:auto}
  .rail-row>.rail{grid-column:1/-1;margin:0 calc(-1 * var(--gutter));padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}
  .bignum{font-size:42vw;top:-.35em}
}

/* ---------- entrances (MOTION §2): each element carries a NAMED entrance; there is no generic fade ----------
   site.js adds .in when an element enters (IntersectionObserver); scroll-driven ones bind to view() where supported.
   Before .in an element is hidden only once site.js runs (html.js-ready), so a page without JS is complete. */
:root{--out:cubic-bezier(.16,.84,.3,1);--mass:cubic-bezier(.2,.8,.2,1)}
.js-ready [data-enter]:not(.in){opacity:0}
[data-enter].in{opacity:1}

/* ---------- panel 1: the poster frame (games) ---------- */
.poster-frame{--frame:0 0 0 1px rgba(243,200,96,.42),0 0 0 5px #05070c,0 0 0 6px rgba(243,200,96,.22)}
.rail{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 0 22px;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail .card{flex:0 0 min(74vw,290px);scroll-snap-align:start}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,160px),1fr));gap:30px 18px}
@media (min-width:600px){.grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:40px 26px}}
.js .grid:not(.is-filtered)>.card[data-status="coming"]{display:none}
.card{display:flex;flex-direction:column;text-decoration:none;min-width:0;transform-style:preserve-3d;transition:transform .35s var(--ease)}
.card.is-tilt{transition:transform .14s linear;transition-delay:0s}
.card-art{position:relative;aspect-ratio:3/4;background:var(--haze);overflow:hidden;margin:6px;box-shadow:var(--frame),0 24px 50px rgba(0,0,0,.55)}
.card:hover .card-art{box-shadow:0 0 0 1px rgba(243,200,96,.8),0 0 0 5px #05070c,0 0 0 6px rgba(255,157,46,.6),0 30px 70px rgba(0,0,0,.65),0 0 40px rgba(255,157,46,.18)}
.card-art img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.card:hover .card-art img{transform:scale(1.05)}
.card-art::after{content:"";position:absolute;inset:0;background:var(--tungsten);pointer-events:none}
.card-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s}
.card.is-playing .card-video{opacity:1}
.card-sheen{position:absolute;inset:-40%;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.18) 50%,transparent 60%);transform:translate(var(--sx,-60%),var(--sy,-60%));opacity:0;transition:opacity .3s;pointer-events:none;z-index:1}
.card:hover .card-sheen{opacity:1}
.chip{position:absolute;left:10px;top:10px;z-index:2;padding:5px 9px;border-radius:999px;font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.chip-live{background:rgba(7,9,15,.55);color:var(--mint);box-shadow:inset 0 0 0 1px rgba(62,230,176,.6)}
.chip-soon{background:rgba(7,9,15,.55);color:var(--saffron);box-shadow:inset 0 0 0 1px rgba(255,157,46,.6)}
.card-body{padding:16px 6px 0;display:flex;flex-direction:column;gap:6px;border-top:0}
.card-no{font-size:11px;letter-spacing:.16em;color:var(--saffron)}
.card-title{font:600 21px/1.1 var(--sub);letter-spacing:.01em}
.card-tag{font:italic 400 14px/1.35 var(--body);color:var(--dim)}
.card-cta{margin-top:4px;font:600 13px/1 var(--sub);letter-spacing:.08em;text-transform:uppercase;color:var(--chalk);text-decoration:underline;text-decoration-color:var(--saffron);text-underline-offset:5px}
.card-cta .arr{display:inline-block;color:var(--saffron);transition:transform .25s var(--ease)}
.card:hover .card-cta .arr{transform:translateX(6px)}
.facts{display:flex;flex-wrap:wrap;gap:8px 18px;margin:6px 0 4px;font-size:12px;padding-top:10px;border-top:1px solid var(--line)}
.facts div{display:flex;flex-direction:column;gap:3px;min-width:0}
.facts dt{color:var(--dim);font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.facts dd{margin:0;color:var(--chalk);font-variant-numeric:tabular-nums}
.facts dd.gold{color:var(--gold)}
.pips{display:inline-flex;gap:4px;align-items:center;height:14px}
.pip{width:7px;height:7px;transform:rotate(45deg);box-shadow:inset 0 0 0 1px rgba(243,200,96,.45)}
.pip.on{background:var(--gold);box-shadow:0 0 6px rgba(243,200,96,.45)}
.pip.half{background:linear-gradient(135deg,var(--gold) 50%,transparent 50%)}

/* ---------- panel 2: the ticket / receipt ---------- */
.ticket{position:relative;background:var(--tungsten),linear-gradient(180deg,rgba(20,26,46,.9),rgba(13,18,34,.93)),var(--tex-velvet-black) center/512px;color:var(--chalk);
  -webkit-mask:radial-gradient(circle at 0 50%,#0000 6px,#000 6.5px) left/51% 22px repeat-y,radial-gradient(circle at 100% 50%,#0000 6px,#000 6.5px) right/51% 22px repeat-y;
  mask:radial-gradient(circle at 0 50%,#0000 6px,#000 6.5px) left/51% 22px repeat-y,radial-gradient(circle at 100% 50%,#0000 6px,#000 6.5px) right/51% 22px repeat-y}
.ticket-stub{display:flex;flex-direction:column;justify-content:space-between;gap:10px;padding:22px 16px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--saffron);border-right:2px dashed rgba(243,200,96,.35)}
.kit-ticket,.next-ticket{display:grid;grid-template-columns:auto 1fr}
.ticket-main{padding:24px clamp(18px,3vw,32px) 24px clamp(18px,2.4vw,28px);position:relative}
.receipt{padding:28px clamp(20px,3vw,36px) 26px;-webkit-mask:none;mask:none;
  --z:9px;-webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/calc(2*var(--z)) var(--z) repeat-x,linear-gradient(#000 0 0) top/100% calc(100% - var(--z)) no-repeat;
  mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/calc(2*var(--z)) var(--z) repeat-x,linear-gradient(#000 0 0) top/100% calc(100% - var(--z)) no-repeat;padding-bottom:calc(26px + var(--z))}
.receipt-head{display:flex;justify-content:space-between;gap:12px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);padding-bottom:12px;border-bottom:1px dashed var(--line-strong);margin-bottom:16px}
.fingerprint{font-size:clamp(13px,1.6vw,17px);letter-spacing:.06em;color:var(--mint);word-break:break-all;min-height:2.6em;margin-bottom:22px}
.fingerprint::after{content:"▌";animation:caret 1s steps(1) 4}
@keyframes caret{50%{opacity:0}}
.stubs{display:grid;grid-template-columns:1.5fr 1fr 1fr;border-top:1px dashed var(--line-strong);border-bottom:1px dashed var(--line-strong)}
.stub{padding:16px 12px 14px;display:flex;flex-direction:column;gap:6px;min-width:0}
.stub+.stub{border-left:1px dashed var(--line-strong)}
.stub b{font-size:clamp(20px,2.2vw,30px);line-height:1;color:var(--gold);font-weight:500;letter-spacing:-.03em;white-space:nowrap}
.stub span{color:var(--dim);font-size:13px;line-height:1.35}
.receipt-foot{margin-top:16px;font-size:14px;color:var(--dim);max-width:62ch}
@media (max-width:520px){.stubs{grid-template-columns:1fr}.stub+.stub{border-left:0;border-top:1px dashed var(--line-strong)}}
.kit{display:grid;gap:4px}
.kit li{display:flex;gap:14px;align-items:center;padding:12px 0;border-bottom:1px dashed var(--line)}
.kit li .spot{flex:none}
.kit li:last-child{border-bottom:0}
.kit-dl{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin-top:14px}
.kit-note{font-size:14px}

/* ---------- panel 3: the playbill column (rules and whitespace, no box) ---------- */
.bill{position:relative;padding-top:18px;border-top:3px double var(--rule)}
.bill::before{content:"";position:absolute;left:-150px;top:-120px;width:320px;height:240px;background:radial-gradient(closest-side,rgba(255,196,120,.07),rgba(255,157,46,.02) 55%,transparent);pointer-events:none;z-index:-1}
.bills{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:34px 28px}
.bills-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.bills-list{grid-template-columns:1fr}
.bill h3{font:600 20px/1.2 var(--sub);letter-spacing:.06em;text-transform:uppercase;margin:12px 0 8px}
.bill p{color:var(--dim);font-size:15px}
.spot{display:block;height:96px;width:auto;filter:drop-shadow(0 10px 16px rgba(0,0,0,.45))}
.spot.spot-sm{height:48px}
.spot-slot{display:none}  /* the slot is reserved in the markup for the art lane's painted cut-out; never an icon */
.bill .spot{margin-bottom:6px}
.steps{counter-reset:s;display:flex;flex-direction:column}
.steps li{counter-increment:s;display:grid;grid-template-columns:52px 1fr;gap:0 16px;padding:18px 0;border-bottom:1px solid var(--line)}
.steps li>*{grid-column:2}
.steps li::before{grid-row:1/span 2;content:counter(s,decimal-leading-zero);font:500 22px/1.1 var(--mono);color:var(--saffron);font-variant-numeric:tabular-nums}
.steps b{display:block;font:600 18px/1.25 var(--sub);letter-spacing:.04em;text-transform:uppercase}
.steps span{display:block;color:var(--dim);font-size:15px;margin-top:4px}
.steps-small li{padding:12px 0;grid-template-columns:40px 1fr}
.steps-small li::before{font-size:16px}
.cast{display:grid;gap:0}
.cast li{display:grid;grid-template-columns:64px 1fr;gap:16px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);font:600 17px/1.3 var(--sub)}
.cast img{width:64px;height:64px;object-fit:cover;clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px)}

/* ---------- studio: the pull-quote and the filmstrip ---------- */
.pull{margin:8px 0 46px}
.pull p{max-width:14ch;font-size:clamp(48px,8vw,128px);line-height:.88;color:var(--chalk);text-shadow:0 0 30px rgba(255,157,46,.18)}
.pull p::before{content:"“";color:var(--saffron);margin-left:-.42em;margin-right:.04em}
.filmstrip{position:relative;background:#030305;padding:26px 0;margin:0 calc(-1 * var(--gutter));overflow-x:auto;scrollbar-width:none;border-block:1px solid #000}
.filmstrip::-webkit-scrollbar{display:none}
.film-track{display:flex;gap:14px;width:max-content;padding:0 var(--gutter);position:relative}
.film-track::before,.film-track::after{content:"";position:absolute;left:0;right:0;height:12px;background:repeating-linear-gradient(90deg,transparent 0 10px,#cfc8b8 10px 22px,transparent 22px 30px);opacity:.22;-webkit-mask:linear-gradient(#000 0 0);border-radius:2px}
.film-track::before{top:-20px}
.film-track::after{bottom:-20px}
.frame{margin:0;position:relative;flex:none;width:clamp(220px,26vw,340px)}
.frame img{width:100%;aspect-ratio:16/9;object-fit:cover;filter:saturate(1.05) contrast(1.04)}
.frame figcaption{position:absolute;left:8px;bottom:6px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(243,239,230,.75);text-shadow:0 1px 4px #000}
.studio-foot{margin-top:40px}
.links{display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px}

/* ---------- library ---------- */
.lib-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;margin-bottom:6px}
.lib-head .slug{margin-bottom:0}
.results{font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.results span{color:var(--chalk)}
.filters{display:flex;flex-wrap:wrap;gap:16px 30px;align-items:center;margin:16px 0 36px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.filter-group{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.filter-group>.mono{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-right:4px}
.pill{padding:8px 13px;border-radius:999px;font-size:13px;font-weight:500;color:var(--dim);box-shadow:inset 0 0 0 1px var(--line)}
.pill:hover{color:var(--chalk)}
.pill.is-on{background:rgba(255,157,46,.14);color:var(--saffron);box-shadow:inset 0 0 0 1px rgba(255,157,46,.6)}
.search{flex:1 1 220px;min-width:0}
.search input{width:100%;padding:11px 2px;border:0;border-bottom:1px solid var(--line-strong);background:transparent;color:var(--chalk)}
.search input:focus{outline:none;border-bottom-color:var(--saffron)}
.empty{padding:40px 0;text-align:center}
.count-pop{display:inline-block;animation:pop .4s var(--ease)}
.results .count-pop{color:var(--saffron)}
@keyframes pop{from{transform:scale(1.35)}}  /* 22 count-line pop */
.lib-foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:48px;padding-top:24px;border-top:1px solid var(--line)}

/* ---------- originals: the shelf of ticket stubs ---------- */
.ogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr));gap:14px}
.ocard{padding:16px 20px 16px 22px;display:flex;flex-direction:column;gap:8px;min-height:132px;transition:transform .3s var(--ease)}
.ocard:hover{transform:translateY(-3px) rotate(-.4deg)}
.ocard-no{font-size:11px;letter-spacing:.16em;color:var(--saffron)}
.ocard h3{font:600 18px/1.15 var(--sub);letter-spacing:.03em;text-transform:uppercase}
.ocard .facts{margin-top:auto}

/* ---------- roadmap: the marquee-letter board ---------- */
.board{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:26px 28px;align-items:start}
.board-month{grid-column:1/-1;justify-self:start;position:relative;margin:26px 0 4px;padding:16px 26px 12px;background:#04060b;font:800 clamp(40px,6vw,76px)/.9 var(--display);letter-spacing:.08em;text-transform:uppercase;color:#ffe9c2;text-shadow:0 0 6px rgba(255,190,110,.9),0 0 26px rgba(255,157,46,.55)}
.board-month::before{content:"";position:absolute;inset:0;padding:6px;background:radial-gradient(circle,#ffd27a 0 2px,rgba(255,210,122,.25) 2.5px,transparent 3.5px) 0 0/13px 13px;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);filter:drop-shadow(0 0 3px rgba(255,190,110,.8))}
.board-month small{font-size:.32em;letter-spacing:.2em;color:var(--saffron);text-shadow:none;vertical-align:.9em}
.tl{display:grid;grid-template-columns:120px 1fr;gap:18px;align-items:start;text-decoration:none;transition:transform .3s var(--ease)}
.tl:hover{transform:translateY(-3px)}
.tl-art{position:relative;display:block;margin:6px;box-shadow:var(--frame),0 18px 40px rgba(0,0,0,.5)}
.tl-art img{aspect-ratio:4/5;object-fit:cover;width:100%}
.tl-stub{position:absolute;left:-6px;bottom:10px;padding:6px 12px 6px 10px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);background:var(--saffron);-webkit-mask:none;mask:none;clip-path:polygon(0 0,100% 0,calc(100% - 6px) 50%,100% 100%,0 100%)}
.tl-body{display:flex;flex-direction:column;gap:5px;min-width:0}
.tl-body .card-title{font-size:22px}
.tl-pitch{font-size:14px;line-height:1.45}
.tl-facts{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;font-size:12px;padding-top:8px;border-top:1px solid var(--line)}

/* ---------- game page ---------- */
.factstrip{display:flex;flex-wrap:wrap;gap:12px 28px;margin:24px 0 0;font-size:14px;padding-top:14px;border-top:1px solid var(--rule);max-width:860px}
.factstrip div{display:flex;flex-direction:column;gap:3px}
.factstrip dt{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.factstrip dd{margin:0;color:var(--chalk);font-variant-numeric:tabular-nums}
.factstrip dd.gold{color:var(--gold)}
.factstrip small{color:var(--dim);font-size:11px}
.player{position:relative;z-index:2;aspect-ratio:16/9;background:#05070c;overflow:hidden;margin:6px;box-shadow:var(--frame),0 30px 80px rgba(0,0,0,.6)}
.player-curtain{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:var(--tungsten),radial-gradient(80% 60% at 50% 60%,#1a2140,#07090f);z-index:2}
.player-curtain::before{content:"";position:absolute;inset:0;background:var(--tex-velvet) center/640px;opacity:.12}
.player-curtain::after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,220,160,.5) 1px,transparent 1.5px);background-size:120px 120px;opacity:.25}
.player-curtain>*{position:relative;z-index:1}
.player.is-live .player-curtain{opacity:0;pointer-events:none;transition:opacity .6s}
.player-frame,.player-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.player-bar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:18px;padding:4px 16px;background:linear-gradient(to top,rgba(7,9,15,.92),transparent);z-index:3;transform:translateY(100%);transition:transform .3s}
.player-bar .link-arrow{font-size:13px}
.player-bar [data-fullscreen]{margin-left:auto}
.player:hover .player-bar,.player:focus-within .player-bar{transform:none}
@media (max-width:640px){.player{aspect-ratio:9/14}.player-bar{transform:none}}
.clip{width:100%;margin:6px 6px 28px;box-shadow:var(--frame);background:#000}
.shot img{aspect-ratio:16/9;object-fit:cover;transition:transform .5s var(--ease)}
.frame.shot-phone{width:clamp(120px,13vw,180px)}
.shot-phone img{aspect-ratio:412/891}
.shot{display:block;overflow:hidden}
.shot:hover img{transform:scale(1.04)}
.lightbox{position:fixed;inset:0;z-index:120;background:rgba(7,9,15,.95);display:flex;align-items:center;justify-content:center;padding:var(--gutter)}
.lightbox img{max-height:90vh;max-width:100%}
.lightbox-close{position:absolute;top:16px;right:16px;font-size:36px;line-height:1;width:44px;height:44px}

/* ---------- lead form (a bill: rules, no box) ---------- */
.lead{max-width:760px}
.lead-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px}
.lead label,.lead fieldset{display:flex;flex-direction:column;gap:6px;min-width:0}
.lead fieldset{border:0;padding:0;margin:0}
.lead legend,.lead label>span{font:500 11px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.lead label>span small{font-size:10px;color:var(--dim);opacity:.7;margin-left:6px}
.lead input,.lead select,.lead textarea{width:100%;padding:11px 12px;border:0;border-bottom:1px solid var(--line-strong);background:rgba(7,9,15,.55);color:var(--chalk)}
.lead select{padding:6px}
.lead input:focus,.lead select:focus,.lead textarea:focus{outline:none;border-bottom-color:var(--saffron);background:rgba(14,19,34,.9)}
.lead .wide{grid-column:1/-1}
.lead .radio{flex-direction:row;align-items:center;gap:10px;font-size:15px;color:var(--chalk);padding:4px 0}
.lead .radio input{width:auto;accent-color:var(--saffron)}
.lead .hp{position:absolute;left:-9999px}
.lead [aria-invalid="true"]{border-bottom-color:var(--magenta)}
.lead-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:26px}
.lead-promise{font-size:14px}
.lead-status{margin-top:16px;padding:14px 16px;background:rgba(62,230,176,.1);color:var(--mint);border-left:3px solid var(--mint)}
.lead-status.is-error{background:rgba(255,61,143,.1);color:var(--magenta);border-left-color:var(--magenta)}
.lead-status .link-arrow{margin-left:10px}
.lead-status details{margin-top:10px;color:var(--chalk)}
.lead-status textarea{margin-top:8px;width:100%;min-height:120px;padding:10px;border:1px solid var(--line);background:var(--ink);color:var(--chalk);font:13px/1.5 var(--mono)}
.lead.is-sent .lead-grid,.lead.is-sent .lead-actions{display:none}
@media (max-width:620px){.lead-grid{grid-template-columns:1fr}}
.aside-note{margin-top:16px;font-size:14px}
.next-ticket .steps li{border-bottom-style:dashed}

/* ---------- phone game bar + 18+ dialog ---------- */
.gamebar{display:none}
@media (max-width:640px){
  .gamebar{display:flex;align-items:center;justify-content:space-between;gap:12px;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom,0px));background:linear-gradient(to top,rgba(7,9,15,.97) 60%,rgba(7,9,15,.8));border-top:1px solid var(--rule);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:transform .3s var(--ease),opacity .3s}
  .gamebar .btn-ticket{flex:1}
  .gamebar.is-away{transform:translateY(110%);opacity:0;pointer-events:none}
  .game-page .foot{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
}
.age-gate{position:fixed;max-width:min(460px,calc(100vw - 32px));padding:28px 30px;border:0;color:var(--chalk);box-shadow:0 30px 80px rgba(0,0,0,.7)}
.age-gate::backdrop{background:rgba(7,9,15,.84);backdrop-filter:blur(4px)}
.age-gate h2{font-size:clamp(30px,8vw,42px);margin-bottom:10px}
.age-gate .dim{font-size:14px}
.age-gate[open]{animation:gate-in .3s var(--ease)}
@keyframes gate-in{from{opacity:0;transform:translateY(12px) scale(.98)}}

/* ---------- footer: the back page of the playbill ---------- */
.foot{border-top:3px double var(--rule);padding:46px var(--gutter) calc(28px + env(safe-area-inset-bottom,0px));background:var(--tungsten),#090c16}
.foot-grid{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1fr;gap:24px}
@media (min-width:760px){.foot-grid{grid-template-columns:2fr 1fr 1fr}}
.foot-brand p{margin-top:12px;max-width:52ch;font-size:14px}
.foot-nav{display:flex;flex-wrap:wrap;gap:8px 18px;align-content:start}
.foot-nav a{text-decoration:none;color:var(--dim);font:600 13px/1.6 var(--sub);letter-spacing:.08em;text-transform:uppercase}
.foot-nav a:hover{color:var(--chalk)}
.foot-facts{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:12px;color:var(--gold);align-content:start}
.foot-line{max-width:var(--max);margin:28px auto 0;font-size:11px;letter-spacing:.12em;padding-top:16px;border-top:1px solid var(--line)}

/* ---------- build 4: phone-first (docs/studio-site/MOBILE.md §2–§3) ---------- */
.chips-row{display:none}
.demo-ticket{display:none}
.demo-sheet{position:fixed;inset:0;z-index:150;background:#000}
.demo-sheet iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.demo-close{position:absolute;z-index:2;top:calc(10px + env(safe-area-inset-top,0px));right:calc(10px + env(safe-area-inset-right,0px));width:48px;height:48px;border-radius:50%;background:rgba(7,9,15,.82);color:var(--chalk);font:400 30px/1 var(--body);box-shadow:0 0 0 1px var(--rule),0 6px 20px rgba(0,0,0,.6)}
body.demo-open .gamebar{display:none}
.global-stub{align-self:flex-start;margin-top:2px;padding:4px 8px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mint);box-shadow:inset 0 0 0 1px rgba(62,230,176,.5)}
.game-picks .picks{display:flex;flex-wrap:wrap;gap:8px}
.pick{position:relative;display:inline-flex;cursor:pointer}
.pick input{position:absolute;opacity:0;width:1px;height:1px}
.pick span{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:8px 14px;border-radius:999px;font-size:14px;color:var(--dim);box-shadow:inset 0 0 0 1px var(--line-strong)}
.pick span small{font:500 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;opacity:.75}
.pick input:checked+span{background:rgba(255,157,46,.14);color:var(--saffron);box-shadow:inset 0 0 0 1px rgba(255,157,46,.7)}
.pick input:focus-visible+span{outline:2px solid var(--saffron);outline-offset:2px}
.lead input:not([type="radio"]):not([type="checkbox"]),.lead textarea{min-height:48px}
@media (max-width:759px){
  /* game hero: the phone composition (9:16) above, the title below — never the 16:9 scene cropped */
  .game-hero.stage{display:block;min-height:0;padding:0 0 clamp(36px,8vh,64px)}
  .game-hero .stage-layers{position:relative;inset:auto;z-index:0;aspect-ratio:9/16;max-height:82vh;overflow:hidden}
  .game-hero.phone-card .stage-layers{aspect-ratio:4/5}
  .game-hero .layer-scene{position:absolute;inset:0}
  .game-hero .layer-scene img{width:100%;height:100%;object-fit:cover;transform:none}
  .game-hero .stage-layers::after{content:"";position:absolute;inset:auto 0 0 0;height:28%;background:linear-gradient(to top,var(--ink),transparent)}
  .game-hero .hero-copy{padding:18px var(--gutter) 0}
  .game-hero::after{display:none}
  .factstrip{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
  /* demo on a phone: a compact ticket over the phone art; the client opens full-window */
  .player{display:none}
  .demo-ticket{display:block;position:relative;margin:6px;aspect-ratio:4/5;overflow:hidden;box-shadow:var(--frame),0 24px 50px rgba(0,0,0,.55)}
  .demo-ticket>img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
  .demo-stub{position:absolute;left:12px;right:12px;bottom:12px;display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 16px 14px}
  .demo-stub .btn-ticket{width:100%}
  .demo-stub p{font-size:12px;letter-spacing:.08em;color:var(--dim)}
  /* library: search first, one chip row, each chip opens its group as a bottom sheet */
  .filters{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:14px}  /* nowrap: a wrapping column grows to its widest item and the chip row stops scrolling */
  .filters .search{order:-1;flex:none}
  .chips-row{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--gutter));padding:2px var(--gutter)}
  .chips-row::-webkit-scrollbar{display:none}
  .chips-row{-webkit-mask:linear-gradient(90deg,#000 80%,transparent);mask:linear-gradient(90deg,#000 80%,transparent);touch-action:pan-x;overscroll-behavior-x:contain}
  .chip-open{flex:none;min-height:40px;white-space:nowrap}
  .chip-open b{font-weight:600;color:var(--chalk);margin-left:4px}
  .filters .filter-group{display:none}
  .filters.sheet-open .filter-group.is-sheet{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:61;gap:10px;padding:22px var(--gutter) calc(26px + env(safe-area-inset-bottom,0px));background:var(--tungsten),#0e1322;border-top:3px double var(--rule);box-shadow:0 -20px 60px rgba(0,0,0,.6);animation:sheet-up .28s var(--ease)}
  .filters.sheet-open .filter-group.is-sheet>.mono{flex-basis:100%;margin-bottom:4px}
  .filters.sheet-open .filter-group.is-sheet .pill{min-height:44px;padding:10px 16px;font-size:15px}
  .sheet-backdrop{position:fixed;inset:0;z-index:60;background:rgba(7,9,15,.7)}
  /* one thumb: the decorative scroll hint goes; the crumb gets a 44 px hit area */
  .scroll-hint{display:none}
  .slug-label .crumb{display:inline-block;padding:14px 4px 14px 0;margin:-14px 0}
  /* marquee: 20 % slower on phones */
  .marquee-track{animation-duration:55s}
  /* the langur peeks from the hero's bottom-right corner (MOBILE §2.5) */
  .hero .hero-copy,.hero .peek-host,.hero h1.neon{position:static}
  .hero h1.neon::before{display:none}
  .hero .langur{top:calc(100vw * 4 / 3 - 64px);right:16px;bottom:auto;width:132px;height:78px;z-index:2}  /* from the art's bottom-right corner */
  /* forms and the cast */
  .lead-actions .btn-ticket{width:100%}
  .cast{grid-template-columns:1fr 1fr;gap:0 14px}
  .cast li{grid-template-columns:72px 1fr;gap:10px;font-size:15px}
  .cast img{width:72px;height:72px}
}
@keyframes sheet-up{from{transform:translateY(100%)}}

/* ---------- motion v2: the catalogue (docs/studio-site/MOTION.md §2). Only transform/translate/scale/rotate, opacity,
   clip-path and background-position animate; reduced motion collapses every one to its end state. ---------- */
@property --t{syntax:"<length>";inherits:false;initial-value:0px}

/* 1 curtain: the house velvet parts from the centre; the sweep crosses; the cast rises behind it; confetti settles */
.curtain{z-index:3;pointer-events:none;overflow:hidden}
.drape{position:absolute;top:0;bottom:0;width:50.5%;background:linear-gradient(180deg,rgba(255,206,140,.08),transparent 22%),repeating-linear-gradient(90deg,rgba(0,0,0,.42) 0 18px,rgba(255,255,255,.035) 18px 34px,rgba(0,0,0,.22) 34px 52px),linear-gradient(#141d3a,#0a1024)}
.drape-l{left:0;box-shadow:inset -18px 0 30px rgba(0,0,0,.55)}
.drape-r{right:0;box-shadow:inset 18px 0 30px rgba(0,0,0,.55)}
.curtain .drape-l{animation:drape-l 1.6s var(--mass) .05s both}
.curtain .drape-r{animation:drape-r 1.6s var(--mass) .05s both}
@keyframes drape-l{to{translate:-101% 0}}
@keyframes drape-r{to{translate:101% 0}}
.hero .layer-cast{animation-delay:.35s}

/* 3 marquee bulbs: bulbs chase along both edges; the crown-w separators blink in sequence */
.marquee::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle,#ffd27a 0 1.4px,rgba(255,210,122,.25) 2px,transparent 2.6px) 0 3px/16px 5px repeat-x,radial-gradient(circle,#ffd27a 0 1.4px,rgba(255,210,122,.25) 2px,transparent 2.6px) 8px calc(100% - 3px)/16px 5px repeat-x;animation:chase 1.2s steps(4) infinite}
@keyframes chase{to{background-position:16px 3px,-8px calc(100% - 3px)}}
.mq-mark{animation:mq-blink 2.4s steps(1) infinite;animation-delay:calc(var(--k,0) * .3s)}
@keyframes mq-blink{0%{opacity:.95}12%{opacity:.35}24%{opacity:.95}}

/* 4 ticket tear: hover tears the stub 4 px along the dotted line and snaps back; press squashes for 60 ms */
.btn-ticket{--s:22px;clip-path:polygon(var(--n) 0,calc(100% - var(--s) - var(--t)) 0,calc(100% - var(--s)) var(--t),calc(100% - var(--s) + var(--t)) 0,calc(100% - var(--n)) 0,100% var(--n),100% calc(100% - var(--n)),calc(100% - var(--n)) 100%,calc(100% - var(--s) + var(--t)) 100%,calc(100% - var(--s)) calc(100% - var(--t)),calc(100% - var(--s) - var(--t)) 100%,var(--n) 100%,0 calc(100% - var(--n)),0 var(--n));transition:transform .2s var(--ease),scale .06s}
.btn-ticket-sm{--s:16px}
.btn-ticket-lg{--s:26px}
.btn-ticket:hover{animation:tear .18s var(--out)}
.btn-ticket:active{scale:.97 .93}
@keyframes tear{50%{--t:4px}}

/* 5 playbill slide: the rule draws left to right, the eyebrow types in, the index counts up (site.js) */
.slug-rule{transform-origin:left center}
[data-enter="head"].in .slug-rule,.hero-copy .slug-rule{animation:rule-draw .6s var(--out) both}
[data-enter="head"].in .slug-label,.hero-copy .slug-label{animation:type-in .6s steps(22,end) .12s both}
[data-enter="head"].in h2{animation:head-rise .62s var(--out) .1s both}
[data-enter="head"].in>p,[data-enter="head"].in .more{animation:head-rise .6s var(--out) .22s both}
@keyframes rule-draw{from{transform:scaleX(0)}}
@keyframes type-in{from{clip-path:inset(0 100% 0 0)}}
@keyframes head-rise{from{clip-path:inset(0 0 100% 0);translate:0 14px}to{clip-path:inset(0 0 0 0)}}

/* 6 poster flip: the card rises 24 px and settles with a 4 % overshoot (scroll-bound where supported); 7 pips fill one by one;
   13 the live chip's dot flips like a coin; the frame's gold hairline glints once on hover or when centred */
@keyframes poster-in{0%{opacity:0;translate:0 24px}70%{opacity:1;translate:0 -1px}100%{opacity:1;translate:0 0}}
[data-enter="poster"].in{animation:poster-in .52s var(--mass) both;animation-delay:calc(var(--i,0) * 60ms)}
/* 7 pip fill: one stepped clip on the row (five repaints of one element), not forty animated pips */
.card.in .pips{animation:pip-fill .4s steps(5,end) .32s both}
@keyframes pip-fill{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.chip-live::before{content:"";display:inline-block;width:6px;height:6px;margin:0 6px 1px 0;border-radius:50%;background:var(--mint);box-shadow:0 0 6px var(--mint);vertical-align:middle}
.card.in .chip-live::before{animation:coin .5s var(--out) .25s both}
@keyframes coin{0%{scale:0 1.4}25%{scale:1 1.2}50%{scale:0 1.1}75%{scale:1 1}100%{scale:1 1}}  /* a coin flip read as a horizontal squash (2D, composited) */
.card-art::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(115deg,transparent 42%,rgba(255,226,160,.5) 50%,transparent 58%) 150% 0/260% 100% no-repeat;opacity:0}
.card:hover .card-art::before,.card.is-playing .card-art::before{animation:glint .7s var(--out)}
@keyframes glint{0%{opacity:1;background-position:150% 0}100%{opacity:1;background-position:-60% 0}}

/* 8 receipt print: the receipt feeds up out of the slot; the fingerprint prints, the stubs count (site.js), the perforation tears */
[data-enter="receipt"].in{animation:feed .9s var(--out) both}
@keyframes feed{from{clip-path:inset(100% 0 0 0);translate:0 36px}to{clip-path:inset(0 0 0 0)}}
.receipt.in .stubs{animation:perforate .32s var(--mass) 2.05s both}
@keyframes perforate{50%{translate:0 5px;rotate:.5deg}}

/* bill-rule: the double rule draws, the text rises from behind it (license, features, how the shelf works) */
.bill{border-top:0;background:linear-gradient(90deg,var(--rule) 50%,transparent 50%) 0 0/200% 1px no-repeat,linear-gradient(90deg,var(--rule) 50%,transparent 50%) 0 3px/200% 1px no-repeat}
[data-enter="bill"].in{animation:rule-bg .55s var(--out) both;animation-delay:calc(var(--i,0) * 90ms)}
[data-enter="bill"].in>*{animation:head-rise .55s var(--out) both;animation-delay:calc(var(--i,0) * 90ms + .2s)}
@keyframes rule-bg{from{background-position:100% 0,100% 3px}}

/* cascade (studio integration): playbill sheets drop and settle as if pinned */
[data-enter="cascade"].in{animation:cascade .6s var(--mass) both;animation-delay:calc(var(--i,0) * 70ms)}
@keyframes cascade{0%{opacity:0;translate:0 -18px;rotate:-3deg}70%{opacity:1;rotate:.6deg}100%{opacity:1;translate:0 0;rotate:0deg}}

/* steps (studio): each number flips down like a ticket counter, then its line slides out from behind it */
[data-enter="step"].in::before{animation:step-num .45s var(--out) both;animation-delay:calc(var(--i,0) * 80ms);transform-origin:top center}
[data-enter="step"].in>*{animation:step-text .5s var(--out) both;animation-delay:calc(var(--i,0) * 80ms + .15s)}
@keyframes step-num{from{opacity:0;rotate:x 90deg}}
@keyframes step-text{from{clip-path:inset(0 100% 0 0);translate:-10px 0}to{clip-path:inset(0 0 0 0)}}

/* ticket-shelf (originals): tickets dealt from the counter */
[data-enter="shelf"].in{animation:deal .5s var(--mass) both;animation-delay:calc(var(--i,0) * 45ms)}
@keyframes deal{0%{opacity:0;translate:-36px 10px;rotate:-6deg}75%{opacity:1;rotate:.8deg}100%{opacity:1;translate:0 0;rotate:0deg}}

/* coin (the cast): each avatar flips in like a coin, the name follows */
[data-enter="coin"].in img{animation:coin .6s var(--out) both;animation-delay:calc(var(--i,0) * 110ms)}
[data-enter="coin"].in li>span{animation:step-text .5s var(--out) both;animation-delay:calc(var(--i,0) * 110ms + .2s)}

/* letter: the form unfolds from its top edge */
[data-enter="letter"].in{animation:unfold .7s var(--out) both}
@keyframes unfold{from{clip-path:inset(0 0 100% 0);translate:0 -10px}to{clip-path:inset(0 0 0 0)}}

/* 10 pull-quote ink: words land in reading order with a slight weight overshoot */
.pull .w{display:inline-block}
[data-enter="ink"].in .w{animation:ink .45s var(--out) both;animation-delay:calc(var(--w,0) * 40ms)}
@keyframes ink{from{opacity:0;scale:1.04;translate:0 .06em}}

/* 9 filmstrip advance: one frame per ~400 px of scroll, the sprockets catch a light (scroll-driven; a short advance elsewhere) */
[data-enter="film"].in .film-track{animation:film-in 1.2s var(--out) both}
@keyframes film-in{from{translate:8% 0}}
@supports (animation-timeline:view()){
  [data-enter="film"],[data-enter="film"].in{opacity:1}
  [data-enter="film"] .film-track,[data-enter="film"].in .film-track{animation:film-advance linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  [data-enter="film"] .film-track::before,[data-enter="film"] .film-track::after{animation:sprocket linear both;animation-timeline:view()}
}
@keyframes film-advance{from{translate:0 0}to{translate:calc(-3 * (clamp(220px,26vw,340px) + 14px)) 0}}
.film-track::before,.film-track::after{background:repeating-linear-gradient(90deg,transparent 0 10px,#cfc8b8 10px 22px,transparent 22px 30px),linear-gradient(90deg,transparent 40%,rgba(255,226,160,.9) 50%,transparent 60%) 0 0/300% 100% no-repeat;background-blend-mode:normal}
@keyframes sprocket{from{background-position:0 0,120% 0}to{background-position:0 0,-20% 0}}

/* 15 stage lights: three spotlights sweep once to the centre and hold (one on a phone) */
.layer-lights{pointer-events:none;overflow:hidden}
.layer-lights span{position:absolute;top:-12%;left:calc(50% - 15%);width:30%;height:125%;transform-origin:50% 0;background:conic-gradient(from 168deg at 50% 0,transparent 0deg,rgba(255,226,170,.16) 10deg,rgba(255,226,170,.22) 12deg,rgba(255,226,170,.16) 14deg,transparent 24deg);animation:light-sweep 1.4s var(--out) .2s both}
.layer-lights span:nth-child(1){--from:-42deg;--to:-14deg}
.layer-lights span:nth-child(2){--from:36deg;--to:0deg}
.layer-lights span:nth-child(3){--from:44deg;--to:14deg}
@keyframes light-sweep{from{opacity:0;rotate:var(--from)}to{opacity:1;rotate:var(--to)}}

/* 16 marquee months: each month's letters light one by one as the month enters (scroll-bound where supported) */
.board-month .ltr{display:inline-block;opacity:.22}
.board-month.in .ltr{animation:bulb-on .25s steps(2) both;animation-delay:calc(var(--k,0) * 60ms + .1s)}
@keyframes bulb-on{to{opacity:1}}
@supports (animation-timeline:view()){
  .board-month{view-timeline:--month block}
  .board-month .ltr,.board-month.in .ltr{animation:bulb-on linear both;animation-timeline:--month;animation-delay:0s;animation-range:entry calc(15% + var(--k,0) * 7%) entry calc(30% + var(--k,0) * 7%)}
}

/* 14 demo curtain: closed on arrival, it parts when the player enters; on Start it closes, the crown shows through a porthole,
   and it opens when the game has loaded */
.drapes{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.drapes .drape{transition:translate .6s var(--mass)}
.drapes .drape-l{translate:-101% 0}
.drapes .drape-r{translate:101% 0}
.js-ready [data-enter="drapes"]:not(.in) .drape,.is-loading>.drapes .drape{translate:0 0}
[data-enter="drapes"]{opacity:1!important}
.porthole{position:absolute;left:50%;top:50%;width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,#1a2140,#07090f 70%);box-shadow:0 0 0 2px var(--rule),0 0 30px rgba(255,157,46,.25);opacity:0;scale:.6;transition:opacity .3s,scale .3s var(--mass)}
.is-loading>.drapes .porthole{opacity:1;scale:1;transition-delay:.45s}
.is-loading>.drapes .porthole img{animation:porthole 1.2s ease-in-out .6s infinite alternate}
@keyframes porthole{to{scale:1.12;opacity:.7}}

/* 17 form stamp: RECEIVED drops with a spring (the one spring on the site); the form folds away like a letter */
.lead{position:relative}
.lead.is-folding .lead-grid,.lead.is-folding .lead-actions{animation:fold .45s var(--out) both}
@keyframes fold{to{opacity:0;clip-path:inset(0 0 100% 0);translate:0 -12px}}
.stamp{display:inline-block;margin:6px 0 4px;padding:8px 16px;font:500 20px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--mint);box-shadow:inset 0 0 0 2px var(--mint);rotate:-8deg;animation:stamp .7s cubic-bezier(.34,1.56,.64,1) both}
@keyframes stamp{0%{opacity:0;scale:2.2;rotate:-16deg}60%{opacity:1;scale:.94}100%{opacity:1;scale:1;rotate:-8deg}}

/* sound (MOTION §5): a built marquee bulb (glass, filament, screw base) + a "SOUND" label; lit with a glow pulse when on */
.sound{position:relative;display:inline-flex;align-items:center;gap:7px;min-width:44px;height:44px;padding:0 6px;margin-left:10px;flex:none;color:var(--dim)}
.bulb{position:relative;width:14px;height:21px;flex:none}
.bulb .glass{position:absolute;left:0;top:0;width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(243,239,230,.55);
  background:linear-gradient(90deg,transparent 4.5px,rgba(243,239,230,.5) 4.5px 5.5px,transparent 5.5px 8.5px,rgba(243,239,230,.5) 8.5px 9.5px,transparent 9.5px) 0 7px/14px 5px no-repeat,#151a2c}
.bulb .base{position:absolute;left:3.5px;top:13px;width:7px;height:7px;border-radius:0 0 2px 2px;background:repeating-linear-gradient(180deg,rgba(243,239,230,.55) 0 1.5px,rgba(243,239,230,.18) 1.5px 3px)}
.bulb::after{content:"";position:absolute;left:-10px;top:-10px;width:34px;height:34px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,196,110,.6),transparent);opacity:0;pointer-events:none}
.sound.is-on{color:var(--saffron)}
.sound.is-on .bulb .glass{box-shadow:inset 0 0 0 1.5px #ffd98a,0 0 10px rgba(255,196,110,.85);background:linear-gradient(90deg,transparent 4.5px,#fff6d8 4.5px 5.5px,transparent 5.5px 8.5px,#fff6d8 8.5px 9.5px,transparent 9.5px) 0 7px/14px 5px no-repeat,radial-gradient(circle at 40% 35%,#fff4cf,#ffc46a 50%,#e98a14 90%)}
.sound.is-on .bulb::after{animation:bulb-glow 1.2s ease-in-out infinite alternate}
.sound.hint:not(.is-on) .bulb::after{animation:bulb-hint 3s ease-in-out both}
@keyframes bulb-hint{0%,100%{opacity:0}17%,50%,83%{opacity:.85}33%,67%{opacity:.15}}
@keyframes bulb-glow{from{opacity:.25}to{opacity:1}}
.sound-label{font-size:10px;letter-spacing:.18em;text-transform:uppercase;line-height:1}
@media (max-width:860px){.sound{margin-left:auto}.menu-btn{margin-left:0}}

/* ---------- compact phone density (MOTION §4) ---------- */
@keyframes rise-lite{from{opacity:0;translate:0 12px}}
@keyframes rise-flat{from{opacity:0;translate:0 18px}}
@media (max-width:759px){
  /* a phone keeps each motion but swaps the large clip-path reveals (painted every frame) for composited rises */
  [data-enter="head"].in h2,[data-enter="head"].in>p,[data-enter="head"].in .more,[data-enter="bill"].in>*,[data-enter="step"].in>*,
  [data-enter="coin"].in li>span,[data-enter="letter"].in,[data-enter="receipt"].in{animation-name:rise-lite}
  .top{min-height:52px;padding:4px var(--gutter);gap:12px}
  .brand-logo{height:24px}
  .brand-studios{font-size:13px}
  /* MOBILE §2 rule 10: a phone hero is STACKED — the art on top, the copy on solid dark beneath it; no text ever over a face */
  .stage:not(.game-hero){display:block;min-height:0;padding:0 0 30px}
  .stage:not(.game-hero) .stage-layers{position:relative;inset:auto;z-index:0;height:min(30vh,260px);overflow:hidden}
  /* home: the ensemble FULL-BLEED in a 3:4 window, cropped from the top (the art carries its own neon arch); only the stage floor
     and feet fall outside — every face, ghosts to the front row (~69 % down the image), stays in frame. A 4:5 hero45 fills 4:5. */
  .hero.stage:not(.game-hero) .stage-layers{height:auto;aspect-ratio:3/4}
  .hero.has-hero45:not(.game-hero) .stage-layers{aspect-ratio:4/5}
  .stage:not(.game-hero) .hero-copy{padding:20px var(--gutter) 0}
  .stage:not(.game-hero)::after{inset:auto 0 auto 0;top:min(30vh,260px);height:240px;background:radial-gradient(60% 100% at 50% 0,rgba(255,61,143,.16),rgba(255,157,46,.07) 45%,transparent 75%)}
  .hero.stage:not(.game-hero)::after{top:calc(100vw * 4 / 3)}
  /* home: hero9 whole (every face visible) in an arch window over a blurred copy of itself */
  .hero .layer-cast img{width:100%;height:100%;object-fit:cover;object-position:50% 0;transform:none}
  .hero .layer-cast{animation-name:rise-flat}  /* a lift, no scale: the art stays exactly viewport-wide */
  .hero .layer-confetti{display:none}
  .slug-hero .slug-wide{display:none}
  .slug-hero{flex-wrap:nowrap;white-space:nowrap}
  .stage-short{min-height:40vh;padding:64px var(--gutter) 26px}
  .hero-copy h1{font-size:clamp(46px,13.5vw,58px)}
  .page-head .hero-copy h1{font-size:clamp(40px,12vw,48px)}
  .hero-copy .lede{margin-top:14px;font-size:16px}
  .actions{margin-top:18px;gap:10px 20px}
  .section{padding:44px var(--gutter)}
  .ed,.rail-row{row-gap:20px}
  .ed-head h2,.wide-head h2{font-size:clamp(36px,11vw,46px);margin-bottom:10px}
  .wide-head{margin-bottom:20px}
  .slug{margin-bottom:12px}
  .grid{gap:22px 10px}
  .rail{gap:10px;padding-bottom:12px}
  .rail .card{flex-basis:43%}  /* two cards and an intentional >= 40 px peek of the third: the rail scrolls */
  .card-art{margin:5px}
  .card-body{padding:10px 4px 0;gap:4px}
  .card-title{font-size:16px}
  .card-tag{font-size:12px}
  .facts{gap:6px 12px;font-size:11px;padding-top:8px}
  .card-cta{font-size:12px}
  .factstrip{grid-template-columns:repeat(3,1fr);gap:12px 10px;font-size:12px}
  .game-hero .stage-layers,.game-hero.phone-card .stage-layers{aspect-ratio:auto;height:46vh;max-height:none}
  .game-hero .layer-scene img{object-position:50% 50%}
  .game-hero .hero-copy{display:flex;flex-direction:column}
  .game-hero .actions{order:3}
  .game-hero .factstrip{order:4}
  .acc>summary{min-height:44px}
  .lead input:not([type="radio"]):not([type="checkbox"]),.lead textarea{min-height:44px}
  .lead-grid{gap:12px}
  .foot{padding:26px var(--gutter) calc(20px + env(safe-area-inset-bottom,0px))}
  .foot-grid{gap:14px}
  .foot-brand p{font-size:13px;margin-top:8px}
  .foot-line{margin-top:16px;padding-top:10px}
  /* nothing below 12 px on a phone (MOBILE §2.3) */
  .facts,.facts dt,.chip,.card-no,.ocard-no,.receipt-head,.tl-stub,.global-stub,.pick span small,.lead legend,.lead label>span,.lead label>span small,
  .foot-line,.factstrip dt,.factstrip small,.frame figcaption,.filter-group>.mono,.results,.foot-facts,.tl-facts,.slug{font-size:12px}
  .facts{gap:6px 10px}
  .curtain .drape-l,.curtain .drape-r{animation-duration:1.2s}
  .layer-sweep{display:none}
  .layer-lights span:nth-child(1),.layer-lights span:nth-child(3){display:none}
  .marquee::after{animation:none}
  .marquee-track{animation-duration:50s}
}

/* accordions (features, the kit): open on a desktop; on a phone the first is open (site.js) */
.acc>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px}
.acc>summary::-webkit-details-marker{display:none}
.acc>summary::after{content:"+";font:500 18px/1 var(--mono);color:var(--saffron);transition:rotate .2s var(--out)}
.acc[open]>summary::after{rotate:45deg}
.acc-kit>summary{font:600 14px/1.2 var(--sub);letter-spacing:.08em;text-transform:uppercase;color:var(--dim);padding:4px 0 8px}

/* ---------- view transitions ---------- */
@view-transition{navigation:auto}
/* 20 page turn: the old page slides 12 px left and fades; the tapped card's poster morphs into the game hero */
::view-transition-old(root){animation:page-out .32s var(--out) both}
::view-transition-new(root){animation:page-in .32s var(--out) both}
@keyframes page-out{to{opacity:0;translate:-12px 0}}
@keyframes page-in{from{opacity:0}}
.top{view-transition-name:site-top}
::view-transition-group(*.poster){animation-duration:.42s;animation-timing-function:var(--out)}
::view-transition-old(*.poster),::view-transition-new(*.poster){height:100%;object-fit:cover;overflow:clip}

/* ---------- reduced motion: instant end states ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  [data-enter],.js-ready [data-enter]:not(.in){opacity:1!important}
  .drape,.curtain,.layer-lights{display:none}
  #dust,.layer-confetti,.layer-sweep,.langur{display:none}
}
@media print{[data-enter]{opacity:1!important;animation:none!important}#dust,#cursor,.gamebar,.top,.curtain,.drapes{display:none}}