@font-face{font-family:Onest;font-style:normal;font-weight:100 900;font-display:swap;src:url('/_optimized/onest-cyrillic-c3f4223046fb9623a0e9.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Onest;font-style:normal;font-weight:100 900;font-display:swap;src:url('/_optimized/onest-latin-cc61cbd632bb677cd55f.woff2') format('woff2')}
:root {
  --editorial-radius: 24px;
  --editorial-glass: rgba(61, 65, 60, .45);
  --editorial-subtle: #626760;
  --editorial-orange: #dc713c;
  --editorial-text-width: 720px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 140px; }
body { margin: 0; background: var(--school-page-bg); color: var(--school-ink); font-family: var(--school-font); -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
a { color: inherit; text-decoration: none; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid var(--school-link); outline-offset: 5px; }
[hidden] { display: none !important; }
.editorial-main { padding-bottom: 36px; }
.editorial-shell { width: var(--school-content-width); max-width: 100%; margin: 0 auto; }
.editorial-eyebrow { display: flex; align-items: center; font-size: 18px; font-weight: 500; line-height: 1.5; }
.editorial-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.editorial-masthead { display: grid; grid-template-columns: 1.25fr 1fr; gap: 0 48px; padding: 40px 0 28px; }
.editorial-masthead > .editorial-eyebrow, .editorial-masthead-bottom { grid-column: 1 / -1; }
.editorial-masthead h1 { margin: 24px 0; font-size: clamp(42px, 4vw, 58px); font-weight: 500; line-height: 1.08; letter-spacing: -.045em; text-wrap: balance; }
.editorial-masthead > p { align-self: center; margin: 0; font-size: 20px; line-height: 1.6; color: var(--editorial-subtle); }
.editorial-masthead-bottom { display: flex; justify-content: space-between; gap: 24px; margin-top: 24px; font-size: 18px; line-height: 1.5; color: var(--editorial-subtle); }





.guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; list-style: none; padding: 0; margin: 0; }
.guide-card { min-width: 0; }
.editorial-card { position: relative; display: block; height: 520px; overflow: hidden; border-radius: var(--editorial-radius); background: #d6d9d5; isolation: isolate; }
.editorial-card-photo { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.editorial-glass { position: absolute; z-index: 1; inset: auto 16px 16px; display: flex; flex-direction: column; gap: 14px; height: auto; padding: 24px; border: 1px solid #ffffff3d; border-radius: 16px; background: var(--editorial-glass); color: #fff; backdrop-filter: blur(18px) saturate(110%); -webkit-backdrop-filter: blur(18px) saturate(110%); overflow: hidden; }
.editorial-card-meta { display: flex; font-size: 18px; font-weight: 500; line-height: 1.5; }
.editorial-glass h2 { margin: 0; font-size: 28px; font-weight: 500; line-height: 1.2; letter-spacing: -.03em; text-wrap: balance; }
.editorial-glass p { margin: 0; font-size: 20px; line-height: 1.5; }
.guide-grid:not(.is-filtered) > .is-featured { grid-column: 1 / -1; }
.is-featured .editorial-card { height: auto; aspect-ratio: 780 / 484; }
.is-featured .editorial-glass { inset: auto 20px 20px; gap: 16px; height: auto; padding: 28px; border-radius: 18px; }
.is-featured .editorial-glass h2 { max-width: 900px; font-size: 40px; line-height: 1.2; }
.is-featured .editorial-card-photo { object-position: center 40%; }
.is-featured .editorial-glass p { max-width: 1050px; }
.guide-grid.is-filtered .is-featured .editorial-card { height: 520px; aspect-ratio: auto; }
.guide-grid.is-filtered .is-featured .editorial-glass { inset: auto 16px 16px; gap: 14px; height: auto; padding: 24px; border-radius: 16px; }
.guide-grid.is-filtered .is-featured .editorial-glass h2 { font-size: 28px; }
.guide-grid.is-filtered .is-featured .editorial-glass p { display: none; }
.editorial-endnote { max-width: 760px; margin: 100px auto 72px; text-align: center; }
.editorial-endnote h2 { margin: 24px 0; font-size: 44px; font-weight: 500; line-height: 1.15; letter-spacing: -.04em; }
.editorial-endnote p { max-width: 580px; margin: 0 auto 28px; font-size: 20px; line-height: 1.6; color: var(--editorial-subtle); }
.editorial-button {max-width:100%; text-align:center; line-height:1.4; transition:background-color .15s ease, box-shadow .15s ease, transform .15s ease; display: inline-flex; justify-content: center; align-items: center; min-height: 52px; border: 0; border-radius: 14px; padding: 14px 24px; background:var(--school-ink); color: #fff; font-size: 18px; font-weight: 500;}
.editorial-button:active {transform:translateY(1px);box-shadow:none;}
.editorial-button-secondary {background:#e4e5e7;color:var(--school-ink);border:0;box-shadow:none;}
.reader-content a.editorial-button { color:#fff; text-decoration:none; }
.about-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.about-story { max-width:920px; margin:24px auto 0; }
.about-story .reader-content { font-size:20px; }

.reader-breadcrumbs { display: flex; gap: 12px; padding-top: 32px; font-size: 18px; line-height: 1.5; color: var(--editorial-subtle); }
.reader-breadcrumbs a:hover { color: var(--editorial-orange); }
.reader-header { max-width: 1100px; padding: 40px 0; }
.reader-header .editorial-eyebrow { flex-wrap: wrap; gap: 10px; }
.reader-header h1 { margin: 24px 0; font-size: clamp(38px, 4vw, 58px); font-weight: 500; line-height: 1.12; letter-spacing: -.04em; text-wrap: balance; }
.reader-deck { max-width: 920px; margin: 0; font-size: 22px; line-height: 1.6; color: var(--editorial-subtle); }
.reader-meta-divider { padding: 0 4px; }
.reader-cover { position: relative; aspect-ratio: 16 / 9; margin: 0; border-radius: var(--editorial-radius); overflow: hidden; background: #d6d9d5; }
.reader-cover > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.reader-cover figcaption { position: absolute; inset: auto 0 0; display: flex; justify-content: space-between; gap: 24px; padding: 50px 28px 24px; background: linear-gradient(transparent, #0008); color: #fff; font-size: 18px; line-height: 1.5; }
.reader-byline { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 28px 0 40px; }
.reader-author { display: flex; align-items: center; gap: 14px; font-size: 18px; line-height: 1.5; }
.reader-author img { border-radius: 50%; object-fit: cover; }
.reader-author small, .reader-publisher small { display: block; margin-top: 4px; color: var(--editorial-subtle); font-size: 18px; }
.reader-publisher { font-size: 18px; font-weight: 500; }
.reader-byline-actions { display: flex; align-items: center; gap: 24px; font-size: 18px; color: var(--editorial-subtle); }
.reader-byline-actions button { border: 0; border-radius: 10px; padding: 12px 16px; background: var(--school-card-bg); color: var(--school-ink); font-size: 18px; }
.reader-layout { display: grid; grid-template-columns: 260px minmax(0, var(--editorial-text-width)); gap: clamp(32px, 4vw, 64px); justify-content: center; align-items: start; margin-top: 24px; }
.reader-sidebar { position: sticky; top: 140px; min-width: 0; }
.reader-toc { padding: 24px; border-radius: 18px; background: var(--school-card-bg); }
.reader-toc summary { display: block; list-style: none; font-size: 20px; font-weight: 500; line-height: 1.4; cursor: pointer; }
.reader-toc summary::-webkit-details-marker { display: none; }
.reader-toc nav { display: flex; flex-direction: column; gap: 16px; max-height: 55vh; margin-top: 24px; overflow: auto; scrollbar-width: thin; }
.reader-toc a { border-left: 2px solid transparent; padding-left: 12px; color: var(--editorial-subtle); font-size: 18px; line-height: 1.5; }
.reader-toc a:hover, .reader-toc a[aria-current] { border-color: var(--editorial-orange); color: var(--school-ink); }
.reader-sidebar-note { padding: 28px 0; font-size: 18px; line-height: 1.5; }
.reader-sidebar-note .editorial-button { width:100%; padding-inline:16px; white-space:nowrap; }
.reader-sidebar-note p { margin: 0 0 20px; color: var(--editorial-subtle); }
.reader-content { min-width: 0; font-size: 20px; line-height: 1.8; letter-spacing: -.012em; overflow-wrap: anywhere; }
.reader-content > p { margin: 0 0 26px; }
.reader-content h2 { margin: 56px 0 24px; font-size: 32px; font-weight: 500; line-height: 1.25; letter-spacing: -.03em; text-wrap: balance; }
.reader-content h2:first-child { margin-top: 0; }
.reader-content h3 { margin: 36px 0 20px; font-size: 26px; font-weight: 500; line-height: 1.3; letter-spacing: -.025em; }
.reader-content strong { font-weight: 600; }
.reader-content a { color: var(--school-ink); text-decoration: underline; text-decoration-color: #e8753b88; text-underline-offset: 4px; }
.reader-content ul, .reader-content ol { margin: 24px 0 32px; padding-left: 26px; }
.reader-content li { margin-bottom: 14px; padding-left: 6px; }
.reader-content li::marker { color: var(--editorial-orange); }
.reader-opening::first-letter { float: left; margin: .08em .15em 0 0; font-size: 5.4em; font-weight: 500; line-height: .78; letter-spacing: -.075em; color: var(--school-ink); }
.reader-figure { margin: 48px 0; }
.reader-figure img { display: block; width: 100%; height: auto; max-height: 530px; border-radius: 20px; object-fit: cover; }
.reader-figure-wide { width: calc(100% + 48px); margin-left: -24px; }
.reader-content blockquote { margin: 40px 0; border-left: 3px solid var(--editorial-orange); padding: 4px 0 4px 28px; font-size: 26px; line-height: 1.6; letter-spacing: -.025em; }
.reader-table { max-width: 100%; margin: 32px 0; border-radius: 16px; overflow: auto; background: var(--school-card-bg); }
.reader-table table { width: 100%; min-width: 500px; border-collapse: collapse; font-size: 18px; line-height: 1.6; }
.reader-table th, .reader-table td { border-bottom: 1px solid var(--school-page-bg); padding: 16px; text-align: left; }
.reader-table th { background: #e9ebe7; font-weight: 500; }
.reader-related { margin: 96px 0 64px; }
.editorial-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 28px; margin-bottom: 32px; }
.editorial-section-heading h2 { margin: 16px 0 0; font-size: 38px; font-weight: 500; line-height: 1.2; letter-spacing: -.035em; }
.editorial-section-heading > a { font-size: 18px; white-space: nowrap; }
.related-grid, .about-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.related-grid .editorial-card, .about-cards .editorial-card { height: 500px; }
.related-grid .editorial-glass, .about-cards .editorial-glass { height: auto; padding: 22px; }
.related-grid .editorial-glass h2, .about-cards .editorial-glass h2 { font-size: 24px; }
.about-intro { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 64px; padding: 64px 0 80px; }
.about-intro h1 { margin: 28px 0; font-size: 72px; font-weight: 500; line-height: 1.08; letter-spacing: -.045em; }
.about-intro p { font-size: 20px; line-height: 1.7; color: var(--editorial-subtle); }
.about-intro-image { position: relative; height: 620px; margin: 0; border-radius: var(--editorial-radius); overflow: hidden; }
.about-intro-image > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 35% center; }
.about-intro-image .editorial-glass { height: auto; padding: 24px; }
.about-intro-image h2 { font-size: 32px; }
.editorial-text-link { display: inline-flex; margin-top: 16px; padding: 12px 0; font-size: 20px; font-weight: 500; }
.about-founder { display: flex; align-items: center; gap: 28px; margin: 56px 0 0; border-radius: 22px; padding: 28px; background: var(--school-card-bg); }
.about-founder > img { width: 120px; height: 120px; flex: 0 0 120px; border-radius: 50%; object-fit: cover; object-position: center 30%; filter: grayscale(1); }
.about-founder h2 { margin: 0 0 12px; font-size: 26px; }
.about-founder .editorial-eyebrow { font-size: 18px; }
.about-editorial .reader-content > ol { list-style: none; counter-reset: about-tip; padding: 0; }
.about-editorial .reader-content > ol > li { display: grid; grid-template-columns: 30px 1fr; gap: 16px; counter-increment: about-tip; margin: 28px 0; padding: 0; }
.about-editorial .reader-content > ol > li::before { content: counter(about-tip); padding-top: 4px; font-size: 18px; color: var(--editorial-orange); }
.about-editorial .reader-content > ol > li p { margin: 0; }
.editorial-quiz { max-width: 920px; margin: 80px auto 0; border-radius: var(--editorial-radius); padding: 48px; background: var(--school-card-bg); }
.editorial-quiz > h2 { margin: 20px 0; font-size: 36px; font-weight: 500; line-height: 1.25; letter-spacing: -.03em; }
.editorial-quiz > p { max-width: 600px; margin: 0 0 28px; font-size: 20px; line-height: 1.6; color: var(--editorial-subtle); }
.editorial-quiz fieldset { margin: 24px 0; border: 0; padding: 0; }
.editorial-quiz legend { margin-bottom: 24px; font-size: 30px; line-height: 1.5; }
.editorial-quiz label { display: flex; align-items: center; gap: 14px; margin: 8px 0; border-radius: 12px; padding: 14px 16px; background: var(--school-page-bg); font-size: 20px; cursor: pointer; }
.editorial-quiz input { width: 18px; height: 18px; accent-color: var(--editorial-orange); }
.editorial-quiz label:has(input:checked) { background: #f7e9dd; }
.editorial-quiz label.is-correct { background: #dfecdf; }
.quiz-progress { font-size: 18px; color: var(--editorial-subtle); }
.quiz-feedback { min-height: 28px; font-size: 18px; line-height: 1.6; }
.quiz-result { margin: 24px 0; font-size: 26px; line-height: 1.5; }
.quiz-result small { display: block; margin-top: 16px; font-size: 18px; color: var(--editorial-subtle); }
@media (hover: hover) {
  .editorial-card:hover .editorial-card-photo { transform: scale(1.025); }
  .editorial-card:hover .editorial-glass { background: rgba(61, 65, 60, .54); }
}
@media (max-width: 1023px) {
  .editorial-masthead { display: block; padding-top: 48px; }
  .editorial-masthead > p { font-size: 20px; }
  .guide-grid, .related-grid, .about-cards { grid-template-columns: 1fr; }
  .is-featured .editorial-card { min-height: 580px; aspect-ratio: auto; }
  .is-featured .editorial-glass h2 { font-size: 34px; }
  .reader-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .reader-sidebar { position: static; }
  .reader-toc nav { display: grid; grid-template-columns: 1fr 1fr; max-height: none; gap: 16px 24px; }
  .reader-sidebar-note { display: none; }
  .reader-figure-wide { width: 100%; margin-left: 0; }
  .about-intro { align-items: start; gap: 32px; padding: 48px 0; }
  .about-intro h1 { font-size: 52px; }
  .about-intro p { font-size: 18px; }
  .about-intro-image { height: 600px; }
  .about-intro-image h2 { font-size: 28px; }
  .editorial-quiz { padding: 32px; }
}
@media (max-width: 767px) {
  html { scroll-padding-top: var(--school-public-header-clearance,80px); }
  .editorial-masthead { padding: var(--school-public-header-clearance,80px) 0 28px; }
  .editorial-masthead h1 { margin: 24px 0; font-size: 40px; }
  .editorial-masthead > p { font-size: 18px; line-height: 1.65; }
  .editorial-masthead-bottom { display: block; margin-top: 24px; font-size: 18px; }
  .editorial-masthead-bottom > span { display: block; margin-top: 12px; }
  
  
  .guide-grid { gap: 24px; }
  .editorial-card, .related-grid .editorial-card, .about-cards .editorial-card { height: 540px; border-radius: 22px; }
  .editorial-glass, .related-grid .editorial-glass, .about-cards .editorial-glass { inset: auto 12px 12px; height: auto; padding: 20px; border-radius: 16px; }
  .editorial-glass h2, .related-grid .editorial-glass h2, .about-cards .editorial-glass h2 { font-size: 24px; }
  .is-featured .editorial-card { height: 620px; min-height: 0; }
  .is-featured .editorial-glass { inset: auto 12px 12px; height: auto; gap: 14px; padding: 20px; border-radius: 16px; }
  .is-featured .editorial-glass h2 { font-size: 30px; }
  .is-featured .editorial-glass p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-size: 18px; }
  .guide-grid.is-filtered .is-featured .editorial-card { height: 540px; }
  .guide-grid.is-filtered .is-featured .editorial-glass { inset: auto 12px 12px; height: auto; padding: 20px; }
  .guide-grid.is-filtered .is-featured .editorial-glass h2 { font-size: 24px; }
  .editorial-endnote { margin: 72px auto 56px; }
  .editorial-endnote h2 { font-size: 36px; }
  .editorial-endnote p { font-size: 18px; }
  .reader-breadcrumbs { padding-top: var(--school-public-header-clearance,80px); font-size: 18px; }
  .reader-header { padding: 32px 0; }
  .reader-header h1 { margin: 22px 0; font-size: 38px; }
  .reader-deck { font-size: 18px; line-height: 1.65; }
  .reader-cover { aspect-ratio: 4 / 3; border-radius: 22px; }
  .reader-cover figcaption { padding: 40px 18px 18px; }
  .reader-cover figcaption > span:last-child { display: none; }
  .reader-byline { align-items: start; flex-wrap: wrap; gap: 24px; padding: 24px 0 16px; }
  .reader-byline-actions { width: 100%; flex-wrap: wrap; justify-content: space-between; gap: 16px; }
  .reader-byline-actions button { padding: 12px 14px; }
  .reader-toc { padding: 22px; }
  .reader-toc nav { grid-template-columns: 1fr; max-height: 300px; overflow: auto; }
  .reader-content, .about-story .reader-content { font-size: 18px; line-height: 1.8; }
  .reader-content h2 { margin-top: 44px; font-size: 28px; }
  .reader-content h3 { font-size: 24px; }
  .reader-opening::first-letter { font-size: 4.9em; }
  .reader-figure { margin: 36px 0; }
  .reader-figure img { max-height: 400px; border-radius: 16px; }
  .reader-content blockquote { padding-left: 22px; font-size: 24px; }
  .reader-related { margin: 64px 0 40px; }
  .editorial-section-heading { flex-direction: column; align-items: start; gap: 24px; }
  .editorial-section-heading h2 { font-size: 32px; }
  .about-intro { grid-template-columns: 1fr; gap: 36px; padding: 132px 0 48px; }
  .about-intro h1 { margin: 26px 0; font-size: 56px; }
  .about-intro p { font-size: 18px; line-height: 1.75; }
  .about-intro-image { height: 480px; border-radius: 22px; }
  .about-intro-image .editorial-glass { height: auto; padding: 20px; }
  .about-intro-image h2 { font-size: 28px; }
  .about-founder { flex-wrap: wrap; gap: 20px; padding: 24px; }
  .about-founder h2 { font-size: 26px; }
  .editorial-quiz { margin-top: 56px; padding: 28px 22px; }
  .editorial-quiz > h2 { font-size: 30px; }
  .editorial-quiz > p, .editorial-quiz label { font-size: 18px; }
  .editorial-quiz legend { font-size: 28px; }
}
@media (max-width: 359px) {
  .editorial-masthead h1 { font-size: 35px; }
  .reader-header h1 { font-size: 34px; }
  .is-featured .editorial-card { height: 660px; }
  .is-featured .editorial-glass h2 { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .editorial-card-photo, .editorial-button { transition: none; }
}

@media(min-width:768px) and (max-width:900px){.editorial-masthead{padding-top:var(--school-public-header-clearance,80px)}.reader-breadcrumbs{padding-top:var(--school-public-header-clearance,80px)}}

.practice-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px;margin:28px 0}
.practice-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:28px 24px;min-height:240px;box-sizing:border-box;border-radius:24px;background:var(--school-card-bg);text-align:center;break-inside:avoid}
.practice-card>span[lang]{font-family:"Noto Sans SC",sans-serif;font-size:64px;line-height:1.3}
.practice-card>small{font-size:18px;line-height:1.5}
.practice-answer{margin:16px 0;padding:20px;border-radius:18px;background:var(--school-card-bg);break-inside:avoid}
.practice-answer>summary{cursor:pointer;font-weight:500;line-height:1.5}
.practice-answer>p{margin:16px 0 0}
.practice-answer [lang=zh-Hans]{font-size:28px}
.practice-dialogue{padding:24px;border-radius:20px;background:var(--school-card-bg);margin:28px 0}
.practice-dialogue p{margin:0 0 18px}
.practice-dialogue p:last-child{margin-bottom:0}
.reader-updated{color:var(--school-muted)}
@media print{
 .school-header,.school-footer,.reader-sidebar,.reader-cover,.reader-byline-actions,.reader-related,.school-analytics-banner{display:none!important}
 .reader-layout,.reader-content,.editorial-shell{display:block!important;width:auto!important;max-width:none!important;margin:0!important;padding:0!important;color:#000!important;background:#fff!important}
 .practice-cards{grid-template-columns:repeat(3,1fr)}
 .practice-card{border:1px dashed #777;background:#fff!important;color:#000!important}
}

/* UI icons are the supplied Hugeicons symbols; no native disclosure glyphs. */
.editorial-icon{display:inline-block;width:24px;height:24px;vertical-align:middle;flex:none;color:currentColor}
.practice-answer>summary,.reader-toc>summary{display:flex;align-items:center;gap:12px;list-style:none}
.practice-answer>summary::-webkit-details-marker,.reader-toc>summary::-webkit-details-marker{display:none}
.practice-answer>summary::marker,.reader-toc>summary::marker{content:""}
.practice-chevron{transition:transform .2s}
.practice-answer[open]>summary .practice-chevron,.reader-toc[open]>summary .practice-chevron{transform:rotate(90deg)}
.about-principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:32px 0}
.about-principles>section{padding:28px;border-radius:24px;background:var(--school-card-bg)}
.about-principles h3{margin:24px 0 16px;font-size:24px}
.about-principles p{margin:0}
@media(max-width:767px){.about-principles{grid-template-columns:1fr}.about-intro h1{font-size:42px}}
.quiz-feedback[data-result=correct]{color:var(--answer-success)}
.quiz-feedback[data-result=wrong]{color:var(--answer-error)}

.editorial-card-meta{justify-content:space-between;gap:16px}

/* Self-contained native dialogs shared by the homepage, guide and articles. */
dialog,dialog *{box-sizing:border-box;font-family:Onest,Arial,sans-serif}dialog button,dialog input,dialog select{font:inherit}dialog button{cursor:pointer}dialog a{color:inherit}dialog .button{display:inline-flex;align-items:center;justify-content:center;gap:14px;border:0;border-radius:10px;background:#1a1a1a;color:#fff;padding:12px 20px;font-size:20px;cursor:pointer}
.modal-open{
  overflow:hidden
}
dialog{
  border:0;
  color:#1a1a1a;
  padding:0;
  max-height:calc(100dvh - 40px);
  overflow:auto;
  overscroll-behavior:contain
}
dialog::backdrop{
  background:#0009
}
/* Keep a block-level sticky control: the shared icon treatment uses inline-grid,
   which makes auto margins ineffective and sends this button to the left. */
html body dialog>button.dialog-close{
  position:sticky;
  top:16px;
  margin:16px 16px -60px auto;
  display:grid;
  z-index:1;
  width:44px;
  height:44px;
  font-size:36px;
  line-height:1;
  border:0;
  background:transparent;
  color:#1a1a1a
}
.callback-dialog{
  width:560px;
  max-width:calc(100% - 40px);
  border-radius:30px
}
.callback-image{
  display:block;
  width:100%;
  height:auto
}
.callback-content{
  padding:40px 45px 30px;
  text-align:center
}
.callback-content h2{
  font-size:36px;
  line-height:1.23;
  margin:0 0 16px;
  font-weight:600
}
.callback-content>p{
  font-size:16px;
  line-height:1.55;
  margin:0 0 24px
}
.callback-content form{
  display:flex;
  flex-direction:column;
  gap:24px
}
.callback-content input{
  width:100%;
  min-width:0;
  background:#f0f0f0;
  border:0;
  border-radius:20px;
  color:#222;
  padding:0 20px;
  height:60px;
  font-size:16px
}
.phone-field{
  display:flex;
  background:#f0f0f0;
  border-radius:20px;
  align-items:center
}
.phone-field select{
  border:0;
  background:transparent;
  width:85px;
  max-width:30%;
  padding-left:12px;
  font-size:14px
}
.phone-field input{
  padding-left:0
}
.callback-content .button{
  height:60px;
  font-size:20px
}
.callback-content .form-policy{
  color:#888;
  font-size:14px;
  margin:20px 0 0
}
.form-policy a{
  text-decoration:underline
}
.form-status{
  padding:20px;
  background:#e1f2e7;
  border-radius:16px;
  color:#163d24;
  font-size:16px;
  line-height:1.5
}
.license-dialog{
  width:900px;
  max-width:calc(100% - 40px);
  border-radius:20px
}
.license-dialog iframe{
  display:block;
  border:0;
  width:100%;
  height:80dvh
}
.notice-dialog{
  width:440px;
  max-width:calc(100% - 40px);
  padding:32px;
  border-radius:20px;
  box-shadow:0 10px 60px #0005;
  font-size:18px;
  line-height:1.5
}
.notice-dialog h2{
  font-size:24px;
  margin:0 0 16px
}
.notice-dialog .button{
  font-size:18px;
  margin-top:20px
}

.phone-field .phone-code{
  font-size:16px;
  padding-right:4px;
  white-space:nowrap
}.phone-field select{
  width:44px;
  max-width:44px;
  padding-left:8px
}.phone-field select{
  position:absolute;
  left:0;
  top:0;
  width:44px;
  height:60px;
  opacity:0;
  cursor:pointer
}.phone-field{
  position:relative
}.country-flag{
  width:44px;
  flex:none;
  text-align:center;
  font-size:16px
}.phone-field:focus-within{
  outline:2px solid #978aff;
  outline-offset:2px
}
@media(max-width:640px){.callback-dialog{
    max-width:calc(100% - 20px);
    max-height:calc(100dvh - 20px)
  }.callback-content{
    padding:24px 20px
  }.callback-content h2{
    font-size:28px
  }.callback-content form{
    gap:20px
  }}

.callback-dialog{width:460px}.callback-content h2{font-size:32px;margin-bottom:11px}.callback-content>p{font-size:14px;margin-bottom:24px}.callback-content form{gap:25px}.callback-content{padding:40px 45px}.callback-image{margin-top:-1px}.callback-content input,.phone-field{background:var(--ds-field-bg,#fff)}
.callback-dialog{background:var(--school-card-bg,#f5f5f5)}
.callback-content input,.phone-field{height:var(--ds-field-height);border:var(--ds-field-border-width) solid var(--ds-field-border);border-radius:var(--ds-field-radius);background:var(--ds-field-bg);color:var(--ds-field-text);font-size:14px;outline:0;box-shadow:none;transition:background-color .15s,border-color .15s}
.callback-content input::placeholder{color:var(--ds-field-placeholder);opacity:1}
.callback-content input:hover,.phone-field:hover{background:var(--ds-field-bg-hover);border-color:var(--ds-field-border-hover)}
.callback-content input:focus-visible,.phone-field:focus-within{background:var(--ds-field-bg);border-color:var(--ds-field-border-focus);outline:0}
.phone-field input{flex:1;min-width:0;width:0;height:100%;border:0;padding-left:0;background:transparent}
.phone-field select{height:100%}
@media(max-width:640px){.callback-content{padding:24px 20px}.callback-content h2{font-size:28px}.callback-content form{gap:20px}.callback-content input{font-size:16px}}

/* A country is selected by its dial code, without flag imagery. */
.phone-field{padding-left:16px}
.phone-field .phone-code{position:relative;z-index:1;pointer-events:none;padding-right:10px}
.phone-field select{width:54px;max-width:54px;z-index:2}

.callback-content form{gap:7px}

.phone-field select[hidden]{display:none!important}
.phone-field .phone-code{font:400 14px/1.5 Onest,Arial,sans-serif;color:var(--ds-field-text)}
@media(max-width:640px){.phone-field .phone-code{font-size:16px}}
.phone-field .phone-code{display:block;align-self:center;height:auto;margin:0;padding-top:0;padding-bottom:0;color:var(--ds-field-placeholder);line-height:1.5}

.license-document{padding:32px;max-height:80vh;overflow:auto;background:var(--school-card-bg);color:var(--school-ink);font-family:var(--school-font)}
.license-document h2{margin:0 40px 24px 0;font-size:26px;line-height:1.3;font-weight:500}
.license-document p{font-size:18px;margin:0 0 24px}
.license-document img{display:block;width:100%;height:auto;margin:20px 0}
@media(max-width:600px){.license-document{padding:24px 16px}.license-document h2{font-size:22px}}

/* Pair the original vector contours with the dark dialog surface. */
html[data-learning-theme=dark] .callback-image{content:url("/_optimized/callback-dark-6a1f34b41a8f2d1b3f4b.svg")}