/* DeSpoof shared styles: tokens, fonts, controls, and the challenge frame. */

@font-face{font-family:'Plex Sans';src:url('/fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Sans';src:url('/fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Sans';src:url('/fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Cond';src:url('/fonts/ibm-plex-sans-condensed-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Cond';src:url('/fonts/ibm-plex-sans-condensed-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Mono';src:url('/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Mono';src:url('/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
  --paper:#eef1f6;
  --card:#ffffff;
  --panel:#101a2e;
  --panel-2:#16233c;
  --ink:#0f1729;
  --ink-2:#5a6580;
  --ink-3:#8d97ac;
  --rule:#d8dee9;
  --rule-dark:#26344f;
  --signal:#3b2fe0;
  --signal-soft:#ebe9ff;
  --flag:#c31e4d;
  --flag-soft:#fdeaf0;
  --live:#2fd6a6;

  --display:'Plex Cond',ui-sans-serif,'Segoe UI Semibold',system-ui,sans-serif;
  --body:'Plex Sans',ui-sans-serif,system-ui,'Segoe UI',sans-serif;
  --mono:'Plex Mono',ui-monospace,'SFMono-Regular',Consolas,monospace;

  --r:10px;
  --shadow:0 1px 2px rgba(15,23,41,.06),0 10px 30px rgba(15,23,41,.07);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--body);color:var(--ink);background:var(--paper);
  font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased}

h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:-.012em;line-height:1.08;margin:0}
p{margin:0}
a{color:inherit}

.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);font-weight:500}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--body);font-weight:600;font-size:.98rem;line-height:1;
  padding:.86em 1.35em;border-radius:var(--r);border:1px solid transparent;cursor:pointer;
  background:var(--signal);color:#fff;text-decoration:none;transition:transform .12s ease,background .15s ease}
.btn:hover{background:#3226c4}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn--ghost:hover{background:#fff;border-color:var(--ink-3)}
.btn--go{width:100%;padding:1.05em 1.35em;font-size:1.02rem}
.btn--small{padding:.6em 1em;font-size:.88rem}
.btn--danger{background:var(--flag)}
.btn--danger:hover{background:#a5183f}

.is-hidden{display:none !important}

input[type=text],input[type=email],input[type=password],input[type=url],input[type=number],select,textarea{
  width:100%;font-family:var(--body);font-size:.96rem;color:var(--ink);background:#fff;
  border:1px solid var(--rule);border-radius:8px;padding:.66em .8em}
input:focus,select:focus,textarea:focus{outline:2px solid var(--signal);outline-offset:1px;border-color:var(--signal)}
label{display:block;font-size:.86rem;font-weight:600;margin-bottom:.35em}
.field{margin-bottom:1.05rem}
.field .note{font-size:.8rem;color:var(--ink-2);margin-top:.35em;font-weight:400}

code,pre,.mono{font-family:var(--mono)}

/* ------------------------------------------------------- the challenge frame */

body.chal{background:#fff;display:flex;align-items:stretch;justify-content:center;min-height:100vh}
.chal-card{display:flex;flex-direction:column;width:100%;max-width:440px;padding:18px 22px 24px}

.chal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.chal-mark{font-family:var(--display);font-weight:700;font-size:.95rem;letter-spacing:.02em}
.chal-mark::before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--live);margin-right:7px;vertical-align:middle}
.chal-x{background:none;border:0;font-size:1.6rem;line-height:1;color:var(--ink-3);cursor:pointer;padding:0 4px}
.chal-x:hover{color:var(--ink)}

.chal-stage{flex:1;display:flex;flex-direction:column}
.chal-stage h1{font-size:1.55rem;margin-bottom:.5rem}
.chal-lede{color:var(--ink-2);margin-bottom:1.1rem}
.chal-facts{list-style:none;margin:0 0 1.2rem;padding:0;border-top:1px solid var(--rule)}
.chal-facts li{padding:.6rem 0 .6rem 1.5rem;border-bottom:1px solid var(--rule);font-size:.92rem;position:relative}
.chal-facts li::before{content:'';position:absolute;left:.25rem;top:1.05rem;width:6px;height:6px;
  border-radius:50%;background:var(--signal)}
.chal-consent{font-size:.8rem;color:var(--ink-2);margin:0 0 1.1rem}

.chal-view{position:relative;flex:1;display:flex;align-items:center;justify-content:center;
  background:var(--panel);border-radius:14px;overflow:hidden;min-height:300px}
.chal-view video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.chal-ring{position:relative;width:210px;height:210px;border-radius:50%;
  box-shadow:0 0 0 2000px rgba(16,26,46,.55);border:2px solid rgba(255,255,255,.35)}
.chal-ring-fill{position:absolute;inset:-2px;border-radius:50%;
  background:conic-gradient(var(--live) calc(var(--p,0) * 360deg),transparent 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px))}
.chal-prompt{position:absolute;left:0;right:0;bottom:18px;text-align:center;color:#fff;
  font-family:var(--display);font-weight:700;font-size:1.5rem;text-shadow:0 2px 14px rgba(0,0,0,.5)}

.chal-dots{display:flex;gap:6px;justify-content:center;margin:14px 0 8px}
.chal-dot{width:26px;height:4px;border-radius:2px;background:var(--rule)}
.chal-dot.is-now{background:var(--signal)}
.chal-dot.is-done{background:var(--live)}
.chal-hint{text-align:center;font-size:.86rem;color:var(--ink-2)}

.chal-verdict{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:2rem;margin:auto auto .9rem;color:#fff}
.chal-verdict.is-pass{background:var(--live)}
.chal-verdict.is-fail{background:var(--flag)}
#stage-result{text-align:center}
#stage-result h2{font-size:1.4rem;margin-bottom:.4rem}
#stage-result p{color:var(--ink-2);margin-bottom:1.2rem}
#stage-result .btn{margin:0 auto auto}

.chal--stopped .chal-stop{margin:auto;text-align:center}
.chal--stopped h1{font-size:1.3rem;margin-bottom:.5rem}
.chal--stopped p{color:var(--ink-2);margin-bottom:1.2rem}

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