:root {
    /* Базовые цвета */
        --asphalt-day-100: #f8f9fa;
        --asphalt-day-1000: #798298;
        --asphalt-day-1100: #6b758d;
        --asphalt-day-1200: #5e6983;
        --asphalt-day-1300: #515c78;
        --asphalt-day-1400: #44506d;
        --asphalt-day-1500: #374462;
        --asphalt-day-1600: #2c3858;
        --asphalt-day-1700: #202c4b;
        --asphalt-day-1800: #16213f;
        --asphalt-day-1900: #0b1532;
        --asphalt-day-200: #f2f3f5;
        --asphalt-day-2000: #030924;
        --asphalt-day-200a: #2637580f;
        --asphalt-day-300: #e9ebee;
        --asphalt-day-300a: #0b214217;
        --asphalt-day-400: #d3d6de;
        --asphalt-day-400a: #0b1b482e;
        --asphalt-day-500: #c4c8d3;
        --asphalt-day-500a: #091a483d;
        --asphalt-day-600: #b4bac7;
        --asphalt-day-700: #a5acbb;
        --asphalt-day-800: #969eaf;
        --asphalt-day-900: #8891a5;
        --asphalt-night-100: #090f1f;
        --asphalt-night-1000: #666d7c;
        --asphalt-night-1100: #737987;
        --asphalt-night-1200: #818693;
        --asphalt-night-1300: #9095a1;
        --asphalt-night-1400: #a0a5ae;
        --asphalt-night-1500: #b2b5bd;
        --asphalt-night-1600: #c2c5cc;
        --asphalt-night-1700: #d4d6db;
        --asphalt-night-1800: #e4e5e8;
        --asphalt-night-1900: #f2f2f4;
        --asphalt-night-200: #101627;
        --asphalt-night-2000: #fdfdfe;
        --asphalt-night-200a: #648af429;
        --asphalt-night-300: #171e2f;
        --asphalt-night-300a: #799ef730;
        --asphalt-night-400: #262d40;
        --asphalt-night-400a: #92adf642;
        --asphalt-night-500: #2f374a;
        --asphalt-night-500a: #9db7f74d;
        --asphalt-night-600: #394154;
        --asphalt-night-700: #444b5d;
        --asphalt-night-800: #4e5567;
        --asphalt-night-900: #596070;
        --blue-day-100: #f7fbfe;
        --blue-day-1000: #2386dc;
        --blue-day-1100: #2678c3;
        --blue-day-1200: #276cad;
        --blue-day-1300: #235f97;
        --blue-day-1400: #135289;
        --blue-day-1500: #00467b;
        --blue-day-1600: #00396e;
        --blue-day-1700: #002c60;
        --blue-day-1800: #001f52;
        --blue-day-1900: #001245;
        --blue-day-200: #eaf4fd;
        --blue-day-2000: #000336;
        --blue-day-200a: #1685e917;
        --blue-day-300: #dcedfb;
        --blue-day-300a: #057ee224;
        --blue-day-400: #b9daf7;
        --blue-day-400a: #057be247;
        --blue-day-500: #a1cdf5;
        --blue-day-500a: #0178e45e;
        --blue-day-600: #88bff2;
        --blue-day-700: #6eb1ef;
        --blue-day-800: #55a3ec;
        --blue-day-900: #3a95e8;
        --blue-night-100: #00083b;
        --blue-night-1000: #2770b3;
        --blue-night-1100: #257ccb;
        --blue-night-1200: #2389e4;
        --blue-night-1300: #4399ea;
        --blue-night-1400: #61a9ee;
        --blue-night-1500: #80baf2;
        --blue-night-1600: #9bcaf5;
        --blue-night-1700: #badaf8;
        --blue-night-1800: #d4e8fa;
        --blue-night-1900: #ebf4fd;
        --blue-night-200: #001144;
        --blue-night-2000: #fcfeff;
        --blue-night-200a: #2456ce45;
        --blue-night-300: #001a4d;
        --blue-night-300a: #2e62cf4f;
        --blue-night-400: #002c5f;
        --blue-night-400a: #3a78d261;
        --blue-night-500: #00376b;
        --blue-night-500a: #4487dc6b;
        --blue-night-600: #004277;
        --blue-night-700: #0b4d83;
        --blue-night-800: #1a588f;
        --blue-night-900: #26639b;
        --cian-day-100: #f3fcfc;
        --cian-day-1000: #0d918f;
        --cian-day-1100: #068382;
        --cian-day-1200: #047575;
        --cian-day-1300: #026868;
        --cian-day-1400: #015a5b;
        --cian-day-1500: #004c4e;
        --cian-day-1600: #004043;
        --cian-day-1700: #003336;
        --cian-day-1800: #00272a;
        --cian-day-1900: #001a1d;
        --cian-day-200: #def8f7;
        --cian-day-2000: #000d11;
        --cian-day-200a: #01c9c121;
        --cian-day-300: #c9f3f2;
        --cian-day-300a: #0ac8c438;
        --cian-day-400: #87e5e3;
        --cian-day-400a: #05c9c57a;
        --cian-day-500: #4edcda;
        --cian-day-500a: #02cdcab3;
        --cian-day-600: #36cdcb;
        --cian-day-700: #2ebebc;
        --cian-day-800: #24afad;
        --cian-day-900: #1aa19f;
        --cian-night-100: #001316;
        --cian-night-1000: #047979;
        --cian-night-1100: #078786;
        --cian-night-1200: #119593;
        --cian-night-1300: #1ea5a3;
        --cian-night-1400: #29b6b4;
        --cian-night-1500: #34c8c6;
        --cian-night-1600: #3ed9d7;
        --cian-night-1700: #89e5e3;
        --cian-night-1800: #b9efee;
        --cian-night-1900: #def8f7;
        --cian-night-200: #001a1d;
        --cian-night-2000: #fcfefe;
        --cian-night-200a: #59d5e81f;
        --cian-night-300: #002326;
        --cian-night-300a: #5ce1f126;
        --cian-night-400: #003336;
        --cian-night-400a: #60e3ed38;
        --cian-night-500: #003e40;
        --cian-night-500a: #62e9ef42;
        --cian-night-600: #00494b;
        --cian-night-700: #005455;
        --cian-night-800: #015f61;
        --cian-night-900: #026b6c;
        --grape-day-100: #fdfafe;
        --grape-day-1000: #bb58d4;
        --grape-day-1100: #b243cd;
        --grape-day-1200: #a23ab9;
        --grape-day-1300: #912fa4;
        --grape-day-1400: #822590;
        --grape-day-1500: #711c7d;
        --grape-day-1600: #62126b;
        --grape-day-1700: #520758;
        --grape-day-1800: #420047;
        --grape-day-1900: #2f0034;
        --grape-day-200: #faf1fc;
        --grape-day-2000: #1b0020;
        --grape-day-200a: #ac16cd0f;
        --grape-day-300: #f5e5f9;
        --grape-day-300a: #a413c81c;
        --grape-day-400: #ebcbf3;
        --grape-day-400a: #a007c636;
        --grape-day-500: #e4baef;
        --grape-day-500a: #9f09c647;
        --grape-day-600: #dca8ea;
        --grape-day-700: #d495e5;
        --grape-day-800: #cc82e0;
        --grape-day-900: #c46fdb;
        --grape-night-100: #220027;
        --grape-night-1000: #a73cbf;
        --grape-night-1100: #b54ad0;
        --grape-night-1200: #bd5fd6;
        --grape-night-1300: #c775dc;
        --grape-night-1400: #d08be2;
        --grape-night-1500: #d9a1e9;
        --grape-night-1600: #e2b6ee;
        --grape-night-1700: #ebccf4;
        --grape-night-1800: #f3dff8;
        --grape-night-1900: #f9f0fc;
        --grape-night-200: #2f0033;
        --grape-night-2000: #fefdff;
        --grape-night-200a: #dd48ec33;
        --grape-night-300: #3c0040;
        --grape-night-300a: #d946e442;
        --grape-night-400: #520758;
        --grape-night-400a: #d640e359;
        --grape-night-500: #5f1068;
        --grape-night-500a: #db50ec69;
        --grape-night-600: #6d1978;
        --grape-night-700: #7a2187;
        --grape-night-800: #882999;
        --grape-night-900: #9632a9;
        --green-day-100: #f4fdf3;
        --green-day-1000: #01971d;
        --green-day-1100: #01881a;
        --green-day-1200: #007b1a;
        --green-day-1300: #016b17;
        --green-day-1400: #005e15;
        --green-day-1500: #005112;
        --green-day-1600: #00430e;
        --green-day-1700: #003602;
        --green-day-1800: #002900;
        --green-day-1900: #001c00;
        --green-day-200: #e5fae3;
        --green-day-2000: #000f00;
        --green-day-200a: #13d2001c;
        --green-day-300: #cef5ca;
        --green-day-300a: #16cf0336;
        --green-day-400: #9ae994;
        --green-day-400a: #0fcb006b;
        --green-day-500: #71e06a;
        --green-day-500a: #0eca0296;
        --green-day-600: #3bd537;
        --green-day-700: #00c512;
        --green-day-800: #02b817;
        --green-day-900: #0ca81f;
        --green-night-100: #001400;
        --green-night-1000: #3d7a40;
        --green-night-1100: #49874c;
        --green-night-1200: #569557;
        --green-night-1300: #63a464;
        --green-night-1400: #72b372;
        --green-night-1500: #82c581;
        --green-night-1600: #91d590;
        --green-night-1700: #a2e7a0;
        --green-night-1800: #c5f1c3;
        --green-night-1900: #e4f8e3;
        --green-night-200: #001d00;
        --green-night-2000: #fdfefc;
        --green-night-200a: #5ceb551f;
        --green-night-300: #002500;
        --green-night-300a: #5bed5426;
        --green-night-400: #003601;
        --green-night-400a: #5eee5838;
        --green-night-500: #00410d;
        --green-night-500a: #60f36442;
        --green-night-600: #0d4c17;
        --green-night-700: #1a5621;
        --green-night-800: #25612b;
        --green-night-900: #306c34;
        --indigo-day-100: #f7faff;
        --indigo-day-1000: #597bec;
        --indigo-day-1100: #496be8;
        --indigo-day-1200: #3d5de0;
        --indigo-day-1300: #324fd1;
        --indigo-day-1400: #2940c3;
        --indigo-day-1500: #2031b4;
        --indigo-day-1600: #1922a6;
        --indigo-day-1700: #130b98;
        --indigo-day-1800: #10007e;
        --indigo-day-1900: #130059;
        --indigo-day-200: #f0f4ff;
        --indigo-day-2000: #0e0034;
        --indigo-day-200a: #0548ff0f;
        --indigo-day-300: #e4ebfe;
        --indigo-day-300a: #0a49f61c;
        --indigo-day-400: #c5d6ff;
        --indigo-day-400a: #034dff3b;
        --indigo-day-500: #b1c7ff;
        --indigo-day-500a: #034aff4f;
        --indigo-day-600: #9db8ff;
        --indigo-day-700: #8aa9ff;
        --indigo-day-800: #7799ff;
        --indigo-day-900: #6689ff;
        --indigo-night-100: #120040;
        --indigo-night-1000: #4061e4;
        --indigo-night-1100: #4e70e9;
        --indigo-night-1200: #5e80ed;
        --indigo-night-1300: #7191f1;
        --indigo-night-1400: #85a2f4;
        --indigo-night-1500: #9ab4f7;
        --indigo-night-1600: #b0c4fa;
        --indigo-night-1700: #c8d6fc;
        --indigo-night-1800: #dce5fe;
        --indigo-night-1900: #eef2ff;
        --indigo-night-200: #120c4c;
        --indigo-night-2000: #fdfdff;
        --indigo-night-200a: #404ec84d;
        --indigo-night-300: #10125f;
        --indigo-night-300a: #344fc761;
        --indigo-night-400: #13207d;
        --indigo-night-400a: #3151c380;
        --indigo-night-500: #1b2c92;
        --indigo-night-500a: #3d5dc994;
        --indigo-night-600: #1f339c;
        --indigo-night-700: #273eb3;
        --indigo-night-800: #314bbe;
        --indigo-night-900: #3955be;
        --lime-day-100: #f7fcf3;
        --lime-day-1000: #4f9200;
        --lime-day-1100: #428400;
        --lime-day-1200: #367700;
        --lime-day-1300: #296a00;
        --lime-day-1400: #1c5d00;
        --lime-day-1500: #0c5000;
        --lime-day-1600: #004300;
        --lime-day-1700: #003600;
        --lime-day-1800: #002900;
        --lime-day-1900: #001c00;
        --lime-day-200: #eef9e6;
        --lime-day-2000: #000f00;
        --lime-day-200a: #55c3051a;
        --lime-day-300: #def2ce;
        --lime-day-300a: #5abe0a33;
        --lime-day-400: #bae396;
        --lime-day-400a: #5bbc056b;
        --lime-day-500: #a2d86d;
        --lime-day-500a: #5fbc0394;
        --lime-day-600: #89cc37;
        --lime-day-700: #78bf00;
        --lime-day-800: #6ab000;
        --lime-day-900: #5ea200;
        --lime-night-100: #001300;
        --lime-night-1000: #3a7b00;
        --lime-night-1100: #478900;
        --lime-night-1200: #539600;
        --lime-night-1300: #62a600;
        --lime-night-1400: #71b700;
        --lime-night-1500: #82c81d;
        --lime-night-1600: #9dd563;
        --lime-night-1700: #b9e295;
        --lime-night-1800: #d3eebd;
        --lime-night-1900: #eaf7e0;
        --lime-night-200: #001c00;
        --lime-night-2000: #fdfefc;
        --lime-night-200a: #98eb911c;
        --lime-night-300: #002400;
        --lime-night-300a: #8ede8826;
        --lime-night-400: #003600;
        --lime-night-400a: #92e38b38;
        --lime-night-500: #004100;
        --lime-night-500a: #95e78e42;
        --lime-night-600: #074c00;
        --lime-night-700: #155700;
        --lime-night-800: #216300;
        --lime-night-900: #2c6e00;
        --magenta-day-100: #fff7fc;
        --magenta-day-1000: #e2468a;
        --magenta-day-1100: #d82d77;
        --magenta-day-1200: #c4266c;
        --magenta-day-1300: #ad1e60;
        --magenta-day-1400: #991855;
        --magenta-day-1500: #841049;
        --magenta-day-1600: #71093f;
        --magenta-day-1700: #5d0333;
        --magenta-day-1800: #4a0027;
        --magenta-day-1900: #360017;
        --magenta-day-200: #fff0f9;
        --magenta-day-2000: #210008;
        --magenta-day-200a: #ff059b0f;
        --magenta-day-300: #ffe3f3;
        --magenta-day-300a: #ff00921c;
        --magenta-day-400: #ffc6e7;
        --magenta-day-400a: #ff07973b;
        --magenta-day-500: #ffb1df;
        --magenta-day-500a: #ff03984f;
        --magenta-day-600: #fd9bd3;
        --magenta-day-700: #f788c2;
        --magenta-day-800: #f074b0;
        --magenta-day-900: #ea5f9f;
        --magenta-night-100: #29000d;
        --magenta-night-1000: #ca2870;
        --magenta-night-1100: #dd347c;
        --magenta-night-1200: #e44d90;
        --magenta-night-1300: #ec66a5;
        --magenta-night-1400: #f37db9;
        --magenta-night-1500: #fb94cd;
        --magenta-night-1600: #ffabdc;
        --magenta-night-1700: #ffc6e7;
        --magenta-night-1800: #ffdbf0;
        --magenta-night-1900: #ffeef8;
        --magenta-night-200: #370017;
        --magenta-night-2000: #fffdfe;
        --magenta-night-200a: #ec396e38;
        --magenta-night-300: #440022;
        --magenta-night-300a: #ee3a8045;
        --magenta-night-400: #5e0333;
        --magenta-night-400a: #ea33855e;
        --magenta-night-500: #6f083d;
        --magenta-night-500a: #f03b8b70;
        --magenta-night-600: #7f0e46;
        --magenta-night-700: #901450;
        --magenta-night-800: #a21b5a;
        --magenta-night-900: #b42163;
        --neutral-day-0: #ffffff;
        --neutral-day-100: #f9fafe;
        --neutral-day-1000: #80828a;
        --neutral-day-1100: #73757e;
        --neutral-day-1200: #676972;
        --neutral-day-1300: #5b5c64;
        --neutral-day-1400: #4e5057;
        --neutral-day-1500: #42434b;
        --neutral-day-1600: #38393f;
        --neutral-day-1700: #2c2d33;
        --neutral-day-1800: #212227;
        --neutral-day-1900: #16171c;
        --neutral-day-200: #f3f4f9;
        --neutral-day-2000: #0a0b0f;
        --neutral-day-200a: #0f23870d;
        --neutral-day-300: #eaebf0;
        --neutral-day-300a: #16215817;
        --neutral-day-400: #d5d6dc;
        --neutral-day-400a: #080e312b;
        --neutral-day-500: #c6c8ce;
        --neutral-day-500a: #07102a3b;
        --neutral-day-600: #b8bac0;
        --neutral-day-700: #aaacb3;
        --neutral-day-800: #9c9ea5;
        --neutral-day-900: #8f9198;
        --neutral-night-0: #09090b;
        --neutral-night-100: #0f0f12;
        --neutral-night-1000: #6b6c75;
        --neutral-night-1100: #777982;
        --neutral-night-1200: #84868e;
        --neutral-night-1300: #93959d;
        --neutral-night-1400: #a3a4ac;
        --neutral-night-1500: #b3b5bb;
        --neutral-night-1600: #c3c5cb;
        --neutral-night-1700: #d5d6db;
        --neutral-night-1800: #e4e5ea;
        --neutral-night-1900: #f1f2f7;
        --neutral-night-200: #16171a;
        --neutral-night-2000: #fdfeff;
        --neutral-night-200a: #c3d1e112;
        --neutral-night-300: #1e1e22;
        --neutral-night-300a: #dbdbf11a;
        --neutral-night-400: #2d2d32;
        --neutral-night-400a: #eaeaff29;
        --neutral-night-500: #36373c;
        --neutral-night-500a: #dfe4f436;
        --neutral-night-600: #404146;
        --neutral-night-700: #494a51;
        --neutral-night-800: #54555c;
        --neutral-night-900: #5e5f67;
        --orange-day-100: #fffaf8;
        --orange-day-1000: #df5600;
        --orange-day-1100: #ce4800;
        --orange-day-1200: #bd3d00;
        --orange-day-1300: #a83400;
        --orange-day-1400: #942c00;
        --orange-day-1500: #7f2403;
        --orange-day-1600: #6d1c02;
        --orange-day-1700: #591401;
        --orange-day-1800: #460d00;
        --orange-day-1900: #330700;
        --orange-day-200: #fff1e9;
        --orange-day-2000: #1e0300;
        --orange-day-200a: #ff630b17;
        --orange-day-300: #ffe7da;
        --orange-day-300a: #ff5f0826;
        --orange-day-400: #ffcbad;
        --orange-day-400a: #ff610754;
        --orange-day-500: #ffb990;
        --orange-day-500a: #ff600370;
        --orange-day-600: #ffa470;
        --orange-day-700: #fe8e4d;
        --orange-day-800: #f87a2a;
        --orange-day-900: #ee6900;
        --orange-night-100: #260400;
        --orange-night-1000: #c24100;
        --orange-night-1100: #d44c00;
        --orange-night-1200: #e35b00;
        --orange-night-1300: #f16e0a;
        --orange-night-1400: #fb843d;
        --orange-night-1500: #ff9c64;
        --orange-night-1600: #ffb48a;
        --orange-night-1700: #ffcbae;
        --orange-night-1800: #ffdfcd;
        --orange-night-1900: #fff0e8;
        --orange-night-200: #320700;
        --orange-night-2000: #fffdfd;
        --orange-night-200a: #eb442d33;
        --orange-night-300: #400b00;
        --orange-night-300a: #e8472d42;
        --orange-night-400: #591401;
        --orange-night-400a: #ed4d2c59;
        --orange-night-500: #6a1a02;
        --orange-night-500a: #ef53306b;
        --orange-night-600: #7a2103;
        --orange-night-700: #8b2802;
        --orange-night-800: #9d2f00;
        --orange-night-900: #ae3600;
        --red-day-100: #fff9f8;
        --red-day-1000: #e44d53;
        --red-day-1100: #d9373e;
        --red-day-1200: #ce1d2a;
        --red-day-1300: #bc0015;
        --red-day-1400: #a60000;
        --red-day-1500: #8e0000;
        --red-day-1600: #790000;
        --red-day-1700: #630000;
        --red-day-1800: #4e0000;
        --red-day-1900: #390000;
        --red-day-200: #fff0ef;
        --red-day-2000: #220000;
        --red-day-200a: #ff291a12;
        --red-day-300: #ffe5e5;
        --red-day-300a: #ff13131c;
        --red-day-400: #ffc9c9;
        --red-day-400a: #ff0a0a38;
        --red-day-500: #ffb5b6;
        --red-day-500a: #ff080c4d;
        --red-day-600: #ffa0a2;
        --red-day-700: #ff898d;
        --red-day-800: #fb737a;
        --red-day-900: #f06268;
        --red-night-100: #2b0009;
        --red-night-1000: #cc2f3c;
        --red-night-1100: #d9434d;
        --red-night-1200: #e5555d;
        --red-night-1300: #f26970;
        --red-night-1400: #ff7c83;
        --red-night-1500: #ff989b;
        --red-night-1600: #ffb1b2;
        --red-night-1700: #ffc9c9;
        --red-night-1800: #ffdedd;
        --red-night-1900: #ffefef;
        --red-night-200: #37000e;
        --red-night-2000: #fffdfd;
        --red-night-200a: #e7425138;
        --red-night-300: #440113;
        --red-night-300a: #e9425545;
        --red-night-400: #62021b;
        --red-night-400a: #e8425463;
        --red-night-500: #73031f;
        --red-night-500a: #e8425275;
        --red-night-600: #860623;
        --red-night-700: #980927;
        --red-night-800: #ac0d29;
        --red-night-900: #bf112b;
        --teal-day-100: #f5fbf8;
        --teal-day-1000: #009565;
        --teal-day-1100: #008658;
        --teal-day-1200: #00794c;
        --teal-day-1300: #006a3f;
        --teal-day-1400: #005d33;
        --teal-day-1500: #004f26;
        --teal-day-1600: #00441c;
        --teal-day-1700: #00350f;
        --teal-day-1800: #002905;
        --teal-day-1900: #001c00;
        --teal-day-200: #ecf8f2;
        --teal-day-2000: #000f00;
        --teal-day-200a: #12a85d14;
        --teal-day-300: #d8f1e5;
        --teal-day-300a: #0ba85d29;
        --teal-day-400: #ade1c9;
        --teal-day-400a: #07a45b54;
        --teal-day-500: #90d6b7;
        --teal-day-500a: #03a25b70;
        --teal-day-600: #6ecba5;
        --teal-day-700: #46c093;
        --teal-day-800: #00b382;
        --teal-day-900: #00a575;
        --teal-night-100: #001500;
        --teal-night-1000: #007d4f;
        --teal-night-1100: #008b5c;
        --teal-night-1200: #00996a;
        --teal-night-1300: #00aa79;
        --teal-night-1400: #27ba8a;
        --teal-night-1500: #62c89f;
        --teal-night-1600: #8ad4b4;
        --teal-night-1700: #afe1ca;
        --teal-night-1800: #cdecdd;
        --teal-night-1900: #e8f6ef;
        --teal-night-200: #001a00;
        --teal-night-2000: #fcfefd;
        --teal-night-200a: #8cda851c;
        --teal-night-300: #002402;
        --teal-night-300a: #8ede8926;
        --teal-night-400: #003610;
        --teal-night-400a: #92e29538;
        --teal-night-500: #004119;
        --teal-night-500a: #96e79f42;
        --teal-night-600: #004c23;
        --teal-night-700: #00572d;
        --teal-night-800: #006338;
        --teal-night-900: #006f42;
        --violet-day-100: #f9f9ff;
        --violet-day-1000: #866cf6;
        --violet-day-1100: #7c58f3;
        --violet-day-1200: #734ae5;
        --violet-day-1300: #673fcb;
        --violet-day-1400: #5d35b2;
        --violet-day-1500: #512b9a;
        --violet-day-1600: #462284;
        --violet-day-1700: #3a186c;
        --violet-day-1800: #2e1056;
        --violet-day-1900: #220544;
        --violet-day-200: #f4f3ff;
        --violet-day-2000: #12002f;
        --violet-day-200a: #230fff0d;
        --violet-day-300: #eae9ff;
        --violet-day-300a: #160bff17;
        --violet-day-400: #d4d1ff;
        --violet-day-400a: #1d0dff30;
        --violet-day-500: #c7c2ff;
        --violet-day-500a: #1601ff3d;
        --violet-day-600: #b9b1fe;
        --violet-day-700: #aca1fd;
        --violet-day-800: #9e90fb;
        --violet-day-900: #937ff9;
        --violet-night-100: #180037;
        --violet-night-1000: #764dec;
        --violet-night-1100: #7f5ff4;
        --violet-night-1200: #8a71f7;
        --violet-night-1300: #9784fa;
        --violet-night-1400: #a498fc;
        --violet-night-1500: #b4acfe;
        --violet-night-1600: #c4beff;
        --violet-night-1700: #d5d1ff;
        --violet-night-1800: #e4e3ff;
        --violet-night-1900: #f2f1ff;
        --violet-night-200: #220543;
        --violet-night-2000: #fefeff;
        --violet-night-200a: #744aca45;
        --violet-night-300: #290c4d;
        --violet-night-300a: #7b4fce4f;
        --violet-night-400: #3a196d;
        --violet-night-400a: #7955ca6e;
        --violet-night-500: #442080;
        --violet-night-500a: #7e5dd182;
        --violet-night-600: #4e2893;
        --violet-night-700: #5731a7;
        --violet-night-800: #6139bd;
        --violet-night-900: #6b42d2;
        --yellow-day-100: #fffad7;
        --yellow-day-1000: #bf6f00;
        --yellow-day-100a: #ffe00529;
        --yellow-day-1100: #b16100;
        --yellow-day-1200: #a25500;
        --yellow-day-1300: #924800;
        --yellow-day-1400: #823d00;
        --yellow-day-1500: #713201;
        --yellow-day-1600: #612801;
        --yellow-day-1700: #4f1f01;
        --yellow-day-1800: #3e1600;
        --yellow-day-1900: #2c0e00;
        --yellow-day-200: #fff7c0;
        --yellow-day-2000: #190600;
        --yellow-day-200a: #ffdf0340;
        --yellow-day-300: #ffed83;
        --yellow-day-300a: #ffda027d;
        --yellow-day-400: #fbd317;
        --yellow-day-400a: #fbcf00e8;
        --yellow-day-500: #f4c100;
        --yellow-day-500a: #d5a900b3;
        --yellow-day-600: #ecb000;
        --yellow-day-700: #e39f00;
        --yellow-day-800: #d98e00;
        --yellow-day-900: #cd7f00;
        --yellow-night-100: #230900;
        --yellow-night-1000: #a75800;
        --yellow-night-1100: #b56500;
        --yellow-night-1200: #c37300;
        --yellow-night-1300: #d18400;
        --yellow-night-1400: #de9600;
        --yellow-night-1500: #e9aa00;
        --yellow-night-1600: #f2be00;
        --yellow-night-1700: #fbd317;
        --yellow-night-1800: #ffe661;
        --yellow-night-1900: #fff4ae;
        --yellow-night-200: #2b0d00;
        --yellow-night-2000: #fffdf7;
        --yellow-night-200a: #e16b492b;
        --yellow-night-300: #381300;
        --yellow-night-300a: #e4724b38;
        --yellow-night-400: #501f01;
        --yellow-night-400a: #dc754b52;
        --yellow-night-500: #5f2701;
        --yellow-night-500a: #e17c4d61;
        --yellow-night-600: #6c2f01;
        --yellow-night-700: #7b3801;
        --yellow-night-800: #894200;
        --yellow-night-900: #964b00;

    
    /* Module */
    --module: 0.25rem;
    --module-0: calc(var(--module)*0);
    --module-25: calc(var(--module)*0.25);
    --module-50: calc(var(--module)*0.5);
    --module-75: calc(var(--module)*0.75);
    --module-100: calc(var(--module)*1);
    --module-125: calc(var(--module)*1.25);
    --module-150: calc(var(--module)*1.5);
    --module-200: calc(var(--module)*2);
    --module-250: calc(var(--module)*2.5);
    --module-300: calc(var(--module)*3);
    --module-350: calc(var(--module)*3.5);
    --module-400: calc(var(--module)*4);
    --module-500: calc(var(--module)*5);
    --module-600: calc(var(--module)*6);
    --module-700: calc(var(--module)*7);
    --module-750: calc(var(--module)*7.5);
    --module-800: calc(var(--module)*8);
    --module-900: calc(var(--module)*9);
    --module-1000: calc(var(--module)*10);

    /* Radius */
    --radius-0: 0;
    --radius-100: var(--module-100);
    --radius-150: var(--module-150);
    --radius-200: var(--module-200);
    --radius-300: var(--module-300);
    --radius-400: var(--module-400);
    --radius-full: 999px;

    /* Spacing */
    --space-0: var(--module-0);
    --space-50: var(--module-50);
    --space-100: var(--module-100);
    --space-150: var(--module-150);
    --space-200: var(--module-200);
    --space-300: var(--module-300);
    --space-400: var(--module-400);
    --space-500: var(--module-500);
    --space-600: var(--module-600);

    --gap-regular: 1px;
    
    /* Effects */



    /* 01 Layer */
    --01-layer-background: var(--neutral-day-200);
    --01-layer-1: var(--neutral-day-0);
    --01-layer-2: var(--neutral-day-0);
    --01-layer-accent-solid: var(--indigo-day-1100);
    --01-layer-inverted: var(--neutral-night-300);
    --01-layer-neutral-soft: var(--neutral-day-300a);
    --01-layer-neutral-subtle: var(--neutral-day-200a);

    --01-layer-blur: #f3f4f950;
    
    /* 02 Content */
    --02-content-primary: var(--neutral-day-2000);
    --02-content-secondary: rgba(10, 11, 15, 0.65);
    --02-content-tertiary: #0a0b0f91;
    --02-content-on-solid: var(--neutral-day-0);
    
    /* 03 Icon */
    
    /* 04 Border */
    --04-border-control: var(--neutral-day-400);
    --04-border-on-layer-2: var(--neutral-day-300);

    /* 05 Interactive */
    --05-layer-2-hover: var(--neutral-day-100);
    --05-layer-2-pressed: var(--neutral-day-200);
    --05-layer-neutral-soft-hover: var(--neutral-day-400a);
    --05-layer-neutral-soft-pressed: var(--neutral-day-500a);
    
    /* 06 Themes */
    --06-theme-neutral-layer-soft: var(--neutral-day-300a);
    --06-theme-neutral-content-on-soft: var(--neutral-day-1400);
    
    --06-theme-violet-layer-solid: var(--violet-day-1100);
    --06-theme-violet-layer-soft-hover: var(--violet-day-400a);
    --06-theme-violet-layer-soft-pressed: var(--violet-day-500a);
    --06-theme-violet-content: var(--violet-day-1200);
    --06-theme-violet-content-pressed: var(--violet-day-1400);
    --06-theme-violet-icon-solid: var(--violet-day-1000);
}

