/*
 * Стиль страницы-стенда: она изображает ОБЫЧНЫЙ сайт, у которого есть своё оформление.
 *
 * Файл лежит на том же origin, что и страница, поэтому в политику добавляется ровно `'self'`
 * у `style-src`: ни `unsafe-inline`, ни `unsafe-eval` не появляются, и доказательство стенда
 * остаётся прежним — стили ВИДЖЕТА по-прежнему приходят только с моста.
 *
 * Шрифты системные: `font-src 'none'` в политике стенда, и внешних загрузок здесь быть не должно.
 */

:root {
  color-scheme: light dark;
  --stand-ink: #16181d;
  --stand-muted: #5b616e;
  --stand-paper: #fbfbfd;
  --stand-card: #ffffff;
  --stand-line: #e3e5ea;
  --stand-accent: #2f6feb;
}

@media (prefers-color-scheme: dark) {
  :root {
    --stand-ink: #e8eaef;
    --stand-muted: #9aa1ad;
    --stand-paper: #101216;
    --stand-card: #171a20;
    --stand-line: #262a33;
    --stand-accent: #6ea0ff;
  }
}

html {
  background: var(--stand-paper);
}

body {
  margin: 0;
  padding: 4rem 1.5rem 6rem;
  color: var(--stand-ink);
  font: 16px/1.65 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

main {
  /* 46rem держат поясняющий текст читаемой колонкой, а не растягивают на весь широкий экран. */
  max-width: 46rem;
  margin: 0 auto;
}

h1 {
  margin: 0 0 0.75rem;
  font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.75rem);
  font-weight: 650;
  letter-spacing: -0.02em;
}

h2 {
  margin: 2.5rem 0 0.75rem;
  font-size: 1.15rem;
  font-weight: 620;
  letter-spacing: -0.01em;
}

p {
  margin: 0 0 1rem;
  color: var(--stand-muted);
}

main > p:first-of-type {
  color: var(--stand-ink);
  font-size: 1.1rem;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
}

li {
  position: relative;
  padding: 0.85rem 1rem 0.85rem 2.25rem;
  border: 1px solid var(--stand-line);
  border-radius: 0.75rem;
  background: var(--stand-card);
  color: var(--stand-muted);
}

li::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 1.45rem;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--stand-accent);
}

code {
  padding: 0.1em 0.35em;
  border: 1px solid var(--stand-line);
  border-radius: 0.35rem;
  background: var(--stand-card);
  color: var(--stand-ink);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.875em;
}

b {
  color: var(--stand-ink);
  font-weight: 620;
}

em {
  font-style: normal;
  color: var(--stand-ink);
  font-weight: 560;
}

h2 + p {
  padding: 0.9rem 1rem;
  border: 1px solid var(--stand-line);
  border-left: 3px solid var(--stand-accent);
  border-radius: 0.75rem;
  background: var(--stand-card);
}