@charset "utf-8";
/* thegoodstoretest.felineunion.org
 *
 * Supermarket signage: hard offset shadows, no blur, heavy ink rules, a
 * shelf-label yellow that carries the accents. Contrast comes from surfaces
 * and edges — opaque sheets over full-strength artwork — never from nudging
 * two near-identical tones apart and hoping.
 *
 * Built and checked at 390x844. Anything that needs a desktop to be legible
 * is a bug here, not a nicety.
 */

@font-face{font-family:"Slab";src:url("/assets/fonts/lato-black.woff2")format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:"SSP";src:url("/assets/fonts/ssp-400.woff2")format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"SSP";src:url("/assets/fonts/ssp-600.woff2")format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"SSP";src:url("/assets/fonts/ssp-700.woff2")format("woff2");font-weight:700;font-display:swap}

:root{
  --paper:#f4efe6; --paper2:#eae1cf; --sheet:#fffdf8;
  --ink:#141210; --ink2:#57503f; --ink3:#8a8071;
  --green:#0d5c3f; --green2:#09422d; --greenpale:#cfe3d5;
  --red:#c8321f; --redpale:#f6ddd6;
  --yellow:#ffd21e; --yellowpale:#f8ecc0;
  --blue:#2a3a8c;
  --line:#141210;
  --shadow:5px 5px 0 rgba(20,18,16,.18);
  --shadow-sm:3px 3px 0 rgba(20,18,16,.20);
  --shadow-hard:5px 5px 0 var(--ink);
  --wrap:720px;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 17px/1.55 "SSP",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* The house reset. It also hides horizontal blowouts, so every grid and
     flex ancestor below sets min-width:0 rather than relying on this. */
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom);
}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--green);text-underline-offset:3px;text-decoration-thickness:2px}
a:hover{color:var(--red)}
h1,h2,h3{font-family:"Slab","SSP",sans-serif;font-weight:900;letter-spacing:-.03em;line-height:1.02;margin:0}
p{margin:0 0 1em}
ol,ul{margin:0;padding:0;list-style:none}
b,strong{font-weight:700}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}

.skip{position:absolute;left:-9999px;top:0;background:var(--yellow);color:var(--ink);
  padding:12px 16px;font-weight:700;z-index:99}
.skip:focus{left:0}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 18px;min-width:0}
.wrap--narrow{max-width:600px}

/* ---------------------------------------------------------- primitives -- */
.sheet{
  background:var(--sheet);border:3px solid var(--line);box-shadow:var(--shadow);
  padding:18px 17px;position:relative;
}
.sheet::before{ /* the lit top edge: a physical sheet catching light */
  content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);
}
.sheet p:last-child{margin-bottom:0}

