@font-face{font-family:"BG";src:url(fonts/bricolage-grotesque-latin-800-normal.woff2) format("woff2");font-weight:800;font-display:block}
@font-face{font-family:"BG";src:url(fonts/bricolage-grotesque-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:block}
@font-face{font-family:"AH";src:url(fonts/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:block}
@font-face{font-family:"AH";src:url(fonts/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:block}
:root{--ink:#141414;--red:#E0301E;--box:#F1EEE8;--mute:#8B857C}
html,body{margin:0;height:100%;background:#fff;overflow:hidden}
#stage{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;overflow:hidden;background:#fff;
  font-family:"AH",system-ui,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}
#plate{position:absolute;left:0;top:0;width:1920px;height:1080px;display:block}
.noplate #plate{display:none}
#gfx{position:absolute;left:0;top:0;width:1110px;height:1080px}
#gfx *{box-sizing:border-box}

/* header + column heads */
.head{position:absolute;left:56px;top:34px;display:flex;align-items:baseline;gap:18px;visibility:hidden}
.head b{font:800 50px/1 "BG";letter-spacing:-.01em}
.head span{font:400 30px/1 "AH";color:var(--mute)}
.colcap{position:absolute;left:0;top:0;font:700 24px/1 "AH";color:var(--mute);letter-spacing:.06em;text-transform:uppercase;transform:translateY(-50%);visibility:hidden}
.chead{position:absolute;left:0;top:0;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:#ECE8E1;color:#6d675f;
  font:800 24px/40px "BG";text-align:center;visibility:hidden}
.harrow{position:absolute;left:0;top:0;overflow:visible;visibility:hidden}
.harrow path{fill:none;stroke:var(--red);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}

/* column strips (final hold) */
.strip{position:absolute;left:0;top:0;background:#FCE7E3;border-radius:28px;transform-origin:50% 0;visibility:hidden}

/* rows */
.row{position:absolute;left:0;top:0;width:1110px;height:1080px}
.box{position:absolute;left:0;top:0;background:var(--box);visibility:hidden}
.plate{position:absolute;left:0;top:0;background:var(--red);border:5px solid var(--ink);border-radius:18px;
  box-shadow:8px 8px 0 var(--ink);transform-origin:50% 100%;visibility:hidden}
.syl{position:absolute;left:0;top:0;font:800 120px/1 "BG";white-space:nowrap;visibility:hidden}
.bob{position:relative;display:block}
.lo{display:block;color:var(--ink);padding:0 0 .06em}
.up{position:absolute;left:50%;top:50%;transform:translate(-50%,-44%);color:#fff;letter-spacing:.01em;visibility:hidden}
.dot{position:absolute;left:0;top:0;width:0;height:0;visibility:hidden}
.dotin{position:absolute;left:-10px;top:-10px;width:20px;height:20px;border-radius:50%;background:var(--ink)}
.ring{position:absolute;left:0;top:0;border:5px solid var(--red);border-radius:22px;visibility:hidden}
.ghostp{position:absolute;left:0;top:0;border:5px dashed var(--red);border-radius:18px;background:rgba(255,255,255,.92);
  color:var(--red);font:800 56px/1 "BG";display:flex;align-items:center;justify-content:center;visibility:hidden}
.smear{position:absolute;left:0;top:0;background:var(--red);border-radius:18px;visibility:hidden;transform-origin:50% 100%}
.trail{position:absolute;left:0;top:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--red);visibility:hidden}

/* row label */
.lab{position:absolute;left:44px;top:0;display:flex;align-items:center;gap:14px;transform:translateY(-50%);visibility:hidden}
.lab svg{width:66px;height:66px;flex:none;overflow:visible}
.lab svg *{fill:none;stroke:var(--ink);stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.lab svg .r{stroke:var(--red)}
.lab svg .w{fill:#fff}
.lab b{display:block;font:700 36px/1 "AH"}
.lab small{display:block;margin-top:5px;font:400 24px/1 "AH";color:var(--mute)}
.lab .also{position:absolute;left:150px;top:-24px;font:700 22px/1 "AH";color:#fff;background:var(--red);padding:5px 10px 6px;border-radius:20px;
  transform:rotate(-6deg);visibility:hidden}
.marker{position:absolute;left:18px;top:0;width:8px;border-radius:4px;background:var(--red);visibility:hidden}

/* notes */
.note{position:absolute;left:0;top:0;font:700 34px/1.05 "AH";color:var(--red);white-space:nowrap;visibility:hidden}
.brk{position:absolute;left:0;top:0;overflow:visible;visibility:hidden}
.brk path{fill:none;stroke:var(--ink);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.btxt{position:absolute;left:0;top:0;font:700 28px/1.2 "AH";color:var(--ink);white-space:nowrap;transform:translateY(-50%);visibility:hidden}
.btxt em{font-style:normal;color:var(--red)}

/* caption + message */
.cap{position:absolute;left:56px;top:952px;font:400 42px/1.1 "AH";color:#4a4640;white-space:nowrap;visibility:hidden}
.cap .w{display:inline-block}
.cap b{font-weight:700;color:var(--ink)}
.cap b em{font-style:normal;color:var(--red)}
.cap .k1{display:none}
.msg{position:absolute;left:56px;top:944px;font:800 58px/1 "BG";white-space:nowrap;visibility:hidden}
.msg em{font-style:normal;color:var(--red)}
.msg .w{display:inline-block}

/* HUD (hidden until the mouse moves) */
#hud{position:fixed;z-index:10;left:12px;top:10px;display:flex;gap:14px;align-items:center;font:700 13px/1 "AH",sans-serif;
  background:rgba(20,20,20,.86);color:#fff;padding:8px 12px;border-radius:8px;opacity:0;transition:opacity .3s}
#hud.on{opacity:1}
#hud a{color:#fff}
#hud .hint{font-weight:400;opacity:.8}