/* =====================================================================
   jasondmacleod.com — V2 LAYER (loads after home.css)
   Everything here is additive or an override, so reverting V2 is:
   remove this file + v2.js + the V2 blocks in index.html.

   Contents
     1. ink system — six drums + black, one shade per ink
     2. two inks per window, misregistered plates
     3. overprint + grain
     4. type discipline
     5. motion choreography (idle windows hold their frame)
     6. taskbar
     7. the basement row — citations / museum / asymmetry / receipts
     8. sourced surveillance.exe
     9. hours + strike
    10. refuse mode — one-ink zine
    11. screensaver — riso overdrive
    12. print — one-ink broadsheet
   ===================================================================== */

/* ---------- 1. INK SYSTEM ---------- */
:root{
  --riso-yellow:#ffd23f;            /* promoted: the sixth drum */
  /* one shade per ink = that ink over a black halftone screen */
  --pink-dk:#b01f63;
  --blue-dk:#1c3a94;
  --purple-dk:#5f3a94;
  --orange-dk:#b84a12;
  --acid-dk:#5c9a2b;
  --yellow-dk:#b8930f;
  --siren:var(--riso-pink);          /* riso has no red; fluorescent pink is the alarm */
  --gold:var(--riso-yellow);
  --a:var(--riso-pink);              /* per-window plate A */
  --b:var(--riso-blue);              /* per-window plate B */
}

/* ---------- 2. TWO INKS PER WINDOW ---------- */
.w-hero     {--a:var(--riso-pink);  --b:var(--riso-acid)}
.w-horses   {--a:var(--riso-purple);--b:var(--riso-yellow)}
.w-warn     {--a:var(--riso-pink);  --b:var(--riso-yellow)}
.w-buy      {--a:var(--riso-blue);  --b:var(--riso-pink)}
.w-ai       {--a:var(--riso-blue);  --b:var(--riso-acid)}
.w-hallu    {--a:var(--riso-purple);--b:var(--riso-orange)}
.w-cart     {--a:var(--riso-orange);--b:var(--riso-yellow)}
.w-surv     {--a:var(--riso-blue);  --b:var(--riso-orange)}
.w-gpu      {--a:var(--riso-pink);  --b:var(--riso-purple)}
.w-yourfile {--a:var(--riso-acid);  --b:var(--riso-blue)}
.w-term     {--a:var(--riso-acid);  --b:var(--riso-purple)}
.w-links    {--a:var(--riso-yellow);--b:var(--riso-pink)}
.w-contact  {--a:var(--riso-yellow);--b:var(--riso-blue)}
.w-amp      {--a:var(--riso-orange);--b:var(--riso-acid)}
.w-pl       {--a:var(--riso-acid);  --b:var(--riso-purple)}
.w-click    {--a:var(--riso-orange);--b:var(--riso-pink)}
.w-workers  {--a:var(--riso-yellow);--b:var(--riso-blue)}
.w-cite     {--a:var(--riso-blue);  --b:var(--riso-pink)}
.w-museum   {--a:var(--riso-purple);--b:var(--riso-yellow)}
.w-asym     {--a:var(--riso-pink);  --b:var(--riso-blue)}
.w-receipts {--a:var(--riso-acid);  --b:var(--riso-orange)}

/* plate B prints the hard offset shadow; plate A misses by a hair top-left —
   the drums never line up, and that drift is the look */
.stage-grid > .win{
  box-shadow:6px 6px 0 var(--b), -1.5px -1.5px 0 var(--a);
}
.stage-grid > .win.dragging{
  box-shadow:11px 11px 0 var(--b), -3px -3px 0 var(--a);
}
/* title bars: photocopy black with plate A as the status dot and an ink rule.
   (kills the off-palette gradient bars) */
.stage-grid > .win > .win__bar{
  background:var(--bar);
  border-bottom:2.5px solid var(--a);
}
.stage-grid > .win > .win__bar .ico .q{background:var(--a)}
.stage-grid > .win.dragging > .win__bar{background:var(--a);color:var(--bar)}

/* ---------- 3. OVERPRINT + GRAIN ---------- */
/* highlights in the bio are a second pass over the type, not a box behind it */
.hero-body em{mix-blend-mode:multiply}
.hero-body .roles b{mix-blend-mode:multiply}
/* wordmark: the pink plate overlaps the paper scrap and prints through,
   with a blue ghost where the registration slipped */
.wordmark .scrap:nth-child(1){
  mix-blend-mode:normal;
  box-shadow:4px 4px 0 var(--riso-blue), 8px 8px 0 rgba(26,23,20,.45);
  margin-right:-10px;position:relative;z-index:2;
}
.wordmark .scrap:nth-child(2){
  box-shadow:4px 4px 0 var(--riso-acid), 8px 8px 0 rgba(26,23,20,.45);
  text-shadow:2px 1px 0 var(--riso-pink);
}
.subbar .tag{box-shadow:3px 3px 0 var(--riso-purple), -2px -1px 0 var(--riso-orange)}

/* paper grain: one fixed sheet over everything, multiply, no pointer events */
body::after{
  content:"";position:fixed;inset:0;z-index:4000;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='11' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .1  0 0 0 0 .09  0 0 0 0 .08  0 0 0 .55 0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
  background-size:220px 220px;
  mix-blend-mode:multiply;opacity:.28;
}
@media print{ body::after{display:none} }

/* ---------- 4. TYPE DISCIPLINE ---------- */
/* four house faces + the system UI face. nothing else. */
.ticker-row .inner span[data-cite]{cursor:pointer}
.ticker-row .inner span[data-cite]:hover{background:var(--riso-yellow);color:var(--bar)}
.ticker-row:hover .inner{animation-play-state:paused}
.ticker-row .inner{animation-duration:78s}
.ticker-row sup{
  font-family:var(--crt);font-size:.85em;color:var(--riso-yellow);
  margin-left:3px;vertical-align:top;letter-spacing:0;
}
.ticker-row .inner span:hover sup{color:var(--bar)}

/* ---------- 5. MOTION ----------
   standing rule: everything moves, all the time. no idle state. */

/* ---------- 6. TASKBAR ---------- */
@media (min-width:1101px){
  .tbar{gap:4px;margin:0 8px}
  .tbtn{
    display:inline-flex;align-items:center;gap:5px;
    padding:4px 7px;min-width:0;max-width:none;flex:0 1 auto;
    font-size:11px;letter-spacing:.05em;overflow:visible;text-overflow:clip;
  }
  .tbtn i{
    width:9px;height:9px;border-radius:50%;flex:none;
    background:var(--a,var(--riso-pink));border:1.5px solid var(--bar);
  }
  .tbtn.hidden-win i{background:transparent}
  .tbtn.active{background:var(--a,var(--riso-pink))}
  .tbtn.active i{background:var(--paper)}
}
/* tight desktops: dots only, labels on hover via title */
@media (min-width:1101px) and (max-width:1380px){
  .tbtn span{display:none}
  .tbtn{padding:6px 7px}
  .tbtn i{width:11px;height:11px}
}

/* ---------- 7. THE BASEMENT ROW ---------- */
/* room under the collage for the new windows. the canvas keeps its aspect
   ratio, so nothing above moves or resizes. */
@media (min-width:1101px){
  .stage-grid{margin-bottom:6px}
}
.w-cite    {top:113%;left:1.5%; width:28%;z-index:30;transform:rotate(-.7deg)}
.w-museum  {top:110%;left:31%;  width:36%;z-index:32;transform:rotate(.5deg)}
.w-asym    {top:114%;left:68.5%;width:14.5%;z-index:31;transform:rotate(-1.4deg)}
.w-receipts{top:111%;left:82%;  width:16.5%;z-index:33;transform:rotate(1deg)}

.v2-body{
  background:var(--paper);color:var(--bar);
  font-family:var(--type);font-size:1em;line-height:1.5;
  padding:1em 1.1em 1.1em;
}
.v2-kicker{
  font-family:var(--cut);text-transform:uppercase;letter-spacing:.08em;
  font-size:1.5em;line-height:1;margin:0 0 .5em;
}
.v2-kicker span{background:var(--a);color:var(--bar);padding:.08em .35em;display:inline-block;
  box-shadow:3px 3px 0 var(--b);transform:rotate(-1deg)}
.v2-note{font-size:.85em;opacity:.8;margin-top:.8em;border-top:1.5px dashed var(--bar);padding-top:.6em}

/* --- citations.txt --- */
.cite-body{max-height:30em;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--riso-blue) var(--paper)}
.cite-body ol{list-style:none;margin:0;padding:0;counter-reset:c}
.cite-body li{
  counter-increment:c;position:relative;
  padding:.38em .3em .38em 2.6em;border-bottom:1px dashed rgba(26,23,20,.3);
  font-size:.92em;line-height:1.4;
}
.cite-body li::before{
  content:counter(c);position:absolute;left:0;top:.42em;width:1.9em;text-align:center;
  font-family:var(--crt);font-size:1.25em;line-height:1;
  background:var(--bar);color:var(--riso-yellow);
}
.cite-body li i{font-style:normal;font-variant:small-caps;letter-spacing:.04em}
.cite-body li q{quotes:"\201C" "\201D";background:var(--riso-yellow);mix-blend-mode:multiply;padding:0 .15em}
.cite-body li.hit{background:var(--riso-pink);animation:citeHit 1.6s steps(6) 1}
@keyframes citeHit{0%,40%{background:var(--riso-pink)}100%{background:transparent}}
.cite-body h4{
  font-family:var(--cut);font-size:1em;letter-spacing:.12em;text-transform:uppercase;
  margin:1em 0 .3em;color:var(--paper);background:var(--riso-blue);display:inline-block;padding:.1em .5em;
}
.cite-body .mine{font-size:.88em;margin:0 0 .6em}

