/* Squadra Design Kit · база: сброс, типографика, фокус, служебные классы. */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
h1, h2, p { margin: 0; }
h1 { font: 700 30px/1.1 var(--font-display); letter-spacing: .03em; text-transform: uppercase; text-wrap: balance; animation: wipe .5s var(--ease) both; }
h2 { font: 700 16px/1.2 var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
ul { list-style: none; margin: 0; padding: 0; }
code, .mono { font-family: var(--font-mono); }
code { color: var(--text); }
.sub { color: var(--muted); }
.hint { font-size: 13px; color: var(--muted); text-wrap: pretty; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.grow { flex: 1 1 auto; min-width: 0; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.display { font: 900 38px/1.04 var(--font-display); letter-spacing: .01em; text-transform: uppercase; text-wrap: balance; }
.display-s { font: 700 20px/1.25 var(--font-display); letter-spacing: .03em; text-transform: uppercase; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
html { background: var(--bg); }
body { margin: 0; color: var(--text); font: 15px/1.45 var(--font-ui); }