@font-face{font-family:Inter;src:url('./fonts/InterVariable.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
:root{font-family:Inter,system-ui,sans-serif;color:#141820;background:#fefffb;font-synthesis:none;--blue:#014efe;--fail:#c93618;--line:#d6d7d1;--mono:ui-monospace,SFMono-Regular,Consolas,monospace}
*{box-sizing:border-box}body{margin:0}main{max-width:1920px;margin:auto;padding:40px 48px 22px}p{margin:0}.eyebrow,.label{font:600 15px/1.4 var(--mono);letter-spacing:.12em;color:var(--blue)}.eyebrow:before{content:'';display:inline-block;width:10px;height:10px;background:var(--blue);margin-right:12px}.eyebrow span{margin-left:22px;color:#59616e;font-size:14px}h1{font-size:54px;line-height:1.2;letter-spacing:-.025em;margin:18px 0 12px;font-weight:730}mark{background:var(--blue);color:#fff;padding:1px 10px 5px}.intro{font-size:22px;color:#4e5663;line-height:1.5}.rule{display:flex;align-items:center;border:1px solid var(--line);margin:25px 0 24px;min-height:108px;background:#f4f5f1}.rule>div{padding:18px 34px;border-right:1px solid var(--line);min-width:260px}.rule .label{display:block;color:#505968;font-size:14px}.rule strong{display:block;margin-top:7px;font:600 30px var(--mono);color:var(--blue)}.rule p{font-size:21px;font-weight:650;margin-left:auto;padding:16px 30px;line-height:1.6}.rule p span{font-size:17px;color:#535b68;font-weight:400}#scene{display:grid;grid-template-columns:1.15fr 1.15fr .7fr;gap:20px}.group{border:1px solid var(--line);min-width:0;background:#fefffb;padding:22px 22px 18px}.group h2{font-size:28px;margin:8px 0 5px;font-weight:680;letter-spacing:-.02em}.group .sub{font-size:17px;color:#58606d;line-height:1.4}.group .label{font-size:14px}.graph{display:block;width:100%;height:322px;overflow:visible}.edge{stroke:var(--blue);stroke-width:3;opacity:.36}.edge.complete{opacity:.85;stroke-width:4}.edge.uncounted{stroke:#606978;stroke-dasharray:6 7;opacity:.75}.node{cursor:pointer;outline:none}.node:focus circle{stroke-width:5}.node circle{fill:#fefffb;stroke:#606978;stroke-width:2}.node.passed circle{fill:var(--blue);stroke:var(--blue)}.node.passed .initial{fill:white}.node.failed circle{stroke:var(--fail)}.node .initial{font:650 18px Inter,system-ui;fill:#2c3545}.node text{text-anchor:middle}.node .key{font:14px var(--mono);fill:#3f4a60}.node .chiptext{font:700 14px var(--mono);fill:#fff;letter-spacing:.05em}.node .chip{fill:#5d6572}.node.passed .chip{fill:var(--blue)}.node.failed .chip{fill:var(--fail)}.node .detail{font:14px var(--mono);fill:#475264}.group-result{border-top:1px solid var(--line);padding-top:15px;display:flex;align-items:baseline;gap:12px;min-height:43px}.group-result strong{font:650 28px var(--mono);color:var(--blue)}.group-result span{font-size:17px;color:#535b68}.group-note{font-size:17px;line-height:1.45;margin-top:5px;min-height:49px}.playback{display:grid;grid-template-columns:300px 1fr auto;align-items:center;gap:24px;margin-top:25px;padding:20px 0;border-bottom:1px solid var(--line);border-top:1px solid var(--line)}.time>span{display:block}.time #phase{margin-top:6px;font-size:16px;color:#59616e}input[type=range]{accent-color:var(--blue);width:100%;height:30px;cursor:pointer}.transport{display:flex;gap:10px}button,.load{font:600 15px var(--mono);text-transform:uppercase;border:1px solid var(--blue);padding:14px 21px;color:var(--blue);background:transparent;cursor:pointer;letter-spacing:.04em}button:disabled{opacity:.35;cursor:default}button#play{background:var(--blue);color:white}button:focus-visible,.load:focus-within{outline:3px solid #c93618;outline-offset:3px}footer{display:flex;justify-content:space-between;align-items:center;margin-top:19px;gap:20px}#result{font-size:27px;letter-spacing:-.02em}#caveat{font:13px/1.5 var(--mono);color:#5d6572;margin-top:7px}.load{font-size:13px;padding:12px;position:relative;white-space:nowrap}.load input{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}.selection{font:13px/1.5 var(--mono);color:#58606d;margin-top:12px;min-height:20px;overflow-wrap:anywhere}#error{padding:20px;border:1px solid var(--fail);color:var(--fail);font-size:20px}#scene.generic{grid-template-columns:1fr}#scene.generic .graph{height:322px}
@media(min-width:1600px){main{padding-top:42px}.graph{height:322px}}
@media(max-width:1200px){main{padding:28px}h1{font-size:40px}.rule>div{min-width:180px;padding:16px}.rule p{padding:16px;font-size:18px}.playback{grid-template-columns:240px 1fr}.transport{grid-column:1/-1;justify-content:center}#scene{grid-template-columns:1fr 1fr}.group:last-child{grid-column:1/-1}.group:last-child .graph{height:240px}}
@media(max-width:650px){main{padding:20px 16px}h1{font-size:36px;line-height:1.4;margin:12px 0}mark{padding:2px 4px;box-decoration-break:clone;-webkit-box-decoration-break:clone}.intro{font-size:18px}.eyebrow span{display:block;margin:7px 0 0 22px;font-size:12px}.rule{display:grid;grid-template-columns:1fr 1fr;margin:22px 0 16px}.rule>div{min-width:0;padding:14px;border-bottom:1px solid var(--line)}.rule strong{font-size:25px}.rule .label{font-size:12px}.rule p{font-size:16px;margin:0;padding:14px}.rule p span{display:none}#scene{grid-template-columns:1fr;gap:16px}.group{padding:18px 12px}.group h2{font-size:26px}.group .sub{font-size:16px}.graph{height:322px}.group:last-child .graph{height:240px}.group-result strong{font-size:25px}.group-note{font-size:16px;min-height:0}.playback{grid-template-columns:1fr;gap:14px;margin-top:18px;padding:16px 0}.time{display:flex;align-items:center;justify-content:space-between}.time #phase{font-size:13px;margin:0}.transport{grid-column:auto;gap:8px;justify-content:stretch}button{padding:12px 0;flex:1;font-size:14px}footer{display:block}#result{font-size:25px}#caveat{font-size:12px}.load{display:block;margin-top:18px;width:max-content}.selection{font-size:12px}#scene.generic .graph{height:auto;min-height:500px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* Keep the complete scene, controls and provenance inside a 1080p capture. */
@media(min-width:1600px){
  main{padding:26px 48px 14px}
  h1{font-size:50px;margin:14px 0 10px}
  .rule{min-height:92px;margin:18px 0}
  .rule>div{padding:12px 30px}
  .rule strong{font-size:28px;margin-top:4px}
  .group{padding:18px 22px 14px}
  .group h2{font-size:27px;margin-top:6px}
  .graph{height:295px}
  .group-note{font-size:16px;min-height:46px}
  .group-result{padding-top:12px;min-height:39px}
  .playback{margin-top:18px;padding:15px 0}
  footer{margin-top:14px}
  #caveat{font-size:14px}
  .selection{font-size:14px;margin-top:7px}
}
.node[data-status=not_credentialed] circle{stroke:#757d89;stroke-dasharray:4 4;fill:#f1f2ee}
.node[data-status=not_credentialed] .chip,.node[data-status=excluded_duplicate] .chip{fill:#5d6572}
.node[data-status=excluded_duplicate] circle{stroke:#5d6572;fill:#dedfd9}
.node.failed[data-status=credentialed_not_passed] circle{fill:#fce8e1}