/* project6: @handle form + preview card (on top of the original scene styles) */
.hform{display:flex;align-items:center;gap:6px;flex:0 1 420px;min-width:0;min-height:56px;padding:5px 5px 5px 20px;border-radius:999px;border:1px solid rgba(207,227,245,.22);background:rgba(3,4,5,.55);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:border-color .25s,box-shadow .25s}
.hform:focus-within{border-color:rgba(207,227,245,.5);box-shadow:0 0 0 6px rgba(207,227,245,.07)}
.hform.bad{border-color:rgba(255,142,122,.7);animation:hfShake .35s}
@keyframes hfShake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.hf-in{display:flex;align-items:center;gap:2px;flex:1 1 auto;min-width:0;font:500 17px var(--body);color:var(--soft);cursor:text}
.hf-in input{flex:1 1 auto;min-width:0;width:100%;border:0;background:none;outline:none;color:var(--ink);font:500 17px var(--body);padding:0}
.hf-in input::placeholder{color:#55606B}
.hform .btn{flex:none;min-height:46px;padding:0 22px}

.nav-x{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;border-radius:999px;border:1px solid rgba(255,255,255,.16);color:var(--ink,#eef2f6);text-decoration:none;transition:border-color .25s,background .25s,transform .25s}
.nav-x svg{width:16px;height:16px}
.nav-x:hover{border-color:rgba(207,227,245,.45);background:rgba(207,227,245,.07);transform:translateY(-1px)}
.nav-x:focus-visible{outline:2px solid #CFE3F5;outline-offset:3px}
@media (max-width:640px){.nav-x{display:none}}
.hcard{width:330px;max-width:100%;padding:16px;border-radius:22px;border:1px solid rgba(207,227,245,.16);background:linear-gradient(180deg,rgba(207,227,245,.07),rgba(207,227,245,.02));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 18px 50px -24px rgba(207,227,245,.35);text-transform:none;letter-spacing:0;color:var(--ink);font:400 13px var(--body);display:flex;flex-direction:column;gap:12px;margin-bottom:6px}
.hc-top{display:flex;justify-content:space-between;gap:12px;font:500 10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.hc-who{display:flex;align-items:center;gap:12px}
.hc-av{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font:700 17px var(--headline);color:var(--bg);background:linear-gradient(135deg,hsl(var(--h,205) 60% 84%),hsl(calc(var(--h,205) + 40) 40% 55%))}
.hc-id{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 auto}
.hc-id b{font:600 15px var(--body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hc-id small{font-size:11px;color:var(--dim)}
.hc-badge{flex:none;padding:5px 9px;border-radius:999px;font:600 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--warn);border:1px solid rgba(233,194,122,.35);background:rgba(233,194,122,.08);transition:color .3s,border-color .3s,background .3s}
.hcard.claimed .hc-badge{color:var(--accent);border-color:rgba(207,227,245,.4);background:rgba(207,227,245,.08)}
.hc-coin{display:flex;align-items:center;gap:12px;padding:10px;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:rgba(3,4,5,.45)}
.hc-logo{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:radial-gradient(circle at 50% 35%,rgba(207,227,245,.25),rgba(207,227,245,.05));box-shadow:inset 0 0 0 1px rgba(207,227,245,.22);font:700 14px var(--mono);color:var(--accent)}
.hc-coin b{display:block;font:600 14px var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hc-coin small{font-size:11px;color:var(--dim)}
.hc-fees{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.hc-fees span{font:500 10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.hc-fees b{font:600 14px var(--mono);font-variant-numeric:tabular-nums}
.hc-bar{height:3px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden}
.hc-bar span{display:block;height:100%;width:0;background:var(--accent);transition:width .2s linear}
.hc-claim{min-height:42px;border-radius:999px;background:var(--ink);color:var(--bg);font:600 14px var(--body);display:flex;align-items:center;justify-content:center;gap:8px;transition:background .3s,color .3s}
.hcard.claimed .hc-claim{background:rgba(207,227,245,.14);color:var(--accent)}
/* with the preview card the hero copy is taller than a phone screen: let the hero grow instead of clipping its top */
@media (max-width:640px){.hero{height:auto;min-height:100svh;padding-top:104px}.hero-side{flex:1 1 100%}.hcard{width:100%}.hform{flex-basis:100%}}