.st-main{
  max-width:860px; margin:0 auto;
  padding:calc(78px + clamp(40px,7vh,86px)) var(--gut) clamp(70px,10vh,120px);
}

.st-head{margin:0 0 clamp(34px,5vh,52px)}
.st-head .h2{margin:10px 0 18px}
.st-head .body{max-width:60ch}
.st-head .preview-flag{margin-top:24px}

.st-gate{
  border:1px solid var(--line); border-radius:14px;
  background:rgba(14,19,15,.42);
  padding:clamp(24px,3.4vw,38px);
  max-width:52ch;
}
.st-gate .h3{margin:0 0 12px}
.st-gate .body{margin:0 0 22px; font-size:17px}
.st-gate .fine{margin:14px 0 0}

.st-body{display:grid; gap:clamp(18px,2.6vw,26px)}

.st-card{
  border:1px solid var(--line); border-radius:14px;
  background:rgba(14,19,15,.42);
  padding:clamp(24px,3.4vw,38px);
}
.st-card-h{display:flex; align-items:baseline; gap:14px; margin:0 0 18px}
.st-card-h .h3{margin:0}
.st-n{
  margin:0; font-family:var(--mono); font-size:13px; letter-spacing:.18em;
  color:var(--gold);
}
.st-card .body{margin:0 0 20px; font-size:17px; max-width:62ch}

.st-state{
  display:flex; align-items:center; gap:11px; flex-wrap:wrap;
  margin:0 0 22px; font-family:var(--mono); font-size:16px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--faint);
}
.st-state b{color:var(--ink); font-weight:400}
.st-dot{
  width:9px; height:9px; border-radius:50%; flex:0 0 auto;
  background:var(--faint);
}
.st-state.on  .st-dot{background:var(--gold);  box-shadow:0 0 10px var(--gold)}
.st-state.ok  .st-dot{background:var(--venom); box-shadow:0 0 10px var(--venom)}
.st-state.ok  b{color:var(--venom)}
.st-state.bad .st-dot{background:var(--bad)}
.st-state.bad b{color:var(--bad)}

.st-facts{
  display:flex; flex-wrap:wrap; gap:14px 36px; margin:0 0 26px;
}
.st-facts div{display:grid; gap:4px; position:relative}
.st-facts div + div::before{
  content:""; position:absolute; left:-19px; top:1px; bottom:1px; width:2px;
  background:var(--px-rule-v);
}
.st-facts dt{
  font-family:var(--mono); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint);
}
.st-facts dd{margin:0; font-family:var(--mono); font-size:15px; color:var(--body)}
.st-facts code{font:inherit; color:var(--ink)}

.st-track{
  list-style:none; margin:0; padding:0;
  display:grid; gap:16px; counter-reset:st;
}
.st-track li{
  display:grid; gap:2px;
  padding:13px 16px 13px 44px; position:relative;
  border:1px solid var(--line2); border-radius:9px;
  background:rgba(3,6,4,.3); color:var(--faint);
  transition:border-color .3s, background .3s, color .3s;
}
.st-track li::before{
  content:""; position:absolute; left:17px; top:50%;
  width:10px; height:10px; margin-top:-5px; border-radius:50%;
  border:1.5px solid var(--line2); background:transparent;
  transition:border-color .3s, background .3s;
}
.st-track li b{font-size:16px; font-weight:700; color:var(--body)}
.st-track li span{font-size:14px; line-height:1.55}
.st-track li.done{border-color:rgba(61,224,138,.3)}
.st-track li.done::before{background:var(--venom); border-color:var(--venom)}
.st-track li.done b{color:var(--ink)}
.st-track li.here{
  border-color:var(--gold); background:rgba(40,30,6,.34); color:var(--body);
}
.st-track li.here::before{
  background:var(--gold); border-color:var(--gold);
  box-shadow:0 0 0 4px rgba(244,183,40,.16);
}
.st-track li.here b{color:var(--gold)}

.st-track li + li::after{
  content:""; position:absolute; left:21px; top:-17px; width:2px; height:16px;
  background:repeating-linear-gradient(180deg,
    rgba(244,244,240,.38) 0 2px, transparent 2px 5px);
}

.st-track li.done + li::after{
  background:repeating-linear-gradient(180deg,
    rgba(61,224,138,.6) 0 2px, transparent 2px 5px);
}

