@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;600;700;800&display=swap');
/* L4 Knowledge Quiz. Hub palette on the Traitors noir: ink black, cream, warm mid grey, hub red. */
:root{--bg:#0b0b0a;--ink:#f1efec;--mid:#8f8d87;--faint:#55534e;--line:rgba(255,255,255,.14);--card:rgba(255,255,255,.05);
  --accent:#c0423b;--deep:#8F2F2B;--gold:#c8902e;--green:#2a6649;--blue:#2f63a8;--ease:cubic-bezier(.2,.8,.2,1);--spring:cubic-bezier(.34,1.56,.64,1)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:Sora,-apple-system,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
body{background-image:radial-gradient(1000px 560px at 50% -12%,rgba(192,66,59,.16),transparent 70%)}
button,input{font-family:inherit}
.eyebrow{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);font-weight:600}
.muted{color:var(--mid)}
.btn{display:block;width:100%;padding:16px;border-radius:14px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:16px;font-weight:600;letter-spacing:.03em;cursor:pointer;touch-action:manipulation;transition:transform .12s,background .2s,border-color .2s}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--accent);border-color:transparent;color:#fff}
.btn:disabled{opacity:.4;cursor:default}
input[type=text],input[type=password],input[type=number]{width:100%;padding:16px;border-radius:14px;border:1px solid var(--line);background:#121210;color:var(--ink);font-size:18px;letter-spacing:.05em;outline:none}
input:focus{border-color:var(--accent)}
.err{color:#ef8f87;font-size:13px;min-height:18px;margin:0}
#field{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none}
.layer{position:relative;z-index:1}
.shp{display:block;flex-shrink:0}

/* halftone reveal (from Traitors noir.css) */
@property --ht{syntax:'<length>';inherits:false;initial-value:20px}
.ht-in{-webkit-mask-image:radial-gradient(circle,#000 var(--ht),transparent calc(var(--ht) + .6px));mask-image:radial-gradient(circle,#000 var(--ht),transparent calc(var(--ht) + .6px));
  -webkit-mask-size:var(--htp,12px) var(--htp,12px);mask-size:var(--htp,12px) var(--htp,12px);-webkit-mask-position:center;mask-position:center;animation:htin 1.2s var(--ease) both}
@keyframes htin{0%{--ht:0px}100%{--ht:calc(var(--htp,12px) * .75)}}
@keyframes up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes pop{0%{opacity:0;transform:scale(.6)}70%{opacity:1;transform:scale(1.06)}100%{transform:none}}
@keyframes slam{0%{opacity:0;transform:scale(2.2)}60%{opacity:1;transform:scale(.94)}100%{transform:none}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shake{0%,100%{transform:none}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
.up{animation:up .6s var(--ease) both}
.pop{animation:pop .55s var(--ease) both}
.tag{display:inline-block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--line);border-radius:100px;padding:4px 10px;color:var(--mid)}
.dots3{display:inline-flex;gap:6px}.dots3 i{width:8px;height:8px;border-radius:50%;background:currentColor;animation:pulse 1s infinite;opacity:.8}
.dots3 i:nth-child(2){animation-delay:.15s}.dots3 i:nth-child(3){animation-delay:.3s}
.mute{position:fixed;right:14px;top:14px;z-index:60;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:rgba(0,0,0,.4);color:var(--ink);font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.mute svg{width:20px;height:20px}
@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}