/* hack.build look for the crowd games pages: square corners, hard offset shadows, one pink thing per view. */
:root{
  --pink:#FE0386;--paper:#f5f0e6;--raised:#fffdf7;--sunk:#efe9db;--ink:#1a1a1a;--ink2:#444;--ink3:#6b6459;--void:#0a0a0a;--red:#d0021b;
  --err:#c3251f;--ok:#1f7a3a;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;--disp:'Permanent Marker',cursive;--type:'Special Elite',serif;--inst:'VT323',monospace;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--tap:48px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.4 var(--mono);min-height:100dvh}
button,input,textarea,select{font:inherit;color:inherit;border-radius:0}
button{cursor:pointer;min-height:var(--tap);touch-action:manipulation}
button:disabled{cursor:not-allowed}
a{color:inherit}
[hidden]{display:none !important}
:focus-visible{outline:3px solid var(--pink);outline-offset:2px}
input:not([type=checkbox]):not([type=range]):not([type=file]),textarea,select{background:var(--raised);border:2px solid var(--ink);padding:var(--s3);width:100%;min-width:0;min-height:var(--tap);font-size:18px}
input[type=range]{width:100%;accent-color:var(--ink)}
label{display:block;font-weight:600;font-size:14px;margin-bottom:var(--s1)}
h1,h2{font-family:var(--disp);font-weight:400;margin:0}
h3{font:600 14px var(--mono);margin:var(--s4) 0 var(--s2);color:var(--ink2)}
.prose{font:16px/1.45 var(--type);color:var(--ink2);margin:0;max-width:62ch}
.small{font-size:13px;color:var(--ink2)}
.kicker{font:600 13px var(--mono);color:var(--ink3);margin:0}
.big{font:30px/1.1 var(--disp);margin:0;overflow-wrap:anywhere}
.q{font:600 20px/1.3 var(--mono);margin:0}
.timer{font:40px/1 var(--inst)}
.result{font-weight:600;margin:0;min-height:1.4em}
.stack{display:grid;gap:var(--s3)}
.split{display:flex;justify-content:space-between;align-items:center;gap:var(--s3)}

.btn{background:var(--raised);border:2px solid var(--ink);padding:var(--s2) var(--s4);font-weight:600;display:inline-flex;align-items:center;justify-content:center;text-align:center;text-decoration:none}
.btn:active:not(:disabled){transform:translate(2px,2px)}
.btn:disabled{color:var(--ink3);border-color:var(--ink3);background:var(--sunk)}
.btn[aria-pressed=true]{background:var(--ink);color:var(--raised)}
.btn.quiet{border-color:transparent;background:none;text-decoration:underline}
.go{background:var(--pink);color:var(--ink);box-shadow:3px 3px 0 var(--ink);font-size:18px;padding:var(--s3);width:100%}
.go:disabled{box-shadow:none}

.figure{width:100%;height:auto;display:block;background:#fff;border:3px solid var(--ink)}
.draw{touch-action:none}
.tools{display:flex;flex-wrap:wrap;gap:var(--s2)}
.tools .btn{flex:1 1 0;min-width:72px}
.meter{height:14px;border:2px solid var(--ink);background:var(--raised)}
.meter i{display:block;height:100%;background:var(--ink)}
.card{border:3px solid var(--ink);background:var(--raised);padding:var(--s4);text-align:left;width:100%;font:600 20px/1.3 var(--mono);box-shadow:4px 4px 0 var(--ink);display:block}
.card span{display:block}
.card:active:not(:disabled){transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.card:disabled{opacity:.6}
.choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
.results{margin:0;padding-left:var(--s5);display:grid;gap:var(--s1)}
.pad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,64px);gap:var(--s2);max-width:300px;margin:0 auto}
.pad button{border:3px solid var(--ink);background:var(--raised);font:28px var(--disp)}
.pad button[aria-pressed=true]{background:var(--ink);color:var(--raised)}
.bars{display:grid;gap:var(--s1);font-size:13px}
.bars div{display:grid;grid-template-columns:48px minmax(0,1fr) 32px;gap:var(--s2);align-items:center}
.bars i{display:block;height:12px;background:var(--ink)}
.code{font:600 40px/1 var(--mono) !important;text-transform:uppercase;letter-spacing:.2em;text-align:center}
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
.photo{padding:0;border:3px solid var(--ink);background:#fff;line-height:0}
.photo canvas{width:100%;height:auto}
.check{display:flex;gap:var(--s2);align-items:flex-start;font-weight:400;font:15px/1.4 var(--type)}
.check input{width:24px;height:24px;flex:none;accent-color:var(--ink)}

.gifgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:var(--s2)}
.gifpick{padding:0;border:2px solid var(--ink);background:var(--raised);display:grid;text-align:left;min-height:0}
.gifpick img{width:100%;aspect-ratio:10/7;object-fit:cover;display:block;background:var(--sunk)}
.gifpick span{font:600 12px var(--mono);padding:4px 6px}
.gifpick:disabled{opacity:.5}
@keyframes flash{0%{background:var(--ink)}100%{background:transparent}}
.flash{animation:flash .5s ease-out}

@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}