:root {
  color-scheme: light;
  --ink: #20242b;
  --muted: #777d87;
  --line: #d3d7dd;
  --mono: monospace;
  font: 13px/1.5 var(--mono);
  color: var(--ink);
  background: #fff;
}

* { box-sizing: border-box; }
body { margin: 0; }
main { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; position: relative; }
[hidden] { display: none !important; }

.core-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
#core { position: absolute; left: 0; top: 0; margin: 0; font: 13px var(--mono); color: var(--ink); user-select: none; pointer-events: none; transform-origin: center; will-change: transform; }
#core-slot { height: 124px; margin-bottom: 26px; }
.panel { grid-area: 1 / 1; width: min(380px, calc(100% - 48px)); padding: 36px 0; text-align: center; }
.wordmark { margin: 0; font: inherit; }
.wordmark span { display: inline-block; }
.tagline { max-width: 300px; margin: 20px auto 0; line-height: 1.65; color: #737983; text-wrap: balance; }
.entry-form { margin-top: 48px; }
.entry-label { display: block; color: #626a76; }
.input-line { display: flex; align-items: center; width: 100%; margin-top: 12px; border-bottom: 1px solid var(--line); transition: border-color 180ms, box-shadow 180ms; }
.input-line:focus-within { border-color: var(--ink); box-shadow: 0 1px 0 var(--ink); }
input { min-width: 0; width: 100%; border: 0; border-radius: 0; padding: 14px 4px 15px; font: inherit; color: var(--ink); background: transparent; outline: none; text-align: center; caret-color: var(--ink); }
input::placeholder { color: #b2b7bf; opacity: 1; }
#invite-code { text-transform: lowercase; }
.input-hint { margin: 13px 0 0; color: #8a909a; }
.status { min-height: 42px; margin: 20px 0 0; font-size: 13px; line-height: 1.6; color: #757b86; }
.country-code { flex: 0 0 50px; border-right: 1px solid #e1e4e8; color: #686f7a; }
.phone-line input { padding-right: 20px; }
.back { margin: 8px 0 0; }
.back a { color: #8a909a; text-decoration: none; text-underline-offset: 4px; }
.back a:hover { color: var(--ink); text-decoration: underline; }
.back a:focus-visible { outline: 1px solid var(--ink); outline-offset: 5px; }

#welcome { --title-reveal: 0; --tagline-reveal: 0; --form-reveal: 0; }
#welcome .wordmark { opacity: var(--title-reveal, 1); }
#welcome .tagline { opacity: var(--tagline-reveal, 1); transform: translateY(calc((1 - var(--tagline-reveal, 1)) * 8px)); }
#welcome .entry-form, #welcome .status { opacity: var(--form-reveal, 1); transform: translateY(calc((1 - var(--form-reveal, 1)) * 10px)); }
.leaving #welcome .entry-form, .leaving #welcome .status, .leaving .back { opacity: 0; transform: translateY(-6px); transition: opacity 220ms ease, transform 220ms ease; }
.signup-panel .entry-form, .signup-panel .status, .signup-panel .back { animation: arrive 420ms ease both; }
.returning .signup-panel .entry-form, .returning .signup-panel .status, .returning .signup-panel .back { animation: depart-back var(--return-duration, 420ms) ease both; }
.arriving-back #welcome .entry-form, .arriving-back #welcome .status { animation: return-to-code 220ms ease backwards; }
@keyframes arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes depart-back { from { opacity: var(--return-opacity, 1); transform: var(--return-transform, translateY(0)); } to { opacity: 0; transform: translateY(8px); } }
@keyframes return-to-code { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 420px) {
  .panel { width: calc(100% - 48px); }
  .tagline { max-width: 250px; }
  .entry-form { margin-top: 38px; }
  .phone-line input { padding-right: 8px; }
  .country-code { flex-basis: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}