.dark-theme {
    /* 01 Layer */
    --01-layer-background: var(--neutral-night-0);
    --01-layer-1: var(--neutral-night-300);
    --01-layer-2: var(--neutral-night-400);
    --01-layer-accent-solid:  var(--indigo-night-1000);
    --01-layer-inverted: var(--neutral-day-0);
    --01-layer-neutral-soft: var(--neutral-night-300a);
    --01-layer-neutral-subtle: var(--neutral-night-200a);


    --01-layer-blur: rgba(0, 0, 0, 0.75);

    /* 02 Content */
    --02-content-primary: var(--neutral-night-2000);
    --02-content-secondary: rgba(253, 254, 255, 0.56);
    --02-content-tertiary: #fdfeff80;
    --02-content-on-solid: var(--neutral-day-0);

    /* 03 Icon */

    /* 04 Border */
    --04-border-control: var(--neutral-night-800);
    --04-border-on-layer-2: var(--neutral-night-600);

    /* 05 Interactive */
    --05-layer-2-hover: var(--neutral-night-500);
    --05-layer-2-pressed: var(--neutral-night-400);
    --05-layer-neutral-soft-hover: var(--neutral-night-400a);
    --05-layer-neutral-soft-pressed: var(--neutral-night-300a);

    /* 06 Themes */
    --06-theme-neutral-layer-soft: var(--neutral-night-300a);
    --06-theme-neutral-content-on-soft: var(--neutral-night-1400);
    
    --06-theme-violet-layer-solid: var(--violet-night-1000);
    --06-theme-violet-layer-soft-hover: var(--violet-day-400a);
    --06-theme-violet-layer-soft-pressed: var(--violet-night-300a);
    --06-theme-violet-content: var(--violet-night-1300);
    --06-theme-violet-content-pressed: var(--violet-night-1100);
    --06-theme-violet-icon-solid: var(--violet-night-1300);
    
}


