/* barlow-condensed-vietnamese-400-normal */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/_next/static/media/barlow-condensed-vietnamese-400-normal.Dq9fsqrz.woff2) format('woff2'), url(/_next/static/media/barlow-condensed-vietnamese-400-normal.BHpO_q_4.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

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

/* barlow-condensed-latin-400-normal */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/_next/static/media/barlow-condensed-latin-400-normal.Dc2u_eUW.woff2) format('woff2'), url(/_next/static/media/barlow-condensed-latin-400-normal.BXL2z6Kg.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* barlow-condensed-vietnamese-600-normal */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/_next/static/media/barlow-condensed-vietnamese-600-normal.A5AYRdjN.woff2) format('woff2'), url(/_next/static/media/barlow-condensed-vietnamese-600-normal.CNlPk46_.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

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

/* barlow-condensed-latin-600-normal */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/_next/static/media/barlow-condensed-latin-600-normal.DepVgxBB.woff2) format('woff2'), url(/_next/static/media/barlow-condensed-latin-600-normal.BFJEwTuo.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* barlow-condensed-vietnamese-700-normal */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/_next/static/media/barlow-condensed-vietnamese-700-normal.DYeBwlKR.woff2) format('woff2'), url(/_next/static/media/barlow-condensed-vietnamese-700-normal.DhIzd8Tb.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

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

/* barlow-condensed-latin-700-normal */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/_next/static/media/barlow-condensed-latin-700-normal.v1xN8_Wq.woff2) format('woff2'), url(/_next/static/media/barlow-condensed-latin-700-normal.Dmwat-ge.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* barlow-condensed-vietnamese-800-normal */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(/_next/static/media/barlow-condensed-vietnamese-800-normal.CpjukuLw.woff2) format('woff2'), url(/_next/static/media/barlow-condensed-vietnamese-800-normal.BZxKbt5V.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* barlow-condensed-latin-ext-800-normal */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(/_next/static/media/barlow-condensed-latin-ext-800-normal.DGNyg4u8.woff2) format('woff2'), url(/_next/static/media/barlow-condensed-latin-ext-800-normal.gY_0Gifi.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* barlow-condensed-latin-800-normal */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(/_next/static/media/barlow-condensed-latin-800-normal.BKzMuPgK.woff2) format('woff2'), url(/_next/static/media/barlow-condensed-latin-800-normal.e9GbPXiK.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* noto-sans-arabic-arabic-400-normal */
@font-face {
  font-family: 'Noto Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/_next/static/media/noto-sans-arabic-arabic-400-normal.AAMxebZb.woff2) format('woff2'), url(/_next/static/media/noto-sans-arabic-arabic-400-normal.hsqIUL9Q.woff) format('woff');
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-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-10EC4,U+10EFC-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;
}

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

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

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

/* noto-sans-arabic-latin-400-normal */
@font-face {
  font-family: 'Noto Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/_next/static/media/noto-sans-arabic-latin-400-normal.CjsIS08k.woff2) format('woff2'), url(/_next/static/media/noto-sans-arabic-latin-400-normal.lr8cikIT.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* noto-sans-arabic-arabic-600-normal */
@font-face {
  font-family: 'Noto Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/_next/static/media/noto-sans-arabic-arabic-600-normal.JPxwL-XU.woff2) format('woff2'), url(/_next/static/media/noto-sans-arabic-arabic-600-normal.JLzruTOp.woff) format('woff');
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-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-10EC4,U+10EFC-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;
}

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

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

/* noto-sans-arabic-latin-ext-600-normal */
@font-face {
  font-family: 'Noto Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/_next/static/media/noto-sans-arabic-latin-ext-600-normal.6_GPoF44.woff2) format('woff2'), url(/_next/static/media/noto-sans-arabic-latin-ext-600-normal.Be-B9uOG.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* noto-sans-arabic-latin-600-normal */
@font-face {
  font-family: 'Noto Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/_next/static/media/noto-sans-arabic-latin-600-normal.BUFr-ZM9.woff2) format('woff2'), url(/_next/static/media/noto-sans-arabic-latin-600-normal.D8ZQ8Cfs.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* noto-sans-arabic-arabic-700-normal */
@font-face {
  font-family: 'Noto Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/_next/static/media/noto-sans-arabic-arabic-700-normal.3CqrwsiZ.woff2) format('woff2'), url(/_next/static/media/noto-sans-arabic-arabic-700-normal.DXnsSW3z.woff) format('woff');
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-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-10EC4,U+10EFC-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;
}

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

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

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

/* noto-sans-arabic-latin-700-normal */
@font-face {
  font-family: 'Noto Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/_next/static/media/noto-sans-arabic-latin-700-normal.D41hNJFR.woff2) format('woff2'), url(/_next/static/media/noto-sans-arabic-latin-700-normal.DST6Nu2E.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-ease: initial;
    }
  }
}

@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --ease-out: cubic-bezier(0, 0, .2, 1);
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}

@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  ol, ul, menu {
    list-style: none;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    vertical-align: middle;
    display: block;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}

@layer components;

@layer utilities {
  .collapse {
    visibility: collapse;
  }

  .visible {
    visibility: visible;
  }

  .relative {
    position: relative;
  }

  .flex {
    display: flex;
  }

  .grid {
    display: grid;
  }

  .hidden {
    display: none;
  }

  .inline {
    display: inline;
  }

  .table {
    display: table;
  }

  .transform {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .rounded {
    border-radius: .25rem;
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .uppercase {
    text-transform: uppercase;
  }

  .underline {
    text-decoration-line: underline;
  }

  .ring {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }
}

:root {
  --cobalt: #0a38c8;
  --cobalt-deep: #082baa;
  --cobalt-dark: #061a65;
  --ink: #080c11;
  --ink-lift: #11171d;
  --saffron: #ffbf19;
  --saffron-pale: #ffd760;
  --paper: #f8f9fb;
  --white: #fff;
  --cobalt-tint: #b9c9ff;
  --ink-tint: #bec5cc;
  --line-light: #d9deea;
  --font-display: "Barlow Condensed", sans-serif;
  --font-ui: Arial, Helvetica, sans-serif;
  --font-arabic: "Noto Sans Arabic", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  min-width: 320px;
}

body {
  background: var(--paper);
  min-height: 100vh;
  color: var(--ink);
  font-family: var(--font-ui);
  text-rendering: optimizelegibility;
  margin: 0;
}

button, a, input {
  font: inherit;
}

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

a {
  color: inherit;
  text-decoration: none;
}

svg {
  display: block;
}

button:focus-visible, a:focus-visible, input:focus-visible {
  outline: 3px solid var(--saffron);
  outline-offset: 4px;
}

.site-header {
  background: var(--cobalt-deep);
  color: var(--white);
  z-index: 20;
  border-bottom: 1px solid #ffffff4d;
  justify-content: space-between;
  align-items: center;
  height: 68px;
  padding: 0 clamp(24px, 3vw, 54px);
  display: flex;
  position: relative;
}

.wordmark {
  font-family: var(--font-display);
  letter-spacing: -.02em;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
}

.site-header nav {
  gap: clamp(24px, 3vw, 48px);
  display: flex;
}

.site-header nav a {
  border-bottom: 1px solid #0000;
  padding: 10px 0;
  font-size: .9rem;
}

.site-header nav a:hover {
  border-bottom-color: var(--saffron);
}

.hero {
  grid-template-columns: minmax(0, 42%) minmax(0, 58%);
  min-height: 640px;
  display: grid;
}

.hero-promise {
  background: var(--cobalt);
  color: var(--white);
  min-height: 640px;
  padding: clamp(58px, 7vh, 84px) clamp(32px, 4vw, 64px) 64px;
  position: relative;
  overflow: hidden;
}

.hero-copy {
  z-index: 2;
  max-width: 540px;
  position: relative;
}

.hero h1 {
  font-family: var(--font-display);
  letter-spacing: -.03em;
  margin: 0;
  font-size: clamp(4.25rem, 5vw, 4.85rem);
  font-weight: 700;
  line-height: .88;
}

.hero h1 span {
  display: block;
}

.hero-copy > p {
  color: var(--cobalt-tint);
  max-width: 42ch;
  margin: 30px 0 0;
  font-size: 1rem;
  line-height: 1.55;
}

.hero-copy em {
  color: var(--white);
  font-style: normal;
}

.primary-action {
  background: var(--saffron);
  color: var(--ink);
  justify-content: space-between;
  align-items: center;
  gap: 48px;
  min-height: 68px;
  margin-top: 36px;
  padding: 0 24px 0 30px;
  font-weight: 700;
  transition: background-color .18s ease-out, gap .18s ease-out;
  display: inline-flex;
}

.primary-action svg, .teacher-band a svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8px;
}

.primary-action:hover {
  background: var(--saffron-pale);
  gap: 56px;
}

.promise-letter {
  fill: #051a6557;
  font-family: var(--font-arabic);
  width: 36%;
  height: 70%;
  font-size: 19rem;
  position: absolute;
  top: 40px;
  right: -26px;
}

.promise-acoustics {
  fill: none;
  stroke: #ffffffa8;
  stroke-dasharray: 2 7;
  stroke-linecap: round;
  stroke-width: 1.5px;
  width: 72%;
  height: 36%;
  position: absolute;
  bottom: -2px;
  right: -2px;
}

.promise-acoustics .signal {
  stroke: var(--saffron);
  stroke-dasharray: none;
  stroke-width: 2px;
}

.speaking-demo {
  background: var(--ink);
  color: var(--white);
  min-height: 640px;
  padding: 54px clamp(28px, 4vw, 68px) 24px;
  position: relative;
  overflow: hidden;
}

.speaking-demo:before, .speaking-demo:after {
  content: "";
  pointer-events: none;
  border: 1px dotted #ffbf1933;
  border-radius: 50%;
  width: 94%;
  height: 650px;
  position: absolute;
  top: -180px;
  left: 3%;
}

.speaking-demo:after {
  width: 72%;
  height: 530px;
  top: -110px;
  left: 14%;
}

.practice-path {
  fill: none;
  pointer-events: none;
  height: 92%;
  stroke: var(--saffron);
  stroke-linecap: round;
  stroke-width: 3px;
  z-index: 1;
  width: 96%;
  position: absolute;
  inset: 2% 2% auto;
}

.practice-path marker path {
  fill: var(--saffron);
}

.demo-station, .phrase-focus, .demo-bottom-row, .privacy-note {
  z-index: 3;
  position: relative;
}

.demo-station > p {
  font-family: var(--font-display);
  letter-spacing: .02em;
  text-transform: uppercase;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  font-size: 1.12rem;
  font-weight: 700;
  display: flex;
}

.demo-station > p span {
  background: var(--saffron);
  color: var(--ink);
  font-family: var(--font-ui);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  font-size: .84rem;
  display: inline-flex;
}

.listen-station {
  max-width: 470px;
  margin: 0 auto;
}

.listen-station > button {
  background: var(--ink-lift);
  color: var(--white);
  cursor: pointer;
  border: 1px solid #485059;
  border-radius: 15px;
  align-items: center;
  width: 100%;
  min-height: 86px;
  padding: 0 18px;
  display: flex;
}

.round-icon {
  border: 2px solid var(--saffron);
  color: var(--saffron);
  border-radius: 50%;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 56px;
  height: 56px;
  display: inline-flex;
}

.round-icon svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8px;
  width: 25px;
  height: 25px;
}

.round-icon svg rect {
  fill: none;
}

.audio-wave {
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: 2px;
  height: 48px;
  margin: 0 16px;
  display: flex;
}

.audio-wave i {
  background: var(--saffron);
  opacity: .85;
  width: 2px;
  min-height: 4px;
  max-height: 38px;
  animation: 1.7s cubic-bezier(.16, 1, .3, 1) infinite alternate wave-breathe;
  display: block;
}

.audio-wave i:nth-child(3n) {
  animation-delay: -500ms;
}

.audio-wave i:nth-child(4n) {
  animation-delay: -900ms;
}

.listen-station small {
  color: var(--ink-tint);
}

.phrase-focus {
  text-align: center;
  margin: 28px auto 14px;
}

.phrase-focus h2 {
  font-family: var(--font-arabic);
  letter-spacing: 0;
  text-wrap: nowrap;
  margin: 0;
  font-size: clamp(2.65rem, 4.8vw, 5.25rem);
  font-weight: 600;
  line-height: 1.4;
}

.phrase-focus > p {
  color: var(--ink-tint);
  margin: 5px 0 0;
  font-size: .76rem;
}

.pronunciation-track {
  border-top: 1px dashed #ffbf19cc;
  justify-content: space-around;
  align-items: flex-start;
  max-width: 480px;
  height: 14px;
  margin: -4px auto 0;
  display: flex;
}

.pronunciation-track i {
  background: var(--saffron);
  width: 1px;
  height: 10px;
}

.demo-bottom-row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  margin-top: 16px;
  display: grid;
}

.speak-station > button {
  background: var(--ink-lift);
  color: var(--white);
  cursor: pointer;
  border: 1px solid #485059;
  border-radius: 15px;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 78px;
  padding: 10px 16px;
  display: flex;
}

.speak-station > button:disabled {
  cursor: wait;
}

.speak-station > button.is-listening .round-icon {
  background: var(--saffron);
  color: var(--ink);
  animation: 1s ease-out infinite mic-pulse;
}

.speak-station form {
  margin-top: 10px;
}

.speak-station label {
  color: var(--ink-tint);
  margin-bottom: 6px;
  font-size: .68rem;
  display: block;
}

.speak-station form > div {
  display: flex;
}

.speak-station input {
  color: var(--white);
  font-family: var(--font-arabic);
  background: #171e25;
  border: 1px solid #485059;
  border-radius: 10px 0 0 10px;
  flex: 1;
  min-width: 0;
  padding: 9px 10px;
  font-size: .95rem;
}

.speak-station input::placeholder {
  color: #a9b1b8;
}

.speak-station form button {
  background: var(--saffron);
  color: var(--ink);
  cursor: pointer;
  border: 0;
  border-radius: 0 10px 10px 0;
  padding: 0 14px;
  font-size: .72rem;
  font-weight: 700;
}

.guidance-result {
  background: var(--ink-lift);
  border: 1px solid #485059;
  border-radius: 15px;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px;
  min-height: 92px;
  padding: 14px 16px;
  display: grid;
}

.guidance-result > strong {
  border: 2px solid var(--saffron);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 54px;
  height: 54px;
  font-size: 1.25rem;
  display: flex;
}

.guidance-result > p {
  color: var(--ink-tint);
  margin: 0;
  font-size: .77rem;
  line-height: 1.42;
}

.guidance-result.result > p {
  color: var(--white);
}

.guidance-result.error {
  border-color: var(--saffron);
}

.guidance-station > small {
  color: #a9b1b8;
  margin-top: 8px;
  font-size: .64rem;
  line-height: 1.4;
  display: block;
}

.privacy-note {
  color: #a9b1b8;
  text-align: center;
  margin: 12px 0 0;
  font-size: .58rem;
  line-height: 1.4;
}

.practice-sequence {
  background: var(--paper);
  padding: 32px clamp(24px, 3.5vw, 56px) 48px;
}

.sequence-heading {
  border-bottom: 1px solid #aeb7cb;
  justify-content: space-between;
  align-items: end;
  padding-bottom: 18px;
  display: flex;
}

.sequence-heading h2 {
  color: var(--cobalt-deep);
  font-family: var(--font-display);
  letter-spacing: .01em;
  text-transform: uppercase;
  margin: 0;
  font-size: 1.65rem;
  font-weight: 700;
}

.sequence-heading p {
  color: #536078;
  margin: 0;
  font-size: .76rem;
}

.sequence-row {
  grid-template-columns: 138px minmax(0, 1fr);
  gap: 34px;
  padding-top: 20px;
  display: grid;
}

.book-marker {
  background: var(--cobalt);
  color: var(--white);
  min-height: 195px;
  padding: 28px 24px;
  position: relative;
  overflow: hidden;
}

.book-marker:after {
  content: "";
  border: 1px dotted #ffffffb3;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  position: absolute;
  bottom: -65px;
  right: -45px;
}

.book-marker span {
  color: var(--saffron);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
}

.book-marker strong {
  font-family: var(--font-display);
  margin-top: 22px;
  font-size: 4.25rem;
  font-weight: 600;
  line-height: 1;
  display: block;
}

.book-marker i {
  background: #ffffff80;
  width: 36px;
  height: 2px;
  margin-top: 14px;
  display: block;
}

.sequence-list {
  grid-template-columns: repeat(5, minmax(145px, 1fr));
  gap: 0;
  min-width: 820px;
  margin: 0;
  padding: 14px 0 0;
  list-style: none;
  display: grid;
}

.sequence-list li {
  border-bottom: 1px solid #b7c0d3;
  padding: 0 18px 22px;
  position: relative;
}

.sequence-list li:not(:last-child):after {
  content: "";
  border-top: 1px solid #9ba7bf;
  border-right: 1px solid #9ba7bf;
  width: 10px;
  height: 10px;
  position: absolute;
  top: 86px;
  right: -4px;
  transform: rotate(45deg);
}

.sequence-label {
  align-items: center;
  gap: 10px;
  display: flex;
}

.sequence-label > span {
  background: var(--cobalt);
  color: var(--white);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 25px;
  height: 25px;
  font-size: .7rem;
  font-weight: 700;
  display: flex;
}

.sequence-label h3 {
  margin: 0;
  font-size: .82rem;
}

.sequence-visual {
  background: #eef1f7;
  border-radius: 14px;
  align-items: center;
  height: 76px;
  margin-top: 18px;
  padding: 12px;
  display: flex;
}

.sequence-icon {
  border: 2px solid var(--cobalt);
  color: var(--cobalt);
  border-radius: 50%;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 45px;
  height: 45px;
  display: flex;
}

.sequence-icon svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7px;
}

.mini-wave {
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: 3px;
  display: flex;
}

.mini-wave i {
  background: var(--cobalt);
  width: 2px;
  display: block;
}

.sequence-list li > p {
  color: #5a667d;
  max-width: 23ch;
  margin: 10px 0 0;
  font-size: .67rem;
  line-height: 1.45;
}

.companion-story {
  background: var(--white);
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(60px, 8vw, 150px);
  padding: clamp(90px, 12vw, 165px) clamp(28px, 7vw, 110px);
  display: grid;
}

.companion-intro h2 {
  font-family: var(--font-display);
  letter-spacing: -.03em;
  max-width: 10ch;
  margin: 0;
  font-size: clamp(3.25rem, 5.3vw, 5.8rem);
  font-weight: 600;
  line-height: .92;
}

.companion-intro > p {
  color: #465269;
  max-width: 48ch;
  margin: 34px 0 0;
  line-height: 1.7;
}

.story-path {
  grid-template-columns: minmax(0, 1fr) 100px minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  display: grid;
}

.story-path article {
  border-top: 3px solid var(--cobalt);
  align-self: stretch;
  padding-top: 24px;
}

.story-path article:last-child {
  border-top-color: var(--saffron);
}

.story-path article span {
  color: var(--cobalt);
  text-transform: uppercase;
  font-size: .72rem;
  font-weight: 700;
}

.story-path h3 {
  font-family: var(--font-display);
  margin: 42px 0 18px;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
}

.story-path p {
  color: #465269;
  margin: 0;
  font-size: .84rem;
  line-height: 1.6;
}

.story-path svg {
  fill: none;
  stroke: var(--cobalt);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2px;
  width: 100%;
}

.unit-preview {
  background: var(--cobalt);
  color: var(--white);
  padding: clamp(74px, 9vw, 130px) 0 0;
  overflow: hidden;
}

.unit-heading {
  padding: 0 clamp(28px, 7vw, 110px) 70px;
}

.unit-heading h2 {
  font-family: var(--font-display);
  letter-spacing: -.03em;
  max-width: 10.5ch;
  margin: 0;
  font-size: clamp(3.3rem, 6vw, 6rem);
  font-weight: 600;
  line-height: .92;
}

.unit-context {
  color: var(--cobalt-tint);
  max-width: 54ch;
  margin: 28px 0 0;
  line-height: 1.6;
}

.unit-context strong {
  color: var(--saffron);
  font-family: var(--font-display);
  letter-spacing: .01em;
  text-transform: uppercase;
  font-size: 1.05rem;
}

.word-ribbon {
  grid-template-columns: repeat(4, minmax(260px, 1fr));
  display: grid;
  overflow-x: auto;
}

.word-ribbon article {
  background: var(--white);
  border-right: 1px solid var(--line-light);
  color: var(--ink);
  min-height: 300px;
  padding: 42px clamp(26px, 3vw, 46px);
}

.word-ribbon article:nth-child(2n) {
  background: var(--ink);
  color: var(--white);
}

.word-ribbon article:last-child {
  background: var(--saffron);
}

.word-arabic {
  font-family: var(--font-arabic);
  min-height: 88px;
  margin: 0;
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1.55;
}

.word-transliteration {
  opacity: .72;
  border-top: 1px solid;
  margin: 38px 0 0;
  padding-top: 16px;
  font-size: .76rem;
}

.word-english {
  font-family: var(--font-display);
  margin: 8px 0 0;
  font-size: 1.55rem;
  font-weight: 600;
}

.teacher-band {
  background: var(--ink);
  color: var(--white);
  justify-content: space-between;
  align-items: end;
  gap: 80px;
  padding: clamp(76px, 10vw, 140px) clamp(28px, 7vw, 110px);
  display: flex;
}

.teacher-band h2 {
  font-family: var(--font-display);
  letter-spacing: -.03em;
  max-width: 10ch;
  margin: 0;
  font-size: clamp(3.2rem, 5vw, 5.4rem);
  font-weight: 600;
  line-height: .92;
}

.teacher-band p {
  color: var(--ink-tint);
  max-width: 58ch;
  margin: 28px 0 0;
  line-height: 1.65;
}

.teacher-band > a {
  border-bottom: 2px solid var(--saffron);
  color: var(--saffron);
  flex: none;
  align-items: center;
  gap: 18px;
  padding: 14px 0;
  font-weight: 700;
  display: flex;
}

footer {
  background: var(--ink);
  color: var(--white);
  border-top: 1px solid #343b43;
  justify-content: space-between;
  align-items: center;
  gap: 60px;
  padding: 28px clamp(28px, 7vw, 110px) 38px;
  display: flex;
}

footer p {
  color: #aeb6be;
  text-align: right;
  max-width: 76ch;
  margin: 0;
  font-size: .68rem;
  line-height: 1.5;
}

@keyframes wave-breathe {
  from {
    opacity: .55;
    transform: scaleY(.55);
  }

  to {
    opacity: 1;
    transform: scaleY(1);
  }
}

@keyframes mic-pulse {
  0% {
    box-shadow: 0 0 #ffbf198c;
  }

  100% {
    box-shadow: 0 0 0 16px #ffbf1900;
  }
}

@media (hover: hover) {
  .listen-station > button, .speak-station > button, .speak-station form button {
    transition: background-color .16s ease-out, border-color .16s ease-out;
  }

  .listen-station > button:hover, .speak-station > button:hover {
    border-color: var(--saffron);
    background: #182129;
  }

  .speak-station form button:hover {
    background: var(--saffron-pale);
  }
}

@media (max-width: 1100px) {
  .hero {
    grid-template-columns: 38% 62%;
  }

  .hero h1 {
    font-size: clamp(3.5rem, 6vw, 5rem);
  }

  .speaking-demo {
    padding-left: 28px;
    padding-right: 28px;
  }

  .sequence-row {
    overflow-x: auto;
  }

  .companion-story {
    grid-template-columns: 1fr;
    gap: 70px;
  }

  .companion-intro h2 {
    max-width: 12ch;
  }
}

@media (max-width: 820px) {
  .site-header {
    height: 62px;
  }

  .site-header nav {
    gap: 18px;
  }

  .hero {
    display: block;
  }

  .hero-promise {
    min-height: 560px;
    padding-bottom: 100px;
  }

  .hero h1 {
    max-width: 8ch;
    font-size: clamp(4rem, 17vw, 5.8rem);
  }

  .speaking-demo {
    min-height: auto;
    padding: 58px 24px 30px;
  }

  .practice-path {
    display: none;
  }

  .speaking-demo:before {
    height: 520px;
    top: 130px;
  }

  .phrase-focus {
    margin: 42px auto 30px;
  }

  .phrase-focus h2 {
    text-wrap: wrap;
    font-size: clamp(2.6rem, 11vw, 4.5rem);
  }

  .demo-bottom-row {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .sequence-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .sequence-row {
    grid-template-columns: 110px minmax(820px, 1fr);
  }

  .book-marker {
    min-height: 180px;
  }

  .story-path {
    grid-template-columns: 1fr;
  }

  .story-path svg {
    height: 70px;
    margin: 10px 0;
    transform: rotate(90deg);
  }

  .word-ribbon {
    grid-template-columns: repeat(4, minmax(280px, 82vw));
  }

  .teacher-band {
    flex-direction: column;
    align-items: flex-start;
    gap: 42px;
  }

  footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  footer p {
    text-align: left;
  }
}

@media (max-width: 520px) {
  .site-header {
    padding: 0 18px;
  }

  .site-header nav {
    gap: 16px;
  }

  .site-header nav a:nth-child(2), .site-header nav a:nth-child(3) {
    display: none;
  }

  .wordmark {
    font-size: 1.75rem;
  }

  .hero-promise {
    min-height: 530px;
    padding: 54px 24px 100px;
  }

  .hero-copy > p {
    margin-top: 24px;
  }

  .primary-action {
    gap: 26px;
    min-height: 62px;
    margin-top: 30px;
  }

  .promise-letter {
    width: 42%;
    right: -5px;
  }

  .listen-station > button {
    min-height: 78px;
    padding: 0 12px;
  }

  .round-icon {
    width: 48px;
    height: 48px;
  }

  .audio-wave {
    gap: 1px;
    margin: 0 8px;
  }

  .audio-wave i:nth-child(2n) {
    display: none;
  }

  .phrase-focus h2 {
    line-height: 1.6;
  }

  .practice-sequence {
    padding-left: 18px;
    padding-right: 18px;
  }

  .companion-story, .teacher-band {
    padding-left: 24px;
    padding-right: 24px;
  }

  .companion-intro h2, .teacher-band h2 {
    font-size: 3.4rem;
  }

  .unit-heading {
    padding-left: 24px;
    padding-right: 24px;
  }

  .unit-heading h2 {
    font-size: 3.6rem;
  }
}

.lesson-shell {
  background: var(--ink);
  min-height: 100vh;
}

.lesson-header {
  background: var(--cobalt-deep);
  color: var(--white);
  border-bottom: 1px solid #ffffff47;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 68px;
  padding: 0 clamp(20px, 3vw, 52px);
  display: grid;
}

.lesson-header p {
  color: var(--cobalt-tint);
  margin: 0;
  font-size: .78rem;
}

.lesson-header > a:last-child {
  justify-self: end;
  padding: 10px 0;
  font-size: .82rem;
}

.lesson-header > a:last-child:hover {
  color: var(--saffron);
}

.lesson-workspace {
  grid-template-columns: minmax(280px, 24vw) minmax(0, 1fr);
  min-height: calc(100vh - 68px);
  display: grid;
}

.lesson-rail {
  background: var(--cobalt);
  color: var(--white);
  flex-direction: column;
  padding: clamp(38px, 5vw, 70px) clamp(24px, 3vw, 46px) 36px;
  display: flex;
}

.lesson-rail-copy h1 {
  font-family: var(--font-display);
  letter-spacing: -.03em;
  max-width: 8ch;
  margin: 0;
  font-size: clamp(3rem, 4vw, 4.7rem);
  font-weight: 600;
  line-height: .9;
}

.lesson-rail-copy p {
  color: var(--cobalt-tint);
  max-width: 31ch;
  margin: 24px 0 0;
  font-size: .85rem;
  line-height: 1.6;
}

.lesson-progress {
  background: #ffffff38;
  height: 3px;
  margin: 36px 0 24px;
  overflow: hidden;
}

.lesson-progress span {
  background: var(--saffron);
  transform-origin: 0;
  height: 100%;
  transition: transform .28s cubic-bezier(.16, 1, .3, 1);
  display: block;
}

.lesson-rail ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lesson-rail li {
  border-top: 1px solid #ffffff3d;
}

.lesson-rail li:last-child {
  border-bottom: 1px solid #ffffff3d;
}

.lesson-rail li > button {
  color: inherit;
  cursor: pointer;
  text-align: left;
  background: none;
  border: 0;
  grid-template-columns: 30px 1fr;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 15px 8px;
  display: grid;
}

.lesson-rail li > button:disabled {
  color: #ffffff6b;
  cursor: not-allowed;
}

.lesson-rail li > button > span:first-child {
  border: 1px solid;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  font-size: .72rem;
  font-weight: 700;
  display: flex;
}

.lesson-rail li > button > span:last-child {
  gap: 3px;
  display: grid;
}

.lesson-rail li strong {
  font-family: var(--font-display);
  letter-spacing: .02em;
  text-transform: uppercase;
  font-size: 1.15rem;
}

.lesson-rail li small {
  color: inherit;
  opacity: .72;
  font-size: .66rem;
  line-height: 1.35;
}

.lesson-rail li > button.is-active {
  background: var(--ink);
  color: var(--white);
  width: calc(100% + 16px);
  margin-inline: -8px;
  padding-inline: 16px 8px;
}

.lesson-rail li > button.is-active > span:first-child, .lesson-rail li > button.is-complete > span:first-child {
  background: var(--saffron);
  border-color: var(--saffron);
  color: var(--ink);
}

.lesson-source-note {
  color: var(--cobalt-tint);
  font-family: var(--font-display);
  text-transform: uppercase;
  margin: auto 0 0;
  padding-top: 32px;
  font-size: .9rem;
}

.lesson-stage {
  background: var(--ink);
  color: var(--white);
  min-width: 0;
  padding: 34px clamp(28px, 5vw, 82px) 30px;
  position: relative;
  overflow: hidden;
}

.lesson-stage:before, .lesson-stage:after {
  content: "";
  pointer-events: none;
  border: 1px dotted #ffbf1926;
  border-radius: 50%;
  width: 760px;
  height: 680px;
  position: absolute;
  top: -280px;
  right: -120px;
}

.lesson-stage:after {
  width: 560px;
  height: 510px;
  top: -190px;
  right: 20px;
}

.lesson-stage > * {
  z-index: 2;
  position: relative;
}

.lesson-stage-topline {
  color: #aeb7c0;
  text-transform: uppercase;
  border-bottom: 1px solid #343d46;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  font-size: .65rem;
  display: flex;
}

.lesson-stage-topline p {
  margin: 0;
}

.lesson-prompt {
  justify-content: space-between;
  align-items: center;
  margin-top: 28px;
  display: flex;
}

.lesson-prompt-copy h2 {
  font-family: var(--font-display);
  margin: 0;
  font-size: 2.35rem;
  font-weight: 600;
  line-height: 1;
}

.lesson-prompt-copy p {
  color: var(--ink-tint);
  margin: 8px 0 0;
  font-size: .8rem;
}

.model-audio {
  background: var(--ink-lift);
  color: var(--white);
  cursor: pointer;
  border: 1px solid #485059;
  border-radius: 15px;
  align-items: center;
  gap: 18px;
  min-height: 56px;
  padding: 10px 16px 10px 20px;
  display: flex;
}

.model-audio > span:first-child {
  font-size: .78rem;
  font-weight: 700;
}

.model-wave {
  align-items: center;
  gap: 2px;
  height: 30px;
  display: flex;
}

.model-wave i {
  background: var(--saffron);
  opacity: .9;
  width: 2px;
  min-height: 5px;
  max-height: 28px;
  animation: 1.7s cubic-bezier(.16, 1, .3, 1) infinite alternate wave-breathe;
  display: block;
}

.model-wave i:nth-child(3n) {
  animation-delay: -640ms;
}

.active-phrase {
  text-align: center;
  max-width: 900px;
  margin: clamp(42px, 7vh, 76px) auto 36px;
}

.active-phrase > p:first-child {
  font-family: var(--font-arabic);
  margin: 0;
  font-size: clamp(4rem, 7.2vw, 7rem);
  font-weight: 600;
  line-height: 1.45;
}

.active-phrase > p:nth-last-child(2) {
  color: var(--ink-tint);
  margin: 10px 0 0;
  font-size: .78rem;
}

.active-phrase > p:last-child {
  color: var(--saffron);
  font-family: var(--font-display);
  margin: 4px 0 0;
  font-size: 1.1rem;
}

.phrase-measure {
  border-top: 1px dashed #ffbf19c7;
  justify-content: space-around;
  align-items: flex-start;
  max-width: 670px;
  height: 15px;
  margin: -5px auto 0;
  display: flex;
}

.phrase-measure i {
  background: var(--saffron);
  width: 1px;
  height: 10px;
}

.lesson-interaction {
  border-top: 1px solid #343d46;
  margin-top: 32px;
  padding-top: 28px;
}

.listen-task {
  justify-content: space-between;
  align-items: center;
  gap: 36px;
  display: flex;
}

.listen-task > p {
  color: var(--ink-tint);
  max-width: 55ch;
  margin: 0;
  line-height: 1.6;
}

.listen-task > p span {
  color: var(--white);
  font-family: var(--font-arabic);
}

.lesson-next {
  background: var(--saffron);
  color: var(--ink);
  cursor: pointer;
  border: 0;
  border-radius: 0;
  flex: none;
  min-height: 54px;
  padding: 0 24px;
  font-weight: 700;
}

.lesson-next:hover {
  background: var(--saffron-pale);
}

.lesson-next:disabled {
  color: #2f3336;
  cursor: not-allowed;
  background: #8b826d;
}

.practice-response {
  grid-template-columns: minmax(170px, .7fr) minmax(260px, 1.3fr) auto;
  align-items: end;
  gap: 18px;
  display: grid;
}

.lesson-mic {
  background: var(--ink-lift);
  color: var(--white);
  cursor: pointer;
  border: 1px solid #485059;
  border-radius: 15px;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 0 18px;
  display: flex;
}

.lesson-mic > span {
  background: var(--saffron);
  border-radius: 50%;
  width: 12px;
  height: 12px;
  display: block;
  position: relative;
}

.lesson-mic > span:after {
  border: 1px solid var(--saffron);
  content: "";
  border-radius: 50%;
  position: absolute;
  inset: -5px;
}

.lesson-mic.is-listening > span {
  animation: 1s ease-out infinite mic-pulse;
}

.lesson-mic:disabled {
  cursor: wait;
}

.practice-response form label {
  color: var(--ink-tint);
  margin-bottom: 6px;
  font-size: .68rem;
  display: block;
}

.practice-response form > div {
  min-height: 58px;
  display: flex;
}

.practice-response input {
  color: var(--white);
  font-family: var(--font-arabic);
  background: #171e25;
  border: 1px solid #485059;
  border-radius: 10px 0 0 10px;
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  font-size: 1rem;
}

.practice-response input::placeholder {
  color: #a9b1b8;
}

.practice-response form button {
  background: var(--saffron);
  color: var(--ink);
  cursor: pointer;
  border: 0;
  border-radius: 0 10px 10px 0;
  padding: 0 18px;
  font-size: .75rem;
  font-weight: 700;
}

.response-message, .choice-feedback {
  color: var(--saffron);
  grid-column: 1 / -1;
  margin: 0;
}

.response-message.error, .choice-feedback.error {
  color: #ffd760;
}

.response-result {
  background: var(--ink-lift);
  border: 1px solid #485059;
  border-radius: 15px;
  grid-column: 1 / 3;
  grid-template-columns: 54px 1fr;
  align-items: center;
  gap: 14px;
  min-height: 76px;
  padding: 10px 16px;
  display: grid;
}

.response-result strong {
  border: 2px solid var(--saffron);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  display: flex;
}

.response-result p {
  color: var(--ink-tint);
  margin: 0;
  font-size: .78rem;
  line-height: 1.45;
}

.guidance-task {
  grid-template-columns: 110px minmax(0, 1fr) auto;
  align-items: start;
  gap: 22px;
  display: grid;
}

.guidance-score {
  border: 2px solid var(--saffron);
  border-radius: 50%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 96px;
  height: 96px;
  display: flex;
}

.guidance-score strong {
  font-size: 1.8rem;
  line-height: 1;
}

.guidance-score span {
  color: var(--ink-tint);
  text-transform: uppercase;
  margin-top: 5px;
  font-size: .52rem;
}

.guidance-task h3 {
  font-family: var(--font-display);
  margin: 0 0 10px;
  font-size: 1.55rem;
}

.guidance-task > div:nth-child(2) > p:last-child {
  color: var(--ink-tint);
  max-width: 58ch;
  margin: 10px 0 0;
  font-size: .78rem;
  line-height: 1.5;
}

.guidance-transcript {
  font-family: var(--font-arabic);
  margin: 0;
  font-size: 1.55rem;
}

.guidance-actions {
  gap: 10px;
  display: grid;
}

.guidance-actions button:first-child {
  color: var(--white);
  cursor: pointer;
  background: none;
  border: 1px solid #5a626b;
  min-height: 48px;
  padding: 0 18px;
}

.guidance-task > small {
  color: #a9b1b8;
  grid-column: 2 / -1;
  font-size: .61rem;
}

.repeat-task {
  gap: 24px;
  display: grid;
}

.identity-choice {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 620px;
  display: grid;
}

.identity-choice button {
  background: var(--ink-lift);
  color: var(--white);
  cursor: pointer;
  border: 1px solid #485059;
  border-radius: 15px;
  justify-content: space-between;
  align-items: center;
  min-height: 58px;
  padding: 9px 16px;
  display: flex;
}

.identity-choice button.is-selected {
  border-color: var(--saffron);
}

.identity-choice button:hover {
  border-color: var(--saffron);
  background: #182129;
}

.identity-choice span {
  font-family: var(--font-arabic);
  font-size: 1.2rem;
}

.identity-choice small {
  color: var(--ink-tint);
}

.exchange-task {
  max-width: 900px;
}

.exchange-line {
  background: var(--ink-lift);
  border: 1px solid #485059;
  border-radius: 15px;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 14px 18px;
  display: grid;
}

.exchange-line > span {
  color: var(--saffron);
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 700;
}

.exchange-line p {
  font-family: var(--font-arabic);
  margin: 0;
  font-size: 1.8rem;
}

.exchange-line small {
  color: var(--ink-tint);
}

.exchange-task > p {
  color: var(--ink-tint);
  margin: 18px 0 12px;
  font-size: .8rem;
}

.exchange-choices {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}

.exchange-choices button {
  color: var(--white);
  cursor: pointer;
  text-align: left;
  background: none;
  border: 1px solid #485059;
  border-radius: 15px;
  flex-direction: column;
  align-items: flex-start;
  min-height: 88px;
  padding: 14px 16px;
  display: flex;
}

.exchange-choices button:hover {
  border-color: var(--saffron);
}

.exchange-choices span {
  font-family: var(--font-arabic);
  font-size: 1.25rem;
}

.exchange-choices small {
  color: var(--ink-tint);
  margin-top: 5px;
}

.lesson-privacy {
  color: #9ca5ad;
  text-align: center;
  margin: 28px 0 0;
  font-size: .58rem;
  line-height: 1.45;
}

.lesson-complete {
  background: var(--cobalt);
  color: var(--white);
  grid-template-columns: auto minmax(0, 1fr) minmax(260px, .7fr);
  align-items: center;
  gap: clamp(38px, 6vw, 90px);
  min-height: calc(100vh - 68px);
  padding: clamp(48px, 8vw, 120px);
  display: grid;
}

.completion-signal {
  border: 3px solid var(--saffron);
  color: var(--saffron);
  font-family: var(--font-display);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 120px;
  height: 120px;
  font-size: 2rem;
  display: flex;
}

.lesson-complete h1 {
  font-family: var(--font-display);
  letter-spacing: -.03em;
  max-width: 9ch;
  margin: 0;
  font-size: clamp(3.6rem, 6vw, 6rem);
  font-weight: 600;
  line-height: .9;
}

.lesson-complete > div:nth-child(2) > p {
  color: var(--cobalt-tint);
  max-width: 52ch;
  margin: 28px 0 0;
  line-height: 1.65;
}

.completion-actions {
  gap: 18px;
  margin-top: 34px;
  display: flex;
}

.completion-actions button, .completion-actions a {
  align-items: center;
  min-height: 56px;
  padding: 0 22px;
  font-weight: 700;
  display: inline-flex;
}

.completion-actions button {
  background: var(--saffron);
  color: var(--ink);
  cursor: pointer;
  border: 0;
}

.completion-actions a {
  border-bottom: 2px solid var(--saffron);
  color: var(--saffron);
}

.completion-actions button:hover {
  background: var(--saffron-pale);
}

.completion-actions a:hover {
  color: var(--saffron-pale);
}

.completion-phrases {
  border-top: 1px solid #ffffff59;
}

.completion-phrases p {
  font-family: var(--font-arabic);
  border-bottom: 1px solid #ffffff59;
  margin: 0;
  padding: 14px 0;
  font-size: 1.7rem;
}

.lesson-footer {
  background: var(--ink);
  color: #aeb6be;
  border-top: 1px solid #343d46;
  padding: 18px clamp(24px, 5vw, 82px) 24px;
}

.lesson-footer p {
  max-width: 80ch;
  margin: 0;
  font-size: .62rem;
  line-height: 1.5;
}

@media (hover: hover) {
  .model-audio, .lesson-mic, .practice-response form button, .identity-choice button, .exchange-choices button {
    transition: background-color .16s ease-out, border-color .16s ease-out;
  }

  .model-audio:hover, .lesson-mic:hover {
    border-color: var(--saffron);
    background: #182129;
  }

  .practice-response form button:hover {
    background: var(--saffron-pale);
  }
}

@media (max-width: 980px) {
  .lesson-workspace {
    display: block;
  }

  .lesson-rail {
    padding: 28px 24px 20px;
  }

  .lesson-rail-copy {
    justify-content: space-between;
    align-items: end;
    gap: 28px;
    display: flex;
  }

  .lesson-rail-copy h1 {
    max-width: 10ch;
    font-size: 3.2rem;
  }

  .lesson-rail-copy p {
    margin: 0;
  }

  .lesson-progress {
    margin: 24px 0 14px;
  }

  .lesson-rail ol {
    grid-template-columns: repeat(5, minmax(170px, 1fr));
    display: grid;
    overflow-x: auto;
  }

  .lesson-rail li {
    border-bottom: 1px solid #ffffff3d;
  }

  .lesson-rail li > button.is-active {
    width: 100%;
    margin: 0;
    padding-inline: 12px;
  }

  .lesson-source-note {
    margin-top: 16px;
    padding-top: 0;
  }

  .practice-response {
    grid-template-columns: minmax(170px, .7fr) minmax(260px, 1.3fr);
  }

  .practice-response > .lesson-next {
    grid-column: 2;
  }

  .guidance-task {
    grid-template-columns: 96px minmax(0, 1fr);
  }

  .guidance-actions {
    grid-column: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .guidance-task > small {
    grid-column: 2;
  }

  .lesson-complete {
    grid-template-columns: auto 1fr;
  }

  .completion-phrases {
    grid-column: 2;
  }
}

@media (max-width: 640px) {
  .lesson-header {
    grid-template-columns: 1fr 1fr;
    height: 62px;
    padding: 0 18px;
  }

  .lesson-header p {
    display: none;
  }

  .lesson-workspace {
    min-height: calc(100vh - 62px);
  }

  .lesson-rail-copy {
    align-items: flex-start;
    display: block;
  }

  .lesson-rail-copy h1 {
    font-size: 2.8rem;
  }

  .lesson-rail-copy p {
    margin-top: 14px;
  }

  .lesson-rail ol {
    grid-template-columns: repeat(5, minmax(146px, 1fr));
  }

  .lesson-rail li > button {
    gap: 9px;
    padding: 12px 8px;
  }

  .lesson-rail li small {
    display: none;
  }

  .lesson-source-note {
    font-size: .8rem;
  }

  .lesson-stage {
    padding: 26px 20px 28px;
  }

  .lesson-stage-topline p:last-child {
    display: none;
  }

  .lesson-prompt {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  .model-audio {
    width: 100%;
  }

  .model-wave {
    flex: 1;
    justify-content: flex-end;
  }

  .active-phrase {
    margin: 36px auto 28px;
  }

  .active-phrase > p:first-child {
    font-size: clamp(3.3rem, 16vw, 5rem);
    line-height: 1.55;
  }

  .listen-task {
    flex-direction: column;
    align-items: stretch;
    gap: 22px;
  }

  .practice-response {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .practice-response > *, .practice-response > .lesson-next, .response-result {
    grid-column: 1;
  }

  .practice-response .lesson-next {
    width: 100%;
  }

  .guidance-task {
    grid-template-columns: 1fr;
  }

  .guidance-score {
    width: 82px;
    height: 82px;
  }

  .guidance-actions, .guidance-task > small {
    grid-column: 1;
  }

  .guidance-actions, .identity-choice, .exchange-choices {
    grid-template-columns: 1fr;
  }

  .exchange-line {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .exchange-line p {
    font-size: 2rem;
  }

  .lesson-complete {
    grid-template-columns: 1fr;
    align-items: start;
    padding: 50px 24px 70px;
  }

  .completion-signal {
    width: 88px;
    height: 88px;
  }

  .lesson-complete h1 {
    font-size: 4rem;
  }

  .completion-phrases {
    grid-column: 1;
  }

  .completion-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .completion-actions button, .completion-actions a {
    justify-content: center;
  }
}

.surface-contract {
  display: none;
}

.curriculum-shell {
  background: var(--paper);
  color: var(--ink);
  min-height: 100vh;
}

.library-header {
  background: var(--cobalt-deep);
  color: var(--white);
  border-bottom: 1px solid #ffffff47;
  justify-content: space-between;
  align-items: center;
  height: 68px;
  padding: 0 clamp(20px, 3vw, 52px);
  display: flex;
}

.library-header nav {
  align-items: center;
  gap: clamp(22px, 3vw, 48px);
  display: flex;
}

.library-header nav a {
  padding: 24px 0 21px;
  font-size: .82rem;
}

.library-header nav a[aria-current="page"] {
  border-bottom: 3px solid var(--saffron);
  color: var(--saffron);
}

.library-header nav a:hover {
  color: var(--saffron-pale);
}

.library-intro {
  background: var(--white);
  grid-template-columns: minmax(0, 1.1fr) minmax(340px, .75fr);
  align-items: stretch;
  gap: clamp(34px, 6vw, 100px);
  padding: clamp(64px, 8vw, 118px) clamp(24px, 6vw, 96px);
  display: grid;
}

.library-intro > div {
  align-self: center;
}

.library-intro h1 {
  font-family: var(--font-display);
  letter-spacing: -.03em;
  max-width: 10ch;
  margin: 0;
  font-size: 4.8rem;
  font-weight: 600;
  line-height: .9;
}

.library-intro > div > p {
  color: #485059;
  max-width: 61ch;
  margin: 30px 0 0;
  line-height: 1.65;
}

.continue-field {
  background: var(--ink);
  color: var(--white);
  min-height: 320px;
  padding: 30px 34px 0;
  display: grid;
}

.continue-field > div {
  justify-content: space-between;
  align-items: start;
  display: flex;
}

.continue-field > div span {
  color: var(--saffron);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .72rem;
  font-weight: 700;
}

.continue-field > div strong {
  font-size: .78rem;
}

.continue-field > p {
  font-family: var(--font-arabic);
  text-align: center;
  align-self: center;
  margin: 18px 0;
  font-size: 2.8rem;
  font-weight: 600;
  line-height: 1.5;
}

.continue-field > a {
  background: var(--saffron);
  color: var(--ink);
  justify-content: center;
  align-self: end;
  align-items: center;
  min-height: 68px;
  margin: 0 -34px;
  font-weight: 700;
  display: flex;
}

.continue-field > a:hover {
  background: var(--saffron-pale);
}

.curriculum-index {
  grid-template-columns: minmax(190px, 16vw) minmax(0, 1fr);
  display: grid;
}

.book-rail {
  background: var(--cobalt);
  color: var(--white);
  flex-direction: column;
  min-height: 100%;
  padding: 54px 34px;
  display: flex;
}

.book-rail > span, .book-two-marker > span {
  color: var(--saffron);
  font-family: var(--font-display);
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 1.2rem;
  font-weight: 700;
}

.book-rail > strong, .book-two-marker > strong {
  font-family: var(--font-display);
  font-size: 7rem;
  font-weight: 600;
  line-height: .9;
}

.book-rail > p {
  color: var(--cobalt-tint);
  border-top: 1px solid #ffffff59;
  margin: auto 0 0;
  padding-top: 22px;
  font-size: .75rem;
  line-height: 1.55;
}

.unit-ledger {
  min-width: 0;
}

.ledger-heading {
  background: var(--paper);
  border-bottom: 1px solid var(--line-light);
  justify-content: space-between;
  align-items: end;
  padding: 46px clamp(24px, 4vw, 66px) 36px;
  display: flex;
}

.ledger-heading h2 {
  font-family: var(--font-display);
  letter-spacing: -.02em;
  text-transform: uppercase;
  margin: 0;
  font-size: 2.6rem;
  font-weight: 700;
}

.ledger-heading p {
  color: #485059;
  max-width: 58ch;
  margin: 10px 0 0;
}

.ledger-heading dl {
  gap: 24px;
  margin: 0;
  display: flex;
}

.ledger-heading dl div {
  border-top: 2px solid var(--cobalt);
  min-width: 88px;
  padding-top: 8px;
}

.ledger-heading dt {
  color: #485059;
  text-transform: uppercase;
  font-size: .68rem;
}

.ledger-heading dd {
  font-family: var(--font-display);
  margin: 2px 0 0;
  font-size: 1.25rem;
  font-weight: 700;
}

.unit-row {
  background: var(--paper);
  border-bottom: 1px solid var(--line-light);
  grid-template-columns: 94px minmax(280px, 1.2fr) minmax(220px, .7fr) 180px;
  align-items: stretch;
  min-height: 140px;
  display: grid;
}

.unit-row > div {
  border-right: 1px solid var(--line-light);
  padding: 24px 26px;
}

.unit-row > div:last-child {
  border-right: 0;
}

.unit-number {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.unit-number span {
  color: #485059;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .65rem;
}

.unit-number strong {
  font-family: var(--font-display);
  font-size: 3.3rem;
  line-height: 1;
}

.unit-copy {
  align-content: center;
}

.unit-copy h3 {
  font-family: var(--font-display);
  letter-spacing: .01em;
  text-transform: uppercase;
  margin: 0;
  font-size: 1.65rem;
}

.unit-copy > p {
  color: #485059;
  max-width: 55ch;
  margin: 9px 0 0;
  font-size: .84rem;
  line-height: 1.55;
}

.unit-sample {
  align-content: center;
}

.unit-sample p {
  font-family: var(--font-arabic);
  margin: 0;
  font-size: 1.65rem;
  line-height: 1.5;
}

.unit-sample span {
  color: #485059;
  margin-top: 8px;
  font-size: .68rem;
  display: block;
}

.unit-state {
  text-align: center;
  align-content: center;
}

.unit-state > a {
  background: var(--saffron);
  color: var(--ink);
  justify-content: center;
  align-items: center;
  min-height: 54px;
  padding: 0 18px;
  font-weight: 700;
  display: flex;
}

.unit-state > a:hover {
  background: var(--saffron-pale);
}

.unit-state > span {
  color: #485059;
  gap: 5px;
  font-size: .75rem;
  line-height: 1.45;
  display: grid;
}

.unit-state > span strong {
  color: var(--cobalt-deep);
  font-family: var(--font-display);
  letter-spacing: .02em;
  text-transform: uppercase;
  font-size: 1rem;
}

.unit-state > span small {
  font-size: .7rem;
}

.unit-row.is-pending .unit-number strong {
  font-size: 2.85rem;
}

.unit-row.is-pending .unit-copy h3 {
  font-size: 1.5rem;
}

.unit-row.is-pending .unit-sample p {
  font-size: 1.45rem;
}

.unit-row.is-open {
  background: var(--ink);
  color: var(--white);
  border-color: #343d46;
  min-height: 248px;
}

.unit-row.is-open > div {
  border-color: #343d46;
}

.unit-row.is-open .unit-number span, .unit-row.is-open .unit-copy > p, .unit-row.is-open .unit-sample span {
  color: var(--ink-tint);
}

.unit-row.is-open .unit-number strong {
  color: var(--saffron);
}

.library-sequence {
  grid-template-columns: repeat(5, minmax(70px, 1fr));
  gap: 8px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.library-sequence li {
  border-top: 1px solid #485059;
  align-items: center;
  gap: 7px;
  padding-top: 9px;
  font-size: .66rem;
  display: flex;
}

.library-sequence li span {
  border: 1px solid var(--saffron);
  color: var(--saffron);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 22px;
  height: 22px;
  font-size: .58rem;
  display: flex;
}

.book-two-band {
  background: var(--white);
  grid-template-columns: minmax(190px, 16vw) minmax(0, 1fr) minmax(220px, 26vw);
  align-items: stretch;
  margin-top: 12px;
  display: grid;
}

.book-two-marker {
  background: var(--ink);
  color: var(--white);
  flex-direction: column;
  padding: 42px 34px;
  display: flex;
}

.book-two-band > div:nth-child(2) {
  align-content: center;
  padding: 46px clamp(26px, 5vw, 76px);
}

.book-two-band h2 {
  font-family: var(--font-display);
  letter-spacing: -.02em;
  text-transform: uppercase;
  max-width: 17ch;
  margin: 0;
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
}

.book-two-band p {
  color: #485059;
  max-width: 65ch;
  margin: 18px 0 0;
  line-height: 1.65;
}

.book-two-state {
  border-left: 1px solid var(--line-light);
  color: #67717b;
  text-align: center;
  justify-content: center;
  align-items: center;
  padding: 36px;
  font-size: .75rem;
  display: flex;
}

.library-footer {
  background: var(--cobalt-deep);
  color: var(--white);
  justify-content: space-between;
  align-items: center;
  gap: 50px;
  padding: 30px clamp(24px, 4vw, 64px);
  display: flex;
}

.library-footer p {
  color: var(--cobalt-tint);
  text-align: right;
  max-width: 80ch;
  margin: 0;
  font-size: .68rem;
  line-height: 1.5;
}

@media (max-width: 1040px) {
  .library-intro {
    grid-template-columns: 1fr;
  }

  .continue-field {
    min-height: 290px;
  }

  .curriculum-index {
    grid-template-columns: 1fr;
  }

  .book-rail {
    grid-template-columns: auto auto 1fr;
    align-items: end;
    gap: 20px;
    min-height: auto;
    padding: 24px 30px;
    display: grid;
  }

  .book-rail > strong {
    font-size: 4rem;
  }

  .book-rail > p {
    border-top: 0;
    border-left: 1px solid #ffffff59;
    margin: 0;
    padding: 0 0 0 22px;
  }

  .unit-row {
    grid-template-columns: 86px minmax(270px, 1fr) minmax(220px, .7fr) 160px;
  }

  .book-two-band {
    grid-template-columns: 150px 1fr;
  }

  .book-two-state {
    border-left: 0;
    border-top: 1px solid var(--line-light);
    text-align: left;
    grid-column: 2;
    justify-content: flex-start;
    padding: 22px clamp(26px, 5vw, 76px);
  }
}

@media (max-width: 780px) {
  .library-header {
    height: 62px;
    padding: 0 18px;
  }

  .library-header nav {
    gap: 18px;
  }

  .library-header nav a {
    padding: 22px 0 19px;
    font-size: .72rem;
  }

  .library-intro {
    padding: 52px 20px;
  }

  .library-intro h1 {
    font-size: 3.7rem;
  }

  .continue-field {
    min-height: 272px;
    padding: 24px 22px 0;
  }

  .continue-field > p {
    font-size: 2.25rem;
  }

  .continue-field > a {
    margin: 0 -22px;
  }

  .book-rail {
    grid-template-columns: auto auto;
    align-items: center;
  }

  .book-rail > p {
    border-top: 1px solid #ffffff59;
    border-left: 0;
    grid-column: 1 / -1;
    padding: 14px 0 0;
  }

  .ledger-heading {
    align-items: start;
    padding: 34px 20px 26px;
    display: block;
  }

  .ledger-heading h2 {
    font-size: 2.2rem;
  }

  .ledger-heading dl {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 24px;
    display: grid;
  }

  .ledger-heading dl div {
    min-width: 0;
  }

  .unit-row, .unit-row.is-open {
    grid-template-columns: 72px minmax(0, 1fr);
    min-height: 0;
  }

  .unit-row > div {
    padding: 22px 18px;
  }

  .unit-number {
    grid-row: 1 / span 3;
  }

  .unit-copy, .unit-sample, .unit-state {
    grid-column: 2;
    border-right: 0 !important;
  }

  .unit-sample {
    border-top: 1px solid var(--line-light);
  }

  .unit-row.is-open .unit-sample {
    border-color: #343d46;
  }

  .unit-state {
    border-top: 1px solid var(--line-light);
    padding: 18px !important;
  }

  .unit-state > a {
    width: 100%;
    max-width: none;
  }

  .library-sequence {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .book-two-band {
    grid-template-columns: 98px 1fr;
  }

  .book-two-marker {
    padding: 30px 18px;
  }

  .book-two-marker > strong {
    font-size: 4.5rem;
  }

  .book-two-band > div:nth-child(2) {
    padding: 34px 22px;
  }

  .book-two-band h2 {
    font-size: 2.15rem;
  }

  .book-two-state {
    grid-column: 1 / -1;
    padding: 20px 22px;
  }

  .library-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  .library-footer p {
    text-align: left;
  }
}

.unit-hub-shell {
  background: var(--paper);
  color: var(--ink);
  min-height: 100vh;
}

.unit-hub-header {
  background: var(--cobalt-deep);
  color: var(--white);
  border-bottom: 1px solid #ffffff47;
  justify-content: space-between;
  align-items: center;
  height: 68px;
  padding: 0 clamp(20px, 3vw, 52px);
  display: flex;
}

.unit-hub-header nav {
  gap: clamp(22px, 3vw, 46px);
  display: flex;
}

.unit-hub-header nav a {
  padding: 24px 0 21px;
  font-size: .82rem;
}

.unit-hub-header nav a[aria-current="page"] {
  border-bottom: 3px solid var(--saffron);
  color: var(--saffron);
}

.unit-hub-header nav a:hover {
  color: var(--saffron-pale);
}

.unit-hub-intro {
  grid-template-columns: minmax(0, 1.15fr) minmax(370px, .85fr);
  min-height: 520px;
  display: grid;
}

.unit-hub-title-field {
  background: var(--cobalt);
  color: var(--white);
  align-content: center;
  padding: clamp(64px, 8vw, 118px) clamp(28px, 6vw, 96px);
}

.unit-hub-title-field h1 {
  font-family: var(--font-display);
  letter-spacing: -.03em;
  max-width: 10ch;
  margin: 0;
  font-size: 5.2rem;
  font-weight: 600;
  line-height: .9;
}

.unit-hub-title-field p {
  color: var(--cobalt-tint);
  max-width: 54ch;
  margin: 30px 0 0;
  line-height: 1.65;
}

.unit-hub-arabic-field {
  background: var(--ink);
  color: var(--white);
  align-content: space-between;
  padding: clamp(42px, 5vw, 76px);
  display: grid;
}

.unit-hub-arabic-field > div {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.unit-hub-arabic-field > div span {
  color: var(--saffron);
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.1rem;
  font-weight: 700;
}

.unit-hub-arabic-field > div strong {
  font-size: .8rem;
}

.unit-hub-arabic-field > p {
  font-family: var(--font-arabic);
  text-align: center;
  margin: 34px 0;
  font-size: 3rem;
  font-weight: 600;
  line-height: 1.55;
}

.unit-hub-arabic-field > small {
  color: var(--ink-tint);
  border-top: 1px solid #343d46;
  padding-top: 20px;
}

.unit-lesson-desk {
  background: var(--paper);
}

.unit-lesson-desk > header {
  justify-content: space-between;
  align-items: end;
  padding: 52px clamp(24px, 5vw, 78px) 34px;
  display: flex;
}

.unit-lesson-desk > header h2 {
  font-family: var(--font-display);
  letter-spacing: -.02em;
  text-transform: uppercase;
  margin: 0;
  font-size: 2.7rem;
}

.unit-lesson-desk > header p {
  color: #485059;
  max-width: 65ch;
  margin: 10px 0 0;
}

.unit-lesson-desk > header > span {
  color: #67717b;
  font-size: .72rem;
}

.unit-lesson-list {
  border-top: 1px solid var(--line-light);
  margin: 0;
  padding: 0;
  list-style: none;
}

.unit-lesson-list > li {
  background: var(--white);
  border-bottom: 1px solid var(--line-light);
  grid-template-columns: 112px minmax(300px, 1.1fr) minmax(240px, .65fr) 240px;
  align-items: stretch;
  min-height: 196px;
  display: grid;
}

.unit-lesson-list > li:first-child {
  background: var(--ink);
  color: var(--white);
  border-color: #343d46;
  min-height: 228px;
}

.unit-lesson-list > li > * {
  border-right: 1px solid var(--line-light);
  align-content: center;
  margin: 0;
  padding: 28px;
}

.unit-lesson-list > li:first-child > * {
  border-color: #343d46;
}

.unit-lesson-list > li > :last-child {
  border-right: 0;
}

.unit-lesson-number {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.unit-lesson-number span {
  color: #67717b;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .65rem;
}

.unit-lesson-number strong {
  font-family: var(--font-display);
  font-size: 3.3rem;
  line-height: 1;
}

.unit-lesson-list > li:first-child .unit-lesson-number span {
  color: var(--ink-tint);
}

.unit-lesson-list > li:first-child .unit-lesson-number strong {
  color: var(--saffron);
}

.unit-lesson-copy h3 {
  font-family: var(--font-display);
  letter-spacing: .01em;
  text-transform: uppercase;
  margin: 0;
  font-size: 1.65rem;
}

.unit-lesson-copy p {
  color: #485059;
  max-width: 56ch;
  margin: 10px 0 0;
  padding: 0;
  font-size: .85rem;
  line-height: 1.55;
}

.unit-lesson-copy small {
  color: #67717b;
  margin-top: 16px;
  display: block;
}

.unit-lesson-list > li:first-child .unit-lesson-copy p, .unit-lesson-list > li:first-child .unit-lesson-copy small {
  color: var(--ink-tint);
}

.unit-lesson-arabic {
  font-family: var(--font-arabic);
  text-align: center;
  font-size: 1.75rem;
  line-height: 1.55;
}

.unit-lesson-list > li > a {
  background: var(--cobalt);
  color: var(--white);
  text-align: center;
  justify-content: center;
  align-self: center;
  align-items: center;
  min-height: 58px;
  margin: 28px;
  padding: 0 20px;
  font-weight: 700;
  display: flex;
}

.unit-lesson-list > li:first-child > a {
  background: var(--saffron);
  color: var(--ink);
}

.unit-lesson-list > li > a:hover {
  background: var(--cobalt-deep);
}

.unit-lesson-list > li:first-child > a:hover {
  background: var(--saffron-pale);
}

.unit-hub-close {
  background: var(--cobalt);
  color: var(--white);
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  padding: 38px clamp(24px, 5vw, 78px);
  display: flex;
}

.unit-hub-close p {
  color: var(--cobalt-tint);
  margin: 0;
}

.unit-hub-close a {
  background: var(--saffron);
  color: var(--ink);
  flex: none;
  padding: 20px 26px;
  font-weight: 700;
}

.unit-hub-close a:hover {
  background: var(--saffron-pale);
}

.unit-practice-shell {
  background: var(--ink);
  color: var(--white);
  min-height: 100vh;
}

.unit-practice-header {
  background: var(--cobalt-deep);
  border-bottom: 1px solid #ffffff47;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 68px;
  padding: 0 clamp(20px, 3vw, 52px);
  display: grid;
}

.unit-practice-header p {
  color: var(--cobalt-tint);
  margin: 0;
  font-size: .76rem;
}

.unit-practice-header > a:last-child {
  justify-self: end;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  font-size: .8rem;
  display: flex;
}

.unit-practice-header > a:last-child:hover {
  color: var(--saffron);
}

.unit-module-layout {
  grid-template-columns: minmax(260px, 23vw) minmax(0, 1fr);
  min-height: calc(100vh - 68px);
  display: grid;
}

.unit-module-rail {
  background: var(--cobalt);
  flex-direction: column;
  padding: clamp(42px, 5vw, 76px) clamp(24px, 3vw, 46px) 34px;
  display: flex;
}

.unit-module-rail h1 {
  font-family: var(--font-display);
  letter-spacing: -.03em;
  max-width: 8ch;
  margin: 0;
  font-size: 3.5rem;
  font-weight: 600;
  line-height: .92;
}

.unit-module-rail > div:first-child > p {
  color: var(--cobalt-tint);
  margin: 22px 0 0;
  font-size: .85rem;
  line-height: 1.6;
}

.unit-module-progress {
  background: #ffffff38;
  height: 3px;
  margin-top: 38px;
  overflow: hidden;
}

.unit-module-progress span {
  background: var(--saffron);
  transform-origin: 0;
  height: 100%;
  transition: transform .22s cubic-bezier(.16, 1, .3, 1);
  display: block;
}

.unit-module-rail > p {
  color: var(--cobalt-tint);
  margin: 12px 0 0;
  font-size: .72rem;
}

.unit-module-rail > a {
  color: var(--white);
  border-top: 1px solid #ffffff47;
  margin-top: auto;
  padding-top: 22px;
  font-size: .78rem;
}

.unit-module-rail > a:hover {
  color: var(--saffron);
}

.unit-module-stage {
  background: var(--ink);
  padding: clamp(36px, 5vw, 74px) clamp(24px, 6vw, 100px);
}

.unit-stage-heading {
  border-bottom: 1px solid #343d46;
  justify-content: space-between;
  align-items: end;
  padding-bottom: 18px;
  display: flex;
}

.unit-stage-heading h2 {
  font-family: var(--font-display);
  letter-spacing: .01em;
  text-transform: uppercase;
  margin: 0;
  font-size: 1.65rem;
}

.unit-stage-heading p {
  color: var(--ink-tint);
  margin: 0;
  font-size: .78rem;
}

.unit-audio-control {
  color: var(--white);
  cursor: pointer;
  background: none;
  border: 1px solid #485059;
  border-radius: 15px;
  min-height: 52px;
  margin-top: 28px;
  padding: 0 20px;
  font-weight: 700;
}

.unit-audio-control:hover {
  background: var(--ink-lift);
  border-color: var(--saffron);
}

.practice-arabic-focus {
  font-family: var(--font-arabic);
  text-align: center;
  margin: 58px 0 0;
  font-size: 5rem;
  font-weight: 600;
  line-height: 1.5;
}

.practice-transliteration {
  color: var(--saffron);
  text-align: center;
  margin: 6px 0 48px;
}

.unit-primary-action {
  background: var(--saffron);
  color: var(--ink);
  cursor: pointer;
  border: 0;
  min-height: 58px;
  padding: 0 24px;
  font-weight: 700;
}

.unit-primary-action:hover {
  background: var(--saffron-pale);
}

.vocabulary-practice > .unit-primary-action {
  margin: 0 auto;
  display: block;
}

.vocabulary-reveal {
  background: var(--ink-lift);
  border: 1px solid #485059;
  border-radius: 15px;
  gap: 10px;
  max-width: 680px;
  margin: 0 auto;
  padding: 28px 30px;
  display: grid;
}

.vocabulary-reveal > strong {
  color: var(--saffron);
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.65rem;
}

.vocabulary-reveal > p {
  font-family: var(--font-arabic);
  margin: 0;
  font-size: 2rem;
  line-height: 1.55;
}

.vocabulary-reveal > small {
  color: var(--ink-tint);
}

.vocabulary-reveal > .unit-primary-action {
  justify-self: start;
  margin-top: 14px;
}

.dialogue-prompt {
  background: var(--ink-lift);
  border: 1px solid #485059;
  border-radius: 15px;
  margin-top: 34px;
  padding: 20px 24px;
  display: grid;
}

.dialogue-prompt > span {
  color: var(--saffron);
  text-transform: uppercase;
  font-size: .68rem;
  font-weight: 700;
}

.dialogue-prompt > p {
  font-family: var(--font-arabic);
  margin: 4px 0;
  font-size: 2.6rem;
  line-height: 1.5;
}

.dialogue-prompt > small {
  color: var(--ink-tint);
}

.dialogue-prompt > button, .classroom-example > button {
  border: 0;
  border-bottom: 1px solid var(--saffron);
  color: var(--saffron);
  cursor: pointer;
  background: none;
  justify-self: end;
  min-height: 44px;
  padding: 10px 0;
}

.unit-answer-list {
  gap: 10px;
  margin-top: 24px;
  display: grid;
}

.unit-answer-list > button {
  background: var(--ink-lift);
  color: var(--white);
  cursor: pointer;
  text-align: left;
  border: 1px solid #485059;
  border-radius: 15px;
  justify-content: space-between;
  align-items: center;
  min-height: 70px;
  padding: 12px 20px;
  display: flex;
}

.unit-answer-list > button:hover {
  border-color: var(--saffron);
  background: #182129;
}

.unit-answer-list > button > span {
  font-family: var(--font-arabic);
  font-size: 1.45rem;
}

.unit-answer-list > button > small {
  color: var(--ink-tint);
}

.unit-answer-list > button.is-correct {
  border-color: var(--saffron);
}

.unit-answer-list > button.is-incorrect {
  border-color: #cf6a5f;
}

.unit-choice-feedback {
  border-top: 1px solid #485059;
  margin-top: 24px;
  padding-top: 20px;
}

.unit-choice-feedback > p {
  color: var(--ink-tint);
  margin: 0;
  line-height: 1.55;
}

.unit-choice-feedback.is-correct > p {
  color: var(--saffron-pale);
}

.unit-choice-feedback.is-incorrect > p {
  color: #f0a89d;
}

.unit-choice-feedback > .unit-primary-action {
  margin-top: 20px;
}

.speaking-review {
  border-top: 1px solid #485059;
  margin-top: 26px;
  padding-top: 24px;
}

.speaking-review-heading {
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  display: flex;
}

.speaking-review-heading h3 {
  font-family: var(--font-display);
  letter-spacing: .01em;
  text-transform: uppercase;
  margin: 0;
  font-size: 1.65rem;
}

.speaking-review-heading p {
  color: var(--ink-tint);
  max-width: 62ch;
  margin: 7px 0 0;
  font-size: .78rem;
  line-height: 1.55;
}

.speaking-review-heading > button {
  border: 0;
  border-bottom: 1px solid var(--saffron);
  color: var(--saffron);
  cursor: pointer;
  background: none;
  flex: none;
  min-height: 44px;
  padding: 8px 0;
  font-weight: 700;
}

.speaking-review-heading > button:hover {
  color: var(--saffron-pale);
}

.speaking-review-target {
  font-family: var(--font-arabic);
  text-align: center;
  margin: 26px 0 22px;
  font-size: 2.2rem;
  line-height: 1.55;
}

.speaking-review .practice-response {
  margin-top: 0;
}

.speaking-review-result > div {
  min-width: 0;
}

.speaking-review-result > div > span {
  color: var(--saffron);
  font-family: var(--font-display);
  letter-spacing: .02em;
  text-transform: uppercase;
  font-size: .82rem;
  font-weight: 700;
  display: block;
}

.speaking-review-result > div > p {
  color: var(--white);
  font-family: var(--font-arabic);
  overflow-wrap: anywhere;
  margin: 2px 0 5px;
  font-size: 1.25rem;
  line-height: 1.5;
}

.speaking-review-result > div > small {
  color: var(--ink-tint);
  line-height: 1.45;
  display: block;
}

.speaking-review-note {
  color: var(--ink-tint);
  max-width: 76ch;
  margin-top: 18px;
  font-size: .68rem;
  line-height: 1.5;
  display: block;
}

.classroom-object-word {
  border-bottom: 1px solid #343d46;
  justify-content: space-between;
  align-items: end;
  margin-top: 34px;
  padding: 24px 0;
  display: flex;
}

.classroom-object-word span {
  color: var(--ink-tint);
  font-size: .72rem;
}

.classroom-object-word strong {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 3rem;
}

.classroom-answers {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.classroom-answers > button {
  justify-content: center;
}

.classroom-answers > button > span {
  font-size: 2rem;
}

.classroom-example {
  background: var(--ink-lift);
  border: 1px solid #485059;
  border-radius: 15px;
  justify-content: space-between;
  align-items: center;
  margin-top: 18px;
  padding: 14px 18px;
  display: flex;
}

.classroom-example > p {
  font-family: var(--font-arabic);
  margin: 0;
  font-size: 1.6rem;
  line-height: 1.5;
}

.unit-audio-message {
  color: var(--saffron-pale);
  margin-top: 18px;
  font-size: .75rem;
}

.unit-module-complete {
  background: var(--cobalt);
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(34px, 7vw, 100px);
  min-height: calc(100vh - 68px);
  padding: clamp(54px, 8vw, 120px);
  display: grid;
}

.unit-module-complete > div:first-child {
  border: 2px solid var(--saffron);
  color: var(--saffron);
  font-family: var(--font-display);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 116px;
  height: 116px;
  font-size: 2rem;
  display: flex;
}

.unit-module-complete h1 {
  font-family: var(--font-display);
  letter-spacing: -.03em;
  max-width: 10ch;
  margin: 0;
  font-size: 5rem;
  font-weight: 600;
  line-height: .9;
}

.unit-module-complete p {
  color: var(--cobalt-tint);
  max-width: 55ch;
  margin: 26px 0 0;
  line-height: 1.65;
}

.unit-module-complete > div:nth-child(2) > div {
  gap: 18px;
  margin-top: 32px;
  display: flex;
}

.unit-module-complete button, .unit-module-complete a {
  align-items: center;
  min-height: 58px;
  padding: 0 24px;
  font-weight: 700;
  display: flex;
}

.unit-module-complete button {
  background: var(--saffron);
  color: var(--ink);
  cursor: pointer;
  border: 0;
}

.unit-module-complete a {
  border-bottom: 2px solid var(--saffron);
  color: var(--saffron);
}

.unit-module-complete button:hover {
  background: var(--saffron-pale);
}

.unit-module-complete a:hover {
  color: var(--saffron-pale);
}

@media (max-width: 980px) {
  .unit-hub-intro {
    grid-template-columns: 1fr;
  }

  .unit-hub-title-field {
    min-height: 430px;
  }

  .unit-hub-arabic-field {
    min-height: 360px;
  }

  .unit-lesson-list > li {
    grid-template-columns: 90px minmax(280px, 1fr) minmax(210px, .7fr);
  }

  .unit-lesson-list > li > a {
    grid-column: 2 / -1;
    justify-self: start;
    min-width: 220px;
    margin-top: 0;
  }

  .unit-module-layout {
    display: block;
  }

  .unit-module-rail {
    grid-template-columns: minmax(220px, 1fr) minmax(240px, 1fr);
    gap: 18px 28px;
    padding: 28px 30px;
    display: grid;
  }

  .unit-module-rail h1 {
    max-width: none;
    font-size: 2.8rem;
  }

  .unit-module-rail > div:first-child > p {
    margin-top: 12px;
  }

  .unit-module-progress {
    align-self: end;
    margin-top: 0;
  }

  .unit-module-rail > p {
    grid-column: 2;
  }

  .unit-module-rail > a {
    border-top: 0;
    grid-column: 1;
    margin-top: 0;
    padding-top: 0;
  }

  .unit-module-complete h1 {
    font-size: 4.2rem;
  }
}

@media (max-width: 680px) {
  .unit-hub-header {
    height: 62px;
    padding: 0 18px;
  }

  .unit-hub-header nav {
    gap: 18px;
  }

  .unit-hub-header nav a {
    padding: 22px 0 19px;
    font-size: .72rem;
  }

  .unit-hub-title-field {
    min-height: 390px;
    padding: 56px 22px;
  }

  .unit-hub-title-field h1 {
    font-size: 4rem;
  }

  .unit-hub-arabic-field {
    min-height: 330px;
    padding: 36px 22px;
  }

  .unit-hub-arabic-field > p {
    font-size: 2.35rem;
  }

  .unit-lesson-desk > header {
    align-items: flex-start;
    padding: 38px 20px 26px;
    display: block;
  }

  .unit-lesson-desk > header h2 {
    font-size: 2.2rem;
  }

  .unit-lesson-desk > header > span {
    margin-top: 18px;
    display: block;
  }

  .unit-lesson-list > li, .unit-lesson-list > li:first-child {
    grid-template-columns: 70px minmax(0, 1fr);
    min-height: 0;
  }

  .unit-lesson-list > li > * {
    padding: 22px 18px;
  }

  .unit-lesson-number {
    grid-row: 1 / span 3;
  }

  .unit-lesson-copy, .unit-lesson-arabic, .unit-lesson-list > li > a {
    grid-column: 2;
    border-right: 0 !important;
  }

  .unit-lesson-arabic {
    border-top: 1px solid var(--line-light);
    text-align: left;
  }

  .unit-lesson-list > li:first-child .unit-lesson-arabic {
    border-color: #343d46;
  }

  .unit-lesson-list > li > a {
    justify-self: stretch;
    min-width: 0;
    margin: 0 18px 22px;
  }

  .unit-hub-close {
    flex-direction: column;
    align-items: stretch;
  }

  .unit-hub-close a {
    text-align: center;
  }

  .unit-practice-header {
    grid-template-columns: 1fr 1fr;
    height: 62px;
    padding: 0 18px;
  }

  .unit-practice-header p {
    display: none;
  }

  .unit-module-rail {
    padding: 26px 20px;
    display: block;
  }

  .unit-module-progress {
    margin-top: 24px;
  }

  .unit-module-rail > a {
    margin-top: 20px;
    display: block;
  }

  .unit-module-stage {
    padding: 30px 20px 44px;
  }

  .unit-stage-heading {
    align-items: flex-start;
    display: block;
  }

  .unit-stage-heading p {
    margin-top: 8px;
  }

  .practice-arabic-focus {
    margin-top: 38px;
    font-size: 3.7rem;
  }

  .dialogue-prompt > p {
    font-size: 2rem;
  }

  .unit-answer-list > button {
    flex-direction: column;
    align-items: flex-start;
  }

  .speaking-review-heading {
    display: block;
  }

  .speaking-review-heading > button {
    margin-top: 12px;
  }

  .speaking-review-target {
    text-align: start;
    font-size: 1.9rem;
  }

  .classroom-answers {
    grid-template-columns: 1fr;
  }

  .classroom-answers > button {
    align-items: center;
  }

  .classroom-example {
    flex-direction: column;
    align-items: flex-start;
  }

  .classroom-example > button {
    align-self: flex-end;
  }

  .unit-module-complete {
    grid-template-columns: 1fr;
    align-items: start;
    min-height: calc(100vh - 62px);
    padding: 54px 24px;
  }

  .unit-module-complete h1 {
    font-size: 3.8rem;
  }

  .unit-module-complete > div:nth-child(2) > div {
    flex-direction: column;
    align-items: stretch;
  }

  .unit-module-complete button, .unit-module-complete a {
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *, :before, :after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

.app-header {
  background: var(--cobalt-deep);
  color: var(--white);
  z-index: 20;
  border-bottom: 1px solid #ffffff47;
  justify-content: space-between;
  align-items: center;
  height: 68px;
  padding: 0 clamp(22px, 4vw, 58px);
  display: flex;
  position: relative;
}

.app-header nav {
  align-items: center;
  gap: clamp(16px, 2.5vw, 38px);
  display: flex;
}

.app-header nav a, .app-header nav button {
  color: var(--white);
  cursor: pointer;
  background: none;
  border: 0;
  border-bottom: 2px solid #0000;
  min-height: 44px;
  padding: 14px 0 10px;
  font-size: .82rem;
}

.app-header nav a:hover, .app-header nav button:hover, .app-header nav a[aria-current="page"] {
  border-bottom-color: var(--saffron);
}

.app-header nav .app-header-signin {
  background: var(--saffron);
  color: var(--ink);
  border: 0;
  min-height: 42px;
  padding: 13px 18px;
  font-weight: 700;
}

.account-shell {
  background: var(--ink);
  color: var(--white);
  min-height: 100vh;
}

.account-stage {
  grid-template-columns: minmax(0, 1.1fr) minmax(390px, .9fr);
  min-height: calc(100vh - 68px);
  display: grid;
}

.account-promise {
  background: var(--cobalt);
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(58px, 8vw, 110px) clamp(28px, 7vw, 108px);
  display: flex;
  position: relative;
  overflow: hidden;
}

.account-promise:after {
  content: "";
  border: 1px dotted #ffffff7a;
  border-radius: 50%;
  width: 430px;
  height: 430px;
  position: absolute;
  top: 18%;
  right: -120px;
}

.account-promise h1 {
  font-family: var(--font-display);
  letter-spacing: -.035em;
  z-index: 1;
  max-width: 9ch;
  margin: 0;
  font-size: clamp(4rem, 7vw, 7rem);
  font-weight: 600;
  line-height: .88;
  position: relative;
}

.account-promise > p {
  color: var(--cobalt-tint);
  z-index: 1;
  max-width: 50ch;
  margin: 34px 0 auto;
  line-height: 1.65;
  position: relative;
}

.account-arabic {
  color: var(--saffron);
  font-family: var(--font-arabic);
  z-index: 1;
  border-top: 1px solid #ffffff73;
  margin-top: 70px;
  padding-top: 28px;
  font-size: clamp(1.5rem, 3vw, 2.7rem);
  line-height: 1.6;
  position: relative;
}

.login-panel {
  background: var(--ink-lift);
  border: 1px solid #46505a;
  align-self: center;
  margin: clamp(28px, 7vw, 100px);
  padding: clamp(28px, 5vw, 56px);
}

.login-panel h2 {
  font-family: var(--font-display);
  letter-spacing: -.02em;
  margin: 0;
  font-size: 2.7rem;
  font-weight: 600;
  line-height: .95;
}

.login-panel > div > p {
  color: var(--ink-tint);
  margin: 16px 0 0;
  line-height: 1.55;
}

.login-panel form {
  border-top: 1px solid #46505a;
  margin-top: 32px;
  padding-top: 30px;
}

.login-panel label {
  color: var(--ink-tint);
  margin-bottom: 9px;
  font-size: .76rem;
  font-weight: 700;
  display: block;
}

.login-panel input {
  color: var(--white);
  background: #080c11;
  border: 1px solid #626e78;
  width: 100%;
  min-height: 54px;
  padding: 0 15px;
}

.login-panel input::placeholder {
  color: #9ca7b0;
}

.login-panel form button, .google-signin {
  background: var(--saffron);
  color: var(--ink);
  cursor: pointer;
  border: 0;
  width: 100%;
  min-height: 54px;
  margin-top: 14px;
  padding: 0 18px;
  font-weight: 700;
}

.login-panel form button:hover {
  background: var(--saffron-pale);
}

.login-panel form button:disabled {
  cursor: wait;
  opacity: .7;
}

.google-signin {
  color: var(--white);
  background: none;
  border: 1px solid #626e78;
}

.login-message {
  color: var(--saffron-pale);
  margin: 20px 0 0;
  line-height: 1.5;
}

.login-message.is-error {
  color: #ffc2bb;
}

.login-panel > small {
  color: #aeb8c0;
  margin-top: 24px;
  font-size: .68rem;
  line-height: 1.55;
  display: block;
}

.pricing-shell {
  background: var(--paper);
  min-height: 100vh;
}

.pricing-intro {
  background: var(--cobalt);
  color: var(--white);
  grid-template-columns: 1.2fr .8fr;
  gap: 60px;
  padding: clamp(60px, 8vw, 116px) clamp(26px, 7vw, 110px);
  display: grid;
}

.pricing-intro h1 {
  font-family: var(--font-display);
  letter-spacing: -.035em;
  max-width: 12ch;
  margin: 0;
  font-size: clamp(4rem, 6.5vw, 7rem);
  font-weight: 600;
  line-height: .88;
}

.pricing-intro div > p {
  color: var(--cobalt-tint);
  max-width: 56ch;
  margin: 30px 0 0;
  line-height: 1.65;
}

.pricing-intro > p {
  border-bottom: 1px solid var(--saffron);
  border-top: 1px solid var(--saffron);
  color: var(--saffron);
  font-family: var(--font-arabic);
  text-align: center;
  align-self: center;
  margin: 0;
  padding: 34px 0;
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 1.8;
}

.pricing-workbench {
  grid-template-columns: .9fr 1.1fr;
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(54px, 8vw, 110px) clamp(24px, 5vw, 72px) 36px;
  display: grid;
}

.pricing-includes {
  border-right: 1px solid #aeb7c8;
  padding-right: clamp(30px, 5vw, 72px);
}

.pricing-includes h2 {
  font-family: var(--font-display);
  margin: 0;
  font-size: 3rem;
  font-weight: 600;
}

.pricing-includes ul {
  margin: 30px 0;
  padding: 0;
  list-style: none;
}

.pricing-includes li {
  border-top: 1px solid var(--line-light);
  padding: 16px 0;
  line-height: 1.45;
}

.pricing-includes li:before {
  color: var(--cobalt);
  content: "✓";
  margin-right: 12px;
  font-weight: 800;
}

.pricing-includes > a {
  border-bottom: 2px solid var(--cobalt);
  color: var(--cobalt-deep);
  padding: 10px 0;
  font-weight: 700;
  display: inline-block;
}

.price-selector {
  padding-left: clamp(30px, 5vw, 72px);
}

.price-selector article {
  border-bottom: 1px solid #aeb7c8;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  padding: 28px 0;
  display: flex;
}

.price-selector article:first-child {
  padding-top: 0;
}

.price-selector article.is-best-value {
  background: var(--ink);
  color: var(--white);
  margin: 0 -26px;
  padding: 30px 26px;
}

.price-selector article span {
  color: var(--cobalt-deep);
  text-transform: uppercase;
  font-size: .78rem;
  font-weight: 700;
  display: block;
}

.price-selector .is-best-value span {
  color: var(--saffron);
}

.price-selector article strong {
  font-family: var(--font-display);
  margin-top: 10px;
  font-size: 5rem;
  font-weight: 600;
  line-height: .9;
  display: block;
}

.price-selector article small {
  color: #526077;
  margin-top: 8px;
  display: block;
}

.price-selector .is-best-value small {
  color: var(--ink-tint);
}

.price-selector button {
  background: var(--saffron);
  color: var(--ink);
  cursor: pointer;
  border: 0;
  min-height: 54px;
  padding: 0 22px;
  font-weight: 700;
}

.price-selector button:hover {
  background: var(--saffron-pale);
}

.price-selector button:disabled {
  cursor: wait;
  opacity: .7;
}

.pricing-error {
  color: #8c2015;
  margin: 22px 0 0;
  line-height: 1.5;
}

.pricing-note {
  color: #526077;
  text-align: right;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 72px) 60px;
  font-size: .72rem;
}

.unit-vocab-shell {
  background: var(--paper);
  min-height: 100vh;
}

.unit-access-state, .dashboard-state, .not-found-field {
  background: var(--cobalt);
  color: var(--white);
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-height: calc(100vh - 68px);
  padding: clamp(50px, 10vw, 140px);
  display: flex;
}

.unit-access-state h1, .dashboard-state h1, .not-found-field h1 {
  font-family: var(--font-display);
  letter-spacing: -.035em;
  max-width: 10ch;
  margin: 0;
  font-size: clamp(4rem, 7vw, 7rem);
  font-weight: 600;
  line-height: .88;
}

.unit-access-state p, .dashboard-state p {
  color: var(--cobalt-tint);
  max-width: 52ch;
  margin: 26px 0 0;
  line-height: 1.6;
}

.unit-access-state a, .dashboard-state a, .not-found-field a {
  background: var(--saffron);
  color: var(--ink);
  margin-top: 30px;
  padding: 18px 24px;
  font-weight: 700;
}

.unit-vocab-heading {
  background: var(--cobalt);
  color: var(--white);
  justify-content: space-between;
  align-items: end;
  gap: 60px;
  padding: clamp(50px, 6vw, 86px) clamp(24px, 6vw, 92px);
  display: flex;
}

.unit-vocab-heading span {
  color: var(--saffron);
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1rem;
  font-weight: 700;
}

.unit-vocab-heading h1 {
  font-family: var(--font-display);
  letter-spacing: -.035em;
  margin: 10px 0 0;
  font-size: clamp(3.8rem, 6vw, 6.5rem);
  font-weight: 600;
  line-height: .88;
}

.unit-vocab-heading p {
  color: var(--cobalt-tint);
  max-width: 62ch;
  margin: 22px 0 0;
  line-height: 1.55;
}

.unit-vocab-heading button {
  background: var(--saffron);
  color: var(--ink);
  cursor: pointer;
  border: 0;
  flex: none;
  min-height: 54px;
  padding: 0 22px;
  font-weight: 700;
}

.vocab-workbench {
  grid-template-columns: 230px minmax(0, 1fr);
  min-height: 650px;
  display: grid;
}

.vocab-workbench > aside {
  background: var(--cobalt-deep);
  color: var(--white);
  padding: 42px 30px;
}

.vocab-workbench > aside > p {
  color: var(--cobalt-tint);
  font-family: var(--font-display);
  margin: 0;
  font-size: 1.4rem;
}

.vocab-workbench > aside > div {
  background: #ffffff3d;
  height: 3px;
  margin-top: 18px;
  overflow: hidden;
}

.vocab-workbench > aside > div span {
  background: var(--saffron);
  transform-origin: 0;
  height: 100%;
  transition: transform .28s cubic-bezier(.16, 1, .3, 1);
  display: block;
}

.vocab-workbench > aside > button {
  border: 0;
  border-bottom: 1px solid var(--saffron);
  color: var(--saffron);
  cursor: pointer;
  background: none;
  margin-top: 36px;
  padding: 12px 0;
  font-weight: 700;
}

.vocab-practice-field {
  background: var(--ink);
  color: var(--white);
  padding: clamp(42px, 6vw, 82px) clamp(24px, 8vw, 120px);
}

.vocab-practice-field > h2 {
  font-family: var(--font-display);
  text-transform: uppercase;
  margin: 0;
  font-size: 2.2rem;
  font-weight: 600;
}

.vocab-focus-arabic {
  font-family: var(--font-arabic);
  text-align: center;
  margin: 24px 0 0;
  font-size: clamp(4rem, 8vw, 8rem);
  line-height: 1.5;
}

.vocab-transliteration {
  color: var(--ink-tint);
  text-align: center;
  margin: -4px 0 34px;
}

.vocab-choices {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  max-width: 760px;
  margin: 30px auto 0;
  display: grid;
}

.vocab-choices button {
  background: var(--ink-lift);
  color: var(--white);
  cursor: pointer;
  text-align: left;
  border: 1px solid #4b555f;
  min-height: 62px;
  padding: 12px 16px;
}

.vocab-choices button:hover {
  border-color: var(--saffron);
}

.vocab-choices button.is-correct {
  border-color: var(--saffron);
  color: var(--saffron-pale);
}

.vocab-choices button.is-incorrect {
  color: #ffc2bb;
  border-color: #e78176;
}

.vocab-feedback {
  max-width: 760px;
  margin: 18px auto 0;
}

.vocab-feedback.is-error {
  color: #ffc2bb;
}

.vocab-speaking {
  border-top: 1px solid #4b555f;
  max-width: 760px;
  margin: 34px auto 0;
  padding-top: 28px;
}

.vocab-speaking > div:first-child {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.vocab-speaking h3 {
  font-family: var(--font-display);
  margin: 0;
  font-size: 2rem;
}

.vocab-speaking > div:first-child button {
  border: 0;
  border-bottom: 1px solid var(--saffron);
  color: var(--saffron);
  cursor: pointer;
  background: none;
  padding: 10px 0;
}

.vocab-speaking > p {
  font-family: var(--font-arabic);
  margin: 24px 0 2px;
  font-size: 2.4rem;
  line-height: 1.55;
}

.vocab-speaking > small {
  color: var(--ink-tint);
}

.vocab-speaking .lesson-mic {
  width: 100%;
  margin-top: 24px;
}

.vocab-speaking form {
  margin-top: 16px;
}

.vocab-speaking form label {
  color: var(--ink-tint);
  margin-bottom: 7px;
  font-size: .72rem;
  display: block;
}

.vocab-speaking form > div {
  display: flex;
}

.vocab-speaking input {
  color: var(--white);
  font-family: var(--font-arabic);
  background: #161d24;
  border: 1px solid #4b555f;
  flex: 1;
  min-width: 0;
  min-height: 52px;
  padding: 0 14px;
  font-size: 1.15rem;
}

.vocab-speaking form button {
  background: var(--saffron);
  color: var(--ink);
  cursor: pointer;
  border: 0;
  padding: 0 20px;
  font-weight: 700;
}

.vocab-score {
  border-top: 1px solid #4b555f;
  align-items: center;
  gap: 18px;
  margin-top: 20px;
  padding-top: 20px;
  display: flex;
}

.vocab-score strong {
  border: 2px solid var(--saffron);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 64px;
  height: 64px;
  display: flex;
}

.vocab-score span {
  color: var(--saffron-pale);
}

.vocab-speaking > .unit-primary-action {
  margin-top: 22px;
}

.vocab-save-message {
  color: var(--saffron-pale);
  max-width: 760px;
  margin: 18px auto 0;
}

.vocab-ledger {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  display: grid;
}

.vocab-ledger button {
  background: var(--white);
  border: 0;
  border-bottom: 1px solid var(--line-light);
  border-right: 1px solid var(--line-light);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  grid-template-columns: 44px minmax(120px, .65fr) 1fr;
  align-items: center;
  gap: 20px;
  min-height: 92px;
  padding: 18px 28px;
  display: grid;
}

.vocab-ledger button:hover {
  background: #eef2ff;
}

.vocab-ledger button > span {
  color: var(--cobalt);
  font-family: var(--font-display);
  font-weight: 700;
}

.vocab-ledger button > strong {
  font-family: var(--font-arabic);
  font-size: 1.55rem;
  line-height: 1.4;
}

.vocab-ledger button > small {
  color: #4c586e;
}

.dashboard-shell {
  background: var(--paper);
  min-height: 100vh;
}

.dashboard-heading {
  background: var(--cobalt);
  color: var(--white);
  grid-template-columns: 1fr 300px;
  align-items: stretch;
  gap: 50px;
  padding: clamp(52px, 7vw, 96px) clamp(24px, 6vw, 92px);
  display: grid;
}

.dashboard-heading h1 {
  font-family: var(--font-display);
  letter-spacing: -.035em;
  max-width: 11ch;
  margin: 0;
  font-size: clamp(4rem, 6vw, 6.6rem);
  font-weight: 600;
  line-height: .88;
}

.dashboard-heading > div:first-child p {
  color: var(--cobalt-tint);
  margin: 24px 0 0;
}

.membership-state {
  border-top: 1px solid #ffffff73;
  border-bottom: 1px solid #ffffff73;
  align-self: end;
  padding: 24px 0;
}

.membership-state span {
  color: var(--cobalt-tint);
  text-transform: uppercase;
  font-size: .72rem;
  font-weight: 700;
  display: block;
}

.membership-state.is-pro span {
  color: var(--saffron);
}

.membership-state strong {
  font-family: var(--font-display);
  margin-top: 9px;
  font-size: 2rem;
  display: block;
}

.membership-state a, .membership-state button {
  border: 0;
  border-bottom: 1px solid var(--saffron);
  color: var(--saffron);
  cursor: pointer;
  background: none;
  margin-top: 20px;
  padding: 9px 0;
  display: inline-block;
}

.review-strip {
  background: var(--ink);
  color: var(--white);
  grid-template-columns: repeat(4, 1fr);
  padding: 0 clamp(24px, 6vw, 92px);
  display: grid;
}

.review-strip > div {
  border-right: 1px solid #39424b;
  padding: 30px 28px;
}

.review-strip > div:last-child {
  border: 0;
}

.review-strip strong {
  color: var(--saffron);
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: 1;
  display: block;
}

.review-strip span {
  color: var(--ink-tint);
  font-size: .72rem;
}

.dashboard-desk {
  grid-template-columns: 1.1fr .9fr;
  gap: 0;
  max-width: 1480px;
  margin: 0 auto;
  padding: clamp(52px, 7vw, 96px) clamp(24px, 5vw, 72px);
  display: grid;
}

.due-review {
  border-right: 1px solid #abb5c6;
  padding-right: clamp(28px, 5vw, 70px);
}

.attempt-history {
  padding-left: clamp(28px, 5vw, 70px);
}

.dashboard-desk header {
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  display: flex;
}

.dashboard-desk h2 {
  font-family: var(--font-display);
  margin: 0;
  font-size: 3rem;
  font-weight: 600;
}

.dashboard-desk header p {
  color: #526077;
  max-width: 58ch;
  margin: 10px 0 0;
  font-size: .78rem;
  line-height: 1.5;
}

.dashboard-desk header a {
  border-bottom: 2px solid var(--cobalt);
  color: var(--cobalt-deep);
  flex: none;
  padding: 10px 0;
  font-weight: 700;
}

.due-review ol, .attempt-history ol {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.due-review li {
  border-top: 1px solid var(--line-light);
  grid-template-columns: minmax(150px, 1fr) auto auto;
  align-items: center;
  gap: 20px;
  padding: 18px 0;
  display: grid;
}

.due-review li span {
  color: var(--cobalt);
  text-transform: uppercase;
  font-size: .66rem;
  font-weight: 700;
  display: block;
}

.due-review li strong {
  font-family: var(--font-arabic);
  font-size: 1.4rem;
  line-height: 1.45;
  display: block;
}

.due-review li small, .due-review li p {
  color: #526077;
  margin: 0;
  font-size: .7rem;
}

.due-review li > a {
  background: var(--cobalt);
  color: var(--white);
  padding: 13px 15px;
  font-size: .72rem;
  font-weight: 700;
}

.attempt-history li {
  border-top: 1px solid var(--line-light);
  grid-template-columns: 62px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  display: grid;
}

.attempt-history li > span {
  color: #8c2015;
  text-transform: uppercase;
  font-size: .64rem;
  font-weight: 700;
}

.attempt-history li > span.is-correct {
  color: var(--cobalt-deep);
}

.attempt-history li strong {
  font-family: var(--font-arabic);
  font-size: 1.1rem;
}

.attempt-history li p {
  color: #526077;
  overflow-wrap: anywhere;
  margin: 4px 0 0;
  font-size: .73rem;
}

.attempt-history li > small {
  color: #526077;
  text-align: right;
  font-size: .64rem;
}

.dashboard-empty {
  border-top: 1px solid var(--line-light);
  margin-top: 28px;
  padding: 34px 0;
}

.dashboard-empty h3 {
  font-family: var(--font-display);
  margin: 0;
  font-size: 2rem;
}

.dashboard-empty p {
  color: #526077;
  max-width: 48ch;
  margin: 12px 0 0;
  line-height: 1.55;
}

.dashboard-empty a {
  color: var(--cobalt-deep);
  margin-top: 18px;
  font-weight: 700;
  display: inline-block;
}

.dashboard-error {
  color: var(--white);
  background: #8c2015;
  margin: 0;
  padding: 18px clamp(24px, 6vw, 92px);
}

@media (max-width: 920px) {
  .account-stage, .pricing-intro, .pricing-workbench, .dashboard-heading, .dashboard-desk {
    grid-template-columns: 1fr;
  }

  .account-promise {
    min-height: 620px;
  }

  .login-panel {
    margin: 48px 24px;
  }

  .pricing-intro > p {
    max-width: 540px;
  }

  .pricing-includes {
    border-bottom: 1px solid #aeb7c8;
    border-right: 0;
    padding: 0 0 44px;
  }

  .price-selector {
    padding: 44px 0 0;
  }

  .vocab-workbench {
    grid-template-columns: 160px minmax(0, 1fr);
  }

  .vocab-practice-field {
    padding-left: 34px;
    padding-right: 34px;
  }

  .vocab-ledger {
    grid-template-columns: 1fr;
  }

  .membership-state {
    max-width: 440px;
  }

  .due-review {
    border-bottom: 1px solid #abb5c6;
    border-right: 0;
    padding: 0 0 52px;
  }

  .attempt-history {
    padding: 52px 0 0;
  }
}

@media (max-width: 680px) {
  .app-header {
    height: auto;
    min-height: 62px;
    padding: 10px 18px;
  }

  .app-header nav {
    gap: 13px;
  }

  .app-header nav a, .app-header nav button {
    font-size: .7rem;
  }

  .app-header nav a:nth-child(2) {
    display: none;
  }

  .app-header nav .app-header-signin {
    padding: 11px 12px;
  }

  .account-stage {
    min-height: 0;
  }

  .account-promise {
    min-height: 560px;
    padding: 56px 24px;
  }

  .account-promise h1 {
    font-size: 4.35rem;
  }

  .login-panel {
    padding: 30px 22px;
  }

  .pricing-intro {
    gap: 42px;
    padding: 56px 24px;
  }

  .pricing-intro h1 {
    font-size: 4.2rem;
  }

  .price-selector article {
    flex-direction: column;
    align-items: stretch;
  }

  .price-selector button {
    width: 100%;
  }

  .unit-vocab-heading {
    flex-direction: column;
    align-items: stretch;
    padding: 50px 22px;
  }

  .unit-vocab-heading h1 {
    font-size: 4.2rem;
  }

  .vocab-workbench {
    display: block;
  }

  .vocab-workbench > aside {
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 22px;
    display: grid;
  }

  .vocab-workbench > aside > div, .vocab-workbench > aside > button {
    margin: 0;
  }

  .vocab-practice-field {
    padding: 36px 20px 56px;
  }

  .vocab-focus-arabic {
    font-size: 4rem;
  }

  .vocab-choices {
    grid-template-columns: 1fr;
  }

  .vocab-speaking > div:first-child {
    flex-direction: column;
    align-items: flex-start;
  }

  .vocab-ledger button {
    grid-template-columns: 34px minmax(100px, .8fr) 1fr;
    gap: 12px;
    padding: 16px 18px;
  }

  .dashboard-heading {
    padding: 54px 22px;
  }

  .dashboard-heading h1 {
    font-size: 4.25rem;
  }

  .review-strip {
    grid-template-columns: repeat(2, 1fr);
    padding: 0 18px;
  }

  .review-strip > div:nth-child(2) {
    border-right: 0;
  }

  .review-strip > div:nth-child(-n+2) {
    border-bottom: 1px solid #39424b;
  }

  .dashboard-desk {
    padding: 48px 20px;
  }

  .dashboard-desk header {
    flex-direction: column;
    align-items: flex-start;
  }

  .due-review li {
    grid-template-columns: 1fr auto;
    align-items: flex-start;
  }

  .due-review li > p {
    grid-column: 1;
  }

  .due-review li > a {
    grid-area: 1 / 2 / span 2;
  }

  .attempt-history li {
    grid-template-columns: 54px 1fr;
    align-items: flex-start;
  }

  .attempt-history li > small {
    text-align: left;
    grid-column: 2;
  }
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-ease {
  syntax: "*";
  inherits: false
}