:root {
  color-scheme: light;
  --device-paper: #fbfaf6;
  --device-ink: #062c21;
  --device-muted: #40574a;
  --device-line: #bbc9bb;
  --device-tint: #e9efe7;
  --device-accent: #215e44;
  --device-error: #962d25;
  background: var(--device-paper);
  color: var(--device-ink);
  font: 1rem/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

.device-page {
  margin: 0;
  padding: max(28px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right))
    max(36px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
}

.device-main { max-width: 28rem; margin: min(5vh, 3rem) auto 0; }
.device-main-wide { max-width: 35rem; }
.device-icon { display: block; margin: 0 0 12px; border-radius: 12px; }
.device-brand { display: block; margin: 0 0 9px; font-weight: 650; }
.device-header h1 { margin: 0 0 8px; font-size: clamp(1.65rem, 6vw, 2rem); line-height: 1.18; }
.device-header > p:last-child { margin: 0; color: var(--device-muted); }

.device-form { display: grid; gap: 10px; margin: 24px 0 0; }
.device-form label, .device-invitation label { font-weight: 650; }

.device-form input {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--device-line);
  border-radius: 12px;
  background: #fff;
  color: inherit;
  font: inherit;
}

#device-code { font-family: ui-monospace, Menlo, monospace; }

.device-form input::placeholder { color: var(--device-muted); opacity: 1; }

.device-primary, .device-secondary {
  min-height: 44px;
  padding: 8px 13px;
  border: 1px solid transparent;
  border-radius: 12px;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

.device-primary { min-height: 48px; background: var(--device-accent); color: #fff; }
.device-secondary { background: transparent; color: var(--device-accent); border-color: var(--device-line); }
button:disabled { cursor: default; opacity: .6; }
input:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--device-accent);
  outline-offset: 2px;
}

a { color: var(--device-accent); }
.device-home { width: fit-content; }
.device-help { display: grid; gap: 14px; margin-top: 19px; }
.device-help summary { cursor: pointer; font-weight: 650; }
.device-help p { margin: 7px 0 0; color: var(--device-muted); }

.device-status { margin: 0; color: var(--device-muted); }
.device-status:empty { position: absolute; }
.device-status[data-error="true"] { color: var(--device-error); }

.device-invitation {
  margin: 18px 0 0;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--device-tint);
}
.device-invitation p { margin: 4px 0 0; }
.device-invitation-value, .device-section-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 12px;
}
.device-invitation-value output {
  font: 650 1rem/1.5 ui-monospace, Menlo, monospace;
  overflow-wrap: anywhere;
  user-select: all;
}

.device-section { margin: 24px 0 0; }
.device-section-heading h2 { margin: 0; font-size: 1.16rem; }
.device-list { margin: 7px 0 0; padding: 0; list-style: none; }
.device-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 12px;
  padding: 10px 0;
  border-top: 1px solid var(--device-line);
}
.device-list li div { min-width: 0; overflow-wrap: anywhere; }
.device-list time { display: block; font-size: .875rem; color: var(--device-muted); }