:root{
  --ground:#DCDFE2;
  --panel:#F4F5F6;
  --panel-2:#E7EAEC;
  --ink:#1B2126;
  --muted:#6C767E;
  --line:#B2B9BF;
  --line-soft:#C8CDD2;
  --cyan:#00707E;
  --magenta:#9B1B66;
  --amber:#946400;
  --grid:rgba(27,33,38,.055);
  --shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 1px 2px rgba(27,33,38,.10);
}
@media (prefers-color-scheme: dark){
  :root{
    --ground:#12171B;
    --panel:#1A2126;
    --panel-2:#222A30;
    --ink:#E3E9ED;
    --muted:#8C979F;
    --line:#39434B;
    --line-soft:#2C353B;
    --cyan:#3ED0E0;
    --magenta:#FF74B8;
    --amber:#EBB01F;
    --grid:rgba(227,233,237,.06);
    --shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 1px 2px rgba(0,0,0,.4);
  }
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--ground);
  color:var(--ink);
  font:400 15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans","Noto Sans SC","Noto Sans JP","Noto Sans KR","Noto Sans Arabic","Noto Sans Devanagari",sans-serif;
  -webkit-font-smoothing:antialiased;
  padding:clamp(20px,4vw,56px) clamp(16px,4vw,56px) 64px;
}
.wrap{max-width:1120px;margin:0 auto}

.mono{font-family:"SF Mono",SFMono-Regular,ui-monospace,Menlo,Consolas,monospace}

/* Hidden by clipping rather than by an off-canvas offset: a large negative offset
   would widen the document, and in RTL that overflow is scrollable — which parks
   the whole page out of view on load. */
.skip{position:absolute;top:0;inset-inline-start:0;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
  background:var(--ink);color:var(--panel);padding:10px 14px;z-index:99}
.skip:focus{width:auto;height:auto;clip-path:none;top:8px;inset-inline-start:8px}

/* ---------- lockout overlay (the demonstration of what assessment pages show) ---------- */
#lockout{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
  background:rgba(8,11,14,.86);backdrop-filter:blur(3px);padding:24px}
#lockout[hidden]{display:none}
.lockout-card{background:var(--panel);border:1px solid var(--line);max-width:460px;
  padding:clamp(28px,5vw,44px);text-align:center;box-shadow:0 24px 70px rgba(0,0,0,.45)}
.lockout-icon{width:54px;height:54px;margin:0 auto 18px;border:2px solid var(--magenta);color:var(--magenta);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font:700 26px/1 "Avenir Next Condensed","Roboto Condensed","Arial Narrow",sans-serif}
.lockout-card h2{margin:0 0 10px;font:600 12px/1.3 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  letter-spacing:.18em;text-transform:uppercase;color:var(--magenta)}
.lockout-card p{margin:0;font-size:14.5px;color:var(--ink)}
.lockout-note{margin-top:14px !important;font-size:12px !important;color:var(--muted) !important}

/* ---------- masthead ---------- */
.masthead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;
  border-bottom:1px solid var(--line);padding-bottom:14px}
.eyebrow{font-family:"SF Mono",SFMono-Regular,ui-monospace,Menlo,Consolas,monospace;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:10px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--muted);flex:none}
.dot.live{background:var(--cyan);box-shadow:0 0 0 0 currentColor;animation:ping 2.4s ease-out infinite;color:var(--cyan)}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(0,112,126,.45)}70%{box-shadow:0 0 0 7px rgba(0,112,126,0)}100%{box-shadow:0 0 0 0 rgba(0,112,126,0)}}