.kicker,.act-no{
  font:600 12px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink2);margin:0 0 14px;
}
.act-no{color:var(--red)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:700 16px/1 "SSP",sans-serif;text-decoration:none;cursor:pointer;
  padding:15px 20px;border:3px solid var(--line);border-radius:2px;
  box-shadow:var(--shadow-sm);transition:transform .12s,box-shadow .12s;
  min-height:52px;text-align:center;
}
.btn:active{transform:translate(3px,3px);box-shadow:0 0 0 rgba(0,0,0,0)}
.btn--go{background:var(--yellow);color:var(--ink)}
.btn--go:hover{background:#ffdd4e;color:var(--ink)}
.btn--ghost{background:var(--sheet);color:var(--ink)}
.btn--ghost:hover{background:var(--yellowpale);color:var(--ink)}

.chip{
  flex:0 0 auto;font:600 14px/1 "SSP",sans-serif;cursor:pointer;
  padding:11px 14px;border:2.5px solid var(--line);border-radius:999px;
  background:var(--sheet);color:var(--ink);white-space:nowrap;min-height:44px;
  box-shadow:2px 2px 0 rgba(20,18,16,.18);transition:transform .1s,box-shadow .1s;
}
.chip:active{transform:translate(2px,2px);box-shadow:none}
.chip[aria-pressed="true"],.chip.is-on{background:var(--green);color:#fff;border-color:var(--line)}
.chip--clear{background:var(--paper2)}
.chip--sm{font-size:13px;padding:9px 12px;min-height:40px}

/* ------------------------------------------------------------- reveal -- */
.reveal{opacity:0;transform:translateY(14px);
  transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}
.reveal--flat{transform:none}
/* No IntersectionObserver, or no JS at all: show everything. */
.no-js .reveal,.no-io .reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{transition:none}}

.no-js .stage,.no-js .scorebar,.no-js .survive,.no-js .presets,
.no-js .coins,.no-js .receipt,.no-js .player,.no-js .tr{display:none}
.nojs-note{display:none}
.no-js .nojs-note{display:block;font-size:15px;color:var(--ink2);margin:0}

/* ------------------------------------------------------------- header -- */
.hd{background:var(--green);color:#f6f2e8;padding:26px 0 30px;border-bottom:4px solid var(--line)}
.hd__brand{display:flex;align-items:center;gap:9px;font:600 12px/1 var(--mono);
  letter-spacing:.16em;text-transform:uppercase;color:#b6d3c3;margin:0 0 22px}
.hd__brand .mark{width:30px;height:30px;flex:0 0 auto}
.hd .kicker{color:var(--yellow)}
.hd__h1{font-size:clamp(46px,14.5vw,92px);color:var(--yellow);
  text-shadow:5px 5px 0 rgba(9,42,29,.85);margin:0 0 18px}
.hd__deck{font-family:"Slab",sans-serif;font-weight:900;font-size:clamp(19px,5.4vw,26px);
  line-height:1.14;letter-spacing:-.02em;color:#fff;margin:0 0 20px}
.hd__sheet{color:var(--ink);font-size:16.5px}
.hd__sheet em{font-style:normal;background:var(--yellowpale);padding:0 3px}
.hd__qs{counter-reset:q;margin:22px 0 0;display:grid;gap:9px;min-width:0}
.hd__qs li{counter-increment:q;position:relative;padding-left:38px;min-width:0;
  font-weight:600;font-size:16px;color:#e4eee8}
.hd__qs li::before{content:counter(q);position:absolute;left:0;top:-1px;
  width:27px;height:27px;display:grid;place-items:center;border-radius:50%;
  background:var(--yellow);color:var(--ink);font:700 14px/1 var(--mono)}
.hd__btns{display:flex;flex-wrap:wrap;gap:11px;margin-top:26px;min-width:0}
.hd__btns .btn{flex:1 1 auto;min-width:0}

.hero{margin:0;background:var(--paper2);border-bottom:4px solid var(--line)}
.hero .aisle{width:100%;height:auto;display:block}
.hero figcaption{font:600 13px/1.45 "SSP",sans-serif;color:var(--ink2);
  padding:12px 18px 14px;max-width:var(--wrap);margin:0 auto}

/* --------------------------------------------------------------- acts -- */
.act{padding:44px 0 48px;border-bottom:4px solid var(--line)}
.act--test{background:var(--paper2)}
.act--stress{background:var(--ink);color:#f3ede1}
.act--surplus{background:var(--yellowpale)}
.act--listen{background:var(--green);color:#eef4f0}
.act--unknown{background:var(--paper2)}
.act--share{background:var(--paper)}
.act--src{background:var(--sheet)}
.act__h2{font-size:clamp(29px,8.2vw,46px);margin:0 0 14px}
.act__lede{font-size:17px;color:var(--ink2);margin:0 0 26px;max-width:56ch}
.act--stress .act__lede{color:#c2b8a6}
.act--stress .act-no{color:var(--yellow)}
.act--listen .act__lede{color:#bcd6c7}
.act--listen .act-no{color:var(--yellow)}
.act--listen a{color:var(--yellow)}

/* ------------------------------------------------------ act one: rows -- */
.rows{display:grid;gap:14px;min-width:0}
.row{border:3px solid var(--line);background:var(--sheet);box-shadow:var(--shadow);min-width:0}
.row__btn{all:unset;display:grid;grid-template-columns:auto 1fr auto;gap:4px 12px;
  width:100%;box-sizing:border-box;padding:15px 16px;cursor:pointer;align-items:center}
.row__btn>*{min-width:0}
.row__n{grid-row:1/3;font:700 15px/1 var(--mono);color:#fff;background:var(--green);
  width:34px;height:34px;display:grid;place-items:center;border-radius:2px}
.row__label{font-family:"Slab",sans-serif;font-weight:900;font-size:20px;letter-spacing:-.02em}
.row__q{grid-column:2;font-size:14.5px;color:var(--ink2);line-height:1.35}
.row__chev{grid-row:1/3;width:15px;height:15px;border-right:3px solid var(--ink);
  border-bottom:3px solid var(--ink);transform:rotate(45deg) translate(-3px,-3px);
  transition:transform .2s}
.row.is-open .row__chev{transform:rotate(225deg) translate(-2px,-2px)}
.row__body{display:none;border-top:3px solid var(--line);padding:14px 16px 16px}
.row.is-open .row__body{display:block}
.no-js .row__body{display:block}
.row__cells{display:grid;gap:12px;min-width:0}
.cell{min-width:0;padding:13px 14px;border:2.5px solid var(--line);border-radius:2px}
.cell--wf{background:var(--greenpale)}
.cell--pdl{background:var(--redpale)}
.cell__who{font:600 11px/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink2);margin:0 0 7px}
.cell__head{font-family:"Slab",sans-serif;font-weight:900;font-size:18px;line-height:1.1;
  letter-spacing:-.02em;margin:0 0 9px}
.cell__rep{display:inline-block;vertical-align:2px;margin-left:7px;
  font:600 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  background:var(--ink);color:var(--yellow);padding:4px 6px;border-radius:2px}
.cell__note{font-size:14.5px;line-height:1.5;color:#2c2820;margin:0}
.row__beat{margin:13px 0 0;font-family:"Slab",sans-serif;font-weight:900;font-size:17px;
  line-height:1.2;letter-spacing:-.02em;color:var(--red)}

/* ------------------------------------------------------ act two: test -- */
.presets{margin:0 0 22px;min-width:0}
.presets__hd{font:600 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink2);margin:0 0 10px}
.presets__row{display:flex;gap:8px;overflow-x:auto;padding:3px 3px 10px;min-width:0;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.presets__row::-webkit-scrollbar{display:none}
.presets__basis{font-size:14.5px;line-height:1.5;color:var(--ink2);margin:0;
  border-left:4px solid var(--yellow);padding-left:12px;min-height:3em}
.presets__basis b{display:block;color:var(--ink);font-family:"Slab",sans-serif;
  font-weight:900;font-size:16px;letter-spacing:-.02em;margin-bottom:4px}
.presets__basis i{display:block;font-style:normal;margin-top:7px;color:var(--red);font-size:13.5px}

.stage{margin:0 0 30px;min-width:0}
.stage__in{display:grid;gap:14px;min-width:0}
.map{min-width:0}
.map__svg{width:100%;max-width:400px;margin:0 auto;display:block;
  border:3px solid var(--line);background:var(--sheet);box-shadow:var(--shadow)}
.map__frame{fill:none;stroke:#141210;stroke-width:2.5}
.map__grid{stroke:#141210;stroke-width:1.6;stroke-dasharray:4 4;opacity:.55}
.map__quad{font:700 10.5px/1 "SSP",sans-serif;fill:#3a352a;letter-spacing:-.01em}
.map__ax{font:600 10.5px/1 var(--mono);fill:#57503f;letter-spacing:.09em;text-transform:uppercase}
.map__exdot{fill:var(--sheet);stroke:#141210;stroke-width:2.4}
.map__exn{font:700 11px/1 var(--mono);fill:#141210}
.map__ex.is-live .map__exdot{fill:var(--yellow)}
.map__halo{fill:rgba(200,50,31,.22)}
.map__dot{fill:var(--red);stroke:#141210;stroke-width:2.6}
.map__ghost{fill:none;stroke:#141210;stroke-width:2.2;stroke-dasharray:3 3}
.map__drift{stroke:#141210;stroke-width:2.2;stroke-dasharray:5 4}
.map__you,.map__ghost,.map__drift{transition:opacity .25s}
.map__you{transition:transform .45s cubic-bezier(.2,.8,.3,1),opacity .25s}
@media (prefers-reduced-motion:reduce){.map__you{transition:opacity .2s}}
.map__legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin:11px 0 0;
  font:600 12.5px/1.2 "SSP",sans-serif;color:var(--ink2);min-width:0}
.map__legend li{display:flex;align-items:center;gap:6px;min-width:0}
.lg__n{width:19px;height:19px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;
  border:2px solid var(--line);background:var(--sheet);font:700 10.5px/1 var(--mono)}

.readout{display:grid;grid-template-columns:1fr 1fr;gap:11px;min-width:0}
.meter{min-width:0;background:var(--sheet);border:3px solid var(--line);padding:11px 12px;
  box-shadow:var(--shadow-sm)}
.meter__k{font:600 10.5px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink2);margin:0 0 6px}
.meter__v{display:flex;align-items:baseline;gap:5px;margin:0 0 8px;min-width:0}
.meter__v b{font-family:"Slab",sans-serif;font-weight:900;font-size:30px;line-height:1;
  letter-spacing:-.04em}
.meter__v span{font:600 12px/1 var(--mono);color:var(--ink3)}
.meter__bar{height:10px;background:var(--paper2);border:2px solid var(--line);overflow:hidden}
.meter__bar i{display:block;height:100%;width:0;transition:width .4s cubic-bezier(.2,.8,.3,1)}
.meter--terms .meter__bar i{background:var(--yellow)}
.meter--rights .meter__bar i{background:var(--green)}
.meter--terms .meter__v b{color:#8a6a00}
.meter--rights .meter__v b{color:var(--green)}
.meter.is-cut{border-color:var(--red)}
.meter.is-cut .meter__v b{color:var(--red)}

.stage__verdict{margin:15px 0 4px;font-family:"Slab",sans-serif;font-weight:900;
  font-size:19px;line-height:1.16;letter-spacing:-.025em}
.stage__verdict b{display:block;color:var(--red);font-size:23px;margin-bottom:3px}
.stage__count{font:600 12px/1 var(--mono);letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink2);margin:0}

.deck{margin:0 0 30px;min-width:0}
.deck__h3{display:flex;align-items:center;gap:11px;font-size:23px;margin:0 0 8px;min-width:0}
.deck__ltr{flex:0 0 auto;width:34px;height:34px;display:grid;place-items:center;
  background:var(--ink);color:var(--yellow);font:900 18px/1 "Slab",sans-serif;border-radius:2px}
.deck__note{font-size:14.5px;color:var(--ink2);margin:0 0 18px}
.qs{display:grid;gap:14px;min-width:0}
.q{background:var(--sheet);border:3px solid var(--line);box-shadow:var(--shadow);
  padding:15px 15px 13px;min-width:0}
.q.is-set{border-color:var(--green)}
.q__hd{display:flex;align-items:center;gap:9px;margin-bottom:7px;min-width:0}
.q__ic{flex:0 0 auto;width:34px;height:34px;display:grid;place-items:center;
  border:2.5px solid var(--line);border-radius:50%;background:var(--yellowpale);color:var(--ink)}
.q__ic .ic{width:19px;height:19px}
.q__label{flex:1 1 auto;min-width:0;font-family:"Slab",sans-serif;font-weight:900;
  font-size:19px;letter-spacing:-.02em}
.q__lv{flex:0 0 auto;font:700 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink3);background:var(--paper2);border:2px solid var(--line);padding:6px 8px;
  border-radius:999px;white-space:nowrap}
.q.is-set .q__lv{background:var(--green);color:#fff}
.q__q{font-size:15.5px;line-height:1.45;color:var(--ink2);margin:0 0 12px}
.opts{display:grid;gap:8px;min-width:0}
.opt{all:unset;display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:center;
  box-sizing:border-box;width:100%;min-width:0;min-height:52px;cursor:pointer;
  padding:11px 13px;border:2.5px solid var(--line);border-radius:2px;background:var(--paper);
  font-size:15px;line-height:1.35;transition:background .12s,transform .1s}
.opt>*{min-width:0}
.opt:active{transform:translate(2px,2px)}
.opt:hover{background:var(--yellowpale)}
.opt[aria-checked="true"]{background:var(--green);color:#fff;border-color:var(--line);
  box-shadow:var(--shadow-sm)}
.opt[aria-checked="true"] .rungs rect{stroke:#fff}
.opt__rung{display:block;width:38px;flex:0 0 auto}
.rungs{width:38px;height:auto;display:block}
.rungs rect{transition:fill .15s}

.quads{margin:8px 0 0;min-width:0}
.quads__h3{font-size:21px;margin:0 0 14px}
.quads__list{display:grid;gap:11px;min-width:0}
.quad{min-width:0;padding:14px 15px;border:3px solid var(--line);box-shadow:var(--shadow-sm);
  transition:transform .15s}
.quad--extraction{background:#e4dccb}
.quad--paternalism{background:var(--yellowpale)}
.quad--sovereign{background:#dfe4e6}
.quad--governed{background:var(--greenpale)}
.quad.is-live{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink);border-width:3px}
.quad__n{font-family:"Slab",sans-serif;font-weight:900;font-size:19px;letter-spacing:-.025em;
  margin:0 0 5px}
.quad.is-live .quad__n::after{content:"you are here";margin-left:9px;vertical-align:2px;
  font:600 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  background:var(--red);color:#fff;padding:4px 6px;border-radius:2px}
.quad__line{font-weight:600;font-size:15px;margin:0 0 7px}
.quad__body{font-size:14.5px;line-height:1.5;color:#3a352a;margin:0}

/* --------------------------------------------------- act three: shocks -- */
.act--stress .sheet{background:#221f1a;border-color:#4a4438;color:#efe8db}
.shocks__row{display:flex;gap:8px;overflow-x:auto;padding:3px 3px 12px;min-width:0;
  scrollbar-width:none}
.shocks__row::-webkit-scrollbar{display:none}
.act--stress .chip{background:#2b2721;color:#efe8db;border-color:#efe8db;
  box-shadow:2px 2px 0 rgba(255,255,255,.12)}
.act--stress .chip[aria-pressed="true"]{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
.shocks__rule{font-size:14.5px;line-height:1.5;color:#c2b8a6;margin:0 0 24px;
  border-left:4px solid var(--yellow);padding-left:12px}
.shocks__rule b{color:var(--yellow);display:block;font-family:"Slab",sans-serif;
  font-weight:900;font-size:16px;margin-bottom:4px;letter-spacing:-.02em}

.survive{min-width:0}
.survive__head{font-family:"Slab",sans-serif;font-weight:900;font-size:clamp(21px,6vw,30px);
  line-height:1.12;letter-spacing:-.03em;margin:0 0 16px;color:#fff}
.survive__head b{color:var(--yellow)}
.survive__list{display:grid;gap:9px;margin:0 0 16px;min-width:0}
.sv{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;min-width:0;
  padding:11px 13px;border:2.5px solid #4a4438;background:#221f1a;border-radius:2px}
.sv.is-lost{border-color:var(--red)}
.sv.is-held{border-color:var(--green)}
.sv__l{font-weight:700;font-size:16px;min-width:0}
.sv__why{grid-column:1;font-size:13.5px;color:#a89e8c;min-width:0}
.sv__d{grid-row:1/3;display:flex;align-items:center;gap:6px;font:700 13px/1 var(--mono);
  white-space:nowrap}
.sv__d .rungs{width:30px}
.sv__d .rungs rect{stroke:#efe8db}
.sv.is-lost .sv__d{color:#ff8f7a}
.sv.is-held .sv__d{color:#8fd6b0}
.survive__foot{font-size:15px;color:#c2b8a6;margin:0}
.stress__empty{font-size:15.5px;color:#c2b8a6;margin:0;border-left:4px solid #4a4438;padding-left:12px}

/* -------------------------------------------------- act four: surplus -- */
.coins{margin:0 0 22px;min-width:0}
.coins__left{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px;
  font:600 13px/1 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--ink2);
  min-width:0}
.coins__left b{font-family:"Slab",sans-serif;font-weight:900;font-size:30px;line-height:1;
  letter-spacing:-.04em;color:var(--red);text-transform:none}
.coins__reset{all:unset;cursor:pointer;margin-left:auto;font:600 12px/1 var(--mono);
  letter-spacing:.11em;text-transform:uppercase;border-bottom:2px solid var(--ink);
  padding-bottom:2px;min-height:44px;display:inline-flex;align-items:center}
.buckets{display:grid;gap:10px;min-width:0}
.bk{min-width:0;border:3px solid var(--line);background:var(--sheet);box-shadow:var(--shadow-sm)}
.bk__btn{all:unset;display:grid;grid-template-columns:auto 1fr auto;gap:11px;align-items:center;
  box-sizing:border-box;width:100%;min-width:0;min-height:56px;cursor:pointer;padding:12px 14px}
.bk__btn>*{min-width:0}
.bk__ic{width:34px;height:34px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;
  border:2.5px solid var(--line);background:var(--yellow);color:var(--ink)}
.bk__ic .ic{width:19px;height:19px}
.bk__label{font-weight:700;font-size:16px;line-height:1.25;min-width:0}
.bk__n{font-family:"Slab",sans-serif;font-weight:900;font-size:24px;line-height:1;
  letter-spacing:-.03em;color:var(--ink3);min-width:1.6ch;text-align:right}
.bk.has-coins .bk__n{color:var(--red)}
.bk__coins{display:flex;flex-wrap:wrap;gap:4px;padding:0 14px;min-width:0}
.bk.has-coins .bk__coins{padding:0 14px 11px}
.bk__coins i{width:15px;height:15px;border-radius:50%;background:var(--yellow);
  border:2px solid var(--line);display:block}
.bk__less{all:unset;display:none;cursor:pointer;padding:9px 14px 12px;
  font:600 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--red);
  min-height:38px;box-sizing:border-box}
.bk.has-coins .bk__less{display:block}
.bk.is-full .bk__btn{opacity:.55}

.receipt{font-family:"SSP",sans-serif}
.receipt__hd{font:600 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink2);margin:0 0 12px;padding-bottom:10px;border-bottom:2.5px dashed var(--ink)}
.receipt__rows{display:grid;gap:11px;min-width:0}
.receipt__rows li{display:grid;grid-template-columns:auto 1fr;gap:3px 11px;min-width:0}
.rc__amt{grid-row:1/3;font:700 15px/1 var(--mono);background:var(--ink);color:var(--yellow);
  padding:7px 8px;border-radius:2px;align-self:start}
.rc__l{font-weight:700;font-size:15.5px;min-width:0}
.rc__n{font-size:14px;line-height:1.45;color:var(--ink2);min-width:0}
.receipt[data-state="empty"] .receipt__rows{display:none}
.receipt:not([data-state="empty"]) .receipt__empty{display:none}
.receipt__empty{font-size:15px;color:var(--ink2);margin:0}

/* ------------------------------------------------- act five: narration -- */
.cast{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:0 0 20px;min-width:0}
.cast__v{min-width:0;background:#0a4a33;border:2.5px solid #16704e;padding:11px 12px;border-radius:2px}
.cast__v.is-live{background:var(--yellow);border-color:var(--ink)}
.cast__v.is-live .cast__n,.cast__v.is-live .cast__r,.cast__v.is-live .cast__pan{color:var(--ink)}
.cast__n{font-family:"Slab",sans-serif;font-weight:900;font-size:16px;letter-spacing:-.01em;
  color:var(--yellow);margin:0 0 3px}
.cast__r{font-size:13px;line-height:1.35;color:#a9cbb8;margin:0 0 9px}
.cast__field{position:relative;height:4px;background:#06381f;border-radius:2px}
.cast__field i{position:absolute;top:-3px;width:10px;height:10px;margin-left:-5px;
  border-radius:50%;background:var(--yellow);border:2px solid var(--ink)}
.cast__v.is-live .cast__field{background:rgba(20,18,16,.25)}
.cast__v.is-live .cast__field i{background:var(--red)}
.cast__pan{font:600 10px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;
  color:#8fb9a2;margin:7px 0 0}

.player{background:#0a4a33;border:3px solid var(--yellow);padding:14px;margin:0 0 18px;
  box-shadow:5px 5px 0 rgba(9,42,29,.7);min-width:0}
.player__top{display:flex;align-items:center;gap:13px;min-width:0}
.player__pp{all:unset;flex:0 0 auto;width:58px;height:58px;cursor:pointer;border-radius:50%;
  background:var(--yellow);color:var(--ink);display:grid;place-items:center;
  border:3px solid var(--ink);box-shadow:3px 3px 0 rgba(9,42,29,.8)}
.player__pp:active{transform:translate(2px,2px);box-shadow:none}
.player__pp .ic{width:27px;height:27px}
.player__pp svg:nth-of-type(2){display:none}
.player[data-state="playing"] .player__pp svg:nth-of-type(1){display:none}
.player[data-state="playing"] .player__pp svg:nth-of-type(2){display:block}
.player__meta{flex:1 1 auto;min-width:0}
.player__now{font-family:"Slab",sans-serif;font-weight:900;font-size:18px;letter-spacing:-.02em;
  color:#fff;margin:0 0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.player__t{font:600 12.5px/1 var(--mono);color:#a9cbb8;margin:0}
.player__seek{-webkit-appearance:none;appearance:none;width:100%;height:30px;background:none;
  margin:9px 0 3px;cursor:pointer;display:block;min-width:0}
.player__seek::-webkit-slider-runnable-track{height:9px;background:#06381f;
  border:2px solid var(--ink);border-radius:2px}
.player__seek::-moz-range-track{height:9px;background:#06381f;border:2px solid var(--ink);border-radius:2px}
.player__seek::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-9px;
  border-radius:50%;background:var(--yellow);border:3px solid var(--ink)}
.player__seek::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--yellow);
  border:3px solid var(--ink)}
.player__opts{display:flex;gap:7px;overflow-x:auto;padding:6px 2px 2px;min-width:0;
  scrollbar-width:none}
.player__opts::-webkit-scrollbar{display:none}
.player__opts .chip{background:#06381f;color:#e9f2ec;border-color:#e9f2ec;
  box-shadow:2px 2px 0 rgba(0,0,0,.35)}
.player__opts .chip.is-on{background:var(--yellow);color:var(--ink);border-color:var(--ink)}

.chapnav{margin:0 0 18px;min-width:0}
.chapnav__hd{font:600 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:#a9cbb8;margin:0 0 10px}
.chapnav__rail{display:grid;gap:7px;min-width:0}
.ch{min-width:0}
.ch a{display:grid;grid-template-columns:auto 1fr auto;gap:11px;align-items:center;min-width:0;
  min-height:50px;padding:10px 13px;text-decoration:none;color:#eef4f0;
  background:#0a4a33;border:2.5px solid #16704e;border-radius:2px}
.ch a>*{min-width:0}
.ch a:hover{background:#0c5a3c;color:#fff}
.ch.is-current a{background:var(--yellow);color:var(--ink);border-color:var(--ink)}
.ch-n{font:700 12px/1 var(--mono);color:#8fb9a2}
.ch.is-current .ch-n{color:var(--ink)}
.ch-t{font-weight:700;font-size:16px;line-height:1.25;min-width:0}
.ch-d{font:600 12.5px/1 var(--mono);color:#8fb9a2;white-space:nowrap}
.ch.is-current .ch-d{color:var(--ink)}
.ch--none .ch-t{padding:12px;color:#a9cbb8;font-weight:400}

.tr{max-height:54vh;overflow-y:auto;overscroll-behavior:contain;background:#06381f;
  border:3px solid #16704e;padding:5px;min-width:0;-webkit-overflow-scrolling:touch}
.tr__empty{padding:16px;margin:0;color:#a9cbb8;font-size:15px}
.tr__line{all:unset;display:grid;grid-template-columns:auto 1fr;gap:3px 10px;box-sizing:border-box;
  width:100%;min-width:0;cursor:pointer;padding:10px 11px;border-radius:2px;
  border-left:4px solid transparent}
.tr__line>*{min-width:0}
.tr__line:hover{background:rgba(255,255,255,.06)}
.tr__who{grid-column:1;font:700 10.5px/1.5 var(--mono);letter-spacing:.11em;text-transform:uppercase;
  color:var(--yellow);white-space:nowrap}
.tr__t{grid-column:2;font-size:15.5px;line-height:1.5;color:#cfe0d6}
.tr__line.is-now{background:rgba(255,210,30,.14);border-left-color:var(--yellow)}
.tr__line.is-now .tr__t{color:#fff}
.tr__line.is-past .tr__t{color:#7ea691}
.tr__note{font-size:13.5px;color:#a9cbb8;margin:12px 0 0}

/* --------------------------------------------------- act six: unknowns -- */
.unknowns{counter-reset:u;display:grid;gap:12px;margin:0 0 26px;min-width:0}
.unknowns li{counter-increment:u;position:relative;min-width:0;padding:14px 15px 14px 52px;
  background:var(--sheet);border:3px solid var(--line);box-shadow:var(--shadow-sm);
  font-size:15.5px;line-height:1.5}
.unknowns li::before{content:"?";position:absolute;left:14px;top:13px;width:26px;height:26px;
  display:grid;place-items:center;border-radius:50%;background:var(--red);color:#fff;
  font:700 15px/1 var(--mono)}
.closing{font-size:16.5px}
.closing p:first-child{font-family:"Slab",sans-serif;font-weight:900;font-size:19px;
  line-height:1.2;letter-spacing:-.025em}

/* ------------------------------------------------- act seven: circulate -- */
.tiles{display:grid;gap:9px;min-width:0}
.tile-pick{all:unset;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;
  box-sizing:border-box;width:100%;min-width:0;min-height:72px;cursor:pointer;padding:10px 13px;
  background:var(--sheet);border:3px solid var(--line);box-shadow:var(--shadow-sm)}
.tile-pick>*{min-width:0}
.tile-pick:active{transform:translate(2px,2px);box-shadow:none}
.tile-pick:hover{background:var(--yellowpale)}
.tile-pick img{width:52px;height:52px;border:2px solid var(--line);object-fit:cover}
.tile-pick span{display:block;min-width:0}
.tl-n{font:600 10.5px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink2);margin-bottom:4px}
.tl-t{font-weight:700;font-size:16px;line-height:1.25}
.tl-go{font:700 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  background:var(--green);color:#fff;padding:9px 10px;border-radius:2px;white-space:nowrap}

/* The modal dialog is placed by the UA in the top layer. Overriding position
   here drops the sheet into normal flow, below the fold, behind its own
   backdrop — while still reporting dialog.open === true. Do not add
   position:relative. */
.sh-dialog{border:4px solid var(--line);background:var(--sheet);color:var(--ink);
  padding:18px 16px 20px;max-width:min(560px,94vw);width:100%;
  max-height:84dvh;max-height:84vh;overflow-y:auto;overscroll-behavior:contain;
  box-shadow:8px 8px 0 rgba(20,18,16,.3)}
.sh-dialog::backdrop{background:rgba(20,18,16,.62)}
.sh-close{all:unset;position:absolute;top:8px;right:10px;width:42px;height:42px;cursor:pointer;
  display:grid;place-items:center;font:700 27px/1 "SSP",sans-serif;color:var(--ink);
  border:2.5px solid var(--line);border-radius:50%;background:var(--paper2)}
.sh-img{width:100%;max-width:210px;height:auto;margin:6px auto 14px;border:3px solid var(--line)}
.sh-post{font-size:16px;line-height:1.5;margin:0 0 15px;padding:12px 13px;
  background:var(--yellowpale);border-left:4px solid var(--yellow)}
.sh-acts{display:grid;gap:8px;margin:0 0 13px;min-width:0}
.sh-acts .btn{width:100%;min-width:0}
.sh-fine{font-size:13.5px;color:var(--ink2);margin:0}
.btn.is-done{background:var(--green);color:#fff}

/* ------------------------------------------- act eight: the connections -- */
.conns{display:grid;gap:13px;margin:0 0 30px;min-width:0}
.conn{min-width:0;padding:15px 16px;border:3px solid var(--line);background:var(--paper);
  box-shadow:var(--shadow-sm);border-left-width:9px}
.conn--direct{border-left-color:var(--green)}
.conn--structural{border-left-color:var(--blue)}
.conn--context{border-left-color:var(--ink3)}
.conn--tension{border-left-color:var(--red)}
.conn__rel{font:600 10.5px/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink2);margin:0 0 7px}
.conn__t{font-family:"Slab",sans-serif;font-weight:900;font-size:18px;line-height:1.15;
  letter-spacing:-.02em;margin:0 0 9px}
.conn__p{display:block;font-family:"SSP",sans-serif;font-weight:600;font-size:12.5px;
  color:var(--ink2);margin-top:4px;letter-spacing:0}
.conn__q{margin:0 0 9px;padding:10px 12px;background:var(--sheet);border:2px solid var(--line);
  font-size:15px;line-height:1.45;font-style:italic}
.conn__w{font-size:14.5px;line-height:1.5;color:var(--ink2);margin:0}
.src__h3{font-size:20px;margin:0 0 13px}
.srcs{display:grid;gap:9px;min-width:0}
.srcs li{font-size:14.5px;line-height:1.45;padding-left:17px;position:relative;min-width:0;
  word-break:break-word}
.srcs li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;
  background:var(--yellow);border:2px solid var(--line)}

/* ------------------------------------------------------------- footer -- */
.foot{background:var(--ink);color:#d6cfc0;padding:34px 0 40px}
.foot a{color:var(--yellow)}
.foot__tag{font-family:"Slab",sans-serif;font-weight:900;font-size:clamp(21px,6.2vw,30px);
  line-height:1.1;letter-spacing:-.03em;color:var(--yellow);margin:0 0 12px}
.foot__q{font:600 13px/1.7 var(--mono);letter-spacing:.05em;color:#9b9280;margin:0 0 20px}
.foot__meta{font-size:14.5px;line-height:1.6;border-top:2px solid #3a3529;padding-top:16px}
.foot__meta p{margin:0 0 5px}
.foot__date{color:#8a8071;font-size:13px}

/* ------------------------------------------------------- the score bar -- */
.scorebar{position:fixed;left:0;right:0;bottom:0;z-index:40;
  padding:0 0 env(safe-area-inset-bottom);
  background:var(--sheet);border-top:3px solid var(--line);
  box-shadow:0 -4px 0 rgba(20,18,16,.12);
  transform:translateY(105%);transition:transform .22s cubic-bezier(.2,.8,.3,1)}
.scorebar.is-up{transform:none}
@media (prefers-reduced-motion:reduce){.scorebar{transition:none}}
.scorebar__btn{all:unset;display:flex;align-items:center;gap:12px;box-sizing:border-box;
  width:100%;min-width:0;cursor:pointer;padding:11px 16px;min-height:56px}
.sb__g{display:flex;align-items:center;gap:7px;flex:1 1 0;min-width:0}
.sb__k{font:600 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink2);white-space:nowrap}
.sb__bar{flex:1 1 auto;min-width:18px;height:9px;background:var(--paper2);
  border:2px solid var(--line);overflow:hidden}
.sb__bar i{display:block;height:100%;width:0;background:var(--yellow);transition:width .35s}
.sb__bar--r i{background:var(--green)}
.sb__g b{font:900 17px/1 "Slab",sans-serif;letter-spacing:-.03em;min-width:1.4ch;text-align:right}
.sb__n{flex:0 0 auto;font:700 12px/1 var(--mono);color:#fff;background:var(--ink);
  padding:8px 9px;border-radius:2px;white-space:nowrap}

/* ---------------------------------------------------------- card pages -- */
.cardpage{background:var(--paper)}
.hd--card{padding:24px 0 26px}
.cardpage__h1{font-size:clamp(30px,8.5vw,46px);color:var(--yellow);
  text-shadow:4px 4px 0 rgba(9,42,29,.85)}
.hd--card .act-no{color:var(--yellow)}
.act--card{padding:28px 0 40px}
.cardpage__img{width:100%;max-width:440px;margin:0 auto 20px;border:3px solid var(--line);
  box-shadow:var(--shadow)}
.cardpage__body{font-size:16.5px;margin-bottom:20px}
.cardpage__to{margin-top:12px;font-weight:700}
.cardpage__btns{display:grid;gap:9px;margin:0 0 12px;min-width:0}
.cardpage__btns .btn{width:100%;min-width:0}
.cardpage__fine{font-size:13.5px;color:var(--ink2);margin:0 0 18px}
.cardpage__others{font-size:14.5px;line-height:1.9}
.cardpage__others h2{font-size:17px;margin:0 0 9px}

/* ------------------------------------------------------------ wider -- */
@media (min-width:560px){
  body{font-size:18px}
  .wrap{padding:0 26px}
  .act{padding:56px 0 60px}
  .row__cells{grid-template-columns:1fr 1fr}
  .quads__list{grid-template-columns:1fr 1fr}
  .cast{grid-template-columns:repeat(4,1fr)}
  .sh-acts{grid-template-columns:1fr 1fr}
  .cardpage__btns{grid-template-columns:1fr 1fr}
  .hd__qs{grid-template-columns:1fr 1fr}
}
@media (min-width:860px){
  .stage__in{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center}
  .readout{grid-template-columns:1fr;gap:14px}
  .buckets{grid-template-columns:1fr 1fr}
  .tiles{grid-template-columns:1fr 1fr}
  .hero .aisle{max-height:460px;object-fit:cover}
}

@media print{
  .scorebar,.player,.sh-dialog,.hero{display:none}
  body{background:#fff;color:#000}
  .reveal{opacity:1;transform:none}
}

/* receipt detail */
.rc__n b{font:600 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);margin-right:5px}
.receipt__end{margin:16px 0 0;padding-top:13px;border-top:2.5px dashed var(--ink);
  font-family:"Slab",sans-serif;font-weight:900;font-size:17px;line-height:1.2;
  letter-spacing:-.02em;color:var(--red)}