/* --- dark_patterns.exe — museum of consent --- */
.mus-body{display:grid;grid-template-columns:1.05fr 1fr;gap:0;padding:0}
.mus-stage{
  position:relative;background:var(--bar);color:var(--paper);
  padding:1em;min-height:19em;display:flex;flex-direction:column;justify-content:center;align-items:center;
  border-right:2.5px solid var(--bar);overflow:hidden;
}
.mus-stage::before{
  content:"EXHIBIT " attr(data-n);position:absolute;top:.5em;left:.6em;
  font-family:var(--crt);font-size:1.2em;color:var(--riso-yellow);letter-spacing:.08em;
}
.mus-stage.defused{background:var(--riso-acid);color:var(--bar)}
.mus-stage.defused::before{content:"EXHIBIT " attr(data-n) " — DEFUSED";color:var(--bar)}
.mus-demo{
  background:var(--paper);color:var(--bar);border:2.5px solid var(--bar);
  box-shadow:5px 5px 0 var(--riso-purple);padding:.9em;width:92%;text-align:center;
  font-family:var(--ms);font-size:.95em;
}
.mus-stage.defused .mus-demo{box-shadow:5px 5px 0 var(--bar)}
.mus-demo h5{font-family:var(--cut);font-size:1.25em;letter-spacing:.04em;text-transform:uppercase;margin:0 0 .5em;line-height:1.05}
.mus-demo .big{
  display:block;width:100%;font-family:var(--cut);font-size:1.3em;letter-spacing:.06em;text-transform:uppercase;
  background:var(--riso-pink);color:var(--bar);border:2.5px solid var(--bar);padding:.45em;cursor:pointer;
  box-shadow:3px 3px 0 var(--bar);margin:.3em 0;
}
.mus-demo .tiny{
  background:none;border:0;color:#8a8170;font-size:.72em;text-decoration:underline;cursor:pointer;
  font-family:var(--ms);margin-top:.5em;
}
.mus-demo .eq{display:flex;gap:.5em}
.mus-demo .eq button{
  flex:1;font-family:var(--cut);font-size:1.1em;letter-spacing:.06em;text-transform:uppercase;
  background:var(--paper);color:var(--bar);border:2.5px solid var(--bar);padding:.45em;cursor:pointer;
  box-shadow:3px 3px 0 var(--bar);
}
.mus-demo label{display:block;text-align:left;margin:.35em 0;cursor:pointer}
.mus-demo .fine{font-size:.6em;color:#8a8170;display:block;margin-top:.5em}
.mus-demo .clock{font-family:var(--crt);font-size:2.6em;line-height:1;color:var(--pink-dk);display:block}
.mus-demo .step{font-family:var(--crt);font-size:1.1em;color:var(--purple-dk);display:block;margin-bottom:.3em}
.mus-said{font-family:var(--type);font-size:.85em;margin-top:.7em;min-height:1.3em;color:var(--riso-yellow);text-align:center}
.mus-stage.defused .mus-said{color:var(--bar)}

.mus-card{padding:1em 1.1em;display:flex;flex-direction:column}
.mus-card h4{
  font-family:var(--cut);font-size:1.75em;line-height:.98;letter-spacing:.03em;text-transform:uppercase;margin:0 0 .45em;
  text-shadow:2px 2px 0 var(--riso-yellow);
}
.mus-card p{margin:0 0 .6em;font-size:.93em;line-height:1.45}
.mus-card .law{
  border-left:5px solid var(--riso-purple);padding:.1em 0 .1em .7em;font-size:.88em;line-height:1.42;
}
.mus-card .law b{font-family:var(--cut);font-weight:400;letter-spacing:.1em;text-transform:uppercase;font-size:.85em;
  background:var(--riso-purple);color:var(--paper);padding:0 .4em;margin-right:.3em}
.mus-card a.fn, .gpu-src a, .v2-body a.fn{
  font-family:var(--crt);font-size:1.15em;line-height:1;text-decoration:none;
  background:var(--bar);color:var(--riso-yellow);padding:0 .3em;margin:0 .1em;cursor:pointer;
}
.mus-card a.fn:hover, .gpu-src a:hover, .v2-body a.fn:hover{background:var(--riso-pink);color:var(--bar)}
.mus-nav{
  margin-top:auto;display:flex;align-items:center;gap:.5em;padding-top:.7em;border-top:1.5px dashed var(--bar);
}
.mus-nav button{
  font-family:var(--cut);font-size:1em;letter-spacing:.08em;text-transform:uppercase;
  border:2.5px solid var(--bar);background:var(--paper);color:var(--bar);padding:.25em .7em;cursor:pointer;
  box-shadow:2px 2px 0 var(--bar);
}
.mus-nav button:active{transform:translate(2px,2px);box-shadow:none}
.mus-nav .defuse{background:var(--riso-yellow);margin-left:auto}
.mus-nav .count{font-family:var(--crt);font-size:1.3em}
.mus-foot{
  grid-column:1 / -1;background:var(--bar);color:var(--paper);font-family:var(--type);
  font-size:.78em;padding:.45em .9em;letter-spacing:.03em;
}
.mus-foot a{color:var(--riso-yellow)}

/* --- asymmetry.exe --- */
.asym-body h4{font-family:var(--cut);font-size:1.7em;line-height:.95;text-transform:uppercase;letter-spacing:.02em;margin:0 0 .5em}
.asym-body h4 em{font-style:normal;background:var(--riso-pink);padding:0 .2em;mix-blend-mode:multiply}
.asym-col{font-family:var(--cut);font-size:.82em;letter-spacing:.12em;text-transform:uppercase;margin:.8em 0 .3em}
.asym-bar{display:flex;align-items:center;gap:.4em;font-size:.8em;margin:.18em 0}
.asym-bar span{flex:0 0 6.2em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.asym-bar i{display:block;height:.85em;background:var(--riso-pink);border:1.5px solid var(--bar);
  transform-origin:left;animation:asymGrow 3.2s steps(12) infinite alternate}
.asym-bar.you i{background:var(--riso-blue);animation:none}
@keyframes asymGrow{from{transform:scaleX(.82)}to{transform:scaleX(1)}}
.asym-body .wip{
  display:inline-block;font-family:var(--cut);letter-spacing:.14em;text-transform:uppercase;font-size:.8em;
  border:2.5px solid var(--pink-dk);color:var(--pink-dk);padding:.1em .5em;transform:rotate(-4deg);margin-top:.8em;
}
.asym-body p{font-size:.88em;margin:.6em 0 0}

/* --- receipts.log --- */
.rc-body{background:var(--bar);color:var(--riso-acid);font-family:var(--crt);font-size:1.25em;line-height:1.15;padding:.6em .7em}
.rc-row{display:flex;justify-content:space-between;gap:.6em;border-bottom:1px dotted rgba(155,225,90,.35);padding:.12em 0}
.rc-row b{color:var(--riso-yellow);font-weight:400;text-align:right}
.rc-row b.zero{color:var(--riso-pink)}
.rc-hosts{font-size:.8em;color:var(--paper);opacity:.8;margin:.3em 0 .1em;word-break:break-all}
.rc-colophon{
  background:var(--paper);color:var(--bar);font-family:var(--type);font-size:.9em;line-height:1.45;
  padding:.8em .9em;border-top:2.5px solid var(--bar);
}
.rc-colophon b{font-family:var(--cut);font-weight:400;letter-spacing:.1em;text-transform:uppercase;
  background:var(--riso-acid);padding:0 .35em}

/* ---------- 8. SOURCED SURVEILLANCE.EXE ---------- */
.gpu-src{font-family:var(--type);font-size:.78em;color:var(--paper);opacity:.85;margin-top:.5em;letter-spacing:.02em}

/* ---------- 9. HOURS + STRIKE ---------- */
#v2Night, #v2Strike{
  position:fixed;inset:0;z-index:4500;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:24px;
}
#v2Night[hidden], #v2Strike[hidden]{display:none}
#v2Night{background:rgba(20,14,28,.80);color:var(--paper)}
#v2Night .card{max-width:560px}
#v2Night h2{font-family:var(--cut);font-size:clamp(34px,6vw,76px);line-height:.95;text-transform:uppercase;letter-spacing:.02em;margin:0 0 14px;
  color:var(--riso-purple);text-shadow:3px 3px 0 var(--riso-blue)}
#v2Night p{font-family:var(--type);font-size:15px;line-height:1.6;letter-spacing:.04em;margin:0 0 18px}
#v2Night .z{font-family:var(--pixel);font-size:18px;color:var(--riso-yellow);display:block;margin-bottom:18px;animation:blink 2.4s steps(2,end) infinite}
#v2Night button, #v2Strike button{
  font-family:var(--type);font-size:12px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
  background:none;border:1.5px dashed currentColor;color:inherit;padding:6px 14px;opacity:.75;
}
#v2Night button:hover, #v2Strike button:hover{opacity:1}
body.asleep .stage{filter:saturate(.35) brightness(.7)}

#v2Strike{
  background:var(--riso-pink);color:var(--bar);
  background-image:repeating-linear-gradient(-45deg, transparent 0 34px, rgba(26,23,20,.12) 34px 68px);
}
#v2Strike .card{max-width:820px}
#v2Strike h2{
  font-family:var(--cut);font-size:clamp(64px,15vw,220px);line-height:.82;text-transform:uppercase;margin:0;
  color:var(--paper);text-shadow:6px 6px 0 var(--bar), -3px -2px 0 var(--riso-blue);
}
#v2Strike h3{font-family:var(--cut);font-size:clamp(20px,3.4vw,44px);text-transform:uppercase;letter-spacing:.06em;margin:16px 0 10px}
#v2Strike p{font-family:var(--type);font-size:16px;line-height:1.55;margin:0 auto 20px;max-width:560px}
#v2Strike .fist{font-size:clamp(40px,7vw,90px);display:block;line-height:1}

