/* open-sans-cyrillic-ext-400-normal */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/open-sans-cyrillic-ext-400-normal.9b6355dc.woff2) format('woff2'), url(/assets/fonts/open-sans-cyrillic-ext-400-normal.0f364298.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* open-sans-cyrillic-400-normal */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/open-sans-cyrillic-400-normal.625d541c.woff2) format('woff2'), url(/assets/fonts/open-sans-cyrillic-400-normal.c1caca2d.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* open-sans-greek-ext-400-normal */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/open-sans-greek-ext-400-normal.f8c9501b.woff2) format('woff2'), url(/assets/fonts/open-sans-greek-ext-400-normal.ab356a4a.woff) format('woff');
  unicode-range: U+1F00-1FFF;
}

/* open-sans-greek-400-normal */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/open-sans-greek-400-normal.20c1f08f.woff2) format('woff2'), url(/assets/fonts/open-sans-greek-400-normal.060889a5.woff) format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* open-sans-hebrew-400-normal */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/open-sans-hebrew-400-normal.eddd08e8.woff2) format('woff2'), url(/assets/fonts/open-sans-hebrew-400-normal.4e1539cf.woff) format('woff');
  unicode-range: U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;
}

/* open-sans-math-400-normal */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/open-sans-math-400-normal.e067abc4.woff2) format('woff2'), url(/assets/fonts/open-sans-math-400-normal.a00330f1.woff) format('woff');
  unicode-range: U+0302-0303,U+0305,U+0307-0308,U+0310,U+0312,U+0315,U+031A,U+0326-0327,U+032C,U+032F-0330,U+0332-0333,U+0338,U+033A,U+0346,U+034D,U+0391-03A1,U+03A3-03A9,U+03B1-03C9,U+03D1,U+03D5-03D6,U+03F0-03F1,U+03F4-03F5,U+2016-2017,U+2034-2038,U+203C,U+2040,U+2043,U+2047,U+2050,U+2057,U+205F,U+2070-2071,U+2074-208E,U+2090-209C,U+20D0-20DC,U+20E1,U+20E5-20EF,U+2100-2112,U+2114-2115,U+2117-2121,U+2123-214F,U+2190,U+2192,U+2194-21AE,U+21B0-21E5,U+21F1-21F2,U+21F4-2211,U+2213-2214,U+2216-22FF,U+2308-230B,U+2310,U+2319,U+231C-2321,U+2336-237A,U+237C,U+2395,U+239B-23B7,U+23D0,U+23DC-23E1,U+2474-2475,U+25AF,U+25B3,U+25B7,U+25BD,U+25C1,U+25CA,U+25CC,U+25FB,U+266D-266F,U+27C0-27FF,U+2900-2AFF,U+2B0E-2B11,U+2B30-2B4C,U+2BFE,U+3030,U+FF5B,U+FF5D,U+1D400-1D7FF,U+1EE00-1EEFF;
}

/* open-sans-symbols-400-normal */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/open-sans-symbols-400-normal.81aab70e.woff2) format('woff2'), url(/assets/fonts/open-sans-symbols-400-normal.a0a35bfa.woff) format('woff');
  unicode-range: U+0001-000C,U+000E-001F,U+007F-009F,U+20DD-20E0,U+20E2-20E4,U+2150-218F,U+2190,U+2192,U+2194-2199,U+21AF,U+21E6-21F0,U+21F3,U+2218-2219,U+2299,U+22C4-22C6,U+2300-243F,U+2440-244A,U+2460-24FF,U+25A0-27BF,U+2800-28FF,U+2921-2922,U+2981,U+29BF,U+29EB,U+2B00-2BFF,U+4DC0-4DFF,U+FFF9-FFFB,U+10140-1018E,U+10190-1019C,U+101A0,U+101D0-101FD,U+102E0-102FB,U+10E60-10E7E,U+1D2C0-1D2D3,U+1D2E0-1D37F,U+1F000-1F0FF,U+1F100-1F1AD,U+1F1E6-1F1FF,U+1F30D-1F30F,U+1F315,U+1F31C,U+1F31E,U+1F320-1F32C,U+1F336,U+1F378,U+1F37D,U+1F382,U+1F393-1F39F,U+1F3A7-1F3A8,U+1F3AC-1F3AF,U+1F3C2,U+1F3C4-1F3C6,U+1F3CA-1F3CE,U+1F3D4-1F3E0,U+1F3ED,U+1F3F1-1F3F3,U+1F3F5-1F3F7,U+1F408,U+1F415,U+1F41F,U+1F426,U+1F43F,U+1F441-1F442,U+1F444,U+1F446-1F449,U+1F44C-1F44E,U+1F453,U+1F46A,U+1F47D,U+1F4A3,U+1F4B0,U+1F4B3,U+1F4B9,U+1F4BB,U+1F4BF,U+1F4C8-1F4CB,U+1F4D6,U+1F4DA,U+1F4DF,U+1F4E3-1F4E6,U+1F4EA-1F4ED,U+1F4F7,U+1F4F9-1F4FB,U+1F4FD-1F4FE,U+1F503,U+1F507-1F50B,U+1F50D,U+1F512-1F513,U+1F53E-1F54A,U+1F54F-1F5FA,U+1F610,U+1F650-1F67F,U+1F687,U+1F68D,U+1F691,U+1F694,U+1F698,U+1F6AD,U+1F6B2,U+1F6B9-1F6BA,U+1F6BC,U+1F6C6-1F6CF,U+1F6D3-1F6D7,U+1F6E0-1F6EA,U+1F6F0-1F6F3,U+1F6F7-1F6FC,U+1F700-1F7FF,U+1F800-1F80B,U+1F810-1F847,U+1F850-1F859,U+1F860-1F887,U+1F890-1F8AD,U+1F8B0-1F8BB,U+1F8C0-1F8C1,U+1F900-1F90B,U+1F93B,U+1F946,U+1F984,U+1F996,U+1F9E9,U+1FA00-1FA6F,U+1FA70-1FA7C,U+1FA80-1FA89,U+1FA8F-1FAC6,U+1FACE-1FADC,U+1FADF-1FAE9,U+1FAF0-1FAF8,U+1FB00-1FBFF;
}

/* open-sans-vietnamese-400-normal */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/open-sans-vietnamese-400-normal.82861daf.woff2) format('woff2'), url(/assets/fonts/open-sans-vietnamese-400-normal.7c3b56a3.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* open-sans-latin-ext-400-normal */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/open-sans-latin-ext-400-normal.6fd6f861.woff2) format('woff2'), url(/assets/fonts/open-sans-latin-ext-400-normal.9a552a0b.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* open-sans-latin-400-normal */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/open-sans-latin-400-normal.4a40e7d3.woff2) format('woff2'), url(/assets/fonts/open-sans-latin-400-normal.69660656.woff) format('woff');
  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;
}
/* open-sans-cyrillic-ext-500-normal */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/fonts/open-sans-cyrillic-ext-500-normal.12a06aa2.woff2) format('woff2'), url(/assets/fonts/open-sans-cyrillic-ext-500-normal.46b83022.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* open-sans-cyrillic-500-normal */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/fonts/open-sans-cyrillic-500-normal.43c17966.woff2) format('woff2'), url(/assets/fonts/open-sans-cyrillic-500-normal.bba149ac.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* open-sans-greek-ext-500-normal */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/fonts/open-sans-greek-ext-500-normal.632201ea.woff2) format('woff2'), url(/assets/fonts/open-sans-greek-ext-500-normal.48272fd8.woff) format('woff');
  unicode-range: U+1F00-1FFF;
}

/* open-sans-greek-500-normal */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/fonts/open-sans-greek-500-normal.baa2ebe9.woff2) format('woff2'), url(/assets/fonts/open-sans-greek-500-normal.7b1cb849.woff) format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* open-sans-hebrew-500-normal */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/fonts/open-sans-hebrew-500-normal.fb0d2955.woff2) format('woff2'), url(/assets/fonts/open-sans-hebrew-500-normal.4088d265.woff) format('woff');
  unicode-range: U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;
}

/* open-sans-math-500-normal */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/fonts/open-sans-math-500-normal.a9689a4a.woff2) format('woff2'), url(/assets/fonts/open-sans-math-500-normal.b65570ad.woff) format('woff');
  unicode-range: U+0302-0303,U+0305,U+0307-0308,U+0310,U+0312,U+0315,U+031A,U+0326-0327,U+032C,U+032F-0330,U+0332-0333,U+0338,U+033A,U+0346,U+034D,U+0391-03A1,U+03A3-03A9,U+03B1-03C9,U+03D1,U+03D5-03D6,U+03F0-03F1,U+03F4-03F5,U+2016-2017,U+2034-2038,U+203C,U+2040,U+2043,U+2047,U+2050,U+2057,U+205F,U+2070-2071,U+2074-208E,U+2090-209C,U+20D0-20DC,U+20E1,U+20E5-20EF,U+2100-2112,U+2114-2115,U+2117-2121,U+2123-214F,U+2190,U+2192,U+2194-21AE,U+21B0-21E5,U+21F1-21F2,U+21F4-2211,U+2213-2214,U+2216-22FF,U+2308-230B,U+2310,U+2319,U+231C-2321,U+2336-237A,U+237C,U+2395,U+239B-23B7,U+23D0,U+23DC-23E1,U+2474-2475,U+25AF,U+25B3,U+25B7,U+25BD,U+25C1,U+25CA,U+25CC,U+25FB,U+266D-266F,U+27C0-27FF,U+2900-2AFF,U+2B0E-2B11,U+2B30-2B4C,U+2BFE,U+3030,U+FF5B,U+FF5D,U+1D400-1D7FF,U+1EE00-1EEFF;
}

/* open-sans-symbols-500-normal */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/fonts/open-sans-symbols-500-normal.a9e2f33a.woff2) format('woff2'), url(/assets/fonts/open-sans-symbols-500-normal.30664c73.woff) format('woff');
  unicode-range: U+0001-000C,U+000E-001F,U+007F-009F,U+20DD-20E0,U+20E2-20E4,U+2150-218F,U+2190,U+2192,U+2194-2199,U+21AF,U+21E6-21F0,U+21F3,U+2218-2219,U+2299,U+22C4-22C6,U+2300-243F,U+2440-244A,U+2460-24FF,U+25A0-27BF,U+2800-28FF,U+2921-2922,U+2981,U+29BF,U+29EB,U+2B00-2BFF,U+4DC0-4DFF,U+FFF9-FFFB,U+10140-1018E,U+10190-1019C,U+101A0,U+101D0-101FD,U+102E0-102FB,U+10E60-10E7E,U+1D2C0-1D2D3,U+1D2E0-1D37F,U+1F000-1F0FF,U+1F100-1F1AD,U+1F1E6-1F1FF,U+1F30D-1F30F,U+1F315,U+1F31C,U+1F31E,U+1F320-1F32C,U+1F336,U+1F378,U+1F37D,U+1F382,U+1F393-1F39F,U+1F3A7-1F3A8,U+1F3AC-1F3AF,U+1F3C2,U+1F3C4-1F3C6,U+1F3CA-1F3CE,U+1F3D4-1F3E0,U+1F3ED,U+1F3F1-1F3F3,U+1F3F5-1F3F7,U+1F408,U+1F415,U+1F41F,U+1F426,U+1F43F,U+1F441-1F442,U+1F444,U+1F446-1F449,U+1F44C-1F44E,U+1F453,U+1F46A,U+1F47D,U+1F4A3,U+1F4B0,U+1F4B3,U+1F4B9,U+1F4BB,U+1F4BF,U+1F4C8-1F4CB,U+1F4D6,U+1F4DA,U+1F4DF,U+1F4E3-1F4E6,U+1F4EA-1F4ED,U+1F4F7,U+1F4F9-1F4FB,U+1F4FD-1F4FE,U+1F503,U+1F507-1F50B,U+1F50D,U+1F512-1F513,U+1F53E-1F54A,U+1F54F-1F5FA,U+1F610,U+1F650-1F67F,U+1F687,U+1F68D,U+1F691,U+1F694,U+1F698,U+1F6AD,U+1F6B2,U+1F6B9-1F6BA,U+1F6BC,U+1F6C6-1F6CF,U+1F6D3-1F6D7,U+1F6E0-1F6EA,U+1F6F0-1F6F3,U+1F6F7-1F6FC,U+1F700-1F7FF,U+1F800-1F80B,U+1F810-1F847,U+1F850-1F859,U+1F860-1F887,U+1F890-1F8AD,U+1F8B0-1F8BB,U+1F8C0-1F8C1,U+1F900-1F90B,U+1F93B,U+1F946,U+1F984,U+1F996,U+1F9E9,U+1FA00-1FA6F,U+1FA70-1FA7C,U+1FA80-1FA89,U+1FA8F-1FAC6,U+1FACE-1FADC,U+1FADF-1FAE9,U+1FAF0-1FAF8,U+1FB00-1FBFF;
}

/* open-sans-vietnamese-500-normal */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/fonts/open-sans-vietnamese-500-normal.1090cc93.woff2) format('woff2'), url(/assets/fonts/open-sans-vietnamese-500-normal.63405051.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* open-sans-latin-ext-500-normal */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/fonts/open-sans-latin-ext-500-normal.626456d2.woff2) format('woff2'), url(/assets/fonts/open-sans-latin-ext-500-normal.9df8f302.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* open-sans-latin-500-normal */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/fonts/open-sans-latin-500-normal.91d4d8e6.woff2) format('woff2'), url(/assets/fonts/open-sans-latin-500-normal.5006497b.woff) format('woff');
  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;
}
/* open-sans-cyrillic-ext-600-normal */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/fonts/open-sans-cyrillic-ext-600-normal.f93e83a0.woff2) format('woff2'), url(/assets/fonts/open-sans-cyrillic-ext-600-normal.6463c924.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* open-sans-cyrillic-600-normal */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/fonts/open-sans-cyrillic-600-normal.2bdcc6d6.woff2) format('woff2'), url(/assets/fonts/open-sans-cyrillic-600-normal.e01c36ad.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* open-sans-greek-ext-600-normal */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/fonts/open-sans-greek-ext-600-normal.a6d0df84.woff2) format('woff2'), url(/assets/fonts/open-sans-greek-ext-600-normal.cfe83211.woff) format('woff');
  unicode-range: U+1F00-1FFF;
}

/* open-sans-greek-600-normal */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/fonts/open-sans-greek-600-normal.684f3d79.woff2) format('woff2'), url(/assets/fonts/open-sans-greek-600-normal.12f4857c.woff) format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* open-sans-hebrew-600-normal */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/fonts/open-sans-hebrew-600-normal.505ad593.woff2) format('woff2'), url(/assets/fonts/open-sans-hebrew-600-normal.f6bb1da9.woff) format('woff');
  unicode-range: U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;
}

/* open-sans-math-600-normal */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/fonts/open-sans-math-600-normal.501e5ee3.woff2) format('woff2'), url(/assets/fonts/open-sans-math-600-normal.504ea87f.woff) format('woff');
  unicode-range: U+0302-0303,U+0305,U+0307-0308,U+0310,U+0312,U+0315,U+031A,U+0326-0327,U+032C,U+032F-0330,U+0332-0333,U+0338,U+033A,U+0346,U+034D,U+0391-03A1,U+03A3-03A9,U+03B1-03C9,U+03D1,U+03D5-03D6,U+03F0-03F1,U+03F4-03F5,U+2016-2017,U+2034-2038,U+203C,U+2040,U+2043,U+2047,U+2050,U+2057,U+205F,U+2070-2071,U+2074-208E,U+2090-209C,U+20D0-20DC,U+20E1,U+20E5-20EF,U+2100-2112,U+2114-2115,U+2117-2121,U+2123-214F,U+2190,U+2192,U+2194-21AE,U+21B0-21E5,U+21F1-21F2,U+21F4-2211,U+2213-2214,U+2216-22FF,U+2308-230B,U+2310,U+2319,U+231C-2321,U+2336-237A,U+237C,U+2395,U+239B-23B7,U+23D0,U+23DC-23E1,U+2474-2475,U+25AF,U+25B3,U+25B7,U+25BD,U+25C1,U+25CA,U+25CC,U+25FB,U+266D-266F,U+27C0-27FF,U+2900-2AFF,U+2B0E-2B11,U+2B30-2B4C,U+2BFE,U+3030,U+FF5B,U+FF5D,U+1D400-1D7FF,U+1EE00-1EEFF;
}

/* open-sans-symbols-600-normal */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/fonts/open-sans-symbols-600-normal.015482b3.woff2) format('woff2'), url(/assets/fonts/open-sans-symbols-600-normal.a17b3ebb.woff) format('woff');
  unicode-range: U+0001-000C,U+000E-001F,U+007F-009F,U+20DD-20E0,U+20E2-20E4,U+2150-218F,U+2190,U+2192,U+2194-2199,U+21AF,U+21E6-21F0,U+21F3,U+2218-2219,U+2299,U+22C4-22C6,U+2300-243F,U+2440-244A,U+2460-24FF,U+25A0-27BF,U+2800-28FF,U+2921-2922,U+2981,U+29BF,U+29EB,U+2B00-2BFF,U+4DC0-4DFF,U+FFF9-FFFB,U+10140-1018E,U+10190-1019C,U+101A0,U+101D0-101FD,U+102E0-102FB,U+10E60-10E7E,U+1D2C0-1D2D3,U+1D2E0-1D37F,U+1F000-1F0FF,U+1F100-1F1AD,U+1F1E6-1F1FF,U+1F30D-1F30F,U+1F315,U+1F31C,U+1F31E,U+1F320-1F32C,U+1F336,U+1F378,U+1F37D,U+1F382,U+1F393-1F39F,U+1F3A7-1F3A8,U+1F3AC-1F3AF,U+1F3C2,U+1F3C4-1F3C6,U+1F3CA-1F3CE,U+1F3D4-1F3E0,U+1F3ED,U+1F3F1-1F3F3,U+1F3F5-1F3F7,U+1F408,U+1F415,U+1F41F,U+1F426,U+1F43F,U+1F441-1F442,U+1F444,U+1F446-1F449,U+1F44C-1F44E,U+1F453,U+1F46A,U+1F47D,U+1F4A3,U+1F4B0,U+1F4B3,U+1F4B9,U+1F4BB,U+1F4BF,U+1F4C8-1F4CB,U+1F4D6,U+1F4DA,U+1F4DF,U+1F4E3-1F4E6,U+1F4EA-1F4ED,U+1F4F7,U+1F4F9-1F4FB,U+1F4FD-1F4FE,U+1F503,U+1F507-1F50B,U+1F50D,U+1F512-1F513,U+1F53E-1F54A,U+1F54F-1F5FA,U+1F610,U+1F650-1F67F,U+1F687,U+1F68D,U+1F691,U+1F694,U+1F698,U+1F6AD,U+1F6B2,U+1F6B9-1F6BA,U+1F6BC,U+1F6C6-1F6CF,U+1F6D3-1F6D7,U+1F6E0-1F6EA,U+1F6F0-1F6F3,U+1F6F7-1F6FC,U+1F700-1F7FF,U+1F800-1F80B,U+1F810-1F847,U+1F850-1F859,U+1F860-1F887,U+1F890-1F8AD,U+1F8B0-1F8BB,U+1F8C0-1F8C1,U+1F900-1F90B,U+1F93B,U+1F946,U+1F984,U+1F996,U+1F9E9,U+1FA00-1FA6F,U+1FA70-1FA7C,U+1FA80-1FA89,U+1FA8F-1FAC6,U+1FACE-1FADC,U+1FADF-1FAE9,U+1FAF0-1FAF8,U+1FB00-1FBFF;
}

/* open-sans-vietnamese-600-normal */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/fonts/open-sans-vietnamese-600-normal.159889c0.woff2) format('woff2'), url(/assets/fonts/open-sans-vietnamese-600-normal.18435207.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* open-sans-latin-ext-600-normal */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/fonts/open-sans-latin-ext-600-normal.f0e1b23f.woff2) format('woff2'), url(/assets/fonts/open-sans-latin-ext-600-normal.92e32917.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* open-sans-latin-600-normal */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/fonts/open-sans-latin-600-normal.4e3a327d.woff2) format('woff2'), url(/assets/fonts/open-sans-latin-600-normal.a6808ce4.woff) format('woff');
  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;
}
/* open-sans-cyrillic-ext-700-normal */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/fonts/open-sans-cyrillic-ext-700-normal.7bf6689e.woff2) format('woff2'), url(/assets/fonts/open-sans-cyrillic-ext-700-normal.7ac62c51.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* open-sans-cyrillic-700-normal */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/fonts/open-sans-cyrillic-700-normal.c4b0a1b1.woff2) format('woff2'), url(/assets/fonts/open-sans-cyrillic-700-normal.fc4cf405.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* open-sans-greek-ext-700-normal */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/fonts/open-sans-greek-ext-700-normal.b8d60cf1.woff2) format('woff2'), url(/assets/fonts/open-sans-greek-ext-700-normal.fafc9132.woff) format('woff');
  unicode-range: U+1F00-1FFF;
}

/* open-sans-greek-700-normal */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/fonts/open-sans-greek-700-normal.75f507c2.woff2) format('woff2'), url(/assets/fonts/open-sans-greek-700-normal.6becb6ee.woff) format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* open-sans-hebrew-700-normal */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/fonts/open-sans-hebrew-700-normal.aef07957.woff2) format('woff2'), url(/assets/fonts/open-sans-hebrew-700-normal.c50eaa6e.woff) format('woff');
  unicode-range: U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;
}

/* open-sans-math-700-normal */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/fonts/open-sans-math-700-normal.3f933e72.woff2) format('woff2'), url(/assets/fonts/open-sans-math-700-normal.60eb4bf1.woff) format('woff');
  unicode-range: U+0302-0303,U+0305,U+0307-0308,U+0310,U+0312,U+0315,U+031A,U+0326-0327,U+032C,U+032F-0330,U+0332-0333,U+0338,U+033A,U+0346,U+034D,U+0391-03A1,U+03A3-03A9,U+03B1-03C9,U+03D1,U+03D5-03D6,U+03F0-03F1,U+03F4-03F5,U+2016-2017,U+2034-2038,U+203C,U+2040,U+2043,U+2047,U+2050,U+2057,U+205F,U+2070-2071,U+2074-208E,U+2090-209C,U+20D0-20DC,U+20E1,U+20E5-20EF,U+2100-2112,U+2114-2115,U+2117-2121,U+2123-214F,U+2190,U+2192,U+2194-21AE,U+21B0-21E5,U+21F1-21F2,U+21F4-2211,U+2213-2214,U+2216-22FF,U+2308-230B,U+2310,U+2319,U+231C-2321,U+2336-237A,U+237C,U+2395,U+239B-23B7,U+23D0,U+23DC-23E1,U+2474-2475,U+25AF,U+25B3,U+25B7,U+25BD,U+25C1,U+25CA,U+25CC,U+25FB,U+266D-266F,U+27C0-27FF,U+2900-2AFF,U+2B0E-2B11,U+2B30-2B4C,U+2BFE,U+3030,U+FF5B,U+FF5D,U+1D400-1D7FF,U+1EE00-1EEFF;
}

/* open-sans-symbols-700-normal */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/fonts/open-sans-symbols-700-normal.40fd13aa.woff2) format('woff2'), url(/assets/fonts/open-sans-symbols-700-normal.4512be5e.woff) format('woff');
  unicode-range: U+0001-000C,U+000E-001F,U+007F-009F,U+20DD-20E0,U+20E2-20E4,U+2150-218F,U+2190,U+2192,U+2194-2199,U+21AF,U+21E6-21F0,U+21F3,U+2218-2219,U+2299,U+22C4-22C6,U+2300-243F,U+2440-244A,U+2460-24FF,U+25A0-27BF,U+2800-28FF,U+2921-2922,U+2981,U+29BF,U+29EB,U+2B00-2BFF,U+4DC0-4DFF,U+FFF9-FFFB,U+10140-1018E,U+10190-1019C,U+101A0,U+101D0-101FD,U+102E0-102FB,U+10E60-10E7E,U+1D2C0-1D2D3,U+1D2E0-1D37F,U+1F000-1F0FF,U+1F100-1F1AD,U+1F1E6-1F1FF,U+1F30D-1F30F,U+1F315,U+1F31C,U+1F31E,U+1F320-1F32C,U+1F336,U+1F378,U+1F37D,U+1F382,U+1F393-1F39F,U+1F3A7-1F3A8,U+1F3AC-1F3AF,U+1F3C2,U+1F3C4-1F3C6,U+1F3CA-1F3CE,U+1F3D4-1F3E0,U+1F3ED,U+1F3F1-1F3F3,U+1F3F5-1F3F7,U+1F408,U+1F415,U+1F41F,U+1F426,U+1F43F,U+1F441-1F442,U+1F444,U+1F446-1F449,U+1F44C-1F44E,U+1F453,U+1F46A,U+1F47D,U+1F4A3,U+1F4B0,U+1F4B3,U+1F4B9,U+1F4BB,U+1F4BF,U+1F4C8-1F4CB,U+1F4D6,U+1F4DA,U+1F4DF,U+1F4E3-1F4E6,U+1F4EA-1F4ED,U+1F4F7,U+1F4F9-1F4FB,U+1F4FD-1F4FE,U+1F503,U+1F507-1F50B,U+1F50D,U+1F512-1F513,U+1F53E-1F54A,U+1F54F-1F5FA,U+1F610,U+1F650-1F67F,U+1F687,U+1F68D,U+1F691,U+1F694,U+1F698,U+1F6AD,U+1F6B2,U+1F6B9-1F6BA,U+1F6BC,U+1F6C6-1F6CF,U+1F6D3-1F6D7,U+1F6E0-1F6EA,U+1F6F0-1F6F3,U+1F6F7-1F6FC,U+1F700-1F7FF,U+1F800-1F80B,U+1F810-1F847,U+1F850-1F859,U+1F860-1F887,U+1F890-1F8AD,U+1F8B0-1F8BB,U+1F8C0-1F8C1,U+1F900-1F90B,U+1F93B,U+1F946,U+1F984,U+1F996,U+1F9E9,U+1FA00-1FA6F,U+1FA70-1FA7C,U+1FA80-1FA89,U+1FA8F-1FAC6,U+1FACE-1FADC,U+1FADF-1FAE9,U+1FAF0-1FAF8,U+1FB00-1FBFF;
}

/* open-sans-vietnamese-700-normal */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/fonts/open-sans-vietnamese-700-normal.6f93069b.woff2) format('woff2'), url(/assets/fonts/open-sans-vietnamese-700-normal.153f0559.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* open-sans-latin-ext-700-normal */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/fonts/open-sans-latin-ext-700-normal.ac430f80.woff2) format('woff2'), url(/assets/fonts/open-sans-latin-ext-700-normal.7024697b.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* open-sans-latin-700-normal */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/fonts/open-sans-latin-700-normal.10a843b2.woff2) format('woff2'), url(/assets/fonts/open-sans-latin-700-normal.9cde0659.woff) format('woff');
  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;
}
/* plus-jakarta-sans-cyrillic-ext-500-normal */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/fonts/plus-jakarta-sans-cyrillic-ext-500-normal.ada8bcf7.woff2) format('woff2'), url(/assets/fonts/plus-jakarta-sans-cyrillic-ext-500-normal.0b54dc92.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* plus-jakarta-sans-vietnamese-500-normal */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/fonts/plus-jakarta-sans-vietnamese-500-normal.78866e97.woff2) format('woff2'), url(/assets/fonts/plus-jakarta-sans-vietnamese-500-normal.62b852ab.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* plus-jakarta-sans-latin-ext-500-normal */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/fonts/plus-jakarta-sans-latin-ext-500-normal.245f570d.woff2) format('woff2'), url(/assets/fonts/plus-jakarta-sans-latin-ext-500-normal.b24ebd0e.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* plus-jakarta-sans-latin-500-normal */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/fonts/plus-jakarta-sans-latin-500-normal.c3130315.woff2) format('woff2'), url(/assets/fonts/plus-jakarta-sans-latin-500-normal.8a919040.woff) format('woff');
  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;
}
/* plus-jakarta-sans-cyrillic-ext-600-normal */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/fonts/plus-jakarta-sans-cyrillic-ext-600-normal.e1e17320.woff2) format('woff2'), url(/assets/fonts/plus-jakarta-sans-cyrillic-ext-600-normal.74481467.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* plus-jakarta-sans-vietnamese-600-normal */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/fonts/plus-jakarta-sans-vietnamese-600-normal.55c541f7.woff2) format('woff2'), url(/assets/fonts/plus-jakarta-sans-vietnamese-600-normal.bd81d255.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* plus-jakarta-sans-latin-ext-600-normal */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/fonts/plus-jakarta-sans-latin-ext-600-normal.af76dcd2.woff2) format('woff2'), url(/assets/fonts/plus-jakarta-sans-latin-ext-600-normal.aec63264.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* plus-jakarta-sans-latin-600-normal */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/fonts/plus-jakarta-sans-latin-600-normal.7720d765.woff2) format('woff2'), url(/assets/fonts/plus-jakarta-sans-latin-600-normal.e325f441.woff) format('woff');
  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;
}
/* plus-jakarta-sans-cyrillic-ext-700-normal */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/fonts/plus-jakarta-sans-cyrillic-ext-700-normal.a0e96d83.woff2) format('woff2'), url(/assets/fonts/plus-jakarta-sans-cyrillic-ext-700-normal.065a21d8.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* plus-jakarta-sans-vietnamese-700-normal */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/fonts/plus-jakarta-sans-vietnamese-700-normal.3324f0f4.woff2) format('woff2'), url(/assets/fonts/plus-jakarta-sans-vietnamese-700-normal.4afaf410.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* plus-jakarta-sans-latin-ext-700-normal */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/fonts/plus-jakarta-sans-latin-ext-700-normal.0e89f541.woff2) format('woff2'), url(/assets/fonts/plus-jakarta-sans-latin-ext-700-normal.569e414c.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* plus-jakarta-sans-latin-700-normal */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/fonts/plus-jakarta-sans-latin-700-normal.7cfa1301.woff2) format('woff2'), url(/assets/fonts/plus-jakarta-sans-latin-700-normal.2e44f76d.woff) format('woff');
  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;
}
/* inter-cyrillic-ext-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/inter-cyrillic-ext-400-normal.39fbf8d2.woff2) format('woff2'), url(/assets/fonts/inter-cyrillic-ext-400-normal.818b8418.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* inter-cyrillic-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/inter-cyrillic-400-normal.89455522.woff2) format('woff2'), url(/assets/fonts/inter-cyrillic-400-normal.dd21c714.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* inter-greek-ext-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/inter-greek-ext-400-normal.f2ef63e7.woff2) format('woff2'), url(/assets/fonts/inter-greek-ext-400-normal.fc80974e.woff) format('woff');
  unicode-range: U+1F00-1FFF;
}

/* inter-greek-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/inter-greek-400-normal.e685387f.woff2) format('woff2'), url(/assets/fonts/inter-greek-400-normal.b412fade.woff) format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* inter-vietnamese-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/inter-vietnamese-400-normal.44c9df13.woff2) format('woff2'), url(/assets/fonts/inter-vietnamese-400-normal.aaa15d73.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* inter-latin-ext-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/inter-latin-ext-400-normal.210fb826.woff2) format('woff2'), url(/assets/fonts/inter-latin-ext-400-normal.c6162051.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* inter-latin-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/inter-latin-400-normal.eca1e215.woff2) format('woff2'), url(/assets/fonts/inter-latin-400-normal.2ea1079c.woff) format('woff');
  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;
}
/* inter-cyrillic-ext-500-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/fonts/inter-cyrillic-ext-500-normal.b2740f24.woff2) format('woff2'), url(/assets/fonts/inter-cyrillic-ext-500-normal.e9974e82.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* inter-cyrillic-500-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/fonts/inter-cyrillic-500-normal.33a76a7c.woff2) format('woff2'), url(/assets/fonts/inter-cyrillic-500-normal.72f7a9db.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* inter-greek-ext-500-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/fonts/inter-greek-ext-500-normal.4c6d520b.woff2) format('woff2'), url(/assets/fonts/inter-greek-ext-500-normal.47cc2391.woff) format('woff');
  unicode-range: U+1F00-1FFF;
}

/* inter-greek-500-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/fonts/inter-greek-500-normal.e7cec4ef.woff2) format('woff2'), url(/assets/fonts/inter-greek-500-normal.6d34bacd.woff) format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* inter-vietnamese-500-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/fonts/inter-vietnamese-500-normal.63d02ea8.woff2) format('woff2'), url(/assets/fonts/inter-vietnamese-500-normal.296d66c0.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* inter-latin-ext-500-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/fonts/inter-latin-ext-500-normal.cdb4dd5d.woff2) format('woff2'), url(/assets/fonts/inter-latin-ext-500-normal.2f93aaa3.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* inter-latin-500-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/fonts/inter-latin-500-normal.b7c27c60.woff2) format('woff2'), url(/assets/fonts/inter-latin-500-normal.5014db63.woff) format('woff');
  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;
}
/* inter-cyrillic-ext-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/fonts/inter-cyrillic-ext-600-normal.8c6413cd.woff2) format('woff2'), url(/assets/fonts/inter-cyrillic-ext-600-normal.d6d44e87.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* inter-cyrillic-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/fonts/inter-cyrillic-600-normal.fdee7b66.woff2) format('woff2'), url(/assets/fonts/inter-cyrillic-600-normal.8609e1b9.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* inter-greek-ext-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/fonts/inter-greek-ext-600-normal.c3c138d8.woff2) format('woff2'), url(/assets/fonts/inter-greek-ext-600-normal.c7983dac.woff) format('woff');
  unicode-range: U+1F00-1FFF;
}

/* inter-greek-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/fonts/inter-greek-600-normal.984050ec.woff2) format('woff2'), url(/assets/fonts/inter-greek-600-normal.d8b0044c.woff) format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* inter-vietnamese-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/fonts/inter-vietnamese-600-normal.6984cf5e.woff2) format('woff2'), url(/assets/fonts/inter-vietnamese-600-normal.04bb56ff.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* inter-latin-ext-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/fonts/inter-latin-ext-600-normal.8148c3ae.woff2) format('woff2'), url(/assets/fonts/inter-latin-ext-600-normal.4d0d5017.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* inter-latin-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/fonts/inter-latin-600-normal.69a8d1d4.woff2) format('woff2'), url(/assets/fonts/inter-latin-600-normal.f10265da.woff) format('woff');
  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;
}
/* inter-cyrillic-ext-700-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/fonts/inter-cyrillic-ext-700-normal.b0c28c67.woff2) format('woff2'), url(/assets/fonts/inter-cyrillic-ext-700-normal.43f6f7e8.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* inter-cyrillic-700-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/fonts/inter-cyrillic-700-normal.533055ff.woff2) format('woff2'), url(/assets/fonts/inter-cyrillic-700-normal.9f2de06c.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* inter-greek-ext-700-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/fonts/inter-greek-ext-700-normal.c9429f4b.woff2) format('woff2'), url(/assets/fonts/inter-greek-ext-700-normal.0f8675bd.woff) format('woff');
  unicode-range: U+1F00-1FFF;
}

/* inter-greek-700-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/fonts/inter-greek-700-normal.3f04511c.woff2) format('woff2'), url(/assets/fonts/inter-greek-700-normal.8b95c1e2.woff) format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* inter-vietnamese-700-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/fonts/inter-vietnamese-700-normal.d1c85cab.woff2) format('woff2'), url(/assets/fonts/inter-vietnamese-700-normal.05b640f8.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* inter-latin-ext-700-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/fonts/inter-latin-ext-700-normal.bc59219e.woff2) format('woff2'), url(/assets/fonts/inter-latin-ext-700-normal.d4a91814.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* inter-latin-700-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/fonts/inter-latin-700-normal.11042366.woff2) format('woff2'), url(/assets/fonts/inter-latin-700-normal.c73ae725.woff) format('woff');
  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;
}
/* kalam-devanagari-400-normal */
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/kalam-devanagari-400-normal.09a8ab6e.woff2) format('woff2'), url(/assets/fonts/kalam-devanagari-400-normal.d5c9f238.woff) format('woff');
  unicode-range: U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09;
}

/* kalam-latin-ext-400-normal */
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/kalam-latin-ext-400-normal.86e63531.woff2) format('woff2'), url(/assets/fonts/kalam-latin-ext-400-normal.264a4b9a.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* kalam-latin-400-normal */
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/kalam-latin-400-normal.8c949c6d.woff2) format('woff2'), url(/assets/fonts/kalam-latin-400-normal.b148a028.woff) format('woff');
  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;
}
/* kalam-devanagari-700-normal */
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/fonts/kalam-devanagari-700-normal.6aae4139.woff2) format('woff2'), url(/assets/fonts/kalam-devanagari-700-normal.f463db64.woff) format('woff');
  unicode-range: U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09;
}

/* kalam-latin-ext-700-normal */
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/fonts/kalam-latin-ext-700-normal.2b82f832.woff2) format('woff2'), url(/assets/fonts/kalam-latin-ext-700-normal.f0d97ad6.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* kalam-latin-700-normal */
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/fonts/kalam-latin-700-normal.bfe881a6.woff2) format('woff2'), url(/assets/fonts/kalam-latin-700-normal.1d480f55.woff) format('woff');
  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;
}
/* jetbrains-mono-cyrillic-ext-400-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/jetbrains-mono-cyrillic-ext-400-normal.7347c7bf.woff2) format('woff2'), url(/assets/fonts/jetbrains-mono-cyrillic-ext-400-normal.831e0db2.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* jetbrains-mono-cyrillic-400-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/jetbrains-mono-cyrillic-400-normal.f69e1e24.woff2) format('woff2'), url(/assets/fonts/jetbrains-mono-cyrillic-400-normal.d0dbe121.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* jetbrains-mono-greek-400-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/jetbrains-mono-greek-400-normal.3a4578ae.woff2) format('woff2'), url(/assets/fonts/jetbrains-mono-greek-400-normal.55220d4d.woff) format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* jetbrains-mono-vietnamese-400-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/jetbrains-mono-vietnamese-400-normal.aa664ef1.woff2) format('woff2'), url(/assets/fonts/jetbrains-mono-vietnamese-400-normal.411bbf70.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* jetbrains-mono-latin-ext-400-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/jetbrains-mono-latin-ext-400-normal.e83b764e.woff2) format('woff2'), url(/assets/fonts/jetbrains-mono-latin-ext-400-normal.dfdc51c0.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* jetbrains-mono-latin-400-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/jetbrains-mono-latin-400-normal.d04352f2.woff2) format('woff2'), url(/assets/fonts/jetbrains-mono-latin-400-normal.1fef352a.woff) format('woff');
  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;
}
/* jetbrains-mono-cyrillic-ext-600-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/fonts/jetbrains-mono-cyrillic-ext-600-normal.228aae4e.woff2) format('woff2'), url(/assets/fonts/jetbrains-mono-cyrillic-ext-600-normal.fd1e2a1c.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* jetbrains-mono-cyrillic-600-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/fonts/jetbrains-mono-cyrillic-600-normal.8b3e76f3.woff2) format('woff2'), url(/assets/fonts/jetbrains-mono-cyrillic-600-normal.4ca80b24.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* jetbrains-mono-greek-600-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/fonts/jetbrains-mono-greek-600-normal.10cc4e4c.woff2) format('woff2'), url(/assets/fonts/jetbrains-mono-greek-600-normal.2281356f.woff) format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* jetbrains-mono-vietnamese-600-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/fonts/jetbrains-mono-vietnamese-600-normal.8a6f1ff1.woff2) format('woff2'), url(/assets/fonts/jetbrains-mono-vietnamese-600-normal.adc7634e.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* jetbrains-mono-latin-ext-600-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/fonts/jetbrains-mono-latin-ext-600-normal.2ebc3362.woff2) format('woff2'), url(/assets/fonts/jetbrains-mono-latin-ext-600-normal.31ca4973.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* jetbrains-mono-latin-600-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/fonts/jetbrains-mono-latin-600-normal.d68d56cf.woff2) format('woff2'), url(/assets/fonts/jetbrains-mono-latin-600-normal.7e91dde0.woff) format('woff');
  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;
}
/* lora-cyrillic-ext-400-normal */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/lora-cyrillic-ext-400-normal.cdb452a6.woff2) format('woff2'), url(/assets/fonts/lora-cyrillic-ext-400-normal.8e53dbe7.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* lora-cyrillic-400-normal */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/lora-cyrillic-400-normal.cacbbd32.woff2) format('woff2'), url(/assets/fonts/lora-cyrillic-400-normal.6af37457.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* lora-math-400-normal */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/lora-math-400-normal.429d82d4.woff2) format('woff2'), url(/assets/fonts/lora-math-400-normal.042197a3.woff) format('woff');
  unicode-range: U+0302-0303,U+0305,U+0307-0308,U+0310,U+0312,U+0315,U+031A,U+0326-0327,U+032C,U+032F-0330,U+0332-0333,U+0338,U+033A,U+0346,U+034D,U+0391-03A1,U+03A3-03A9,U+03B1-03C9,U+03D1,U+03D5-03D6,U+03F0-03F1,U+03F4-03F5,U+2016-2017,U+2034-2038,U+203C,U+2040,U+2043,U+2047,U+2050,U+2057,U+205F,U+2070-2071,U+2074-208E,U+2090-209C,U+20D0-20DC,U+20E1,U+20E5-20EF,U+2100-2112,U+2114-2115,U+2117-2121,U+2123-214F,U+2190,U+2192,U+2194-21AE,U+21B0-21E5,U+21F1-21F2,U+21F4-2211,U+2213-2214,U+2216-22FF,U+2308-230B,U+2310,U+2319,U+231C-2321,U+2336-237A,U+237C,U+2395,U+239B-23B7,U+23D0,U+23DC-23E1,U+2474-2475,U+25AF,U+25B3,U+25B7,U+25BD,U+25C1,U+25CA,U+25CC,U+25FB,U+266D-266F,U+27C0-27FF,U+2900-2AFF,U+2B0E-2B11,U+2B30-2B4C,U+2BFE,U+3030,U+FF5B,U+FF5D,U+1D400-1D7FF,U+1EE00-1EEFF;
}

/* lora-symbols-400-normal */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/lora-symbols-400-normal.0ce4f990.woff2) format('woff2'), url(/assets/fonts/lora-symbols-400-normal.69138395.woff) format('woff');
  unicode-range: U+0001-000C,U+000E-001F,U+007F-009F,U+20DD-20E0,U+20E2-20E4,U+2150-218F,U+2190,U+2192,U+2194-2199,U+21AF,U+21E6-21F0,U+21F3,U+2218-2219,U+2299,U+22C4-22C6,U+2300-243F,U+2440-244A,U+2460-24FF,U+25A0-27BF,U+2800-28FF,U+2921-2922,U+2981,U+29BF,U+29EB,U+2B00-2BFF,U+4DC0-4DFF,U+FFF9-FFFB,U+10140-1018E,U+10190-1019C,U+101A0,U+101D0-101FD,U+102E0-102FB,U+10E60-10E7E,U+1D2C0-1D2D3,U+1D2E0-1D37F,U+1F000-1F0FF,U+1F100-1F1AD,U+1F1E6-1F1FF,U+1F30D-1F30F,U+1F315,U+1F31C,U+1F31E,U+1F320-1F32C,U+1F336,U+1F378,U+1F37D,U+1F382,U+1F393-1F39F,U+1F3A7-1F3A8,U+1F3AC-1F3AF,U+1F3C2,U+1F3C4-1F3C6,U+1F3CA-1F3CE,U+1F3D4-1F3E0,U+1F3ED,U+1F3F1-1F3F3,U+1F3F5-1F3F7,U+1F408,U+1F415,U+1F41F,U+1F426,U+1F43F,U+1F441-1F442,U+1F444,U+1F446-1F449,U+1F44C-1F44E,U+1F453,U+1F46A,U+1F47D,U+1F4A3,U+1F4B0,U+1F4B3,U+1F4B9,U+1F4BB,U+1F4BF,U+1F4C8-1F4CB,U+1F4D6,U+1F4DA,U+1F4DF,U+1F4E3-1F4E6,U+1F4EA-1F4ED,U+1F4F7,U+1F4F9-1F4FB,U+1F4FD-1F4FE,U+1F503,U+1F507-1F50B,U+1F50D,U+1F512-1F513,U+1F53E-1F54A,U+1F54F-1F5FA,U+1F610,U+1F650-1F67F,U+1F687,U+1F68D,U+1F691,U+1F694,U+1F698,U+1F6AD,U+1F6B2,U+1F6B9-1F6BA,U+1F6BC,U+1F6C6-1F6CF,U+1F6D3-1F6D7,U+1F6E0-1F6EA,U+1F6F0-1F6F3,U+1F6F7-1F6FC,U+1F700-1F7FF,U+1F800-1F80B,U+1F810-1F847,U+1F850-1F859,U+1F860-1F887,U+1F890-1F8AD,U+1F8B0-1F8BB,U+1F8C0-1F8C1,U+1F900-1F90B,U+1F93B,U+1F946,U+1F984,U+1F996,U+1F9E9,U+1FA00-1FA6F,U+1FA70-1FA7C,U+1FA80-1FA89,U+1FA8F-1FAC6,U+1FACE-1FADC,U+1FADF-1FAE9,U+1FAF0-1FAF8,U+1FB00-1FBFF;
}

/* lora-vietnamese-400-normal */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/lora-vietnamese-400-normal.0fd42eba.woff2) format('woff2'), url(/assets/fonts/lora-vietnamese-400-normal.873a2b99.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* lora-latin-ext-400-normal */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/lora-latin-ext-400-normal.351e4162.woff2) format('woff2'), url(/assets/fonts/lora-latin-ext-400-normal.735b75a9.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* lora-latin-400-normal */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/lora-latin-400-normal.68bde7ec.woff2) format('woff2'), url(/assets/fonts/lora-latin-400-normal.e4fada31.woff) format('woff');
  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;
}
/* lora-cyrillic-ext-600-normal */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/fonts/lora-cyrillic-ext-600-normal.5c01185d.woff2) format('woff2'), url(/assets/fonts/lora-cyrillic-ext-600-normal.6bf6813c.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* lora-cyrillic-600-normal */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/fonts/lora-cyrillic-600-normal.f8cfce73.woff2) format('woff2'), url(/assets/fonts/lora-cyrillic-600-normal.9ca7763e.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* lora-math-600-normal */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/fonts/lora-math-600-normal.e6860314.woff2) format('woff2'), url(/assets/fonts/lora-math-600-normal.3d34cc3e.woff) format('woff');
  unicode-range: U+0302-0303,U+0305,U+0307-0308,U+0310,U+0312,U+0315,U+031A,U+0326-0327,U+032C,U+032F-0330,U+0332-0333,U+0338,U+033A,U+0346,U+034D,U+0391-03A1,U+03A3-03A9,U+03B1-03C9,U+03D1,U+03D5-03D6,U+03F0-03F1,U+03F4-03F5,U+2016-2017,U+2034-2038,U+203C,U+2040,U+2043,U+2047,U+2050,U+2057,U+205F,U+2070-2071,U+2074-208E,U+2090-209C,U+20D0-20DC,U+20E1,U+20E5-20EF,U+2100-2112,U+2114-2115,U+2117-2121,U+2123-214F,U+2190,U+2192,U+2194-21AE,U+21B0-21E5,U+21F1-21F2,U+21F4-2211,U+2213-2214,U+2216-22FF,U+2308-230B,U+2310,U+2319,U+231C-2321,U+2336-237A,U+237C,U+2395,U+239B-23B7,U+23D0,U+23DC-23E1,U+2474-2475,U+25AF,U+25B3,U+25B7,U+25BD,U+25C1,U+25CA,U+25CC,U+25FB,U+266D-266F,U+27C0-27FF,U+2900-2AFF,U+2B0E-2B11,U+2B30-2B4C,U+2BFE,U+3030,U+FF5B,U+FF5D,U+1D400-1D7FF,U+1EE00-1EEFF;
}

/* lora-symbols-600-normal */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/fonts/lora-symbols-600-normal.58fde185.woff2) format('woff2'), url(/assets/fonts/lora-symbols-600-normal.6f20e34c.woff) format('woff');
  unicode-range: U+0001-000C,U+000E-001F,U+007F-009F,U+20DD-20E0,U+20E2-20E4,U+2150-218F,U+2190,U+2192,U+2194-2199,U+21AF,U+21E6-21F0,U+21F3,U+2218-2219,U+2299,U+22C4-22C6,U+2300-243F,U+2440-244A,U+2460-24FF,U+25A0-27BF,U+2800-28FF,U+2921-2922,U+2981,U+29BF,U+29EB,U+2B00-2BFF,U+4DC0-4DFF,U+FFF9-FFFB,U+10140-1018E,U+10190-1019C,U+101A0,U+101D0-101FD,U+102E0-102FB,U+10E60-10E7E,U+1D2C0-1D2D3,U+1D2E0-1D37F,U+1F000-1F0FF,U+1F100-1F1AD,U+1F1E6-1F1FF,U+1F30D-1F30F,U+1F315,U+1F31C,U+1F31E,U+1F320-1F32C,U+1F336,U+1F378,U+1F37D,U+1F382,U+1F393-1F39F,U+1F3A7-1F3A8,U+1F3AC-1F3AF,U+1F3C2,U+1F3C4-1F3C6,U+1F3CA-1F3CE,U+1F3D4-1F3E0,U+1F3ED,U+1F3F1-1F3F3,U+1F3F5-1F3F7,U+1F408,U+1F415,U+1F41F,U+1F426,U+1F43F,U+1F441-1F442,U+1F444,U+1F446-1F449,U+1F44C-1F44E,U+1F453,U+1F46A,U+1F47D,U+1F4A3,U+1F4B0,U+1F4B3,U+1F4B9,U+1F4BB,U+1F4BF,U+1F4C8-1F4CB,U+1F4D6,U+1F4DA,U+1F4DF,U+1F4E3-1F4E6,U+1F4EA-1F4ED,U+1F4F7,U+1F4F9-1F4FB,U+1F4FD-1F4FE,U+1F503,U+1F507-1F50B,U+1F50D,U+1F512-1F513,U+1F53E-1F54A,U+1F54F-1F5FA,U+1F610,U+1F650-1F67F,U+1F687,U+1F68D,U+1F691,U+1F694,U+1F698,U+1F6AD,U+1F6B2,U+1F6B9-1F6BA,U+1F6BC,U+1F6C6-1F6CF,U+1F6D3-1F6D7,U+1F6E0-1F6EA,U+1F6F0-1F6F3,U+1F6F7-1F6FC,U+1F700-1F7FF,U+1F800-1F80B,U+1F810-1F847,U+1F850-1F859,U+1F860-1F887,U+1F890-1F8AD,U+1F8B0-1F8BB,U+1F8C0-1F8C1,U+1F900-1F90B,U+1F93B,U+1F946,U+1F984,U+1F996,U+1F9E9,U+1FA00-1FA6F,U+1FA70-1FA7C,U+1FA80-1FA89,U+1FA8F-1FAC6,U+1FACE-1FADC,U+1FADF-1FAE9,U+1FAF0-1FAF8,U+1FB00-1FBFF;
}

/* lora-vietnamese-600-normal */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/fonts/lora-vietnamese-600-normal.33793d51.woff2) format('woff2'), url(/assets/fonts/lora-vietnamese-600-normal.08aa4bcb.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* lora-latin-ext-600-normal */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/fonts/lora-latin-ext-600-normal.1c6806c1.woff2) format('woff2'), url(/assets/fonts/lora-latin-ext-600-normal.bc03d7a6.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* lora-latin-600-normal */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/fonts/lora-latin-600-normal.c20532f3.woff2) format('woff2'), url(/assets/fonts/lora-latin-600-normal.7f3ad3a3.woff) format('woff');
  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;
}
/* noto-color-emoji-[0]-400-normal */
@font-face {
  font-family: 'Noto Color Emoji';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/noto-color-emoji-0-400-normal.7fe05d53.woff2) format('woff2'), url(/assets/fonts/noto-color-emoji-0-400-normal.2ae4fbc1.woff) format('woff');
  unicode-range: U+1f1e6-1f1ff;
}

/* noto-color-emoji-[1]-400-normal */
@font-face {
  font-family: 'Noto Color Emoji';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/noto-color-emoji-1-400-normal.d2dd34af.woff2) format('woff2'), url(/assets/fonts/noto-color-emoji-1-400-normal.3610a0cd.woff) format('woff');
  unicode-range: U+200d,U+2620,U+26a7,U+fe0f,U+1f308,U+1f38c,U+1f3c1,U+1f3f3-1f3f4,U+1f6a9,U+e0062-e0063,U+e0065,U+e0067,U+e006c,U+e006e,U+e0073-e0074,U+e0077,U+e007f;
}

/* noto-color-emoji-[2]-400-normal */
@font-face {
  font-family: 'Noto Color Emoji';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/noto-color-emoji-2-400-normal.46cf2ef8.woff2) format('woff2'), url(/assets/fonts/noto-color-emoji-2-400-normal.90c1588e.woff) format('woff');
  unicode-range: U+23,U+2a,U+30-39,U+a9,U+ae,U+200d,U+203c,U+2049,U+20e3,U+2122,U+2139,U+2194-2199,U+21a9-21aa,U+23cf,U+23e9-23ef,U+23f8-23fa,U+24c2,U+25aa-25ab,U+25b6,U+25c0,U+25fb-25fe,U+2611,U+2622-2623,U+2626,U+262a,U+262e-262f,U+2638,U+2640,U+2642,U+2648-2653,U+2660,U+2663,U+2665-2666,U+2668,U+267b,U+267e-267f,U+2695,U+269b-269c,U+26a0,U+26a7,U+26aa-26ab,U+26ce,U+26d4,U+2705,U+2714,U+2716,U+271d,U+2721,U+2733-2734,U+2747,U+274c,U+274e,U+2753-2755,U+2757,U+2764,U+2795-2797,U+27a1,U+27b0,U+27bf,U+2934-2935,U+2b05-2b07,U+2b1b-2b1c,U+2b55,U+3030,U+303d,U+3297,U+3299,U+fe0f,U+1f170-1f171,U+1f17e-1f17f,U+1f18e,U+1f191-1f19a,U+1f201-1f202,U+1f21a,U+1f22f,U+1f232-1f23a,U+1f250-1f251,U+1f310,U+1f3a6,U+1f3b5-1f3b6,U+1f3bc,U+1f3e7,U+1f441,U+1f499-1f49c,U+1f49f-1f4a0,U+1f4ac-1f4ad,U+1f4b1-1f4b2,U+1f4b9,U+1f4db,U+1f4f2-1f4f6,U+1f500-1f507,U+1f515,U+1f518-1f524,U+1f52f-1f53d,U+1f549,U+1f54e,U+1f5a4,U+1f5e8,U+1f5ef,U+1f6ab,U+1f6ad-1f6b1,U+1f6b3,U+1f6b7-1f6bc,U+1f6be,U+1f6c2-1f6c5,U+1f6d0-1f6d1,U+1f6d7,U+1f6dc,U+1f7e0-1f7eb,U+1f7f0,U+1f90d-1f90e,U+1f9d1-1f9d2,U+1f9e1,U+1fa75-1fa77,U+1faaf;
}

/* noto-color-emoji-[3]-400-normal */
@font-face {
  font-family: 'Noto Color Emoji';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/noto-color-emoji-3-400-normal.3c0d5f1a.woff2) format('woff2'), url(/assets/fonts/noto-color-emoji-3-400-normal.f52d5cc4.woff) format('woff');
  unicode-range: U+200d,U+231a-231b,U+2328,U+23f0-23f3,U+2602,U+260e,U+2692,U+2694,U+2696-2697,U+2699,U+26b0-26b1,U+26cf,U+26d1,U+26d3,U+2702,U+2709,U+270f,U+2712,U+fe0f,U+1f302,U+1f321,U+1f392-1f393,U+1f3a9,U+1f3bd,U+1f3ee,U+1f3f7,U+1f3fa,U+1f451-1f462,U+1f484,U+1f489-1f48a,U+1f48c-1f48e,U+1f4a1,U+1f4a3,U+1f4a5,U+1f4b0,U+1f4b3-1f4b8,U+1f4bb-1f4da,U+1f4dc-1f4f1,U+1f4ff,U+1f508-1f514,U+1f516-1f517,U+1f526-1f529,U+1f52c-1f52e,U+1f550-1f567,U+1f56f-1f570,U+1f576,U+1f587,U+1f58a-1f58d,U+1f5a5,U+1f5a8,U+1f5b1-1f5b2,U+1f5c2-1f5c4,U+1f5d1-1f5d3,U+1f5dc-1f5de,U+1f5e1,U+1f5f3,U+1f6aa,U+1f6ac,U+1f6bd,U+1f6bf,U+1f6c1,U+1f6cb,U+1f6cd-1f6cf,U+1f6d2,U+1f6e0-1f6e1,U+1f6f0,U+1f97b-1f97f,U+1f9af,U+1f9ba,U+1f9e2-1f9e6,U+1f9ea-1f9ec,U+1f9ee-1f9f4,U+1f9f7-1f9ff,U+1fa71-1fa74,U+1fa79-1fa7b,U+1fa86,U+1fa8e-1fa8f,U+1fa91-1fa93,U+1fa96,U+1fa99-1faa0,U+1faa2-1faa7,U+1faaa-1faae;
}

/* noto-color-emoji-[4]-400-normal */
@font-face {
  font-family: 'Noto Color Emoji';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/noto-color-emoji-4-400-normal.c0dd5477.woff2) format('woff2'), url(/assets/fonts/noto-color-emoji-4-400-normal.eb85f9a8.woff) format('woff');
  unicode-range: U+265f,U+26bd-26be,U+26f3,U+26f8,U+fe0f,U+1f004,U+1f0cf,U+1f380-1f384,U+1f386-1f38b,U+1f38d-1f391,U+1f396-1f397,U+1f399-1f39b,U+1f39e-1f39f,U+1f3a3-1f3a5,U+1f3a7-1f3a9,U+1f3ab-1f3b4,U+1f3b7-1f3bb,U+1f3bd-1f3c0,U+1f3c5-1f3c6,U+1f3c8-1f3c9,U+1f3cf-1f3d3,U+1f3f8-1f3f9,U+1f47e,U+1f4e2,U+1f4f7-1f4fd,U+1f52b,U+1f579,U+1f58c-1f58d,U+1f5bc,U+1f6f7,U+1f6f9,U+1f6fc,U+1f93f,U+1f941,U+1f945,U+1f947-1f94f,U+1f9e7-1f9e9,U+1f9f5-1f9f6,U+1fa70-1fa71,U+1fa80-1fa81,U+1fa83-1fa85,U+1fa87-1fa8a,U+1fa94-1fa95,U+1fa97-1fa98,U+1faa1,U+1faa9,U+1fadf;
}

/* noto-color-emoji-[5]-400-normal */
@font-face {
  font-family: 'Noto Color Emoji';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/noto-color-emoji-5-400-normal.e0ffbf82.woff2) format('woff2'), url(/assets/fonts/noto-color-emoji-5-400-normal.d2d4d756.woff) format('woff');
  unicode-range: U+2693,U+26e9-26ea,U+26f1-26f2,U+26f4-26f5,U+26fa,U+26fd,U+2708,U+fe0f,U+1f301,U+1f303,U+1f306-1f307,U+1f309,U+1f310,U+1f3a0-1f3a2,U+1f3aa,U+1f3cd-1f3ce,U+1f3d5,U+1f3d7-1f3db,U+1f3df-1f3e6,U+1f3e8-1f3ed,U+1f3ef-1f3f0,U+1f488,U+1f492,U+1f4ba,U+1f54b-1f54d,U+1f5fa-1f5ff,U+1f680-1f6a2,U+1f6a4-1f6a8,U+1f6b2,U+1f6d1,U+1f6d5-1f6d6,U+1f6dd-1f6df,U+1f6e2-1f6e5,U+1f6e9,U+1f6eb-1f6ec,U+1f6f3-1f6f6,U+1f6f8,U+1f6fa-1f6fb,U+1f9bc-1f9bd,U+1f9ed,U+1f9f3,U+1fa7c;
}

/* noto-color-emoji-[6]-400-normal */
@font-face {
  font-family: 'Noto Color Emoji';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/noto-color-emoji-6-400-normal.3e1ea7ad.woff2) format('woff2'), url(/assets/fonts/noto-color-emoji-6-400-normal.6dc16d4d.woff) format('woff');
  unicode-range: U+200d,U+2615,U+fe0f,U+1f32d-1f330,U+1f336,U+1f33d,U+1f344-1f37f,U+1f382,U+1f52a,U+1f7e9,U+1f7eb,U+1f942-1f944,U+1f950-1f96f,U+1f99e,U+1f9aa,U+1f9c0-1f9cb,U+1fad0-1fadc;
}

/* noto-color-emoji-[7]-400-normal */
@font-face {
  font-family: 'Noto Color Emoji';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/noto-color-emoji-7-400-normal.c50bdaec.woff2) format('woff2'), url(/assets/fonts/noto-color-emoji-7-400-normal.bcd5ccf1.woff) format('woff');
  unicode-range: U+200d,U+2600-2601,U+2603-2604,U+2614,U+2618,U+26a1,U+26c4-26c5,U+26c8,U+26f0,U+2728,U+2744,U+2b1b,U+2b50,U+fe0f,U+1f300,U+1f304-1f305,U+1f308,U+1f30a-1f30f,U+1f311-1f321,U+1f324-1f32c,U+1f331-1f335,U+1f337-1f33c,U+1f33e-1f344,U+1f3d4,U+1f3d6,U+1f3dc-1f3de,U+1f3f5,U+1f400-1f43f,U+1f490,U+1f4a7,U+1f4ae,U+1f525,U+1f54a,U+1f573,U+1f577-1f578,U+1f648-1f64a,U+1f6d8,U+1f940,U+1f980-1f9ae,U+1f9ba,U+1fa90,U+1faa8,U+1fab0-1fabf,U+1facd-1facf,U+1fae7;
}

/* noto-color-emoji-[8]-400-normal */
@font-face {
  font-family: 'Noto Color Emoji';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/noto-color-emoji-8-400-normal.bfa5ee77.woff2) format('woff2'), url(/assets/fonts/noto-color-emoji-8-400-normal.fd432688.woff) format('woff');
  unicode-range: U+200d,U+2640,U+2642,U+2695-2696,U+26f7,U+26f9,U+2708,U+2764,U+27a1,U+fe0f,U+1f33e,U+1f373,U+1f37c,U+1f384-1f385,U+1f393,U+1f3a4,U+1f3a8,U+1f3c2-1f3c4,U+1f3c7,U+1f3ca-1f3cc,U+1f3eb,U+1f3ed,U+1f3fb-1f3ff,U+1f430,U+1f466-1f469,U+1f46b-1f478,U+1f47c,U+1f481-1f483,U+1f486-1f487,U+1f48b,U+1f48f,U+1f491,U+1f4bb-1f4bc,U+1f527,U+1f52c,U+1f574-1f575,U+1f57a,U+1f645-1f647,U+1f64b,U+1f64d-1f64e,U+1f680,U+1f692,U+1f6a3,U+1f6b4-1f6b6,U+1f6c0,U+1f6cc,U+1f91d,U+1f926,U+1f930-1f931,U+1f934-1f93a,U+1f93c-1f93e,U+1f977,U+1f9af-1f9b3,U+1f9b8-1f9b9,U+1f9bc-1f9bd,U+1f9cc-1f9cf,U+1f9d1-1f9df,U+1fa70,U+1fa82,U+1fac3-1fac5,U+1fac8,U+1faef;
}

/* noto-color-emoji-[9]-400-normal */
@font-face {
  font-family: 'Noto Color Emoji';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/noto-color-emoji-9-400-normal.5a53e424.woff2) format('woff2'), url(/assets/fonts/noto-color-emoji-9-400-normal.86967aa4.woff) format('woff');
  unicode-range: U+200d,U+2194-2195,U+2603,U+261d,U+2620,U+2639-263a,U+2665,U+26a1,U+26c4,U+270a-270d,U+2728,U+2763-2764,U+2b50,U+fe0f,U+1f31a-1f31f,U+1f32b,U+1f389-1f38a,U+1f3fb-1f3ff,U+1f440-1f450,U+1f463-1f465,U+1f479-1f47b,U+1f47d-1f480,U+1f485,U+1f48b-1f48c,U+1f493-1f49f,U+1f4a2,U+1f4a4-1f4a6,U+1f4a8-1f4ab,U+1f4af,U+1f525,U+1f573,U+1f590,U+1f595-1f596,U+1f5a4,U+1f5e3,U+1f600-1f644,U+1f648-1f64a,U+1f64c,U+1f64f,U+1f90c-1f925,U+1f927-1f92f,U+1f932-1f933,U+1f970-1f976,U+1f978-1f97a,U+1f9a0,U+1f9b4-1f9b7,U+1f9bb,U+1f9be-1f9bf,U+1f9d0,U+1f9e0-1f9e1,U+1fa75-1fa79,U+1fac0-1fac2,U+1fac6,U+1fae0-1fae6,U+1fae8-1faea,U+1faef-1fafa;
}

/* noto-color-emoji-[10]-400-normal */
@font-face {
  font-family: 'Noto Color Emoji';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/noto-color-emoji-10-400-normal.03760a28.woff2) format('woff2'), url(/assets/fonts/noto-color-emoji-10-400-normal.3e989f64.woff) format('woff');
  unicode-range: U+1f6d9,U+1fa8b-1fa8d,U+1facc,U+1fadd,U+1faeb;
}
/* ==================================================================
   STYLES · ENTRY (IMPORT ORDER MATTERS)
   ================================================================== */
/* ==================================================================
   STYLES · DESIGN TOKENS
   ================================================================== */
/* ==================================================================
   LESS VARIABLES & MIXINS
   ================================================================== */
/* flat white panel with a soft edge shadow (Miro-like) */
/* ==================================================================
   LIGHT THEME
   ================================================================== */
:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f4f4f7;
  --surface-hover: #efeff5;
  --border: #e7e7ef;
  --border-strong: #d3d3de;
  --text: #050038;
  --text-2: #5c5a74;
  --text-3: #8f8da3;
  --primary: #4262ff;
  --primary-hover: #3049e6;
  --primary-soft: #ebeeff;
  --danger: #e03131;
  --danger-soft: #fff0f0;
  --success: #2f9e44;
  --warn: #e8590c;
  --warn-soft: #fff4e6;
  --tooltip: #050038;
  --shadow-panel: 0 0 0 1px rgba(5, 0, 56, 0.06), 0 2px 6px rgba(5, 0, 56, 0.08);
  --shadow-sm: 0 1px 2px rgba(16, 16, 40, 0.06), 0 1px 3px rgba(16, 16, 40, 0.08);
  --shadow-md: 0 6px 20px rgba(16, 16, 40, 0.08), 0 1px 3px rgba(16, 16, 40, 0.06);
  --shadow-lg: 0 20px 50px rgba(16, 16, 40, 0.18), 0 2px 8px rgba(16, 16, 40, 0.08);
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --font: 'Open Sans', 'Segoe UI', system-ui, -apple-system, sans-serif, 'Noto Color Emoji';
  --font-heading: 'Plus Jakarta Sans', 'Open Sans', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', Consolas, monospace;
  color-scheme: light;
}
/* ==================================================================
   DARK THEME
   ================================================================== */
[data-theme='dark'] {
  --bg: #111115;
  --surface: #1d1d24;
  --surface-2: #26262f;
  --surface-hover: #2d2d38;
  --border: #30303b;
  --border-strong: #3d3d4a;
  --text: #ececf2;
  --text-2: #b0b0c0;
  --text-3: #7f7f92;
  --primary: #6d86ff;
  --primary-hover: #8296ff;
  --primary-soft: #262d55;
  --danger: #ff6b6b;
  --danger-soft: #3a2025;
  --warn-soft: #3a2a18;
  --tooltip: #000000;
  --shadow-panel: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 2px 8px rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}
/* ==================================================================
   STYLES · BASE
   ================================================================== */
/* ==================================================================
   RESET
   ================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body,
#root {
  height: 100%;
}
html.is-resizing *,
html.is-resizing *::before,
html.is-resizing *::after {
  transition: none !important;
}
body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
button {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}
button:disabled {
  cursor: default;
  opacity: 0.45;
}
img {
  display: block;
  max-width: 100%;
}
a {
  color: var(--primary);
  text-decoration: none;
}
h1,
h2,
h3,
p {
  margin: 0;
}
/* headings use the display face; body text stays Open Sans */
h1,
h2,
h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}
hr {
  border: none;
  height: 1px;
  background: var(--border);
  margin: 6px 4px;
}
/* ==================================================================
   TYPOGRAPHY HELPERS
   ================================================================== */
.muted {
  color: var(--text-2);
}
.text-gradient {
  background: linear-gradient(90deg, #ffd166, #ff9f68);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 20px 0 8px;
}
kbd {
  margin-left: auto;
  padding: 2px 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  white-space: nowrap;
}
.font-hand {
  font-family: Kalam, cursive;
}
.font-sans {
  font-family: var(--font);
}
.font-serif {
  font-family: Lora, Georgia, serif;
}
.font-mono {
  font-family: var(--font-mono);
}
/* ==================================================================
   SPLASH & SPINNER
   ================================================================== */
.splash {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--bg);
}
.splash svg {
  animation: pulse 1.2s ease-in-out infinite;
}
.spinner {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid var(--primary-soft);
  border-top-color: var(--primary);
  animation: spin 0.8s linear infinite;
}
/* ==================================================================
   ANIMATIONS
   ================================================================== */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes pulse {
  50% {
    transform: scale(0.92);
    opacity: 0.7;
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
}
@keyframes pop-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
}
@keyframes shimmer {
  0% {
    background-position: -400px 0;
  }
  100% {
    background-position: 400px 0;
  }
}
/* ==================================================================
   SCROLLBARS
   ================================================================== */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
/* ==================================================================
   STYLES · SHARED COMPONENTS
   ================================================================== */
/* ==================================================================
   LOGO
   ================================================================== */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.wordmark {
  display: block;
  flex-shrink: 0;
  width: auto;
  user-select: none;
}
.logo-mark {
  flex-shrink: 0;
  object-fit: contain;
  user-select: none;
}
/* the loading screens: the logo breathes — a soft glow and a slight zoom */
.logo-loader {
  display: block;
  width: auto;
  user-select: none;
  animation: logo-breathe 1.8s ease-in-out infinite;
}
@keyframes logo-breathe {
  0%,
  100% {
    transform: scale(1);
    filter: drop-shadow(0 6px 14px rgba(66, 98, 255, 0.22)) brightness(0.97);
  }
  50% {
    transform: scale(1.05);
    filter: drop-shadow(0 10px 26px rgba(140, 70, 255, 0.45)) brightness(1.08);
  }
}
@media (prefers-reduced-motion: reduce) {
  .logo-loader {
    animation: none;
  }
}
/* ==================================================================
   TOGGLE SWITCH
   ================================================================== */
.switch {
  position: relative;
  flex-shrink: 0;
  width: 32px;
  height: 18px;
  border-radius: 99px;
  background: #c9c8d3;
  transition: background 0.15s;
}
.switch__knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s;
}
.switch.is-on {
  background: var(--primary);
}
.switch.is-on .switch__knob {
  transform: translateX(14px);
}
/* ==================================================================
   BUTTONS
   ================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.btn:hover:not(:disabled) {
  background: var(--surface-hover);
}
.btn--primary {
  background: var(--primary);
  border-color: transparent;
  color: #fff;
}
.btn--primary:hover:not(:disabled) {
  background: var(--primary-hover);
}
.btn--outline {
  background: transparent;
  border-color: var(--primary);
  color: var(--primary);
}
.btn--outline:hover:not(:disabled) {
  background: var(--primary-soft);
}
.btn--block {
  width: 100%;
}
.btn--sm {
  height: 34px;
  padding: 0 12px;
  font-size: 13px;
}
.btn--lg {
  height: 50px;
  font-size: 16px;
}
.icon-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: var(--radius);
  color: var(--text-2);
  transition: background 0.12s, color 0.12s;
}
.icon-btn:hover:not(:disabled) {
  background: var(--surface-hover);
  color: var(--text);
}
.icon-btn.is-active {
  background: var(--primary-soft);
  color: var(--primary);
}
.icon-btn--primary {
  background: var(--primary);
  color: #fff;
}
.icon-btn--primary:hover:not(:disabled) {
  background: var(--primary-hover);
  color: #fff;
}
.icon-btn.has-flyout::before {
  content: '';
  position: absolute;
  right: 4px;
  bottom: 4px;
  border: 3px solid transparent;
  border-right-color: currentColor;
  border-bottom-color: currentColor;
  opacity: 0.5;
}
/* ==================================================================
   TOOLTIPS (RENDERED BY shared/ui/TooltipLayer)
   ================================================================== */
.tooltip {
  position: fixed;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 11px;
  border-radius: 8px;
  background: #1c1b22;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
  animation: fade-in 0.12s;
  /* small arrow pointing at the control */
}
.tooltip::before {
  content: '';
  position: absolute;
  border: 6px solid transparent;
}
.tooltip--right::before {
  right: 100%;
  top: 50%;
  margin-top: -6px;
  border-right-color: #1c1b22;
}
.tooltip--left::before {
  left: 100%;
  top: 50%;
  margin-top: -6px;
  border-left-color: #1c1b22;
}
.tooltip--bottom::before {
  bottom: 100%;
  left: 50%;
  margin-left: -6px;
  border-bottom-color: #1c1b22;
}
.tooltip--top::before {
  top: 100%;
  left: 50%;
  margin-left: -6px;
  border-top-color: #1c1b22;
}
.tooltip__key {
  min-width: 22px;
  margin: 0;
  padding: 1px 6px;
  border: none;
  border-radius: 5px;
  background: #4a4955;
  color: #fff;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}
@media (hover: none) {
  .tooltip {
    display: none;
  }
}
/* ==================================================================
   FORM CONTROLS
   ================================================================== */
.input {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.input--sm {
  height: 30px;
  padding: 0 8px;
  font-size: 13px;
  width: auto;
}
.input--lg {
  height: 52px;
  font-size: 16px;
}
.input--select {
  width: auto;
  padding-right: 28px;
  cursor: pointer;
}
.input--bare {
  height: auto;
  padding: 0;
  border: none;
  background: transparent;
  font-weight: 600;
  box-shadow: none !important;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field > span {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
}
/* Edge / IE add their own reveal + clear buttons; ours replace them */
input::-ms-reveal,
input::-ms-clear {
  display: none;
}
.input-wrap {
  position: relative;
}
.input-wrap .input {
  padding-right: 40px;
}
.input-wrap__btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  color: var(--text-3);
}
.input-wrap__btn:hover {
  color: var(--text);
}
.form-error {
  padding: 10px 12px;
  border-radius: var(--radius);
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 13px;
  font-weight: 500;
}
.form-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  cursor: pointer;
}
.range {
  width: 100%;
  accent-color: var(--primary);
}
/* ==================================================================
   SEGMENTED CONTROL & CHIPS
   ================================================================== */
.segmented {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius);
  background: var(--surface-2);
}
.segmented button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 30px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  text-transform: capitalize;
}
.segmented button:hover {
  color: var(--text);
}
.segmented button.is-active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}
.segmented--sm button {
  height: 24px;
  padding: 0 8px;
  font-size: 12px;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip {
  height: 32px;
  padding: 0 14px;
  border-radius: 99px;
  border: 1px solid var(--border-strong);
  font-weight: 500;
  color: var(--text-2);
}
.chip:hover {
  color: var(--text);
}
.chip.is-active {
  background: var(--text);
  border-color: var(--text);
  color: var(--surface);
}
/* ==================================================================
   COLOR SWATCHES
   ================================================================== */
.swatches {
  display: grid;
  grid-template-columns: repeat(5, 28px);
  gap: 6px;
}
.swatches--inline {
  display: flex;
}
.swatch {
  display: block;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(0, 0, 0, 0.12);
  transition: transform 0.1s;
}
.swatch:hover {
  transform: scale(1.08);
}
.swatch.is-active {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.swatch--lg {
  width: 34px;
  height: 34px;
}
.swatch--sm {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
.swatch--none {
  background: linear-gradient(135deg, #fff 45%, #e03131 45%, #e03131 55%, #fff 55%) !important;
}
.swatch--ring {
  background: transparent;
  border-width: 4px;
}
.swatch--custom {
  position: relative;
  overflow: hidden;
  background: conic-gradient(#e03131, #f08c00, #ffd43b, #2f9e44, #1971c2, #9c36b5, #e03131);
  cursor: pointer;
}
.swatch--custom input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
/* ==================================================================
   DROPDOWNS & MENUS
   ================================================================== */
.menu-anchor {
  position: relative;
}
.dropdown {
  position: absolute;
  z-index: 50;
  top: calc(100% + 8px);
  left: 0;
  min-width: 250px;
  padding: 6px;
  background: var(--surface);
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow-panel);
  box-shadow: var(--shadow-lg);
  animation: pop-in 0.12s ease-out;
}
.dropdown--right {
  left: auto;
  right: 0;
}
.dropdown--up {
  top: auto;
  bottom: calc(100% + 6px);
}
.dropdown__header {
  display: flex;
  flex-direction: column;
  padding: 8px 10px;
}
.menu-list {
  display: flex;
  flex-direction: column;
}
.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--radius);
  text-align: left;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
}
.menu-item svg {
  color: var(--text-2);
  flex-shrink: 0;
}
.menu-item:hover {
  background: var(--surface-hover);
}
.menu-item.is-active {
  background: var(--primary-soft);
  color: var(--primary);
}
.menu-item--danger,
.menu-item--danger svg {
  color: var(--danger);
}
.menu-item--toggle input {
  margin-left: auto;
  accent-color: var(--primary);
  width: 16px;
  height: 16px;
}
.menu-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 10px;
  font-size: 14px;
}
.menu-row svg {
  color: var(--text-2);
}
/* ==================================================================
   MODAL
   ================================================================== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(10, 10, 25, 0.42);
  backdrop-filter: blur(2px);
  animation: fade-in 0.15s;
}
.modal {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: calc(100vh - 32px);
  background: var(--surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  animation: pop-in 0.18s ease-out;
}
.modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 20px 12px 24px;
}
.modal__header h2 {
  font-size: 20px;
  font-weight: 700;
}
.modal__header p {
  margin-top: 2px;
}
.modal__body {
  padding: 8px 24px 24px;
  overflow: auto;
}
.modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 24px;
  border-top: 1px solid var(--border);
}
/* ==================================================================
   TOASTS
   ================================================================== */
.toasts {
  position: fixed;
  z-index: 200;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--radius-lg);
  background: #1d1d27;
  color: #fff;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  animation: pop-in 0.2s ease-out;
}
.toast--success svg {
  color: #69db7c;
}
.toast--error {
  background: #c92a2a;
}
/* ==================================================================
   AVATARS
   ================================================================== */
.avatar {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  user-select: none;
}
.avatar svg {
  display: block;
}
.avatar--more {
  width: 30px;
  height: 30px;
  font-size: 12px;
  background: var(--surface-2);
  color: var(--text-2);
}
.avatar-btn {
  border-radius: 50%;
}
.avatar-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
/* ==================================================================
   STYLES · BOARD (CANVAS PAGE)
   ================================================================== */
/* ==================================================================
   BOARD LAYOUT
   ================================================================== */
.board {
  position: fixed;
  inset: 0;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.board-canvas {
  position: absolute;
  inset: 0;
  display: block;
}
.text-editor-layer,
.cursors-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.text-editor {
  pointer-events: auto;
  user-select: text;
  -webkit-user-select: text;
}
.text-editor::placeholder {
  color: #a5a5b0;
  opacity: 1;
}
/* ==================================================================
   TOP BAR
   ================================================================== */
.topbar {
  position: absolute;
  z-index: 20;
  top: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 50px;
  padding: 0 7px;
  background: var(--surface);
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow-panel);
}
.topbar--left {
  left: 12px;
}
.topbar--right {
  right: 12px;
  gap: 6px;
}
.topbar__home {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius);
}
.topbar__home:hover {
  background: var(--surface-hover);
}
.board-name {
  height: 34px;
  max-width: 300px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  font-size: 15px;
  font-weight: 600;
  outline: none;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.board-name:hover:not(:disabled) {
  border-color: var(--border);
}
.board-name:focus {
  border-color: var(--primary);
  background: var(--surface);
}
.status-pill {
  margin-left: 4px;
  padding: 3px 9px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 600;
  background: var(--surface-2);
  color: var(--text-2);
}
.status-pill--warn {
  background: var(--warn-soft);
  color: var(--warn);
}
.avatars {
  display: flex;
  align-items: center;
  margin-right: 4px;
}
.avatars .avatar {
  border: 2px solid var(--surface);
  margin-left: -7px;
}
.avatars .avatar:first-child {
  margin-left: 0;
}
/* ==================================================================
   MEETING TIMER
   ================================================================== */
.timer-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  min-width: 36px;
  justify-content: center;
  padding: 0 8px;
  border-radius: var(--radius);
  color: var(--text);
  /* what everyone but the owner sees: the countdown only, nothing to press */
}
.timer-btn:hover {
  background: var(--surface-hover);
}
.timer-btn.is-on {
  background: var(--primary-soft);
  color: var(--primary);
}
.timer-btn.is-done {
  background: var(--danger-soft);
  color: var(--danger);
  animation: pulse 1s ease-in-out infinite;
}
.timer-btn__time {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.timer-btn--status {
  cursor: default;
}
.timer-btn--status.is-on:hover {
  background: var(--primary-soft);
}
.timer-btn--status.is-paused,
.timer-btn--status.is-paused:hover {
  background: var(--surface-hover);
  color: var(--text-2);
}
.timer-panel {
  min-width: 290px;
  padding: 14px;
}
.timer-panel__time {
  margin: 4px 0 12px;
  text-align: center;
  font-size: 44px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.timer-panel__presets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.timer-panel--inline {
  min-width: 0;
  padding: 6px 8px 10px;
}
.timer-panel--inline .flyout__title {
  display: none;
}
.timer-panel--inline .timer-panel__time {
  font-size: 32px;
}
.timer-panel--inline .flyout__row {
  flex-wrap: wrap;
}
/* ==================================================================
   MAIN TOOLBAR (LEFT)
   ================================================================== */
.toolbar-stack {
  position: absolute;
  z-index: 20;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.toolbar {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  background: var(--surface);
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow-panel);
}
.toolbar .icon-btn {
  width: 40px;
  height: 40px;
}
.toolbar__sep {
  height: 1px;
  margin: 4px 6px;
  background: var(--border);
}
.toolbar__slot {
  position: relative;
}
.toolbar--compact .icon-btn {
  width: 40px;
  height: 36px;
}
/* ==================================================================
   FLYOUTS (TOOL OPTIONS & STYLE POPOVERS)
   ================================================================== */
.flyout {
  position: absolute;
  z-index: 30;
  top: 0;
  left: calc(100% + 12px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 190px;
  padding: 12px;
  background: var(--surface);
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow-panel);
  box-shadow: var(--shadow-lg);
  animation: pop-in 0.12s ease-out;
}
.flyout--row {
  flex-direction: row;
  min-width: 0;
  padding: 6px;
  gap: 2px;
}
.flyout--below {
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  animation: fade-in 0.12s;
  overflow-y: auto;
}
.flyout--below > .font-menu {
  min-height: 0;
  max-height: none;
  flex: 1 1 auto;
}
.flyout__title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
}
.flyout__title--row {
  display: flex;
  justify-content: space-between;
}
.flyout__title--row span {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.flyout__row {
  display: flex;
  gap: 4px;
}
.flyout__row--center {
  justify-content: center;
}
.flyout__hint {
  font-size: 13px;
  color: var(--text-2);
}
.width-dot {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius);
}
.width-dot span {
  border-radius: 50%;
}
.width-dot:hover {
  background: var(--surface-hover);
}
.width-dot.is-active {
  background: var(--primary-soft);
}
/* ==================================================================
   CONTEXT TOOLBAR (ABOVE SELECTION)
   ================================================================== */
/* the lasso's dashed outline (Miro), over every board layer like the selection box */
.lasso-path {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: none;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.lasso-path polyline {
  fill: rgba(91, 91, 214, 0.06);
  stroke: #4262ff;
  stroke-width: 1.5;
  stroke-dasharray: 6 5;
  stroke-linejoin: round;
}
/* the drag-to-select box: above every board layer (tables, docs, widgets), under the bars */
.marquee-box {
  position: absolute;
  z-index: 9;
  display: none;
  border: 1px solid #4262ff;
  background: rgba(91, 91, 214, 0.08);
  pointer-events: none;
}
.ctx-bar {
  position: absolute;
  z-index: 18;
  transform: translateX(-50%);
  display: flex;
  width: max-content;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: var(--surface);
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow-panel);
  box-shadow: 0 0 0 1px rgba(5, 0, 56, 0.05), 0 4px 16px rgba(5, 0, 56, 0.12);
  animation: fade-in 0.12s;
  /* ---- pen selection: inline thickness + colour ---- */
  /* ---- text: font name, and icons with a colour bar under them (Miro) ---- */
  /* ---- Word's "Change case" + "Clear formatting" ---- */
}
.ctx-bar .icon-btn {
  width: 34px;
  height: 34px;
}
.ctx-bar__slot {
  position: relative;
}
.ctx-bar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  min-width: 40px;
  padding: 0 8px;
  border-radius: var(--radius);
  color: var(--text);
  font-weight: 600;
}
.ctx-bar__btn:hover,
.ctx-bar__btn.is-active {
  background: var(--surface-hover);
  color: var(--text);
}
.ctx-bar__text {
  font-size: 13px;
  max-width: 92px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ctx-bar__sep {
  width: 1px;
  height: 22px;
  margin: 0 3px;
  background: var(--border);
}
.ctx-bar__thickness {
  width: 84px;
  margin: 0 8px;
  flex: none;
}
.ctx-bar__ink {
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(5, 0, 56, 0.14);
}
.ctx-bar__font {
  padding: 0 6px;
  font-size: 15px;
  font-weight: 400;
  white-space: nowrap;
}
.ctx-bar__marked {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.ctx-bar__marked i {
  display: block;
  width: 20px;
  height: 3px;
  border-radius: 1px;
}
.ctx-bar__marked i.is-none {
  background: repeating-conic-gradient(#d9d9e0 0 25%, #fff 0 50%) 0 0 / 4px 4px;
}
.ctx-bar__bg {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: repeating-conic-gradient(#e2e2e8 0 25%, #f7f7f9 0 50%) 0 0 / 7px 7px;
  box-shadow: inset 0 0 0 1px rgba(5, 0, 56, 0.08);
}
.ctx-bar__format {
  padding: 0 6px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.ctx-bar .frame-formats {
  min-width: 230px;
}
.ctx-bar .frame-formats .menu-item {
  gap: 10px;
}
.ctx-bar .frame-formats .menu-item svg {
  width: 20px;
  height: 20px;
}
.ctx-bar .frame-formats .menu-item small {
  margin-left: auto;
  color: var(--text-3);
  font-size: 12px;
}
.ctx-bar .frame-formats .is-static {
  cursor: default;
}
.ctx-bar__ring {
  display: block;
  width: 22px;
  height: 22px;
  border: 4px solid #1e1e1e;
  border-radius: 50%;
}
.ctx-bar__ring.is-none {
  border: 2px dashed #c9c9d4;
}
.ctx-bar__fill {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(5, 0, 56, 0.1);
}
.ctx-bar__fill.is-none {
  background: repeating-conic-gradient(#e2e2e8 0 25%, #f7f7f9 0 50%) 0 0 / 7px 7px;
}
.ctx-bar .text-sizes {
  max-height: 280px;
  overflow-y: auto;
  min-width: 72px;
}
.ctx-bar .text-case {
  min-width: 200px;
}
.ctx-bar .text-case .menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.ctx-bar .text-case .menu-sep {
  display: block;
  height: 1px;
  margin: 4px 6px;
  background: rgba(5, 0, 56, 0.08);
}
.ctx-bar .note-size .ctx-bar__btn {
  min-width: 0;
  padding: 0;
}
.ctx-bar .note-size .ctx-bar__btn .note-size__value {
  display: grid;
  place-items: center;
  font-weight: 400;
}
.ctx-bar .flyout .pen-colors {
  width: 164px;
}
/* ---- selection filter ("Filter · 39 objects") ---- */
.ctx-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 8px 0 10px;
  border-radius: var(--radius);
  color: var(--text);
}
.ctx-filter:hover,
.ctx-filter.is-active {
  background: var(--surface-hover);
}
.ctx-filter__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
}
.ctx-filter__text small {
  font-size: 11px;
  color: #656380;
}
.ctx-filter__text b {
  font-size: 13px;
  font-weight: 600;
}
/* ---- align row ---- */
.ctx-align {
  display: flex;
  flex-direction: row;
  gap: 2px;
  padding: 4px;
}
/* ---- selection menus (filter, more, arrange) ---- */
.ctx-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 10px);
  left: 0;
  display: flex;
  flex-direction: column;
  min-width: 190px;
  padding: 8px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(5, 0, 56, 0.06), 0 8px 24px rgba(5, 0, 56, 0.14);
  animation: pop-in 0.12s ease-out;
}
.ctx-menu--more {
  left: auto;
  right: -8px;
  min-width: 290px;
}
.ctx-menu--side {
  top: -8px;
  left: calc(100% + 12px);
  min-width: 240px;
}
.ctx-menu--up {
  top: auto;
  bottom: calc(100% + 10px);
}
.ctx-menu--side-left {
  left: auto;
  right: calc(100% + 12px);
}
.ctx-menu--side-up {
  top: auto;
  bottom: -8px;
}
.ctx-menu hr {
  margin: 6px 0;
  border: 0;
  border-top: 1px solid #e9e8ef;
}
.ctx-menu__sub {
  position: relative;
}
.ctx-menu__item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 40px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 14px;
  color: var(--text);
  text-align: left;
  white-space: nowrap;
}
.ctx-menu__item svg {
  flex: none;
  color: var(--text);
}
.ctx-menu__item:hover:not(:disabled) {
  background: #f1f1f4;
}
.ctx-menu__item:disabled {
  color: #b8b7c4;
  cursor: default;
}
.ctx-menu__label {
  flex: 1;
}
.ctx-menu__hint {
  margin-left: 16px;
  font-size: 13px;
  color: #656380;
}
.ctx-menu__item:disabled .ctx-menu__hint {
  color: #c9c8d3;
}
.ctx-menu__chevron {
  margin-left: auto;
}
/* ==================================================================
   BOTTOM BAR (ZOOM, MINIMAP, HELP)
   ================================================================== */
.bottombar {
  position: absolute;
  z-index: 20;
  right: 12px;
  bottom: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.bottombar__row {
  display: flex;
  gap: 8px;
}
.pill {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: var(--surface);
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow-panel);
}
.pill__sep {
  width: 1px;
  height: 20px;
  margin: 0 3px;
  background: var(--border);
}
.zoom-label {
  min-width: 54px;
  height: 36px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.zoom-label:hover {
  background: var(--surface-hover);
}
.minimap {
  display: block;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  cursor: pointer;
}
/* ==================================================================
   LIVE CURSORS
   ================================================================== */
.peer-cursor {
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 90ms linear;
  will-change: transform;
}
.peer-cursor__arrow {
  position: absolute;
  top: -2px;
  left: -2px;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.25));
}
.peer-cursor__name {
  position: absolute;
  top: 18px;
  left: 15px;
  padding: 2px 8px;
  border-radius: 10px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  white-space: nowrap;
  box-shadow: 0 0 0 1.5px #fff, 0 2px 6px rgba(0, 0, 0, 0.18);
}
/* ---- follow: a frame in their colour round your screen ---- */
.follow-frame {
  position: absolute;
  z-index: 27;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 3px var(--follow);
  animation: fade-in 0.2s;
}
/* ==================================================================
   COMMENTS
   ================================================================== */
/* ---- a new comment (Miro): a dot on the spot, a line, a one-line composer ---- */
.comment-new {
  position: absolute;
  z-index: 25;
  display: flex;
  align-items: center;
  transform: translate(-6px, -50%);
  pointer-events: none;
}
.comment-new > * {
  pointer-events: auto;
}
.comment-new__dot {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #6b6f86;
}
.comment-new__line {
  flex: none;
  width: 52px;
  height: 2px;
  background: #6b6f86;
  pointer-events: none;
}
.comment-new__box {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  width: 340px;
  min-height: 48px;
  padding: 6px 8px 6px 18px;
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 0 0 1px rgba(5, 0, 56, 0.05), 0 6px 20px rgba(5, 0, 56, 0.14);
  animation: pop-in 0.15s ease-out;
}
.comment-new__box textarea {
  flex: 1;
  min-width: 0;
  height: 22px;
  padding: 0;
  border: none;
  outline: none;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  line-height: 22px;
  resize: none;
}
.comment-new__box textarea::placeholder {
  color: #6b6f80;
}
.comment-new__btn,
.comment-new__send {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #6b6f80;
}
.comment-new__btn:hover,
.comment-new__btn.is-on {
  background: var(--surface-2);
  color: var(--text);
}
.comment-new__send {
  background: var(--primary);
  color: #fefefe;
}
.comment-new__send:disabled {
  background: none;
  color: #c4c7d2;
  cursor: default;
}
.comment-new__mentions,
.comment-new__emoji {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  padding: 6px;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 0 0 1px rgba(5, 0, 56, 0.05), 0 8px 24px rgba(5, 0, 56, 0.16);
}
.comment-new__mentions {
  display: flex;
  flex-direction: column;
  min-width: 220px;
}
.comment-new__mentions button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  color: var(--text);
  font-size: 14px;
  text-align: left;
}
.comment-new__mentions button:hover,
.comment-new__mentions button.is-active {
  background: var(--surface-2);
}
.comment-new__emoji {
  right: -60px;
  left: auto;
  padding: 0;
}
/* ==================================================================
   EMOJI PICKER (SHARED)
   ================================================================== */
.emoji-pick {
  display: flex;
  flex-direction: column;
  width: 352px;
  height: 420px;
  padding: 14px 6px 0 14px;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 0 0 1px rgba(5, 0, 56, 0.05), 0 12px 32px rgba(5, 0, 56, 0.18);
  color: var(--text);
}
.emoji-pick__search {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  height: 40px;
  margin-right: 8px;
  padding: 0 10px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text-2);
}
.emoji-pick__search:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(66, 98, 255, 0.18);
}
.emoji-pick__search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 14px;
}
.emoji-pick__search button {
  display: grid;
  place-items: center;
  color: var(--text-2);
}
.emoji-pick__tabs {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  gap: 2px;
  margin: 10px 8px 6px 0;
}
.emoji-pick__tabs button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  color: var(--text-2);
}
.emoji-pick__tabs button:hover {
  background: var(--surface-2);
  color: var(--text);
}
.emoji-pick__tabs button.is-on {
  background: var(--surface-2);
  color: var(--text);
}
.emoji-pick__scroll {
  flex: 1;
  min-height: 0;
  padding: 0 4px 12px 0;
  overflow-y: auto;
}
.emoji-pick__head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 12px 4px 6px 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}
.emoji-pick__note {
  margin: 4px 0 8px;
  color: var(--text-2);
  font-size: 13px;
}
.emoji-pick__grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
}
.emoji-pick__cell,
.emoji-pick__glyph,
.emoji-pick__tones button {
  font-family: 'Noto Color Emoji', 'Segoe UI Emoji', 'Apple Color Emoji', sans-serif;
}
.emoji-pick__cell {
  display: grid;
  place-items: center;
  height: 38px;
  border-radius: 8px;
  font-size: 24px;
  line-height: 1;
}
.emoji-pick__cell:hover {
  background: var(--surface-2);
}
.emoji-pick__tone {
  position: relative;
}
.emoji-pick__tone > button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}
.emoji-pick__tone > button:hover {
  background: var(--surface-2);
}
.emoji-pick__tones {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 2;
  display: flex;
  gap: 2px;
  padding: 4px;
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 0 0 1px rgba(5, 0, 56, 0.06), 0 6px 18px rgba(5, 0, 56, 0.16);
}
.emoji-pick__tones button {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  font-size: 20px;
}
.emoji-pick__tones button:hover,
.emoji-pick__tones button.is-on {
  background: var(--surface-2);
}
.comment-pop {
  position: absolute;
  z-index: 25;
  width: 320px;
  max-height: 380px;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow-panel);
  box-shadow: var(--shadow-lg);
  animation: pop-in 0.15s ease-out;
  user-select: text;
}
.comment-pop__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 8px 8px 14px;
  border-bottom: 1px solid var(--border);
}
.comment-pop__header .icon-btn {
  width: 30px;
  height: 30px;
}
.comment-pop__actions {
  display: flex;
}
.comment-pop__list {
  flex: 1;
  overflow: auto;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.comment-pop__empty {
  font-size: 13px;
}
.comment-pop__composer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--border);
}
.comment-pop__composer textarea {
  flex: 1;
  resize: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 8px 10px;
  outline: none;
  background: var(--surface);
}
.comment-pop__composer textarea:focus {
  border-color: var(--primary);
}
.comment-msg {
  display: flex;
  gap: 10px;
}
.comment-msg__meta {
  font-size: 12px;
}
.comment-msg__text {
  font-size: 14px;
  white-space: pre-wrap;
  word-break: break-word;
}
/* ==================================================================
   RIGHT-CLICK MENU
   ================================================================== */
.context-menu {
  position: fixed;
  top: auto;
  min-width: 240px;
}
/* ==================================================================
   EMPTY BOARD WELCOME
   ================================================================== */
.welcome {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.welcome__card {
  max-width: 540px;
  padding: 28px;
  text-align: center;
  pointer-events: auto;
  background: var(--surface);
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow-panel);
  animation: pop-in 0.3s ease-out;
}
.welcome__card h1 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 6px;
}
.welcome__actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 20px;
}
.welcome__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 6px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  transition: border-color 0.15s, background-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.welcome__action svg {
  color: var(--primary);
}
.welcome__action:hover {
  border-color: var(--primary);
  color: var(--text);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
/* ==================================================================
   PRESENTATION MODE (MIRO)
   Black round the slide; the slide itself is the board, seen through.
   ================================================================== */
.present {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  color: #fefefe;
}
.present > * {
  pointer-events: auto;
}
.present__mask {
  position: absolute;
  background: #000;
}
.present__badge {
  position: absolute;
  top: 9px;
  left: 50%;
  padding: 7px 12px;
  border-radius: 6px;
  background: #2a2a2e;
  font-size: 14px;
  transform: translateX(-50%);
}
/* ---- top right: who is here, Stop ---- */
.present__top {
  position: absolute;
  top: 6px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.present__people {
  display: flex;
  align-items: center;
}
.present__person {
  display: inline-flex;
  border: 2px solid #000;
  border-radius: 50%;
}
.present__person + .present__person {
  margin-left: -8px;
}
.present__more {
  margin-left: 6px;
  color: #c9ccd6;
  font-size: 13px;
}
.present__stop {
  height: 36px;
  padding: 0 14px;
  border: 1.5px solid #ff4d4f;
  border-radius: 8px;
  color: #fefefe;
  font-size: 14px;
  font-weight: 600;
}
.present__stop:hover {
  background: rgba(255, 77, 79, 0.16);
}
.present__bar {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 50px;
  padding: 0 14px;
}
.present__nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
.present__count {
  min-width: 34px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}
.present__spacer {
  flex: 1;
}
.present__btn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: #c9ccd6;
}
.present__btn:hover:not(:disabled),
.present__btn.is-on {
  background: #2a2a2e;
  color: #fefefe;
}
.present__btn:disabled {
  opacity: 0.35;
}
/* ---- all slides ---- */
.present-overview {
  position: absolute;
  bottom: 58px;
  left: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fill, 180px);
  gap: 12px;
  width: min(820px, calc(100vw - 28px));
  max-height: 60vh;
  padding: 14px;
  overflow-y: auto;
  border-radius: 12px;
  background: #1f1f23;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.present-overview__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #c9ccd6;
  font-size: 13px;
  text-align: left;
}
.present-overview__item:hover .present-overview__thumb,
.present-overview__item.is-current .present-overview__thumb {
  box-shadow: 0 0 0 2px #6d86ff;
}
.present-overview__thumb {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 6px;
  background: #fefefe;
}
.present-overview__thumb img {
  display: block;
  width: 100%;
  height: 100%;
}
/* ---- presenter notes ---- */
.present-notes {
  position: absolute;
  right: 14px;
  bottom: 58px;
  width: min(420px, calc(100vw - 28px));
  max-height: 50vh;
  padding: 16px 18px;
  overflow-y: auto;
  border-radius: 12px;
  background: #1f1f23;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.present-notes__title {
  margin: 0 0 8px;
  color: #a9adbb;
  font-size: 12px;
  font-weight: 600;
}
.present-notes__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  white-space: pre-wrap;
}
/* ---- the first-time tips ---- */
.present-tip {
  position: absolute;
  bottom: 94px;
  left: 16px;
  width: 350px;
  max-width: calc(100vw - 32px);
  padding: 18px 18px 16px;
  border: 1px solid #3a3a42;
  border-radius: 8px;
  background: #1f1f23;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.present-tip::after {
  content: '';
  position: absolute;
  bottom: -44px;
  left: 68px;
  width: 1px;
  height: 44px;
  background: #6b6f80;
}
.present-tip--2::after {
  left: 104px;
}
.present-tip__close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  color: #c9ccd6;
}
.present-tip__close:hover {
  background: #2a2a2e;
}
.present-tip__title {
  margin: 0 24px 10px 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}
.present-tip__text {
  margin: 0 0 16px;
  color: #d4d6de;
  font-size: 15px;
  line-height: 1.4;
}
.present-tip__actions {
  display: flex;
  gap: 8px;
}
.present-tip__next,
.present-tip__later {
  height: 32px;
  padding: 0 11px;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 500;
}
.present-tip__next {
  background: #fefefe;
  color: #1d1d21;
}
.present-tip__later {
  background: #2a2a2e;
  color: #fefefe;
}
.present-tip__later:hover {
  background: #34343a;
}
/* ==================================================================
   LOADING & ERROR STATES
   ================================================================== */
.board-state {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  background: var(--bg);
}
.board-state__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 420px;
  padding: 32px;
  text-align: center;
  background: var(--surface);
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow-panel);
}
/* ==================================================================
   BOARD LOADING SCREEN ("PREPARING YOUR TOOLS…")
   ================================================================== */
.board-loading {
  position: absolute;
  inset: 0;
  z-index: 40;
  background-color: var(--bg);
  background-image: radial-gradient(rgba(30, 30, 60, 0.12) 1px, transparent 1px);
  background-size: 22px 22px;
  animation: fade-in 0.2s;
}
.board-loading--over {
  z-index: 90;
}
.board-loading__chrome {
  opacity: 0.5;
  color: var(--text-3);
}
.board-loading__top-left,
.board-loading__top-right,
.board-loading__tools {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  background: var(--surface);
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow-panel);
  box-shadow: none;
}
.board-loading__top-left {
  top: 12px;
  left: 12px;
  height: 50px;
}
.board-loading__name {
  max-width: 260px;
  font-size: 14px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.board-loading__top-right {
  top: 12px;
  right: 12px;
  height: 50px;
  gap: 6px;
}
.board-loading__tools {
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  flex-direction: column;
  gap: 26px;
  padding: 16px 12px;
}
.board-loading__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.board-loading__center svg {
  border-radius: 20px;
  animation: pulse 1.4s ease-in-out infinite;
}
.board-loading__center p {
  color: var(--text-2);
  font-size: 15px;
}
/* ==================================================================
   RESPONSIVE (PHONES & SMALL TABLETS)
   ================================================================== */
@media (max-width: 720px) {
  .topbar {
    top: 8px;
    height: 46px;
  }
  .topbar--left {
    left: 8px;
    max-width: calc(100vw - 150px);
  }
  .topbar--right {
    right: 8px;
  }
  .topbar--right .avatars,
  .topbar--right .menu-anchor,
  .topbar--right .icon-btn {
    display: none;
  }
  .board-name {
    max-width: 120px;
  }
  .toolbar-stack {
    top: auto;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    flex-direction: row;
    max-width: calc(100vw - 16px);
  }
  .toolbar {
    flex-direction: row;
    overflow-x: auto;
  }
  .toolbar__sep {
    width: 1px;
    height: auto;
    margin: 6px 4px;
  }
  .toolbar--compact {
    display: none;
  }
  .flyout {
    position: fixed;
    top: auto;
    left: 50%;
    bottom: 76px;
    transform: translateX(-50%);
  }
  .bottombar {
    bottom: 72px;
    right: 8px;
  }
  .bottombar .pill:last-child {
    display: none;
  }
  .welcome__actions {
    grid-template-columns: repeat(2, 1fr);
  }
  .comment-pop {
    left: 8px !important;
    right: 8px;
    width: auto;
  }
}
/* ==================================================================
   STICKY NOTE TOOLBAR & BADGES (MIRO STYLE)
   ================================================================== */
.note-options {
  display: flex;
  flex-direction: column;
  min-width: 150px;
}
.note-options button {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 14px;
  color: var(--text);
}
.note-options button b {
  width: 18px;
}
.note-options button:hover {
  background: #f1f1f4;
}
.note-options button.is-active {
  background: var(--primary-soft);
  color: var(--primary);
}
/* ---- font menu: every name in its own face (Miro) ---- */
.font-menu {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 236px;
  max-height: min(640px, 70vh);
  margin: -4px;
  padding: 6px 0;
  overflow-y: auto;
  scrollbar-width: thin;
}
.font-menu__head {
  padding: 10px 16px 4px;
  color: #656380;
  font-size: 13px;
}
.font-menu__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 36px;
  padding: 0 16px;
  color: #1c1c1e;
  font-size: 16px;
  text-align: left;
  white-space: nowrap;
}
.font-menu__item:hover {
  background: #f1f1f4;
}
.font-menu__item.is-active {
  color: var(--primary);
}
.font-menu__item.is-active svg {
  flex: none;
}
.font-menu__link {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 30px;
  padding: 0 16px;
  color: var(--primary);
  font-size: 15px;
  font-weight: 600;
}
.font-menu__link:hover {
  text-decoration: underline;
}
.font-menu__add {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 12px 6px;
}
.font-menu__add .input {
  flex: 1;
  min-width: 0;
  height: 32px;
}
.font-menu__error {
  width: 100%;
  margin: 0;
  color: #d63b3b;
  font-size: 12px;
}
.note-size {
  display: flex;
  align-items: center;
  height: 34px;
}
.note-size__value {
  min-width: 40px;
  height: 34px;
  padding: 0 4px;
  border-radius: 6px;
  font-size: 14px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.note-size__value.is-auto {
  color: var(--text-2);
}
.note-size__value:hover {
  background: var(--surface-hover);
}
.note-size__steps {
  display: flex;
  flex-direction: column;
}
.note-size__steps button {
  display: grid;
  place-items: center;
  width: 20px;
  height: 16px;
  border-radius: 3px;
  color: var(--text);
}
.note-size__steps button:hover {
  background: #f1f1f4;
}
.note-link {
  display: flex;
  gap: 6px;
  width: 300px;
}
.note-link .input {
  flex: 1;
  height: 32px;
}
.note-colors {
  display: grid;
  grid-template-columns: repeat(8, 30px);
  gap: 6px;
}
.note-colors .sticky-swatch {
  width: 30px;
  height: 30px;
}
.note-tags {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 260px;
}
.note-tags__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.note-tags__tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px 3px 9px;
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}
.note-tags__tag button {
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.85);
}
.note-tags__tag button:hover {
  color: #fff;
}
.note-tags__add {
  display: flex;
  gap: 6px;
}
.note-tags__add .input {
  flex: 1;
  height: 32px;
}
.note-tags__colors {
  display: flex;
  gap: 6px;
}
.note-tags__colors button {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
.note-tags__colors button.is-active {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px currentColor;
  color: #050038;
}
.note-reactions {
  display: flex;
  gap: 2px;
}
.note-reactions button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  transition: transform 0.12s;
}
.note-reactions button:hover {
  transform: scale(1.12);
}
.note-reactions button.is-active {
  background: var(--primary-soft);
}
/* ---- real board frame: aluminium (whiteboard) or wood (chalk boards) ---- */
.board-frame {
  --t: 14px;
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  /* ---- surfaces ---- */
}
.board-frame__edge {
  position: absolute;
  background: repeating-linear-gradient(var(--dir), var(--grain) 0 1px, transparent 1px 3px), linear-gradient(var(--dir), var(--stops));
}
.board-frame__edge--top {
  --dir: 180deg;
  top: 0;
  left: 0;
  right: 0;
  height: var(--t);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--t)) 100%, var(--t) 100%);
}
.board-frame__edge--bottom {
  --dir: 0deg;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--t);
  clip-path: polygon(var(--t) 0, calc(100% - var(--t)) 0, 100% 100%, 0 100%);
  filter: brightness(0.9);
}
.board-frame__edge--left {
  --dir: 90deg;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--t);
  clip-path: polygon(0 0, 100% var(--t), 100% calc(100% - var(--t)), 0 100%);
}
.board-frame__edge--right {
  --dir: 270deg;
  top: 0;
  bottom: 0;
  right: 0;
  width: var(--t);
  clip-path: polygon(0 var(--t), 100% 0, 100% 100%, 0 calc(100% - var(--t)));
  filter: brightness(0.94);
}
.board-frame__surface {
  position: absolute;
  inset: var(--t);
  box-shadow: inset 0 2px 10px var(--shade), inset 0 0 3px var(--shade);
}
.board-frame--whiteboard {
  --t: 16px;
  --stops: #eef0f3, #b3b8c1 28%, #d9dce1 48%, #9097a2 78%, #7a808b 92%, #c9ccd2;
  --grain: rgba(255, 255, 255, 0.14);
  --shade: rgba(20, 24, 40, 0.16);
}
.board-frame--blackboard,
.board-frame--greenboard {
  --t: 20px;
  --stops: #9a6a3e, #b9844f 30%, #8b5b33 65%, #6a4224 90%, #553419;
  --grain: rgba(60, 30, 10, 0.12);
}
.board-frame--blackboard .board-frame__surface,
.board-frame--greenboard .board-frame__surface {
  background: radial-gradient(ellipse 38% 22% at 28% 32%, rgba(255, 255, 255, 0.035), transparent 70%), radial-gradient(ellipse 30% 18% at 72% 62%, rgba(255, 255, 255, 0.03), transparent 70%), radial-gradient(ellipse 50% 12% at 50% 92%, rgba(255, 255, 255, 0.045), transparent 70%);
}
.board-frame--blackboard {
  --shade: rgba(0, 0, 0, 0.55);
}
.board-frame--greenboard {
  --shade: rgba(0, 20, 8, 0.5);
}
/* ---- badges drawn over the canvas ---- */
.sticky-badges {
  position: absolute;
  inset: 0;
  z-index: 6;
  overflow: hidden;
  pointer-events: none;
}
.sticky-badges__note {
  position: absolute;
}
.sticky-badges__link {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  width: calc(24px * var(--s));
  height: calc(24px * var(--s));
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.85);
  color: #4262ff;
  box-shadow: 0 1px 3px rgba(5, 0, 56, 0.16);
  pointer-events: auto;
}
.sticky-badges__link:hover {
  background: #fff;
}
.sticky-badges__strip {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 7px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: calc(11px * var(--s));
}
.sticky-badges__tag {
  max-width: 100%;
  padding: 1px 6px;
  border-radius: 3px;
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sticky-badges__reactions {
  position: absolute;
  top: 100%;
  padding-top: calc(4px * var(--s));
  left: calc(4px * var(--s));
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: calc(4px * var(--s));
}
.sticky-badges__reaction {
  display: inline-flex;
  align-items: center;
  gap: calc(4px * var(--s));
  height: calc(30px * var(--s));
  padding: 0 calc(7px * var(--s)) 0 calc(5px * var(--s));
  border: 1px solid #dfe2ef;
  border-radius: calc(8px * var(--s));
  background: #fff;
  color: #050038;
  font-size: calc(14px * var(--s));
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 1px 2px rgba(5, 0, 56, 0.06);
  pointer-events: auto;
  transition: border-color 0.12s, background 0.12s;
}
.sticky-badges__reaction:hover {
  background: #f7f8ff;
}
.sticky-badges__reaction.is-mine {
  border-color: #a9b5ff;
}
.sticky-badges__author {
  margin-left: auto;
  color: rgba(5, 0, 56, 0.6);
  font-weight: 600;
}
.sticky-badges__add {
  position: relative;
  pointer-events: auto;
}
.sticky-badges__add > button {
  display: grid;
  place-items: center;
  width: calc(34px * var(--s));
  height: calc(30px * var(--s));
  border-radius: calc(8px * var(--s));
  background: #fff;
  color: #050038;
  box-shadow: 0 1px 4px rgba(5, 0, 56, 0.2);
}
.sticky-badges__add > button:hover {
  background: #f1f1f4;
}
.sticky-badges__picker {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  display: flex;
  gap: 2px;
  padding: 4px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(5, 0, 56, 0.18);
  animation: pop-in 0.12s ease-out;
}
.sticky-badges__picker button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  transition: transform 0.12s;
}
.sticky-badges__picker button:hover {
  transform: scale(1.12);
}
/* ---- sticky note preview under the pointer (sticky tool) ---- */
.sticky-ghost {
  position: fixed;
  z-index: 7;
  opacity: 0.55;
  pointer-events: none;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0.04));
  box-shadow: 0 10px 18px -8px rgba(0, 0, 0, 0.35);
  transition: width 0.12s, height 0.12s;
}
/* ---- Create menu piece waiting to be put down ---- */
.insert-ghost {
  position: fixed;
  z-index: 7;
  border: 1.5px dashed #4262ff;
  border-radius: 6px;
  background: rgba(66, 98, 255, 0.06);
  pointer-events: none;
}
.insert-ghost__label {
  position: absolute;
  bottom: 100%;
  left: -1px;
  margin-bottom: 6px;
  padding: 3px 8px;
  border-radius: 4px;
  background: #4262ff;
  color: #fefefe;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
/* ---- Sticky stack animation layer ---- */
.sticky-stacks {
  position: absolute;
  inset: 0;
  z-index: 6;
  overflow: hidden;
  pointer-events: none;
}
.sticky-stacks__pad {
  position: absolute;
}
.sticky-stacks__pad.is-live {
  pointer-events: auto;
  cursor: grab;
}
.sticky-stacks__pad.is-live:active {
  cursor: grabbing;
}
.sticky-stacks__svg {
  position: absolute;
  inset: 0;
  overflow: visible;
}
.sticky-stacks__note {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.16), rgba(0, 0, 0, 0.04));
  will-change: transform;
}
/* ---- Sticky stack title: rename in place ---- */
.sticky-stacks__title {
  position: absolute;
  border-radius: 6px;
  pointer-events: auto;
  cursor: text;
}
.sticky-stacks__title:hover {
  box-shadow: inset 0 0 0 1px rgba(66, 98, 255, 0.35);
}
.sticky-stacks__title-input {
  position: absolute;
  padding: 0 8px;
  border: 1.5px solid var(--primary);
  border-radius: 8px;
  background: #fff;
  color: #1c1c1e;
  font-family: inherit;
  font-weight: 500;
  outline: none;
  pointer-events: auto;
  box-shadow: 0 0 0 3px rgba(66, 98, 255, 0.12);
}
/* ==================================================================
   STYLES · DASHBOARD
   ================================================================== */
/* ==================================================================
   PAGE LAYOUT
   ================================================================== */
.dashboard {
  display: flex;
  height: 100vh;
  overflow: hidden;
  background: #fafafc;
}
[data-theme='dark'] .dashboard {
  background: var(--bg);
}
.dashboard__content {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
}
.dashboard__main {
  max-width: 1240px;
  margin: 0 auto;
  padding: 36px 24px 72px;
}
/* ==================================================================
   LEFT SIDEBAR (MIRO'S)
   ================================================================== */
.dash-side {
  flex: none;
  display: flex;
  flex-direction: column;
  width: 268px;
  padding: 18px 14px;
  overflow-y: auto;
  border-right: 1px solid var(--border);
  background: var(--surface);
  /* ---- workspace ---- */
  /* ---- search + new board ---- */
  /* ---- Home / Starred / Browse, and spaces ---- */
}
.dash-side__workspace {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 0 6px;
}
.dash-side__workspace b {
  overflow: hidden;
  font-size: 16px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.dash-side__badge {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #d9f99d;
  color: #3f6212;
  font-size: 13px;
  font-weight: 700;
}
.dash-side__search {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}
.dash-side__search label {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text-3);
}
.dash-side__search label:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}
.dash-side__search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: 14px;
}
.dash-side__plus {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
}
.dash-side__plus:hover {
  background: var(--surface-2);
}
.dash-side__nav {
  display: grid;
  gap: 2px;
  margin-top: 18px;
}
.dash-side__item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  color: var(--text);
  font-size: 15px;
  text-align: left;
}
.dash-side__item svg {
  flex: none;
  color: var(--text-2);
}
.dash-side__item span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.dash-side__item:hover {
  background: var(--surface-2);
}
.dash-side__item.is-on {
  background: #ecebe8;
  font-weight: 700;
}
.dash-side__item.is-on svg {
  color: var(--text);
}
[data-theme='dark'] .dash-side__item.is-on {
  background: var(--surface-2);
}
.dash-side__spaces-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 26px;
  padding-left: 12px;
  font-size: 15px;
  font-weight: 700;
}
.dash-side__spaces-head .dash-side__plus {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}
.dash-side__spaces {
  display: grid;
  gap: 2px;
  margin-top: 6px;
}
.dash-side__new-space {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 0 10px;
  height: 40px;
  border: 1px solid var(--primary);
  border-radius: 10px;
}
.dash-side__new-space svg {
  flex: none;
  color: var(--text-2);
}
.dash-side__new-space input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: 15px;
}
.dash-side__hint {
  margin: 6px 12px 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-3);
}
.dash-side__scrim {
  display: none;
}
/* ---- the boards' heading ---- */
.dash-boards__title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.dash-boards__filters {
  margin: -4px 0 18px;
}
/* ---- grid / list toggle ---- */
.dash-layout {
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: 10px;
  background: var(--surface-2);
}
.dash-layout .icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
}
.dash-layout .icon-btn.is-active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(5, 0, 56, 0.12);
}
/* ==================================================================
   BOARDS AS A LIST (MIRO'S RECENTS TABLE)
   ================================================================== */
.board-list {
  --cols: minmax(220px, 1fr) 140px 150px 120px 150px 76px;
  display: grid;
  gap: 8px;
}
.board-list__head,
.board-list__row {
  display: grid;
  grid-template-columns: var(--cols);
  align-items: center;
  gap: 16px;
  padding: 0 12px 0 14px;
}
.board-list__head {
  padding-bottom: 2px;
  color: var(--text-2);
  font-size: 14px;
}
.board-list__row {
  min-height: 64px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.board-list__row:hover,
.board-list__row.has-menu {
  border-color: var(--border-strong);
  box-shadow: 0 2px 10px rgba(5, 0, 56, 0.06);
}
.board-list__row:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.board-list__name {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.board-list__icon {
  flex: none;
  color: var(--text-2);
}
.board-list__title {
  display: grid;
  min-width: 0;
}
.board-list__title b,
.board-list__title small {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.board-list__title b {
  font-size: 16px;
  font-weight: 700;
}
.board-list__title small {
  color: var(--text-2);
  font-size: 13px;
}
.board-list__star {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  color: var(--text-3);
  opacity: 0;
  transition: opacity 0.12s;
}
.board-list__star:hover {
  background: var(--surface-2);
  color: var(--text);
}
.board-list__star.is-on {
  opacity: 1;
  color: #f5a623;
}
.board-list__row:hover .board-list__star,
.board-list__star:focus-visible {
  opacity: 1;
}
.board-list__muted {
  overflow: hidden;
  color: var(--text-2);
  font-size: 14px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.board-list__faces {
  display: inline-flex;
  align-items: center;
}
.board-list__faces .avatar + .avatar {
  margin-left: -6px;
}
.board-list__faces .avatar {
  box-shadow: 0 0 0 2px var(--surface);
}
.board-list__more {
  margin-left: 6px;
  color: var(--text-2);
  font-size: 13px;
}
.board-list__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}
@media (max-width: 1100px) {
  .board-list {
    --cols: minmax(200px, 1fr) 120px 110px 130px 76px;
  }
  .board-list__col--space {
    display: none;
  }
}
@media (max-width: 760px) {
  .board-list {
    --cols: minmax(0, 1fr) 84px 72px;
  }
  .board-list__head,
  .board-list__row {
    gap: 10px;
  }
  .board-list__col--online,
  .board-list__col--owner {
    display: none;
  }
}
.dash-boards.dash-boards--top {
  margin-top: 0;
}
.dash-header__menu {
  display: none;
}
/* ---- Move to space ---- */
.move-dlg__lead {
  margin-bottom: 16px;
  color: var(--text-2);
  font-size: 15px;
}
.move-dlg__list {
  display: grid;
  gap: 4px;
  max-height: 300px;
  overflow-y: auto;
}
.move-dlg__option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 15px;
  cursor: pointer;
}
.move-dlg__option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.move-dlg__option:hover {
  background: #f1f2f5;
}
.move-dlg__option.is-on {
  border-color: #4262ff;
  background: #f4f6ff;
}
.move-dlg__option:focus-within {
  outline: 2px solid #4262ff;
  outline-offset: 1px;
}
.move-dlg__new {
  margin-top: 12px;
}
@media (max-width: 900px) {
  .dash-side {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 60;
    width: min(300px, 86vw);
    box-shadow: 0 0 40px rgba(5, 0, 56, 0.2);
    transform: translateX(-102%);
    transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .dash-side.is-open {
    transform: none;
  }
  .dash-side__scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 59;
    background: rgba(28, 28, 30, 0.35);
    animation: fade-in 0.15s;
  }
  .dash-header__menu {
    display: grid;
  }
}
/* ==================================================================
   HEADER
   ================================================================== */
.dash-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 20px;
  height: 66px;
  padding: 0 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.dash-header__right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.dash-header__badge {
  margin-left: -6px;
  padding: 3px 9px;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}
.dash-header__invite {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 0.15s;
}
.dash-header__invite:hover {
  background: var(--border);
}
/* ==================================================================
   ACCOUNT MENU (THE AVATAR — MIRO'S)
   ================================================================== */
.avatar-btn.is-open {
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.account-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  width: 300px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  padding: 8px;
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 10px 36px rgba(5, 0, 56, 0.16), 0 0 0 1px rgba(5, 0, 56, 0.05);
  animation: fade-in 0.12s;
}
.account-menu hr {
  margin: 6px 4px;
  border: 0;
  border-top: 1px solid var(--border);
}
.account-menu__me {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 10px;
  border-radius: 10px;
  color: var(--text);
  text-align: left;
}
.account-menu__me .avatar {
  flex: none;
}
.account-menu__me b,
.account-menu__me small {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.account-menu__me small {
  color: var(--text-2);
  font-size: 13px;
}
.account-menu__me:hover {
  background: var(--surface-2);
}
.account-menu__item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--text);
  font-size: 15px;
  line-height: 20px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.account-menu__item svg {
  flex: none;
  color: var(--text-2);
}
.account-menu__item:hover,
.account-menu__item:focus-visible {
  background: var(--surface-2);
  outline: none;
}
.account-menu__who {
  flex: 1;
  display: grid;
  min-width: 0;
}
.account-menu__switch .switch {
  margin-left: auto;
}
/* ==================================================================
   PROFILE
   ================================================================== */
.dash-side__badge img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}
.dash-side__badge {
  overflow: hidden;
}
.profile-dlg__tabs {
  display: flex;
  gap: 28px;
  margin: 0 -40px 24px;
  padding: 0 40px;
  border-bottom: 1px solid #e3e4ea;
}
.profile-dlg__tabs button {
  padding: 6px 0 12px;
  color: #656b81;
  font-size: 17px;
}
.profile-dlg__tabs button:hover {
  color: #1c1c1e;
}
.profile-dlg__tabs button.is-on {
  color: #1c1c1e;
  font-weight: 700;
  box-shadow: inset 0 -2px 0 #4262ff;
}
.profile-dlg__avatars {
  display: grid;
  grid-template-columns: repeat(4, 60px);
  gap: 12px 14px;
}
.profile-dlg__avatars button {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 50%;
  transition: transform 0.12s, box-shadow 0.12s;
}
.profile-dlg__avatars button:hover {
  transform: scale(1.06);
}
.profile-dlg__avatars button.is-on {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #4262ff;
}
.profile-dlg__avatars button:focus-visible {
  outline: 2px solid #4262ff;
  outline-offset: 3px;
}
.profile-dlg__preview {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
  padding: 16px;
  border-radius: 14px;
  background: #f5f6f8;
}
.profile-dlg__preview span {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.profile-dlg__preview b {
  overflow: hidden;
  font-size: 18px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.profile-dlg__preview small {
  color: #656b81;
  font-size: 13px;
}
.profile-dlg__label {
  margin-top: 20px;
}
.profile-dlg__colors {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.profile-dlg__colors button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #fff;
  transition: transform 0.12s, box-shadow 0.12s;
}
.profile-dlg__colors button:hover {
  transform: scale(1.1);
}
.profile-dlg__colors button.is-on {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1c1c1e;
}
.profile-dlg__colors button:focus-visible {
  outline: 2px solid #4262ff;
  outline-offset: 3px;
}
.profile-dlg__account {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 18px;
  margin: 24px 0 0;
  padding-top: 18px;
  border-top: 1px solid #e3e4ea;
  font-size: 15px;
}
.profile-dlg__account dt {
  color: #656b81;
}
.profile-dlg__account dd {
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* ==================================================================
   TEAM PROFILE (A TAB OF THE PROFILE — MIRO'S PAGE)
   ================================================================== */
.team-profile__loading {
  color: #656b81;
}
.team-profile__top {
  display: flex;
  justify-content: space-between;
  gap: 28px;
}
.team-profile__name {
  flex: 1;
  min-width: 0;
  max-width: 380px;
}
.team-profile__save {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.team-profile__hint {
  margin: 10px 0 0;
  color: #656b81;
  font-size: 13px;
}
.team-profile__logo {
  flex: none;
  display: grid;
  gap: 8px;
  width: 150px;
}
.team-profile__tile {
  display: grid;
  place-items: center;
  width: 150px;
  height: 150px;
  overflow: hidden;
  border-radius: 6px;
  background: #f1f2f5;
  color: #fff;
  font-size: 54px;
  font-weight: 700;
}
.team-profile__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.team-profile__upload,
.team-profile__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
}
.team-profile__upload:disabled,
.team-profile__remove:disabled {
  opacity: 0.6;
  cursor: default;
}
.team-profile__upload {
  background: #ecebe8;
  color: #1c1c1e;
}
.team-profile__upload:hover:not(:disabled) {
  background: #e1e0dc;
}
.team-profile__remove {
  color: #656b81;
}
.team-profile__remove:hover:not(:disabled) {
  background: #f1f2f5;
  color: #1c1c1e;
}
.team-profile__section {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid #e3e4ea;
}
.team-profile__section h3 {
  margin: 0 0 14px;
  font-size: 19px;
  font-weight: 400;
  color: #1c1c1e;
}
.team-profile__plan {
  max-width: 480px;
  margin: 0;
}
.team-profile__plan > div {
  padding: 12px 0;
}
.team-profile__plan > div + div {
  border-top: 1px solid #ecedf1;
}
.team-profile__plan dt {
  color: #3a3d4a;
  font-size: 14px;
}
.team-profile__plan dd {
  margin: 2px 0 0;
  font-size: 16px;
}
.team-profile__included {
  margin-left: 10px;
  padding: 2px 8px;
  border-radius: 99px;
  background: #e6f6ec;
  color: #1f7a4d;
  font-size: 12px;
  font-weight: 700;
}
.team-profile__warn {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.5;
  color: #3a3d4a;
}
.team-profile__delete {
  height: 34px;
  padding: 0 12px;
  border: 1px solid #e01e37;
  border-radius: 6px;
  color: #e01e37;
  font-size: 14px;
  font-weight: 600;
}
.team-profile__delete:hover {
  background: #fff1f3;
}
.team-profile__confirm {
  max-width: 420px;
}
.team-profile__confirm b {
  font-weight: 700;
}
@media (max-width: 600px) {
  .profile-dlg__tabs {
    margin: 0 -22px 20px;
    padding: 0 22px;
  }
  .team-profile__top {
    flex-direction: column-reverse;
    align-items: flex-start;
  }
}
@media (max-width: 600px) {
  .dash-header__invite span {
    display: none;
  }
  .dash-header__invite {
    width: 36px;
    padding: 0;
    justify-content: center;
  }
}
/* ==================================================================
   HERO & CREATE STRIP
   ================================================================== */
.dash-hero h1 {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.dash-hero > p {
  margin-top: 4px;
}
.create-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 16px;
  margin-top: 22px;
}
.create-strip__more {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 160px;
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  color: var(--text-2);
  font-weight: 600;
  transition: border-color 0.15s, color 0.15s;
}
.create-strip__more:hover {
  border-color: var(--primary);
  color: var(--primary);
}
/* ==================================================================
   BOARD LIST
   ================================================================== */
.dash-boards {
  margin-top: 44px;
}
.dash-boards__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.dash-boards__actions {
  display: flex;
  gap: 8px;
}
.board-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}
/* ==================================================================
   BOARD CARD
   ================================================================== */
.board-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  transition: box-shadow 0.15s, transform 0.15s;
}
.board-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.board-card:hover .board-card__star {
  opacity: 1;
}
.board-card__thumb {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.board-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.board-card__empty {
  font-size: 13px;
  color: var(--text-3);
}
.board-card__star {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  color: var(--text-3);
  opacity: 0;
  transition: opacity 0.15s;
}
.board-card__star.is-on {
  opacity: 1;
  color: #f59f00;
}
.board-card__body {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 10px 12px 14px;
}
.board-card__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.board-card__info > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.board-card__name {
  font-size: 15px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.board-card--skeleton {
  height: 236px;
  background: linear-gradient(90deg, var(--surface) 0, var(--surface-2) 50%, var(--surface) 100%);
  background-size: 800px 100%;
  animation: shimmer 1.4s linear infinite;
}
/* ==================================================================
   EMPTY STATE
   ================================================================== */
.empty-state {
  padding: 64px 24px;
  text-align: center;
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-xl);
}
.empty-state h3 {
  font-size: 18px;
  margin-bottom: 4px;
}
/* ==================================================================
   RESPONSIVE
   ================================================================== */
@media (max-width: 720px) {
  .dash-header {
    gap: 12px;
    padding: 0 12px;
  }
  .dash-header .wordmark {
    height: 34px;
  }
  .dashboard__main {
    padding: 24px 14px 48px;
  }
  .create-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* ==================================================================
   STYLES · DIALOGS & TEMPLATES
   ================================================================== */
/* ==================================================================
   TEMPLATE GALLERY
   ================================================================== */
.template-gallery {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}
.template-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.template-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.template-card__preview {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  padding: 10px 14px;
  background: #f3f3f6;
  border-bottom: 1px solid var(--border);
}
.template-card__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px 12px;
}
.template-card__body b {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
}
.template-card__body span {
  font-size: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* ==================================================================
   HELP & SHORTCUTS
   ================================================================== */
.help-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.help-grid h3 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
  margin: 0 0 10px;
}
.help-grid h3:not(:first-child) {
  margin-top: 22px;
}
.keys {
  margin: 0;
}
.keys div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--border);
}
.keys dt {
  font-size: 13px;
}
.keys dd {
  margin: 0;
}
.tips {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  color: var(--text-2);
}
.tips li {
  margin-bottom: 8px;
}
/* ==================================================================
   EXPORT
   ================================================================== */
.export-layout {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 24px;
}
.export-preview {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}
.export-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.checkerboard {
  background-color: #fff;
  background-image: linear-gradient(45deg, #eee 25%, transparent 25%), linear-gradient(-45deg, #eee 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #eee 75%), linear-gradient(-45deg, transparent 75%, #eee 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
/* ==================================================================
   SHARE
   ================================================================== */
.invite-row {
  display: flex;
  gap: 8px;
}
.invite-row .input:first-child {
  flex: 1;
}
.share-link {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 4px;
  padding: 14px;
  border-radius: var(--radius-lg);
  background: var(--surface-2);
}
.share-link__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--primary);
  flex-shrink: 0;
}
.share-link__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.share-link__body .muted {
  font-size: 12px;
}
.member-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.member {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}
.member__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.member__info .muted {
  font-size: 12px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* ==================================================================
   "SAVE BOARD" (AFTER AN INSTANT BOARD'S GUEST SIGNS UP — MIRO'S BOX)
   ================================================================== */
.save-board__backdrop {
  background: rgba(10, 10, 25, 0.32);
  backdrop-filter: none;
}
.save-board {
  position: relative;
  width: min(412px, 100%);
  padding: 52px 52px 48px;
  border-radius: 20px;
  background: #fff;
  color: #1c1c1e;
  box-shadow: 0 24px 70px rgba(5, 0, 56, 0.24);
  animation: help-center-in 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
.save-board h2 {
  margin: 0 0 18px;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.3;
  color: #1c1c1e;
}
.save-board__close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  color: #1c1c1e;
}
.save-board__close:hover {
  background: #f1f2f5;
}
.save-board__label {
  display: block;
  margin-bottom: 8px;
  font-size: 16px;
  color: #1c1c1e;
}
.save-board__input {
  width: 100%;
  height: 34px;
  padding: 4px 10px;
  border: 1px solid #c7cad5;
  border-radius: 6px;
  background: #fff;
  color: #1c1c1e;
  font: inherit;
  font-size: 15px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.save-board__input:focus {
  border-color: #4262ff;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(66, 98, 255, 0.45);
}
.save-board__sub {
  display: block;
  margin: 20px 0 8px;
  font-size: 14px;
  color: #3a3d4a;
}
.save-board__owner {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 10px;
  border-radius: 6px;
  background: #e9eaef;
  color: #8f93a3;
  font-size: 15px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.save-board__badge {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: #2f7a5d;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.save-board__note {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: #656b81;
}
.save-board__foot {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 28px;
}
.save-board__save {
  height: 40px;
  padding: 0 16px;
  border-radius: 6px;
  background: #4262ff;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  transition: background-color 0.15s;
}
.save-board__save:hover:not(:disabled) {
  background: #2a42b7;
}
.save-board__save:disabled {
  opacity: 0.6;
  cursor: default;
}
.save-board__cancel {
  height: 40px;
  padding: 0 16px;
  border-radius: 6px;
  color: #1c1c1e;
  font-size: 16px;
  font-weight: 700;
}
.save-board__cancel:hover {
  background: #f1f2f5;
}
/* ==================================================================
   RESPONSIVE
   ================================================================== */
@media (max-width: 720px) {
  .save-board {
    padding: 44px 24px 32px;
  }
  .help-grid,
  .export-layout {
    grid-template-columns: 1fr;
  }
  .invite-row {
    flex-wrap: wrap;
  }
}
/* ==================================================================
   STYLES · WELCOME & SIGN-UP (ONBOARDING POPUPS)
   ================================================================== */
/* ==================================================================
   WELCOME PAGE LAYOUT
   ================================================================== */
.welcome-page {
  position: fixed;
  inset: 0;
  overflow: hidden;
}
.welcome-page__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px 16px;
  overflow-y: auto;
  background: rgba(70, 74, 96, 0.5);
}
.welcome-page__legal {
  max-width: 520px;
  text-align: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
}
/* ==================================================================
   DECORATIVE BOARD (BEHIND THE DIALOG)
   ================================================================== */
.welcome-board {
  position: absolute;
  inset: 0;
  background-color: var(--bg);
  background-image: radial-gradient(rgba(30, 30, 60, 0.18) 1px, transparent 1px);
  background-size: 22px 22px;
  color: var(--text-2);
}
[data-theme='dark'] .welcome-board {
  background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px);
}
.welcome-board__top-left,
.welcome-board__top-right,
.welcome-board__notice,
.welcome-board__tools,
.welcome-board__zoom {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  background: var(--surface);
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow-panel);
}
.welcome-board__top-left {
  top: 14px;
  left: 14px;
  height: 54px;
}
.welcome-board__title {
  font-weight: 600;
  color: var(--text);
}
.welcome-board__sep {
  width: 1px;
  height: 22px;
  background: var(--border);
}
.welcome-board__notice {
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  height: 46px;
  font-size: 14px;
  white-space: nowrap;
}
.welcome-board__top-right {
  top: 14px;
  right: 14px;
  height: 54px;
}
.welcome-board__share {
  padding: 7px 14px;
  border-radius: var(--radius);
  background: var(--primary);
  color: #fff;
  font-weight: 600;
}
.welcome-board__tools {
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  flex-direction: column;
  gap: 22px;
  padding: 16px 12px;
}
.welcome-board__tools--history {
  top: auto;
  bottom: 14px;
  transform: none;
  gap: 18px;
}
.welcome-board__zoom {
  right: 14px;
  bottom: 14px;
  font-weight: 600;
}
.lite-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 99px;
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
  vertical-align: middle;
}
/* ==================================================================
   WELCOME DIALOG
   ================================================================== */
.welcome-modal {
  width: 100%;
  max-width: 800px;
  padding: 52px 56px 40px;
  border-radius: 28px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  text-align: center;
  animation: pop-in 0.25s ease-out;
}
.welcome-modal h1 {
  font-size: 46px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.welcome-modal--narrow {
  max-width: 580px;
  text-align: left;
}
.welcome-modal--narrow h1 {
  font-size: 40px;
  font-weight: 600;
}
.welcome-modal__lead {
  margin: 18px 0 36px;
  font-size: 17px;
  color: var(--text-2);
}
.welcome-modal__lead--left {
  margin: 12px 0 28px;
}
.welcome-modal__options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.welcome-modal__expired {
  margin: -18px auto 22px;
  max-width: 520px;
  padding: 10px 14px;
  border-radius: 6px;
  background: #fff6d6;
  color: #6b4e00;
  font-size: 14px;
}
.welcome-modal__signin {
  margin-top: 22px;
  color: var(--text-2);
}
.welcome-modal__signin a {
  font-weight: 600;
}
.welcome-modal__fineprint {
  margin-top: 22px;
  font-size: 12px;
  color: var(--text-3);
}
.welcome-modal .form-error {
  margin-top: 16px;
  text-align: left;
}
/* ==================================================================
   OPTION CARDS (LITE vs FREE ACCOUNT)
   ================================================================== */
.welcome-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 30px 24px 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
}
.welcome-option h2 {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.welcome-option__logo {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
}
.welcome-option p {
  font-size: 15px;
}
.welcome-option p {
  flex: 1;
  max-width: 260px;
  font-size: 16px;
  color: var(--text-2);
}
/* ==================================================================
   SIGN-UP PAGE ("YOUR CANVAS IS READY")
   ================================================================== */
.signup-page {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
}
.signup-page.is-over-board {
  z-index: 100;
  animation: fade-in 0.15s;
}
/* ---- sign-up palette (Miro) ---- */
.signup-stage {
  position: relative;
  flex: 1;
  overflow: hidden;
}
.signup-stage__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  overflow-y: auto;
  background: rgba(28, 28, 30, 0.62);
}
/* ---- card ---- */
.signup-card {
  width: 100%;
  max-width: 534px;
  padding: 56px 48px 24px;
  border-radius: 16px;
  background: #fff;
  color: #1c1c1e;
  box-shadow: 0 12px 40px rgba(5, 0, 56, 0.14);
  animation: signup-in 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  /* "Already have an account? Sign in" */
}
.signup-card h1 {
  font-size: 32px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #1c1c1e;
}
.signup-card__lead {
  margin: 10px 0 28px;
  font-size: 14px;
  line-height: 1.45;
  color: #3a3d4a;
}
.signup-card__lead b {
  font-weight: 700;
  color: #1c1c1e;
}
.signup-card__switch {
  margin-top: 72px;
  text-align: center;
  font-size: 14px;
  color: #1c1c1e;
}
.signup-card__switch button {
  margin-left: 6px;
  color: #2e4de6;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.signup-card__switch button:hover:not(:disabled) {
  color: #2a42b7;
}
.signup-card__switch button:disabled {
  opacity: 0.5;
  cursor: default;
}
.signup-card__error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.3;
  color: #d0021b;
}
.signup-card__error svg {
  flex: none;
}
.signup-card__terms {
  margin-top: 24px;
  text-align: center;
  font-size: 11px;
  line-height: 1.4;
  color: #1c1c1e;
}
.signup-card__terms a {
  color: #2e4de6;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.signup-card__terms a:hover {
  color: #2a42b7;
}
@keyframes signup-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
}
/* ==================================================================
   SIGN UP WITH GOOGLE (THE ONLY WAY IN: THE CARD'S MAIN BUTTON)
   ================================================================== */
.signup-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border: 1px solid #c7cad5;
  border-radius: 8px;
  background: #fff;
  color: #1c1c1e;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
.signup-google svg {
  flex: none;
}
.signup-google:hover:not(:disabled) {
  border-color: #a5a9b8;
  background: #f5f6f8;
}
.signup-google:focus-visible {
  outline: 2px solid #2e4de6;
  outline-offset: 2px;
}
.signup-google:disabled {
  color: #b8babc;
  cursor: default;
}
.signup-google:disabled svg {
  opacity: 0.5;
}
/* ==================================================================
   TERMS OF SERVICE & PRIVACY POLICY PAGES
   (the app locks page scrolling for the canvas: this page scrolls itself)
   ================================================================== */
.legal {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  background: #fff;
  color: #1c1c1e;
  /* ---- contents on the left, the document beside it ---- */
  /* a heading reached from the contents clears the sticky bar */
  /* ---- "In short" ---- */
  /* a detail still to be filled in before launch */
}
.legal__bar {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
  border-bottom: 1px solid #e3e4ea;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
}
.legal__bar nav {
  display: flex;
  gap: 4px;
}
.legal__bar nav a {
  padding: 8px 12px;
  border-radius: 8px;
  color: #5a5f72;
  font-size: 15px;
  text-decoration: none;
}
.legal__bar nav a:hover {
  background: #f1f2f5;
  color: #1c1c1e;
}
.legal__bar nav a.is-active {
  color: #1c1c1e;
  font-weight: 700;
}
.legal__logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #1c1c1e;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.legal__layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 720px);
  justify-content: center;
  gap: 56px;
  padding: 0 24px;
}
.legal__toc {
  position: sticky;
  top: 61px;
  align-self: start;
  max-height: calc(100vh - 61px);
  overflow-y: auto;
  padding: 56px 0 32px;
}
.legal__toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
}
.legal__toc li {
  counter-increment: toc;
}
.legal__toc a {
  display: flex;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  color: #5a5f72;
  font-size: 14px;
  line-height: 1.35;
  text-decoration: none;
}
.legal__toc a::before {
  content: counter(toc) '.';
  min-width: 20px;
  color: #9a9dab;
}
.legal__toc a:hover {
  background: #f1f2f5;
  color: #1c1c1e;
}
.legal__toc-title {
  margin: 0 0 8px 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9a9dab;
}
.legal__doc {
  min-width: 0;
  padding: 56px 0 96px;
}
.legal__doc h1,
.legal__doc h2 {
  color: #1c1c1e;
}
.legal__doc h1 {
  font-size: 40px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.legal__doc h2 {
  margin: 40px 0 12px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}
.legal__doc h2 a {
  color: inherit;
  text-decoration: none;
}
.legal__section {
  scroll-margin-top: 76px;
}
.legal__summary {
  margin-top: 32px;
  padding: 20px 24px;
  border-radius: 12px;
  background: #f4f5fb;
  font-size: 15px;
  line-height: 1.6;
  color: #33363f;
}
.legal__summary h2 {
  margin: 0 0 8px;
  font-size: 16px;
}
.legal__summary ul {
  margin: 0;
  padding-left: 20px;
}
.legal__summary li + li {
  margin-top: 4px;
}
.legal__summary p {
  margin: 12px 0 0;
  font-size: 13px;
  color: #6c7173;
}
.legal__table {
  margin: 14px 0;
  overflow-x: auto;
  border: 1px solid #e3e4ea;
  border-radius: 10px;
}
.legal__table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.5;
}
.legal__table th,
.legal__table td {
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
}
.legal__table th {
  background: #f7f7f9;
  color: #1c1c1e;
  font-weight: 700;
}
.legal__table tr + tr td,
.legal__table tbody tr:first-child td {
  border-top: 1px solid #e3e4ea;
}
.legal__todo {
  padding: 0 3px;
  border-radius: 3px;
  background: #fff1a8;
  color: #6b4e00;
}
.legal__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 64px;
  padding-top: 20px;
  border-top: 1px solid #e3e4ea;
  font-size: 14px;
  color: #6c7173;
}
.legal__foot a {
  color: inherit;
}
.legal__updated {
  margin-top: 12px;
  font-size: 14px;
  color: #6c7173;
}
.legal__intro {
  margin-top: 24px;
  font-size: 18px;
  line-height: 1.55;
}
.legal__body {
  font-size: 16px;
  line-height: 1.65;
  color: #33363f;
}
.legal__body p {
  margin: 0 0 12px;
}
.legal__body ul {
  margin: 0 0 12px;
  padding-left: 22px;
}
.legal__body li + li {
  margin-top: 6px;
}
.legal__body b {
  color: #1c1c1e;
}
.legal__body a {
  color: #4262ff;
}
@media (max-width: 900px) {
  .legal__layout {
    display: block;
  }
  .legal__toc {
    display: none;
  }
  .legal__doc {
    max-width: 720px;
    margin: 0 auto;
  }
}
@media (max-width: 480px) {
  .legal__layout {
    padding: 0 16px;
  }
  .legal__doc {
    padding: 36px 0 64px;
  }
  .legal__doc h1 {
    font-size: 30px;
  }
  .legal__bar {
    padding: 10px 16px;
  }
  .legal__bar nav a {
    padding: 8px;
    font-size: 14px;
    white-space: nowrap;
  }
  .legal__logo {
    font-size: 18px;
  }
  .legal__logo span {
    display: none;
  }
}
/* ==================================================================
   ADMIN SIGN-IN WINDOW (/admin-login, opened by the admin site)
   ================================================================== */
.admin-signin {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  overflow-y: auto;
  padding: 16px;
  background: #fafafc;
}
.admin-signin .signup-card {
  width: 100%;
  max-width: 420px;
  text-align: center;
}
.admin-signin .signup-google {
  margin-top: 8px;
}
.admin-signin__mark {
  margin-bottom: 8px;
  color: #4262ff;
}
/* "Back to canvas": above the title, like the "Use a different email" link */
.signup-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: -24px 0 18px -8px;
  padding: 6px 8px;
  border-radius: 8px;
  color: #5a5f72;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  transition: background-color 0.15s ease-in-out;
}
.signup-back:hover {
  background: #f1f1f1;
}
.signup-back:focus-visible {
  outline: 2px solid #4262ff;
  outline-offset: 1px;
}
.input-icon {
  position: relative;
}
.input-icon svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-2);
}
.input-icon .input {
  padding-left: 44px;
}
/* ==================================================================
   GUEST BANNER ON THE BOARD ("23h LEFT TO SAVE YOUR BOARD")
   ================================================================== */
.guest-banner {
  position: absolute;
  z-index: 21;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  height: 47px;
  padding: 0 7px 0 19px;
  font-size: 13px;
  white-space: nowrap;
  background: var(--surface);
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow-panel);
}
.guest-banner .btn--sm {
  height: 33px;
  padding: 0 11px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
}
.guest-banner svg {
  color: var(--text);
}
/* ==================================================================
   RESPONSIVE
   ================================================================== */
@media (max-width: 960px) {
  .welcome-board__notice {
    display: none;
  }
  .guest-banner {
    top: 70px;
  }
}
@media (max-width: 720px) {
  .welcome-modal {
    padding: 32px 20px 24px;
    border-radius: 20px;
  }
  .welcome-modal h1 {
    font-size: 32px;
  }
  .welcome-modal--narrow h1 {
    font-size: 30px;
  }
  .welcome-modal__options {
    grid-template-columns: 1fr;
  }
  .signup-card {
    padding: 28px 20px;
  }
  .signup-card h1 {
    font-size: 32px;
  }
  .guest-banner span {
    display: none;
  }
}
/* ==================================================================
   STYLES · WELCOME STEPS (A NEW ACCOUNT — MIRO'S ONBOARDING CARD)
   ================================================================== */
/* ==================================================================
   BACKDROP & CARD
   ================================================================== */
.ob-backdrop {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(28, 28, 30, 0.42);
  backdrop-filter: blur(3px);
  animation: fade-in 0.2s;
}
.ob-card {
  position: relative;
  width: min(566px, 100%);
  height: min(640px, calc(100vh - 32px));
  border-radius: 16px;
  background: #fff;
  color: #1c1c1e;
  box-shadow: 0 24px 70px rgba(5, 0, 56, 0.22);
  animation: ob-in 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes ob-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
}
.ob-form {
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* ---- header: progress line + title ---- */
.ob-head {
  flex: none;
  padding: 52px 56px 18px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s;
}
.ob-head.is-scrolled {
  border-bottom-color: #e6e7ec;
}
.ob-head h1 {
  margin: 36px 0 0;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #1c1c1e;
}
.ob-progress {
  position: relative;
  height: 2px;
}
.ob-progress::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0.5px;
  height: 1px;
  background: #b9bbc3;
}
.ob-progress span {
  position: absolute;
  left: 0;
  top: 0;
  height: 2px;
  background: #1c1c1e;
  transition: width 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ob-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 18px 0 0 -8px;
  padding: 4px 8px;
  border-radius: 6px;
  color: #656b81;
  font-size: 15px;
}
.ob-back:hover {
  background: #f1f2f5;
  color: #1c1c1e;
}
.ob-back + h1 {
  margin-top: 10px;
}
/* ---- body: the questions (scrolls under the header) ---- */
.ob-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 56px 24px;
}
.ob-note {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: #656b81;
}
.ob-reveal {
  animation: ob-reveal 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ob-reveal + .ob-reveal {
  margin-top: 32px;
}
@keyframes ob-reveal {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
/* ==================================================================
   FIELDS (FLOATING LABEL ON THE BORDER)
   ================================================================== */
.ob-field {
  position: relative;
}
.ob-field__label {
  position: absolute;
  top: -8px;
  left: 14px;
  z-index: 1;
  padding: 0 5px;
  background: #fff;
  color: #656b81;
  font-size: 13px;
  line-height: 16px;
  pointer-events: none;
}
.ob-field__control {
  width: 100%;
  height: 52px;
  padding: 0 18px;
  border: 1px solid #c7cad5;
  border-radius: 8px;
  background: #fff;
  color: #1c1c1e;
  font: inherit;
  font-size: 17px;
  text-align: left;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ob-field__control::placeholder {
  color: #8f93a3;
}
.ob-field__control:hover {
  border-color: #a5a9b8;
}
.ob-field__control:focus,
.ob-field__control:focus-visible {
  border-color: #4262ff;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #4262ff;
}
/* ---- dropdown ---- */
.ob-select__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
}
.ob-select__button span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ob-select__chevron {
  flex: none;
  color: #1c1c1e;
  transition: transform 0.15s;
}
.ob-select.is-open .ob-select__chevron {
  transform: rotate(180deg);
}
.ob-select.is-open .ob-field__control {
  border-color: #4262ff;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #4262ff;
}
.ob-select__list {
  position: fixed;
  z-index: 1000;
  margin: 0;
  padding: 8px;
  overflow-y: auto;
  list-style: none;
  border-radius: 12px;
  background: #fff;
  color: #1c1c1e;
  box-shadow: 0 10px 34px rgba(5, 0, 56, 0.16), 0 0 0 1px rgba(5, 0, 56, 0.05);
  animation: fade-in 0.12s;
}
.ob-select__list li {
  padding: 9px 14px;
  border-radius: 8px;
  font-size: 16px;
  line-height: 22px;
  cursor: pointer;
  user-select: none;
}
.ob-select__list li.is-active {
  background: #f1f0ec;
}
.ob-select__list li.is-picked {
  font-weight: 600;
}
/* ---- pill choices ---- */
.ob-chips-field__label {
  margin: 0 0 12px;
  font-size: 14px;
  color: #1c1c1e;
}
.ob-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.ob-chips button {
  padding: 6px 12px;
  border: 1px solid #d9dae0;
  border-radius: 999px;
  background: #fff;
  color: #1c1c1e;
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  transition: background-color 0.12s, border-color 0.12s;
}
.ob-chips button:hover {
  border-color: #a5a9b8;
}
.ob-chips button.is-on {
  border-color: #f1f0ec;
  background: #f1f0ec;
  box-shadow: inset 0 0 0 1px #d6d3c9;
}
.ob-chips button:focus-visible {
  outline: 2px solid #4262ff;
  outline-offset: 2px;
}
.ob-chips--grid button {
  padding: 9px 14px;
}
/* ---- "For myself" / "With my team" ---- */
.ob-uses {
  display: grid;
  gap: 12px;
}
.ob-use {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 18px;
  border: 1px solid #d9dae0;
  border-radius: 12px;
  background: #fff;
  color: #1c1c1e;
  text-align: left;
  transition: border-color 0.12s, background-color 0.12s, box-shadow 0.12s;
}
.ob-use:hover {
  border-color: #a5a9b8;
}
.ob-use.is-on {
  border-color: #4262ff;
  background: #f7f8ff;
  box-shadow: inset 0 0 0 1px #4262ff;
}
.ob-use:focus-visible {
  outline: 2px solid #4262ff;
  outline-offset: 2px;
}
.ob-use__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: #f1f0ec;
}
.ob-use__text {
  flex: 1;
  display: grid;
  gap: 2px;
}
.ob-use__text b {
  font-size: 17px;
  font-weight: 700;
}
.ob-use__text span {
  font-size: 14px;
  line-height: 1.4;
  color: #656b81;
}
.ob-use__radio {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1.5px solid #a5a9b8;
  border-radius: 50%;
  color: #fff;
}
.ob-use.is-on .ob-use__radio {
  border-color: #4262ff;
  background: #4262ff;
}
/* ---- Terms ticks ---- */
.ob-tick {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  line-height: 1.4;
  cursor: pointer;
}
.ob-tick + .ob-tick,
.ob-tick-wrap + .ob-tick {
  margin-top: 16px;
}
.ob-tick input {
  position: absolute;
  opacity: 0;
  width: 20px;
  height: 20px;
  margin: 0;
}
.ob-tick a {
  color: #4262ff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ob-tick__box {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1.5px solid #5a5f72;
  border-radius: 4px;
  color: #fff;
  transition: background-color 0.12s, border-color 0.12s;
}
input:checked + .ob-tick__box {
  border-color: #4262ff;
  background: #4262ff;
}
input:focus-visible + .ob-tick__box {
  outline: 2px solid #4262ff;
  outline-offset: 2px;
}
.ob-tick.is-invalid .ob-tick__box {
  border-color: #d42c3a;
  box-shadow: 0 0 0 3px rgba(212, 44, 58, 0.18);
}
.ob-shake {
  animation: ob-shake 0.36s;
}
@keyframes ob-shake {
  20%,
  60% {
    transform: translateX(-5px);
  }
  40%,
  80% {
    transform: translateX(5px);
  }
}
/* ==================================================================
   "REVIEW TERMS TO SIGN UP" (ITS OWN BOX, BEFORE THE WELCOME STEPS)
   ================================================================== */
.ob-terms {
  width: min(520px, 100%);
  padding: 52px 52px 60px;
  border-radius: 20px;
  background: #fff;
  color: #1c1c1e;
  box-shadow: 0 16px 48px rgba(5, 0, 56, 0.18);
  animation: ob-in 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ob-terms h2 {
  margin: 0 0 24px;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.3;
  color: #1c1c1e;
}
.ob-terms__error {
  margin: 14px 0 0;
}
.ob-terms__go {
  width: 100%;
  height: 48px;
  margin-top: 24px;
  border-radius: 8px;
  background: #2e4de6;
  color: #fff;
  font-size: 16px;
  transition: background-color 0.15s;
}
.ob-terms__go:hover:not(:disabled) {
  background: #2a42b7;
}
.ob-terms__go:disabled {
  opacity: 0.7;
  cursor: default;
}
.ob-terms__go:focus-visible {
  outline: 2px solid #4262ff;
  outline-offset: 2px;
}
/* ==================================================================
   INVITE TEAMMATES
   ================================================================== */
.ob-invite__label {
  margin: 0 0 12px;
  font-size: 17px;
}
.ob-invite__link {
  display: flex;
}
.ob-invite__link input {
  flex: 1;
  min-width: 0;
  height: 52px;
  padding: 0 18px;
  border: 1px solid #c7cad5;
  border-right: 0;
  border-radius: 8px 0 0 8px;
  background: #fff;
  color: #8f93a3;
  font: inherit;
  font-size: 16px;
  outline: none;
}
.ob-invite__link button {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 28px;
  border-radius: 0 8px 8px 0;
  background: #1c1c1e;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
}
.ob-invite__link button:hover {
  background: #000;
}
.ob-invite__note {
  margin: 8px 0 0;
  font-size: 13px;
  color: #656b81;
}
.ob-invite__emails {
  width: 100%;
  height: 52px;
  margin-top: 24px;
  padding: 0 18px;
  border: 1px solid #c7cad5;
  border-radius: 8px;
  color: #1c1c1e;
  font: inherit;
  font-size: 16px;
  outline: none;
}
.ob-invite__emails:focus {
  border-color: #4262ff;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #4262ff;
}
.ob-invite__send {
  margin-top: 20px;
}
.ob-invite__results {
  display: grid;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 1.4;
}
.ob-invite__results li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.ob-invite__results li svg {
  flex: none;
  margin-top: 2px;
}
.ob-invite__results .is-ok {
  color: #1f7a4d;
}
.ob-invite__results .is-warn {
  color: #8a5a00;
}
/* ==================================================================
   FOOTER: CONTINUE + STEP DOTS
   ================================================================== */
.ob-foot {
  flex: none;
  padding: 18px 56px 28px;
}
.ob-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 52px;
  border-radius: 8px;
  background: #1c1c1e;
  color: #fff;
  font-size: 18px;
  transition: background-color 0.15s, color 0.15s;
}
.ob-btn:hover:not(:disabled) {
  background: #000;
}
.ob-btn:disabled {
  background: #ecebe8;
  color: #a7a6a2;
  cursor: default;
}
.ob-btn:focus-visible {
  outline: 2px solid #4262ff;
  outline-offset: 2px;
}
.ob-skip {
  display: block;
  width: 100%;
  height: 48px;
  border-radius: 8px;
  color: #1c1c1e;
  font-size: 17px;
  font-weight: 700;
}
.ob-skip:hover {
  background: #f1f2f5;
}
.ob-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 22px;
}
.ob-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e3e4ea;
  transition: background-color 0.2s;
}
.ob-dots span.is-on {
  background: #4262ff;
}
.ob-error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.35;
  color: #d42c3a;
}
.ob-error svg {
  flex: none;
  margin-top: 1px;
}
.ob-error--tick {
  margin: 10px 0 0 30px;
}
/* ==================================================================
   HINT CARD (BESIDE THE NEWEST QUESTION, OUTSIDE THE CARD)
   ================================================================== */
.ob-hint {
  position: absolute;
  left: calc(100% + 12px);
  width: 228px;
  padding: 12px 14px;
  border-radius: 8px;
  background: #fff;
  color: #1c1c1e;
  box-shadow: 0 8px 28px rgba(5, 0, 56, 0.14);
  animation: ob-reveal 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
  transition: top 0.2s;
  pointer-events: none;
}
.ob-hint p {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.4;
}
/* ==================================================================
   RESPONSIVE
   ================================================================== */
@media (max-width: 1100px) {
  .ob-hint {
    display: none;
  }
}
@media (max-width: 600px) {
  .ob-backdrop {
    padding: 8px;
  }
  .ob-card {
    height: calc(100vh - 16px);
  }
  .ob-head {
    padding: 28px 22px 14px;
  }
  .ob-head h1 {
    margin-top: 24px;
    font-size: 26px;
  }
  .ob-body {
    padding: 14px 22px 20px;
  }
  .ob-foot {
    padding: 14px 22px 18px;
  }
  .ob-terms {
    padding: 40px 24px 32px;
  }
  .ob-invite__link button {
    padding: 0 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ob-card,
  .ob-reveal,
  .ob-hint,
  .ob-shake {
    animation: none;
  }
}
/* ==================================================================
   STYLES · BOARD MENU, BOARD DIALOGS & SHARING (MIRO'S, ALL FREE)
   ================================================================== */
/* ==================================================================
   ⋮ BOARD MENU
   ================================================================== */
.board-menu {
  position: fixed;
  z-index: 950;
  width: 262px;
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  padding: 8px;
  border-radius: 16px;
  background: #fff;
  color: #1c1c1e;
  box-shadow: 0 10px 36px rgba(5, 0, 56, 0.16), 0 0 0 1px rgba(5, 0, 56, 0.04);
  animation: bm-in 0.14s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.board-menu button {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  color: #1c1c1e;
  font-size: 15px;
  line-height: 20px;
  text-align: left;
}
.board-menu button svg {
  flex: none;
}
.board-menu button:hover,
.board-menu button:focus-visible {
  background: #f1f2f5;
  outline: none;
}
.board-menu button.is-danger {
  color: #e01e37;
}
.board-menu hr {
  margin: 4px 4px;
  border: 0;
  border-top: 1px solid #e3e4ea;
}
@keyframes bm-in {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
}
/* ==================================================================
   DIALOG SHELL
   ================================================================== */
.dlg-backdrop {
  position: fixed;
  inset: 0;
  z-index: 960;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(28, 28, 30, 0.42);
  animation: fade-in 0.15s;
}
.dlg {
  position: relative;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 40px 40px 36px;
  border-radius: 20px;
  background: #fff;
  color: #1c1c1e;
  box-shadow: 0 24px 70px rgba(5, 0, 56, 0.24);
  animation: bm-dlg-in 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.dlg__close {
  position: absolute;
  top: 22px;
  right: 22px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  color: #1c1c1e;
}
.dlg__close:hover {
  background: #f1f2f5;
}
.dlg__title {
  margin: 0 48px 22px 0;
  font-size: 26px;
  font-weight: 400;
  line-height: 1.25;
  color: #1c1c1e;
}
.dlg__label {
  display: block;
  margin-bottom: 8px;
  font-size: 15px;
  color: #1c1c1e;
}
.dlg__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
}
.dlg__input {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid #c7cad5;
  border-radius: 10px;
  background: #fff;
  color: #1c1c1e;
  font: inherit;
  font-size: 17px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.dlg__input:focus {
  border-color: #4262ff;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #4262ff;
}
.dlg__input--inline {
  height: 38px;
  font-size: 18px;
  font-weight: 700;
}
.dlg__input-icon {
  position: relative;
}
.dlg__input-icon svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #656b81;
  pointer-events: none;
}
.dlg__input-icon::after {
  content: '';
  position: absolute;
  left: 46px;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: #e3e4ea;
}
.dlg__input-icon .dlg__input {
  padding-left: 58px;
}
.dlg__info {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid #c9d2ff;
  border-radius: 10px;
  background: #f1f4ff;
  color: #3a3d4a;
  font-size: 15px;
  line-height: 1.45;
}
.dlg__info svg {
  flex: none;
  margin-top: 2px;
  color: #4262ff;
}
.dlg__info p {
  margin: 0;
}
.dlg__link {
  padding: 0;
  color: #4262ff;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.dlg__buttons {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
}
.dlg__btn {
  height: 44px;
  padding: 0 18px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  transition: background-color 0.15s, opacity 0.15s;
}
.dlg__btn:disabled {
  opacity: 0.55;
  cursor: default;
}
.dlg__btn--dark {
  background: #2b2a27;
  color: #fff;
}
.dlg__btn--dark:hover:not(:disabled) {
  background: #000;
}
.dlg__btn--danger {
  background: #e01e37;
  color: #fff;
}
.dlg__btn--danger:hover:not(:disabled) {
  background: #b8142b;
}
.dlg__btn--plain {
  color: #1c1c1e;
}
.dlg__btn--plain:hover {
  background: #f1f2f5;
}
.dlg__btn--sm {
  height: 38px;
  padding: 0 14px;
  font-size: 15px;
}
@keyframes bm-dlg-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
}
/* ==================================================================
   BOARD DETAILS
   ================================================================== */
.details-dlg__list {
  display: grid;
  margin: 0;
}
.details-dlg__list dt {
  margin-top: 16px;
  color: #656b81;
  font-size: 14px;
}
.details-dlg__list dt:first-child {
  margin-top: 0;
}
.details-dlg__list dd {
  margin: 4px 0 0;
  font-size: 17px;
}
.details-dlg__name {
  display: flex;
  align-items: center;
  gap: 10px;
}
.details-dlg__name b {
  font-size: 20px;
}
.details-dlg__edit {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  color: #1c1c1e;
}
.details-dlg__edit:hover {
  background: #f1f2f5;
}
.details-dlg__muted {
  font-size: 14px;
  color: #656b81;
}
/* ==================================================================
   SHARE BOARD
   ================================================================== */
.share-dlg {
  padding-top: 18px;
}
.share-dlg .dlg__close {
  top: 12px;
}
.share-dlg__tabs {
  display: flex;
  gap: 24px;
  margin: 0 -40px 22px;
  padding: 0 40px;
  border-bottom: 1px solid #e3e4ea;
}
.share-dlg__tabs span {
  padding: 10px 0 12px;
  font-size: 16px;
  font-weight: 700;
}
.share-dlg__tabs span.is-on {
  box-shadow: inset 0 -2px 0 #4262ff;
}
.share-dlg__invite,
.share-dlg__link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 6px 6px 6px 14px;
  border: 1px solid #d4d6de;
  border-radius: 12px;
}
.share-dlg__invite > svg,
.share-dlg__link > svg {
  flex: none;
  color: #656b81;
}
.share-dlg__invite input,
.share-dlg__link input {
  flex: 1;
  min-width: 0;
  height: 38px;
  border: 0;
  background: transparent;
  color: #1c1c1e;
  font: inherit;
  font-size: 16px;
  outline: none;
}
.share-dlg__invite:focus-within {
  border-color: #4262ff;
  box-shadow: 0 0 0 1px #4262ff;
}
.share-dlg__link {
  margin-top: 10px;
  border-color: transparent;
  background: #f1f2f0;
}
.share-dlg__link input {
  color: #656b81;
}
.share-dlg__section {
  margin: 26px 0 8px;
  color: #656b81;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.share-dlg__people {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.share-dlg__people li {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 4px 8px;
  margin: 0 -8px;
  border-radius: 10px;
}
.share-dlg__anyone {
  background: transparent;
}
.share-dlg__anyone:hover {
  background: #f5f6fb;
}
.share-dlg__globe {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: #1c1c1e;
}
.share-dlg__who {
  flex: 1;
  min-width: 0;
  display: grid;
}
.share-dlg__who b {
  overflow: hidden;
  font-size: 15px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.share-dlg__who b span {
  color: #656b81;
  font-weight: 400;
}
.share-dlg__who small {
  overflow: hidden;
  color: #656b81;
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.share-dlg__loading {
  color: #656b81;
}
/* ==================================================================
   CHOICE MENU ("NO ACCESS ⌄")
   ================================================================== */
.choice-menu {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #1c1c1e;
  font-size: 15px;
  white-space: nowrap;
}
.choice-menu:hover,
.choice-menu.is-open {
  background: #ecebe8;
}
.choice-menu.is-open {
  border-color: #4262ff;
}
.choice-menu__static {
  flex: none;
  padding: 0 10px;
  color: #656b81;
  font-size: 15px;
  white-space: nowrap;
}
.choice-menu__list {
  position: fixed;
  z-index: 980;
  min-width: 190px;
  padding: 8px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 34px rgba(5, 0, 56, 0.16), 0 0 0 1px rgba(5, 0, 56, 0.05);
  animation: bm-in 0.12s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.choice-menu__list button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  color: #1c1c1e;
  font-size: 15px;
  text-align: left;
}
.choice-menu__list button span {
  display: grid;
}
.choice-menu__list button small {
  color: #656b81;
  font-size: 12px;
}
.choice-menu__list button:hover,
.choice-menu__list button:focus-visible {
  background: #f1f2f5;
  outline: none;
}
.choice-menu__list button.is-on {
  background: #ecebe8;
}
.choice-menu__list button.is-danger {
  color: #e01e37;
}
/* ==================================================================
   INVITE MEMBERS (THE DASHBOARD HEADER — MIRO'S "INVITE TO WORK")
   ================================================================== */
.invite-dlg__tabs {
  display: flex;
  gap: 28px;
  margin: 0 -40px 24px;
  padding: 0 40px;
  border-bottom: 1px solid #e3e4ea;
}
.invite-dlg__tabs span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0 12px;
  font-size: 16px;
}
.invite-dlg__tabs span.is-on {
  box-shadow: inset 0 -2px 0 #4262ff;
}
.invite-dlg__emails {
  display: flex;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid #c7cad5;
  border-radius: 12px;
  cursor: text;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.invite-dlg__emails svg {
  flex: none;
  margin-top: 2px;
  color: #1c1c1e;
}
.invite-dlg__emails textarea {
  flex: 1;
  min-height: 120px;
  border: 0;
  outline: none;
  resize: vertical;
  background: transparent;
  color: #1c1c1e;
  font: inherit;
  font-size: 16px;
  line-height: 1.45;
}
.invite-dlg__emails:focus-within {
  border-color: #4262ff;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #4262ff;
}
.invite-dlg__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: 22px;
}
.invite-dlg__actions .dlg__btn--dark:disabled {
  background: #ecebe8;
  color: #a7a6a2;
  opacity: 1;
}
.invite-dlg__link-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.invite-dlg__qr {
  width: 44px;
  height: 44px;
  border: 1px solid #2b2a27;
}
.invite-dlg__send {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.invite-dlg__copy {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #2b2a27;
  color: #1c1c1e;
}
.invite-dlg__copy:hover {
  background: #f1f2f5;
}
.invite-dlg__note {
  margin: 22px 0 0;
  padding: 14px 16px;
  border-radius: 10px;
  background: #f1f4ff;
  color: #3a3d4a;
  font-size: 14px;
  line-height: 1.45;
}
/* ==================================================================
   THE BOARD LINK AS A QR CODE (BOTH SHARE BOXES)
   ================================================================== */
.qr-toggle {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  color: #1c1c1e;
  transition: background-color 0.15s, color 0.15s;
}
.qr-toggle:hover {
  background: rgba(5, 0, 56, 0.06);
}
.qr-toggle.is-on {
  background: #e5e9ff;
  color: #4262ff;
}
.lite-share__link .lite-share__qr {
  flex: none;
  display: grid;
  width: 40px;
  height: 40px;
  margin: 0 6px 0 0;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  color: #1c1c1e;
}
.lite-share__link .lite-share__qr:hover {
  background: rgba(5, 0, 56, 0.06);
}
.lite-share__link .lite-share__qr.is-on {
  background: #e5e9ff;
  color: #4262ff;
}
.lite-share__link .lite-share__qr:active {
  transform: none;
}
.qr-panel {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 12px;
  padding: 16px;
  border: 1px solid #e3e4ea;
  border-radius: 14px;
  background: #fff;
  color: #1c1c1e;
  text-align: left;
  animation: bm-in 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.qr-panel__code {
  flex: none;
  width: 160px;
  height: 160px;
  border-radius: 8px;
  image-rendering: pixelated;
}
.qr-panel__side {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.qr-panel__side b {
  font-size: 16px;
}
.qr-panel__side p {
  margin: 0;
  color: #656b81;
  font-size: 14px;
  line-height: 1.45;
}
.qr-panel__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.qr-panel__buttons button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid #c7cad5;
  border-radius: 8px;
  color: #1c1c1e;
  font-size: 14px;
  font-weight: 600;
}
.qr-panel__buttons button:hover:not(:disabled) {
  background: #f1f2f5;
}
.qr-panel__buttons button:disabled {
  opacity: 0.5;
  cursor: default;
}
.qr-panel__fail {
  margin: 0;
  color: #656b81;
}
.lite-share .qr-panel {
  width: min(452px, 100%);
  margin: 14px auto 0;
}
@media (max-width: 520px) {
  .qr-panel {
    flex-direction: column;
    text-align: center;
  }
  .qr-panel__buttons {
    justify-content: center;
  }
}
/* ==================================================================
   "THIS BOARD HAS BEEN DELETED" (AN INSTANT BOARD'S LINK AFTER 24 HOURS)
   ================================================================== */
.expired-board {
  position: fixed;
  inset: 0;
  z-index: 970;
  display: grid;
  place-items: center;
  padding: 16px;
  background: #80838c;
  animation: fade-in 0.2s;
}
.expired-board__card {
  width: min(500px, 100%);
  padding: 36px 36px 30px;
  border-radius: 24px;
  background: #fff;
  color: #050038;
  text-align: center;
  box-shadow: 0 24px 70px rgba(5, 0, 56, 0.24);
  animation: bm-dlg-in 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.expired-board__card h2 {
  margin: 18px 0 12px;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #050038;
}
.expired-board__card p {
  margin: 0 auto 10px;
  max-width: 420px;
  font-size: 16px;
  line-height: 1.5;
}
.expired-board__clock {
  display: block;
  margin: 0 auto;
}
.expired-board__primary {
  display: grid;
  place-items: center;
  width: 100%;
  height: 56px;
  margin-top: 26px;
  border-radius: 6px;
  background: #4262ff;
  color: #fff;
  font-size: 18px;
  text-decoration: none;
  transition: background-color 0.15s;
}
.expired-board__primary:hover {
  background: #2a42b7;
}
.expired-board__primary:disabled {
  opacity: 0.7;
  cursor: default;
}
.expired-board__link {
  margin-top: 22px;
  padding: 2px 4px;
  color: #4262ff;
  font-size: 16px;
  text-decoration: underline;
  text-decoration-color: rgba(66, 98, 255, 0.4);
  text-underline-offset: 4px;
}
.expired-board__link:hover {
  text-decoration-color: currentColor;
}
/* ==================================================================
   RESPONSIVE
   ================================================================== */
@media (max-width: 600px) {
  .expired-board__card {
    padding: 28px 20px 22px;
  }
  .expired-board__card h2 {
    font-size: 24px;
  }
  .dlg {
    padding: 32px 22px 24px;
  }
  .dlg__title {
    font-size: 22px;
  }
  .invite-dlg__tabs {
    margin: 0 -22px 20px;
    padding: 0 22px;
  }
  .share-dlg__tabs {
    margin: 0 -22px 18px;
    padding: 0 22px;
  }
  .share-dlg__invite {
    flex-wrap: wrap;
  }
  .share-dlg__link .dlg__btn {
    padding: 0 10px;
  }
}
/* ==================================================================
   STYLES · EZBOARD LITE BOARD (TEMPORARY BOARD CHROME)
   ================================================================== */
/* ==================================================================
   SHARED PIECES
   ================================================================== */
.lite-chrome {
  display: contents;
}
.lite-panel {
  position: absolute;
  z-index: 20;
  display: flex;
  align-items: center;
  background: var(--surface);
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow-panel);
}
.lite-icon-btn,
.lite-tool {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  color: var(--text);
}
.lite-icon-btn:hover:not(:disabled),
.lite-tool:hover:not(:disabled) {
  background: #f1f1f4;
}
.lite-icon-btn.is-active,
.lite-tool.is-active {
  background: var(--primary-soft);
  color: var(--primary);
}
.lite-icon-btn:disabled,
.lite-tool:disabled,
.lite-icon-btn.is-disabled,
.lite-tool.is-disabled {
  color: #c3c2cf;
  opacity: 1;
  background: none;
  cursor: default;
}
/* tools picked from + stay in the toolbar above it (Miro): a thin rule, then them */
.lite-toolbar__pins {
  width: 24px;
  height: 1px;
  margin: 2px 0;
  background: var(--border);
}
.lite-tool--pinned svg {
  width: 24px;
  height: 24px;
}
.lite-sep {
  width: 1px;
  height: 24px;
  margin: 0 4px;
  background: var(--border);
}
.lite-badge {
  padding: 2px 8px;
  border-radius: 99px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}
.lite-on-pill {
  margin-left: auto;
  padding: 1px 8px;
  border-radius: 99px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
}
/* ==================================================================
   "SAVE YOUR BOARD" ALERT (MIRO-STYLE BAR ACROSS THE TOP)
   The pieces pinned to the top sit var(--lite-top) lower while it shows.
   ================================================================== */
.save-alert {
  position: absolute;
  z-index: 26;
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 6px 8px 6px 16px;
  border-radius: 8px;
  background: #3859ff;
  color: #fff;
  animation: enter-from-top 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}
.save-alert.is-urgent {
  background: #e5484d;
}
.save-alert__icon {
  flex: none;
}
.save-alert p {
  flex: 1;
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
}
.save-alert p a {
  margin-left: 14px;
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.save-alert p a:hover {
  text-decoration-thickness: 2px;
}
.save-alert__close {
  flex: none;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: #fff;
}
.save-alert__close:hover {
  background: rgba(255, 255, 255, 0.16);
}
.lite-top-left,
.lite-top-right,
.shapes-panel,
.side-panel {
  transition: top 0.25s ease;
}
@media (prefers-reduced-motion: reduce) {
  .save-alert {
    animation: none;
  }
}
/* ==================================================================
   TOP-LEFT (WORDMARK · LITE · TIME LEFT + SIGN UP)
   ================================================================== */
.lite-top-left {
  top: calc(10px + var(--lite-top, 0px));
  left: 10px;
  height: 47px;
  gap: 8px;
  padding: 0 7px 0 18px;
}
.lite-top-left__brand {
  display: flex;
  color: inherit;
}
.lite-top-left--member {
  gap: 4px;
  padding: 0 6px;
  max-width: calc(100vw - 20px);
}
.lite-top-left--member .lite-top-left__brand {
  margin: 0 6px 0 2px;
}
.lite-top-left--member .icon-btn {
  width: 36px;
  height: 36px;
}
.lite-top-left--member .status-pill {
  margin-left: 4px;
  white-space: nowrap;
}
@media (max-width: 760px) {
  .lite-top-left--member .lite-top-left__brand {
    display: none;
  }
  .lite-top-left--member .lite-board-name {
    max-width: 120px;
  }
}
@media (max-width: 600px) {
  .lite-top-left--member .lite-board-name,
  .lite-top-left--member [aria-label='Export board'] {
    display: none;
  }
}
.lite-top-left .dropdown {
  max-height: calc(100vh - 72px - var(--lite-top, 0px));
  overflow-y: auto;
}
.lite-board-name {
  min-width: 60px;
  max-width: 260px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  text-overflow: ellipsis;
  outline: none;
  transition: border-color 0.15s, background-color 0.15s;
}
.lite-board-name:hover:not(:read-only) {
  background: #f1f1f4;
}
.lite-board-name:focus:not(:read-only) {
  border-color: var(--primary);
  background: var(--surface);
}
.lite-board-name:read-only {
  cursor: default;
}
.lite-top-left .wordmark {
  font-size: 22px;
}
.lite-top-left .guest-banner {
  position: static;
  transform: none;
  height: auto;
  padding: 0 0 0 4px;
  background: none;
  box-shadow: none;
  border: none;
  border-radius: 0;
  animation: none;
}
/* ==================================================================
   TOP-RIGHT (REACTIONS · YOU · SHARE BOARD)
   ================================================================== */
.lite-top-right {
  position: absolute;
  z-index: 22;
  top: calc(10px + var(--lite-top, 0px));
  right: 10px;
}
.lite-top-right__bar {
  position: static;
  height: 47px;
  gap: 12px;
  padding: 0 7px 0 8px;
}
.lite-top-right .lite-icon-btn {
  width: 44px;
}
.lite-top-right .btn--sm {
  height: 33px;
  padding: 0 11px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
}
/* ==================================================================
   TOP BARS ON SMALLER SCREENS (MIRO)
   The left bar drops the words, then the time, then the sign-up; on
   the right, export / reactions / chat fold into a ⌄⌄ dropdown.
   ================================================================== */
.lite-top-right__wide {
  display: contents;
}
.lite-top-right__more {
  position: relative;
  display: none;
}
.lite-top-right__dot {
  position: absolute;
  top: 6px;
  right: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e5484d;
  box-shadow: 0 0 0 2px var(--surface);
}
.lite-menu--more {
  min-width: 240px;
  max-height: calc(100vh - 80px - var(--lite-top, 0px));
  overflow-y: auto;
}
.lite-menu--more .menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  color: var(--text);
  text-decoration: none;
}
.lite-menu--more hr {
  margin: 4px 6px;
  border: 0;
  border-top: 1px solid var(--border);
}
.lite-menu--more .timer-menu-row {
  cursor: default;
}
.lite-menu--more .timer-menu-row .is-done {
  background: var(--danger-soft);
  color: var(--danger);
}
.lite-more__signup {
  display: none !important;
}
.guest-banner__time {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
@media (max-width: 1100px) {
  .guest-banner__long {
    display: none;
  }
}
@media (max-width: 900px) {
  .lite-top-right__wide {
    display: none;
  }
  .lite-top-right__more {
    display: inline-grid;
  }
  .guest-banner__time {
    display: none;
  }
}
@media (max-width: 760px) {
  .lite-top-left .guest-banner,
  .lite-top-left .lite-sep {
    display: none;
  }
  .lite-more__signup {
    display: flex !important;
  }
}
@media (max-height: 640px) {
  .lite-toolbar__history {
    display: none;
  }
}
@media (max-width: 480px) {
  .lite-top-left .lite-badge {
    display: none;
  }
}
/* ---- chat button: right beside reactions, a badge for unread messages ---- */
.lite-chat-btn {
  position: relative;
  margin-left: -10px;
}
.lite-chat-btn__badge {
  position: absolute;
  top: 3px;
  right: 6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  border-radius: 99px;
  background: #e5484d;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--surface);
}
.lite-chat-btn__lock {
  position: absolute;
  right: 5px;
  bottom: 5px;
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--text-2);
  color: var(--surface);
  box-shadow: 0 0 0 2px var(--surface);
}
/* ---- people on the board: overlapping avatars + count (Miro) ---- */
.lite-facepile {
  display: inline-flex;
  align-items: center;
}
.lite-facepile .avatar {
  box-shadow: 0 0 0 2px var(--surface);
}
.lite-facepile > * + * {
  margin-left: -8px;
}
.lite-facepile__count {
  margin-left: 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.lite-facepile__face {
  display: inline-flex;
  border-radius: 50%;
  transition: opacity 0.25s, filter 0.25s;
}
.lite-facepile__face.is-away {
  opacity: 0.42;
  filter: grayscale(0.6);
}
.lite-facepile__face.is-followed .avatar {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary);
}
.lite-facepile__eye {
  position: absolute;
  left: 50%;
  bottom: -9px;
  translate: -50% 0;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 16px;
  padding: 0 6px;
  border-radius: 99px;
  background: #ffd6d9;
  color: #c4232f;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--surface);
}
.lite-people {
  max-height: 260px;
  overflow-y: auto;
}
.lite-people__search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  margin: 2px 0 6px;
  padding: 0 10px;
  border-radius: 8px;
  background: #f3f3f6;
  color: var(--text-2);
}
.lite-people__search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 14px;
  color: var(--text);
}
.lite-people__none {
  margin: 8px 6px;
  font-size: 13px;
  color: var(--text-2);
}
.lite-people__face {
  position: relative;
  display: inline-flex;
  flex: none;
  border-radius: 50%;
  transition: opacity 0.25s, filter 0.25s;
}
.lite-people__face.is-you .avatar {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px #f4a3a8;
}
.lite-people__face.is-followed .avatar {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--primary);
}
.lite-people__sep {
  margin: 6px 0 4px;
  border: none;
  border-top: 1px solid var(--border);
}
.lite-people__more {
  position: relative;
  margin-left: auto;
}
.lite-people__more .lite-icon-btn {
  width: 30px;
  height: 30px;
}
.lite-people__actions {
  position: fixed;
  z-index: 60;
  width: 210px;
  animation: fade-in 0.12s;
  padding: 6px;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(5, 0, 56, 0.06), 0 8px 24px rgba(5, 0, 56, 0.14);
}
.lite-people__actions .menu-item {
  padding: 10px 12px;
  font-size: 15px;
}
.lite-people__actions .menu-item svg {
  color: var(--text);
}
.lite-people__you {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 99px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 11px;
  font-weight: 700;
  vertical-align: 1px;
}
.lite-avatar-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 36px;
  padding: 0 8px 0 6px;
  border-radius: 99px;
  color: var(--text);
}
.lite-avatar-btn:hover,
.lite-avatar-btn.is-active {
  background: #f1f1f4;
}
/* ==================================================================
   DROPDOWN MENUS (REACTIONS, YOU, HELP, FEEDBACK)
   ================================================================== */
.lite-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  right: 0;
  min-width: 280px;
  padding: 12px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: 0 0 0 1px rgba(5, 0, 56, 0.06), 0 8px 24px rgba(5, 0, 56, 0.14);
  animation: fade-in 0.12s;
}
.lite-menu hr {
  margin: 10px 0 6px;
}
.lite-menu .menu-item {
  padding: 10px 12px;
  font-size: 15px;
}
.lite-menu .menu-item svg {
  color: var(--text);
}
.lite-menu__title {
  margin: 2px 4px 10px;
  font-weight: 700;
}
.lite-menu--reactions {
  right: 70px;
  min-width: 320px;
}
.lite-menu--me {
  min-width: 284px;
}
.lite-menu--help,
.lite-menu--feedback {
  top: auto;
  bottom: calc(100% + 8px);
  min-width: 320px;
}
.lite-menu--feedback {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.lite-menu--feedback .lite-menu__title {
  align-self: stretch;
}
.lite-menu--feedback textarea {
  width: 100%;
  resize: vertical;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid var(--border-strong);
  outline: none;
}
.lite-menu--feedback textarea:focus {
  border-color: var(--primary);
}
.reaction-row {
  display: flex;
  justify-content: space-between;
  gap: 4px;
}
.reaction-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  transition: transform 0.12s;
}
.reaction-btn:hover {
  background: #f1f1f4;
  transform: scale(1.12);
}
.reaction-btn:active {
  transform: scale(0.94);
}
/* ---- one person in the people menu: avatar, name, ⋮ (Miro) ---- */
.lite-person {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 42px;
  padding: 0 4px 0 10px;
  border-radius: 8px;
}
.lite-person:hover,
.lite-person.is-open {
  background: #f3f3f6;
}
.lite-person__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  color: var(--text);
}
.lite-person.is-away .lite-people__face .avatar {
  opacity: 0.55;
}
/* ---- status dot on an avatar: green online, red away ---- */
.lite-status {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--surface);
}
.lite-status.is-online {
  background: #2cc865;
}
.lite-status.is-away {
  background: #e5484d;
}
.lite-menu--me {
  min-width: 262px;
}
.lite-me--you {
  padding: 8px 10px 12px;
}
.lite-me--you b {
  font-size: 16px;
  font-weight: 500;
}
.lite-me .lite-me__role {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 2px;
  color: var(--text);
}
.lite-me__about {
  color: var(--primary);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lite-me__about:hover {
  text-decoration-thickness: 2px;
}
.lite-me__role-help {
  margin: -4px 12px 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.4;
}
.lite-me__share {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 10px 4px 4px;
  padding: 14px 12px 14px 16px;
  border: 1px solid #d8def8;
  border-radius: 10px;
  background: #eef1ff;
}
.lite-me__share p {
  margin: 0;
  color: #1d1d21;
  font-size: 15px;
  line-height: 1.4;
}
.lite-me__share button {
  color: var(--primary);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lite-me__art {
  flex: none;
}
.lite-me {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 12px 10px;
}
.lite-me div {
  display: flex;
  flex-direction: column;
}
.lite-me span {
  font-size: 13px;
  color: var(--text-2);
}
.menu-item--switch {
  cursor: default;
}
.menu-item--switch .switch {
  margin-left: auto;
}
.menu-item--switch:hover {
  background: none;
}
.lite-help-list {
  margin: 0 0 6px;
  padding: 0 4px;
  list-style: none;
}
.lite-help-list li {
  display: flex;
  flex-direction: column;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
}
.lite-help-list span {
  font-size: 13px;
  color: var(--text-2);
}
/* ==================================================================
   LEFT TOOLBAR
   ================================================================== */
.lite-toolbar {
  position: absolute;
  z-index: 20;
  left: 10px;
  top: calc(50% + var(--lite-top, 0px) / 2);
  transform: translateY(-43%);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lite-toolbar__tools,
.lite-toolbar__history {
  position: static;
  flex-direction: column;
  gap: 4px;
  padding: 3px;
}
.lite-toolbar__slot {
  position: relative;
}
.lite-toolbar__sep {
  width: 26px;
  height: 1px;
  margin: 2px 0;
  background: var(--border);
}
.lite-toolbar .lite-tool {
  width: 40px;
  height: 40px;
}
/* ---- second column (drawing, sticky notes, shapes, more) ---- */
.lite-create {
  min-width: 220px;
  gap: 2px;
  padding: 8px;
  border-radius: 14px;
}
.lite-create__item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--text);
  font-size: 15px;
  text-align: left;
  white-space: nowrap;
}
.lite-create__item svg {
  flex: none;
}
.lite-create__item:hover,
.lite-create__item:focus-visible {
  background: var(--surface-2, #f3f3f6);
  outline: none;
}
.lite-create hr {
  align-self: stretch;
  margin: 6px 8px;
  border: 0;
  border-top: 1px solid var(--border);
}
/* ---- the Frame menu (Miro): sizes in a grid, then ready-made frames ---- */
.frame-menu {
  min-width: 250px;
  gap: 2px;
  padding: 10px 8px 8px;
  border-radius: 14px;
}
.frame-menu .lite-create__item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--text);
  font-size: 15px;
  text-align: left;
  white-space: nowrap;
}
.frame-menu .lite-create__item:hover {
  background: var(--surface-2, #f3f3f6);
}
.frame-menu hr {
  align-self: stretch;
  margin: 6px 8px;
  border: 0;
  border-top: 1px solid var(--border);
}
.frame-menu__grid {
  display: grid;
  grid-template-columns: repeat(3, 76px);
  gap: 4px;
}
.frame-menu__preset {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 4px 8px;
  border-radius: 8px;
  color: var(--text);
  font-size: 12px;
}
.frame-menu__preset:hover {
  background: var(--surface-2, #f3f3f6);
}
.frame-menu__preset.is-active {
  background: #e9ebff;
  color: var(--primary);
}
/* ---- + : every tool, searchable (Miro) ---- */
.lite-flyout.tools-panel {
  width: 430px;
  max-width: calc(100vw - 90px);
  max-height: min(760px, calc(100vh - 150px));
  padding: 16px 6px 6px 16px;
  border-radius: 16px;
  align-items: stretch;
}
/* the search runs the panel's whole width, lined up with the list under it (Miro) */
.tools-panel__search {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
  height: 40px;
  margin: 0 16px 6px 0;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text-2);
  cursor: text;
  transition: border-color 0.12s, background 0.12s;
}
.tools-panel__search:hover {
  border-color: var(--border);
}
.tools-panel__search:focus-within {
  border-color: var(--primary);
  background: var(--surface);
}
.tools-panel__search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  box-shadow: none;
}
.tools-panel__search input::placeholder {
  color: var(--text-2);
}
.tools-panel__search button {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: var(--text-2);
}
.tools-panel__search button:hover {
  background: var(--surface-hover);
  color: var(--text);
}
.tools-panel__list {
  flex: 1;
  min-height: 0;
  padding: 0 6px 8px 0;
  overflow-y: auto;
}
.tools-panel__title {
  margin: 18px 0 8px;
  font-size: 16px;
  font-weight: 600;
}
.tools-panel__item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 6px 8px 6px 0;
  border-radius: 10px;
  text-align: left;
}
.tools-panel__item:hover {
  background: var(--surface-2);
}
.tools-panel__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}
.tools-panel__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.tools-panel__text b {
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
}
.tools-panel__text span {
  overflow: hidden;
  color: var(--text-2);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tools-panel__none {
  margin: 16px 4px;
  color: var(--text-2);
  font-size: 14px;
}
.lite-flyout {
  top: 0;
  left: calc(100% + 8px);
  flex-direction: column;
  gap: 4px;
  padding: 3px;
  animation: fade-in 0.12s;
}
.lite-flyout__sep {
  width: 26px;
  height: 1px;
  margin: 4px 0;
  background: var(--border);
}
.lite-flyout--grid {
  display: grid;
  grid-template-columns: repeat(2, 40px);
}
.lite-flyout .lite-tool {
  width: 40px;
  height: 40px;
}
.pen-preset {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: 3px;
  border-radius: 50%;
  border: 1.5px solid #d4d3dd;
  background: #fff;
  transition: border-color 0.12s;
}
.pen-preset:hover {
  border-color: #a9a8b8;
}
.pen-preset.is-active {
  border: 2px solid var(--primary);
}
.pen-preset__dot {
  display: block;
  border-radius: 50%;
}
/* ---- full screen: the one button left, bottom-right where the zoom bar was ---- */
.fullscreen-exit {
  position: absolute;
  z-index: 30;
  right: 12px;
  bottom: 12px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.92);
  color: #050038;
  box-shadow: 0 0 0 1px rgba(5, 0, 56, 0.06), 0 4px 14px rgba(5, 0, 56, 0.14);
  animation: fade-in 0.2s ease-out;
  transition: background-color 0.12s, transform 0.12s;
}
.fullscreen-exit:hover {
  background: #fff;
  transform: scale(1.06);
}
/* ---- full screen: a slim tab on the left edge slides the tools in and out ---- */
.fullscreen-tools {
  display: contents;
}
.fullscreen-tools .lite-toolbar {
  left: 32px;
  animation: fullscreen-tools-in 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes fullscreen-tools-in {
  from {
    opacity: 0;
    left: -50px;
  }
}
.board.is-fullscreen .shapes-panel {
  left: 32px;
}
.board.is-fullscreen .lite-toolbar.is-beside-panel {
  left: 374px;
}
.fullscreen-tab {
  position: absolute;
  z-index: 30;
  left: 0;
  top: 50%;
  display: grid;
  place-items: center;
  width: 22px;
  height: 64px;
  border-radius: 0 10px 10px 0;
  background: rgba(255, 255, 255, 0.92);
  color: #050038;
  box-shadow: 0 0 0 1px rgba(5, 0, 56, 0.06), 0 4px 14px rgba(5, 0, 56, 0.14);
  transform: translateY(-50%);
  animation: fade-in 0.2s ease-out;
  transition: left 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.12s, background-color 0.12s;
}
.fullscreen-tab:hover {
  width: 26px;
  background: #fff;
}
/* ---- the toolbar steps aside for the shapes panel ---- */
.lite-toolbar {
  transition: left 0.2s ease;
}
.lite-toolbar.is-beside-panel {
  left: 352px;
}
/* ---- shapes menu: lines, shapes, divider, more shapes (Miro) ---- */
.lite-flyout--menu {
  width: 240px;
  gap: 2px;
  padding: 8px;
}
.shape-menu__item {
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  padding: 0 12px;
  border-radius: 6px;
  color: #050038;
  font-size: 15px;
  text-align: left;
}
.shape-menu__item:hover {
  background: #f1f1f4;
}
.shape-menu__item.is-active {
  background: #e9ebff;
  color: var(--primary);
}
.shape-menu__icon {
  display: grid;
  place-items: center;
  width: 20px;
}
.shape-menu__key {
  margin-left: auto;
  padding: 0;
  border: none;
  background: none;
  color: #656380;
  font: inherit;
  font-size: 14px;
}
.shape-menu__sep {
  align-self: stretch;
  height: 1px;
  margin: 6px 4px;
  background: var(--border);
}
/* ==================================================================
   SHAPES PANEL ("DIAGRAMMING SHAPES")
   ================================================================== */
.shape-preview {
  display: block;
  overflow: visible;
}
.shape-preview--icon {
  display: grid;
  place-items: center;
  border-radius: 22%;
}
.shapes-panel {
  position: absolute;
  z-index: 21;
  left: 10px;
  top: calc(66px + var(--lite-top, 0px));
  bottom: 10px;
  display: flex;
  flex-direction: column;
  width: 330px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(5, 0, 56, 0.06), 0 6px 24px rgba(5, 0, 56, 0.12);
  animation: shapes-panel-in 0.18s ease-out;
}
.shapes-panel__top {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 16px 12px 10px 20px;
}
.shapes-panel__top h2 {
  flex: 1;
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #050038;
}
.shapes-panel__icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  color: #050038;
}
.shapes-panel__icon:hover {
  background: #f1f1f4;
}
.shapes-panel__search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  margin: 0 16px 8px;
  padding: 0 10px;
  border-radius: 6px;
  background: #f1f1f4;
  color: #656380;
  border: 2px solid transparent;
}
.shapes-panel__search:focus-within {
  border-color: var(--primary);
  background: #fff;
}
.shapes-panel__search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: none;
  font: inherit;
  font-size: 15px;
  color: #050038;
}
.shapes-panel__search button {
  display: grid;
  place-items: center;
  color: #656380;
}
.shapes-panel__notice {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0 16px 8px;
  padding: 8px 10px;
  border-radius: 6px;
  background: #eef0ff;
  color: #050038;
  font-size: 13px;
}
.shapes-panel__notice button {
  margin-left: auto;
  color: #656380;
}
.shapes-panel__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 12px 12px;
  scrollbar-width: thin;
}
.shapes-panel__section {
  padding: 4px 0 8px;
}
.shapes-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 36px;
  padding: 0 6px;
  border-radius: 6px;
  color: #050038;
  font-size: 14px;
  font-weight: 700;
}
.shapes-panel__head:not(.is-static):hover {
  background: #f7f7f9;
}
.shapes-panel__head svg {
  transition: transform 0.15s;
}
.shapes-panel__head svg.is-folded {
  transform: rotate(-90deg);
}
.shapes-panel__colors {
  position: relative;
  margin: 2px 0 6px;
}
.shapes-panel__apply {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 6px;
  border-radius: 6px;
  color: #050038;
  font-size: 15px;
}
.shapes-panel__apply:hover {
  background: #f1f1f4;
}
.shapes-panel__palette {
  position: absolute;
  z-index: 2;
  top: calc(100% + 4px);
  left: 0;
  display: flex;
  flex-direction: column;
  width: 160px;
  padding: 6px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(5, 0, 56, 0.06), 0 8px 24px rgba(5, 0, 56, 0.16);
  animation: pop-in 0.12s ease-out;
}
.shapes-panel__palette button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 38px;
  padding: 0 12px 0 16px;
  border-radius: 6px;
  color: var(--primary);
}
.shapes-panel__palette button:hover {
  background: #f1f1f4;
}
.shapes-panel__dots {
  display: flex;
}
.shapes-panel__dots i {
  display: block;
  width: 22px;
  height: 22px;
  margin-left: -6px;
  border-radius: 50%;
  border: 1.5px solid;
}
.shapes-panel__dots i:first-child {
  margin-left: 0;
}
.shapes-panel__nostyle {
  color: #050038 !important;
  font-size: 14px;
}
.shapes-panel__nostyle svg {
  color: var(--primary);
}
.shapes-panel__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
}
.shapes-panel__tile {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 6px;
  cursor: grab;
}
.shapes-panel__tile:hover {
  background: #f1f1f4;
}
.shapes-panel__tile.is-active {
  background: #e9ebff;
  box-shadow: inset 0 0 0 1.5px var(--primary);
}
.shapes-panel__tile img {
  max-width: 34px;
  max-height: 34px;
  object-fit: contain;
  pointer-events: none;
}
.shapes-panel__custom {
  position: relative;
}
.shapes-panel__custom:hover .shapes-panel__remove {
  opacity: 1;
}
.shapes-panel__remove {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #050038;
  color: #fff;
  opacity: 0;
  transition: opacity 0.12s;
}
.shapes-panel__empty {
  margin: 24px 8px;
  color: #656380;
  font-size: 14px;
  text-align: center;
}
.shapes-panel__foot {
  padding: 12px 16px 16px;
  border-top: 1px solid var(--border);
}
.shapes-panel__manage {
  width: 100%;
  height: 40px;
  border-radius: 6px;
  background: #ebebef;
  color: #050038;
  font-size: 15px;
  font-weight: 600;
}
.shapes-panel__manage:hover {
  background: #e0e0e6;
}
@keyframes shapes-panel-in {
  from {
    opacity: 0;
    transform: translateX(-12px);
  }
}
/* ==================================================================
   MANAGE SHAPES ("ADD SHAPES")
   ================================================================== */
.manage-shapes {
  display: flex;
  flex-direction: column;
  width: min(760px, calc(100vw - 32px));
  height: min(810px, calc(100vh - 32px));
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 20px 60px rgba(5, 0, 56, 0.25);
  overflow: hidden;
  animation: pop-in 0.16s ease-out;
}
.manage-shapes__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 16px 40px;
  border-bottom: 1px solid var(--border);
}
.manage-shapes__top h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #050038;
}
.manage-shapes__close {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  color: #050038;
}
.manage-shapes__close:hover {
  background: #f1f1f4;
}
.manage-shapes__body {
  flex: 1;
  min-height: 0;
  display: flex;
}
.manage-shapes__nav {
  display: flex;
  flex-direction: column;
  width: 250px;
  padding: 24px 16px 0 40px;
}
.manage-shapes__search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 10px;
  border-radius: 6px;
  background: #f1f1f4;
  color: #656380;
  border: 2px solid transparent;
}
.manage-shapes__search:focus-within {
  border-color: var(--primary);
  background: #fff;
}
.manage-shapes__search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: none;
  font: inherit;
  font-size: 14px;
}
.manage-shapes__list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 0 16px;
  scrollbar-width: thin;
}
.manage-shapes__group {
  margin: 14px 0 6px 12px;
  color: #656380;
  font-size: 14px;
}
.manage-shapes__pack {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 6px;
  color: #050038;
  font-size: 15px;
}
.manage-shapes__pack:hover {
  background: #f7f7f9;
}
.manage-shapes__pack.is-selected {
  background: #eef0ff;
}
.manage-shapes__pack.is-plain {
  width: 100%;
  text-align: left;
}
.manage-shapes__pack input {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
  cursor: pointer;
}
.manage-shapes__pack > button {
  flex: 1;
  min-height: 40px;
  text-align: left;
  color: inherit;
  font: inherit;
}
.manage-shapes__upload-icon {
  color: #656380;
}
.manage-shapes__count {
  margin-left: auto;
  color: #656380;
  font-size: 13px;
}
.manage-shapes__none {
  margin: 12px;
  color: #656380;
  font-size: 14px;
}
.manage-shapes__detail {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 24px 40px 32px 24px;
  scrollbar-width: thin;
}
.manage-shapes__detail h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #050038;
}
.manage-shapes__detail h4 {
  margin: 28px 0 14px;
  font-size: 17px;
  font-weight: 700;
  color: #050038;
}
.manage-shapes__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.manage-shapes__hero {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  place-items: center;
  gap: 14px;
  margin-top: 14px;
  padding: 28px 40px;
  border-radius: 10px;
  background: #f3f3f6;
}
.manage-shapes__hero--custom {
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: #656380;
  text-align: center;
}
.manage-shapes__hero--custom p {
  margin: 0;
  max-width: 320px;
  font-size: 14px;
}
.manage-shapes__hero-item {
  display: grid;
  place-items: center;
  height: 44px;
}
.manage-shapes__desc {
  margin: 24px 0 0;
  color: #1c1c1e;
  font-size: 15px;
  line-height: 1.5;
}
.manage-shapes__notice {
  margin: 12px 0 0;
  color: #050038;
  font-size: 13px;
}
.manage-shapes__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.manage-shapes__row h4 {
  margin-bottom: 14px;
}
.manage-shapes__see-all {
  color: #050038;
  font-size: 15px;
  text-decoration: underline;
}
.manage-shapes__templates {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.manage-shapes__template {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  color: #050038;
}
.manage-shapes__template:hover .manage-shapes__template-thumb {
  box-shadow: 0 0 0 2px var(--primary);
}
.manage-shapes__template-thumb {
  display: block;
  height: 130px;
  border-radius: 10px;
  background: #f3f3f6;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(5, 0, 56, 0.08);
  transition: box-shadow 0.12s;
}
.manage-shapes__template-thumb > * {
  width: 100%;
  height: 100%;
}
.manage-shapes__template-by {
  color: #656380;
  font-size: 13px;
}
.manage-shapes__template-name {
  font-size: 17px;
}
.manage-shapes__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 8px;
}
.manage-shapes__tile-wrap {
  position: relative;
}
.manage-shapes__tile-wrap:hover .manage-shapes__delete {
  opacity: 1;
}
.manage-shapes__tile {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  background: #f3f3f6;
  transition: background 0.12s, box-shadow 0.12s;
}
.manage-shapes__tile:hover {
  background: #ebebf0;
  box-shadow: inset 0 0 0 1.5px var(--primary);
}
.manage-shapes__tile img {
  max-width: 56px;
  max-height: 56px;
  object-fit: contain;
}
.manage-shapes__delete {
  position: absolute;
  top: 4px;
  right: 4px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: #fff;
  color: #d63b3b;
  box-shadow: 0 1px 3px rgba(5, 0, 56, 0.2);
  opacity: 0;
  transition: opacity 0.12s;
}
/* ---- board surface panel: grid, whiteboard, blackboard, greenboard ---- */
.lite-flyout--board {
  width: 196px;
  gap: 2px;
  padding: 8px;
}
.board-picker__title {
  align-self: flex-start;
  padding: 4px 8px 6px;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
}
.board-picker__item {
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  padding: 0 8px;
  border-radius: 6px;
  color: #050038;
  font-size: 14px;
  text-align: left;
  transition: background-color 0.12s;
}
.board-picker__item:hover {
  background: #f1f1f4;
}
.board-picker__item.is-active {
  background: var(--primary-soft);
}
.board-picker__check {
  margin-left: auto;
  color: var(--primary);
}
.board-picker__swatch {
  flex: none;
  width: 34px;
  height: 24px;
  border-radius: 3px;
  border: 3px solid #b9bdc6;
  box-shadow: 0 1px 2px rgba(5, 0, 56, 0.2);
}
.board-picker__swatch--grid {
  border: 1px solid #d4d3dd;
  background-color: #fff;
  background-image: linear-gradient(#e3e3ea 1px, transparent 1px), linear-gradient(90deg, #e3e3ea 1px, transparent 1px);
  background-size: 8px 8px;
}
.board-picker__swatch--whiteboard {
  border-color: #c3c7cf;
}
.board-picker__swatch--blackboard,
.board-picker__swatch--greenboard {
  border-color: #9a6a3e;
}
/* ---- sticky note panel: 16 colours, Stack, Templates, Bulk mode (Miro) ---- */
.lite-flyout--sticky {
  width: 136px;
  gap: 8px;
  padding: 12px;
}
.sticky-palette {
  display: grid;
  grid-template-columns: repeat(2, 50px);
  gap: 8px;
}
.sticky-swatch {
  width: 50px;
  height: 50px;
  border-radius: 3px;
  background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 55%);
  box-shadow: inset 0 0 0 1px rgba(5, 0, 56, 0.1), 0 1px 2px rgba(5, 0, 56, 0.12);
  transition: transform 0.12s, box-shadow 0.12s;
}
.sticky-swatch:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px rgba(5, 0, 56, 0.14), 0 3px 8px rgba(5, 0, 56, 0.18);
}
.sticky-swatch.is-active {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--primary);
}
.sticky-action {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  border-radius: 6px;
  background: #eeeef2;
  color: #050038;
  font-size: 15px;
  font-weight: 600;
  transition: background-color 0.12s;
}
.sticky-action:hover {
  background: #e2e2e8;
}
.sticky-action.is-active {
  background: var(--primary-soft);
  color: var(--primary);
}
.sticky-action--plain {
  height: 32px;
  background: none;
  font-size: 14px;
}
.sticky-action--plain:hover {
  background: #f1f1f4;
}
.preset-editor {
  position: absolute;
  left: calc(100% + 11px);
  transform: translateY(-50%);
  width: 196px;
  display: flex;
  flex-direction: column;
  padding: 16px 16px 14px;
  background: var(--surface);
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow-panel);
  box-shadow: 0 0 0 1px rgba(5, 0, 56, 0.06), 0 8px 24px rgba(5, 0, 56, 0.14);
}
.preset-editor__size {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.preset-editor__size--only {
  margin-bottom: 0;
}
.preset-editor__value {
  min-width: 18px;
  font-size: 12px;
  font-weight: 600;
  color: #656380;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.preset-editor__title {
  margin: 0 0 10px;
  font-size: 13px;
  color: #656380;
}
/* ---- thickness slider (Miro style: grey track, blue fill, ringed thumb) ---- */
.thickness-slider {
  --fill: 0%;
  flex: 1;
  height: 20px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.thickness-slider::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--primary) var(--fill), #d4d3dd var(--fill));
}
.thickness-slider::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: #d4d3dd;
}
.thickness-slider::-moz-range-progress {
  height: 4px;
  border-radius: 2px;
  background: var(--primary);
}
.thickness-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -7px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--primary);
  box-shadow: 0 1px 3px rgba(5, 0, 56, 0.2);
  transition: transform 0.12s;
}
.thickness-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--primary);
}
.thickness-slider:active::-webkit-slider-thumb {
  transform: scale(1.12);
}
.thickness-slider:focus-visible {
  outline: none;
}
.thickness-slider:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px var(--primary-soft);
}
/* ---- colour grid ---- */
.pen-colors {
  display: grid;
  grid-template-columns: repeat(4, 32px);
  justify-content: space-between;
  row-gap: 10px;
}
.pen-color {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(5, 0, 56, 0.14);
  cursor: pointer;
  transition: transform 0.12s;
}
.pen-color:hover {
  transform: scale(1.08);
}
.pen-color--custom {
  color: #656380;
  box-shadow: none;
}
.pen-color--custom:hover {
  background: #f1f1f4;
  transform: none;
}
.pen-color--custom input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
/* ==================================================================
   "ADD YOUR FIRST OBJECT"
   ================================================================== */
.first-object {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.first-object__wrap {
  position: relative;
  pointer-events: auto;
}
.first-object__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  width: 172px;
  padding: 37px 14px 32px;
  border-radius: 20px;
  background: rgba(240, 240, 243, 0.92);
  box-shadow: 0 0 0 1px rgba(5, 0, 56, 0.05);
  color: var(--text);
  font-size: 18px;
  line-height: 1.3;
  transition: transform 0.15s, box-shadow 0.15s;
}
.first-object__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(5, 0, 56, 0.08), 0 8px 20px rgba(5, 0, 56, 0.08);
}
.first-object .first-board {
  width: 316px;
  gap: 16px;
  padding: 26px 20px 22px;
}
.first-object .first-board:hover {
  transform: none;
  box-shadow: 0 0 0 1px rgba(5, 0, 56, 0.05);
}
.first-object .first-board__title {
  font-size: 18px;
}
.first-object .first-board__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  width: 100%;
}
.first-object .first-board__option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px 6px 9px;
  border-radius: 12px;
  color: var(--text);
  font-size: 14px;
  transition: background-color 0.12s, transform 0.15s;
}
.first-object .first-board__option:hover {
  background: #fff;
  transform: translateY(-2px);
}
.first-object .first-board__option.is-active {
  background: #fff;
  box-shadow: 0 0 0 2px var(--primary);
}
.first-object .first-board__mini {
  width: 104px;
  height: 64px;
  border-radius: 4px;
  border: 5px solid #b9bdc6;
  box-shadow: 0 2px 6px rgba(5, 0, 56, 0.16);
}
.first-object .first-board__mini--grid {
  border: 1px solid #d4d3dd;
  background-color: #fff;
  background-image: linear-gradient(#e6e6ec 1px, transparent 1px), linear-gradient(90deg, #e6e6ec 1px, transparent 1px);
  background-size: 12px 12px;
}
.first-object .first-board__mini--whiteboard {
  border-color: #b3b8c1;
}
.first-object .first-board__mini--blackboard,
.first-object .first-board__mini--greenboard {
  border-color: #9a6a3e;
}
.first-object__close {
  position: absolute;
  top: -27px;
  right: -28px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #f4f4f6;
  box-shadow: 0 0 0 1px rgba(5, 0, 56, 0.06);
  color: var(--text-2);
}
.first-object__close:hover {
  color: var(--text);
}
/* ==================================================================
   BOTTOM-RIGHT (ZOOM · HELP · FEEDBACK)
   ================================================================== */
.lite-bottom {
  position: absolute;
  z-index: 20;
  right: 10px;
  bottom: 10px;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  transition: right 0.2s ease;
}
.lite-bottom__zoom,
.lite-bottom__flag {
  position: static;
  height: 47px;
  gap: 4px;
  padding: 0 5px;
}
.lite-bottom__flag {
  padding: 0 6px;
}
.lite-zoom-label {
  min-width: 64px;
  height: 36px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.lite-zoom-label:hover {
  background: #f1f1f4;
}
.lite-help-dot {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin: 0 5px;
  border-radius: 50%;
  background: var(--text);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
}
.lite-chrome.has-side-panel .lite-bottom {
  right: 540px;
}
/* ==================================================================
   SIDE PANELS (NOTE, PRIVATE MODE)
   ================================================================== */
.side-panel {
  position: absolute;
  z-index: 25;
  top: calc(72px + var(--lite-top, 0px));
  right: 9px;
  bottom: 9px;
  width: 520px;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(5, 0, 56, 0.06), 0 8px 28px rgba(5, 0, 56, 0.12);
  animation: slide-in 0.18s ease-out;
}
.side-panel--compact {
  bottom: auto;
  width: 374px;
}
.side-panel__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px 16px 12px 26px;
}
.side-panel__header h2 {
  font-size: 19px;
  font-weight: 600;
}
.side-panel__spacer {
  flex: 1;
}
.side-panel__body {
  position: relative;
  flex: 1;
  min-height: 0;
  padding: 0 26px;
}
.side-panel__footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 26px 20px;
  font-size: 13px;
  color: var(--text-2);
}
.side-panel__count {
  margin-left: auto;
  font-weight: 600;
}
.side-panel--chat {
  width: 360px;
}
/* ==================================================================
   BOARD CHAT
   ================================================================== */
.chat__list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 16px 12px 18px;
  overscroll-behavior: contain;
}
.chat__empty {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 24px;
  text-align: center;
  color: var(--text-2);
}
.chat__empty svg {
  color: var(--primary);
  margin-bottom: 4px;
}
.chat__empty b {
  color: var(--text);
  font-size: 15px;
}
.chat__empty span {
  font-size: 13px;
  line-height: 1.5;
}
.chat__day {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
}
.chat__day::before,
.chat__day::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.chat__msg {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  animation: chat-msg-in 0.2s ease-out;
}
.chat__msg.is-grouped {
  margin-top: 3px;
}
.chat__msg.is-mine {
  justify-content: flex-end;
}
.chat__msg.is-mine .chat__body {
  align-items: flex-end;
}
.chat__msg.is-mine .chat__text {
  background: var(--primary);
  color: #fff;
  border-radius: 14px 14px 4px 14px;
}
.chat__msg.is-mine .chat__text a {
  color: #fff;
}
.chat__msg.is-pending .chat__text {
  opacity: 0.55;
}
.chat__avatar {
  flex: none;
  width: 28px;
}
.chat__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  max-width: 82%;
}
.chat__meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  color: var(--text-2);
}
.chat__meta b {
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat__text {
  margin: 0;
  padding: 7px 11px;
  background: var(--surface-2, #f3f3f6);
  border-radius: 4px 14px 14px 14px;
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.chat__text a {
  color: var(--primary);
  text-decoration: underline;
}
.chat__fresh {
  position: absolute;
  left: 50%;
  bottom: 76px;
  translate: -50% 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-radius: 99px;
  background: var(--primary);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(66, 98, 255, 0.35);
  animation: chat-msg-in 0.2s ease-out;
}
.chat__composer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin: 0 14px 14px;
  padding: 6px 6px 6px 12px;
  border: 1px solid var(--border-strong, #d5d5dd);
  border-radius: 12px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.chat__composer:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.chat__composer.is-over {
  border-color: #e5484d;
}
.chat__input {
  flex: 1;
  min-height: 32px;
  max-height: 140px;
  padding: 6px 0;
  border: none;
  outline: none;
  resize: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  line-height: 1.45;
}
.chat__count {
  align-self: center;
  font-size: 11px;
  color: var(--text-2);
}
.is-over .chat__count {
  color: #e5484d;
  font-weight: 600;
}
.chat__send {
  flex: none;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
  transition: opacity 0.15s, background 0.15s;
}
.chat__send:disabled {
  background: var(--border);
  color: var(--text-2);
  cursor: default;
}
/* ---- chat for guests: "sign up to chat" (chat comes with a free account) ---- */
.chat-locked__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 32px 40px;
  text-align: center;
}
.chat-locked__body h3 {
  margin: 6px 0 0;
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}
.chat-locked__body p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-2);
}
.chat-locked__body ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0 6px;
  padding: 0;
  list-style: none;
  text-align: left;
}
.chat-locked__body ul li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text);
}
.chat-locked__body ul li svg {
  flex: none;
  color: var(--primary);
}
.chat-locked__icon {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
}
.chat-locked__cta {
  width: 100%;
  max-width: 260px;
  height: 44px;
  margin-top: 6px;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
}
/* the full board's chat button (signed in) */
.topbar__chat {
  position: relative;
}
.topbar__chat.is-active {
  background: var(--primary-soft);
  color: var(--primary);
}
.topbar__chat .lite-chat-btn__badge {
  top: -2px;
  right: -2px;
}
/* ---- activity: tabs, filters, people, private chats ---- */
.activity__tabs {
  display: flex;
  gap: 6px;
  padding: 2px 24px 10px;
}
.activity__tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2);
}
.activity__tab:hover {
  color: var(--text);
}
.activity__tab.is-active {
  background: #efefec;
  color: var(--text);
}
.activity__count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-grid;
  place-items: center;
  border-radius: 99px;
  background: #e5484d;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.activity__bar {
  display: flex;
  align-items: center;
  padding: 0 16px 6px 24px;
  min-height: 36px;
}
.activity__filter {
  position: relative;
}
.activity__filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 4px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.activity__filter-btn:hover {
  background: #f3f3f6;
}
.activity__menu {
  position: absolute;
  z-index: 5;
  top: calc(100% + 6px);
  left: -12px;
  min-width: 222px;
  padding: 8px;
  background: var(--surface);
  border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(5, 0, 56, 0.06), 0 10px 30px rgba(5, 0, 56, 0.14);
  animation: chat-msg-in 0.14s ease-out;
}
.activity__menu--right {
  left: auto;
  right: 0;
}
.activity__menu hr {
  margin: 6px 6px;
  border: none;
  border-top: 1px solid var(--border);
}
.activity__menu-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 40px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--text);
  text-align: left;
}
.activity__menu-row:hover {
  background: #f5f5f7;
}
.activity__menu-row--switch:hover {
  background: none;
}
.activity__radio {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #8b8b95;
}
.activity__radio.is-on {
  border-color: var(--primary);
  box-shadow: inset 0 0 0 3px var(--surface);
  background: var(--primary);
}
.activity__empty {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 28px;
  text-align: center;
}
.activity__empty h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}
.activity__empty p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-2);
}
.activity__empty .btn {
  margin-top: 6px;
}
.activity__people {
  padding: 0 8px 12px;
}
.activity__person {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  text-align: left;
}
.activity__person:hover {
  background: #f5f5f7;
}
.activity__person.is-unread b,
.activity__person.is-unread .activity__person-sub {
  color: var(--text);
  font-weight: 600;
}
.activity__person-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.activity__person-main b {
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.activity__person-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.activity__person-top time {
  margin-left: auto;
  flex: none;
  font-size: 12px;
  color: var(--text-2);
}
.activity__person-sub {
  font-size: 13px;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.activity__role {
  flex: none;
  padding: 1px 6px;
  border-radius: 4px;
  background: #f1f1f4;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
}
.activity__face {
  position: relative;
  flex: none;
  display: inline-flex;
}
.activity__online {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #2cc865;
  box-shadow: 0 0 0 2px var(--surface);
}
.activity__dm-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px 10px 12px;
  border-bottom: 1px solid var(--border);
}
/* ---- chat details: mentions, replies, comment cards, suggestions ---- */
.chat__mention {
  padding: 0 3px;
  border-radius: 4px;
  background: rgba(66, 98, 255, 0.12);
  color: var(--primary);
  font-weight: 600;
}
.chat__mention.is-me {
  background: #fff1c2;
  color: #8a5a00;
}
.is-mine .chat__mention {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.chat__text.is-for-me {
  box-shadow: inset 3px 0 0 #f5b400;
}
.chat__line {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
}
.is-mine .chat__line {
  flex-direction: row-reverse;
}
.chat__reply-btn {
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: var(--text-2);
  opacity: 0;
  transition: opacity 0.12s;
}
.chat__reply-btn:hover {
  background: #f1f1f4;
  color: var(--text);
}
.chat__msg:hover .chat__reply-btn,
.chat__reply-btn:focus-visible {
  opacity: 1;
}
.chat__quote {
  display: flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 3px 8px;
  border-left: 2px solid var(--primary);
  border-radius: 4px;
  background: #f5f5f8;
  font-size: 12px;
  color: var(--text-2);
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.chat__quote b {
  color: var(--text);
}
.chat__msg.is-flash .chat__text {
  animation: chat-flash 1.2s ease-out;
}
.chat__comment {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  text-align: left;
  background: var(--surface);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.chat__comment:hover {
  border-color: var(--primary);
  box-shadow: 0 2px 10px rgba(66, 98, 255, 0.12);
}
.chat__comment.is-resolved {
  opacity: 0.7;
}
.chat__comment-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-2);
  white-space: nowrap;
}
.chat__comment-head svg {
  flex: none;
  color: var(--primary);
}
.chat__comment-head b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}
.chat__comment-head span {
  flex: none;
}
.chat__comment-head time {
  flex: none;
  margin-left: auto;
}
.chat__comment-text {
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
  overflow-wrap: anywhere;
}
.chat__comment-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
}
.chat__resolved {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #2f9e44;
}
.chat__compose-wrap {
  position: relative;
}
.chat__compose-wrap .chat__composer {
  margin-bottom: 4px;
}
.chat__note {
  margin: 0 0 10px;
  text-align: center;
  font-size: 11px;
  color: var(--text-2);
}
.chat__suggest {
  position: absolute;
  z-index: 4;
  left: 14px;
  right: 14px;
  bottom: calc(100% + 4px);
  padding: 6px;
  background: var(--surface);
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(5, 0, 56, 0.06), 0 10px 26px rgba(5, 0, 56, 0.14);
}
.chat__suggest button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  padding: 0 8px;
  border-radius: 8px;
  font-size: 14px;
  text-align: left;
}
.chat__suggest button.is-active,
.chat__suggest button:hover {
  background: var(--primary-soft);
}
.chat__replying {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 14px 6px;
  padding: 6px 8px 6px 10px;
  border-radius: 8px;
  background: #f5f5f8;
  font-size: 12px;
  color: var(--text-2);
}
.chat__replying span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.chat__replying b {
  color: var(--text);
}
.chat__replying button {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
}
.chat__replying button:hover {
  background: #e9e9ee;
}
/* ---- live message pop-ups above the zoom bar (Google Meet style) ---- */
.msg-toasts {
  position: absolute;
  z-index: 24;
  right: 10px;
  bottom: 67px;
  width: 320px;
  max-width: calc(100% - 20px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.msg-toast {
  position: relative;
  display: flex;
  align-items: flex-start;
  pointer-events: auto;
  background: var(--surface);
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(5, 0, 56, 0.06), 0 10px 28px rgba(5, 0, 56, 0.16);
  animation: msg-toast-in 0.26s cubic-bezier(0.2, 0.9, 0.3, 1.15);
  transition: opacity 0.3s ease, translate 0.3s ease;
}
.msg-toast.is-leaving {
  opacity: 0;
  translate: 0 6px;
}
.msg-toast__open {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 34px 12px 12px;
  border-radius: 12px;
  text-align: left;
}
.msg-toast__open:hover {
  background: #fafafc;
}
.msg-toast__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.msg-toast__head {
  display: flex;
  align-items: center;
  gap: 6px;
}
.msg-toast__head b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.msg-toast__tag {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  border-radius: 99px;
  background: #fff1c2;
  color: #8a5a00;
  font-size: 11px;
  font-weight: 600;
}
.msg-toast__text {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.msg-toast__more {
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
}
.msg-toast__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: var(--text-2);
}
.msg-toast__close:hover {
  background: #f1f1f4;
  color: var(--text);
}
@keyframes msg-toast-in {
  from {
    opacity: 0;
    translate: 0 12px;
    scale: 0.97;
  }
}
@media (prefers-reduced-motion: reduce) {
  .msg-toast {
    animation: none;
  }
}
@keyframes chat-flash {
  0%,
  40% {
    box-shadow: 0 0 0 3px rgba(245, 180, 0, 0.55);
  }
}
@keyframes chat-msg-in {
  from {
    opacity: 0;
    translate: 0 6px;
  }
}
@keyframes slide-in {
  from {
    opacity: 0;
    transform: translateX(16px);
  }
}
/* ==================================================================
   NOTE EDITOR & TEMPLATES
   ================================================================== */
.note-editor {
  width: 100%;
  height: 100%;
  padding: 18px 2px;
  border: none;
  outline: none;
  resize: none;
  background: transparent;
  font-size: 16px;
  line-height: 1.6;
}
.note-templates {
  position: absolute;
  top: 80px;
  left: 56px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.note-templates__title {
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.note-templates__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  color: var(--text-3);
  font-size: 15px;
}
.note-templates__item span {
  text-decoration: underline;
  text-decoration-color: #d6d5df;
  text-underline-offset: 4px;
}
.note-templates__item:hover {
  color: var(--text);
}
.note-templates__item:hover span {
  text-decoration-color: currentColor;
}
/* ==================================================================
   NOTE PANEL (RICH-TEXT DOCUMENT)
   ================================================================== */
.note-panel {
  max-width: calc(100vw - 18px);
}
.note-panel__resize {
  position: absolute;
  left: -6px;
  top: 50%;
  width: 12px;
  height: 56px;
  transform: translateY(-50%);
  cursor: ew-resize;
  background: radial-gradient(circle, #b9b8c8 1.6px, transparent 2px) center / 4px 9px repeat-y;
}
.note-panel__header {
  gap: 4px;
  padding: 18px 18px 10px 22px;
}
.note-panel__header h2 {
  margin-left: 8px;
  font-size: 22px;
  font-weight: 600;
}
.note-panel__format-toggle {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  color: var(--primary);
  background: var(--primary-soft);
}
.note-panel__format-toggle.is-on {
  background: var(--primary);
  color: #fff;
}
.note-panel__menu {
  top: calc(100% + 6px);
  left: 0;
  right: auto;
  min-width: 250px;
}
.note-panel__menu--up {
  top: auto;
  bottom: calc(100% + 6px);
}
.note-panel__body {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 40px 30px 56px;
}
.note-panel__collapse {
  position: absolute;
  left: 22px;
  top: 34px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  color: #e0a800;
  transition: transform 0.15s;
}
.note-panel__collapse:hover {
  background: #fff6d6;
}
.note-panel__collapse.is-collapsed {
  transform: rotate(-90deg);
}
.note-panel__footer {
  padding: 14px 22px 18px;
}
.note-panel__zoom {
  margin-left: auto;
  padding: 4px 6px;
  border-radius: 4px;
  font-weight: 700;
  color: var(--text);
}
.note-panel__zoom:hover {
  background: #f1f1f4;
}
/* ---- formatting bar ---- */
.note-format {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0 18px 4px 22px;
  padding: 4px;
  border-radius: 8px;
  background: #f5f5f8;
}
.note-format__btn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 32px;
  border-radius: 6px;
  color: var(--text);
}
.note-format__btn:hover {
  background: #e9e9ef;
}
.note-format__btn.is-active {
  background: var(--primary-soft);
  color: var(--primary);
}
.note-format__sep {
  width: 1px;
  height: 20px;
  margin: 0 4px;
  background: #dcdbe4;
}
/* ---- document typography ---- */
.note-doc .ProseMirror {
  min-height: 100%;
  outline: none;
  color: #1a1a1f;
  font-family: var(--font);
  font-size: 1em;
  line-height: 1.75;
  word-break: break-word;
  /* lists: 1. → a. → i. like a document */
  /* checklists */
  /* placeholders */
}
.note-doc .ProseMirror > * + * {
  margin-top: 0.15em;
}
.note-doc .ProseMirror h1 {
  margin: 0 0 0.45em;
  font-family: var(--font);
  font-size: 2.55em;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.note-doc .ProseMirror h2 {
  margin: 1.05em 0 0.3em;
  font-family: var(--font);
  font-size: 1.7em;
  font-weight: 500;
  line-height: 1.3;
}
.note-doc .ProseMirror h3 {
  margin: 0.9em 0 0.2em;
  font-family: var(--font);
  font-size: 1.25em;
  font-weight: 600;
}
.note-doc .ProseMirror p {
  margin: 0;
}
.note-doc .ProseMirror h1 + p {
  margin-top: 1em;
}
.note-doc .ProseMirror strong {
  font-weight: 700;
}
.note-doc .ProseMirror ul,
.note-doc .ProseMirror ol {
  margin: 0.2em 0;
  padding-left: 1.6em;
}
.note-doc .ProseMirror ol {
  list-style: decimal;
}
.note-doc .ProseMirror ol ol {
  list-style: lower-alpha;
}
.note-doc .ProseMirror ol ol ol {
  list-style: lower-roman;
}
.note-doc .ProseMirror li::marker {
  color: #1a1a1f;
}
.note-doc .ProseMirror ul[data-type='taskList'] {
  padding-left: 0.2em;
  list-style: none;
}
.note-doc .ProseMirror ul[data-type='taskList'] li {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
}
.note-doc .ProseMirror ul[data-type='taskList'] li > label {
  flex-shrink: 0;
  margin-top: 0.3em;
  user-select: none;
}
.note-doc .ProseMirror ul[data-type='taskList'] li > div {
  flex: 1;
}
.note-doc .ProseMirror ul[data-type='taskList'] li[data-checked='true'] > div {
  color: #8f8da3;
}
.note-doc .ProseMirror ul[data-type='taskList'] input[type='checkbox'] {
  appearance: none;
  display: grid;
  place-items: center;
  width: 1.2em;
  height: 1.2em;
  margin: 0;
  border: 1.5px solid #cfcdd9;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
}
.note-doc .ProseMirror ul[data-type='taskList'] input[type='checkbox']:checked {
  border-color: var(--primary);
  background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3E%3Cpath d=%27M3.5 8.5l3 3 6-6.5%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%272.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E") center / 80% no-repeat;
}
.note-doc .ProseMirror img {
  display: block;
  max-width: 100%;
  margin: 1.2em 0;
  border: 1px solid #d8d7e0;
  border-radius: 2px;
}
.note-doc .ProseMirror img.ProseMirror-selectednode {
  outline: 2px solid var(--primary);
}
.note-doc .ProseMirror .is-empty::before,
.note-doc .ProseMirror p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  height: 0;
  color: #b4b2c3;
  pointer-events: none;
}
/* collapse: keep only the title */
.note-panel__body.is-collapsed .ProseMirror > *:not(:first-child) {
  display: none;
}
/* an empty note: the templates list follows the "Type here…" line, never on top of it */
.note-panel__body.is-empty .note-doc .ProseMirror {
  min-height: 0;
}
.note-panel .note-templates {
  position: static;
  margin-top: 1.6em;
  font-size: 16px;
}
.lite-chrome.has-side-panel .lite-bottom {
  right: calc(var(--side-panel-w, 520px) + 20px);
}
/* ==================================================================
   PRIVATE MODE
   ================================================================== */
.private-mode {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 10px 26px 26px;
}
.private-mode__art {
  display: flex;
  justify-content: center;
  padding: 10px 0 24px;
}
.private-mode p {
  line-height: 1.55;
}
.private-mode__row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.private-mode__row .switch {
  margin-left: auto;
}
.private-mode__help {
  display: inline-flex;
  color: var(--text-2);
}
.private-mode__off {
  background: #ffecec;
  border-color: transparent;
  color: #c92a2a;
}
.private-mode__add {
  border-color: transparent;
  background: #ebebef;
}
/* ==================================================================
   FLOATING REACTIONS (POP · RISE · SWAY · FADE)
   ================================================================== */
.reactions-layer {
  position: absolute;
  inset: 0;
  z-index: 35;
  overflow: hidden;
  pointer-events: none;
}
.floating-reaction {
  position: absolute;
  bottom: 80px;
  transform: translateX(-50%);
  animation: reaction-rise 3.2s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.floating-reaction__sway {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  animation: reaction-sway var(--sway-time, 1.2s) ease-in-out infinite alternate;
}
.floating-reaction__pop {
  animation: reaction-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.floating-reaction__pop .reaction-icon {
  box-shadow: 0 8px 20px rgba(5, 0, 56, 0.18);
}
.floating-reaction__name {
  padding: 2px 9px;
  border-radius: 99px;
  background: rgba(5, 0, 56, 0.78);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  animation: fade-in 0.3s 0.15s both;
}
@keyframes reaction-rise {
  0% {
    opacity: 0;
    transform: translate(-50%, 24px);
  }
  10% {
    opacity: 1;
  }
  72% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, calc(var(--rise-height, 55vh) * -1));
  }
}
@keyframes reaction-sway {
  from {
    transform: translateX(calc(var(--sway-size, 14px) * -1)) rotate(-7deg);
  }
  to {
    transform: translateX(var(--sway-size, 14px)) rotate(7deg);
  }
}
@keyframes reaction-pop {
  0% {
    transform: scale(0.2);
  }
  60% {
    transform: scale(1.22);
  }
  100% {
    transform: scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .floating-reaction,
  .floating-reaction__sway,
  .floating-reaction__pop {
    animation-duration: 0.01s;
  }
}
/* ==================================================================
   REACTION BADGES (CUSTOM ICONS)
   ================================================================== */
.reaction-icon {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(5, 0, 56, 0.05);
}
/* ==================================================================
   TEMPLATE WINDOW (MIRO'S TEMPLATE PICKER)
   ================================================================== */
.tpick-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(5, 0, 56, 0.45);
  animation: fade-in 0.15s;
}
.tpick {
  position: relative;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  width: min(1280px, 100%);
  height: min(880px, 100%);
  overflow: hidden;
  background: var(--surface);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(5, 0, 56, 0.3);
}
.tpick__close {
  position: absolute;
  z-index: 2;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  color: var(--text);
}
.tpick__close:hover {
  background: var(--surface-2, #f3f3f6);
}
/* ---- the use cases ---- */
.tpick-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 28px 18px;
  overflow-y: auto;
  border-right: 1px solid var(--border);
}
.tpick-nav h4 {
  margin: 22px 12px 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.tpick-nav__item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 15px;
  color: var(--text);
  text-align: left;
}
.tpick-nav__item:hover {
  background: var(--surface-2, #f3f3f6);
}
.tpick-nav__item.is-active {
  background: var(--primary-soft, #eef1ff);
  color: var(--primary);
  font-weight: 600;
}
.tpick-nav__footer {
  margin-top: auto;
}
/* ---- search + cards ---- */
.tpick-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.tpick-top {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 24px 70px 12px 40px;
}
.tpick-search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 14px;
  border-radius: 10px;
  background: var(--surface-2, #f3f3f6);
  color: var(--text-2);
}
.tpick-search:focus-within {
  background: var(--surface);
  box-shadow: 0 0 0 2px var(--primary);
}
.tpick-search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-size: 15px;
  color: var(--text);
}
.tpick-oncreate {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  white-space: nowrap;
  color: var(--text);
  cursor: pointer;
}
.tpick-oncreate input {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
}
.tpick-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 40px 40px;
}
.tpick-title {
  margin: 12px 0 18px;
  font-size: 26px;
  font-weight: 600;
}
.tpick-section {
  margin-bottom: 34px;
}
.tpick-section h3 {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 14px;
  font-size: 18px;
  font-weight: 600;
}
.tpick-section h3 button {
  font-size: 14px;
  font-weight: 500;
  color: var(--primary);
}
.tpick-section h3 button:hover {
  text-decoration: underline;
}
.tpick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 26px 22px;
}
.tpick-empty {
  color: var(--text-2);
}
.tpick-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.tpick-card__thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: 10px;
  background: #f1f2f6;
  box-shadow: inset 0 0 0 1px rgba(5, 0, 56, 0.06);
  transition: box-shadow 0.15s;
}
.tpick-card__thumb .template-thumb {
  position: absolute;
  inset: 14px;
  width: calc(100% - 28px);
  height: calc(100% - 28px);
}
.tpick-card__name {
  font-size: 16px;
  line-height: 1.3;
  color: var(--text);
}
.tpick-card__hover {
  position: absolute;
  inset: 0 0 auto;
  aspect-ratio: 3 / 2;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px;
  border-radius: 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}
.tpick-card__hover .btn {
  flex: 1;
  justify-content: center;
  pointer-events: auto;
  box-shadow: 0 2px 8px rgba(5, 0, 56, 0.12);
}
.tpick-card__hover .btn:not(.btn--primary) {
  background: var(--surface);
}
.tpick-card:hover .tpick-card__thumb,
.tpick-card__thumb:focus-visible {
  box-shadow: inset 0 0 0 2px var(--primary);
}
.tpick-card:hover .tpick-card__hover,
.tpick-card:focus-within .tpick-card__hover {
  opacity: 1;
}
/* ---- preview ---- */
.tpick-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 20px;
  font-size: 15px;
  color: var(--primary);
}
.tpick-preview__body {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(240px, 1fr);
  gap: 36px;
  align-items: start;
}
.tpick-preview__thumb {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: 14px;
  background: #f1f2f6;
}
.tpick-preview__thumb .template-thumb {
  position: absolute;
  inset: 24px;
  width: calc(100% - 48px);
  height: calc(100% - 48px);
}
.tpick-preview__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.tpick-preview__info h3 {
  font-size: 28px;
  font-weight: 600;
}
.tpick-preview__info p {
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-2);
}
.tpick-preview__cat {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--primary);
}
.tpick-preview__note {
  font-size: 14px !important;
}
/* phones: the use cases become a row of chips on top */
@media (max-width: 760px) {
  .tpick-backdrop {
    padding: 0;
  }
  .tpick {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    height: 100%;
    border-radius: 0;
  }
  .tpick-nav {
    flex-direction: row;
    gap: 6px;
    padding: 60px 16px 10px;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .tpick-nav h4,
  .tpick-nav__footer {
    display: none;
  }
  .tpick-nav__item {
    flex: none;
    min-height: 36px;
    border: 1px solid var(--border);
    border-radius: 18px;
    white-space: nowrap;
  }
  .tpick-top {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px 16px 8px;
  }
  .tpick-scroll {
    padding: 8px 16px 30px;
  }
  .tpick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 12px;
  }
  .tpick-card__name {
    font-size: 14px;
  }
  .tpick-card__hover {
    display: none;
  }
  .tpick-preview__body {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
}
.template-thumb {
  display: block;
  width: 100%;
  height: auto;
}
.templates-promo {
  margin-top: 24px;
  padding: 18px 16px;
  border-radius: 8px;
  background: #f3f3f6;
}
.templates-promo h3 {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 8px;
}
.templates-promo p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-2);
  margin-bottom: 16px;
}
/* ==================================================================
   COACHMARKS (TUTORIAL TIPS)
   ================================================================== */
.coachmark-layer {
  position: fixed;
  inset: 0;
  z-index: 45;
  pointer-events: none;
  animation: fade-in 0.2s;
}
.coachmark {
  position: absolute;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: max-content;
  max-width: 360px;
  padding: 16px 14px 16px 18px;
  border-radius: 8px;
  background: #2b2a33;
  color: #fff;
  box-shadow: 0 8px 24px rgba(5, 0, 56, 0.24);
  pointer-events: auto;
}
.coachmark p {
  font-size: 14px;
  line-height: 1.45;
}
.coachmark__close {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: -1px;
  border-radius: 4px;
  color: #fff;
}
.coachmark__close:hover {
  background: rgba(255, 255, 255, 0.12);
}
.coachmark__line {
  position: absolute;
  background: #2b2a33;
}
.coachmark__dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2b2a33;
}
/* ==================================================================
   RESPONSIVE
   ================================================================== */
@media (max-width: 960px) {
  .lite-chrome.has-side-panel:not(.has-chat) .lite-bottom {
    right: 9px;
  }
  .side-panel:not(.side-panel--chat) {
    left: 9px;
    width: auto;
  }
}
@media (max-width: 720px) {
  .side-panel--chat {
    left: 8px;
    right: 8px;
    bottom: 8px;
    width: auto;
    top: calc(62px + var(--lite-top, 0px));
    border-radius: 14px;
  }
  .lite-chrome.has-chat .lite-bottom {
    right: 9px;
  }
  .activity__tabs {
    padding: 2px 16px 8px;
  }
  .activity__bar {
    padding: 0 10px 4px 16px;
  }
  .chat__list {
    padding: 4px 10px 10px 12px;
  }
  .chat__body {
    max-width: 88%;
  }
  .msg-toasts {
    left: 10px;
    width: auto;
  }
}
@media (max-width: 720px) {
  .lite-top-left {
    padding-left: 12px;
  }
  .lite-top-left .lite-sep {
    display: none;
  }
  .lite-bottom__zoom .lite-tool:nth-child(4),
  .lite-help-dot {
    display: none;
  }
}
/* ==================================================================
   "MORE" UPSELL CAROUSEL (MIRO STYLE, 899 x 644)
   ================================================================== */
.upsell-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(135, 206, 235, 0.55);
  animation: fade-in 0.2s;
}
.upsell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 453px;
  gap: 24px;
  width: 899px;
  max-width: 100%;
  min-height: 644px;
  padding: 46px 24px 46px 32px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 24px 64px rgba(5, 0, 56, 0.2);
  animation: upsell-pop 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.2);
  /* ---- left column ---- */
  /* ---- right column: illustration ---- */
}
.upsell__close {
  position: absolute;
  top: -15px;
  right: -15px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #1c1b22;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s;
}
.upsell__close:hover {
  transform: scale(1.08);
}
.upsell__text {
  display: flex;
  flex-direction: column;
  padding-top: 10px;
}
.upsell__copy {
  min-height: 168px;
}
.upsell__copy h2 {
  font-family: var(--font-heading);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: #050038;
}
.upsell__plan {
  margin-top: 12px;
  font-size: 18px;
  line-height: 1.3;
  color: #050038;
}
.upsell__cta {
  align-self: center;
  width: 304px;
  height: 60px;
  margin-top: 40px;
  border-radius: 4px;
  background: var(--primary);
  color: #fff;
  font-size: 22px;
  font-weight: 600;
  transition: background-color 0.15s;
}
.upsell__cta:hover {
  background: #3048d9;
}
.upsell__caption {
  margin-top: auto;
  max-width: 260px;
  font-size: 18px;
  line-height: 1.33;
  color: #656380;
}
.upsell__nav {
  display: flex;
  gap: 8px;
  margin-top: 24px;
}
.upsell__nav button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f1f1f4;
  color: #050038;
  transition: background-color 0.15s;
}
.upsell__nav button:hover {
  background: #e2e2e8;
}
.upsell__art {
  position: relative;
  height: 552px;
  overflow: hidden;
  border-radius: 24px;
  transition: background-color 0.35s ease;
}
.upsell__stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.upsell__dots {
  position: absolute;
  bottom: 18px;
  left: 50%;
  display: flex;
  gap: 6px;
  transform: translateX(-50%);
}
.upsell__dots button {
  width: 22px;
  height: 4px;
  border-radius: 2px;
  background: rgba(5, 0, 56, 0.14);
  transition: background-color 0.2s, width 0.2s;
}
.upsell__dots button.is-active {
  width: 34px;
  background: rgba(5, 0, 56, 0.5);
}
@keyframes upsell-pop {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
}
.upsell-slide-in--next {
  animation: upsell-next 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.upsell-slide-in--prev {
  animation: upsell-prev 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes upsell-next {
  from {
    opacity: 0;
    transform: translateX(28px);
  }
}
@keyframes upsell-prev {
  from {
    opacity: 0;
    transform: translateX(-28px);
  }
}
/* ---- illustration pieces ---- */
.upsell-window {
  position: relative;
  width: 244px;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 6px 24px rgba(5, 0, 56, 0.14);
  font-size: 12px;
  color: #050038;
}
.upsell-window--wide {
  width: 300px;
}
.upsell-window__bar {
  padding: 14px 16px;
  border-bottom: 1px solid #eeeef3;
  font-size: 14px;
  font-weight: 700;
}
.upsell-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px 8px;
  padding: 20px 12px 24px;
}
.upsell-grid__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.upsell-chip {
  position: absolute;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 6px;
  background: #fff;
  color: #4262ff;
  box-shadow: 0 6px 20px rgba(5, 0, 56, 0.14);
}
.upsell-chip--top {
  top: -32px;
  left: -92px;
}
.upsell-chip--side {
  right: 36px;
  bottom: 60px;
}
.upsell-anchor {
  position: relative;
  margin-left: 40px;
}
.upsell-list {
  padding: 8px 12px 16px;
}
.upsell-list__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 4px;
}
.upsell-list__row + .upsell-list__row {
  border-top: 1px solid #f1f1f4;
}
.upsell-list__thumb {
  width: 44px;
  height: 30px;
  border-radius: 4px;
}
.upsell-list__name {
  flex: 1;
  font-weight: 600;
}
.upsell-list__meta {
  color: #2f9e44;
  font-weight: 600;
}
.upsell-badge {
  position: absolute;
  right: -34px;
  bottom: -22px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 6px;
  background: #1c1b22;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}
.upsell-board {
  position: relative;
  width: 380px;
  height: 400px;
}
.upsell-note {
  position: absolute;
  display: grid;
  place-items: center;
  width: 104px;
  height: 104px;
  font-family: Kalam, 'Comic Sans MS', 'Segoe Print', cursive;
  font-size: 20px;
  color: #1e1e1e;
  box-shadow: 0 6px 16px rgba(5, 0, 56, 0.14);
}
.upsell-note:nth-child(2) {
  transform: rotate(3deg);
}
.upsell-note:nth-child(3) {
  transform: rotate(-2deg);
}
.upsell-cursor {
  position: absolute;
  display: flex;
  align-items: flex-start;
}
.upsell-cursor b {
  margin: 16px 0 0 -4px;
  padding: 2px 8px;
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
}
.upsell-comment {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 14px 14px 14px 2px;
  background: #fff;
  color: #050038;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(5, 0, 56, 0.14);
}
.upsell-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 14px;
  padding: 34px 0 18px;
  border-radius: 4px;
  background: #f5f6ff;
  color: #4262ff;
}
.upsell-slide span {
  font-size: 18px;
  font-weight: 700;
  color: #050038;
}
.upsell-slide i {
  font-style: normal;
  color: #656380;
}
.upsell-exports {
  position: absolute;
  bottom: 110px;
  display: flex;
  gap: 10px;
}
.upsell-exports span {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: 6px;
  background: #fff;
  color: #050038;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(5, 0, 56, 0.14);
}
@media (max-width: 960px) {
  .upsell {
    grid-template-columns: 1fr;
    width: 520px;
  }
  .upsell__art {
    display: none;
  }
  .upsell__cta {
    margin-bottom: 40px;
  }
}
/* ==================================================================
   BULK MODE DIALOG
   ================================================================== */
.bulk-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(135, 206, 235, 0.55);
  animation: fade-in 0.2s;
}
.bulk {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 440px;
  max-width: 100%;
  padding: 24px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 24px 64px rgba(5, 0, 56, 0.2);
  animation: upsell-pop 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.bulk__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.bulk__head h2 {
  font-size: 20px;
  font-weight: 700;
  color: #050038;
}
.bulk__close {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  color: #656380;
}
.bulk__close:hover {
  background: #f1f1f4;
}
.bulk__lead {
  margin-top: -6px;
  font-size: 14px;
  color: #656380;
}
.bulk__text {
  height: 180px;
  padding: 12px;
  border: 1px solid #d4d3dd;
  border-radius: 8px;
  font: inherit;
  font-size: 15px;
  line-height: 1.5;
  resize: vertical;
  outline: none;
}
.bulk__text:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.bulk__colors {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
}
.bulk__color {
  aspect-ratio: 1;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(5, 0, 56, 0.1);
}
.bulk__color.is-active {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--primary);
}
/* ==================================================================
   ENTRANCE (BOARD LOAD / REFRESH), LIKE MIRO
   The board settles in first; then each bar glides in from its own
   edge with a short stagger: the top bars drop down, the toolbar slides
   in from the left, the zoom bar rises, the welcome card pops up.
   `translate` / `scale` are separate from `transform`, so the bars keep
   their own centring while they move.
   ================================================================== */
@keyframes enter-board {
  from {
    opacity: 0.35;
  }
}
@keyframes enter-from-top {
  from {
    opacity: 0;
    translate: 0 -16px;
  }
}
@keyframes enter-from-left {
  from {
    opacity: 0;
    translate: -22px 0;
  }
}
@keyframes enter-from-bottom {
  from {
    opacity: 0;
    translate: 0 16px;
  }
}
@keyframes enter-pop {
  from {
    opacity: 0;
    scale: 0.94;
    translate: 0 10px;
  }
}
.board.is-ready .board-canvas {
  animation: enter-board 0.5s ease-out both;
}
.lite-top-left {
  animation: enter-from-top 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both;
}
.lite-top-right {
  animation: enter-from-top 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.14s both;
}
.lite-toolbar {
  animation: enter-from-left 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.18s both;
}
.lite-bottom {
  animation: enter-from-bottom 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.26s both;
}
.first-object__wrap {
  animation: enter-pop 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.36s both;
}
@media (prefers-reduced-motion: reduce) {
  .board.is-ready .board-canvas,
  .lite-top-left,
  .lite-top-right,
  .lite-toolbar,
  .lite-bottom,
  .first-object__wrap {
    animation: none;
  }
}
/* ==================================================================
   BOTTOM-RIGHT MENUS & MINIMAP (MIRO)
   ================================================================== */
.lite-bottom__stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.lite-bottom__map {
  position: static;
  display: grid;
  place-items: center;
  padding: 10px 10px 4px;
  border-radius: 10px 10px 0 0;
  animation: fade-in 0.15s;
}
.lite-bottom__map .minimap {
  border-radius: 6px;
  cursor: pointer;
}
.lite-bottom__zoom.has-map {
  border-radius: 0 0 10px 10px;
}
.lite-bottom__anchor {
  position: relative;
  display: inline-flex;
}
.lite-zoom-label.is-active,
.lite-bottom .lite-tool.is-active {
  background: #e9ebff;
  color: var(--primary);
}
.lite-help-dot {
  transition: background-color 0.12s;
}
.lite-help-dot.is-active {
  background: var(--primary);
}
.lite-bottom__menu {
  top: auto;
  right: auto;
  bottom: calc(100% + 16px);
  padding: 6px;
  animation: lite-menu-up 0.16s cubic-bezier(0.22, 1, 0.36, 1);
}
.lite-bottom__menu hr {
  margin: 6px 4px;
}
.lite-bottom__menu--zoom {
  left: -50px;
  width: 250px;
}
.lite-bottom__menu--zoom.is-member {
  left: auto;
  right: -86px;
}
.lite-bottom__menu--help {
  right: -54px;
  width: 220px;
}
.lite-bottom__menu--learn {
  right: -16px;
  width: 250px;
}
.lite-bottom__menu--help.is-member {
  right: -8px;
  width: 236px;
}
.lite-bottom__menu--frames {
  left: -8px;
  width: 232px;
  min-width: 0;
}
/* the zoom menu's Grid list opens beside it (to the left: the menu sits at the right edge) */
.lite-bottom__sub-anchor {
  position: relative;
  display: block;
}
.lite-bottom__submenu {
  position: absolute;
  z-index: 6;
  top: -6px;
  left: auto;
  right: calc(100% + 14px);
  bottom: auto;
  min-width: 0;
  width: 220px;
  padding: 6px;
  background: var(--surface);
  border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(5, 0, 56, 0.06), 0 10px 30px rgba(5, 0, 56, 0.14);
  animation: lite-menu-up 0.16s cubic-bezier(0.22, 1, 0.36, 1);
}
.lite-bottom__submenu hr {
  margin: 6px 4px;
}
.lite-bottom__item--switch {
  cursor: pointer;
}
.lite-bottom__item--switch:hover {
  background: var(--surface-2, #f4f4f7);
}
.lite-bottom__menu-title {
  padding: 8px 12px 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-2);
}
.lite-bottom__frames {
  max-height: 320px;
  overflow-y: auto;
}
.lite-bottom__frame-no {
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  border-radius: 5px;
  background: #eef0f4;
  font-size: 12px;
  font-weight: 600;
}
.lite-bottom__empty {
  padding: 6px 12px 10px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-2);
}
/* ---- what's new ---- */
.whats-new__list {
  display: grid;
  gap: 16px;
  margin: 4px 0 18px;
  padding: 0;
  list-style: none;
}
.whats-new__list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.whats-new__list li b {
  display: block;
  margin-bottom: 2px;
  font-size: 15px;
}
.whats-new__list li span > span {
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-2);
}
.whats-new__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--primary-soft);
  color: var(--primary);
}
.whats-new__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text-2);
}
@keyframes lite-menu-up {
  from {
    opacity: 0;
    translate: 0 6px;
  }
}
.lite-bottom__item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 40px;
  padding: 8px 12px !important;
  border-radius: 6px;
  color: #050038;
  text-align: left;
}
.lite-bottom__icon {
  display: grid;
  place-items: center;
  width: 18px;
  color: #050038;
}
.lite-bottom__label {
  flex: 1;
}
.lite-bottom__hint {
  padding: 0;
  border: none;
  background: none;
  color: #656380;
  font: inherit;
  font-size: 14px;
}
.lite-bottom__level.is-current .lite-bottom__label {
  color: var(--primary);
  font-weight: 600;
}
.lite-bottom__menu--report {
  right: 0;
}
/* ==================================================================
   HELP CENTER (FAQ)
   ================================================================== */
.help-center__backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 32px 24px;
  background: rgba(5, 0, 56, 0.42);
  animation: fade-in 0.18s;
}
.help-center {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(700px, 100%);
  max-height: calc(100vh - 64px);
  border-radius: 44px;
  background: #fff;
  color: #050038;
  box-shadow: 0 30px 80px rgba(5, 0, 56, 0.3);
  animation: help-center-in 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.help-center.is-topic {
  width: min(740px, 100%);
}
.help-center h2 {
  margin: 0;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-align: center;
}
.help-center__close {
  position: absolute;
  z-index: 2;
  top: -16px;
  right: -16px;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #050038;
  color: #fff;
  box-shadow: 0 4px 12px rgba(5, 0, 56, 0.3);
  transition: transform 0.15s;
}
.help-center__close:hover {
  transform: scale(1.06);
}
.help-center__home {
  padding: 44px 100px 52px;
  animation: help-page-in 0.24s ease-out;
}
.help-center__topics {
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}
.help-center__topics li + li {
  border-top: 1px solid #ececf1;
}
.help-center__topics button {
  display: grid;
  grid-template-columns: 64px 1fr 24px;
  align-items: center;
  gap: 18px;
  width: 100%;
  min-height: 80px;
  padding: 10px 0;
  color: inherit;
  text-align: left;
  transition: background-color 0.12s;
}
.help-center__topics button:hover {
  background: #f8f8fb;
}
.help-center__topics button:hover svg:last-child {
  transform: translateX(3px);
}
.help-center__topics button svg:last-child {
  transition: transform 0.15s;
}
.help-center__art {
  position: relative;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  color: #050038;
}
.help-center__art::before {
  content: '';
  position: absolute;
  right: 4px;
  bottom: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--spot);
}
.help-center__art svg {
  position: relative;
}
.help-center__topic {
  font-size: 22px;
  line-height: 1.3;
}
.help-center__page {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 30px 0 30px;
  animation: help-page-in 0.24s ease-out;
}
.help-center__page h2 {
  margin: 0 0 22px;
  padding: 0 90px;
}
.help-center__back {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  align-self: flex-start;
  margin: 0 0 6px 24px;
  padding: 6px 10px;
  border-radius: 8px;
  color: #050038;
  font-size: 20px;
}
.help-center__back:hover {
  background: #f3f3f6;
}
.help-center__faqs {
  flex: 1;
  min-height: 0;
  margin: 0;
  padding: 0 114px 10px;
  overflow-y: auto;
  list-style: none;
  scrollbar-width: thin;
}
.help-center__faqs > li + li {
  border-top: 1px solid #ececf1;
}
.help-center__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 18px 0;
  color: #050038;
  font-size: 17px;
  line-height: 1.45;
  text-align: left;
}
.help-center__q svg {
  flex: none;
  transition: transform 0.2s;
}
.help-center__q:hover span {
  text-decoration: underline;
  text-decoration-color: rgba(5, 0, 56, 0.3);
}
li.is-open .help-center__q svg {
  transform: rotate(180deg);
}
.help-center__a {
  padding: 0 0 20px;
  font-size: 16px;
  line-height: 1.6;
  color: #1c1c2e;
  animation: help-answer-in 0.2s ease-out;
}
.help-center__a p {
  margin: 0 0 8px;
}
.help-center__a ul {
  margin: 0 0 8px;
  padding-left: 22px;
  list-style: circle;
}
.help-center__a ul li {
  padding: 2px 0;
}
@keyframes help-center-in {
  from {
    opacity: 0;
    scale: 0.96;
    translate: 0 12px;
  }
}
@keyframes help-page-in {
  from {
    opacity: 0;
    translate: 12px 0;
  }
}
@keyframes help-answer-in {
  from {
    opacity: 0;
    translate: 0 -4px;
  }
}
@media (max-width: 720px) {
  .help-center__home {
    padding: 36px 28px 40px;
  }
  .help-center__faqs {
    padding: 0 28px 10px;
  }
  .help-center__page h2 {
    padding: 0 28px;
    font-size: 26px;
  }
}
/* ==================================================================
   "PLEASE RATE YOUR EZBOARD EXPERIENCE"
   ================================================================== */
.rate-dialog {
  width: min(520px, 100%);
  padding: 36px 40px 40px;
  border-radius: 18px;
  background: #fff;
  color: #050038;
  box-shadow: 0 24px 70px rgba(5, 0, 56, 0.28);
  animation: help-center-in 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
.rate-dialog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.rate-dialog__head h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 500;
}
.rate-dialog__close {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: -4px -6px 0 0;
  border-radius: 6px;
  color: #050038;
}
.rate-dialog__close:hover {
  background: #f1f1f4;
}
.rate-dialog__faces {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 26px 0 22px;
}
.rate-dialog__faces button {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  color: #050038;
  transition: background-color 0.12s, color 0.12s, transform 0.15s;
}
.rate-dialog__faces button:hover {
  background: #f1f1f4;
  transform: scale(1.08);
}
.rate-dialog__faces button.is-active {
  background: #e9ebff;
  color: var(--primary);
  transform: scale(1.1);
}
.rate-dialog__label {
  display: block;
  margin-bottom: 8px;
  font-size: 16px;
}
.rate-dialog__text {
  display: block;
  width: 100%;
  min-height: 76px;
  padding: 10px 12px;
  border: 1px solid #d4d3dd;
  border-radius: 4px;
  font: inherit;
  font-size: 15px;
  resize: vertical;
  outline: none;
}
.rate-dialog__text:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px #e9ebff;
}
.rate-dialog__foot {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 40px;
}
.rate-dialog__submit {
  height: 40px;
  padding: 0 16px;
  border-radius: 6px;
  background: var(--primary);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
}
.rate-dialog__submit:disabled {
  background: #ebebf0;
  color: #a5a3b8;
  cursor: default;
}
.rate-dialog__cancel {
  color: #050038;
  font-size: 16px;
  font-weight: 700;
}
/* ==================================================================
   KEYBOARD SHORTCUTS SHEET
   ================================================================== */
.shortcuts {
  display: flex;
  flex-direction: column;
  width: min(640px, 100%);
  height: min(920px, calc(100vh - 32px));
  border-radius: 22px;
  background: #fff;
  color: #1c1c1e;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(5, 0, 56, 0.28);
  animation: help-center-in 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
.shortcuts__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px 20px 30px;
  background: #3d5bf5;
  color: #fff;
}
.shortcuts__head h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 500;
}
.shortcuts__head button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  color: #fff;
}
.shortcuts__head button:hover {
  background: rgba(255, 255, 255, 0.15);
}
.shortcuts__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 24px 90px 40px 100px;
  scrollbar-width: thin;
}
.shortcuts__section {
  margin-bottom: 30px;
}
.shortcuts__section h3 {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 700;
}
.shortcuts__note {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.45;
}
.shortcuts__row {
  position: relative;
  display: grid;
  grid-template-columns: 180px 1fr;
  align-items: center;
  gap: 16px;
  min-height: 40px;
  padding: 8px 0;
  border-top: 1px solid #e6e6eb;
  font-size: 15px;
}
.shortcuts__row:last-child {
  border-bottom: 1px solid #e6e6eb;
}
.shortcuts__icon {
  position: absolute;
  left: -58px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 28px;
  color: #1c1c1e;
  transform: translateY(-50%);
}
.shortcuts__keys {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.shortcuts__keys b {
  font-weight: 700;
}
.shortcuts__keys i {
  margin: 0 4px;
  color: #8a8a99;
  font-style: normal;
}
.shortcuts__alt + .shortcuts__alt {
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid #e6e6eb;
}
.shortcuts__label {
  color: #3a3a46;
}
@media (max-width: 640px) {
  .shortcuts__body {
    padding: 20px 20px 30px 60px;
  }
  .shortcuts__row {
    grid-template-columns: 140px 1fr;
  }
}
/* ==================================================================
   "REPORT CONTENT OR ABUSE" (FLAG)
   ================================================================== */
.report-dialog {
  position: relative;
  width: min(520px, 100%);
  padding: 52px 52px 60px;
  border-radius: 14px;
  background: #fff;
  color: #1c1c1e;
  box-shadow: 0 24px 70px rgba(5, 0, 56, 0.28);
  animation: help-center-in 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
.report-dialog h2 {
  margin: 0 0 22px;
  font-size: 24px;
  font-weight: 500;
  color: #050038;
}
.report-dialog p {
  margin: 0 0 24px;
  font-size: 16px;
  line-height: 1.4;
}
.report-dialog__close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  color: #050038;
}
.report-dialog__close:hover {
  background: #f1f1f4;
}
.report-dialog__actions {
  display: flex;
  align-items: center;
  gap: 16px;
}
.report-dialog__report {
  height: 40px;
  padding: 0 15px;
  border-radius: 4px;
  background: #e0182d;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  transition: background-color 0.12s;
}
.report-dialog__report:hover:not(:disabled) {
  background: #c01426;
}
.report-dialog__report:disabled {
  opacity: 0.7;
}
.report-dialog__cancel {
  height: 40px;
  padding: 0 15px;
  border-radius: 4px;
  color: #1c1c1e;
  font-size: 16px;
  font-weight: 700;
}
.report-dialog__cancel:hover {
  background: #f1f1f4;
}
/* ==================================================================
   LITE SHARE ("BETTER WHEN YOU'RE TOGETHER")
   ================================================================== */
.lite-share__backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 32px 24px;
  background: rgba(5, 0, 56, 0.42);
  animation: fade-in 0.18s;
}
.lite-share {
  position: relative;
  width: min(654px, 100%);
  padding: 46px 70px 40px;
  border-radius: 40px;
  background: #fff;
  color: #050038;
  text-align: center;
  box-shadow: 0 30px 80px rgba(5, 0, 56, 0.3);
  animation: help-center-in 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.lite-share h2 {
  margin: 0;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.lite-share__lead {
  margin: 14px 0 26px;
  font-size: 17px;
}
.lite-share__link {
  display: flex;
  align-items: center;
  width: min(452px, 100%);
  height: 48px;
  margin: 0 auto;
  border: 1px solid #d9d9e2;
  border-radius: 999px;
  background: #f7f7fa;
}
.lite-share__link input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 8px 0 24px;
  border: none;
  outline: none;
  background: none;
  color: #656380;
  font: inherit;
  font-size: 16px;
  text-overflow: ellipsis;
}
.lite-share__link button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 48px;
  margin: -1px -1px -1px 0;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  transition: background-color 0.15s, transform 0.15s;
}
.lite-share__link button:hover {
  background: var(--primary-hover);
}
.lite-share__link button:active {
  transform: scale(0.97);
}
.lite-share__link button.is-copied {
  background: #1f9d55;
}
.lite-share__foot {
  margin: 46px auto 0;
  max-width: 440px;
  font-size: 17px;
  line-height: 1.45;
}
.lite-share__foot a {
  color: var(--primary);
  text-decoration: underline;
  text-decoration-color: rgba(66, 98, 255, 0.35);
  text-underline-offset: 4px;
}
.lite-share__foot a:hover {
  text-decoration-color: currentColor;
}
.lite-share__cursor {
  position: absolute;
  left: 32px;
  top: 118px;
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  gap: 0;
  animation: lite-share-drift 5s ease-in-out infinite;
}
.lite-share__cursor svg {
  margin: -10px 0 0 -2px;
}
.lite-share__cursor span {
  padding: 2px 9px;
  border-radius: 10px;
  background: var(--c);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.lite-share__cursor.is-flipped {
  left: auto;
  right: 34px;
  top: 92px;
  flex-direction: row;
  animation-delay: -2.5s;
}
.lite-share__cursor.is-flipped span {
  color: #050038;
}
.lite-share__cursor.is-flipped svg {
  margin: 12px -2px 0 0;
}
.lite-share__squiggle {
  position: absolute;
  right: 0;
  top: 132px;
  pointer-events: none;
}
@keyframes lite-share-drift {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 6px -5px;
  }
}
.lite-share__backdrop {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}
@media (max-width: 600px) {
  .lite-share {
    padding: 40px 20px 32px;
  }
  .lite-share h2 {
    font-size: 26px;
  }
  .lite-share__cursor,
  .lite-share__squiggle {
    display: none;
  }
}
/* ==================================================================
   STYLES · DATA TABLES (MIRO'S TABLE VIEW)
   ================================================================== */
/* ==================================================================
   LAYER OVER THE CANVAS
   Not selected: clicks go to the board (select, drag). Selected: the
   table works. The tab's buttons always work.
   ================================================================== */
.dt-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
}
.dt-layer__item {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  pointer-events: none;
}
.dt-layer__item.is-live .dt-body,
.dt-layer__item .dt-tab__btn {
  pointer-events: auto;
}
/* ==================================================================
   THE TABLE
   ================================================================== */
.dt {
  position: relative;
  color: var(--text);
  font-size: 14px;
}
/* ---- tab ---- */
.dt-tab {
  display: flex;
  align-items: flex-start;
}
.dt-tab__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  margin-top: 4px;
  padding: 0 6px 0 12px;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 1px 4px rgba(5, 0, 56, 0.14);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
}
.dt-tab__btn {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  color: var(--text);
}
.dt-tab__btn:hover {
  background: var(--surface-2);
}
/* ---- body ---- */
.dt-body {
  position: absolute;
  top: 48px;
  right: 0;
  bottom: 0;
  left: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}
.dt-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 12px;
}
.dt-tool {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 7px;
  color: #3a3a45;
}
.dt-tool:hover:not(:disabled) {
  background: var(--surface-2);
}
.dt-tool:disabled {
  cursor: default;
}
.dt-tool.is-on {
  background: var(--primary-soft);
  color: var(--primary);
}
.dt-search {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  margin-left: 8px;
  padding: 0 6px 0 10px;
  border-radius: 8px;
  background: var(--surface-2);
}
.dt-search input {
  width: 200px;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  color: var(--text);
}
.dt-search button {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  color: var(--text-2);
}
/* ---- grid ---- */
.dt-grid {
  display: grid;
}
.dt-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0 12px;
  overflow: hidden;
  border: none;
  background: none;
  color: #3a3a45;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
}
.dt-head span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.dt-head:disabled {
  cursor: default;
  color: #3a3a45;
}
.dt-head--col:hover:not(:disabled) {
  background: var(--surface-2);
}
.dt-head--add {
  justify-content: center;
  color: var(--text);
}
.dt-head--add:hover:not(:disabled) {
  background: var(--surface-2);
}
.dt-cell,
.dt-empty,
.dt-group,
.dt-foot {
  border-top: 1px solid #eceef2;
}
.dt-cell {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 0 8px;
}
/* the row-number column: + (insert) and ⠿ (menu) on hover, as in Miro */
.dt-num {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 0 0 18px;
  color: #8a8d9a;
  font-size: 14px;
}
.dt-row__no {
  min-width: 22px;
}
.dt-row__add,
.dt-row__menu {
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: #3a3a45;
  opacity: 0;
  transition: opacity 0.12s;
}
.dt-row__add {
  position: absolute;
  left: -11px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 4px rgba(5, 0, 56, 0.2);
}
.dt-row__menu {
  width: 26px;
  height: 26px;
}
.dt-row__menu:hover {
  background: var(--surface-2);
}
.dt-row:hover .dt-row__add,
.dt-row:hover .dt-row__menu {
  opacity: 1;
}
.dt-input {
  width: 100%;
  min-width: 0;
  padding: 6px 4px;
  border: none;
  border-radius: 6px;
  outline: none;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 14px;
}
.dt-input:focus:not([readonly]) {
  background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--primary);
}
.dt-input--date {
  color: #3a3a45;
}
.dt-input--date.is-empty:not(:focus) {
  color: transparent;
}
.dt-input--date::-webkit-calendar-picker-indicator {
  opacity: 0;
}
.dt-input--date:focus::-webkit-calendar-picker-indicator,
.dt-cell:hover .dt-input--date:not([readonly])::-webkit-calendar-picker-indicator {
  opacity: 0.6;
}
.dt-cell__text {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
}
.dt-cell__text--number .dt-input {
  text-align: right;
}
.dt-cell__text--title .dt-input {
  font-weight: 500;
}
.dt-person {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #c5c8ff;
  color: #1e1e1e;
  font-size: 11px;
  font-weight: 700;
}
.dt-open {
  flex: none;
  display: grid;
  place-items: center;
  color: var(--primary);
}
.dt-choice {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  height: 100%;
  padding: 0 4px;
  overflow: hidden;
  border: none;
  background: none;
  text-align: left;
}
.dt-choice:disabled {
  cursor: default;
}
.dt-choice__empty {
  color: #b0b3bf;
  opacity: 0;
}
.dt-cell:hover .dt-choice:not(:disabled) .dt-choice__empty {
  opacity: 1;
}
.dt-chip {
  display: inline-flex;
  flex: none;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  border-radius: 6px;
  color: #1e1e1e;
  font-size: 13px;
  white-space: nowrap;
}
.dt-auto {
  width: 100%;
  overflow: hidden;
  padding: 0 4px;
  color: var(--text-2);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.dt-auto--num {
  text-align: right;
}
.dt-group {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  background: var(--surface-2);
}
.dt-group__count {
  color: var(--text-2);
  font-size: 13px;
}
.dt-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8a8d9a;
}
/* ---- footer ---- */
.dt-foot {
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-right: none;
  border-bottom: none;
  border-left: none;
  background: none;
  font: inherit;
  font-size: 14px;
}
.dt-foot.dt-num {
  padding-left: 14px;
}
.dt-foot__add {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  color: var(--text);
}
.dt-foot__add:hover {
  background: var(--surface-2);
}
.dt-foot--calc {
  justify-content: flex-end;
  gap: 6px;
  color: #8a8d9a;
}
.dt-foot--calc:disabled {
  cursor: default;
}
.dt-foot--calc:hover:not(:disabled) {
  background: var(--surface-2);
}
.dt-foot--calc b {
  color: var(--text);
}
.dt-foot__hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
}
.dt-foot--calc:hover:not(:disabled) .dt-foot__hint {
  opacity: 1;
}
/* ==================================================================
   TIMELINE VIEW
   ================================================================== */
.tl {
  position: relative;
  display: flex;
  overflow: hidden;
  border-top: 1px solid #eceef2;
}
/* ---- left: scale, today, fit; the records ---- */
.tl-left {
  flex: none;
  border-right: 1px solid #eceef2;
}
.tl-left__head {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 10px;
  border-bottom: 1px solid #eceef2;
}
.tl-scale {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  margin-right: 6px;
  padding: 0 10px;
  border-radius: 7px;
  color: var(--text);
  font-size: 14px;
}
.tl-scale:hover {
  background: var(--surface-2);
}
.tl-left__count {
  display: flex;
  align-items: center;
  padding: 0 18px;
  color: #3a3a45;
  font-size: 14px;
  font-weight: 600;
}
.tl-left__row {
  display: flex;
  align-items: center;
  padding: 0 10px;
}
.tl-add {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 0 16px;
  color: var(--text-2);
  font-size: 14px;
}
.tl-add:hover {
  color: var(--text);
}
/* ---- the calendar ---- */
.tl-cal {
  position: relative;
  flex: none;
  height: 100%;
  overflow: hidden;
}
.tl-band {
  position: absolute;
  bottom: 0;
  background: #f7f7f8;
}
.tl-head {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  border-bottom: 1px solid #eceef2;
}
.tl-head.is-editable {
  cursor: copy;
}
.tl-head__major,
.tl-head__minor {
  position: absolute;
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
}
.tl-head__major {
  top: 10px;
  color: #3a3a45;
  font-weight: 500;
}
.tl-head__minor {
  top: 36px;
  color: #8a8d9a;
}
.tl-head__today {
  z-index: 1;
  padding: 0 3px;
  border-radius: 4px;
  background: #fefefe;
  color: #1a1a1f;
  font-weight: 600;
}
.tl-head__milestone {
  position: absolute;
  top: 31px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #4f7fdd;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  pointer-events: none;
}
.tl-today,
.tl-milestone {
  position: absolute;
  width: 0;
  pointer-events: none;
}
.tl-today {
  z-index: 2;
  border-left: 1.5px dashed #3a3a45;
}
.tl-today__label {
  position: absolute;
  top: 12px;
  left: -4px;
  padding-left: 12px;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.tl-today__label::before {
  content: '';
  position: absolute;
  top: 5px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3a3a45;
}
.tl-milestone {
  z-index: 2;
  border-left: 1.5px dashed #6b93e8;
}
.tl-milestone__label {
  position: absolute;
  top: 10px;
  left: -6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #6b7eb8;
  font-size: 13px;
  white-space: nowrap;
  pointer-events: auto;
}
.tl-milestone__label svg {
  flex: none;
  color: #4f7fdd;
}
.tl-milestone__label span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.tl-milestone__label:disabled {
  cursor: default;
}
.tl-milestone__label:hover:not(:disabled) {
  text-decoration: underline;
}
.tl-lane {
  position: absolute;
  right: 0;
  left: 0;
}
.tl-bar {
  position: absolute;
  top: 3px;
  bottom: 3px;
  z-index: 1;
  display: flex;
  align-items: center;
  padding: 0 8px;
  overflow: hidden;
  border: 1px solid #d9b93a;
  border-radius: 8px;
  background: #fff3a8;
  color: #1e1e1e;
  font-size: 13px;
  white-space: nowrap;
  user-select: none;
}
.tl-bar span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.tl-bar.is-editable {
  cursor: grab;
}
.tl-bar.is-editable::before,
.tl-bar.is-editable::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 8px;
  cursor: ew-resize;
}
.tl-bar.is-editable::before {
  left: 0;
}
.tl-bar.is-editable::after {
  right: 0;
}
.tl-bar.is-dragging {
  cursor: grabbing;
  box-shadow: 0 4px 14px rgba(5, 0, 56, 0.18);
}
.tl-milestone-form {
  display: grid;
  gap: 8px;
}
.tl-milestone-form .btn {
  justify-self: end;
}
/* ==================================================================
   MENUS (SCREEN-SIZED POPOVERS)
   ================================================================== */
.dt-pop {
  position: fixed;
  z-index: 200;
  max-height: 72vh;
  padding: 8px;
  overflow-y: auto;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 0 0 1px rgba(5, 0, 56, 0.06), 0 10px 30px rgba(5, 0, 56, 0.16);
  color: var(--text);
  font-size: 14px;
  animation: fade-in 0.12s;
}
.dt-pop hr {
  margin: 6px 4px;
  border: none;
  border-top: 1px solid var(--border);
}
.dt-pop__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 36px;
  padding: 6px 10px;
  border-radius: 8px;
  color: var(--text);
  text-align: left;
}
.dt-pop__item:hover {
  background: var(--surface-2);
}
.dt-pop__item.is-active {
  background: var(--primary-soft);
}
.dt-pop__item.is-danger {
  color: #e03131;
}
.dt-pop__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 18px;
  color: #3a3a45;
}
.dt-pop__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px 4px;
  color: var(--text-2);
  font-size: 12px;
}
.dt-pop__title span {
  display: grid;
  place-items: center;
  cursor: help;
}
.dt-pop__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 4px 2px 10px;
}
.dt-pop__row button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  color: #3a3a45;
}
.dt-pop__row button:hover {
  background: var(--surface-2);
}
.dt-pop__row button.is-on {
  background: var(--primary-soft);
  color: var(--primary);
}
.dt-pop__grow {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dt-pop__rename,
.dt-pop__search {
  display: block;
}
.dt-pop__rename {
  padding: 4px 4px 6px;
}
.dt-pop__rename input {
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
.dt-pop__rename input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-soft);
}
.dt-pop__rename label {
  display: block;
  margin: 4px 2px 6px;
  color: var(--text-2);
  font-size: 12px;
}
.dt-pop__rename label small {
  display: block;
}
.dt-pop__search {
  width: calc(100% - 8px);
  height: 34px;
  margin: 2px 4px 6px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
.dt-pop__search:focus {
  outline: none;
  border-color: var(--primary);
}
.dt-pop__scroll {
  max-height: 260px;
  overflow-y: auto;
}
.dt-pop__no {
  color: var(--text-2);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.dt-filter {
  display: grid;
  gap: 8px;
  padding: 4px 6px 6px;
}
.dt-filter select,
.dt-filter input {
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
.dt-filter__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
/* ==================================================================
   FULL SCREEN ("EXPAND")
   ================================================================== */
.dt-modal {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-items: center;
  padding: 24px;
  background: rgba(5, 0, 56, 0.45);
  animation: fade-in 0.15s;
}
.dt-modal__box {
  position: relative;
  width: min(1560px, 100%);
  min-width: 0;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  padding: 18px 20px 20px;
  border-radius: 16px;
  background: var(--surface-2);
  box-shadow: 0 24px 64px rgba(5, 0, 56, 0.3);
}
.dt-modal__scroll {
  max-height: calc(100vh - 110px);
  padding-left: 14px;
  overflow: auto;
}
.dt-modal__close {
  position: absolute;
  z-index: 2;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  color: var(--text);
}
.dt-modal__close:hover {
  background: var(--surface);
}
/* ==================================================================
   STYLES · DOCUMENTS (MIRO'S DOC)
   ================================================================== */
/* ==================================================================
   LAYER OVER THE CANVAS
   Not selected: clicks go to the board (select, drag). Selected: the
   text takes clicks, the margins still drag. The tab always works.
   ================================================================== */
.doc-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
}
.doc-layer__item {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  pointer-events: none;
}
.doc-layer__item.is-live .doc-editor,
.doc-layer__item.is-live .doc-starters,
.doc-layer__item.is-live .doc-gutter,
.doc-layer__item .doc-tab__pill {
  pointer-events: auto;
}
/* ==================================================================
   THE DOCUMENT
   ================================================================== */
.doc {
  position: relative;
  color: #1e1e1e;
  font-family: Inter, system-ui, sans-serif;
}
/* ---- tab ---- */
.doc-tab {
  position: absolute;
  bottom: 100%;
  left: 0;
  display: flex;
  align-items: flex-end;
  height: 44px;
  padding-bottom: 8px;
}
.doc-tab__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 6px 0 10px;
  border-radius: 10px;
  background: #fefefe;
  box-shadow: 0 1px 4px rgba(5, 0, 56, 0.14);
  color: #1e1e1e;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  cursor: default;
}
.doc-tab__name {
  max-width: 240px;
  margin-right: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.doc-tab__btn {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  color: #1e1e1e;
}
.doc-tab__btn:hover {
  background: #f1f2f5;
}
/* ---- page ---- */
.doc-page {
  position: absolute;
  inset: 0;
  border: 1px solid #e1e3ea;
  border-radius: 4px;
  background: #fefefe;
  box-shadow: 0 1px 3px rgba(5, 0, 56, 0.06);
}
.doc-editor {
  min-height: 60px;
}
.doc-editor .ProseMirror {
  outline: none;
  color: #1e1e1e;
  font-size: 14px;
  line-height: 1.6;
  caret-color: #4262ff;
  word-wrap: break-word;
}
.doc-editor .ProseMirror > * + * {
  margin-top: 8px;
}
.doc-editor .ProseMirror h1 {
  margin: 0 0 6px;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.3;
}
.doc-editor .ProseMirror h2 {
  margin: 22px 0 6px;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.35;
}
.doc-editor .ProseMirror h3 {
  margin: 18px 0 4px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
}
.doc-editor .ProseMirror > :first-child {
  margin-top: 0;
}
.doc-editor .ProseMirror p {
  margin: 0;
}
.doc-editor .ProseMirror ul,
.doc-editor .ProseMirror ol {
  margin: 4px 0 0;
  padding-left: 22px;
}
.doc-editor .ProseMirror li + li {
  margin-top: 2px;
}
.doc-editor .ProseMirror ul[data-type='taskList'] {
  padding-left: 2px;
  list-style: none;
}
.doc-editor .ProseMirror ul[data-type='taskList'] li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.doc-editor .ProseMirror ul[data-type='taskList'] li > label {
  flex: none;
  margin-top: 3px;
}
.doc-editor .ProseMirror ul[data-type='taskList'] li > div {
  flex: 1;
}
.doc-editor .ProseMirror ul[data-type='taskList'] li[data-checked='true'] > div {
  color: #8a8d9a;
  text-decoration: line-through;
}
.doc-editor .ProseMirror blockquote {
  margin: 8px 0 0;
  padding-left: 14px;
  border-left: 3px solid #1e1e1e;
}
.doc-editor .ProseMirror pre {
  margin: 8px 0 0;
  padding: 12px 14px;
  border-radius: 6px;
  background: #f4f5f8;
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 13px;
  white-space: pre-wrap;
}
.doc-editor .ProseMirror code {
  padding: 1px 4px;
  border-radius: 4px;
  background: #f4f5f8;
  font-size: 13px;
}
.doc-editor .ProseMirror pre code {
  padding: 0;
  background: none;
}
.doc-editor .ProseMirror hr {
  margin: 16px 0;
  border: none;
  border-top: 1px solid #e1e3ea;
}
.doc-editor .ProseMirror img {
  display: block;
  max-width: 100%;
  border-radius: 6px;
}
.doc-editor .ProseMirror img.ProseMirror-selectednode {
  outline: 2px solid #4262ff;
}
.doc-editor .ProseMirror .is-empty::before {
  content: attr(data-placeholder);
  float: left;
  height: 0;
  color: #8a8d9a;
  pointer-events: none;
}
.doc-editor .ProseMirror h1.is-empty::before {
  color: #656b81;
}
/* ---- starting templates (an empty document) ---- */
.doc-starters {
  margin-top: 26px;
}
.doc-starters__title {
  margin: 0 0 10px;
  color: #656b81;
  font-size: 16px;
  font-weight: 600;
}
.doc-starters__item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 420px;
  height: 46px;
  padding: 0 10px;
  border-radius: 8px;
  color: #656b81;
  font-size: 14px;
  text-align: left;
}
.doc-starters__item:hover:not(:disabled) {
  background: #f1f2f5;
  color: #1e1e1e;
}
.doc-starters__item:disabled {
  cursor: default;
}
/* ---- the handle beside a block ---- */
.doc-gutter {
  position: absolute;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 5px;
  color: #656b81;
}
.doc-gutter:hover {
  background: #f1f2f5;
  color: #1e1e1e;
}
/* ==================================================================
   "/" MENU (SCREEN-SIZED AT ANY ZOOM)
   ================================================================== */
.doc-menu {
  position: fixed;
  z-index: 200;
  width: 250px;
  max-height: 340px;
  padding: 6px;
  overflow-y: auto;
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 0 0 1px rgba(5, 0, 56, 0.06), 0 10px 28px rgba(5, 0, 56, 0.18);
  color: var(--text);
}
.doc-menu__title,
.doc-menu__empty {
  margin: 4px 8px 6px;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 500;
}
.doc-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 36px;
  padding: 0 8px;
  border-radius: 6px;
  font-size: 14px;
  text-align: left;
}
.doc-menu__item:hover,
.doc-menu__item.is-active {
  background: var(--surface-2);
}
.doc-menu__icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
}
/* ==================================================================
   THE TAB'S "⋮" MENU (MIRO)
   ================================================================== */
.doc-omenu {
  position: fixed;
  z-index: 200;
  width: 300px;
  padding: 6px;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 0 0 1px rgba(5, 0, 56, 0.06), 0 12px 32px rgba(5, 0, 56, 0.18);
  color: var(--text);
}
.doc-omenu hr {
  margin: 6px 4px;
  border: none;
  border-top: 1px solid var(--border);
}
.doc-omenu--sub {
  position: absolute;
  top: -6px;
  left: calc(100% + 4px);
  width: 240px;
}
.doc-omenu--sub.is-left {
  right: calc(100% + 4px);
  left: auto;
}
.doc-omenu__wrap {
  position: relative;
}
.doc-omenu__item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 14px;
  text-align: left;
}
.doc-omenu__item:hover:not(:disabled),
.doc-omenu__item.is-open {
  background: var(--surface-2);
}
.doc-omenu__item.is-danger {
  color: #d9480f;
}
.doc-omenu__item.is-info {
  color: var(--text-2);
  cursor: default;
}
.doc-omenu__label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.doc-omenu__hint {
  color: var(--text-2);
  font-size: 13px;
  white-space: nowrap;
}
/* ==================================================================
   FULL SCREEN ("EXPAND")
   ================================================================== */
.doc-modal {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgba(5, 0, 56, 0.45);
}
.doc-modal__close {
  position: absolute;
  top: 18px;
  right: 22px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 2px 8px rgba(5, 0, 56, 0.2);
}
.doc-modal__scroll {
  height: 100%;
  padding: 24px 16px 48px;
  overflow: auto;
}
.doc-modal__page {
  position: relative;
  width: 790px;
  max-width: 100%;
  margin: 0 auto;
  padding-top: 44px;
}
.doc-modal__page .doc {
  max-width: 100%;
}
.doc-modal__page .doc-tab__pill {
  pointer-events: auto;
}
/* ==================================================================
   STYLES · SLIDES (MIRO'S SLIDES CONTAINER, PICKER AND SLIDE VIEW)
   ================================================================== */
/* ==================================================================
   LAYER OVER THE CANVAS
   Only the buttons take clicks: the container and its slides are the
   board's (select, drag, edit).
   ================================================================== */
.slides-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
}
/* ---- tab ---- */
.slides-tab {
  position: absolute;
  height: 38px;
}
.slides-tab__pill {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 38px;
  padding: 0 6px 0 12px;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 0 0 1px rgba(5, 0, 56, 0.04), 0 2px 6px rgba(5, 0, 56, 0.12);
  color: #1d1d21;
  font-size: 16px;
  font-weight: 400;
  white-space: nowrap;
  pointer-events: auto;
  cursor: default;
}
.slides-tab__name {
  margin: 0 10px 0 8px;
}
.slides-tab__btn {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  color: #1d1d21;
}
.slides-tab__btn:hover:not(:disabled) {
  background: var(--surface-2);
}
.slides-tab__btn:disabled {
  opacity: 0.4;
}
/* ---- empty: the quick starts, at the board's zoom ---- */
.slides-empty {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 36px;
  transform-origin: 0 0;
}
.slides-empty__text {
  margin: 0;
  color: #6b6f80;
  font-size: 24px;
  font-weight: 600;
}
.slides-empty__cards {
  display: flex;
  gap: 10px;
  pointer-events: auto;
}
.slides-empty__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: 330px;
  height: 196px;
  border: 1.5px solid #e1e3ea;
  border-radius: 16px;
  background: #fefefe;
  color: #1d1d21;
  font-size: 24px;
  font-weight: 600;
}
.slides-empty__card:hover {
  border-color: #c4c7d2;
  box-shadow: 0 6px 18px rgba(5, 0, 56, 0.08);
}
.slides-empty__activity {
  color: #e03131;
}
/* ---- add buttons ---- */
.slides-anchor {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}
.slides-add {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 10px;
  background: var(--surface);
}
.slides-add.is-vertical {
  flex-direction: column;
}
.slides-add__btn {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: var(--text);
}
.slides-add__btn:hover {
  background: var(--surface-2);
}
.slides-activity-icon {
  position: relative;
  display: inline-block;
}
.slides-activity-icon svg:first-child {
  position: absolute;
  inset: 0;
}
.slides-activity-icon svg:last-child {
  position: absolute;
  right: -2px;
  bottom: -2px;
}
/* ---- the line between two slides: add one there ---- */
.slides-gap {
  position: absolute;
  height: 0;
  border-top: 2px solid var(--primary);
  pointer-events: auto;
}
.slides-gap .slides-add {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 8px rgba(5, 0, 56, 0.16);
}
/* ---- the selected slide: a lavender band with its number (Miro) ---- */
.slides-ring {
  position: absolute;
  box-sizing: border-box;
  border-style: solid;
  border-color: #dcdffd;
  pointer-events: none;
}
.slides-ring__no {
  position: absolute;
  left: 0;
  display: flex;
  align-items: center;
  color: var(--primary);
  font-weight: 500;
  white-space: nowrap;
}
.slides-anchor--bar {
  transform: translate(-50%, -100%);
}
/* ---- the selected slide's bar ---- */
.slide-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 50px;
  padding: 0 8px;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 0 0 1px rgba(5, 0, 56, 0.05), 0 4px 14px rgba(5, 0, 56, 0.14);
  color: var(--text);
  white-space: nowrap;
}
.slide-bar__btn,
.slide-bar__ratio {
  display: grid;
  place-items: center;
  height: 38px;
  border-radius: 8px;
  color: var(--text);
}
.slide-bar__btn:hover:not(:disabled),
.slide-bar__ratio:hover:not(:disabled) {
  background: var(--surface-2);
}
.slide-bar__btn:disabled,
.slide-bar__ratio:disabled {
  opacity: 0.35;
}
.slide-bar__btn.is-on,
.slide-bar__ratio.is-on {
  color: var(--primary);
}
.slide-bar__btn {
  width: 38px;
}
.slide-bar__ratio {
  padding: 0 12px;
  font-size: 13px;
  font-weight: 500;
}
.slide-bar__sep {
  width: 1px;
  height: 26px;
  margin: 0 4px;
  background: var(--border);
}
.slide-bar__swatch {
  width: 22px;
  height: 22px;
  border: 1px solid #c9ccd6;
  border-radius: 50%;
}
.slide-bar__colors {
  display: grid;
  grid-template-columns: repeat(5, 30px);
  gap: 8px;
  padding: 6px;
}
.slide-bar__color {
  width: 30px;
  height: 30px;
  border: 1px solid #c9ccd6;
  border-radius: 50%;
}
.slide-bar__color.is-on {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary);
}
/* ---- drag a slide ---- */
.slides-handle {
  position: absolute;
  display: grid;
  place-items: center;
  width: 28px;
  height: 40px;
  border-radius: 6px;
  color: var(--text);
  transform: translate(-50%, -50%);
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
}
.slides-handle:hover {
  background: var(--surface-2);
}
.slides-handle.is-dragging {
  cursor: grabbing;
}
.slides-drop {
  position: absolute;
  height: 4px;
  border-radius: 2px;
  background: var(--primary);
  transform: translateY(-50%);
}
/* ==================================================================
   TEMPLATE PICKER
   ================================================================== */
.slide-pick {
  position: fixed;
  z-index: 210;
  display: flex;
  flex-direction: column;
  width: 420px;
  max-width: calc(100vw - 16px);
  height: min(640px, calc(100vh - 16px));
  padding: 14px 14px 0;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 0 0 1px rgba(5, 0, 56, 0.06), 0 16px 40px rgba(5, 0, 56, 0.2);
  color: var(--text);
}
.slide-pick__search {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 12px;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text-2);
}
.slide-pick__search:focus-within {
  box-shadow: 0 0 0 2px var(--primary);
}
.slide-pick__search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: none;
  color: var(--text);
  font-size: 15px;
}
.slide-pick__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 12px;
  margin-top: 14px;
  padding-bottom: 14px;
  overflow-y: auto;
}
.slide-pick__card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  text-align: left;
}
.slide-pick__card:hover .slide-pick__thumb {
  box-shadow: 0 0 0 2px var(--primary);
}
.slide-pick__thumb {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fefefe;
}
.slide-pick__thumb.is-dark {
  background: #18181b;
}
.slide-pick__thumb img {
  display: block;
  width: 100%;
  height: 100%;
}
.slide-pick__name {
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.slide-pick__empty {
  grid-column: 1 / -1;
  color: var(--text-2);
  font-size: 14px;
}
/* ==================================================================
   SLIDE VIEW (MIRO'S SLIDE WORKSPACE)
   Over the board's own bars; the slide itself is the board, seen
   through the hole the grey leaves.
   ================================================================== */
.slide-view {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
}
.slide-view > * {
  pointer-events: auto;
}
body.is-slide-view .ctx-bar {
  z-index: 46;
}
.slide-view__mask {
  position: absolute;
  background: #eef0f4;
}
/* ---- top bar ---- */
.slide-view__bar {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 56px;
  padding: 0 14px 0 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
}
.slide-view__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 18px;
  font-size: 15px;
  font-weight: 500;
}
.slide-view__tools {
  display: flex;
  gap: 2px;
}
.slide-view__tool {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  color: var(--text);
}
.slide-view__tool:hover {
  background: var(--surface-2);
}
.slide-view__tool.is-active {
  background: #e9ebff;
  color: var(--primary);
}
.slide-view__spacer {
  flex: 1;
}
.slide-view__present,
.slide-view__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
}
.slide-view__present:hover,
.slide-view__back:hover {
  background: var(--surface-2);
}
/* ---- the slides ---- */
.slide-view__list {
  position: absolute;
  top: 56px;
  bottom: 88px;
  left: 0;
  display: flex;
  flex-direction: column;
  width: 232px;
  padding: 14px 12px;
  background: var(--surface);
}
.slide-view__new {
  display: flex;
  flex: none;
  gap: 2px;
  margin-bottom: 14px;
}
.slide-view__new-btn,
.slide-view__new-more {
  height: 34px;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
}
.slide-view__new-btn:hover,
.slide-view__new-more:hover {
  background: #e6e7ee;
}
.slide-view__new-btn {
  flex: 1;
  border-radius: 8px 2px 2px 8px;
}
.slide-view__new-more {
  display: grid;
  place-items: center;
  width: 38px;
  border-radius: 2px 8px 8px 2px;
}
.slide-view__items {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}
.slide-view__item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 6px;
  border-radius: 8px;
}
.slide-view__item.is-current {
  background: #eef1ff;
}
.slide-view__item.is-dragging {
  opacity: 0.4;
}
.slide-view__no {
  width: 16px;
  color: var(--text-2);
  font-size: 12px;
  text-align: right;
}
.slide-view__thumb {
  flex: 1;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fefefe;
}
.slide-view__thumb img {
  display: block;
  width: 100%;
  height: 100%;
}
.is-current .slide-view__thumb {
  border: 2px solid var(--primary);
}
/* ---- presenter notes ---- */
.slide-view__notes {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 88px;
  padding: 14px 28px 18px;
  background: #eef0f4;
}
.slide-view__notes-input {
  width: 100%;
  height: 100%;
  padding: 16px 24px;
  border: 1px solid #e1e3ea;
  border-radius: 10px;
  background: #fefefe;
  color: #1d1d21;
  font: inherit;
  font-size: 14px;
  resize: none;
  outline: none;
}
.slide-view__notes-input:focus {
  border-color: var(--primary);
}
/* ==================================================================
   STYLES · CARDS (MIRO): TOOLBAR MENUS, CARD BUTTONS, CARD PANEL
   ================================================================== */
/* ==================================================================
   TOOLBAR MENUS
   ================================================================== */
.card-colors {
  display: grid;
  grid-template-columns: repeat(6, 28px);
  gap: 8px;
  padding: 4px;
}
.card-colors__swatch {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(5, 0, 56, 0.1);
  transition: transform 0.12s;
}
.card-colors__swatch:hover {
  transform: scale(1.1);
}
.card-colors__swatch.is-active {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px #4262ff;
}
.card-colors__fill {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 4px 2px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}
.card-colors__fill input {
  width: 16px;
  height: 16px;
  accent-color: #4262ff;
}
.card-colors--panel {
  grid-template-columns: repeat(auto-fill, 26px);
  gap: 8px;
  padding: 0;
}
.card-colors--panel .card-colors__swatch {
  width: 26px;
  height: 26px;
}
.card-menu {
  min-width: 200px;
}
.card-menu .menu-item {
  min-height: 38px;
}
.card-menu__tick {
  margin-left: auto;
  color: #4262ff !important;
}
.card-menu__none {
  color: var(--text-2);
}
.card-status {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.card-status--pick {
  height: 30px;
  padding: 0 14px;
  border-radius: 15px;
  font-size: 13px;
  opacity: 0.72;
  transition: opacity 0.12s, box-shadow 0.12s;
}
.card-status--pick:hover:not(:disabled) {
  opacity: 1;
}
.card-status--pick.is-active {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--ring);
}
.card-people {
  max-height: 300px;
  overflow-y: auto;
}
.card-people__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-people__name small {
  color: var(--text-2);
}
.card-people__none {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px dashed var(--text-2);
}
.card-dates {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}
.card-dates label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--text-2);
}
.card-dates .input {
  width: 150px;
  height: 34px;
}
/* ==================================================================
   CARD BUTTONS ON THE BOARD (OPEN CARD, LINK)
   ================================================================== */
.card-layer {
  position: absolute;
  inset: 0;
  z-index: 6;
  overflow: hidden;
  pointer-events: none;
}
.card-layer__card {
  position: absolute;
  transform-origin: center;
}
.card-layer__buttons {
  position: absolute;
  top: max(4px, var(--pad));
  right: calc(10px * var(--s));
  display: flex;
  gap: 2px;
  transform: scale(var(--s));
  transform-origin: top right;
}
.card-layer__btn {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  color: #050038;
  background: rgba(255, 255, 255, 0.92);
  pointer-events: auto;
}
.card-layer__btn:hover {
  background: #f1f2f5;
  color: #4262ff;
}
/* ==================================================================
   CARD PANEL (OPEN IN SIDE PANEL)
   ================================================================== */
.card-panel {
  z-index: 40;
  width: 440px;
  overflow: hidden;
}
.card-panel__bar {
  height: 6px;
  flex-shrink: 0;
}
.card-panel__header {
  display: flex;
  align-items: center;
  padding: 12px 12px 4px 24px;
}
.card-panel__kind {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.card-panel__spacer {
  flex: 1;
}
.card-panel__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 24px 24px;
}
.card-panel__title {
  width: 100%;
  padding: 6px 8px;
  margin: 0 -8px 14px;
  border: none;
  border-radius: 6px;
  resize: none;
  overflow: hidden;
  background: transparent;
  color: var(--text);
  font: 600 22px/1.3 var(--font);
}
.card-panel__title:hover:not(:disabled),
.card-panel__title:focus {
  background: var(--surface-hover);
  outline: none;
}
.card-panel__fields {
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: start;
  gap: 16px 12px;
  margin-bottom: 22px;
}
.card-panel__fields > .input {
  height: 34px;
}
.card-panel__label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  font-size: 13px;
  color: var(--text-2);
}
.card-panel__label--block {
  min-height: 0;
  margin-bottom: 8px;
}
.card-panel__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin: 0 1px;
}
.card-panel__status {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 1px;
}
.card-panel__who {
  position: relative;
}
.card-panel__pick {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 10px 0 6px;
  border-radius: 6px;
  font-size: 14px;
  color: var(--text);
}
.card-panel__pick:hover:not(:disabled) {
  background: var(--surface-hover);
}
.card-panel__muted {
  padding-left: 4px;
  color: var(--text-2);
}
.card-panel__menu {
  position: absolute;
  z-index: 2;
  top: calc(100% + 4px);
  left: 0;
  padding: 6px;
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 0 0 1px rgba(5, 0, 56, 0.06), 0 8px 24px rgba(5, 0, 56, 0.16);
}
.card-panel__tags {
  padding: 0;
  min-width: 0;
}
.card-panel__desc {
  width: 100%;
  min-height: 160px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  resize: vertical;
  background: var(--surface);
  color: var(--text);
  font: 14px/1.5 var(--font);
}
.card-panel__desc:focus {
  outline: none;
  border-color: #4262ff;
  box-shadow: 0 0 0 3px rgba(66, 98, 255, 0.15);
}
.card-panel__check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}
.card-panel__check input {
  width: 16px;
  height: 16px;
  accent-color: #4262ff;
}
/* ==================================================================
   STYLES · CODE BLOCKS (MIRO): TOOLBAR, IN-PLACE EDITOR
   ================================================================== */
/* ==================================================================
   TOOLBAR
   ================================================================== */
.code-lang {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  column-gap: 14px;
  align-items: center;
  padding: 0 4px;
  text-align: left;
  line-height: 1.2;
}
.code-lang small {
  grid-column: 1;
  font-size: 11px;
  color: var(--text-2);
}
.code-lang b {
  grid-column: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.code-lang svg {
  grid-column: 2;
  grid-row: 1 / span 2;
}
.code-langs {
  min-width: 180px;
  max-height: min(640px, 70vh);
  overflow-y: auto;
}
.code-langs .menu-item {
  min-height: 34px;
}
.code-langs__tick {
  margin-left: auto;
  color: #4262ff !important;
}
.code-size .note-size__value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  cursor: default;
}
.code-size .note-size__value:hover {
  background: none;
}
/* ==================================================================
   IN-PLACE EDITOR
   ================================================================== */
.code-editor-layer {
  position: absolute;
  z-index: 7;
  transform-origin: center;
}
/* the block's name, renamed in place above it */
.code-editor-layer .code-editor__title {
  position: absolute;
  left: 0;
  margin: 0;
  padding: 0;
  border: none;
  border-bottom: 1px dashed transparent;
  outline: none;
  background: transparent;
  color: #6b6b76;
  font-family: var(--font);
  line-height: 1.3;
}
.code-editor-layer .code-editor__title:hover,
.code-editor-layer .code-editor__title:focus {
  border-bottom-color: #b4b4c4;
}
.code-editor {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  border-radius: 2px;
  overflow: hidden;
}
.code-editor__current {
  position: absolute;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.1);
  pointer-events: none;
}
.code-editor__gutter {
  position: absolute;
  top: 0;
  left: 0;
  color: #6e6e9a;
  pointer-events: none;
}
.code-editor__gutter span {
  position: absolute;
  right: 0;
  white-space: pre;
}
.code-editor__gutter span.is-current {
  color: #c9c9e8;
}
.code-editor__code,
.code-editor__input {
  position: absolute;
  margin: 0;
  padding: 0;
  border: none;
  white-space: break-spaces;
  word-break: break-all;
  overflow-wrap: anywhere;
}
.code-editor__code {
  pointer-events: none;
}
.code-editor__code > div {
  white-space: pre;
  overflow: hidden;
}
.code-editor__input {
  resize: none;
  overflow: hidden;
  outline: none;
  background: transparent;
  color: transparent;
  caret-color: #ffffff;
}
.code-editor__input::placeholder {
  color: #8d8db5;
}
.code-editor__input::selection {
  background: rgba(124, 183, 255, 0.35);
}
/* ==================================================================
   STYLES · FLIP CARDS (MIRO): FLIP BUTTON, EDITOR, TOOLBAR
   ================================================================== */
/* ==================================================================
   FLIP BUTTON (ON EACH CARD)
   ================================================================== */
.flip-layer {
  position: absolute;
  inset: 0;
  z-index: 6;
  overflow: hidden;
  pointer-events: none;
}
.flip-layer__btn {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 16px 0 14px;
  border-radius: 12px;
  background: #ffffff;
  color: #1e1e1e;
  font: 600 17px/1 var(--font);
  box-shadow: 0 2px 0 rgba(5, 0, 56, 0.1), 0 2px 8px rgba(5, 0, 56, 0.16);
  transform-origin: center;
  pointer-events: auto;
  cursor: pointer;
}
.flip-layer__btn:hover {
  box-shadow: 0 0 0 2px #4262ff, 0 2px 0 rgba(5, 0, 56, 0.1), 0 2px 8px rgba(5, 0, 56, 0.16);
}
.flip-layer__btn:active {
  background: #f5f5f8;
}
/* ==================================================================
   EDITOR (TYPING ON THE SIDE SHOWING)
   ================================================================== */
.flip-editor {
  position: absolute;
  z-index: 7;
  transform-origin: 0 0;
  pointer-events: none;
}
.flip-editor__area {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.flip-editor textarea {
  pointer-events: auto;
}
.flip-editor__title {
  color: rgba(30, 30, 30, 0.62);
}
.flip-editor__title::placeholder {
  color: rgba(30, 30, 30, 0.62);
}
/* ==================================================================
   TOOLBAR
   ================================================================== */
.flip-swatch {
  box-shadow: inset 0 0 0 1px rgba(5, 0, 56, 0.12);
}
.flip-colors {
  grid-template-columns: repeat(5, 28px);
}
/* ==================================================================
   STYLES · PEOPLE WIDGET & AVATARS (MIRO)
   ================================================================== */
.people-layer {
  position: absolute;
  inset: 0;
  z-index: 6;
  overflow: hidden;
  pointer-events: none;
}
.people-layer.is-passive * {
  pointer-events: none !important;
}
/* ==================================================================
   THE WIDGET (LIVE, INSIDE THE CANVAS'S FRAME)
   ================================================================== */
.people-widget {
  position: absolute;
  display: flex;
  flex-direction: column;
  transform-origin: 0 0;
  background: #ffffff;
  color: #1a1a1a;
  font-family: var(--font);
  pointer-events: none;
}
.people-widget__head {
  margin: 0;
  padding: 17px 18px 0;
  color: #1a1a1a;
  font-size: 14px;
  font-weight: 600;
  line-height: 14px;
}
.people-widget__search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  margin: 13px 18px 0;
  padding: 0 10px;
  border-radius: 4px;
  background: #f1f2f5;
  color: #4a4a55;
  pointer-events: auto;
  cursor: text;
}
.people-widget__search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: #1a1a1a;
  font: 13px var(--font);
}
.people-widget__search input::placeholder {
  color: #7a7a86;
}
.people-widget__search:focus-within {
  box-shadow: 0 0 0 1px #4262ff;
}
.people-widget__list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 6px 12px 8px;
  pointer-events: auto;
}
.people-widget__title {
  margin: 12px 6px 6px;
  font-size: 12px;
  color: #656573;
}
.people-widget__row {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 6px;
  border-radius: 6px;
  pointer-events: auto;
  cursor: grab;
  user-select: none;
}
.people-widget__row:hover {
  background: #f5f5f8;
}
.people-widget__row:hover .people-widget__pin {
  opacity: 1;
}
.people-widget__row:active {
  cursor: grabbing;
}
.people-widget__face {
  position: relative;
  display: inline-flex;
}
.people-widget__online {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #2fb344;
  box-shadow: 0 0 0 2px #ffffff;
}
.people-widget__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 500;
}
.people-widget__pin {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  color: #656573;
  opacity: 0;
  cursor: pointer;
}
.people-widget__pin:hover {
  background: #e9e9ef;
  color: #4262ff;
}
.people-widget__pin.is-on {
  opacity: 1;
  color: #4262ff;
}
.people-widget__empty {
  margin: 18px 6px;
  font-size: 13px;
  color: #7a7a86;
}
.people-widget__foot {
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-top: 1px solid #ececf1;
  pointer-events: auto;
}
.people-widget__foot .people-widget__row {
  flex: 1;
}
.people-placeholder {
  flex-shrink: 0;
}
/* ==================================================================
   A PERSON BEING DRAGGED OUT
   ================================================================== */
.people-drag {
  position: fixed;
  z-index: 1000;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  box-shadow: 0 0 0 2px #ffffff, 0 6px 18px rgba(5, 0, 56, 0.25);
  pointer-events: none;
}
/* ==================================================================
   STYLES · USER CARDS (MIRO'S ORG CHART): EDITOR, "+", TOOLBAR
   ================================================================== */
/* ==================================================================
   EDITOR
   ================================================================== */
.person-editor-layer {
  position: absolute;
  z-index: 7;
  transform-origin: center;
}
.person-editor {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
}
.person-editor textarea::placeholder {
  color: #b4b4bd;
}
.person-editor .person-editor__desc::placeholder {
  color: #7a7a86;
}
/* ==================================================================
   "+": A CARD BELOW
   ================================================================== */
.person-layer {
  position: absolute;
  inset: 0;
  z-index: 6;
  overflow: hidden;
  pointer-events: none;
}
.person-layer__add {
  position: absolute;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #ffffff;
  color: #4262ff;
  box-shadow: 0 0 0 1px rgba(66, 98, 255, 0.4), 0 2px 6px rgba(5, 0, 56, 0.16);
  pointer-events: auto;
}
.person-layer__add:hover {
  background: #4262ff;
  color: #ffffff;
}
/* ==================================================================
   TOOLBAR: FIELDS, HIRING SWITCH
   ================================================================== */
.person-fields {
  min-width: 220px;
}
.person-fields .flyout__title:first-child {
  margin-top: 0;
}
.person-fields .card-people {
  max-height: 220px;
}
.person-hiring {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 10px;
  border-radius: var(--radius);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
}
.person-hiring:hover {
  background: var(--surface-hover);
}
.person-hiring__track {
  position: relative;
  width: 28px;
  height: 16px;
  border-radius: 8px;
  background: #8f8f9c;
  transition: background 0.15s;
}
.person-hiring__knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ffffff;
  transition: transform 0.15s;
}
.person-hiring.is-on .person-hiring__track {
  background: #4262ff;
}
.person-hiring.is-on .person-hiring__knob {
  transform: translateX(12px);
}
/* ==================================================================
   STYLES · ANIMATION: TOOLBAR MENU, PREVIEW TILES, STOP BAR
   ================================================================== */
/* ==================================================================
   MENU
   ================================================================== */
.anim-menu {
  width: 296px;
  /* ---- head ---- */
  /* ---- Entrance / Line, and the speeds: one segmented control style ---- */
  /* ---- foot ---- */
}
.anim-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 28px;
  margin-bottom: 8px;
}
.anim-menu__head b {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.anim-menu__remove {
  height: 26px;
  padding: 0 8px;
  border-radius: 6px;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 500;
}
.anim-menu__remove:hover {
  background: var(--surface-hover);
  color: var(--danger);
}
.anim-menu__tabs,
.anim-menu__speeds {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 8px;
  background: var(--surface-hover);
}
.anim-menu__tabs button,
.anim-menu__speeds button {
  flex: 1;
  height: 28px;
  border-radius: 6px;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 500;
  transition: background 0.12s, color 0.12s;
}
.anim-menu__tabs button:hover,
.anim-menu__speeds button:hover {
  color: var(--text);
}
.anim-menu__tabs button.is-active,
.anim-menu__speeds button.is-active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(5, 0, 56, 0.12);
}
.anim-menu__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 10px;
}
.anim-menu__foot {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.anim-menu__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.anim-menu__turn {
  font-size: 12px;
  color: var(--text-2);
}
.anim-menu__preview {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-radius: 8px;
  background: var(--primary);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
}
.anim-menu__preview:hover {
  filter: brightness(1.08);
}
.anim-menu__hint {
  margin: 12px 2px 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-2);
}
/* ---- a tile: a small stage whose box plays the animation on hover ---- */
.anim-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  min-height: 78px;
  padding: 8px 4px;
  border-radius: 8px;
  color: var(--text);
  font-size: 12px;
  line-height: 1.25;
  text-align: center;
  transition: background 0.12s;
}
.anim-tile:hover {
  background: var(--surface-hover);
}
.anim-tile.is-active {
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 600;
}
.anim-tile.is-active .anim-tile__stage {
  box-shadow: inset 0 0 0 1.5px var(--primary);
}
.anim-tile__tick {
  position: absolute;
  top: 6px;
  right: 6px;
  color: var(--primary);
}
.anim-tile__stage {
  position: relative;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 48px;
  height: 32px;
  overflow: hidden;
  border-radius: 6px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
}
.anim-tile__box {
  width: 20px;
  height: 14px;
  border-radius: 3px;
  background: var(--primary);
}
.anim-tile__line rect {
  fill: none;
  stroke: var(--primary);
  stroke-width: 2.5;
  stroke-dasharray: 100 100;
}
.anim-tile--drawOutline:hover .anim-tile__line rect {
  animation: anim-trace 1.4s ease-in-out infinite;
}
.anim-tile--outlineLeft:hover .anim-tile__line {
  animation: anim-sweep-left 1.4s ease-in-out infinite;
}
.anim-tile--outlineRight:hover .anim-tile__line {
  animation: anim-sweep-right 1.4s ease-in-out infinite;
}
.anim-tile--outlineTop:hover .anim-tile__line {
  animation: anim-sweep-top 1.4s ease-in-out infinite;
}
.anim-tile--outlineBottom:hover .anim-tile__line {
  animation: anim-sweep-bottom 1.4s ease-in-out infinite;
}
.anim-tile__text {
  display: inline-flex;
  gap: 0;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: pre;
}
.anim-tile__text i {
  display: inline-block;
  font-style: normal;
}
.anim-tile--wordByWord .anim-tile__text {
  gap: 0.28em;
}
.anim-tile--lineByLine .anim-tile__text {
  flex-direction: column;
  align-items: center;
  font-size: 10px;
  line-height: 1.15;
}
.anim-tile--typewriter:hover .anim-tile__text {
  animation: anim-type 1.6s steps(6, end) infinite;
}
.anim-tile--letterFade:hover .anim-tile__text i {
  animation: anim-letter 1.6s ease-out infinite;
  animation-delay: calc(var(--i) * 0.09s);
}
.anim-tile--wordByWord:hover .anim-tile__text i,
.anim-tile--lineByLine:hover .anim-tile__text i {
  animation: anim-word 1.6s ease-out infinite;
}
.anim-tile--wordByWord:hover .anim-tile__text i:nth-of-type(2),
.anim-tile--lineByLine:hover .anim-tile__text i:nth-of-type(2) {
  animation-delay: 0.32s;
}
.anim-tile--riseUp:hover .anim-tile__text {
  animation: anim-rise 1.4s ease-out infinite;
}
.anim-tile--blurIn:hover .anim-tile__text {
  animation: anim-blur 1.4s ease-out infinite;
}
.anim-tile--fade:hover .anim-tile__box {
  animation: anim-fade 1.1s ease-out infinite;
}
.anim-tile--slideLeft:hover .anim-tile__box {
  animation: anim-slide-left 1.1s ease-out infinite;
}
.anim-tile--slideRight:hover .anim-tile__box {
  animation: anim-slide-right 1.1s ease-out infinite;
}
.anim-tile--slideTop:hover .anim-tile__box {
  animation: anim-slide-top 1.1s ease-out infinite;
}
.anim-tile--slideBottom:hover .anim-tile__box {
  animation: anim-slide-bottom 1.1s ease-out infinite;
}
.anim-tile--zoom:hover .anim-tile__box {
  animation: anim-zoom 1.1s ease-out infinite;
}
.anim-tile--pop:hover .anim-tile__box {
  animation: anim-pop 1.1s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
.anim-tile--spin:hover .anim-tile__box {
  animation: anim-spin 1.1s ease-out infinite;
}
.anim-tile--drop:hover .anim-tile__box {
  animation: anim-drop 1.2s linear infinite;
}
@keyframes anim-fade {
  from {
    opacity: 0;
  }
  70%,
  to {
    opacity: 1;
  }
}
@keyframes anim-slide-left {
  from {
    opacity: 0;
    transform: translateX(-36px);
  }
  70%,
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes anim-slide-right {
  from {
    opacity: 0;
    transform: translateX(36px);
  }
  70%,
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes anim-slide-top {
  from {
    opacity: 0;
    transform: translateY(-26px);
  }
  70%,
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes anim-slide-bottom {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
  70%,
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes anim-zoom {
  from {
    opacity: 0;
    transform: scale(0.3);
  }
  70%,
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes anim-pop {
  from {
    opacity: 0;
    transform: scale(0);
  }
  60%,
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes anim-spin {
  from {
    opacity: 0;
    transform: rotate(-180deg) scale(0.4);
  }
  70%,
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes anim-type {
  from {
    clip-path: inset(0 100% 0 0);
  }
  75%,
  to {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes anim-letter {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
  35%,
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes anim-word {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  30%,
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes anim-rise {
  from {
    opacity: 0;
    transform: translateY(9px);
  }
  60%,
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes anim-blur {
  from {
    opacity: 0;
    filter: blur(4px);
  }
  65%,
  to {
    opacity: 1;
    filter: none;
  }
}
@keyframes anim-trace {
  from {
    stroke-dashoffset: 100;
  }
  70%,
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes anim-sweep-left {
  from {
    clip-path: inset(0 100% 0 0);
  }
  70%,
  to {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes anim-sweep-right {
  from {
    clip-path: inset(0 0 0 100%);
  }
  70%,
  to {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes anim-sweep-top {
  from {
    clip-path: inset(0 0 100% 0);
  }
  70%,
  to {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes anim-sweep-bottom {
  from {
    clip-path: inset(100% 0 0 0);
  }
  70%,
  to {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes anim-drop {
  0% {
    opacity: 0;
    transform: translateY(-30px);
  }
  10% {
    opacity: 1;
  }
  35% {
    transform: none;
  }
  45% {
    transform: translateY(-8px);
  }
  55% {
    transform: none;
  }
  62% {
    transform: translateY(-3px);
  }
  70%,
  100% {
    transform: none;
  }
}
/* ==================================================================
   PLAYING: THE STOP BAR, AND THE BOARD'S OWN BUTTONS STEP ASIDE
   ================================================================== */
.anim-bar {
  position: absolute;
  z-index: 30;
  top: 16px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 6px 0 16px;
  border-radius: 12px;
  transform: translateX(-50%);
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 0 0 1px rgba(5, 0, 56, 0.06), 0 8px 24px rgba(5, 0, 56, 0.14);
  animation: fade-in 0.15s;
}
.anim-bar__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4262ff;
  animation: pulse 1.2s ease-in-out infinite;
}
.anim-bar__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}
.anim-bar__btn:hover {
  background: var(--surface-hover);
}
.anim-bar__btn--stop {
  background: #050038;
  color: #ffffff;
}
.anim-bar__btn--stop:hover {
  background: #1d1a4e;
}
.board.is-animating .flip-layer,
.board.is-animating .card-layer,
.board.is-animating .people-layer,
.board.is-animating .person-layer,
.board.is-animating .sticky-badges {
  visibility: hidden;
}
/* ==================================================================
   STYLES · EXPORT (SAVE PROMPT, EXPORT PANEL, EXPORT FRAME)
   ================================================================== */
/* ==================================================================
   "SAVE THIS BOARD" PROMPT
   ================================================================== */
.save-prompt {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(40, 40, 46, 0.42);
  animation: fade-in 0.15s;
}
.save-prompt__card {
  position: relative;
  width: 100%;
  max-width: 655px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 52px 40px 50px;
  border-radius: 32px;
  background: var(--surface);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
  text-align: center;
  animation: pop-in 0.22s ease-out;
}
.save-prompt__card h2 {
  margin: 0;
  font-size: 33px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #1c1c1e;
}
.save-prompt__close {
  position: absolute;
  top: -18px;
  right: -18px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #1c1c1e;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.save-prompt__close:hover {
  background: #000;
}
.save-prompt__time {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 24px 0 0;
  font-size: 16px;
  color: #1c1c1e;
}
.save-prompt__help {
  display: inline-flex;
  color: inherit;
}
.save-prompt__cta {
  width: 304px;
  max-width: 100%;
  height: 60px;
  margin-top: 28px;
  border-radius: 4px;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
}
.save-prompt__alt {
  margin: 40px 0 0;
  font-size: 16px;
  color: #7a7a8c;
}
.save-prompt__alt .link-btn {
  color: #3859ff;
  text-decoration-color: rgba(56, 89, 255, 0.45);
}
.link-btn {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  font: inherit;
}
.link-btn:hover {
  color: var(--primary-hover);
}
/* ==================================================================
   EXPORT PANEL (LEFT)
   ================================================================== */
.export-panel {
  position: absolute;
  z-index: 40;
  top: 12px;
  left: 12px;
  width: 350px;
  padding: 26px 26px 34px;
  background: var(--surface);
  border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(5, 0, 56, 0.06), 0 10px 30px rgba(5, 0, 56, 0.16);
  animation: slide-in-left 0.18s ease-out;
}
.export-panel h2 {
  font-size: 21px;
  font-weight: 500;
  margin-bottom: 14px;
}
.export-panel__actions {
  display: flex;
  gap: 16px;
  margin-top: 22px;
}
.export-panel__actions .btn {
  height: 40px;
  padding: 0 20px;
  border-radius: 4px;
  font-weight: 500;
}
.btn--quiet {
  background: #f1f1f4;
  border-color: transparent;
  color: var(--text);
}
.btn--quiet:hover:not(:disabled) {
  background: #e7e7ec;
}
/* ==================================================================
   SIZE / QUALITY OPTIONS
   ================================================================== */
.export-options {
  display: flex;
  flex-direction: column;
}
.export-option {
  display: grid;
  grid-template-columns: 22px 1fr auto auto;
  align-items: center;
  column-gap: 20px;
  min-height: 44px;
  font-size: 15px;
  cursor: pointer;
}
.export-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.export-option__radio {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #c9c8d3;
  transition: border 0.12s;
}
input:checked + .export-option__radio {
  border: 5.5px solid var(--primary);
}
input:focus-visible + .export-option__radio {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.export-option__label {
  display: flex;
  flex-direction: column;
}
.export-option__label small {
  font-size: 13px;
  color: var(--text-2);
}
.export-option__format {
  min-width: 32px;
  color: var(--text);
}
.export-option__size {
  min-width: 100px;
  text-align: right;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.export-option.is-disabled {
  cursor: not-allowed;
  color: #a5a3b8;
}
.export-option.is-disabled .export-option__radio {
  border-color: #e4e3ea;
  background: #f1f1f4;
}
.export-option.is-disabled .export-option__format,
.export-option.is-disabled .export-option__size,
.export-option.is-disabled small {
  color: #b9b8c8;
}
.export-note {
  margin-top: 16px;
  padding: 10px 12px;
  border: 1px solid var(--primary);
  border-radius: 4px;
  background: var(--primary-soft);
  font-size: 14px;
  line-height: 1.5;
}
.export-note a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* ==================================================================
   EXPORT FRAME ON THE BOARD (CORNER BRACKETS, REST DIMMED)
   ================================================================== */
.export-frame {
  position: absolute;
  z-index: 30;
  pointer-events: none;
  box-shadow: 0 0 0 100vmax rgba(60, 62, 80, 0.22);
}
.export-frame__corner {
  position: absolute;
  width: 20px;
  height: 20px;
  border: 0 solid #1c1c1e;
}
.export-frame__corner--nw {
  top: -6px;
  left: -6px;
  border-top-width: 4px;
  border-left-width: 4px;
}
.export-frame__corner--ne {
  top: -6px;
  right: -6px;
  border-top-width: 4px;
  border-right-width: 4px;
}
.export-frame__corner--sw {
  bottom: -6px;
  left: -6px;
  border-bottom-width: 4px;
  border-left-width: 4px;
}
.export-frame__corner--se {
  bottom: -6px;
  right: -6px;
  border-bottom-width: 4px;
  border-right-width: 4px;
}
/* ==================================================================
   RESPONSIVE
   ================================================================== */
@media (max-width: 720px) {
  .save-prompt__card {
    padding: 40px 20px 32px;
    border-radius: 24px;
  }
  .save-prompt__card h2 {
    font-size: 24px;
  }
  .save-prompt__close {
    top: -14px;
    right: -6px;
  }
  .export-panel {
    left: 8px;
    right: 8px;
    width: auto;
  }
}


/*# sourceMappingURL=main.d99476f7.css.map*/