:root{color-scheme:dark;--bg:#000;--panel:#1c1d1e;--card:#242526;--muted:#a3a3ab;--line:#38383d;--purple:#8965ff;--light:#bdb0f8;--white:#f5f5f7;--amber:#ffd78b;font-family:Arial,Helvetica,sans-serif;font-size:16px}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--white)}button,input,a{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.4}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--light);outline-offset:4px}a{color:inherit;text-decoration:none}button{color:inherit}h1,h2,h3,p{margin-top:0}h1{font-size:1.9rem;line-height:1.2;margin-bottom:12px}h2{font-size:1.85rem;font-weight:500;line-height:1.3}h3{font-size:1.2rem}svg{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sidebar{position:fixed;top:0;bottom:0;width:232px;border-right:1px solid #242427;padding:34px 18px 24px;display:flex;flex-direction:column;background:#080809;z-index:9}.brand{display:flex;align-items:center;gap:12px;font-size:.875rem;letter-spacing:.08em;padding:0 12px 36px}.brand-icon{width:32px;height:32px;display:grid;place-items:center;border:1px solid #88838f;border-radius:7px;font-size:1.1rem}.brand b{display:block;font-size:.75rem;letter-spacing:.25em;color:var(--light);margin-top:3px}nav{display:grid;gap:8px}nav button{border:0;background:transparent;text-align:left;display:flex;align-items:center;gap:19px;padding:14px 18px;border-radius:7px;color:#b7b7bf}nav button:hover{background:#1b1b20}nav button.active{color:var(--light);background:#211b34}nav svg{width:21px;height:21px}.sidebar-note{margin-top:auto;padding:32px 12px 0;color:#a2a2ab;font-size:.875rem;line-height:1.6}.sidebar-note p{margin:12px 0 0}.small-badge{font-size:.75rem;font-weight:700;letter-spacing:.1em;padding:6px 9px;border:1px solid #67552f;color:var(--amber);background:#2a2318;border-radius:4px;white-space:nowrap}main{margin-left:232px;padding:0 34px;max-width:1900px}.toolbar{min-height:74px;display:flex;align-items:center;justify-content:space-between}.toolbar-label{font-size:.75rem;letter-spacing:.14em;color:#a3a0af}.toolbar-actions{display:flex;align-items:center;gap:4px}.icon-button{background:transparent;border:0;display:grid;place-items:center;min-width:44px;min-height:44px;color:#a7a7b1;font-size:1.75rem}.icon-button:hover{color:white;background:#202024;border-radius:5px}.toolbar-actions .icon-button+.icon-button{border-left:1px solid #343438;border-radius:0}.menu-toggle{display:none}.page-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin:14px 0 28px}.page-heading p{color:#929298;line-height:1.6;margin-bottom:0}.workspace{background:var(--panel);border-radius:12px;min-height:570px;padding:48px 40px 35px}.timeline{list-style:none;padding:0;margin:0 0 50px;display:flex;justify-content:space-between;position:relative}.timeline:before{content:'';height:1px;background:var(--line);position:absolute;left:3%;right:3%;top:14px}.timeline li{position:relative;display:flex;flex-direction:column;gap:16px;align-items:center;color:#b2b2bb;font-size:.875rem}.step-dot{display:grid;place-items:center;background:var(--panel);border:6px solid var(--panel);border-radius:12px;width:29px;height:29px;color:#7e67c4;font-size:.75rem;font-weight:bold;box-shadow:0 0 0 4px var(--panel)}.current{color:var(--purple)!important}.current .step-dot{border-color:var(--purple);background:var(--purple);color:#15121f}.done .step-dot{color:var(--light);border-color:#554582}.screen{text-align:center;max-width:1020px;margin:auto}.screen h2{margin-bottom:14px}.screen-subtitle{color:var(--muted);line-height:1.65;font-size:.9375rem;margin-bottom:32px}.device-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:37px auto 15px}.device-card{border:1px solid #333438;background:var(--card);border-radius:9px;padding:28px 16px 22px;min-height:242px;display:flex;align-items:center;flex-direction:column;gap:18px;transition:border-color .2s,transform .2s}.device-card:hover{border-color:var(--light);transform:translateY(-3px)}.device-card>svg{width:90px;height:102px;stroke:#c7c5d0;stroke-width:1.4;margin:4px 0 9px}.device-card strong{font-size:1rem;font-weight:500}.device-card small{font-size:.75rem;letter-spacing:.08em;color:#b8a5fb}.connection-card{background:var(--card);max-width:340px;margin:44px auto 26px;border-radius:10px;padding:29px 28px}.connection-card h3{font-size:1.35rem;font-weight:500;line-height:1.35}.primary,.secondary,.text-button{border-radius:5px;padding:12px 23px;font-size:1rem;font-weight:500;min-height:44px}.primary{border:1px solid var(--light);background:var(--light);color:#191222}.primary:hover:not(:disabled){background:#cec3ff}.secondary{background:#303034;border:1px solid #45454c;color:#ededf2}.secondary:hover{background:#3c3c44}.text-button{background:transparent;border:0;color:var(--light)}.actions{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin:25px auto 8px}.note{font-size:.875rem;color:var(--muted);line-height:1.6}.device-caption{display:inline-block;margin-bottom:10px;color:#c1b3ff;font-size:.875rem}.spinner{border:3px solid #39333f;border-top-color:var(--light);width:54px;height:54px;border-radius:50%;margin:40px auto 30px;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.result-icon{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;margin:28px auto;background:#332a4b;color:var(--light)}.result-icon svg{width:30px;height:30px}.error-icon{color:#ffb49f;background:#3c2b26}.callout{max-width:650px;margin:25px auto;padding:17px 20px;border:1px solid #514630;border-radius:7px;background:#27241e;color:#f3d7a4;font-size:.9375rem;line-height:1.65;text-align:left}.token-controls{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin:27px 0 20px}.segmented{display:flex;background:#101013;border:1px solid #414149;border-radius:6px;padding:3px;gap:3px}.segmented button{background:transparent;border:0;padding:8px 16px;border-radius:4px;color:#b6b6bf}.segmented button[aria-pressed=true]{background:#49405f;color:white}.token-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}.token-label{background:#242528;border:1px solid #49494f;border-radius:5px;display:flex;align-items:center;gap:10px;padding:12px 10px;min-width:0}.token-label:focus-within{border-color:var(--light)}.token-label>span{font-size:.875rem;color:#a7a7b1;min-width:20px}.token-label input{border:0;background:transparent;color:var(--white);outline:none;min-width:0;width:100%;font-family:ui-monospace,monospace;font-size:1rem}.token-label input::placeholder{color:#81818c}.token-label input:focus-visible{outline:none}.token-label.filled{border-color:#776394}.progress-copy{text-align:left;color:#bab4c8;font-size:.875rem;min-height:24px;margin:18px 0 0}footer{padding:27px 0 24px;color:#9b9ba5;text-align:center;line-height:1.7;font-size:.8125rem}footer strong{display:block;color:#c6c2cf;font-weight:500}footer span{display:block}.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);max-width:calc(100vw - 32px);padding:14px 20px;border:1px solid #666071;border-radius:8px;background:#2c2837;box-shadow:0 8px 35px #0008;z-index:20;font-size:.875rem;line-height:1.5;display:none}.toast.visible{display:block}dialog{max-width:460px;width:calc(100% - 32px);border:1px solid #53505e;border-radius:12px;padding:24px;background:#202024;color:var(--white)}dialog::backdrop{background:#000b}dialog h2{font-size:1.5rem;margin-top:18px}dialog p{color:#bebbc8;line-height:1.7}.dialog-top{display:flex;justify-content:space-between;align-items:center}dialog .primary{width:100%;margin-top:10px}
@media(min-width:1450px){main{padding:0 55px}.workspace{padding:55px 60px;min-height:630px}.device-grid{margin-top:50px}.device-card{min-height:270px}}
@media(max-width:1100px){.sidebar{width:205px}main{margin-left:205px;padding:0 24px}.workspace{padding:36px 24px}.device-grid{gap:12px}.device-card{padding-left:10px;padding-right:10px}.token-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:850px){.sidebar{display:none;width:232px;box-shadow:12px 0 40px #0009}.sidebar.open{display:flex}main{margin-left:0;padding:0 15px}.menu-toggle{display:grid}.toolbar-label{display:none}.toolbar{min-height:60px}.page-heading{margin-top:7px}.workspace{min-height:567px;padding:48px 20px 30px}.page-heading h1{font-size:1.8rem}.timeline{margin-bottom:45px}}
@media(max-width:520px){.sidebar{top:0}.page-heading{margin-bottom:22px}.page-heading h1{font-size:1.55rem}.page-heading p{font-size:.875rem}.workspace{padding:30px 16px;min-height:520px}.timeline li{font-size:.75rem;gap:12px}.screen h2{font-size:1.55rem}.device-grid{grid-template-columns:1fr;margin-top:25px}.device-card{min-height:110px;display:grid;grid-template-columns:65px 1fr;text-align:left;gap:6px 17px;padding:16px}.device-card>svg{grid-row:span 2;width:55px;height:70px;margin:0}.device-card strong{align-self:end}.device-card small{align-self:start}.token-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.token-controls{justify-content:center}.actions>*{width:100%}.connection-card{padding:26px 18px;margin-top:28px}.callout{font-size:.875rem;padding:13px 15px}.toolbar-actions{gap:0}.toolbar-actions .icon-button{min-width:42px}}
.device-image{display:flex;align-items:center;justify-content:center;width:100%;height:180px;overflow:hidden}
.connection-device{width:min(100%,418px);min-height:110px;margin:30px auto 0;display:flex;align-items:center;justify-content:center}
.connection-device>img{display:block;width:100%;height:auto;object-fit:contain}
.connection-device--stax{width:300px;max-width:100%}.connection-device--stax .device-image{height:125px}.connection-device--stax .device-image img{height:125px}
.connection-device+.connection-card{margin-top:24px}
.device-check-animation{max-width:480px;margin:36px auto 24px;overflow:hidden}
.device-check-animation .connection-device{animation:device-pulse 1.5s ease-in-out infinite}
.check-loader{display:flex;justify-content:center;gap:8px;margin:28px auto 22px}
.check-loader span{width:8px;height:8px;border-radius:50%;background:var(--light);animation:check-dot 1.2s ease-in-out infinite}
.check-loader span:nth-child(2){animation-delay:.15s}.check-loader span:nth-child(3){animation-delay:.3s}
.check-track{height:3px;width:180px;max-width:100%;margin:auto;background:#3b3646;border-radius:3px;overflow:hidden}
.check-track span{display:block;height:100%;background:var(--light);transform-origin:left;animation:check-progress 4.5s linear both}
@keyframes device-pulse{0%,100%{opacity:1;transform:translateY(0)}50%{opacity:.6;transform:translateY(-3px)}}
@keyframes check-dot{0%,80%,100%{opacity:.3;transform:scale(.8)}40%{opacity:1;transform:scale(1.15)}}
@keyframes check-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
:root{--panel:#1b1c1d;--card:#222324;--muted:#b1b1b1;--purple:#8060ff;--light:#bdb0f8;font-family:Inter,Arial,Helvetica,sans-serif}
.sidebar{width:285px;background:#383838;border-right:0;padding:12px 0 24px;overflow-y:auto}
.brand{padding:0 0 20px;flex-direction:column;gap:12px;color:#fff}
.brand img{display:block;width:195px;height:auto}
.screen h2[tabindex="-1"]:focus{outline:none}
.sidebar nav{gap:10px}
.sidebar nav button{border-radius:0;min-height:40px;padding:8px 20px 8px 32px;gap:20px;font-weight:500;color:#b1b1b1}
.sidebar nav button:hover,.sidebar nav button.active{background:#424242;color:#eee}
.sidebar nav [data-icon]{width:16px;height:16px;display:flex;flex:none;color:#a3a4a4}
.sidebar nav .reference-icon{width:16px;height:16px;fill:currentColor;stroke:none;stroke-width:0}
.sidebar-note{padding-left:32px;padding-right:24px;color:#c1c1c1}
main{margin-left:285px}
.device-card{border-color:transparent}
@media(max-width:850px){.sidebar{width:285px}main{margin-left:0}}
.device-image img{display:block;height:180px;width:auto;max-width:100%;object-fit:contain;filter:invert(1)}
.device-image--stax img{height:156px;width:100%;object-fit:cover}
@media(max-width:520px){.device-image{grid-column:1;grid-row:1 / span 2;height:90px}.device-image img{height:90px;max-width:none}.device-image--stax img{height:85px;width:100%;object-fit:cover}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.spinner{border-color:var(--light)}}

@font-face{font-family:Inter;src:url('assets/InterVariable.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
:root{font-family:Inter,Arial,Helvetica,sans-serif}
.sidebar nav .reference-icon{display:block;width:16px;height:16px;min-width:16px;fill:currentColor;stroke:none}