:root {
    --ink:#142d47;
    --paper:#f5f9fc;
    --green:#10365c;
    --lime:#c4eafa
}

* {
    box-sizing:border-box
}

body {
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:Vazirmatn,Tahoma,sans-serif
}

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

.wrap {
    max-width:1240px;
    margin:auto;
    padding-inline:36px
}

header {
    height:112px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:28px
}

.brand {
    font-size:29px;
    font-weight:900;
    letter-spacing:-1px;
    white-space:nowrap
}

.brand span {
    color:#168bb7;
    margin-right:5px
}

.brand small {
    display:block;
    font-size:9px;
    letter-spacing:3px;
    direction:ltr;
    text-align:center
}

nav {
    display:flex;
    gap:28px;
    font-size:13px
}

.button {
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    gap:32px;
    background:var(--green);
    color:white;
    border-radius:9px;
    padding:17px 24px;
    font-weight:600;
    font-size:14px
}

.button:hover {
    background:#195582
}

.button.small {
    font-size:12px;
    padding:13px 17px
}

.hero {
    display:grid;
    grid-template-columns:1.18fr 1fr;
    gap:65px;
    padding-block:55px 80px;
    align-items:center
}

.eyebrow {
    font-size:12px;
    font-weight:600;
    display:flex;
    align-items:center;
    gap:9px
}

.eyebrow i {
    width:7px;
    height:7px;
    border-radius:50%;
    background:#168bb7
}

h1 {
    font-size:clamp(32px,3.2vw,46px);
    font-weight:800;
    line-height:1.7;
    letter-spacing:-1.8px;
    margin:23px 0
}

em {
    font-style:normal;
    color:#168bb7
}

.lead {
    color:#637b8e;
    line-height:2.2;
    font-size:15px;
    max-width:440px
}

.actions {
    display:flex;
    align-items:center;
    gap:25px;
    margin-top:30px
}

.text-link {
    font-size:13px;
    font-weight:600
}

.hero-note {
    display:flex;
    gap:17px;
    align-items:center;
    margin-top:40px
}

.hero-note>span {
    font-family:Georgia,serif;
    font-size:24px;
    transform:rotate(-9deg);
    background:#e4f2fa;
    border-radius:50%;
    padding:16px 9px
}

.hero-note p {
    font-size:12px;
    line-height:1.9;
    color:#637b8e
}

.poster {
    height:480px;
    background:#e8f4fa;
    border-radius:140px 140px 18px 18px;
    position:relative;
    overflow:hidden;
    isolation:isolate;
    direction:ltr;
    box-shadow:inset 0 0 0 1px #d5e8f2
}

.poster-top {
    position:absolute;
    top:52px;
    left:40px;
    right:40px;
    display:flex;
    justify-content:space-between;
    font-size:8px;
    letter-spacing:1px;
    color:#4e7792;
    z-index:1
}

.city-towers {
    display:block;
    width:100%;
    height:100%;
    padding-top:16px
}

.poster-bottom {
    position:absolute;
    bottom:22px;
    left:24px;
    right:24px;
    text-align:center;
    direction:rtl;
    color:#416b87;
    font-size:11px
}

.ribbon {
    background:#e5f1f8;
    border-block:1px solid #d5e6ef;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:70px;
    padding:21px;
    font-size:13px
}

.ribbon b {
    font-size:24px;
    color:#168bb7
}

.paths {
    padding-block:80px
}

.section-heading {
    display:flex;
    justify-content:space-between;
    align-items:end;
    margin-bottom:30px
}

h2 {
    font-size:30px;
    line-height:1.7;
    margin:12px 0
}

.section-heading>p {
    font-size:12px;
    color:#637b8e
}

.cards {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px
}

.card {
    background:#e7f1f8;
    border:1px solid #d4e3ed;
    border-radius:14px;
    padding:30px;
    transition:transform .2s
}

.card:hover {
    transform:translateY(-5px)
}

.purple {
    background:#eaf2fb;
    border-color:#d0e3f3
}

.yellow {
    background:#e4f4fb;
    border-color:#d9eaf3
}

.number {
    font-size:10px;
    letter-spacing:1px;
    direction:ltr;
    display:block;
    text-align:right;
    color:#637b8e
}

.symbol {
    font-size:46px;
    margin:17px 0;
    color:#285c80
}

h3 {
    font-size:20px;
    margin-bottom:10px
}

.card p {
    font-size:13px;
    line-height:2;
    color:#637b8e;
    min-height:52px
}

.card strong {
    display:block;
    font-size:12px;
    margin-top:30px
}

.about {
    padding-block:30px 80px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 70px
}

.about>.eyebrow {
    grid-column:1/-1
}

.about h2 {
    font-size:38px
}

.about>div {
    align-self:center;
    font-size:15px;
    color:#637b8e;
    line-height:2.3
}

.cta {
    background:var(--lime);
    border-radius:18px;
    padding:36px 44px;
    display:flex;
    align-items:center;
    justify-content:space-between
}

.cta p {
    font-size:13px
}

.cta h2 {
    font-size:27px
}

footer {
    display:flex;
    align-items:center;
    gap:34px;
    min-height:160px;
    font-size:12px
}

footer small {
    margin-right:auto;
    color:#888
}

a:focus-visible {
    outline:3px solid #aa6545;
    outline-offset:5px
}

@media(max-width:850px) {
    header {
        height:auto;
        min-height:90px;
        flex-wrap:wrap;
        padding-block:20px
    }

    nav {
        order:3;
        width:100%;
        justify-content:center;
        gap:20px
    }

    .hero {
        gap:35px;
        grid-template-columns:1fr;
        padding-top:25px
    }

    .poster {
        max-width:460px;
        width:100%;
        margin:auto;
        height:440px
    }

    .wrap {
        padding-inline:24px
    }

    h1 {
        font-size:34px
    }

    .intro {
        text-align:center
    }

    .eyebrow,.actions,.hero-note {
        justify-content:center
    }

    .lead {
        margin-inline:auto
    }

    .ribbon {
        gap:20px;
        flex-wrap:wrap
    }

    .ribbon span {
        font-size:11px
    }

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

    .section-heading {
        display:block
    }

    .about {
        grid-template-columns:1fr;
        text-align:center
    }

    .about h2 {
        font-size:32px
    }

    .cta {
        margin-inline:20px;
        display:block;
        text-align:center
    }

    .cta h2 {
        font-size:23px
    }

    footer {
        flex-wrap:wrap;
        padding-block:35px;
        justify-content:center
    }

    footer small {
        margin:0
    }

    nav a {
        font-size:11px
    }

}

.interior {
    min-height:65vh;
    padding-block:35px 70px
}

.two-col {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px
}

.panel {
    padding:28px;
    border:1px solid #d4e3ed;
    border-radius:14px;
    background:#ffffff;
    margin-block:24px
}

label {
    display:block;
    font-size:13px;
    margin-bottom:20px
}

input,textarea,select {
    display:block;
    width:100%;
    font:inherit;
    color:inherit;
    border:1px solid #c8dfe9;
    border-radius:7px;
    padding:12px;
    background:#fff;
    margin-top:8px
}

