.entry{background:var(--paper);min-height:100svh;position:relative;overflow:hidden}.entry-mark{padding-inline:var(--gutter);pointer-events:none;place-items:center;display:grid;position:absolute;inset:0}.entry-logo{width:100%;color:var(--ink)}.entry-bottom{left:var(--gutter);right:var(--gutter);top:calc(50% + (100vw - 2 * var(--gutter)) * 53 / 700 + clamp(28px, 6vh, 64px));text-align:center;transition:opacity .4s var(--ease), transform .5s var(--ease);justify-items:center;gap:14px;display:grid;position:absolute}.entry-bottom.ok{opacity:0;transform:translateY(10px)}.entry-form{font-family:var(--mono);width:max(180px, calc(var(--len) * (1ch + .32em) + 52px));max-width:100%;font-size:18px;position:relative}.entry-form input{border:1.5px solid var(--rosa);background:var(--paper);width:100%;height:54px;color:var(--ink);font:inherit;letter-spacing:.32em;text-align:center;text-indent:.32em;border-radius:999px;outline:none;padding:0 22px;transition:box-shadow .25s,border-color .25s;display:block}.entry-form input::placeholder{color:var(--rosa);opacity:1}.entry-form input:focus{box-shadow:0 0 0 5px var(--rosa-soft)}.entry-go{background:var(--rosa);color:var(--ink);font:600 15px var(--ui);letter-spacing:.01em;opacity:0;pointer-events:none;transition:opacity .25s var(--ease), transform .35s var(--ease);border-radius:999px;position:absolute;inset:0}.entry-form.filled:hover .entry-go,.busy .entry-go,.ok .entry-go{opacity:1;pointer-events:auto}.entry-form.filled:hover .entry-go:active{transform:scale(.98)}.bad .entry-form input{border-color:var(--accent);animation:entry-shake .45s var(--ease)}@keyframes entry-shake{20%,60%{transform:translate(-6px)}40%,80%{transform:translate(6px)}}.entry-msg{min-height:1.5em;color:var(--accent);font-size:13px}@media (prefers-reduced-motion:reduce){.bad .entry-form input{animation:none}}.entry-waves{pointer-events:none;height:58vh;transition:opacity .5s var(--ease);position:absolute;inset:auto 0 0;overflow:hidden;-webkit-mask:linear-gradient(#0000,#000 45%);mask:linear-gradient(#0000,#000 45%)}.entry:has(.entry-bottom.ok) .entry-waves{opacity:0}.wave{width:200%;animation:linear infinite wave-x,ease-in-out infinite alternate wave-y;position:absolute;bottom:0;left:0}.wave.w1{opacity:.28;height:78%;animation-duration:26s,7s}.wave.w2{opacity:.38;height:60%;animation-duration:18s,5.5s;animation-direction:reverse,alternate}.wave.w3{opacity:.55;height:42%;animation-duration:12s,4.5s}@keyframes wave-x{to{transform:translate(-50%)}}@keyframes wave-y{to{translate:0 12%}}@media (prefers-reduced-motion:reduce){.wave{animation:none}}
