:root{--ink:#242c3f;--muted:#70798b;--purple:#635dd4;--line:#e5e8ef;--paper:#f7f8fc}*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--paper);font-size:14px;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button,a,input,select,textarea{outline-offset:4px}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #7367da}button{cursor:pointer}[hidden]{display:none!important}h1,h2,h3,p{margin-top:0}.demo-shell{display:grid;grid-template-columns:220px minmax(0,1fr);min-height:100vh}.sidebar{padding:32px 22px;background:white;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:0}.eduhub-brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-1px;font-size:29px;color:#2b3248}.eduhub-brand>span{color:var(--purple);font-size:39px;line-height:1;position:relative;display:block;width:29px}.eduhub-brand>span>span{font-size:10px;position:absolute;top:0;right:-1px;color:#b7cb91}.nav-label{font-size:8px;letter-spacing:1.5px;color:#9aa1b1;margin:49px 0 18px 10px}.sidebar nav{display:flex;flex-direction:column;gap:8px}.sidebar nav>a{display:flex;align-items:center;gap:12px;font-size:12px;padding:13px 12px;border-radius:9px;color:#778094}.sidebar nav>a>span{font-size:19px;line-height:1}.sidebar nav>a.selected{background:#eeecfb;color:#6658d0;font-weight:600}.sidebar nav>a:hover{background:#f5f4fc}.sidebar-note{background:#f2f5e9;border:1px solid #e6ebdb;border-radius:13px;padding:21px 17px;margin-top:auto}.sidebar-note>div{font-size:40px;color:#75895c;margin-bottom:12px;line-height:1}.sidebar-note h3{font-size:19px;line-height:1.25;letter-spacing:-.5px;font-weight:500;margin-bottom:9px}.sidebar-note p{font-size:10px;color:#829173;line-height:1.7}.sidebar-note a{font-size:10px;color:#50643b;display:block;margin-top:22px}.portfolio-back{font-size:10px;color:#8a93a5;margin:25px 0 0}.concept-label{font-size:7px;line-height:1.9;letter-spacing:.6px;color:#9aa2b2;margin:16px 0 0}.main-shell{min-width:0}.topbar{height:77px;padding:0 36px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px;background:#fff}.breadcrumbs{font-size:11px;color:#9aa1b0;display:flex;gap:9px;align-items:center}.breadcrumbs strong{font-weight:500;color:#505b71}.top-right{display:flex;align-items:center;gap:25px}.concept-badge{font-size:7px;letter-spacing:1px;border:1px solid #dde1ea;color:#929caf;padding:7px 9px;border-radius:5px;white-space:nowrap}.learning-link{font-size:11px;color:#6b60c6;display:flex;gap:20px}.demo-main{padding:29px 36px 35px;max-width:1500px;margin:auto}.discovery-hero{background:#edeefa;min-height:205px;border-radius:16px;padding:27px 34px;display:flex;justify-content:space-between;align-items:center;gap:20px;position:relative;overflow:hidden}.overline{font-size:8px;letter-spacing:1.5px;font-weight:600;color:#827da6;margin-bottom:15px}.discovery-hero h1{font-size:42px;line-height:1.04;font-weight:500;letter-spacing:-1.7px;margin-bottom:13px}.discovery-hero h1 span{color:#6c61be}.discovery-hero p:not(.overline){font-size:11px;line-height:1.7;color:#8b88a3;margin-bottom:0}.hero-shapes{height:164px;width:245px;position:relative;margin-right:20px;flex-shrink:0}.shape-check{position:absolute;width:86px;height:86px;top:0;left:9px;border-radius:18px;transform:rotate(-12deg);background:#d3ccef;color:#7864a7;font-size:67px;text-align:center;line-height:1.25;box-shadow:3px 6px 0 #b9afda42}.shape-arch{position:absolute;width:95px;height:120px;right:30px;top:0;border-radius:70px 70px 0 0;background:#cbd6bc;transform:rotate(12deg);border:12px solid #dfe5d3}.shape-circle{position:absolute;width:86px;height:86px;bottom:6px;left:86px;border-radius:50%;background:#ede4d7;color:#b1a38f;font-size:76px;line-height:1.15;text-align:center}.shape-caption{position:absolute;bottom:-3px;right:-4px;font-size:6px;letter-spacing:1.6px;color:#8c8d9e}.catalogue-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:26px 0 17px}.catalogue-heading h2{font-size:21px;letter-spacing:-.6px;font-weight:500;margin:0}.catalogue-heading p,.catalogue-heading>span{font-size:10px;color:#9299a8;margin:0}.search-row{display:flex;gap:12px}.search-field{background:white;border:1px solid #e0e4ed;border-radius:8px;display:flex;align-items:center;gap:13px;flex:1;padding:0 15px;min-width:0}.search-field>span:first-child{font-size:24px;color:#8d95a7}.search-field input{border:0;min-width:0;width:100%;padding:12px 0;background:none;font-size:11px;color:var(--ink)}input::placeholder{color:#a2a9b8}.level-field select{border:1px solid #e0e4ed;border-radius:8px;padding:12px 35px 12px 15px;background:white;color:#778198;font-size:11px}.subject-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:15px 0 20px}.subject-tabs button{border:1px solid transparent;background:none;border-radius:20px;padding:8px 14px;font-size:10px;color:#929bad}.subject-tabs button[aria-pressed=true]{background:#665dd5;color:white}.subject-tabs button:hover:not([aria-pressed=true]){background:#eae7f8;color:#6c5ebe}.course-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.course-card{border:1px solid #e1e5ee;border-radius:12px;background:white;overflow:hidden;min-width:0}.course-cover{height:133px;position:relative;overflow:hidden}.cover-label,.cover-index{position:absolute;left:17px;right:17px;font-size:6px;letter-spacing:1.1px;color:#665e86;z-index:1}.cover-label{top:15px}.cover-index{bottom:13px;font-size:5px}.save-course{position:absolute;right:12px;top:11px;width:26px;height:26px;border:1px solid #fff6;background:#ffffff9c;border-radius:50%;font-size:15px;line-height:1;color:#7d7399;z-index:2}.save-course[aria-pressed=true]{color:#6454c0;background:#fff}.cover-ux{background:#e7e3f4}.ux-visual{position:absolute;left:50%;top:50%;width:130px;height:76px;transform:translate(-50%,-41%);display:flex;gap:8px;align-items:end}.ux-visual span{width:38px;height:70px;border-radius:50px 50px 0 0;background:#bcb0da}.ux-visual span:nth-child(2){background:#9183bd;height:48px}.ux-visual span:nth-child(3){background:#d0c6e7;height:88px}.cover-research{background:#e8eedf}.research-visual{display:flex;position:absolute;gap:0;inset:27px 0;align-items:center;justify-content:center}.research-visual i{font-style:normal;display:block;background:#c3d0ae;border-radius:17px 17px 17px 0;color:#82956b;width:65px;height:62px;font-size:45px;text-align:center;padding-top:5px;transform:rotate(-10deg)}.research-visual i:last-child{background:#d4dfc4;transform:rotate(10deg);margin-left:-10px;margin-top:15px}.cover-systems{background:#e9ecf7}.systems-visual{display:grid;grid-template-columns:1fr 1fr;gap:7px;position:absolute;width:84px;height:84px;left:50%;top:53%;transform:translate(-50%,-50%) rotate(-9deg)}.systems-visual i{background:#aebcda;border-radius:7px}.systems-visual i:nth-child(2){border-radius:50%;background:#c9d3e9}.systems-visual i:nth-child(3){background:#c9d3e9;border-radius:50% 0 0 0}.systems-visual i:last-child{background:#91a3ca}.cover-data{background:#f2e8d9}.cover-data .cover-label,.cover-data .cover-index{color:#95826b}.data-visual{position:absolute;inset:34px 0 25px;display:flex;gap:10px;justify-content:center;align-items:end}.data-visual i{width:25px;background:#cfb99a;border-radius:5px 5px 0 0;height:25px}.data-visual i:nth-child(2){height:48px;background:#dcc8ad}.data-visual i:nth-child(3){height:37px}.data-visual i:nth-child(4){height:65px;background:#b49a79}.cover-frontend{background:#dfeceb}.code-visual{font-size:70px;font-weight:500;letter-spacing:-12px;position:absolute;left:50%;top:49%;transform:translate(-50%,-50%);color:#8bb3ad}.cover-frontend .cover-label,.cover-frontend .cover-index{color:#6d8b86}.cover-access{background:#e9e5e2}.access-visual{position:absolute;width:120px;height:90px;left:50%;top:52%;transform:translate(-50%,-50%)}.access-visual i{position:absolute;width:78px;height:78px;background:#c7b9b0;border-radius:50%;left:0;top:5px}.access-visual>span{position:absolute;right:0;bottom:0;background:#d9cec6;width:67px;height:67px;text-align:center;font-size:55px;border-radius:15px;color:#a39387}.course-card-body{padding:16px 17px}.course-meta{font-size:7px;font-weight:600;letter-spacing:.5px;color:#9995b3;margin-bottom:10px}.course-meta span{margin:0 7px}.course-card h3{font-size:16px;font-weight:500;letter-spacing:-.4px;margin-bottom:8px}.course-card-body>a>p{font-size:10px;line-height:1.6;color:#9aa1b0;min-height:30px;margin-bottom:14px}.course-card-body>a:hover h3{color:var(--purple)}.course-bottom{border-top:1px solid #eceef4;padding-top:12px;display:flex;justify-content:space-between;align-items:center;font-size:9px;color:#9098a9;gap:8px}.course-bottom>span:last-child>span{margin-left:14px;color:#7c70bc}.empty-state{padding:40px;text-align:center;border:1px dashed #d8d9e5;border-radius:12px;font-size:13px;color:#8b93a5}.back-link{font-size:11px;color:#8a91a5}.detail-hero{display:grid;grid-template-columns:1.4fr 1fr;gap:50px;margin-top:35px;align-items:center}.detail-hero h1{font-size:51px;letter-spacing:-2px;font-weight:500;line-height:1.1;margin-bottom:19px}.detail-description{color:#8790a4;line-height:1.9;font-size:13px;max-width:500px}.detail-pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:23px}.detail-pills span{font-size:9px;color:#8a839d;border:1px solid #e3dfed;padding:8px 11px;border-radius:20px;background:#fff}.detail-art{position:relative;min-height:231px;border-radius:15px;overflow:hidden}.detail-art .ux-visual{transform:translate(-50%,-50%) scale(1.7)}.detail-art>span{position:absolute;bottom:19px;left:25px;font-size:6px;letter-spacing:1.5px;color:#8b80a9}.detail-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(250px,.85fr);gap:32px;margin-top:39px;align-items:start}.detail-section{padding:25px;background:white;border:1px solid #e2e6ef;border-radius:12px}.detail-section .overline{font-size:7px}.detail-section h2,.curriculum h2{font-size:21px;font-weight:500;letter-spacing:-.6px;margin-bottom:20px}.outcome-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px 25px}.outcome-grid p{font-size:10px;line-height:1.7;margin:0;color:#8b93a4}.outcome-grid span{color:#a5b58e;margin-right:8px}.curriculum{padding:0 5px}.curriculum ol{list-style:none;padding:0;margin:0}.curriculum li{display:flex;gap:18px;align-items:center;padding:16px 8px;border-top:1px solid #e4e7ef;color:#6d778c;font-size:11px;line-height:1.6}.curriculum li>span{font-size:9px;color:#a6a1b9}.curriculum small{display:block;font-size:9px;color:#a4abba;margin-top:4px}.curriculum li>a{margin-left:auto;font-size:9px;background:#eae8f8;color:#8c7dbc;padding:7px 10px;border-radius:15px}.start-card{background:#f0edf8;border:1px solid #e3ddf1;padding:26px;border-radius:13px}.start-card h3{font-size:26px;font-weight:500;letter-spacing:-1px;line-height:1.15;margin-bottom:18px}.start-card>p:not(.overline){font-size:11px;line-height:1.9;color:#9c93b1}.primary-button{background:#685ed0;color:#fff;padding:14px 17px;border:0;border-radius:8px;display:flex;align-items:center;justify-content:space-between;gap:25px;font-size:11px}.primary-button:hover{background:#554ac0}.start-card .primary-button{margin:25px 0 12px}.prototype-note{display:block;font-size:8px;line-height:1.8;color:#a49bb6}.fit-note{border-top:1px solid #ddd6eb;padding-top:22px;margin-top:24px}.fit-note strong{font-size:11px;font-weight:500}.fit-note p{font-size:10px;color:#a097ad;line-height:1.8;margin-top:10px;margin-bottom:0}.lesson-top{display:flex;align-items:center;justify-content:space-between;padding:22px 33px;background:#fff;border-bottom:1px solid var(--line);gap:25px}.lesson-top .eduhub-brand{font-size:25px}.lesson-top .eduhub-brand>span{font-size:34px}.lesson-layout{display:grid;grid-template-columns:300px minmax(0,1fr);min-height:90vh}.lesson-sidebar{padding:33px 25px;background:white;border-right:1px solid var(--line)}.lesson-sidebar h2{font-size:23px;letter-spacing:-.7px;font-weight:500;margin-bottom:20px}.progress-label{display:flex;justify-content:space-between;gap:15px;font-size:9px;color:#aaa3b9;margin-bottom:10px}.progress-label strong{color:#887ab4;font-weight:400}progress{width:100%;height:5px;appearance:none;-webkit-appearance:none;border:0;border-radius:5px;background:#eeebf5}progress::-webkit-progress-bar{background:#eeebf5;border-radius:5px}progress::-webkit-progress-value{background:#8a7ac3;border-radius:5px}progress::-moz-progress-bar{background:#8a7ac3}.lesson-sidebar nav{display:flex;flex-direction:column;gap:5px;margin-top:28px}.lesson-sidebar nav>a{padding:15px 11px;display:flex;gap:12px;align-items:center;font-size:11px;color:#9991a8;line-height:1.5;border-radius:8px}.lesson-sidebar nav>a>span:first-child{font-size:9px;color:#b2a9c2}.lesson-sidebar nav>a>span:last-child{font-size:8px;margin-left:auto;color:#8c79bd}.lesson-sidebar nav small{display:block;font-size:8px;color:#b5adbf;margin-top:5px}.lesson-sidebar nav>a.current{background:#eeebf8;color:#7c65ac}.lesson-sidebar nav>a:hover{background:#f6f3fb}.lesson-sidebar>.prototype-note{margin-top:30px}.lesson-main{max-width:900px;width:100%;padding:39px 65px 45px;margin:auto}.lesson-meta{display:flex;justify-content:space-between;gap:20px;font-size:8px;letter-spacing:1px;color:#a296b5;margin-bottom:24px}.lesson-main h1{font-size:54px;font-weight:500;letter-spacing:-2px;line-height:1.03;margin-bottom:23px}.lesson-main h1>span{color:#8e7bb2}.lesson-intro{font-size:13px;line-height:1.9;color:#9a91a6;margin-bottom:26px;max-width:650px}.lesson-banner{background:#e9e4f2;position:relative;border-radius:12px;padding:35px 24px;display:flex;align-items:center;gap:18px;justify-content:center;overflow:hidden;min-height:116px;margin-bottom:28px}.lesson-banner>span{border:1px solid #bfb2d4;padding:12px 14px;font-size:7px;letter-spacing:1px;color:#8d79aa;border-radius:6px;background:#f6f3fa9c;z-index:1}.lesson-banner i{font-style:normal;color:#aa99c2}.banner-cross{position:absolute;right:10px;top:-11px;font-size:145px;color:#dcd2ea;line-height:1}.lesson-text h2{font-size:20px;letter-spacing:-.5px;font-weight:500;margin-bottom:13px}.lesson-text>p{font-size:12px;line-height:1.9;color:#9d93a8}.reflection{border-left:3px solid #bdc9a4;background:#eef1e8;padding:20px 24px;margin:25px 0}.reflection .overline{font-size:7px;color:#9aab80}.reflection h3{font-size:16px;letter-spacing:-.3px;font-weight:500;margin-bottom:12px}.reflection>p{font-size:11px;color:#a2ac95;line-height:1.8}.reflection textarea{resize:vertical;width:100%;min-height:68px;border:1px solid #d9dfd1;border-radius:7px;background:#ffffffa6;padding:13px;font-size:11px;color:#6b785d;line-height:1.7}.reflection textarea::placeholder{color:#b0b9a4}.reflection .prototype-note{font-size:7px;color:#a4af96;margin-top:7px}.lesson-bottom{border-top:1px solid #e5dfed;display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:25px;padding-top:23px}.lesson-bottom p{font-size:10px;color:#a79bb6;margin:0}.demo-footer{padding:18px 25px;background:white;border-top:1px solid #e4e1ea;text-align:center;font-size:8px;line-height:1.8;color:#aaa0b7}.demo-footer a{color:#8c7ba9}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:1100px){.demo-shell{grid-template-columns:190px minmax(0,1fr)}.sidebar{padding-inline:16px}.demo-main{padding:25px}.topbar{padding-inline:25px}.course-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.detail-hero{gap:25px}.detail-hero h1{font-size:40px}.detail-layout{grid-template-columns:1fr}.start-card{max-width:none}.hero-shapes{margin:0;width:210px}.lesson-layout{grid-template-columns:260px minmax(0,1fr)}.lesson-main{padding:30px}.lesson-main h1{font-size:46px}.lesson-banner{gap:9px;padding-inline:12px}.lesson-banner>span{padding:10px}}
@media(max-width:720px){.demo-shell{display:block}.sidebar{padding:18px 20px;border-right:0;border-bottom:1px solid var(--line);gap:15px}.eduhub-brand{font-size:25px}.eduhub-brand>span{font-size:34px}.sidebar nav{flex-direction:row;gap:5px;flex-wrap:wrap}.sidebar nav>a{font-size:10px;padding:10px}.sidebar nav>a>span{font-size:16px}.nav-label,.sidebar-note,.sidebar .concept-label{display:none}.portfolio-back{font-size:9px;margin:0}.topbar{padding:15px 20px;height:auto;min-height:55px}.top-right{gap:10px}.learning-link{font-size:9px;gap:6px}.breadcrumbs{font-size:9px;gap:5px;flex-wrap:wrap}.concept-badge{font-size:6px;padding:6px}.demo-main{padding:20px}.discovery-hero{padding:25px;min-height:200px}.discovery-hero h1{font-size:34px}.discovery-hero .overline{font-size:6px;letter-spacing:1px}.hero-shapes{display:none}.discovery-hero p:not(.overline){font-size:11px}.catalogue-heading h2{font-size:20px}.catalogue-heading p{font-size:8px}.search-row{gap:8px}.search-field{padding-inline:10px;gap:8px}.search-field input{font-size:10px}.level-field select{font-size:9px;padding:12px 9px;max-width:100px}.subject-tabs{gap:4px}.subject-tabs button{font-size:9px;padding:8px 10px}.course-grid{grid-template-columns:1fr;gap:17px}.course-cover{height:160px}.course-card h3{font-size:20px}.course-card-body>a>p{font-size:12px;min-height:0}.course-meta{font-size:8px}.course-bottom{font-size:10px}.course-card-body{padding:20px}.cover-label{font-size:7px}.cover-index{font-size:6px}.detail-hero{grid-template-columns:1fr;margin-top:25px;gap:20px}.detail-hero h1{font-size:39px}.detail-art{min-height:200px}.detail-description{font-size:13px}.detail-layout{margin-top:25px;gap:25px}.detail-section{padding:20px}.outcome-grid{grid-template-columns:1fr;gap:14px}.outcome-grid p{font-size:12px}.curriculum li{font-size:12px;padding-block:17px}.curriculum small{font-size:10px}.start-card>p:not(.overline){font-size:12px}.fit-note p{font-size:12px}.lesson-top{padding:17px 20px;flex-wrap:wrap;gap:15px}.lesson-top .back-link{font-size:10px}.lesson-layout{display:flex;flex-direction:column-reverse}.lesson-sidebar{border:0;border-top:1px solid var(--line);padding:27px 20px}.lesson-main{padding:27px 20px}.lesson-main h1{font-size:47px}.lesson-intro{font-size:14px}.lesson-meta{font-size:7px}.lesson-banner{gap:8px;min-height:100px}.lesson-banner>span{font-size:6px;padding:12px 8px;letter-spacing:.5px}.lesson-text h2{font-size:23px}.lesson-text>p{font-size:14px}.reflection{padding:20px}.reflection>p{font-size:13px}.reflection textarea{font-size:12px}.lesson-bottom{flex-wrap:wrap}.lesson-bottom p{font-size:11px}.lesson-sidebar nav>a{font-size:13px}.lesson-sidebar nav small{font-size:10px}.progress-label{font-size:11px}.prototype-note{font-size:9px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
/* Keep supporting copy readable on light surfaces. */
.course-card-body>a>p,.detail-description,.lesson-intro,.lesson-text>p,.outcome-grid p{color:#67738a}.course-meta{color:#72668f}.course-bottom,.catalogue-heading p,.catalogue-heading>span,.breadcrumbs{color:#738096}.discovery-hero p:not(.overline){color:#78728e}.subject-tabs button{color:#768197}.start-card>p:not(.overline),.fit-note p,.prototype-note{color:#80738f}.lesson-sidebar nav>a{color:#786b88}.lesson-sidebar nav small{color:#94889f}.reflection>p{color:#758467}.lesson-bottom p{color:#847292}.primary-button:disabled{opacity:.75;cursor:default}