/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/8380636b-adde-4618-8a8f-661bc04231fc.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/3a6e1366-d58b-43e1-ab76-30cd0f8d36a5.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/31ac9d68-185f-4723-864c-85c2ea63b8a1.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/f4212a7f-0242-436c-8065-fd3382c48fba.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/a6bcf4e8-2edb-4c84-88a7-9cb42a477826.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/436b82f9-6db1-4724-bf8d-82dcd99812c3.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/eb8ff98f-f34c-481c-85c0-b3fa603a05a7.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/8380636b-adde-4618-8a8f-661bc04231fc.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/3a6e1366-d58b-43e1-ab76-30cd0f8d36a5.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/31ac9d68-185f-4723-864c-85c2ea63b8a1.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/f4212a7f-0242-436c-8065-fd3382c48fba.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/a6bcf4e8-2edb-4c84-88a7-9cb42a477826.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/436b82f9-6db1-4724-bf8d-82dcd99812c3.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/eb8ff98f-f34c-481c-85c0-b3fa603a05a7.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/8380636b-adde-4618-8a8f-661bc04231fc.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/3a6e1366-d58b-43e1-ab76-30cd0f8d36a5.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/31ac9d68-185f-4723-864c-85c2ea63b8a1.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/f4212a7f-0242-436c-8065-fd3382c48fba.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/a6bcf4e8-2edb-4c84-88a7-9cb42a477826.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/436b82f9-6db1-4724-bf8d-82dcd99812c3.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/eb8ff98f-f34c-481c-85c0-b3fa603a05a7.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/8380636b-adde-4618-8a8f-661bc04231fc.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/3a6e1366-d58b-43e1-ab76-30cd0f8d36a5.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/31ac9d68-185f-4723-864c-85c2ea63b8a1.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/f4212a7f-0242-436c-8065-fd3382c48fba.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/a6bcf4e8-2edb-4c84-88a7-9cb42a477826.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/436b82f9-6db1-4724-bf8d-82dcd99812c3.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/eb8ff98f-f34c-481c-85c0-b3fa603a05a7.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/f2f23369-ed63-4258-8da5-e95265ae48d3.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/f7be89d0-3299-4220-bd03-627bc3fd7d3f.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/3eb36451-4b08-4da8-b0cc-5b23dbc3c888.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/e8a4d6b5-1a57-450d-b295-8140f42a58b4.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/d0c4b6d3-82ae-4065-9746-d9f1971ab0f4.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/05d4e4b2-ccdf-464c-9f0f-95ecfb9aa61c.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/d379c391-0d13-4eec-a948-bf742de24915.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/8d5635e3-ee47-4ede-b86a-e0ce22d6cba6.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/c85bac97-4c19-42ab-b5f5-873ead08da29.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/44d48e45-0cb0-4907-a129-231270058e47.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/40985dea-bd79-4574-9aec-7cbfa5f568ab.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/5bb534a4-7cfb-4b7d-b8f9-98c399bfb6d1.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/e32baf0e-ada8-4733-ad05-5c04eefd32db.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/a83f632d-f892-41a6-a532-f170afc7ca8f.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/8d5635e3-ee47-4ede-b86a-e0ce22d6cba6.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/c85bac97-4c19-42ab-b5f5-873ead08da29.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/44d48e45-0cb0-4907-a129-231270058e47.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/40985dea-bd79-4574-9aec-7cbfa5f568ab.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/5bb534a4-7cfb-4b7d-b8f9-98c399bfb6d1.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/e32baf0e-ada8-4733-ad05-5c04eefd32db.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/a83f632d-f892-41a6-a532-f170afc7ca8f.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/8d5635e3-ee47-4ede-b86a-e0ce22d6cba6.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/c85bac97-4c19-42ab-b5f5-873ead08da29.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/44d48e45-0cb0-4907-a129-231270058e47.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/40985dea-bd79-4574-9aec-7cbfa5f568ab.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/5bb534a4-7cfb-4b7d-b8f9-98c399bfb6d1.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/e32baf0e-ada8-4733-ad05-5c04eefd32db.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/a83f632d-f892-41a6-a532-f170afc7ca8f.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("assets/abc37544-3742-4649-a0a2-a3115ea240c6.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("assets/f43eda3c-4c51-45d1-94a2-29de5cde8bdc.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("assets/776fb96c-3a78-49bf-bf0e-36771ce52f01.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("assets/378d8a5a-f2e5-46d6-9d87-e998cfff1679.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("assets/abc37544-3742-4649-a0a2-a3115ea240c6.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("assets/f43eda3c-4c51-45d1-94a2-29de5cde8bdc.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("assets/776fb96c-3a78-49bf-bf0e-36771ce52f01.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("assets/378d8a5a-f2e5-46d6-9d87-e998cfff1679.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/187b04c6-b857-4346-a476-b747e2036de9.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/146d8dea-b46f-4a7b-9cb5-e1989ce2c54e.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/eee494ed-802a-475b-955b-29e4ae2d40f0.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/e5424120-c088-4347-918c-4c4a1cea34f7.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/187b04c6-b857-4346-a476-b747e2036de9.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/146d8dea-b46f-4a7b-9cb5-e1989ce2c54e.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/eee494ed-802a-475b-955b-29e4ae2d40f0.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/e5424120-c088-4347-918c-4c4a1cea34f7.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ============================================================
   Method — Verse Picker · shared tokens (Refined Monolith)
   ============================================================ */
:root {
  /* surfaces — tonal tiering, no shadows */
  --surface:                 #121414;
  --surface-container-lowest:#0d0e0e;
  --surface-container-low:   #1b1c1c;
  --surface-container:       #1f2020;
  --surface-container-high:  #292a2a;
  --surface-container-highest:#343535;
  --surface-bright:          #393939;

  --on-surface:              #e3e2e2;
  --on-surface-variant:      #c5c6d0;
  --outline:                 #8f9099;
  --outline-variant:         #44464f;

  /* primary — soft slate blue */
  --primary:                 #a2b9f3;
  --logo-accent:             #86a0e1;
  --on-primary:              #1a2f59;
  --primary-container:       #2f436e;
  --on-primary-container:    #9db1e2;

  /* secondary — bronze (structure, range, achievement) */
  --secondary:               #e0c295;
  --on-secondary:            #402d0d;
  --secondary-container:     #5b4623;
  --on-secondary-container:  #d1b488;

  --radius-sm: 0.125rem;
  --radius:    0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-full: 9999px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --font-display: "Playfair Display", Georgia, serif;
  --font-read: "Literata", Georgia, serif;
  --font-ui: "Inter", system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-ui);
  color: var(--on-surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  font-variation-settings: "opsz" 24;
}

/* ---- shared picker primitives ------------------------------ */

.mono-label {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--outline);
}

/* scrollbars — thin, monolithic */
.mono-scroll::-webkit-scrollbar { width: 9px; height: 9px; }
.mono-scroll::-webkit-scrollbar-track { background: transparent; }
.mono-scroll::-webkit-scrollbar-thumb {
  background: var(--surface-container-highest);
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  background-clip: padding-box;
}
.mono-scroll::-webkit-scrollbar-thumb:hover { background: var(--outline-variant); }

/* the carved popover shell */
.picker-shell {
  background: var(--surface-container);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}

/* focus glow used across inputs */
.focus-glow:focus-within {
  border-color: var(--primary) !important;
}

/* button reset */
.bare-btn {
  font-family: var(--font-ui);
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 0;
}

@keyframes pop-in {
  from { opacity: 0; transform: translateY(6px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes chip-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(162,185,243,0.5); }
  70%  { box-shadow: 0 0 0 5px rgba(162,185,243,0); }
  100% { box-shadow: 0 0 0 0 rgba(162,185,243,0); }
}


/* ============================================================
   Method — Marketing site · Refined Monolith
   Builds on styles.css tokens. Depth via tonal tiering + 1px
   outlines (no ambient shadow). Carved-from-stone feel.
   ============================================================ */

:root {
  --accent: var(--primary);          /* switchable via Tweaks */
  --accent-dim: #2f436e;
  --maxw: 1180px;
  --gut: clamp(22px, 5vw, 64px);
  --nav-h: 68px;
}

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

body {
  background: var(--surface);
  color: var(--on-surface);
  overflow-x: hidden;
  line-height: 1.5;
}

/* a quiet, fixed grain/vignette to give the charcoal life */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(1100px 620px at 78% -8%, rgba(38,42,52,0.55), transparent 60%),
    radial-gradient(900px 700px at 8% 2%, rgba(28,30,33,0.6), transparent 55%);
}
main, .nav, .foot { position: relative; z-index: 1; }

::selection { background: rgba(162,185,243,0.22); color: var(--on-surface); }

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

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gut); }

.mono {
  font: 600 11px var(--font-ui);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--outline);
}
.serif { font-family: var(--font-display); }
.read  { font-family: var(--font-read); }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h);
  display: flex; align-items: center;
  z-index: 100;
  transition: background .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(13,14,14,0.72);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--outline-variant);
}
.nav .wrap { display: flex; align-items: center; gap: 28px; width: 100%; }
.brand { display: flex; align-items: center; gap: 11px; }