/* ///////////////////////////////////////////////////////// */


/* Тестовые стили Playfair Display */

/* .headings-hero     {font-family: var(--font-primary); font-size: 48px; font-weight: 900; letter-spacing: 0px; line-height: 72px; text-transform: none; font-style: normal;} */
.h1                {font-family: 'Playfair Display', serif; font-size: 24px; font-weight: 700; letter-spacing: 0px; line-height: 32px; text-transform: none; font-style: normal;}
.h2                {font-family: 'Playfair Display', serif; font-size: 16px; font-weight: 700; letter-spacing: 0px; line-height: 20px; text-transform: none; font-style: normal;}
.h3                {font-family: 'Playfair Display', serif; font-size: 16px; font-weight: 500; letter-spacing: 0px; line-height: 24px; text-transform: none; font-style: italic;}
.h4                {font-family: 'Playfair Display', serif; font-size: 16px; font-weight: 400; letter-spacing: 0px; line-height: 24px; text-transform: none; font-style: italic;}
/* .headings-h4       {font-family: var(--font-primary); font-size: 20px; font-weight: 700; letter-spacing: 0px; line-height: 32px; text-transform: none; font-style: normal;} */
/* .headings-h5       {font-family: var(--font-primary); font-size: 18px; font-weight: 600; letter-spacing: 0px; line-height: 28px; text-transform: none; font-style: normal;} */
/* .headings-h6       {font-family: var(--font-primary); font-size: 16px; font-weight: 600; letter-spacing: 0px; line-height: 24px; text-transform: none; font-style: normal;} */


/* Тестовые стили Inter */
.lg-regular        {font-family: 'Inter'; font-size: 15px; font-weight: 400; letter-spacing: 0px; line-height: 24px; text-transform: none; font-style: normal;}
.lg-medium         {font-family: 'Inter'; font-size: 15px; font-weight: 500; letter-spacing: 0px; line-height: 24px; text-transform: none; font-style: normal;}
.lg-semi-bold      {font-family: 'Inter'; font-size: 15px; font-weight: 600; letter-spacing: 0px; line-height: 24px; text-transform: none; font-style: normal;}
.lg-bold           {font-family: 'Inter'; font-size: 15px; font-weight: 700; letter-spacing: 0px; line-height: 24px; text-transform: none; font-style: normal;}
.lg-italic         {font-family: 'Inter'; font-size: 15px; font-weight: 400; letter-spacing: 0px; line-height: 24px; text-transform: none; font-style: italic;}

.md-regular        {font-family: 'Inter'; font-size: 14px; font-weight: 400; letter-spacing: 0px; line-height: 20px; text-transform: none; font-style: normal;}
.md-medium         {font-family: 'Inter'; font-size: 14px; font-weight: 500; letter-spacing: 0px; line-height: 20px; text-transform: none; font-style: normal;}
.md-semi-bold      {font-family: 'Inter'; font-size: 14px; font-weight: 600; letter-spacing: 0px; line-height: 20px; text-transform: none; font-style: normal;}
.md-bold           {font-family: 'Inter'; font-size: 14px; font-weight: 700; letter-spacing: 0px; line-height: 20px; text-transform: none; font-style: normal;}
.md-italic         {font-family: 'Inter'; font-size: 14px; font-weight: 400; letter-spacing: 0px; line-height: 20px; text-transform: none; font-style: italic;}

.sm-regular        {font-family: 'Inter'; font-size: 12px; font-weight: 400; letter-spacing: 0px; line-height: 16px; text-transform: none; font-style: normal;}
.sm-medium         {font-family: 'Inter'; font-size: 12px; font-weight: 500; letter-spacing: 0px; line-height: 16px; text-transform: none; font-style: normal;}
.sm-semi-bold      {font-family: 'Inter'; font-size: 12px; font-weight: 600; letter-spacing: 0px; line-height: 16px; text-transform: none; font-style: normal;}
.sm-bold           {font-family: 'Inter'; font-size: 12px; font-weight: 700; letter-spacing: 0px; line-height: 16px; text-transform: none; font-style: normal;}
.sm-italic         {font-family: 'Inter'; font-size: 12px; font-weight: 400; letter-spacing: 0px; line-height: 16px; text-transform: none; font-style: italic;}


.tn-regular        {font-family: 'Inter'; font-size: 10px; font-weight: 400; letter-spacing: 0px; line-height: 14px; text-transform: none; font-style: normal;}
.tn-medium         {font-family: 'Inter'; font-size: 10px; font-weight: 500; letter-spacing: 0px; line-height: 14px; text-transform: none; font-style: normal;}
.tn-semi-bold      {font-family: 'Inter'; font-size: 10px; font-weight: 600; letter-spacing: 0px; line-height: 14px; text-transform: none; font-style: normal;}
.tn-bold           {font-family: 'Inter'; font-size: 10px; font-weight: 700; letter-spacing: 0px; line-height: 14px; text-transform: none; font-style: normal;}
.tn-italic         {font-family: 'Inter'; font-size: 10px; font-weight: 400; letter-spacing: 0px; line-height: 14px; text-transform: none; font-style: italic;}


/* ///////////////////////////////////////////////////////// */


/* Стили кнопок */

.header-1,
.secondary-lg-full,
.secondary-lg,
.secondary-sm,
.secondary-custom,
.secondary-text-lg,
.subtle-violet-sm {
   /* Отключение long press и ореола на мобильных */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

/* Secondary · Icon · Large · Full */
.secondary-lg-full {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full) !important;
}

/* Secondary · Icon · Large */
.secondary-lg {
  width: 44px;
  height: 44px;
}

/* Secondary · Icon · Small */
.secondary-sm {
  width: 40px;
  height: 40px;
}


.secondary-lg,
.secondary-lg-full,
.secondary-sm,
.secondary-custom {
  cursor: pointer;
  display: flex;
  justify-content: center; /* Центрирование по горизонтали */
  align-items: center; /* Центрирование по вертикали */
  border-radius: var(--radius-300);
  border: 1px solid var(--04-border-control);
  background: var(--01-layer-2);
  /* ↓ bottom/XS */
  box-shadow: shadow-bottom-XS-1-x var(--08-Shadow-Bottom-XS-1-y, 1px) var(--08-Shadow-Bottom-XS-1-blur, 2px) var(--08-Shadow-Bottom-XS-1-spread, 0) var(--08-Shadow-Bottom-XS-1-color, rgba(22, 33, 88, 0.09));
}

/* .secondary-custom {
  width: 56px;
  height: 100%;
  border: none;
  border-radius: 20px 8px 8px 20px;
} */

.secondary-lg:hover,
.secondary-lg-full:hover,
.secondary-sm:hover,
.secondary-custom:hover {
  background: var(--05-layer-2-hover);
}

.secondary-lg:active,
.secondary-lg-full:active,
.secondary-sm:active,
.secondary-custom:active {
    background: var(--05-layer-2-pressed);
    box-shadow: var(--08-Shadow-Inner-XS-1-x, 0) var(--08-Shadow-Inner-XS-1-y, 1px) var(--08-Shadow-Inner-XS-1-blur, 2px) var(--08-Shadow-Inner-XS-1-spread, 0) var(--08-Shadow-Inner-XS-1-color, rgba(22, 33, 88, 0.09)) inset;
}

.secondary-lg svg,
.secondary-lg-full svg,
.secondary-sm svg,
.icon-home-outline svg,
.icon-schevron-right svg,
.secondary-custom svg {
    fill: var(--02-content-secondary);
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* Secondary · Text · 48px */
.secondary-text-lg {
    display: inline-flex;
    padding: var(--space-200) var(--space-400);
    justify-content: center;
    align-items: center;
    gap: var(--space-150);

    cursor: pointer;
    width: auto;
    height: 48px;

    border-radius: var(--radius-full);
    border: 1px solid var(--04-border-control);
    background: var(--01-layer-2);

    box-shadow: shadow-bottom-XS-1-x var(--08-Shadow-Bottom-XS-1-y, 1px) var(--08-Shadow-Bottom-XS-1-blur, 2px) var(--08-Shadow-Bottom-XS-1-spread, 0) var(--08-Shadow-Bottom-XS-1-color, rgba(22, 33, 88, 0.09));
}

.secondary-text-lg:hover {
    background: var(--05-layer-2-hover);
}

.secondary-text-lg:active {
    background: var(--05-layer-2-pressed);
    box-shadow: var(--08-Shadow-Inner-XS-1-x, 0) var(--08-Shadow-Inner-XS-1-y, 1px) var(--08-Shadow-Inner-XS-1-blur, 2px) var(--08-Shadow-Inner-XS-1-spread, 0) var(--08-Shadow-Inner-XS-1-color, rgba(22, 33, 88, 0.09)) inset;
}

.secondary-text-lg p {
    color: var(--02-content-primary);
    /* font-family: var(--font-secondary); */
    /* font-size: var(--module-350); */
    /* font-weight: var(--fw-medium); */
    /* line-height: var(--module-500); */
    text-align: center;
}

/* Subtle · Violet · 36px */
.subtle-violet-sm {
    display: flex;
    justify-content: center; /* Центрирование по горизонтали */
    align-items: center; /* Центрирование по вертикали */
    width: 36px;
    height: 36px;
    border-radius: var(--radius-300);
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
}

.subtle-violet-sm:hover {
    background: var(--06-theme-violet-layer-soft-hover);
}

.subtle-violet-sm:active {
    background: var(--06-theme-violet-layer-soft-pressed);
    /* ⤵ inner/XS */
    box-shadow: var(--08-Shadow-Inner-XS-1-x, 0) var(--08-Shadow-Inner-XS-1-y, 1px) var(--08-Shadow-Inner-XS-1-blur, 2px) var(--08-Shadow-Inner-XS-1-spread, 0) var(--08-Shadow-Inner-XS-1-color, rgba(22, 33, 88, 0.09)) inset;
}

.subtle-violet-sm svg {
    fill: var(--06-theme-violet-content);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* Стили бейджей */

/* .chip-violet-label-small {
    background: var(--06-theme-neutral-layer-soft);
    color: var(--02-content-secondary);
    text-decoration: none;
    
    display: inline-flex;
    padding: var(--space-150) var(--space-300);
    align-items: center;
    gap: var(--space-100);
    border-radius: var(--radius-300);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.chip-violet-label-small:hover {

}

.chip-violet-label-small:active {
  background: var(--06-theme-violet-layer-solid);
  color: var(--02-content-on-solid);
} */


.chip-neutral-label-small {
    background: var(--01-layer-2);
    color: var(--02-content-secondary);
    text-decoration: none;
    border: 1px solid var(--04-border-control);
    
    padding: var(--space-150) var(--space-300);
    border-radius: var(--radius-300);
    gap: var(--space-100);

    display: inline-flex;
    cursor: pointer;
    align-items: center;
    transition: background-color 0.15s ease;
    /* Отключение long press и ореола на мобильных */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.chip-neutral-label-small:hover {
    background: var(--05-layer-2-hover);
}

.chip-neutral-label-small:active, 
.badge.active {
    background: var(--01-layer-neutral-soft);
}


/* //////////////////////////////////////////////////////////////////////////////// */


/* === Базовые стили и контейнеры === */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth; /* Плавный скролл для всей страницы */
  overflow-y: scroll;
}

/* На тач-устройствах глобальный smooth конфликтует с нативным скроллом и sticky-блоками */
@media (hover: none) and (pointer: coarse) {
  html {
    scroll-behavior: auto;
  }
}

body {
  gap: var(--gap-regular);

  display: grid;
  margin: 0 auto;
  max-width: 1036px;
  background-color: var(--01-layer-background);
  padding: 0;
  box-sizing: border-box;
  font-family: -apple-system, Inter, Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

/* Полоска над шапкой: смена домена, дедлайн старого, редирект */
.site-top-banner {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 12px 16px 14px;
  text-align: center;
  background: linear-gradient(135deg, #4a3ab0 0%, #6b59d9 42%, #5c4dc9 100%);
  color: #fdfcff;
  border-radius: 0 0 20px 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 4px 20px rgba(91, 76, 200, 0.35);
}

.site-top-banner__inner {
  max-width: 52rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.site-top-banner__lead {
  margin: 0;
  color: inherit;
  font-weight: 600;
  line-height: 1.45;
}

.site-top-banner__badge {
  display: inline-block;
  margin: 0 8px 0 0;
  padding: 3px 9px;
  border-radius: 6px;
  background: rgba(255, 80, 80, 0.95);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
  line-height: 1.2;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
}

.site-top-banner a {
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  /* text-decoration-thickness: 2px; */
  /* text-underline-offset: 3px; */
}

.site-top-banner a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

body.dark-theme .site-top-banner {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.wrap-start {
  border-radius: 20px;
  background: var(--01-layer-1);
  padding: 0 16px 0 16px;
}

.wrap-center {
  border-radius: 20px;
  background: var(--01-layer-1);
  padding: 16px;
}




/* ///////////////////////////////////////////////////////// */


/* Header */

.header-0 {
  position: relative;
  top: 0;
  left: 0;
  display: flex;
  padding: 16px 0;
  gap: 12px;
  align-self: stretch;
  align-items: center;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-wrap {
  display: flex;
  flex: 1;
}

.header-1 {
  display: flex;
  align-items: center;
  cursor: pointer;
  gap: 4px;
}

.header-logo {
  width: 36px;
  height: 36px;
  overflow: hidden;
}

.header-1:hover {
  .header-logo {
    transform: rotate(360deg);
    transition: transform 0.4s ease-in-out;
  }
}

.header-title {
  color: var(--02-content-primary);
}

.list-desktop {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.item {  
  color: var(--02-content-primary);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  align-self: stretch;

  text-decoration: none;
}

.item:hover {
  text-align: center;
  cursor: pointer;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-thickness: 10%;
  text-underline-offset: auto;
  text-underline-position: from-font;
}

.item:active {
  color: var(--02-content-secondary);
}


/* ///////////////////////////////////////////////////////// */


/* Переключение темы */
.switcher-theme {
  cursor: pointer;
  position: relative;
  width: 82px;
  height: 40px;
  padding: 4px;
  gap: 2px;
  border-radius: 12px;
  display: flex;
  align-items: flex-start;
  background: var(--01-layer-neutral-soft);
}

.theme-night, .theme-day {
  cursor: pointer;
  display: flex;
  width: calc(100% - 50% - 1px);
  height: 100%;
  padding: 4px;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  z-index: 1;
}

.icon-day svg,
.icon-night svg {
  fill: var(--02-content-secondary);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.switcher-background {
  background:#FFFFFF;
  width: calc(100% - 50% - 5px);
  height: calc(100% - 8px);
  position: absolute;
  left: 4px;
  transition: left 0.2s;

  border-radius: var(--radius-atom-padding-100, 8px);
  z-index: 0;
}

.theme-day-active .switcher-background {
  left: 4px;
}
.theme-night-active .switcher-background {
  left: calc(100% - 50% + 1px);
}


/* ///////////////////////////////////////////////////////// */


/* Футер */
.footer {
  border-radius: 20px 20px 0 0;
  display: grid;
  flex-direction: column;
  width: 100%;
  padding: 24px 16px 24px 16px;
  align-items: center;
  background: var(--01-layer-1);
  gap: 24px;
  align-self: stretch;
}

.footer-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.footer-text {
  display: grid;
  gap: 12px;
  text-align: center;
}

.wishes {
  color: var(--02-content-primary);
}

.copyright {
  color: var(--02-content-secondary);
}


/* //////////////////////////////////////////////////////////////////////////////// */


/* Скелетоны */
.skeleton {
    background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e8e8e8 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 8px;
}

@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeletons-container {
    display: contents;
}

.skeleton-group-title {
  width: 150px;
  height: 40px;
}

.skeleton-card-title {
    height: 20px;
    width: 80%;
    margin: 0 8px 4px 8px;
}

.skeleton-card-description {
    height: 16px;
    width: 60%;
    margin: 0 8px 8px 8px;
}

/* Скелетоны страницы детали */

.detail-skeleton-breadcrumb-row {
    display: flex;
    align-items: center;
    gap: 4px;
    align-self: stretch;
}

.skeleton-detail-icon {
    width: 46px;
    height: 34px;
    flex-shrink: 0;
}

.skeleton-detail-chip {
    width: 60px;
    height: 32px;
}

.skeleton-detail-chip--wide {
    width: 80px;
}

.detail-skeleton-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-self: stretch;
}

.skeleton-detail-title {
    width: 80%;
    height: 32px;
}

.skeleton-detail-subtitle {
    width: 55%;
    height: 20px;
}


/* //////////////////////////////////////////////////////////////////////////////// */


/* === Стили для категорий === */

/* Главная страница */

.groups-container {
  display: flex;
  align-items: flex-start;
  align-content: flex-start;
  gap: 12px;
  align-self: stretch;
  flex-wrap: wrap;
  justify-content: center;
}

.group,
.skeleton-group {
  display: flex;
  padding: 8px 12px 8px 8px;
  align-items: center;
  gap: 12px;
  border-radius: 20px;
  background: var(--01-layer-1);
  text-decoration: none;
  /* Отключение ореола на мобильных */
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.group:hover {
  /* box-shadow: 0 0 0 2px var(--01-layer-accent-solid);*/
  .group-cover-wrap {
    box-shadow: 0 0 0 2px var(--01-layer-accent-solid);
  }
}


.group-content {
  display: grid;
  gap: 0px;
}

.group-cover-wrap,
.skeleton-group-cover {
  width: 40px;
  height: 40px;
  border-radius: 18px 18px 18px 0;
  overflow: hidden;

  display: flex;
  justify-content: center;
  align-items: center;
}

.group-cover {
  height: 100%;
  scale: 1.3;
}

.group-title {
  color: var(--02-content-primary);
}

.group-description {
  color: var(--02-content-secondary);
}


/* Страница раздела */
.badge-wrap {
  border-radius: 20px;
  background: var(--01-layer-1);
  padding: 16px;
  gap: 8px;

  position: sticky;
  top: 0px;
  z-index: 10;
  display: flex;
  overflow-x: auto; /* Добавлено для горизонтального скроллинга */
  overflow-y: hidden; /* Убираем вертикальный скроллинг */
  align-items: flex-start;
  white-space: nowrap; /* Запрещаем перенос элементов */
  scrollbar-width: none; /* Убираем скроллбар для Firefox */
  -ms-overflow-style: none; /* Убираем скроллбар для IE */
}

/* Вертикальный скролл страницы не уводит в горизонтальный скролл полосы бейджей (особенно при скролле вверх) */
.subgroups-badge-wrap {
  touch-action: pan-x pinch-zoom;
}

/* "Другие группы" на странице group.html: обычный блок (без sticky) */
.other-groups-badge-wrap {
  display: flex;
  gap: 8px;
  position: static;
  /* top: auto; */
  z-index: auto;
  overflow: visible;
  white-space: normal;
  flex-wrap: wrap;
}

.button-up {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
}

.button-up {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  transition: all 0.3s ease;
  pointer-events: none;
}

.button-up.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}


/* //////////////////////////////////////////////////////////////////////////////// */


/* === Стили для общих карточек === */

#cards-container-title {
  display: flex;
  align-items: center;
  gap: 12px;
  align-self: stretch;
}

.subgroups-wrap {
  display: grid;
  gap: var(--gap-regular);
}

.cards-container-0 {
  width: 100%;
  display: grid;
  gap: 12px;
}

/* Страница «О проекте» */

.versions-wrap {
  width: 100%;
  display: grid;
  gap: 12px;
}

.versions-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.skeleton-versions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.skeleton-version {
  height: fit-content;
}

.version-card, .skeleton-version {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px;
  border-radius: var(--radius-200);
  background: var(--01-layer-2);
  border: 1px solid var(--04-border-on-layer-2);
}

.version-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.version-label {
  color: var(--02-content-secondary);
}

.version-date {
  color: var(--02-content-secondary);
}

.version-title {
  color: var(--02-content-primary);
}

.version-description {
  color: var(--02-content-secondary);
  white-space: pre-line;
}

.version-link {
  color: var(--01-layer-accent-solid);
  text-decoration: none;
}

.version-link:hover {
  text-decoration: underline;
}

.version-link-button {
  display: inline-block;
  margin-top: 8px;
  font-size: 14px;
}

.cards-container-0-header {
  display: grid;
  gap: 2px;
  flex: 1;
}

.container-title {
  display: flex;
  color: var(--02-content-primary);
  align-items: flex-start;
  gap: 4px;
}

.container-title span {
  color: var(--02-content-secondary);
}

.container-description {
  color: var(--02-content-secondary);
}

.cards-container {
  display: grid;
  row-gap: 12px;
  column-gap: 12px;
  /* display: grid-lanes;
  gap: 12px; */
  flex: 1 0 0;
  align-self: stretch;
  width: 100%;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.card,
.skeleton-card {
  display: flex;
  flex-direction: column; /* Располагаем элементы вертикально */
  justify-content: flex-start;
  align-items: stretch;
  overflow: hidden;
  min-height: 184px;
  padding: 4px;

  background: var(--01-layer-1);
  border: 1px solid var(--04-border-control); /* Граница карточки */
  border-radius: var(--radius-200);
  position: relative;
  cursor: pointer;
  text-decoration: none;
}

.card:hover {
  box-shadow: 0 0 0 2px var(--01-layer-accent-solid);
  border: 1px solid var(--01-layer-1);
}

.card img,
.skeleton-card-cover {
  border-radius: 4px;
  width: 100%;
  height: 125px;
  object-fit: cover;
  margin-bottom: 12px;
  object-position: center;
}

.card-title {
  color: var(--02-content-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 8px 4px 8px;
}

.card-description {
  color: var(--02-content-tertiary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* line-clamp: 2; */
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* text-overflow: ellipsis; */
  margin: 0 8px 8px 8px;
}


.title-with-button {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Subtle · Violet · 32px */
.subtle-violet-24 {
    background: var(--06-theme-violet-layer-soft);    
    display: flex;
    justify-content: center; /* Центрирование по горизонтали */
    align-items: center; /* Центрирование по вертикали */
    width: 32px;
    height: 32px;
    border-radius: var(--radius-200);
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.1s;
    margin-left: 4px;
    /* Отключение long press и ореола на мобильных */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.subtle-violet-24:hover {
    background: var(--06-theme-violet-layer-soft-hover);
}

.title-with-button:hover .subtle-violet-24,
.subtle-violet-24:hover {
  opacity: 1;
  pointer-events: auto;
}

.subtle-violet-24 svg {
  fill: var(--06-theme-violet-content);
}

.subtle-violet-24:hover svg {
  fill: var(--06-theme-violet-content);
}

.subtle-violet-24:active svg {
  fill: var(--06-theme-violet-content-pressed);
}


/* ///////////////////////////////////////////////////////// */


#detail-container-0 {
  display: grid;
  gap: var(--gap-regular);
  width: 100%;
  /* min-height: 100vh; Минимальная высота равна высоте окна */
  /* margin: 0 auto; */
  /* border-radius: 0 0 12px 12px; */
  /* background: var(--01-layer-background); */
}

.detail-container {
  display: grid;
  gap: var(--gap-regular);
}

.detail-container-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
}



.detail-container-image {
  position: relative;
  /* width: 100%; */
  aspect-ratio: 16/9;
  min-height: 200px;
  border-radius: 12px;
  background: var(--01-layer-1);
  overflow: hidden;
  display: flex;
  justify-content: center;
}

.image {
  position: relative;
  z-index: 2;
  width: 100%;
  /* height: 100%; */
  /* min-height: 400px; */
  object-fit: cover;
  /* display: block; */
  object-position: center;
}

/* .image-blur {
  filter: blur(24px);
  transform: scale(2);
  position: absolute;
  z-index: 1;
} */

.detail-block1 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  gap: 8px;
}

.detail-block1-title {
  color: var(--02-content-primary);
}

.detail-block1-subtitle {
  color: var(--02-content-secondary);
  display: -webkit-box;
  /* -webkit-box-orient: vertical;
  -webkit-line-clamp: 1; */
  align-self: stretch;
  overflow: hidden;
  text-overflow: ellipsis;
  /* word-break: break-all; */

}

.detail-block1-subtitle:empty {
  display: none;
}

.detail-block2-list {
  display: flex;
  padding: 8px 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  align-self: stretch;
}

.detail-block2-list-item {
  display: flex;
  padding: 16px;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
  border-radius: 20px;
  background: var(--01-layer-1);
  text-decoration: none;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;

}

.detail-block2-list-item:hover {
  /* background: var(--06-theme-violet-layer-soft-hover); */
  background: var(--05-layer-neutral-soft-hover);
}

.detail-block2-list-item:active {
  /* background: var(--06-theme-violet-layer-soft-pressed); */
  background: var(--05-layer-neutral-soft-pressed);

}

.detail-block2-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2px;
  flex: 1 0 0;
}

.detail-block2-list-title {
  align-self: stretch;
  color: var(--02-content-primary);
}

.detail-block2-list-subtitle {
  color: var(--02-content-tertiary);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  align-self: stretch;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
}

.icon-diagonal-arrow svg {
  fill: var(--02-content-secondary);
}

.detail-block3-author {
  color: var(--02-content-primary);
}

.detail-ai {
  display: none;  /* TODO: убрать когда появятся summary по сайтам */
  /* display: grid; */
  /* gap: 2px; */
}

.detail-ai-summary {
  color: var(--02-content-primary);
}

.detail-ai-label-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  align-self: stretch;
}

.detail-ai-label {
  color: var(--02-content-tertiary);
}

.detail-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  align-self: stretch;
}

.detail-meta-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
  color: var(--02-content-tertiary);
}

.detail-meta-row span:last-child {
  color: var(--02-content-primary);
}

.detail-meta-row--empty {
  display: none;
}

/* TODO: убрать когда придумаешь применение этих полей */
.detail-meta-row:has(.group-slug),
.detail-meta-row:has(.detail),
.detail-meta-row:has(.subgroup-slug),
.detail-meta-row:has(.version-slug),
.detail-meta-row:has(.status-slug) {
  display: none;
}


/* ///////////////////////////////////////////////////////// */


/* === Стили для активного меню поиска === */

.search-input-wrap-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: stretch;
}

.search-input-wrap {
  display: flex;
  align-items: flex-start;
  flex: 1 0 0;
  height: 40px;
  padding: var(--space-0) var(--space-300);
  align-items: center;
  gap: var(--Spacing-space-200, 8px);
  align-self: stretch;

  border-radius: var(--radius-component, 8px);
  border: 1px solid var(--04-Border-border-control, #D5D6DC);
  background: var(--01-Layer-layer-2, #FFF);

  /* ↓ bottom/XS */
  box-shadow: shadow-bottom-XS-1-x var(--08-Shadow-Bottom-XS-1-y, 1px) var(--08-Shadow-Bottom-XS-1-blur, 2px) var(--08-Shadow-Bottom-XS-1-spread, 0) var(--08-Shadow-Bottom-XS-1-color, rgba(22, 33, 88, 0.09));
}

.icon-input-search svg {
  fill: var(--02-content-secondary);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  
}

.icon-close {
  display: none;
}

.search-input {
  width: 100%;
  height: 100%;
  font-family: 'Inter';
  font-size: 14px;
  color: var(--02-content-secondary);
  outline: none;
  border: none;
}

.search-badge-wrap {
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  align-self: stretch;

  max-height: 90vh; 
  overflow-y: auto; 
  overscroll-behavior: contain; 
  scrollbar-width: none;
}

.search-group-container {

}

.search-group-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
}

.subgroup-badges {
  display: flex;
  align-items: flex-start;
  align-content: flex-start;
  gap: 8px;
  align-self: stretch;
  flex-wrap: wrap;
}


/* ///////////////////////////////////////////////////////// */


/* Drawer */

drawer-component {
  display: none;
}

.header-wrap-start {
  display: flex;
  width: 100%;
  padding: 0px 16px 0 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  align-self: stretch;
  border-radius: 0 0 20px 20px;
  background: var(--01-layer-1);
  z-index: 100;
}

.header-wrap-center {
  display: flex;
  width: 100%;
  padding: 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  border-radius: 20px;
  background: var(--01-layer-1);
  z-index: 100;
}

.header-wrap-footer {
  display: flex;
  width: 100%;
  padding: 0 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  border-radius: 20px;
  background: var(--01-layer-1);
  z-index: 100;
}

/* Блокировка вызова меню */
#menu-toggle {
  display: none;
}

.drawer header-component,
.search header-component {
  width: 100%;
}

.drawer,
.search {
  display: flex;
  max-width: 1036px;
  margin: auto;
  gap: var(--gap-regular);
  flex-direction: column;
  align-items: flex-start;
  position: fixed;
  left: 0;
  right: 0;
  display: flex;
  z-index: 100;
  top: -400%;
}

.drawer.open,
.search.open {
  top: 0px;
}
.search.open {
  #menu-toggle {
    display: none;
  }
}
.search.open .icon-search {
  display: none;
}
.search.open .icon-close {
  display: inline;
}

/* Backdrop */
.drawer.open .drawer-overlay,
.search.open .drawer-overlay {
  content: "";
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.664);
  z-index: 99;
}

/* Блокируем прокрутку */
body.drawer-open,
body.search-open {
  overflow: hidden;
}


/* ///////////////////////////////////////////////////////// */


/* Медиазапросы */

@media (max-width: 900px) {

drawer-component {
  display: inline-flex;
}

#menu-toggle {
  display: inline-flex;
}
  
/* Десктопный хедер */
.list-desktop .item{
  display: none;
}

.list-desktop .item-active {
  color: var(--01-layer-accent-solid);
}

.header-0 .switcher-theme {
  display: none;
}

.drawer.open {
  #search-toggle {
    display: none;
  }
}

.drawer.open .icon-burger {
  display: none;
}

.drawer.open .icon-close {
  display: inline;
}


.list-mobile {
  /* padding: 64px 0 0 0; */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  align-self: stretch;
}

.switcher-theme {
  width: 100%;
  height: 72px;
}
}