/* ---------- 10. REFUSE MODE — ONE-INK ZINE ---------- */
#calm{
  background:var(--paper);
  background-image:radial-gradient(circle, var(--riso-pink) 1.3px, transparent 1.6px);
  background-size:9px 9px;background-position:0 0;
}
#calm::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, var(--paper) 0%, rgba(244,237,224,.9) 40%, rgba(244,237,224,.55) 100%);
}
.calm-card{
  position:relative;color:var(--riso-pink);text-align:left;max-width:520px;width:88%;
  border:3px solid var(--riso-pink);background:var(--paper);padding:34px 34px 26px;
  box-shadow:10px 10px 0 var(--riso-pink);
}
.calm-card::before{
  content:"ISSUE ∞ — ONE INK — FREE";display:block;font-family:var(--type);font-size:10px;letter-spacing:.2em;
  border-bottom:3px solid var(--riso-pink);padding-bottom:8px;margin-bottom:18px;
}
.calm-card h2{font-size:clamp(40px,8vw,72px);line-height:.9;letter-spacing:.01em}
.calm-card p{color:var(--riso-pink);margin:10px 0 24px}
.calm-card nav{justify-content:flex-start;flex-wrap:wrap;gap:10px 14px}
.calm-card nav a{
  color:var(--paper);background:var(--riso-pink);border:0;padding:6px 14px 5px;font-size:18px;
}
.calm-card nav a:hover{color:var(--riso-pink);background:var(--paper);outline:3px solid var(--riso-pink)}
.calm-line{opacity:1;text-transform:none !important;letter-spacing:.04em !important;font-size:14px !important}
#unCalm{border:1.5px dashed var(--riso-pink);color:var(--riso-pink)}
#unCalm:hover{color:var(--paper);background:var(--riso-pink);border-color:var(--riso-pink)}

/* ---------- 11. SCREENSAVER — RISO OVERDRIVE ---------- */
#screensaver{
  background-color:var(--paper) !important;
  background-image:
    repeating-conic-gradient(from 0deg at 50% 46%, rgba(255,210,63,.55) 0 6deg, transparent 6deg 12deg) !important;
  --halftone-ink-a:#ff2d8f; --halftone-ink-b:#2a55d4;
}
/* a second sunburst plate, counter-rotating, in pink — where the two cross
   the yellow and pink overprint to orange */
#screensaver::before{
  content:"";position:absolute;left:50%;top:46%;width:240vmax;height:240vmax;margin:-120vmax 0 0 -120vmax;
  background:repeating-conic-gradient(from 3deg, rgba(255,45,143,.34) 0 4deg, transparent 4deg 16deg);
  mix-blend-mode:multiply;animation:ssSpin 90s linear infinite;pointer-events:none;z-index:0;
}
#screensaver::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background-image:radial-gradient(circle, rgba(42,85,212,.5) 1.4px, transparent 1.8px);
  background-size:11px 11px;mix-blend-mode:multiply;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 46%, transparent 30%, #000 100%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 46%, transparent 30%, #000 100%);
}
@keyframes ssSpin{to{transform:rotate(360deg)}}
#screensaver > *{z-index:3}
#screensaver > .ss-close, #screensaver > .ss-close-x{z-index:20}

/* every sticker is a plate: flat ink, black keyline, hard ink shadow */
#screensaver .ss-wordmark{
  font-family:var(--cut) !important;font-style:normal !important;font-weight:400 !important;
  color:var(--riso-pink) !important;letter-spacing:.01em;text-transform:uppercase;
  text-shadow:6px 6px 0 var(--riso-blue), -3px -2px 0 var(--riso-yellow) !important;
  -webkit-text-stroke:2.5px var(--bar);paint-order:stroke fill;
}
#screensaver .ss-wordmark b{color:var(--riso-orange) !important;font-style:normal !important;font-weight:400 !important}
#screensaver .ss-cd,
#screensaver .ss-clickbanner .cd-hand .cd{
  background:conic-gradient(from 0deg, var(--riso-pink), var(--riso-yellow), var(--riso-acid), var(--riso-blue), var(--riso-purple), var(--riso-orange), var(--riso-pink)) !important;
  border:2.5px solid var(--bar) !important;
}
#screensaver .ss-cd-banner{
  background:var(--bar) !important;border:3px solid var(--bar) !important;
  box-shadow:8px 8px 0 var(--riso-pink), -3px -3px 0 var(--riso-blue);
}
#screensaver .ss-cd-banner::before{background:linear-gradient(180deg, transparent 0%, var(--riso-orange) 55%, var(--riso-pink) 100%) !important;opacity:.9}
#screensaver .ss-shop{
  font-family:var(--cut) !important;font-weight:400 !important;color:var(--bar) !important;
  background:var(--riso-yellow) !important;border:3px solid var(--bar) !important;letter-spacing:.06em;
}
#screensaver .ss-shop::after{font-family:var(--type);color:var(--bar)}
#screensaver .ss-clickbanner{
  background:var(--riso-blue) !important;border:3px solid var(--bar) !important;color:var(--paper) !important;
  font-family:var(--cut) !important;font-weight:400 !important;box-shadow:8px 8px 0 var(--riso-yellow);
}
#screensaver .ss-clickbanner .big{color:var(--paper) !important;font-size:38px !important;line-height:.95}
#screensaver .ss-clickbanner .small,
#screensaver .ss-clickbanner .arrow{color:var(--riso-yellow) !important;font-family:var(--type)}
#screensaver .ss-freemusic{
  background:var(--riso-acid) !important;border:3px solid var(--bar) !important;box-shadow:8px 8px 0 var(--riso-purple);
}
#screensaver .ss-freemusic .big{font-family:var(--cut) !important;font-weight:400 !important;letter-spacing:.03em}
#screensaver .ss-freemusic .small{font-family:var(--type) !important}
#screensaver .ss-freemusic .head{background:var(--riso-blue) !important}
#screensaver .ss-eads{box-shadow:6px 6px 0 var(--riso-pink)}
#screensaver .ss-eads .ads{font-family:var(--type) !important;background:var(--riso-yellow) !important}
#screensaver .ss-eads .e{font-family:var(--cut) !important;color:var(--riso-blue) !important}
#screensaver .ss-onair{
  font-family:var(--cut) !important;font-weight:400 !important;color:var(--riso-pink) !important;
  background:var(--bar) !important;border:3px solid var(--bar) !important;letter-spacing:.08em;
  box-shadow:5px 5px 0 var(--riso-acid);
}
#screensaver .ss-sticker{
  background:var(--riso-purple) !important;color:var(--paper) !important;font-family:var(--type) !important;font-style:normal !important;
  border:3px solid var(--bar);box-shadow:5px 5px 0 var(--riso-yellow);
}
#screensaver .ss-clef,
#screensaver .ss-staff .notes span,
#screensaver .ss-staff .clef-lead{
  font-family:var(--type) !important;color:var(--riso-blue) !important;font-weight:400 !important;
}
#screensaver .ss-clef{color:var(--riso-pink) !important;mix-blend-mode:multiply}
#screensaver .ss-eq{background:var(--bar) !important;border:3px solid var(--bar);box-shadow:6px 6px 0 var(--riso-orange)}
#screensaver .ss-eq i{background:linear-gradient(180deg, var(--riso-pink) 0%, var(--riso-yellow) 55%, var(--riso-acid) 100%) !important}
#screensaver .ss-piano{box-shadow:8px 8px 0 var(--riso-blue), -3px -3px 0 var(--riso-pink)}
#screensaver .ss-piano i.flash{background:var(--riso-yellow) !important}
#screensaver .ss-construction{
  background:var(--riso-yellow) !important;font-family:var(--cut) !important;font-weight:400 !important;
  letter-spacing:.04em;border:3px solid var(--bar) !important;box-shadow:8px 8px 0 var(--bar);
}
#screensaver .ss-counter{background:var(--bar) !important;box-shadow:6px 6px 0 var(--riso-acid);font-family:var(--type) !important}
#screensaver .ss-counter .num{font-family:var(--crt) !important;color:var(--riso-acid) !important}
#screensaver .ss-webring{background:var(--riso-purple) !important;border:3px solid var(--bar) !important;font-family:var(--type) !important;
  box-shadow:6px 6px 0 var(--riso-yellow)}
#screensaver .ss-webring b{font-family:var(--cut) !important;font-weight:400 !important;color:var(--riso-yellow) !important}
#screensaver .ss-best{background:var(--bar) !important;color:var(--paper) !important;font-family:var(--type) !important;border:0 !important}
#screensaver .ss-mail{border:3px solid var(--bar) !important;box-shadow:6px 6px 0 var(--riso-blue);font-family:var(--type) !important}
#screensaver .ss-mail .text{font-family:var(--cut) !important;font-weight:400 !important;color:var(--riso-blue) !important}
#screensaver .ss-newsticker{background:var(--bar) !important;border-color:var(--riso-pink) !important}
#screensaver .ss-newsticker .inner{font-family:var(--crt) !important;color:var(--riso-yellow) !important}
#screensaver .ss-strip{background:var(--bar) !important;box-shadow:0 5px 0 var(--riso-pink) !important}
#screensaver .ss-dl{font-family:var(--type) !important;border:3px solid var(--bar) !important;background:var(--paper) !important;box-shadow:6px 6px 0 var(--riso-orange)}
#screensaver .ss-dl .dl-bar i{background:repeating-linear-gradient(90deg, var(--riso-blue) 0 9px, var(--paper) 9px 12px) !important}
#screensaver .ss-home, #screensaver .ss-djicon{font-family:var(--cut) !important;font-weight:400 !important;letter-spacing:.08em}
#screensaver .ss-burst .lab, #screensaver .ss-fist .lab, #screensaver .ss-heart .ht,
#screensaver .ss-globe .cap, #screensaver .ss-flower .fl-lab{font-family:var(--pixel) !important}
#screensaver .ss-victim-cry{font-family:var(--cut) !important;font-weight:400 !important;color:var(--pink-dk) !important;
  border:3px solid var(--bar) !important;box-shadow:5px 5px 0 var(--riso-acid);letter-spacing:.03em}
#screensaver .ss-beam{background:linear-gradient(180deg, rgba(255,210,63,.75), rgba(155,225,90,.2)) !important;mix-blend-mode:multiply}
#screensaver .ss-close{background:var(--riso-yellow) !important;font-family:var(--pixel)}
#screensaver .ss-close-x{background:var(--riso-pink) !important;color:var(--bar) !important}
#screensaver .ss-close:hover, #screensaver .ss-close-x:hover{background:var(--riso-acid) !important;color:var(--bar) !important}

