@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap");:root{--primary:#4f46e5;--primary-600:#4338ca;--primary-050:#eef2ff;--accent:#f59e0b;--green:#10b981;--green-050:#ecfdf5;--red:#ef4444;--red-050:#fef2f2;--bg:#f6f7fb;--bg-grad-1:#eef2ff;--bg-grad-2:#f6f7fb;--surface:#ffffff;--surface-2:#f9fafc;--text:#0f172a;--sub:#64748b;--muted:#94a3b8;--border:#e8ebf3;--border-strong:#d7dceb;--radius:18px;--radius-sm:12px;--shadow-sm:0 1px 2px rgba(16,24,40,0.04),0 1px 3px rgba(16,24,40,0.06);--shadow:0 4px 12px rgba(16,24,40,0.06),0 2px 4px rgba(16,24,40,0.04);--shadow-lg:0 18px 40px rgba(31,41,84,0.12);--ring:0 0 0 3px rgba(79,70,229,0.35)}*{box-sizing:border-box}html{color-scheme:light}body,html{margin:0;padding:0;color:var(--text);background:radial-gradient(900px 520px at -5% -10%,rgba(99,102,241,.16),transparent 55%),radial-gradient(900px 520px at 105% -15%,rgba(139,92,246,.13),transparent 55%),radial-gradient(760px 520px at 50% 118%,rgba(14,165,233,.08),transparent 60%),var(--bg-grad-2);background-attachment:fixed;min-height:100vh;font-family:Manrope,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font-family:inherit;cursor:pointer}button:disabled{cursor:not-allowed}:focus-visible{outline:none;box-shadow:var(--ring);border-radius:8px}.container{max-width:1080px;margin:0 auto;padding:28px 20px 80px}.header{position:-webkit-sticky;position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--surface) 82%,transparent);-webkit-backdrop-filter:saturate(160%) blur(12px);backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--border)}.header-inner{max-width:1080px;margin:0 auto;padding:12px 20px;gap:14px}.brand,.header-inner{display:flex;align-items:center}.brand{font-weight:800;font-size:18px;letter-spacing:-.4px;gap:10px}.mark{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--primary),#8b5cf6);display:grid;place-items:center;color:#fff;box-shadow:0 6px 16px rgba(79,70,229,.35)}.nav{display:flex;gap:4px;margin-left:10px}.nav a{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:11px;color:var(--sub);font-size:14px;font-weight:600;transition:all .18s ease}.nav a:hover{color:var(--text);background:var(--surface-2)}.nav a.active{color:var(--primary);background:var(--primary-050)}.spacer{flex:1 1}.avatar{width:36px;height:36px;border-radius:50%;border:2px solid var(--surface);box-shadow:var(--shadow-sm);object-fit:cover;background:linear-gradient(135deg,var(--primary),#8b5cf6);color:#fff;display:grid;place-items:center;font-weight:700}.h1{font-size:30px;letter-spacing:-.7px}.h1,.h2{font-weight:800;margin:4px 0}.h2{font-size:21px;letter-spacing:-.4px}.muted{color:var(--sub);font-size:14.5px}.eyebrow{color:var(--primary);font-weight:700;font-size:12.5px;letter-spacing:.4px;text-transform:uppercase}.back{display:inline-flex;align-items:center;gap:6px;color:var(--sub);font-weight:600;font-size:14px;margin-bottom:16px;transition:color .15s}.back:hover{color:var(--text)}.hero{position:relative;overflow:hidden;border-radius:26px;padding:34px 30px;background:linear-gradient(120deg,#4338ca,#6d28d9 55%,#8b5cf6);color:#fff;box-shadow:0 24px 60px rgba(67,56,202,.35);margin-bottom:24px}.hero:before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 0);background-size:22px 22px;-webkit-mask:linear-gradient(90deg,#000,transparent 55%);mask:linear-gradient(90deg,#000,transparent 55%);opacity:.6}.hero-content{position:relative;z-index:2}.hero h1{font-size:32px;font-weight:800;letter-spacing:-.8px;margin:4px 0 6px}.hero p{margin:0;opacity:.92;font-size:15px}.hero-stats{display:flex;gap:14px;margin-top:20px;flex-wrap:wrap}.stat{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:10px 16px;min-width:92px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.stat b{display:block;font-size:22px;font-weight:800;line-height:1.1}.stat span{font-size:12px;opacity:.85}.orb{position:absolute;border-radius:50%;filter:blur(2px);z-index:1;pointer-events:none;animation:float 7s ease-in-out infinite}.orb.a{width:150px;height:150px;right:6%;top:-30px;background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.5),rgba(255,255,255,.05) 70%)}.orb.b{width:86px;height:86px;right:22%;bottom:-26px;background:radial-gradient(circle at 35% 35%,rgba(245,181,68,.7),transparent 70%);animation-delay:1.5s}.orb.c{width:54px;height:54px;right:3%;bottom:24px;background:radial-gradient(circle at 35% 35%,rgba(45,212,191,.7),transparent 70%);animation-delay:3s}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-16px)}}.quick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));grid-gap:14px;gap:14px;margin:0 0 26px}.quick{display:flex;align-items:center;gap:14px;padding:18px;border-radius:18px;color:#fff;box-shadow:var(--shadow);transition:transform .15s ease,box-shadow .18s ease}.quick:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}.quick .qicon{width:48px;height:48px;border-radius:14px;background:rgba(255,255,255,.22);display:grid;place-items:center;flex:0 0 auto}.quick b{font-size:16px;font-weight:800}.quick span{font-size:13px;opacity:.92}.quick .qarrow{margin-left:auto;opacity:.85}.quick-indigo{background:linear-gradient(135deg,#4f46e5,#7c3aed)}.quick-amber{background:linear-gradient(135deg,#f59e0b,#ef4444)}.quick-teal{background:linear-gradient(135deg,#0ea5e9,#2563eb)}.grid{display:grid;grid-gap:18px;gap:18px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));margin-top:20px}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow-sm);transition:box-shadow .18s ease,border-color .18s ease}.card.click{cursor:pointer}.card.click:hover{box-shadow:var(--shadow-lg);border-color:var(--border-strong)}.card-title{font-weight:700;font-size:16.5px;letter-spacing:-.2px;margin:0 0 6px}.course-cover{height:104px;border-radius:14px;margin:-4px -4px 14px;display:grid;place-items:center;color:#fff;position:relative;overflow:hidden}.course-cover svg{opacity:.96;filter:drop-shadow(0 4px 10px rgba(0,0,0,.2));position:relative;z-index:1}.course-cover:before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 0);background-size:16px 16px;opacity:.5}.course-cover:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(0,0,0,.14))}.cover-pct{position:absolute;top:10px;right:10px;z-index:2;background:rgba(255,255,255,.24);color:#fff;font-weight:800;font-size:12px;padding:4px 10px;border-radius:999px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.25)}.progress{height:8px;background:var(--surface-2);border:1px solid var(--border);border-radius:999px;overflow:hidden;margin-top:14px}.progress>span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--primary),#8b5cf6);transition:width .4s ease}.meta-row{display:flex;gap:8px;color:var(--sub);font-size:13.5px;font-weight:600}.badge,.meta-row{align-items:center}.badge{display:inline-flex;gap:6px;padding:5px 11px;border-radius:999px;font-size:12px;font-weight:700}.badge.green{background:var(--green-050);color:var(--green)}.badge.blue{background:var(--primary-050);color:var(--primary)}.badge.red{background:var(--red-050);color:var(--red)}.badge.amber{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 18px;border-radius:13px;border:1px solid transparent;font-size:15px;font-weight:700;width:100%;transition:transform .12s ease,box-shadow .18s ease,background .18s ease}.btn:active{transform:translateY(1px)}.btn.primary{background:linear-gradient(135deg,var(--primary),var(--primary-600));color:#fff;box-shadow:0 8px 20px rgba(79,70,229,.28)}.btn.primary:hover{box-shadow:0 10px 26px rgba(79,70,229,.38)}.btn.primary:disabled{background:var(--surface-2);color:var(--muted);box-shadow:none;border-color:var(--border)}.btn.ghost{background:var(--surface);color:var(--sub);border-color:var(--border-strong)}.btn.ghost:hover{color:var(--text);background:var(--surface-2)}.opt,.row{display:flex;gap:12px}.opt{align-items:center;padding:15px 16px;border-radius:14px;border:1.5px solid var(--border);background:var(--surface);margin-bottom:11px;transition:all .16s ease;text-align:left;width:100%;color:var(--text);font-size:15px;font-weight:500}.opt:hover{border-color:var(--primary);background:var(--primary-050)}.opt.selected{background:linear-gradient(135deg,var(--primary),var(--primary-600));border-color:transparent;color:#fff;box-shadow:0 8px 20px rgba(79,70,229,.28)}.opt.correct{border-color:var(--green);background:var(--green-050)}.opt.wrong{border-color:var(--red);background:var(--red-050)}.opt .box{width:22px;height:22px;flex:0 0 auto;display:grid;place-items:center}.video-wrap{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow)}.video-wrap video{width:100%;height:100%}.quality{position:absolute;top:12px;right:12px;z-index:5;font-size:13px}.quality>button{display:flex;align-items:center;gap:6px;background:rgba(0,0,0,.55);color:#fff;border:1px solid rgba(255,255,255,.28);border-radius:9px;padding:7px 11px;font-weight:700;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.quality>button:hover{background:rgba(0,0,0,.72)}.quality ul{list-style:none;margin:8px 0 0;padding:6px;position:absolute;right:0;min-width:128px;background:rgba(17,24,39,.96);border:1px solid rgba(255,255,255,.16);border-radius:12px;box-shadow:var(--shadow-lg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.quality li{padding:9px 11px;border-radius:8px;color:#e5e7eb;cursor:pointer;font-weight:600}.quality li:hover{background:rgba(255,255,255,.1)}.quality li.active{color:#fff;background:var(--primary)}.qimg{max-width:100%;border-radius:12px;border:1px solid var(--border);margin-bottom:12px}select.dd{background:var(--surface);color:var(--text);border:1.5px solid var(--border-strong);border-radius:11px;padding:11px 13px;font-size:14px;font-weight:600;min-width:150px;transition:border-color .15s}select.dd:hover{border-color:var(--primary)}.center{min-height:62vh;display:grid;place-items:center;text-align:center}.spinner{width:36px;height:36px;border:3px solid var(--border-strong);border-top-color:var(--primary);border-radius:50%;animation:spin .75s linear infinite;margin:0 auto}@keyframes spin{to{transform:rotate(1turn)}}.errbox{background:var(--red-050);border:1px solid color-mix(in srgb,var(--red) 40%,transparent);color:var(--red);padding:14px 16px;border-radius:12px;font-size:14px;font-weight:600}.score-hero{text-align:center;padding:32px 20px;border-radius:22px;background:linear-gradient(135deg,var(--primary),#7c3aed);color:#fff;box-shadow:var(--shadow-lg)}.score-hero .muted{color:rgba(255,255,255,.9)}.score-num{font-size:52px;font-weight:900;letter-spacing:-1.5px;line-height:1;margin:8px 0 6px}.divider{height:1px;background:var(--border);margin:26px 0}.review-q{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:18px;margin-bottom:14px;box-shadow:var(--shadow-sm)}.sticky-actions{position:-webkit-sticky;position:sticky;bottom:0;background:linear-gradient(to top,var(--bg-grad-2) 55%,transparent);padding:16px 0 10px;display:flex;gap:12px}.pill{display:inline-flex;gap:6px;padding:6px 13px;border-radius:999px;background:var(--primary-050);color:var(--primary);font-size:13px;font-weight:800}.pill,.qcount{align-items:center}.qcount{display:flex;justify-content:space-between;gap:10px;margin-bottom:12px}.rise,.stagger>*{animation:rise .45s cubic-bezier(.22,1,.36,1) both}.stagger>:first-child{animation-delay:.02s}.stagger>:nth-child(2){animation-delay:.07s}.stagger>:nth-child(3){animation-delay:.12s}.stagger>:nth-child(4){animation-delay:.17s}.stagger>:nth-child(5){animation-delay:.22s}.stagger>:nth-child(6){animation-delay:.27s}.stagger>:nth-child(n+7){animation-delay:.3s}@keyframes rise{0%{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){*,:after,:before{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}.hero-cta{margin-top:22px}.btn.light{background:#fff;color:var(--primary);width:auto;padding:12px 22px;box-shadow:0 8px 24px rgba(0,0,0,.14)}.btn.light:hover{box-shadow:0 12px 30px rgba(0,0,0,.2)}.gate{max-width:440px;margin:28px auto;padding:34px 30px;text-align:center}.gate-lock{width:60px;height:60px;border-radius:18px;margin:0 auto 18px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)}.gate-title{font-size:21px;font-weight:800;margin-bottom:8px}.gate-msg{margin-bottom:24px}.gate-btn{display:grid;place-items:center;min-height:48px}.preview-banner{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px;margin-bottom:16px;border-radius:14px;background:var(--green-050);border:1px solid color-mix(in srgb,var(--green) 22%,transparent)}.preview-banner-text{font-weight:600;color:var(--sub);font-size:14px}.gate-cta{margin-top:28px;text-align:center;padding:30px 26px;background:linear-gradient(180deg,var(--primary-050),var(--surface));border:1px solid var(--border)}@media (max-width:640px){.h1,.hero h1{font-size:25px}.container{padding:20px 16px 72px}.hero{padding:24px 20px}.nav a span.label{display:none}.preview-banner .btn{margin-left:0!important;width:100%}}