:root{
  --bg:#050505; --panel:#0a0e14; --card:#0d1512; --card2:#101a16;
  --border:#1c2b24; --border2:#25392f; --green:#4ADE80; --green-mid:#4ADE80;
  --green-dim:#2f9f5c; --green-glow:rgba(74,222,128,.4);
  --text:#eafff2; --text-dim:#9db3a7; --text-faint:#6f8a7d;
  --mono:'JetBrains Mono','Fira Code',ui-monospace,monospace;
  --sans:'Outfit','Space Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --glass-bg:linear-gradient(135deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.015) 100%);
  --glass-bg-soft:linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
  --glass-border:rgba(255,255,255,0.09); --glass-border-hover:rgba(74,222,128,0.3); --glass-blur:16px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{margin:0;padding:0;background:var(--bg);}
body{font-family:var(--sans);color:var(--text);min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;}
#meshCanvas{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:0;pointer-events:none;}
.hub{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:104px 24px 80px;}
.hub-header{position:sticky;top:88px;z-index:20;background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur)) saturate(1.3);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.3);border:1px solid var(--glass-border);border-radius:20px;box-shadow:0 8px 30px rgba(0,0,0,.3);padding:22px 24px 16px;margin-bottom:24px;}
.crumb{font-family:var(--mono);font-size:12px;color:var(--green-dim);letter-spacing:.02em;margin-bottom:10px;display:flex;align-items:center;justify-content:space-between;}
.crumb .close-btn{width:30px;height:30px;border-radius:9px;background:var(--glass-bg-soft);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--glass-border);color:var(--text-dim);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:15px;transition:.2s;}
.crumb .close-btn:hover{color:var(--green);border-color:var(--glass-border-hover);box-shadow:0 0 12px var(--green-glow);}
.title-row{display:flex;align-items:center;gap:14px;margin-bottom:4px;}
.title-icon{width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg, rgba(74,222,128,0.16) 0%, rgba(74,222,128,0.04) 100%);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border-hover);display:flex;align-items:center;justify-content:center;color:var(--green);font-size:24px;flex:none;}
.title-row h1{font-size:26px;font-weight:600;margin:0;letter-spacing:-.01em;}
.subtitle{font-size:13px;color:var(--text-faint);margin:2px 0 0 62px;}
.hub-nav{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px;padding-bottom:14px;border-bottom:1px solid var(--glass-border);}
.pill{font-family:var(--sans);font-size:12.5px;font-weight:500;cursor:pointer;background:var(--glass-bg-soft);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--text-dim);border:1px solid var(--glass-border);border-radius:20px;padding:7px 14px;display:flex;align-items:center;gap:6px;transition:.2s ease;white-space:nowrap;}
.pill i{font-size:14px;}
.pill:hover{border-color:var(--glass-border-hover);color:var(--text);}
.pill.active{background:linear-gradient(135deg, rgba(74,222,128,0.16) 0%, rgba(74,222,128,0.05) 100%);color:#8ff5c1;border-color:var(--green);box-shadow:0 0 14px var(--green-glow);}
.panel{padding-top:26px;animation:fadeIn .25s ease;}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
.section-head{margin-bottom:20px;}
.section-head h2{font-size:20px;margin:0 0 4px;font-weight:600;}
.section-head p{font-size:13.5px;color:var(--text-faint);margin:0;}
.card{background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);border-radius:20px;box-shadow:0 8px 24px rgba(0,0,0,.25);transition:transform .4s cubic-bezier(.16,1,.3,1), border-color .4s ease, box-shadow .4s ease, background .4s ease;}
.card:hover{border-color:var(--glass-border-hover);}
.card-hover:hover{transform:translateY(-4px);border-color:var(--glass-border-hover);box-shadow:0 20px 40px rgba(0,0,0,.35), 0 0 30px rgba(74,222,128,.08);background:linear-gradient(135deg, rgba(255,255,255,0.065) 0%, rgba(255,255,255,0.02) 100%);}
.ov-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px;}
.ov-stat{padding:16px;text-align:center;}
.ov-stat .val{font-size:20px;font-weight:700;color:var(--green);}
.ov-stat .lab{font-size:11px;color:var(--text-faint);margin-top:4px;letter-spacing:.03em;text-transform:uppercase;}
.ov-desc{padding:20px;margin-top:14px;font-size:13.5px;color:var(--text-dim);line-height:1.7;}
.notes-cats{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px;}
.cat-chip{font-size:11px;font-family:var(--mono);color:var(--text-faint);background:var(--glass-bg-soft);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--glass-border);border-radius:6px;padding:4px 9px;cursor:pointer;transition:.2s ease;}
.cat-chip.active{color:var(--green);border-color:var(--green-dim);background:linear-gradient(135deg, rgba(74,222,128,0.14) 0%, rgba(74,222,128,0.04) 100%);}
.note{overflow:hidden;margin-bottom:8px;}
.note-h{width:100%;display:flex;justify-content:space-between;align-items:center;background:transparent;border:none;padding:14px 16px;cursor:pointer;text-align:left;color:inherit;font-family:inherit;}
.note-h .l{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500;color:var(--text);}
.note-h .l i{color:var(--green-mid);font-size:16px;}
.note-h .tag{font-size:10px;font-family:var(--mono);color:var(--text-faint);border:0.5px solid var(--border);border-radius:5px;padding:2px 6px;margin-left:8px;}
.note-h .chev{color:var(--text-faint);font-size:15px;}
.note-body{padding:0 16px 16px;font-size:13px;color:var(--text-dim);line-height:1.7;}
.note-ul{margin:10px 0 0;padding-left:18px;}
.note-ul li{margin-bottom:4px;}
.flash-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;padding:10px 0 6px;}
.flash-stage{position:relative;width:100%;max-width:480px;height:300px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;}
.flash-fan{position:relative;width:100%;height:140px;}
.flash-mini{position:absolute;bottom:0;left:50%;width:92px;height:118px;margin-left:-46px;transform-origin:bottom center;background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);border-radius:14px;display:flex;align-items:center;justify-content:center;text-align:center;padding:8px;font-size:11px;font-weight:500;color:var(--text);cursor:pointer;box-shadow:0 8px 20px rgba(0,0,0,.35);transition:transform .35s ease,opacity .25s ease,border-color .25s ease;}
.flash-popped{position:absolute;top:0;left:50%;transform:translateX(-50%);width:280px;height:170px;perspective:1200px;z-index:50;cursor:pointer;}
.flash-popped-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.4,.2,.2,1);}
.flash-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:20px;background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border-hover);display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;font-size:16px;color:var(--text);box-shadow:0 0 30px var(--green-glow);}
.flash-face.back{transform:rotateY(180deg);}
.flash-face .side-lab{position:absolute;top:12px;left:14px;font-size:10px;font-family:var(--mono);color:var(--text-faint);letter-spacing:.05em;text-transform:uppercase;}
.flash-dots{display:flex;gap:5px;flex-wrap:wrap;max-width:300px;justify-content:center;}
.dot{width:6px;height:6px;border-radius:50%;background:var(--border2);}
.dot.seen{background:var(--green-mid);}
.flash-meta{font-size:12px;color:var(--text-faint);}
.btn{font-family:var(--sans);font-size:12.5px;font-weight:500;padding:8px 16px;border-radius:9px;cursor:pointer;background:var(--glass-bg-soft);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--text-dim);border:1px solid var(--glass-border);transition:.2s;}
.btn:hover{border-color:var(--glass-border-hover);color:var(--text);}
.btn.primary{background:var(--green);color:#032015;border-color:var(--green);font-weight:600;}
.btn.primary:hover{box-shadow:0 0 18px var(--green-glow);}
.quiz-progress{height:5px;background:rgba(255,255,255,0.06);border-radius:4px;overflow:hidden;margin-bottom:16px;}
.quiz-progress-fill{height:100%;background:var(--green);transition:width .3s;}
.quiz-q{font-size:15px;color:var(--text);margin-bottom:14px;font-weight:500;}
.quiz-opt{display:block;width:100%;text-align:left;padding:12px 14px;margin-bottom:8px;border-radius:12px;background:var(--glass-bg-soft);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--glass-border);color:var(--text-dim);font-size:13.5px;cursor:pointer;font-family:var(--sans);transition:.2s;}
.quiz-opt:hover:not(:disabled){border-color:var(--glass-border-hover);}
.quiz-opt.correct{border-color:var(--green);background:linear-gradient(135deg, rgba(74,222,128,0.18) 0%, rgba(74,222,128,0.05) 100%);color:#8ff5c1;}
.quiz-opt.wrong{border-color:#a34141;background:linear-gradient(135deg, rgba(163,65,65,0.25) 0%, rgba(163,65,65,0.08) 100%);color:#f3a8a8;}
.quiz-fb{font-size:12.5px;margin-top:6px;color:var(--green-mid);line-height:1.6;}
.quiz-score{text-align:center;padding:34px 20px;}
.quiz-score .num{font-size:34px;font-weight:700;color:var(--green);}
.quiz-score .lab{font-size:13px;color:var(--text-faint);margin-top:4px;}
.prog-list{display:flex;flex-direction:column;gap:10px;}
.prog-item{display:flex;align-items:center;gap:12px;padding:13px 16px;}
.prog-item i{font-size:18px;}
.prog-item span{font-size:13.5px;}
.prog-bar-wrap{margin:18px 0 24px;}
.prog-bar{height:8px;border-radius:6px;background:rgba(255,255,255,0.06);overflow:hidden;border:1px solid var(--glass-border);}
.prog-bar-fill{height:100%;background:linear-gradient(90deg,var(--green-dim),var(--green));transition:width .4s;}
.res-cat{font-size:11px;font-family:var(--mono);color:var(--green-dim);letter-spacing:.05em;text-transform:uppercase;margin:20px 0 10px;}
.res-cat:first-child{margin-top:0;}
.res-card{padding:13px 16px;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center;gap:10px;}
.res-card .info .t{font-size:13.5px;color:var(--text);margin-bottom:2px;}
.res-card .info .d{font-size:11.5px;color:var(--text-faint);}
@media (max-width:820px){ .ov-grid{grid-template-columns:repeat(2,1fr);} .subtitle{margin-left:0;} }