dialog.connection-guide-dialog{width:min(580px,calc(100vw - 32px));transition:width .24s ease;max-width:1380px;max-height:calc(100dvh - 40px);overflow:auto;padding:22px}
.connection-guide-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}
.connection-guide-form,.connection-guide{min-width:0}
.connection-guide{padding:0 0 0 20px;border-left:1px solid #34312c;color:#eee9df}
.connection-guide-heading{font-size:17px;font-weight:650;line-height:1.4}
.connection-guide-step-title{font-size:15px;line-height:1.5;margin:12px 0}
.connection-guide-stage{overflow:visible;border:1px solid #34312c;border-radius:10px;background:#101010;padding:8px;display:flex;flex-direction:column;align-items:center;gap:8px;scrollbar-width:thin;scrollbar-color:#655e51 #151515}
.connection-guide-stage[hidden],.connection-guide-steps[hidden],.connection-guide-navigation[hidden]{display:none}
.connection-guide-image{display:block;flex:none;width:100%;height:auto;object-fit:contain;filter:grayscale(1) sepia(.12)}
.connection-guide-crop{position:relative;width:100%;overflow:hidden;flex:none}
.connection-guide-crop .connection-guide-image{position:absolute;max-width:none;height:auto}
.connection-guide-stage .connection-guide-binance-screen{filter:invert(.91) grayscale(1) sepia(.12)}
.connection-guide .connection-guide-note{font-size:14px;line-height:1.6;color:#bbb5ab;margin:12px 0 0;white-space:pre-line}
.connection-guide-steps{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.connection-guide-step{border:1px solid #484239;background:#171614;color:#ddd3bf;border-radius:7px;width:36px;height:34px;cursor:pointer}
.connection-guide-step[aria-current=step]{background:#e8d8b7;color:#171614}
.connection-guide-step:focus-visible{outline:2px solid #e8d8b7;outline-offset:3px}
.connection-guide-navigation{display:flex;justify-content:space-between;gap:12px;margin:16px 0 0}
.connection-guide-navigation button:disabled{opacity:.35;cursor:default}
button.connection-selected{width:100%;text-align:left;color:inherit;font:inherit;cursor:pointer}
button.connection-selected:hover{border-color:#bcb19a}
button.connection-selected:focus-visible{outline:2px solid #e8d8b7;outline-offset:3px}
@media(max-width:900px){
 dialog.connection-guide-dialog{width:min(720px,calc(100vw - 26px));padding:18px;max-height:calc(100dvh - 28px)}
 .connection-guide-layout{grid-template-columns:minmax(0,1fr);gap:20px}
 .connection-guide{border-left:0;border-top:1px solid #34312c;padding:18px 0 0;width:100%}
 
}

dialog.connection-guide-dialog.connection-guide-open{width:min(calc(590px + var(--guide-panel-width,641px)),calc(100vw - 32px))}
.connection-guide-open .connection-guide-layout{grid-template-columns:minmax(320px,520px) minmax(0,var(--guide-panel-width,641px))}
.connection-guide[hidden]{display:none}
.connection-guide-open .connection-guide{animation:guide-reveal .24s ease}
.connection-guide-toggle{margin:12px 0 18px;color:#e8d8b7}
@keyframes guide-reveal{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:translateX(0)}}
@media(max-width:900px){dialog.connection-guide-dialog.connection-guide-open{width:min(720px,calc(100vw - 26px))}.connection-guide-open .connection-guide-layout{grid-template-columns:minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){dialog.connection-guide-dialog{transition:none}.connection-guide-open .connection-guide{animation:none}}


.connection-guide-note a{color:#e8d8b7;text-decoration:underline;text-underline-offset:3px}
.connection-guide-stage{width:100%;box-sizing:border-box}
.connection-guide[data-guide=okx] .connection-guide-image{max-width:100%!important}

/* Every screenshot has its final geometry before loading and paints only after decode. */
.connection-guide-frame{position:relative;overflow:hidden;width:100%;flex:none;background:#151515}
.connection-guide-frame .connection-guide-image{opacity:0}
.connection-guide-frame[data-state=ready] .connection-guide-image{opacity:1}
.connection-guide-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;font-size:13px;color:#aaa49a;text-align:center}
.connection-guide-loading button{color:#e8d8b7}
.connection-guide-fragments{flex-direction:row;flex-wrap:wrap;align-items:flex-start;justify-content:flex-start;gap:16px}
.connection-guide-fragments .connection-guide-frame{width:min(100%,var(--screen-width))}
