/* sh-0 · node 1 · the toll */

#heat{
  position:fixed;
  inset:0;
  z-index:0;
  display:block;
  pointer-events:none;
}

/* ─── spec ─── */

.spec{
  display:flex;
  flex-wrap:wrap;
  gap:0 44px;
  margin-bottom:8vh;
}

.sp{display:flex;flex-direction:column;gap:7px;padding:2px 0}

.sk{
  font-size:.66rem;
  letter-spacing:.3em;
  color:var(--bone-dim);
  text-transform:lowercase;
}

.sv{
  font-size:1.05rem;
  letter-spacing:.1em;
  color:var(--bone-lit);
  font-variant-numeric:tabular-nums;
}

/* ─── pay ─── */

.pay{
  font-family:var(--mono);
  font-size:.82rem;
  letter-spacing:.52em;
  text-indent:.52em;
  text-transform:lowercase;
  color:var(--bone);
  background:rgba(10,12,15,.5);
  border:1px solid rgba(207,201,189,.22);
  padding:17px 34px;
  cursor:pointer;
  transition:color .5s, border-color .5s, box-shadow .6s, letter-spacing .8s;
}

.pay:hover{
  color:var(--bone-hot);
  border-color:var(--blood);
  letter-spacing:.6em;
  box-shadow:0 0 40px rgba(140,28,23,.3), inset 0 0 26px rgba(140,28,23,.10);
}

.pay:active{transform:translateY(1px)}

.pay[disabled]{
  opacity:.28;
  cursor:default;
  border-color:rgba(207,201,189,.1);
  box-shadow:none;
  letter-spacing:.52em;
}

.warn{
  margin-top:3.4vh;
  font-size:.74rem;
  letter-spacing:.16em;
  color:var(--bone-dim);
  opacity:.65;
}

/* ─── work ─── */

.hash{
  font-size:clamp(.56rem,1.75vw,.86rem);
  letter-spacing:.14em;
  color:var(--bone-dim);
  word-break:break-all;
  line-height:1.9;
  margin-bottom:5vh;
  min-height:3.8em;
  transition:color .3s;
}

.hash b{
  color:var(--bone-hot);
  font-weight:400;
  text-shadow:0 0 16px rgba(207,201,189,.6);
}

.hash.hot b{
  color:#ffd9a8;
  text-shadow:0 0 22px rgba(255,150,60,.75);
}

/* ─── bar ─── */

.bar{
  height:1px;
  background:rgba(207,201,189,.1);
  position:relative;
  overflow:hidden;
  margin-bottom:6vh;
}

.bar i{
  position:absolute;
  inset:0 auto 0 0;
  width:0;
  background:linear-gradient(90deg, rgba(207,201,189,.35), #ffb06a);
  box-shadow:0 0 14px rgba(255,140,60,.6);
  transition:width .35s ease;
}

/* ─── telemetry ─── */

.tele{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
  margin-bottom:6vh;
}

.te{display:flex;flex-direction:column;gap:6px}

.tk{
  font-size:.64rem;
  letter-spacing:.28em;
  color:var(--bone-dim);
}

.tv{
  font-size:.96rem;
  letter-spacing:.06em;
  color:var(--bone-lit);
  font-variant-numeric:tabular-nums;
}

.log{
  font-size:.74rem;
  letter-spacing:.16em;
  color:var(--bone-dim);
  min-height:3em;
  line-height:2;
  white-space:pre-line;
}

/* ─── paid ─── */

.nonce{
  font-size:clamp(.72rem,2.1vw,1.1rem);
  letter-spacing:.2em;
  color:var(--bone-hot);
  word-break:break-all;
  line-height:2;
  margin-bottom:6vh;
  text-shadow:0 0 26px rgba(255,170,90,.35);
}

.nonce span{color:var(--bone-dim);letter-spacing:.3em;font-size:.68rem;display:block;margin-bottom:12px}

@media (max-width:620px){
  .tele{grid-template-columns:repeat(2,1fr);gap:18px}
  .spec{gap:0 26px}
}