:root{--navy:#08294f;--blue:#1253a4;--ink:#102238;--muted:#66778a;--cream:#fffdf5;--yellow:#f5c849;--green:#2f986a;--red:#e35d51;--line:#dce5ec;--shadow:0 20px 60px rgba(8,41,79,.12)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:radial-gradient(circle at 12% 0%,rgba(245,200,73,.17),transparent 27rem),linear-gradient(180deg,#f7fbff 0%,var(--cream) 44%,#f5f8fb 100%);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-height:100vh;padding-bottom:155px}button,select,input{font:inherit}button{cursor:pointer}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.topbar{height:76px;display:flex;align-items:center;justify-content:space-between;max-width:1220px;padding:0 28px;margin:0 auto}.brand{color:var(--navy);text-decoration:none;font-size:1.1rem;font-weight:850;letter-spacing:-.02em;display:inline-flex;align-items:center;gap:10px}.brand strong{color:var(--blue)}.brand-mark{width:34px;height:34px;display:grid;place-items:center;color:#fff;background:var(--navy);border-radius:10px;font-size:.75rem;box-shadow:4px 4px 0 var(--yellow)}.edition-badge{padding:7px 12px;border:1px solid rgba(18,83,164,.18);color:var(--blue);background:rgba(255,255,255,.72);border-radius:999px;font-size:.72rem;font-weight:850;text-transform:uppercase;letter-spacing:.06em}
main{overflow:hidden}.hero{max-width:1180px;margin:20px auto 74px;padding:48px 54px;min-height:535px;border-radius:36px;color:#fff;background:linear-gradient(115deg,rgba(8,41,79,.99),rgba(13,58,105,.97) 56%,rgba(18,83,164,.93));display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:54px;position:relative;box-shadow:var(--shadow)}.hero:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.17;background-image:radial-gradient(rgba(255,255,255,.9) 1px,transparent 1px);background-size:22px 22px;mask-image:linear-gradient(90deg,transparent,#000 70%)}.hero-copy{position:relative;z-index:1}.eyebrow{margin:0 0 12px;color:var(--blue);font-size:.76rem;font-weight:900;text-transform:uppercase;letter-spacing:.09em}.hero .eyebrow{color:var(--yellow)}h1{font-size:clamp(2.65rem,5.1vw,4.75rem);line-height:.98;letter-spacing:-.055em;margin:0 0 24px;max-width:760px}.hero-text{font-size:1.08rem;line-height:1.65;color:rgba(255,255,255,.78);max-width:640px;margin:0 0 30px}.hero-actions{display:flex;flex-wrap:wrap;gap:20px;align-items:center}.primary-button{border:0;color:var(--navy);background:var(--yellow);padding:15px 21px;border-radius:14px;font-weight:900;display:inline-flex;align-items:center;gap:10px;box-shadow:0 8px 0 #c5961b;transition:.16s}.primary-button:hover{transform:translateY(-2px);box-shadow:0 10px 0 #c5961b}.primary-button:active{transform:translateY(5px);box-shadow:0 3px 0 #c5961b}.secondary-link{color:#fff;font-size:.9rem;font-weight:800;text-underline-offset:5px}.hero-stats{display:flex;gap:14px;margin-top:36px}.hero-stats div{min-width:102px;padding:12px 15px;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.07);border-radius:14px}.hero-stats strong,.hero-stats span{display:block}.hero-stats strong{font-size:1.2rem}.hero-stats span{margin-top:2px;color:#bcd0e2;font-size:.7rem;font-weight:750;text-transform:uppercase;letter-spacing:.04em}
.hero-art{position:relative;justify-self:center;width:min(315px,90%);transform:rotate(2.5deg);z-index:1}.hero-art img{display:block;width:100%;aspect-ratio:.707;object-fit:cover;border-radius:10px;border:8px solid #fff;box-shadow:0 26px 50px rgba(0,0,0,.3);position:relative;z-index:2}.paper-shadow{position:absolute;z-index:0;inset:14px -18px -14px 18px;border-radius:10px;background:var(--yellow);transform:rotate(-4deg)}.duration-chip{position:absolute;z-index:3;right:-30px;bottom:31px;padding:10px 14px;background:var(--red);color:#fff;border:4px solid #fff;border-radius:14px;font-size:.78rem;font-weight:900;transform:rotate(-5deg)}.sound-card{position:absolute;z-index:4;left:-38px;top:38px;height:55px;display:flex;align-items:center;gap:5px;padding:0 14px;background:rgba(255,255,255,.96);border-radius:15px;box-shadow:0 14px 30px rgba(0,0,0,.2);transform:rotate(-5deg)}.sound-card span{width:5px;border-radius:9px;background:var(--blue);animation:sound 1.2s ease-in-out infinite alternate}.sound-card span:nth-child(1),.sound-card span:nth-child(5){height:13px}.sound-card span:nth-child(2),.sound-card span:nth-child(4){height:27px;animation-delay:-.35s}.sound-card span:nth-child(3){height:38px;animation-delay:-.7s}@keyframes sound{to{transform:scaleY(.55);opacity:.65}}
.library{max-width:1080px;margin:0 auto;padding:0 28px}.library-heading{display:grid;grid-template-columns:1fr minmax(280px,360px);align-items:end;gap:40px;margin-bottom:24px}h2{margin:0;font-size:clamp(2rem,4vw,3.2rem);letter-spacing:-.045em}.library-intro{color:var(--muted);margin:12px 0 0;line-height:1.55}.overall-progress{display:grid;gap:8px}.overall-progress>div{display:flex;justify-content:space-between;gap:16px;color:var(--muted);font-size:.8rem}.overall-progress strong{color:var(--ink)}.overall-progress small{color:var(--muted);font-size:.7rem}.progress-track,.lesson-progress{display:block;overflow:hidden;height:7px;background:#e4ebf0;border-radius:999px}.progress-track span,.lesson-progress span{display:block;width:0;height:100%;background:var(--green);border-radius:inherit;transition:width .24s ease}
.library-tools{position:sticky;z-index:10;top:8px;display:flex;gap:8px;align-items:center;padding:10px;margin-bottom:16px;border:1px solid rgba(220,229,236,.9);background:rgba(248,251,253,.88);backdrop-filter:blur(16px);border-radius:18px;box-shadow:0 10px 30px rgba(8,41,79,.06)}.search-box{min-width:0;flex:1;display:flex;align-items:center;gap:9px;padding:0 12px;background:#fff;border:1px solid var(--line);border-radius:12px;color:var(--blue)}.search-box input{width:100%;min-width:0;border:0;outline:0;padding:11px 0;color:var(--ink);background:transparent}.filter-button{border:1px solid var(--line);background:#fff;color:var(--muted);padding:10px 13px;border-radius:11px;font-size:.76rem;font-weight:800;white-space:nowrap}.filter-button.active{color:#fff;border-color:var(--navy);background:var(--navy)}
.modules{display:grid;gap:14px}.module-card{--module-color:var(--blue);overflow:hidden;border:1px solid var(--line);background:rgba(255,255,255,.93);border-radius:22px;box-shadow:0 10px 32px rgba(8,41,79,.065)}.module-card.hidden{display:none}.module-header{width:100%;border:0;padding:20px 22px;color:inherit;background:transparent;display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;text-align:left}.module-number{width:48px;height:48px;display:grid;place-items:center;color:#fff;background:var(--module-color);border-radius:15px;font-size:.88rem;font-weight:900;box-shadow:4px 4px 0 color-mix(in srgb,var(--module-color),transparent 72%)}.module-copy{min-width:0}.module-copy h3{margin:0;font-size:1.08rem;letter-spacing:-.015em}.module-meta{display:flex;align-items:center;gap:10px;margin-top:6px;color:var(--muted);font-size:.74rem}.module-meta .module-progress{color:var(--module-color);font-weight:850}.module-chevron{color:var(--muted);font-size:1.4rem;transition:transform .18s}.module-card.open .module-chevron{transform:rotate(180deg)}.module-lessons{border-top:1px solid var(--line);background:#fbfdff}.module-lessons[hidden]{display:none}.lesson-card{padding:15px 20px;display:grid;grid-template-columns:auto 1fr auto;gap:15px;align-items:center;border-bottom:1px solid #e9eff3}.lesson-card:last-child{border-bottom:0}.lesson-card.current{background:#f1f7ff;box-shadow:inset 3px 0 0 var(--module-color)}.lesson-card.completed .lesson-title{color:#526477}.lesson-play{width:44px;height:44px;display:grid;place-items:center;border-radius:14px;border:0;background:var(--module-color);color:#fff;font-size:.74rem;font-weight:900;box-shadow:3px 3px 0 color-mix(in srgb,var(--module-color),transparent 77%)}.lesson-copy{min-width:0}.lesson-topline{display:flex;align-items:baseline;gap:9px}.lesson-number{color:var(--module-color);font-size:.65rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}.lesson-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0;font-size:.92rem}.lesson-progress-row{display:grid;grid-template-columns:minmax(80px,200px) auto;gap:10px;align-items:center;margin-top:8px;color:var(--muted);font-size:.66rem;font-weight:700}.complete-button{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--line);background:#f7fafc;color:#9aabb9;border-radius:50%;font-weight:900}.complete-button.done{color:#fff;border-color:var(--green);background:var(--green)}.empty-state{padding:50px 20px;text-align:center;color:var(--muted);background:#fff;border:1px dashed #bdcad4;border-radius:20px}
.study-note{max-width:1080px;margin:26px auto 60px;padding:18px 28px;display:flex;gap:14px;color:#5d4a0a;background:#fff8d8;border:1px solid #ead987;border-radius:18px}.study-note strong{font-size:.9rem}.study-note p{margin:3px 0 0;line-height:1.45;font-size:.84rem}
.player{position:fixed;z-index:30;left:22px;right:22px;bottom:18px;max-width:1180px;margin:0 auto;padding:13px 18px;display:grid;grid-template-columns:minmax(225px,1fr) minmax(390px,1.45fr) minmax(118px,.45fr);gap:18px;align-items:center;color:#fff;background:rgba(8,28,51,.97);border:1px solid rgba(255,255,255,.1);border-radius:22px;box-shadow:0 18px 70px rgba(1,19,38,.35);backdrop-filter:blur(16px)}.now-playing{display:flex;align-items:center;gap:11px;min-width:0}.player-cover{flex:0 0 50px;width:50px;height:50px;display:grid;place-items:center;color:#fff;background:var(--blue);border-radius:11px;font-weight:900}.now-playing div:last-child{min-width:0}.now-playing span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#9fb3c7;font-size:.62rem;text-transform:uppercase;letter-spacing:.07em;font-weight:800}.now-playing strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:3px;font-size:.82rem}.player-center{display:grid;gap:6px}.controls{display:flex;justify-content:center;align-items:center;gap:13px}.icon-button,.main-play{border:0;color:#fff;background:transparent}.main-play{width:42px;height:42px;border-radius:50%;color:var(--navy);background:#fff;display:grid;place-items:center}.skip-button{position:relative;width:35px;height:35px;font-size:1.45rem}.skip-button small{position:absolute;font-size:.52rem;font-weight:900;top:14px;left:13px}.track-button{width:29px;height:35px;font-size:1.9rem;color:#b9cad9}.timeline{display:grid;grid-template-columns:38px 1fr 38px;align-items:center;gap:8px;color:#aec0d0;font-size:.67rem;font-variant-numeric:tabular-nums}input[type=range]{accent-color:var(--yellow);width:100%;height:4px;cursor:pointer}.player-options{display:flex;align-items:end;justify-content:end;gap:8px}.speed-control{display:grid;gap:5px;color:#9fb3c7;font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em}.speed-control select{color:#fff;background:#143756;border:1px solid #31536e;border-radius:9px;padding:7px 9px;font-weight:800}.player-complete{width:35px;height:35px;border:1px solid #31536e;color:#9fb3c7;background:#143756;border-radius:9px;font-weight:900}.player-complete.done{color:#fff;border-color:var(--green);background:var(--green)}
button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
@media(max-width:900px){body{padding-bottom:210px}.hero{margin:8px 14px 60px;padding:42px 30px 48px;grid-template-columns:1fr;text-align:center}.hero-copy{display:grid;justify-items:center}.hero-actions{justify-content:center}.hero-art{width:min(275px,76vw);margin-top:10px}.library-heading{grid-template-columns:1fr;gap:22px}.player{left:10px;right:10px;bottom:8px;grid-template-columns:1fr auto;padding:12px 14px}.player-center{grid-column:1/-1;grid-row:2}.player-options{grid-column:2;grid-row:1}}
@media(max-width:650px){.topbar{padding:0 18px}.edition-badge{font-size:.59rem;padding:6px 8px}h1{font-size:2.75rem}.hero{border-radius:26px;padding-left:20px;padding-right:20px}.hero-stats{width:100%;gap:7px}.hero-stats div{min-width:0;flex:1;padding:10px 6px}.duration-chip{right:-16px}.library{padding:0 14px}.library-tools{overflow-x:auto;top:4px}.search-box{min-width:215px}.module-header{padding:17px 15px;gap:12px}.module-number{width:42px;height:42px;border-radius:13px}.module-copy h3{font-size:.92rem}.module-meta{font-size:.66rem;gap:7px}.lesson-card{padding:13px 14px;gap:10px}.lesson-play{width:40px;height:40px;border-radius:12px}.lesson-topline{display:block}.lesson-title{margin-top:2px;font-size:.84rem}.lesson-progress-row{grid-template-columns:1fr;gap:4px}.complete-button{width:33px;height:33px}.study-note{margin-left:14px;margin-right:14px;padding:16px}.now-playing strong{max-width:190px}.speed-control span{display:none}.player-complete{display:none}.controls{gap:9px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}