@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

    /* ===================== COLOR & THEME (change these to re-skin the site) =====================
       Two themes share the same variable names; the [data-theme="light"] block at the bottom
       overrides them. Every component that uses var(--bg) / var(--text) / etc. switches automatically.
    */
    :root{
      --bg:        #0a0b10;          /* near-black background */
      --bg-soft:   #12141c;          /* slightly lighter panels */
      --glass:     rgba(255,255,255,0.04);
      --glass-line:rgba(255,255,255,0.10);
      --text:      #f3f4f0;          /* main text */
      --muted:     #9aa0b0;          /* secondary text */
      --lime:      #c6f24e;          /* electric lime — primary accent */
      --violet:    #8b6dff;          /* violet — secondary accent */
      --cyan:      #4ee0f2;          /* cyan — tertiary glow */
      --radius:    20px;
      --header-bg: rgba(10,11,16,0.6);
      --overlay:   rgba(5,6,10,.7);
      --shadow-lg: 0 24px 60px -24px rgba(0,0,0,.85);
      --aurora-opacity: 0.55;
      --grain-opacity:  0.04;
      --on-lime:   #0a0b10;
      /* ---- adaptive surface vars (QuizBank, games, etc.) ---- */
      --card-bg:        rgba(28,22,42,.70);
      --card-bg-soft:   rgba(20,16,28,.55);
      --card-border:    rgba(255,255,255,.10);
      --card-border-hi: rgba(255,255,255,.18);
      --input-bg:       rgba(20,16,28,.60);
      --input-bg-focus: rgba(20,16,28,.75);
      --ring-cyan:      rgba(78,224,242,.5);
      --ring-violet:    rgba(124,92,255,.5);
      --ring-lime:      rgba(198,242,78,.5);
      --ring-amber:     rgba(255,170,80,.55);
      --chip-bg:        rgba(255,255,255,.04);
      --chip-bg-hover:  rgba(255,255,255,.08);
      --hairline:       rgba(255,255,255,.06);
    }
    :root[data-theme="light"]{
      --bg:        #eef0f5;          /* cool slate-tinted (Linear/Notion feel) */
      --bg-soft:   #ffffff;
      --glass:     rgba(20,8,13,0.04);
      --glass-line:rgba(20,8,13,0.08);
      --text:      #0f172a;          /* slate-900 */
      --muted:     #64748b;          /* slate-500 */
      --lime:      #65a30d;          /* deeper lime so it reads on light bg */
      --violet:    #6d28d9;
      --cyan:      #0891b2;
      --header-bg: rgba(247,248,252,0.78);
      --overlay:   rgba(150,160,180,0.45);
      --shadow-lg: 0 24px 50px -24px rgba(30,40,80,.22);
      --aurora-opacity: 0.28;
      --grain-opacity:  0.05;
      --on-lime:   #14080d;
      /* ---- adaptive surface vars override for light mode ---- */
      --card-bg:        rgba(255,255,255,.86);
      --card-bg-soft:   rgba(255,255,255,.62);
      --card-border:    rgba(15,23,42,.08);
      --card-border-hi: rgba(15,23,42,.16);
      --input-bg:       rgba(255,255,255,.92);
      --input-bg-focus: #ffffff;
      --ring-cyan:      rgba(8,145,178,.45);
      --ring-violet:    rgba(109,40,217,.40);
      --ring-lime:      rgba(101,163,13,.45);
      --ring-amber:     rgba(217,119,6,.50);
      --chip-bg:        rgba(15,23,42,.04);
      --chip-bg-hover:  rgba(15,23,42,.08);
      --hairline:       rgba(15,23,42,.07);
    }
    /* Subtle multi-colour gradient on the light-mode body — replaces boring flat white */
    :root[data-theme="light"] body{
      background:
        radial-gradient(ellipse 80% 60% at 50% -20%, rgba(139,109,255,0.10), transparent 60%),
        radial-gradient(ellipse 60% 60% at 0% 100%, rgba(78,224,242,0.10), transparent 60%),
        radial-gradient(ellipse 50% 50% at 100% 50%, rgba(198,242,78,0.08), transparent 60%),
        var(--bg);
      background-attachment:fixed;
    }
    /* tile / card bg in light mode — slight off-white so they're not invisible */
    :root[data-theme="light"] .tile,
    :root[data-theme="light"] .test,
    :root[data-theme="light"] .topic,
    :root[data-theme="light"] .checker{
      background:rgba(255,255,255,0.65);
      backdrop-filter:blur(6px);
    }
    :root[data-theme="light"] .tile:hover,
    :root[data-theme="light"] .test:hover,
    :root[data-theme="light"] .topic:hover{
      background:rgba(255,255,255,0.85);
    }
    /* hero gradient text is hard to read on light bg — saturate it */
    :root[data-theme="light"] h1 .grad{
      background:linear-gradient(120deg, #65a30d, #0891b2, #6d28d9);
      -webkit-background-clip:text; background-clip:text;
    }
    /* trust strip + secondary text: a touch darker for readability */
    :root[data-theme="light"] .trust,
    :root[data-theme="light"] .hero p.lead,
    :root[data-theme="light"] .sub{ color:#475569; }

    *{ margin:0; padding:0; box-sizing:border-box; }
    html{ scroll-behavior:smooth; }
    body{
      background:var(--bg);
      color:var(--text);
      font-family:'Hanken Grotesk', 'Native Emoji', sans-serif;
      line-height:1.6;
      /* `overflow-x:hidden` here turned <body> into a scroll container, which
         silently killed `position:sticky` on the site header (it stuck to a
         scrollport that never scrolls, so it just scrolled away — on every
         page, at every width). `clip` contains the same horizontal overflow
         WITHOUT creating a scroll container, so sticky works again. The
         `hidden` line above it is the fallback for pre-2022 browsers that
         don't understand `clip`. */
      overflow-x:hidden;
      overflow-x:clip;
      position:relative;
    }

    /* ---- Animated aurora background (the drifting glow behind everything) ---- */
    .aurora{ position:fixed; inset:0; z-index:-2; overflow:hidden; contain:strict; }
    /* PERF: these used to be SOLID circles softened by `filter:blur(90px)`, animated
       forever. A 90px blur is a huge convolution over a 520px box, re-run every
       frame of the drift — on a desktop-width viewport that alone can starve the
       main thread and hang the tab. A radial-gradient is soft by construction and
       costs the GPU almost nothing, so the glow now comes from the gradient and the
       blur is only a light smoothing pass. Same look, a fraction of the paint. */
    .aurora span{
      position:absolute; border-radius:50%; filter:blur(24px); opacity:var(--aurora-opacity);
      animation:drift 22s ease-in-out infinite;
      will-change:transform;
    }
    .aurora .a1{ width:min(520px, 74vw); height:min(520px, 74vw); background:radial-gradient(circle, var(--violet) 0%, transparent 70%); top:-120px; left:-80px; }
    .aurora .a2{ width:min(460px, 68vw); height:min(460px, 68vw); background:radial-gradient(circle, var(--lime) 0%, transparent 70%);  top:200px;  right:-120px; animation-delay:-7s; }
    .aurora .a3{ width:min(420px, 66vw); height:min(420px, 66vw); background:radial-gradient(circle, var(--cyan) 0%, transparent 70%);  bottom:-160px; left:30%; animation-delay:-13s; }
    /* On a phone these fixed-px blobs used to cover 81% of the width, dropping
       hero body copy to ~1.5:1 against the glow. Scaled above; also dimmed here
       so the remaining wash can't swallow text on small screens. */
    @media (max-width:640px){ :root{ --aurora-opacity: 0.3; } :root[data-theme="light"]{ --aurora-opacity: 0.18; } }
    @keyframes drift{
      0%,100%{ transform:translate(0,0) scale(1); }
      33%    { transform:translate(60px,40px) scale(1.1); }
      66%    { transform:translate(-40px,30px) scale(0.95); }
    }
    /* subtle grain texture layer for depth */
    body::after{
      content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:var(--grain-opacity);
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    }

    .wrap{ max-width:1180px; margin:0 auto; padding:0 26px; }