textarea {
    min-height:130px;
    resize:vertical
}

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

.check input {
    width:auto;
    margin:0
}

button {
    border:0;
    cursor:pointer;
    font-family:inherit
}

.notice {
    padding:18px;
    background:#d9eef8;
    border-radius:8px
}

.errors {
    padding:18px;
    background:#fae5df;
    border-radius:8px
}

.admin-row {
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding-block:20px;
    border-bottom:1px solid #dcebf3
}

.cover {
    width:100%;
    height:230px;
    object-fit:contain;
    border-radius:9px
}

.school-image {
    max-width:100%;
    max-height:480px;
    border-radius:15px
}

.prose {
    white-space:pre-line;
    line-height:2.2;
    overflow-wrap:anywhere
}

@media(max-width:700px) {
    .two-col {
        grid-template-columns:1fr
    }

    .admin-row {
        flex-wrap:wrap
    }

}

.product-cover {
    height:440px
}

button:disabled {
    opacity:.5;
    cursor:not-allowed
}

.cancel-form {
    margin-top:16px
}

nav a {
    display:inline-flex;
    align-items:center;
    min-height:44px
}

.skip-link {
    position:absolute;
    top:-100px;
    right:24px;
    padding:12px 20px;
    background:var(--green);
    color:#fff;
    z-index:50
}

.skip-link:focus {
    top:12px
}

@media(max-width:480px) {
    .actions {
        flex-direction:column;
        gap:20px
    }

    .actions>.button {
        width:100%
    }

    .hero h1 {
        font-size:30px;
        line-height:1.8
    }

    .hero {
        padding-bottom:45px
    }

    .hero-note {
        margin-top:28px
    }

    .poster {
        height:400px
    }

    .section-heading h2 {
        font-size:26px
    }

    nav {
        flex-wrap:wrap;
        gap:4px 15px
    }

    header {
        gap:12px
    }

    .button.small {
        gap:8px;
        font-size:11px
    }

    .brand {
        font-size:25px
    }

}

.landing-school {
    grid-column: 1 / -1;
    width: 100%;
    object-fit: cover;
    margin-top: 30px;
}
.auth-shell {
    max-width: 580px;
    margin-inline: auto;
}
.auth-shell h1 {
    font-size: clamp(26px, 4vw, 36px);
}
.auth-shell p {
    line-height: 2;
    font-size: 13px;
}
.auth-shell summary {
    cursor: pointer;
    padding-block: 8px;
    font-weight: 700;
}

