*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  overflow-wrap: anywhere;
  font-family: var(--md-font);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: .25px;
  background: var(--md-surface);
  color: var(--md-on-surface);
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

h1, h2, h3, p { margin: 0; }

/* Типографическая шкала M3 */
.headline-sm { font-size: 24px; line-height: 32px; font-weight: 400; letter-spacing: 0; }
.title-lg    { font-size: 22px; line-height: 28px; font-weight: 400; letter-spacing: 0; }
.title-md    { font-size: 16px; line-height: 24px; font-weight: 500; letter-spacing: .15px; }
.label-lg    { font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: .1px; }
.label-md    { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .5px; }
.body-md     { font-size: 14px; line-height: 20px; }
.muted       { color: var(--md-on-surface-variant); }
.mono        { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }

.icon { width: 24px; height: 24px; fill: currentColor; flex: none; }

a, button, input, select, summary { -webkit-tap-highlight-color: transparent; }
button { font: inherit; -webkit-user-select: none; user-select: none; }
:focus-visible { outline: 2px solid var(--md-primary); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}