/* /question-of-the-week · predict, test it, why. Dark Signal page; the models
   glow like the short videos they come from. */
.qw-page{--qw-bg:var(--ds-night);--qw-card:var(--ds-night-2);--qw-card-2:var(--ds-night-3);--qw-ink:var(--ds-night-ink);--qw-ink-2:var(--ds-night-ink-2);--qw-ink-3:var(--ds-night-ink-3);--qw-line:var(--ds-night-line);
    --qw-violet:#a596ff;--qw-good:#4cd07a;--qw-bad:#ff6a5d;--qw-glow-v:#8f7dff;--qw-glow-w:#ffb46a;--qw-glow-c:#5fe0ff;
    background:var(--qw-bg);color:var(--qw-ink)}
.qw-page :is(a,button,input):focus-visible{outline:3px solid #cfc6ff;outline-offset:3px}
.qw-page #mainContent:focus{outline:none}
.qw{width:calc(100% - 32px);max-width:760px;margin:0 auto;padding:120px 0 88px}
.qw-head{margin-bottom:28px}
.qw-eyebrow{margin:0 0 14px;font:500 .75rem/1.4 var(--ds-font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--qw-violet)}
.qw-head h1{margin:0;font-family:var(--ds-font-display);font-size:clamp(32px,5vw,52px);font-weight:600;line-height:1.06;letter-spacing:-.02em;text-wrap:balance}

.qw-step{margin-top:20px;padding:24px;border:1px solid var(--qw-line);border-radius:14px;background:var(--qw-card)}
.qw-step h2{display:flex;align-items:center;gap:12px;margin:0 0 12px;font:600 1.125rem/1.2 var(--ds-font-display);color:var(--qw-ink)}
.qw-num{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--qw-card-2);border:1px solid var(--qw-line);font:600 .8rem/1 var(--ds-font-mono);color:var(--qw-violet)}
.qw-prompt,.qw-note,.qw-step p{margin:0 0 14px;font-size:16px;line-height:1.6;color:var(--qw-ink-2)}
.qw-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.qw-choice{padding:14px 16px;border:1px solid var(--qw-line);border-radius:10px;background:var(--qw-card-2);color:var(--qw-ink);font:600 15px/1.3 var(--ds-font-text);text-align:left;cursor:pointer;transition:border-color .15s ease,background-color .15s ease}
.qw-choice:hover:not([disabled]){border-color:#5f5a80}
.qw-choice[aria-pressed="true"]{border-color:var(--qw-violet);background:#231f3d}
.qw-choice.is-right{border-color:var(--qw-good);box-shadow:0 0 18px -4px var(--qw-good)}
.qw-choice[disabled]{cursor:default}
.qw-verdict{min-height:1.6em;margin:12px 0 0!important;font-weight:600;color:var(--qw-ink)!important}
.qw-answer strong{color:var(--qw-good)}
.qw-why-locked{position:relative}
.qw-why-locked>:not(h2){filter:blur(7px);user-select:none}
.qw-why-locked::after{content:'Make your prediction to see why';position:absolute;left:50%;top:58%;transform:translate(-50%,-50%);padding:8px 14px;border-radius:999px;background:var(--qw-card-2);border:1px solid var(--qw-line);font:600 13px/1.2 var(--ds-font-text);color:var(--qw-ink);white-space:nowrap}

/* ── the interactive models ── */
.qw-model{display:grid;gap:14px}
.qw-svg{display:block;width:100%;height:auto;border-radius:10px;background:radial-gradient(120% 90% at 50% 0%,#1c1a2e 0%,#0d0d12 70%)}
.qw-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.qw-row label{font:600 14px/1.2 var(--ds-font-text);color:var(--qw-ink)}
.qw-range{flex:1 1 220px;accent-color:var(--qw-violet);height:28px}
.qw-btn{padding:10px 16px;border:1px solid var(--qw-line);border-radius:999px;background:var(--qw-card-2);color:var(--qw-ink);font:600 14px/1 var(--ds-font-text);cursor:pointer}
.qw-btn:hover{border-color:#5f5a80}
.qw-btn--go{border-color:transparent;background:var(--ds-accent);color:#fff}
.qw-btn--go:hover{background:var(--ds-accent-hover)}
.qw-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}
.qw-stat{padding:10px 12px;border:1px solid var(--qw-line);border-radius:10px;background:#141418}
.qw-stat span{display:block;font:500 .7rem/1.3 var(--ds-font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--qw-ink-3)}
.qw-stat b{display:block;margin-top:4px;font:600 1.375rem/1.1 var(--ds-font-display);font-variant-numeric:tabular-nums;color:var(--qw-ink)}
.qw-stat b.good{color:var(--qw-good)}.qw-stat b.bad{color:var(--qw-bad)}
.qw-live{margin:0!important;font-size:14px!important;color:var(--qw-ink-2)!important}
/* The glow from the videos, on the moving parts only. */
.qw-glow-v{filter:drop-shadow(0 0 6px var(--qw-glow-v))}
.qw-glow-w{filter:drop-shadow(0 0 6px var(--qw-glow-w))}
.qw-glow-c{filter:drop-shadow(0 0 5px var(--qw-glow-c))}
.qw-doors{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.qw-door{position:relative;aspect-ratio:3/4;border:1px solid var(--qw-line);border-radius:12px;background:linear-gradient(#2a2440,#1b1830);color:var(--qw-ink);font:600 clamp(28px,6vw,44px)/1 var(--ds-font-display);cursor:pointer;transition:border-color .15s ease,box-shadow .2s ease}
.qw-door small{position:absolute;left:0;right:0;bottom:10px;font:600 12px/1.2 var(--ds-font-text);color:var(--qw-ink-2)}
.qw-door[aria-pressed="true"]{border-color:var(--qw-violet);box-shadow:0 0 22px -4px var(--qw-glow-v)}
.qw-door.is-open{background:#0f0f14;color:var(--qw-ink-3)}
.qw-door.has-prize{border-color:#f0b429;background:linear-gradient(#3a2e14,#1f1a10);box-shadow:0 0 0 2px #f0b429,0 0 40px 4px rgba(240,180,41,.45);color:#ffd27a}
.qw-door[disabled]{cursor:default}

.qw-cta{margin-top:28px;padding:32px 24px;border-radius:16px;background:linear-gradient(160deg,#1f1a3a,#141420);border:1px solid #3a3360;text-align:center}
.qw-cta h2{margin:0 0 12px;font:600 clamp(26px,4vw,36px)/1.1 var(--ds-font-display);letter-spacing:-.02em}
.qw-cta h2 em{font-family:'Playfair Display',Georgia,serif;font-weight:500;color:var(--qw-violet)}
.qw-cta p{max-width:520px;margin:0 auto 20px;font-size:16px;line-height:1.6;color:var(--qw-ink-2)}
.qw-cta-btn{display:inline-block;padding:16px 28px;border-radius:999px;background:#f6f5f2;color:#111113;font:700 16px/1 var(--ds-font-text);text-decoration:none}
.qw-cta-btn:hover{background:#fff}
.qw-cta .qw-fine{margin:14px auto 0;font-size:13px;color:var(--qw-ink-3)}
.qw-past{margin-top:36px}
.qw-past h2{margin:0 0 12px;font:600 1.125rem/1.2 var(--ds-font-display)}
.qw-past ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.qw-past a{display:block;padding:14px 16px;border:1px solid var(--qw-line);border-radius:10px;background:var(--qw-card);color:var(--qw-ink);text-decoration:none;font-weight:600;line-height:1.35}
.qw-past a:hover{border-color:#5f5a80}
.qw-past a span{display:block;margin-bottom:4px;font:500 .7rem/1.3 var(--ds-font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--qw-violet)}
@media (max-width:520px){.qw{padding-top:96px}.qw-step{padding:18px}}
@media (prefers-reduced-motion:reduce){.qw-choice,.qw-door{transition:none}}