/* --- NEW LAYERS (injected in index.html, .ssx-*) --- */
.ssx-rows{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:2 !important;mix-blend-mode:multiply}
.ssx-row{
  position:absolute;left:0;white-space:nowrap;font-family:var(--cut);text-transform:uppercase;
  font-size:clamp(70px,13vw,210px);line-height:.86;letter-spacing:.01em;
  animation:ssxSlide 46s linear infinite;
}
.ssx-row span{padding-right:.5em}
.ssx-row.r1{top:14%;color:rgba(255,45,143,.34)}
.ssx-row.r2{top:38%;color:rgba(42,85,212,.28);animation-direction:reverse;animation-duration:58s}
.ssx-row.r3{top:62%;color:rgba(255,107,31,.36);animation-duration:38s}
.ssx-row.r4{top:84%;color:rgba(143,90,210,.30);animation-direction:reverse;animation-duration:66s}
@keyframes ssxSlide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.ssx-vert{
  position:absolute;top:0;bottom:0;width:44px;overflow:hidden;background:var(--bar);z-index:2 !important;
  border-left:3px solid var(--riso-pink);border-right:3px solid var(--riso-pink);
}
.ssx-vert.l{left:0}.ssx-vert.r{right:0;border-color:var(--riso-acid)}
.ssx-vert div{
  writing-mode:vertical-rl;white-space:nowrap;font-family:var(--crt);font-size:26px;letter-spacing:.14em;
  color:var(--riso-yellow);line-height:44px;animation:ssxUp 30s linear infinite;
}
.ssx-vert.r div{color:var(--riso-acid);animation-direction:reverse;animation-duration:36s}
@keyframes ssxUp{from{transform:translateY(0)}to{transform:translateY(-50%)}}

.ssx-stamp{
  position:absolute;font-family:var(--cut);text-transform:uppercase;letter-spacing:.06em;line-height:.95;
  border:4px solid currentColor;padding:.18em .45em;mix-blend-mode:multiply;text-align:center;
  animation:ssxThump 1.9s steps(2,end) infinite;z-index:2 !important;
}
.ssx-stamp.s1{top:17%;left:4.5%;font-size:34px;color:var(--riso-blue);transform:rotate(-9deg)}
.ssx-stamp.s2{top:71%;right:30%;font-size:28px;color:var(--pink-dk);transform:rotate(6deg);animation-delay:.6s}
.ssx-stamp.s3{top:47%;left:36%;font-size:24px;color:var(--purple-dk);transform:rotate(-4deg);animation-delay:1.1s}
.ssx-stamp.s4{top:9%;right:22%;font-size:22px;color:var(--orange-dk);transform:rotate(8deg);animation-delay:.3s}
@keyframes ssxThump{50%{opacity:.72}}

.ssx-disc{
  position:absolute;border-radius:50%;mix-blend-mode:multiply;pointer-events:none;
  animation:ssxDrift 14s ease-in-out infinite alternate;
}
.ssx-disc.d1{width:34vmin;height:34vmin;left:8%;top:44%;background:var(--riso-yellow);opacity:.85}
.ssx-disc.d2{width:26vmin;height:26vmin;left:22%;top:52%;background:var(--riso-pink);opacity:.7;animation-duration:18s;animation-direction:alternate-reverse}
.ssx-disc.d3{width:30vmin;height:30vmin;right:12%;top:8%;background:var(--riso-acid);opacity:.75;animation-duration:22s}
.ssx-disc.d4{width:22vmin;height:22vmin;right:24%;top:20%;background:var(--riso-blue);opacity:.55;animation-duration:16s;animation-direction:alternate-reverse}
.ssx-disc.d5{width:20vmin;height:20vmin;left:46%;top:70%;background:var(--riso-purple);opacity:.5;animation-duration:20s}
@keyframes ssxDrift{from{transform:translate(0,0)}to{transform:translate(5vmin,-4vmin)}}

.ssx-reg{position:absolute;width:34px;height:34px;z-index:6 !important;opacity:.9}
.ssx-reg::before,.ssx-reg::after{content:"";position:absolute;background:var(--bar)}
.ssx-reg::before{left:50%;top:0;bottom:0;width:2px;margin-left:-1px}
.ssx-reg::after{top:50%;left:0;right:0;height:2px;margin-top:-1px}
.ssx-reg i{position:absolute;inset:7px;border:2px solid var(--bar);border-radius:50%}
.ssx-reg.a{left:58px;top:12px}.ssx-reg.b{right:58px;bottom:12px}
.ssx-reg.c{left:58px;bottom:12px}

.ssx-swatch{
  position:absolute;right:58px;top:50%;display:flex;flex-direction:column;z-index:6 !important;
  border:2.5px solid var(--bar);transform:translateY(-50%);
}
.ssx-swatch i{display:block;width:22px;height:22px;border-bottom:2.5px solid var(--bar)}
.ssx-swatch i:last-child{border-bottom:0}

.ssx-ticker2{
  position:absolute;left:44px;right:44px;bottom:0;height:30px;overflow:hidden;background:var(--riso-pink);
  border-top:3px solid var(--bar);z-index:7 !important;
}
.ssx-ticker2 div{
  white-space:nowrap;font-family:var(--type);font-size:17px;line-height:28px;letter-spacing:.08em;color:var(--bar);
  text-transform:uppercase;animation:ssxSlide 52s linear infinite;display:inline-block;
}
.ssx-ticker2 span{padding-right:2.4em}

#screensaver.overdrive .ssx-row{animation-duration:9s}
#screensaver.overdrive::before{animation-duration:8s}
#screensaver.overdrive .ssx-disc{animation-duration:2.2s}

@media (prefers-reduced-motion:reduce){
  #screensaver::before,.ssx-row,.ssx-vert div,.ssx-stamp,.ssx-disc,.ssx-ticker2 div,.asym-bar i{animation:none !important}
}
@media (max-width:1100px){
  .stage-grid > .w-museum{order:60}
  .stage-grid > .w-asym{order:61}
  .stage-grid > .w-cite{order:62}
  .stage-grid > .w-receipts{order:63}
  .ssx-rows,.ssx-disc,.ssx-vert,.ssx-swatch,.ssx-reg{display:none}
  .mus-body{grid-template-columns:1fr}
  .mus-stage{border-right:0;border-bottom:2.5px solid var(--bar)}
}