.bars{display:flex;height:7px;width:154px;border:1px solid var(--line);flex:none}
.bars i{flex:1}
.bars i:nth-child(1){background:#C0C0C0}
.bars i:nth-child(2){background:#C0C000}
.bars i:nth-child(3){background:#00C0C0}
.bars i:nth-child(4){background:#00C000}
.bars i:nth-child(5){background:#C000C0}
.bars i:nth-child(6){background:#C00000}
.bars i:nth-child(7){background:#2020C0}

/* ---------- hero ---------- */
.verdict{padding:clamp(24px,4vw,44px) 0 clamp(24px,4vw,44px);border-bottom:1px solid var(--line)}
h1{
  font:600 13px/1.35 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  margin:0 0 clamp(14px,2.5vw,22px);max-width:44ch;
}
#verdictWord{
  font-family:"Avenir Next Condensed","Roboto Condensed","Arial Narrow",-apple-system,sans-serif;
  font-weight:700;text-transform:uppercase;letter-spacing:-.005em;line-height:.9;
  font-size:clamp(2.6rem,10vw,7rem);margin:0;
  color:var(--ink);
  transition:color .25s ease;
}
:lang(ar) #verdictWord,:lang(hi) #verdictWord,:lang(ja) #verdictWord,:lang(ko) #verdictWord,:lang(zh) #verdictWord{
  font-family:inherit;font-weight:700;text-transform:none;font-size:clamp(2.2rem,7.5vw,5rem);line-height:1.05
}
.v-focused #verdictWord{color:var(--cyan)}
.v-blurred #verdictWord{color:var(--amber)}
.v-hidden  #verdictWord{color:var(--magenta)}
#verdictLine{margin:16px 0 0;max-width:58ch;font-size:1.02rem;color:var(--ink)}
#verdictLine b{font-weight:600}
.lede{margin:18px 0 0;max-width:62ch;font-size:14.5px;color:var(--muted)}
.actions{margin-top:22px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
button{
  font:600 13px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  letter-spacing:.02em;
  background:var(--ink);color:var(--panel);border:1px solid var(--ink);
  padding:11px 18px;border-radius:2px;cursor:pointer;
}
button.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
button:hover{opacity:.85}
button:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.hint{font-size:12.5px;color:var(--muted);max-width:46ch}
.hint.warn{color:var(--magenta)}

/* ---------- layout ---------- */
.cols{display:grid;grid-template-columns:1.55fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:1px}
@media (max-width:820px){.cols{grid-template-columns:1fr}}
.pane{background:var(--panel);padding:18px}
.pane h2{font:600 11px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}

/* ---------- the focus ribbon ---------- */
#timeline{position:relative;height:340px;background:var(--panel-2);direction:ltr;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:22px 22px;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:18px;padding:18px}
@media (max-width:820px){#timeline{height:280px}}
.ribbon{height:56px;border:1px solid var(--line);display:flex;background:var(--panel);overflow:hidden}
.ribbon i{display:block;height:100%;transition:width .3s linear}
.ribbon i.s-focused{background:color-mix(in srgb,var(--cyan) 55%,transparent)}
.ribbon i.s-blurred{background:color-mix(in srgb,var(--amber) 62%,transparent)}
.ribbon i.s-hidden{background:color-mix(in srgb,var(--magenta) 62%,transparent)}
.ribbon-axis{display:flex;justify-content:space-between;
  font-family:"SF Mono",SFMono-Regular,ui-monospace,Menlo,monospace;font-size:10px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-top:-12px}
.legend{display:flex;gap:16px;flex-wrap:wrap;
  font-family:"SF Mono",SFMono-Regular,ui-monospace,Menlo,monospace;font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.legend span{display:flex;align-items:center;gap:6px}
.legend b{width:10px;height:10px;display:block;flex:none}
.legend b.s-focused{background:color-mix(in srgb,var(--cyan) 55%,transparent);border:1px solid var(--cyan)}
.legend b.s-blurred{background:color-mix(in srgb,var(--amber) 62%,transparent);border:1px solid var(--amber)}
.legend b.s-hidden{background:color-mix(in srgb,var(--magenta) 62%,transparent);border:1px solid var(--magenta)}
.bigaway{font-family:"Avenir Next Condensed","Roboto Condensed","Arial Narrow",sans-serif;
  font-weight:700;font-size:clamp(2rem,6vw,3.4rem);line-height:.9;letter-spacing:-.01em}
.bigaway small{display:block;font:400 10.5px/1 "SF Mono",SFMono-Regular,ui-monospace,Menlo,monospace;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
#timelineNote{margin:10px 0 0;font-size:11.5px;color:var(--muted)}

/* ---------- signals ---------- */
.sig{display:grid;grid-template-columns:1fr auto;gap:0 14px;align-items:baseline;margin:0}
.sig dt{font-size:12.5px;color:var(--muted);padding:8px 0;border-top:1px solid var(--line-soft)}
.sig dd{margin:0;padding:8px 0;border-top:1px solid var(--line-soft);text-align:end;
  font-family:"SF Mono",SFMono-Regular,ui-monospace,Menlo,monospace;font-size:12.5px}
.sig dt:first-of-type,.sig dd:first-of-type{border-top:0}
.yes{color:var(--cyan)} .no{color:var(--muted)} .warn{color:var(--magenta)} .caution{color:var(--amber)}

/* ---------- event log table ---------- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-top:0;background:var(--panel)}
table{border-collapse:collapse;width:100%;min-width:660px}
th,td{text-align:start;padding:10px 14px;border-bottom:1px solid var(--line-soft);white-space:nowrap}
th{font:600 10px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);background:var(--panel-2)}
td{font-family:"SF Mono",SFMono-Regular,ui-monospace,Menlo,monospace;font-size:12.5px}
tr:last-child td{border-bottom:0}
tr.empty td{color:var(--muted);font-family:inherit;white-space:normal}
td.ev-away{color:var(--magenta)}
td.ev-blur{color:var(--amber)}
td.ev-back{color:var(--cyan)}

/* ---------- prose sections ---------- */
.prose{margin-top:44px;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px 40px}
.prose section{min-width:0}
h2.sec{font:600 11px/1.3 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0 0 12px;
  padding-bottom:9px;border-bottom:1px solid var(--line-soft)}
.prose p{margin:0 0 11px;font-size:13.8px;color:var(--ink);max-width:54ch}
.prose ol,.prose ul{margin:0 0 11px;padding-inline-start:20px;font-size:13.8px;max-width:54ch}
.prose li{margin:0 0 7px}
.prose b{font-weight:600}
code{font-family:"SF Mono",SFMono-Regular,ui-monospace,Menlo,monospace;font-size:12px;
  background:var(--panel);border:1px solid var(--line-soft);padding:1px 4px;white-space:nowrap}
a{color:var(--cyan)}

/* ---------- faq ---------- */
.faq{margin-top:44px}
.faq h2.sec{max-width:none}
details{border-bottom:1px solid var(--line-soft);background:var(--panel);
  border-inline:1px solid var(--line-soft)}
details:first-of-type{border-top:1px solid var(--line-soft)}
summary{cursor:pointer;padding:13px 16px;font-weight:600;font-size:14px;list-style:none;
  display:flex;justify-content:space-between;gap:14px;align-items:baseline}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--muted);font-family:"SF Mono",SFMono-Regular,ui-monospace,monospace;flex:none}
details[open] summary::after{content:"−"}
summary:hover{color:var(--cyan)}
summary:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}
.faq .ans{padding:0 16px 15px;max-width:70ch}
.faq .ans p{margin:0 0 10px;font-size:13.8px}
.faq .ans p:last-child{margin:0}

/* ---------- related ---------- */
.related{margin-top:44px}
.related p{margin:0;font-size:13.8px;max-width:62ch}

/* ---------- language switcher ---------- */
.langs{margin-top:44px;padding-top:16px;border-top:1px solid var(--line)}
.langs h2{font:600 11px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.langs ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 10px}
.langs a{display:inline-block;font-size:13px;text-decoration:none;color:var(--ink);
  border:1px solid var(--line);padding:6px 11px;border-radius:2px;background:var(--panel)}
.langs a:hover{border-color:var(--cyan);color:var(--cyan)}
.langs a[aria-current="page"]{background:var(--ink);color:var(--panel);border-color:var(--ink)}

footer{margin-top:34px;padding-top:14px;border-top:1px solid var(--line);
  font-size:11.5px;letter-spacing:.03em;color:var(--muted);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer a{color:var(--muted)}

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