@layer constants, atoms, components, patterns, project, app;
@font-face {
  font-family: "M PLUS Rounded 1c";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/latest/fonts/m-plus-rounded-1c-400-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "M PLUS Rounded 1c";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/latest/fonts/m-plus-rounded-1c-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "M PLUS Rounded 1c";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/latest/fonts/m-plus-rounded-1c-700-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "M PLUS Rounded 1c";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/latest/fonts/m-plus-rounded-1c-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@layer constants {
:root {
  --column-width: 720px;
  --aside-width: 400px;
  --page-width: 1200px;
  --screen-height: 100dvh;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --frame-phone-width: 390px;
  --frame-phone-height: 844px;
  --frame-desktop-width: 721px;
  --frame-wide-width: 1200px;
}
:root {
  --layer-below: -1;
  --layer-raised: 1;
  --layer-sticky: 2;
  --layer-bar: 10;
  --layer-dock: 20;
  --layer-sheet: 50;
  --layer-splash: 100;
  --layer-blocker: 1000;
}
}
@layer atoms {
:root {
  --color-bg: #f4f5f7;
  --color-surface: #ffffff;
  --color-tile: #eaecef;
  --color-ink: #2c3e50;
  --color-text-muted: #6b7280;
  --color-text-subtle: #9ca3af;
  --color-border: #e5e7eb;
  --color-accent: #636efa;
  --color-danger: #dc2626;
  --color-success: #16a34a;
  --color-highlight: #fecb52;
  --color-white: #ffffff;
  --color-black: #000000;
  --palette-1: #2563eb;
  --palette-2: #ea580c;
  --palette-3: #16a34a;
  --palette-4: #7c3aed;
  --palette-5: #e11d48;
  --palette-6: #0891b2;
  --palette-7: #ca8a04;
  --palette-8: #84cc16;
  --palette-9: #c026d3;
}
[data-theme="dark"] {
  color-scheme: dark;
  --color-accent: #7c85ff;
  --color-danger: #ff5c5c;
  --color-success: #45c46a;
  --color-bg: #101319;
  --color-surface: #232833;
  --color-tile: #343a47;
  --color-border: #2c313d;
  --color-ink: #eef0f3;
  --color-text-muted: #9aa0aa;
  --color-text-subtle: #6f7682;
}
:root,
[data-theme="dark"] {
  --color-accent-bg: color-mix(in srgb, var(--color-accent) 14%, transparent);
  --color-danger-bg: color-mix(in srgb, var(--color-danger) 14%, transparent);
  --color-success-bg: color-mix(in srgb, var(--color-success) 14%, transparent);
  --color-warn-bg: color-mix(in srgb, var(--color-highlight) 30%, transparent);
  --color-glow: color-mix(in srgb, var(--color-highlight) 45%, transparent);
  --color-bar: var(--color-ink);
  --color-glass: color-mix(in srgb, var(--color-bg) 72%, transparent);
  --color-shade: color-mix(in srgb, var(--color-ink) 28%, transparent);
  --color-veil: color-mix(in srgb, var(--color-white) 20%, transparent);
  --color-photo: color-mix(in srgb, var(--color-black) 55%, transparent);
  --disabled-opacity: 0.45;
  --data-opacity: 0.55;
}
[data-theme="dark"] {
  --color-bar: var(--color-surface);
  --color-shade: color-mix(in srgb, var(--color-black) 60%, transparent);
}
:root {
  --font-sans: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "M PLUS Rounded 1c", system-ui, sans-serif;
  --fs-11: 11px;
  --fs-13: 13px;
  --fs-15: 15px;
  --fs-17: 17px;
  --fs-24: 24px;
  --fs-30: 30px;
  --fs-64: 64px;
  --lh-11: 14px;
  --lh-13: 18px;
  --lh-15: 20px;
  --lh-17: 22px;
  --lh-24: 28px;
  --lh-30: 36px;
  --lh-64: 72px;
  --fw-regular: 400;
  --fw-bold: 600;
  --fw-heavy: 700;
  --ls-tight: -0.01em;
  --ls-tighter: -0.02em;
}
.t-title-s { font: var(--fw-bold) var(--fs-17) / var(--lh-17) var(--font-sans); }
.t-title-m { font: var(--fw-heavy) var(--fs-24) / var(--lh-24) var(--font-sans); letter-spacing: var(--ls-tight); }
.t-title-l { font: var(--fw-heavy) var(--fs-30) / var(--lh-30) var(--font-sans); letter-spacing: var(--ls-tighter); }
.t-number-s { font: var(--fw-heavy) var(--fs-24) / var(--lh-24) var(--font-sans); letter-spacing: var(--ls-tight); }
.t-number-m { font: var(--fw-heavy) var(--fs-30) / var(--lh-30) var(--font-sans); letter-spacing: var(--ls-tighter); }
.t-number-l { font: var(--fw-heavy) var(--fs-64) / var(--lh-64) var(--font-sans); letter-spacing: var(--ls-tighter); }
.t-text-s { font: var(--fw-regular) var(--fs-13) / var(--lh-13) var(--font-sans); }
.t-text-m { font: var(--fw-regular) var(--fs-15) / var(--lh-15) var(--font-sans); }
.t-text-l { font: var(--fw-regular) var(--fs-17) / var(--lh-17) var(--font-sans); }
.t-strong-s { font: var(--fw-bold) var(--fs-13) / var(--lh-13) var(--font-sans); }
.t-strong-m { font: var(--fw-bold) var(--fs-15) / var(--lh-15) var(--font-sans); }
.t-strong-l { font: var(--fw-bold) var(--fs-17) / var(--lh-17) var(--font-sans); }
@media (min-width: 721px) {
  .t-text-l { font: var(--fw-regular) var(--fs-15) / var(--lh-15) var(--font-sans); }
  .t-strong-l { font: var(--fw-bold) var(--fs-15) / var(--lh-15) var(--font-sans); }
  .t-title-l { font: var(--fw-heavy) var(--fs-64) / var(--lh-64) var(--font-sans); }
}
:root {
  --space-1: 2px;
  --space-2: 4px;
  --space-4: 8px;
  --space-6: 12px;
  --space-8: 16px;
  --space-12: 24px;
}
:root {
  --shape-overlay: 28px;
  --shape-block: 20px;
  --shape-control: 14px;
  --shape-small: 10px;
  --shape-tab: 8px;
  --shape-pill: 999px;
  --shape-mark: 6px;
}
:root {
  --shadow-card: 0 0 0 1px rgba(17, 24, 39, 0.05), 0 1px 2px rgba(17, 24, 39, 0.04), 0 8px 24px -12px rgba(17, 24, 39, 0.14);
  --shadow-bar: 0 16px 32px -10px rgba(17, 24, 39, 0.45);
  --shadow-popover: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-sheet: 0 -10px 40px rgba(16, 24, 40, 0.16), 0 -1px 0 rgba(16, 24, 40, 0.05);
  --shadow-focus: 0 0 0 2px var(--color-accent);
  --shadow-focus-inset: inset 0 0 0 2px var(--color-accent);
}
[data-theme="dark"] {
  --shadow-card: 0 0 0 1px rgba(255, 255, 255, 0.03);
  --shadow-popover: 0 10px 28px rgba(0, 0, 0, 0.5);
  --shadow-sheet: 0 -10px 40px rgba(0, 0, 0, 0.5), 0 -1px 0 rgba(255, 255, 255, 0.06);
}
:root {
  --divider-width: 1px;
}
:root {
  --press-98: 0.98;
  --press-96: 0.96;
  --press-92: 0.92;
  --anim-press: 0.12s;
  --anim-fill: 0.15s;
  --anim-modal: 0.25s;
  --anim-sheet: 0.35s;
  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
}
:root {
  --icon-line: 2;
  --icon-line-bold: 2.6;
  --icon-spin: 0.8s;
}
.icon { display: block; width: 1em; height: 1em; flex: none; overflow: visible; fill: none; stroke: currentColor; stroke-width: var(--icon-line); stroke-linecap: round; stroke-linejoin: round; }
.icon-bold { stroke-width: var(--icon-line-bold); }
.icon-spin { animation: icon-spin var(--icon-spin) linear infinite; }
@keyframes icon-spin { to { transform: rotate(360deg); } }
}