/* Connect: page layout only. Components come from felt.css. */

.hero { position: relative; isolation: isolate; overflow: clip; padding: 40px 0 150px;
  background: radial-gradient(45% 50% at 78% 45%, rgba(246, 181, 68, .14), transparent 70%), radial-gradient(70% 55% at 22% 8%, #3a2654 0%, transparent 70%), var(--night); }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: var(--grain); background-size: 180px; mix-blend-mode: overlay; opacity: .2; }
.scenery { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hang-star { position: absolute; top: 0; display: flex; flex-direction: column; align-items: center; transform-origin: 50% 0; }
.hang-star .thread-line { height: var(--len); background: rgba(251, 241, 225, .3); }
.hang-star svg { width: 30px; height: 30px; margin-top: -2px; }
.hang-star.s1 { left: 4%; } .hang-star.s2 { right: 5%; }

.hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.hero-copy { max-width: 680px; }
.hero .title { font-size: clamp(56px, 5.8vw, 92px); }
.ball { margin: 0; justify-self: center; width: min(100%, 420px); }
.ball img { width: 100%; height: auto; filter: drop-shadow(0 26px 34px rgba(8, 3, 16, .55)); animation: hover 5.5s ease-in-out infinite; }
@keyframes hover { 50% { translate: 0 -10px; } }

.url-block { margin: 8px 0 26px; }
.url-block .field-label { display: block; margin: 0 0 10px; font-weight: 800; }
.url-block .copy-line code { font-size: 17px; }
.keypanel { padding: 26px 28px 24px; }
.keypanel-title { margin: 0 0 8px; font: 400 40px/1 var(--display); }
.key-meta { margin: 0 0 14px; }
.key-meta b { font: 400 30px/1 var(--display); color: var(--amber); margin-right: 2px; }
.keyline { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; padding: 12px 14px 12px 18px; border-radius: 14px 16px 12px 15px; background: var(--night-deep); }
.keyval { font: 700 16px/1.5 var(--mono); color: #fff3d6; word-break: break-all; min-width: 0; flex: 1 1 260px; }
.keyval.is-masked { color: var(--lilac-text); letter-spacing: .08em; }
.keypanel .copy-status { margin-left: 0; }
.keypanel .field-note { margin-top: 4px; }
.mint-row { margin-top: 18px; }
.key-status { min-height: 1.5em; margin: 12px 0 0; font-weight: 800; color: var(--amber); }
.felt-standin.is-busy i { animation: spool 1.2s linear infinite; border-style: dashed; }
#mint-banner:not(:empty) { margin-top: 10px; }

/* ---------- setup ---------- */
.setup { position: relative; padding: 40px 0 20px; }
.setup-wrap { max-width: 980px; }
.setup .lede { max-width: 40em; }
.setup .tabs { margin-top: 26px; }
.tabpanel { padding: 26px 30px 26px; }
.tabpanel:focus-visible { outline-offset: 6px; }
.step-title { margin: 0 0 10px; font: 400 36px/1 var(--display); color: var(--cream); }
.steps { margin: 0 0 16px; padding-left: 1.4em; display: grid; gap: 8px; max-width: 62ch; }
.steps li::marker { font-weight: 800; color: var(--amber); }
.tabpanel code { color: #ffe1a6; }
.tabpanel .codeblock { background: var(--night-deep); margin: 6px 0 14px; }
.tabpanel .codeblock pre { color: #f3e6d0; }
.note { margin: 0; font-size: 16px; color: var(--lilac-text); max-width: 62ch; }
.note.plan { padding: 12px 16px; border-radius: 14px; border: 2.4px dashed var(--amber); color: var(--cream); font-weight: 700; }
.wallets { margin-top: 40px; max-width: 720px; }
.wallets-title { margin: 0 0 8px; font: 400 40px/1 var(--display); }
.wallets p { margin: 0 0 10px; color: var(--ink); }
.page-connect .footbar { margin-top: 30px; }

@media (max-width: 899px) {
  .hero { padding: 20px 0 110px; }
  .hero-grid { grid-template-columns: 1fr; }
  .ball { order: -1; width: 180px; margin-bottom: -10px; }
  .hero .title { font-size: 50px; }
  .keypanel { padding: 22px 18px 20px; }
  .tabs { padding: 0 4px; gap: 4px; }
  .tab { padding: 8px 12px 10px; font-size: 15px; }
  .tabpanel { padding: 22px 18px; }
  .step-title { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) { .ball img { animation: none; } }