/* Public shell (pairing / sign-in). Glasses: additive display, so black is transparent and text is bright. */
:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; background: #000; color: #f2f5f7; font: 18px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
main { max-width: 640px; margin: 0 auto; padding: 16px; }
h1 { font-size: 26px; margin: 8px 0 12px; }
h2 { font-size: 21px; margin: 24px 0 8px; }
p { margin: 8px 0; }
.lead { color: #d0d8de; }
a { color: #8fd0ff; }
.error { color: #ffb4a8; border: 2px solid #ff7a66; padding: 8px 12px; border-radius: 8px; }
.note { color: #c8f5c8; border: 2px solid #5fbf5f; padding: 8px 12px; border-radius: 8px; }
label { display: block; margin: 14px 0 6px; font-weight: 600; }
input[type="text"], input[type="password"] { width: 100%; font: inherit; padding: 12px; border-radius: 8px; border: 2px solid #8a96a0; background: #11161a; color: #fff; }
button { font: inherit; font-weight: 600; min-height: 48px; padding: 10px 18px; margin: 14px 8px 0 0; border-radius: 10px; border: 2px solid #ff8a33; background: #1d1206; color: #fff; cursor: pointer; }
button.secondary { border-color: #9aa6b0; background: #11161a; }
:focus-visible { outline: 3px solid #ffd166; outline-offset: 3px; }
table { width: 100%; border-collapse: collapse; font-size: 16px; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid #39434b; vertical-align: middle; }
td button { margin: 0; min-height: 44px; }
.table-wrap { overflow-x: auto; }
dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 12px; }
dt { font-weight: 600; color: #d0d8de; }
dd { margin: 0; overflow-wrap: anywhere; }
.code-small { font-family: ui-monospace, Consolas, monospace; font-size: 22px; letter-spacing: 2px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Glasses (600 x 600). */
body.glasses main { width: 600px; height: 600px; max-width: none; padding: 28px 36px; display: flex; flex-direction: column; justify-content: center; }
body.glasses h1 { font-size: 30px; }
body.glasses .code { font-family: ui-monospace, Consolas, monospace; font-size: 64px; font-weight: 700; letter-spacing: 6px; margin: 16px 0; color: #fff; }
body.glasses .hint { font-size: 17px; color: #d0d8de; }
body.glasses button { font-size: 22px; min-width: 200px; }