/* ZAVÉK / Cinejoy-inspired interface. Original implementation. */
:root{--bg:#090909;--side:#101010;--panel:#161616;--panel2:#202020;--panel3:#292929;--line:#303030;--ink:#f8f8f8;--muted:#aaa;--faint:#777;--accent:#b31d38;--accent-ink:#fff;--green:#9bd786;--danger:#e88e8e;--r:8px;--cine-pad:clamp(24px,5vw,76px)}
:root[data-theme=light]{--bg:#0c0c0c;--side:#101010;--panel:#171717;--panel2:#222;--panel3:#292929;--line:#333;--ink:#f8f8f8;--muted:#aaa;--faint:#777;--accent:#b31d38;--accent-ink:#fff;--green:#9bd786;--danger:#e88e8e}
html{background:#090909;scrollbar-width:none}html::-webkit-scrollbar,body::-webkit-scrollbar{display:none}body{color:var(--ink);background:var(--bg);font-family:'DM Sans',Inter,Arial,sans-serif;letter-spacing:0;font-size:14px}button,a{touch-action:manipulation}button{font-family:inherit}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid #fff;outline-offset:3px}
#app{display:block;min-height:100dvh}.main-shell{width:100%;margin:0;min-width:0}.page{width:100%;max-width:none!important;padding:0 var(--cine-pad) 100px;min-height:70dvh}.page:has(.cj-home){padding:0 0 70px;max-width:none!important}.page:not(:has(.cj-home)){padding:125px var(--cine-pad) 100px;max-width:1450px!important;margin:auto;min-height:82dvh}
.sidebar{position:fixed!important;inset:0 auto 0 0;width:278px!important;background:#101010!important;border-right:1px solid #333;transform:translateX(-104%);transition:transform .28s ease;z-index:200!important;overflow:hidden;box-shadow:none}.sidebar.open{transform:translateX(0);box-shadow:10px 0 70px #000b}.sidebar .brand{height:84px;justify-content:space-between;padding:0 18px}.sidebar .brand-emblem{font-weight:900}.sidebar .brand-copy{display:block;flex:1;padding-left:6px}.sidebar .brand-copy span{display:none}.sidebar-close{display:flex!important}.sidebar .sidebar-heading,.sidebar .side-bottom{display:block}.sidebar-scroll{padding:13px 15px}.sidebar .nav-link{height:auto;font-size:14px;display:flex;align-items:center;justify-content:flex-start;gap:15px;padding:14px 18px;border-radius:7px;margin:3px 0}.sidebar .nav-link .nav-icon{width:22px;height:22px}.sidebar .nav-link.active{border-left:0;background:#521825;color:white}.sidebar .side-bottom{border-color:#2b2b2b}.sidebar .progress-track>span{background:#b31d38}.scrim:not([hidden]){position:fixed;inset:0;background:#0009;z-index:195!important}
.topbar{height:88px;min-height:88px;position:absolute;inset:0 0 auto 0;padding:0 clamp(20px,3.5vw,55px);display:flex;justify-content:space-between;align-items:center;background:transparent!important;border:0!important;z-index:110!important;pointer-events:none}.topbar>*{pointer-events:auto}.brand-lockup{display:flex;align-items:center;gap:7px;position:relative;z-index:2}.topbar-logo{font-family:Montserrat,sans-serif;font-size:27px;font-weight:900;line-height:1;letter-spacing:-.1em;border:0;background:transparent;color:#fff;padding:10px;cursor:pointer;text-shadow:0 2px 20px #0008}.topbar-logo span{font-size:22px;display:inline-block;transform:translate(-2px,2px) rotate(-13deg)}.menu-btn{width:32px;height:38px;border:0;background:transparent;color:#fff;opacity:.94;padding:6px;margin-right:4px}.menu-btn svg{width:21px;height:21px}.menu-btn:hover{opacity:.65}
.desktop-header-links{position:absolute;left:50%;top:19px;transform:translateX(-50%);display:flex;align-items:center;gap:2px;background:rgba(22,16,16,.65);box-shadow:0 1px 20px #0005;border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:5px 9px 5px 5px;white-space:nowrap;min-height:46px;backdrop-filter:blur(23px);-webkit-backdrop-filter:blur(23px)}.header-route{height:34px;color:#ece7e7;border:0;border-radius:999px;padding:0 14px;font-size:13px;font-weight:600;letter-spacing:0;background:transparent;transition:background .17s,color .17s}.header-route.selected{background:#a31c38;color:#fff;box-shadow:inset 0 1px 2px #ffffff1a}.header-route:hover:not(.selected){color:#fff;background:#ffffff17}.nav-separator{height:21px;width:1px;background:#ffffff26;margin:0 4px}.nav-icon-action{background:transparent;border:0;color:#efefef;width:36px;height:34px;border-radius:50%;display:grid;place-items:center;transition:background .18s}.nav-icon-action:hover{background:#ffffff1f}.nav-icon-action svg{width:18px;height:18px}.top-right{margin-left:auto}.top-right>*{display:none!important}.topbar .mobile-search{display:none!important}.page-crumb,.breadcrumbs{display:none!important}.bottom-nav{display:none}.footer{width:100%;padding:28px var(--cine-pad)!important;border-top:1px solid #242424!important;color:#666!important;background:#090909;font-size:11px;letter-spacing:.06em}.footer button{background:transparent;color:#777;border:0;font-size:12px}.footer button:hover{color:#fff}
/* Full bleed Cinejoy hero. */
.cj-home{background:#090909;overflow:hidden}.cj-hero{height:clamp(550px,49vw,710px);min-height:550px;position:relative;overflow:hidden;background:#141211;isolation:isolate}.cj-hero-photo{position:absolute;inset:0;background-position:center 43%;background-repeat:no-repeat;background-size:cover;filter:brightness(.83) saturate(.85);transform:scale(1.013);transition:transform 7s ease,background-image .2s ease;z-index:0}.cj-hero:hover .cj-hero-photo{transform:scale(1.065)}
.cj-hero.hero-book .cj-hero-photo{background-image:url('https://images.unsplash.com/photo-1481627834876-b7833e8f5570?auto=format&fit=crop&w=2200&q=85'),url('assets/hero-library.webp');background-position:center 50%}
.cj-hero.hero-library .cj-hero-photo{background-image:url('https://images.unsplash.com/photo-1663729222408-13f44951492c?auto=format&fit=crop&w=2200&q=85'),url('assets/hero-library.webp');background-position:center 44%}
.cj-hero.hero-type .cj-hero-photo{background-image:url('https://images.unsplash.com/photo-1652616555250-57d49a2034e2?auto=format&fit=crop&w=2200&q=85'),url('assets/hero-library.webp');background-position:center 56%}
.cj-hero.hero-study .cj-hero-photo{background-image:url('https://images.unsplash.com/photo-1513258496099-48168024aec0?auto=format&fit=crop&w=2200&q=85'),url('assets/hero-library.webp');background-position:center 45%}
.cj-hero-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(6,6,6,.94) 0%,rgba(6,6,6,.80) 22%,rgba(6,6,6,.40) 51%,rgba(6,6,6,.06) 78%),linear-gradient(0deg,#090909 0%,#09090900 36%),linear-gradient(180deg,rgba(0,0,0,.20),transparent 40%);pointer-events:none}.cj-hero-content{z-index:5;position:absolute;top:49%;left:var(--cine-pad);transform:translateY(-47%);max-width:690px;color:#fff;animation:cjFade .38s ease both}.cj-feature-pill{font-size:11px;letter-spacing:.13em;font-weight:800;color:#eee;text-transform:uppercase;padding-left:3px;display:none}
.cj-hero-content h1{font-family:Montserrat,'Arial Black',sans-serif;font-size:clamp(63px,9.2vw,142px);font-weight:900;letter-spacing:-.086em;line-height:1.1;margin:0 0 19px;transform:scaleX(1.01);transform-origin:left;text-shadow:0 4px 20px #0008;max-width:90vw}.cj-hero.hero-type .cj-hero-content h1{font-size:clamp(50px,7.7vw,113px)}.cj-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;color:#fafafa;font-size:14px;font-weight:700;margin:0 0 23px;text-shadow:0 2px 8px #000b}.cj-meta i{height:5px;width:5px;background:#e7e7e7;border-radius:50%;opacity:.8}.cj-hero-content p{max-width:460px;margin:0 0 25px;font-size:16px;line-height:1.6;color:#f4f4f4;text-shadow:0 2px 8px #000a}.cj-actions{display:flex;align-items:center;gap:9px}.cj-actions button{height:45px;display:flex;justify-content:center;align-items:center;gap:9px;cursor:pointer;transition:background .18s,transform .18s}.cj-actions button:hover{transform:translateY(-2px)}.cj-play{padding:0 24px;border:0;border-radius:30px;background:#ae1b37;color:white;font-size:14px;font-weight:800}.cj-play:hover{background:#cf2848}.cj-play svg{fill:currentColor;width:16px;height:16px}.cj-outline{border:1px solid #ffffff2b;background:#ffffff24;backdrop-filter:blur(8px);border-radius:999px;width:47px;color:#fff}.cj-outline svg{height:20px;width:20px;fill:none;stroke:currentColor;stroke-width:1.8}.cj-outline:hover{background:#ffffff40}.cj-slides{position:absolute;right:var(--cine-pad);bottom:29%;z-index:6;display:flex;align-items:center;gap:5px}.cj-slides button{height:7px;width:7px;padding:0;border:0;border-radius:10px;background:#d8d3d294;cursor:pointer;transition:width .25s,background .2s}.cj-slides button.on{width:27px;background:#fff}.cj-slides button:hover{background:#fff}.cj-hero-bottom{position:absolute;bottom:0;left:0;right:0;height:125px;z-index:4;background:linear-gradient(transparent,#090909);pointer-events:none}
/* Content strips: photographic posters rather than boxed dashboard. */
.cj-feed{position:relative;margin-top:-37px;z-index:7;padding:0 var(--cine-pad)}.cj-section{position:relative;margin:0 0 43px;min-width:0}.cj-shelf-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:17px;padding:0 1px}.cj-shelf-heading h2{font-size:clamp(19px,2vw,25px);font-weight:800;letter-spacing:-.03em;color:#f4f4f4;margin:0}.cj-shelf-heading>button{background:transparent;border:0;padding:7px 0;color:#d1d1d1;font-size:12px;font-weight:700}.cj-shelf-heading>button:hover{color:#fff}.cj-shelf-heading>button span{font-size:19px;vertical-align:-1px;margin-left:2px}.cj-shelf-wrap{position:relative}.cj-shelf{display:flex;gap:13px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:0 1px 8px}.cj-shelf::-webkit-scrollbar{display:none}.shelf-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:10;width:34px;height:78px;border:0;background:#070707bd;color:#fff;font-size:37px;cursor:pointer;opacity:0;transition:opacity .2s}.shelf-arrow.shelf-prev{left:0;border-radius:0 5px 5px 0}.shelf-arrow.shelf-next{right:0;border-radius:5px 0 0 5px}.cj-shelf-wrap:hover>.shelf-arrow{opacity:.95}.shelf-arrow:hover{background:#080808f5}
.cj-landscape{flex:0 0 clamp(215px,24vw,340px);padding:0;text-align:left;border:0;background:transparent;scroll-snap-align:start;color:#fff;cursor:pointer}.cj-landscape-image{position:relative;width:100%;aspect-ratio:1.75;border-radius:6px;background:linear-gradient(130deg,#221f21,#342f2e);overflow:hidden;isolation:isolate;box-shadow:0 2px 12px #0008;transition:transform .2s,filter .2s}.cj-landscape-image:before{content:'';position:absolute;inset:0;background-image:var(--card-img);background-position:center;background-size:cover;filter:brightness(.75) saturate(.6);transition:transform .5s}.cj-landscape-image:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#040404e8,transparent 78%);pointer-events:none}.cj-landscape:hover .cj-landscape-image{transform:scale(1.03);filter:brightness(1.12)}.cj-landscape:hover .cj-landscape-image:before{transform:scale(1.07)}.cj-card-overlay{position:absolute;bottom:19px;left:18px;right:32px;z-index:3;display:flex;flex-direction:column;gap:5px}.cj-card-kicker{font-size:10px;color:#eee;font-weight:800;letter-spacing:.11em;text-shadow:0 1px 4px #000}.cj-card-overlay strong{font-size:24px;letter-spacing:-.045em;font-weight:800;line-height:1.12;text-shadow:0 1px 6px #000}.cj-card-symbol{position:absolute;inset:20px auto auto 18px;z-index:2;opacity:.16;pointer-events:none}.cj-card-symbol .native-glyph{height:36px;width:23px;color:#fff}.cj-card-play{position:absolute;top:13px;right:14px;z-index:2;width:29px;height:29px;background:#ffffffcf;color:#131313;display:grid;place-items:center;border-radius:50%;font-size:10px;opacity:0;transform:translateY(5px);transition:opacity .2s,transform .2s}.cj-landscape:hover .cj-card-play{opacity:1;transform:translateY(0)}
.cj-providers{margin:0 0 43px}.cj-provider-list{display:flex;overflow-x:auto;gap:11px;padding:2px 0 5px;scrollbar-width:none}.cj-provider-list button{flex:0 0 auto;background:#1a1a1a;border:1px solid #343434;color:#f1f1f1;padding:14px 28px;border-radius:7px;font-size:14px;font-weight:750;cursor:pointer;transition:background .17s,border .17s}.cj-provider-list button:hover{border-color:#999;background:#292929}
.cj-poster{flex:0 0 clamp(160px,17vw,235px);height:clamp(245px,25vw,325px);border:0;background:transparent;padding:0;scroll-snap-align:start;color:#fff;text-align:left;cursor:pointer}.cj-poster-image{height:100%;position:relative;overflow:hidden;background:#211d1d;border-radius:6px;transition:transform .2s;isolation:isolate;box-shadow:0 4px 12px #0007}.cj-poster-image:before{content:'';position:absolute;inset:0;background-image:var(--card-img);background-position:center;background-size:cover;filter:brightness(.70) saturate(.65);transition:transform .45s}.cj-poster-image:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#000 0%,#0009 30%,#0000 69%),linear-gradient(180deg,#0006,transparent 34%)}.cj-poster:hover .cj-poster-image{transform:translateY(-5px)}.cj-poster:hover .cj-poster-image:before{transform:scale(1.08)}.cj-poster-upper{position:absolute;z-index:2;top:15px;left:14px;right:14px;display:flex;justify-content:space-between;font-size:10px;font-weight:900;letter-spacing:.12em}.cj-poster-upper span{opacity:.9}.cj-poster-bottom{position:absolute;bottom:21px;left:17px;right:17px;z-index:3;display:flex;flex-direction:column;gap:8px}.cj-poster-bottom strong{font-size:26px;line-height:1.05;letter-spacing:-.06em;font-weight:900}.cj-poster-bottom span{font-size:11px;font-weight:600;color:#e0e0e0}.cj-poster-go{position:absolute;z-index:3;top:49%;left:50%;transform:translate(-50%,-42%);font-size:17px;background:#ffffffd9;color:#0c0c0c;width:47px;height:47px;border-radius:50%;display:grid;place-items:center;opacity:0;transition:opacity .2s,transform .2s}.cj-poster:hover .cj-poster-go{opacity:1;transform:translate(-50%,-50%)}
.cj-phrase{position:relative;flex:0 0 clamp(210px,21vw,280px);height:160px;scroll-snap-align:start;border:1px solid #292929;border-radius:6px;background:#1b1b1b;display:flex;flex-direction:column;text-align:left;align-items:flex-start;color:#fff;padding:20px;cursor:pointer;transition:background .2s,transform .2s}.cj-phrase:hover{background:#262626;transform:translateY(-3px)}.cj-phrase>span{font-size:10px;letter-spacing:.1em;font-weight:800;color:#b8b8b8;text-transform:uppercase}.cj-phrase strong{font-size:25px;line-height:1.14;letter-spacing:-.045em;font-weight:800;margin-top:auto}.cj-phrase small{color:#b3b3b3;margin-top:6px;max-width:90%;font-size:12px}.cj-phrase i{position:absolute;right:19px;bottom:21px;color:#bdbdbd;font-size:17px;font-style:normal}.cj-end-row{margin:20px 0 28px;padding:23px 0;display:flex;gap:24px;align-items:center;border-top:1px solid #292929}.cj-end-row h2{font-size:19px;margin:0 0 4px}.cj-end-row p{margin:0;font-size:12px;color:#aaa}.cj-progress-outer{height:5px;background:#303030;border-radius:10px;flex:1;max-width:330px}.cj-progress-outer div{height:100%;border-radius:10px;background:#b31d38}.cj-end-row button{background:none;border:0;color:#ddd;font-weight:700;font-size:13px;cursor:pointer}.cj-end-row button span{font-size:20px}
/* Interior pages retain complete language tools while matching Cinejoy surfaces. */
.page-title{margin-bottom:28px}.page-title h1,.translate-head h1{font-family:Montserrat,'DM Sans',sans-serif;font-size:clamp(34px,4vw,54px);font-weight:850;letter-spacing:-.045em;margin-bottom:0}.page-title p,.translate-head p{display:none}.page-title .eyebrow{display:none}.translate-head{margin:0 0 23px}.translate-head h1{font-weight:850}.title-period{color:#b31d38}.btn{border-radius:6px!important;font-weight:700;transition:background .15s,transform .15s}.btn.primary{background:#b31d38!important;color:#fff!important;border-color:#b31d38!important}.btn.primary:hover{background:#d32647!important}.btn:active{transform:scale(.98)}.chip.active,.chip:hover{color:#fff;border-color:#a32b40}.lesson-card,.feature-card,.settings-card,.grammar-content,.number-converter,.dictionary-toolbar,.dict-row,.stat,.practice-stage,.flash-card,.match-card,.complete-card,.grammar-sidebar,.lesson-header,.practice-mini{border-radius:7px!important;background:#151515;color:#fff;border-color:#303030}.lesson-card:hover,.match-card:hover:not(:disabled){background:#202020;border-color:#666}.unit-label{color:#9e9e9e}.lesson-card h3{font-family:'DM Sans',sans-serif;font-weight:800}.course-grid,.lesson-grid{gap:12px}.field,.translate-columns textarea{background:#151515!important;color:#fff!important;border-color:#363636!important;border-radius:6px!important}.field:focus,.translate-columns textarea:focus{border-color:#777!important}.translation-explainer:empty{display:none}.translation-explainer{display:none}.translate-workspace{background:#151515;border:1px solid #333;border-radius:8px;overflow:hidden}.translate-bar{background:#151515}.translate-head p{display:none}.translate-output-side{background:#171717}.sample-chip,.filter-row .chip{border-radius:6px!important;background:#1c1c1c;color:#fff}.sample-chip:hover{background:#2a2a2a}.match-card.selected{background:#5c2631;border-color:#e25470}.match-card.matched{background:#263b2c;border-color:#51715d}.practice-stage{max-width:960px}.dictionary-toolbar{background:#151515}.dict-row{background:#151515}.dict-row:hover{background:#202020}.grammar-section h3{font-size:20px}.translation-feedback{font-size:12px}.footer button{cursor:pointer}
@keyframes cjFade{from{opacity:.4;transform:translateY(calc(-47% + 7px))}to{opacity:1;transform:translateY(-47%)}}
@media(max-width:1050px){.desktop-header-links{top:16px}.header-route{padding:0 10px;font-size:12px}.cj-meta{font-size:12px}.cj-hero-content h1{font-size:clamp(58px,8vw,102px)}.cj-shelf-heading h2{font-size:22px}}
@media(max-width:740px){:root{--cine-pad:20px}.topbar{height:65px;min-height:65px;padding:0 15px;position:absolute}.topbar-logo{font-size:24px}.desktop-header-links{display:none}.topbar .mobile-search{display:grid!important;place-items:center;width:42px;height:42px;color:#fff;background:#ffffff21;border:1px solid #ffffff20;border-radius:50%;cursor:pointer}.mobile-search svg{width:19px;height:19px}.cj-hero{height:635px;min-height:635px}.cj-hero-photo{background-position:60% 50%!important}.cj-hero-shade{background:linear-gradient(0deg,#090909 0%,#08080880 28%,#08080866 71%,#08080850),linear-gradient(90deg,#080808b9,transparent 100%)}.cj-hero-content{top:auto;bottom:100px;left:20px;right:20px;transform:none;max-width:100%;animation:none}.cj-hero-content h1{font-size:clamp(49px,11vw,77px);line-height:1.05;margin:0 0 14px;letter-spacing:-.08em}.cj-hero.hero-type .cj-hero-content h1{font-size:clamp(39px,9vw,68px)}.cj-meta{gap:9px;font-size:11px;margin-bottom:16px}.cj-meta i{width:3px;height:3px}.cj-hero-content p{font-size:14px;line-height:1.5;margin-bottom:19px;max-width:310px}.cj-play{height:42px!important;padding:0 21px}.cj-actions .cj-outline{width:43px;height:43px!important}.cj-slides{bottom:80px;right:20px}.cj-hero-bottom{height:80px}.cj-feed{margin-top:-33px}.cj-section{margin-bottom:30px}.cj-landscape{flex-basis:70vw}.cj-provider-list button{font-size:12px;padding:12px 17px}.cj-poster{flex-basis:45vw;height:62vw;max-height:300px}.cj-poster-bottom strong{font-size:22px}.cj-phrase{flex-basis:74vw}.shelf-arrow{display:none}.cj-end-row{gap:10px;flex-wrap:wrap}.cj-progress-outer{order:3;flex-basis:100%;max-width:none}.cj-end-row button{margin-left:auto}.bottom-nav{position:fixed;bottom:0;left:0;right:0;height:calc(64px + env(safe-area-inset-bottom));padding:0 5px env(safe-area-inset-bottom);z-index:90;display:flex;justify-content:space-around;align-items:center;background:rgba(12,12,12,.93);backdrop-filter:blur(21px);-webkit-backdrop-filter:blur(21px);border-top:1px solid #ffffff1c}.bottom-nav button{display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center;flex:1;background:transparent;border:0;color:#9e9e9e;font-size:10px;font-weight:700;height:62px}.bottom-nav button.selected{color:#fff}.bottom-nav button.selected svg{stroke:#d22f4d}.bottom-nav svg{width:21px;height:21px}.footer{padding-bottom:90px!important}.page:not(:has(.cj-home)){padding:94px 17px 115px}.page:has(.cj-home){padding-bottom:20px}.page-title h1,.translate-head h1{font-size:34px}.modal-backdrop{z-index:230!important}.sidebar{z-index:210!important}.scrim:not([hidden]){z-index:200!important}.match-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.match-card{min-height:118px}}
@media(prefers-reduced-motion:reduce){.cj-hero-photo,.cj-landscape-image,.cj-landscape-image:before,.cj-poster-image,.cj-poster-image:before,.cj-shelf{transition:none!important;scroll-behavior:auto!important}.cj-hero-content{animation:none!important}}