/* ---- column-M + serif wordmark lockup ---- */
.logo {
  display: inline-flex; align-items: center; gap: 0; line-height: 1;
  color: var(--logo-ink, #dbe3ef); white-space: nowrap;
}
.logo-m { width: auto; flex: none; display: block; height: 1.16em; margin-right: -0.05em; fill: currentColor; overflow: visible; }
.logo-word {
  font-family: var(--font-display); font-weight: 600; font-size: 1em;
  letter-spacing: -0.012em; color: currentColor;
}
.brand .logo { font-size: 26px; }
.brand .ver {
  font: 600 9px var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--outline); border: 1px solid var(--outline-variant);
  padding: 2px 5px; border-radius: var(--radius-sm);
}
.nav-links { margin-left: auto; display: flex; align-items: center; gap: 26px; }
.nav-links a {
  font: 500 13.5px var(--font-ui); color: var(--on-surface-variant);
  position: relative; transition: color .18s var(--ease);
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -5px; height: 1px;
  background: var(--accent); transition: right .25s var(--ease);
}
.nav-links a:hover { color: var(--on-surface); }
.nav-links a:hover::after { right: 0; }
@media (max-width: 760px) { .nav-links a:not(.btn) { display: none; } }

.btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font: 600 13.5px var(--font-ui); border-radius: var(--radius-md);
  padding: 9px 16px; border: 1px solid var(--outline-variant);
  background: transparent; color: var(--on-surface);
  transition: border-color .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
}
.btn:hover { border-color: var(--outline); background: var(--surface-container-low); }
.btn.primary {
  background: var(--primary-container); border-color: transparent; color: #dfe6f7;
}
.btn.primary:hover { background: #38507f; color: #fff; }
.btn .m-icon { width: 1.05em; height: 1.05em; }

/* ============================================================
   SECTION SCAFFOLD
   ============================================================ */
section { position: relative; }
.sec-pad { padding-block: clamp(86px, 13vh, 160px); }
.eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--accent); opacity: .8; }
.h-display {
  font-family: var(--font-display); font-weight: 700; line-height: 1.04;
  letter-spacing: -0.012em; color: var(--on-surface);
  font-size: clamp(34px, 5vw, 60px); text-wrap: balance;
}
.lede {
  font: 400 clamp(17px, 1.5vw, 20px)/1.62 var(--font-ui);
  color: var(--on-surface-variant); max-width: 56ch; text-wrap: pretty;
}

