/* The landing: what someone sees after scanning. The device says hello, then one obvious action (save the contact), then the links in the mode's order. */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--page); }
body { font: 500 16px/1.4 Fredoka, system-ui, sans-serif; color: var(--ink); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
main { max-width: 440px; margin: 0 auto; padding: max(20px, env(safe-area-inset-top)) 20px max(32px, env(safe-area-inset-bottom)); text-align: center; }
.dev { position: relative; width: min(215px, 56vw); aspect-ratio: 358 / 592; margin: 0 auto; animation: arrive .5s ease-out both; }
@keyframes arrive { from { transform: translateY(18px); opacity: 0; } }
.lcd { position: absolute; z-index: 2; background: var(--lcd); overflow: hidden; outline: 1.6px solid var(--ink); display: grid; place-items: center; text-align: center;
  font: 400 15px/1.1 Silkscreen, monospace; color: var(--px); }
.lcd .boot { position: absolute; left: 0; right: 0; top: 40%; animation: drop .8s cubic-bezier(.2, .7, .3, 1) .2s both, hide .01s 1.2s forwards; }
.lcd .hello { opacity: 0; animation: show .01s 1.2s forwards; } .lcd .hello b { display: block; font-weight: 400; font-size: 30px; margin-bottom: 6px; }
.lcd .hello .cursor { animation: blink 1s steps(2) 1.2s infinite; }
@keyframes drop { from { transform: translateY(-260%); } }
@keyframes show { to { opacity: 1; } }
@keyframes hide { to { opacity: 0; visibility: hidden; } }
@keyframes blink { 50% { opacity: 0; } }
.press { position: absolute; z-index: 3; left: 74%; top: 69%; width: 20%; height: 13%; border: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
h1 { font-size: 34px; line-height: 1.05; font-weight: 700; margin-top: 20px; letter-spacing: -.01em; color: var(--word); }
.line { font-size: 17px; color: #444852; margin-top: 6px; }
.actions { display: grid; gap: 10px; margin-top: 22px; }
.btn { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 0 18px; border: 2.6px solid var(--ink); border-radius: 18px;
  background: #ece9e3; color: var(--ink); font: 600 17px/1 Fredoka, sans-serif; text-decoration: none; text-align: left; }
.btn.save { background: var(--on); font-weight: 700; font-size: 18px; min-height: 62px; }
.btn small { display: block; font: 500 13px/1.2 Fredoka, sans-serif; color: #4a4d57; margin-top: 3px; }
.btn .go { font-size: 20px; }
.btn:active { transform: translateY(2px); }
.btn:focus-visible, .other a:focus-visible { outline: 3px solid var(--word); outline-offset: 3px; }
.other { margin-top: 22px; font-size: 15px; color: #444852; } .other a { color: var(--word); font-weight: 600; }
.foot { margin-top: 26px; font: 400 10px/1.4 Silkscreen, monospace; color: #565a63; letter-spacing: .06em; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; } }