:root { --fg: #1d1d1f; --bg: #fbfbfd; --quiet: #6e6e73; --line: #d2d2d7; --accent: #0a66d8; --bad: #c4291c; }
@media (prefers-color-scheme: dark) { :root { --fg: #f5f5f7; --bg: #111113; --quiet: #a1a1a6; --line: #3a3a3c; --accent: #4c9aff; --bad: #ff6b5e; } }
* { box-sizing: border-box; }
body { margin: 0; font: 17px/1.5 -apple-system, system-ui, "Segoe UI", Roboto, sans-serif; color: var(--fg); background: var(--bg); }
main { max-width: 34rem; margin: 0 auto; padding: 3rem 1.25rem; }
h1 { font-size: 1.6rem; line-height: 1.2; margin: 0 0 1rem; }
a { color: var(--accent); }
.quiet { color: var(--quiet); font-size: .9rem; }
.bad { color: var(--bad); }
.big { font-size: 1.3rem; margin: .5rem 0; }
.code { font-family: ui-monospace, Menlo, monospace; letter-spacing: .05em; }
code { font-family: ui-monospace, Menlo, monospace; font-size: .9em; }
dl { display: grid; grid-template-columns: auto 1fr; gap: .25rem 1rem; margin: 1.25rem 0; }
dt { color: var(--quiet); }
dd { margin: 0; overflow-wrap: anywhere; }
button, .button { display: inline-block; font: inherit; font-weight: 600; padding: .6rem 1.1rem; border-radius: .6rem; border: 0;
  background: var(--accent); color: #fff; text-decoration: none; cursor: pointer; }
button.secondary { background: transparent; color: var(--accent); border: 1px solid var(--line); font-weight: 500; }
input { font: inherit; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: .5rem; background: transparent; color: inherit;
  font-family: ui-monospace, Menlo, monospace; text-transform: uppercase; width: 12rem; }
ul.devices { list-style: none; padding: 0; margin: 1.5rem 0; }
ul.devices li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--line); }
ul.devices form { margin: 0; }