@font-face { font-family: "Comic Grotesk"; font-display: block;
  src: url("fonts/ComicGrotesk-VF.woff2?v=19bec7dee0") format("woff2"); }
:root { --mix: 0; }
html, body { margin: 0; background: #fff; }
body { overflow-x: hidden; padding-bottom: calc(2.4vw + 44px); }
svg { display: block; width: 100vw; height: auto; min-height: 100vh; overflow: visible; }
#sheet { position: relative; overflow-x: clip; }
#ground { position: absolute; top: 0; left: 0; right: 0; }
#ground, #poster { will-change: transform; }
#poster { position: relative; pointer-events: none; }
#poster text { pointer-events: auto; }
text { font-family: "Comic Grotesk", sans-serif; font-variation-settings: "MIX " var(--mix); fill: #000; }
.big { paint-order: stroke; stroke-linejoin: round;
       fill: var(--fill, #000); stroke: var(--stroke, none); stroke-width: var(--sw, 0); }
.badge { fill: url(#fill); stroke: #4a1c08; stroke-width: 10; paint-order: stroke; font-variation-settings: "MIX " 1000; }
.set { paint-order: stroke; stroke-linejoin: round; fill: var(--sfill, #000);
       stroke: var(--setStroke, none); stroke-width: var(--setSw, 0); }
.small { paint-order: stroke; stroke-linejoin: round; stroke: #4a1c08; stroke-width: var(--ssw, 0); fill: var(--sfill, #000); }
a text, a tspan { text-decoration: underline; }
.bar { position: fixed; left: max(1.2vw, 18px); right: max(1.2vw, 18px); bottom: max(1.2vw, 18px); z-index: 3; display: flex; gap: 20px; align-items: center; }
#fxBtn, #download { flex: 0 0 auto; justify-content: center; }
#controls { flex: 1 1 auto; min-width: 0; }
.pill { box-sizing: border-box; display: flex; align-items: center; gap: 12px; padding: 7px 14px; border: 1.5px solid #000; border-radius: 999px;
        background: #fff; font: 15px "Comic Grotesk", sans-serif; font-variation-settings: "MIX " var(--mix); color: #000; }
.pill span { white-space: nowrap; font-variant-numeric: tabular-nums; }
#gro { text-align: right; }
label.pill, label.follow { display: flex; align-items: center; gap: 7px; cursor: pointer; user-select: none; white-space: nowrap; }
a.pill { text-decoration: none; cursor: pointer; white-space: nowrap; }
.pill input[type=checkbox] { width: 16px; height: 16px; margin: 0; accent-color: var(--accent, #000); }
.pill input[type=range] { flex: 1; min-width: 0; accent-color: var(--accent, #000); cursor: pointer; }
@media (max-width: 699.98px) {
  label.follow, #fxBtn { display: none; }
  #download.below { position: relative; z-index: 2; display: flex; gap: 0; padding: 2px 5px; margin: 16px calc(100vw / var(--cols, 14)); }
  #download.below::before { content: ""; height: 40px; }
  .bar { left: calc(100vw / var(--cols, 14)); right: calc(100vw / var(--cols, 14)); }
  #gro, #com { display: none; }
  #controls { padding: 2px 5px; }
  #slider { width: 100%; height: 40px; margin: 0; background: radial-gradient(circle at 9px 50%, var(--accent, #000) 3.6px, transparent 4.4px), radial-gradient(circle at calc(100% - 9px) 50%, var(--accent, #000) 3.6px, transparent 4.4px), linear-gradient(var(--accent, #000), var(--accent, #000)) center / calc(100% - 18px) 8px no-repeat; -webkit-appearance: none; appearance: none; touch-action: none; }
  #slider::-webkit-slider-runnable-track { height: 8px; background: none; }
  #slider::-moz-range-track { height: 8px; background: none; }
  #slider::-webkit-slider-thumb { -webkit-appearance: none; box-sizing: border-box; width: 34px; height: 34px; margin-top: -13px; border-radius: 50%; background: var(--accent, #000); }
  #slider::-moz-range-thumb { box-sizing: border-box; width: 34px; height: 34px; border-radius: 50%; background: var(--accent, #000); }
}
@media (max-width: 640px) {
  .bar { bottom: 16px; gap: 20px; }
  .pill { font-size: 13px; gap: 8px; padding: 6px 12px; }
}
.grid line { stroke: #e2402b; stroke-width: 1.5; }
.shot .bar, .shot #download { display: none; }
.shot body { padding-bottom: 0 !important; }
#poster .copy text { pointer-events: none; user-select: none; }