/* Reset + base typography */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  color: var(--md-on-surface);
  background: var(--md-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: transparent; border: 0; cursor: pointer; padding: 0; }
input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }
:focus-visible { outline: 2px solid var(--md-primary); outline-offset: 2px; border-radius: 4px; }

/* Type utilities */
.t-display-l { font: 700 57px/64px var(--font-display); letter-spacing: -.25px; }
.t-display-m { font: 700 45px/52px var(--font-display); }
.t-display-s { font: 700 36px/44px var(--font-display); }
.t-headline-l { font: 600 32px/40px var(--font-display); }
.t-headline-m { font: 600 28px/36px var(--font-display); }
.t-headline-s { font: 600 24px/32px var(--font-display); }
.t-title-l { font: 500 22px/28px var(--font-display); }
.t-title-m { font: 500 16px/24px var(--font-body); letter-spacing: .15px; }
.t-title-s { font: 500 14px/20px var(--font-body); letter-spacing: .1px; }
.t-body-l { font: 400 16px/24px var(--font-body); letter-spacing: .5px; }
.t-body-m { font: 400 14px/20px var(--font-body); letter-spacing: .25px; }
.t-body-s { font: 400 12px/16px var(--font-body); letter-spacing: .4px; }
.t-label-l { font: 500 14px/20px var(--font-body); letter-spacing: .1px; }
.t-label-m { font: 500 12px/16px var(--font-body); letter-spacing: .5px; }
.t-label-s { font: 500 11px/16px var(--font-body); letter-spacing: .5px; }

/* Helpers */
.row { display: flex; }
.col { display: flex; flex-direction: column; }
.center { display: flex; align-items: center; justify-content: center; }
.between { display: flex; align-items: center; justify-content: space-between; }
.gap-4 { gap: 4px; } .gap-6 { gap: 6px; } .gap-8 { gap: 8px; }
.gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-20 { gap: 20px; } .gap-24 { gap: 24px; }
.muted { color: var(--md-on-surface-variant); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }