@import url("slava-approved-font-faces.css");
:root{--ss-font-slot-ui:"Noto Sans","Andika",sans-serif;--ss-font-slot-ukrainian:"Andika",sans-serif;--ss-font-slot-natural-english:"Noto Sans",sans-serif;--ss-font-slot-literal-english:"Noto Sans",sans-serif;--ss-font-slot-ipa:"Charis SIL",serif;--ss-font-slot-phonetics:"Charis SIL",serif;--ss-font-slot-storyteller:"Charis SIL",serif;--ss-font-slot-stress-display:var(--ss-font-slot-ukrainian)}
body{font-family:var(--ss-font-slot-ui)!important}
body *{font-family:inherit!important}
button,input,select,textarea{font-family:var(--ss-font-slot-ui)!important}
#big,#big *,#ssPill .ssUnit,#ssPill .ssUnit *,.uk,.uk *,[lang="uk"],[data-ss-letter-role="ukrainian"],[data-ss-text-role="ukrainian"],[data-ss-text-role="stress_display"]{font-family:var(--ss-font-slot-ukrainian)!important}
#en,#en *,.en,.en *,[data-ss-text-role="natural_english"],[data-ss-text-role="literal_english"]{font-family:var(--ss-font-slot-natural-english)!important}
[data-ss-text-role="literal_english"]{font-style:italic}
[data-ss-text-role="phonetics"],[data-ss-text-role="phonetics"] *,[data-ss-text-role="ipa"],[data-ss-text-role="ipa"] *{font-family:var(--ss-font-slot-ipa)!important}
[data-ss-text-role="storyteller"],[data-ss-text-role="storyteller"] *{font-family:var(--ss-font-slot-storyteller)!important}
[data-ss-letter-phonetics="Doulos SIL"] :is([data-ss-text-role="phonetics"],[data-ss-text-role="ipa"]),[data-ss-letter-phonetics="Doulos SIL"] :is([data-ss-text-role="phonetics"],[data-ss-text-role="ipa"]) *{font-weight:400!important;font-style:normal!important;font-synthesis:none!important}
body [data-ss-letter-accent="true"],body [data-ss-letter-accent="true"] *{font-family:"Andika",sans-serif!important}
body [data-ss-font-preview],body [data-ss-font-preview] *{font-family:var(--ss-preview-font)!important;font-synthesis:none}
#ssLetterNav{display:flex;justify-content:flex-end;gap:12px;margin:4px 0 8px;font-size:14px;line-height:1.4}
#ssLetterNav a{display:inline-flex;align-items:center;min-height:44px;padding:3px 10px;border:1px solid #8995ac80;border-radius:12px;color:inherit;text-decoration:none}
#ssLetterNav a:hover{background:#a8bdf222}
.ssApprovedFonts{border-top:1px solid #71809a66;margin-top:10px;padding-top:5px;min-width:0}
.ssApprovedFonts>summary{display:list-item!important;cursor:pointer;min-height:44px;align-content:center;font-size:14px;font-weight:700;padding:6px 4px!important;color:inherit}
.ssApprovedFonts summary:focus-visible,#ssLetterNav a:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.ssFontContent{font-size:14px;line-height:1.5;padding:6px 2px 10px;display:grid;gap:10px}
.ssFontContent label{display:grid;gap:5px;font-size:14px}
.ssFontContent select{width:100%;min-height:44px!important;border-radius:8px;padding:7px;color:inherit;background:transparent;border:1px solid #71809a;font-size:16px!important}
.ssFontContent option{background:#101a2d;color:#fff}
.ssFontContent a{color:inherit;text-decoration:underline;min-height:44px;display:flex;align-items:center}
.ssFontRestriction,.ssFontStatus{font-size:13px;line-height:1.5;margin:8px 0 0}
.ssLetterMiniPreview{font-size:22px;line-height:1.65;margin:0;overflow-wrap:anywhere}
#ssPill .ssLayerMenu{max-height:min(350px,48dvh);overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;padding-right:4px}
.ssLetterPage{--ink:#223f54;--muted:#607685;--gold:#bb890f;--line:#bfccd6;--paper:#f7fafb;--blue:#3c678d;margin:0;padding:0 24px 52px;color:var(--ink);background:#edf3f5;line-height:1.6;min-height:100vh}
.ssLetterPage *{box-sizing:border-box}
.ssLetterPage main{max-width:1150px;margin:auto}
.ssLetterTop{display:flex;gap:16px;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:14px 0}
.ssLetterPage a{color:var(--ink);text-underline-offset:5px}
.ssLetterTop a{padding:9px 0;min-height:44px;font-size:14px}
.ssLetterHero{padding:18px 0 30px;text-align:center}
.ssLetterBrand{color:#ac7d0d;font-size:21px;font-weight:700;margin:0 0 18px}
.ssLetterBrand span{color:#176bc0}
.ssLetterHero h1{font-size:clamp(30px,4.8vw,46px);line-height:1.2;margin:0;font-weight:700;letter-spacing:-.025em}
.ssLetterHero .ssLetterSubtitle{font-size:20px;font-style:italic;margin:7px 0 0;color:var(--muted)}
.ssLetterJump{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:25px 0 12px}
.ssLetterJump a,.ssLetterPage #letterReset{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:12px;padding:9px 16px;min-height:44px;font-size:14px;text-decoration:none;background:var(--paper);color:var(--ink);cursor:pointer}
.ssLetterJump a{min-width:104px}
.ssLetterJump a:hover,.ssLetterPage #letterReset:hover{background:#e0ebf1;border-color:var(--blue)}
.ssLetterSection{scroll-margin-top:18px;padding:28px 0 8px}
.ssLetterSection h2{font-size:21px;margin:0 0 16px;font-weight:600}
.ssLetterGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ssLetterPage .ssLetterCard{position:relative;display:flex;flex-direction:column;text-align:left;gap:14px;width:100%;padding:23px;border-radius:16px;border:1px solid var(--line);background:#f8fbfc;color:var(--ink);cursor:pointer;transition:background .15s,border-color .15s;white-space:normal;min-width:0;box-shadow:0 3px 10px #294e6710}
.ssLetterPage .ssLetterCard:hover{border-color:#658aa7;background:#fff}
.ssLetterPage .ssLetterCard[aria-pressed="true"]{border:2px solid var(--blue);padding:22px;background:#e1edf5}
.ssLetterSample{display:block;font-size:29px;line-height:1.52;font-weight:400;letter-spacing:0;overflow-wrap:anywhere}
.ssLetterTranslation{display:block;font-family:var(--ss-font-slot-natural-english)!important;font-size:16px;line-height:1.55;color:#5c7382;margin:10px 0 3px}
.ssLetterSampleLabel{display:block;font-size:12px;color:var(--muted);margin-top:7px}
.ssLetterPronunciation{display:block;font-size:22px;line-height:1.6;overflow-wrap:anywhere}
.ssLetterCardMeta{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:14px;border-top:1px solid #bccbd680}
.ssLetterFamily{font-size:12px;color:var(--muted);letter-spacing:.01em}
.ssLetterCardNote{display:block;font-size:12px;line-height:1.4;color:var(--muted);margin-top:-5px}
.ssLetterChosen{display:block;font-size:12px;color:#335f82}
.ssLetterPage button:focus-visible,.ssLetterPage a:focus-visible,.ssLetterPage summary:focus-visible{outline:3px solid #4e84af;outline-offset:4px}
.ssLetterGlyphDetails,.ssLetterLegacy{color:var(--muted);font-size:13px;margin-top:16px}
.ssLetterGlyphDetails summary,.ssLetterLegacy>summary,.ssLetterFoot summary{cursor:pointer;min-height:44px;align-content:center}
.ssLetterGlyphRow{display:flex;gap:20px;align-items:baseline;flex-wrap:wrap;margin:12px 0}
.ssLetterGlyphSample{font-size:20px;line-height:1.6}
.ssLetterLegacy{border:1px solid var(--line);border-radius:12px;padding:0 14px}
.ssLetterLegacy #v319SettingsLines{padding:12px 0 18px}
.ssLetterLegacy h2{font-size:16px;margin:0 0 10px}
.ssLetterFoot{margin-top:35px;padding:24px 0;border-top:1px solid var(--line);display:grid;gap:12px;justify-items:start;color:var(--muted);font-size:13px}
.ssLetterFoot details{width:100%}
.ssLetterFoot p{max-width:820px;margin:8px 0}
.ssLetterFoot .ssFontStatus{font-size:12px}
@media(max-width:900px){.ssLetterGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:580px){.ssLetterPage{padding-left:16px;padding-right:16px}.ssLetterGrid{grid-template-columns:1fr}.ssLetterHero{padding:18px 0 24px}.ssLetterSection{padding-top:25px}.ssLetterSample{font-size:28px}.ssLetterTop{gap:6px}.ssLetterJump{gap:6px}.ssLetterJump a{min-width:90px;padding:9px 12px}.ssLetterPage .ssLetterCard{padding:22px}.ssLetterPage .ssLetterCard[aria-pressed="true"]{padding:21px}}
@media(prefers-reduced-motion:reduce){.ssLetterPage *{transition:none!important}}

/* Storyteller's legacy Ukrainian container consumes the story-reading choice. */
html[data-ss-letter-room="storyteller"] #big,html[data-ss-letter-room="storyteller"] #big *,html[data-ss-letter-room="storyteller"] #ssPill .ssUnit,html[data-ss-letter-room="storyteller"] #ssPill .ssUnit *{font-family:var(--ss-font-slot-storyteller)!important}

.ssLetterPage #pillLearningSettings{max-width:760px;margin:0 auto 22px}.ssLetterPage #pillLearningSettings .ssLearningPreferences{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.ssLetterPage #pillLearningSettings .ssLearningPreferencesNote{grid-column:1/-1}@media(max-width:540px){.ssLetterPage #pillLearningSettings .ssLearningPreferences{grid-template-columns:1fr}}