/* Vwa Nwel 2026 song-learning deluxe interaction pass */
:root{--cream:#fffaf0;--ink2:#0b3557;--gold2:#e9b949;--red2:#bd2744;--blue2:#2f80c8;--green2:#43977c;--purple2:#7769c9;--orange2:#dd8b3c}
body{background:linear-gradient(180deg,#fffdf8 0,#f8fbff 48%,#fffaf4 100%)}
.top{background:rgba(255,251,242,.98);border-bottom:1px solid #f0e5cc;box-shadow:0 7px 22px rgba(25,52,78,.08)}
.brand{display:flex;align-items:center;min-width:112px}.brand img{display:block!important;width:auto!important;height:76px!important;max-width:150px!important;object-fit:contain!important;filter:drop-shadow(0 4px 6px rgba(28,45,66,.10))}
.langs{border:1px solid #e7dcc8!important;background:#fff!important;padding:5px!important;border-radius:20px!important;box-shadow:0 7px 0 #ddd3c2,0 12px 20px rgba(20,48,76,.10)!important}
.langs button{border-radius:14px!important;transition:.15s ease!important}.langs button.active{background:linear-gradient(#ffb45e,#f08b35)!important;color:#0d3555!important;box-shadow:0 6px 0 #d56d1f,0 8px 14px rgba(197,102,28,.22)!important;transform:translateY(-2px)!important}.langs button:active{transform:translateY(3px)!important;box-shadow:0 2px 0 #c8c0b4!important}
.hero{background:radial-gradient(circle at 92% 8%,rgba(236,184,69,.14),transparent 28%),linear-gradient(180deg,#fffaf0,#fff)}
.hero-in{position:relative}.hero h1{color:var(--ink2);text-shadow:0 2px #fff}.eyebrow{letter-spacing:.15em}.pill{border:1px solid #ead69f!important;background:#fffdf7!important;box-shadow:0 4px 0 #e4d4a6!important;border-radius:999px!important}
.resource-launchers{gap:14px!important;margin-top:8px!important;margin-bottom:20px!important}
.big-3d,.big-3d.red{position:relative;overflow:hidden;min-height:76px!important;padding:12px 16px!important;border:0!important;border-radius:19px!important;color:#fff!important;box-shadow:0 8px 0 #063056,0 14px 24px rgba(13,55,87,.22)!important;transition:transform .14s ease,box-shadow .14s ease,filter .14s ease!important;cursor:pointer!important}
.big-3d{background:linear-gradient(145deg,#1a5f94,#0a3d68)!important}.big-3d.red{background:linear-gradient(145deg,#d84761,#a81735)!important;box-shadow:0 8px 0 #7d1029,0 14px 24px rgba(168,23,53,.22)!important}.big-3d:before{content:"";position:absolute;inset:0 0 55% 0;background:linear-gradient(rgba(255,255,255,.30),rgba(255,255,255,0));pointer-events:none}.big-3d:hover{filter:brightness(1.05);transform:translateY(-2px)!important}.big-3d:active,.big-3d[aria-expanded="true"]{transform:translateY(6px)!important;box-shadow:0 2px 0 #063056,0 6px 12px rgba(13,55,87,.18)!important}.big-3d.red:active,.big-3d.red[aria-expanded="true"]{box-shadow:0 2px 0 #7d1029,0 6px 12px rgba(168,23,53,.18)!important}.big-3d b{font-size:15px!important}.big-3d .icon{font-size:24px!important;filter:drop-shadow(0 2px 1px rgba(0,0,0,.18))}.big-3d .chev{color:#fff!important;font-size:22px!important}
.drawer-card{border:1px solid #e7d8b8!important;background:#fff!important;box-shadow:0 12px 32px rgba(11,53,87,.12)!important}.drawer-head{background:linear-gradient(90deg,#fff9eb,#fff)!important}.drawer.open{animation:drawerPop .22s ease both}@keyframes drawerPop{from{opacity:0;transform:translateY(-8px) scale(.99)}to{opacity:1;transform:none}}
.studio{margin-top:28px!important}.studio-top{border:1px solid #e9dfc8!important;border-left:6px solid var(--gold2)!important;background:linear-gradient(135deg,#fffdf7,#fff 65%,#f9f4ff)!important;box-shadow:0 10px 0 #ebe5dc,0 17px 30px rgba(18,52,82,.09)!important}.progress-track{height:10px!important;border-radius:999px!important;box-shadow:inset 0 2px 4px rgba(0,0,0,.08)}.progress-fill{background:linear-gradient(90deg,#0c507d,#38a179,#e9b949)!important;box-shadow:0 0 12px rgba(50,139,118,.28)}
.lesson-grid{gap:14px!important}.lesson-card{border:1px solid rgba(0,0,0,.06)!important;border-radius:20px!important;box-shadow:0 8px 0 rgba(70,75,85,.16),0 15px 28px rgba(24,55,82,.10)!important;transition:transform .16s ease,box-shadow .16s ease!important}.lesson-card:nth-child(1){background:linear-gradient(145deg,#fff8dc,#fffdf5)!important}.lesson-card:nth-child(2){background:linear-gradient(145deg,#eaf7ff,#f8fcff)!important}.lesson-card:nth-child(3){background:linear-gradient(145deg,#fff0f3,#fffafa)!important}.lesson-card:nth-child(4){background:linear-gradient(145deg,#edf9f4,#fbfffd)!important}.lesson-card:nth-child(5){background:linear-gradient(145deg,#fff0dd,#fffaf4)!important}.lesson-card:nth-child(6){background:linear-gradient(145deg,#f0edff,#fbfaff)!important}.lesson-card:hover{transform:translateY(-3px)!important;box-shadow:0 11px 0 rgba(70,75,85,.13),0 20px 32px rgba(24,55,82,.13)!important}.lesson-card.locked{opacity:1!important;filter:none!important}.lesson-card h3{color:var(--ink2)!important}.lesson-card p{color:#6f7d88!important}.lesson-num{box-shadow:0 3px 0 rgba(0,0,0,.10);font-weight:900!important}
.lesson-open{min-height:42px!important;border:0!important;border-radius:13px!important;color:#fff!important;font-weight:950!important;letter-spacing:.01em;box-shadow:0 6px 0 #0a3151,0 9px 14px rgba(15,50,78,.16)!important;cursor:pointer!important;transition:transform .12s ease,box-shadow .12s ease,filter .12s ease!important}.lesson-card:nth-child(1) .lesson-open{background:linear-gradient(#e7b348,#bb7d18)!important;box-shadow:0 6px 0 #8f5b0a,0 9px 14px rgba(150,95,10,.16)!important}.lesson-card:nth-child(2) .lesson-open{background:linear-gradient(#4b9add,#216fae)!important;box-shadow:0 6px 0 #16527f,0 9px 14px rgba(32,102,157,.17)!important}.lesson-card:nth-child(3) .lesson-open{background:linear-gradient(#e55b78,#b62e4c)!important;box-shadow:0 6px 0 #8f2039,0 9px 14px rgba(177,42,70,.16)!important}.lesson-card:nth-child(4) .lesson-open{background:linear-gradient(#62b99b,#33876b)!important;box-shadow:0 6px 0 #24634e,0 9px 14px rgba(48,128,101,.16)!important}.lesson-card:nth-child(5) .lesson-open{background:linear-gradient(#f0a452,#cf7227)!important;box-shadow:0 6px 0 #9c5018,0 9px 14px rgba(194,100,29,.16)!important}.lesson-card:nth-child(6) .lesson-open{background:linear-gradient(#9487e4,#6659b7)!important;box-shadow:0 6px 0 #4b408f,0 9px 14px rgba(94,79,174,.16)!important}.lesson-open:hover{filter:brightness(1.07)}.lesson-open:active{transform:translateY(5px)!important;box-shadow:0 1px 0 rgba(15,50,78,.4),0 4px 8px rgba(15,50,78,.12)!important}.lesson-open[aria-disabled="true"]{opacity:.62!important;filter:saturate(.7)!important;cursor:pointer!important}
.practice-panel{border:1px solid #e5dfd2!important;background:#fff!important;box-shadow:0 9px 0 #e5e0d9,0 18px 32px rgba(18,52,82,.12)!important}.mini-3d,.speed-btn,.section-tabs button{font-weight:900!important;cursor:pointer!important;transition:transform .12s ease,box-shadow .12s ease!important}.mini-3d:active,.speed-btn:active,.section-tabs button:active{transform:translateY(4px)!important}.speed-btn.active,.section-tabs button.active{background:linear-gradient(#1d6296,#0a3d68)!important;color:#fff!important;box-shadow:0 5px 0 #052944!important}
.locked-panel{margin-top:12px;padding:18px;border-radius:18px;background:linear-gradient(145deg,#fff8e7,#fff);border:1px solid #ead7a5;box-shadow:0 7px 0 #e6d8ba,0 14px 24px rgba(68,55,28,.10);text-align:center}.locked-panel .lock-icon{font-size:34px}.locked-panel h3{margin:7px 0 5px;color:var(--ink2);font:900 22px Georgia,serif}.locked-panel p{margin:0;color:#7c6a42;font-size:13px;line-height:1.55}.locked-panel button{margin-top:12px}
@media(max-width:700px){.brand img{height:68px!important;max-width:116px!important}.topin{min-height:86px!important}.resource-launchers{grid-template-columns:1fr 1fr!important}.big-3d,.big-3d.red{min-height:70px!important;padding:10px 12px!important}.big-3d b{font-size:13px!important}.lesson-grid{grid-template-columns:1fr 1fr!important;gap:12px!important}.lesson-card{min-height:160px!important;padding-bottom:62px!important}.lesson-card h3{font-size:16px!important}.lesson-card p{font-size:11px!important}.lesson-open{left:12px!important;right:12px!important;bottom:14px!important;min-height:40px!important;font-size:11px!important}}
@media(max-width:390px){.resource-launchers{grid-template-columns:1fr!important}.lesson-card h3{font-size:15px!important}.lesson-card p{font-size:10.5px!important}}