/* Pragyan shared tokens and components.
   Layout idea: cool paper page, steel-navy ink, brass for earned things; one bold object per page. */
:root{
  --paper:#F5F6F3;
  --surface:#FFFFFF;
  --ink:#14202A;
  --ink-2:#4A5862;
  --ink-3:#8A969C;
  --line:#E0E4E0;
  --steel:#2F5A76;
  --steel-soft:#E7EEF2;
  --brass:#A7834B;
  --brass-soft:#F1EADD;
  --brass-glow:#E6CFA5;
  --night:#0F1A22;
  --good:#3F7A5A; --good-soft:#EEF6F1;
  --bad:#A2452B; --bad-soft:#FBF0EC;
  --display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --body:"Instrument Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --deva:"Tiro Devanagari Hindi","Noto Serif Devanagari",serif;
  --radius-lg:28px;--radius:20px;--radius-sm:12px;
  --gutter:clamp(18px,5vw,64px);
  --max:1240px;
  --ease:cubic-bezier(.2,.7,.1,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
section[id],[id^="course-"],[id^="notes-"]{scroll-margin-top:88px}
html{overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:6px}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;letter-spacing:-.025em;line-height:1.05;margin:0;text-wrap:balance}
p{margin:0}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.lede{font-size:clamp(17px,1.5vw,19px);color:var(--ink-2);max-width:58ch}
.muted{color:var(--ink-2)}
.ico{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.num{font-variant-numeric:tabular-nums}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:50px;padding:0 24px;border-radius:999px;border:1px solid transparent;font-weight:600;font-size:16px;text-decoration:none;cursor:pointer;transition:transform .4s var(--ease),background .3s,box-shadow .4s var(--ease),opacity .3s;white-space:nowrap;background:none}
.btn:disabled{opacity:.55;cursor:default}
.btn-ink{background:var(--ink);color:#fff;box-shadow:0 10px 30px -12px rgba(20,32,42,.55)}
.btn-ink:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 18px 40px -14px rgba(20,32,42,.6)}
.btn-line{border-color:#C9CFCB}
.btn-line:hover{background:var(--surface)}
.btn-brass{background:var(--brass);color:#fff}
.btn-brass:hover{transform:translateY(-2px)}
.btn-sm{height:40px;padding:0 16px;font-size:14.5px}
.btn-ghost{color:var(--ink-2);padding:0 12px}
.btn-ghost:hover{color:var(--ink);background:rgba(20,32,42,.05)}

/* Nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;transition:background .4s,box-shadow .4s}
.nav.solid{background:rgba(245,246,243,.76);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);box-shadow:0 1px 0 var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:72px;gap:20px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand-mark{width:38px;height:38px;border-radius:11px;background:var(--ink);display:grid;place-items:center;flex:none}
.brand-name{font-family:var(--display);font-weight:600;font-size:21px;letter-spacing:-.02em;line-height:1;display:block}
.brand-sub{font-family:var(--deva);font-size:13px;color:var(--ink-2);line-height:1;margin-top:3px;display:block}
.nav-links{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.nav-links a{display:block;padding:9px 15px;border-radius:999px;text-decoration:none;font-size:15px;font-weight:500;color:var(--ink-2);transition:color .2s,background .2s}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--ink);background:rgba(20,32,42,.05)}
.nav-cta{display:flex;align-items:center;gap:8px}
.menu-btn{display:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--surface);cursor:pointer;place-items:center}
.avatar{text-decoration:none;width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--brass-glow);display:grid;place-items:center;font-weight:600;font-size:15px;border:0;cursor:pointer;flex:none}
@media (max-width:900px){
  .nav-links{position:fixed;inset:72px 12px auto 12px;flex-direction:column;background:var(--surface);border-radius:20px;padding:10px;box-shadow:0 30px 60px -20px rgba(20,32,42,.3);transform:translateY(-12px);opacity:0;pointer-events:none;transition:.35s var(--ease)}
  .nav-links a{padding:14px 16px;font-size:17px}
  .nav.open .nav-links{opacity:1;transform:none;pointer-events:auto}
  .menu-btn{display:grid}
  .nav-cta .hide-m{display:none}
}

/* Forms */
.fld{display:grid;gap:7px;margin-bottom:16px}
.fld label{font-size:14px;font-weight:600}
.fld small{color:var(--ink-2);font-size:13px}
.fld input,.fld textarea,.fld select{width:100%;padding:12px 14px;border-radius:12px;border:1px solid #D3D9D6;background:#fff;font-size:15.5px;transition:border-color .2s,box-shadow .2s}
.fld textarea{min-height:96px;resize:vertical;line-height:1.5}
.fld textarea.code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13.5px;min-height:420px}
.fld input:focus,.fld textarea:focus,.fld select:focus{outline:none;border-color:var(--brass);box-shadow:0 0 0 4px rgba(167,131,75,.15)}
.err{color:var(--bad);font-size:14.5px;min-height:22px}

/* Cards */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg)}

/* Toast */
.toasts{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:200;display:grid;gap:8px;pointer-events:none}
.toast{background:var(--ink);color:#fff;padding:12px 20px;border-radius:999px;font-size:15px;font-weight:500;box-shadow:0 20px 40px -16px rgba(0,0,0,.4);animation:toastIn .5s var(--spring) both;display:flex;align-items:center;gap:10px}
.toast .ico{width:18px;height:18px;color:var(--brass-glow)}
@keyframes toastIn{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}

/* Celebration */
.celebrate{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:20px;background:rgba(15,26,34,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:fadeIn .4s both}
.celebrate canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.cel-card{position:relative;background:var(--surface);border-radius:32px;padding:44px 40px 34px;max-width:420px;width:100%;text-align:center;display:grid;gap:14px;justify-items:center;animation:pop .7s var(--spring) both;box-shadow:0 40px 100px -30px rgba(0,0,0,.5)}
.cel-badge{width:112px;height:112px;margin-bottom:6px}
.cel-card h3{font-size:30px}
.cel-card p{color:var(--ink-2)}
.cel-kicker{font-size:14.5px;font-weight:600;color:var(--brass)}
@keyframes pop{from{opacity:0;transform:scale(.8) translateY(20px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* Badge medallion */
.medal .ring-o{fill:var(--brass-soft);stroke:var(--brass);stroke-width:2}
.medal .ring-i{fill:#fff;stroke:var(--brass-glow);stroke-width:1.5}
.medal.locked .ring-o{fill:#EEF0EE;stroke:#CBD2D0}
.medal.locked .ring-i{stroke:#DDE2E0}
.medal .g{color:var(--brass)}
.medal.locked .g{color:#A9B3B6}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}