*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
[hidden] { display: none !important; } /* a class that sets display (.btn, .stack) must never show a hidden element */
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-1);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}
h1, h2, h3 { line-height: 1.3; margin: 0 0 var(--space-3); font-weight: var(--w-strong); letter-spacing: -0.01em; color: var(--text); }
h1 { font-size: var(--fs-3); }
h2 { font-size: var(--fs-2); }
p { margin: 0 0 var(--space-3); }
a { color: var(--c-orange-700); font-weight: 500; text-underline-offset: 3px; }
/* explicit colors: inputs must never inherit a light text color from a colored panel (the white-on-white name bug) */
button, input, select, textarea { font: inherit; }
input, select, textarea { color: var(--text); background-color: var(--surface); }
button { color: inherit; }
::placeholder { color: var(--text-muted); opacity: 0.7; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
img { max-width: 100%; }

.app-shell { min-height: 100vh; display: flex; flex-direction: column; }
.container { width: 100%; max-width: 1100px; margin: 0 auto; padding: var(--space-5) var(--space-4); }
/* the navbar: white, a thin bottom line, dark text (daisyUI navbar) */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  padding: var(--space-2) var(--space-4);
  background: var(--surface); background: color-mix(in srgb, var(--surface) 88%, transparent);
  -webkit-backdrop-filter: blur(var(--blur)); backdrop-filter: blur(var(--blur));
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.brand { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: var(--w-strong); font-size: var(--fs-2); color: var(--text); margin-right: auto; text-decoration: none; letter-spacing: -0.01em; }
.brand img { width: 32px; height: 32px; border-radius: 50%; background: var(--surface-2); }
.stack { display: flex; flex-direction: column; gap: var(--space-3); }
.row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.muted { color: var(--text-muted); }
.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: var(--fs-0); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }