@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

    :root {
      color-scheme: dark;
      --bg: #080b18;
      --bg-2: #0d1225;
      --surface: rgba(19, 27, 51, .64);
      --surface-strong: rgba(24, 34, 64, .88);
      --surface-soft: rgba(255,255,255,.045);
      --line: rgba(174, 194, 255, .14);
      --text: #f2f5ff;
      --muted: #9aa8c9;
      --accent: #8b7cff;
      --accent-2: #48d9ef;
      --glow: rgba(139,124,255,.34);
      --good: #64e6b2;
      --radius: 20px;
      --shadow: 0 24px 80px rgba(0,0,0,.35);
    }
    html[data-theme="cyber"] {
      --bg:#070d0d; --bg-2:#0b1716; --surface:rgba(12,35,32,.68);
      --surface-strong:rgba(12,43,38,.92); --line:rgba(85,255,194,.18);
      --text:#edfff8; --muted:#8fb9aa; --accent:#48f0b0; --accent-2:#b4ff55;
      --glow:rgba(72,240,176,.28);
    }
    html[data-theme="sunset"] {
      --bg:#160b18; --bg-2:#241020; --surface:rgba(56,24,48,.65);
      --surface-strong:rgba(69,28,53,.92); --line:rgba(255,166,173,.18);
      --text:#fff4f1; --muted:#d2a6ae; --accent:#ff7d9c; --accent-2:#ffbd75;
      --glow:rgba(255,105,145,.3);
    }
    html[data-theme="ice"] {
      --bg:#071321; --bg-2:#0b2033; --surface:rgba(16,43,66,.65);
      --surface-strong:rgba(18,54,78,.92); --line:rgba(132,220,255,.2);
      --text:#f1fbff; --muted:#9bbdce; --accent:#62cfff; --accent-2:#a6f0ff;
      --glow:rgba(98,207,255,.3);
    }
    html[data-theme="mono"] {
      --bg:#101114; --bg-2:#191b20; --surface:rgba(39,41,47,.7);
      --surface-strong:rgba(48,50,57,.94); --line:rgba(235,238,245,.15);
      --text:#f7f7f8; --muted:#aaaeb8; --accent:#d5d8e2; --accent-2:#8d95a5;
      --glow:rgba(210,218,235,.2);
    }

    * { box-sizing:border-box; }
    body {
      margin:0; min-height:100vh; color:var(--text);
      font-family:"DM Sans",sans-serif;
      background:
        radial-gradient(ellipse at 15% 8%, var(--glow), transparent 34%),
        radial-gradient(ellipse at 88% 20%, color-mix(in srgb, var(--accent-2) 16%, transparent), transparent 32%),
        linear-gradient(145deg,var(--bg),var(--bg-2));
      background-attachment:fixed;
      overflow-x:hidden;
    }
    body::before {
      content:""; position:fixed; inset:0; pointer-events:none; opacity:.17;
      background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
      background-size:48px 48px;
      mask-image:linear-gradient(to bottom,black,transparent 85%);
    }
    button { font:inherit; color:inherit; cursor:pointer; }
    .shell { width:min(1440px, calc(100% - 56px)); margin:0 auto; position:relative; z-index:1; }
    .navbar {
      position:sticky; top:14px; z-index:20; margin:18px auto 0;
      min-height:76px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
      padding:12px 16px; border:1px solid var(--line); border-radius:22px;
      background:rgba(9,14,29,.66); backdrop-filter:blur(24px) saturate(150%);
      box-shadow:0 12px 50px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.08);
    }
    .nav-side { display:flex; align-items:center; gap:10px; min-width:0; }
    .nav-right { justify-content:flex-end; }
    .nav-center { display:flex; align-items:center; gap:10px; white-space:nowrap; }
    .brand-name { font:700 19px "Space Grotesk",sans-serif; letter-spacing:.22em; }
    .brand-tag { display:block; margin-top:2px; color:var(--muted); font-size:9px; letter-spacing:.24em; }
    .star-wrap { width:36px; height:36px; display:grid; place-items:center; filter:drop-shadow(0 0 13px var(--accent)); animation:float 3.6s ease-in-out infinite; }
    .star-wrap svg { width:34px; height:34px; fill:var(--accent); }
    @keyframes float { 0%,100%{transform:translateY(0) rotate(-5deg)} 50%{transform:translateY(-7px) rotate(5deg)} }
    .nav-btn, .icon-btn {
      position:relative; display:inline-flex; align-items:center; justify-content:center; gap:9px;
      min-height:42px; padding:0 13px; border:1px solid transparent; border-radius:13px;
      background:transparent; color:var(--muted); font-size:12px; font-weight:600;
      transition:.2s ease;
    }
    .nav-btn:hover,.icon-btn:hover,.nav-btn[aria-expanded="true"] {
      color:var(--text); border-color:var(--line); background:var(--surface-soft);
    }
    .nav-btn svg,.icon-btn svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.8; }
    .avatar { width:25px;height:25px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#08101d;font-weight:800;font-size:10px; }
    .dropdown {
      position:absolute; top:calc(100% + 12px); min-width:220px; padding:9px;
      border:1px solid var(--line); border-radius:17px; background:var(--surface-strong);
      backdrop-filter:blur(24px); box-shadow:var(--shadow); display:none; animation:pop .16s ease-out;
    }
    .dropdown.open { display:block; }
    @keyframes pop { from{opacity:0;transform:translateY(-5px) scale(.98)} to{opacity:1;transform:none} }
    .drop-wrap { position:relative; }
    .drop-label { padding:9px 11px 7px; color:var(--muted); font-size:9px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
    .drop-item {
      display:flex; width:100%; align-items:center; gap:10px; padding:10px 11px; border:0;
      border-radius:10px; background:transparent; color:var(--text); text-align:left; font-size:12px;
    }
    .drop-item:hover,.drop-item.active { background:var(--surface-soft); }
    .drop-item .hint { margin-left:auto; color:var(--muted); font-size:10px; }
    .swatch { width:10px;height:10px;border-radius:50%;box-shadow:0 0 10px currentColor; }
    .menu-drop { left:0; } .profile-drop { left:0; } .right-drop { right:0; }
    .divider { height:1px;background:var(--line);margin:7px 5px; }
    .mobile-label { display:none; }

    main { padding:66px 0 80px; }
    .eyebrow { display:flex; align-items:center; gap:9px; color:var(--accent-2); font-size:10px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; }
    .eyebrow::before { content:"";width:24px;height:1px;background:var(--accent-2);box-shadow:0 0 10px var(--accent-2); }
    .hero { max-width:820px; margin-bottom:38px; }
    h1 { margin:17px 0 14px; font:600 clamp(38px,6vw,70px)/1.02 "Space Grotesk",sans-serif; letter-spacing:-.055em; }
    h1 span { color:var(--accent); text-shadow:0 0 35px var(--glow); }
    .hero p { max-width:570px; margin:0; color:var(--muted); font-size:15px; line-height:1.8; }
    .hero-actions { display:flex; gap:12px; margin-top:26px; flex-wrap:wrap; }
    .primary,.secondary { display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:13px 18px; border-radius:13px; font-size:12px; font-weight:700; }
    .primary { border:1px solid transparent; color:#08101b; background:linear-gradient(110deg,var(--accent),var(--accent-2)); box-shadow:0 8px 28px var(--glow); }
    .primary:hover { transform:translateY(-2px);filter:brightness(1.08); }
    .secondary { border:1px solid var(--line); background:var(--surface); color:var(--text); }
    .secondary:hover { background:var(--surface-strong); }
    .section-head { display:flex;justify-content:space-between;align-items:end;gap:20px;margin:48px 0 17px; }
    .section-head h2 { margin:0;font:600 21px "Space Grotesk",sans-serif;letter-spacing:-.03em; }
    .section-head p { margin:6px 0 0;color:var(--muted);font-size:11px; }
    .text-link { border:0;background:none;color:var(--accent-2);font-size:11px;font-weight:700; }
    .grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px; }
    .glass-card {
      position:relative; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius);
      background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.018)),var(--surface);
      backdrop-filter:blur(18px); box-shadow:inset 0 1px rgba(255,255,255,.08),0 18px 55px rgba(0,0,0,.13);
      transition:transform .25s,border-color .25s,box-shadow .25s;
    }
    .glass-card:hover { transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 55%,var(--line));box-shadow:0 20px 55px var(--glow); }
    .stat-card { padding:21px; min-height:140px; }
    .card-top { display:flex;justify-content:space-between;align-items:center; }
    .card-icon { width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--line);border-radius:12px;color:var(--accent-2);background:var(--surface-soft); }
    .card-icon svg { width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7; }
    .tiny-tag { padding:5px 8px;border-radius:30px;background:var(--surface-soft);color:var(--muted);font-size:9px; }
    .stat-value { margin:17px 0 4px;font:600 27px "Space Grotesk",sans-serif; }
    .stat-caption { color:var(--muted);font-size:11px; }
    .course-card { padding:17px; }
    .course-art { height:142px;position:relative;overflow:hidden;border-radius:14px;margin-bottom:17px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 65%,#10152c),color-mix(in srgb,var(--accent-2) 42%,#111827)); }
    .course-art::before,.course-art::after { content:"";position:absolute;border:1px solid rgba(255,255,255,.25);border-radius:50%;width:180px;height:180px;right:-28px;top:-72px;box-shadow:0 0 40px rgba(255,255,255,.14),inset 0 0 35px rgba(255,255,255,.1); }
    .course-art::after { width:105px;height:105px;right:36px;top:34px;border-color:rgba(255,255,255,.4); }
    .art-symbol { position:absolute;left:22px;bottom:15px;font:600 36px "Space Grotesk";color:rgba(255,255,255,.88);text-shadow:0 0 24px rgba(255,255,255,.4); }
    .course-meta { display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:10px; }
    .course-card h3 { margin:11px 0 6px;font:600 16px "Space Grotesk"; }
    .course-card p { margin:0;color:var(--muted);font-size:11px;line-height:1.6; }
    .progress { height:5px;margin-top:16px;background:rgba(255,255,255,.09);border-radius:10px;overflow:hidden; }
    .progress span { display:block;height:100%;border-radius:10px;background:linear-gradient(90deg,var(--accent),var(--accent-2));box-shadow:0 0 12px var(--glow); }
    .progress-row { display:flex;justify-content:space-between;margin-top:8px;color:var(--muted);font-size:9px; }
    .bottom-grid { display:grid;grid-template-columns:1.3fr .7fr;gap:16px;margin-top:16px; }
    .activity { padding:21px; }
    .activity-row { display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line); }
    .activity-row:last-child { border-bottom:0;padding-bottom:0; }
    .activity-dot { width:8px;height:8px;border-radius:50%;background:var(--accent-2);box-shadow:0 0 12px var(--accent-2); }
    .activity-copy { flex:1;min-width:0; }
    .activity-copy strong { display:block;font-size:11px;font-weight:600; }
    .activity-copy span { display:block;margin-top:4px;color:var(--muted);font-size:10px; }
    .activity-time { color:var(--muted);font-size:9px;white-space:nowrap; }
    .focus-card { padding:22px;display:flex;flex-direction:column;justify-content:space-between;min-height:240px; }
    .focus-orb { width:90px;height:90px;margin:12px auto;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0%,var(--accent-2) 8%,var(--accent) 35%,transparent 70%);filter:drop-shadow(0 0 26px var(--glow));animation:pulse 4s ease-in-out infinite; }
    @keyframes pulse { 50%{transform:scale(1.08);filter:drop-shadow(0 0 40px var(--glow))} }
    .focus-card h3 { margin:5px 0;text-align:center;font:600 17px "Space Grotesk"; }
    .focus-card p { margin:0;text-align:center;color:var(--muted);font-size:10px;line-height:1.6; }
    footer { padding:24px 0 34px;border-top:1px solid var(--line);color:var(--muted);font-size:10px;display:flex;justify-content:space-between;gap:15px; }
    .toast { position:fixed;z-index:50;bottom:24px;left:50%;transform:translate(-50%,20px);opacity:0;pointer-events:none;padding:12px 17px;border:1px solid var(--line);border-radius:12px;background:var(--surface-strong);box-shadow:var(--shadow);font-size:11px;transition:.25s; }
    .toast.show { opacity:1;transform:translate(-50%,0); }
    @media(max-width:1000px) {
      .navbar { grid-template-columns:1fr auto 1fr; }
      .nav-btn .btn-label { display:none; }
      .nav-btn { width:42px;padding:0; }
      .grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    }
    @media(max-width:680px) {
      .shell { width:min(100% - 28px,1440px); }
      .navbar { top:7px;margin-top:8px;padding:9px;min-height:65px; }
      .nav-side { gap:3px; }
      .nav-btn,.icon-btn { min-height:38px;width:37px;padding:0; }
      .nav-center { gap:6px; }
      .brand-name { font-size:15px;letter-spacing:.16em; }
      .brand-tag { font-size:7px; }
      .star-wrap,.star-wrap svg { width:28px;height:28px; }
    
      main { padding-top:52px; }
      h1 { font-size:43px; }
      .hero p { font-size:13px; }
      .grid { grid-template-columns:1fr; }
      .bottom-grid { grid-template-columns:1fr; }
      .section-head { margin-top:38px; }
      footer { flex-direction:column; }
      .dropdown { min-width:205px; }
    }
    @media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important; } }