:root { color-scheme: light dark; --bg:#f6f7f9; --card:#fff; --fg:#1d2330; --muted:#5b6475; --accent:#0a5fd8; --accent-fg:#fff; --border:#d9dde5; --code:#eef1f6; }
@media (prefers-color-scheme: dark) { :root { --bg:#14171d; --card:#1e232c; --fg:#e8ebf1; --muted:#9aa3b5; --accent:#5b9bff; --accent-fg:#0b1220; --border:#333a47; --code:#141820; } }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:16px; background:var(--bg); color:var(--fg); font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif; }
main { width:100%; max-width:460px; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:28px 24px; }
.product { margin:0 0 8px; font-size:.85rem; color:var(--muted); letter-spacing:.02em; }
h1 { margin:0 0 16px; font-size:1.5rem; }
p { margin:0 0 14px; }
.host { font:600 1.05rem/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; background:var(--code); border:1px solid var(--border); border-radius:8px; padding:10px 12px; overflow-wrap:anywhere; }
.warning { color:var(--muted); font-size:.95rem; }
button { width:100%; min-height:48px; font:inherit; font-weight:600; border:0; border-radius:8px; background:var(--accent); color:var(--accent-fg); cursor:pointer; }
button:focus-visible { outline:3px solid var(--fg); outline-offset:2px; }
[hidden] { display:none !important; }