*{box-sizing:border-box}body{margin:0;background:#edf3f5;color:#243f59;font-family:var(--ss-font-slot-ui,Andika),sans-serif}.app-header{padding:24px clamp(16px,4vw,56px);display:flex;align-items:center;gap:20px}.app-header img{width:250px;height:90px;object-fit:contain;object-position:left}.app-header a{margin-left:auto;color:#315a85;text-decoration:none;padding:12px 16px;border:1px solid #b8cbd9;border-radius:12px;font-size:14px}.product-label{color:#566774;font-size:12px}main{max-width:1440px;margin:auto;padding:30px 500px 140px 40px}.reading{max-width:850px;margin:auto}.selection{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:8px;align-items:center}button,select{font:inherit;color:inherit;min-height:44px;border:1px solid #b8cbd9;border-radius:12px;background:#fcfdfb;padding:8px;cursor:pointer}.selection select{width:100%;text-overflow:ellipsis;font-size:15px}.selection button{width:44px;font-size:20px}#big{display:block;width:100%;min-height:290px;margin-top:32px;padding:clamp(22px,4vw,50px);border:0;background:#e3ebf2;font-family:var(--ss-font-slot-stress-display,Andika),sans-serif;font-size:clamp(32px,4vw,62px);line-height:1.45;overflow-wrap:anywhere;text-align:center;border-radius:24px}#en{font-family:var(--ss-font-slot-natural-english,Andika),sans-serif;font-size:clamp(20px,2vw,26px);line-height:1.6;margin:48px auto 20px;max-width:42ch;text-align:center}#notice{min-height:24px;font-size:14px;line-height:1.6;text-align:center}.source{margin-top:32px;font-size:13px;line-height:1.6;color:#566774}.source summary{cursor:pointer;min-height:44px;padding-top:12px}#ssPill{--ss-surface:#e3ebf2!important;--ss-edge:#315a85!important;--ss-accent:#315a85!important;--ss-on:#fcfdfb!important;--ss-copy:#243f59!important;--ss-copy-muted:#566774!important}#ssPill.ssOpen{z-index:1000}button:focus-visible,select:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #315a85;outline-offset:3px}.source p{overflow-wrap:anywhere}@media(max-width:1050px){main{padding:16px 24px 160px}.reading{max-width:800px}.app-header{padding:16px}.app-header img{width:180px;height:70px}.product-label{font-size:11px}}@media(max-width:460px){.app-header{gap:10px;flex-wrap:wrap}.app-header img{width:180px;height:65px}.product-label{order:3;flex-basis:100%}.app-header a{padding:10px}main{padding:12px 16px 150px}#big{min-height:240px;margin-top:20px}#en{margin-top:38px}}
.brand{display:flex;align-items:center;gap:14px}.brand img,.app-header .brand img{width:90px;height:90px}.brand strong{font-size:24px;color:#ad7d12}.brand strong span{color:#0057b7}.app-header #ssLetterNav{margin-left:auto;padding:0;background:none;display:block}.app-header #ssLetterNav a{display:block}@media(max-width:460px){.app-header .brand img{width:64px;height:64px}.brand strong{font-size:21px}.brand{gap:8px}}

.line-choice{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:16px;font-size:14px}.line-choice select{min-width:64px}

/* Bilingual product name: English first, italic Ukrainian underneath. */
.product-label{display:flex;flex-direction:column;gap:4px;line-height:1.35}.product-label em{font-size:1em;font-weight:400;font-style:italic;white-space:nowrap}

/* Reuse the Pill's selected learning rows in its main text area. */
#ssPill .ssUnit[data-additional-learning] .ssLayerList{max-height:none;overflow:visible;padding:0;gap:20px;scrollbar-gutter:auto}
#ssPill .ssUnit[data-additional-learning] .ssLayerChoice{display:flex;flex-direction:column;gap:12px;padding:0;border:0;background:none;text-align:center}
#ssPill .ssUnit[data-additional-learning] .ssLayerName{font-size:12px;line-height:1.4;font-weight:600;color:var(--ss-copy-muted);white-space:normal}
#ssPill .ssUnit[data-additional-learning] .ssLayerKind{font-size:clamp(20px,2.2vw,27px);line-height:1.6;font-weight:400;white-space:normal;overflow-wrap:anywhere;color:var(--ss-copy)}
#ssPill .ssUnit[data-additional-learning][hidden]{display:none!important}
.line-choice button{width:144px;font-size:13px;min-height:44px}

/* Character identity: centered name, original decorative orb, one native selector. */
.character-choice{position:relative;min-width:0}
.selection .character-choice select{appearance:none;-webkit-appearance:none;min-height:56px;padding:8px 60px;text-align:center;text-align-last:center;font-family:var(--ss-font-slot-ui,Andika),sans-serif;font-size:24px;font-weight:700;line-height:1.4;letter-spacing:.015em;background:linear-gradient(135deg,#fcfdfb,#e3ebf2);border-color:#adc1d1;box-shadow:0 3px 12px rgba(49,90,133,.07)}
.character-choice::after{content:"";position:absolute;right:22px;top:50%;width:7px;height:7px;border-right:2px solid #617d97;border-bottom:2px solid #617d97;transform:translateY(-70%) rotate(45deg);pointer-events:none}
.selection button{height:56px}
.character-orb{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;overflow:hidden;pointer-events:none;isolation:isolate;box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 0 0 3px rgba(145,169,189,.16),0 5px 12px rgba(26,37,51,.18)}
.character-orb::before{content:"";position:absolute;inset:-25%;border-radius:43%;background:conic-gradient(from 20deg,transparent,#ffe56b99,transparent,#80e6ff99,transparent);opacity:.8;animation:characterOrbTurn 3.4s linear infinite;animation-play-state:paused}
.character-orb[data-speaking="true"]::before{animation-play-state:running}
@keyframes characterOrbTurn{to{transform:rotate(360deg)}}
@media(max-width:460px){.selection .character-choice select{font-size:20px;padding-inline:44px}.character-orb{width:32px;height:32px;left:10px}.character-choice::after{right:17px}}
@media(max-width:360px){.selection .character-choice select{font-size:18px;padding-inline:34px;letter-spacing:0}.character-orb{width:26px;height:26px;left:7px}.character-choice::after{right:14px;width:6px;height:6px}}
@media(prefers-reduced-motion:reduce){.character-orb::before{animation:none;transform:none}}
