:root{--paper: #f6f7f4;--panel: #ffffff;--panel-2: #eef0ea;--ink: #161b20;--ink-2: #57606b;--ink-3: #8b939d;--line: #dfe3da;--line-2: #cbd1c4;--live: #0b8a66;--live-bg: #e3f2ec;--amber: #b96a00;--amber-bg: #f8eedd;--danger: #b0362c;--danger-bg: #f7e6e4;--radius: 6px;--font-display: "Archivo", system-ui, sans-serif;--font-body: "IBM Plex Sans", system-ui, sans-serif;--font-mono: "IBM Plex Mono", ui-monospace, monospace}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}h1,h2,h3{font-family:var(--font-display);margin:0;letter-spacing:-.01em}h1{font-size:26px;font-weight:700;font-stretch:87%}h2{font-size:18px;font-weight:650}h3{font-size:15px;font-weight:600}p{margin:0 0 10px}a{color:inherit}button{font-family:inherit}code,.mono{font-family:var(--font-mono);font-size:12.5px}:focus-visible{outline:2px solid var(--live);outline-offset:2px}@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}.shell{display:grid;grid-template-rows:52px 1fr;min-height:100%}.topbar{display:flex;align-items:center;gap:16px;padding:0 20px;background:var(--ink);color:#e9ecef}.topbar .wordmark{font-family:var(--font-display);font-weight:750;font-stretch:80%;font-size:15px;letter-spacing:.04em;text-transform:uppercase}.topbar .wordmark span{color:#8fd8c2}.topbar .session{margin-left:auto;display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:12px;color:#aeb6bd}.dot{width:7px;height:7px;border-radius:50%;background:var(--live);display:inline-block}.topbar button.exit{background:none;border:1px solid #3a424b;color:#aeb6bd;border-radius:var(--radius);padding:4px 10px;font-size:12px;cursor:pointer}.topbar button.exit:hover{color:#fff;border-color:#6b747e}.frame{display:grid;grid-template-columns:208px 1fr;min-height:0}.rail{border-right:1px solid var(--line);padding:20px 12px;background:var(--panel-2)}.rail .rail-label{font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);padding:0 8px;margin:14px 0 6px}.rail button{display:block;width:100%;text-align:left;padding:7px 10px;margin:2px 0;background:none;border:0;border-radius:var(--radius);font-size:13.5px;color:var(--ink-2);cursor:pointer}.rail button:hover{background:#e4e7de;color:var(--ink)}.rail button.active{background:var(--ink);color:#fff}.main{padding:26px 30px 60px;max-width:1060px}.eyebrow{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-3);margin-bottom:6px}.lede{color:var(--ink-2);max-width:64ch}.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;margin:16px 0}.panel h2{margin-bottom:6px}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}.badge{display:inline-block;font-family:var(--font-mono);font-size:11px;padding:2px 8px;border-radius:999px;border:1px solid var(--line-2);color:var(--ink-2);vertical-align:middle}.badge.live{background:var(--live-bg);color:var(--live);border-color:transparent}.badge.demo{background:var(--amber-bg);color:var(--amber);border-color:transparent}.badge.err{background:var(--danger-bg);color:var(--danger);border-color:transparent}.btn{display:inline-block;background:var(--ink);color:#fff;border:0;border-radius:var(--radius);padding:8px 16px;font-size:13.5px;font-weight:500;cursor:pointer;text-decoration:none}.btn:hover{background:#2a323b}.btn.secondary{background:none;color:var(--ink);border:1px solid var(--line-2)}.btn.secondary:hover{background:var(--panel-2)}.btn:disabled{opacity:.5;cursor:default}input[type=text],select,input[type=number]{font-family:var(--font-mono);font-size:13px;padding:8px 10px;border:1px solid var(--line-2);border-radius:var(--radius);background:var(--panel);color:var(--ink);width:100%}table{width:100%;border-collapse:collapse;font-size:13px}th{text-align:left;font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);border-bottom:1px solid var(--line);padding:6px 10px 6px 0}td{border-bottom:1px solid var(--line);padding:8px 10px 8px 0;vertical-align:top}.gate{min-height:100%;display:grid;place-items:center;padding:24px;background:linear-gradient(var(--paper),var(--paper)),repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 80px)}.gate-card{width:min(460px,100%);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:30px}.gate-card h1{margin:4px 0 10px}.gate-card .field{margin:16px 0 10px}.gate .demo-keys{margin-top:18px;padding-top:14px;border-top:1px dashed var(--line-2)}.gate .demo-keys button{background:none;border:1px solid var(--line-2);border-radius:999px;font-family:var(--font-mono);font-size:12px;padding:3px 10px;margin:3px 6px 3px 0;cursor:pointer;color:var(--ink-2)}.gate .demo-keys button:hover{border-color:var(--ink);color:var(--ink)}.gate .error{color:var(--danger);font-size:13px;margin-top:8px}.stages{display:flex;gap:0;margin:20px 0 6px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}.stages button{flex:1;background:var(--panel);border:0;border-right:1px solid var(--line);padding:10px 6px;cursor:pointer;font-size:12.5px;color:var(--ink-2)}.stages button:last-child{border-right:0}.stages button .stage-k{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;color:var(--ink-3)}.stages button.active{background:var(--ink);color:#fff}.stages button.active .stage-k{color:#8fd8c2}.trace{margin-top:14px}.trace-lanes{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);text-align:center;border-bottom:2px solid var(--ink);padding-bottom:6px}.trace-step{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;border-bottom:1px solid var(--line);position:relative;min-height:52px}.trace-arrow{position:relative;grid-column:span 2;height:100%;display:flex;align-items:center}.trace-arrow.right{grid-column:1 / 3}.trace-arrow.far{grid-column:1 / 4}.trace-arrow.back{flex-direction:row-reverse}.trace-line{flex:1;height:1px;background:var(--ink-2);position:relative}.trace-line:after{content:"";position:absolute;right:-1px;top:-3px;border:4px solid transparent;border-left-color:var(--ink-2)}.trace-arrow.back .trace-line:after{right:auto;left:-1px;border-left-color:transparent;border-right-color:var(--ink-2)}.trace-label{position:absolute;left:50%;transform:translate(-50%,-16px);font-family:var(--font-mono);font-size:11.5px;background:var(--panel);padding:0 6px;white-space:nowrap;color:var(--ink)}.trace-ms{font-family:var(--font-mono);font-size:11px;color:var(--live);text-align:right;padding-right:8px}.trace-detail{grid-column:1 / 4}.trace-detail pre{background:var(--ink);color:#cfe8dd;font-family:var(--font-mono);font-size:12px;padding:12px 14px;border-radius:var(--radius);overflow-x:auto;margin:8px 0 14px;max-height:300px}.trace-toggle{background:none;border:0;font-family:var(--font-mono);font-size:11px;color:var(--ink-2);cursor:pointer;text-decoration:underline;padding:0 8px}.stat-row{display:flex;gap:14px;flex-wrap:wrap;margin:12px 0}.stat{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);padding:10px 16px;min-width:130px}.stat .n{font-family:var(--font-display);font-size:24px;font-weight:700}.stat .k{font-family:var(--font-mono);font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.08em}.linkbox{font-family:var(--font-mono);font-size:12px;background:var(--panel-2);border:1px dashed var(--line-2);border-radius:var(--radius);padding:10px 12px;word-break:break-all;margin-top:10px}.note{font-size:12.5px;color:var(--ink-3)}.footer-note{margin-top:40px;padding-top:14px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-3)}@media (max-width: 860px){.frame{grid-template-columns:1fr}.rail{display:flex;overflow-x:auto;padding:8px;border-right:0;border-bottom:1px solid var(--line)}.rail .rail-label{display:none}.rail button{width:auto;white-space:nowrap}.grid-2{grid-template-columns:1fr}.main{padding:18px 16px 60px}}