.st-addr{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:12px 14px; margin:22px 0 10px;
  border:1px solid var(--line2); border-radius:10px;
  background:rgba(3,6,4,.4);
}
.st-addr .btn{flex:0 0 auto}

.st-addr #stSave{margin-left:2px}

.st-addr code{
  flex:1 1 220px; min-width:0;
  white-space:normal; overflow-wrap:anywhere; word-break:break-all;
  font-family:var(--mono); font-size:15px; color:var(--venom);
  letter-spacing:.02em; line-height:1.5;
}

.st-addr .eye{position:static; flex:0 0 auto}

.st-frozen{
  margin:12px 0 0; padding:12px 14px; border-radius:9px;
  border:1px solid var(--line2); background:rgba(3,6,4,.4);
  font-size:14px; line-height:1.65; color:var(--faint); max-width:62ch;
}
.st-frozen[hidden]{display:none}

.st-pending{
  margin:18px 0 0; padding:18px; border-radius:10px;
  border:1px solid rgba(244,183,40,.42); background:rgba(244,183,40,.06);
}
.st-pending-h{
  margin:0 0 8px; font-family:var(--mono); font-size:15px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--gold);
}
.st-pending .body{margin:0 0 14px}
.st-pending .st-addr{margin:0 0 8px; background:rgba(3,6,4,.45)}
.st-pending .st-addr code{color:var(--gold)}
.st-pending .fine{margin:0 0 14px}
.st-pending .fine:last-child{margin:12px 0 0}

.st-addr input{
  flex:1 1 220px; min-width:0;
  background:none; border:0; outline:0; padding:0;
  font-family:var(--mono); font-size:15px; color:var(--ink);
  letter-spacing:.02em;
}
.st-addr input::placeholder{color:var(--faint)}
.st-addr input[hidden]{display:none}
.st-addr code[hidden]{display:none}

.st-addr [hidden]{display:none !important}
.st-addr .eye[hidden]{display:none}

.st-addr:focus-within{border-color:var(--gold)}
#stNewState{margin:0 0 4px}
#stNewState[hidden]{display:none}
#stAddrKept[hidden]{display:none}
.st-row{display:flex; gap:12px; flex-wrap:wrap; margin:16px 0 0}
.st-row .btn{flex:0 1 auto}

.st-nom .field{margin:0 0 18px}
.st-nom .field-box{display:flex; align-items:center; gap:2px; padding-left:14px}
.st-nom .q-at{
  font-family:var(--mono); font-size:16px; color:var(--faint); flex:0 0 auto;
}
.st-nom .field-box input{padding-left:2px}

.st-cardout{display:grid; gap:4px; justify-items:stretch}

.st-cardimg{
  position:relative; width:100%; aspect-ratio:1200/630; margin:0 auto;
  border-radius:12px; overflow:hidden; background:#07090A;
  border:1px solid var(--line2);
}
.st-cardimg img{width:100%; height:100%; display:block; transition:opacity .15s}
.st-cardimg[aria-busy="true"] img{opacity:.35}
.st-drawing{
  position:absolute; inset:0; margin:0; display:grid; place-items:center;
  padding:0 16px; text-align:center;
  font-family:var(--mono); font-size:13px; letter-spacing:.04em; color:var(--paper, #F4F4F0);
}
.st-cardout .st-row{justify-content:center}
.st-cardout .state{text-align:center; max-width:46ch; margin:16px auto 0}

.st-done .st-state{margin:0 0 8px; font-size:17px}

.st-nom-grid{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:28px; align-items:start}
.st-nom-steps{display:grid; gap:10px; margin:6px 0 0}
.st-nom-steps .btn{width:100%; white-space:nowrap}
.st-nom-steps .btn:disabled{opacity:.45; cursor:not-allowed}

.st-nom-steps .btn.is-done{background:var(--venom); border-color:var(--venom); color:#04140B; opacity:1}

.st-nom-grid .field-box{padding-left:0}
.st-nom-form .fine{margin-top:12px}
.st-done .st-cardout{margin-top:16px}
@media (max-width:760px){
  .st-nom-grid{grid-template-columns:1fr}
}

@media (max-width:560px){
  .st-card{padding:20px 17px}
  .st-gate{padding:20px 17px}
  .st-facts{gap:12px 22px}
  
  .st-facts div + div::before{display:none}
  .st-row .btn{flex:1 1 100%}
}