:root {
  --bg1: #f7f3ee; --ink: #1d2a2e; --muted: #6f7f84; --line: #e6e8ec;
  --accent: #518b99; --accent-strong: #3d6b76; --surface: #fffdfa; --flag: #a9765a;
  --ring: rgba(81, 139, 153, .22);
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", -apple-system, "Segoe UI", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg1); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; min-height: 100dvh; color: var(--ink); font: 400 16px/1.5 var(--font-body); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
.door { min-height: 100dvh; max-width: 360px; margin: 0 auto; padding: max(48px, env(safe-area-inset-top)) 16px 48px; display: grid; align-content: center; gap: 28px; }
.door-title { margin: 0; font: 400 44px/1.05 var(--font-display); letter-spacing: -0.01em; }
.door-note { margin: 0; color: var(--muted); }
.door-form { display: grid; gap: 18px; }
.door-field { display: grid; gap: 6px; font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.door-field input { width: 100%; min-height: 48px; padding: 10px 14px; font: 400 16px var(--font-body); color: var(--ink); text-transform: none; letter-spacing: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; outline: none; transition: border-color .6s, box-shadow .6s; }
.door-field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
#go { min-height: 48px; margin-top: 4px; font: 500 16px var(--font-body); color: #fff; background: var(--accent); border: 0; border-radius: 8px; cursor: pointer; transition: background-color .6s; }
#go:hover { background: var(--accent-strong); }
#go:disabled { opacity: .55; cursor: default; }
.door-error { margin: 0; min-height: 1.5em; color: var(--flag); font-size: 14px; }