/* s2ar examples: the walkthrough pages' generated classes (.wt-*) and the live demos' output (.s2ar-*). Brand tokens
   from the landing; pass #55C98A, partial/seal #E6B54C, fail #E06550 on ink #090C13. */
:root{--wt-ink:#090C13;--wt-panel:#111726;--wt-panel2:#19212F;--wt-line:#232C40;--wt-text:#DCE3EE;--wt-muted:#8592A6;
  --wt-seal:#E6B54C;--wt-ring:#7FC7FF;--wt-pass:#55C98A;--wt-fail:#E06550;--wt-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace}
.wt-banner{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:18px 0 6px;padding:14px;border:1px solid var(--wt-line);
  border-left:4px solid var(--wt-seal);border-radius:12px;background:var(--wt-panel)}
.wt-banner.wt-pass{border-left-color:var(--wt-pass)} .wt-banner.wt-fail{border-left-color:var(--wt-fail)} .wt-banner.wt-partial{border-left-color:var(--wt-seal)}
.wt-tile b{display:block;font-family:var(--wt-mono);font-size:22px;color:var(--wt-text);font-variant-numeric:tabular-nums}
.wt-tile span{font-size:12px;color:var(--wt-muted);line-height:1.3}
.wt-outcome{grid-column:1/-1;font-size:14px;color:var(--wt-text);border-top:1px solid var(--wt-line);padding-top:10px;margin-top:2px}
@media (max-width:720px){.wt-banner{grid-template-columns:repeat(2,minmax(0,1fr))}}
.wt-verdict{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px;margin:12px 0 10px;padding:10px 14px;border-radius:10px;background:var(--wt-panel);border:1px solid var(--wt-line);font-family:var(--wt-mono);font-size:13px}
.wt-verdict b{letter-spacing:.06em;font-size:12.5px;padding:2px 8px;border-radius:6px;color:var(--wt-ink);background:var(--wt-seal)}
.wt-verdict.wt-pass b{background:var(--wt-pass)} .wt-verdict.wt-fail b{background:var(--wt-fail)} .wt-verdict.wt-partial b{background:var(--wt-seal)}
.wt-verdict .wt-meta{color:var(--wt-muted)}
.hash{font-family:var(--wt-mono);color:var(--wt-ring);cursor:copy;border-bottom:1px dotted var(--wt-line)} .hash.copied{color:var(--wt-pass)}
.wt-kv{width:100%;border-collapse:collapse;margin:0 0 10px;font-size:13.5px;border:1px solid var(--wt-line);border-radius:10px;overflow:hidden}
.wt-kv th{text-align:left;font-weight:600;text-transform:none;letter-spacing:0;color:var(--wt-muted);font-family:var(--wt-mono);font-size:12.5px;padding:6px 10px;width:34%;border-bottom:1px solid var(--wt-line);background:var(--wt-panel)}
.wt-kv td{padding:6px 10px;border-bottom:1px solid var(--wt-line);overflow-wrap:anywhere} .wt-kv tr:last-child td,.wt-kv tr:last-child th{border-bottom:0}
details{margin:0 0 12px} details>summary{cursor:pointer;color:var(--wt-muted);font-size:13px;font-family:var(--wt-mono);padding:4px 0} details[open]>summary{color:var(--wt-text)}
.wt-fig{margin:10px 0}.wt-fig img{max-width:100%;height:auto;border-radius:10px;border:1px solid var(--wt-line);background:#000}
.wt-fig figcaption{font-size:12px;color:var(--wt-muted);font-family:var(--wt-mono);margin-top:4px}
.wt-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} @media (max-width:600px){.wt-pair{grid-template-columns:1fr}}
.wt-checks{width:100%;border-collapse:collapse;font-size:13.5px;margin:0 0 18px;border:1px solid var(--wt-line);border-radius:10px;overflow:hidden}
.wt-checks th{text-align:left;text-transform:none;letter-spacing:0;font-size:12px;color:var(--wt-muted);padding:6px 10px;background:var(--wt-panel);border-bottom:1px solid var(--wt-line)}
.wt-checks td{padding:6px 10px;border-bottom:1px solid var(--wt-line);vertical-align:top} .wt-checks tr:last-child td{border-bottom:0}
.wt-checks td.ok{color:var(--wt-pass);width:1.5em;font-weight:700} .wt-checks td.fail{color:var(--wt-fail);width:1.5em;font-weight:700}
.wt-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:8px 0 18px}
@media (max-width:860px){.wt-cards{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:520px){.wt-cards{grid-template-columns:1fr}}
.wt-card{display:flex;flex-direction:column;gap:6px;padding:0 0 12px;border:1px solid var(--wt-line);border-radius:12px;background:var(--wt-panel);color:var(--wt-text);text-decoration:none;overflow:hidden;transition:border-color .15s}
.wt-card:hover{border-color:var(--wt-ring);text-decoration:none}
.wt-card .wt-thumb{display:block;aspect-ratio:4/3;background:var(--wt-panel2) center top/cover no-repeat;border-bottom:1px solid var(--wt-line)}
.wt-card b{padding:4px 12px 0;font-size:15px;line-height:1.3} .wt-card .wt-outcome{grid-column:auto;border:0;padding:0 12px;margin:0;font-size:13px;color:var(--wt-seal)}
.wt-card .wt-meta{padding:0 12px;font-family:var(--wt-mono);font-size:12px;color:var(--wt-muted)}
/* the live demos' output */
.s2ar-verdict{font-family:var(--wt-mono);font-size:14px;padding:10px 14px;border-radius:10px;background:var(--wt-panel);border:1px solid var(--wt-line);border-left:4px solid var(--wt-seal);margin:10px 0}
.s2ar-402{padding:10px 14px;border-radius:10px;background:var(--wt-panel);border:1px solid var(--wt-line);border-left:4px solid var(--wt-seal);margin:10px 0}
.s2ar-ways{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.s2ar-pack{display:inline-block;padding:7px 12px;border-radius:9px;border:1px solid var(--wt-line);background:var(--wt-panel2);color:var(--wt-text);text-decoration:none;font-size:13.5px}
.s2ar-pack.s2ar-first{background:var(--wt-ring);color:var(--wt-ink);font-weight:600;border-color:var(--wt-ring)}
.s2ar-pack:hover{border-color:var(--wt-ring);text-decoration:none}
.s2ar-hint{font-size:13px;color:var(--wt-muted)}
.s2ar-checks{width:100%;border-collapse:collapse;font-size:13px;margin:8px 0;border:1px solid var(--wt-line);border-radius:10px;overflow:hidden}
.s2ar-checks th{text-align:left;font-size:12px;color:var(--wt-muted);padding:6px 10px;background:var(--wt-panel)} .s2ar-checks td{padding:6px 10px;border-top:1px solid var(--wt-line);vertical-align:top;overflow-wrap:anywhere}
.s2ar-checks tr.ok td:nth-child(2){color:var(--wt-pass);font-weight:700} .s2ar-checks tr.fail td:nth-child(2){color:var(--wt-fail);font-weight:700}
.s2ar-record{font-family:var(--wt-mono);font-size:13px;color:var(--wt-muted)} .s2ar-record a{color:var(--wt-seal)}
.s2ar-meta{font-size:12.5px;color:var(--wt-muted);font-family:var(--wt-mono)}
.s2ar-error{color:var(--wt-fail);font-family:var(--wt-mono);font-size:13px}