html,body{margin:0!important;padding:0!important;background:#080a19!important;color:#fff;font-family:Inter,Aeonik,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-x:hidden}
body .site,body .site-main,body .entry-content,body .content-area,body .site-content,body main{background:transparent!important}.entry-content>.oxleo-shell,.site-main>.oxleo-shell,main>.oxleo-shell{margin:0!important;max-width:none!important}
.oxleo-shell *{box-sizing:border-box}.oxleo-shell a{text-decoration:none}.oxleo-shell button{font:inherit}.oxleo-shell{--line:rgba(255,255,255,.1);--text:#f9f5ff;--muted:#c6c1d8;--gold:#ffc24f;min-height:100dvh;background:radial-gradient(circle at top left,rgba(91,43,145,.24),transparent 32%),linear-gradient(180deg,#080a19 0%,#0b0d20 58%,#070918 100%);color:var(--text)}
.oxleo-sidebar{position:fixed;left:0;top:0;bottom:0;width:250px;background:rgba(13,15,36,.9);backdrop-filter:blur(12px);border-right:1px solid var(--line);padding:26px 18px;display:flex;flex-direction:column;gap:26px;z-index:40;transition:transform .25s ease}.oxleo-shell.sidebar-collapsed .oxleo-sidebar{transform:translateX(-190px)}.oxleo-shell.sidebar-collapsed .oxleo-sidebar:hover{transform:none}
.oxleo-logo{display:flex;align-items:center;gap:8px}.oxleo-logo-img{height:44px;max-width:155px;object-fit:contain}.oxleo-logo-x{font-size:42px;font-weight:950;color:#ffc24f;margin-left:-4px}.oxleo-menu{margin-left:auto;background:transparent;color:#ddd;border:0;font-size:22px;cursor:pointer}
.oxleo-nav{display:flex;flex-direction:column;gap:12px}.oxleo-nav a{display:flex;align-items:center;height:58px;padding:0 18px;border-radius:14px;color:#d5d0e4;font-size:18px}.oxleo-nav a.active,.oxleo-nav a:hover{background:rgba(255,255,255,.08);color:var(--gold);font-weight:800}
.oxleo-user{margin-top:auto;display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:18px;padding:12px;background:rgba(255,255,255,.035)}.oxleo-user img{width:48px;height:48px;border-radius:50%;object-fit:cover}.oxleo-user strong,.oxleo-user span{display:block}.oxleo-user span{color:var(--muted);font-size:14px}.oxleo-user b{margin-left:auto;color:#d9d6e8}.oxleo-logout{color:#d7d2e7;font-size:18px}
.oxleo-library-hero{display:flex;justify-content:space-between;align-items:end;gap:20px;padding:28px 30px;border-radius:28px;background:linear-gradient(135deg,rgba(101,64,181,.85),rgba(160,64,120,.55));border:1px solid rgba(255,255,255,.12);box-shadow:0 24px 80px rgba(0,0,0,.25)}.oxleo-hero-copy span{display:block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#e7e4ff;font-weight:900}.oxleo-hero-copy h1{font-size:52px;line-height:.95;letter-spacing:-.05em;margin:10px 0}.oxleo-hero-copy p{font-size:18px;color:#ebe8ff;margin:0}.oxleo-hero-open{display:inline-flex;align-items:center;justify-content:center;padding:15px 22px;border-radius:999px;background:#fff;color:#11152a;font-weight:900}
.oxleo-shelf-block{margin-top:28px}.oxleo-shelf-head{display:flex;justify-content:space-between;align-items:end;gap:18px;margin-bottom:14px}.oxleo-shelf-head h2{font-size:28px;margin:0}.oxleo-shelf-head span{color:var(--muted);font-size:13px}.oxleo-tabs{display:flex;gap:8px;flex-wrap:wrap}.oxleo-tabs button{height:40px;padding:0 16px;border-radius:12px;border:1px solid transparent;background:rgba(255,255,255,.06);color:#d9d5e8;cursor:pointer;white-space:nowrap}.oxleo-tabs button.active,.oxleo-tabs button:hover{background:rgba(255,194,79,.18);color:var(--gold);border-color:rgba(255,194,79,.35)}
.oxleo-shelf{display:flex;gap:22px;overflow:auto;padding-bottom:10px;scrollbar-width:none}.oxleo-shelf::-webkit-scrollbar{display:none}.oxleo-book-card{flex:0 0 310px;padding:16px;border-radius:20px;background:rgba(18,20,43,.82);border:1px solid var(--line);box-shadow:0 24px 90px rgba(0,0,0,.24)}.oxleo-book-cover img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:16px;display:block}.oxleo-book-card h3{font-size:24px;line-height:1.05;margin:16px 0 6px}.oxleo-book-card p{color:var(--muted);line-height:1.45;margin:0 0 12px}.oxleo-tags{display:flex;gap:8px;flex-wrap:wrap}.oxleo-tags em{font-style:normal;border-radius:10px;padding:6px 10px;background:#263255;color:#fff;font-size:13px}.oxleo-tags em:nth-child(1){background:#2e8957}.oxleo-tags em:nth-child(2){background:#714497}.oxleo-tags em:nth-child(3){background:#3659bc}.oxleo-skill{display:inline-block;margin-top:12px;padding:10px 14px;border-radius:12px;background:rgba(32,26,20,.65);border:1px solid rgba(255,194,79,.6);color:var(--gold);font-weight:700}.oxleo-actions{display:flex;gap:10px;margin-top:16px}.oxleo-open{display:inline-flex;align-items:center;justify-content:center;height:44px;flex:1;border-radius:12px;background:linear-gradient(180deg,#ffd16b,#ffb63e);color:#160f0a;font-weight:900}.oxleo-fav{width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.07);color:#fff;cursor:pointer}.oxleo-empty{padding:24px;border-radius:18px;background:rgba(255,255,255,.04);border:1px dashed rgba(255,255,255,.14);color:#d8d5e6}.oxleo-poster-shelf .oxleo-poster{display:block;flex:0 0 220px;color:#fff}.oxleo-poster img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:18px;display:block}.oxleo-poster strong{display:block;margin-top:10px;font-size:18px}
.oxleo-reader-header{display:flex;align-items:center;gap:12px;margin-bottom:14px}.oxleo-back{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;color:#fff;font-size:32px}.oxleo-title strong{display:block;font-size:17px;line-height:1.2}.oxleo-title span{font-size:13px;color:var(--muted)}.oxleo-badges{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap}.oxleo-badges span{padding:6px 10px;border-radius:10px;background:#2e8957;color:#fff;font-size:13px}.oxleo-badges span:nth-child(2){background:#714497}.oxleo-badges span:nth-child(3){background:#3659bc}.oxleo-badges span:nth-child(4){background:rgba(32,26,20,.7);border:1px solid rgba(255,194,79,.6);color:var(--gold)}.oxleo-fullscreen{display:inline-flex;align-items:center;gap:6px;padding:10px 14px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.06);color:#fff;cursor:pointer}
.oxleo-page{position:relative;overflow:hidden;z-index:2}
.oxleo-strip{margin-top:16px;overflow:hidden}.oxleo-thumbs{display:flex;gap:14px;overflow:auto;scrollbar-width:none}.oxleo-thumbs::-webkit-scrollbar{display:none}.oxleo-thumb{width:96px;flex:0 0 96px;border:0;background:transparent;color:#fff;cursor:pointer}.oxleo-thumb img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:10px;border:2px solid transparent;display:block}.oxleo-thumb.active img{border-color:var(--gold)}.oxleo-thumb span{display:block;text-align:center;margin-top:6px} .oxleo-count{margin-left:auto;color:#dad6e8}
.oxico{display:block;position:relative;width:18px;height:18px}.oxico-play::before{content:"";position:absolute;left:5px;top:2px;width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:10px solid var(--gold)}.oxico-pause::before,.oxico-pause::after{content:"";position:absolute;top:2px;width:4px;height:14px;border-radius:2px;background:var(--gold)}.oxico-pause::before{left:4px}.oxico-pause::after{right:4px}.oxico-prev::before,.oxico-prev::after,.oxico-next::before,.oxico-next::after{content:"";position:absolute;top:2px;width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent}.oxico-prev::before{left:1px;border-right:9px solid #dcd7ec}.oxico-prev::after{left:8px;border-right:9px solid #dcd7ec}.oxico-next::before{right:8px;border-left:9px solid #dcd7ec}.oxico-next::after{right:1px;border-left:9px solid #dcd7ec} .oxleo-motion-option{display:grid;grid-template-columns:28px 1fr;gap:0 12px;margin:14px 0;padding:18px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.035);cursor:pointer}.oxleo-motion-option input{display:none}.oxleo-motion-option span{grid-row:1/3;width:22px;height:22px;border-radius:50%;border:2px solid #bdb8cb;margin-top:3px}.oxleo-motion-option.active{border-color:rgba(255,194,79,.6)}.oxleo-motion-option.active span{border-color:var(--gold);box-shadow:inset 0 0 0 5px rgba(255,194,79,.94)}.oxleo-motion-option strong{display:block;font-size:16px}.oxleo-motion-option small{display:block;color:#c5c0d5;font-size:13px;line-height:1.45;margin-top:6px}.oxleo-note{font-size:14px;color:#cbc6da}
.oxleo-full-close{position:absolute;right:22px;top:18px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid var(--line);color:#fff;font-size:32px}.oxleo-rotate-note{display:none;color:#fff;background:rgba(255,194,79,.12);border:1px solid rgba(255,194,79,.45);padding:12px 16px;border-radius:14px;margin-bottom:12px;text-align:center} .oxleo-teacher{min-height:100dvh;background:linear-gradient(180deg,#080b1a,#11142b);color:#fff;padding:70px 44px;font-family:Inter,Aeonik,system-ui,sans-serif}.oxleo-teacher-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:980px}.oxleo-teacher-grid div{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);border-radius:24px;padding:25px}
@media(max-width:1180px){.oxleo-sidebar{transform:translateX(-100%);width:250px}.oxleo-shell.sidebar-open .oxleo-sidebar{transform:none}.oxleo-library-hero{display:block}.oxleo-hero-open{margin-top:16px}.oxleo-badges{display:none}.oxleo-reader-header{display:grid;grid-template-columns:32px 1fr auto;gap:8px}.oxleo-fullscreen small{display:none}}
@media(max-width:760px){ .oxleo-strip{margin-top:12px}.oxleo-thumb{width:72px;flex-basis:72px}.oxleo-count{width:100%;margin-left:0;text-align:center}.oxleo-shelf-head{display:block}.oxleo-tabs{margin-top:10px}}
@media(max-width:900px) and (orientation:landscape){ .oxleo-rotate-note{display:none}}
.oxleo-app-library .oxleo-library-hero,
.oxleo-app-library .oxleo-shelf-block,
.oxleo-app-library .oxleo-book-card,
.oxleo-app-library .oxleo-poster-shelf{
display:none!important;
}
.oxleo-app-topbar{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:18px;
margin-bottom:26px;
}
.oxleo-app-topbar span{
display:block;
color:#b9b1d7;
letter-spacing:.16em;
font-size:12px;
font-weight:900;
}
.oxleo-app-topbar h1{
font-size:clamp(34px,4vw,58px);
line-height:.95;
margin:8px 0 0;
letter-spacing:-.055em;
}
.oxleo-top-actions{
display:flex;
gap:10px;
overflow:auto;
scrollbar-width:none;
max-width:60vw;
}
.oxleo-top-actions::-webkit-scrollbar{display:none}
.oxleo-top-actions button{
border:1px solid transparent;
background:rgba(255,255,255,.07);
color:#d9d5e8;
border-radius:999px;
padding:12px 18px;
font-weight:800;
cursor:pointer;
white-space:nowrap;
}
.oxleo-top-actions button.active,
.oxleo-top-actions button:hover{
background:rgba(255,194,79,.18);
border-color:rgba(255,194,79,.42);
color:var(--gold);
}
.oxleo-continue-row{
margin:4px 0 32px;
}
.oxleo-continue-row h2,
.oxleo-row-head h2{
font-size:25px;
margin:0 0 14px;
letter-spacing:-.02em;
}
.oxleo-continue-card{
width:min(720px,100%);
display:grid;
grid-template-columns:126px 1fr;
gap:18px;
align-items:center;
padding:14px;
border-radius:22px;
background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
border:1px solid rgba(255,255,255,.11);
box-shadow:0 20px 60px rgba(0,0,0,.22);
}
.oxleo-continue-cover img{
width:126px;
aspect-ratio:3/4;
object-fit:cover;
border-radius:16px;
display:block;
box-shadow:0 16px 36px rgba(0,0,0,.35);
}
.oxleo-continue-info span{
display:block;
color:var(--gold);
font-size:12px;
text-transform:uppercase;
letter-spacing:.12em;
font-weight:900;
}
.oxleo-continue-info strong{
display:block;
font-size:24px;
line-height:1.08;
margin:7px 0;
}
.oxleo-continue-info small{
display:block;
color:var(--muted);
margin-bottom:14px;
}
.oxleo-continue-info a{
display:inline-flex;
padding:10px 17px;
border-radius:999px;
background:#fff;
color:#11152a;
font-weight:900;
}
.oxleo-row{
margin-top:28px;
}
.oxleo-row-head{
display:flex;
justify-content:space-between;
align-items:end;
gap:14px;
}
.oxleo-row-head span{
color:var(--muted);
font-size:12px;
letter-spacing:.12em;
text-transform:uppercase;
font-weight:800;
}
.oxleo-cover-rail{
display:flex;
gap:18px;
overflow:auto;
padding:4px 2px 18px;
scroll-snap-type:x mandatory;
scrollbar-width:none;
}
.oxleo-cover-rail::-webkit-scrollbar{display:none}
.oxleo-mini-book{
flex:0 0 172px;
scroll-snap-align:start;
color:#fff;
}
.oxleo-mini-book a,
.oxleo-placeholder-cover{
display:block;
width:100%;
aspect-ratio:3/4;
border-radius:18px;
overflow:hidden;
background:linear-gradient(135deg,#2a1749,#11142b);
box-shadow:0 22px 50px rgba(0,0,0,.34);
border:1px solid rgba(255,255,255,.1);
}
.oxleo-mini-book img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:transform .2s ease;
}
.oxleo-mini-book a:hover img{
transform:scale(1.035);
}
.oxleo-mini-book h3{
font-size:15px;
line-height:1.15;
margin:10px 0 4px;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
.oxleo-mini-book p{
color:var(--muted);
font-size:13px;
margin:0;
}
.oxleo-placeholder-cover{
display:flex;
align-items:center;
justify-content:center;
background:
radial-gradient(circle at 30% 20%, rgba(255,194,79,.22), transparent 32%),
linear-gradient(135deg,#2b145f,#11142b);
}
.oxleo-placeholder-cover.two{
background:
radial-gradient(circle at 65% 25%, rgba(110,216,255,.2), transparent 35%),
linear-gradient(135deg,#18335c,#11142b);
}
.oxleo-placeholder-cover.three{
background:
radial-gradient(circle at 40% 20%, rgba(255,95,126,.22), transparent 35%),
linear-gradient(135deg,#4b1833,#11142b);
}
.oxleo-placeholder-cover span{
color:#fff;
font-weight:900;
opacity:.7;
}
.oxleo-locked{
opacity:.72;
}
.oxleo-app-library .oxleo-empty{
margin-top:20px;
}
/* App library mobile: no hero, only rows/cards */
@media(max-width:1180px){
.oxleo-app-topbar{
display:block;
margin-bottom:22px;
}
.oxleo-top-actions{
margin-top:18px;
max-width:100%;
}
.oxleo-continue-card{
grid-template-columns:96px 1fr;
border-radius:20px;
}
.oxleo-continue-cover img{
width:96px;
}
.oxleo-continue-info strong{
font-size:19px;
}
.oxleo-mini-book{
flex-basis:142px;
}
.oxleo-cover-rail{
gap:14px;
margin-left:-16px;
margin-right:-16px;
padding-left:16px;
padding-right:16px;
}
}
@media(max-width:760px){
.oxleo-app-topbar h1{
font-size:36px;
}
.oxleo-continue-card{
width:100%;
}
.oxleo-top-actions button{
padding:11px 15px;
}
.oxleo-mini-book{
flex-basis:132px;
}
.oxleo-row-head span{
display:none;
}
}
/* ===== v1.5 ALL-IN-ONE: integrated app/library + story reader fixes ===== */
html:has(.oxleo-shell),
html:has(.oxleo-shell) body{
background:#080a19!important;
overflow-x:hidden!important;
}
.oxleo-shell{
width:100%!important;
max-width:100%!important;
overflow-x:hidden!important;
}
/* LIBRARY: app-first, no web hero */
.oxleo-library-hero{
display:none!important;
}
.oxleo-shelf-block{
margin-top:22px!important;
}
.oxleo-book-card{
max-width:260px!important;
}
.oxleo-cover-wrap{
display:none!important;
}
.oxleo-tabs button,
.oxleo-top-actions button{
cursor:pointer!important;
}
/* Header fix */
.oxleo-reader-header{
display:flex!important;
align-items:flex-start!important;
gap:12px!important;
flex-wrap:wrap!important;
margin-bottom:14px!important;
}
.oxleo-title{
min-width:220px!important;
max-width:420px!important;
}
.oxleo-title strong{
font-size:26px!important;
line-height:1.05!important;
letter-spacing:-.03em!important;
}
.oxleo-title span{
display:block!important;
margin-top:7px!important;
}
.oxleo-badges{
margin-left:auto!important;
display:flex!important;
gap:7px!important;
justify-content:flex-end!important;
max-width:52%!important;
}
.oxleo-badges span{
font-size:12px!important;
padding:6px 9px!important;
}
.oxleo-fullscreen{
margin-left:0!important;
}
/* Remove old page number artifacts */
.oxleo-page-num{
display:none!important;
}
/* Bottom controls */
.oxleo-strip{
margin-top:14px!important;
}
.oxleo-thumbs{
gap:12px!important;
}
.oxleo-thumb{
width:90px!important;
flex:0 0 90px!important;
}
.oxleo-count{
font-size:15px!important;
opacity:.92!important;
}
/* Mobile */
@media(max-width:1180px){
.oxleo-sidebar{
transform:translateX(-100%)!important;
}
.oxleo-shell.sidebar-open .oxleo-sidebar{
transform:none!important;
}
.oxleo-badges{
max-width:100%!important;
margin-left:0!important;
}
}
/* ===== v1.6 Reader polish: smaller menu, no overlap, better book typography ===== */
@media(min-width:1181px){
.oxleo-story-view,
.oxleo-library-view{
display:grid!important;
grid-template-columns:220px minmax(0,1fr)!important;
width:100vw!important;
max-width:100vw!important;
overflow:hidden!important;
}
.oxleo-sidebar{
position:sticky!important;
top:0!important;
left:auto!important;
bottom:auto!important;
width:220px!important;
min-width:220px!important;
height:100dvh!important;
transform:none!important;
padding:24px 16px!important;
gap:22px!important;
}
.oxleo-shell.sidebar-collapsed .oxleo-sidebar{
transform:none!important;
}
}
.oxleo-logo-img{
height:38px!important;
max-width:135px!important;
}
.oxleo-logo-x{
font-size:37px!important;
margin-left:-4px!important;
}
.oxleo-menu{
font-size:18px!important;
}
.oxleo-nav{
gap:8px!important;
}
.oxleo-nav a{
height:48px!important;
padding:0 15px!important;
font-size:15px!important;
border-radius:13px!important;
}
.oxleo-user{
padding:10px!important;
border-radius:16px!important;
}
.oxleo-user img{
width:40px!important;
height:40px!important;
}
.oxleo-user strong{
font-size:14px!important;
}
.oxleo-user span{
font-size:12px!important;
}
.oxleo-logout{
font-size:15px!important;
}
.oxleo-reader-header{
margin-bottom:10px!important;
gap:9px!important;
}
.oxleo-title strong{
font-size:21px!important;
line-height:1.12!important;
max-width:360px!important;
}
.oxleo-title span{
font-size:12px!important;
}
.oxleo-badges{
gap:6px!important;
}
.oxleo-badges span{
padding:6px 8px!important;
font-size:11.5px!important;
}
.oxleo-fullscreen{
padding:9px 12px!important;
font-size:13px!important;
}
.oxleo-strip{
margin-top:10px!important;
}
.oxleo-thumbs{
gap:10px!important;
}
.oxleo-thumb{
width:78px!important;
flex-basis:78px!important;
}
.oxleo-thumb span{
font-size:12px!important;
}
.oxleo-count{
font-size:13.5px!important;
}
.oxleo-motion-option{
padding:15px!important;
margin:12px 0!important;
}
.oxleo-motion-option strong{
font-size:15px!important;
}
.oxleo-motion-option small{
font-size:12.5px!important;
}
@media(max-width:1180px){
.oxleo-sidebar{
position:fixed!important;
left:0!important;
top:0!important;
bottom:0!important;
width:230px!important;
height:100dvh!important;
transform:translateX(-100%)!important;
z-index:1000!important;
}
.oxleo-shell.sidebar-open .oxleo-sidebar{
transform:none!important;
}
.oxleo-title strong{
font-size:19px!important;
}
}
@media(max-width:760px){
.oxleo-thumb{
width:68px!important;
flex-basis:68px!important;
}
}
.oxleo-mini-book h3{
font-size:14px!important;
}
.oxleo-mini-book p{
font-size:12px!important;
}
/* Activities after story */
.oxleo-end-activities{
margin-top:18px;
padding:20px;
border-radius:22px;
background:
radial-gradient(circle at 0% 0%, rgba(255,194,79,.20), transparent 32%),
linear-gradient(135deg, rgba(112,62,190,.22), rgba(255,255,255,.05));
border:1px solid rgba(255,255,255,.12);
}
.oxleo-activities-head span{
display:block;
color:var(--gold);
letter-spacing:.14em;
font-size:11px;
font-weight:900;
}
.oxleo-activities-head h2{
margin:6px 0 4px;
font-size:28px;
letter-spacing:-.03em;
}
.oxleo-activities-head p{
margin:0 0 16px;
color:var(--muted);
}
.oxleo-activity-grid{
display:grid;
grid-template-columns:repeat(5,minmax(120px,1fr));
gap:12px;
}
.oxleo-activity-card{
min-height:126px;
border:0;
border-radius:20px;
padding:16px;
color:#fff;
text-align:left;
cursor:pointer;
box-shadow:0 18px 42px rgba(0,0,0,.25);
transition:transform .18s ease, filter .18s ease;
}
.oxleo-activity-card:hover{
transform:translateY(-3px);
filter:brightness(1.06);
}
.oxleo-activity-card strong{
display:block;
font-size:18px;
margin-bottom:8px;
}
.oxleo-activity-card small{
display:block;
line-height:1.35;
color:rgba(255,255,255,.88);
}
.oxleo-activity-card.a1{background:linear-gradient(135deg,#6b4df6,#9b5cff);}
.oxleo-activity-card.a2{background:linear-gradient(135deg,#ff6b7a,#ff9a5c);}
.oxleo-activity-card.a3{background:linear-gradient(135deg,#2da86b,#56c58d);}
.oxleo-activity-card.a4{background:linear-gradient(135deg,#2d7fe8,#6ed8ff);}
.oxleo-activity-card.a5{background:linear-gradient(135deg,#ffb03a,#ffcf5a);color:#24160d;}
.oxleo-activity-card.a5 small{color:rgba(36,22,13,.75);}
@media(max-width:1180px){
.oxleo-activity-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}
@media(max-width:760px){
.oxleo-activity-grid{
grid-template-columns:1fr;
}
.oxleo-end-activities{
padding:16px;
}
}
/* ===== v1.8 The End page + fullscreen activity games ===== */
.oxleo-end-activities{
position:relative;
overflow:hidden;
margin-top:22px!important;
padding:30px!important;
min-height:360px;
border-radius:28px!important;
background:
radial-gradient(circle at 15% 10%, rgba(255,194,79,.30), transparent 25%),
radial-gradient(circle at 85% 0%, rgba(110,216,255,.16), transparent 28%),
linear-gradient(135deg, rgba(112,62,190,.26), rgba(255,255,255,.055))!important;
}
.oxleo-the-end-badge{
display:inline-flex;
align-items:center;
justify-content:center;
padding:12px 22px;
border-radius:999px;
background:#fff;
color:#19132a;
font-size:24px;
font-weight:950;
letter-spacing:-.03em;
box-shadow:0 18px 44px rgba(0,0,0,.24);
margin-bottom:14px;
}
.oxleo-end-celebrate{
position:absolute;
inset:0;
pointer-events:none;
}
.oxleo-end-celebrate span{
position:absolute;
width:10px;
height:10px;
border-radius:50%;
background:var(--gold);
animation:oxleoPop 2.2s ease-in-out infinite;
}
.oxleo-end-celebrate span:nth-child(1){left:18%;top:18%;}
.oxleo-end-celebrate span:nth-child(2){left:78%;top:22%;animation-delay:.25s;background:#6ed8ff;}
.oxleo-end-celebrate span:nth-child(3){left:66%;top:70%;animation-delay:.5s;background:#ff6b7a;}
.oxleo-end-celebrate span:nth-child(4){left:32%;top:78%;animation-delay:.75s;background:#56c58d;}
.oxleo-end-celebrate span:nth-child(5){left:52%;top:12%;animation-delay:1s;background:#fff;}
@keyframes oxleoPop{
0%,100%{transform:translateY(0) scale(.75);opacity:.35}
50%{transform:translateY(-12px) scale(1.25);opacity:1}
}
.oxleo-activity-grid{
grid-template-columns:repeat(5,minmax(130px,1fr))!important;
}
.oxleo-activity-card{
position:relative;
overflow:hidden;
}
.oxleo-activity-card::after{
content:"→";
position:absolute;
right:16px;
bottom:12px;
font-size:24px;
font-weight:900;
opacity:.75;
}
.oxleo-activity-shell{
width:min(1120px,100%);
height:min(760px,92dvh);
border-radius:34px;
border:1px solid rgba(255,255,255,.14);
background:linear-gradient(180deg,rgba(18,20,43,.98),rgba(10,12,30,.98));
box-shadow:0 36px 120px rgba(0,0,0,.55);
padding:28px;
position:relative;
display:flex;
flex-direction:column;
overflow:hidden;
}
.oxleo-activity-close{
position:absolute;
right:24px;
top:22px;
width:46px;
height:46px;
border:0;
border-radius:50%;
background:rgba(255,255,255,.10);
color:#fff;
font-size:30px;
cursor:pointer;
}
.oxleo-activity-kicker{
display:block;
color:var(--gold);
letter-spacing:.15em;
font-size:12px;
font-weight:950;
}
.oxleo-activity-title{
margin:8px 0 4px;
font-size:clamp(34px,4vw,56px);
line-height:.95;
letter-spacing:-.055em;
}
.oxleo-activity-instruction{
margin:0;
color:var(--muted);
font-size:18px;
}
.oxleo-activity-body{
flex:1;
display:grid;
gap:18px;
align-items:center;
padding:24px 0 18px;
min-height:0;
}
.oxleo-activity-bottom{
display:flex;
gap:12px;
align-items:center;
}
.oxleo-activity-progress{
flex:1;
height:10px;
border-radius:999px;
background:rgba(255,255,255,.10);
overflow:hidden;
}
.oxleo-activity-progress span{
display:block;
height:100%;
width:0%;
background:linear-gradient(90deg,var(--gold),#ff6b7a);
transition:width .2s ease;
}
.oxleo-activity-check,
.oxleo-activity-reset{
border:0;
border-radius:999px;
padding:13px 20px;
font-weight:950;
cursor:pointer;
}
.oxleo-activity-check{
background:var(--gold);
color:#1d1408;
}
.oxleo-activity-reset{
background:rgba(255,255,255,.10);
color:#fff;
}
/* Activity layouts */
.oxact-match{
display:grid;
grid-template-columns:1fr 1fr;
gap:22px;
height:100%;
}
.oxact-bank,
.oxact-targets{
display:grid;
grid-template-columns:1fr;
gap:12px;
}
.oxact-chip,
.oxact-target,
.oxact-order-card,
.oxact-choice{
border:1px solid rgba(255,255,255,.12);
background:rgba(255,255,255,.08);
color:#fff;
border-radius:20px;
padding:16px 18px;
font-weight:900;
cursor:pointer;
text-align:left;
}
.oxact-chip{
background:linear-gradient(135deg,rgba(107,77,246,.92),rgba(155,92,255,.92));
font-size:22px;
}
.oxact-target{
min-height:74px;
display:flex;
align-items:center;
gap:14px;
}
.oxact-icon{
width:50px;
height:50px;
border-radius:16px;
display:inline-flex;
align-items:center;
justify-content:center;
background:#fff;
color:#20142f;
font-size:25px;
flex:0 0 50px;
}
.oxact-target.filled{
border-color:rgba(255,194,79,.7);
background:rgba(255,194,79,.12);
}
.oxact-target.correct,
.oxact-choice.correct,
.oxact-order-card.correct{
border-color:#56c58d!important;
background:rgba(86,197,141,.18)!important;
}
.oxact-target.wrong,
.oxact-choice.wrong{
border-color:#ff6b7a!important;
background:rgba(255,107,122,.18)!important;
}
.oxact-scene-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:16px;
}
.oxact-scene{
border:1px solid rgba(255,255,255,.12);
border-radius:22px;
overflow:hidden;
background:rgba(255,255,255,.06);
cursor:pointer;
}
.oxact-scene img{
width:100%;
aspect-ratio:16/10;
object-fit:cover;
display:block;
}
.oxact-scene strong{
display:block;
padding:13px;
}
.oxact-scene.selected{
outline:4px solid var(--gold);
}
.oxact-order{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:14px;
}
.oxact-order-card{
min-height:140px;
display:flex;
flex-direction:column;
justify-content:space-between;
}
.oxact-order-card span{
display:inline-flex;
width:34px;
height:34px;
align-items:center;
justify-content:center;
border-radius:50%;
background:var(--gold);
color:#20142f;
}
.oxact-choices{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:16px;
}
.oxact-choice{
min-height:120px;
font-size:22px;
}
.oxact-speak{
text-align:center;
padding:28px;
}
.oxact-speak-card{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:180px;
width:min(620px,100%);
border-radius:34px;
background:linear-gradient(135deg,#ffb03a,#ffcf5a);
color:#24160d;
font-size:42px;
font-weight:950;
line-height:1.08;
box-shadow:0 26px 80px rgba(0,0,0,.28);
}
.oxact-feedback{
margin-top:16px;
padding:12px 16px;
border-radius:16px;
background:rgba(255,255,255,.08);
color:#fff;
font-weight:800;
}
@media(max-width:900px){
.oxleo-activity-shell{
height:94dvh;
border-radius:24px;
padding:18px;
}
.oxact-match,
.oxact-scene-grid,
.oxact-order,
.oxact-choices{
grid-template-columns:1fr;
overflow:auto;
}
.oxleo-activity-body{
overflow:auto;
}
}
.oxleo-app-topbar{
margin-bottom:18px!important;
}
.oxleo-app-topbar span{
display:none!important;
}
.oxleo-app-topbar h1{
font-size:clamp(32px,3.4vw,48px)!important;
margin:0!important;
letter-spacing:-.05em!important;
}
.oxleo-top-actions button{
padding:10px 15px!important;
font-size:14px!important;
border-radius:999px!important;
}
/* Logo/menu more minimal premium */
.oxleo-logo-img{
height:34px!important;
max-width:122px!important;
}
.oxleo-logo-x{
font-size:34px!important;
}
.oxleo-menu{
font-size:16px!important;
opacity:.85!important;
}
.oxleo-sidebar{
width:210px!important;
min-width:210px!important;
}
@media(min-width:1181px){
.oxleo-story-view,
.oxleo-library-view{
grid-template-columns:210px minmax(0,1fr)!important;
}
}
.oxleo-nav a{
height:44px!important;
font-size:14px!important;
padding:0 14px!important;
}
.oxleo-user img{
width:36px!important;
height:36px!important;
}
.oxleo-user strong{
font-size:13px!important;
}
.oxleo-user span{
font-size:11px!important;
}
.oxleo-logout{
font-size:14px!important;
}
/* Library: smaller Netflix-like covers, not large cards */
.oxleo-continue-card{
width:min(600px,100%)!important;
grid-template-columns:88px 1fr!important;
padding:12px!important;
border-radius:18px!important;
}
.oxleo-continue-cover img{
width:88px!important;
border-radius:12px!important;
}
.oxleo-continue-info strong{
font-size:20px!important;
}
.oxleo-continue-info a{
padding:8px 14px!important;
font-size:13px!important;
}
.oxleo-mini-book{
flex-basis:138px!important;
}
.oxleo-mini-book a,
.oxleo-placeholder-cover{
border-radius:15px!important;
}
.oxleo-mini-book h3{
font-size:13px!important;
}
.oxleo-mini-book p{
font-size:11.5px!important;
}
.oxleo-row-head h2,
.oxleo-continue-row h2{
font-size:22px!important;
}
/* Story reader: smaller controls and less bulky */
.oxleo-reader-header{
gap:8px!important;
}
.oxleo-title strong{
font-size:20px!important;
}
.oxleo-badges span{
font-size:11px!important;
padding:5px 8px!important;
}
.oxleo-fullscreen{
font-size:12px!important;
padding:8px 10px!important;
}
.oxleo-motion-option{
padding:13px!important;
}
.oxleo-motion-option strong{
font-size:14px!important;
}
.oxleo-motion-option small{
font-size:12px!important;
}
/* Activity modal: real image-word drag/drop */
.oxact-match{
grid-template-columns:0.9fr 1.1fr!important;
align-items:stretch!important;
}
.oxact-bank{
align-content:start!important;
}
.oxact-chip{
user-select:none;
touch-action:none;
cursor:grab!important;
text-align:center!important;
border:0!important;
box-shadow:0 18px 34px rgba(0,0,0,.25);
}
.oxact-chip:active{
cursor:grabbing!important;
}
.oxact-chip.dragging{
opacity:.55!important;
transform:scale(.96)!important;
}
.oxact-targets{
grid-template-columns:repeat(2,1fr)!important;
gap:14px!important;
}
.oxact-target{
min-height:190px!important;
display:flex!important;
flex-direction:column!important;
align-items:stretch!important;
justify-content:flex-start!important;
padding:0!important;
overflow:hidden!important;
border-radius:24px!important;
background:rgba(255,255,255,.065)!important;
}
.oxact-target img{
width:100%!important;
aspect-ratio:16/10!important;
object-fit:cover!important;
display:block!important;
}
.oxact-target strong{
display:block!important;
padding:12px 14px 3px!important;
font-size:15px!important;
}
.oxact-target em{
display:block!important;
margin:8px 12px 12px!important;
min-height:34px!important;
border-radius:12px!important;
background:rgba(0,0,0,.18)!important;
padding:8px 10px!important;
font-style:normal!important;
color:var(--gold)!important;
}
.oxact-target.over{
outline:4px solid rgba(255,194,79,.72)!important;
}
.oxact-target.correct{
outline:4px solid #56c58d!important;
}
.oxact-target.wrong{
outline:4px solid #ff6b7a!important;
}
.oxact-icon{
display:none!important;
}
/* Scene match cards also more premium */
.oxact-scene strong{
font-size:14px!important;
}
/* Mobile activity fixes */
@media(max-width:900px){
.oxact-targets{
grid-template-columns:1fr!important;
}
.oxact-target{
min-height:170px!important;
}
.oxact-bank{
grid-template-columns:repeat(2,1fr)!important;
}
.oxact-chip{
font-size:16px!important;
padding:13px!important;
}
}
/* ===== v2.0 activity and image fixes ===== */
/* Covers and activity images must crop, not squeeze */
.oxleo-mini-book img,
.oxleo-continue-cover img,
.oxleo-book-cover img,
.oxact-scene img,
.oxact-target img{
object-fit:cover!important;
object-position:center center!important;
}
/* Library cover visual more premium and not screenshot-like */
.oxleo-mini-book a,
.oxleo-placeholder-cover{
box-shadow:0 18px 42px rgba(0,0,0,.34)!important;
}
.oxleo-mini-book img{
background:#101327!important;
}
/* Activity modal better internal scroll */
.oxleo-activity-shell{
overflow:hidden!important;
}
.oxleo-activity-body{
min-height:0!important;
overflow:auto!important;
padding-right:4px!important;
}
/* Word Match: stable drag/click target cards */
.oxact-match{
grid-template-columns:360px minmax(0,1fr)!important;
gap:24px!important;
}
.oxact-bank{
align-content:start!important;
}
.oxact-chip{
min-height:58px!important;
border:0!important;
border-radius:20px!important;
cursor:grab!important;
color:#fff!important;
font-weight:950!important;
letter-spacing:.02em!important;
}
.oxact-chip.selected{
outline:4px solid rgba(255,194,79,.75)!important;
transform:translateY(-2px)!important;
}
.oxact-chip.dragging{
opacity:.45!important;
}
.oxact-targets{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:16px!important;
}
.oxact-target{
min-height:228px!important;
padding:0!important;
border-radius:24px!important;
overflow:hidden!important;
background:rgba(255,255,255,.07)!important;
border:1px solid rgba(255,255,255,.14)!important;
color:#fff!important;
text-align:left!important;
cursor:pointer!important;
}
.oxact-target img{
width:100%!important;
height:130px!important;
aspect-ratio:auto!important;
object-fit:cover!important;
object-position:center center!important;
display:block!important;
}
.oxact-target strong{
display:block!important;
padding:12px 14px 4px!important;
font-size:15px!important;
line-height:1.25!important;
color:#fff!important;
}
.oxact-target em{
display:block!important;
margin:8px 12px 12px!important;
min-height:38px!important;
border-radius:13px!important;
padding:9px 11px!important;
background:rgba(0,0,0,.20)!important;
color:var(--gold)!important;
font-style:normal!important;
font-weight:950!important;
}
.oxact-target.over{
outline:4px solid rgba(255,194,79,.8)!important;
}
.oxact-target.correct{
outline:4px solid #56c58d!important;
background:rgba(86,197,141,.13)!important;
}
.oxact-target.wrong{
outline:4px solid #ff6b7a!important;
background:rgba(255,107,122,.13)!important;
}
/* Scene Match: readable white text */
.oxact-scene{
color:#fff!important;
}
.oxact-scene strong{
color:#fff!important;
background:rgba(12,14,34,.96)!important;
font-weight:900!important;
line-height:1.25!important;
}
.oxact-scene.correct{
outline:4px solid #56c58d!important;
}
.oxact-scene.wrong{
outline:4px solid #ff6b7a!important;
}
/* Order: selected state and reorder friendly */
.oxact-order-card{
color:#fff!important;
cursor:pointer!important;
}
.oxact-order-card.selected{
outline:3px solid rgba(255,194,79,.72)!important;
background:rgba(255,194,79,.12)!important;
}
/* Choose: selected state */
.oxact-choice{
color:#fff!important;
cursor:pointer!important;
}
.oxact-choice.selected{
outline:4px solid rgba(255,194,79,.75)!important;
background:rgba(255,194,79,.13)!important;
}
/* Speak: add visual and body language tips */
.oxact-speak{
display:grid!important;
grid-template-columns:1fr 1fr!important;
gap:24px!important;
align-items:center!important;
text-align:left!important;
}
.oxact-speak-visual{
border-radius:28px!important;
overflow:hidden!important;
background:rgba(255,255,255,.06)!important;
border:1px solid rgba(255,255,255,.12)!important;
}
.oxact-speak-visual img{
width:100%!important;
aspect-ratio:16/10!important;
object-fit:cover!important;
display:block!important;
}
.oxact-speak-card{
width:100%!important;
min-height:150px!important;
padding:24px!important;
font-size:clamp(30px,3.5vw,48px)!important;
}
.oxact-body-tips{
margin-top:16px!important;
display:grid!important;
gap:10px!important;
}
.oxact-body-tips span{
display:block!important;
padding:12px 14px!important;
border-radius:16px!important;
background:rgba(255,255,255,.08)!important;
color:#fff!important;
font-weight:850!important;
}
.oxact-feedback{
grid-column:1 / -1!important;
}
/* Better fixed bottom buttons in modal */
.oxleo-activity-bottom{
padding-top:12px!important;
background:linear-gradient(180deg,rgba(10,12,30,0),rgba(10,12,30,.96) 36%)!important;
}
/* Mobile */
@media(max-width:900px){
.oxact-match{
grid-template-columns:1fr!important;
}
.oxact-targets{
grid-template-columns:1fr!important;
}
.oxact-target{
min-height:210px!important;
}
.oxact-speak{
grid-template-columns:1fr!important;
}
}
.oxleo-activity-shell{
width:min(1160px,100%)!important;
height:min(700px,92dvh)!important;
padding:22px!important;
border-radius:28px!important;
}
.oxleo-activity-close{
width:40px!important;
height:40px!important;
font-size:26px!important;
right:18px!important;
top:18px!important;
}
.oxleo-activity-top{
padding-right:52px!important;
}
.oxleo-activity-title{
font-size:clamp(30px,3vw,46px)!important;
margin:6px 0 2px!important;
}
.oxleo-activity-instruction{
font-size:15px!important;
}
.oxleo-activity-body{
padding:14px 0 10px!important;
overflow:hidden!important;
}
.oxleo-activity-bottom{
gap:10px!important;
padding-top:8px!important;
}
.oxleo-activity-check,
.oxleo-activity-reset,
.oxleo-activity-next{
padding:11px 16px!important;
font-size:14px!important;
white-space:nowrap!important;
}
.oxleo-activity-next{
border:0;
border-radius:999px;
background:rgba(255,255,255,.12);
color:#fff;
font-weight:950;
cursor:pointer;
}
.oxleo-activity-next:hover{
background:rgba(255,255,255,.20);
}
/* Word Match compact */
.oxact-match{
grid-template-columns:300px minmax(0,1fr)!important;
gap:18px!important;
height:100%!important;
align-items:stretch!important;
}
.oxact-bank{
gap:10px!important;
}
.oxact-chip{
min-height:48px!important;
padding:11px 14px!important;
font-size:15px!important;
border-radius:16px!important;
}
.oxact-targets{
gap:12px!important;
}
.oxact-target{
min-height:168px!important;
border-radius:18px!important;
}
.oxact-target img{
height:92px!important;
}
.oxact-target strong{
font-size:13px!important;
padding:9px 11px 2px!important;
}
.oxact-target em{
margin:6px 9px 9px!important;
min-height:30px!important;
padding:6px 9px!important;
font-size:13px!important;
}
/* Scene Match compact */
.oxact-scene-grid{
gap:12px!important;
}
.oxact-scene{
border-radius:18px!important;
}
.oxact-scene img{
height:140px!important;
aspect-ratio:auto!important;
}
.oxact-scene strong{
padding:10px!important;
font-size:13px!important;
}
/* Story Order compact */
.oxact-order{
gap:12px!important;
}
.oxact-order-card{
min-height:116px!important;
padding:13px!important;
border-radius:18px!important;
}
.oxact-order-card strong{
font-size:15px!important;
}
.oxact-order-card span{
width:30px!important;
height:30px!important;
}
/* Choose compact */
.oxact-choices{
gap:12px!important;
}
.oxact-choice{
min-height:92px!important;
font-size:18px!important;
border-radius:18px!important;
}
/* Speak compact */
.oxact-speak{
gap:18px!important;
}
.oxact-speak-visual{
border-radius:22px!important;
}
.oxact-speak-visual img{
max-height:260px!important;
}
.oxact-speak-card{
min-height:120px!important;
padding:20px!important;
font-size:clamp(26px,3vw,40px)!important;
border-radius:26px!important;
}
.oxact-body-tips{
gap:8px!important;
margin-top:12px!important;
}
.oxact-body-tips span{
padding:9px 12px!important;
font-size:14px!important;
border-radius:13px!important;
}
.oxact-feedback{
margin-top:8px!important;
padding:10px 13px!important;
font-size:14px!important;
}
/* Smaller height screens */
@media(max-height:760px){
.oxleo-activity-shell{
height:94dvh!important;
padding:18px!important;
}
.oxleo-activity-title{
font-size:34px!important;
}
.oxleo-activity-instruction{
font-size:14px!important;
}
.oxact-target{
min-height:150px!important;
}
.oxact-target img{
height:78px!important;
}
.oxact-scene img{
height:110px!important;
}
.oxact-order-card{
min-height:96px!important;
}
.oxact-choice{
min-height:80px!important;
}
}
/* Mobile can scroll when necessary */
@media(max-width:900px){
.oxleo-activity-shell{
height:94dvh!important;
padding:16px!important;
}
.oxleo-activity-body{
overflow:auto!important;
}
.oxact-match,
.oxact-scene-grid,
.oxact-order,
.oxact-choices,
.oxact-speak{
grid-template-columns:1fr!important;
}
}
/* ===== v2.2 Activity image-first layout ===== */
.oxleo-activity-shell{
height:min(720px,92dvh)!important;
}
.oxleo-activity-body{
padding:10px 0 8px!important;
}
/* Word Match: give most space to images, reduce label/drop zones */
.oxact-match{
grid-template-columns:280px minmax(0,1fr)!important;
gap:18px!important;
}
.oxact-bank{
gap:10px!important;
}
.oxact-chip{
min-height:48px!important;
font-size:15px!important;
}
.oxact-targets{
display:grid!important;
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:14px!important;
}
.oxact-target{
min-height:220px!important;
display:grid!important;
grid-template-rows:1fr auto auto!important;
border-radius:22px!important;
overflow:hidden!important;
}
.oxact-target img{
height:150px!important;
width:100%!important;
object-fit:cover!important;
object-position:center center!important;
}
.oxact-target strong{
padding:8px 12px 2px!important;
font-size:12.5px!important;
line-height:1.15!important;
min-height:auto!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
}
.oxact-target em{
margin:5px 10px 10px!important;
min-height:26px!important;
padding:5px 8px!important;
font-size:12px!important;
border-radius:10px!important;
line-height:1.1!important;
}
/* Smaller screens: still image-first */
@media(max-height:760px){
.oxact-target{
min-height:190px!important;
}
.oxact-target img{
height:126px!important;
}
.oxact-target strong{
font-size:12px!important;
padding:7px 10px 1px!important;
}
.oxact-target em{
margin:4px 9px 8px!important;
min-height:24px!important;
padding:4px 7px!important;
font-size:11.5px!important;
}
}
/* Scene Match images also larger */
.oxact-scene img{
height:160px!important;
}
.oxact-scene strong{
padding:8px 10px!important;
font-size:12.5px!important;
line-height:1.15!important;
min-height:auto!important;
}
@media(max-height:760px){
.oxact-scene img{
height:128px!important;
}
}
/* Modal bottom buttons compact */
.oxleo-activity-bottom{
gap:9px!important;
}
.oxleo-activity-check,
.oxleo-activity-reset,
.oxleo-activity-next{
padding:10px 14px!important;
font-size:13px!important;
}
/* Make horizontal scrollbar less visually heavy */
.oxleo-activity-body::-webkit-scrollbar{
height:8px;
width:8px;
}
.oxleo-activity-body::-webkit-scrollbar-thumb{
background:rgba(255,255,255,.18);
border-radius:999px;
}
/* No loading label */
.oxleo-video-loading::after{
content:none!important;
display:none!important;
}
/* Play state */
.oxleo-play.is-video-on{
border-color:rgba(255,194,79,.85)!important;
background:rgba(255,194,79,.18)!important;
}
.oxleo-play.is-video-on .oxico-pause::before,
.oxleo-play.is-video-on .oxico-pause::after{
background:var(--gold)!important;
}
.oxleo-full-close{
z-index:10000005!important;
position:fixed!important;
right:24px!important;
top:22px!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
opacity:1!important;
visibility:visible!important;
pointer-events:auto!important;
background:rgba(255,255,255,.14)!important;
backdrop-filter:blur(10px)!important;
}
/* ===== v2.7 Listen narration controls ===== */
.oxleo-listen,
.oxleo-read-speed{
border:1px solid rgba(255,255,255,.12);
background:rgba(255,255,255,.07);
color:#fff;
border-radius:999px;
height:38px;
padding:0 14px;
font-weight:900;
cursor:pointer;
}
.oxleo-listen{
background:linear-gradient(180deg,#fff,#e9e6ff);
color:#11152a;
}
.oxleo-listen.is-listening{
background:linear-gradient(180deg,#ffd16b,#ffb63e);
color:#1b1208;
}
.oxleo-read-speed{
font-size:12px;
}
.oxleo-read-speed.active{
border-color:rgba(255,194,79,.7);
color:var(--gold);
background:rgba(255,194,79,.12);
}
.oxleo-narration-status{
position:absolute;
left:18px;
bottom:18px;
z-index:70;
padding:8px 12px;
border-radius:999px;
background:rgba(8,10,24,.72);
color:#fff;
font-size:12px;
font-weight:900;
pointer-events:none;
backdrop-filter:blur(8px);
}
.oxleo-narration-status[hidden]{
display:none!important;
}
.oxleo-count{
margin-left:auto!important;
}
@media(max-width:760px){
.oxleo-listen,
.oxleo-read-speed{
height:34px;
padding:0 11px;
font-size:12px;
}
}
.oxleo-count{margin-left:auto;color:#dad6e8;font-weight:600}
.oxleo-full-close{z-index:10010!important;position:fixed!important;top:18px!important;right:18px!important;width:54px!important;height:54px!important;border-radius:50%!important;background:rgba(10,12,32,.88)!important;border:1px solid rgba(255,255,255,.14)!important;color:#fff!important;font-size:36px!important;line-height:1!important}
.oxleo-the-end-badge{display:inline-block;padding:12px 18px;border-radius:999px;background:rgba(255,194,79,.14);border:1px solid rgba(255,194,79,.4);font-weight:800;color:#ffd98d;margin-bottom:12px}
.oxact-target{overflow:hidden}.oxact-target img{width:100%;aspect-ratio:16/8.5;object-fit:cover;display:block}.oxact-target strong{display:block;padding:10px 14px 0}.oxact-target em{display:block;padding:6px 14px 14px;font-style:normal;font-weight:700;color:#ffcf61;background:none;min-height:24px}.oxact-speak-visual img{width:100%;max-width:360px;border-radius:16px;display:block}
@media(max-width:760px){ .oxleo-count{width:100%;margin-left:0;text-align:center}}
.oxleo-video-error{
position:absolute;
left:12px;
bottom:12px;
z-index:30;
padding:8px 11px;
border-radius:999px;
background:rgba(178,34,34,.82);
color:#fff;
font-size:12px;
font-weight:800;
display:none;
}
/* New layer; not affected by old .oxleo-video rules */
.oxleo-live-video-layer{
position:absolute!important;
inset:0!important;
width:100%!important;
height:100%!important;
z-index:3!important;
display:none;
background:#000;
pointer-events:none;
}
.oxleo-live-video-layer.is-on{
display:block!important;
}
.oxleo-live-video-layer video{
position:absolute!important;
inset:0!important;
width:100%!important;
height:100%!important;
object-fit:cover!important;
object-position:center center!important;
display:block!important;
opacity:1!important;
visibility:visible!important;
background:#000!important;
}
/* Frontend debug/error chip */
.oxleo-video-debug{
position:absolute;
right:14px;
bottom:14px;
z-index:20;
max-width:min(520px,80%);
padding:9px 12px;
border-radius:12px;
font-size:12px;
line-height:1.35;
background:rgba(160,30,30,.88);
color:#fff;
font-weight:800;
display:none;
box-shadow:0 12px 28px rgba(0,0,0,.28);
}
.oxleo-video-debug code{
display:block;
margin-top:4px;
color:#fff;
font-weight:600;
word-break:break-all;
}
/* Make motion panel selection obvious */
.oxleo-motion-option.active{
border-color:rgba(255,194,79,.72)!important;
background:rgba(255,194,79,.12)!important;
}
.oxleo-nav-btn{min-width:122px!important}
.oxleo-count{text-align:right!important;margin-left:0!important}
@media(max-width:760px){
.oxleo-nav-btn{min-width:auto!important}
.oxleo-count{display:none!important}
}
body.oxleo-fullscreen-lock{overflow:hidden!important;height:100vh!important;touch-action:none!important}
@media(max-width:760px){
.oxleo-full-close{top:8px!important;right:8px!important;width:38px!important;height:38px!important;font-size:28px!important}
}
.oxleo-activity-shell{width:min(1180px,96vw)!important;height:min(760px,94dvh)!important;max-height:94dvh!important;display:grid!important;grid-template-rows:auto 1fr auto!important;overflow:hidden!important;padding:18px!important}
.oxleo-activity-top h2{font-size:clamp(24px,3vw,44px)!important;margin:4px 0!important}
.oxleo-activity-instruction{margin:0 0 6px!important}
.oxleo-activity-body{min-height:0!important;overflow:hidden!important}
.oxact-match{height:100%!important;display:grid!important;grid-template-columns:minmax(170px,320px) 1fr!important;gap:14px!important}
.oxact-bank{gap:8px!important}
.oxact-chip{min-height:44px!important;padding:8px 10px!important;font-size:14px!important}
.oxact-targets{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;min-height:0!important}
.oxact-target{min-height:0!important;display:grid!important;grid-template-rows:minmax(84px,1fr) auto auto!important}
.oxact-target img{width:100%!important;height:100%!important;min-height:84px!important;max-height:145px!important;object-fit:cover!important;object-position:center!important}
.oxact-target strong{font-size:13px!important;line-height:1.2!important;padding:7px 10px 0!important}
.oxact-target em{font-size:12px!important;padding:4px 10px 8px!important}
.oxleo-activity-bottom{padding-top:8px!important;gap:8px!important}
@media(max-width:760px){
.oxleo-activity-shell{width:96vw!important;height:92dvh!important;padding:12px!important;border-radius:18px!important}
.oxleo-activity-top h2{font-size:28px!important}
.oxleo-activity-kicker,.oxleo-activity-instruction{font-size:12px!important}
.oxact-match{grid-template-columns:1fr!important;grid-template-rows:auto 1fr!important;gap:8px!important}
.oxact-bank{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:6px!important}
.oxact-chip{min-height:34px!important;padding:6px 4px!important;font-size:11px!important;border-radius:10px!important}
.oxact-targets{grid-template-columns:repeat(2,1fr)!important;gap:7px!important}
.oxact-target{grid-template-rows:minmax(64px,1fr) auto auto!important;border-radius:12px!important}
.oxact-target img{min-height:64px!important;max-height:92px!important}
.oxact-target strong{font-size:10.5px!important;padding:5px 7px 0!important}
.oxact-target em{font-size:10px!important;padding:3px 7px 5px!important}
.oxleo-activity-bottom button{min-height:34px!important;padding:7px 10px!important;font-size:12px!important}
}
.oxleo-video-muted-note{position:absolute;left:14px;bottom:14px;z-index:25;background:rgba(7,9,23,.72);color:#fff;padding:7px 10px;border-radius:999px;font-size:11px;font-weight:800;pointer-events:none}
/* ===== v3.6 category library and admin edit clarity ===== */
.oxleo-library-sub{color:#cbc7df;margin:.25rem 0 0;font-size:14px}
.oxleo-empty-row{border:1px dashed rgba(255,255,255,.16);background:rgba(255,255,255,.04);color:#cbc7df;border-radius:16px;padding:22px;margin:8px 0 20px}
.oxleo-v36-library .oxleo-row{margin-top:28px}
.oxleo-v36-library .oxleo-row-head h2{letter-spacing:-.02em}
.oxleo-v36-library .oxleo-cover-rail{padding-bottom:14px}
.oracyx-current-edit{display:inline-block;background:#eef4ff;border:1px solid #b2ccff;color:#1849a9;border-radius:999px;padding:7px 12px;font-weight:700;margin-left:8px}
/* ===== v4.1 library overlay + UX fixes ===== */
.oxleo-mini-link{position:relative;display:block;width:100%;height:100%}
.oxleo-mini-overlay{position:absolute;inset:0;display:flex;align-items:flex-end;pointer-events:none}
.oxleo-mini-grad{position:absolute;left:0;right:0;bottom:0;height:48%;background:linear-gradient(180deg,rgba(6,8,20,0) 0%,rgba(6,8,20,.42) 34%,rgba(6,8,20,.78) 68%,rgba(6,8,20,.96) 100%)}
.oxleo-mini-meta{position:relative;z-index:2;padding:12px 12px 10px;color:#fff;width:100%}
.oxleo-mini-meta strong{display:block;font-size:15px;line-height:1.05;margin-bottom:5px;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.oxleo-mini-meta small{display:block;font-size:11px;line-height:1.25;color:rgba(255,255,255,.82);min-height:28px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.oxleo-mini-badges{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.oxleo-mini-badges span,.oxleo-mini-meta em{display:inline-flex;align-items:center;justify-content:center;padding:3px 7px;border-radius:999px;font-style:normal;font-size:10px;font-weight:800;border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(8px)}
.oxleo-mini-badges .b-green{background:#2f9a57;color:#fff}
.oxleo-mini-badges .b-purple{background:#6f4ac6;color:#fff}
.oxleo-mini-badges .b-blue{background:#3f69d8;color:#fff}
.oxleo-mini-meta em{margin-top:6px;background:rgba(30,22,10,.75);border-color:rgba(255,194,79,.52);color:#ffd16b}
.oxleo-mini-book h3,.oxleo-mini-book p{display:none}
/* word match clarity */
.oxact-chip.used{opacity:.45;transform:none!important}
.oxact-target{position:relative}
.oxact-target.filled{outline:2px solid rgba(255,194,79,.7);box-shadow:0 0 0 4px rgba(255,194,79,.12)}
.oxact-drop-badge{display:inline-flex;align-items:center;justify-content:center;margin-top:8px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.08);color:#fff;font-size:12px;font-weight:800;border:1px dashed rgba(255,255,255,.18)}
.oxact-target.filled .oxact-drop-badge{background:rgba(255,194,79,.16);border-style:solid;border-color:rgba(255,194,79,.42);color:#ffd16b}
/* mobile fit: no stacked overflow */
html.oxleo-lock-scroll,body.oxleo-lock-scroll{overflow:hidden!important;height:100%!important}
@media(max-width:760px){
.oxleo-strip{display:none!important}
.oxleo-nav-btn,.oxleo-listen,.oxleo-read-speed{min-width:0!important;padding:12px 8px!important;font-size:13px!important;border-radius:14px!important;white-space:nowrap!important}
.oxleo-full-close{z-index:1000001!important;top:10px!important;right:10px!important}
}
/* ===== v4.2 premium covers + story spread restore ===== */
/* Library cards: match the premium cover style from the continue/Leo example */
.oxleo-mini-book{flex:0 0 150px!important}
.oxleo-mini-book .oxleo-mini-link{position:relative!important;display:block!important;overflow:hidden!important;border-radius:18px!important;background:#11142b!important;border:1px solid rgba(255,255,255,.12)!important;box-shadow:0 20px 48px rgba(0,0,0,.34)!important}
.oxleo-mini-book .oxleo-mini-link img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important}
.oxleo-mini-overlay{position:absolute!important;inset:0!important;display:flex!important;align-items:flex-end!important;justify-content:stretch!important;pointer-events:none!important}
.oxleo-mini-grad{position:absolute!important;left:0!important;right:0!important;bottom:0!important;height:46%!important;background:linear-gradient(180deg,rgba(8,10,25,0) 0%,rgba(8,10,25,.14) 15%,rgba(8,10,25,.62) 50%,rgba(8,10,25,.92) 100%)!important}
.oxleo-mini-meta{position:relative!important;z-index:2!important;width:100%!important;padding:10px 10px 9px!important;color:#fff!important}
.oxleo-mini-meta strong{display:block!important;font-size:11px!important;line-height:1.08!important;font-weight:900!important;letter-spacing:-.01em!important;margin:0 0 5px!important;text-shadow:0 2px 8px rgba(0,0,0,.5)!important}
.oxleo-mini-meta small{display:block!important;font-size:9px!important;line-height:1.28!important;color:rgba(255,255,255,.82)!important;min-height:24px!important;overflow:hidden!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;margin:0 0 7px!important}
.oxleo-mini-badges{display:flex!important;gap:4px!important;flex-wrap:wrap!important;margin:0 0 5px!important}
.oxleo-mini-badges span{display:inline-flex!important;align-items:center!important;justify-content:center!important;padding:3px 7px!important;border-radius:999px!important;font-size:9px!important;font-weight:900!important;color:#fff!important;border:1px solid rgba(255,255,255,.1)!important;line-height:1!important}
.oxleo-mini-badges .b-green{background:#38a862!important}
.oxleo-mini-badges .b-purple{background:#7a58d7!important}
.oxleo-mini-badges .b-blue{background:#4b78eb!important}
.oxleo-mini-meta em{display:inline-flex!important;align-items:center!important;justify-content:center!important;padding:4px 8px!important;border-radius:999px!important;font-size:9px!important;font-style:normal!important;font-weight:900!important;color:#ffcf72!important;background:rgba(26,20,10,.74)!important;border:1px solid rgba(255,194,79,.4)!important}
/* ===== v4.3 HOME + MOBILE + IMAGE VISIBILITY FIX ===== */
/* Home page */
.oxleo-home-shell{min-height:100dvh;background:radial-gradient(circle at 12% 0%,rgba(126,78,255,.26),transparent 34%),linear-gradient(180deg,#080a19,#0b0d20 58%,#070918);color:#fff;padding:22px clamp(18px,4vw,64px);overflow:hidden}
.oxhome-nav{display:flex;align-items:center;justify-content:space-between;gap:18px;max-width:1240px;margin:0 auto 46px}
.oxhome-brand{display:flex;align-items:center;gap:6px}.oxhome-brand img{height:42px;width:auto}.oxhome-brand strong{font-size:40px;color:#ffc24f;line-height:1}
.oxhome-nav nav{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.oxhome-nav a{color:#e9e5f5;padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);font-weight:760}
.oxhome-nav a:last-child{background:rgba(255,194,79,.13);border-color:rgba(255,194,79,.35);color:#ffd16b}
.oxhome-hero{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1fr minmax(320px,520px);gap:42px;align-items:center;min-height:560px}
.oxhome-copy span,.oxhome-section-head span,.oxhome-resources span{color:#ffc24f;font-weight:950;letter-spacing:.14em;font-size:12px}.oxhome-copy h1{font-size:clamp(46px,6vw,86px);letter-spacing:-.07em;line-height:.92;margin:12px 0 18px}.oxhome-copy p{color:#d8d3e8;font-size:clamp(18px,2vw,23px);line-height:1.45;max-width:680px}
.oxhome-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.oxhome-actions a{display:inline-flex;align-items:center;justify-content:center;padding:15px 20px;border-radius:999px;background:rgba(255,255,255,.08);color:#fff;font-weight:900;border:1px solid rgba(255,255,255,.12)}.oxhome-actions .primary{background:#fff;color:#11152a}
.oxhome-stack{position:relative;height:500px}.oxhome-book-card{position:absolute;width:210px;aspect-ratio:3/4;border-radius:24px;overflow:hidden;border:1px solid rgba(255,255,255,.12);box-shadow:0 38px 90px rgba(0,0,0,.42);background:#11142b}.oxhome-book-card img{width:100%;height:100%;object-fit:cover}.oxhome-book-card div{position:absolute;left:0;right:0;bottom:0;padding:46px 14px 14px;background:linear-gradient(180deg,transparent,rgba(7,9,22,.95))}.oxhome-book-card strong{display:block;font-size:17px;line-height:1.05}.oxhome-book-card small{color:#d8d3e8}.oxhome-book-card.card-1{left:35px;top:60px;transform:rotate(-8deg)}.oxhome-book-card.card-2{left:180px;top:20px;transform:rotate(4deg);z-index:3}.oxhome-book-card.card-3{left:310px;top:115px;transform:rotate(9deg)}
.oxhome-section{max-width:1240px;margin:54px auto}.oxhome-section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:18px}.oxhome-section-head h2{font-size:clamp(28px,3.5vw,46px);line-height:1;letter-spacing:-.05em;max-width:760px;margin:8px 0 0}.oxhome-section-head a{color:#ffc24f;font-weight:900}
.oxhome-rail{display:flex;gap:18px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;padding:6px 0 18px}.oxhome-rail::-webkit-scrollbar{display:none}.oxhome-cover{position:relative;flex:0 0 172px;aspect-ratio:3/4;border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.12);scroll-snap-align:start;box-shadow:0 20px 48px rgba(0,0,0,.32);transform:translateZ(0)}.oxhome-cover img{width:100%;height:100%;object-fit:cover}.oxhome-cover-overlay{position:absolute;left:0;right:0;bottom:0;padding:44px 12px 12px;background:linear-gradient(180deg,transparent,rgba(8,10,25,.96))}.oxhome-cover-overlay strong{display:block;color:#fff;font-size:14px;line-height:1.05}.oxhome-cover-overlay small{color:#d8d3e8;font-size:11px}
.oxhome-resources{max-width:1240px;margin:60px auto 30px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.oxhome-resources article{padding:24px;border-radius:26px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);box-shadow:0 24px 70px rgba(0,0,0,.22)}.oxhome-resources h3{font-size:26px;margin:8px 0}.oxhome-resources p{color:#d8d3e8;line-height:1.5}
/* Mobile left spacing: move content slightly right and stop edge clipping */
@media(max-width:760px){
.oxleo-app-topbar h1,.oxleo-continue-row h2,.oxleo-row-head h2{padding-left:2px!important}
.oxleo-cover-rail{padding-left:2px!important;margin-left:0!important;scroll-padding-left:2px!important}
.oxhome-nav{align-items:flex-start}.oxhome-nav nav{justify-content:flex-start}.oxhome-hero{grid-template-columns:1fr;min-height:auto}.oxhome-stack{height:300px}.oxhome-book-card{width:150px}.oxhome-book-card.card-1{left:0;top:36px}.oxhome-book-card.card-2{left:100px;top:0}.oxhome-book-card.card-3{left:205px;top:60px}.oxhome-resources{grid-template-columns:1fr}.oxhome-section-head{display:block}.oxhome-cover{flex-basis:150px}.oxleo-home-shell{padding-left:22px;padding-right:14px}
}
/* Smooth app-like horizontal rails */
.oxleo-cover-rail,.oxhome-rail,.oxleo-thumbs{scroll-behavior:smooth!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior-x:contain!important;will-change:scroll-position!important;contain:layout paint!important}
.oxleo-mini-book,.oxhome-cover,.oxleo-thumb{transform:translateZ(0);backface-visibility:hidden}
/* Premium cover overlay: lower half only, grey/dark translucent panel */
.oxleo-mini-book{flex:0 0 150px!important}
.oxleo-mini-book .oxleo-mini-link{position:relative!important;display:block!important;overflow:hidden!important;border-radius:18px!important;background:#11142b!important;border:1px solid rgba(255,255,255,.13)!important;box-shadow:0 20px 48px rgba(0,0,0,.34)!important}
.oxleo-mini-book .oxleo-mini-link img{width:100%!important;height:100%!important;object-fit:cover!important}
.oxleo-mini-overlay{position:absolute!important;left:0!important;right:0!important;bottom:0!important;top:auto!important;height:48%!important;display:block!important;pointer-events:none!important;background:linear-gradient(180deg,rgba(30,32,42,.10) 0%,rgba(30,32,42,.60) 28%,rgba(18,20,30,.92) 100%)!important;backdrop-filter:blur(3px)!important}
.oxleo-mini-grad{display:none!important}
.oxleo-mini-meta{position:absolute!important;left:0!important;right:0!important;bottom:0!important;padding:9px 10px 8px!important;color:#fff!important}
.oxleo-mini-meta strong{display:block!important;font-size:12px!important;line-height:1.06!important;font-weight:950!important;margin:0 0 4px!important;letter-spacing:-.02em!important;text-shadow:0 2px 6px rgba(0,0,0,.48)!important}
.oxleo-mini-meta small{display:block!important;font-size:8.5px!important;line-height:1.25!important;color:rgba(255,255,255,.78)!important;margin:0 0 6px!important;min-height:20px!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important}
.oxleo-mini-badges{display:flex!important;gap:4px!important;flex-wrap:wrap!important;margin:0 0 5px!important}.oxleo-mini-badges span{font-size:8.5px!important;font-weight:950!important;padding:3px 6px!important;border-radius:999px!important;line-height:1!important}.oxleo-mini-meta em{font-size:8.5px!important;padding:4px 7px!important;border-radius:999px!important}
/* ===== v4.4 root home + mobile alignment + cover overlay + no-black story fix ===== */
/* Homepage/root */
body.home .oxleo-home-shell,
body.front-page .oxleo-home-shell{min-height:100dvh}
/* Fix mobile content still too far left */
@media(max-width:760px){
.oxleo-cover-rail{
padding-left:4px!important;
padding-right:18px!important;
}
.oxleo-home-shell{
padding-left:30px!important;
padding-right:16px!important;
}
}
/* Premium cover overlay: lower half only; text cannot escape grey/dark panel */
.oxleo-mini-book .oxleo-mini-link{
position:relative!important;
overflow:hidden!important;
border-radius:18px!important;
}
.oxleo-mini-overlay{
position:absolute!important;
left:0!important;
right:0!important;
top:auto!important;
bottom:0!important;
height:52%!important;
min-height:92px!important;
display:block!important;
overflow:hidden!important;
background:
linear-gradient(180deg,
rgba(30,32,42,.04) 0%,
rgba(44,45,54,.58) 28%,
rgba(20,22,32,.91) 72%,
rgba(9,11,25,.98) 100%
)!important;
backdrop-filter:blur(4px)!important;
border-top:1px solid rgba(255,255,255,.10)!important;
}
.oxleo-mini-meta{
position:absolute!important;
left:0!important;
right:0!important;
bottom:0!important;
height:100%!important;
box-sizing:border-box!important;
padding:9px 10px 8px!important;
display:flex!important;
flex-direction:column!important;
justify-content:flex-end!important;
gap:4px!important;
overflow:hidden!important;
}
.oxleo-mini-meta strong{
font-size:11px!important;
line-height:1.05!important;
max-height:24px!important;
overflow:hidden!important;
display:-webkit-box!important;
-webkit-line-clamp:2!important;
-webkit-box-orient:vertical!important;
margin:0!important;
}
.oxleo-mini-meta small{
font-size:8px!important;
line-height:1.18!important;
max-height:19px!important;
min-height:0!important;
overflow:hidden!important;
display:-webkit-box!important;
-webkit-line-clamp:2!important;
-webkit-box-orient:vertical!important;
margin:0!important;
}
.oxleo-mini-badges{
gap:3px!important;
margin:1px 0 0!important;
max-height:18px!important;
overflow:hidden!important;
}
.oxleo-mini-badges span{
font-size:7.6px!important;
padding:3px 5px!important;
line-height:1!important;
}
.oxleo-mini-meta em{
align-self:flex-start!important;
font-size:7.6px!important;
padding:3px 6px!important;
line-height:1!important;
max-width:100%!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
white-space:nowrap!important;
}
/* Landscape/mobile: no inner scroll; user should use fullscreen/PWA for URL-free experience */
@media(max-width:920px) and (orientation:landscape){
html,body{
overscroll-behavior:none!important;
}
}
/* smoother rails */
.oxleo-cover-rail{
scroll-snap-type:x proximity!important;
scroll-behavior:smooth!important;
-webkit-overflow-scrolling:touch!important;
}
.oxleo-mini-book{
scroll-snap-align:start!important;
will-change:transform!important;
}
/* ===== v4.5 final home + story spread layout fix ===== */
/* Kill theme width constraints on root home */
body.home,
body.home .wp-site-blocks,
body.home main,
body.home .entry-content,
body.home .wp-block-post-content{
width:100%!important;
max-width:none!important;
margin:0!important;
padding:0!important;
overflow-x:hidden!important;
background:#070918!important;
}
/* Home should use the full browser width, not a narrow centred page column */
.oxleo-home-shell{
width:100vw!important;
max-width:none!important;
margin:0!important;
min-height:100dvh!important;
box-sizing:border-box!important;
padding:28px clamp(28px,5vw,76px)!important;
background:
radial-gradient(circle at 15% 0%,rgba(126,78,255,.24),transparent 36%),
radial-gradient(circle at 85% 10%,rgba(255,194,79,.12),transparent 26%),
linear-gradient(180deg,#080a19,#0b0d20 58%,#070918)!important;
}
.oxhome-nav,
.oxhome-hero,
.oxhome-section,
.oxhome-resources{
max-width:1360px!important;
width:100%!important;
}
.oxhome-nav{
justify-content:space-between!important;
margin-bottom:54px!important;
}
.oxhome-hero{
grid-template-columns:minmax(520px,1fr) minmax(360px,560px)!important;
min-height:620px!important;
gap:min(7vw,86px)!important;
}
.oxhome-copy{
position:relative!important;
z-index:5!important;
}
.oxhome-copy h1{
max-width:720px!important;
font-size:clamp(58px,6vw,96px)!important;
line-height:.9!important;
}
.oxhome-copy p{
max-width:650px!important;
}
.oxhome-stack{
position:relative!important;
z-index:2!important;
height:560px!important;
overflow:visible!important;
}
.oxhome-book-card{
pointer-events:none!important;
}
.oxhome-book-card.card-1{left:0!important;top:122px!important;transform:rotate(-7deg)!important}
.oxhome-book-card.card-2{left:160px!important;top:64px!important;transform:rotate(4deg)!important;z-index:4!important}
.oxhome-book-card.card-3{left:310px!important;top:136px!important;transform:rotate(9deg)!important}
/* Mobile home: no book cards behind title, no text collision */
@media(max-width:760px){
.oxleo-home-shell{
width:100vw!important;
padding:22px 18px 34px 30px!important;
}
.oxhome-nav{
display:block!important;
margin-bottom:28px!important;
}
.oxhome-brand{
margin-bottom:16px!important;
}
.oxhome-nav nav{
display:flex!important;
gap:8px!important;
overflow-x:auto!important;
padding-bottom:6px!important;
scrollbar-width:none!important;
-webkit-overflow-scrolling:touch!important;
}
.oxhome-nav nav::-webkit-scrollbar{display:none!important}
.oxhome-nav a{
flex:0 0 auto!important;
font-size:13px!important;
padding:9px 12px!important;
}
.oxhome-hero{
display:block!important;
min-height:auto!important;
}
.oxhome-copy h1{
font-size:clamp(42px,13vw,66px)!important;
line-height:.94!important;
max-width:96%!important;
margin-top:20px!important;
}
.oxhome-copy p{
font-size:17px!important;
max-width:92%!important;
}
.oxhome-stack{
display:none!important;
}
}
/* Premium cover cards: lower grey overlay, smaller safe text */
.oxleo-mini-overlay{
height:48%!important;
min-height:84px!important;
overflow:hidden!important;
}
.oxleo-mini-meta{
padding:8px 9px 7px!important;
gap:3px!important;
}
.oxleo-mini-meta strong{
font-size:10.2px!important;
line-height:1.05!important;
max-height:22px!important;
-webkit-line-clamp:2!important;
}
.oxleo-mini-meta small{
font-size:7.6px!important;
line-height:1.15!important;
max-height:17px!important;
-webkit-line-clamp:2!important;
}
.oxleo-mini-badges{
max-height:16px!important;
}
.oxleo-mini-badges span{
font-size:7px!important;
padding:2.5px 4.5px!important;
}
.oxleo-mini-meta em{
font-size:7px!important;
padding:3px 5.5px!important;
}
/* Landscape mobile: use almost the whole viewport for the book */
@media(max-width:920px) and (orientation:landscape){
.oxleo-reader-header{
min-height:44px!important;
}
}
/* Animated mode: video layer fills the whole book, text remains above it. */
.oxleo-live-video-layer{
position:absolute!important;
inset:0!important;
z-index:2!important;
}
/* Admin save button clarity */
.oracyx-status{
font-weight:700!important;
}
/* ===== v4.7 home/mobile/kindergarten/loading fixes ===== */
/* Home mobile top breathing space */
@media(max-width:760px){
.oxleo-home-shell{
padding-top:calc(env(safe-area-inset-top, 0px) + 42px)!important;
}
.oxhome-nav{
margin-bottom:34px!important;
}
.oxhome-nav-minimal{
display:none!important;
}
.oxhome-actions{
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:8px!important;
width:100%!important;
max-width:100%!important;
}
.oxhome-actions a{
min-width:0!important;
width:100%!important;
padding:12px 8px!important;
font-size:12px!important;
border-radius:16px!important;
white-space:nowrap!important;
box-sizing:border-box!important;
}
}
/* Remove top nav links on web too */
.oxhome-nav-minimal{
display:none!important;
}
.oxhome-nav{
justify-content:flex-start!important;
}
/* Library top not too close on mobile */
@media(max-width:760px){
.oxleo-app-topbar h1{
margin-top:0!important;
}
}
/* Loading overlay */
.oxleo-loading-overlay{
position:fixed;
inset:0;
z-index:1000005;
display:flex;
align-items:center;
justify-content:center;
background:
radial-gradient(circle at 50% 25%,rgba(126,78,255,.28),transparent 34%),
rgba(5,7,18,.96);
color:#fff;
transition:opacity .28s ease, visibility .28s ease;
}
.oxleo-loading-overlay.done{
opacity:0;
visibility:hidden;
}
.oxleo-loading-card{
width:min(340px,82vw);
border-radius:28px;
padding:28px;
background:rgba(255,255,255,.065);
border:1px solid rgba(255,255,255,.11);
box-shadow:0 30px 100px rgba(0,0,0,.38);
text-align:center;
}
.oxleo-loading-logo{
display:flex;
align-items:center;
justify-content:center;
gap:4px;
font-size:38px;
font-weight:950;
letter-spacing:-.06em;
margin-bottom:20px;
}
.oxleo-loading-logo span{color:#fff}
.oxleo-loading-logo b{color:#ffc24f}
.oxleo-loading-bar{
height:10px;
border-radius:999px;
overflow:hidden;
background:rgba(255,255,255,.12);
margin:0 0 14px;
}
.oxleo-loading-bar i{
display:block;
height:100%;
width:0%;
border-radius:999px;
background:linear-gradient(90deg,#7a5cff,#ffc24f);
transition:width .25s ease;
}
.oxleo-loading-card strong{
font-size:14px;
color:#dcd7ea;
}
.oxleo-loading-card em{
font-style:normal;
color:#ffc24f;
}
/* Kindergarten image/listening-only activity */
.oxkinder-activity{
height:100%;
display:grid;
grid-template-rows:auto 1fr auto;
gap:16px;
align-items:center;
justify-items:center;
}
.oxkinder-speaker{
width:92px;
height:92px;
border-radius:50%;
border:1px solid rgba(255,194,79,.45);
background:rgba(255,194,79,.16);
color:#fff;
font-size:42px;
box-shadow:0 20px 50px rgba(0,0,0,.22);
}
.oxkinder-speaker.pulse{
animation:oxkPulse .7s ease;
}
@keyframes oxkPulse{
0%{transform:scale(1)}
45%{transform:scale(1.09)}
100%{transform:scale(1)}
}
.oxkinder-pictures{
width:100%;
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px;
min-height:0;
}
.oxkinder-pic{
border:3px solid transparent;
border-radius:22px;
overflow:hidden;
background:#11142b;
min-height:0;
box-shadow:0 18px 50px rgba(0,0,0,.22);
}
.oxkinder-pic img{
width:100%;
height:100%;
min-height:150px;
max-height:230px;
object-fit:cover;
display:block;
}
.oxkinder-pic.chosen{
border-color:#ffc24f;
box-shadow:0 0 0 5px rgba(255,194,79,.20),0 18px 50px rgba(0,0,0,.22);
}
.oxkinder-stars{
display:flex;
gap:8px;
}
.oxkinder-stars span{
width:18px;
height:18px;
border-radius:50%;
background:rgba(255,255,255,.16);
}
.oxkinder-stars span.on{
background:#ffc24f;
}
@media(max-width:760px){
.oxkinder-pictures{
gap:8px;
}
.oxkinder-pic img{
min-height:96px;
max-height:130px;
}
.oxkinder-speaker{
width:68px;
height:68px;
font-size:32px;
}
}
/* ===== v5 Book Standard: speed + standard display ===== */
.oxleo-cover-rail{
contain:content!important;
content-visibility:auto!important;
}
.oxleo-mini-book img{
contain:paint!important;
}
.oxleo-loading-overlay{
backdrop-filter:blur(10px);
}
.oxleo-cover-rail{
display:flex!important;
gap:14px!important;
overflow-x:auto!important;
overflow-y:hidden!important;
-webkit-overflow-scrolling:touch!important;
overscroll-behavior-x:contain!important;
scroll-snap-type:x proximity!important;
scroll-behavior:smooth!important;
scrollbar-width:none!important;
touch-action:pan-x!important;
will-change:scroll-position!important;
contain:layout paint!important;
padding:6px 18px 16px 0!important;
}
.oxleo-cover-rail::-webkit-scrollbar{display:none!important}
.oxleo-mini-book{
flex:0 0 clamp(128px, 19vw, 158px)!important;
scroll-snap-align:start!important;
transform:translate3d(0,0,0)!important;
backface-visibility:hidden!important;
}
.oxleo-mini-link,
.oxleo-mini-book img{
transform:translate3d(0,0,0)!important;
backface-visibility:hidden!important;
}
.oxleo-mini-book img{
width:100%!important;
height:100%!important;
object-fit:cover!important;
}
/* Mobile reader: preserve text and full image, not black */
@media(max-width:760px){
.oxleo-nav-btn,.oxleo-listen,.oxleo-read-speed{
min-width:0!important;
padding:10px 7px!important;
font-size:12px!important;
border-radius:13px!important;
}
.oxleo-count{
grid-column:1/-1!important;
text-align:center!important;
margin:2px 0 0!important;
}
}
/* Cover prompt visual consistency shown in app cards */
.oxleo-mini-overlay{
height:48%!important;
background:linear-gradient(180deg,rgba(20,22,34,.02) 0%,rgba(34,34,44,.52) 26%,rgba(12,14,28,.94) 100%)!important;
}
.oxleo-mini-meta strong{
font-size:10.5px!important;
line-height:1.05!important;
}
.oxleo-mini-meta small{
font-size:7.8px!important;
line-height:1.16!important;
}
/* Library mobile: reduce jank */
@media(max-width:760px){
.oxleo-cover-rail{
gap:12px!important;
padding:4px 12px 14px 0!important;
overflow-x:auto!important;
overflow-y:hidden!important;
-webkit-overflow-scrolling:touch!important;
scroll-snap-type:none!important;
contain:layout paint!important;
}
.oxleo-mini-book{
flex:0 0 132px!important;
scroll-snap-align:none!important;
}
.oxleo-mini-link{
box-shadow:0 12px 28px rgba(0,0,0,.25)!important;
}
.oxleo-mini-overlay{
backdrop-filter:none!important;
}
}
/* Matte cover instruction reflected in overlay: avoid overly bright-looking card metadata */
.oxleo-mini-overlay{
background:linear-gradient(180deg,rgba(16,18,28,.02) 0%,rgba(30,31,40,.48) 28%,rgba(9,11,24,.96) 100%)!important;
}
/* Mobile portrait: image fills card; text is a visible bottom panel */
@media(max-width:760px){
.oxleo-reader-header h1{
font-size:24px!important;
line-height:1.05!important;
margin:0!important;
max-width:82%!important;
}
.oxleo-reader-header{
gap:8px!important;
}
.oxleo-badges{
gap:8px!important;
flex-wrap:wrap!important;
}
}
.oxleo-full-close{
position:fixed!important;
top:calc(env(safe-area-inset-top, 0px) + 10px)!important;
right:calc(env(safe-area-inset-right, 0px) + 10px)!important;
width:50px!important;height:50px!important;
display:flex!important;align-items:center!important;justify-content:center!important;
z-index:2147483647!important;
pointer-events:auto!important;
opacity:1!important;visibility:visible!important;
}
/* Library mobile smooth mode: lighter covers and only essential rows are rendered by PHP */
@media(max-width:760px){
.oxleo-cover-rail{
gap:10px!important;
overflow-x:auto!important;
overflow-y:hidden!important;
-webkit-overflow-scrolling:touch!important;
scroll-snap-type:none!important;
touch-action:pan-x!important;
overscroll-behavior-x:contain!important;
padding:4px 10px 14px 0!important;
contain:layout paint!important;
}
.oxleo-mini-book{
flex:0 0 124px!important;
scroll-snap-align:none!important;
}
.oxleo-mini-link{
box-shadow:0 8px 22px rgba(0,0,0,.20)!important;
}
.oxleo-mini-overlay{
backdrop-filter:none!important;
}
}
/* ===== v5.5 AUDITED FINAL OVERRIDES ===== */
/* General speed: less blur/backdrop on mobile and fewer expensive paints */
@media(max-width:760px){
*{ -webkit-tap-highlight-color: transparent; }
.oxleo-cover-rail{
contain:layout paint!important;
will-change:scroll-position!important;
}
.oxleo-mini-book{
contain:layout paint!important;
}
}
.oxleo-full-close{
position:fixed!important;
top:calc(env(safe-area-inset-top, 0px) + 10px)!important;
right:calc(env(safe-area-inset-right, 0px) + 10px)!important;
width:50px!important;
height:50px!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
z-index:2147483647!important;
pointer-events:auto!important;
opacity:1!important;
visibility:visible!important;
}
/* Mobile library speed and premium feeling */
@media(max-width:760px){
.oxleo-cover-rail{
display:flex!important;
gap:10px!important;
overflow-x:auto!important;
overflow-y:hidden!important;
-webkit-overflow-scrolling:touch!important;
scroll-snap-type:none!important;
touch-action:pan-x!important;
overscroll-behavior-x:contain!important;
padding:4px 10px 14px 0!important;
scrollbar-width:none!important;
}
.oxleo-cover-rail::-webkit-scrollbar{display:none!important}
.oxleo-mini-book{
flex:0 0 124px!important;
}
.oxleo-mini-link{
box-shadow:0 8px 22px rgba(0,0,0,.20)!important;
}
}
/* Kindergarten varied image/listening activities */
.oxk-v55{
height:100%;
display:grid;
grid-template-rows:auto 1fr auto;
gap:14px;
place-items:center;
}
.oxk-speaker{
width:78px;
height:78px;
border-radius:999px;
border:1px solid rgba(255,194,79,.45);
background:rgba(255,194,79,.18);
color:#fff;
font-size:34px;
box-shadow:0 18px 48px rgba(0,0,0,.22);
}
.oxk-speaker.pulse{animation:oxkPulse .7s ease}
.oxk-grid{
width:100%;
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
}
.oxk-card{
border:3px solid transparent;
background:#11142b;
border-radius:20px;
overflow:hidden;
min-height:0;
box-shadow:0 14px 38px rgba(0,0,0,.22);
}
.oxk-card img{
width:100%;
height:170px;
object-fit:cover;
display:block;
}
.oxk-card.chosen{
border-color:#ffc24f;
box-shadow:0 0 0 5px rgba(255,194,79,.18),0 14px 38px rgba(0,0,0,.22);
}
.oxk-card.wrong{
border-color:#ff6b6b;
}
.oxk-reward{
min-height:28px;
color:#ffc24f;
font-size:24px;
letter-spacing:.15em;
}
@media(max-width:760px){
.oxk-grid{gap:8px}
.oxk-card img{height:112px}
.oxk-speaker{width:62px;height:62px;font-size:28px}
}
/* End activity cards on mobile should swipe horizontally */
@media(max-width:760px){
.oxleo-end-activities{
overflow:hidden!important;
}
.oxleo-activity-grid{
display:flex!important;
flex-wrap:nowrap!important;
gap:12px!important;
overflow-x:auto!important;
overflow-y:hidden!important;
-webkit-overflow-scrolling:touch!important;
touch-action:pan-x!important;
overscroll-behavior-x:contain!important;
scroll-snap-type:x proximity!important;
padding:2px 4px 6px!important;
scrollbar-width:none!important;
}
.oxleo-activity-grid::-webkit-scrollbar{display:none!important}
.oxleo-activity-card{
flex:0 0 220px!important;
min-height:122px!important;
scroll-snap-align:start!important;
}
}
/* ===== v5.8 Kindergarten / Early Primary Listening Activities ===== */
.oxact-listen-btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
border:0;
border-radius:16px;
padding:12px 18px;
margin:0 0 14px;
background:linear-gradient(135deg,#5f55ff,#25205c);
color:#fff;
font-weight:900;
box-shadow:0 14px 34px rgba(31,25,92,.28);
cursor:pointer;
}
.oxkg-grid{
grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
.oxact-scene.selected{
outline:4px solid rgba(125,92,255,.92)!important;
transform:translateY(-2px);
}
.oxact-scene.correct{
outline:4px solid #20b56b!important;
}
.oxact-scene.wrong{
outline:4px solid #e45757!important;
}
.oxkg-speak{
align-items:center;
}
@media(max-width:760px){
.oxleo-activity-shell{
width:calc(100vw - 18px)!important;
height:calc(100dvh - 18px)!important;
max-height:none!important;
overflow:hidden!important;
padding:14px!important;
}
.oxleo-activity-body{
overflow-y:auto!important;
-webkit-overflow-scrolling:touch!important;
}
.oxkg-grid{
grid-template-columns:1fr!important;
gap:8px!important;
}
.oxkg-grid .oxact-scene{
min-height:0!important;
}
.oxkg-grid .oxact-scene img{
height:132px!important;
object-fit:cover!important;
}
.oxact-listen-btn{
width:100%;
margin-bottom:10px;
padding:11px 14px;
}
}
/* ===== v5.9 mobile header, bottom text, compact activities ===== */
/* Mobile normal story header should not touch phone/status/browser area */
@media(max-width:760px){
.oxleo-reader-header{
margin-top:10px!important;
padding-top:8px!important;
align-items:flex-start!important;
}
.oxleo-reader-header h1{
padding-top:2px!important;
font-size:23px!important;
line-height:1.05!important;
}
}
/* Compact activity modal: avoid hidden lower content; allow internal scroll */
.oxleo-activity-shell{
overflow:hidden!important;
}
.oxleo-activity-body{
overflow-y:auto!important;
-webkit-overflow-scrolling:touch!important;
}
.oxact-scene-grid{
gap:10px!important;
}
.oxact-scene{
min-height:auto!important;
}
.oxact-scene img{
max-height:150px!important;
object-fit:cover!important;
}
.oxact-scene strong{
font-size:13px!important;
}
@media(max-width:760px){
.oxleo-activity-shell{
width:calc(100vw - 14px)!important;
height:calc(100dvh - 14px)!important;
max-height:none!important;
padding:12px!important;
}
.oxleo-activity-head h2{
font-size:28px!important;
line-height:1!important;
}
.oxleo-activity-head p{
font-size:14px!important;
margin:4px 0 8px!important;
}
.oxleo-activity-body{
max-height:calc(100dvh - 220px)!important;
}
.oxact-scene-grid,
.oxkg-grid{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:8px!important;
}
.oxact-scene img,
.oxkg-grid .oxact-scene img{
height:96px!important;
max-height:96px!important;
}
.oxact-scene strong{
font-size:12px!important;
padding:7px!important;
}
.oxact-listen-btn{
margin-bottom:8px!important;
padding:9px 12px!important;
border-radius:12px!important;
}
.oxleo-activity-foot{
padding-top:8px!important;
gap:7px!important;
}
.oxleo-activity-foot button{
padding:10px 12px!important;
font-size:13px!important;
}
}
/* ===== v5.9.5 Compact Reader + Library Product Polish ===== */
:root{
--ox-safe-top:env(safe-area-inset-top,0px);
--ox-safe-bottom:env(safe-area-inset-bottom,0px);
}
.oxleo-shell{
--ox-reader-overlay-opacity:.38;
--ox-reader-overlay-height:24%;
--ox-reader-font-desktop:22px;
--ox-reader-font-mobile:17px;
--ox-reader-text-color:#21170f;
}
.oxleo-empty-library,.oxleo-empty-story{
min-height:70dvh;
display:flex;
flex-direction:column;
justify-content:center;
gap:14px;
padding:32px;
color:#fff;
background:#080a19;
}
.oxleo-empty-library{
margin:58px auto 24px;
max-width:980px;
border-radius:20px;
border:1px solid rgba(255,255,255,.12);
background:linear-gradient(180deg,rgba(18,20,43,.92),rgba(10,12,28,.92));
}
.oxleo-empty-library h2,.oxleo-empty-story h1{font-size:clamp(30px,5vw,56px);line-height:1;margin:0}
.oxleo-empty-library p,.oxleo-empty-story p{font-size:18px;line-height:1.45;color:rgba(255,255,255,.72);max-width:620px}
.oxleo-empty-library a,.oxleo-empty-story a{display:inline-flex;width:max-content;align-items:center;justify-content:center;padding:13px 18px;border-radius:999px;background:#fff;color:#111827;font-weight:900;text-decoration:none}
.oxleo-menu{display:none!important}
.oxleo-nav a{cursor:pointer}
.oxleo-library-main{
margin-left:250px;
min-height:100dvh;
padding:72px 28px 104px;
box-sizing:border-box;
}
.oxleo-app-topbar{
align-items:flex-end!important;
margin:0 0 30px!important;
}
.oxleo-app-topbar h1{font-size:clamp(36px,4vw,58px)!important;line-height:.96!important;margin:0!important}
.oxleo-library-sub{margin-top:10px!important;color:rgba(255,255,255,.68)!important}
.oxleo-top-actions button:nth-child(n+5){display:none!important}
.oxleo-row{scroll-margin-top:84px}
.oxleo-mini-book{flex:0 0 172px!important}
.oxleo-mini-link{border:0!important;border-radius:18px!important;overflow:hidden!important;background:#11142b!important;box-shadow:0 18px 44px rgba(0,0,0,.32)!important}
.oxleo-mini-link>img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important}
.oxleo-mini-overlay{
position:absolute!important;
left:0!important;
right:0!important;
bottom:0!important;
top:auto!important;
height:56%!important;
min-height:118px!important;
display:block!important;
border:0!important;
box-shadow:none!important;
background:linear-gradient(180deg,rgba(8,10,25,0) 0%,rgba(8,10,25,.48) 28%,rgba(8,10,25,.90) 72%,rgba(8,10,25,.98) 100%)!important;
backdrop-filter:blur(2px)!important;
}
.oxleo-mini-grad{display:none!important}
.oxleo-mini-meta{
position:absolute!important;
inset:auto 0 0 0!important;
padding:14px 12px 11px!important;
display:grid!important;
gap:7px!important;
color:#fff!important;
}
.oxleo-mini-meta strong,
.oxleo-continue-info strong,
.oxhome-cover-overlay strong,
.oxhome-book-card strong{
display:block!important;
max-width:100%!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
-webkit-line-clamp:unset!important;
}
.oxleo-mini-meta strong{font-size:15px!important;line-height:1.12!important;letter-spacing:0!important;margin:0!important}
.oxleo-mini-meta small{display:block!important;font-size:11px!important;line-height:1.25!important;color:rgba(255,255,255,.78)!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;min-height:0!important;margin:0!important}
.oxleo-mini-badges{display:flex!important;flex-wrap:wrap!important;gap:5px!important;margin:0!important;max-height:42px!important;overflow:hidden!important}
.oxleo-mini-badges span,.oxleo-mini-meta em{display:inline-flex!important;align-items:center!important;max-width:100%!important;padding:4px 7px!important;border-radius:999px!important;font-size:9px!important;line-height:1!important;font-style:normal!important;font-weight:900!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;color:#fff!important;border:1px solid rgba(255,255,255,.12)!important}
.oxleo-mini-badges .b-green{background:#2f9a57!important}.oxleo-mini-badges .b-purple{background:#6f4ac6!important}.oxleo-mini-badges .b-blue{background:#3f69d8!important}
.oxleo-mini-meta em{background:rgba(255,194,79,.14)!important;border-color:rgba(255,194,79,.38)!important;color:#ffd16b!important}
.oxleo-story-main{
margin-left:250px;
width:calc(100vw - 250px);
min-height:100dvh;
padding:52px 28px 42px;
display:grid;
grid-template-columns:minmax(680px,900px) 220px;
gap:18px;
justify-content:center;
align-items:start;
box-sizing:border-box;
}
.oxleo-reader-card,.oxleo-motion-panel{
background:rgba(18,20,43,.82);
border:1px solid var(--line);
border-radius:18px;
box-shadow:0 18px 64px rgba(0,0,0,.24);
}
.oxleo-reader-card{min-width:0;min-height:0;padding:14px;display:flex;flex-direction:column}
.oxleo-motion-panel{padding:18px 14px}
.oxleo-motion-panel h2{font-size:18px!important;margin:0 0 10px!important}
.oxleo-motion-panel p{font-size:13px!important;line-height:1.4!important;margin:0 0 12px!important}
.oxleo-motion-option{padding:12px!important;margin:9px 0!important;border-radius:12px!important}
.oxleo-motion-option small{font-size:11px!important;line-height:1.35!important}
.oxleo-reader-header{display:grid!important;grid-template-columns:34px minmax(0,1fr) auto;gap:10px!important;align-items:center!important;margin-bottom:10px!important}
.oxleo-title{min-width:0!important;max-width:none!important}
.oxleo-title strong{font-size:18px!important;line-height:1.15!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;letter-spacing:0!important}
.oxleo-title span{font-size:12px!important;color:rgba(255,255,255,.62)!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.oxleo-badges{display:none!important}
.oxleo-fullscreen{height:36px!important;padding:0 11px!important;border-radius:10px!important;font-size:13px!important}
.oxleo-book-stage{width:100%;display:flex;align-items:center;justify-content:center;padding:8px;border-radius:14px;background:rgba(0,0,0,.13);box-sizing:border-box}
.oxleo-book,.oxleo-book-full{
position:relative;
display:block;
width:100%;
max-width:880px;
height:auto;
aspect-ratio:16/9;
overflow:hidden;
isolation:isolate;
border-radius:16px;
background:#101329;
box-shadow:0 16px 48px rgba(0,0,0,.42);
}
.oxleo-image-page{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;background:#101329;z-index:2}
.oxleo-page-img,.oxleo-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center center;background:transparent}
.oxleo-page-img{display:block;opacity:1;visibility:visible;z-index:2}
.oxleo-video{display:none;opacity:0;visibility:hidden;z-index:3}
.oxleo-image-page.has-video .oxleo-video{display:block;opacity:1;visibility:visible}
.oxleo-image-page.has-video .oxleo-page-img{opacity:0;visibility:hidden}
.oxleo-shell.oxleo-still .oxleo-video{display:none!important;opacity:0!important;visibility:hidden!important}
.oxleo-shell.oxleo-still .oxleo-page-img{display:block!important;opacity:1!important;visibility:visible!important}
.oxleo-spread-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;opacity:.2;filter:blur(16px) saturate(1.08);transform:scale(1.05);z-index:1}
.oxleo-text-page{
position:absolute;
left:0;
right:0;
bottom:0;
top:auto;
width:100%;
height:var(--ox-reader-overlay-height);
min-height:0;
padding:0;
z-index:8;
pointer-events:none;
display:flex;
align-items:flex-end;
justify-content:center;
background:linear-gradient(180deg,rgb(255 255 255 / 0) 0%,rgb(255 255 255 / calc(var(--ox-reader-overlay-opacity) * .55)) 42%,rgb(255 255 255 / var(--ox-reader-overlay-opacity)) 100%);
border:0;
backdrop-filter:none;
}
.oxleo-text-page::before,.oxleo-text-page::after,.oxleo-book::after,.oxleo-book-full::after{display:none!important;content:none!important}
.oxleo-copy{width:100%;max-width:100%;box-sizing:border-box;margin:0;padding:34px 24px 16px;text-align:center;font-family:Georgia,"Times New Roman",serif;font-size:var(--ox-reader-font-desktop);line-height:1.22;font-weight:850;color:var(--ox-reader-text-color);text-shadow:0 1px 0 rgba(255,255,255,.24)}
.oxleo-inline-activity{position:absolute;inset:0;z-index:9;display:flex;align-items:stretch;justify-content:stretch;padding:22px;background:linear-gradient(180deg,#161936,#0e1128);color:#fff;box-sizing:border-box}
.oxleo-inline-activity[hidden]{display:none!important}
.oxleo-activity-page{width:100%;display:grid;grid-template-rows:auto auto auto auto minmax(0,1fr) auto auto;gap:8px;align-content:stretch;min-height:0}
.oxleo-activity-page h2{font-size:clamp(24px,3vw,40px);line-height:1;margin:0;letter-spacing:0;color:#fff}
.oxleo-activity-page p{margin:0;color:rgba(255,255,255,.72);font-size:14px;line-height:1.35}
.oxleo-activity-kicker{display:block;color:var(--gold);font-weight:950;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.oxact-listen-btn,.oxleo-activity-check,.oxleo-activity-reset{justify-self:start;min-height:36px;border:1px solid rgba(255,255,255,.14);border-radius:11px;background:rgba(255,255,255,.08);color:#fff;font-weight:900;padding:8px 13px;cursor:pointer}
.oxact-listen-btn{background:#fff;color:#11142b}
.oxact-inline-grid,.oxact-scene-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;min-height:0;align-items:stretch}
.oxact-scene{border:1px solid rgba(255,255,255,.14);border-radius:14px;overflow:hidden;background:rgba(255,255,255,.07);color:#fff;cursor:pointer;padding:0;text-align:left;min-width:0}
.oxact-scene img{width:100%;height:112px;object-fit:contain;background:#101329;display:block}
.oxact-scene strong{display:block;padding:9px 10px;font-size:13px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oxact-scene.selected{outline:3px solid rgba(255,194,79,.78)}
.oxact-scene.correct{outline:3px solid #56c58d;background:rgba(86,197,141,.15)}
.oxact-scene.wrong{outline:3px solid #ff6b7a;background:rgba(255,107,122,.15)}
.oxact-inline-footer{display:flex;gap:10px;align-items:center;margin-top:2px}
.oxleo-activity-progress{flex:1;height:9px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden}
.oxleo-activity-progress span{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--gold),#56c58d);transition:width .2s ease}
.oxact-feedback{min-height:20px;color:#ffd16b;font-weight:900}
.oxact-inline-speak{display:grid;grid-template-columns:1fr;gap:10px;align-content:center;text-align:center}
.oxact-speak-card{display:flex;align-items:center;justify-content:center;min-height:86px;border-radius:18px;background:linear-gradient(135deg,#ffb03a,#ffcf5a);color:#24160d;font-size:clamp(24px,3vw,42px);font-weight:950;line-height:1.08;padding:18px}
.oxact-body-tips{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.oxact-body-tips span{padding:10px;border-radius:12px;background:rgba(255,255,255,.08);font-weight:850}
.oxleo-controls,.oxleo-full-controls{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;margin-top:10px}
.oxleo-controls button,.oxleo-full-controls button,.oxleo-listen,.oxleo-read-speed{display:inline-flex;align-items:center;justify-content:center;min-height:38px;width:auto;padding:9px 13px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#fff;font-weight:800;line-height:1;white-space:nowrap;cursor:pointer}
.oxleo-controls .oxleo-nav-btn,.oxleo-full-controls .oxleo-nav-btn{background:rgba(255,194,79,.1);border-color:rgba(255,194,79,.45);color:#ffd98d}
.oxleo-listen.active,.oxleo-listen.is-listening,.oxleo-read-speed.active{background:rgba(120,84,255,.26);border-color:rgba(161,132,255,.6);color:#fff}
.oxleo-count{margin-left:auto;color:#dad6e8;font-weight:700;font-size:13px;white-space:nowrap}
.oxleo-activity-modal{display:none!important}
.oxleo-fullscreen-reader{position:fixed;inset:0;z-index:999999;width:100vw;height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;box-sizing:border-box;background:#050615}
.oxleo-fullscreen-reader[hidden]{display:none!important}
.oxleo-fullscreen-reader .oxleo-book,.oxleo-fullscreen-reader .oxleo-book-full{width:min(94vw,1400px);max-width:1400px}
.oxleo-fullscreen-reader .oxleo-full-controls{width:min(94vw,1400px)}
.oxleo-mobile-tabbar{display:none}
@media(max-width:1180px){
.oxleo-library-main,.oxleo-story-main{margin-left:0;width:100%;max-width:100%}
.oxleo-story-main{grid-template-columns:minmax(0,900px);justify-content:center}
}
@media(max-width:900px){
.oxleo-sidebar{display:none!important}
.oxleo-mobile-tabbar{position:fixed;z-index:99998;left:0;right:0;bottom:0;height:calc(66px + var(--ox-safe-bottom));padding:7px 8px calc(7px + var(--ox-safe-bottom));box-sizing:border-box;display:grid;grid-template-columns:repeat(5,1fr);gap:5px;border-radius:22px 22px 0 0;background:rgba(7,9,24,.96);border-top:1px solid rgba(255,255,255,.12);box-shadow:0 -16px 44px rgba(0,0,0,.38);backdrop-filter:blur(18px)}
.oxleo-mobile-tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;color:rgba(255,255,255,.62);text-decoration:none;border-radius:18px;font-weight:850}.oxleo-mobile-tabbar a span{font-size:18px;line-height:1}.oxleo-mobile-tabbar a small{font-size:10px;line-height:1}.oxleo-mobile-tabbar a.active{color:#fff;background:linear-gradient(135deg,#7c5cff,#22a8d8)}
.oxleo-library-main{padding:calc(42px + var(--ox-safe-top)) 16px calc(96px + var(--ox-safe-bottom))}
.oxleo-app-topbar{display:block!important;margin:0 0 24px!important;padding-top:0!important}.oxleo-top-actions{margin-top:14px!important;max-width:100%!important}
.oxleo-story-main{padding:calc(18px + var(--ox-safe-top)) 12px calc(92px + var(--ox-safe-bottom));display:block;min-height:100dvh;overflow-x:hidden}
.oxleo-reader-card{min-height:auto;padding:12px;border-radius:20px}.oxleo-reader-header{grid-template-columns:30px minmax(0,1fr) 38px!important;margin-bottom:9px!important}.oxleo-title strong{font-size:16px!important}.oxleo-title span{font-size:11px!important}.oxleo-fullscreen small{display:none!important}
.oxleo-book-stage{padding:0;margin:10px 0;background:transparent}.oxleo-book,.oxleo-book-full{width:100%;max-width:100%;border-radius:16px;aspect-ratio:16/9}.oxleo-copy{padding:28px 14px 12px;font-size:var(--ox-reader-font-mobile)}
.oxleo-strip{display:none!important}.oxleo-motion-panel{display:none!important}
.oxleo-controls,.oxleo-full-controls{display:grid;grid-template-columns:repeat(6,1fr);grid-template-areas:'prev prev prev next next next' 'listen listen normal normal slow slow';gap:8px;margin-top:10px}.oxleo-controls .oxleo-prev,.oxleo-full-controls .oxleo-prev{grid-area:prev}.oxleo-controls .oxleo-next,.oxleo-full-controls .oxleo-next{grid-area:next}.oxleo-controls .oxleo-listen,.oxleo-full-controls .oxleo-listen{grid-area:listen}.oxleo-controls .oxleo-read-speed[data-speed="normal"],.oxleo-full-controls .oxleo-read-speed[data-speed="normal"]{grid-area:normal}.oxleo-controls .oxleo-read-speed[data-speed="slow"],.oxleo-full-controls .oxleo-read-speed[data-speed="slow"]{grid-area:slow}.oxleo-controls button,.oxleo-full-controls button{width:100%;min-height:46px;border-radius:14px;padding:9px 8px}.oxleo-count{display:block!important;grid-column:1/-1;margin:0;text-align:center;font-size:12px}
.oxleo-inline-activity{padding:12px}.oxleo-activity-page{gap:6px}.oxleo-activity-page h2{font-size:22px}.oxleo-activity-page p{font-size:12px}.oxact-inline-grid,.oxact-scene-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.oxact-scene img{height:72px}.oxact-scene strong{font-size:11px;padding:7px}.oxact-inline-footer{gap:7px}.oxleo-activity-check,.oxleo-activity-reset,.oxact-listen-btn{min-height:32px;padding:7px 10px;font-size:12px}.oxact-body-tips{grid-template-columns:1fr}.oxact-body-tips span{padding:7px;font-size:12px}.oxact-speak-card{min-height:62px;font-size:22px;padding:10px}
.oxleo-fullscreen-reader:not([hidden]){padding:calc(12px + var(--ox-safe-top)) 10px calc(128px + var(--ox-safe-bottom));justify-content:center;overflow:hidden}.oxleo-fullscreen-reader .oxleo-book,.oxleo-fullscreen-reader .oxleo-book-full{width:100%;max-width:100%;max-height:calc(100dvh - 160px - var(--ox-safe-top) - var(--ox-safe-bottom))}.oxleo-fullscreen-reader .oxleo-full-controls{position:fixed;left:0;right:0;bottom:0;width:100%;padding:10px 10px calc(12px + var(--ox-safe-bottom));background:rgba(7,9,24,.97);border-radius:20px 20px 0 0;box-sizing:border-box;z-index:1000000}
}
@media(max-width:900px) and (orientation:landscape){
.oxleo-story-main{padding:8px 72px calc(72px + var(--ox-safe-bottom))}.oxleo-book,.oxleo-book-full{width:min(78vw,calc(100dvh * 1.72))}.oxleo-controls,.oxleo-full-controls{position:fixed;left:50%;right:auto;bottom:calc(8px + var(--ox-safe-bottom));transform:translateX(-50%);width:min(640px,calc(100vw - 24px));grid-template-columns:72px 1fr 84px 84px 72px;grid-template-areas:'prev listen normal slow next';padding:7px;border-radius:20px;background:rgba(7,9,24,.72);backdrop-filter:blur(14px);box-sizing:border-box}.oxleo-mobile-tabbar{display:none!important}.oxleo-count{display:none!important}
}
/* ===== v5.9.6 Mobile fullscreen + Bookr activity page fixes =====
This section intentionally only targets fullscreen/mobile/activity problems.
*/
.oxleo-book::before,
.oxleo-book-full::before{
content:"";
position:absolute;
inset:0;
z-index:0;
background-image:var(--scene-image);
background-size:cover;
background-position:center;
filter:blur(18px) saturate(1.12);
transform:scale(1.08);
opacity:.34;
pointer-events:none;
}
.oxleo-image-page,
.oxleo-text-page,
.oxleo-inline-activity,
.oxleo-live-video-layer{
position:absolute;
}
.oxleo-image-page{z-index:2}
.oxleo-text-page{z-index:8}
.oxleo-inline-activity{z-index:10}
.oxleo-page-img,
.oxleo-video{
z-index:3;
background:transparent!important;
}
/* Make story text calmer and less dominant. */
.oxleo-text-page{
height:clamp(72px,var(--ox-reader-overlay-height),22%)!important;
background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,calc(var(--ox-reader-overlay-opacity) * .36)) 46%,rgba(255,255,255,calc(var(--ox-reader-overlay-opacity) * .74)) 100%)!important;
}
.oxleo-copy{
padding:28px 22px 12px!important;
}
/* Inline activity is not a modal: it is a full page inside the book shell. */
.oxleo-book-activity-mode,
.oxleo-is-activity-page .oxleo-book,
.oxleo-is-activity-page .oxleo-book-full{
background:linear-gradient(180deg,#151833,#0c0f25)!important;
}
.oxleo-book-activity-mode::before,
.oxleo-is-activity-page .oxleo-book::before,
.oxleo-is-activity-page .oxleo-book-full::before{
display:none!important;
}
.oxleo-inline-activity{
inset:0!important;
display:flex!important;
align-items:stretch!important;
justify-content:stretch!important;
padding:18px!important;
background:linear-gradient(180deg,#171a38 0%,#0d1028 100%)!important;
color:#fff!important;
box-sizing:border-box!important;
overflow:hidden!important;
}
.oxleo-inline-activity[hidden]{display:none!important}
.oxact-bookr-page,
.oxleo-activity-page{
width:100%!important;
height:100%!important;
min-height:0!important;
display:grid!important;
grid-template-rows:auto minmax(0,1fr) auto auto!important;
gap:12px!important;
box-sizing:border-box!important;
}
.oxact-bookr-head{
min-width:0!important;
}
.oxleo-activity-kicker{
display:block!important;
margin:0 0 6px!important;
color:#ffd36b!important;
font-weight:950!important;
font-size:12px!important;
letter-spacing:.14em!important;
text-transform:uppercase!important;
}
.oxleo-activity-page h2{
margin:0!important;
font-size:clamp(30px,4vw,54px)!important;
line-height:.95!important;
letter-spacing:-.04em!important;
color:#fff!important;
}
.oxleo-activity-page p{
margin:8px 0 0!important;
color:rgba(255,255,255,.76)!important;
font-size:clamp(14px,1.45vw,18px)!important;
line-height:1.25!important;
}
.oxact-bookr-main{
min-height:0!important;
display:grid!important;
grid-template-rows:auto minmax(0,1fr)!important;
gap:12px!important;
}
.oxact-listen-btn{
justify-self:start!important;
min-height:42px!important;
padding:0 20px!important;
border-radius:14px!important;
border:0!important;
background:#fff!important;
color:#101329!important;
font-size:17px!important;
font-weight:900!important;
}
.oxact-inline-grid,
.oxact-scene-grid{
min-height:0!important;
height:100%!important;
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:14px!important;
align-items:stretch!important;
}
.oxact-scene{
min-height:0!important;
height:100%!important;
display:grid!important;
grid-template-rows:minmax(0,1fr) auto!important;
border:1px solid rgba(255,255,255,.16)!important;
border-radius:20px!important;
overflow:hidden!important;
background:rgba(255,255,255,.075)!important;
color:#fff!important;
box-shadow:0 12px 30px rgba(0,0,0,.20)!important;
}
.oxact-scene img{
width:100%!important;
height:100%!important;
min-height:120px!important;
object-fit:cover!important;
background:#101329!important;
display:block!important;
}
.oxact-scene strong{
display:block!important;
padding:12px 14px!important;
font-size:15px!important;
line-height:1.1!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
}
.oxact-inline-footer{
display:grid!important;
grid-template-columns:minmax(120px,1fr) auto auto!important;
align-items:center!important;
gap:12px!important;
margin:0!important;
}
.oxleo-activity-progress{
height:10px!important;
border-radius:999px!important;
background:rgba(255,255,255,.13)!important;
overflow:hidden!important;
}
.oxleo-activity-check,
.oxleo-activity-reset{
min-height:42px!important;
padding:0 18px!important;
border-radius:14px!important;
font-weight:900!important;
}
.oxact-feedback{
min-height:20px!important;
color:#ffd36b!important;
font-weight:900!important;
}
.oxleo-activity-close,
.oxleo-activity-next{
display:none!important;
}
/* Fullscreen reader: better use of landscape viewport. */
.oxleo-fullscreen-reader:not([hidden]){
background:#050615!important;
}
.oxleo-fullscreen-reader .oxleo-book,
.oxleo-fullscreen-reader .oxleo-book-full{
width:min(96vw,1400px)!important;
max-width:1400px!important;
aspect-ratio:16/9!important;
}
.oxleo-fullscreen-reader .oxleo-full-close{
width:42px!important;
height:42px!important;
right:18px!important;
top:18px!important;
border-radius:999px!important;
z-index:1000003!important;
background:rgba(10,12,28,.82)!important;
border:1px solid rgba(255,255,255,.14)!important;
box-shadow:0 8px 22px rgba(0,0,0,.35)!important;
}
/* Mobile landscape: separate layout. */
@media(max-width:950px) and (orientation:landscape){
body.oxleo-fullscreen-lock{
overflow:hidden!important;
}
.oxleo-story-view{
min-height:100dvh!important;
overflow:hidden!important;
}
.oxleo-story-main{
padding:8px 14px calc(60px + var(--ox-safe-bottom))!important;
min-height:100dvh!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
box-sizing:border-box!important;
overflow:hidden!important;
}
.oxleo-reader-card{
width:100%!important;
max-width:none!important;
padding:0!important;
border:0!important;
border-radius:0!important;
background:transparent!important;
box-shadow:none!important;
}
.oxleo-reader-header,
.oxleo-strip,
.oxleo-motion-panel,
.oxleo-mobile-tabbar,
.oxleo-end-activities{
display:none!important;
}
.oxleo-book-stage{
width:100%!important;
height:calc(100dvh - 74px - var(--ox-safe-bottom))!important;
margin:0!important;
padding:0!important;
background:transparent!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
}
.oxleo-book,
.oxleo-book-full{
width:min(94vw,calc((100dvh - 82px - var(--ox-safe-bottom)) * 1.777))!important;
max-width:94vw!important;
height:auto!important;
max-height:calc(100dvh - 82px - var(--ox-safe-bottom))!important;
aspect-ratio:16/9!important;
border-radius:18px!important;
box-shadow:0 18px 50px rgba(0,0,0,.45)!important;
}
.oxleo-text-page{
height:20%!important;
}
.oxleo-copy{
padding:18px 18px 9px!important;
font-size:clamp(15px,2.2vw,21px)!important;
line-height:1.08!important;
}
.oxleo-controls,
.oxleo-full-controls{
position:fixed!important;
left:50%!important;
right:auto!important;
bottom:calc(8px + var(--ox-safe-bottom))!important;
transform:translateX(-50%)!important;
width:min(760px,calc(100vw - 28px))!important;
min-height:46px!important;
display:grid!important;
grid-template-columns:112px 92px 92px 92px 112px auto!important;
grid-template-areas:"prev listen normal slow next count"!important;
gap:8px!important;
margin:0!important;
padding:6px!important;
border-radius:18px!important;
background:rgba(7,9,24,.76)!important;
border:1px solid rgba(255,255,255,.10)!important;
backdrop-filter:blur(14px)!important;
box-sizing:border-box!important;
z-index:1000001!important;
}
.oxleo-controls .oxleo-prev,.oxleo-full-controls .oxleo-prev{grid-area:prev!important}
.oxleo-controls .oxleo-listen,.oxleo-full-controls .oxleo-listen{grid-area:listen!important}
.oxleo-controls .oxleo-read-speed[data-speed="normal"],.oxleo-full-controls .oxleo-read-speed[data-speed="normal"]{grid-area:normal!important}
.oxleo-controls .oxleo-read-speed[data-speed="slow"],.oxleo-full-controls .oxleo-read-speed[data-speed="slow"]{grid-area:slow!important}
.oxleo-controls .oxleo-next,.oxleo-full-controls .oxleo-next{grid-area:next!important}
.oxleo-controls .oxleo-count,.oxleo-full-controls .oxleo-count{
grid-area:count!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
margin:0!important;
color:#d9d5e8!important;
font-size:12px!important;
white-space:nowrap!important;
}
.oxleo-controls button,
.oxleo-full-controls button{
width:100%!important;
min-height:34px!important;
padding:0 9px!important;
border-radius:12px!important;
font-size:13px!important;
}
.oxleo-fullscreen-reader:not([hidden]){
padding:8px 12px calc(60px + var(--ox-safe-bottom))!important;
justify-content:center!important;
gap:0!important;
overflow:hidden!important;
}
.oxleo-fullscreen-reader .oxleo-book,
.oxleo-fullscreen-reader .oxleo-book-full{
width:min(94vw,calc((100dvh - 78px - var(--ox-safe-bottom)) * 1.777))!important;
max-height:calc(100dvh - 78px - var(--ox-safe-bottom))!important;
}
.oxleo-fullscreen-reader .oxleo-full-close{
display:none!important;
}
/* Activity pages get a taller app canvas than story pages. */
.oxleo-is-activity-page .oxleo-book,
.oxleo-is-activity-page .oxleo-book-full,
.oxleo-fullscreen-reader .oxleo-book-activity-mode{
width:calc(100vw - 28px)!important;
max-width:calc(100vw - 28px)!important;
height:calc(100dvh - 84px - var(--ox-safe-bottom))!important;
max-height:calc(100dvh - 84px - var(--ox-safe-bottom))!important;
aspect-ratio:auto!important;
border-radius:18px!important;
}
.oxleo-is-activity-page .oxleo-inline-activity{
padding:16px 18px 12px!important;
}
.oxleo-is-activity-page .oxact-bookr-page,
.oxleo-is-activity-page .oxleo-activity-page{
grid-template-rows:auto minmax(0,1fr) auto auto!important;
gap:10px!important;
}
.oxleo-is-activity-page .oxleo-activity-page h2{
font-size:clamp(26px,4.3vw,40px)!important;
}
.oxleo-is-activity-page .oxleo-activity-page p{
font-size:clamp(13px,1.8vw,16px)!important;
margin-top:4px!important;
}
.oxleo-is-activity-page .oxact-bookr-main{
grid-template-rows:38px minmax(0,1fr)!important;
gap:10px!important;
}
.oxleo-is-activity-page .oxact-listen-btn{
min-height:36px!important;
font-size:15px!important;
}
.oxleo-is-activity-page .oxact-inline-grid,
.oxleo-is-activity-page .oxact-scene-grid{
gap:12px!important;
}
.oxleo-is-activity-page .oxact-scene img{
min-height:0!important;
height:100%!important;
object-fit:cover!important;
}
.oxleo-is-activity-page .oxact-scene strong{
padding:9px 10px!important;
font-size:13px!important;
}
.oxleo-is-activity-page .oxact-inline-footer{
grid-template-columns:minmax(120px,1fr) 86px 86px!important;
gap:10px!important;
}
.oxleo-is-activity-page .oxleo-activity-check,
.oxleo-is-activity-page .oxleo-activity-reset{
min-height:36px!important;
padding:0 12px!important;
}
}
/* Mobile portrait activity: clean vertical cards instead of cramped lines. */
@media(max-width:760px) and (orientation:portrait){
.oxleo-is-activity-page .oxleo-book,
.oxleo-is-activity-page .oxleo-book-full{
aspect-ratio:auto!important;
height:calc(100dvh - 210px - var(--ox-safe-bottom) - var(--ox-safe-top))!important;
min-height:440px!important;
}
.oxleo-is-activity-page .oxleo-inline-activity{
padding:16px!important;
}
.oxleo-is-activity-page .oxact-inline-grid,
.oxleo-is-activity-page .oxact-scene-grid{
grid-template-columns:1fr!important;
gap:10px!important;
overflow:auto!important;
}
.oxleo-is-activity-page .oxact-scene{
min-height:112px!important;
grid-template-columns:118px 1fr!important;
grid-template-rows:1fr!important;
}
.oxleo-is-activity-page .oxact-scene img{
height:100%!important;
min-height:112px!important;
}
.oxleo-is-activity-page .oxact-scene strong{
display:flex!important;
align-items:center!important;
font-size:15px!important;
}
}
/* ===== v5.9.7 Complete Activity Engine UI =====
Replaces fragile modal-like activity UI with page-based interactive activities.
*/
.oxact-engine-on .oxleo-activity-modal,
.oxact-engine-on .oxleo-activity-close,
.oxact-engine-on .oxleo-activity-next{
display:none!important;
}
.oxact-engine-on .oxleo-end-activities{
display:none!important;
}
.oxleo-book-activity-mode,
.oxact-engine-on .oxleo-book,
.oxact-engine-on .oxleo-book-full{
background:linear-gradient(180deg,#151936,#090c21)!important;
}
.oxleo-book-activity-mode::before,
.oxact-engine-on .oxleo-book::before,
.oxact-engine-on .oxleo-book-full::before{
display:none!important;
}
.oxact-engine-on .oxleo-inline-activity{
position:absolute!important;
inset:0!important;
display:block!important;
z-index:20!important;
padding:18px!important;
box-sizing:border-box!important;
background:linear-gradient(180deg,#171b3a 0%,#090c21 100%)!important;
color:#fff!important;
overflow:hidden!important;
}
.oxact-engine-on .oxleo-inline-activity[hidden]{display:none!important}
.oxact-engine-page{
width:100%!important;
height:100%!important;
min-height:0!important;
display:grid!important;
grid-template-rows:auto minmax(0,1fr) auto!important;
gap:14px!important;
box-sizing:border-box!important;
}
.oxact-engine-head{
min-width:0!important;
}
.oxact-engine-head span{
display:block!important;
margin:0 0 6px!important;
color:#ffd36b!important;
font-size:12px!important;
font-weight:950!important;
letter-spacing:.14em!important;
text-transform:uppercase!important;
}
.oxact-engine-head h2{
margin:0!important;
font-size:clamp(30px,4vw,54px)!important;
line-height:.94!important;
letter-spacing:-.045em!important;
color:#fff!important;
}
.oxact-engine-head p{
margin:8px 0 0!important;
color:rgba(255,255,255,.76)!important;
font-size:clamp(14px,1.35vw,18px)!important;
line-height:1.25!important;
}
.oxact-engine-body{
min-height:0!important;
overflow:hidden!important;
display:grid!important;
grid-template-rows:auto minmax(0,1fr)!important;
gap:12px!important;
}
.oxact-listen-btn{
justify-self:start!important;
min-height:42px!important;
padding:0 18px!important;
border:0!important;
border-radius:14px!important;
background:#fff!important;
color:#101329!important;
font-weight:950!important;
font-size:16px!important;
box-shadow:0 10px 22px rgba(0,0,0,.18)!important;
}
.oxact-grid,
.oxact-inline-grid,
.oxact-scene-grid{
min-height:0!important;
height:100%!important;
display:grid!important;
gap:14px!important;
align-items:stretch!important;
}
.oxact-grid-3,
.oxact-inline-grid,
.oxact-scene-grid{
grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
.oxact-grid-2{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
.oxact-choice-card,
.oxact-scene{
min-height:0!important;
height:100%!important;
display:grid!important;
grid-template-rows:minmax(0,1fr) auto!important;
padding:0!important;
border:1px solid rgba(255,255,255,.16)!important;
border-radius:22px!important;
overflow:hidden!important;
background:rgba(255,255,255,.075)!important;
color:#fff!important;
text-align:left!important;
cursor:pointer!important;
box-shadow:0 14px 34px rgba(0,0,0,.24)!important;
}
.oxact-choice-card img,
.oxact-scene img{
width:100%!important;
height:100%!important;
min-height:120px!important;
object-fit:cover!important;
background:#101329!important;
display:block!important;
}
.oxact-choice-card strong,
.oxact-scene strong{
display:flex!important;
align-items:center!important;
min-height:44px!important;
padding:12px 14px!important;
font-size:15px!important;
line-height:1.1!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
}
.oxact-choice-card:not(:has(img)),
.oxact-word-card{
grid-template-rows:1fr!important;
}
.oxact-choice-card:not(:has(img)) strong,
.oxact-word-card strong{
justify-content:center!important;
min-height:100%!important;
font-size:clamp(22px,3.2vw,42px)!important;
text-align:center!important;
}
.oxact-choice-card.selected,
.oxact-scene.selected{
outline:4px solid rgba(255,211,107,.88)!important;
background:rgba(255,211,107,.13)!important;
}
.oxact-choice-card.correct,
.oxact-scene.correct{
outline:4px solid #56d18f!important;
background:rgba(86,209,143,.15)!important;
}
.oxact-choice-card.wrong,
.oxact-scene.wrong{
outline:4px solid #ff6b7a!important;
background:rgba(255,107,122,.16)!important;
}
.oxact-drag-board{
min-height:0!important;
height:100%!important;
display:grid!important;
grid-template-columns:minmax(0,1.2fr) minmax(220px,.8fr)!important;
gap:14px!important;
}
.oxact-bank{
min-height:0!important;
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:12px!important;
}
.oxact-zones{
min-height:0!important;
display:grid!important;
gap:12px!important;
}
.oxact-drop-zone{
min-height:120px!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
gap:8px!important;
padding:14px!important;
border:2px dashed rgba(255,255,255,.28)!important;
border-radius:22px!important;
background:rgba(255,255,255,.055)!important;
color:#fff!important;
text-align:center!important;
}
.oxact-drop-zone span{
font-size:14px!important;
color:rgba(255,255,255,.72)!important;
font-weight:850!important;
}
.oxact-drop-zone b{
font-size:clamp(20px,2.4vw,32px)!important;
}
.oxact-drop-zone.filled{
border-style:solid!important;
background:rgba(255,211,107,.13)!important;
}
.oxact-match-board{
grid-template-columns:1fr 1fr!important;
}
.oxact-match-board .oxact-bank,
.oxact-match-board .oxact-zones{
grid-template-columns:1fr!important;
}
.oxact-match-board .oxact-choice-card{
min-height:92px!important;
grid-template-columns:96px 1fr!important;
grid-template-rows:1fr!important;
}
.oxact-match-board .oxact-choice-card img{
min-height:92px!important;
}
.oxact-prompt-card{
min-height:120px!important;
display:grid!important;
grid-template-columns:minmax(0,1fr)!important;
place-items:center!important;
padding:20px!important;
border-radius:22px!important;
background:rgba(255,255,255,.07)!important;
border:1px solid rgba(255,255,255,.14)!important;
color:#fff!important;
text-align:center!important;
}
.oxact-prompt-card img{
width:min(260px,42vw)!important;
max-height:160px!important;
object-fit:cover!important;
border-radius:16px!important;
margin-bottom:10px!important;
}
.oxact-prompt-card strong{
font-size:clamp(22px,3vw,38px)!important;
line-height:1.05!important;
}
.oxact-speak-panel{
height:100%!important;
display:grid!important;
gap:14px!important;
align-content:center!important;
}
.oxact-speak-card{
display:flex!important;
align-items:center!important;
justify-content:center!important;
min-height:130px!important;
padding:24px!important;
border-radius:24px!important;
background:linear-gradient(135deg,#ffb03a,#ffcf5a)!important;
color:#24160d!important;
font-size:clamp(28px,4vw,56px)!important;
font-weight:950!important;
line-height:1.04!important;
text-align:center!important;
}
.oxact-body-tips{
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:10px!important;
}
.oxact-body-tips span{
padding:14px!important;
border-radius:16px!important;
background:rgba(255,255,255,.08)!important;
text-align:center!important;
font-weight:900!important;
}
.oxact-engine-foot{
display:grid!important;
grid-template-columns:minmax(120px,1fr) auto auto minmax(90px,auto)!important;
align-items:center!important;
gap:10px!important;
}
.oxact-progress{
height:10px!important;
border-radius:999px!important;
background:rgba(255,255,255,.13)!important;
overflow:hidden!important;
}
.oxact-progress i{
display:block!important;
width:0;
height:100%!important;
background:linear-gradient(90deg,#ffd36b,#56d18f)!important;
transition:width .22s ease!important;
}
.oxact-check,
.oxact-reset{
min-height:42px!important;
padding:0 18px!important;
border:1px solid rgba(255,255,255,.14)!important;
border-radius:14px!important;
background:rgba(255,255,255,.08)!important;
color:#fff!important;
font-weight:950!important;
}
.oxact-check{
background:#fff!important;
color:#101329!important;
}
.oxact-feedback{
min-height:20px!important;
color:#ffd36b!important;
font-weight:950!important;
white-space:nowrap!important;
}
/* Activity should not be trapped inside the old 16:9 frame on mobile. */
@media(max-width:950px){
.oxact-engine-on .oxleo-book,
.oxact-engine-on .oxleo-book-full,
.oxact-engine-on .oxleo-book-activity-mode{
aspect-ratio:auto!important;
height:calc(100dvh - 174px - var(--ox-safe-bottom) - var(--ox-safe-top))!important;
min-height:460px!important;
}
.oxact-engine-on .oxleo-inline-activity{
padding:14px!important;
}
.oxact-engine-head h2{
font-size:clamp(26px,7vw,42px)!important;
}
.oxact-engine-head p{
font-size:14px!important;
}
}
/* Portrait mobile: stack large touch cards. */
@media(max-width:760px) and (orientation:portrait){
.oxact-engine-page{
gap:10px!important;
}
.oxact-engine-body{
gap:10px!important;
overflow:hidden!important;
}
.oxact-grid,
.oxact-inline-grid,
.oxact-scene-grid{
grid-template-columns:1fr!important;
overflow:auto!important;
-webkit-overflow-scrolling:touch!important;
padding-right:2px!important;
}
.oxact-choice-card,
.oxact-scene{
min-height:112px!important;
height:auto!important;
grid-template-columns:118px 1fr!important;
grid-template-rows:1fr!important;
}
.oxact-choice-card img,
.oxact-scene img{
min-height:112px!important;
height:100%!important;
}
.oxact-choice-card strong,
.oxact-scene strong{
white-space:normal!important;
min-height:100%!important;
font-size:15px!important;
}
.oxact-choice-card:not(:has(img)),
.oxact-word-card{
min-height:96px!important;
grid-template-columns:1fr!important;
}
.oxact-drag-board,
.oxact-match-board{
grid-template-columns:1fr!important;
overflow:auto!important;
-webkit-overflow-scrolling:touch!important;
}
.oxact-bank{
grid-template-columns:1fr!important;
}
.oxact-zones{
min-height:110px!important;
}
.oxact-engine-foot{
grid-template-columns:1fr 74px 74px!important;
}
.oxact-feedback{
grid-column:1/-1!important;
}
}
/* Landscape mobile: full app activity canvas; controls stay visible. */
@media(max-width:950px) and (orientation:landscape){
.oxact-engine-on .oxleo-story-main{
padding:8px 12px calc(58px + var(--ox-safe-bottom))!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
overflow:hidden!important;
}
.oxact-engine-on .oxleo-reader-card{
padding:0!important;
border:0!important;
background:transparent!important;
box-shadow:none!important;
}
.oxact-engine-on .oxleo-book,
.oxact-engine-on .oxleo-book-full,
.oxact-engine-on .oxleo-book-activity-mode{
width:calc(100vw - 24px)!important;
max-width:calc(100vw - 24px)!important;
height:calc(100dvh - 74px - var(--ox-safe-bottom))!important;
max-height:calc(100dvh - 74px - var(--ox-safe-bottom))!important;
min-height:0!important;
aspect-ratio:auto!important;
border-radius:18px!important;
}
.oxact-engine-on .oxleo-book-stage{
height:calc(100dvh - 74px - var(--ox-safe-bottom))!important;
width:100%!important;
margin:0!important;
padding:0!important;
}
.oxact-engine-on .oxleo-inline-activity{
padding:14px 16px 10px!important;
}
.oxact-engine-page{
gap:9px!important;
}
.oxact-engine-head span{
font-size:10px!important;
margin-bottom:3px!important;
}
.oxact-engine-head h2{
font-size:clamp(24px,4.1vw,38px)!important;
}
.oxact-engine-head p{
margin-top:3px!important;
font-size:13px!important;
}
.oxact-engine-body{
grid-template-rows:34px minmax(0,1fr)!important;
gap:8px!important;
}
.oxact-listen-btn{
min-height:34px!important;
font-size:14px!important;
padding:0 14px!important;
}
.oxact-grid,
.oxact-inline-grid,
.oxact-scene-grid{
gap:10px!important;
}
.oxact-choice-card,
.oxact-scene{
border-radius:16px!important;
}
.oxact-choice-card img,
.oxact-scene img{
min-height:0!important;
}
.oxact-choice-card strong,
.oxact-scene strong{
min-height:34px!important;
padding:8px 10px!important;
font-size:13px!important;
}
.oxact-drag-board{
grid-template-columns:1.2fr .8fr!important;
gap:10px!important;
}
.oxact-bank{
gap:10px!important;
}
.oxact-drop-zone{
min-height:0!important;
border-radius:16px!important;
}
.oxact-drop-zone b{
font-size:20px!important;
}
.oxact-prompt-card{
min-height:0!important;
padding:14px!important;
}
.oxact-prompt-card img{
max-height:90px!important;
margin-bottom:6px!important;
}
.oxact-prompt-card strong{
font-size:24px!important;
}
.oxact-speak-card{
min-height:86px!important;
padding:14px!important;
font-size:32px!important;
}
.oxact-body-tips span{
padding:8px!important;
font-size:13px!important;
}
.oxact-engine-foot{
grid-template-columns:minmax(120px,1fr) 78px 78px minmax(90px,auto)!important;
gap:8px!important;
}
.oxact-check,
.oxact-reset{
min-height:34px!important;
padding:0 10px!important;
font-size:13px!important;
}
.oxact-feedback{
font-size:13px!important;
}
}
/* ===== v5.9.9 Text-only app mode: no image fallback, no activities ===== */
.oxleo-end-activities,.oxact-engine-page,.oxleo-activity-modal,.oxleo-inline-activity{display:none!important}
.oxleo-text-only-book{background:linear-gradient(180deg,#171b3a,#090c21)!important;aspect-ratio:16/9!important}
.oxleo-text-only-book::before{display:none!important}
.oxleo-text-only-book .oxleo-image-page,.oxleo-text-only-book .oxleo-spread-bg,.oxleo-text-only-book .oxleo-page-img{display:none!important}
.oxleo-text-only-book .oxleo-text-page{position:absolute!important;inset:0!important;height:100%!important;background:radial-gradient(circle at 50% 15%,rgba(255,255,255,.10),rgba(255,255,255,0) 42%),linear-gradient(180deg,#171b3a,#090c21)!important;align-items:center!important;justify-content:center!important;padding:clamp(22px,5vw,56px)!important;box-sizing:border-box!important}
.oxleo-text-only-book .oxleo-copy{max-width:980px!important;margin:0 auto!important;padding:0!important;color:#fff!important;text-shadow:none!important;font-family:Georgia,"Times New Roman",serif!important;font-size:clamp(24px,4vw,54px)!important;line-height:1.15!important;text-align:center!important;font-weight:850!important}
.oxleo-mini-book img[src=""],.oxleo-continue-cover img[src=""]{display:none!important}
.oxleo-mini-link:has(img[src=""]),.oxleo-continue-cover:has(img[src=""]){background:linear-gradient(180deg,#171b3a,#090c21)!important}
.oxleo-mini-link:has(img[src=""])::before{content:"Book";position:absolute;inset:18px;border:1px solid rgba(255,255,255,.18);border-radius:16px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.55);font-weight:950;letter-spacing:.12em;text-transform:uppercase}
.oxleo-sidebar .oxleo-nav a[href*="activities-hub"],.oxleo-mobile-tabbar a[href*="activities-hub"],#activities-hub{display:none!important}
.oxleo-user-dot{width:38px;height:38px;border-radius:14px;background:linear-gradient(135deg,#7c5cff,#22a8d8);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:950;font-size:12px}
@media(max-width:900px){.oxleo-mobile-tabbar{grid-template-columns:repeat(4,1fr)!important}.oxleo-text-only-book .oxleo-copy{font-size:clamp(22px,7vw,42px)!important;line-height:1.12!important}.oxleo-text-only-book{min-height:260px!important}}
@media(max-width:950px) and (orientation:landscape){.oxleo-text-only-book .oxleo-copy{font-size:clamp(24px,5vw,46px)!important}.oxleo-text-only-book{height:calc(100dvh - 82px - var(--ox-safe-bottom))!important;aspect-ratio:auto!important}}
/* v5.9.10 Student-facing empty library state */
.oxleo-student-empty{
max-width:760px!important;
margin:34px auto 0!important;
padding:34px 26px!important;
border-radius:28px!important;
background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.055))!important;
border:1px solid rgba(255,255,255,.14)!important;
box-shadow:0 24px 70px rgba(0,0,0,.26)!important;
text-align:center!important;
color:#fff!important;
}
.oxleo-student-empty .oxleo-empty-icon{
width:74px!important;
height:74px!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
margin:0 auto 16px!important;
border-radius:24px!important;
background:rgba(255,255,255,.12)!important;
font-size:36px!important;
}
.oxleo-student-empty h2{
margin:0 0 10px!important;
font-size:clamp(28px,4vw,48px)!important;
line-height:1!important;
letter-spacing:-.04em!important;
}
.oxleo-student-empty p{
max-width:520px!important;
margin:0 auto!important;
color:rgba(255,255,255,.78)!important;
font-size:clamp(15px,1.7vw,18px)!important;
line-height:1.45!important;
}
.oxleo-student-empty small{
display:block!important;
margin-top:16px!important;
color:#ffd36b!important;
font-weight:850!important;
}
@media(max-width:760px){
.oxleo-student-empty{
margin-top:18px!important;
padding:26px 18px!important;
border-radius:24px!important;
}
.oxleo-library-sub{
max-width:280px!important;
}
}
/* ===== v5.9.11 Mobile Library Student Polish ===== */
@media(max-width:900px){
.oxleo-library-main{
width:100%!important;
max-width:100%!important;
margin:0 auto!important;
padding:calc(34px + var(--ox-safe-top)) max(22px, env(safe-area-inset-left)) calc(112px + var(--ox-safe-bottom)) max(22px, env(safe-area-inset-right))!important;
box-sizing:border-box!important;
overflow-x:hidden!important;
}
.oxleo-library-main > *{
max-width:100%!important;
box-sizing:border-box!important;
}
.oxleo-app-topbar{
width:100%!important;
margin:0 auto 28px!important;
padding:0!important;
box-sizing:border-box!important;
}
.oxleo-app-topbar h1{
margin:0!important;
font-size:clamp(42px,12vw,62px)!important;
line-height:.92!important;
letter-spacing:-.055em!important;
}
.oxleo-library-sub{
max-width:calc(100vw - 44px)!important;
margin:14px 0 0!important;
font-size:clamp(16px,4.2vw,21px)!important;
line-height:1.35!important;
color:rgba(255,255,255,.68)!important;
}
.oxleo-top-actions{
width:100%!important;
max-width:100%!important;
display:flex!important;
gap:10px!important;
margin:22px 0 0!important;
padding:0 0 4px!important;
overflow-x:auto!important;
-webkit-overflow-scrolling:touch!important;
scrollbar-width:none!important;
}
.oxleo-top-actions::-webkit-scrollbar{display:none!important}
.oxleo-top-actions button{
flex:0 0 auto!important;
min-height:48px!important;
padding:0 24px!important;
border-radius:999px!important;
font-size:17px!important;
font-weight:900!important;
}
.oxleo-empty-library,
.oxleo-student-empty{
width:100%!important;
max-width:100%!important;
min-height:360px!important;
margin:42px auto 0!important;
padding:34px 24px!important;
border-radius:28px!important;
box-sizing:border-box!important;
}
.oxleo-student-empty h2,
.oxleo-empty-library h2{
font-size:clamp(30px,8vw,46px)!important;
line-height:1.02!important;
}
.oxleo-student-empty p,
.oxleo-empty-library p{
font-size:clamp(16px,4.2vw,20px)!important;
line-height:1.4!important;
}
/* If an older cached empty-library block appears, make it less harmful visually. */
.oxleo-empty-library a[href*="admin.php"]{
display:none!important;
}
}
@media(max-width:430px){
.oxleo-library-main{
padding-left:24px!important;
padding-right:24px!important;
}
}
/* ===== v5.9.12 Mobile Library Centered Student UI ===== */
@media(max-width:900px){
.oxleo-library-main{
padding:calc(38px + var(--ox-safe-top)) 22px calc(112px + var(--ox-safe-bottom))!important;
text-align:center!important;
}
.oxleo-app-topbar{
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
text-align:center!important;
margin:0 auto 26px!important;
}
.oxleo-app-topbar > div:first-child{
width:100%!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
}
.oxleo-app-topbar h1{
font-size:clamp(34px,9vw,44px)!important;
line-height:1!important;
letter-spacing:-.035em!important;
text-align:center!important;
}
.oxleo-library-sub{
max-width:330px!important;
margin:12px auto 0!important;
text-align:center!important;
font-size:clamp(15px,3.8vw,18px)!important;
line-height:1.35!important;
}
.oxleo-top-actions{
justify-content:center!important;
margin:22px auto 0!important;
gap:10px!important;
overflow:visible!important;
flex-wrap:wrap!important;
}
.oxleo-top-actions button{
min-height:44px!important;
padding:0 22px!important;
font-size:16px!important;
}
.oxleo-student-empty,
.oxleo-empty-library{
margin:34px auto 0!important;
min-height:330px!important;
padding:30px 20px!important;
text-align:center!important;
}
.oxleo-student-empty h2,
.oxleo-empty-library h2{
font-size:clamp(28px,7vw,38px)!important;
line-height:1.05!important;
text-align:center!important;
}
.oxleo-student-empty p,
.oxleo-empty-library p{
max-width:330px!important;
margin-left:auto!important;
margin-right:auto!important;
font-size:clamp(15px,3.9vw,18px)!important;
text-align:center!important;
}
}
@media(max-width:390px){
.oxleo-library-main{
padding-left:18px!important;
padding-right:18px!important;
}
.oxleo-top-actions button{
padding:0 18px!important;
}
}
/* ===== v5.9.13 Student app navigation + mobile reader controls ===== */
/* 3-tab student nav: no empty Read page on the base app. */
@media(max-width:900px){
.oxleo-mobile-tabbar-3{
grid-template-columns:repeat(3,1fr)!important;
max-width:100%!important;
}
.oxleo-mobile-tabbar-3 a{
min-width:0!important;
}
}
/* Empty story page must be centered and student-facing, not admin-facing. */
.oxleo-no-book-view{
min-height:100dvh!important;
background:#070918!important;
}
.oxleo-student-empty-story{
width:100%!important;
min-height:calc(100dvh - 96px)!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
text-align:center!important;
padding:44px 24px calc(118px + var(--ox-safe-bottom))!important;
box-sizing:border-box!important;
color:#fff!important;
}
.oxleo-student-empty-story .oxleo-empty-icon{
width:72px!important;
height:72px!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
margin:0 auto 16px!important;
border-radius:24px!important;
background:rgba(255,255,255,.10)!important;
font-size:34px!important;
}
.oxleo-student-empty-story h1{
margin:0 0 10px!important;
font-size:clamp(30px,8vw,42px)!important;
line-height:1.05!important;
letter-spacing:-.04em!important;
}
.oxleo-student-empty-story p{
max-width:340px!important;
margin:0 auto 22px!important;
color:rgba(255,255,255,.72)!important;
font-size:clamp(15px,3.9vw,18px)!important;
line-height:1.4!important;
}
.oxleo-student-empty-story a{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
min-height:48px!important;
padding:0 24px!important;
border-radius:999px!important;
background:#fff!important;
color:#11142b!important;
text-decoration:none!important;
font-weight:950!important;
}
/* Profile placeholder page for student account. */
.oxleo-profile-main{
min-height:100dvh!important;
margin-left:224px!important;
padding:48px 32px!important;
box-sizing:border-box!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
color:#fff!important;
}
.oxleo-profile-card{
width:min(760px,100%)!important;
padding:38px 28px!important;
border-radius:30px!important;
background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.055))!important;
border:1px solid rgba(255,255,255,.14)!important;
text-align:center!important;
box-shadow:0 24px 70px rgba(0,0,0,.28)!important;
}
.oxleo-profile-avatar{
width:96px!important;
height:96px!important;
margin:0 auto 18px!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
border-radius:32px!important;
background:linear-gradient(135deg,#7c5cff,#2da7df)!important;
color:#fff!important;
font-weight:950!important;
font-size:30px!important;
}
.oxleo-profile-card h1{
margin:0 0 10px!important;
font-size:clamp(34px,5vw,54px)!important;
letter-spacing:-.045em!important;
}
.oxleo-profile-card p{
max-width:430px!important;
margin:0 auto 20px!important;
color:rgba(255,255,255,.74)!important;
font-size:17px!important;
line-height:1.45!important;
}
.oxleo-profile-actions{
display:flex!important;
justify-content:center!important;
gap:10px!important;
flex-wrap:wrap!important;
margin:20px 0!important;
}
.oxleo-profile-actions button{
min-height:44px!important;
border-radius:999px!important;
border:1px solid rgba(255,255,255,.14)!important;
background:rgba(255,255,255,.08)!important;
color:#fff!important;
font-weight:900!important;
padding:0 18px!important;
}
.oxleo-profile-card small{
color:#ffd36b!important;
font-weight:800!important;
}
@media(max-width:900px){
.oxleo-profile-main{
margin-left:0!important;
padding:calc(38px + var(--ox-safe-top)) 22px calc(112px + var(--ox-safe-bottom))!important;
}
.oxleo-profile-card{
padding:32px 22px!important;
border-radius:28px!important;
}
.oxleo-profile-card h1{
font-size:clamp(30px,8vw,42px)!important;
}
}
/* Book reader mobile: controls become the floating app control dock. */
@media(max-width:900px){
.oxleo-story-view[data-book] .oxleo-story-main{
padding-bottom:calc(132px + var(--ox-safe-bottom))!important;
}
.oxleo-story-view[data-book] .oxleo-mobile-tabbar{
display:none!important;
}
.oxleo-story-view[data-book] .oxleo-controls{
position:fixed!important;
left:50%!important;
bottom:calc(10px + var(--ox-safe-bottom))!important;
transform:translateX(-50%)!important;
width:min(430px,calc(100vw - 24px))!important;
display:grid!important;
grid-template-columns:1fr 1fr 1fr!important;
grid-template-areas:
"prev listen next"
"normal count slow"!important;
gap:8px!important;
margin:0!important;
padding:9px!important;
border-radius:26px!important;
background:rgba(7,9,24,.93)!important;
border:1px solid rgba(255,255,255,.12)!important;
box-shadow:0 -16px 46px rgba(0,0,0,.38)!important;
backdrop-filter:blur(18px)!important;
z-index:100000!important;
box-sizing:border-box!important;
}
.oxleo-story-view[data-book] .oxleo-controls .oxleo-prev{grid-area:prev!important}
.oxleo-story-view[data-book] .oxleo-controls .oxleo-listen{grid-area:listen!important}
.oxleo-story-view[data-book] .oxleo-controls .oxleo-next{grid-area:next!important}
.oxleo-story-view[data-book] .oxleo-controls .oxleo-read-speed[data-speed="normal"]{grid-area:normal!important}
.oxleo-story-view[data-book] .oxleo-controls .oxleo-read-speed[data-speed="slow"]{grid-area:slow!important}
.oxleo-story-view[data-book] .oxleo-controls .oxleo-count{
grid-area:count!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
margin:0!important;
color:rgba(255,255,255,.72)!important;
font-size:11px!important;
font-weight:850!important;
white-space:nowrap!important;
}
.oxleo-story-view[data-book] .oxleo-controls button{
width:100%!important;
min-height:42px!important;
padding:0 8px!important;
border-radius:17px!important;
font-size:12px!important;
line-height:1!important;
}
.oxleo-story-view[data-book] .oxleo-controls .oxleo-nav-btn{
color:#ffd98d!important;
}
.oxleo-story-view[data-book] .oxleo-controls .oxleo-nav-btn::first-letter{
text-transform:uppercase;
}
.oxleo-story-view[data-book] .oxleo-copy{
font-size:clamp(18px,5.2vw,26px)!important;
line-height:1.12!important;
padding:22px 14px 12px!important;
}
.oxleo-story-view[data-book] .oxleo-reader-header{
gap:8px!important;
}
.oxleo-story-view[data-book] .oxleo-title strong{
font-size:15px!important;
}
}
@media(max-width:900px) and (orientation:landscape){
.oxleo-story-view[data-book] .oxleo-controls{
width:min(760px,calc(100vw - 28px))!important;
grid-template-columns:96px 86px 86px 86px 96px auto!important;
grid-template-areas:"prev listen normal slow next count"!important;
border-radius:18px!important;
padding:6px!important;
}
.oxleo-story-view[data-book] .oxleo-controls button{
min-height:34px!important;
font-size:12px!important;
}
}
/* ===== v5.9.14 Base polish: centered library, fitted text reader, real appearance vars ===== */
/* Web reader card: centered and slightly lower; no left-heavy layout. */
@media(min-width:901px){
.oxleo-story-main{
grid-template-columns:minmax(0,980px) minmax(220px,260px)!important;
justify-content:center!important;
gap:18px!important;
padding-top:34px!important;
padding-left:calc(224px + 28px)!important;
padding-right:28px!important;
box-sizing:border-box!important;
}
.oxleo-reader-card{
width:100%!important;
max-width:980px!important;
margin:0 auto!important;
}
.oxleo-reader-header{
margin-bottom:18px!important;
}
}
/* Text-only reader must obey Reader Appearance settings. */
.oxleo-text-only-book .oxleo-text-page{
inset:0!important;
width:100%!important;
height:100%!important;
min-height:0!important;
padding:clamp(20px,4vw,52px)!important;
box-sizing:border-box!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
background:
radial-gradient(circle at 50% 28%,rgba(255,255,255,calc(var(--ox-reader-overlay-opacity) * .10)),transparent 48%),
linear-gradient(180deg,rgba(255,255,255,calc(var(--ox-reader-overlay-opacity) * .05)),rgba(255,255,255,calc(var(--ox-reader-overlay-opacity) * .02)))!important;
}
.oxleo-text-only-book .oxleo-copy{
width:100%!important;
max-width:820px!important;
margin:0 auto!important;
padding:0!important;
box-sizing:border-box!important;
color:var(--ox-reader-text-color)!important;
font-size:clamp(22px,calc(var(--ox-reader-font-desktop) * 2.25),46px)!important;
line-height:1.13!important;
text-align:center!important;
overflow-wrap:anywhere!important;
hyphens:auto!important;
}
/* Library mobile: Netflix/app centered structure; no left gutter drift. */
@media(max-width:900px){
.oxleo-library-main{
width:100vw!important;
max-width:100vw!important;
margin:0!important;
padding:calc(34px + var(--ox-safe-top)) 18px calc(120px + var(--ox-safe-bottom))!important;
box-sizing:border-box!important;
overflow-x:hidden!important;
text-align:center!important;
}
.oxleo-app-topbar{
max-width:430px!important;
margin:0 auto 28px!important;
text-align:center!important;
align-items:center!important;
}
.oxleo-app-topbar h1{
font-size:clamp(36px,9vw,48px)!important;
line-height:1!important;
letter-spacing:-.04em!important;
}
.oxleo-library-sub{
max-width:340px!important;
margin:12px auto 0!important;
font-size:clamp(15px,3.8vw,18px)!important;
line-height:1.35!important;
text-align:center!important;
}
.oxleo-top-actions{
width:100%!important;
justify-content:center!important;
flex-wrap:nowrap!important;
overflow-x:auto!important;
gap:10px!important;
margin:22px auto 0!important;
padding:0 2px 4px!important;
scrollbar-width:none!important;
}
.oxleo-top-actions::-webkit-scrollbar{display:none!important}
.oxleo-top-actions button{
flex:0 0 auto!important;
min-height:42px!important;
padding:0 20px!important;
font-size:15px!important;
}
.oxleo-row{
width:100%!important;
max-width:100%!important;
margin:34px auto 0!important;
text-align:left!important;
box-sizing:border-box!important;
}
.oxleo-row-head{
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
gap:10px!important;
padding:0 2px!important;
}
.oxleo-row-head h2{
font-size:clamp(24px,6.3vw,32px)!important;
line-height:1.1!important;
letter-spacing:-.025em!important;
}
.oxleo-empty-row{
width:100%!important;
box-sizing:border-box!important;
min-height:82px!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
text-align:center!important;
padding:18px!important;
font-size:16px!important;
}
.oxleo-cover-rail{
width:100%!important;
max-width:100%!important;
display:flex!important;
gap:14px!important;
overflow-x:auto!important;
padding:2px 2px 10px!important;
scroll-snap-type:x proximity!important;
scrollbar-width:none!important;
}
.oxleo-cover-rail::-webkit-scrollbar{display:none!important}
.oxleo-mini-book{
flex:0 0 158px!important;
width:158px!important;
max-width:158px!important;
min-width:158px!important;
scroll-snap-align:start!important;
}
.oxleo-mini-link{
height:220px!important;
border-radius:20px!important;
}
}
/* Continue Reading on mobile: centered, no overflow. */
@media(max-width:900px){
.oxleo-continue-row{
width:100%!important;
max-width:100%!important;
margin:30px auto 0!important;
text-align:center!important;
}
.oxleo-continue-row h2{
font-size:clamp(24px,6.2vw,32px)!important;
text-align:center!important;
margin:0 0 16px!important;
}
.oxleo-continue-card{
width:100%!important;
max-width:390px!important;
margin:0 auto!important;
padding:18px 16px!important;
box-sizing:border-box!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
text-align:center!important;
gap:12px!important;
overflow:hidden!important;
}
.oxleo-continue-cover{
width:88px!important;
height:118px!important;
min-width:88px!important;
border-radius:16px!important;
overflow:hidden!important;
}
.oxleo-continue-cover img{
width:100%!important;
height:100%!important;
object-fit:cover!important;
}
.oxleo-continue-info{
width:100%!important;
min-width:0!important;
text-align:center!important;
}
.oxleo-continue-info strong{
display:block!important;
max-width:100%!important;
font-size:clamp(20px,5.3vw,26px)!important;
line-height:1.1!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
}
.oxleo-continue-info small{
display:block!important;
max-width:100%!important;
font-size:13px!important;
line-height:1.25!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
}
.oxleo-continue-info a{
margin:12px auto 0!important;
}
}
/* Mobile portrait reader: text fits the page, not huge blocks. */
@media(max-width:900px) and (orientation:portrait){
.oxleo-story-view[data-book] .oxleo-story-main{
padding:calc(18px + var(--ox-safe-top)) 14px calc(136px + var(--ox-safe-bottom))!important;
}
.oxleo-story-view[data-book] .oxleo-reader-card{
width:100%!important;
max-width:430px!important;
margin:0 auto!important;
}
.oxleo-text-only-book{
aspect-ratio:9/12!important;
max-height:calc(100dvh - 210px - var(--ox-safe-bottom))!important;
}
.oxleo-text-only-book .oxleo-copy{
max-width:100%!important;
font-size:clamp(22px,calc(var(--ox-reader-font-mobile) * 1.85),34px)!important;
line-height:1.13!important;
}
}
/* Mobile landscape reader: must fit whole text box and controls; no clipped giant text. */
@media(max-width:950px) and (orientation:landscape){
.oxleo-story-view[data-book] .oxleo-story-main{
padding:8px 14px calc(58px + var(--ox-safe-bottom))!important;
min-height:100dvh!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
overflow:hidden!important;
}
.oxleo-story-view[data-book] .oxleo-reader-card{
width:100%!important;
max-width:100%!important;
margin:0 auto!important;
padding:0!important;
border:0!important;
background:transparent!important;
box-shadow:none!important;
}
.oxleo-story-view[data-book] .oxleo-book-stage{
width:100%!important;
height:calc(100dvh - 78px - var(--ox-safe-bottom))!important;
margin:0!important;
padding:0!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
}
.oxleo-story-view[data-book] .oxleo-book,
.oxleo-story-view[data-book] .oxleo-book-full{
width:min(82vw,calc((100dvh - 86px - var(--ox-safe-bottom)) * 1.777))!important;
max-width:82vw!important;
max-height:calc(100dvh - 86px - var(--ox-safe-bottom))!important;
aspect-ratio:16/9!important;
border-radius:18px!important;
}
.oxleo-story-view[data-book] .oxleo-text-only-book{
width:min(68vw,760px)!important;
height:calc(100dvh - 92px - var(--ox-safe-bottom))!important;
max-height:calc(100dvh - 92px - var(--ox-safe-bottom))!important;
aspect-ratio:auto!important;
}
.oxleo-text-only-book .oxleo-text-page{
padding:18px 24px!important;
}
.oxleo-text-only-book .oxleo-copy{
max-width:100%!important;
font-size:clamp(20px,calc(var(--ox-reader-font-mobile) * 1.35),31px)!important;
line-height:1.08!important;
}
.oxleo-story-view[data-book] .oxleo-controls{
width:min(820px,calc(100vw - 28px))!important;
grid-template-columns:108px 82px 82px 82px 108px minmax(90px,1fr)!important;
grid-template-areas:"prev listen normal slow next count"!important;
bottom:calc(8px + var(--ox-safe-bottom))!important;
}
.oxleo-story-view[data-book] .oxleo-controls button{
min-height:34px!important;
font-size:12px!important;
}
.oxleo-story-view[data-book] .oxleo-controls .oxleo-count{
font-size:12px!important;
}
}
/* ===== v5.9.15 Reader Editor Variables ===== */
/* Admin preview must behave like the real reader. */
.oracyx-reader-appearance{
--ox-preview-justify:center;
--ox-preview-align:center;
}
.oracyx-reader-preview{
display:grid!important;
grid-template-columns:1fr!important;
gap:14px!important;
}
.oracyx-reader-preview-stage{
position:relative!important;
overflow:hidden!important;
}
.oracyx-reader-preview-stage img{
width:100%!important;
height:100%!important;
object-fit:var(--ox-reader-image-fit)!important;
object-position:var(--ox-reader-image-x) var(--ox-reader-image-y)!important;
transform:scale(var(--ox-reader-image-scale))!important;
transform-origin:var(--ox-reader-image-x) var(--ox-reader-image-y)!important;
}
.oracyx-reader-preview-overlay{
position:absolute!important;
inset:0!important;
height:100%!important;
display:flex!important;
align-items:var(--ox-reader-text-v-align)!important;
justify-content:var(--ox-reader-text-h-align)!important;
padding:var(--ox-reader-text-box-padding)!important;
box-sizing:border-box!important;
background:linear-gradient(180deg,rgba(255,255,255,calc(var(--ox-reader-overlay-opacity) * .05)),rgba(255,255,255,calc(var(--ox-reader-overlay-opacity) * .16)))!important;
}
.oracyx-reader-preview-overlay p{
margin:0!important;
max-width:86%!important;
padding:var(--ox-reader-text-box-padding)!important;
border-radius:var(--ox-reader-text-box-radius)!important;
background:color-mix(in srgb, var(--ox-reader-text-box-bg) calc(var(--ox-reader-text-box-opacity) * 100%), transparent)!important;
color:var(--ox-reader-text-color)!important;
font-family:var(--ox-reader-font-family)!important;
font-size:var(--ox-reader-font-desktop)!important;
font-weight:var(--ox-reader-font-weight)!important;
line-height:var(--ox-reader-line-height)!important;
text-align:var(--ox-reader-text-align)!important;
}
.oracyx-reader-preview-textonly{
min-height:220px!important;
background:#11142b!important;
}
/* Real reader: apply Word-like text controls. */
.oxleo-text-page{
display:flex!important;
align-items:var(--ox-reader-text-v-align)!important;
justify-content:var(--ox-reader-text-h-align)!important;
padding:var(--ox-reader-text-box-padding)!important;
box-sizing:border-box!important;
}
.oxleo-copy{
font-family:var(--ox-reader-font-family)!important;
font-weight:var(--ox-reader-font-weight)!important;
line-height:var(--ox-reader-line-height)!important;
color:var(--ox-reader-text-color)!important;
text-align:var(--ox-reader-text-align)!important;
background:color-mix(in srgb, var(--ox-reader-text-box-bg) calc(var(--ox-reader-text-box-opacity) * 100%), transparent)!important;
border-radius:var(--ox-reader-text-box-radius)!important;
padding:var(--ox-reader-text-box-padding)!important;
box-sizing:border-box!important;
}
.oxleo-page-img,
.oxleo-video{
object-fit:var(--ox-reader-image-fit)!important;
object-position:var(--ox-reader-image-x) var(--ox-reader-image-y)!important;
transform:scale(var(--ox-reader-image-scale))!important;
transform-origin:var(--ox-reader-image-x) var(--ox-reader-image-y)!important;
}
/* Text-only book: stop hard-coded clamp from overpowering admin font size. */
.oxleo-text-only-book .oxleo-text-page{
align-items:var(--ox-reader-text-v-align)!important;
justify-content:var(--ox-reader-text-h-align)!important;
padding:var(--ox-reader-text-box-padding)!important;
}
.oxleo-text-only-book .oxleo-copy{
font-size:var(--ox-reader-font-desktop)!important;
line-height:var(--ox-reader-line-height)!important;
max-width:92%!important;
}
@media(max-width:900px){
.oxleo-copy,
.oxleo-text-only-book .oxleo-copy{
font-size:var(--ox-reader-font-mobile)!important;
line-height:var(--ox-reader-line-height)!important;
}
}
/* Small admin layout improvement for the expanded controls. */
.oracyx-reader-fields{
display:grid!important;
grid-template-columns:repeat(2,minmax(220px,1fr))!important;
gap:14px 18px!important;
}
.oracyx-reader-fields label{
min-width:0!important;
}
.oracyx-reader-fields input,
.oracyx-reader-fields select{
width:100%!important;
max-width:100%!important;
}
@media(max-width:1100px){
.oracyx-reader-fields{
grid-template-columns:1fr!important;
}
}
/* ===== v5.9.16 Reader Settings Studio Layout + real alignment variables ===== */
/* Real reader: use mapped flex variables, not raw top/bottom values. */
.oxleo-text-page,
.oxleo-text-only-book .oxleo-text-page{
align-items:var(--ox-reader-align-items)!important;
justify-content:var(--ox-reader-justify-content)!important;
}
.oracyx-reader-preview-overlay{
align-items:var(--ox-reader-align-items)!important;
justify-content:var(--ox-reader-justify-content)!important;
}
/* Admin settings page: big preview first, controls below like a mini editor. */
.oracyx-reader-appearance{
width:100%!important;
max-width:100%!important;
display:grid!important;
grid-template-columns:1fr!important;
gap:18px!important;
padding:18px!important;
box-sizing:border-box!important;
}
.oracyx-reader-preview{
grid-row:1!important;
width:100%!important;
display:grid!important;
grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
gap:18px!important;
align-items:stretch!important;
}
.oracyx-reader-preview-stage{
width:100%!important;
min-height:360px!important;
aspect-ratio:16/9!important;
border-radius:22px!important;
background:#0b0e24!important;
box-shadow:0 18px 46px rgba(0,0,0,.22)!important;
}
.oracyx-reader-preview-textonly{
aspect-ratio:16/9!important;
min-height:360px!important;
}
.oracyx-reader-fields{
grid-row:2!important;
width:100%!important;
display:grid!important;
grid-template-columns:repeat(6,minmax(130px,1fr))!important;
gap:10px!important;
align-items:end!important;
padding:14px!important;
border-radius:18px!important;
background:#f8fafc!important;
border:1px solid #d9e1ec!important;
box-sizing:border-box!important;
}
.oracyx-reader-fields label{
display:flex!important;
flex-direction:column!important;
gap:5px!important;
margin:0!important;
min-width:0!important;
}
.oracyx-reader-fields label span{
font-size:11px!important;
font-weight:800!important;
color:#111827!important;
}
.oracyx-reader-fields input,
.oracyx-reader-fields select{
min-height:34px!important;
width:100%!important;
font-size:12px!important;
padding:4px 8px!important;
box-sizing:border-box!important;
}
.oracyx-reader-fields input[type="range"]{
padding:0!important;
}
.oracyx-reader-fields input[type="color"]{
padding:2px!important;
}
.oracyx-reader-fields strong{
font-size:11px!important;
color:#475467!important;
}
@media(max-width:1280px){
.oracyx-reader-fields{
grid-template-columns:repeat(4,minmax(130px,1fr))!important;
}
}
@media(max-width:900px){
.oracyx-reader-preview{
grid-template-columns:1fr!important;
}
.oracyx-reader-preview-stage,
.oracyx-reader-preview-textonly{
min-height:260px!important;
}
.oracyx-reader-fields{
grid-template-columns:repeat(2,minmax(130px,1fr))!important;
}
}
/* v5.9.16 Listen button active feedback */
.oxleo-listen.is-listening,
.oxleo-listen.active{
background:linear-gradient(135deg,#ffd36b,#ff9f43)!important;
color:#18120a!important;
box-shadow:0 0 0 3px rgba(255,211,107,.22),0 12px 24px rgba(0,0,0,.22)!important;
}
.oxleo-listen.is-listening::after{
content:"";
width:7px;
height:7px;
margin-left:6px;
display:inline-block;
border-radius:999px;
background:#18120a;
animation:oxleoPulseDot .8s infinite alternate;
}
@keyframes oxleoPulseDot{from{opacity:.35;transform:scale(.8)}to{opacity:1;transform:scale(1.15)}}
/* v5.9.17 Real reader alignment mapping final */
.oxleo-text-page,
.oxleo-text-only-book .oxleo-text-page{
align-items:var(--ox-reader-align-items)!important;
justify-content:var(--ox-reader-justify-content)!important;
}
.oxleo-copy,
.oxleo-text-only-book .oxleo-copy{
font-family:var(--ox-reader-font-family)!important;
font-weight:var(--ox-reader-font-weight)!important;
line-height:var(--ox-reader-line-height)!important;
text-align:var(--ox-reader-text-align)!important;
color:var(--ox-reader-text-color)!important;
background:color-mix(in srgb, var(--ox-reader-text-box-bg) calc(var(--ox-reader-text-box-opacity) * 100%), transparent)!important;
border-radius:var(--ox-reader-text-box-radius)!important;
padding:var(--ox-reader-text-box-padding)!important;
}
.oxleo-page-img,
.oxleo-video{
object-fit:var(--ox-reader-image-fit)!important;
object-position:var(--ox-reader-image-x) var(--ox-reader-image-y)!important;
transform:scale(var(--ox-reader-image-scale))!important;
transform-origin:var(--ox-reader-image-x) var(--ox-reader-image-y)!important;
}
/* v5.9.38: live animation videos share the exact scene image geometry. */
.oxleo-live-video-layer{
overflow:hidden!important;
background:transparent!important;
}
.oxleo-live-video-layer video,
.oxleo-live-video{
width:100%!important;
height:100%!important;
object-fit:var(--ox-reader-image-fit)!important;
object-position:var(--ox-reader-image-x) var(--ox-reader-image-y)!important;
transform:scale(var(--ox-reader-image-scale))!important;
transform-origin:var(--ox-reader-image-x) var(--ox-reader-image-y)!important;
background:transparent!important;
}
/* ===== v5.9.18 Mobile Reader Font + Fit Emergency Fix =====
Final cascade lock: mobile image-page text must obey Reader Appearance.
*/
@media(max-width:900px){
/* Reader shell: larger image/card, less wasted vertical space. */
.oxleo-story-view[data-book] .oxleo-story-main{
padding:calc(10px + var(--ox-safe-top)) 10px calc(116px + var(--ox-safe-bottom))!important;
min-height:100dvh!important;
box-sizing:border-box!important;
}
.oxleo-story-view[data-book] .oxleo-reader-card{
width:100%!important;
max-width:calc(100vw - 20px)!important;
margin:0 auto!important;
padding:14px!important;
border-radius:22px!important;
box-sizing:border-box!important;
}
.oxleo-story-view[data-book] .oxleo-reader-header{
padding:0!important;
margin:0 0 12px!important;
min-height:0!important;
}
.oxleo-story-view[data-book] .oxleo-title strong{
font-size:14px!important;
line-height:1.15!important;
}
.oxleo-story-view[data-book] .oxleo-title small{
font-size:11px!important;
}
.oxleo-story-view[data-book] .oxleo-book-stage{
padding:0!important;
margin:0!important;
background:transparent!important;
}
.oxleo-story-view[data-book] .oxleo-book,
.oxleo-story-view[data-book] .oxleo-book-full{
width:100%!important;
max-width:100%!important;
border-radius:18px!important;
}
/* Main fix: normal image pages were using old hard-coded mobile font. */
.oxleo-story-view[data-book] .oxleo-book:not(.oxleo-text-only-book) .oxleo-copy,
.oxleo-story-view[data-book] .oxleo-book-full:not(.oxleo-text-only-book) .oxleo-copy{
font-size:var(--ox-reader-font-mobile)!important;
line-height:var(--ox-reader-line-height)!important;
font-family:var(--ox-reader-font-family)!important;
font-weight:var(--ox-reader-font-weight)!important;
color:var(--ox-reader-text-color)!important;
text-align:var(--ox-reader-text-align)!important;
max-width:min(92%,680px)!important;
width:auto!important;
padding:calc(var(--ox-reader-text-box-padding) * .55)!important;
border-radius:var(--ox-reader-text-box-radius)!important;
background:color-mix(in srgb, var(--ox-reader-text-box-bg) calc(var(--ox-reader-text-box-opacity) * 100%), transparent)!important;
white-space:normal!important;
overflow-wrap:break-word!important;
}
.oxleo-story-view[data-book] .oxleo-text-page{
height:auto!important;
min-height:0!important;
inset:0!important;
padding:calc(var(--ox-reader-text-box-padding) * .55)!important;
align-items:var(--ox-reader-align-items)!important;
justify-content:var(--ox-reader-justify-content)!important;
background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(0,0,0,calc(var(--ox-reader-overlay-opacity) * .32)) 100%)!important;
}
/* Smaller, cleaner control dock on portrait mobile. */
.oxleo-story-view[data-book] .oxleo-controls{
width:min(390px,calc(100vw - 24px))!important;
grid-template-columns:1fr 1fr 1fr!important;
grid-template-areas:
"prev listen next"
"normal count slow"!important;
gap:7px!important;
padding:8px!important;
border-radius:22px!important;
bottom:calc(8px + var(--ox-safe-bottom))!important;
}
.oxleo-story-view[data-book] .oxleo-controls button{
min-height:38px!important;
padding:0 8px!important;
border-radius:14px!important;
font-size:11px!important;
}
.oxleo-story-view[data-book] .oxleo-controls .oxleo-count{
font-size:10px!important;
}
}
/* Mobile landscape: keep all text visible and make the image bigger than before. */
@media(max-width:950px) and (orientation:landscape){
.oxleo-story-view[data-book] .oxleo-story-main{
padding:6px 10px calc(54px + var(--ox-safe-bottom))!important;
overflow:hidden!important;
}
.oxleo-story-view[data-book] .oxleo-reader-card{
padding:0!important;
max-width:100%!important;
border:0!important;
background:transparent!important;
box-shadow:none!important;
}
.oxleo-story-view[data-book] .oxleo-reader-header,
.oxleo-story-view[data-book] .oxleo-strip,
.oxleo-story-view[data-book] .oxleo-motion-panel{
display:none!important;
}
.oxleo-story-view[data-book] .oxleo-book-stage{
height:calc(100dvh - 62px - var(--ox-safe-bottom))!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
}
.oxleo-story-view[data-book] .oxleo-book,
.oxleo-story-view[data-book] .oxleo-book-full{
width:min(92vw,calc((100dvh - 66px - var(--ox-safe-bottom)) * 1.777))!important;
max-width:92vw!important;
max-height:calc(100dvh - 66px - var(--ox-safe-bottom))!important;
aspect-ratio:16/9!important;
}
.oxleo-story-view[data-book] .oxleo-book:not(.oxleo-text-only-book) .oxleo-copy,
.oxleo-story-view[data-book] .oxleo-book-full:not(.oxleo-text-only-book) .oxleo-copy{
font-size:var(--ox-reader-font-mobile)!important;
line-height:var(--ox-reader-line-height)!important;
max-width:88%!important;
padding:calc(var(--ox-reader-text-box-padding) * .42)!important;
}
.oxleo-story-view[data-book] .oxleo-controls{
width:min(760px,calc(100vw - 24px))!important;
grid-template-columns:96px 78px 76px 76px 96px minmax(78px,1fr)!important;
grid-template-areas:"prev listen normal slow next count"!important;
gap:6px!important;
padding:6px!important;
border-radius:16px!important;
bottom:calc(6px + var(--ox-safe-bottom))!important;
}
.oxleo-story-view[data-book] .oxleo-controls button{
min-height:32px!important;
font-size:11px!important;
border-radius:12px!important;
}
.oxleo-story-view[data-book] .oxleo-controls .oxleo-count{
font-size:11px!important;
}
}
/* ===== v5.9.26 Mobile Landscape Reader Dock + Listen State + Text Fit Fix =====
This is intentionally placed at the very end of the frontend CSS to win the cascade.
*/
/* Listen must look selected while playing, same visual language as Normal/Slow. */
.oxleo-story-view .oxleo-controls .oxleo-listen.active,
.oxleo-story-view .oxleo-controls .oxleo-listen.is-listening,
.oxleo-fullscreen-reader .oxleo-full-controls .oxleo-listen.active,
.oxleo-fullscreen-reader .oxleo-full-controls .oxleo-listen.is-listening{
background:linear-gradient(135deg,rgba(124,92,255,.72),rgba(83,55,190,.86))!important;
border-color:rgba(184,162,255,.88)!important;
color:#fff!important;
box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 0 18px rgba(124,92,255,.28)!important;
}
/* Mobile landscape: prevent Previous/List overlap and keep all visible text. */
@media(max-width:950px) and (orientation:landscape){
.oxleo-story-view[data-book] .oxleo-story-main{
padding:6px 10px calc(58px + var(--ox-safe-bottom))!important;
overflow:hidden!important;
}
.oxleo-story-view[data-book] .oxleo-book-stage{
height:calc(100dvh - 64px - var(--ox-safe-bottom))!important;
}
.oxleo-story-view[data-book] .oxleo-book,
.oxleo-story-view[data-book] .oxleo-book-full,
.oxleo-fullscreen-reader .oxleo-book,
.oxleo-fullscreen-reader .oxleo-book-full{
width:min(90vw,calc((100dvh - 68px - var(--ox-safe-bottom)) * 1.777))!important;
max-width:90vw!important;
max-height:calc(100dvh - 68px - var(--ox-safe-bottom))!important;
aspect-ratio:16/9!important;
}
/* Let the overlay grow upward instead of clipping the beginning of longer narration text. */
.oxleo-story-view[data-book] .oxleo-text-page,
.oxleo-fullscreen-reader .oxleo-text-page{
height:auto!important;
min-height:24%!important;
max-height:54%!important;
top:auto!important;
bottom:0!important;
overflow:visible!important;
align-items:flex-end!important;
justify-content:center!important;
padding:0!important;
background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,calc(var(--ox-reader-overlay-opacity) * .25)) 28%,rgba(0,0,0,calc(var(--ox-reader-overlay-opacity) * .72)) 100%)!important;
}
.oxleo-story-view[data-book] .oxleo-book:not(.oxleo-text-only-book) .oxleo-copy,
.oxleo-story-view[data-book] .oxleo-book-full:not(.oxleo-text-only-book) .oxleo-copy,
.oxleo-fullscreen-reader .oxleo-book:not(.oxleo-text-only-book) .oxleo-copy,
.oxleo-fullscreen-reader .oxleo-book-full:not(.oxleo-text-only-book) .oxleo-copy{
display:block!important;
width:auto!important;
max-width:92%!important;
margin:0 auto 8px!important;
padding:7px 12px 8px!important;
font-size:clamp(9px,1.24vw,13px)!important;
line-height:1.08!important;
max-height:none!important;
overflow:visible!important;
white-space:normal!important;
overflow-wrap:break-word!important;
word-break:normal!important;
text-wrap:balance;
}
/* Hard reset the landscape dock to a flex row so Safari cannot overlap grid areas. */
.oxleo-story-view[data-book] .oxleo-controls,
.oxleo-story-view[data-book] .oxleo-full-controls,
.oxleo-fullscreen-reader .oxleo-full-controls{
position:fixed!important;
left:50%!important;
right:auto!important;
bottom:calc(6px + var(--ox-safe-bottom))!important;
transform:translateX(-50%)!important;
width:min(760px,calc(100vw - 32px))!important;
min-height:42px!important;
display:flex!important;
flex-direction:row!important;
align-items:center!important;
justify-content:center!important;
gap:6px!important;
padding:6px!important;
margin:0!important;
border-radius:17px!important;
box-sizing:border-box!important;
overflow:hidden!important;
}
.oxleo-story-view[data-book] .oxleo-controls button,
.oxleo-story-view[data-book] .oxleo-full-controls button,
.oxleo-fullscreen-reader .oxleo-full-controls button{
flex:0 1 auto!important;
width:auto!important;
min-width:0!important;
min-height:31px!important;
height:31px!important;
padding:0 10px!important;
border-radius:12px!important;
font-size:11px!important;
line-height:1!important;
white-space:nowrap!important;
box-sizing:border-box!important;
}
.oxleo-story-view[data-book] .oxleo-controls .oxleo-prev,
.oxleo-story-view[data-book] .oxleo-full-controls .oxleo-prev,
.oxleo-fullscreen-reader .oxleo-full-controls .oxleo-prev{
flex-basis:104px!important;
}
.oxleo-story-view[data-book] .oxleo-controls .oxleo-next,
.oxleo-story-view[data-book] .oxleo-full-controls .oxleo-next,
.oxleo-fullscreen-reader .oxleo-full-controls .oxleo-next{
flex-basis:104px!important;
}
.oxleo-story-view[data-book] .oxleo-controls .oxleo-listen,
.oxleo-story-view[data-book] .oxleo-full-controls .oxleo-listen,
.oxleo-fullscreen-reader .oxleo-full-controls .oxleo-listen{
flex-basis:82px!important;
}
.oxleo-story-view[data-book] .oxleo-controls .oxleo-read-speed,
.oxleo-story-view[data-book] .oxleo-full-controls .oxleo-read-speed,
.oxleo-fullscreen-reader .oxleo-full-controls .oxleo-read-speed{
flex-basis:76px!important;
}
.oxleo-story-view[data-book] .oxleo-controls .oxleo-count,
.oxleo-story-view[data-book] .oxleo-full-controls .oxleo-count,
.oxleo-fullscreen-reader .oxleo-full-controls .oxleo-count{
flex:1 0 82px!important;
min-width:82px!important;
margin:0!important;
padding:0 2px!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
text-align:center!important;
font-size:10.5px!important;
white-space:nowrap!important;
}
}
/* Tiny landscape phones: hide the count if needed instead of allowing button overlap. */
@media(max-width:740px) and (orientation:landscape){
.oxleo-story-view[data-book] .oxleo-controls,
.oxleo-story-view[data-book] .oxleo-full-controls,
.oxleo-fullscreen-reader .oxleo-full-controls{
width:calc(100vw - 24px)!important;
gap:4px!important;
padding:5px!important;
}
.oxleo-story-view[data-book] .oxleo-controls .oxleo-prev,
.oxleo-story-view[data-book] .oxleo-full-controls .oxleo-prev,
.oxleo-fullscreen-reader .oxleo-full-controls .oxleo-prev,
.oxleo-story-view[data-book] .oxleo-controls .oxleo-next,
.oxleo-story-view[data-book] .oxleo-full-controls .oxleo-next,
.oxleo-fullscreen-reader .oxleo-full-controls .oxleo-next{
flex-basis:92px!important;
}
.oxleo-story-view[data-book] .oxleo-controls .oxleo-listen,
.oxleo-story-view[data-book] .oxleo-full-controls .oxleo-listen,
.oxleo-fullscreen-reader .oxleo-full-controls .oxleo-listen{
flex-basis:66px!important;
}
.oxleo-story-view[data-book] .oxleo-controls .oxleo-read-speed,
.oxleo-story-view[data-book] .oxleo-full-controls .oxleo-read-speed,
.oxleo-fullscreen-reader .oxleo-full-controls .oxleo-read-speed{
flex-basis:62px!important;
}
.oxleo-story-view[data-book] .oxleo-controls .oxleo-count,
.oxleo-story-view[data-book] .oxleo-full-controls .oxleo-count,
.oxleo-fullscreen-reader .oxleo-full-controls .oxleo-count{
display:none!important;
}
}
/* ===== v5.9.27 Stronger instant Listen active state ===== */
.oxleo-story-view .oxleo-listen.active,
.oxleo-story-view .oxleo-listen.is-listening,
.oxleo-fullscreen-reader .oxleo-listen.active,
.oxleo-fullscreen-reader .oxleo-listen.is-listening{
background:linear-gradient(135deg,#6f4cff,#3f269d)!important;
border-color:rgba(205,190,255,.95)!important;
color:#fff!important;
box-shadow:0 0 0 1px rgba(255,255,255,.14) inset,0 0 22px rgba(124,92,255,.36)!important;
}
.oxleo-story-view .oxleo-listen.active::before,
.oxleo-story-view .oxleo-listen.is-listening::before,
.oxleo-fullscreen-reader .oxleo-listen.active::before,
.oxleo-fullscreen-reader .oxleo-listen.is-listening::before{
content:'●';
display:inline-block;
margin-right:6px;
font-size:9px;
line-height:1;
color:#fff;
}
/* ===== v5.9.36 Motion UI + Listen Active Final Fix ===== */
/* Reduced Motion has been removed; legacy saved value is mapped to Still in JS. */
/* Listen stays visibly selected for the whole narration lifecycle. */
.oxleo-story-view .oxleo-listen[aria-pressed="true"],
.oxleo-story-view .oxleo-listen.active,
.oxleo-story-view .oxleo-listen.is-listening,
.oxleo-fullscreen-reader .oxleo-listen[aria-pressed="true"],
.oxleo-fullscreen-reader .oxleo-listen.active,
.oxleo-fullscreen-reader .oxleo-listen.is-listening{
background:linear-gradient(135deg,#7657ff,#4b2bc4)!important;
border-color:#b7a5ff!important;
color:#fff!important;
box-shadow:0 0 0 2px rgba(183,165,255,.22),0 8px 22px rgba(82,50,190,.38)!important;
opacity:1!important;
}
/* v5.9.39: authoritative narration state now drives this visible active style. */
.oxleo-story-view[data-book] .oxleo-listen[aria-pressed="true"],
.oxleo-story-view[data-book] .oxleo-listen.active.is-listening,
.oxleo-fullscreen-reader .oxleo-listen[aria-pressed="true"],
.oxleo-fullscreen-reader .oxleo-listen.active.is-listening{
background:linear-gradient(135deg,#7c4dff,#4a24b8)!important;
border:2px solid rgba(226,216,255,.96)!important;
color:#fff!important;
box-shadow:0 0 0 2px rgba(124,77,255,.24),0 10px 24px rgba(45,22,120,.34)!important;
}
/* Mobile: show compact Animated / Still selector instead of hiding the motion panel. */
@media(max-width:900px){
.oxleo-story-view[data-book] .oxleo-motion-panel{
display:flex!important;
width:min(360px,calc(100% - 8px))!important;
margin:8px auto 10px!important;
padding:5px!important;
gap:5px!important;
border-radius:16px!important;
background:rgba(8,10,28,.82)!important;
border:1px solid rgba(255,255,255,.12)!important;
box-shadow:none!important;
box-sizing:border-box!important;
}
.oxleo-story-view[data-book] .oxleo-motion-panel h2,
.oxleo-story-view[data-book] .oxleo-motion-panel > p{
display:none!important;
}
.oxleo-story-view[data-book] .oxleo-motion-option{
flex:1 1 50%!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
gap:6px!important;
min-height:38px!important;
margin:0!important;
padding:7px 10px!important;
border-radius:12px!important;
box-sizing:border-box!important;
}
.oxleo-story-view[data-book] .oxleo-motion-option span{
display:none!important;
}
.oxleo-story-view[data-book] .oxleo-motion-option strong{
font-size:12px!important;
line-height:1!important;
}
.oxleo-story-view[data-book] .oxleo-motion-option small{
display:none!important;
}
.oxleo-story-view[data-book] .oxleo-motion-option.active{
background:linear-gradient(135deg,#7657ff,#4b2bc4)!important;
border-color:#b7a5ff!important;
color:#fff!important;
}
}
/* Landscape fullscreen: compact selector floats at the top and never covers story controls. */
@media(max-width:950px) and (orientation:landscape){
.oxleo-story-view[data-book] .oxleo-motion-panel{
position:fixed!important;
z-index:1000002!important;
top:calc(5px + var(--ox-safe-top))!important;
left:50%!important;
transform:translateX(-50%)!important;
width:190px!important;
min-height:34px!important;
margin:0!important;
padding:4px!important;
gap:4px!important;
border-radius:14px!important;
background:rgba(7,9,24,.78)!important;
backdrop-filter:blur(12px)!important;
}
.oxleo-story-view[data-book] .oxleo-motion-option{
min-height:28px!important;
padding:4px 7px!important;
border-radius:10px!important;
}
.oxleo-story-view[data-book] .oxleo-motion-option strong{
font-size:10px!important;
}
}
/* ===== v5.9.37 Listen Highlight Hard Lock ===== */
.oxleo-listen[data-listening="1"],
.oxleo-listen[aria-pressed="true"],
.oxleo-listen.active,
.oxleo-listen.is-listening{
background:#6f4cff!important;
background-image:linear-gradient(135deg,#8a6bff 0%,#5b36d6 100%)!important;
border:2px solid #d5caff!important;
color:#ffffff!important;
box-shadow:
0 0 0 3px rgba(138,107,255,.28),
0 10px 24px rgba(59,31,150,.42)!important;
opacity:1!important;
filter:none!important;
transform:translateY(-1px)!important;
}
.oxleo-listen[data-listening="1"]::before,
.oxleo-listen[aria-pressed="true"]::before,
.oxleo-listen.active::before,
.oxleo-listen.is-listening::before{
content:"●"!important;
display:inline-block!important;
margin-right:6px!important;
color:#fff!important;
font-size:9px!important;
line-height:1!important;
}
/* ===== v5.9.50 Reader long-text box clipping fix =====
Keep the existing appearance; only let an image-page text layer grow to
the natural height of its copy so the rounded background is not cut off. */
.oxleo-story-view[data-book] .oxleo-book:not(.oxleo-text-only-book) .oxleo-text-page,
.oxleo-story-view[data-book] .oxleo-book-full:not(.oxleo-text-only-book) .oxleo-text-page,
.oxleo-fullscreen-reader .oxleo-book:not(.oxleo-text-only-book) .oxleo-text-page,
.oxleo-fullscreen-reader .oxleo-book-full:not(.oxleo-text-only-book) .oxleo-text-page{
height:auto!important;
min-height:clamp(72px,var(--ox-reader-overlay-height),22%)!important;
top:auto!important;
bottom:0!important;
overflow:visible!important;
}
/* v5.9.51 targeted library labels, listen state and live student progress */
.oxleo-mini-meta strong,.oxleo-mini-meta small,.oxleo-school-stage{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.oxleo-mini-badges{min-width:0}.oxleo-school-stage{width:100%;box-sizing:border-box;text-align:center}
.oxleo-listen:active,.oxleo-listen:focus-visible{background:linear-gradient(135deg,#8a6bff 0%,#5b36d6 100%)!important;border-color:#d5caff!important;color:#fff!important;box-shadow:0 0 0 3px rgba(138,107,255,.28),0 10px 24px rgba(59,31,150,.42)!important}
.oxprogress-section{margin:34px 0 0;padding:24px;border-radius:24px;background:linear-gradient(145deg,rgba(24,27,57,.94),rgba(12,14,34,.94));border:1px solid rgba(255,255,255,.1);box-shadow:0 22px 70px rgba(0,0,0,.28)}
.oxprogress-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:18px}.oxprogress-metrics article{min-width:0;padding:18px;border-radius:18px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.09)}.oxprogress-metrics strong{display:block;font-size:30px;line-height:1;color:#fff}.oxprogress-metrics span{display:block;margin-top:8px;color:#bdbbd0;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oxprogress-chart-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:18px}.oxprogress-chart-card{min-width:0;padding:18px;border-radius:19px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08)}.oxprogress-chart-head{display:flex;justify-content:space-between;gap:12px;align-items:center}.oxprogress-chart-head strong{font-size:15px}.oxprogress-chart-head small{color:#9693ad;font-size:11px}.oxprogress-bars{height:170px;display:flex;align-items:flex-end;gap:5px;padding-top:22px;border-bottom:1px solid rgba(255,255,255,.12)}.oxprogress-bar-item{height:100%;flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px}.oxprogress-bar-item span{display:block;width:100%;max-width:18px;min-height:4px;border-radius:8px 8px 2px 2px;background:linear-gradient(180deg,#9d82ff,#5d3ce0);box-shadow:0 6px 18px rgba(93,60,224,.28)}.oxprogress-bar-item small{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;color:#89869f;font-size:8px}
@media(max-width:900px){.oxprogress-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.oxprogress-chart-grid{grid-template-columns:1fr}.oxprogress-section{padding:18px}.oxprogress-bars{height:150px}}
/* v5.9.54 Book Factory activities */
.oxleo-end-activities{margin:20px 0 0;padding:0!important}.oxact-shell,.oxact-summary{background:linear-gradient(180deg,#fff 0%,#f7f5ff 100%);border:1px solid rgba(91,65,170,.16);border-radius:28px;padding:24px;box-shadow:0 18px 55px rgba(35,24,84,.12)}.oxact-head>span,.oxact-summary>span{display:inline-flex;padding:7px 11px;border-radius:999px;background:#eee9ff;color:#6d4aff;font-size:11px;font-weight:900;letter-spacing:.05em}.oxact-head h2,.oxact-summary h2{margin:12px 0 6px;color:#24164f;font-size:30px}.oxact-head p,.oxact-summary p{margin:0;color:#716a84}.oxact-progress{height:8px;background:#e7e2f6;border-radius:999px;overflow:hidden;margin:16px 0}.oxact-progress i{display:block;height:100%;background:#6d4aff;border-radius:999px}.oxact-question{font-size:20px;font-weight:850;color:#24164f;margin:18px 0}.oxact-options{display:grid;gap:10px}.oxact-options label{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid rgba(72,50,130,.14);border-radius:18px;padding:14px;cursor:pointer}.oxact-options input{width:20px;height:20px}.oxact-match{display:grid;gap:12px}.oxact-match label{display:grid;grid-template-columns:minmax(120px,.8fr) 1.2fr;gap:12px;align-items:center;background:#fff;border:1px solid rgba(72,50,130,.14);border-radius:18px;padding:14px}.oxact-match span{font-weight:800;color:#24164f}.oxact-match select{width:100%;padding:11px;border-radius:12px;border:1px solid rgba(72,50,130,.2);background:#fff}.oxact-actions{display:flex;gap:10px;margin-top:18px}.oxact-actions button,.oxact-summary a{border:0;border-radius:999px;padding:13px 18px;font-weight:900;text-decoration:none}.oxact-check,.oxact-next{background:#6d4aff;color:#fff}.oxact-feedback{margin-top:14px;padding:13px 15px;border-radius:16px;font-weight:800}.oxact-feedback.is-correct{background:#e8fff3;color:#087443}.oxact-feedback.is-wrong{background:#fff0f3;color:#a51d39}.oxact-summary{text-align:center}.oxact-summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0}.oxact-summary-grid article{background:#fff;border-radius:18px;padding:16px}.oxact-summary-grid strong{display:block;font-size:28px;color:#24164f}.oxact-summary-grid small{color:#716a84}.oxact-summary a{display:inline-flex;background:#24164f;color:#fff}@media(max-width:720px){.oxact-shell,.oxact-summary{padding:18px;border-radius:22px}.oxact-head h2,.oxact-summary h2{font-size:24px}.oxact-question{font-size:17px}.oxact-match label{grid-template-columns:1fr}.oxact-summary-grid{grid-template-columns:1fr 1fr}.oxact-summary-grid article:last-child{grid-column:1/-1}}
/* v5.9.55 OracyX custom authentication */
.oxlogin-shell{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr);background:#f5f4ff;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#201744}
.oxlogin-visual{padding:clamp(38px,7vw,96px);display:flex;flex-direction:column;justify-content:center;background:radial-gradient(circle at 80% 15%,rgba(255,255,255,.24),transparent 26%),linear-gradient(145deg,#24164f,#6547dd 58%,#9c87ff);color:#fff}
.oxlogin-brand{display:flex;align-items:center;gap:8px;margin-bottom:64px}.oxlogin-brand img{width:150px;max-height:54px;object-fit:contain}.oxlogin-brand b{font-size:34px}.oxlogin-visual>span,.oxlogin-kicker{font-size:12px;font-weight:900;letter-spacing:.12em}.oxlogin-visual h1{font-size:clamp(44px,6vw,78px);line-height:.98;max-width:760px;margin:16px 0 22px;letter-spacing:-.045em}.oxlogin-visual p{font-size:19px;line-height:1.6;max-width:660px;color:rgba(255,255,255,.82)}
.oxlogin-card{align-self:center;margin:36px;padding:clamp(26px,5vw,56px);background:#fff;border-radius:32px;box-shadow:0 28px 80px rgba(38,24,90,.16);max-width:520px}.oxlogin-card h2{font-size:38px;margin:10px 0 8px}.oxlogin-card>p{color:#736d86}.oxlogin-switch{display:grid;grid-template-columns:1fr 1fr;background:#f1effb;padding:5px;border-radius:999px;margin-bottom:30px}.oxlogin-switch a{text-align:center;padding:11px;border-radius:999px;text-decoration:none;color:#655e79;font-weight:850}.oxlogin-switch a.active{background:#fff;color:#5d42d6;box-shadow:0 7px 20px rgba(50,30,110,.11)}.oxlogin-card label{display:block;font-size:13px;font-weight:800;margin:18px 0 0}.oxlogin-card input[type=text],.oxlogin-card input[type=password]{width:100%;box-sizing:border-box;margin-top:8px;padding:15px 16px;border:1px solid #ddd8ef;border-radius:15px;font-size:16px}.oxlogin-remember{display:flex!important;gap:8px;align-items:center}.oxlogin-primary{display:flex;width:100%;box-sizing:border-box;margin-top:22px;padding:15px 20px;justify-content:center;border:0;border-radius:999px;background:#6547dd;color:#fff!important;text-decoration:none;font-size:16px;font-weight:900;cursor:pointer}.oxlogin-card small{display:block;margin-top:20px;color:#8a8498;text-align:center}.oxlogin-error{background:#fff0f1;color:#a22d3f;padding:12px 14px;border-radius:12px;margin:16px 0}.oxlogin-gate{max-width:760px;margin:80px auto;padding:50px;text-align:center;background:#fff;border-radius:30px;box-shadow:0 24px 70px rgba(40,25,85,.12)}.oxlogin-gate a{display:inline-flex;padding:14px 24px;border-radius:999px;background:#6547dd;color:#fff;text-decoration:none;font-weight:900}
@media(max-width:850px){.oxlogin-shell{grid-template-columns:1fr}.oxlogin-visual{padding:34px 24px 80px}.oxlogin-visual h1{font-size:42px}.oxlogin-brand{margin-bottom:38px}.oxlogin-card{margin:-44px 14px 24px;position:relative;border-radius:26px;padding:26px}.oxlogin-card h2{font-size:31px}}
/* v5.9.56 OracyX login redesign */
.oxlogin-shell{min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr) minmax(420px,520px);align-items:stretch;background:#0d0920;overflow:hidden;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#1f183d}
.oxlogin-visual{position:relative;padding:clamp(44px,7vw,104px);display:flex;flex-direction:column;justify-content:center;background:radial-gradient(circle at 20% 10%,rgba(255,255,255,.18),transparent 26%),radial-gradient(circle at 85% 18%,rgba(150,116,255,.42),transparent 28%),linear-gradient(145deg,#1f134a 0%,#5536c9 52%,#8b6cff 100%);color:#fff;overflow:hidden}
.oxlogin-visual:after{content:"";position:absolute;inset:auto -10% -34% 18%;height:58%;border-radius:50%;background:rgba(255,255,255,.08);filter:blur(2px)}
.oxlogin-brand{position:relative;z-index:2;display:flex;align-items:center;gap:10px;margin-bottom:clamp(48px,9vh,92px)}
.oxlogin-brand img{width:170px;max-height:58px;object-fit:contain;filter:brightness(0) invert(1)}
.oxlogin-brand b{font-size:38px;color:#fff}
.oxlogin-visual>span,.oxlogin-kicker{position:relative;z-index:2;font-size:12px;font-weight:900;letter-spacing:.14em}
.oxlogin-visual h1{position:relative;z-index:2;font-size:clamp(46px,6vw,82px);line-height:.96;max-width:760px;margin:18px 0 24px;letter-spacing:-.05em;text-wrap:balance}
.oxlogin-visual p{position:relative;z-index:2;font-size:19px;line-height:1.6;max-width:640px;color:rgba(255,255,255,.84)}
.oxlogin-card{align-self:center;justify-self:center;width:min(430px,calc(100% - 48px));margin:34px 24px;padding:42px;background:rgba(255,255,255,.98);border:1px solid rgba(255,255,255,.7);border-radius:34px;box-shadow:0 32px 100px rgba(8,4,30,.34);backdrop-filter:blur(20px)}
.oxlogin-card h2{font-size:42px;line-height:1;margin:12px 0 10px;letter-spacing:-.04em}.oxlogin-card>p{color:#736d86;font-size:16px;line-height:1.5}.oxlogin-switch{display:grid;grid-template-columns:1fr 1fr;background:#f1effb;padding:5px;border-radius:999px;margin-bottom:32px}.oxlogin-switch a{text-align:center;padding:12px;border-radius:999px;text-decoration:none;color:#655e79;font-weight:850}.oxlogin-switch a.active{background:#fff;color:#5d42d6;box-shadow:0 8px 24px rgba(50,30,110,.12)}
.oxlogin-card label{display:block;font-size:13px;font-weight:850;margin:20px 0 0}.oxlogin-card input[type=text],.oxlogin-card input[type=password]{width:100%;box-sizing:border-box;margin-top:8px;padding:16px 17px;border:1px solid #dcd6ee;border-radius:16px;font-size:16px;background:#fbfaff;outline:none;transition:.2s}.oxlogin-card input:focus{border-color:#6a4ae2;box-shadow:0 0 0 4px rgba(106,74,226,.12);background:#fff}.oxlogin-remember{display:flex!important;gap:9px;align-items:center}.oxlogin-primary{display:flex;width:100%;box-sizing:border-box;margin-top:24px;padding:16px 22px;justify-content:center;border:0;border-radius:16px;background:linear-gradient(135deg,#5d3bd4,#7c5cff);color:#fff!important;text-decoration:none;font-size:16px;font-weight:900;cursor:pointer;box-shadow:0 16px 34px rgba(93,59,212,.26)}.oxlogin-card small{display:block;margin-top:22px;color:#8a8498;text-align:center}.oxlogin-error{background:#fff0f1;color:#a22d3f;padding:12px 14px;border-radius:12px;margin:16px 0}
@media(max-width:980px){.oxlogin-shell{grid-template-columns:1fr}.oxlogin-visual{min-height:42svh;padding:34px 24px 86px}.oxlogin-visual h1{font-size:46px;max-width:620px}.oxlogin-brand{margin-bottom:34px}.oxlogin-card{width:min(560px,calc(100% - 28px));margin:-48px auto 28px;position:relative;z-index:5;padding:30px;border-radius:28px}.oxlogin-card h2{font-size:34px}}
@media(max-width:560px){.oxlogin-visual{min-height:36svh;padding:28px 20px 72px}.oxlogin-visual h1{font-size:38px}.oxlogin-visual p{font-size:15px}.oxlogin-brand img{width:132px}.oxlogin-card{padding:24px 20px}.oxlogin-card h2{font-size:31px}}
/* ==========================================================
* v5.9.58 UI correction — restore stable Library design
* Keep premium login only; no reader or data logic changes.
* ========================================================== */
/* Premium sign-in */
body.page-oracyx-login{background:#090716!important;}
.oxlogin-shell{
min-height:100svh!important;
width:100%!important;
max-width:none!important;
display:grid!important;
grid-template-columns:minmax(0,1.2fr) minmax(440px,.8fr)!important;
align-items:stretch!important;
overflow:hidden!important;
background:
radial-gradient(circle at 12% 12%,rgba(126,93,255,.2),transparent 30%),
linear-gradient(145deg,#090716 0%,#15102d 100%)!important;
}
.oxlogin-visual{
position:relative!important;
min-height:100svh!important;
padding:clamp(56px,7vw,110px)!important;
justify-content:center!important;
background:
radial-gradient(circle at 15% 10%,rgba(255,255,255,.18),transparent 26%),
radial-gradient(circle at 82% 20%,rgba(169,145,255,.34),transparent 30%),
linear-gradient(145deg,#2a1761 0%,#5b3bd4 52%,#8b6dff 100%)!important;
isolation:isolate!important;
}
.oxlogin-visual:before{
content:""!important;
position:absolute!important;
width:min(46vw,680px)!important;
aspect-ratio:1!important;
border-radius:50%!important;
left:-12%!important;
bottom:-28%!important;
background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.02))!important;
border:1px solid rgba(255,255,255,.16)!important;
z-index:-1!important;
}
.oxlogin-visual:after{
content:"READ • LISTEN • THINK • GROW"!important;
position:absolute!important;
right:clamp(24px,4vw,70px)!important;
bottom:36px!important;
font-size:11px!important;
font-weight:900!important;
letter-spacing:.2em!important;
color:rgba(255,255,255,.55)!important;
height:auto!important;
inset:auto clamp(24px,4vw,70px) 36px auto!important;
background:none!important;
filter:none!important;
}
.oxlogin-brand{margin-bottom:clamp(56px,10vh,100px)!important;}
.oxlogin-brand img{width:176px!important;max-height:62px!important;filter:brightness(0) invert(1)!important;}
.oxlogin-brand b{font-size:40px!important;}
.oxlogin-visual>span{display:inline-flex!important;width:max-content!important;padding:9px 13px!important;border-radius:999px!important;background:rgba(255,255,255,.12)!important;border:1px solid rgba(255,255,255,.16)!important;}
.oxlogin-visual h1{font-size:clamp(52px,6vw,88px)!important;line-height:.93!important;max-width:820px!important;margin:20px 0 26px!important;letter-spacing:-.055em!important;}
.oxlogin-visual p{font-size:clamp(17px,1.45vw,21px)!important;max-width:650px!important;line-height:1.65!important;color:rgba(255,255,255,.8)!important;}
.oxlogin-card{
align-self:center!important;
justify-self:center!important;
width:min(480px,calc(100% - 56px))!important;
margin:40px 28px!important;
padding:48px!important;
border-radius:36px!important;
background:rgba(255,255,255,.97)!important;
border:1px solid rgba(255,255,255,.76)!important;
box-shadow:0 34px 110px rgba(5,3,20,.4)!important;
backdrop-filter:blur(28px)!important;
}
.oxlogin-switch{margin-bottom:36px!important;padding:6px!important;background:#f0edfb!important;}
.oxlogin-switch a{padding:13px 14px!important;font-size:14px!important;}
.oxlogin-switch a.active{box-shadow:0 10px 28px rgba(61,38,144,.14)!important;}
.oxlogin-kicker{color:var(--ox57-purple)!important;}
.oxlogin-card h2{font-size:44px!important;line-height:1!important;margin:12px 0 10px!important;letter-spacing:-.045em!important;color:var(--ox57-ink)!important;}
.oxlogin-card>p{font-size:16px!important;line-height:1.55!important;color:var(--ox57-muted)!important;}
.oxlogin-card label{font-size:13px!important;color:var(--ox57-ink)!important;margin-top:21px!important;}
.oxlogin-card input[type=text],.oxlogin-card input[type=password]{
min-height:56px!important;
border-radius:17px!important;
border:1px solid #ded9ee!important;
background:#fbfaff!important;
padding:16px 17px!important;
font-size:16px!important;
}
.oxlogin-card input:focus{background:#fff!important;border-color:#7557e8!important;box-shadow:0 0 0 5px rgba(117,87,232,.11)!important;}
.oxlogin-remember{margin-top:16px!important;color:#625c74!important;}
.oxlogin-primary{
min-height:56px!important;
border-radius:17px!important;
background:linear-gradient(135deg,#5f3ed6 0%,#8566ff 100%)!important;
box-shadow:0 18px 40px rgba(95,62,214,.3)!important;
transition:transform .2s ease,box-shadow .2s ease!important;
}
.oxlogin-primary:hover{transform:translateY(-2px)!important;box-shadow:0 22px 46px rgba(95,62,214,.36)!important;}
.oxlogin-card small{padding-top:4px!important;font-size:12px!important;line-height:1.5!important;}
@media(max-width:980px){
.oxlogin-shell{grid-template-columns:1fr!important;overflow:visible!important;}
.oxlogin-visual{min-height:auto!important;padding:34px 24px 96px!important;}
.oxlogin-brand{margin-bottom:34px!important;}
.oxlogin-visual h1{font-size:clamp(40px,9vw,58px)!important;max-width:680px!important;}
.oxlogin-visual p{font-size:16px!important;}
.oxlogin-card{width:min(620px,calc(100% - 28px))!important;margin:-56px auto 30px!important;padding:34px!important;position:relative!important;z-index:5!important;}
}
@media(max-width:560px){
.oxlogin-visual{padding:28px 20px 82px!important;}
.oxlogin-brand img{width:136px!important;}
.oxlogin-brand b{font-size:32px!important;}
.oxlogin-visual h1{font-size:38px!important;line-height:.98!important;}
.oxlogin-visual p{display:none!important;}
.oxlogin-card{margin:-50px 12px 20px!important;width:calc(100% - 24px)!important;padding:24px 20px!important;border-radius:26px!important;}
.oxlogin-card h2{font-size:34px!important;}
.oxlogin-card input[type=text],.oxlogin-card input[type=password],.oxlogin-primary{min-height:52px!important;}
.oxlogin-visual:after{display:none!important;}
}
@media (min-width: 981px){
.oxleo-library-view .oxleo-main{padding-top:38px!important;}
.oxleo-library-view .oxleo-library-head,
.oxleo-library-view .oxleo-library-header{margin-top:8px!important;}
}
/* v5.9.59: clean app dashboard shell without the WordPress front admin bar. */
body.admin-bar .oxleo-shell{min-height:100vh!important;}
@media (min-width:981px){
.oxleo-library-view .oxleo-main{
padding-top:72px!important;
}
.oxleo-library-view .oxleo-library-head,
.oxleo-library-view .oxleo-library-header{
margin-top:14px!important;
}
}
/* ==========================================================
* v5.9.60 Student dashboard corrections
* ========================================================== */
@media (min-width:981px){
.oxleo-library-view .oxleo-library-main{
padding-top:92px!important;
}
.oxleo-library-view .oxleo-app-topbar{
margin-top:0!important;
margin-bottom:34px!important;
}
.oxleo-library-view .oxleo-app-topbar h1{
line-height:1.02!important;
}
}
.oxleo-user strong{
display:block;
max-width:128px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.oxleo-logout{cursor:pointer}
.oxleo-mini-book[hidden]{display:none!important}
.oxprogress-metrics{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important}
.oxact-shell,.oxact-summary{max-width:980px;margin:0 auto;box-sizing:border-box}
.oxact-options,.oxact-match{max-height:min(48vh,430px);overflow:auto;padding-right:4px}
@media(max-width:720px){
.oxact-shell,.oxact-summary{min-height:calc(100svh - 155px);display:flex;flex-direction:column;justify-content:flex-start}
.oxact-actions{margin-top:auto;padding-top:16px;position:sticky;bottom:0;background:linear-gradient(180deg,rgba(247,245,255,0),#f7f5ff 30%)}
.oxact-question{font-size:18px}
.oxact-match label{grid-template-columns:1fr;gap:8px}
.oxprogress-metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
/* v5.9.63: final targeted web heading position correction. */
@media (min-width:981px){
.oxleo-library-view .oxleo-library-main{
padding-top:52px!important;
}
.oxleo-library-view .oxleo-app-topbar{
margin-top:0!important;
margin-bottom:24px!important;
}
}
/* v5.9.67 — Slow listening removed. Keep one immediate normal-speed narration mode. */
.oxleo-controls .oxleo-read-speed[data-speed="slow"],
.oxleo-full-controls .oxleo-read-speed[data-speed="slow"]{
display:none!important;
}
@media (max-width: 820px) and (orientation: portrait){
.oxleo-controls,.oxleo-full-controls{
grid-template-columns:repeat(4,minmax(0,1fr))!important;
grid-template-areas:
"prev prev next next"
"listen listen normal normal"!important;
}
}
@media (max-width: 932px) and (orientation: landscape){
.oxleo-controls,.oxleo-full-controls{
grid-template-columns:72px minmax(110px,1fr) 96px 72px!important;
grid-template-areas:"prev listen normal next"!important;
}
}
@media (min-width: 933px){
.oxleo-controls,.oxleo-full-controls{
grid-template-columns:minmax(120px,1fr) minmax(110px,1fr) minmax(90px,.7fr) minmax(120px,1fr)!important;
grid-template-areas:"prev listen normal next"!important;
}
}
.oxleo-controls .oxleo-prev,.oxleo-full-controls .oxleo-prev{grid-area:prev!important}
.oxleo-controls .oxleo-listen,.oxleo-full-controls .oxleo-listen{grid-area:listen!important}
.oxleo-controls .oxleo-read-speed[data-speed="normal"],.oxleo-full-controls .oxleo-read-speed[data-speed="normal"]{grid-area:normal!important}
.oxleo-controls .oxleo-next,.oxleo-full-controls .oxleo-next{grid-area:next!important}
/* v5.9.68 — one-button narration + animation control */
.oxleo-story-view .oxleo-read-speed,
.oxleo-fullscreen-reader .oxleo-read-speed{display:none!important}
.oxleo-story-view .oxleo-listen.is-listening,
.oxleo-story-view .oxleo-listen.active,
.oxleo-fullscreen-reader .oxleo-listen.is-listening,
.oxleo-fullscreen-reader .oxleo-listen.active{
background:linear-gradient(135deg,#6f4cff,#8b5cff)!important;
border-color:#9b7cff!important;
color:#fff!important;
box-shadow:0 10px 28px rgba(111,76,255,.34)!important;
}