:root { color-scheme: dark; }
  html { scroll-behavior: smooth; }
  body { background: #050B14; font-family: "Plus Jakarta Sans", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }

  .bg-grid {
    background-image:
      linear-gradient(rgba(148,184,255,.045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(148,184,255,.045) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
  }
  .glow-blue { background: radial-gradient(closest-side, rgba(56,132,255,.28), transparent); }
  .glow-gold { background: radial-gradient(closest-side, rgba(242,201,76,.16), transparent); }

  .text-accent {
    background: linear-gradient(100deg, #7DD3FC 0%, #38BDF8 35%, #A5B4FC 65%, #F2C94C 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .text-gold {
    background: linear-gradient(180deg, #FBE7A1 0%, #F2C94C 45%, #B7861A 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }

  /* Hairline gradient border used on cards */
  .card {
    position: relative;
    background: linear-gradient(180deg, rgba(18,34,58,.55), rgba(8,17,31,.55));
    border: 1px solid rgba(148,184,255,.09);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .card::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; padding: 1px;
    background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 40%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
  }
  .card-hover { transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s, box-shadow .35s; }
  .card-hover:hover { transform: translateY(-3px); border-color: rgba(125,211,252,.22); box-shadow: 0 24px 60px -30px rgba(56,132,255,.45); }

  .btn-gold {
    background: linear-gradient(180deg, #F7D774, #E3B23C);
    color: #1A1204;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 10px 30px -10px rgba(242,201,76,.55);
    transition: transform .2s, box-shadow .2s, filter .2s;
  }
  .btn-gold:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 14px 36px -10px rgba(242,201,76,.7); }
  .btn-ghost { border: 1px solid rgba(148,184,255,.16); background: rgba(255,255,255,.02); transition: background .2s, border-color .2s; }
  .btn-ghost:hover { background: rgba(255,255,255,.05); border-color: rgba(148,184,255,.3); }

  .eyebrow { letter-spacing: .22em; }
  .logo-glow { filter: drop-shadow(0 0 14px rgba(242,201,76,.25)); }

  /* Quiz accordion */
  .topic[aria-expanded="true"] { border-color: rgba(242,201,76,.45); background: linear-gradient(180deg, rgba(242,201,76,.07), rgba(242,201,76,.015)); }
  .topic[aria-expanded="true"] .topic-letter { background: linear-gradient(180deg, #F7D774, #E3B23C); color: #1A1204; border-color: transparent; }
  .topic[aria-expanded="true"] .topic-chevron { transform: rotate(180deg); color: #F2C94C; }
  .topic-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s cubic-bezier(.2,.7,.2,1); }
  .topic-panel.open { grid-template-rows: 1fr; }
  .topic-panel > div { overflow: hidden; }

  .answer { transition: border-color .2s, background .2s; }
  .answer:hover:not(:disabled) { border-color: rgba(125,211,252,.35); background: rgba(56,189,248,.05); }
  .answer.correct { border-color: rgba(52,211,153,.6); background: rgba(52,211,153,.08); }
  .answer.wrong { border-color: rgba(248,113,113,.55); background: rgba(248,113,113,.07); }

  .tab[aria-selected="true"] { background: rgba(255,255,255,.07); color: #fff; box-shadow: inset 0 0 0 1px rgba(148,184,255,.16); }

  .fade-up { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
  .fade-up.in { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) {
    .fade-up { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
  }
  :focus-visible { outline: 2px solid #F2C94C; outline-offset: 2px; border-radius: 8px; }

  .langbtn{border:0;background:none;color:#94a3b8;font-size:12px;font-weight:700;padding:7px 10px;border-radius:9px;cursor:pointer;transition:all .2s}.langbtn[aria-pressed="true"]{background:rgba(255,255,255,.09);color:#fff}
  .tab{flex:1;white-space:nowrap;border:0;background:none;border-radius:9px;padding:8px 16px;font-size:14px;font-weight:600;color:#94a3b8;cursor:pointer;transition:color .2s}.tab:hover{color:#fff}
  .rchip,.lchip{border:1px solid rgba(148,184,255,.14);background:rgba(255,255,255,.02);color:#94a3b8;border-radius:999px;padding:8px 16px;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s}.lchip{padding:6px 12px;font-size:12px}
  .rchip:hover,.lchip:hover{color:#fff;border-color:rgba(148,184,255,.3)}.rchip[aria-pressed="true"],.lchip[aria-pressed="true"]{background:rgba(242,201,76,.1);border-color:rgba(242,201,76,.45);color:#F7D774}
  .lvl{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:22px;padding:0 7px;border-radius:7px;font-size:11px;font-weight:800;letter-spacing:.04em;border:1px solid}
  .lvl-A1{color:#6ee7b7;border-color:rgba(110,231,183,.3);background:rgba(110,231,183,.08)}.lvl-A2{color:#86efac;border-color:rgba(134,239,172,.3);background:rgba(134,239,172,.08)}
  .lvl-B1{color:#7dd3fc;border-color:rgba(125,211,252,.3);background:rgba(125,211,252,.08)}.lvl-B2{color:#a5b4fc;border-color:rgba(165,180,252,.3);background:rgba(165,180,252,.08)}
  .lvl-C1{color:#f7d774;border-color:rgba(247,215,116,.35);background:rgba(247,215,116,.08)}.lvl-C2{color:#fdba74;border-color:rgba(253,186,116,.35);background:rgba(253,186,116,.08)}
  .res.done{border-color:rgba(110,231,183,.25)}
  dialog#modal{width:min(700px,calc(100% - 28px));max-height:90dvh;overflow:auto;background:linear-gradient(180deg,#0C1829,#08111F);color:#cbd5e1;border:1px solid rgba(148,184,255,.18);border-radius:22px;padding:22px 30px 32px;box-shadow:0 40px 120px -30px rgba(56,132,255,.45)}
  dialog#modal::backdrop{background:rgba(2,6,14,.78);backdrop-filter:blur(6px)}body:has(dialog[open]){overflow:hidden}
  .modal-top{display:flex;align-items:center;justify-content:space-between}.modal-title{font-size:12px;font-weight:600;color:#64748b;letter-spacing:.08em}
  .close-modal{background:none;border:0;color:#94a3b8;font-size:30px;width:44px;height:44px;cursor:pointer;border-radius:12px}.close-modal:hover{color:#fff;background:rgba(255,255,255,.05)}
  #modal-content .tag{font-size:11px;font-weight:700;letter-spacing:.16em;color:#F7D774}
  #modal-content h2{font-size:30px;font-weight:800;letter-spacing:-.03em;color:#fff;margin:10px 0 14px;line-height:1.15}
  #modal-content h3{font-size:17px;font-weight:700;color:#7DD3FC;margin:24px 0 6px}
  #modal-content p{line-height:1.75;font-size:15px;color:#cbd5e1;margin:0 0 10px}#modal-content a{color:#7DD3FC;text-decoration:underline}#modal-content small{color:#94a3b8}
  .keybox{margin-top:26px;padding:16px 18px;border:1px solid rgba(242,201,76,.3);background:rgba(242,201,76,.05);border-radius:16px}.keybox p{margin:6px 0 0}
  .mnav{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
  #modal-content .button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 18px;margin:0;border-radius:12px;font-weight:700;font-size:14px;cursor:pointer;border:1px solid rgba(148,184,255,.2);background:rgba(255,255,255,.04);color:#fff;transition:all .2s;text-align:left}
  #modal-content .button:hover{background:rgba(255,255,255,.09)}#modal-content .button.gold{background:linear-gradient(180deg,#F7D774,#E3B23C);color:#1A1204;border-color:transparent}#modal-content .button.danger{border-color:rgba(248,113,113,.4);color:#fca5a5}
  .qprog{display:flex;gap:6px;margin:16px 0}.qprog i{height:4px;flex:1;border-radius:2px;background:rgba(255,255,255,.08)}.qprog i.done{background:#F2C94C}
  .mans{display:flex;width:100%;align-items:flex-start;gap:12px;text-align:left;margin:10px 0;padding:14px 16px;border:1px solid rgba(148,184,255,.14);background:rgba(255,255,255,.02);border-radius:14px;color:#e2e8f0;font-size:15px;cursor:pointer}
  .mans b{display:flex;width:26px;height:26px;flex-shrink:0;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.12);border-radius:8px;font-size:12px;color:#94a3b8}.mans:disabled{cursor:default}
  .mans.correct{border-color:rgba(52,211,153,.6);background:rgba(52,211,153,.08)}.mans.wrong{border-color:rgba(248,113,113,.55);background:rgba(248,113,113,.07)}
  .feedback{padding:14px 16px;background:rgba(255,255,255,.03);border-left:3px solid #F2C94C;border-radius:0 12px 12px 0;margin:14px 0;font-size:15px;color:#cbd5e1}
  .calculator label,.reglabel{display:block;margin:16px 0;font-size:14px;color:#cbd5e1}
  .calculator input,.reglabel input{display:block;width:100%;margin-top:6px;padding:12px;border:1px solid rgba(148,184,255,.18);border-radius:12px;background:rgba(255,255,255,.03);color:#fff;font-size:15px}
  .calculator input:focus,.reglabel input:focus{outline:none;border-color:rgba(247,215,116,.6)}
  .regcheck{display:flex;gap:10px;align-items:flex-start;margin:10px 0;font-size:13px;color:#94a3b8;line-height:1.5}.regcheck input{margin-top:3px;width:18px;height:18px;accent-color:#F2C94C;flex-shrink:0}
  .calc-result{padding:18px;border:1px solid rgba(242,201,76,.4);background:rgba(242,201,76,.06);border-radius:14px;font-weight:800;font-size:22px;color:#F7D774}.calc-result small{display:block;color:#94a3b8;font-weight:400;font-size:13px;margin-top:4px}
  .pcards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0}.pcards>div{padding:14px;border:1px solid rgba(148,184,255,.12);border-radius:14px;background:rgba(255,255,255,.02)}.pcards small{display:block;color:#94a3b8;font-size:12px}.pcards b{display:block;margin-top:4px;color:#fff;font-size:17px}
  .prow{display:flex;align-items:center;gap:12px;margin:8px 0}.pbar{flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,.07);overflow:hidden}.pbar i{display:block;height:100%;background:linear-gradient(90deg,#38BDF8,#F2C94C)}.pnum{font-size:12px;color:#94a3b8;min-width:78px;text-align:right}
  @media(max-width:560px){.pcards{grid-template-columns:1fr}dialog#modal{padding:18px 18px 26px}}
  .text-accent{background:linear-gradient(100deg,#7DD3FC 0%,#38BDF8 35%,#A5B4FC 65%,#F2C94C 100%);-webkit-background-clip:text;background-clip:text;color:transparent}