:root{--bg1:#1a1a2e;--bg2:#16213e;--bg3:#0f3460;--ink:#e0e0e0;--muted:#a0a0b0;--dim:#8a8a9a;--panel:rgba(255,255,255,.05);--line:rgba(255,255,255,.12);--cc:#f1c40f;--f-uk:"Andika";--f-en:"Noto Sans";--f-ph:"Charis SIL"}
*{box-sizing:border-box}html,body{margin:0}
body{background:linear-gradient(135deg,var(--bg1) 0%,var(--bg2) 50%,var(--bg3) 100%);background-attachment:fixed;min-height:100vh;color:var(--ink);font:16px/1.5 var(--f-en),"Segoe UI",Tahoma,sans-serif;-webkit-text-size-adjust:100%}
[lang=uk]{font-family:var(--f-uk),"Noto Sans",sans-serif}.say{font-family:var(--f-ph),"Charis SIL",Georgia,serif}
button{font:inherit;color:inherit;cursor:pointer;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.22);border-radius:30px;padding:8px 16px;transition:all .2s}
button:hover{background:rgba(255,255,255,.14)}button.on{background:#667eea;border-color:#667eea;color:#fff}
button:focus-visible{outline:3px solid var(--cc);outline-offset:2px}
.shell{max-width:1000px;margin:auto;padding:22px 20px 40px 48px}
 
.handle{position:fixed;left:0;top:110px;z-index:5;writing-mode:vertical-rl;transform:rotate(180deg);border-radius:0 12px 12px 0;border-left:0;padding:14px 8px;font-size:12px;letter-spacing:1.4px;text-transform:uppercase;font-weight:700;background:rgba(22,33,62,.95);color:var(--muted)}
.handle:hover{color:var(--cc)}
.veil{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;z-index:6}.veil.open{display:block}
.rail{position:fixed;left:0;top:0;bottom:0;width:290px;max-width:84%;transform:translateX(-100%);transition:transform .22s;z-index:7;background:#16213e;border-right:1px solid var(--line);padding:22px 14px;overflow-y:auto}
.rail.open{transform:none;box-shadow:12px 0 30px rgba(0,0,0,.4)}
.rail h2{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin:6px 0 8px 8px}
.rc{display:grid;grid-template-columns:14px 1fr auto;column-gap:10px;align-items:center;text-decoration:none;color:var(--ink);padding:8px 10px;border-radius:12px;margin-bottom:3px;border:1px solid transparent}
.rc:hover{background:rgba(255,255,255,.06)}.rc.on{border-color:var(--c);background:rgba(255,255,255,.08)}
.rc i{width:12px;height:12px;border-radius:50%;background:var(--c);grid-row:span 2}.rc b{color:var(--c);font-size:17px}.rc span{font-size:13px;color:var(--muted);grid-column:2}.rc small{grid-row:1;grid-column:3;color:var(--dim);font-size:12px}
.rm{display:block;width:100%;text-align:left;border-radius:10px;border:0;background:transparent;padding:9px 12px;margin-bottom:2px;font-size:15px}.rm.on{background:#667eea;color:#fff;font-weight:700}
 
.case-en{font-size:52px;line-height:1.05;margin:0;font-weight:700;color:var(--cc);letter-spacing:-.5px}
.case-uk{font-size:32px;font-weight:600;margin:6px 0 2px;color:#fff}
.case-sit{font-size:15px;color:var(--muted)}
.controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:18px 0 14px}.grow{flex:1}
.modebtn{border-color:var(--cc);color:var(--cc);font-weight:700}
.stage{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:22px;box-shadow:0 10px 40px rgba(0,0,0,.3);min-height:420px}
 
.s mark{background:linear-gradient(transparent 58%,color-mix(in srgb,var(--c,var(--cc)) 34%,transparent) 58%);color:var(--c,var(--cc));font-weight:700;border-radius:2px}
.s{cursor:pointer;border-radius:8px;transition:background .2s}.s:hover{background:rgba(255,255,255,.06)}.s.playing{background:rgba(255,255,255,.12);box-shadow:0 0 0 2px var(--c,var(--cc))}
.fhead{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:34px}
.dict{background:color-mix(in srgb,var(--cc) 25%,transparent);color:#fff;border-radius:20px;padding:4px 14px;font-size:20px;font-weight:600}.ptag{font-size:13px;color:var(--muted);text-align:right}
.hero{text-align:center;padding:22px 8px 18px}.hero .s{display:inline-block;font-size:40px;line-height:1.35;margin:0;padding:2px 8px;color:#fff}
.gloss{font-style:italic;color:var(--muted);margin:14px 0 0;font-size:17px}.say{color:var(--muted);margin:8px 0 0;font-size:18px}
.en{margin:10px 0 0;font-size:18px;color:#fff;visibility:hidden}.en.open,body.eng .en{visibility:visible}
.transport{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border-top:1px dashed var(--line);padding-top:16px}
.play{background:linear-gradient(135deg,#667eea,#764ba2);border:0;color:#fff;font-weight:700;padding:11px 22px;box-shadow:0 5px 15px rgba(102,126,234,.4)}
.round{padding:8px 14px;font-size:18px}.count{margin-left:auto;color:var(--muted);font-size:14px}
.list{margin-top:14px;max-height:340px;overflow-y:auto;border-top:1px solid var(--line);padding-top:8px}
.list .s{display:block;padding:7px 12px;margin:2px 0;font-size:18px;background:rgba(255,255,255,.03)}.list .s.cur{background:rgba(255,255,255,.1);box-shadow:inset 3px 0 0 var(--cc)}
 
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.chip{border:2px solid var(--c,var(--cc));color:#fff;background:rgba(255,255,255,.05);font-weight:700;font-size:18px;padding:6px 16px}.chip small{color:var(--muted);font-weight:400;margin-left:6px;font-size:13px}
.chip.on{background:var(--c,var(--cc));color:#15152a}.chip.on small{color:#15152a}
.chip mark{background:none;color:inherit;font-weight:800;text-decoration:underline 2px;text-underline-offset:4px}
html{background:#16213e}
.others{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:22px}
.oc{display:block;text-decoration:none;color:var(--ink);border-radius:14px;padding:12px 14px;background:linear-gradient(135deg,color-mix(in srgb,var(--c) 70%,transparent),color-mix(in srgb,var(--c) 35%,transparent))}
.oc b{display:block;font-size:14px;letter-spacing:.6px;text-transform:uppercase;color:#fff;margin-bottom:6px}.oc span{display:inline-block;background:rgba(0,0,0,.22);border-radius:8px;padding:2px 8px;margin:2px 4px 2px 0;font-size:15px;color:#fff}
.hint{color:var(--dim);font-size:14px;margin:18px 0 6px}
 
.pc{border:2px solid var(--c);border-radius:16px;padding:16px 18px;background:rgba(255,255,255,.04)}
.pt{font-size:12px;letter-spacing:1px;text-transform:uppercase;font-weight:700;color:var(--c);margin-bottom:6px}.pc .s{font-size:28px;line-height:1.35;display:inline-block;padding:2px 6px}
.arrow{text-align:center;font-size:26px;color:var(--muted);margin:6px 0;cursor:pointer}
 
.row{border-left:4px solid var(--c);padding:6px 0 6px 12px;margin:8px 0;opacity:.8;border-radius:0 10px 10px 0}.row.me{opacity:1;background:rgba(255,255,255,.07)}
.row small{display:block;font-size:12px;letter-spacing:1px;text-transform:uppercase;font-weight:700;color:var(--c)}.row .s{font-size:22px;padding:2px 6px;display:inline-block}
 
.scenes{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.scene{border:2px solid rgba(255,255,255,.2);border-radius:14px;padding:14px;text-align:center;background:rgba(255,255,255,.05);cursor:pointer;transition:all .2s}
.scene:hover{transform:translateY(-3px);border-color:var(--cc)}.scene.on{border-color:var(--cc);background:rgba(255,255,255,.12)}
.scene b{display:block;font-size:24px;color:#fff}.scene small{color:var(--muted)}
.strip{margin-top:16px}.strip .s{display:block;font-size:20px;padding:7px 12px;margin:3px 0;background:rgba(255,255,255,.03)}
.maker{margin-top:30px;text-align:center;font-size:12px;color:var(--dim)}
@media(max-width:700px){.shell{padding:14px 12px 30px 34px}.case-en{font-size:38px}.case-uk{font-size:24px}.hero .s{font-size:30px}.stage{padding:16px 12px;border-radius:16px}
 .controls button{padding:7px 11px;font-size:14px}.handle{top:92px;padding:10px 6px;font-size:11px}.pc .s{font-size:22px}.row .s{font-size:19px}.list .s,.strip .s{font-size:17px}.chip{font-size:16px;padding:5px 12px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

 
.s{font:inherit;text-align:inherit;color:inherit;border:0;background:transparent;letter-spacing:inherit}
.list .s,.strip .s{width:100%;text-align:left}
.arrow{display:block;width:100%;padding:0;border:0;background:transparent;border-radius:8px}
.scene{font:inherit;color:inherit}
.en[hidden]{display:none!important}
.rc.unavailable,.oc.unavailable{cursor:default;opacity:.65}
.oc em{display:block;font-size:12px;font-style:normal;margin-top:6px}
.hold,.status{font-size:14px;color:var(--muted);margin:10px 0}
.status:empty{display:none}
.status{color:#f1c40f}
.ptag{overflow-wrap:anywhere}
.hero .s,.pc .s,.row .s{max-width:100%;overflow-wrap:anywhere}

 
:root{--bg1:var(--slava-paint-bg-deep,var(--slava-bg,#0b1020));--bg2:var(--bg1);--bg3:var(--bg1);--ink:var(--slava-paint-ink-bright,var(--slava-ink,#eef2fa));--muted:var(--slava-paint-ink-muted,var(--slava-ink-dim,#8fa0bf));--dim:var(--muted);--panel:var(--slava-paint-card-glass,var(--slava-card,#141d33));--line:var(--slava-paint-line,#2c4a6e);--cc:var(--slava-paint-gold,var(--slava-gold,#f2c744))}
html{background:var(--bg1)}.shell{padding-bottom:110px}.case-uk{font-size:42px;color:var(--ink)}.case-en{font-size:24px;margin-top:8px}.brand{font-size:14px;color:var(--muted);margin-bottom:12px}
.s,.hero .s,.pc .s,.scene b,.en,.case-uk{color:var(--ink)}.s{border-radius:8px;min-height:44px}.s mark{color:var(--cc);background:linear-gradient(transparent 58%,var(--slava-paint-gold-tint,rgba(242,199,68,.18)) 58%)}
.stage{box-shadow:0 10px 40px var(--slava-paint-shadow,rgba(0,0,0,.3));min-height:250px}.rail,.handle{background:var(--slava-paint-panel-glass,var(--slava-panel,#141d33))}.veil{background:var(--slava-paint-scrim,rgba(0,0,0,.45))}
button,select,summary{min-height:44px;min-width:44px}select{font-size:16px;max-width:100%;background:var(--panel);color:var(--ink);border:1px solid var(--line);padding:8px;border-radius:10px}button,.scene{border-color:var(--line)}button.on,.chip.on{background:var(--cc);color:var(--slava-paint-ink-dark,#0b1020)}
.controls{align-items:start}.controls label{display:flex;align-items:center;gap:8px}.controls details{margin-left:auto;max-width:100%}summary{cursor:pointer;padding:10px}.settingsGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;border:1px solid var(--line);border-radius:14px;padding:14px;background:var(--panel)}.settingsGrid label{display:flex;flex-wrap:wrap;min-height:44px;gap:6px}.settingsGrid select{width:100%}.settingsGrid input{width:22px;height:22px;accent-color:var(--cc)}
.natural,.wordforword,.phonetics,.ipa{font-size:17px;line-height:1.5;margin:8px 0;color:var(--muted)}.natural{color:var(--ink)}.wordforword{font-style:italic}.line{margin-bottom:12px}.line .s{width:100%;text-align:left}.hero .line .s{text-align:center}.hero{padding:12px 0}.hero .s{font-size:34px}.list{max-height:340px}.credits{margin-top:20px;color:var(--muted);font-size:13px}.credits p{overflow-wrap:anywhere}.credits a{color:inherit;display:inline-block;padding:12px}.maker{overflow-wrap:anywhere}
.play{background:var(--cc);color:var(--slava-paint-ink-dark,#0b1020);box-shadow:none}.transport{position:static;margin-top:16px}.chips button{font-size:18px}.s.playing{outline:2px solid var(--cc)}button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--cc);outline-offset:3px}
.scene.on{border-color:var(--cc)}.empty{color:var(--muted);padding:20px 0}.rc.unavailable{opacity:.65}.rc small{font-size:11px}.rc b{color:var(--cc)}.rc.on{border-color:var(--cc)}
@media(max-width:700px){.case-uk{font-size:30px}.case-en{font-size:21px}.hero .s{font-size:27px}.controls{display:block}.controls details{margin-top:10px}.settingsGrid{grid-template-columns:1fr}.transport{gap:6px}.transport button{flex:1 1 40%}.transport .count{width:100%;text-align:center}.shell{padding-bottom:110px}}

.brand{display:flex;align-items:center;gap:12px;justify-content:center}.start-help{color:var(--muted);line-height:1.6;font-size:16px}.empty button{padding:10px 16px;font:inherit;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:10px}

.shell{padding-bottom:180px}.ipa small{font-family:var(--ss-font-slot-ui);font-size:13px}

.case-link{display:block;text-decoration:none;color:var(--ink);min-height:44px;padding:10px;border-radius:10px}.case-link small{display:block;font-size:13px}.case-link:focus-visible{outline:3px solid var(--cc);outline-offset:3px}

.review-status{font-size:14px;line-height:1.5;color:var(--muted);border:1px solid var(--line);border-radius:10px;padding:10px 14px}

.back-home a{display:inline-block;color:var(--ink);min-height:44px;padding:8px 0;text-underline-offset:4px}.back-home a:focus-visible{outline:3px solid var(--cc);outline-offset:3px}