:root {
  color-scheme: light;
  --paper: #f2eee6;
  --paper-raised: #fbf8f1;
  --paper-soft: #e8e1d5;
  --ink: #1c1a17;
  --ink-muted: #6c665d;
  --ink-faint: #948d83;
  --line: rgba(41, 36, 30, 0.14);
  --line-strong: rgba(41, 36, 30, 0.25);
  --amber: #d68027;
  --amber-deep: #a95717;
  --amber-soft: #f2cf9d;
  --danger: #ae3f31;
  --success: #387257;
  --glass: rgba(22, 19, 16, 0.68);
  --glass-light: rgba(250, 247, 240, 0.88);
  --shadow-soft: 0 18px 50px rgba(29, 23, 16, 0.14);
  --shadow-sheet: 0 -24px 60px rgba(27, 22, 17, 0.2);
  --radius-xs: 10px;
  --radius-sm: 15px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --touch: 52px;
  --topbar-height: 58px;
  --tabbar-height: 68px;
  --native-action-height: 76px;
  --safe-top: max(env(safe-area-inset-top), var(--tg-safe-area-inset-top, 0px), var(--tg-content-safe-area-inset-top, 0px));
  --safe-right: max(env(safe-area-inset-right), var(--tg-safe-area-inset-right, 0px), var(--tg-content-safe-area-inset-right, 0px));
  --safe-bottom: max(env(safe-area-inset-bottom), var(--tg-safe-area-inset-bottom, 0px), var(--tg-content-safe-area-inset-bottom, 0px));
  --safe-left: max(env(safe-area-inset-left), var(--tg-safe-area-inset-left, 0px), var(--tg-content-safe-area-inset-left, 0px));
  --stable-height: var(--tg-viewport-stable-height, 100dvh);
  --layout-height: var(--zerkalo-layout-height, var(--stable-height));
  --functional-font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --editorial-font: Charter, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --paper: #181715;
  --paper-raised: #23211e;
  --paper-soft: #2d2a26;
  --ink: #f1ece3;
  --ink-muted: #afa79b;
  --ink-faint: #817a70;
  --line: rgba(245, 236, 223, 0.12);
  --line-strong: rgba(245, 236, 223, 0.24);
  --amber: #e79a44;
  --amber-deep: #f0b064;
  --amber-soft: #64401e;
  --danger: #ed8274;
  --success: #79bd97;
  --glass-light: rgba(31, 29, 26, 0.9);
  --shadow-soft: 0 18px 50px rgba(0, 0, 0, 0.3);
  --shadow-sheet: 0 -24px 60px rgba(0, 0, 0, 0.48);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--functional-font);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

button,
textarea,
input {
  color: inherit;
  font: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
}

[hidden] {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}