*,*::before,*::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font);
  font-size: 17px; line-height: 1.25; -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none; touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
[data-style="loose"][data-mode="dark"] body { background: radial-gradient(1200px 700px at 20% -10%, #0b3a3a 0%, transparent 60%), radial-gradient(900px 600px at 100% 10%, #0a2540 0%, transparent 55%), var(--bg); background-attachment: fixed; }
[data-style="loose"][data-mode="light"] body { background: radial-gradient(1200px 700px at 20% -10%, #cfeee9 0%, transparent 60%), radial-gradient(900px 600px at 100% 10%, #d6e6fb 0%, transparent 55%), var(--bg); background-attachment: fixed; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input { font: inherit; color: inherit; user-select: text; -webkit-user-select: text; }
h1,h2,h3,p { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
svg { display: block; }
.icon { width: 1.4em; height: 1.4em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

#app { min-height: 100dvh; }
.screen { padding: calc(var(--safe-t) + 12px) var(--gutter) calc(var(--dock-h) + 56px + var(--safe-b)); max-width: 900px; margin: 0 auto; }
.topbar { display: flex; align-items: center; gap: 12px; min-height: var(--tap); }
.topbar .grow { flex: 1; min-width: 0; }
.large-title { font-size: calc(34px * var(--fs)); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; margin: 8px 0 18px; }
.sub { color: var(--fg-2); }
.muted { color: var(--fg-3); }
[data-style="hc"] .muted, [data-style="hc"] .sub { color: var(--fg); }
.hidden { display: none !important; }