:root {
  --ground: #060608;
  --ink: #ffffff;
  --ink-rgb: 255 255 255;
  --ink-mute: #809b8f;
  --accent-rgb: 216 239 98;
  --accent-deep: #d8ef62;
  --rule: rgb(255 255 255 / 0.16);
  --radius: 0;
  --wake: 180ms ease;
  --sans: Arial, Helvetica, sans-serif;
  --serif: Georgia, serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { overflow: hidden; color-scheme: dark; }

/* Google's real control stays over the Fab-painted face: Google owns the
   click and the browser gesture, while both providers share one visual door. */
#google-btn {
  position: relative;
  width: min(320px, 100%);
  height: 40px;
  overflow: hidden;
}
#google-slot { position: absolute; inset: 0; opacity: 0; }
#google-slot > * { width: 100% !important; }
#google-face { position: absolute; inset: 0; }
#google-btn:focus-within #google-face {
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.34);
}

.door-btn {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: min(320px, 100%);
  height: 40px;
  font: 500 14px/1 var(--sans);
  color: var(--ink);
  background: rgb(var(--ink-rgb) / 0.06);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--wake);
}
.door-btn.on { display: flex; }
.door-btn:hover { background: rgb(var(--ink-rgb) / 0.12); }
.door-btn:disabled { opacity: .55; cursor: default; }
.door-btn svg { width: 18px; height: 18px; flex: none; }