:root { color-scheme: light dark; --paper:#f4f0e7; --sheet:#fffdf8; --ink:#29251f; --muted:#746d63; --rule:#d9d1c4; --accent:#dba93f; --danger:#a13d34; }
@media (prefers-color-scheme:dark) { :root { --paper:#1d1b18; --sheet:#27231f; --ink:#f5efe5; --muted:#b4aa9d; --rule:#494239; --accent:#e0ac42; --danger:#f18579; } }
* { box-sizing:border-box; }
body { margin:0; min-height:100dvh; display:grid; place-items:center; padding:max(24px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); background:radial-gradient(circle at 20% 0%, color-mix(in srgb,var(--accent) 16%,transparent),transparent 42%),var(--paper); color:var(--ink); font:15px/1.5 ui-sans-serif,-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif; }
.card { width:min(100%,440px); padding:32px; border:1px solid var(--rule); border-radius:20px; background:var(--sheet); box-shadow:0 22px 70px rgba(32,26,17,.16); }
.mark { width:48px; height:48px; display:grid; place-items:center; border-radius:14px; background:var(--ink); color:var(--sheet); font:italic 700 25px/1 Georgia,serif; box-shadow:inset 0 -5px 0 var(--accent); }
.eyebrow { margin:24px 0 4px; color:var(--muted); font-size:11px; font-weight:750; letter-spacing:.12em; text-transform:uppercase; }
h1 { margin:0; font:700 34px/1.1 Georgia,serif; letter-spacing:-.025em; }
.lead { margin:13px 0 24px; color:var(--muted); }
label { display:block; margin-bottom:7px; font-size:12px; font-weight:700; }
input { width:100%; min-height:58px; padding:10px 14px; border:1px solid var(--rule); border-radius:12px; background:var(--paper); color:var(--ink); font:650 18px/1.25 ui-sans-serif,-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif; letter-spacing:normal; }
input.pairing-code { font:650 22px/1 ui-monospace,"SFMono-Regular",monospace; letter-spacing:.09em; text-transform:uppercase; }
input:focus { outline:3px solid color-mix(in srgb,var(--accent) 45%,transparent); border-color:var(--accent); }
button { width:100%; min-height:50px; margin-top:12px; border:0; border-radius:12px; background:var(--ink); color:var(--sheet); font:700 15px/1 inherit; cursor:pointer; }
button:disabled { opacity:.55; cursor:wait; }
.message { min-height:22px; margin:10px 0 0; color:var(--danger); font-size:13px; }
.boundary { display:grid; gap:4px; margin-top:22px; padding-top:19px; border-top:1px solid var(--rule); color:var(--muted); font-size:12px; }
.boundary b { color:var(--ink); }
@media (max-width:480px) { .card { padding:25px 21px; border-radius:17px; } h1{font-size:30px;} }