/* ---------- 12. PRINT — ONE-INK BROADSHEET ---------- */
@media print{
  @page{margin:16mm 14mm}
  html,body{background:#fff !important;color:#000 !important;cursor:auto !important;overflow:visible !important}
  .topbar,.botbar,.menu-panel,.stage,.bg-scene,#screensaver,#bootsys,#crtPowerOn,#bsod,#calm,#crtGL,
  #v2Night,#v2Strike,.ticker-row{display:none !important}
  /* the machine-readable spine becomes the printed page */
  main.sr-only{
    position:static !important;width:auto !important;height:auto !important;clip:auto !important;
    clip-path:none !important;overflow:visible !important;white-space:normal !important;margin:0 !important;
    font-family:"Special Elite","Courier New",monospace;font-size:10.5pt;line-height:1.45;color:#000;
  }
  main.sr-only h1{font-family:"Anton","Arial Black",sans-serif;font-size:30pt;line-height:1;text-transform:uppercase;
    border-bottom:3pt solid #000;padding-bottom:6pt;margin:0 0 10pt}
  main.sr-only h2{font-family:"Anton","Arial Black",sans-serif;font-size:14pt;text-transform:uppercase;letter-spacing:.06em;
    border-top:1.5pt solid #000;padding-top:6pt;margin:14pt 0 4pt}
  main.sr-only h3{font-size:10.5pt;margin:8pt 0 2pt}
  main.sr-only nav{display:none}
  main.sr-only a{color:#000;text-decoration:none}
  main.sr-only::after{content:"jasondmacleod.com — printed on one ink. no trackers were harmed.";display:block;
    margin-top:16pt;border-top:3pt solid #000;padding-top:6pt;font-size:8pt;letter-spacing:.1em;text-transform:uppercase}
}

/* ---------- THE TRUCKS NEVER STOP ---------- */
/* standing rule: the semi-truck convoy is always moving. nothing in this
   layer (idle windows, night hours, strike, calm) may pause it. */
.bg-scene, .bg-scene *, #bgTrack, #bgTrack *{animation-play-state:running !important}
body.asleep .bg-scene{filter:none}

/* ---------- LINKS.HTM blogroll ---------- */
.links-roll{display:flex;flex-wrap:wrap;gap:.35em;margin:.7em 0 .5em}
.links-roll a{
  font-family:var(--type);font-size:.85em;color:var(--bar);text-decoration:none;
  border:2px solid var(--bar);background:var(--paper);padding:.12em .5em;box-shadow:2px 2px 0 var(--riso-pink);
}
.links-roll a:nth-child(3n){box-shadow:2px 2px 0 var(--riso-blue)}
.links-roll a:nth-child(3n+1){box-shadow:2px 2px 0 var(--riso-acid)}
.links-roll a:hover, .links-roll a.on{background:var(--riso-yellow)}
/* desktop page transition: leaving for a subpage, the desktop steps back */
@media (prefers-reduced-motion: no-preference){
  ::view-transition-new(sheet){animation:sheetIn .34s steps(7) both;transform-origin:50% 100%}
  ::view-transition-old(sheet){animation:sheetOut .22s steps(5) both;transform-origin:50% 100%}
}
@keyframes sheetIn{from{transform:scale(.16,.08);opacity:.2}60%{opacity:1}to{transform:none;opacity:1}}
@keyframes sheetOut{to{transform:scale(.16,.08);opacity:0}}

#screensaver > .ss-close-x{left:58px !important}


/* =====================================================================
   SHADER ADS · AUCTION · RAILS · SOUND  (assets/ads.js)
   ===================================================================== */
canvas.ad-gl{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none}
.has-gl{position:relative;isolation:isolate}
.has-gl > *:not(.ad-gl):not(.ad-auction){z-index:1}

/* PRE-ORDER: the shader is the sky, sun and grid now */
.buy-body.has-gl > .scene, .buy-body.has-gl > .stars, .buy-body.has-gl > .buy-sun,
.buy-body.has-gl > .mountains, .buy-body.has-gl > .ground{display:none !important}
.buy-body.has-gl .text{text-shadow:3px 3px 0 var(--bar), -2px -2px 0 var(--riso-blue)}
/* WARNING: tunnel behind the type */
.warn-body.has-gl{background:var(--bar) !important}
.warn-body.has-gl > *:not(.ad-gl):not(.ad-auction){position:relative}
.warn-body.has-gl .small{background:var(--bar);display:inline-block;padding:.3em .6em}
/* CLICK HERE: flow behind, copy on paper chips so it stays readable */
.click-body.has-gl > *:not(.ad-gl):not(.ad-auction){position:relative}
.click-body.has-gl .finesub{background:var(--paper);border:2px solid var(--bar);padding:.4em .6em;margin:.5em auto;box-shadow:3px 3px 0 var(--bar)}
.click-body.has-gl .fineline{box-shadow:3px 3px 0 var(--bar)}
/* NOW GENERATING: a dithered product shot instead of three line-art carts */
.cart-body.has-product{position:relative}
.cart-body.has-product .carts{display:none}
.ad-product{position:relative;height:9.5em;margin:.5em 0;border:2.5px solid var(--bar);overflow:hidden;box-shadow:4px 4px 0 var(--riso-orange)}
.ad-product::after{
  content:"NEW! IMPROVED! UNNECESSARY!";position:absolute;left:0;right:0;bottom:0;z-index:2;
  font-family:var(--cut);font-size:1em;letter-spacing:.1em;background:var(--riso-yellow);color:var(--bar);
  border-top:2.5px solid var(--bar);padding:.15em 0 .05em;text-align:center;
}

/* --- the auction --- */
.ad-auction{
  position:absolute;inset:0;z-index:6;background:rgba(26,23,20,.93);color:var(--riso-acid);
  font-family:var(--crt);font-size:15px;line-height:1.15;text-align:left;padding:10px 12px;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;gap:2px;
  border:2px solid var(--riso-acid);animation:adIn .16s steps(3);
}
.ad-auction .hd{color:var(--riso-yellow);letter-spacing:.06em;border-bottom:1px dashed var(--riso-yellow);padding-bottom:3px;margin-bottom:3px}
.ad-auction .win{color:var(--bar);background:var(--riso-acid)}
.ad-auction .sold{color:var(--bar);background:var(--riso-pink);font-size:1.12em;margin-top:4px;padding:1px 4px;letter-spacing:.04em}
.ad-auction.out{animation:adOut .3s steps(4) forwards}
@keyframes adIn{from{clip-path:inset(50% 0)}to{clip-path:inset(0)}}
@keyframes adOut{to{clip-path:inset(0 0 100% 0)}}

/* --- rails ---
   wherever the side margins have room (about 1890px and up): skyscrapers in the margins.
   anything narrower: the same six banners become an ad break below the
   collage, so they are never just missing. phones: no rails. */
.ad-rails{display:none}
@media (min-width:1101px){
  .ad-rails{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 30px;padding:0 20px 30px;position:relative;z-index:2}
  .ad-rail{display:contents}
  .ad-rails::before{
    content:"— AD BREAK — YOUR ATTENTION IS BEING AUCTIONED —";flex:0 0 100%;text-align:center;
    font-family:var(--type);font-size:13px;letter-spacing:.3em;color:var(--paper);opacity:.85;
  }
}
.ad-rails.side{display:block;padding:40px 20px 30px}
.ad-rails.side::before{display:none}
.ad-rails.side .ad-rail{display:flex;flex-direction:column;gap:46px;position:absolute;top:auto;width:160px;z-index:1;scale:var(--rs,1)}
.ad-rails.side .ad-rail.l{transform-origin:0 0}
.ad-rails.side .ad-rail.r{transform-origin:100% 0}
.ad-rail .ad{
  position:relative;width:160px;height:600px;border:3px solid var(--bar);background:var(--paper);overflow:hidden;cursor:pointer;
  box-shadow:7px 7px 0 var(--b), -2px -2px 0 var(--a);
  animation:railBob 5s steps(8) infinite alternate;
}
.ad-rail .ad:nth-child(2){animation-duration:6.5s;animation-direction:alternate-reverse}
.ad-rail .ad:nth-child(3){animation-duration:4.2s}
@keyframes railBob{from{transform:rotate(-1.2deg) translateY(0)}to{transform:rotate(1.2deg) translateY(-8px)}}
.ad-rail .ad .lab{
  position:absolute;top:0;left:0;right:0;z-index:3;background:var(--bar);color:var(--paper);
  font-family:var(--type);font-size:9px;letter-spacing:.22em;text-transform:uppercase;text-align:center;padding:3px 0 2px;
}
.ad-rail .ad .art{position:absolute;inset:0}
.ad-rail .ad .copy{position:absolute;left:0;right:0;top:44px;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:7px;padding:0 9px}
.ad-rail .ad .copy b{
  font-family:var(--cut);font-weight:400;font-size:27px;line-height:.95;letter-spacing:0;text-transform:uppercase;
  background:var(--paper);color:var(--bar);border:3px solid var(--bar);padding:4px 7px 2px;box-shadow:4px 4px 0 var(--a);
  max-width:100%;white-space:nowrap;
}
.ad-rail .ad .copy b:nth-child(2){transform:rotate(-3deg);background:var(--a)}
.ad-rail .ad .copy b:nth-child(3){transform:rotate(2deg);box-shadow:4px 4px 0 var(--b)}
.ad-rail .ad .copy span{
  font-family:var(--type);font-size:12.5px;line-height:1.3;background:var(--bar);color:var(--paper);padding:5px 7px;margin-top:4px;
}
.ad-rail .ad .cta{
  position:absolute;left:10px;right:10px;bottom:16px;z-index:2;text-align:center;
  font-family:var(--cut);font-size:18px;letter-spacing:.08em;background:var(--riso-yellow);color:var(--bar);
  border:3px solid var(--bar);padding:7px 2px 5px;box-shadow:4px 4px 0 var(--bar);animation:blink 1.3s steps(2,end) infinite;
}
.ad-rail .ad .ad-auction{font-size:13px;padding:8px}

/* --- sound: the whole desktop moves to the mix --- */
@media (prefers-reduced-motion:no-preference){
  body.playing .stage-grid > .win, body.beat-demo .stage-grid > .win{
    scale:calc(1 + var(--beat,0) * .022);
    box-shadow:calc(6px + var(--beat,0) * 12px) calc(6px + var(--beat,0) * 12px) 0 var(--b), calc(-1.5px - var(--hi,0) * 5px) -1.5px 0 var(--a);
  }
  body.playing .stage-grid > .win:nth-child(odd), body.beat-demo .stage-grid > .win:nth-child(odd){rotate:calc(var(--mid,0) * .7deg)}
  body.playing .stage-grid > .win:nth-child(even), body.beat-demo .stage-grid > .win:nth-child(even){rotate:calc(var(--mid,0) * -.7deg)}
  body.playing .wordmark, body.beat-demo .wordmark{scale:calc(1 + var(--beat,0) * .06)}
  body.playing .ad-rail .ad, body.beat-demo .ad-rail .ad{scale:calc(1 + var(--beat,0) * .04)}
  body.playing .ticker-row, body.beat-demo .ticker-row{filter:brightness(calc(1 + var(--hi,0) * .5))}
}

/* side rails hang from the top of the stage, not the ad-break block */
.ad-rails.side{position:static}
.ad-rails.side .ad-rail.l{top:120px}
.ad-rails.side .ad-rail.r{top:260px}
/* dodging close button + closed state */
.ad-rail .ad .x{
  position:absolute;right:6px;top:22px;z-index:5;width:24px;height:24px;border:2.5px solid var(--bar);background:var(--paper);
  font:700 15px/1 var(--ms);color:var(--bar);cursor:pointer;padding:0;transition:all .12s steps(3);
}
.ad-rail .ad .gone{
  display:none;position:absolute;inset:0;z-index:7;background:var(--bar);color:var(--riso-acid);font-family:var(--crt);font-size:20px;
  line-height:1.15;align-items:center;justify-content:center;text-align:center;padding:14px;
}
.ad-rail .ad.closed .gone{display:flex}

/* chumbox */
.chumbox{flex:0 0 100%;max-width:1060px;margin:26px auto 0;background:var(--paper);border:3px solid var(--bar);
  box-shadow:8px 8px 0 var(--riso-purple), -2px -2px 0 var(--riso-yellow);padding:14px 16px 18px;transform:rotate(-.4deg)}
.chumbox .ch-h{font-family:var(--cut);font-size:20px;letter-spacing:.1em;text-transform:uppercase;color:var(--bar);
  border-bottom:3px solid var(--bar);padding-bottom:6px;margin-bottom:14px}
.chumbox .ch-h span{font-family:var(--type);font-size:11px;letter-spacing:.16em;float:right;margin-top:8px;opacity:.7}
.chumbox .ch-g{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.chumbox .ch-t .art{position:relative;height:118px;border:2.5px solid var(--bar);overflow:hidden;margin-bottom:8px}
.chumbox .ch-t b{display:block;font-family:var(--cut);font-weight:400;font-size:17px;line-height:1.05;letter-spacing:.02em;color:var(--blue-dk)}
.chumbox .ch-t span{display:block;font-family:var(--type);font-size:12px;line-height:1.3;color:var(--bar);margin-top:4px}
.ad-rails.side .chumbox{margin-top:30px}
/* no WebGL (older or locked-down browsers): the ads still run, on a printed pattern instead of a shader */
.ad-rails.nogl .art{background:
  radial-gradient(circle at 3px 3px, var(--a, var(--riso-pink)) 2px, transparent 2.7px) 0 0/9px 9px,
  repeating-linear-gradient(45deg, var(--b, var(--riso-yellow)) 0 14px, var(--paper) 14px 28px);animation:noglDrift 9s linear infinite}
.ad-rails.nogl .ad.dk .art{background:
  radial-gradient(circle at 3px 3px, var(--a, var(--riso-pink)) 2px, transparent 2.7px) 0 0/9px 9px,
  repeating-linear-gradient(45deg, var(--b, var(--riso-yellow)) 0 14px, #1a1714 14px 28px)}
@keyframes noglDrift{to{background-position:90px 90px, 79.2px 0}}

/* auction target line */
.ad-auction .tg{color:var(--riso-pink);font-size:.86em;letter-spacing:.03em}

/* NOW GENERATING */
.ad-product::after{content:attr(data-name) !important;font-size:.92em !important}
.gen-step{position:absolute;left:0;top:0;z-index:2;font-family:var(--crt);font-size:1.05em;line-height:1;background:var(--bar);color:var(--riso-acid);padding:.15em .4em}
.gen-skip{position:absolute;right:0;top:0;z-index:3;font-family:var(--ms);font-size:.8em;background:rgba(26,23,20,.86);color:var(--paper);
  border:0;border-left:2px solid var(--paper);border-bottom:2px solid var(--paper);padding:.25em .5em;cursor:pointer}
.ad-product.skipped canvas{visibility:hidden}
.ad-product.skipped{background:var(--bar)}

/* SHADOW-BOX DEPTH: layers ride the cursor at different rates */
@media (prefers-reduced-motion:no-preference) and (hover:hover){
  .wordmark .scrap:nth-child(1){translate:calc(var(--px,0) * -9px) calc(var(--py,0) * -5px)}
  .wordmark .scrap:nth-child(2){translate:calc(var(--px,0) * 7px) calc(var(--py,0) * 4px)}
  .subbar .tag{translate:calc(var(--px,0) * 14px) calc(var(--py,0) * 6px)}
  .has-gl > canvas.ad-gl{translate:calc(var(--px,0) * 10px) calc(var(--py,0) * 8px);scale:1.12}
  .buy-body .text{translate:calc(var(--px,0) * -12px) calc(var(--py,0) * -8px)}
  .buy-body .buy-burst{translate:calc(var(--px,0) * -22px) calc(var(--py,0) * -14px)}
  .buy-body .rider{translate:calc(var(--px,0) * -5px) 0}
  .warn-body .big{translate:calc(var(--px,0) * -10px) calc(var(--py,0) * -6px)}
  .warn-body .big2{translate:calc(var(--px,0) * -18px) calc(var(--py,0) * -10px)}
  .click-body .bang{translate:calc(var(--px,0) * -12px) calc(var(--py,0) * -6px)}
  .click-body .fineline{translate:calc(var(--px,0) * -20px) calc(var(--py,0) * -9px)}
  .ad-rail .ad .copy{translate:calc(var(--px,0) * -8px) calc(var(--py,0) * -8px)}
  .ad-rail .ad .art{translate:calc(var(--px,0) * 8px) calc(var(--py,0) * 8px);scale:1.14}
  .hero-art svg{translate:calc(var(--px,0) * -6px) calc(var(--py,0) * -3px);scale:1.03}
  .bg-scene{translate:calc(var(--px,0) * 12px) 0}
}

/* PHYSICS: the pile */
.surv-body.has-pile{position:relative}
canvas.pile{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none}

/* LIVE AI */
.ai-probs{margin:.6em 0 .4em;border:2px solid var(--bar);background:var(--paper);padding:.35em .5em}
.ai-probs .pl{font-family:var(--type);font-size:.8em;letter-spacing:.14em;text-transform:uppercase;opacity:.7;margin-bottom:.2em}
.ai-probs .pr{display:grid;grid-template-columns:6.4em 1fr 3.2em;align-items:center;gap:.4em;font-family:var(--crt);font-size:1.25em;line-height:1.05}
.ai-probs .pr i{display:block;height:.62em;background:var(--riso-acid);border:1.5px solid var(--bar);transition:width .4s steps(6)}
.ai-probs .pr.b i{background:var(--riso-pink)}
.ai-probs .pr.b span{text-decoration:line-through;opacity:.75}
.ai-probs .pr em{font-style:normal;text-align:right}
canvas.swarm{display:block;width:100%;height:5.2em;margin:.5em 0;border:2px solid var(--bar);background:var(--paper)}


/* =====================================================================
   INK.JS — separations view + the ink fluid
   ===================================================================== */
canvas.ink-fluid{position:fixed;left:0;top:0;width:100vw;height:100vh;z-index:0;pointer-events:none;transition:opacity .8s linear}
@media (max-width:1100px){ canvas.ink-fluid{display:none} }

.sep-btn{margin-right:6px}
html:has(body.sep-pre){overflow:hidden}
body.sep-pre .stage{perspective:2600px;perspective-origin:50% 44vh}
body.sep-pre .stage-grid{
  transform-style:preserve-3d;transform-origin:50% 50%;
  transition:transform 1s cubic-bezier(.2,.8,.2,1);
}
body.sep .stage-grid{
  transform:translate(var(--sep-x,0px), var(--sep-y,0px)) scale(var(--sep-s,.5))
            rotateX(calc(57deg - var(--sep-oy,0) * 12deg)) rotateZ(calc(-27deg + var(--sep-ox,0) * 18deg));
}
body.sep-live .stage-grid{transition:transform .28s linear}
/* the key plate: everything printed in black */
body.sep-pre .stage-grid > .win{transition:box-shadow .5s linear}
body.sep .stage-grid > .win{box-shadow:none !important;scale:1 !important;rotate:none !important}
body.sep .stage-grid > .win > *{filter:grayscale(1) contrast(1.25)}
body.sep .ad-rails{visibility:hidden}
/* drums + stock */
.sep-layers{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
.sep-layer{position:absolute;inset:0;transform:translateZ(0);transition:transform 1s cubic-bezier(.2,.8,.2,1), opacity .5s linear;opacity:0;transform-style:preserve-3d}
body.sep .sep-layer{transform:translateZ(calc(var(--z) * var(--sep-gap,74px) + var(--kick,0px)));opacity:1}
body.sep-live .sep-layer{transition:transform .1s cubic-bezier(.2,1.6,.4,1), opacity .3s linear}
body.sep .sep-layer.muted{transform:translateZ(calc(var(--z) * var(--sep-gap,74px) - 420px));opacity:.16}
body.sep .sep-layer.hit .sep-ghost{filter:brightness(1.35) saturate(1.3)}
body.sep .sep-ghost{pointer-events:auto;cursor:pointer}
body.sep .stage-grid > .win{pointer-events:none}
body.sep-pre .stage-grid > .w-clippy, body.sep-pre .stage-grid > .w-refuse{visibility:hidden}
.sep-ghost{position:absolute;display:block;background:var(--ink);border:3px solid #1a1714;transform-origin:50% 50%}
.sep-ghost.b{
  background:radial-gradient(circle, var(--ink) 3.2px, transparent 3.7px) 0 0 / 11px 11px;border-color:var(--ink);
}
.sep-tag{
  position:absolute;left:-10px;top:-58px;font-family:var(--cut);font-size:40px;line-height:1;letter-spacing:.06em;white-space:nowrap;
  background:#1a1714;color:var(--ink,#f4ede0);padding:8px 16px 5px;border:3px solid var(--ink,#f4ede0);
}
.sep-ink:nth-child(odd) .sep-tag{left:auto;right:-10px}
.sep-stock{inset:-60px;background:var(--paper);border:4px solid #1a1714;
  background-image:radial-gradient(circle at 2px 2px, rgba(26,23,20,.14) 1px, transparent 1.6px);background-size:9px 9px}
.sep-stock .sep-tag{top:auto;bottom:-66px;left:0;color:#1a1714;background:var(--paper);border-color:#1a1714}
.sep-stock .rg{position:absolute;width:54px;height:54px;border:3px solid #1a1714;border-radius:50%}
.sep-stock .rg::before,.sep-stock .rg::after{content:"";position:absolute;background:#1a1714}
.sep-stock .rg::before{left:50%;top:-16px;bottom:-16px;width:3px;margin-left:-1.5px}
.sep-stock .rg::after{top:50%;left:-16px;right:-16px;height:3px;margin-top:-1.5px}
.sep-stock .rg.a{left:14px;top:14px}.sep-stock .rg.b{right:14px;top:14px}.sep-stock .rg.c{left:14px;bottom:14px}.sep-stock .rg.d{right:14px;bottom:14px}
.sep-legend{
  position:fixed;left:18px;bottom:64px;z-index:3900;width:430px;max-width:calc(100vw - 36px);background:#1a1714;color:var(--paper);border:3px solid var(--paper);
  box-shadow:8px 8px 0 var(--riso-pink);padding:14px 16px 12px;font-family:var(--type);font-size:12.5px;line-height:1.45;
  animation:adIn .2s steps(4);
}
.sep-legend b{display:block;font-family:var(--cut);font-weight:400;font-size:26px;letter-spacing:.08em;color:var(--riso-yellow);margin-bottom:4px}
.sep-legend em{display:block;font-style:normal;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--riso-acid);margin-top:8px}
.sq{margin:12px 0 10px;display:grid;gap:5px}
.sq-row{display:grid;grid-template-columns:104px repeat(8, 1fr) 26px;gap:4px;align-items:stretch}
.sq-row button{font:inherit;cursor:pointer;border:2px solid var(--paper);background:transparent;color:var(--paper);padding:0;min-height:24px}
.sq-pad{font-family:var(--crt) !important;font-size:17px !important;line-height:1;text-align:left;padding:2px 6px !important;letter-spacing:.03em;white-space:nowrap}
.sq-pad i{display:inline-block;width:11px;height:11px;background:var(--ink);margin-right:6px;vertical-align:-1px;border:1.5px solid var(--paper)}
.sq-row.hit .sq-pad{background:var(--ink);color:#1a1714}
.sq-step.on{background:var(--ink);border-color:var(--ink)}
.sq-step:nth-of-type(4n+2){margin-left:3px}
.sq-step.now{outline:2px solid var(--riso-yellow);outline-offset:1px}
.sq-mute{font-family:var(--cut) !important;font-size:13px !important}
.sq-row.muted .sq-mute{background:var(--riso-pink);border-color:var(--riso-pink);color:#1a1714}
.sq-row.muted .sq-step, .sq-row.muted .sq-pad{opacity:.35}
.sq-bar{display:flex;gap:8px}
.sq-bar button{font-family:var(--cut);font-size:15px;letter-spacing:.08em;cursor:pointer;border:2.5px solid var(--paper);background:var(--paper);color:#1a1714;padding:4px 12px 3px}
.sq-bar .sq-play{background:var(--riso-acid);border-color:var(--riso-acid)}
.sq-bar .sq-exit{margin-left:auto;background:transparent;color:var(--paper)}
.sq-bar button:hover{background:var(--riso-yellow);border-color:var(--riso-yellow);color:#1a1714}
@media (prefers-reduced-motion:reduce){
  body.sep-pre .stage-grid, .sep-layer{transition:none !important}
}

/* ================================================================
   PLAY.JS — close_all.exe, the big line, paper
   ================================================================ */
.pg-btn{margin-right:6px}
.pg{position:fixed;inset:0;z-index:6000;display:none;flex-direction:column;
  background:
    radial-gradient(circle at 1.5px 1.5px, rgba(244,237,224,.13) 1.2px, transparent 1.6px) 0 0/9px 9px,
    rgba(36,27,46,.9);
  font-family:var(--type);color:var(--paper)}
.pg.on{display:flex}
.pg.hot{animation:pgHot .5s steps(2) infinite}
@keyframes pgHot{50%{box-shadow:inset 0 0 0 8px var(--riso-pink)}}
.pg-hud{display:flex;align-items:center;gap:16px;padding:8px 14px;background:#1a1714;border-bottom:3px solid var(--paper);flex-wrap:wrap}
.pg-title{font-family:var(--cut);font-weight:400;font-size:24px;letter-spacing:.08em;color:var(--riso-yellow)}
.pg-stat{font-family:var(--crt);font-size:22px;letter-spacing:.04em}
.pg-stat i, .pg-clock i{font-style:normal;color:var(--riso-acid)}
.pg-meter{position:relative;flex:1 1 160px;height:22px;border:2.5px solid var(--paper);min-width:120px;overflow:hidden}
.pg-meter u{position:absolute;inset:0 auto 0 0;width:0;background:var(--riso-pink);transition:width .15s steps(3)}
.pg-meter em{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;font-family:var(--px);font-size:8px;letter-spacing:.06em;color:var(--paper);text-shadow:1px 1px 0 #1a1714, -1px -1px 0 #1a1714, 1px -1px 0 #1a1714, -1px 1px 0 #1a1714}
.pg-clock{font-family:var(--crt);font-size:28px;min-width:64px;text-align:right}
.pg-quit{font-family:var(--cut);font-size:15px;letter-spacing:.08em;cursor:pointer;border:2.5px solid var(--paper);background:transparent;color:var(--paper);padding:4px 10px 3px}
.pg-quit:hover{background:var(--riso-yellow);border-color:var(--riso-yellow);color:#1a1714}
.pg-arena{position:relative;flex:1;overflow:hidden}
.pg-pop{position:absolute;width:min(250px, 72vw);background:var(--paper);color:#1a1714;border:3px solid #1a1714;
  box-shadow:6px 6px 0 var(--a), 11px 11px 0 var(--b);rotate:var(--r,0deg);animation:pgIn .16s steps(3)}
@keyframes pgIn{from{scale:.3;opacity:0}}
.pg-pop.ran{animation:pgIn .16s steps(3)}
.pg-pop.shake{animation:pgShake .26s steps(4)}
@keyframes pgShake{25%{translate:-7px 0}50%{translate:7px 0}75%{translate:-4px 0}}
.pg-pop.gone{animation:crumple .42s cubic-bezier(.5,0,.8,.4) forwards}
.pg-pop.frozen{filter:grayscale(1) contrast(1.1);opacity:.55}
.pg-bar{display:flex;align-items:center;justify-content:space-between;background:#1a1714;color:var(--paper);padding:3px 4px 3px 8px;font-family:var(--px);font-size:8px;letter-spacing:.05em}
.pg-x{width:26px;height:24px;display:grid;place-items:center;font:400 18px/1 var(--cut);cursor:pointer;background:var(--paper);color:#1a1714;border:2px solid var(--paper);padding:0}
.pg-x:hover{background:var(--riso-pink)}
.pg-body{padding:10px 12px 12px;background:
  radial-gradient(circle at 2px 2px, color-mix(in srgb, var(--a) 55%, transparent) 1.3px, transparent 1.8px) 0 0/7px 7px, var(--paper)}
.pg-body b{display:block;font-family:var(--cut);font-weight:400;font-size:23px;line-height:1.02;letter-spacing:.02em;text-transform:uppercase}
.pg-body p{margin:6px 0 0;font-size:12px;line-height:1.35}
.pg-big{display:block;width:100%;margin-top:9px;font-family:var(--cut);font-size:22px;letter-spacing:.06em;cursor:pointer;border:3px solid #1a1714;background:var(--a);color:#1a1714;padding:7px 6px 5px;box-shadow:3px 3px 0 #1a1714}
.pg-big:active{translate:2px 2px;box-shadow:1px 1px 0 #1a1714}
.pg-tiny{display:block;margin:7px 0 0 auto;font-family:var(--type);font-size:9.5px;cursor:pointer;border:0;background:none;color:#6b6258;text-decoration:underline;padding:2px}
.pg-fuse{height:14px;border:2.5px solid #1a1714;margin-top:8px;background:var(--paper)}
.pg-fuse u{display:block;height:100%;background:var(--riso-orange);animation:pgFuse 4s linear forwards}
@keyframes pgFuse{from{width:100%}to{width:0}}
.pg-pop.k-mini{width:min(170px, 56vw)}
.pg-pop.k-mini .pg-body b{font-size:17px}
.pg-pop.k-union{width:min(280px, 80vw);z-index:5;--a:#9be15a;--b:#ffd23f;border-color:var(--riso-acid);animation:pgIn .16s steps(3), pgUnion .7s steps(2) infinite}
.pg-pop.k-union .pg-body{background:#1a1714;color:var(--paper)}
.pg-pop.k-union .pg-body b{color:var(--riso-acid);font-size:28px}
.pg-pop.k-union .pg-big{background:var(--riso-acid);border-color:var(--riso-acid)}
@keyframes pgUnion{50%{box-shadow:6px 6px 0 var(--b), 11px 11px 0 var(--a)}}
.pg-flash{position:absolute;inset:0;display:grid;place-content:center;text-align:center;pointer-events:none;z-index:8;animation:pgFlash 1.5s steps(6) forwards}
.pg-flash b{font-family:var(--cut);font-weight:400;font-size:clamp(44px, 11vw, 170px);line-height:.9;color:var(--riso-acid);text-shadow:5px 5px 0 var(--riso-pink), 10px 10px 0 var(--riso-blue)}
.pg-flash span{font-family:var(--crt);font-size:30px;color:var(--paper)}
@keyframes pgFlash{0%{scale:.6;opacity:0}15%{scale:1;opacity:1}80%{opacity:1}100%{opacity:0}}
.pg-end{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:10;width:min(520px, calc(100vw - 28px));max-height:calc(100% - 20px);overflow:auto;
  background:#1a1714;color:var(--paper);border:4px solid var(--paper);box-shadow:9px 9px 0 var(--riso-pink), 17px 17px 0 var(--riso-blue);padding:20px 22px 18px;animation:pgIn .2s steps(4)}
.pg-end > b{display:block;font-family:var(--cut);font-weight:400;font-size:clamp(34px, 6vw, 54px);line-height:.95;letter-spacing:.03em;color:var(--riso-yellow)}
.pg-end.lost > b{color:var(--riso-pink)}
.pg-end.won > b{color:var(--riso-acid)}
.pg-end p{margin:10px 0 0;font-size:14px;line-height:1.5}
.pg-end ul{margin:12px 0 0;padding-left:18px;font-size:13px;line-height:1.6;color:var(--riso-acid)}
.pg-end table{width:100%;margin-top:14px;border-collapse:collapse;font-family:var(--crt);font-size:21px}
.pg-end td{padding:2px 0;border-bottom:1.5px dashed rgba(244,237,224,.35)}
.pg-end td:last-child{text-align:right;color:var(--riso-acid)}
.pg-end tr.tot td{border-bottom:0;border-top:3px solid var(--paper);color:var(--riso-yellow);padding-top:5px}
.pg-end em{display:block;margin-top:12px;font-style:normal;font-size:12.5px;color:var(--riso-pink)}
.pg-btns{display:flex;gap:10px;flex-wrap:wrap}
.pg-go, .pg-back{margin-top:16px;font-family:var(--cut);font-size:19px;letter-spacing:.08em;cursor:pointer;border:3px solid var(--riso-acid);background:var(--riso-acid);color:#1a1714;padding:7px 16px 5px}
.pg-back{background:transparent;border-color:var(--paper);color:var(--paper)}
.pg-go:hover, .pg-back:hover{background:var(--riso-yellow);border-color:var(--riso-yellow);color:#1a1714}
.pg button:focus-visible{outline:3px solid var(--riso-yellow);outline-offset:2px}

@keyframes crumple{
  0%{clip-path:polygon(0 0,50% 0,100% 0,100% 50%,100% 100%,50% 100%,0 100%,0 50%);scale:1;opacity:1}
  35%{clip-path:polygon(9% 12%,48% 3%,90% 9%,96% 52%,88% 90%,52% 97%,12% 88%,4% 47%);scale:.62;rotate:7deg;opacity:1;filter:contrast(1.25) brightness(.95)}
  65%{clip-path:polygon(24% 28%,50% 18%,76% 26%,82% 50%,74% 76%,50% 82%,28% 72%,18% 50%);scale:.3;rotate:-22deg;opacity:1;translate:0 0;filter:contrast(1.5) brightness(.85)}
  100%{clip-path:polygon(34% 36%,50% 30%,66% 34%,70% 50%,66% 66%,50% 70%,36% 64%,30% 50%);scale:.12;rotate:120deg;translate:0 70vh;opacity:0;filter:contrast(1.6) brightness(.8)}
}
.stage-grid > .win.crumpling{animation:crumple .44s cubic-bezier(.5,0,.8,.4) forwards !important;pointer-events:none}

/* ---- the big line ---- */
.gt{position:relative;z-index:1;background:var(--paper);color:#1a1714;padding:clamp(26px, 5vw, 80px) clamp(14px, 3vw, 54px) 96px;overflow:hidden;border-top:4px solid #1a1714;
  --slip:0;--prog:.5}
.gt::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:radial-gradient(circle at 2px 2px, rgba(26,23,20,.16) 1.2px, transparent 1.7px) 0 0/8px 8px}
.gt-line{position:relative;line-height:.9;white-space:nowrap;translate:calc((var(--prog) - .5) * var(--dir,1) * 5vw) 0}
.gt-line[data-i="1"]{--dir:-1;text-align:center}
.gt-line[data-i="0"] .gt-fit{--p1:var(--riso-pink);--p2:var(--riso-blue)}
.gt-line[data-i="1"] .gt-fit{--p1:var(--riso-orange);--p2:var(--riso-acid)}
.gt-line[data-i="2"] .gt-fit{--p1:var(--riso-purple);--p2:var(--riso-yellow)}
.gt-fit{display:inline-block;font-family:var(--cut);font-weight:400;font-size:200px;letter-spacing:-.005em;text-transform:uppercase}
.gt-fit i{position:relative;display:inline-block;font-style:normal;color:#1a1714;transition:translate .18s cubic-bezier(.2,1.6,.4,1), rotate .18s}
.gt-fit i.sp{width:.24em}
.gt-fit i::before, .gt-fit i::after{content:attr(data-c);position:absolute;left:0;top:0;z-index:-1;mix-blend-mode:multiply;pointer-events:none}
.gt-fit i::before{color:var(--p1);translate:calc(.022em + var(--slip) * .16em) calc(.02em + var(--slip) * .05em);animation:gtA 5.3s ease-in-out infinite alternate}
.gt-fit i::after{color:var(--p2);translate:calc(-.02em - var(--slip) * .12em) calc(.034em - var(--slip) * .09em);animation:gtB 7.1s ease-in-out infinite alternate}
@keyframes gtA{to{transform:translate(.018em,-.012em)}}
@keyframes gtB{to{transform:translate(-.016em,.014em)}}
.gt-fit i:hover{translate:0 -.06em;rotate:-3deg;color:var(--p1)}
.gt-fit i:hover::before{color:#1a1714}
.gt-cap{position:relative;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:clamp(14px, 2vw, 30px) 0 0;padding-top:10px;border-top:3px solid #1a1714;font-family:var(--type);font-size:13px;letter-spacing:.06em;text-transform:uppercase}
body.sep-pre .gt{visibility:hidden}

@media (max-width:1100px){ .gt{padding-bottom:84px} .gt-cap{font-size:11px} }
@media (prefers-reduced-motion:reduce){
  .pg-pop, .pg-pop.gone, .pg-end, .pg-flash, .pg.hot, .stage-grid > .win.crumpling, .gt-fit i::before, .gt-fit i::after{animation:none !important}
  .pg-pop.gone{display:none}
}
@media print{ .pg{display:none !important} }

/* ================================================================
   MORE.JS — dial-up, proof, score
   ================================================================ */
.du{position:fixed;left:50%;bottom:64px;translate:-50% 0;z-index:3950;display:flex;align-items:center;gap:12px;background:#1a1714;color:var(--paper);border:3px solid var(--paper);
  box-shadow:6px 6px 0 var(--riso-blue);padding:7px 12px;font-family:var(--crt);font-size:20px;letter-spacing:.04em;white-space:nowrap;max-width:calc(100vw - 20px);overflow:hidden;transition:opacity .4s, translate .4s}
.du b{font-family:var(--px);font-weight:400;font-size:9px;color:var(--riso-yellow);min-width:86px}
.du-msg{min-width:210px;color:var(--riso-acid)}
.du-blocks{display:flex;gap:2px}
.du-blocks u{width:7px;height:16px;border:1.5px solid var(--paper);opacity:.45}
.du-blocks u.on{background:var(--riso-pink);border-color:var(--riso-pink);opacity:1}
.du-pct{font-style:normal;min-width:44px;text-align:right}
.du.ok{box-shadow:6px 6px 0 var(--riso-acid)}
.du.ok b{color:var(--riso-acid)}
.du.bye{opacity:0;translate:-50% 20px}
@media (max-width:700px){ .du-blocks{display:none} .du-msg{min-width:0} }

.cw-glass{position:fixed;inset:0;z-index:9000;pointer-events:none;overflow:hidden;
  background:
    repeating-linear-gradient(180deg, rgba(8,6,12,.34) 0 2px, transparent 2px 4px),
    radial-gradient(ellipse 120% 105% at 50% 50%, transparent 52%, rgba(8,6,12,.6) 100%)}
.cw-hum{position:absolute;left:0;right:0;top:0;height:30vh;background:linear-gradient(180deg, transparent, rgba(8,6,12,.62) 45%, rgba(8,6,12,.62) 55%, transparent);will-change:transform}
.cw-flash{position:absolute;inset:0;background:#eaf2ff;mix-blend-mode:screen;opacity:0}
body.crt-warm .stage{will-change:filter, transform}
/* the old signal-lock is retired: if anything still sets its class, it does nothing */
body.crt-sync .stage{filter:none !important;animation:none !important}
body.crt-sync .stage::after{display:none !important}

.gs-btn{margin-right:6px}
.gs{position:fixed;left:18px;bottom:64px;z-index:3890;width:280px;background:#1a1714;color:var(--paper);border:3px solid var(--paper);box-shadow:7px 7px 0 var(--riso-purple);padding:9px 11px 9px;font-family:var(--type);font-size:11px;line-height:1.4;animation:adIn .2s steps(4)}
.gs-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.gs-h b{font-family:var(--cut);font-weight:400;font-size:20px;letter-spacing:.07em;color:var(--riso-yellow)}
.gs-x{width:24px;height:22px;font:400 16px/1 var(--cut);cursor:pointer;background:var(--paper);color:#1a1714;border:0;padding:0}
.gs-x:hover{background:var(--riso-pink)}
.gs canvas{display:block;width:100%;height:64px;border:2px solid var(--paper);image-rendering:pixelated;margin-bottom:6px}
.gs span{display:block;font-family:var(--crt);font-size:16px;letter-spacing:.03em;text-transform:uppercase}
.gs em{display:block;font-style:normal;font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--riso-acid);margin-top:2px}
body.sep-pre .gs, body.pg-on .gs{display:none}
@media (max-width:1100px){ .topbar .sep-btn, .topbar .pg-btn, .topbar .gs-btn{display:none} .gs{left:8px;bottom:58px;width:min(280px, calc(100vw - 16px))} }
@media print{ .du, .gs{display:none !important} }


/* ================================================================
   LONG-TERM
   ================================================================ */
/* the palette is the design: stop browsers auto-darkening or re-tinting it */
:root{color-scheme:only light}
/* high-contrast / forced-colours mode: drop the decorative layers and let the system colours carry the text */
@media (forced-colors: active){
  .ink-fluid, .bg-scene, .cw-glass, .ad-rails, .gs canvas, .sep-layers, .pg{forced-color-adjust:none}
  .ink-fluid, .bg-scene, .cw-glass{display:none !important}
  .gt-fit i::before, .gt-fit i::after{display:none}
  .stage-grid > .win{border:2px solid CanvasText;box-shadow:none}
}

/* the desktop stays dark behind the boot screen until the tube starts to warm, so it never flashes up first */
html.crt-cold body > *:not(#bootsys):not(#crtPowerOn):not(script):not(.cw-glass):not(.cw-shut){filter:brightness(0) !important}
/* boot text does not fade to black: it collapses to a scan line, the way a tube changes mode, and the desktop opens from that line */
#bootsys.bye{opacity:1 !important;transition:none !important;background:#000;transform-origin:50% 50%;animation:cwCollapse .24s cubic-bezier(.7,0,.9,.4) forwards}
@keyframes cwCollapse{
  0%{transform:scaleY(1);filter:brightness(1)}
  70%{transform:scaleY(.012);filter:brightness(6) saturate(0)}
  100%{transform:scaleY(.004);filter:brightness(9) saturate(0)}
}
#bootsys.bye::before{content:"";position:absolute;inset:0;background:#eaf2ff;opacity:0;animation:cwLine .24s linear forwards}
@keyframes cwLine{60%{opacity:0}100%{opacity:1}}
.cw-shut{position:fixed;inset:0;z-index:9100;pointer-events:none}
.cw-shut .t, .cw-shut .b{position:absolute;left:0;right:0;height:50.5vh;background:#000}
.cw-shut .t{top:0}.cw-shut .b{bottom:0}
.cw-shut .l{position:absolute;left:0;right:0;top:calc(50% - 2px);height:4px;background:#eaf2ff;box-shadow:0 0 18px 4px rgba(234,242,255,.8)}
@media (prefers-reduced-motion:reduce){ #bootsys.bye{animation:none} }
html.crt-cold, html.crt-cold body{background:#000 !important}

/* dial-up: the plate that covers a window until its "data" arrives */
.du-plate{position:absolute;left:0;right:0;bottom:0;height:100%;z-index:9999;pointer-events:none;overflow:hidden;
  background:
    repeating-linear-gradient(180deg, rgba(26,23,20,.07) 0 2px, transparent 2px 4px),
    radial-gradient(circle at 2px 2px, rgba(26,23,20,.16) 1.2px, transparent 1.7px) 0 0/8px 8px,
    var(--paper);
  border-top:3px solid var(--riso-pink)}
.du-plate b{position:absolute;left:8px;top:6px;font-family:var(--px);font-weight:400;font-size:8px;letter-spacing:.08em;color:#1a1714;opacity:.7;white-space:nowrap}
.du-plate b::after{content:" …"}
@media print{ .du-plate{display:none} }

/* ================================================================
   BUDGET — less work for the same picture
   ================================================================ */
/* off screen: stop animating (v2.js toggles .jdm-off). The moving skyline is exempt: it is always on screen. */
.jdm-off, .jdm-off *, .jdm-off::before, .jdm-off::after, .jdm-off *::before, .jdm-off *::after{animation-play-state:paused !important}
/* shader ads are drawn small and scaled up; keep the dots crisp instead of blurry */
canvas.ad-gl{image-rendering:pixelated}
/* cursor depth is written about eleven times a second; these ease between the writes so it still glides */
.wordmark .scrap, .subbar .tag, .has-gl > canvas.ad-gl, .buy-body .text, .buy-body .buy-burst, .buy-body .rider, .warn-body .big, .warn-body .big2,
.click-body .bang, .click-body .fineline, .ad-rail .ad .copy, .ad-rail .ad .art, .hero-art svg, .bg-scene{transition:translate .14s linear}