/* ================= "Bright" theme =================
   Clean white pages, bold Plus Jakarta Sans headlines, indigo accent and navy pill buttons.
   Loaded on top of theme-glass.css (same layout). Turn on with "theme": "bright" in content/site.json. */
:root.glass.bright,:root.glass.bright[data-theme="dark"]{
  --bg:#eceef6; --bg2:#e3e6f1; --surface:#ffffff; --surface2:#f4f5fa; --solid:#fff;
  --ink:#0d0f2c; --ink2:#2b2e4a; --muted:#6b6f88; --line:#e8e9f3;
  --brand:#4f46e5; --navy:#0d0f2c; --amber:#ff8a3d; --amber-ink:#2a1200; --good:#1f9d6b; --bad:#e5484d;
  --violet:#0d0f2c; --pink:#4f46e5; --orange:#ff8a3d; --mint:#1f9d6b; --blue:#3b6cf6;
  --glass-b:rgba(0,0,0,.07); --btn:#0f1035; --btn-ink:#fff; --pop:#fff; --accent:#4f46e5;
  --shadow:0 16px 40px -26px rgba(0,0,0,.28); --shadow-lg:0 30px 70px -32px rgba(0,0,0,.38);
  --display:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif; --body:"Inter","Segoe UI",system-ui,sans-serif; --serif:"Instrument Serif",Georgia,serif;
  color-scheme:light;
}
.bright footer{border-top:0;color:var(--muted)}
.bright h1,.bright h2,.bright h3,.bright h4{font-family:var(--display);letter-spacing:-.025em}
.bright .eyebrow{color:var(--brand)}
html.bright,html.bright body{background:#eceef6}
.bright .blobs{display:none}
.bright h1{font-weight:800}

/* surfaces: solid white, no frosted glass */
.bright :is(.ccard,.row,.lcard,.mcard,.stat,.lockcard,.pcard,.pbox,.dcourse,.dkpis div,.pstats div,.jcard,.qzl-card,.qzr-stats div,.dtile){background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;border:1px solid var(--line);box-shadow:var(--shadow)}
.bright .ccard:hover,.bright .row:hover,.bright a.jcard:hover{border-color:rgba(0,0,0,.14);box-shadow:var(--shadow-lg)}
.bright .chip,.bright .tb,.bright .pchip{background:var(--surface2);border-color:var(--line);color:var(--ink2)}

/* buttons: navy pills, indigo for the main action */
.bright .btn{background:#0f1035;color:#fff;border-radius:999px;font:600 14.5px/1 var(--body);letter-spacing:0;box-shadow:0 12px 24px -14px rgba(0,0,0,.6)}
.bright .btn:hover{transform:translateY(-2px);box-shadow:0 16px 30px -14px rgba(0,0,0,.6)}
.bright .btn.coral,.bright .bt-hero .btn.primary{background:var(--brand);color:#fff;box-shadow:0 16px 30px -12px rgba(79,70,229,.55)}
.bright .btn.coral:hover{box-shadow:0 20px 36px -12px rgba(79,70,229,.65)}
.bright .btn.ghost,.bright .btn.ghost:hover{background:#fff!important;color:#0d0f2c!important;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.bright .linkbtn,.bright a.linkbtn{color:var(--brand)}

/* header: wordmark left, plain links right */
.bright .brandmark i{display:none}
.bright .brandmark .bm-logo{width:34px;height:34px;border-radius:10px;object-fit:cover}
.bright .brandmark{display:inline-flex;align-items:center;gap:9px;font:800 21px/1 var(--display);letter-spacing:-.03em;color:#0d0f2c;text-decoration:none}
.bright .brandmark i{color:var(--brand);font-style:normal}
.bright .top:not(.stu) .wrap{left:30px;right:30px;width:auto;max-width:none;justify-content:flex-start;gap:6px;background:transparent!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;padding:0}
.bright .top:not(.stu) .mainnav{position:absolute;left:50%;transform:translateX(-50%)}
.bright .signpill{display:inline-flex;align-items:center;gap:8px;margin-left:auto;height:44px;padding:0 20px;border-radius:999px;background:#0f1035;color:#fff;text-decoration:none;font:600 14.5px/1 var(--body);box-shadow:0 12px 24px -12px rgba(15,16,53,.7);transition:transform .2s}
.bright .signpill:hover{transform:translateY(-2px)}
.bright .signpill .ico,.bright .signpill svg{width:16px;height:16px}
.bright .top .mainnav .navlink,.bright .top.over-dark .mainnav .navlink:not(.on){height:40px;padding:0 14px;border-radius:999px;color:#0d0f2c;font:500 14.5px/1 var(--body);background:none}
.bright .top .mainnav .navlink .ico,.bright .top .mainnav .navlink svg{display:none}
.bright .top .mainnav .navlink.on,.bright .top.over-dark .mainnav .navlink.on{background:none;color:var(--brand);font-weight:700}
.bright .top .mainnav .navlink:not(.on):hover{background:rgba(0,0,0,.05)}
.bright header.top.scrolled:not(.stu) .wrap{top:10px;left:18px;right:18px;padding:0 6px 0 16px;height:60px;border-radius:999px;background:rgba(255,255,255,.9)!important;-webkit-backdrop-filter:blur(14px)!important;backdrop-filter:blur(14px)!important;box-shadow:0 14px 30px -22px rgba(0,0,0,.4)!important}
/* signed in: wordmark | dark tab pill | dark reg-no pill */
.bright .top.stu .wrap,.bright .top.stu.scrolled .wrap{left:28px;right:28px}
.bright .top.stu .brandmark{grid-column:1;justify-self:start}
.bright .top.stu .stutabs{background:#fff;border:1px solid #e8e9f3;box-shadow:0 18px 36px -22px rgba(15,16,53,.35)}
.bright .top.stu .stutabs a{color:#2b2e4a;font:600 14px/1 var(--body)}
.bright .top.stu .stutabs a:hover{background:#f1f0ff;color:var(--brand)}
.bright .top.stu .stutabs a.on{background:var(--brand);color:#fff;box-shadow:0 8px 18px -8px rgba(79,70,229,.65)}
.bright .top.stu .ubtn{background:#0f1035;border:0;box-shadow:0 18px 36px -20px rgba(0,0,0,.7)}
.bright .top.stu .ubtn .av{background:var(--brand);color:#fff}
@media (max-width:1180px){.bright .top.stu .brandmark{display:none}}
@media (max-width:1500px){.bright .top.stu .brandmark{font-size:0;gap:0}}

/* bands (course and lecture headers): light card, grey animated field */
.bright .band{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.bright .band::after{background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.88) 42%,rgba(255,255,255,.2) 85%)}
.bright .band canvas{opacity:.35;filter:grayscale(1)}
.bright .band h1{color:#0d0f2c;font-weight:600;letter-spacing:-.04em}
.bright .band .cb-sub,.bright .band .crumbs,.bright .band .crumbs a,.bright .band p.desc{color:var(--muted)}
.bright .band .chip{background:var(--surface2);border-color:var(--line);color:var(--ink2)}
.bright .band .btn{background:var(--brand);color:#fff!important;box-shadow:0 14px 26px -12px rgba(79,70,229,.55)}
.bright .band .btn.ghost{background:#fff!important;color:#0d0f2c!important;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.bright .band .outline-btn{background:#0f1035;color:#fff!important}
.bright .band .ctabs a{color:var(--ink2)}.bright .band .ctabs a.on{background:#0f1035;color:#fff}
.bright .band .ring{background:conic-gradient(var(--brand) calc(var(--p)*1%),#ecebfb 0)}
.bright .band .lnum,.bright .band .eyebrow{color:var(--brand)}

/* tabs, chips and small accents */
.bright .subtabs button.on,.bright .ab-tabs button.on{background:#0f1035;color:#fff}
.bright .dcourses a{background:#fff}
.bright .dcourses a.on{border-color:#0d0f2c;box-shadow:0 0 0 3px rgba(0,0,0,.07)}
.bright .jtag.next{background:var(--brand)}
.bright .qz-badge{background:var(--brand)}
.bright .qz-nav button.on{background:#0f1035;border-color:#0f1035}
.bright .qz-opt.on{border-color:var(--brand);background:#f1f0ff}.bright .qz-opt.on i{background:var(--brand);border-color:var(--brand)}
.bright .qz-score b,.bright .qz-bar i{background:linear-gradient(90deg,#4f46e5,#8b7cff);-webkit-background-clip:text;background-clip:text}
.bright .qz-bar i{-webkit-background-clip:border-box;background-clip:border-box}
.bright .switch.on{background:#0f1035}

/* student / teacher pages keep the studio colours */
html.glass.bright.stu:not([data-theme="dark"]),html.glass.bright.stu{--bg:#eceef6}
/* sign-in screen */
.bright .auth{background:#fbfbff;min-height:calc(100vh - 24px)}
.bright .auth .aurora,.bright .auth .authspot{display:none}
.bright .auth canvas{opacity:.35;filter:grayscale(1)}
.bright .authgrid{background-image:linear-gradient(rgba(0,0,0,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.06) 1px,transparent 1px)}
.bright .authcard{background:#fff;border:1px solid var(--line);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 40px 80px -40px rgba(0,0,0,.35)}
.bright .seg i{background:#0f1035;border-radius:999px}.bright .seg{border-radius:999px}
.bright .authcard .btn{background:var(--brand)}
.bright .auth :is(.codefloat,.fl,.float) {color:#9a9db5}

/* ============ home: centred headline with floating goal cards ============ */
.bright body.is-home #view{padding-top:0}
.bright #view>.bt-hero:first-child{margin-top:0!important}
.bt-hero{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:120px 20px 150px;overflow:hidden;background:radial-gradient(60% 50% at 50% 35%,rgba(79,70,229,.08),transparent 70%)}
.bt-proof{display:inline-flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;border-radius:999px;background:#fff;border:1px solid #e8e9f3;box-shadow:0 10px 24px -18px rgba(15,16,53,.4);font:600 14px var(--body);color:#2b2e4a}
.bt-av{display:flex}.bt-av i{width:30px;height:30px;border-radius:50%;border:2px solid #fff;margin-left:-8px;display:grid;place-items:center;color:#fff}
.bt-av i:first-child{margin-left:0}
.bt-av i svg{width:16px;height:16px}
.bt-proof b{color:var(--brand)}
.bt-h{margin:20px 0 0;font:800 clamp(40px,6.4vw,84px)/1.05 var(--display);letter-spacing:-.035em;color:#0d0f2c;max-width:15ch}
.bt-h em{font-style:normal;color:var(--brand);position:relative;white-space:nowrap}
.bt-h em::after{content:"";position:absolute;left:2%;right:2%;bottom:-.06em;height:.12em;border-radius:99px;background:linear-gradient(90deg,#4f46e5,#8b7cff);transform-origin:left;animation:btLine 1s .9s var(--ease) both}
@keyframes btLine{from{transform:scaleX(0)}}
.bt-sub{max-width:44ch;margin:20px auto 0;font:400 clamp(16px,1.4vw,19px)/1.6 var(--body);color:#6b6f88}
.bt-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:30px}
.bt-cta .btn{height:52px;padding:0 26px;font-size:15.5px}
.bt-cta .btn.out{background:#fff!important;color:#0d0f2c!important;box-shadow:inset 0 0 0 1.5px #e3e4ef}
.bt-cta .btn .ico,.bt-cta .btn svg{width:18px;height:18px}
.bt-tiles{position:absolute;inset:0;pointer-events:none}
.bt-tile{--x:0px;--y:0px;position:absolute;width:clamp(110px,11vw,160px);aspect-ratio:4/5;border-radius:20px;padding:8px;background:#fff;box-shadow:0 26px 50px -24px rgba(15,16,53,.45);transform:translate(var(--x),var(--y)) rotate(var(--r));transition:transform .4s var(--ease);animation:btIn .9s var(--d) var(--ease) both}
.bt-tile .bt-in{height:100%;border-radius:14px;display:grid;place-items:center;align-content:center;gap:10px;background:linear-gradient(150deg,color-mix(in srgb,var(--g) 85%,#fff),var(--g));color:#fff;overflow:hidden;position:relative;animation:btFloat 6s var(--d) ease-in-out infinite}
.bt-tile .bt-in::after{content:"";position:absolute;inset:-40% -40% auto auto;width:90%;height:90%;border-radius:50%;background:rgba(255,255,255,.18)}
.bt-tile svg{width:58%;height:auto;overflow:visible}
.bt-tile svg .sd-ico{fill:#fff;stroke:#fff}.bt-tile svg .sd-icof{fill:var(--g)}
.bt-tile span{font:700 12px var(--body);letter-spacing:.02em;padding:4px 10px;border-radius:99px;background:rgba(255,255,255,.22)}
.bt-tile.t1{left:9%;top:24%;--r:-6deg;--d:.2s}.bt-tile.t2{left:14%;top:58%;--r:5deg;--d:.35s}.bt-tile.t3{right:10%;top:18%;--r:6deg;--d:.5s}.bt-tile.t4{right:12%;top:52%;--r:-4deg;--d:.65s}
@keyframes btIn{from{opacity:0;transform:translateY(40px) rotate(0deg) scale(.85)}}
@keyframes btFloat{50%{transform:translateY(-10px)}}
.bt-marquee{position:absolute;left:0;right:0;bottom:22px;overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.bt-marquee div{display:flex;width:max-content;animation:btMar 40s linear infinite}
.bt-marquee span{font:800 clamp(60px,9vw,130px)/1 var(--display);letter-spacing:-.03em;color:#eef0f7;white-space:nowrap;padding-right:60px}
@keyframes btMar{to{transform:translateX(-50%)}}
@media (max-width:900px){.bt-tile{width:84px}.bt-tile span{display:none}.bt-tile.t1{left:3%;top:13%}.bt-tile.t2{left:4%;top:auto;bottom:16%}.bt-tile.t3{right:3%;top:12%}.bt-tile.t4{right:4%;top:auto;bottom:18%}.bt-hero{padding-top:150px}}
@media (prefers-reduced-motion:reduce){.bt-marquee div,.bt-tile .bt-in{animation:none}}

@media (max-width:700px){
  .bright .top:not(.stu) .mainnav{position:static;transform:none;margin-left:auto}
  .bright .top:not(.stu) .brandmark{font-size:0;gap:0}
  .bright .signpill{margin-left:6px;height:40px;padding:0 14px}
  .bt-tile{width:64px;border-radius:14px;padding:5px}.bt-tile .bt-in{border-radius:10px}
  .bt-tile.t1{left:4%;top:20%}.bt-tile.t3{right:4%;top:20%}.bt-tile.t2{left:5%;bottom:9%}.bt-tile.t4{right:5%;bottom:9%}
}
/* frosted-glass navbar */
.bright .top.stu .stutabs{background:rgba(255,255,255,.52)!important;-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);border:1px solid rgba(255,255,255,.8)!important;box-shadow:0 18px 40px -22px rgba(15,16,53,.35),inset 0 1px 0 rgba(255,255,255,.95)!important}
.bright .top.stu .ubtn{background:rgba(15,16,53,.72)!important;-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);border:1px solid rgba(255,255,255,.28)!important}
.bright header.top.scrolled:not(.stu) .wrap{background:rgba(255,255,255,.55)!important;-webkit-backdrop-filter:blur(20px) saturate(180%)!important;backdrop-filter:blur(20px) saturate(180%)!important;border:1px solid rgba(255,255,255,.8)!important}
/* home page: the dark animated hero, full screen, no navbar */
.bright body.is-home{background:#1d1745}
.bright body.is-home header.top{display:none}
.bright body.is-home #view{padding-top:0}
.bright .pw-hero{width:100%!important;margin:0!important;border-radius:0!important;min-height:100vh!important;box-shadow:none!important}
.bright .pw-hero .wrap{padding-top:90px}
.bright body.is-home footer{background:#1d1745;color:#b9b3e0}
.bright body.is-home footer a{color:#fff}
.bright .pw-hero .btn.ghost{color:#fff!important}
/* courses page: no menu links in the header, just the cards */
.bright .top:not(.stu) .mainnav{display:none}
.bright #view>.cpage:first-child{margin-top:0!important;padding-top:104px}
/* phones: page content scrolls under the tab bar, so make it solid enough that the labels stay readable */
@media (max-width:640px){.bright .top.stu .stutabs{background:rgba(255,255,255,.9)!important}.bright .top.stu .stutabs a:not(.on){color:#0d0f2c}}