:root{color-scheme:dark;font:16px system-ui;background:#15141b;color:#f5f0ff}body{margin:0}main{max-width:430px;padding:36px 26px;margin:auto}.brand{font-weight:650;color:#c9b4ff}.symbol{font-size:60px;margin:50px 0 24px}h1{font-size:38px;line-height:1.1;letter-spacing:-1.4px}p,small{color:#bdb6cd;line-height:1.6}button{width:100%;padding:17px;border:0;border-radius:12px;background:#c9b4ff;color:#20152f;font:600 16px system-ui;margin:14px 0}button:disabled{opacity:.5}meter{display:block;width:100%;height:22px;margin:20px 0}small{display:block;font-size:12px}[hidden]{display:none}
.connection-art{margin:28px 0;color:#c9b4ff}.connection-art svg{width:100%;display:block}.connection-art>div{display:flex;justify-content:space-between;font-size:10px;letter-spacing:1px}.steps{list-style:none;padding:0;margin:24px 0}.steps li{display:flex;gap:14px;margin:22px 0}.step-icon{border:1px solid #655873;border-radius:50%;width:28px;height:28px;flex-shrink:0;display:grid;place-items:center;color:#c9b4ff;font-size:13px}.steps b{font-size:15px}.steps p{font-size:13px;margin:5px 0}.connected #recordStep .step-icon{background:#c9b4ff;color:#20152f}.signal-flow{stroke-dashoffset:0}.connected .signal-flow{animation:flow 1.5s linear infinite}@keyframes flow{to{stroke-dashoffset:-26}}@media(prefers-reduced-motion:reduce){.connected .signal-flow{animation:none}}h1{font-size:32px}main{padding-top:25px}details{margin:22px 0;font-size:13px;line-height:1.6}summary{cursor:pointer;color:#c9b4ff}label[for=level]{font-size:12px;color:#bdb6cd}#status{padding:12px;border-left:2px solid #c9b4ff;background:#211d2b;font-size:14px}button:focus-visible,summary:focus-visible{outline:2px solid white;outline-offset:4px}