@font-face {
font-family: 'Almarai';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/static/fonts/96e5c91ae2.woff2) format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
font-family: 'Almarai';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/static/fonts/1cfc974a09.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Almarai';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/static/fonts/de48eb5348.woff2) format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
font-family: 'Almarai';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/static/fonts/7ed77c77a0.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Almarai';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url(/static/fonts/d726cb60c9.woff2) format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
font-family: 'Almarai';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url(/static/fonts/f9ccbe0554.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Lemonada';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/static/fonts/49234c2014.woff2) format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
font-family: 'Lemonada';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/static/fonts/cbc731f11a.woff2) format('woff2');
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;
}
@font-face {
font-family: 'Lemonada';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/static/fonts/6ff6f598a4.woff2) format('woff2');
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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Lemonada';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/static/fonts/440128d86d.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Lemonada';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/static/fonts/49234c2014.woff2) format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
font-family: 'Lemonada';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/static/fonts/cbc731f11a.woff2) format('woff2');
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;
}
@font-face {
font-family: 'Lemonada';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/static/fonts/6ff6f598a4.woff2) format('woff2');
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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Lemonada';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/static/fonts/440128d86d.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Lemonada';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/static/fonts/49234c2014.woff2) format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
font-family: 'Lemonada';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/static/fonts/cbc731f11a.woff2) format('woff2');
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;
}
@font-face {
font-family: 'Lemonada';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/static/fonts/6ff6f598a4.woff2) format('woff2');
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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Lemonada';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/static/fonts/440128d86d.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Marhey';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/static/fonts/eb5d65a4cd.woff2) format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
font-family: 'Marhey';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/static/fonts/a17ad555ac.woff2) format('woff2');
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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Marhey';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/static/fonts/2099e886b2.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Marhey';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/static/fonts/eb5d65a4cd.woff2) format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
font-family: 'Marhey';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/static/fonts/a17ad555ac.woff2) format('woff2');
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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Marhey';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/static/fonts/2099e886b2.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Marhey';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/static/fonts/eb5d65a4cd.woff2) format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
font-family: 'Marhey';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/static/fonts/a17ad555ac.woff2) format('woff2');
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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Marhey';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/static/fonts/2099e886b2.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Marhey';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/static/fonts/eb5d65a4cd.woff2) format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
font-family: 'Marhey';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/static/fonts/a17ad555ac.woff2) format('woff2');
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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Marhey';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/static/fonts/2099e886b2.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root { --green-line: #2A6B55; color-scheme: dark; }
:root[data-theme="light"] { --cyan-soft: #EFE8FF; --cyan-line: #CDBBF5; --green-line: #B8E6D2; --red: #C42757; --red-soft: #FFE8F0; --red-line: #F5C2D4; --shadow: 0 6px 20px rgba(27,22,64,.08); color-scheme: light; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.35; margin: 0; }
img { max-width: 100%; }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.top { position: sticky; top: 0; z-index: 20; }
.top .wrap { display: flex; align-items: center; gap: 16px; height: 64px; }
.logo { display: flex; align-items: baseline; gap: 5px; color: var(--text); }
.logo:hover { text-decoration: none; }
.logo .cursor { font-family: var(--mono); animation: blink 1.1s steps(1) infinite; }
.logo .pro { font-size: 13px; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
.logo .cursor { animation: none; }
}
.topnav { display: none; gap: 4px; margin-inline-start: 12px; }
.topnav a { color: var(--muted); padding: 8px 12px; font-weight: 500; }
.topnav a:hover, .topnav a.on { color: var(--text); background: var(--card); text-decoration: none; }
.top-actions { margin-inline-start: auto; display: flex; gap: 8px; align-items: center; }
.icon-btn { width: 44px; height: 44px; color: var(--text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.icon-btn:hover { text-decoration: none; }
@media (min-width: 900px) {
.topnav { display: flex; }
body { padding-bottom: 32px; }
}
.bottomnav { position: fixed; z-index: 30; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(5, 1fr); padding-bottom: env(safe-area-inset-bottom); }
.bottomnav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--muted); }
.bottomnav a:hover { text-decoration: none; }
@media (min-width: 900px) {
.bottomnav { display: none; }
}
main.wrap { padding-top: 20px; padding-bottom: 24px; }
.hero-exam { background: var(--primary-soft); border: 1px solid var(--primary-line); border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.grid { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) {
.grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.tile { display: flex; flex-direction: column; gap: 8px; padding: 14px; color: var(--text); min-height: 100%; }
.tile:hover { text-decoration: none; border-color: var(--primary-line); }
.tile .foot { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--muted); margin-top: auto; }
.chip { display: inline-block; font-size: 12px; border: 1px solid var(--line); padding: 1px 10px; color: var(--muted); }
.reviewed { font-size: 12px; }
.list { display: flex; flex-direction: column; }
.frow { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--line2); }
.frow:first-child { border-top: 0; }
.frow .info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.frow .t { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frow .t:hover { color: var(--link); }
.frow .m { font-size: 12px; color: var(--muted); display: flex; gap: 6px; flex-wrap: wrap; }
.ficon { width: 42px; height: 42px; background: var(--red-soft); color: var(--red); font-family: var(--mono); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }
details.lec { background: var(--card); border: 1px solid var(--line); overflow: hidden; }
details.lec[open] { border-color: var(--primary-line); }
details.lec summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 14px; cursor: pointer; }
details.lec summary::-webkit-details-marker { display: none; }
details.lec .list { border-top: 1px solid var(--line); }
.doc { display: flex; gap: 12px; align-items: center; }
.avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--cbg, var(--card2)); color: var(--c, var(--text)); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex: none; }
.tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; height: 40px; padding: 0 16px; border: 1px solid var(--line); background: var(--card); color: var(--muted); font-family: inherit; font-size: 14px; cursor: pointer; }
.tab.on { font-weight: 600; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: inherit; cursor: pointer; }
.btn:hover { text-decoration: none; }
.btn-primary { border-color: var(--primary); }
.btn-sm { font-size: 13px; }
.input, select.input, textarea.input { width: 100%; min-height: 48px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font-family: inherit; font-size: 15px; padding: 10px 14px; }
textarea.input { min-height: 110px; resize: vertical; }
.input:focus { outline-offset: 1px; }
.searchbox { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 14px; background: var(--card); border: 1px solid var(--line); }
.searchbox input { flex: 1; border: 0; outline: 0; background: transparent; color: var(--text); font-family: inherit; font-size: 15px; min-width: 0; }
.alert { border-radius: 12px; padding: 12px 14px; font-size: 14px; border: 1px solid var(--red-line); background: var(--red-soft); color: var(--red); }
.ok { border-radius: 12px; padding: 12px 14px; font-size: 14px; border: 1px solid var(--green-line); color: var(--green); }
.auth { max-width: 420px; margin: 24px auto; }
mark { color: inherit; border-radius: 3px; }
footer.foot { text-align: center; color: var(--muted); font-size: 12px; padding: 24px 0 8px; }
h1, h2, h3 { font-weight: 800; }
.tile { transition: transform .15s ease, border-color .15s ease; }
.tile:hover { transform: translateY(-3px); }
.logo { font-weight: 900; font-size: 26px; }
.logo .pro { font-weight: 800; }
.topnav a.on { font-weight: 700; }
.icon-btn { border-width: 2px; }
.btn { border-width: 2px; }
.chip { border-radius: 999px; }
.tab { border-radius: 999px; font-weight: 700; }
.input { border-radius: 16px; border-width: 2px; }
.searchbox { border-radius: 18px; border-width: 2px; }
.ficon { border-radius: 14px; }
details.lec { border-radius: 22px; }
.hero-exam { border-radius: 26px; border-width: 2px; }
.bottomnav { left: 10px; right: 10px; bottom: 10px; height: 68px; }
.bottomnav a { margin: 6px; }
body { padding-bottom: calc(108px + env(safe-area-inset-bottom)); }
.hello { font-weight: 900; line-height: 1.3; }
.hello em { font-style: normal; }
:root { --ease: cubic-bezier(.2,.7,.2,1); }
html { scroll-behavior: smooth; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; border-radius: 10px; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
* { animation: none !important; transition: none !important; }
}
body { background-attachment: fixed, scroll; }
.top { padding-top: env(safe-area-inset-top); }
.card { transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); }
.list .frow { transition: background .15s; }
.list .frow:hover { background: color-mix(in srgb, var(--primary) 6%, transparent); }
.dot { position: absolute; top: 8px; inset-inline-end: 9px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--card); }
.bell { position: relative; }
.bottomnav a { position: relative; }
.bottomnav a .dot { top: 8px; inset-inline-end: calc(50% - 18px); border-color: var(--bg2); }
.bottomnav a:active { transform: scale(.94); }
.suggest { position: absolute; z-index: 15; top: calc(100% + 6px); inset-inline: 0; background: var(--card); border: 2px solid var(--line); border-radius: 18px; box-shadow: 0 16px 40px rgba(0,0,0,.4); overflow: hidden; }
.sg { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; color: var(--text); border-top: 1px solid var(--line2); }
.sg:first-child { border-top: 0; }
.sg:hover, .sg.on { background: var(--primary-soft); text-decoration: none; }
.sg-t { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-s { font-size: 12px; color: var(--muted); flex: none; }
.searchbox:focus-within { border-color: var(--primary); }
.bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.bar i { display: block; width: 100%; min-height: 3px; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--primary), var(--primary-line)); }
.bar span { font-size: 10px; color: var(--muted); font-family: var(--mono); }
.list .frow, details.lec { content-visibility: auto; contain-intrinsic-size: auto 64px; }
@media (max-width: 480px) {
h1 { font-size: 24px; }
.hello { font-size: 25px; }
.bell { display: none; }
}
@media (min-width: 900px) {
.bottomnav a .dot { display: none; }
}
@media (display-mode: standalone) {
footer.foot { display: none; }
}
.btn { position: relative; overflow: hidden; border-radius: 999px; min-height: 46px; padding: 0 24px; border: 1px solid var(--line); color: var(--text); background: linear-gradient(180deg, color-mix(in srgb, var(--card2) 92%, #fff 8%), var(--card)); box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 6px 16px rgba(0,0,0,.25); transition: transform .18s var(--ease), box-shadow .25s var(--ease), border-color .2s, filter .2s; }
.btn:hover { border-color: var(--primary-line); transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 10px 24px rgba(0,0,0,.32); }
.btn:active { transform: translateY(0) scale(.98); box-shadow: inset 0 2px 6px rgba(0,0,0,.3); }
.btn-primary { border: 0; text-shadow: 0 1px 0 rgba(255,255,255,.35); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -2px 0 rgba(0,0,0,.14), 0 8px 22px var(--glow); }
.btn-primary:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.75), inset 0 -2px 0 rgba(0,0,0,.14), 0 12px 30px var(--glow); }
.btn-primary::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; inset-inline-start: -60%; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); transition: inset-inline-start .6s var(--ease); pointer-events: none; }
.btn-primary:hover::after { inset-inline-start: 130%; }
.btn-sm { min-height: 38px; padding: 0 16px; border-radius: 999px; }
.icon-btn { border: 1px solid var(--line); background: linear-gradient(180deg, color-mix(in srgb, var(--card2) 92%, #fff 8%), var(--card)); box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 4px 12px rgba(0,0,0,.22); transition: transform .18s var(--ease), border-color .2s, box-shadow .2s; }
.icon-btn:hover { transform: translateY(-2px); border-color: var(--primary-line); box-shadow: 0 8px 20px var(--glow); color: var(--primary-text); }
.tab { border-width: 1px; transition: all .2s var(--ease); }
.tab:hover { border-color: var(--primary-line); }
.tab.on { background: linear-gradient(180deg, var(--gold-1), var(--gold-2) 55%, var(--gold-3)); border-color: transparent; color: var(--primary-ink); box-shadow: 0 6px 16px var(--glow); }
.logo .pro { box-shadow: 0 4px 14px var(--glow); padding: 0 12px; }
.topnav a { border-radius: 999px; transition: background .2s, color .2s; }
.topnav a.on { background: linear-gradient(180deg, var(--gold-1), var(--gold-2) 55%, var(--gold-3)); color: var(--primary-ink); box-shadow: 0 4px 14px var(--glow); }
.card { border-radius: 24px; border: 1px solid var(--line); background: linear-gradient(160deg, color-mix(in srgb, var(--card2) 55%, var(--card)), var(--card)); box-shadow: var(--shadow); }
.hero-exam { border: 1px solid var(--primary-line); background: radial-gradient(500px 200px at 100% 0%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 70%), linear-gradient(145deg, var(--card2), var(--card)); }
.hello { background: linear-gradient(90deg, var(--text) 30%, var(--gold-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hello em { background: linear-gradient(90deg, var(--gold-1), var(--gold-2), var(--gold-3)); -webkit-background-clip: text; background-clip: text; color: transparent; }
details.lec { border-width: 1px; }
.input, .searchbox { border-width: 1px; background: color-mix(in srgb, var(--card) 85%, #000 15%); }
:root[data-theme="light"] .input, :root[data-theme="light"] .searchbox { background: #fff; }
.input:focus { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 22%, transparent); }
.searchbox:focus-within { box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 22%, transparent); }
mark { background: color-mix(in srgb, var(--primary) 35%, transparent); }
.bottomnav { border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--line)); }
.bottomnav a { transition: background .25s var(--ease), color .2s, transform .15s; }
.bottomnav a.on { background: linear-gradient(180deg, var(--gold-1), var(--gold-2) 55%, var(--gold-3)); color: var(--primary-ink); box-shadow: 0 6px 16px var(--glow); }
.bottomnav a.on svg { filter: drop-shadow(0 1px 0 rgba(255,255,255,.4)); }
:root[data-theme="light"] { --glow: rgba(20,184,166,.3); }
body { background-image: radial-gradient(700px 380px at 90% -10%, rgba(31,200,180,.16), transparent 60%), radial-gradient(600px 360px at 0% 30%, rgba(255,107,94,.08), transparent 60%), linear-gradient(rgba(111,200,230,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(111,200,230,.04) 1px, transparent 1px); background-size: auto, auto, 28px 28px, 28px 28px; }
:root[data-theme="light"] body { background-image: radial-gradient(700px 380px at 90% -10%, rgba(20,184,166,.18), transparent 60%), linear-gradient(rgba(11,30,46,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(11,30,46,.04) 1px, transparent 1px); background-size: auto, 28px 28px, 28px 28px; }
.logo .cursor { display: inline; }
.hello em { background: linear-gradient(90deg, var(--primary), var(--cyan) 50%, var(--sun)); -webkit-background-clip: text; background-clip: text; }
.dot { background: var(--coral); }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px transparent; } }
.land-h { font-size: clamp(32px, 8vw, 54px); font-weight: 900; }
.land-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.term { border-radius: 20px; overflow: hidden; border: 1px solid var(--line); }
.term pre { margin: 0; padding: 16px 18px; font: 13.5px/1.75 ui-monospace, "Cascadia Code", Menlo, monospace; color: #D6E6F0; overflow-x: auto; text-align: left; }
.term .c { font-style: italic; }
.feats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 860px) {
.feats { grid-template-columns: repeat(4, 1fr); }
}
.feat { display: flex; flex-direction: column; gap: 3px; padding: 16px; border-radius: 20px; border: 1px solid var(--line); background: linear-gradient(160deg, var(--card2), var(--card)); transition: transform .2s var(--ease), border-color .2s; }
.feat:hover { border-color: var(--c); }
.feat b { font: 800 18px ui-monospace, monospace; color: var(--c); width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 15%, transparent); margin-bottom: 6px; }
.feat span { font-size: 12px; color: var(--muted); }
:root { --cyan-soft: #1A2A2A; --cyan-line: #2F5C57; --gold-1: #F2B134; --gold-2: #F2B134; --gold-3: #F2B134; --glow: transparent; --shadow: none; }
:root[data-theme="light"] { --gold-1: #1C2027; --gold-2: #1C2027; --gold-3: #1C2027; }
body, :root[data-theme="light"] body { background-image: none; }
.card, .feat, .hero-exam { background: var(--card); box-shadow: none; }
a.card:hover { box-shadow: none; }
.hello, .hello em { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--text); -webkit-text-fill-color: currentColor; }
.hello em { color: var(--primary-text); }
.btn, .icon-btn { background: var(--card); box-shadow: none; border-radius: 12px; }
.btn:hover, .icon-btn:hover { transform: none; box-shadow: none; border-color: var(--text); color: var(--text); }
.btn-primary, .tab.on, .topnav a.on, .bottomnav a.on, .logo .pro { background: var(--primary); color: var(--primary-ink); box-shadow: none; text-shadow: none; }
.btn-primary:hover { filter: none; color: var(--primary-ink); }
.btn-primary::after { display: none; }
.logo .pro { border-radius: 6px; }
.icon-btn { border-radius: 12px; }
.bottomnav { box-shadow: none; border-color: var(--line); background: var(--bg2); backdrop-filter: none; border-radius: 20px; }
.bottomnav a { border-radius: 14px; }
.top { background: var(--bg); backdrop-filter: none; border-bottom: 1px solid var(--line2); }
.term { transform: none; box-shadow: none; background: #101318; }
.term .k { color: #E0533D; }
.term .s { color: #F2B134; }
.term .n { color: #5FA8A0; }
.term .f { color: #ECE6DA; }
.term .c { color: #6B717B; }
.feat:hover { transform: none; }
.input:focus, .searchbox:focus-within { box-shadow: none; border-color: var(--text); }
:root { --font: "Almarai", system-ui, sans-serif; --mono: "Almarai", system-ui, sans-serif; --head: "Marhey", "Almarai", sans-serif; --fun: "Lemonada", "Almarai", sans-serif; }
body { font-family: var(--font); font-weight: 400; line-height: 1.7; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, .hello, .land-h, .logo, .tile .name, .feat strong { font-family: var(--head); font-weight: 600; line-height: 1.35; }
.btn, .tab, .topnav a, .bottomnav a, .logo .pro { font-family: var(--fun); font-weight: 600; }
.splash { display: none; }
html.intro .splash { display: flex; }
html.intro body { overflow: hidden; }
.splash { position: fixed; inset: 0; z-index: 100; color: #ECE6DA; flex-direction: column; align-items: center; justify-content: center; padding: 24px; overflow: hidden; }
.splash.out { opacity: 0; visibility: hidden; transform: scale(1.06); }
.splash::before { content: ""; position: absolute; inset: 0; background-size: 26px 26px; }
@keyframes sym { 0% { opacity: 0; transform: translateY(40px) rotate(-20deg) scale(.6); } 25% { opacity: .9; } 100% { opacity: .35; transform: translateY(-30px) rotate(15deg) scale(1); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop { to { transform: scale(1); } }
@keyframes drop { from { opacity: 0; transform: translate(42px, 90px); } to { opacity: 1; transform: translate(42px, 128px); } }
@keyframes grow { to { transform: scaleX(1); } }
@keyframes bar1 { to { transform: scaleY(.45); } }
@keyframes bar2 { to { transform: scaleY(.75); } }
@keyframes bar3 { to { transform: scaleY(1); } }
@keyframes fade { to { opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes brand { to { opacity: 1; transform: none; } }
@keyframes blink2 { 50% { opacity: 0; } }
.splash .bar { height: 4px; border-radius: 4px; overflow: hidden; margin-top: 8px; }
.splash .bar i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); animation: fill 5s linear forwards; }
@keyframes fill { to { transform: scaleX(1); } }
.splash .skip { position: absolute; z-index: 2; top: calc(18px + env(safe-area-inset-top)); left: 18px; color: #ECE6DA; border: 1px solid #2E343E; border-radius: 999px; padding: 8px 18px; font: 600 13px var(--fun); cursor: pointer; }
.splash .skip:hover { border-color: #F2B134; color: #F2B134; }
@media (prefers-reduced-motion: reduce) {
html.intro .splash { display: none; }
html.intro body { overflow: auto; }
}
body { font-size: 15.5px; line-height: 1.75; letter-spacing: .1px; }
h1, h2, h3, .hello, .land-h { font-weight: 600; letter-spacing: 0; line-height: 1.45; }
h1 { font-size: 26px; }
h2 { font-size: 18px; }
.hello { font-size: 28px; }
.land-h { line-height: 1.35; }
.tile .name { font-size: 15px; font-weight: 500; line-height: 1.5; }
.frow .t { font-weight: 700; }
.btn { font-size: 13px; font-weight: 600; letter-spacing: 0; }
.bottomnav a { font-size: 10px; font-weight: 500; }
.bottomnav a.on { font-weight: 600; }
.topnav a { font-size: 13px; }
.muted, .small { line-height: 1.7; }
.input, .searchbox input { font-family: var(--font); }
.splash { gap: 0; transition: opacity .8s ease, transform .8s ease, visibility .8s; }
.splash::before { background-image: radial-gradient(#ffffff0d 1px, transparent 1px); z-index: 1; }
@keyframes blob { to { transform: translate(6vmax, 5vmax) scale(1.15); } }
.splash .bar, .splash .skip { z-index: 2; }
@keyframes scene-out { to { opacity: 0; transform: translate(-50%, -75%) scale(.85); filter: blur(4px); } }
.splash .bar { position: absolute; bottom: calc(36px + env(safe-area-inset-bottom)); width: min(240px, 60vw); background: rgba(255,255,255,.12); }
.splash .skip { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); backdrop-filter: blur(8px); }
:root { --bg: #160D1A; --bg2: #1C1121; --card: #22152A; --card2: #2C1B36; --line: #3D2849; --line2: #2E1D38; --text: #FFF3EA; --muted: #BFA9C4; --primary: #FF9F1C; --primary-ink: #1A0B10; --primary-soft: #3A2018; --primary-line: #8A5418; --primary-text: #FFB347; --link: #FFB347; --berry: #E62E6B; --mint: #2EC4B6; --coral: #E62E6B; --cyan: #2EC4B6; --sun: #FF9F1C; --green: #2EC4B6; --red: #FF5C8A; --red-soft: #3A1426; --red-line: #7A2448; }
:root[data-theme="light"] { --bg: #FFF7F0; --bg2: #FFFFFF; --card: #FFFFFF; --card2: #FFEFE3; --line: #F1D9CB; --line2: #F7E6DB; --text: #2A0F22; --muted: #7A5A6E; --primary: #FF8A00; --primary-ink: #2A0F22; --primary-soft: #FFEAD2; --primary-line: #FFC27A; --primary-text: #C2185B; --link: #C2185B; --berry: #D81B60; --mint: #0FA597; --coral: #D81B60; --cyan: #0FA597; --green: #0FA597; }
.btn-primary { background: var(--primary); color: var(--primary-ink); }
.btn-primary:hover { background: #FFB347; }
:root[data-theme="light"] .btn-primary:hover { background: #FF9F1C; }
.bottomnav a.on, .topnav a.on, .tab.on { background: var(--primary); color: var(--primary-ink); }
.logo .pro { background: var(--berry); color: #fff; }
.logo .cursor { color: var(--mint); }
.hello em { color: var(--primary-text); }
.dot { background: var(--berry); }
.f1 { --c: var(--primary); }
.f2 { --c: var(--berry); }
.f3 { --c: var(--mint); }
.f4 { --c: var(--primary-text); }
.reviewed { color: var(--mint); }
a.card:hover { border-color: var(--primary); }
.splash { background: #12091A; }
.splash .bar i { background: linear-gradient(90deg, #E62E6B, #FF9F1C, #2EC4B6); animation-duration: 10s; }
.acc-head { display: flex; gap: 16px; align-items: center; padding: 20px; border-color: var(--primary-line); }
.acc-set { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line2); }
.acc-set:first-of-type { border-top: 0; }
.hi { display: flex; align-items: center; gap: 10px; }
.hic { width: 34px; height: 34px; flex: none; border-radius: 11px; display: inline-grid; place-items: center; font-style: normal; color: var(--ic, var(--primary)); background: color-mix(in srgb, var(--ic, var(--primary)) 16%, transparent); }
.acc-set { justify-content: flex-start; }
.acc-set > .btn { flex: none; }
.topnav a { display: inline-flex; align-items: center; gap: 6px; }
.btn svg { flex: none; }
.gsi { display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 44px; }
.or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 16px; background: var(--card2); }
.seg a { display: flex; align-items: center; justify-content: center; gap: 6px; height: 42px; border-radius: 12px; color: var(--muted); font: 600 13px var(--fun); }
.seg a:hover { text-decoration: none; color: var(--text); }
.seg a.on { background: var(--primary); color: var(--primary-ink); }
.inp { position: relative; display: block; }
.inp svg { position: absolute; top: 50%; inset-inline-end: 14px; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.inp .input { padding-inline-end: 44px; }
.inp:focus-within svg { color: var(--primary); }
.gl-art { position: relative; width: 96px; height: 96px; margin: 0 auto; }
.gl-art span { position: absolute; inset: 0; border-radius: 50%; border: 2px dashed var(--line); animation: spin 14s linear infinite; }
.gl-art span:nth-child(2) { inset: 12px; border: 2px solid transparent; border-top-color: var(--primary); border-left-color: var(--berry); animation-duration: 3s; }
.gl-art span:nth-child(3) { inset: -8px; border: 0; animation-duration: 6s; animation-direction: reverse; background: radial-gradient(circle at 50% 0, var(--mint) 0 5px, transparent 6px), radial-gradient(circle at 0 70%, var(--primary) 0 4px, transparent 5px), radial-gradient(circle at 100% 70%, var(--berry) 0 4px, transparent 5px); }
.gl-art b { position: absolute; inset: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: var(--primary-ink); }
.gbtn { position: relative; border-radius: 22px; padding: 2px; background: linear-gradient(120deg, #4285F4, #34A853, #FBBC05, #EA4335, #4285F4); background-size: 300% 300%; animation: gflow 5s linear infinite; transition: transform .2s cubic-bezier(.3,1.4,.5,1); }
@keyframes gflow { to { background-position: 300% 0; } }
.gbtn:hover { transform: translateY(-2px) scale(1.01); }
.gbtn:active { transform: scale(.98); }
@keyframes nudge { 50% { transform: translateX(-5px); } }
html, body { max-width: 100%; overflow-x: clip; }
.feats > *, .grid > * { min-width: 0; }
.term, .term pre { max-width: 100%; }
.top .wrap { min-width: 0; }
.top-actions { min-width: 0; flex-shrink: 1; }
.top-actions > * { flex-shrink: 0; }
@media (max-width: 480px) {
.wrap { padding: 0 12px; }
.top .wrap { gap: 6px; height: 56px; }
.logo { font-size: 20px; gap: 3px; }
.logo .cursor { display: none; }
.logo .pro { font-size: 11px; padding: 1px 6px; }
.top-actions { gap: 5px; }
.icon-btn { width: 36px; height: 36px; }
.icon-btn svg { width: 18px; height: 18px; }
.top-actions .btn-sm { min-height: 36px; padding: 0 12px; font-size: 12.5px; }
.top-actions .icon-btn, .top .logo { position: relative; }
.top-actions .icon-btn::after, .top .logo::after { content: ""; position: absolute; inset: -4px -3px; min-height: 44px; }
.top .logo::after { inset: -9px -4px; }
.bottomnav { left: 6px; right: 6px; bottom: 6px; height: 64px; }
.bottomnav a { margin: 4px 2px; gap: 1px; font-size: 10px; white-space: nowrap; line-height: 1.3; }
.bottomnav a svg { width: 20px; height: 20px; }
}
@media (max-width: 360px) {
.top-actions .btn-sm svg { display: none; }
}
h1 { font-size: 28px; line-height: 1.4; }
h2 { font-size: 20px; line-height: 1.45; }
h3 { font-size: 17px; }
.land-h { line-height: 1.3; }
p { text-wrap: pretty; }
.muted, .tile .foot { color: var(--muted); }
.card, .feat { border-radius: 20px; border-color: var(--line2); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
:root[data-theme="light"] .card, :root[data-theme="light"] .feat { box-shadow: 0 1px 2px rgba(42,15,34,.05), 0 6px 18px rgba(42,15,34,.05); }
.tile { padding: 16px; gap: 10px; }
.tile .name { font-size: 16px; }
.feat b { border-radius: 14px; }
.btn { min-height: 48px; border-radius: 14px; transition: transform .12s ease, filter .15s ease, background .15s ease; }
.card, .tile, .feat, .btn, .tab, .bottomnav a { -webkit-tap-highlight-color: transparent; }
.tile:active, .feat:active, .card a:active, .btn:active, .tab:active, .bottomnav a:active { transform: scale(.97); }
a:focus-visible, button:focus-visible, .input:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.input:focus, .searchbox:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }
.searchbox, .input { border-radius: 16px; }
main.wrap > * + * { margin-top: 18px; }
footer.foot { padding: 16px 0 4px; opacity: .8; }
@media (prefers-reduced-motion: reduce) { .tile:active, .feat:active, .btn:active { transform: none; } }
body { font-size: 16px; line-height: 1.8; }
h1, h2, h3, .hello, .land-h { font-weight: 700; letter-spacing: 0; }
h1 { line-height: 1.5; }
.land-h { line-height: 1.45; }
.tile .name, .feat strong { font-weight: 600; line-height: 1.6; }
.btn { font-size: 14px; font-weight: 600; line-height: 1.6; }
.tab { font-weight: 600; line-height: 1.6; }
.bottomnav a, .bottomnav a:not(#x) { font-size: 11px; font-weight: 600; line-height: 1.5; }
.muted, .tile .foot, .feat span, footer.foot { line-height: 1.7; }
.btn-primary { background: linear-gradient(180deg, #FFB347, var(--primary) 55%, #F28C0F); color: var(--primary-ink); border: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 6px 18px rgba(255,159,28,.28); }
.btn-primary:hover { background: linear-gradient(180deg, #FFC064, #FFA82E 55%, #F59716); filter: none; }
.btn:not(.btn-primary):not(.btn-green) { background: var(--card2); border: 1px solid var(--line); color: var(--text); }
.btn:not(.btn-primary):not(.btn-green):hover { border-color: var(--primary-line); color: var(--primary-text); }
.bottomnav a.on, .topnav a.on, .tab.on { background: linear-gradient(180deg, #FFB347, var(--primary)); color: var(--primary-ink); box-shadow: 0 4px 14px rgba(255,159,28,.3); }
.bottomnav a:not(.on) { color: var(--muted); }
.logo .pro { background: var(--berry); color: #fff; }
:root { --muted: #C7B3CC; --line2: #33213E; }
:root[data-theme="light"] .btn-primary { background: linear-gradient(180deg, #FFA53D, var(--primary)); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 6px 16px rgba(255,138,0,.25); }
:root[data-theme="light"] .btn:not(.btn-primary):not(.btn-green) { background: #fff; }
:root[data-theme="light"] { --muted: #6E4E63; }
:root { --fun: "Lemonada", "Almarai", sans-serif; --num: "Almarai", system-ui, sans-serif; }
.btn, .tab, .topnav a, .bottomnav a { font-family: var(--font); font-weight: 700; letter-spacing: 0; }
.logo .pro { font-family: var(--fun); font-weight: 700; letter-spacing: 0; }
.btn { font-size: 15px; line-height: 1.4; }
.bottomnav a { font-size: 12.5px; line-height: 1.3; }
h1, h2, h3, .hello, .land-h, .logo, .tile .name, .feat strong { font-family: var(--head); }
.tile .name, .feat strong, h3 { font-weight: 700; }
.btn { font-size: 16.5px; }
.btn-sm, .top-actions .btn-sm { font-size: 15px; }
.bottomnav a { font-size: 13.5px; }
nav.bottomnav a, .bottomnav a.on { font-size: 13px !important; }
h3, .tile .name, .feat strong, .hello { font-family: var(--fun); font-weight: 700; font-size: 17px; line-height: 1.5; }
h1, .land-h { font-weight: 700; word-spacing: .06em; }
h2 { font-size: 21px; word-spacing: .05em; }
body { color: var(--text); }
p, .muted, .tile .foot, .feat span { font-size: 15px; }
.hello { font-family: var(--head); font-size: 28px; font-weight: 700; line-height: 1.45; }
.hello, h2.hi { font-family: var(--head); font-weight: 700; background: linear-gradient(90deg, var(--primary), var(--berry)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.hello { font-size: 28px; line-height: 1.5; }
.hello em { font-style: normal; color: var(--primary-text); -webkit-text-fill-color: var(--primary-text); background: none; }
h2.hi { font-size: 20px; line-height: 1.5; width: fit-content; }
h2.hi .hic { -webkit-text-fill-color: initial; }
:root { --bg: #140B19; --card: #20132A; --line: #3A2648; --grad: linear-gradient(135deg, var(--primary), #FF4D8D); --pro-glow: 0 0 28px rgba(255,120,60,.16); --shadow-card: 0 6px 22px rgba(0,0,0,.28); }
:root[data-theme="light"] { --grad: linear-gradient(135deg, #FF8A00, #E91E63); --pro-glow: 0 8px 24px rgba(194,24,91,.10); --shadow-card: 0 6px 20px rgba(27,22,64,.07); }
.btn-primary { background: var(--grad); border-color: transparent; box-shadow: 0 6px 18px rgba(255,90,90,.25); }
.btn-primary:hover { background: var(--grad); filter: brightness(1.08); }
.hero-exam { background: linear-gradient(160deg, var(--primary-soft), var(--card)); box-shadow: var(--pro-glow); }
.tile, .card { box-shadow: var(--shadow-card); }
.tile:hover { box-shadow: var(--shadow-card), var(--pro-glow); }
.tile, .card { border-radius: 18px; box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255,255,255,.04); }
.btn { min-height: 44px; border-radius: 14px; cursor: pointer; transition: transform .2s ease-out, filter .2s ease-out, box-shadow .2s ease-out; }
.btn:active, .tile:active, .bottomnav a:active { transform: scale(.97); }
a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--primary-text); outline-offset: 3px; border-radius: 12px; }
.bottomnav a { min-height: 44px; border-radius: 14px; transition: color .2s ease-out, background .2s ease-out; }
@media (prefers-reduced-motion: reduce) { .btn, .tile, .bottomnav a { transition: none; } .btn:active, .tile:active, .bottomnav a:active { transform: none; } }
body { background:
radial-gradient(120% 60% at 100% -10%, rgba(255,77,141,.10), transparent 55%),
radial-gradient(90% 50% at 0% 0%, rgba(255,159,28,.08), transparent 60%),
var(--bg); background-attachment: fixed; }
:root[data-theme="light"] body { background:
radial-gradient(120% 60% at 100% -10%, rgba(233,30,99,.07), transparent 55%),
radial-gradient(90% 50% at 0% 0%, rgba(255,138,0,.08), transparent 60%), var(--bg); background-attachment: fixed; }
header.top { position: sticky; top: 0; z-index: 25; background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); }
.tile, .card { position: relative; overflow: hidden; background: linear-gradient(180deg, color-mix(in srgb, var(--card) 100%, #fff 3%), var(--card)); }
.tile::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad); opacity: .85; }
.tile svg:first-child { color: var(--primary-text); }
.tile:nth-child(4n+2)::before { background: linear-gradient(135deg, var(--berry), var(--primary)); }
.tile:nth-child(4n+3)::before { background: linear-gradient(135deg, var(--mint), var(--primary)); }
.tile:nth-child(4n+4)::before { background: linear-gradient(135deg, var(--primary), var(--mint)); }
.searchbox { box-shadow: var(--shadow-card); transition: border-color .2s ease-out, box-shadow .2s ease-out; }
.searchbox:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent), var(--shadow-card); }
.bottomnav { background: color-mix(in srgb, var(--card) 78%, transparent); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.hic { box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
@keyframes nz-rise { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes nz-float { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-18px,22px) scale(1.08); } }
@keyframes nz-spin { to { --nz-a: 360deg; } }
@property --nz-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
body::before, body::after { content: ""; position: fixed; z-index: -1; pointer-events: none; border-radius: 50%; filter: blur(60px); opacity: .35; animation: nz-float 14s ease-in-out infinite; }
body::before { width: 260px; height: 260px; top: 8%; right: -80px; background: #FF4D8D; }
body::after { width: 220px; height: 220px; bottom: 12%; left: -70px; background: var(--primary); animation-delay: -7s; }
:root[data-theme="light"] body::before, :root[data-theme="light"] body::after { opacity: .18; }
main, .wrap { position: relative; }
html::after { content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.grid > * { animation: nz-rise .55s cubic-bezier(.2,.8,.2,1) both; }
.grid > *:nth-child(2) { animation-delay: .06s; } .grid > *:nth-child(3) { animation-delay: .12s; } .grid > *:nth-child(4) { animation-delay: .18s; }
.grid > *:nth-child(5) { animation-delay: .24s; } .grid > *:nth-child(n+6) { animation-delay: .3s; }
.hero-exam { position: relative; border: 0; isolation: isolate; }
.hero-exam::before { content: ""; position: absolute; inset: 0; padding: 1.5px; border-radius: inherit; z-index: -1;
background: conic-gradient(from var(--nz-a), var(--primary), #FF4D8D, var(--mint), var(--primary));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: nz-spin 6s linear infinite; }
.tile { transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s; }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.07) 50%, transparent 65%); transform: translateX(-120%); transition: transform .7s ease; pointer-events: none; }
.tile:hover { transform: translateY(-4px) rotate(-.6deg); border-color: var(--primary-line); }
.tile:hover::after { transform: translateX(120%); }
h2.hi { position: relative; padding-bottom: 6px; }
h2.hi::after { content: ""; position: absolute; bottom: -2px; right: 44px; width: 70px; height: 8px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='8' viewBox='0 0 70 8'%3E%3Cpath d='M1 5 Q8 1 15 5 T29 5 T43 5 T57 5 T69 5' fill='none' stroke='%23FF4D8D' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat; opacity: .85; }
.logo .pro { transform: rotate(-6deg); display: inline-block; box-shadow: 0 4px 12px rgba(255,77,141,.35); }
.hic { transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
section:hover .hic { transform: rotate(-10deg) scale(1.08); }
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transform: translateX(-130%); animation: nz-shine 3.5s ease-in-out infinite; }
@keyframes nz-shine { 0%,60% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
.bottomnav a.on { animation: nz-rise .35s cubic-bezier(.3,1.6,.5,1); }
::selection { background: #FF4D8D; color: #fff; }
@media (prefers-reduced-motion: reduce) {
body::before, body::after, .hero-exam::before, .btn-primary::after, .grid > *, .bottomnav a.on { animation: none !important; }
.tile:hover { transform: none; }
}
.av-edit{position:relative;display:inline-block;cursor:pointer;flex:none}
.cf-dlg { font-family: var(--font); line-height: 1.5; width: min(86vw, 320px); border: 1px solid var(--line); border-radius: 16px; background: var(--card); color: var(--text); padding: 14px; box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.cf-dlg[open] { animation: cfIn .22s ease-out; }
.cf-dlg::backdrop { background: rgba(0,0,0,.5); backdrop-filter: blur(3px); }
.cf-dlg h3 { font-family: var(--head); margin: 0 0 8px; font-size: 1rem; text-align: center; }
.cf-dlg ul { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 6px; }
.cf-dlg li { display: grid; gap: 0; padding: 6px 10px; border-radius: 10px; font-size: .9rem; background: var(--bg); border: 1px solid var(--line); overflow-wrap: anywhere; }
.cf-k { font-size: .72rem; opacity: .7; }
.cf-dlg s { opacity: .55; font-size: .8rem; }
.cf-dlg p { margin: 4px 0 0; font-size: .78rem; }
.cf-dlg .btn { font-family: var(--font); min-height: 40px; padding: 0 10px; font-size: .9rem; }
.cf-dlg li b { color: var(--accent); }
.cf-dlg li b::before { content: "← "; opacity: .6; }
.cf-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
@keyframes cfIn { from { opacity: 0; transform: translateY(12px) scale(.97); } }
@media (prefers-reduced-motion: reduce) { .cf-dlg[open] { animation: none; } }
.xh { --xc: var(--red); --xs: var(--red-soft); --xl: var(--red-line); position: relative; overflow: hidden; padding: 22px 18px 18px; border-radius: 20px; border: 1.5px solid var(--xl); background: repeating-linear-gradient(transparent 0 27px, color-mix(in srgb, var(--xc) 9%, transparent) 27px 28px), var(--xs); }
.xh::before { content: ""; position: absolute; inset-block: 0; inset-inline-end: 34px; width: 2px; background: color-mix(in srgb, var(--xc) 35%, transparent); }
.xh { min-height: 150px; }
.xh ~ .tabs, .xh ~ section, .xh ~ .card { animation: xhUp .5s 1.2s ease-out both; }
.xh ~ section:nth-of-type(2) { animation-delay: 1.3s; } .xh ~ section:nth-of-type(3) { animation-delay: 1.4s; }
@keyframes xhInk { from { opacity: 0; transform: translateX(30px) skewX(-12deg); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes xhUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes xhDraw { to { stroke-dashoffset: 0; } }
@keyframes xhStamp { from { opacity: 0; transform: rotate(-16deg) scale(2.4); } to { opacity: .8; transform: rotate(-16deg) scale(1); } }
@keyframes xhFloat { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-12px) rotate(10deg); } }
@media (prefers-reduced-motion: reduce) { .xh *, .xh ~ * { animation: none !important; } }
@keyframes xhHi { to { background-size: 100% 100%; } }
@keyframes xhBars { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes xhStampN { from { opacity: 0; transform: rotate(-8deg) scale(2.2); } to { opacity: .9; transform: rotate(-8deg) scale(1); } }
@keyframes xhPulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--xc) 18%, transparent); } }
@media (prefers-reduced-motion: reduce) { .xh, .xh::before { animation: none !important; } }
html body:not(.pt-none) { background-image: radial-gradient(520px 380px at 105% -5%, color-mix(in srgb, var(--pc) 24%, transparent), transparent 70%), radial-gradient(460px 420px at -10% 60%, color-mix(in srgb, var(--pc) 14%, transparent), transparent 70%), radial-gradient(color-mix(in srgb, var(--pc) 16%, transparent) 1px, transparent 1.5px); background-size: auto, auto, 22px 22px; background-attachment: fixed; }
@keyframes ptDrift { to { background-position: 40px 30px, -30px -20px, 11px 11px; } }
body:not(.pt-none) main .card { border-color: color-mix(in srgb, var(--pc) 26%, var(--line)); }
body:not(.pt-none) .tile { position: relative; overflow: hidden; }
html body:not(.pt-none) .tile::before { height: 4px; opacity: 1; background: linear-gradient(90deg, var(--pc), color-mix(in srgb, var(--pc) 40%, #fff)); }
body:not(.pt-none) .tile:hover { border-color: var(--pc); box-shadow: 0 10px 24px color-mix(in srgb, var(--pc) 22%, transparent); }
body:not(.pt-none) .tab.on { background: var(--pc); border-color: var(--pc); color: #fff; }
body:not(.pt-none) .hi .hic { color: var(--pc); background: color-mix(in srgb, var(--pc) 14%, transparent); }
body:not(.pt-none) .grid > *, body:not(.pt-none) .list > * { animation: xhUp .5s ease-out both; animation-delay: calc(1.1s + var(--i, 0) * 70ms); }
body:not(.pt-none) .grid > :nth-child(2), body:not(.pt-none) .list > :nth-child(2) { --i: 1; } body:not(.pt-none) .grid > :nth-child(3), body:not(.pt-none) .list > :nth-child(3) { --i: 2; }
body:not(.pt-none) .grid > :nth-child(4), body:not(.pt-none) .list > :nth-child(4) { --i: 3; } body:not(.pt-none) .grid > :nth-child(n+5), body:not(.pt-none) .list > :nth-child(n+5) { --i: 4; }
@keyframes accRing { 50% { box-shadow: 0 0 0 3px var(--card), 0 0 0 9px color-mix(in srgb, #f59e0b 45%, transparent); } }
@media (prefers-reduced-motion: reduce) { body:not(.pt-none) * { animation: none !important; } }
.cf-dlg { --sc: #0891b2; }
.cf-dlg [data-y] { background: linear-gradient(140deg, #22b8d6, var(--sc)); color: #fff; border: 0; box-shadow: 0 8px 20px color-mix(in srgb, var(--sc) 35%, transparent); }
.cf-dlg { background: linear-gradient(160deg, color-mix(in srgb, var(--sc) 18%, var(--card)), var(--card) 70%); border-color: color-mix(in srgb, var(--sc) 40%, var(--line)); }
.cf-dlg li { background: color-mix(in srgb, var(--sc) 7%, var(--bg)); border-color: color-mix(in srgb, var(--sc) 28%, var(--line)); }
.cf-dlg li b { color: var(--sc); }
:root:not([data-theme="light"]) .cf-dlg li b { color: #38c6e3; }
.cf-dlg [data-n] { background: transparent; color: var(--text); border: 1.5px solid color-mix(in srgb, var(--sc) 45%, var(--line)); }
:root .cf-dlg .btn[data-y] { background: linear-gradient(140deg, #22b8d6, #0891b2) !important; color: #fff !important; }
:root[data-theme="light"] .cf-dlg [data-n] { color: #0e7490; }
html body:not(.pt-none) .tabs { background: color-mix(in srgb, var(--pc) 12%, var(--card)) !important; border-color: color-mix(in srgb, var(--pc) 30%, transparent) !important; }
html body:not(.pt-none) .tab { color: color-mix(in srgb, var(--pc) 70%, var(--text)) !important; }
html body:not(.pt-none) .tab.on { background: linear-gradient(140deg, var(--pcd), color-mix(in srgb, var(--pcd) 80%, #000)) !important; color: #fff !important; border-color: transparent !important; box-shadow: 0 6px 16px color-mix(in srgb, var(--pc) 35%, transparent) !important; }
html body:not(.pt-none) h2.hi .hic { background: linear-gradient(140deg, var(--pcd), color-mix(in srgb, var(--pcd) 80%, #000)) !important; color: #fff !important; box-shadow: 0 4px 12px color-mix(in srgb, var(--pc) 35%, transparent) !important; }
html body:not(.pt-none) main .card { border-color: color-mix(in srgb, var(--pc) 35%, transparent) !important; background: color-mix(in srgb, var(--pc) 7%, var(--card)) !important; }
html body:not(.pt-none) main .chip { border-color: var(--pc) !important; color: var(--pc) !important; }
html body:not(.pt-none) main .btn-primary { background: linear-gradient(140deg, var(--pcd), color-mix(in srgb, var(--pcd) 80%, #000)) !important; color: #fff !important; }
html body:not(.pt-none) main a:not(.btn):not(.tab):not(.tile):not(.card) { color: var(--pc); }
html body:not(.pt-none)::before, html body:not(.pt-none)::after { background: var(--pc) !important; }
html body:not(.pt-none) { background-color: color-mix(in srgb, var(--pc) 6%, var(--bg)) !important; }
html:has(body:not(.pt-none)) { background: linear-gradient(170deg, color-mix(in srgb, var(--pc) 22%, #0a0f14) 0%, color-mix(in srgb, var(--pc) 9%, #0a0f14) 55%, #0a0f14 100%) fixed !important; }
html[data-theme="light"]:has(body:not(.pt-none)) { background: linear-gradient(170deg, color-mix(in srgb, var(--pc) 20%, #fff) 0%, color-mix(in srgb, var(--pc) 9%, #fff) 55%, #fafafa 100%) fixed !important; }
html body:not(.pt-none) { background-color: transparent !important; }
html body:not(.pt-none) main .card { background: color-mix(in srgb, var(--pc) 9%, color-mix(in srgb, var(--card) 85%, transparent)) !important; }
html body:not(.pt-none) { --sb: #12161c; --st: #f1f3f5; --sm: #a7adb5; }
html[data-theme="light"] body:not(.pt-none) { --sb: #ffffff; --st: #1b1f24; --sm: #5b6470; }
html body:not(.pt-none) main .card, html body:not(.pt-none) .tabs { background: color-mix(in srgb, var(--pc) 10%, var(--sb)) !important; border-color: color-mix(in srgb, var(--pc) 32%, transparent) !important; }
html[data-theme="light"] body:not(.pt-none) main .card, html[data-theme="light"] body:not(.pt-none) .tabs { background: color-mix(in srgb, var(--pc) 5%, var(--sb)) !important; box-shadow: 0 6px 18px color-mix(in srgb, var(--pc) 10%, transparent) !important; }
html body:not(.pt-none) main a:not(.btn):not(.tab):not(.tile):not(.card) { color: color-mix(in srgb, var(--pc) 80%, var(--st)) !important; font-weight: 600; }
html body:not(.pt-none) .tab:not(.on) { color: color-mix(in srgb, var(--pc) 65%, var(--st)) !important; }
html body:not(.pt-none) main h2.hi, html body:not(.pt-none) main .card strong { color: var(--st); }
html body:not(.pt-none) main .muted, html body:not(.pt-none) main .small { color: var(--sm) !important; }
html body:not(.pt-none) header.top, html body:not(.pt-none) .bottomnav { background: color-mix(in srgb, var(--pc) 8%, color-mix(in srgb, var(--sb) 88%, transparent)) !important; border-color: color-mix(in srgb, var(--pc) 25%, transparent) !important; }
html body:not(.pt-none) .icon-btn { background: color-mix(in srgb, var(--pc) 8%, var(--sb)) !important; border-color: color-mix(in srgb, var(--pc) 25%, transparent) !important; color: var(--st) !important; }
html body:not(.pt-none) { --card: color-mix(in srgb, var(--pc) 8%, var(--sb)); }
html[data-theme="light"] body:not(.pt-none) header.top, html[data-theme="light"] body:not(.pt-none) .bottomnav { background: color-mix(in srgb, var(--pc) 6%, rgba(255,255,255,.9)) !important; }
html[data-theme="light"] body:not(.pt-none) .icon-btn { background: color-mix(in srgb, var(--pc) 6%, #fff) !important; }
html body:not(.pt-none) main input:not([type=checkbox]):not([type=radio]) { border-color: var(--pc) !important; outline-color: var(--pc) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--pc) 18%, transparent) !important; }
html body:not(.pt-none) main form { border-color: color-mix(in srgb, var(--pc) 30%, transparent) !important; }
html body:not(.pt-none) header.top .top-actions a.btn.btn-primary.btn-sm[href] { background: linear-gradient(140deg, var(--pcd), color-mix(in srgb, var(--pcd) 80%, #000)) !important; color: #fff !important; border: 0 !important; box-shadow: 0 6px 18px color-mix(in srgb, var(--pc) 40%, transparent), inset 0 1px 0 rgba(255,255,255,.35) !important; text-shadow: 0 1px 1px rgba(0,0,0,.2); }
html body:not(.pt-none) header .btn-primary svg { stroke: #fff; color: #fff; }
html body:not(.pt-none) .bottomnav a.on { background: linear-gradient(140deg, var(--pcd), color-mix(in srgb, var(--pcd) 80%, #000)) !important; color: #fff !important; box-shadow: 0 6px 16px color-mix(in srgb, var(--pc) 40%, transparent) !important; }
html body:not(.pt-none) .bottomnav a.on svg { color: #fff !important; stroke: #fff !important; }
html:not([data-theme="light"]) body:not(.pt-none) .xh { background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--pc) 30%, transparent), transparent 60%), linear-gradient(160deg, color-mix(in srgb, var(--pc) 16%, #161a22), #11141a) !important; border: 1.5px solid color-mix(in srgb, var(--pc) 50%, transparent) !important; box-shadow: 0 12px 30px color-mix(in srgb, var(--pc) 18%, transparent) !important; }
@keyframes emFloat { 50% { transform: translateY(-4px) rotate(8deg); } }
.jump { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: -4px -16px 0; padding: 2px 16px 6px; position: sticky; top: 64px; z-index: 5; }
.jump::-webkit-scrollbar { display: none; }
.jump a { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 7px 8px 7px 14px; border-radius: 999px; font-weight: 700; font-size: 13.5px; color: var(--st, var(--text)) !important; background: color-mix(in srgb, var(--pc) 10%, var(--sb, var(--card))); border: 1px solid color-mix(in srgb, var(--pc) 28%, transparent); backdrop-filter: blur(8px); text-decoration: none; }
.jump a b { min-width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center; font-size: 12px; color: #fff; background: var(--pc); }
.drow { display: grid; grid-template-columns: 40px 1fr 44px; align-items: center; gap: 10px; padding: 14px 0; border-bottom: 1px dashed color-mix(in srgb, var(--pc) 28%, transparent); animation: xhUp .45s ease-out both; }
.drow:last-child { border-bottom: 0; }
.dn { font-family: var(--fun); font-weight: 800; font-size: 22px; line-height: 1; color: color-mix(in srgb, var(--pc) 75%, var(--st, var(--text))); opacity: .55; text-align: center; }
.dt { min-width: 0; display: flex; flex-direction: column; gap: 5px; color: inherit !important; text-decoration: none; font-weight: 400 !important; }
.dt strong { font-size: 16px; font-weight: 700; color: var(--st, var(--text)); line-height: 1.45; overflow-wrap: anywhere; }
.dm { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; color: var(--sm, var(--muted)); }
.dk { font-weight: 700; font-size: 11.5px; padding: 2px 9px; border-radius: 999px; color: var(--k); background: color-mix(in srgb, var(--k) 14%, transparent); }
.dok { color: #16a34a; font-weight: 700; }
.dd { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff !important; background: linear-gradient(140deg, var(--pcd), color-mix(in srgb, var(--pcd) 80%, #000)); box-shadow: 0 6px 14px color-mix(in srgb, var(--pc) 32%, transparent); transition: transform .15s; }
.dd svg { stroke: #fff; } .dd:active { transform: scale(.92); }
.drow:hover .dn { opacity: 1; }
.sh { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 8px; padding: 20px 18px 16px; border-radius: 22px; background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--pc) 28%, transparent), transparent 60%), color-mix(in srgb, var(--pc) 8%, var(--sb, var(--card))); border: 1.5px solid color-mix(in srgb, var(--pc) 40%, transparent); }
@keyframes orb { to { transform: translate(40px, 30px) scale(1.2); } }
@keyframes wordUp { from { opacity: 0; transform: translateY(18px) rotate(-4deg); filter: blur(4px); } }
@keyframes pop { from { opacity: 0; transform: scale(.6); } }
.seg { position: sticky; top: 64px; z-index: 6; display: grid; grid-template-columns: repeat(3, 1fr); padding: 5px; border-radius: 18px; background: color-mix(in srgb, var(--pc) 10%, var(--sb, var(--card))); border: 1px solid color-mix(in srgb, var(--pc) 25%, transparent); backdrop-filter: blur(12px); box-shadow: 0 8px 22px rgba(0,0,0,.12); }
.seg button { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px; border: 0; background: none; font: inherit; font-family: var(--fun); font-weight: 700; font-size: 13.5px; color: var(--sm, var(--muted)); cursor: pointer; transition: color .3s; }
.seg button svg { width: 18px; height: 18px; transition: transform .4s cubic-bezier(.3,1.6,.5,1); }
.seg button b { position: absolute; top: 4px; left: 10px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; font-size: 11px; line-height: 18px; color: var(--pc); background: var(--sb, #fff); }
.seg button[aria-selected="true"] { color: #fff; } .seg button[aria-selected="true"] svg { transform: scale(1.2) rotate(-8deg); stroke: #fff; }
@keyframes paneIn { from { opacity: 0; transform: translateY(14px); } }
@keyframes sheen { 0%, 60% { transform: translateX(100%); } 100% { transform: translateX(-100%); } }
@keyframes nudge { 0%, 80%, 100% { transform: translateX(0); } 88% { transform: translateX(-5px); } 94% { transform: translateX(2px); } }
@keyframes qIn { from { opacity: 0; transform: translateX(-40px) rotate(-2deg); } } @keyframes qOut { to { opacity: 0; transform: translateX(50px) rotate(2deg); } }
@keyframes okPop { 50% { transform: scale(1.04); } } @keyframes shake { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }
@keyframes fall { to { transform: translateY(105vh) rotate(var(--r)); } }
.nw-h { position: relative; overflow: hidden; padding: 22px 18px 0; border-radius: 26px; background: linear-gradient(150deg, color-mix(in srgb, var(--pc) 35%, #120a24), #0f0b1c); color: #fff; isolation: isolate; }
html[data-theme="light"] .nw-h { background: linear-gradient(150deg, var(--pc), color-mix(in srgb, var(--pc) 60%, #000)); }
.nw-h::before { content: ""; position: absolute; z-index: -1; inset: -40%; background: conic-gradient(from 0deg, transparent, color-mix(in srgb, var(--pc) 50%, transparent), transparent 40%); animation: spin 8s linear infinite; opacity: .6; }
@keyframes spin { to { transform: rotate(1turn); } }
@keyframes ping { 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes tick { to { transform: translateX(50%); } }
@keyframes glow { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--pc) 12%, transparent), 0 14px 34px color-mix(in srgb, var(--pc) 25%, transparent); } }
.rv { opacity: 0; transform: translateX(-30px); transition: opacity .6s, transform .6s cubic-bezier(.2,.9,.3,1.2); transition-delay: calc(var(--i, 0) * 90ms); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .nw-h::before { animation: none !important; } .rv { opacity: 1; transform: none; } }
.nw-h::before { inset: auto; width: 260px; height: 260px; top: -100px; left: -80px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--pc) 80%, transparent), transparent 65%); animation: orb 7s ease-in-out infinite alternate; opacity: .9; }
.nw-h::after { content: ""; position: absolute; z-index: -1; width: 200px; height: 200px; bottom: -90px; right: -60px; border-radius: 50%; background: radial-gradient(circle, #ec489988, transparent 65%); animation: orb 10s ease-in-out infinite alternate-reverse; }
.xh { isolation: isolate; }
@keyframes rise { 0% { transform: translateY(0) rotate(0); opacity: 0; } 15% { opacity: .55; } 85% { opacity: .35; } 100% { transform: translateY(-260px) rotate(200deg); opacity: 0; } }
.xh::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.14) 50%, transparent 65%); transform: translateX(120%); animation: hsweep 5s ease-in-out 1.6s infinite; pointer-events: none; }
@keyframes hsweep { 0%, 55% { transform: translateX(120%); } 100% { transform: translateX(-120%); } }
@keyframes markLive { 0%, 100% { transform: translateY(0) rotate(0) scale(1); } 33% { transform: translateY(-10px) rotate(12deg) scale(1.15); } 66% { transform: translateY(5px) rotate(-10deg) scale(.95); } }
.nw-h { padding-bottom: 0; }
@keyframes letterDrop { from { opacity: 0; transform: translateY(-40px) scale(1.6); filter: blur(6px); } }
@keyframes letterGlow { 0%, 100% { text-shadow: 0 0 0 transparent; } 50% { text-shadow: 0 0 18px color-mix(in srgb, var(--pc) 90%, #fff); } }
@keyframes bgSlide { to { background-position: 200% 0; } }
@keyframes shout { 0%, 60%, 100% { transform: rotate(0) scale(1); } 70% { transform: rotate(-14deg) scale(1.12); } 80% { transform: rotate(8deg) scale(1.05); } 90% { transform: rotate(-6deg) scale(1.1); } }
@keyframes redPulse { 50% { box-shadow: 0 0 0 4px rgba(239,68,68,.15), 0 12px 30px rgba(239,68,68,.25); } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes dotPing { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pc) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 10px transparent; } }
@media (prefers-reduced-motion: reduce) { .xh::after { animation: none !important; } }
@keyframes wipeIn { from { clip-path: inset(0 0 0 100%); transform: translateX(-20px); filter: blur(4px); } to { clip-path: inset(0 0 0 0); } }
@keyframes tileIn { from { opacity: 0; transform: translateY(20px) scale(.9); } }
@keyframes icBob { 50% { transform: translateY(-4px) rotate(-6deg); } }
@keyframes spark { to { transform: rotate(var(--a)) translateX(60px); opacity: 0; } }
@keyframes nxGlow { 50% { box-shadow: inset 0 2px 0 rgba(255,255,255,.6), 0 5px 0 #4d7c0f, 0 14px 40px rgba(163,230,53,.6); } }
.cd { flex: none; width: 150px; display: flex; flex-direction: column; gap: 4px; padding: 14px 12px; border-radius: 20px; position: relative; background: linear-gradient(170deg, color-mix(in srgb, var(--t) 22%, var(--sb, var(--card))), var(--sb, var(--card))); border: 1px solid color-mix(in srgb, var(--t) 40%, transparent); animation: tileIn .5s both; animation-delay: calc(var(--i) * 80ms + .3s); }
@property --p { syntax: '<number>'; inherits: true; initial-value: 0; }
@keyframes ringIn { from { --p: 0; } }
.cd strong { margin-top: 6px; font-size: 14px; color: var(--st, var(--text)); line-height: 1.4; } .cd small { font-size: 11.5px; color: var(--sm, var(--muted)); }
.sg { position: relative; overflow-x: auto; scrollbar-width: thin; border-radius: 20px; padding: 10px 0 12px; background: color-mix(in srgb, var(--pc) 5%, var(--sb, var(--card))); border: 1px solid color-mix(in srgb, var(--pc) 22%, transparent);
background-image: radial-gradient(color-mix(in srgb, var(--pc) 22%, transparent) 1px, transparent 1.5px); background-size: 16px 16px; }
.sg > * { min-width: 720px; }
@keyframes dashMove { to { stroke-dashoffset: -80; } } @keyframes fadeIn { from { opacity: 0; } }
@keyframes barGrow { from { transform: scaleX(0); opacity: 0; } } .sg-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; } .sg-t b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sg-t small { font-size: 10.5px; opacity: .9; white-space: nowrap; }
.sg { display: block !important; }
@keyframes tmdash { to { stroke-dashoffset: -240; } }
@keyframes tmin { from { opacity: 0; transform: translateX(40px) scale(.95); } }
@keyframes tmshine { 60%, 100% { transform: translateX(-100%); } }
@keyframes tmbob { 50% { transform: translateY(-3px) rotate(-6deg); } }
@keyframes tmlive { 50% { transform: scale(1.07); } }
@property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes xkspin { to { --a: 360deg; } }
@keyframes xkfloat { to { transform: translate(120px, 90px) scale(1.3); } }
@keyframes xkrot { to { transform: rotate(360deg); } }
@keyframes xkbob { 50% { transform: translateY(-4px) rotate(-8deg); } }
@keyframes xkflip { from { transform: translateY(-60%) scale(.8); opacity: 0; filter: blur(3px); } }
@keyframes xkpulse { 50% { box-shadow: 0 0 0 6px #ef444433; } }
.tm-nx { --bg: #ffffff; --fg: #0f172a; --mu: #64748b; --cell: #f1f5f9;
position: relative; overflow: hidden; isolation: isolate; margin-top: 12px; padding: 14px 14px 18px; border-radius: 22px;
background: linear-gradient(135deg, color-mix(in srgb, var(--t) 14%, var(--bg)), var(--bg) 60%); color: var(--fg);
border: 1.5px solid color-mix(in srgb, var(--t) 40%, transparent); box-shadow: 0 12px 30px color-mix(in srgb, var(--t) 22%, transparent);
animation: nxin .6s cubic-bezier(.2,.9,.3,1.2) both; }
:root:not([data-theme="light"]) .tm-nx { --bg: #0f172a; --fg: #f8fafc; --mu: #94a3b8; --cell: #ffffff10; }
@keyframes nxin { from { opacity: 0; transform: translateY(14px) scale(.97); } }
@keyframes nxblink { 50% { opacity: .2; transform: scale(.6); } }
@keyframes nxstamp { from { opacity: 0; scale: 2.2; } }
@media (prefers-reduced-motion: reduce) { .tm-nx, .tm-nx * { animation: none !important; } }
.tm-nx { border-color: transparent; padding: 16px 16px 20px; }
.tm-nx::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1.5px;
background: conic-gradient(from var(--a, 0deg), color-mix(in srgb, var(--t) 25%, transparent) 0 60%, var(--t) 80%, #06b6d4 92%, color-mix(in srgb, var(--t) 25%, transparent));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
animation: xkspin 5s linear infinite; }
.tm-nx::after { content: ""; position: absolute; inset: 0 0 auto; height: 45%; z-index: -1; border-radius: 22px 22px 0 0;
background: linear-gradient(#ffffff14, transparent); pointer-events: none; }
@keyframes nxlive { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, #ef4444 25%, transparent), 0 12px 30px color-mix(in srgb, var(--t) 30%, transparent); } }
@media (prefers-reduced-motion: reduce) { .tm-nx::before { animation: none !important; } }
@keyframes dvin { from { opacity: 0; transform: translateX(-30px) scale(.9); clip-path: inset(0 0 0 100% round 18px); } to { clip-path: inset(0 round 18px); } }
@keyframes dvgap { 50% { transform: translateY(-3px); } }
.li { width: 1.15em; height: 1.15em; vertical-align: -.2em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
@keyframes v3in { from { opacity: 0; transform: translateX(-18px); } }
@keyframes v3bar { from { transform: scaleY(0); } }
@keyframes v3run { from { transform: translateY(-100%); } to { transform: translateY(340%); } }
@keyframes aga { from { opacity: 0; transform: translateY(12px); } }
@keyframes agpop { from { scale: 0; } }
@keyframes lcflip { 0% { transform: rotateX(-100deg); filter: brightness(.6); } }
@keyframes lcblink { 50% { opacity: .45; } }
@keyframes lclive { 50% { box-shadow: inset 0 0 0 2px var(--sc), 0 0 0 6px color-mix(in srgb, var(--sc) 25%, transparent); } }
.exd { --tx: #f1f5f9; --mu: #94a3b8; --ln: #ffffff14; --pp: #1f2937; --pg: #f8fafc; font-family: "Almarai", sans-serif; color: var(--tx); }
:root[data-theme="light"] .exd { --tx: #0f172a; --mu: #64748b; --ln: #e2e8f0; --pp: #e2e8f0; --pg: #ffffff; }
@keyframes exin { from { opacity: 0; transform: translateY(8px); } }
@keyframes exgr { 0%, 60%, 100% { transform: scale(1) rotate(-8deg); } 70% { transform: scale(1.25) rotate(-8deg); } }
@keyframes exdraw { 0% { stroke-dashoffset: var(--o, 44); } 35%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes expen { 0%, 100% { transform: translate(0, 0); } 15% { transform: translate(-30px, -44px); } 30% { transform: translate(-14px, -32px); } 45% { transform: translate(-28px, -20px); } 60% { transform: translate(-10px, -8px); } }
@media (prefers-reduced-motion: reduce) { .exd * { animation: none !important; } }
.exd { --sc2: color-mix(in srgb, var(--sc) 55%, var(--mu)); }
.sp { --card: #141019; --line: #ffffff12; --tx: #f1f5f9; --mu: #94a3b8; --sh: 0 1px 0 #ffffff08 inset, 0 10px 30px -12px #000a; }
:root[data-theme="light"] .sp { --card: #ffffff; --line: #0f172a0f; --tx: #0f172a; --mu: #64748b; --sh: 0 1px 2px #0f172a0d, 0 12px 28px -14px #0f172a33; }
@keyframes spin { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes spbob { 50% { transform: translateY(-3px) rotate(-3deg); } }
.sp .seg { background: var(--card); border: 1px solid var(--line); box-shadow: var(--sh); border-radius: 18px; padding: 5px; }
.sp .seg button { color: var(--mu); font-weight: 800; gap: 6px; }
.sp .seg button[aria-selected="true"] { color: var(--tx); }
.sp .seg button b { background: color-mix(in srgb, var(--mu) 16%, transparent); color: var(--mu); }
.sp .seg button[aria-selected="true"] b { background: var(--sc); color: #fff; }
.sp details.lec { background: var(--card); border: 1px solid var(--line); box-shadow: var(--sh); border-radius: 18px; margin: 0 0 8px; overflow: hidden;
animation: spin .45s both; animation-delay: calc(var(--i) * .06s); }
.sp details.lec summary { display: flex; align-items: center; gap: 12px; padding: 12px 14px; list-style: none; cursor: pointer; }
.sp details.lec summary::-webkit-details-marker { display: none; }
.sp details.lec summary strong { font: 600 15px/1.4 'Marhey', sans-serif; color: var(--tx); }
.sp details.lec[open] { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--sc) 35%, transparent), var(--sh); }
.sp .drow { border-radius: 12px; }
.sp .dn { color: var(--sc); }
@media (prefers-reduced-motion: reduce) { .sp * { animation: none !important; } }
.u { --card: #15111c; --line: #ffffff10; --tx: #f1f5f9; --mu: #8f9bb0; --press: #ffffff0a; --sh: 0 12px 30px -16px #000c;
display: flex; flex-direction: column; gap: 10px; font-family: "Almarai", sans-serif; color: var(--tx); }
:root[data-theme="light"] .u { --card: #ffffff; --line: #0f172a0d; --tx: #0f172a; --mu: #64748b; --press: #0f172a08; --sh: 0 1px 2px #0f172a0a, 0 10px 24px -14px #0f172a30; }
@keyframes uin { from { opacity: 0; transform: translateY(8px); } }
@keyframes upop { from { opacity: 0; transform: scale(.6) rotate(-8deg); } }
@media (prefers-reduced-motion: reduce) { .u, .u * { animation: none !important; transition: none !important; } }
@keyframes ucode { to { -webkit-mask-position: 240px 480px; mask-position: 240px 480px; } }
@keyframes ushine { to { background-position: -200% center; } }
.u-orb { position: fixed; z-index: -1; width: 260px; height: 260px; border-radius: 50%; pointer-events: none; filter: blur(50px); opacity: .45;
background: var(--sc); top: 10%; inset-inline-start: -90px; animation: uorb 14s ease-in-out infinite alternate; }
:root[data-theme="light"] .u-orb { opacity: .3; }
@keyframes uorb { 50% { transform: translate(60px, 80px) scale(1.2); } to { transform: translate(-20px, 160px) scale(.9); } }
@keyframes ufloat { 50% { transform: translateY(-6px) rotate(-4deg); } }
@media (prefers-reduced-motion: reduce) { .u-orb { animation: none; } }
@keyframes uback { from { opacity: 0; transform: translateX(20px); } }
@keyframes utitle { from { opacity: 0; filter: blur(8px); transform: translateY(14px) scale(.96); clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes uline { from { transform: scaleX(0); } }
@keyframes upop { from { opacity: 0; transform: scale(.3) rotate(-25deg); } }
@keyframes urow { from { opacity: 0; transform: translateX(-40px); } }
@keyframes usweep { to { transform: translateX(-110%); } }
@keyframes uglow { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--sc) 25%, transparent), 0 0 30px color-mix(in srgb, var(--sc) 95%, transparent); } }
@keyframes utxt { 0%, 30% { background-position: 100% center; } 70%, 100% { background-position: 0% center; } }
.u-view { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 999px;
font: 700 12px/1 'Almarai', sans-serif; color: #fff; background: var(--sc); box-shadow: 0 3px 12px color-mix(in srgb, var(--sc) 55%, transparent); transition: transform .2s; }
.u-view i { font-style: normal; font-size: 15px; transition: transform .25s; }
.drow .u-view { text-decoration: none; color: #fff !important; }
.drow { align-items: center; }
.drow:has(.u-view) { grid-template-columns: 34px 1fr auto auto; gap: 8px; }
html body main .drow .dt strong { font: 700 15.5px/1.5 'Almarai', sans-serif !important; letter-spacing: -.2px; }
@media (max-width: 760px) { body::before, body::after { animation: none; } }
@view-transition{navigation:auto}
.bottomnav{view-transition-name:nz-bnav}
header.top{view-transition-name:nz-top}
::view-transition-old(root){animation:nzVtOut .16s ease-in both}
::view-transition-new(root){animation:nzVtIn .28s cubic-bezier(.2,.8,.2,1) both}
@keyframes nzVtOut{to{opacity:0;transform:translateY(-6px)}}
@keyframes nzVtIn{from{opacity:0;transform:translateY(12px)}}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}
[hidden] { display: none !important; }
.skiplink { position: fixed; top: 8px; inset-inline-start: 8px; z-index: 200; padding: 12px 18px; border-radius: 12px; background: var(--text); color: var(--bg) !important; font-weight: 700; text-decoration: none; transform: translateY(-160%); transition: transform .2s; }
.skiplink:focus { transform: none; outline: 3px solid var(--primary); outline-offset: 2px; }
main:focus { outline: none; }
.theme-btn .th-sun, .theme-btn .th-moon { display: contents; }
:root[data-theme="light"] .theme-btn .th-moon, :root:not([data-theme="light"]) .theme-btn .th-sun { display: none; }
.tab { height: 44px; min-height: 44px; }
@media (max-width: 480px) {
.top-actions { gap: 4px; }
.icon-btn { width: 44px; height: 44px; }
.icon-btn svg { width: 20px; height: 20px; }
.top-actions .btn-sm { min-height: 44px; padding: 0 14px; }
.top-actions .icon-btn::after { content: none; }
}
.hx-head a { display: inline-flex; align-items: center; min-height: 44px; }
main label:has(> input[type=checkbox]) { min-height: 44px; cursor: pointer; }
main label > input[type=checkbox] { width: 20px; height: 20px; margin: 0; flex: none; }
:root:not([data-theme="light"]) .logo .pro { background: #D81B60; }
html[data-theme="light"] body:not(.pt-none) main a:not(.btn):not(.tab):not(.tile):not(.card) { color: color-mix(in srgb, var(--pcd) 85%, var(--st)) !important; }
html[data-theme="light"] body:not(.pt-none) .tab:not(.on) { color: color-mix(in srgb, var(--pcd) 80%, var(--st)) !important; }
html[data-theme="light"] body:not(.pt-none) { --sm: #4f5763; }
:root[data-theme="light"] .u { --mu: #4f5b6e; }
:root[data-theme="light"] { --cyan-text: #096359; }
:root .cf-dlg .btn[data-y] { background: linear-gradient(140deg, #0e7490, #155e75) !important; }
.u-view, .drow .u-view { --ink: #14101a; }
@supports (color: oklch(from red l c h)) {
.u-view, .drow .u-view { --ink: oklch(from var(--sc, var(--k, var(--t, var(--pc)))) clamp(0, (0.6 - l) * 1000, 1) 0 0); }
}
.u-view, .drow .u-view { color: var(--ink) !important; }
@keyframes xhRise { from { transform: translateY(14px); } }
@keyframes xhInkT { from { transform: translateX(30px) skewX(-12deg); } }
.xh ~ .tabs, .xh ~ section, .xh ~ .card { animation-delay: .15s; }
.xh ~ section:nth-of-type(2) { animation-delay: .22s; } .xh ~ section:nth-of-type(3) { animation-delay: .3s; }
body:not(.pt-none) .grid > *, body:not(.pt-none) .list > * { animation-delay: calc(.12s + var(--i, 0) * 50ms); }
.nz-off, .nz-off *, .nz-off::before, .nz-off::after, .nz-off *::before, .nz-off *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
.xh::after { animation: none !important; }
}
@media (max-width: 760px) {
header.top, .bottomnav, html body:not(.pt-none) header.top, html body:not(.pt-none) .bottomnav, .jump a, .seg { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
header.top { background: color-mix(in srgb, var(--bg) 94%, transparent); }
.bottomnav { background: color-mix(in srgb, var(--card) 96%, transparent); }
html body:not(.pt-none) header.top, html body:not(.pt-none) .bottomnav { background: color-mix(in srgb, var(--pc) 8%, var(--sb)) !important; }
html[data-theme="light"] body:not(.pt-none) header.top, html[data-theme="light"] body:not(.pt-none) .bottomnav { background: color-mix(in srgb, var(--pc) 6%, #fff) !important; }
body::before, body::after { filter: none; opacity: .3; }
body::before { background: radial-gradient(closest-side, #FF4D8D, transparent); }
body::after { background: radial-gradient(closest-side, var(--primary), transparent); }
html body:not(.pt-none)::before, html body:not(.pt-none)::after { background: radial-gradient(closest-side, var(--pc), transparent) !important; }
}
.err { display: grid; justify-items: center; gap: 12px; margin-top: 24px; padding: 28px 18px !important; text-align: center; }
.err h1 { margin: 0; font-size: clamp(24px, 7vw, 32px); }
.err p { margin: 0; max-width: 32em; }
.top .logo { min-height: 44px; display: inline-flex; align-items: center; }
.dn { font-family: var(--num) !important; font-weight: 800; }
.topnav a { min-height: 44px; display: inline-flex; align-items: center; }
.searchbox input { min-height: 44px; }
@keyframes n3dglow { 50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 0 rgba(30,5,90,.55), 0 2px 0 #2a0874, 0 3px 6px rgba(56,11,148,.45), 0 0 18px rgba(167,125,255,.85); } }
.searchbox input:focus-visible { outline: none; }
.splash.ns{--k:#071318;--k2:#0E2A30;--tl:#1FC8B4;--am:#FFB547;--cr:#FF6B4A;--tx:#ECE6DA;
background:var(--k)!important;color:var(--tx);overflow:hidden;font-family:'Almarai',sans-serif;
padding:24px 20px calc(70px + env(safe-area-inset-bottom))}
.splash.ns::before{display:none}
.splash.ns>*{position:absolute}
.cx-bg{inset:0;background:
radial-gradient(60% 45% at 50% 40%,rgba(31,200,180,.22),transparent 70%),
radial-gradient(40% 30% at 80% 90%,rgba(255,181,71,.12),transparent 70%),
linear-gradient(rgba(31,200,180,.07) 1px,transparent 1px) 0 0/28px 28px,
linear-gradient(90deg,rgba(31,200,180,.07) 1px,transparent 1px) 0 0/28px 28px;
animation:cxIn .6s both}
.cx-rain{inset:0;pointer-events:none}
.cx-rain i{position:absolute;top:-10%;left:var(--x);font:700 15px/1 ui-monospace,monospace;font-style:normal;color:var(--tl);opacity:0;
direction:ltr;animation:cxRain 4.5s var(--d) linear infinite}
.cx-rain i:nth-child(3n){color:var(--am)}
.cx-rain i:nth-child(4n){font-size:22px}
.cx-term{z-index:3;left:0;right:0;margin:auto;top:30%;width:min(330px,86vw);background:#0A1E23;border:1px solid rgba(31,200,180,.4);border-radius:14px;
box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 40px rgba(31,200,180,.15);padding:0 0 14px;overflow:hidden;
animation:cxPop .5s .15s cubic-bezier(.2,1.4,.4,1) both,cxOut .4s 2.7s ease-in forwards}
.cx-th{display:flex;align-items:center;gap:6px;padding:10px 12px;background:var(--k2);direction:ltr}
.cx-th i{width:10px;height:10px;border-radius:50%;background:var(--cr)}.cx-th i+i{background:var(--am)}.cx-th i+i+i{background:var(--tl)}
.cx-th span{margin-left:auto;font:12px ui-monospace,monospace;color:#7FA7A8}
.cx-term p{margin:10px 14px 0;font:700 14px/1.4 'Almarai',sans-serif;white-space:nowrap;overflow:hidden;clip-path:inset(0 0 0 100%)}
.cx-term p.l1{direction:ltr;text-align:left;font-family:ui-monospace,monospace;clip-path:inset(0 100% 0 0);color:var(--tx)}
.cx-term p b{color:var(--tl)}.cx-term p em{font-style:normal;color:var(--tl)}
.cx-term .l4{color:var(--am)}
.cx-term .l1{animation:cxTypeL .5s .45s steps(14) forwards}
.cx-term .l2{animation:cxType .45s 1s steps(16) forwards}
.cx-term .l3{animation:cxType .45s 1.5s steps(16) forwards}
.cx-term .l4{animation:cxType .45s 2s steps(16) forwards}
.cx-scenes{inset:0;display:grid;place-items:center;z-index:3;pointer-events:none}
.sc{grid-area:1/1;display:flex;flex-direction:column;align-items:center;gap:14px;opacity:0}
.sc svg{width:min(150px,40vw);height:auto;filter:drop-shadow(0 10px 30px rgba(31,200,180,.35))}
.sc b{font:400 clamp(40px,13vw,80px)/1.1 'Marhey',sans-serif;color:var(--tx)}
.sc.s1 b{color:var(--tl)}.sc.s2 b{color:var(--am)}.sc.s3 b{color:#fff;text-shadow:0 0 24px rgba(255,181,71,.6)}
.sc.s1{animation:cxScene 1.15s 2.95s both}
.sc.s2{animation:cxScene 1.15s 4.1s both}
.sc.s3{animation:cxScene 1.25s 5.25s both}
.sc .cd{stroke-dasharray:120;stroke-dashoffset:120;animation:cxDraw .7s 3.1s forwards}
.sc.s3 svg{animation:cxLaunch 1.25s 5.25s ease-in both}
.sc .fl{transform-origin:60px 62px;animation:cxFlame .12s linear infinite alternate}
.ns-msg{z-index:4;text-align:center;max-width:440px;left:20px;right:20px;margin:auto;top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;align-items:center}
.cx-logo{display:flex;align-items:baseline;gap:10px;opacity:0;animation:cxSlam .5s 6.4s cubic-bezier(.4,0,.5,1.5) both}
.cx-logo .t{font:400 clamp(64px,21vw,116px)/1.15 'Marhey',sans-serif;color:#fff;text-shadow:0 0 30px rgba(31,200,180,.55),3px 3px 0 var(--tl)}
.cx-logo .p{font:700 clamp(18px,5.5vw,28px) 'Lemonada',sans-serif;color:var(--k);background:var(--am);padding:2px 12px;border-radius:8px;transform:rotate(-6deg)}
.cx-inst{margin:4px 0 0;font-size:13px;font-weight:700;color:var(--tl);background:rgba(31,200,180,.1);border:1px solid rgba(31,200,180,.35);
padding:6px 14px;border-radius:999px;opacity:0;animation:cxUp .5s 6.8s both}
.ns-hi{font:700 clamp(18px,5.4vw,26px)/1.5 'Lemonada',sans-serif;margin:14px 0 4px;opacity:0;animation:cxUp .5s 7.1s both}
.ns-hi em{font-style:normal;color:var(--am)}
.ns-desc{display:grid;min-height:3.4em;align-items:center;font-weight:700;font-size:15.5px;line-height:1.7;color:#fff;margin:0 0 18px}
.ns-desc span{grid-area:1/1;opacity:0;animation:cxLine 2.4s both}
.ns-desc span:nth-child(1){animation-delay:7.4s}
.ns-desc span:nth-child(2){animation-delay:9.2s}
.ns-desc span:nth-child(3){animation-delay:11s}
.ns-desc span:nth-child(4){animation:cxUp .5s 12.8s both}
.cx-go{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:12px;border:0;cursor:pointer;
font:700 18px 'Almarai',sans-serif;color:var(--k);background:linear-gradient(135deg,var(--am),#FFD27A);
border-radius:16px;padding:14px 22px 14px 26px;min-height:56px;overflow:hidden;
box-shadow:0 10px 30px rgba(255,181,71,.35);opacity:0;animation:cxUp .5s 7.6s both,cxBeat 1.8s 8.4s ease-in-out infinite}
.cx-go::before{content:"";position:absolute;inset:-3px;z-index:-2;border-radius:18px;
background:conic-gradient(from var(--g,0deg),var(--tl),transparent 30%,var(--am) 50%,transparent 80%,var(--tl));animation:cxRot 2.4s linear infinite}
.cx-go::after{content:"";position:absolute;inset:2px;z-index:-1;border-radius:14px;background:linear-gradient(135deg,var(--am),#FFD27A)}
.cx-go .ic{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--k);color:var(--tl);font-size:13px}
.cx-go .rk{display:inline-block;animation:cxRk 1s ease-in-out infinite alternate}
.cx-go .tx{background:linear-gradient(105deg,var(--k) 40%,#5a3a00 50%,var(--k) 60%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:cxShine 2.2s 8s linear infinite}
.cx-go:active{transform:scale(.96)}
.cx-go:active .rk{transform:translate(-30px,-30px);opacity:0;transition:.3s}
.cx-hint{margin:10px 0 0;opacity:0;animation:cxUp .5s 8s both}
.cx-hint code{direction:ltr;display:inline-block;font:13px ui-monospace,monospace;color:#7FA7A8}
.cx-hint code::after{content:"_";color:var(--tl);animation:cxBlink 1s steps(1) infinite}
.splash.ns .skip{z-index:6;top:calc(16px + env(safe-area-inset-top));left:16px;background:rgba(255,255,255,.06);border:1px solid rgba(31,200,180,.4);
color:var(--tx);border-radius:999px;padding:9px 18px;font:700 13px 'Almarai',sans-serif;min-height:40px}
.cx-go:focus-visible,.splash.ns .skip:focus-visible{outline:3px solid var(--tl);outline-offset:3px}
.splash.ns .bar{z-index:4;left:0;right:0;margin:auto;bottom:calc(28px + env(safe-area-inset-bottom))}
.splash.ns .bar i{background:linear-gradient(90deg,var(--tl),var(--am));animation-duration:14s}
.splash.ns.out{opacity:0;visibility:hidden;transform:translateY(-100%);filter:none;transition:transform .6s cubic-bezier(.7,0,.3,1),opacity .2s .45s,visibility 0s .6s}
@property --g{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes cxRot{to{--g:360deg}}
@keyframes cxIn{from{opacity:0}}
@keyframes cxRain{0%{opacity:0;transform:translateY(0)}10%{opacity:.35}90%{opacity:.35}100%{opacity:0;transform:translateY(115vh)}}
@keyframes cxPop{from{opacity:0;transform:scale(.7) translateY(30px)}}
@keyframes cxOut{to{opacity:0;transform:scale(1.4);filter:blur(8px)}}
@keyframes cxType{to{clip-path:inset(0 0 0 0)}}
@keyframes cxTypeL{to{clip-path:inset(0 0 0 0)}}
@keyframes cxScene{0%{opacity:0;transform:scale(.5) rotate(-6deg)}18%{opacity:1;transform:scale(1.05)}28%,78%{opacity:1;transform:none}100%{opacity:0;transform:scale(1.3);filter:blur(6px)}}
@keyframes cxDraw{to{stroke-dashoffset:0}}
@keyframes cxLaunch{0%,40%{transform:none}55%{transform:translate(2px,0)}60%{transform:translate(-2px,0)}100%{transform:translateY(-70vh)}}
@keyframes cxFlame{to{transform:scaleY(1.35)}}
@keyframes cxSlam{0%{opacity:0;transform:scale(3);filter:blur(10px)}100%{opacity:1;transform:none;filter:none}}
@keyframes cxUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes cxLine{0%{opacity:0;transform:translateY(16px)}15%,80%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-16px)}}
@keyframes cxBeat{50%{box-shadow:0 10px 40px rgba(255,181,71,.6),0 0 0 8px rgba(31,200,180,.12)}}
@keyframes cxRk{to{transform:translate(-4px,-4px) rotate(-8deg)}}
@keyframes cxShine{to{background-position:-250% 0}}
@keyframes cxBlink{50%{opacity:0}}
@media (max-height:600px){.cx-inst,.cx-hint{display:none}.sc svg{width:90px}}
.cx-cut{inset:0;z-index:3;pointer-events:none}
.ct{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;opacity:0;animation:cxCut .5s steps(1,end) forwards}
.ct i{font-style:normal;font-size:clamp(70px,24vw,120px);line-height:1;animation:cxPunch .5s cubic-bezier(.2,1.6,.4,1) both;animation-delay:inherit}
.ct b{font:400 clamp(46px,15vw,96px)/1.1 'Marhey',sans-serif;padding:.05em .3em;border-radius:12px;transform:rotate(-4deg);animation:cxZoom .5s ease-out both;animation-delay:inherit}
.ct small{font:700 15px 'Almarai',sans-serif;color:var(--tx);opacity:.9}
.ct.c1,.ct.c4{background:var(--tl)}.ct.c1 b,.ct.c4 b{background:var(--k);color:var(--tl)}.ct.c1 small,.ct.c4 small{color:var(--k)}
.ct.c2,.ct.c5{background:var(--am)}.ct.c2 b,.ct.c5 b{background:var(--k);color:var(--am)}.ct.c2 small,.ct.c5 small{color:var(--k)}
.ct.c3,.ct.c6{background:var(--k)}.ct.c3 b,.ct.c6 b{background:var(--tx);color:var(--k)}
.ct.c3 b,.ct.c6 b{transform:rotate(4deg)}
.ct.c1{animation-delay:.25s}.ct.c2{animation-delay:.7s}.ct.c3{animation-delay:1.15s}
.ct.c4{animation-delay:1.6s}.ct.c5{animation-delay:2.05s}.ct.c6{animation-delay:2.5s}
.cx-flash{inset:0;z-index:5;pointer-events:none}
.cx-flash i{position:absolute;inset:0;background:#fff;opacity:0;animation:cxFl .18s ease-out forwards}
.cx-flash i:nth-child(1){animation-delay:.25s}.cx-flash i:nth-child(2){animation-delay:.7s}.cx-flash i:nth-child(3){animation-delay:1.15s}
.cx-flash i:nth-child(4){animation-delay:1.6s}.cx-flash i:nth-child(5){animation-delay:2.05s}.cx-flash i:nth-child(6){animation-delay:2.5s}
.splash.ns.cx{animation:cxShk .45s .25s 6 both}
.sc.s1{animation-delay:3.05s}.sc .cd{animation-delay:3.2s}
@keyframes cxCut{0%{opacity:1}100%{opacity:0}}
@keyframes cxPunch{0%{transform:scale(2.6) rotate(-20deg)}100%{transform:none}}
@keyframes cxZoom{0%{scale:1.8;letter-spacing:.2em}60%{scale:1}100%{scale:1.08}}
@keyframes cxFl{0%{opacity:.85}100%{opacity:0}}
@keyframes cxShk{0%,100%{translate:0}10%{translate:-7px 5px}20%{translate:6px -4px}30%{translate:-3px -3px}40%{translate:0}}
.cx-shat{inset:0;z-index:8;pointer-events:none}
.cx-shat i{position:absolute;inset:0;background:linear-gradient(135deg,#0B2227,#050E11);
animation:cxShard .75s .45s cubic-bezier(.5,0,.9,.4) forwards}
.cx-shat i:nth-child(1){clip-path:polygon(50% 45%,0 0,50% 0)}
.cx-shat i:nth-child(2){clip-path:polygon(50% 45%,50% 0,100% 0)}
.cx-shat i:nth-child(3){clip-path:polygon(50% 45%,100% 0,100% 45%)}
.cx-shat i:nth-child(4){clip-path:polygon(50% 45%,100% 45%,100% 100%)}
.cx-shat i:nth-child(5){clip-path:polygon(50% 45%,100% 100%,50% 100%)}
.cx-shat i:nth-child(6){clip-path:polygon(50% 45%,50% 100%,0 100%)}
.cx-shat i:nth-child(7){clip-path:polygon(50% 45%,0 100%,0 45%)}
.cx-shat i:nth-child(8){clip-path:polygon(50% 45%,0 45%,0 0)}
.cx-shat::after{content:"";position:absolute;inset:0;opacity:0;
background:repeating-conic-gradient(from 0deg at 50% 45%,rgba(255,255,255,.95) 0 .5deg,transparent .5deg 26deg),
radial-gradient(circle at 50% 45%,#fff 0 6px,rgba(31,200,180,.7) 7px 40px,transparent 120px);
animation:cxCrack 1s .1s ease-out forwards}
.cx-shat b{position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,#fff,rgba(255,181,71,.6) 40%,transparent 75%);opacity:0;
animation:cxFl .35s .1s ease-out forwards,cxFl .3s .45s ease-out forwards}
.splash.ns.cx{animation:cxShk .3s .1s 2 both,cxShk .45s .5s 5 both,cxBig .6s 6.4s both}
.cx-logo{position:relative}
.cx-logo .t{position:relative;display:inline-block;animation:cxGl 2.6s 7.2s steps(1) infinite}
.cx-logo .t::before,.cx-logo .t::after{content:attr(data-t);position:absolute;inset:0;mix-blend-mode:screen;text-shadow:none;pointer-events:none}
.cx-logo .t::before{color:var(--cr);animation:cxSpA .7s 6.4s cubic-bezier(.2,.8,.2,1) both}
.cx-logo .t::after{color:var(--tl);animation:cxSpB .7s 6.4s cubic-bezier(.2,.8,.2,1) both}
.cx-logo::after{content:"";position:absolute;inset:0;pointer-events:none;overflow:hidden;
background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.6) 50%,transparent 58%) no-repeat;background-size:300% 100%;background-position:150% 0;
animation:cxSw 1.1s 7s ease-in-out both}
.cx-boom{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none;z-index:-1}
.cx-boom u{position:absolute;left:-40px;top:-40px;width:80px;height:80px;border-radius:50%;border:5px solid var(--am);opacity:0;animation:cxRing .9s 6.45s ease-out forwards}
.cx-boom u:nth-child(2){border-color:var(--tl);animation-delay:6.55s}
.cx-boom u:nth-child(3){border-color:#fff;animation-delay:6.65s}
.cx-boom i{position:absolute;width:5px;height:26px;margin:-13px -2px;border-radius:4px;background:var(--am);opacity:0;
transform:rotate(var(--a));animation:cxSpk .8s 6.45s ease-out forwards}
.cx-boom i:nth-child(odd){background:var(--tl)}
.cx-orb{position:absolute;left:50%;top:55%;width:0;height:0;pointer-events:none}
.cx-orb u{position:absolute;left:-150px;top:-50px;width:300px;height:100px;border-radius:50%;border:2px solid var(--tl);box-shadow:0 0 14px rgba(31,200,180,.6);
opacity:0;animation:cxOI .5s 6.7s both,cxOrb 5s 6.7s linear infinite}
.cx-orb u+u{border-color:var(--am);box-shadow:0 0 14px rgba(255,181,71,.6);--r:55deg;animation-duration:.5s,6.5s;animation-direction:normal,reverse}
@media (max-width:360px){.cx-orb u{left:-120px;width:240px;top:-40px;height:80px}}
@keyframes cxShard{0%{transform:none;opacity:1}100%{transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(.6);opacity:0}}
@keyframes cxCrack{0%{opacity:0;transform:scale(.3)}15%{opacity:1;transform:scale(.7)}35%{opacity:1;transform:none}100%{opacity:0;transform:scale(1.3)}}
@keyframes cxBig{0%{translate:0;filter:none}10%{translate:-14px 10px;filter:brightness(2.2)}25%{translate:12px -8px}40%{translate:-8px -6px;filter:brightness(1.3)}60%{translate:6px 4px}80%{translate:-3px 2px}100%{translate:0;filter:none}}
@keyframes cxSpA{from{transform:translate(-50px,-8px);opacity:1}to{transform:none;opacity:0}}
@keyframes cxSpB{from{transform:translate(50px,8px);opacity:1}to{transform:none;opacity:0}}
@keyframes cxGl{0%,86%{transform:none;text-shadow:0 0 30px rgba(31,200,180,.55),3px 3px 0 var(--tl)}
88%{transform:translateX(4px) skewX(10deg);text-shadow:-6px 2px 0 var(--cr),6px -2px 0 var(--tl)}
92%{transform:translateX(-4px);text-shadow:6px -3px 0 var(--am),-6px 3px 0 var(--cr)}}
@keyframes cxSw{to{background-position:-150% 0}}
@keyframes cxRing{0%{opacity:1;transform:scale(.2)}100%{opacity:0;transform:scale(7);border-width:1px}}
@keyframes cxSpk{0%{opacity:1;transform:rotate(var(--a)) translateY(-20px)}100%{opacity:0;transform:rotate(var(--a)) translateY(-170px) scaleY(.3)}}
@keyframes cxOI{from{opacity:0;scale:.2}to{opacity:1;scale:1}}
@keyframes cxOrb{from{transform:rotateZ(var(--r,-20deg)) rotateX(0)}to{transform:rotateZ(calc(var(--r,-20deg) + 360deg)) rotateX(360deg)}}
.ct{overflow:hidden;perspective:600px}
.ct::before{content:"";position:absolute;inset:-60%;z-index:-1;
background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.22) 0 9deg,transparent 9deg 18deg);
animation:cxBurst .5s linear both;animation-delay:inherit}
.ct::after{content:attr(data-w) attr(data-w);position:absolute;z-index:-1;left:-50%;right:-50%;top:50%;
font:400 120px/1.25 'Marhey',sans-serif;white-space:normal;word-spacing:.2em;text-align:center;
color:transparent;-webkit-text-stroke:2px rgba(0,0,0,.25);transform:translateY(-50%) rotate(-14deg);
animation:cxMarq .5s linear both;animation-delay:inherit}
.ct.c3::after,.ct.c6::after{-webkit-text-stroke-color:rgba(31,200,180,.35)}
.ct.c1{background:radial-gradient(circle at 50% 45%,#5FF0DD,var(--tl) 40%,#0B7C70)}
.ct.c2{background:radial-gradient(circle at 50% 45%,#FFE3A6,var(--am) 40%,#C9741A)}
.ct.c3{background:radial-gradient(circle at 50% 45%,#1C4F57,var(--k) 70%)}
.ct.c4{background:radial-gradient(circle at 50% 45%,#5FF0DD,var(--tl) 40%,#065E55)}
.ct.c5{background:radial-gradient(circle at 50% 45%,#FFB08F,var(--cr) 45%,#8E2A13)}
.ct.c6{background:radial-gradient(circle at 50% 45%,#3A2A0C,var(--k) 70%)}
.ct.c3::before,.ct.c6::before{background:repeating-conic-gradient(from 0deg,rgba(255,181,71,.18) 0 9deg,transparent 9deg 18deg)}
.ct.c5 b{background:var(--k);color:#FFB08F}.ct.c5 small{color:#fff}
.ct.c6 b{background:var(--am);color:var(--k)}
.ct i{filter:drop-shadow(0 12px 0 rgba(0,0,0,.25)) drop-shadow(0 0 30px rgba(255,255,255,.5));animation:cxPunch3 .5s cubic-bezier(.2,1.6,.4,1) both;animation-delay:inherit}
.ct b{box-shadow:8px 8px 0 rgba(0,0,0,.3);animation:cxSlab .5s cubic-bezier(.2,1.4,.3,1) both,cxRgb .12s steps(2) 4;animation-delay:inherit}
.ct small{animation:cxUp .3s .1s both;animation-delay:inherit}
@keyframes cxBurst{from{transform:rotate(0) scale(.6)}to{transform:rotate(60deg) scale(1.3)}}
@keyframes cxMarq{from{transform:translate(20%,-50%) rotate(-14deg)}to{transform:translate(-20%,-50%) rotate(-14deg)}}
@keyframes cxPunch3{0%{transform:scale(3) rotate(-30deg) translateZ(200px);opacity:0}55%{transform:scale(.9) rotate(6deg);opacity:1}100%{transform:scale(1.1) rotate(0)}}
@keyframes cxSlab{0%{transform:rotateX(90deg) scale(1.6);opacity:0}100%{transform:rotate(-4deg);opacity:1}}
@keyframes cxRgb{50%{text-shadow:-4px 0 0 var(--cr),4px 0 0 #5FF0DD}}
.sv2 .splash.ns{--sh:3.3s}.sv3 .splash.ns{--sh:2.65s}
.sv2 .cx-scenes{display:none}
.sv3 .cx-shat,.sv3 .cx-cut,.sv3 .cx-flash{display:none}
.sv3 .sc.s1{animation-delay:.3s}.sv3 .sc.s2{animation-delay:1.45s}.sv3 .sc.s3,.sv3 .sc.s3 svg{animation-delay:2.6s}.sv3 .sc .cd{animation-delay:.45s}
.sv2 .splash.ns.cx{animation:cxShk .3s .1s 2 both,cxShk .45s .5s 5 both,cxBig .6s calc(6.4s - var(--sh)) both}
.sv3 .splash.ns.cx{animation:cxBig .6s calc(6.4s - var(--sh)) both}
:is(.sv2,.sv3) .cx-logo{animation-delay:calc(6.4s - var(--sh))}
:is(.sv2,.sv3) .cx-inst{animation-delay:calc(6.8s - var(--sh))}
:is(.sv2,.sv3) .ns-hi{animation-delay:calc(7.1s - var(--sh))}
:is(.sv2,.sv3) .ns-desc span:nth-child(1){animation-delay:calc(7.4s - var(--sh))}
:is(.sv2,.sv3) .ns-desc span:nth-child(2){animation-delay:calc(9.2s - var(--sh))}
:is(.sv2,.sv3) .ns-desc span:nth-child(3){animation-delay:calc(11s - var(--sh))}
:is(.sv2,.sv3) .ns-desc span:nth-child(4){animation-delay:calc(12.8s - var(--sh))}
:is(.sv2,.sv3) .cx-go{animation-delay:calc(7.6s - var(--sh)),calc(8.4s - var(--sh))}
:is(.sv2,.sv3) .cx-go .tx{animation-delay:calc(8s - var(--sh))}
:is(.sv2,.sv3) .cx-hint{animation-delay:calc(8s - var(--sh))}
:is(.sv2,.sv3) .cx-logo .t{animation-delay:calc(7.2s - var(--sh))}
:is(.sv2,.sv3) .cx-logo .t::before,:is(.sv2,.sv3) .cx-logo .t::after{animation-delay:calc(6.4s - var(--sh))}
:is(.sv2,.sv3) .cx-logo::after{animation-delay:calc(7s - var(--sh))}
:is(.sv2,.sv3) .cx-boom u{animation-delay:calc(6.45s - var(--sh))}
:is(.sv2,.sv3) .cx-boom u:nth-child(2){animation-delay:calc(6.55s - var(--sh))}
:is(.sv2,.sv3) .cx-boom u:nth-child(3){animation-delay:calc(6.65s - var(--sh))}
:is(.sv2,.sv3) .cx-boom i{animation-delay:calc(6.45s - var(--sh))}
:is(.sv2,.sv3) .cx-orb u{animation-delay:calc(6.7s - var(--sh)),calc(6.7s - var(--sh))}
.cx-net{position:absolute;inset:0;pointer-events:none;z-index:1;animation:netOut .8s 2.4s both}
.cx-net i{position:absolute;top:0;left:var(--x);width:2px;height:var(--h);background:linear-gradient(#2dd4bf00,#2dd4bf99);box-shadow:0 0 8px #2dd4bf;transform-origin:top;transform:scaleY(0);animation:netDrop .7s var(--d) cubic-bezier(.2,.8,.2,1) both}
.cx-net i::before{content:"";position:absolute;left:-2px;width:6px;height:28px;border-radius:3px;background:linear-gradient(#fff0,#fff,#f5c542);box-shadow:0 0 12px #f5c542;animation:netFlow 1s calc(var(--d) + .4s) linear infinite}
.cx-net i::after{content:"";position:absolute;bottom:-5px;left:-4px;width:10px;height:10px;border-radius:50%;background:#2dd4bf;box-shadow:0 0 14px #2dd4bf,0 0 4px #fff;transform:scale(0);animation:netNode .35s calc(var(--d) + .65s) both}
.cx-net b{position:absolute;top:var(--y);left:var(--l);width:var(--w);height:2px;background:linear-gradient(90deg,#2dd4bf,#f5c542,#2dd4bf);box-shadow:0 0 8px #2dd4bf;transform:scaleX(0);transform-origin:left;animation:netLink .4s var(--d) ease-out both}
@keyframes netDrop{to{transform:scaleY(1)}}
@keyframes netFlow{from{top:-28px;opacity:0}20%{opacity:1}to{top:100%;opacity:0}}
@keyframes netNode{60%{transform:scale(1.6)}to{transform:scale(1)}}
@keyframes netLink{to{transform:scaleX(1)}}
@keyframes netOut{to{opacity:.12}}
@media (prefers-reduced-motion:reduce){.cx-net{display:none}}
@supports (height: 1cqh) {
.cx-net i { container-type: size; }
.cx-net i::before { top: 0; animation-name: netFlowT; }
@keyframes netFlowT { from { transform: translateY(-28px); opacity: 0 } 20% { opacity: 1 } to { transform: translateY(100cqh); opacity: 0 } }
}
html body main a.nz-back:not(#x) {
display: inline-flex; align-items: center; gap: 6px; width: fit-content; min-height: 40px; margin: 0 0 12px; padding: 0 16px;
border-radius: 999px; border: 0; color: #fff !important; text-decoration: none;
font: 800 13px/1 'Almarai', sans-serif; text-shadow: 0 1px 3px #0005;
background: linear-gradient(120deg, #7c3aed, #5b16d6) !important;
box-shadow: 0 4px 14px rgba(98, 40, 220, .35); transition: transform .15s, filter .2s;
}
html body main a.nz-back:not(#x) i { font-style: normal; color: #fff !important; transition: transform .2s; }
html body main a.nz-back:not(#x):hover { filter: brightness(1.1); text-decoration: none; }
html body main a.nz-back:not(#x):hover i { transform: translateX(3px); }
html body main a.nz-back:not(#x):active { transform: scale(.95); }
@media (prefers-reduced-motion: reduce) { html body main a.nz-back:not(#x), html body main a.nz-back:not(#x) i { transition: none; } }
@font-face {
font-family: 'Tajawal';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/static/fonts/86dcc0150b.woff2) format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
font-family: 'Tajawal';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/static/fonts/a9e8e937c5.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Tajawal';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/static/fonts/bd45ba01ba.woff2) format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
font-family: 'Tajawal';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/static/fonts/abeac1b789.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Tajawal';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/static/fonts/18fca0c18f.woff2) format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
font-family: 'Tajawal';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/static/fonts/aba40d14b5.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Tajawal';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url(/static/fonts/2e9470a653.woff2) format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
font-family: 'Tajawal';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url(/static/fonts/0bda75704b.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
.ui2 {
--n2-bg: #05101c; --n2-bg2: #0a1828; --n2-box: #071422; --n2-box2: #0a1727;
--n2-line: rgba(70, 105, 160, .2); --n2-line2: rgba(80, 115, 175, .3);
--n2-text: #ffffff; --n2-sub: #c9cfdc; --n2-mut: #aab2c5; --n2-ico: #e6dcff;
--n2-p1: #6d28ef; --n2-p2: #380b94; --n2-pb: #7c3aed; --n2-pl: #a35df3; --n2-glow: rgba(110, 40, 240, .45);
--n2-green: #62ec3a;
--n2-r-bg: rgba(200, 16, 40, .32); --n2-r: #ff5468;
--n2-b-bg: rgba(0, 110, 230, .3); --n2-b: #2ec5ff;
--n2-v-bg: rgba(125, 35, 220, .38); --n2-v: #d27bff;
--n2-g-bg: rgba(20, 170, 70, .28); --n2-g: #4fe377;
background: radial-gradient(120% 60% at 50% 0, var(--n2-bg2), var(--n2-bg) 70%) fixed, var(--n2-bg);
color: var(--n2-text);
padding-bottom: calc(112px + env(safe-area-inset-bottom));
}
:root[data-theme="light"] .ui2 {
--n2-bg: #f2f5fa; --n2-bg2: #e6edf7; --n2-box: #ffffff; --n2-box2: #f5f7fc;
--n2-line: rgba(30, 60, 110, .12); --n2-line2: rgba(30, 60, 110, .18); --n2-p2: #4c12c4;
--n2-text: #15122b; --n2-sub: #4d4966; --n2-mut: #5f5b78; --n2-ico: #4a4566;
--n2-glow: rgba(98, 40, 220, .32); --n2-green: #17a34a;
--n2-r-bg: #fde4e7; --n2-r: #c0182c;
--n2-b-bg: #e0edff; --n2-b: #0a5fc4;
--n2-v-bg: #efe4ff; --n2-v: #7027d6;
--n2-g-bg: #daf5e3; --n2-g: #12773a;
}
.ui2 .foot, .ui2::before, .ui2::after { display: none; }
html:has(> body.ui2) { background: #05101c !important; }
html[data-theme="light"]:has(> body.ui2) { background: #f2f5fa !important; }
html:has(> body.ui2)::before, html:has(> body.ui2)::after { display: none !important; }
html body.ui2:not(#x) { background: radial-gradient(120% 50% at 50% 0, var(--n2-bg2), var(--n2-bg) 70%) fixed, var(--n2-bg) !important; }
html body.ui2 main a.n2-go:not(#x) { color: #fff !important; font-weight: 700; }
html body.ui2 main a.n2-back:not(#x) { color: var(--n2-pl) !important; }
html[data-theme="light"] body.ui2 main a.n2-back:not(#x) { color: var(--n2-p2) !important; }
.ui2 main.wrap { max-width: 640px; padding: 0 12px; }
.ui2 :focus-visible { outline: 2px solid var(--n2-pl); outline-offset: 2px; }
.n2-top { max-width: 640px; margin: 0 auto; padding: 16px 12px 0; padding-top: max(16px, env(safe-area-inset-top)); }
.n2-top-in {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
height: 64px; padding: 0 9px; border-radius: 22px;
background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0)), var(--n2-box);
border: 1px solid var(--n2-line2);
}
.n2-acts { display: flex; gap: 10px; }
.n2-ib {
display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 14px;
background: var(--n2-box2); border: 1px solid var(--n2-line2); color: var(--n2-text); cursor: pointer;
transition: background .2s, transform .15s;
}
.n2-ib:hover { background: color-mix(in srgb, var(--n2-p1) 14%, var(--n2-box2)); text-decoration: none; }
.n2-ib:active { transform: scale(.94); }
.n2-ib[data-done] { color: var(--n2-green); border-color: var(--n2-green); }
.n2-logo { font: 800 26px/1 var(--font); color: var(--n2-text); white-space: nowrap; letter-spacing: 0; }
.n2-logo:hover { text-decoration: none; }
.n2-logo span { color: var(--n2-green); }
.n2 { padding-top: 12px; }
.n2-tabs {
display: grid; grid-template-columns: 1fr 1fr; height: 54px; border-radius: 20px; overflow: hidden;
background: var(--n2-box); border: 1px solid var(--n2-line);
}
.n2-tabs button {
position: relative; display: flex; align-items: center; justify-content: center; gap: 12px;
border: 0; border-radius: 19px; background: transparent; color: var(--n2-sub);
font: 700 18px/1 var(--font); cursor: pointer; transition: color .2s, background .2s;
}
.n2-tabs button svg { color: var(--n2-ico); }
.n2-tabs button.on {
color: #fff; background: linear-gradient(90deg, var(--n2-p1), var(--n2-p2));
box-shadow: 0 6px 22px var(--n2-glow), inset 0 1px 0 rgba(255,255,255,.16);
}
.n2-tabs button.on svg { color: #fff; }
.n2-tabs button.on::after {
content: ""; position: absolute; bottom: 0; left: 50%; width: 34px; height: 4px; margin-left: -17px;
border-radius: 4px 4px 0 0; background: var(--n2-pl);
}
.n2-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 24px 0 14px; min-height: 40px; }
.n2-h { display: flex; align-items: center; gap: 10px; font: 800 20px/1.3 var(--font); color: var(--n2-text); }
.n2-h::before { content: ""; flex: none; width: 4px; height: 24px; border-radius: 4px; background: linear-gradient(180deg, var(--n2-pl), var(--n2-p1)); }
.n2-sel { position: relative; display: block; }
.n2-sel select {
appearance: none; -webkit-appearance: none; height: 40px; min-width: 128px; padding: 0 16px 0 44px;
border-radius: 20px; border: 1px solid var(--n2-line2); background: var(--n2-box);
color: var(--n2-sub); font: 400 15px/1 var(--font); cursor: pointer;
}
.n2-sel svg { position: absolute; left: 14px; top: 50%; margin-top: -10px; color: var(--n2-text); pointer-events: none; }
.n2-feed, .n2-cards { list-style: none; margin: 0; padding: 0; }
.n2-feed { border-top: 1px solid var(--n2-line); }
.n2-row, .n2-card { display: flex; align-items: center; gap: 14px; }
.n2-row { padding: 14px 0; border-bottom: 1px solid var(--n2-line); min-height: 100px; }
.n2-ic {
position: relative; flex: none; display: grid; place-items: center; width: 60px; height: 62px; border-radius: 14px;
background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,0)), var(--n2-box2); border: 1px solid var(--n2-line);
}
.n2-ic img { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0,0,0,.28)); }
.n2-ping { position: absolute; top: 5px; right: 5px; width: 9px; height: 9px; border-radius: 50%; background: #ff4757; box-shadow: 0 0 0 3px var(--n2-box2); }
.n2-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.n2-tag {
display: inline-flex; align-items: center; gap: 6px; height: 21px; padding: 0 10px; border-radius: 11px;
font: 700 12.5px/1 var(--font);
}
.n2-tag i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.t-red { background: var(--n2-r-bg); color: var(--n2-r); }
.t-blue { background: var(--n2-b-bg); color: var(--n2-b); }
.t-violet { background: var(--n2-v-bg); color: var(--n2-v); }
.t-green { background: var(--n2-g-bg); color: var(--n2-g); }
.n2-tx h3 { margin: 0; font: 800 16px/1.45 var(--font); color: var(--n2-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.n2-tx p { margin: 0; max-width: 100%; font: 400 13.5px/1.55 var(--font); color: var(--n2-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.n2-time { display: inline-flex; align-items: center; gap: 6px; font: 400 13.5px/1.4 var(--font); color: var(--n2-mut); }
.n2-time svg { color: var(--n2-mut); }
.n2-go {
flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
height: 38px; padding: 0 14px 0 12px; border-radius: 19px;
background: linear-gradient(90deg, var(--n2-p1), var(--n2-p2)); border: 1px solid color-mix(in srgb, var(--n2-pb) 75%, transparent);
color: #fff; font: 700 15px/1 var(--font); box-shadow: 0 4px 16px rgba(90, 25, 210, .3), inset 0 1px 0 rgba(255,255,255,.12);
transition: filter .2s, transform .15s;
}
.n2-go:hover { text-decoration: none; filter: brightness(1.12); }
.n2-go:active { transform: scale(.96); }
.n2-chips { display: flex; gap: 5px; margin: 18px -12px 0; padding: 4px 10px 8px; overflow-x: auto; scrollbar-width: none; }
.n2-chips::-webkit-scrollbar { display: none; }
.n2-chips button {
flex: none; display: inline-flex; align-items: center; gap: 3px; height: 38px; padding: 0 8px; margin: 0;
border-radius: 19px; border: 1px solid var(--n2-line2); background: var(--n2-box); letter-spacing: 0; min-height: 0;
color: var(--n2-text); font: 400 13px/1 var(--font); cursor: pointer; transition: background .2s, color .2s;
}
.n2-chips button svg { flex: none; width: 17px; height: 17px; color: var(--n2-ico); }
.n2-chips .n2-alert svg { width: 19px; height: 19px; }
.n2-chips button.on { min-width: 54px; justify-content: center; border-color: transparent; color: #fff; font-weight: 700;
background: linear-gradient(90deg, #7a2ff7, #5f17e6); box-shadow: 0 6px 18px var(--n2-glow); }
.n2-alert svg { color: #f43f5e !important; display: block; }
.n2-cards { display: flex; flex-direction: column; gap: 10px; }
.n2-card {
padding: 12px; border-radius: 16px; min-height: 88px;
background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)), var(--n2-box); border: 1px solid var(--n2-line);
}
.n2-card .n2-ic { width: 48px; height: 48px; border-radius: 13px; }
.n2-card .n2-ic img { width: 36px; height: 36px; }
.n2-card .n2-tx { gap: 3px; }
.n2-card .n2-tag { height: 19px; font-size: 11.5px; padding: 0 8px; }
.n2-card h3 { font-size: 14.5px; line-height: 1.5; }
.n2-card p { font-size: 12.5px; }
.n2-card .n2-time { font-size: 12.5px; }
.n2-card .n2-go { height: 36px; padding: 0 12px 0 9px; gap: 4px; font-size: 13.5px; }
.n2-card .n2-go svg { width: 16px; height: 16px; }
.tone-red { --tc: 240, 40, 60; color: #ff4256; }
.tone-blue { --tc: 30, 130, 255; color: #2f8dff; }
.tone-amber { --tc: 255, 170, 30; color: #ffb21f; }
.tone-violet { --tc: 140, 70, 255; color: #a35cff; }
.tone-purple { --tc: 170, 60, 255; color: #b54cff; }
.tone-teal { --tc: 20, 190, 235; color: #22c8ef; }
.tone-slate { --tc: 140, 160, 200; color: #c3cbdb; }
.tone-rose { --tc: 245, 40, 90; color: #ff3d6e; }
.n2-ic[class*="tone-"] { background: linear-gradient(160deg, rgba(var(--tc), .2), rgba(var(--tc), .05)), var(--n2-box2); border-color: rgba(var(--tc), .38); }
:root[data-theme="light"] .n2-ic[class*="tone-"] { background: rgba(var(--tc), .1); border-color: rgba(var(--tc), .3); }
.n2-ai { width: 34px; height: 34px; overflow: visible; filter: drop-shadow(0 3px 6px rgba(var(--tc), .45)); }
.n2-one .n2-ai { width: 38px; height: 38px; }
.n2-sprite { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.n2 { position: relative; }
.n2-badge { position: absolute; right: 5px; bottom: 6px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
background: linear-gradient(180deg, #34d058, #16a34a); box-shadow: 0 0 0 2.5px var(--n2-box2), 0 3px 6px rgba(0,0,0,.3); }
.n2-badge svg { width: 14px; height: 14px; }
.n2-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 28px 0; padding: 28px 16px; text-align: center;
border: 1px dashed var(--n2-line2); border-radius: 16px; color: var(--n2-sub); font: 400 15px/1.7 var(--font); }
.n2-empty img { width: 56px; height: 56px; opacity: .9; }
.n2-empty[hidden], .n2-row[hidden], .n2-card[hidden], .n2-pane[hidden] { display: none !important; }
.n2-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--n2-pl); font: 700 15px/1 var(--font); }
.n2-back:hover { text-decoration: none; }
.n2-one { margin-top: 4px; padding: 20px 16px; border-radius: 18px; background: var(--n2-box); border: 1px solid var(--n2-line); }
.n2-one .n2-ic { width: 64px; height: 64px; }
.n2-one .n2-ic img { width: 46px; height: 46px; }
.n2-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 8px; }
.n2-one h1 { margin: 0; font: 800 22px/1.5 var(--font); color: var(--n2-text); }
.n2-meta { margin: 8px 0 0; color: var(--n2-mut); font: 400 14px/1.6 var(--font); }
.n2-body { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--n2-line); white-space: pre-line; overflow-wrap: anywhere; font: 400 16px/1.9 var(--font); color: var(--n2-text); }
.n2-nav {
position: fixed; z-index: 30; left: 8px; right: 8px; bottom: calc(10px + env(safe-area-inset-bottom));
max-width: 600px; margin: 0 auto; height: 76px; padding: 6px; border-radius: 28px;
display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px;
background: color-mix(in srgb, var(--n2-box) 92%, transparent); border: 1px solid var(--n2-line2);
-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
:root[data-theme="light"] .n2-nav { box-shadow: 0 10px 30px rgba(40,30,90,.12); }
.n2-nav a {
position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
border-radius: 22px; color: var(--n2-ico); font: 700 13.5px/1 var(--font); transition: background .2s, color .2s;
}
.n2-nav a:hover { text-decoration: none; color: var(--n2-text); }
.n2-nav a.on {
color: #fff; margin-top: -6px; margin-bottom: -2px;
background: linear-gradient(180deg, #7430f2, #5410cb);
box-shadow: 0 8px 26px var(--n2-glow), inset 0 1px 0 rgba(255,255,255,.2);
}
.n2-nav .dot { position: absolute; top: 9px; right: calc(50% - 18px); width: 9px; height: 9px; border-radius: 50%; background: #ff4757; }
.n2-nav .dot[hidden] { display: none; }
@media (max-width: 370px) {
.n2-top-in { padding: 0 7px; }
.n2-acts { gap: 6px; }
.n2-logo { font-size: 23px; }
.n2-row { gap: 10px; }
.n2-card { gap: 10px; padding: 10px; }
.n2-nav a { font-size: 12.5px; }
}
.n2 { padding-top: 8px; }
.n2-tabs { height: 46px; border-radius: 16px; }
.n2-tabs button { gap: 8px; border-radius: 15px; font-size: 16px; }
.n2-tabs button svg { width: 21px; height: 21px; }
.n2-tabs button.on::after { width: 28px; height: 3px; margin-left: -14px; }
.n2-chips { margin-top: 12px; padding-bottom: 4px; }
.n2-chips button { height: 34px; font-size: 12.5px; border-radius: 17px; }
.n2-chips button svg { width: 15px; height: 15px; }
.n2-chips .n2-alert svg { width: 17px; height: 17px; }
.n2-hd { margin: 14px 0 8px; min-height: 32px; }
.n2-h { font-size: 17px; gap: 8px; }
.n2-h::before { height: 20px; }
.n2-row { gap: 12px; padding: 10px 0; min-height: 0; }
.n2-ic { width: 50px; height: 50px; border-radius: 13px; }
.n2-ic img { width: 36px; height: 36px; }
.n2-ping { top: 4px; right: 4px; width: 8px; height: 8px; }
.n2-badge { right: 3px; bottom: 3px; width: 18px; height: 18px; }
.n2-badge svg { width: 11px; height: 11px; }
.n2-tx { gap: 2px; }
.n2-tag { height: 19px; padding: 0 8px; font-size: 11.5px; gap: 5px; }
.n2-tag i { width: 6px; height: 6px; }
.n2-tx h3 { font-size: 14.5px; line-height: 1.45; }
.n2-tx p { font-size: 12.5px; line-height: 1.5; }
.n2-time { font-size: 12px; gap: 5px; }
.n2-time svg { width: 14px; height: 14px; }
.n2-go { height: 34px; padding: 0 11px 0 8px; gap: 4px; font-size: 13.5px; border-radius: 17px; }
.n2-go svg { width: 16px; height: 16px; }
.n2-cards { gap: 8px; }
.n2-card { gap: 12px; padding: 10px; min-height: 0; border-radius: 14px; }
.n2-card .n2-ic { width: 44px; height: 44px; border-radius: 12px; }
.n2-card h3 { font-size: 14px; }
.n2-card p, .n2-card .n2-time { font-size: 12px; }
.n2-card .n2-go { height: 32px; font-size: 13px; padding: 0 10px 0 8px; }
.n2-card .n2-go svg { width: 15px; height: 15px; }
.n2-ai { width: 28px; height: 28px; }
.n2-one .n2-ic { width: 56px; height: 56px; }
.n2-one .n2-ai { width: 34px; height: 34px; }
.n2-one h1 { font-size: 19px; }
.n2-body { font-size: 15px; }
.ui2 { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
.n2-nav { height: 64px; padding: 5px; border-radius: 24px; }
.n2-nav a { gap: 4px; border-radius: 19px; font-size: 12px; }
.n2-nav a svg { width: 21px; height: 21px; }
.n2-nav a.on { margin-top: -4px; margin-bottom: -1px; }
.n2-nav .dot { top: 7px; width: 8px; height: 8px; }
.n2-ic { perspective: 220px; }
.n2-ic > img, .n2-ic > .n2-ai { animation: n2-float 4.8s ease-in-out infinite; transform-origin: 50% 60%; will-change: transform; }
.n2-feed li:nth-child(3n+2) .n2-ic > img, .n2-cards li:nth-child(3n+2) .n2-ic > .n2-ai { animation-delay: -1.6s; }
.n2-feed li:nth-child(3n) .n2-ic > img, .n2-cards li:nth-child(3n) .n2-ic > .n2-ai { animation-delay: -3.2s; }
@keyframes n2-float {
0%, 100% { transform: translateY(0) rotateY(0) rotateX(0); }
25% { transform: translateY(-2px) rotateY(14deg) rotateX(4deg); }
50% { transform: translateY(-3px) rotateY(0) rotateX(6deg); }
75% { transform: translateY(-2px) rotateY(-14deg) rotateX(4deg); }
}
.n2-empty img { animation: none; }
@media (max-width: 370px) {
.n2-row, .n2-card { gap: 9px; }
.n2-go span { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
.ui2 *, .ui2 *::before, .ui2 *::after { transition: none !important; }
.n2-ic > img, .n2-ic > .n2-ai { animation: none; }
}
.n2 { --font: 'Tajawal', 'Almarai', system-ui, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
.n2 .n2-h { font-weight: 800; font-size: 24px; line-height: 1.2; }
.n2 .n2-tx h3 { font-weight: 700; font-size: 15.5px; line-height: 1.4; }
.n2 .n2-tx p { font-weight: 400; font-size: 13.5px; }
.n2 .n2-time { font-weight: 500; font-size: 12.5px; }
.n2 .n2-chips button { font-weight: 500; }
.n2 .n2-chips button.on { font-weight: 700; }
.n2 .n2-tag { font-weight: 700; }
.n2 a.n2-go { font-size: 14px; }
.n2 .n2-tabs button { font-weight: 700; }
@media (max-width: 430px) {
.n2 .n2-chips { gap: 4px; }
.n2 .n2-chips button { padding: 0 7px; gap: 3px; }
.n2 .n2-chips button.on { min-width: 46px; }
.n2 .n2-chips button svg { width: 14px; height: 14px; }
.n2 .n2-chips .n2-alert svg { width: 16px; height: 16px; }
}
@media (max-width: 379px) {
.n2 .n2-chips { gap: 3px; margin-inline: -10px; padding-inline: 8px; }
.n2 .n2-chips button { padding: 0 6px; gap: 2px; font-size: 12px; }
.n2 .n2-chips button.on { min-width: 40px; }
}
.n2-one .n2-subj { display: inline-flex; margin-top: 18px; height: 44px; padding: 0 16px 0 12px; gap: 6px; max-width: 100%; }
.n2-one .n2-subj span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k2 { --font: 'Tajawal', 'Almarai', system-ui, sans-serif; position: relative; padding-top: 10px; font-family: var(--font);
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
--k-box: #0a1526; --k-line: rgba(88, 120, 175, .26); --k-mut: #a3adc2; --k-tx: #f4f6fb; }
:root[data-theme="light"] .k2 { --k-box: #ffffff; --k-line: rgba(30, 60, 110, .14); --k-mut: #5f5b78; --k-tx: #15122b; }
.k2 > *:not(.k-deco):not(.k-sprite):not(dialog) { position: relative; z-index: 1; }
.k-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.k2 [hidden] { display: none !important; }
.k2 .t-r { --c1: #ffa04a; --c2: #f2700f; --c3: #b84d05; --ct: #ffbe85; }
.k2 .t-b { --c1: #a663ff; --c2: #7a2cf0; --c3: #4e14b8; --ct: #c9a2ff; }
.k2 .t-g { --c1: #4ef08a; --c2: #18bf58; --c3: #0b8a3e; --ct: #7ff0a8; }
.k2 .t-v { --c1: #a663ff; --c2: #7a2cf0; --c3: #4e14b8; --ct: #c9a2ff; }
.k2 .t-c { --c1: #4ef08a; --c2: #18bf58; --c3: #0b8a3e; --ct: #7ff0a8; }
.k2 .t-o { --c1: #ffa04a; --c2: #f2700f; --c3: #b84d05; --ct: #ffbe85; }
.k2 .t-p { --c1: #a663ff; --c2: #7a2cf0; --c3: #4e14b8; --ct: #c9a2ff; }
.k2 .t-y { --c1: #ffa04a; --c2: #f2700f; --c3: #b84d05; --ct: #ffbe85; }
:root[data-theme="light"] .k2 [class*="t-"] { --ct: var(--c3); }
.k-deco { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.k-deco svg { position: absolute; fill: none; stroke: #6b8fd0; stroke-width: 5; opacity: .07; stroke-linecap: round; stroke-linejoin: round; }
:root[data-theme="light"] .k-deco svg { stroke: #6a5bd8; }
.k-deco .dz1 { width: 74px; height: 66px; top: 120px; left: -18px; transform: rotate(-16deg); }
.k-deco .dz2 { width: 60px; height: 54px; top: 64px; left: 44%; transform: rotate(18deg); }
.k-deco .dz3 { width: 70px; height: 70px; top: 92px; right: -16px; }
.k-deco .dz4 { width: 64px; height: 58px; top: 46%; right: -14px; transform: rotate(14deg); }
.k-deco .dz5 { width: 56px; height: 50px; top: 58%; left: -14px; transform: rotate(-12deg); }
.k-deco .dz6 { width: 60px; height: 60px; top: 76%; left: 8%; }
.k-deco .dz7 { width: 66px; height: 60px; bottom: 120px; right: -10px; transform: rotate(-20deg); }
.k-hero { display: flex; align-items: center; gap: 12px; min-height: 84px; padding: 8px 12px 8px 14px; margin-bottom: 10px; overflow: hidden;
border-radius: 18px; border: 1px solid rgba(56, 214, 186, .42);
background: radial-gradient(90% 140% at 100% 50%, rgba(46, 200, 170, .16), transparent 60%), linear-gradient(90deg, #0b2230, #0a1d2c 55%, #0c2633);
box-shadow: 0 0 22px rgba(40, 210, 180, .16), inset 0 1px 0 rgba(255, 255, 255, .06); }
:root[data-theme="light"] .k-hero { border-color: rgba(16, 160, 140, .4);
background: radial-gradient(90% 140% at 100% 50%, rgba(46, 200, 170, .14), transparent 60%), linear-gradient(90deg, #f3fbfa, #ffffff 60%, #eef9f7);
box-shadow: 0 8px 24px rgba(20, 120, 110, .1); }
.k-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; fill: rgba(60, 200, 190, .05); stroke: rgba(70, 210, 195, .28); stroke-width: 2.6;
stroke-linecap: round; stroke-linejoin: round; filter: blur(.4px); pointer-events: none; }
:root[data-theme="light"] .k-hero-bg { stroke: rgba(16, 150, 135, .2); }
.k-art { position: relative; flex: 0 0 66px; width: 66px; height: 62px; }
.k-art svg { width: 100%; height: 100%; overflow: visible; }
.k-hero-tx { position: relative; flex: 1; min-width: 0; }
.k-hero h1 { margin: 0; line-height: 1; }
.k-h1 { position: relative; display: inline-block; font: 800 28px/1.1 var(--font); color: var(--k-tx); letter-spacing: 0; }
.k-h1.k-l { font-size: 24px; }
.k-h1.k-xl { font-size: 20px; line-height: 1.25; }
.k-sw { position: absolute; left: -2px; bottom: -7px; width: 52%; max-width: 70px; height: 12px; fill: none; stroke: #4be27a; stroke-width: 4.2; stroke-linecap: round; }
.k-sub { margin: 5px 0 0; font: 500 14.5px/1.25 var(--font); color: #e6ebf4; }
.k-desc { margin: 2px 0 0; font: 500 12px/1.45 var(--font); color: #cad2e1; }
:root[data-theme="light"] .k-sub { color: #2b2840; }
:root[data-theme="light"] .k-desc { color: #4d4966; }
:root[data-theme="light"] .k-sw { stroke: #17a34a; }
.k-crumbs { display: flex; gap: 6px; overflow-x: auto; margin: 0 0 10px; padding: 2px; scrollbar-width: none; }
.k-crumbs::-webkit-scrollbar { display: none; }
html body.ui2 main .k-crumbs a:not(#x) { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 11px;
background: var(--k-box); border: 1px solid var(--k-line); color: var(--k-mut) !important; font: 700 12.5px/1 var(--font); text-decoration: none; }
html body.ui2 main .k-crumbs a.on:not(#x) { color: #fff !important; background: linear-gradient(180deg, #3d1794, #26105f); border-color: #8f5cff; }
html body.ui2 main .k-crumbs a.k-back:not(#x) { color: #071a0d !important; border-color: transparent; background: linear-gradient(90deg, #8ef47c, #3edc6a); }
.k-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; height: 44px; padding: 4px; margin-bottom: 10px; border-radius: 15px;
background: color-mix(in srgb, var(--k-box) 80%, transparent); border: 1px solid var(--k-line); }
.k-tabs > * { display: flex; align-items: center; justify-content: center; gap: 9px; height: 100%; padding: 0 10px; border-radius: 12px; cursor: pointer;
background: transparent; border: 1px solid var(--k-line); color: #c3cbe0; font: 500 15px/1 var(--font); text-decoration: none;
transition: background .2s, color .2s, box-shadow .2s, transform .15s; }
:root[data-theme="light"] .k-tabs > * { color: #4d4966; }
.k-tabs svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.k-tabs > .on { color: #071a0d !important; font-weight: 800; border-color: transparent;
background: linear-gradient(90deg, #8ef47c, #57e86e 55%, #3edc6a);
box-shadow: 0 0 18px rgba(80, 230, 110, .35), inset 0 1px 0 rgba(255, 255, 255, .45); }
.k-tabs > *:active { transform: scale(.97); }
.k-list { display: flex; flex-direction: column; gap: 10px; }
.k-label { margin: 16px 2px 8px; font: 800 16.5px/1.3 var(--font); color: var(--k-tx); }
html body.ui2 main a.k-row:not(#x), .k-row { position: relative; display: flex; align-items: stretch; gap: 10px; min-height: 60px; padding: 6px; border-radius: 15px; overflow: hidden;
color: var(--k-tx) !important; text-decoration: none;
border: 1.5px solid color-mix(in srgb, var(--c1) 70%, transparent);
background: linear-gradient(270deg, color-mix(in srgb, var(--c2) 26%, #0b1322), color-mix(in srgb, var(--c2) 11%, #0b1322));
box-shadow: 0 0 16px color-mix(in srgb, var(--c2) 32%, transparent), inset 0 1px 0 rgba(255, 255, 255, .06);
animation: k-in .3s ease both; animation-delay: calc(var(--i, 0) * 40ms); transition: transform .15s; }
html body.ui2 main a.k-row:active { transform: scale(.985); }
:root[data-theme="light"] .k-row { border-color: color-mix(in srgb, var(--c2) 45%, transparent) !important;
background: linear-gradient(270deg, color-mix(in srgb, var(--c2) 11%, #fff), #fff) !important;
box-shadow: 0 6px 18px color-mix(in srgb, var(--c2) 14%, transparent) !important; }
@keyframes k-in { from { opacity: 0; transform: translateY(6px); } }
.k-box { flex: 0 0 42px; align-self: center; height: 46px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 3px 2px; border-radius: 11px; color: #fff; text-align: center;
background: linear-gradient(180deg, var(--c1), var(--c2) 55%, var(--c3));
border: 1px solid color-mix(in srgb, var(--c1) 60%, #fff);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 4px 14px color-mix(in srgb, var(--c2) 45%, transparent); }
.t-g .k-box, .t-c .k-box { color: #04220f; }
.k-box small { font: 600 9px/1.1 var(--font); opacity: .92; }
.k-box b { font: 800 17px/1 var(--font); }
.k-box .i3d { width: 26px; height: 26px; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .3)); }
.k-box.k-ext b { font-size: 10.5px; letter-spacing: .5px; direction: ltr; }
.k-body { position: relative; z-index: 1; flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 4px 0; }
.k-t { margin: 0; font: 800 15.5px/1.3 var(--font); color: var(--k-tx); overflow-wrap: anywhere; }
.k-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.k-pills span { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px; border-radius: 11px; white-space: nowrap;
font: 700 11px/1 var(--font); color: var(--ct);
background: color-mix(in srgb, var(--c2) 16%, transparent); border: 1px solid color-mix(in srgb, var(--c1) 34%, transparent); }
.k-pills svg { flex: none; width: 12px; height: 12px; }
.k-pills .k-dr { color: #e8ecf5; }
:root[data-theme="light"] .k-pills .k-dr { color: #2b2840; }
.k-pills .k-nw { color: #fff; background: linear-gradient(180deg, #ff3b63, #e3103d); border-color: transparent; }
.k-ill { position: absolute; left: 58px; top: 50%; width: 64px; height: 42px; margin-top: -21px; z-index: 0; pointer-events: none;
fill: color-mix(in srgb, var(--c2) 14%, transparent); stroke: var(--c1); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; opacity: .3; }
:root[data-theme="light"] .k-ill { opacity: .18; }
.k-go { position: relative; z-index: 1; flex: none; align-self: center; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px 0 0; border-radius: 14px;
background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .12); color: #e9edf5; font: 700 11.5px/1 var(--font); }
.k-go span { display: grid; place-items: center; width: 26px; height: 26px; flex: none; margin: -1px; border-radius: 50%;
background: color-mix(in srgb, var(--c2) 22%, #0b1322); border: 1px solid color-mix(in srgb, var(--c1) 45%, transparent); color: #fff; }
:root[data-theme="light"] .k-go { background: #fff; border-color: rgba(30, 60, 110, .14); color: #2b2840; }
:root[data-theme="light"] .k-go span { background: color-mix(in srgb, var(--c2) 12%, #fff); color: var(--c3); }
.k-empty { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 6px 0; padding: 26px 16px; border-radius: 16px;
border: 1px dashed var(--k-line); color: var(--k-mut); font: 500 15px/1.6 var(--font); }
html:has(.k2), html:has(.k2) body { --pc: #ea580c !important; --pcd: #c2410c !important; }
.ui2 .n2-nav a.on { background: linear-gradient(180deg, #ff8c1f, #f25a06) !important; box-shadow: 0 8px 26px rgba(255, 110, 20, .45), inset 0 1px 0 rgba(255, 255, 255, .28) !important; }
@media (max-width: 380px) {
.k-hero { gap: 10px; padding-inline: 10px 12px; }
.k-art { flex-basis: 58px; width: 58px; height: 56px; }
.k-h1 { font-size: 25px; }
.k-h1.k-l { font-size: 22px; }
.k-h1.k-xl { font-size: 18.5px; }
.k-sub { font-size: 13.5px; }
.k-desc { font-size: 11.5px; }
.k-row { gap: 8px; }
.k-box { flex-basis: 40px; }
.k-t { font-size: 14.5px; }
.k-pills { gap: 4px; }
.k-pills span { padding: 0 6px; font-size: 10.5px; }
.k-go { padding-right: 8px; font-size: 11px; }
.k-go span { width: 24px; height: 24px; }
.k-ill { left: 50px; }
}
@media (prefers-reduced-motion: reduce) { .k-row { animation: none; } }
.kh section { margin-top: 6px; }
.kh .k-label { margin-top: 20px; }
.kh-cta { display: flex; gap: 8px; margin: 2px 0 10px; }
html body.ui2 main a.kh-btn:not(#x) { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 14px;
border-radius: 14px; font: 800 15px/1 var(--font); text-decoration: none; transition: transform .15s; }
html body.ui2 main a.kh-btn:active { transform: scale(.97); }
html body.ui2 main a.kh-main:not(#x) { color: #071a0d !important; border: 0;
background: linear-gradient(90deg, #8ef47c, #57e86e 55%, #3edc6a);
box-shadow: 0 0 18px rgba(80, 230, 110, .3), inset 0 1px 0 rgba(255, 255, 255, .45); }
html body.ui2 main a.kh-ghost:not(#x) { flex: 0 1 auto; color: var(--k-tx) !important; background: var(--k-box); border: 1px solid var(--k-line); font-weight: 700; }
.kh-btn svg { flex: none; }
.kh-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.kh-stats li { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 4px; border-radius: 14px; text-align: center;
background: var(--k-box); border: 1px solid var(--k-line); }
.kh-stats b { font: 800 17px/1.1 var(--font); color: #4be27a; }
.kh-stats small { font: 500 12px/1.2 var(--font); color: var(--k-mut); }
:root[data-theme="light"] .kh-stats b { color: #0b7a35; }
.kh-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 20px 2px 10px; }
.kh-head .k-label { margin: 0; }
html body.ui2 main .kh-head a:not(#x) { flex: none; display: inline-flex; align-items: center; min-height: 34px; padding: 0 13px; border-radius: 12px;
background: var(--k-box); border: 1px solid var(--k-line); color: var(--k-tx) !important; font: 700 13px/1 var(--font); text-decoration: none; }
.kh-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kh-wide { grid-column: 1 / -1; }
html body.ui2 main a.kh-tile:not(.kh-wide):not(#x) { flex-direction: column; align-items: flex-start; gap: 8px; min-height: 0; padding: 10px; }
.kh-tile:not(.kh-wide) .k-box { flex: none; width: 42px; height: 42px; padding: 0; }
.kh-tile:not(.kh-wide) .k-box .i3d { width: 26px; height: 26px; }
.kh-tile:not(.kh-wide) .k-body { gap: 3px; padding: 0 2px 2px; width: 100%; }
.kh-tile:not(.kh-wide) .k-ill { left: 6px; top: 10px; margin: 0; width: 50px; height: 34px; }
.kh-d { display: block; font: 500 12.5px/1.35 var(--font); color: var(--k-mut); overflow-wrap: anywhere; }
:root[data-theme="light"] .kh-d { color: #4d4966; }
html body.ui2 main .kh-file a.k-t:not(#x) { color: var(--k-tx) !important; text-decoration: none; }
.kh-file a.k-t::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: 17px; }
.kh-file a.k-t:focus-visible { outline: none; }
.kh-file:has(a.k-t:focus-visible) { outline: 2px solid #4be27a; outline-offset: 2px; }
.kh-file .k-pills { position: relative; }
html body.ui2 main .k-pills a.kh-dl:not(#x) { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 4px; height: 25px; min-width: 44px; padding: 0 8px;
border-radius: 13px; white-space: nowrap; font: 700 11.5px/1 var(--font); color: #071a0d !important; text-decoration: none;
background: linear-gradient(90deg, #8ef47c, #3edc6a); border: 0; }
.kh-dl::before { content: ''; position: absolute; inset: -10px -4px; }
.kh-dl svg { width: 14px; height: 14px; flex: none; }
.k-pills .kh-dl span { height: auto; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; font: inherit; }
.kh-2l { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.k-box .kh-tm { font-size: 14px; letter-spacing: 0; }
.k-box b + small { margin-top: 1px; }
.kh-no { position: relative; z-index: 1; flex: none; align-self: center; display: grid; place-items: center; width: 40px; height: 40px; margin-left: 4px; border-radius: 50%;
font: 800 14px/1 var(--font); color: var(--ct); background: color-mix(in srgb, var(--c2) 16%, transparent); border: 1px solid color-mix(in srgb, var(--c1) 40%, transparent); }
.kh .k-pills[dir="ltr"] { justify-content: flex-end; }
.kh-me .kh-ph { cursor: pointer; padding: 3px; overflow: hidden; font: inherit; }
.kh-me .kh-ph img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; display: block; }
.kh-me .kh-ph:focus-visible { outline: 2px solid #4be27a; outline-offset: 2px; }
.kh-me .k-body { gap: 5px; }
.kh-me .kh-d { text-align: right; }
.kh-me .id-age { font: inherit; }
.kh-bio { display: grid; gap: 8px; margin: 10px 0 0; }
.kh-bio div { padding: 10px 12px; border-radius: 14px; background: var(--k-box); border: 1px solid var(--k-line); }
.kh-bio dt { font: 800 13px/1.3 var(--font); color: #c9a2ff; }
.kh-bio dd { margin: 3px 0 0; font: 500 14px/1.55 var(--font); color: var(--k-tx); }
:root[data-theme="light"] .kh-bio dt { color: #4e14b8; }
.kh-prof { width: min(92vw, 400px); max-height: 88vh; padding: 0; overflow: auto; border-radius: 20px; font-family: var(--font);
color: var(--k-tx); background: #0a1526; border: 1.5px solid #8f5cff; box-shadow: 0 20px 60px rgba(0, 0, 0, .55); }
.kh-prof::backdrop { background: rgba(3, 8, 18, .72); }
:root[data-theme="light"] .kh-prof { background: #fff; color: #15122b; }
.kh-prof .ip-cover { position: relative; height: 120px; overflow: hidden; background: linear-gradient(135deg, #3d1794, #0b2230); }
.kh-prof .ip-cover img { width: 100%; height: 100%; object-fit: cover; opacity: .45; }
.kh-prof .ip-rain { position: absolute; inset: 0; margin: 0; overflow: hidden; white-space: pre-wrap; word-break: break-all; font: 11px/1.2 monospace; color: rgba(75, 226, 122, .35); }
.kh-prof .ip-x { position: absolute; top: 8px; left: 8px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25);
background: rgba(5, 12, 24, .6); color: #fff; font-size: 18px; cursor: pointer; }
.kh-prof .ip-av { width: 88px; height: 88px; margin: -44px auto 0; position: relative; border-radius: 50%; padding: 3px; background: linear-gradient(135deg, #a663ff, #35d8f2); }
.kh-prof .ip-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.kh-prof .ip-body { padding: 8px 18px 20px; text-align: center; }
.kh-prof h3 { margin: 4px 0 0; font: 800 22px/1.3 var(--font); }
.kh-prof .ip-ok { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #1663f2; color: #fff; font-size: 12px; vertical-align: middle; }
.kh-prof .ip-h { margin: 2px 0 10px; color: var(--k-mut); font: 500 13px/1.3 var(--font); }
.kh-prof .ip-st { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }
.kh-prof .ip-st li { display: flex; flex-direction: column; gap: 2px; padding: 8px 4px; border-radius: 12px; border: 1px solid var(--k-line); }
.kh-prof .ip-st b { font: 800 16px/1.2 var(--font); }
.kh-prof .ip-st small { font: 500 12px/1.2 var(--font); color: var(--k-mut); }
.kh-prof .ip-bio { margin: 0 0 12px; font: 500 14px/1.65 var(--font); }
.kh-prof .ip-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.kh-prof .ip-tags li { padding: 5px 10px; border-radius: 12px; font: 700 12px/1 var(--font); color: #c9a2ff; background: rgba(122, 44, 240, .16); border: 1px solid rgba(166, 99, 255, .35); }
:root[data-theme="light"] .kh-prof .ip-tags li { color: #4e14b8; }
.kh-path { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; counter-reset: s; }
.kh-path li { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 2px; border-radius: 14px; text-align: center;
background: var(--k-box); border: 1px solid color-mix(in srgb, var(--c1) 40%, transparent); }
.kh-path i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #fff;
background: linear-gradient(180deg, var(--c1), var(--c2) 55%, var(--c3)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
.kh-path b { font: 800 13px/1.2 var(--font); color: var(--k-tx); }
.kh-path small { font: 500 11px/1.3 var(--font); color: var(--k-mut); }
.kh-end { margin: 22px 0 6px; padding: 20px 16px; border-radius: 18px; text-align: center;
border: 1px solid rgba(56, 214, 186, .42); background: radial-gradient(90% 140% at 50% 0%, rgba(46, 200, 170, .16), transparent 65%), linear-gradient(180deg, #0b2230, #0a1d2c); }
:root[data-theme="light"] .kh-end { border-color: rgba(16, 160, 140, .4); background: radial-gradient(90% 140% at 50% 0%, rgba(46, 200, 170, .14), transparent 65%), #fff; }
.kh-end h2 { margin: 0; font: 800 24px/1.3 var(--font); color: var(--k-tx); }
.kh-end p { margin: 6px 0 14px; font: 500 14px/1.6 var(--font); color: var(--k-mut); }
html body.ui2 main .kh-end a.kh-btn:not(#x) { display: inline-flex; flex: none; padding: 0 26px; }
@media (min-width: 640px) {
.kh-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kh-bio { grid-template-columns: 1fr 1fr; }
html body.ui2 main a.kh-ghost:not(#x) { flex: 1; }
}
@media (max-width: 380px) {
.kh-path { gap: 4px; }
.kh-path li { padding: 8px 1px; }
.kh-path i { width: 30px; height: 30px; }
.kh-path b { font-size: 12px; }
.kh-path small { font-size: 10.5px; }
.kh-no { width: 34px; height: 34px; font-size: 13px; }
}
.ks-art-subj { position: relative; display: block; width: 100%; height: 100%; }
.ks-art-subj svg { position: absolute; inset: 0; }
.ks-art-subj .ks-ic { position: absolute; left: 47%; top: 47%; width: 50%; height: auto; transform: translate(-50%, -50%) rotate(-8deg);
filter: drop-shadow(0 4px 5px rgba(18, 5, 46, .5)); }
.k-h1.ks-xxl { font-size: 20px; line-height: 1.3; }
.k-h1.ks-xxl .k-sw { left: auto; right: 0; bottom: -8px; }
.ks-hero .k-hero-tx h1 { overflow-wrap: anywhere; }
.k2 .ks-label { display: flex; align-items: center; gap: 8px; margin: 4px 2px 10px; font-size: 17px; }
.ks-label i { flex: none; width: 5px; height: 20px; border-radius: 3px; background: linear-gradient(180deg, #8ef47c, #3edc6a); }
.ks-due { margin-bottom: 14px; }
.ks-gap { margin-top: 10px; }
.pane .ks-label:not(:first-child) { margin-top: 18px; }
.ks-tabs > button { font-family: var(--font); white-space: nowrap; }
.ks-tabs b { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 6px; border-radius: 11px;
font: 800 12px/1 var(--font); background: rgba(255, 255, 255, .08); border: 1px solid var(--k-line); }
:root[data-theme="light"] .ks-tabs b { background: rgba(30, 60, 110, .06); }
.ks-tabs > .on b { background: rgba(7, 26, 13, .14); border-color: rgba(7, 26, 13, .18); }
.ks-tabs { grid-auto-columns: minmax(max-content, 1fr); overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.ks-tabs::-webkit-scrollbar { display: none; }
.ks-tabs.ks-more { -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px); mask-image: linear-gradient(90deg, transparent, #000 44px); }
.ks-tabs.many > button { gap: 6px; padding: 0 12px; font-size: 15px; }
.ks-tabs .ks-dot { width: 8px; height: 8px; flex: none; align-self: flex-start; margin: 8px -2px 0 0; border-radius: 50%; background: #ff3b5c;
box-shadow: 0 0 0 2px var(--k-box); }
.pane { margin-top: 2px; }
.ks-2l { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ks-item .k-body { gap: 6px; }
.ks-body { font: 400 13px/1.6 var(--font); color: var(--k-mut); white-space: pre-line;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ks-meta { font: 500 12px/1.5 var(--font); color: var(--k-mut); }
.k2 .k-pills .ks-left, .k2 .ks-meta .ks-left { color: var(--ct); }
.k2 .ks-left.s-soon, .k2 .ks-left.s-today { color: #fff; background: linear-gradient(180deg, #ff3b63, #d10f3a); border-color: transparent; }
.k2 .ks-left.s-past { color: var(--k-mut); background: rgba(127, 140, 170, .14); border-color: transparent; }
.ks-meta .ks-left { display: inline-block; padding: 3px 8px; border-radius: 10px; font: 800 11px/1.2 var(--font); background: color-mix(in srgb, var(--c2) 16%, transparent); }
.k2 .k-pills .ks-new, .k2 .k-pills .ks-ok { color: #071a0d; background: linear-gradient(90deg, #8ef47c, #3edc6a); border-color: transparent; }
:root[data-theme="light"] .k2 .k-pills .ks-ok, :root[data-theme="light"] .k2 .k-pills .ks-new { color: #fff; background: #15803d; }
.ks-n .k-box .i3d { width: 26px; height: 26px; }
.ks-f .k-body, .ks-f .k-go { position: static; }
html body.ui2 main a.ks-a:not(#x) { color: var(--k-tx) !important; font-weight: 800; text-decoration: none; }
.ks-a::after { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: 16px; }
.ks-a:focus-visible { outline: none; }
.ks-a:focus-visible::after { outline: 2px solid #8f5cff; outline-offset: -3px; }
.ks-f .k-t .n3d { font-size: .8em; }
html body.ui2 main .k-pills a.ks-dl:not(#x) { position: relative; z-index: 3; display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 10px; border-radius: 15px;
font: 800 12px/1 var(--font); color: var(--ct) !important; text-decoration: none; white-space: nowrap;
background: color-mix(in srgb, var(--c2) 22%, transparent); border: 1px solid color-mix(in srgb, var(--c1) 50%, transparent); }
.ks-dl svg { width: 14px; height: 14px; flex: none; }
.ks-f:active { transform: scale(.985); }
.ks-acc > summary { cursor: pointer; list-style: none; }
.ks-acc > summary::-webkit-details-marker { display: none; }
.ks-chev svg { transition: transform .2s; }
.ks-acc[open] .ks-chev svg { transform: rotate(-90deg); }
.ks-in { margin: 10px 10px 4px 0; padding-right: 10px; border-right: 2px dashed var(--k-line); }
.ks-card { position: relative; padding: 12px; margin-bottom: 12px; border-radius: 18px; color: var(--k-tx);
border: 1.5px solid color-mix(in srgb, var(--c1) 70%, transparent);
background: linear-gradient(270deg, color-mix(in srgb, var(--c2) 22%, #0b1322), color-mix(in srgb, var(--c2) 9%, #0b1322));
box-shadow: 0 0 16px color-mix(in srgb, var(--c2) 28%, transparent), inset 0 1px 0 rgba(255, 255, 255, .06); }
:root[data-theme="light"] .ks-card { border-color: color-mix(in srgb, var(--c2) 45%, transparent);
background: linear-gradient(270deg, color-mix(in srgb, var(--c2) 10%, #fff), #fff); box-shadow: 0 6px 18px color-mix(in srgb, var(--c2) 14%, transparent); }
.ks-card-top { display: flex; align-items: stretch; gap: 12px; }
.ks-card-top .k-box { min-height: 52px; }
.ks-card-tx .k-pills span { height: 28px; font-size: 12.5px; }
.ks-card-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.ks-card h2.k-t { font-size: 18px; }
.ks-about { margin: 12px 2px 0; font: 400 14.5px/1.8 var(--font); color: #d5dbe8; }
:root[data-theme="light"] .ks-about { color: #3d3956; }
.ks-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ks-acts form { display: flex; flex: 1 1 auto; margin: 0; }
.ks-btn { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 16px; border-radius: 14px; cursor: pointer;
font: 800 15px/1.2 var(--font); text-decoration: none; border: 1px solid transparent; transition: transform .15s, filter .15s; }
.ks-acts form .ks-btn { width: 100%; }
.ks-btn svg { flex: none; width: 20px; height: 20px; }
.ks-btn:active { transform: scale(.97); }
html body.ui2 main .ks-main:not(#x) { color: #071a0d !important; background: linear-gradient(90deg, #8ef47c, #57e86e 55%, #3edc6a);
box-shadow: 0 0 18px rgba(80, 230, 110, .3), inset 0 1px 0 rgba(255, 255, 255, .45); }
html body.ui2 main .ks-alt:not(#x) { color: #fff !important; background: linear-gradient(180deg, #6d28ef, #3d1794); border-color: #8f5cff;
box-shadow: 0 0 16px rgba(110, 40, 240, .3), inset 0 1px 0 rgba(255, 255, 255, .2); }
html body.ui2 main .ks-fav:not(#x) { color: var(--k-tx) !important; background: var(--k-box); border-color: var(--k-line); }
.ks-fav.on svg { fill: #ffcf3a; stroke: #d99a00; }
.k2 > .pdfr.is-full:not(#x) { position: fixed; z-index: 200; }
.ks-file .imgview { margin: 0; border-radius: 18px; overflow: hidden; border: 1px solid var(--k-line); }
.ks-file .imgview img { display: block; width: 100%; height: auto; }
.k2.ks-quiz > .qx:not(#x) { z-index: auto; display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; min-height: 0;
border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--k-tx); font-family: var(--font); }
.ks-quiz .qx-top { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 16px;
background: color-mix(in srgb, var(--k-box) 80%, transparent); border: 1px solid var(--k-line); }
html body.ui2 main .ks-quiz a.qx-x:not(#x) { width: 44px; height: 44px; border-radius: 12px; font: 800 18px/1 var(--font); box-shadow: none;
color: #ff8fa3 !important; background: rgba(227, 18, 63, .14); border: 1px solid rgba(255, 77, 109, .45); }
:root[data-theme="light"] .ks-quiz a.qx-x:not(#x) { color: #a10a2e !important; background: #fde4e7; }
.ks-quiz .qx-seg { flex: 1; min-width: 0; display: flex; gap: 5px; }
.ks-quiz .qx-seg i { flex: 1; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .14); }
:root[data-theme="light"] .ks-quiz .qx-seg i { background: rgba(30, 60, 110, .12); }
.ks-quiz .qx-seg i.cur:not(#x) { background: #8f5cff; transform: none; box-shadow: 0 0 10px rgba(143, 92, 255, .6); }
.ks-quiz .qx-seg i.d-ok:not(#x) { background: #3edc6a; }
.ks-quiz .qx-seg i.d-bad:not(#x) { background: #e3123f; }
html body .ks-quiz .qx-tm { flex: none; height: 36px; padding: 0 12px; gap: 6px; border-radius: 18px; font: 800 15px/1 var(--font) !important;
color: #7ff0a8; background: rgba(24, 191, 88, .12); border: 1px solid rgba(78, 240, 138, .5); }
:root[data-theme="light"] .ks-quiz .qx-tm { color: #0b6b30; background: #daf5e3; }
.ks-quiz .qx-tm.low { color: #ff8fa3; border-color: #e3123f; background: rgba(227, 18, 63, .14); }
:root[data-theme="light"] .ks-quiz .qx-tm.low { color: #a10a2e; background: #fde4e7; }
.ks-quiz .qx-meta { padding: 0 4px; font: 700 13px/1.4 var(--font); color: var(--k-mut); gap: 10px; }
.ks-quiz .qx-meta span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ks-quiz .qx-q { padding: 18px 16px; border-radius: 18px; font: 800 18px/1.7 var(--font); color: var(--k-tx);
border: 1.5px solid rgba(166, 99, 255, .7);
background: linear-gradient(270deg, color-mix(in srgb, #7a2cf0 26%, #0b1322), color-mix(in srgb, #7a2cf0 11%, #0b1322));
box-shadow: 0 0 16px rgba(122, 44, 240, .32), inset 0 1px 0 rgba(255, 255, 255, .06); }
:root[data-theme="light"] .ks-quiz .qx-q { border-color: rgba(122, 44, 240, .45); background: linear-gradient(270deg, #f1e9ff, #fff); box-shadow: 0 6px 18px rgba(122, 44, 240, .14); }
.ks-quiz .qx-o { gap: 10px; overflow: clip; overflow-clip-margin: 14px; padding: 2px 0 6px; }
.ks-quiz .qx-o button { --c1: #3f8cff; --c2: #1663f2; --c3: #0b3fb3; min-height: 54px; padding: 7px 10px 7px 12px; border-radius: 15px; gap: 10px;
font: 700 16px/1.5 var(--font); color: var(--k-tx); border: 1.5px solid color-mix(in srgb, var(--c1) 55%, transparent);
background: linear-gradient(270deg, color-mix(in srgb, var(--c2) 18%, #0b1322), color-mix(in srgb, var(--c2) 7%, #0b1322));
box-shadow: 0 0 12px color-mix(in srgb, var(--c2) 22%, transparent); }
.ks-quiz .qx-o button:nth-child(2) { --c1: #a663ff; --c2: #7a2cf0; --c3: #4e14b8; }
.ks-quiz .qx-o button:nth-child(3) { --c1: #ffa04a; --c2: #f2700f; --c3: #b84d05; }
.ks-quiz .qx-o button:nth-child(4) { --c1: #35d8f2; --c2: #08a9c8; --c3: #057590; }
.ks-quiz .qx-o button:nth-child(5) { --c1: #ff63b6; --c2: #e0268c; --c3: #a3125c; }
:root[data-theme="light"] .ks-quiz .qx-o button { background: linear-gradient(270deg, color-mix(in srgb, var(--c2) 9%, #fff), #fff); box-shadow: 0 4px 14px color-mix(in srgb, var(--c2) 12%, transparent); }
.ks-quiz .qx-o button:not(:disabled):active { transform: scale(.98); box-shadow: none; }
html body .ks-quiz .qx-o button b { width: 38px; height: 38px; border-radius: 11px; font: 800 17px/1 var(--font) !important; color: #fff;
background: linear-gradient(180deg, var(--c1), var(--c2) 55%, var(--c3)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
.ks-quiz .qx-o button em { width: 40px; height: 40px; border-radius: 12px; font-size: 20px; }
.ks-quiz .qx-o button.ok { border-color: #3edc6a; background: rgba(62, 220, 106, .14); box-shadow: 0 0 18px rgba(80, 230, 110, .35); }
.ks-quiz .qx-o button.ok b, .ks-quiz .qx-o button.ok em { color: #071a0d; background: linear-gradient(90deg, #8ef47c, #3edc6a); box-shadow: none; }
.ks-quiz .qx-o button.bad { border-color: #ff4d6d; background: rgba(227, 18, 63, .14); box-shadow: 0 0 16px rgba(227, 18, 63, .3); }
.ks-quiz .qx-o button.bad b, .ks-quiz .qx-o button.bad em { color: #fff; background: linear-gradient(180deg, #ff4d6d, #e3123f 55%, #a10a2e); box-shadow: none; }
:root[data-theme="light"] .ks-quiz .qx-o button.ok { background: #e6f9ec; }
:root[data-theme="light"] .ks-quiz .qx-o button.bad { background: #fde4e7; }
.ks-quiz .qx-spark { background: #3edc6a; }
.ks-quiz .qx-e { border-radius: 16px; font: 500 14.5px/1.8 var(--font); color: var(--k-mut); background: var(--k-box); border: 1px solid var(--k-line); }
.ks-quiz .qx-e b { color: var(--k-tx); }
.ks-quiz .qx-next { min-height: 58px; border-radius: 16px; font: 800 17px/1 var(--font); color: #071a0d;
background: linear-gradient(90deg, #8ef47c, #57e86e 55%, #3edc6a); box-shadow: 0 0 18px rgba(80, 230, 110, .35), inset 0 1px 0 rgba(255, 255, 255, .45); animation: none; }
.ks-quiz .qx-next:active { transform: scale(.98); box-shadow: none; }
.ks-quiz .qx-next i { width: 42px; height: 42px; border-radius: 12px; color: #7ff0a8; background: #0b2a17; }
.ks-quiz .qx-end h2 { font: 800 21px/1.4 var(--font); color: var(--k-tx); }
.ks-quiz .qp-score b { font-family: var(--font) !important; color: var(--k-tx); }
.ks-quiz .qp-score small { color: var(--k-mut); }
.ks-quiz .qp-score circle { stroke: var(--k-line); }
.ks-quiz .qp-score .qp-sc { stroke: #3edc6a; }
html body.ui2 main .ks-quiz a.qx-alt:not(#x) { color: #c9a2ff !important; font: 800 15px/1.4 var(--font); }
:root[data-theme="light"] .ks-quiz a.qx-alt:not(#x) { color: #5320c4 !important; }
.ks-quiz .qp-rev div { border-radius: 14px; background: var(--k-box); border: 1px solid var(--k-line); border-inline-start: 4px solid #3edc6a; }
.ks-quiz .qp-rev div.bad { border-inline-start-color: #e3123f; }
.ks-quiz .qp-rev span { font: 600 14.5px/1.6 var(--font); color: var(--k-tx); }
.ks-quiz .qp-rev small { color: var(--k-mut); }
.ks-quiz .qp-rev b { font-family: var(--font); color: #3edc6a; }
:root[data-theme="light"] .ks-quiz .qp-rev b { color: #15803d; }
@media (max-width: 400px) {
.ks-tabs > button { gap: 6px; padding: 0 8px; font-size: 15px; }
.ks-tabs b { min-width: 22px; padding: 0 5px; }
}
@media (max-width: 380px) {
.k-h1.ks-xxl { font-size: 18px; }
.ks-tabs.many > button { padding: 0 10px; font-size: 14px; }
.ks-card h2.k-t { font-size: 16.5px; }
.ks-quiz .qx-q { font-size: 17px; }
.ks-quiz .qx-o button { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .ks-chev svg { transition: none; } }
.ks-file .ks-card { padding: 10px; }
.ks-file .ks-acts { margin-top: 0; }
.ks-file .ks-label { margin-top: 16px; }
.ks-info { margin: 0 0 12px; padding: 4px 12px; border-radius: 18px; background: color-mix(in srgb, var(--k-box) 88%, transparent); border: 1px solid var(--k-line); }
p.ks-info.ks-about { padding: 12px 14px; white-space: pre-line; }
.ks-info > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 8px 0; }
.ks-info > div + div { border-top: 1px solid var(--k-line); }
.ks-info dt { flex: none; display: flex; align-items: center; gap: 10px; font: 500 14px/1.3 var(--font); color: var(--k-mut); }
.ks-info dd { margin: 0; min-width: 0; text-align: left; font: 700 14.5px/1.45 var(--font); color: var(--k-tx); overflow-wrap: anywhere; }
.ks-info dd small { font-weight: 500; font-size: 12.5px; color: var(--k-mut); }
html body.ui2 main .ks-info dd a:not(#x) { color: var(--ct) !important; text-decoration: none; }
.ks-ii { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 10px; color: #fff;
background: linear-gradient(180deg, var(--c1), var(--c2) 55%, var(--c3)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 3px 10px color-mix(in srgb, var(--c2) 35%, transparent); }
.t-g .ks-ii, .t-c .ks-ii { color: #04220f; }
.ks-ok2 { color: #3edc6a; }
:root[data-theme="light"] .ks-ok2 { color: #15803d; }
.ks-app { margin-bottom: 16px; }
.ks-app .ks-acts { margin-top: 0; flex-wrap: nowrap; }
.ks-app .ks-btn { min-height: 50px; }
.ks-app .ks-main { flex: 1.4 1 0; }
.ks-app .ks-alt { flex: 1 1 0; }
.ks-favf { flex: none !important; }
.ks-sq { width: 50px; padding: 0 !important; flex: none !important; }
.ks-sq svg { width: 22px; height: 22px; }
.ks-stats { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin: 12px 0 0; padding: 12px 0; list-style: none;
border-radius: 18px; background: color-mix(in srgb, var(--k-box) 88%, transparent); border: 1px solid var(--k-line); }
.ks-stats li { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 0 6px; text-align: center; }
.ks-stats li + li { border-inline-start: 1px solid var(--k-line); }
.ks-stats small { font: 500 11.5px/1.2 var(--font); color: var(--k-mut); }
.ks-stats b { font: 800 20px/1.1 var(--font); color: var(--k-tx); font-variant-numeric: tabular-nums; }
.ks-stats span { font: 500 11.5px/1.2 var(--font); color: var(--k-mut); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ks-stats .ks-ext { padding: 2px 8px; border-radius: 8px; font-size: 14px; line-height: 1.5; color: #fff; background: linear-gradient(180deg, #a663ff, #7a2cf0 55%, #4e14b8); }
.ks-prev { margin-bottom: 4px; }
.ks-prev-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ks-prev-h .ks-label { margin-bottom: 10px; }
html body.ui2 main .ks-more:not(#x) { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 4px; border: 0; background: none; cursor: pointer;
font: 800 14px/1 var(--font); color: #b88cff !important; }
:root[data-theme="light"] body.ui2 main .ks-more:not(#x) { color: #6d28ef !important; }
.ks-thumbs { display: flex; gap: 10px; margin: 0 -12px 14px; padding: 2px 12px 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 12px;
overscroll-behavior-x: contain; scrollbar-width: none; }
.ks-thumbs::-webkit-scrollbar { display: none; }
.ks-th { position: relative; flex: none; width: 132px; aspect-ratio: 1 / 1.414; padding: 0; scroll-snap-align: start; cursor: pointer; overflow: hidden;
border-radius: 12px; border: 1px solid var(--k-line); background: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .28); transition: transform .15s; }
:root[data-theme="light"] .ks-th { box-shadow: 0 6px 16px rgba(30, 40, 80, .12); }
.ks-th:active { transform: scale(.97); }
.ks-th:focus-visible { outline: 2px solid #8f5cff; outline-offset: 2px; }
.ks-th canvas { display: block; width: 100%; height: 100%; }
.ks-th:not(.is-drawn):not(.ks-th-more) { background: linear-gradient(100deg, #eef0f6 30%, #fff 50%, #eef0f6 70%) 0 0 / 300% 100%; animation: pdfr-sh 1.4s linear infinite; }
.ks-th-n { position: absolute; bottom: 6px; inset-inline-start: 6px; min-width: 22px; padding: 1px 7px; border-radius: 999px; font: 800 11px/1.6 var(--font); color: #fff; background: rgba(10, 16, 30, .66); }
.ks-th-sk { display: flex; flex-direction: column; gap: 10px; padding: 18px 14px; cursor: default; }
.ks-th-sk i { display: block; height: 7px; border-radius: 4px; background: #e6e9f1; }
.ks-th-sk i:first-child { width: 60%; height: 11px; }
.ks-th-more { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #fff; border-color: rgba(143, 92, 255, .6);
background: linear-gradient(180deg, #6d28ef, #3d1794); box-shadow: 0 0 16px rgba(110, 40, 240, .3); }
.ks-th-more b { font: 800 26px/1 var(--font); }
.ks-th-more span { font: 700 12.5px/1.2 var(--font); opacity: .9; }
.ks-th-err { margin: 0; padding: 16px; font: 500 14px/1.7 var(--font); color: var(--k-mut); }
.ks-clamp p { margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ks-clamp.open p { display: block; }
.ks-clamp .ks-more { min-height: 36px; margin-top: 2px; }
div.ks-info.ks-about { padding: 12px 14px 6px; white-space: pre-line; font: 400 14.5px/1.8 var(--font); color: #d5dbe8; }
:root[data-theme="light"] div.ks-info.ks-about { color: #3d3956; }
@media (min-width: 700px) { .ks-th { width: 160px; } }
@media (max-width: 380px) {
.ks-app .ks-btn { padding: 0 10px; font-size: 14px; }
.ks-stats b { font-size: 17px; }
.ks-th { width: 118px; }
}
@media (prefers-reduced-motion: reduce) { .ks-th, .ks-th:not(.is-drawn) { transition: none; animation: none; } }
.ks-app .ks-acts .ks-favf .ks-sq { width: 50px; min-width: 50px; }
html body.ui2 main .ks-alt2:not(#x) { color: var(--k-tx) !important; background: var(--k-box); border-color: var(--k-line); }
.ks-pcount { font: 500 13px/1 var(--font); color: var(--k-mut); font-variant-numeric: tabular-nums; }
.ks-pcount b { font-weight: 800; color: var(--k-tx); }
.ks-pcard { margin-bottom: 14px; overflow: hidden; border-radius: 20px; border: 1px solid var(--k-line); background: color-mix(in srgb, var(--k-box) 88%, transparent); }
.ks-pcard .ks-thumbs { gap: 10px; margin: 0; padding: 12px; scroll-padding-inline: 12px; }
.ks-pcard .ks-th { width: calc(100% - 28px); max-width: 420px; border-radius: 10px; }
.ks-pcard .ks-th-n { bottom: 8px; inset-inline-start: 8px; font-size: 12px; }
.ks-pcard .ks-th-more b { font-size: 34px; }
.ks-pcard .ks-th-more span { font-size: 15px; }
.ks-pcard .imgview { margin: 0; padding: 12px; }
.ks-pcard .imgview img { display: block; width: 100%; height: auto; border-radius: 10px; }
.ks-pbar { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--k-line); }
html body.ui2 main .ks-pb:not(#x) { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 60px; padding: 6px 4px;
border: 0; background: none; cursor: pointer; text-decoration: none; font: 700 13px/1.2 var(--font); color: var(--k-tx) !important; }
.ks-pb + .ks-pb { border-inline-start: 1px solid var(--k-line) !important; }
.ks-pb svg { width: 20px; height: 20px; color: #b88cff; }
:root[data-theme="light"] .ks-pb svg { color: #6d28ef; }
.ks-pb:active { background: color-mix(in srgb, var(--k-line) 60%, transparent) !important; }
.ks-pb:focus-visible { outline: 2px solid #8f5cff; outline-offset: -3px; }
.ks-toast { position: fixed !important; inset-inline: 16px; bottom: calc(88px + env(safe-area-inset-bottom)); z-index: 60 !important; margin: 0 auto; max-width: 360px; padding: 12px 16px;
border-radius: 14px; text-align: center; font: 700 14px/1.4 var(--font); color: #fff; background: rgba(12, 18, 34, .94); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); overflow-wrap: anywhere; }
@media (min-width: 700px) { .ks-pcard .ks-th { width: 340px; } }
.ks-label .ks-gn { margin-inline-start: auto; padding: 2px 9px; border-radius: 10px; font: 700 12px/1.4 var(--font); color: var(--k-mut); background: color-mix(in srgb, var(--k-line) 55%, transparent); }
.pane .ks-label[data-g]:not(:first-child) { margin-top: 20px; }
.ks-tabs3 { grid-template-columns: repeat(3, 1fr); grid-auto-columns: auto; overflow: visible; }
.ks-pbar2 .ks-pbar { grid-template-columns: repeat(2, 1fr); border-top: 0; }
.ks-file .ks-prev { margin-top: 4px; }