/* Shared identity: navy, ocean blue, sky blue and white from the school logo. */
.brand { display:inline-flex; align-items:center; flex-shrink:0; }
.brand-logo { display:block; width:120px; height:84px; object-fit:contain; }
footer .brand-logo { width:108px; height:76px; }
::selection { background:#c4eafa; color:#10365c; }
:focus-visible { outline:3px solid #168bb7; outline-offset:4px; }
@media(max-width:700px) { .brand-logo { width:102px; height:72px; } }

/* TeLin visual system: violet, royal blue, airy surfaces. */
:root { --ink:#272051; --paper:#fff; --green:#5930b6; --lime:#ece1fc; --brand-purple:#6834bf; --brand-blue:#126bd4; }
body { background:linear-gradient(180deg,#fff 0%,#fcfbff 75%,#f6f3fc 100%); }
header.wrap { max-width:1360px; height:92px; gap:24px; }
.brand-logo { height:74px; }
nav { gap:26px; color:#403664; font-weight:500; }
nav a:hover,.text-link:hover { color:#8246ce; }
.button { border-radius:999px; background:linear-gradient(110deg,#4423a8,#8944d1); box-shadow:0 6px 18px #6437b51a; gap:20px; }
.button:hover { background:linear-gradient(110deg,#34218d,#7130b9); transform:translateY(-1px); }
.button,.card,.journey-card { transition:transform .2s,box-shadow .2s; }
.hero-banner { max-width:1440px; margin:auto; padding:50px 6% 45px; min-height:485px; display:flex; position:relative; overflow:hidden; background:#f3f3ff; }
.hero-artwork { position:absolute; inset:0; background:url('/images/telin-hero.png') left 40% / cover no-repeat; }
.hero-banner .intro { position:relative; width:45%; margin-inline-end:auto; z-index:1; text-align:right; }
.hero-banner h1 { font-size:clamp(30px,3.5vw,52px); line-height:1.65; color:#45209a; margin:12px 0 14px; letter-spacing:-1.5px; }
.hero-banner .lead { color:#4d4773; font-size:16px; line-height:2; max-width:490px; margin:0 0 22px; }
.hero-banner .eyebrow { color:#6040a4; font-size:11px; }
.hero-banner .actions { gap:18px; flex-wrap:wrap; }
.hero-banner .text-link { font-size:12px; color:#4b2f99; }
.hero-signature { color:#9370c6; font-family:Georgia,serif; font-style:italic; font-size:20px; margin:20px 0 0; direction:ltr; text-align:right; }
.benefits { display:grid; grid-template-columns:repeat(6,1fr); padding-block:28px; background:linear-gradient(180deg,#fff,#faf8fe); max-width:1360px; }
.benefit { text-align:center; padding:0 12px; border-inline-end:1px solid #e7e0f1; display:flex; flex-direction:column; align-items:center; gap:7px; }
.benefit:last-child { border:0; }
.benefit>span { color:#6430b7; font-size:34px; line-height:1.2; }
.benefit strong { font-size:12px; color:#352665; }
.benefit small { color:#817893; font-size:10px; }
.paths { padding-block:38px; }
.centered { justify-content:center; text-align:center; margin-bottom:24px; }
.centered .eyebrow { justify-content:center; color:#8a72ab; }
h2 { color:#432482; font-size:26px; }
.journey-card { position:relative; min-height:310px; overflow:hidden; border-radius:18px; box-shadow:0 8px 28px #49258b14; color:#fff; }
.journey-card>img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; }
.journey-card:nth-child(2)>img { object-position:center 28%; }
.journey-card:nth-child(3)>img { object-position:center 35%; }
.journey-card>div { position:absolute; inset:0; padding:24px; display:flex; flex-direction:column; justify-content:end; background:linear-gradient(180deg,transparent 12%,#4a26a125 32%,#5824adbF 62%,#5928b7 100%); }
.journey-card:nth-child(2)>div { background:linear-gradient(180deg,transparent 12%,#166ac740 38%,#1265bf 100%); }
.journey-card:nth-child(3)>div { background:linear-gradient(180deg,transparent 12%,#4642b54d 38%,#7542c9 100%); }
.journey-tag { font-size:9px; letter-spacing:1px; opacity:.8; }
.journey-card h3 { font-size:23px; margin:10px 0 4px; }
.journey-card p { font-size:12px; margin:0 0 18px; }
.journey-card strong { border-radius:99px; background:#fff; color:#573a93; font-size:11px; width:fit-content; padding:9px 22px; }
.journey-card:hover { transform:translateY(-4px); box-shadow:0 12px 30px #49258b26; }
.card { background:#fff; border-color:#e7dff0; border-radius:18px; box-shadow:0 5px 24px #4e2a8010; }
.card h2,.card h3,.card strong { color:#4c2c92; }
.card p,.prose { color:#746a85; }
.about { margin-top:20px; background:linear-gradient(135deg,#f7f2fd,#eef6ff); border-radius:24px; padding-block:35px; }
.about .eyebrow { color:#8b6cae; }
.about em { color:#7544c5; }
.about p { font-size:13px; line-height:2.2; color:#746a85; }
.landing-school { max-height:280px; border-radius:16px; }
.cta { border-radius:24px; margin-block:35px; padding-block:30px; background:linear-gradient(110deg,#4621a6,#7042c8 50%,#168ad8); color:#fff; }
.cta h2,.cta p { color:#fff; }
.cta .button { background:#fff; color:#5630a9; }
footer.wrap { max-width:none; padding-inline:max(36px,calc((100vw - 1168px)/2)); margin-top:30px; background:linear-gradient(110deg,#5624b4,#253bb2,#116cbd); color:#fff; border:0; }
footer .brand { background:#fff; border-radius:12px; padding:0 12px; }
footer p,footer small { color:#e6dcf8; }
.panel { border-color:#e5dced; background:#fff; border-radius:18px; box-shadow:0 5px 24px #4e2a8009; }
input,textarea,select { border-color:#ded2ed; border-radius:10px; }
.notice { background:#eee7fb; color:#54329a; }
::selection { background:#dcc9f4; color:#3d1b81; }
:focus-visible { outline-color:#8251cb; }
@media(max-width:1000px) {
 .hero-banner .intro { width:50%; }
 .hero-banner { min-height:460px; }
 .hero-artwork { background-position:38% center; }
 .benefits { grid-template-columns:repeat(3,1fr); gap:24px 0; }
 .benefit:nth-child(3) { border:0; }
}
@media(max-width:700px) {
 header.wrap { height:auto; padding-block:12px; }
 .hero-banner { display:flex; flex-direction:column; padding:28px 24px 310px; min-height:650px; }
 .hero-banner .intro { width:100%; text-align:center; }
 .hero-banner .eyebrow,.hero-banner .actions { justify-content:center; }
 .hero-banner .lead { margin-inline:auto; }
 .hero-signature { text-align:center; }
 .hero-artwork { top:40%; background-size:auto 100%; background-position:left center; }
 .hero-banner:after { content:''; position:absolute; inset:0 0 42%; background:linear-gradient(#f5f4ff 75%,#f5f4ff00); }
 .hero-banner .intro { z-index:2; }
 .benefits { padding-inline:12px; }
 .benefit { padding-inline:6px; }
 .benefit strong { font-size:10px; }
 .benefit small { font-size:9px; }
 .journey-card { min-height:320px; }
 .about,.cta { border-radius:0; }
 footer.wrap { padding-inline:24px; }
}
@media(prefers-reduced-motion:reduce) { .button,.card,.journey-card { transition:none; } }
header.wrap { height:auto; min-height:92px; padding-block:8px; }
.hero-artwork:after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent 42%,#f8f6ff77 61%,#f8f6ffdb 100%); }
@media(min-width:701px) and (max-width:850px) { header.wrap { padding-bottom:14px; } }
@media(max-width:700px) { .hero-artwork:after { display:none; } }
@media(max-width:700px) {
 header.wrap { row-gap:8px; }
 header nav { gap:2px 16px; }
 header nav a { min-height:32px; }
 .hero-banner { padding-bottom:330px; }
 .hero-artwork { top:auto; bottom:0; height:310px; background-size:auto 100%; background-position:left center; }
 .hero-banner:after { inset:0 0 290px; background:linear-gradient(#f5f4ff 96%,#f5f4ff00); }
 .hero-banner .actions { gap:14px; }
 .hero-signature { margin-top:16px; }
}

/* Shared public pages, language cards and navigation. */
.site-header nav { flex-wrap:wrap; gap:6px 22px; }
.site-header nav a { position:relative; font-size:12px; min-height:36px; }
.site-header nav a[aria-current=page] { color:#6531b8; font-weight:700; }
.site-header nav a[aria-current=page]:after { content:''; position:absolute; bottom:0; height:2px; background:#8954ce; inset-inline:0; border-radius:2px; }
.language-section { padding-block:40px 25px; scroll-margin-top:20px; }
.section-note { font-size:12px; line-height:1.9; color:#817590; }
.language-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.language-card { min-height:315px; position:relative; overflow:hidden; border-radius:15px; background:#4e24ac; box-shadow:0 8px 26px #45218a18; transition:transform .2s; }
.language-card:hover { transform:translateY(-5px); }
.language-card>img { position:absolute; inset:0; height:100%; width:100%; object-fit:cover; }
.language-card-content { position:absolute; inset:0; padding:20px; display:flex; flex-direction:column; justify-content:end; color:#fff; background:linear-gradient(180deg,transparent 25%,#4b20ac88 50%,#5925b8 86%); }
.language-english .language-card-content { background:linear-gradient(180deg,transparent 25%,#106aca88 50%,#1269c4 86%); }
.language-french .language-card-content { background:linear-gradient(180deg,transparent 25%,#6974dc77 50%,#9760d8 95%); }
.language-turkish .language-card-content { background:linear-gradient(180deg,transparent 25%,#215ec877 50%,#8445c8 95%); }
.language-card small { font-size:9px; letter-spacing:2px; opacity:.8; }
.language-card h3 { font-size:23px; margin:4px 0; }
.language-card p { margin:0 0 17px; font-size:12px; color:#f0eafa; }
.language-card a { background:#fff; color:#4c2c91; display:flex; align-items:center; justify-content:space-between; gap:8px; border-radius:50px; padding:10px 16px; width:fit-content; font-size:10px; font-weight:600; }
.language-flag { width:40px; height:40px; border:3px solid white; border-radius:50%; margin-bottom:9px; box-shadow:0 2px 8px #21134a30; display:grid; place-items:center; overflow:hidden; font:32px sans-serif; }
.flag-de { background:linear-gradient(#141414 33.33%,#de2635 33.33% 66.66%,#ffce33 66.66%); }
.flag-fr { background:linear-gradient(90deg,#2050a2 33.33%,#fff 33.33% 66.66%,#e7354b 66.66%); }
.flag-gb { background:linear-gradient(45deg,transparent 44%,white 44% 56%,transparent 56%),linear-gradient(-45deg,transparent 44%,white 44% 56%,transparent 56%),#244c9c; color:#e5314a; }
.flag-tr { background:#e82b41; color:#fff; }
.page-masthead { position:relative; overflow:hidden; background:linear-gradient(115deg,#eef5ff,#f3ecfc 60%,#fbf8ff); border-block:1px solid #eee6f6; }
.page-masthead>.wrap { padding-block:28px 35px; position:relative; }
.page-masthead h1 { color:#49268b; font-size:clamp(25px,3vw,38px); line-height:1.7; margin:8px 0 0; position:relative; z-index:1; }
.page-masthead .eyebrow { color:#926db3; margin:18px 0 0; font-size:10px; }
.breadcrumbs { display:flex; align-items:center; width:auto; gap:10px; font-size:10px; color:#9283aa; order:0; justify-content:start; }
.breadcrumbs a { color:#67459c; min-height:0; }
.masthead-orbit { position:absolute; width:250px; height:250px; border:35px solid #d7c7ef55; border-radius:50%; left:40px; top:-25px; }
.inner-page .interior { min-height:45vh; padding-block:35px 65px; }
.inner-page .content-heading { font-size:clamp(20px,2.5vw,28px); margin:0 0 24px; color:#44316d; }
.inner-page .eyebrow { color:#9272b4; }
.resource-grid { gap:24px; align-items:stretch; }
.resource-grid .card { display:flex; flex-direction:column; padding:22px; border-radius:20px; }
.resource-grid .card h2 { font-size:20px; line-height:1.8; margin:14px 0 9px; }
.resource-grid .card>small { color:#8354b6; background:#f1eafa; padding:5px 10px; border-radius:30px; width:fit-content; font-size:10px; margin-top:12px; }
.resource-grid .card p { font-size:12px; line-height:2; }
.resource-grid .card>.button { margin-top:auto; align-self:start; }
.resource-grid .card>p:last-child { margin-top:auto; padding-top:16px; }
.page-teachers .cover { height:260px; object-fit:cover; object-position:center 25%; }
.page-shop .card>.cover { background:linear-gradient(135deg,#f1eafa,#eef5ff); padding:15px; height:265px; }
.page-shop .card>strong { font-size:17px; color:#6332b3; }
.page-exams .card { border-top:4px solid #8452cf; background:linear-gradient(150deg,#fff 65%,#f3edfc); }
.page-exams .card:nth-child(2n) { border-top-color:#388bd8; }
.two-col { gap:38px; align-items:start; }
.two-col>section { min-width:0; }
.product-cover { border-radius:22px; background:linear-gradient(135deg,#f5effc,#eef5ff); padding:20px; }
.page-teachers .product-cover { height:450px; }
.contact-info { padding:32px; border-radius:22px; background:linear-gradient(145deg,#6532b6,#424ab8); color:#fff; margin-top:24px; min-height:300px; }
.contact-info h2,.contact-info p,.contact-info .eyebrow { color:#fff; }
.contact-info p { font-size:13px; line-height:2.2; }
.contact-info a { text-decoration:underline; text-underline-offset:5px; }
.panel { padding:30px; border:1px solid #e8dff2; box-shadow:0 8px 32px #48227c09; }
label { color:#5e4f75; font-size:12px; }
input,textarea,select { background:#fdfcff; border-color:#e0d5ed; padding:13px 15px; }
input:focus,textarea:focus,select:focus { outline:2px solid #bb9ee6; outline-offset:2px; background:#fff; }
input[type=radio],input[type=checkbox] { accent-color:#713bc2; }
.check { border-radius:12px; padding:10px; background:#faf7fe; }
.check:has(input:checked) { background:#eee3fc; color:#56318c; }
fieldset.panel legend { padding-inline:12px; color:#533287; font-weight:600; line-height:1.8; }
.admin-row { border-color:#ece5f4; font-size:13px; }
.admin-row a { color:#6635ae; font-weight:600; }
.page-about .school-image { width:100%; object-fit:cover; max-height:400px; margin-bottom:20px; }
.page-about>.interior>.prose { background:#fff; border:1px solid #e8dff2; border-radius:20px; padding:28px; }
.site-footer { display:block; margin-top:35px; padding:40px 0 0; background:linear-gradient(115deg,#6228b8,#3c3cba 60%,#137bc5); color:#fff; }
.footer-grid { display:grid; grid-template-columns:1.1fr 1fr 1fr 1.3fr; gap:32px; }
.footer-grid>div { display:flex; flex-direction:column; align-items:start; gap:10px; }
.footer-grid h2 { color:#fff; font-size:15px; margin:5px 0 10px; }
.footer-grid p,.footer-grid small { color:#e7ddf8; font-size:11px; line-height:1.9; margin:0; }
.footer-grid a:not(.brand):not(.button) { font-size:11px; color:#eee5fb; line-height:1.9; }
.footer-grid .brand { background:#fff; border-radius:12px; padding:0 12px; }
.footer-grid .button { background:#ffffff20; color:#fff; font-size:11px; padding:12px 18px; border:1px solid #ffffff30; box-shadow:none; }
.footer-bottom { border-top:1px solid #ffffff25; margin-top:30px; display:flex; justify-content:space-between; padding-block:16px; font-size:10px; color:#ddd4f1; }
@media(max-width:1000px) { .language-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:700px) {
 .page-masthead>.wrap { padding-block:20px 26px; }.masthead-orbit { left:-90px; opacity:.5; }
 .breadcrumbs { flex-wrap:wrap; gap:8px; font-size:9px; }
 .page-masthead .eyebrow { justify-content:start; }
 .inner-page .interior { padding-block:25px 40px; }
 .resource-grid .card { padding:20px; }.two-col { gap:20px; }.contact-info { min-height:240px; padding:24px; }
 .panel { padding:22px; }.footer-grid { gap:25px; }.footer-grid>div:first-child,.footer-grid>div:last-child { grid-column:1/-1; }
 .language-card { min-height:290px; }.language-card-content { padding:15px; }.language-card h3 { font-size:20px; }
 .language-card a { font-size:9px; padding:9px 11px; }.language-card p { font-size:10px; }.language-grid { gap:12px; }
 .footer-bottom { gap:15px; flex-wrap:wrap; }.site-header nav { gap:2px 13px; }
}
@media(max-width:420px) { .language-grid { grid-template-columns:1fr; }.language-card { min-height:325px; } }
@media(prefers-reduced-motion:reduce) { .language-card { transition:none; } }
.language-tone-1 .language-card-content { background:linear-gradient(180deg,transparent 25%,#106aca88 50%,#1269c4 86%); }
.language-tone-2 .language-card-content { background:linear-gradient(180deg,transparent 25%,#6974dc77 50%,#9760d8 95%); }
.language-tone-3 .language-card-content { background:linear-gradient(180deg,transparent 25%,#215ec877 50%,#8445c8 95%); }
.language-teachers-title { margin-top:45px; }
.teacher-languages { display:flex; gap:8px; flex-wrap:wrap; margin-block:15px; }
.teacher-languages a { font-size:12px; padding:6px 14px; border-radius:30px; color:#6331a9; background:#eee4fa; }
.page-languages .resource-grid .cover { object-fit:cover; object-position:center 25%; }
.page-reserve .check:has(input:checked) { box-shadow:0 0 0 2px #8f60cc; }
.cancel-form { margin-top:18px; }
.cancel-form .button { background:#f0e9f8; color:#68458e; box-shadow:none; }
/* Date-first private lesson booking. */
body:has(#reservation-form) .page-masthead>.wrap { padding-block:18px 22px; }
body:has(#reservation-form) .page-masthead h1 { font-size:27px; }
.booking-profile { display:flex; align-items:center; gap:16px; margin-bottom:26px; }
.booking-profile>img { width:72px; height:72px; border-radius:20px; object-fit:cover; object-position:top; }
.booking-profile h2 { font-size:22px; margin:0; }
.booking-profile p { margin:4px 0 0; color:#80748f; font-size:12px; }
.booking-profile .eyebrow { font-size:10px; }
.booking-profile-link { margin-inline-start:auto; color:#7849b6; font-size:12px; }
.booking-steps { display:flex; gap:32px; border-bottom:1px solid #eee7f5; padding-bottom:23px; margin-bottom:22px; color:#9a90a7; font-size:12px; }
.booking-steps span { display:flex; align-items:center; gap:8px; }
.booking-steps b { width:25px; height:25px; display:grid; place-items:center; border-radius:50%; background:#f1ecf8; font-weight:500; }
.booking-steps .current { color:#6434ad; font-weight:600; }.booking-steps .current b { background:#6b3bb7; color:white; }
.booking-language-row { display:flex; align-items:center; gap:14px; margin-bottom:24px; font-size:12px; }.booking-language-row>span { margin-inline-start:auto; color:#8c819a; font-size:11px; }
.booking-language-row .teacher-languages { margin:0; }.booking-language-row a[aria-current=page] { background:#6e3cb8; color:#fff; }
.reservation-layout { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:24px; align-items:start; }
.time-picker,.reservation-summary { border:1px solid #e9e1f1; border-radius:22px; background:#fff; padding:26px; box-shadow:0 5px 24px #46227605; }
.picker-heading { display:flex; align-items:start; gap:12px; justify-content:space-between; }.picker-heading h2 { font-size:20px; margin:0; }.picker-heading p { font-size:12px; color:#8d829b; margin:8px 0 0; }.picker-timezone { background:#f7f3fc; color:#80689d; padding:7px 10px; border-radius:8px; font-size:9px; white-space:nowrap; }
.date-navigation { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-top:26px; }.date-navigation p { font-size:13px; color:#5d4779; }.date-navigation button { width:34px; height:34px; border-radius:10px; background:#f5f0fb; color:#6b3eb0; font-size:18px; }.date-navigation button:disabled { opacity:.3; }
.available-dates { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:7px; margin:6px 0 24px; }.available-day { display:flex; flex-direction:column; align-items:center; gap:6px; border:1px solid #eae3f2; border-radius:13px; background:#fff; padding:13px 3px 8px; color:#7e718e; min-width:0; }.available-day:hover { background:#faf7ff; border-color:#bda0df; }.available-day.is-active { color:#6d36b5; background:#f1e8fc; border-color:#a57ad5; box-shadow:0 0 0 1px #a57ad520; }.day-weekday,.day-month { font-size:10px; }.day-number { font-size:23px; font-weight:700; }.day-picked-count { font-size:8px; height:12px; color:#713eb4; }
.day-time-group { padding:0; margin:0; border:0; min-width:0; }.day-time-group legend { padding:0; font-size:16px; font-weight:600; color:#56416e; }.day-times-hint { font-size:11px; color:#9a8ea5; margin:10px 0 18px; }.time-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.time-option { position:relative; cursor:pointer; display:flex; align-items:start; gap:8px; border:1px solid #e9e1f0; border-radius:13px; padding:15px 13px; margin:0; background:#fff; }.time-option:hover { border-color:#b99ad9; background:#fdfbff; }.time-option.is-selected { border-color:#9164c6; background:#f7f1ff; box-shadow:0 0 0 1px #9164c633; }.time-option:has(input:focus-visible) { outline:3px solid #c4a6e5; outline-offset:3px; }.time-option:has(input:disabled) { opacity:.4; cursor:not-allowed; }
.time-option>input { position:absolute; width:1px; height:1px; opacity:0; padding:0; margin:0; }.time-option-content { display:flex; flex-direction:column; gap:8px; min-width:0; }.time-range { display:flex; align-items:center; gap:6px; white-space:nowrap; font-size:15px; color:#514266; }.time-range>span { font-size:10px; color:#b0a4bc; font-weight:400; }.time-duration { font-size:10px; color:#9b8fa5; }.time-price { font-size:13px; color:#76588f; margin-top:4px; }.time-price small { font-size:9px; }.time-selection-mark { margin-inline-start:auto; display:grid; place-items:center; width:20px; height:20px; flex-shrink:0; border:1px solid #e5dcef; border-radius:6px; color:#a48dbd; font-size:14px; }.is-selected .time-selection-mark { background:#7b48bd; border-color:#7b48bd; color:white; }
.selection-limit { min-height:20px; margin:18px 0 0; font-size:11px; color:#8c539e; }
.reservation-summary { position:sticky; top:22px; padding:24px; }.summary-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-bottom:18px; border-bottom:1px solid #f0e9f7; }.summary-heading h2 { margin:0; font-size:17px; }.summary-heading>span { font-size:10px; border-radius:30px; padding:6px 9px; background:#f2ebfb; color:#8563a9; }
.summary-empty { text-align:center; padding:30px 12px; }.summary-empty>span { display:grid; place-items:center; margin:0 auto 14px; width:44px; height:44px; background:#f5f0fb; border-radius:14px; font-size:25px; color:#b194cf; }.summary-empty h3 { font-size:13px; color:#7e6c91; }.summary-empty p { font-size:11px; color:#a193ad; line-height:1.9; }
.selected-session-list { list-style:none; padding:0; margin:8px 0; max-height:340px; overflow:auto; }.selected-session { display:flex; align-items:center; gap:10px; padding:13px 0; border-bottom:1px solid #f1ebf7; }.selected-session-info { display:flex; flex-direction:column; gap:6px; }.selected-session-info strong { font-size:12px; font-weight:500; color:#665178; }.selected-session-info span { font-size:10px; color:#9a87ab; }.remove-session { width:28px; height:28px; border-radius:8px; margin-inline-start:auto; color:#aa91bf; background:#faf7fd; font-size:20px; }
.summary-total { display:flex; align-items:center; justify-content:space-between; border-top:1px solid #eee5f5; padding-top:20px; margin-top:16px; font-size:12px; color:#857190; }.summary-total strong { font-size:23px; color:#64349e; }.summary-total small { font-size:11px; font-weight:400; }.summary-explanation { font-size:11px; line-height:1.9; color:#8e7b9d; background:#f9f5fe; padding:12px; border-radius:10px; margin:18px 0; }.booking-submit { width:100%; justify-content:center; font-size:12px; padding:15px 12px; }.booking-submit:disabled { background:#e6ddef; color:#a490b5; box-shadow:none; transform:none; cursor:not-allowed; }.summary-footnote { font-size:10px; line-height:1.9; text-align:center; color:#b0a1bb; margin:14px 0 0; }
.reservation-empty { padding:50px 24px; text-align:center; background:#faf7fd; border:1px solid #eee5f7; border-radius:22px; }.reservation-empty>span { font-size:36px; color:#a88acb; }.reservation-empty h2 { font-size:22px; }.reservation-empty p { color:#9a89aa; font-size:13px; line-height:2; }.reservation-empty .text-link { margin:18px; display:inline-block; font-size:12px; }
.reservation-layout [hidden] { display:none !important; }
@media(max-width:1100px) { .reservation-layout { grid-template-columns:minmax(0,1fr) 300px; gap:18px; }.time-options { grid-template-columns:repeat(2,minmax(0,1fr)); }.time-picker { padding:20px; }.picker-timezone { display:none; } }
@media(max-width:850px) { .reservation-layout { grid-template-columns:1fr; }.reservation-summary { position:static; }.time-options { grid-template-columns:repeat(3,minmax(0,1fr)); }.booking-language-row { flex-wrap:wrap; }.booking-language-row>span { margin-inline-start:0; }.booking-steps { gap:18px; font-size:10px; }.booking-profile-link { font-size:10px; } }
@media(max-width:480px) { .booking-profile { gap:12px; }.booking-profile>img { width:56px; height:56px; border-radius:16px; }.booking-profile h2 { font-size:18px; }.booking-profile-link { display:none; }.booking-steps { justify-content:space-between; gap:6px; font-size:9px; }.booking-steps b { width:20px; height:20px; }.booking-steps span { gap:5px; }.time-picker,.reservation-summary { padding:18px; border-radius:18px; }.picker-heading h2 { font-size:18px; }.picker-heading p { font-size:10px; }.available-dates { gap:4px; }.available-day { padding:11px 1px 5px; border-radius:10px; }.day-number { font-size:19px; }.day-weekday,.day-month { font-size:8px; }.day-picked-count { font-size:7px; }.time-options { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }.time-range { font-size:14px; }.time-option { padding:13px 10px; }.time-price { font-size:12px; }.day-times-hint { font-size:10px; } }
.mobile-reservation-bar { display:none; }
@media(max-width:480px) {
 .available-dates { display:flex; overflow-x:auto; padding-bottom:9px; gap:7px; scroll-snap-type:x mandatory; }
 .available-day { flex:0 0 58px; scroll-snap-align:start; padding:13px 3px 8px; }
 .day-weekday,.day-month { font-size:10px; }.day-number { font-size:21px; }.day-picked-count { font-size:8px; }
 .mobile-reservation-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; position:fixed; bottom:0; inset-inline:0; z-index:20; border-top:1px solid #e5d9f0; padding:14px 20px max(14px,env(safe-area-inset-bottom)); background:#fff; box-shadow:0 -5px 20px #42216c0a; }
 .mobile-reservation-bar>span { font-size:12px; color:#66427f; }.mobile-reservation-bar>a { border-radius:30px; background:#7844b8; color:white; padding:11px 15px; font-size:11px; }
 body:has(.mobile-reservation-bar:not([hidden])) { padding-bottom:75px; }
 #summary-title { scroll-margin-top:20px; }
}
.time-picker,.reservation-summary { min-width:0; }
@media(max-width:850px) { .reservation-layout { grid-template-columns:minmax(0,1fr); } }
/* Public dictionary */
.dictionary-shell { display:grid; grid-template-columns:minmax(280px,.8fr) minmax(0,1.35fr); gap:28px; align-items:start; max-width:1120px; margin-inline:auto; }
.dictionary-shell .panel { min-width:0; border:1px solid #e9e1f1; box-shadow:0 12px 40px #46227607; border-radius:24px; }
.dictionary-search { position:sticky; top:24px; }
.dictionary-shell h2 { margin-top:0; font-size:25px; line-height:1.6; }
.dictionary-hint { color:#766383; font-size:12px; line-height:2; }
.dictionary-languages { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:10px; align-items:center; }
.dictionary-languages label { min-width:0; font-size:12px; }.dictionary-languages select { width:100%; }
.dictionary-swap { background:#f1e9fa; color:#68369d; border:1px solid #e4d6f1; border-radius:12px; width:40px; height:40px; margin-top:20px; font-size:24px; cursor:pointer; }
.dictionary-shell :is(button,input,select):focus-visible { outline:3px solid #a779cd; outline-offset:3px; }
.dictionary-search .button { width:100%; justify-content:center; }.dictionary-search .button:disabled { opacity:.65; cursor:wait; }
#dictionary-query { font-size:19px; padding:16px; }#dictionary-coverage { margin-block:10px 20px; }
.dictionary-examples { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding-top:22px; margin-top:22px; border-top:1px solid #eee6f5; }
.dictionary-examples>span { font-size:11px; color:#766383; margin-inline-end:4px; }
.dictionary-examples button { border:1px solid #e7ddef; background:#faf7fd; color:#623d82; border-radius:20px; padding:6px 12px; font:inherit; font-size:12px; cursor:pointer; }
.dictionary-results { min-height:390px; overflow-wrap:anywhere; }
.dictionary-result-top { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-bottom:22px; }
.dictionary-result-top .eyebrow { margin:0; font-size:11px; }
.dictionary-source { background:#f0f7f2; color:#365b47; border:1px solid #dbeadf; border-radius:30px; font-size:10px; padding:6px 11px; margin:0; }.dictionary-source a { color:inherit; text-decoration:underline; text-underline-offset:3px; }
#dictionary-direction { margin:0 0 4px; font-size:11px; }#dictionary-results-title { font-size:32px; margin-bottom:8px; }#dictionary-status { font-size:13px; line-height:2; color:#766383; margin-bottom:26px; }
.dictionary-list { list-style:none; padding:0; margin:0; display:grid; gap:14px; }
.dictionary-entry { background:#fcfafe; border:1px solid #e9e0f2; border-radius:16px; padding:20px; }
.dictionary-entry-heading { display:flex; align-items:baseline; gap:12px; }.dictionary-entry h3 { margin:0; font-size:22px; color:#4f2d71; font-weight:600; line-height:1.7; min-width:0; }
.dictionary-entry-number { display:grid; place-items:center; width:25px; height:25px; flex-shrink:0; border-radius:8px; background:#eee4f8; color:#714697; font-size:11px; }
.dictionary-meanings { margin:14px 0 0; padding:0; list-style:none; display:grid; gap:10px; }.dictionary-meanings li { background:white; border-radius:10px; padding:12px 15px; font-size:16px; line-height:2; color:#352a40; border-inline-start:3px solid #d2b5e9; }
.dictionary-copy { display:block; margin:14px auto 0 0; padding:5px 0; background:transparent; color:#77558f; font:inherit; font-size:11px; cursor:pointer; border:0; }
.dictionary-secondary { border:1px solid #d9c5e9; background:#f6f0fb; color:#643b87; border-radius:12px; padding:12px 20px; font:inherit; font-size:12px; margin-top:20px; cursor:pointer; }
.dictionary-result-note { border-top:1px solid #eee7f4; padding-top:18px; margin:24px 0 0; font-size:11px; line-height:1.9; color:#807087; }
.dictionary-results:not([data-state=success]) .dictionary-result-note { display:none; }
.dictionary-results[data-state=message] { background:#fdfbff; } .dictionary-results[data-state=message] #dictionary-results-title { font-size:23px; }
.dictionary-loading { display:grid; gap:14px; }.dictionary-loading span { height:85px; border-radius:16px; background:linear-gradient(100deg,#f3edf8 20%,#fbf9fd 50%,#f3edf8 80%); background-size:200% 100%; animation:dictionary-shimmer 1.5s infinite; }
.dictionary-shell [hidden] { display:none !important; }
@keyframes dictionary-shimmer { to { background-position:-200% 0; } }
@media(prefers-reduced-motion:reduce) { .dictionary-loading span { animation:none; } }
@media(max-width:800px) { .dictionary-shell { grid-template-columns:minmax(0,1fr); gap:20px; }.dictionary-search { position:static; }.dictionary-shell h2 { font-size:22px; }.dictionary-shell .panel { padding:22px; }.dictionary-results { min-height:280px; }.dictionary-entry { padding:15px; }#dictionary-results-title { font-size:28px; }.dictionary-entry h3 { font-size:20px; } }
.dictionary-sentences { border-top:1px solid #e9e0f2; margin-top:28px; padding-top:22px; }
.dictionary-sentences h3 { font-size:17px; color:#4f2d71; margin:0 0 16px; }
.dictionary-sentences ul { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.dictionary-sentences li { border-inline-start:3px solid #b797d0; border-radius:12px; background:#f8f4fc; padding:16px 20px; }
.dictionary-sentences p { margin:0; font-size:17px; line-height:1.9; }
.dictionary-sentences .dictionary-sentence-translation { margin-top:9px; font-size:14px; color:#756080; }

/* Personal learning space: mobile first. */
.page-my-learning { background:#f8f7fc; }
.page-my-learning .page-masthead>.wrap { padding-block:16px 22px; }
.page-my-learning .page-masthead .eyebrow { display:none; }
.page-my-learning .page-masthead h1 { font-size:26px; }
.page-my-learning .interior { padding-block:24px 48px; }
.learning-dashboard { max-width:1120px; margin:auto; color:#322549; }
.learning-dashboard * { min-width:0; }
.learning-welcome { display:flex; flex-wrap:wrap; align-items:center; gap:16px; padding:24px; border:1px solid #e6dbf6; border-radius:24px; background:linear-gradient(125deg,#eee5fc,#fff 85%); }
.learning-avatar { display:grid; place-items:center; flex:0 0 56px; height:56px; border-radius:19px; background:#6736b4; color:#fff; font-size:26px; }
.learning-welcome>div { flex:1; }
.learning-eyebrow { margin:0 0 6px; color:#79618f; font-size:11px; }
.learning-welcome h2 { font-size:22px; line-height:1.7; margin:0; overflow-wrap:anywhere; }
.learning-welcome>div>p:last-child { margin:8px 0 0; font-size:13px; color:#71617e; line-height:1.9; }
.learning-welcome>.button { width:100%; justify-content:center; min-height:48px; }
.learning-shortcuts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:16px 0 24px; }
.learning-shortcuts>a { display:flex; flex-direction:column; align-items:center; gap:5px; padding:16px 6px; background:#fff; border:1px solid #e9e2f1; border-radius:18px; color:#655277; font-size:12px; text-decoration:none; }
.learning-shortcuts>a>span:first-child { font-size:24px; }
.learning-shortcuts strong { font-size:23px; color:#4c2785; line-height:1.5; }
.learning-columns,.learning-activities { display:grid; gap:20px; align-items:start; }
.learning-card { background:#fff; border:1px solid #e8e1f0; border-radius:22px; padding:20px; scroll-margin-top:20px; overflow-wrap:anywhere; box-shadow:0 6px 24px #45217104; }
.learning-card-header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:18px; border-bottom:1px solid #f0ebf6; }
.learning-card-header h2 { font-size:18px; line-height:1.7; margin:0; }
.learning-card-header>span { font-size:26px; }
.learning-item { padding:20px 0; border-bottom:1px solid #f0ebf6; }
.learning-item:last-of-type { border-bottom:0; padding-bottom:0; }
.learning-item-top { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.learning-item h3 { font-size:15px; margin:0; line-height:1.9; }.learning-item h3 a { color:#3e2b56; text-decoration:none; }
.learning-status { display:inline-block; padding:5px 10px; font-size:11px; border-radius:10px; background:#f2edf9; color:#65428a; }
.learning-item>p { font-size:13px; color:#756681; margin:10px 0; }
.learning-detail { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; color:#6632ac; font-size:13px; font-weight:600; text-decoration:none; }
.learning-empty { padding:28px 0 8px; text-align:center; }.learning-empty>span { font-size:40px; }
.learning-empty h3 { font-size:16px; margin:12px 0 8px; }.learning-empty p { font-size:13px; line-height:2; color:#7a6d86; max-width:360px; margin:0 auto 18px; }
.learning-empty .button { width:100%; justify-content:center; min-height:48px; font-size:13px; }.learning-empty.compact { padding-top:12px; }.learning-empty.compact .learning-detail { justify-content:center; }
.learning-profile { margin:0; }.learning-profile>div { padding:16px 0; border-bottom:1px solid #f0ebf6; }.learning-profile dt { color:#82738c; font-size:11px; margin-bottom:6px; }.learning-profile dd { margin:0; font-size:14px; overflow-wrap:anywhere; }
.learning-account-link { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 0; min-height:48px; font-size:13px; color:#5e3c82; text-decoration:none; border-bottom:1px solid #f0ebf6; }
.learning-logout { margin-top:18px; }.learning-logout button { display:flex; justify-content:space-between; gap:12px; width:100%; min-height:46px; padding:12px 14px; border:1px solid #f0dce1; border-radius:12px; color:#a34660; background:#fff8fa; font:inherit; font-size:13px; cursor:pointer; }
.learning-live { margin:14px 0; padding:16px; border-radius:14px; background:#eef8f3; color:#32634b; }.learning-live p { margin:0 0 12px; font-size:12px; line-height:2; }.learning-live p span { display:block; }.learning-live .button { width:100%; justify-content:center; }
.learning-dashboard :is(a,button):focus-visible { outline:3px solid #936ac6; outline-offset:4px; }
@media(min-width:760px) { .learning-welcome { padding:30px; }.learning-welcome>.button { width:auto; }.learning-welcome h2 { font-size:26px; }.learning-shortcuts { gap:16px; }.learning-shortcuts>a { flex-direction:row; justify-content:center; gap:14px; padding:20px; }.learning-columns { grid-template-columns:minmax(0,1fr) 300px; gap:24px; }.learning-card { padding:24px; }.learning-empty .button { width:auto; }.learning-account { position:sticky; top:24px; } }

.profile-editor { max-width:1000px; }.profile-back { justify-content:start; margin-bottom:14px; }.profile-grid { display:grid; gap:20px; align-items:start; }
.profile-form { display:flex; flex-direction:column; gap:10px; padding-top:22px; }.profile-form>label { font-size:13px; font-weight:600; }
.profile-form input:not([type=checkbox]):not([type=file]) { width:100%; min-height:50px; border:1px solid #dcd2e7; border-radius:12px; padding:12px 14px; font:inherit; font-size:16px; background:#fff; color:#322549; box-sizing:border-box; }
.profile-form input[aria-invalid=true] { border-color:#b74460; }.profile-form input[type=password],.profile-form input[autocomplete$=password] { direction:ltr; text-align:left; }
.profile-avatar-editor { display:flex; align-items:center; gap:18px; }.profile-avatar-preview { width:84px; height:84px; flex-shrink:0; display:grid; place-items:center; border-radius:26px; overflow:hidden; background:#eee5fa; color:#6839a5; font-size:34px; }.profile-avatar-preview img { width:100%; height:100%; object-fit:cover; }
.profile-editor [hidden] { display:none!important; }.profile-upload { display:inline-flex; align-items:center; min-height:44px; padding:8px 14px; border:1px solid #dfd0ee; border-radius:12px; color:#63329f; font-size:13px; cursor:pointer; }
.profile-avatar-editor p,.profile-hint { color:#796a85; font-size:12px; line-height:1.9; margin:0; }.profile-avatar-editor p { margin-top:7px; }.profile-form input[type=file] { font:inherit; font-size:12px; width:100%; padding:8px 0; }
.profile-remove { display:flex; align-items:center; gap:10px; min-height:44px; font-weight:400!important; }.profile-remove input { width:18px; height:18px; accent-color:#6736b4; }
.profile-field-error { margin:0; font-size:12px; color:#aa3453; line-height:1.9; }.profile-field-error:empty { display:none; }.profile-save { width:100%; min-height:50px; justify-content:center; margin-top:12px; }
.profile-password-field { display:flex; border:1px solid #dcd2e7; border-radius:12px; overflow:hidden; }.profile-password-field input { border:0!important; border-radius:0!important; }.profile-password-field button { padding:0 14px; min-width:65px; background:#f6f1fb; border:0; color:#663b91; font:inherit; font-size:12px; cursor:pointer; }
.learning-avatar img { width:100%; height:100%; object-fit:cover; border-radius:inherit; }
@media(min-width:760px) { .profile-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; } }

/* Clear, touch-friendly primary navigation. */
header.wrap.site-header { display:grid; grid-template-columns:1fr auto; gap:10px 16px; min-height:0; padding-block:10px 14px; padding-inline:20px; background:#fff; }
.site-header .brand { grid-column:1; grid-row:1; justify-self:start; }
.site-header .brand-logo { width:100px; height:64px; }
.site-header .site-account-button { grid-column:2; grid-row:1; min-height:44px; gap:9px; padding:11px 15px; font-size:12px; white-space:nowrap; border:1px solid #6332b1; box-shadow:0 4px 12px #6332b114; }
.site-header .site-account-arrow { display:none; }
.site-header nav.site-navigation { grid-column:1/-1; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; width:100%; padding:7px; border:1px solid #eee7f5; border-radius:20px; background:#faf8fd; }
.site-header .site-navigation a { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-height:64px; padding:8px 3px; border:1px solid transparent; border-radius:13px; font-size:11px; font-weight:500; line-height:1.6; white-space:nowrap; color:#635475; transition:background .15s,color .15s; }
.site-header .site-navigation .site-nav-emoji { font-size:20px; line-height:1.3; }
.site-header .site-navigation a:hover { background:#f0e8fa; color:#532797; }
.site-header .site-navigation a[aria-current=page] { color:#56269e; background:#fff; border-color:#e4d6f2; box-shadow:0 3px 8px #5930b60a; font-weight:700; }
.site-header .site-navigation a[aria-current=page]:after { display:none; }
.site-header :is(a,button):focus-visible { outline:3px solid #9b74cf; outline-offset:3px; }
@media(min-width:760px) {
 header.wrap.site-header { grid-template-columns:auto minmax(0,1fr) auto; gap:20px; padding:16px 28px; }
 .site-header .brand-logo { width:112px; height:72px; }
 .site-header nav.site-navigation { grid-column:2; grid-row:1; display:flex; flex-wrap:wrap; justify-content:center; width:auto; gap:4px; border:0; background:transparent; padding:0; }
 .site-header .site-navigation a { min-height:48px; padding:8px 10px; font-size:12px; gap:6px; }
 .site-header .site-navigation .site-nav-emoji { font-size:18px; }
 .site-header .site-account-button { grid-column:3; }
}
@media(min-width:1180px) {
 .site-header .site-navigation a { flex-direction:row; padding:10px 12px; gap:7px; }
 .site-header nav.site-navigation { border:1px solid #eee7f5; border-radius:20px; background:#faf8fd; padding:5px; }
 .site-header .site-account-arrow { display:inline; }
}
@media(prefers-reduced-motion:reduce) { .site-header .site-navigation a { transition:none; } }

/* Compact mobile header with an on-demand navigation panel. */
@media(max-width:759px) {
 header.wrap.site-header { position:relative; grid-template-columns:minmax(72px,1fr) auto 64px; gap:0 10px; padding:8px 16px; border-bottom:1px solid #f0eaf6; }
 .site-header .brand-logo { width:86px; height:58px; }
 .site-header .site-account-button { grid-column:2; padding:10px 12px; font-size:11px; gap:7px; min-height:44px; }
 .site-header .site-menu { grid-column:1/-1; grid-row:2; min-width:0; }
 .site-menu-toggle { position:absolute; inset-inline-end:16px; top:15px; display:flex; align-items:center; justify-content:center; gap:6px; width:64px; min-height:44px; list-style:none; cursor:pointer; border:1px solid #e8dff1; border-radius:14px; background:#faf7fe; color:#583487; font-size:12px; }
 .site-menu-toggle::-webkit-details-marker { display:none; }
 .site-menu-toggle::marker { content:''; }
 .site-menu-symbol { font-size:19px; line-height:1; }
 .site-menu[open] .site-menu-toggle { background:#eee5f9; border-color:#ceb7e8; }
 .site-header .site-menu:not([open]) nav.site-navigation { display:none; }
 .site-header .site-menu[open] nav.site-navigation { position:absolute; z-index:100; top:calc(100% + 8px); inset-inline:12px; width:auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; padding:8px; margin:0; border-radius:16px; background:#fff; box-shadow:0 16px 40px #35205126; max-height:calc(100dvh - 100px); overflow-y:auto; overscroll-behavior:contain; }
 .site-header .site-navigation a { flex-direction:row; justify-content:start; gap:10px; min-height:48px; padding:10px 12px; font-size:12px; }
 .site-header .site-navigation .site-nav-emoji { font-size:19px; }
 .site-menu-toggle:focus-visible { outline:3px solid #9b74cf; outline-offset:3px; }
}
@media(min-width:760px) {
 .site-header .site-menu { display:contents; }
 .site-header .site-menu-toggle { display:none; }
 .site-header .site-menu>nav.site-navigation { display:flex; }
}