/* reveal-on-scroll — visible by DEFAULT; JS adds .pre to hide only when it can
   actually animate (tab visible + motion on). This guarantees content shows in
   any non-painting/capture context instead of freezing at opacity 0. */
.reveal { transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.pre { opacity: 0; transform: translateY(20px); }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
.reveal.d4 { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
  .reveal.pre { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero { padding-top: calc(var(--nav-h) + clamp(36px, 7vh, 84px)); padding-bottom: clamp(60px, 9vh, 120px); position: relative; }
.hero .wrap { position: relative; z-index: 1; }
/* large architectural M as a central backdrop */
.hero-watermark {
  position: absolute; z-index: 0; pointer-events: none;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  /* Large, non-clipped scale relative to viewport */
  height: 140vh; width: 140vh;
  color: var(--on-surface); opacity: 0.075; fill: currentColor;
  will-change: transform;
}
@media (max-width: 940px) { .hero-watermark { height: 100vh; width: 100vh; opacity: 0.05; } }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(34px, 5vw, 78px); align-items: center;
}
@media (max-width: 940px) { .hero-grid { grid-template-columns: 1fr; gap: 44px; } }

.hero h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(46px, 7.2vw, 92px); line-height: 0.98;
  letter-spacing: -0.02em; margin: 0 0 26px;
  color: var(--on-surface); text-wrap: balance;
}
.hero h1 .accent { color: var(--logo-accent); font-style: italic; }
.hero-sub { font: 400 clamp(17px, 1.5vw, 20px)/1.6 var(--font-ui); color: var(--on-surface-variant); max-width: 44ch; margin: 0 0 30px; text-wrap: pretty; }
.hero-cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.hero-note { font: 400 13px var(--font-ui); color: var(--outline); }
.hero-note b { color: var(--on-surface-variant); font-weight: 600; }

/* the animated stage */
.stage-wrap { position: relative; }
.replay {
  position: absolute; top: -2px; right: 2px; z-index: 6;
  display: inline-flex; align-items: center; gap: 7px;
  font: 500 11px var(--font-ui); letter-spacing: .04em;
  color: var(--outline); background: var(--surface-container);
  border: 1px solid var(--outline-variant); border-radius: var(--radius-full);
  padding: 5px 11px 5px 9px; cursor: pointer; opacity: 0;
  transition: opacity .3s var(--ease), color .15s, border-color .15s;
}
.stage-wrap:hover .replay { opacity: 1; }
.replay:hover { color: var(--on-surface); border-color: var(--outline); }
.replay .m-icon { width: 13px; height: 13px; }

/* shared "study surface" frame */
.surface-card {
  background: var(--surface-container-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
/* workbench-only chrome */
.wb-bar {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 16px; border-bottom: 1px solid var(--outline-variant);
  background: var(--surface-container-lowest);
}
.wb-bar .wb-logo { font-size: 17px; }
.wb-tabs { display: flex; gap: 4px; margin-left: 8px; }
.wb-tab {
  font: 500 12px var(--font-ui); color: var(--outline);
  padding: 5px 11px; border-radius: var(--radius); border: 1px solid transparent;
}
.wb-tab.on { color: var(--on-surface); background: var(--surface-container); border-color: var(--outline-variant); }
.wb-dot { margin-left: auto; display: flex; gap: 6px; }
.wb-dot i { width: 8px; height: 8px; border-radius: 50%; background: var(--surface-bright); display: block; }

.hero-stage[data-hero="sanctuary"] .wb-bar,
.hero-stage[data-hero="sanctuary"] .wb-tools { display: none; }

.stage-body { display: grid; grid-template-columns: 1fr; }
.hero-stage[data-hero="workbench"] .stage-body { grid-template-columns: 1fr 220px; }
.hero-stage[data-hero="sanctuary"] .stage-body { grid-template-columns: 1fr 208px; }
@media (max-width: 560px) {
  .hero-stage .stage-body { grid-template-columns: 1fr !important; }
  .outline-rail { display: none; }
}

/* the reading column that gets annotated */
.passage {
  position: relative; padding: clamp(26px, 3.4vw, 40px) clamp(24px, 3vw, 38px);
  min-height: 360px;
}
.passage .ref {
  font: 700 15px var(--font-display); color: var(--secondary);
  letter-spacing: .01em; margin-bottom: 16px; display: block;
}
.ptext { position: relative; z-index: 1; }
.ptext .v { font: 400 clamp(16.5px, 1.5vw, 19px)/1.92 var(--font-read); color: var(--on-surface); }
.ptext .vn {
  font: 600 11px var(--font-ui); color: var(--outline);
  vertical-align: super; margin-right: 5px; user-select: none;
}
.w { position: relative; }
.ph { position: relative; }   /* anchor for span-bound symbols + hotkeys */

/* SVG overlays — only circle + arrow now live here */
.marks { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.marks.under { z-index: 0; }
.marks.over  { z-index: 2; }

/* ---- inline text marks (reflow-proof: drawn on the phrase span) ---- */
.ph.hl, .ph.hlg, .ph.hlr {
  background-repeat: no-repeat; background-position: 0 55%;
  background-size: 0% 80%; border-radius: 3px;
  transition: background-size .52s cubic-bezier(.16,1,.3,1);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.ph.hl  { background-image: linear-gradient(rgba(224,194,149,0.17), rgba(224,194,149,0.17)); }
.ph.hlg { background-image: linear-gradient(rgba(160,164,172,0.20), rgba(160,164,172,0.20)); }
.ph.hlr { background-image: linear-gradient(rgba(210,112,90,0.20), rgba(210,112,90,0.20)); }
.ph.hl.shown, .ph.hlg.shown, .ph.hlr.shown { background-size: 100% 80%; }

.ph.ul {
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat; background-position: 0 100%;
  background-size: 0% 1.5px;
  transition: background-size .42s cubic-bezier(.16,1,.3,1);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.ph.ul.shown { background-size: 100% 1.5px; }

.ph.bx {
  border-radius: 4px; padding: 0 .14em; margin: 0 -.14em;
  box-shadow: 0 0 0 1.5px transparent;
  transition: box-shadow .45s cubic-bezier(.16,1,.3,1);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.ph.bx.shown { box-shadow: 0 0 0 1.5px var(--accent); }

/* circle — a box-shadow ring on a 50%-rounded span reads as a hand-drawn loop */
.ph.ci, .ph.ci-red {
  border-radius: 50%; padding: .04em .34em; margin: 0 -.26em; white-space: nowrap;
  box-shadow: 0 0 0 1.5px transparent;
  transition: box-shadow .5s cubic-bezier(.16,1,.3,1);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.ph.ci.shown { box-shadow: 0 0 0 1.5px var(--accent); }
.ph.ci-red.shown { box-shadow: 0 0 0 1.6px #d2705a; }

.ph.no-tr { transition: none !important; }

/* static render (offscreen / motion-off): snap everything to final, no frozen
   transitions. Applied to a stage while rendering its non-animated end state. */
.no-anim, .no-anim * { transition: none !important; animation: none !important; }

/* a placed Symbol — zero-width inline anchor; glyph lifted just above the word */
.sym {
  position: relative; display: inline-block; width: 0; height: 0;
  vertical-align: baseline; pointer-events: none;
}
.sym svg {
  position: absolute; bottom: .22em; left: -.62em; width: 17px; height: 17px;
  opacity: 0; transform: translateY(5px) scale(.4); transform-origin: bottom center;
  transition: opacity .3s var(--ease), transform .42s var(--ease-out);
}
.sym.in svg { opacity: 1; transform: translateY(0) scale(1); }

/* hotkey chip that flashes when a symbol/tool is invoked (below the span) */
.hk {
  position: absolute; left: 50%; top: calc(100% + 4px);
  transform: translate(-50%, 6px) scale(.92); transform-origin: top center;
  display: inline-flex; align-items: center; gap: 5px; opacity: 0; z-index: 4;
  font: 600 10px var(--font-ui); letter-spacing: .06em;
  color: var(--on-surface); background: var(--surface-container-high);
  border: 1px solid var(--outline-variant); border-radius: var(--radius);
  padding: 3px 7px; transition: opacity .18s var(--ease), transform .22s var(--ease-out);
  white-space: nowrap; pointer-events: none;
}
.hk.in { opacity: 1; transform: translate(-50%, 0) scale(1); }
.hk kbd {
  font: 700 9.5px var(--font-ui); color: var(--primary);
  background: var(--surface-container-lowest); border: 1px solid var(--outline-variant);
  border-radius: 3px; padding: 1px 4px; letter-spacing: 0;
}

/* outline rail — where the outline assembles */
.outline-rail {
  border-left: 1px solid var(--outline-variant);
  background: var(--surface-container-lowest);
  padding: clamp(22px, 2.6vw, 30px) 20px;
  display: flex; flex-direction: column; gap: 2px;
}
.outline-rail .or-head {
  font: 600 10px var(--font-ui); letter-spacing: .16em; text-transform: uppercase;
  color: var(--outline); margin-bottom: 14px; display: flex; align-items: center; gap: 7px;
}
.outline-rail .or-head .m-icon { width: 13px; height: 13px; color: var(--secondary); }
.oi {
  font: 400 12.5px/1.45 var(--font-ui); color: var(--on-surface-variant);
  padding: 5px 0; opacity: 0; transform: translateX(8px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
  display: flex; gap: 6px; flex-wrap: wrap; align-items: baseline;
}
.oi.in { opacity: 1; transform: none; }
.oi .num { color: var(--secondary); font: 600 12px var(--font-ui); flex: none; font-variant-numeric: tabular-nums; }
.oi .oref {
  flex: none; font: 600 9.5px var(--font-ui); letter-spacing: .02em;
  color: var(--on-primary-container); background: rgba(47,67,110,0.45);
  border: 1px solid var(--primary-container); border-radius: var(--radius-sm);
  padding: 1px 5px;
}
.oi .osum { flex: 1 1 100%; padding-left: 18px; color: var(--on-surface-variant); }
.oi.lvl0 { padding-left: 0; }
.oi.lvl0 .num { color: var(--primary); }
.oi.lvl0 .osum { font-weight: 500; color: var(--on-surface); }
.oi.lvl1 { padding-left: 0; }
.oi.lvl2 { padding-left: 18px; }
.oi.lvl2 .osum { color: var(--outline); }
.oi.lvl2 .oref { font-size: 9px; }

/* workbench tool rail */
.wb-tools {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  display: flex; gap: 3px; padding: 5px; z-index: 5;
  background: var(--surface-container); border: 1px solid var(--outline-variant);
  border-radius: var(--radius-full);
}
.wb-tools .tool {
  width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--radius-full);
  color: var(--outline); transition: color .18s var(--ease), background .18s var(--ease);
}
.wb-tools .tool.lit { color: var(--surface); background: var(--primary); }
.wb-tools .tool .m-icon { width: 19px; height: 19px; }

/* ============================================================
   CONVICTION
   ============================================================ */
.conviction .big {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(30px, 4.2vw, 54px); line-height: 1.12; letter-spacing: -0.01em;
  max-width: 20ch; text-wrap: balance; margin: 0 0 18px;
}
.conviction .big em { font-style: italic; color: var(--logo-accent); }
.triad {
  margin-top: clamp(50px, 7vw, 86px);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--outline-variant); border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg); overflow: hidden;
}
@media (max-width: 720px) { .triad { grid-template-columns: 1fr; } }
.beat { background: var(--surface); padding: clamp(26px, 3vw, 40px); }
.beat .step { font: 700 13px var(--font-display); color: var(--secondary); margin-bottom: 14px; display: block; }
.beat h3 { font: 600 20px var(--font-ui); margin: 0 0 9px; letter-spacing: -0.01em; }
.beat p { font: 400 14.5px/1.6 var(--font-ui); color: var(--on-surface-variant); margin: 0; text-wrap: pretty; }

/* ============================================================
   DEMO SECTIONS (alternating)
   ============================================================ */
.demo-grid {
  display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(34px, 5vw, 76px); align-items: center;
}
.demo.flip .demo-grid { grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr); }
.demo.flip .demo-copy { order: 2; }
@media (max-width: 940px) {
  .demo-grid, .demo.flip .demo-grid { grid-template-columns: 1fr; gap: 40px; }
  .demo.flip .demo-copy { order: 0; }
}
.demo-copy h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 4vw, 50px); line-height: 1.06; letter-spacing: -0.015em; margin: 0 0 18px; text-wrap: balance; }
.demo-copy p { font: 400 16px/1.62 var(--font-ui); color: var(--on-surface-variant); max-width: 46ch; margin: 0 0 18px; text-wrap: pretty; }
.term-note { font: 400 13px/1.55 var(--font-ui); color: var(--outline); border-left: 1px solid var(--outline-variant); padding-left: 14px; margin-top: 22px; }
.term-note b { color: var(--secondary); font-weight: 600; }

/* symbols demo: tray */
.sym-tray {
  position: absolute; top: 50%; transform: translateY(-50%); right: 14px;
  display: flex; flex-direction: column; gap: 6px; padding: 7px; z-index: 5;
  background: var(--surface-container); border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
}
.sym-tray .st {
  display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: var(--radius);
  transition: background .18s var(--ease);
}
.sym-tray .st.lit { background: var(--surface-container-high); }
.sym-tray .st .g { width: 22px; height: 22px; display: grid; place-items: center; }
.sym-tray .st kbd {
  font: 700 9.5px var(--font-ui); color: var(--outline);
  background: var(--surface-container-lowest); border: 1px solid var(--outline-variant);
  border-radius: 3px; padding: 1px 5px;
}
.sym-tray .st.lit kbd { color: var(--primary); border-color: var(--primary-container); }

/* ============================================================
   SYNTHESIZE — theology graph
   ============================================================ */
.graph-stage { position: relative; min-height: clamp(340px, 46vw, 480px); }
.graph-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.node {
  position: absolute; transform: translate(-50%, -50%) scale(.6);
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 6px 12px; border-radius: var(--radius-full);
  background: var(--surface-container); border: 1px solid var(--outline-variant);
  font: 500 11.5px var(--font-ui); color: var(--on-surface-variant);
  opacity: 0; transition: opacity .5s var(--ease), transform .6s var(--ease-out), left .9s var(--ease), top .9s var(--ease), border-color .3s, color .3s;
  will-change: left, top, transform;
  z-index: 2;
}
.node.bg { 
  opacity: 0; border-color: var(--outline-variant); background: var(--surface-container-high); 
  z-index: 1;
}
.node.bg .dot { opacity: 0.6; }
.node.bg.in { opacity: 0.3; transform: translate(-50%, -50%) scale(0.85); }
.node.in { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.node .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.node.hub {
  background: var(--primary-container); border-color: transparent; color: #e4eaf8;
  font: 600 14px var(--font-ui); padding: 9px 17px;
}
.node.hub .dot { background: var(--secondary); width: 8px; height: 8px; }
.node.doc { font-family: var(--font-read); font-size: 12.5px; }
.node.doc .dot { background: var(--secondary); }
.edge { stroke: var(--outline-variant); stroke-width: 1.5; fill: none; opacity: .9; }
.edge.bg { stroke-width: 1.2; opacity: 0.25; }
.edge.hot { stroke: var(--accent); opacity: .5; }

/* ============================================================
   PILLARS — carved hairline grid
   ============================================================ */
.pillars-grid {
  margin-top: clamp(44px, 6vw, 70px);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--outline-variant); border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg); overflow: hidden;
}
@media (max-width: 920px) { .pillars-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .pillars-grid { grid-template-columns: 1fr; } }
.pill {
  background: var(--surface); padding: 26px 24px 28px;
  display: flex; flex-direction: column; gap: 12px; min-height: 188px;
  transition: background .25s var(--ease);
}
.pill:hover { background: var(--surface-container-low); }
.pill .pi { width: 30px; height: 30px; color: var(--accent); }
.pill .pi .m-icon { width: 30px; height: 30px; }
.pill h4 { font: 600 16.5px var(--font-ui); margin: 0; letter-spacing: -0.01em; }
.pill p { font: 400 13.5px/1.55 var(--font-ui); color: var(--on-surface-variant); margin: 0; flex: 1; text-wrap: pretty; }
.tag {
  align-self: flex-start; font: 600 9.5px var(--font-ui); letter-spacing: .1em; text-transform: uppercase;
  padding: 2px 7px; border-radius: var(--radius-sm); border: 1px solid;
}
.tag.v1 { color: var(--primary); border-color: var(--primary-container); }
.tag.road { color: var(--secondary); border-color: var(--secondary-container); }

/* ============================================================
   POSITIONING
   ============================================================ */
.pos-rows { display: flex; flex-direction: column; gap: 1px; background: var(--outline-variant); border-block: 1px solid var(--outline-variant); }
.pos-row {
  background: var(--surface); display: grid; grid-template-columns: auto 1fr;
  gap: clamp(20px, 5vw, 64px); align-items: baseline; padding: clamp(22px, 3vw, 34px) 4px;
}
@media (max-width: 700px) { .pos-row { grid-template-columns: 1fr; gap: 8px; } }
.pos-row .neg { font: 400 italic clamp(18px, 2.3vw, 26px) var(--font-read); color: var(--outline); }
.pos-row .pos { font: 600 clamp(18px, 2.3vw, 26px) var(--font-ui); color: var(--on-surface); letter-spacing: -0.01em; text-wrap: balance; }
.pos-row .pos b { color: var(--logo-accent); font-weight: 600; }

/* ============================================================
   SIGNUP
   ============================================================ */
.signup { text-align: center; }
.signup .inner {
  max-width: 600px; margin: 0 auto;
  background: var(--surface-container-lowest); border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg); padding: clamp(40px, 6vw, 64px) clamp(26px, 5vw, 56px);
}
.signup-logo { font-size: clamp(40px, 6vw, 60px); margin: 0 auto 26px; }
.signup h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 4vw, 48px); line-height: 1.08; margin: 0 0 16px; letter-spacing: -0.015em; text-wrap: balance; }
.signup p { font: 400 16px/1.6 var(--font-ui); color: var(--on-surface-variant); margin: 0 auto 30px; max-width: 42ch; }
.signup-form { display: flex; gap: 10px; max-width: 440px; margin: 0 auto; }
@media (max-width: 480px) { .signup-form { flex-direction: column; } }
.signup-form input {
  flex: 1; height: 46px; padding: 0 16px; color: var(--on-surface);
  background: var(--surface-container); border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md); font: 400 15px var(--font-ui); outline: none;
  transition: border-color .18s var(--ease);
}
.signup-form input::placeholder { color: var(--outline); }
.signup-form input:focus { border-color: var(--primary); }
.signup-form .btn.primary { height: 46px; padding-inline: 22px; flex: none; }
.signup-fine { margin-top: 18px; font: 400 12.5px var(--font-ui); color: var(--outline); }
.signup .thanks { display: none; flex-direction: column; align-items: center; gap: 14px; }
.signup.done .signup-form, .signup.done .signup-fine { display: none; }
.signup.done .thanks { display: flex; }
.signup .thanks .chk {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--primary-container); color: var(--primary);
  animation: chip-pulse 1.4s var(--ease) 1;
}
.signup .thanks .chk .m-icon { width: 22px; height: 22px; }
.signup .thanks p { color: var(--on-surface); font-weight: 500; margin: 0; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot { border-top: 1px solid var(--outline-variant); background: var(--surface-container-lowest); }
.foot .wrap { display: flex; align-items: flex-start; gap: 32px; padding-block: 40px; flex-wrap: wrap; }
.foot .foot-logo { font-size: 27px; margin-top: -4px; }
.foot-copy { flex: 1; min-width: 300px; display: flex; flex-direction: column; gap: 8px; }
.foot .legal { font: 500 13px var(--font-ui); color: var(--on-surface-variant); opacity: 0.8; }
.legal-details { font: 400 11px/1.6 var(--font-ui); color: var(--on-surface-variant); opacity: 0.6; max-width: 70ch; margin: 0; }
.foot .foot-links { margin-left: auto; display: flex; gap: 22px; padding-top: 2px; }
.foot .foot-links a { font: 500 13px var(--font-ui); color: var(--on-surface-variant); transition: color .18s var(--ease); }
.foot .foot-links a:hover { color: var(--on-surface); }

/* ============================================================
   TABS & SEGMENTED CONTROLS
   ============================================================ */
.tabs-control {
  display: inline-flex;
  background: var(--surface-container-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-full);
  padding: 4px;
  gap: 2px;
}
.tab-btn, .lang-btn {
  background: transparent;
  border: none;
  color: var(--outline);
  font: 600 13px/1 var(--font-ui);
  padding: 8px 18px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all .2s var(--ease);
}
.tab-btn:hover, .lang-btn:hover {
  color: var(--on-surface);
}
.tab-btn.active, .lang-btn.active {
  background: var(--primary-container);
  color: var(--primary);
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

/* ============================================================
   STUDY ARTIFACTS SECTION
   ============================================================ */
.artifacts-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 32px;
  align-items: start;
}
@media (max-width: 900px) {
  .artifacts-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}
.artifacts-selector {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.artifact-sel-btn {
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  color: var(--outline);
  padding: 16px 20px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s var(--ease);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.artifact-sel-btn:hover {
  background: var(--surface-container);
  border-color: var(--outline-variant);
  color: var(--on-surface);
}
.artifact-sel-btn.active {
  background: var(--surface-container-high);
  border-color: var(--outline-variant);
  color: var(--on-surface);
}
.artifact-sel-btn h4 {
  margin: 0;
  font: 600 15px var(--font-ui);
  transition: color 0.2s;
}
.artifact-sel-btn.active h4 {
  color: var(--primary);
}
.artifact-sel-btn p {
  margin: 0;
  font: 400 12.5px/1.4 var(--font-ui);
  color: var(--outline);
}
.artifact-sel-btn.active p {
  color: var(--on-surface-variant);
}

.artifacts-canvas {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Notes Showcase */
.note-editor {
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  background: var(--surface-container-lowest);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.editor-header {
  background: var(--surface-container);
  border-bottom: 1px solid var(--outline-variant);
  padding: 8px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.editor-header .file-name {
  font: 500 11.5px var(--font-ui);
  color: var(--on-surface-variant);
  display: flex;
  align-items: center;
}
.editor-header .file-tags {
  display: flex;
  gap: 6px;
}
.editor-header .tag {
  font: 600 9px var(--font-ui);
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--surface-container-high);
  color: var(--secondary);
}
.editor-body {
  padding: 24px;
  position: relative;
  min-height: 280px;
}
.editor-title {
  margin: 0 0 16px;
  font: 600 20px var(--font-ui);
  color: var(--on-surface);
}
.editor-text p {
  font: 400 15px/1.65 var(--font-read);
  color: var(--on-surface-variant);
  margin: 0 0 14px;
}
.note-term {
  border-bottom: 1px dashed var(--outline);
  color: var(--on-surface);
  cursor: pointer;
  transition: all 0.2s;
  padding-bottom: 1px;
}
.note-term:hover, .note-term.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  background: var(--primary-container);
}
.note-term.saved.active { color: #f4c4a4; border-bottom-color: #f4c4a4; }
.note-term.faith.active { color: var(--primary); border-bottom-color: var(--primary); }
.note-term.works.active { color: var(--secondary); border-bottom-color: var(--secondary); }

.editor-popup {
  position: absolute;
  bottom: 24px;
  right: 24px;
  width: 260px;
  background: rgba(27, 28, 28, 0.88);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  padding: 14px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  z-index: 10;
}
.editor-popup b {
  display: block;
  font: 600 14px var(--font-ui);
  color: var(--on-surface);
  margin-bottom: 2px;
}
.editor-popup span {
  display: block;
  font: 500 11px var(--font-ui);
  color: var(--secondary);
  margin-bottom: 8px;
}
.editor-popup p {
  margin: 0;
  font: 400 12.5px/1.5 var(--font-ui);
  color: var(--on-surface-variant);
}

/* Outlines Showcase */
.outline-workspace {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  height: 320px;
}
@media (max-width: 600px) {
  .outline-workspace {
    grid-template-columns: 1fr;
    height: auto;
  }
}
.passage-pane, .outline-editor-pane {
  background: var(--surface-container-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.passage-pane .ref {
  font: 600 11.5px var(--font-ui);
  color: var(--outline);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 14px;
}
.passage-lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.p-line {
  font: 400 14.5px var(--font-read);
  color: var(--on-surface-variant);
  transition: all 0.3s;
  padding: 2px 6px;
  border-radius: 4px;
}
.p-line.l1 { padding-left: 20px; }
.p-line.l3 { padding-left: 20px; }
.p-line.l5 { padding-left: 20px; }
.p-line.active {
  color: var(--primary);
  background: var(--primary-container);
  font-weight: 500;
}

.outline-editor-pane .oe-head {
  font: 600 12px var(--font-ui);
  color: var(--on-surface-variant);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
}
.oe-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.oe-row {
  font: 400 13px var(--font-ui);
  color: var(--outline);
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.3s;
  cursor: default;
}
.oe-row.oe1 { padding-left: 16px; }
.oe-row.oe2 { padding-left: 28px; }
.oe-row.oe3 { padding-left: 28px; }
.oe-row.oe4 { padding-left: 16px; }
.oe-row.oe5 { padding-left: 28px; }
.oe-row.oe6 { padding-left: 28px; }
.oe-row.active {
  color: var(--on-surface);
  background: var(--surface-container-high);
  font-weight: 500;
  border-left: 2px solid var(--primary);
}

/* Diagram Showcase */
.diagram-workspace {
  background: var(--surface-container-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  height: 320px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.diagram-workspace .ref {
  font: 600 11.5px var(--font-ui);
  color: var(--outline);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.diag-line {
  transition: stroke-dashoffset 1s ease;
}
.diag-text {
  transition: opacity 0.5s ease;
}

/* Arcing Showcase */
.arcing-workspace {
  background: var(--surface-container-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  height: 340px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
  overflow: hidden;
}
.arcing-workspace .ref {
  font: 600 11.5px var(--font-ui);
  color: var(--outline);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.arcing-propositions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 5;
}
.prop-row {
  font: 400 13.5px var(--font-read);
  color: var(--on-surface-variant);
  background: var(--surface-container);
  border: 1px solid var(--outline-variant);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: 10px;
}
.p-num {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--surface-container-high);
  color: var(--outline);
  font: 600 10px/16px var(--font-ui);
  text-align: center;
}
.arcing-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.arc-path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset 1.2s ease;
}

/* ============================================================
   ORIGINAL LANGUAGES SECTION
   ============================================================ */
.languages-control {
  margin-bottom: 24px;
}
.languages-stage-wrap #languagesStage {
  min-height: 280px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

/* Interlinear */
.lang-interlinear {
  display: flex;
  flex-wrap: wrap;
  row-gap: 24px;
  column-gap: 14px;
  justify-content: flex-start;
}
.interlinear-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 44px;
  border-right: 1px solid rgba(255,255,255,0.03);
  padding-right: 10px;
}
.interlinear-col.punctuation {
  min-width: 10px;
  border: none;
  padding: 0;
  justify-content: flex-start;
}
.interlinear-col.punctuation span {
  font: 400 20px var(--font-read);
  color: var(--on-surface-variant);
}
.interlinear-col span {
  display: block;
  width: 100%;
}
.interlinear-col .gk-line {
  font: 600 20px var(--font-read);
  color: var(--on-surface);
  margin-bottom: 4px;
}
.interlinear-col .tr-line {
  font: 400 12.5px var(--font-ui);
  color: var(--outline);
  margin-bottom: 4px;
}
.interlinear-col .st-line {
  font: 600 10px var(--font-ui);
  color: var(--secondary);
  background: var(--surface-container-high);
  padding: 1px 4px;
  border-radius: 3px;
  width: max-content;
  margin-bottom: 6px;
}
.interlinear-col .gl-line {
  font: 400 13px var(--font-ui);
  color: var(--on-surface-variant);
}

/* Reader Mode */
.lang-reader {
  font: 400 24px/1.8 var(--font-read);
  color: var(--on-surface-variant);
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}
.reader-word {
  color: var(--on-surface);
  cursor: pointer;
  transition: color 0.15s var(--ease);
  border-bottom: 1px transparent;
}
.reader-word:hover {
  color: var(--primary);
  border-bottom: 1px dashed var(--primary);
}
.reader-punctuation {
  color: var(--outline);
}

/* Popover card styling */
.gk-hover-card {
  width: 240px;
  background: rgba(27, 28, 28, 0.9);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 12px 36px rgba(0,0,0,0.3);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -90%) scale(0.95);
  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.gk-hover-card.active {
  opacity: 1;
  transform: translate(-50%, -100%) scale(1);
}
.kh-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--outline-variant);
  padding-bottom: 8px;
  margin-bottom: 8px;
}
.kh-gk {
  font: 600 18px var(--font-read);
  color: var(--on-surface);
}
.kh-st {
  font: 600 10px var(--font-ui);
  color: var(--secondary);
  background: var(--surface-container-high);
  padding: 1px 4px;
  border-radius: 3px;
}
.kh-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kh-row {
  font: 400 12px var(--font-ui);
  color: var(--on-surface-variant);
}
.kh-row b {
  color: var(--outline);
  font-weight: 500;
}
.kh-row p {
  margin: 2px 0 0;
  color: var(--on-surface);
}

/* Parallel View */
.lang-parallel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
@media (max-width: 600px) {
  .lang-parallel {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}
.parallel-pane {
  background: var(--surface-container-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  padding: 24px;
  display: flex;
  flex-direction: column;
}
.parallel-pane .pane-title {
  font: 600 11.5px var(--font-ui);
  color: var(--outline);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 16px;
}
.parallel-pane .pane-content {
  font: 400 18px/1.7 var(--font-read);
}
.parallel-pane .pane-content.greek {
  color: var(--on-surface);
}
.parallel-pane .pane-content.english {
  color: var(--on-surface-variant);
}
.p-gk, .p-en {
  cursor: pointer;
  padding: 1px 3px;
  border-radius: 3px;
  transition: all 0.18s var(--ease);
}
.p-gk.highlight, .p-en.highlight {
  background: var(--primary-container);
  color: var(--primary);
}