@media (max-width: 767px) {
  .subtle-violet-24 {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
  }

  /* .detail-container-image {
    height: 250px;
    min-height: 250px;
  } */

  .cards-container {
    grid-template-columns: 1fr 1fr;
  }

  .button-up {
    bottom: 16px;
    right: 16px;
  }

    .footer {
    padding: 32px 16px;
  }

  /* Группы */
  .groups-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    align-content: flex-start;
    gap: 10px;
    align-self: stretch;
    flex-wrap: wrap;
  }
  
  .group {
    gap: 4px;
    padding: 0;
  }
  
  .group:hover {
  box-shadow: none;

    .group-cover-wrap {
      box-shadow: 0 0 0 2px var(--01-layer-accent-solid);
    }
  }

  
  .group-cover-wrap,
  .skeleton-group-cover {
    width: 36px;
    height: 36px;
    border-radius: 16px 16px 16px 0;
    overflow: hidden;
    
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .group-cover {
    scale: 1.3;
    /* aspect-ratio: 1/1; */
  }
  
  .group-content {
    display: flex;
    padding: 0 12px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-radius: 8px;
    background: var(--01-layer-neutral-subtle);
  }
  
  .skeleton-group-title {
    width: 34px;
    height: 20px;
  }
  
  .group-description {
    display: none;
  }
}