* { box-sizing: border-box; }
html, body { height: 100%; }
html { background: var(--background); color: var(--text); font-family: var(--font); }
body { margin: 0; overflow: hidden; font-size: 15px; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { color: inherit; font: inherit; }
button, a { touch-action: manipulation; }
button { cursor: pointer; }
img, svg { max-width: 100%; }
.icon { width: 22px; height: 22px; display: block; flex: 0 0 auto; }
h1, h2, h3, p { margin-top: 0; }
input, select, textarea { min-height: 44px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); padding: 10px 12px; outline: 0; }
input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent); }
button:focus-visible, a:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 35%, transparent); outline-offset: 2px; }
button:disabled { cursor: not-allowed; opacity: .5; }
.mobile-only { display: inline-flex; }
.desktop-only { display: none; }