/* The lock. A calm, near-empty sky; the name; one passkey action. Nothing of the orbit shows until the passkey opens it. */
html,body{height:100%}
body{position:relative;overflow:hidden;display:grid;grid-template-rows:1fr auto 1fr;justify-items:center;
  background:radial-gradient(50vmin 50vmin at 50% 46%,rgba(120,170,230,.035),transparent 70%),#020308}
.np{grid-row:2;position:relative;z-index:1;transition:opacity .5s .25s}
.np h1{transition:text-shadow .6s,color .6s}
body.open .np h1{text-shadow:0 0 22px rgba(120,180,255,.7),0 0 2px rgba(var(--chart),.9)}
body.open .np{opacity:0}
.act{grid-row:3;align-self:start;position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:14px;padding-top:56px;transition:opacity .3s}
body.open .act{opacity:0}
.go{position:relative;display:inline-flex;align-items:center;gap:12px;height:44px;padding:0 20px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(var(--chart),.85);transition:color .15s}
.go::before{content:'';position:absolute;inset:0;pointer-events:none;--c:rgba(206,222,240,.5);transition:--c .2s;
  background:linear-gradient(var(--c),var(--c)) 0 0/8px 1px,linear-gradient(var(--c),var(--c)) 0 0/1px 8px,linear-gradient(var(--c),var(--c)) 100% 0/8px 1px,linear-gradient(var(--c),var(--c)) 100% 0/1px 8px,
    linear-gradient(var(--c),var(--c)) 0 100%/8px 1px,linear-gradient(var(--c),var(--c)) 0 100%/1px 8px,linear-gradient(var(--c),var(--c)) 100% 100%/8px 1px,linear-gradient(var(--c),var(--c)) 100% 100%/1px 8px;background-repeat:no-repeat}
.go:hover{color:rgb(var(--chart))}
.go:hover::before{--c:rgba(206,222,240,.95)}
.go svg{flex:none}
/* waiting for the passkey: the three cells of the mark step, like a display working */
.go.wait{color:rgba(var(--chart),.5);cursor:default}
.go.wait svg rect{animation:step 1.2s steps(1) infinite}
.go.wait svg rect:nth-child(2){animation-delay:.4s}
.go.wait svg rect:nth-child(3){animation-delay:.8s}
@keyframes step{0%{opacity:1}33%{opacity:.25}}
.say{min-height:16px;font-size:11px;letter-spacing:.04em;color:rgba(var(--chart),.45)}
.away{font-size:11px;letter-spacing:.04em;color:rgba(var(--chart),.4)}
@media (max-width:720px){
  /* on a phone the action sits where the thumb is */
  body{grid-template-rows:1fr auto 1fr auto}
  .act{grid-row:4;padding:0 0 calc(env(safe-area-inset-bottom,0px) + 56px)}
  .np h1{font-size:40px}
}
/* sign-up: the handle the plate will carry */
.hn{display:flex;align-items:baseline;gap:12px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(var(--chart),.45)}
.hn input{width:210px;background:none;border:0;border-bottom:1px dotted rgba(206,222,240,.35);border-radius:0;color:rgb(var(--chart));font:15px/1.4 var(--mono);letter-spacing:.06em;padding:4px 2px;outline:0}
.hn input::placeholder{color:rgba(var(--chart),.3)}
.hn input:focus{border-bottom-color:rgba(206,222,240,.8)}
/* recovery (NOTES T5): which machines hold the key, the recovery string, or a new key and who must pair again */
.rec{max-width:min(420px,calc(100vw - 32px));text-align:center;font-size:11.5px;line-height:1.6;letter-spacing:.03em;color:rgba(var(--chart),.6)}
.rec b{font-weight:400;color:rgb(var(--chart))}
.rec.warn{color:#f0b44c}
.hn.key input{width:min(300px,calc(100vw - 120px))}
.alt{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(var(--chart),.45);text-decoration:underline dotted;text-underline-offset:3px}