:root{color-scheme:dark;--bg:#0d1724;--fg:#f5f8f5;--mute:#b7cbd2;--line:#355063;--lime:#d7ee91;--aqua:#8ce0d2}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(ellipse 70% 38% at 92% -10%,#214853 0%,transparent 75%),var(--bg);color:var(--fg);font:15.5px/1.6 system-ui,-apple-system,Segoe UI,Arial,sans-serif}a{color:inherit}a:focus-visible{outline:3px solid var(--lime);outline-offset:4px;border-radius:5px}.wrap{max-width:1140px;width:calc(100% - 44px);margin-inline:auto}.skip{position:absolute;left:14px;top:-100px;background:var(--lime);color:#172b27;padding:10px 14px;z-index:20}.skip:focus{top:8px}
.header{border-bottom:1px solid #304657}.header-in{display:flex;gap:22px;align-items:center;justify-content:space-between;padding:20px 0}.brand{font-size:29px;font-weight:900;letter-spacing:-.09em;text-decoration:none;line-height:1}.brand b{color:var(--lime)}.brand small{font-size:11px;letter-spacing:.12em;margin-left:15px;color:var(--mute);font-weight:750}.nav{display:flex;flex-wrap:wrap;gap:20px}.nav a{color:#c3d7da;text-decoration:none;font-size:13px;font-weight:650}.nav a:hover{color:var(--lime)}
.hero{padding:77px 0 56px;display:grid;grid-template-columns:1fr 185px;gap:40px;align-items:end}.eyebrow{color:var(--lime);font-size:11px;font-weight:850;letter-spacing:.14em;text-transform:uppercase}.hero h1{font-size:clamp(46px,7vw,88px);line-height:1.01;letter-spacing:-.073em;max-width:830px;margin:14px 0 25px}.hero h1 em{color:var(--lime);font-style:normal}.hero p{font-size:18px;color:#bdd1d9;max-width:750px;margin:0}.hero-aside{border-left:1px solid var(--line);padding-left:25px}.hero-aside strong{display:block;color:var(--lime);font:750 61px/.9 Georgia,serif}.hero-aside p{font-size:12px;margin:15px 0 0}.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}.chips span{padding:5px 12px;border:1px solid #345465;border-radius:30px;font-size:11px;color:#c9dfe0;font-weight:750}
.group{margin:56px 0 0}.group-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin:0 0 20px}.count{color:var(--lime);font-size:11px;font-weight:850;letter-spacing:.13em}.group-heading h2{font-size:clamp(25px,3vw,35px);line-height:1.12;letter-spacing:-.05em;margin:8px 0 0}.group-heading p{margin:0;max-width:520px;color:#9db4c1;font-size:13px}.grid{display:grid;gap:17px}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{display:flex;flex-direction:column;min-width:0;text-decoration:none;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:linear-gradient(140deg,#1a3345,#122636);transition:transform .18s,border-color .18s,box-shadow .18s}.card:hover{transform:translateY(-4px);border-color:var(--lime);box-shadow:0 14px 28px rgba(0,0,0,.15)}.card .content{padding:24px;display:flex;flex-direction:column;flex:1;gap:7px}.kicker{color:var(--lime);letter-spacing:.12em;text-transform:uppercase;font-size:10px;font-weight:850}.card h3{font-size:23px;line-height:1.14;letter-spacing:-.048em;margin:4px 0}.card p{font-size:13px;line-height:1.56;color:#bad0d8;margin:0 0 16px}.card .action{color:var(--aqua);font-size:12px;font-weight:800;margin-top:auto}.tag{display:inline-block;align-self:flex-start;border:1px solid #51727d;color:#b5d1d2;font-size:10px;font-weight:700;border-radius:30px;padding:3px 10px;margin-top:6px}.card.feature h3{font-size:clamp(25px,3vw,33px)}.feature .poster{height:204px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(circle at 50% 50%,#3d806c,#183f49 67%)}.feature .poster.office{background:linear-gradient(125deg,#6b9495,#284558 85%)}.poster .word{z-index:2;font-size:39px;font-weight:900;letter-spacing:-.07em;color:#f2f9e5}.poster .orbit{width:168px;height:168px;position:absolute;border:1px solid #cde3c16e;border-radius:50%;box-shadow:0 0 0 41px #b4d6b41b,0 0 0 83px #b4d6b40d}.poster .points{position:absolute;inset:0;background:radial-gradient(circle at 50% 11%,var(--lime) 0 6px,transparent 7px),radial-gradient(circle at 23% 35%,var(--lime) 0 6px,transparent 7px),radial-gradient(circle at 78% 29%,var(--lime) 0 6px,transparent 7px),radial-gradient(circle at 84% 64%,var(--lime) 0 6px,transparent 7px),radial-gradient(circle at 57% 86%,var(--lime) 0 6px,transparent 7px),radial-gradient(circle at 19% 72%,var(--lime) 0 6px,transparent 7px)}
.poster .room{width:227px;height:126px;background:linear-gradient(#d8e7df 67%,#a8bdaf 67%);border:9px solid #b9d3c9;border-bottom:15px solid #94ad9b;border-radius:17px 17px 4px 4px;box-shadow:17px 18px 0 #152f4055;position:relative}.room .window{position:absolute;left:19px;top:16px;width:66px;height:57px;background:#9ecbd0;border:7px solid #f2f4e8;border-radius:8px}.room .desk{position:absolute;right:15px;bottom:15px;width:105px;height:13px;border-radius:4px;background:#986d60}.room .desk:before{content:"";position:absolute;width:47px;height:37px;bottom:15px;left:33px;background:#325261;border:5px solid #b9d5cf;border-radius:6px}.room .plant{position:absolute;bottom:16px;left:28px;width:29px;height:25px;background:#b77f5b;border-radius:2px 2px 8px 8px}.room .plant:before{content:"";position:absolute;bottom:24px;left:-8px;height:50px;width:44px;background:#4b8c62;clip-path:polygon(40% 100%,6% 36%,18% 29%,43% 72%,54% 4%,64% 0%,55% 76%,88% 35%,99% 42%,60% 100%)}
.card .icon{width:50px;height:50px;border-radius:15px;display:grid;place-items:center;background:#2e5970;color:#e8edcf;font:600 29px Georgia,serif;margin-bottom:6px}.icon.gold{background:#70563e}.icon.green{background:#316551}.icon.violet{background:#5f4d72}.icon.blue{background:#355a74}.grid.four .card{min-height:288px}.grid.two:not(.features) .card{min-height:220px}.feature .content{min-height:209px}
.pending{margin-top:44px;border:1px dashed #4e7180;border-radius:19px;padding:22px 25px;background:#14293a;display:flex;align-items:center;justify-content:space-between;gap:20px}.pending h3{font-size:19px;letter-spacing:-.025em;margin:4px 0}.pending p{margin:0;font-size:13px;color:var(--mute)}.pending .pill{border:1px solid #567780;border-radius:50px;padding:7px 12px;white-space:nowrap;font-size:10px;font-weight:850;color:#c5dce0}
footer{margin-top:71px;border-top:1px solid var(--line);padding:29px 0 45px;color:var(--mute);font-size:12px}.foot{display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap}.foot a{color:var(--aqua);text-decoration:none}
@media(max-width:960px){.grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}.hero{grid-template-columns:minmax(0,1fr) 145px}.hero-aside strong{font-size:45px}}@media(max-width:650px){.wrap{width:calc(100% - 30px)}.header-in{align-items:start;flex-direction:column;gap:15px}.nav{gap:15px}.hero{display:block;padding:44px 0 22px}.hero-aside{display:none}.hero h1{font-size:clamp(41px,12vw,65px)}.hero p{font-size:16px}.group{margin-top:42px}.group-heading{display:block}.group-heading p{margin:11px 0 0}.grid.two,.grid.four{grid-template-columns:minmax(0,1fr)}.feature .poster{height:174px}.grid.four .card,.grid.two:not(.features) .card{min-height:195px}.pending{display:block}.pending .pill{display:inline-block;margin-top:15px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.card{transition:none}}
/* Five project cards: balanced 3 + 2 on wide screens; existing two/one column layouts remain. */
@media(min-width:961px){.grid.four.projects-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.projects-grid>.card{grid-column:span 2}.projects-grid>.card:nth-child(n+4){grid-column:span 3}}

/* UCL first-year unified teaching hub */
.course-gateway{display:flex;align-items:center;gap:20px;text-decoration:none;padding:20px 24px;margin:0 0 17px;background:linear-gradient(105deg,#203c4b,#183b3c 55%,#24344a);border:1px solid #708575;border-radius:17px;min-width:0;transition:border-color .18s,transform .18s}.course-gateway:hover{transform:translateY(-2px);border-color:var(--lime)}.course-gateway-sign{min-width:72px;height:72px;display:grid;place-items:center;background:#d7ee91;color:#152936;border-radius:13px;font-size:23px;font-weight:950;letter-spacing:-.07em}.course-gateway-content{display:grid;gap:3px;flex:1;min-width:0}.course-gateway-kicker{color:var(--lime);letter-spacing:.14em;font-size:10px;font-weight:850}.course-gateway-content strong{font-size:23px;line-height:1.2;letter-spacing:-.04em}.course-gateway-desc{font-size:12px;color:#d1e0e2;line-height:1.6}.course-gateway-arrow{font-size:25px;color:var(--lime)}@media(max-width:650px){.course-gateway{padding:16px;gap:12px}.course-gateway-sign{width:51px;height:51px;min-width:51px;font-size:18px}.course-gateway-content strong{font-size:19px}.course-gateway-arrow{display:none}}

/* Four compact cards and quick links inside the learning section */
.learning-grid{margin-top:16px}
.learning-grid .learning-card .content{padding:21px}
.learning-grid .learning-card h3{font-size:21px}
.learning-grid .learning-card p{font-size:12.5px}
.learning-grid .learning-card .icon{font-weight:900}
.learning-resources{display:flex;gap:13px;align-items:baseline;flex-wrap:wrap;margin-top:21px;font-size:12.5px;line-height:1.9}
.learning-resources strong{color:var(--lime);white-space:nowrap}
.learning-resources div{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.learning-resources a{color:var(--aqua);text-underline-offset:3px}
.learning-dot{color:#88a3b0}

/* A visitor convenience dialog on / and /en/. Client-side only: no actual access control. */
html.lab-locked body > :not(#lab-password-dialog){visibility:hidden;pointer-events:none}
.lab-password-dialog{position:fixed;max-width:min(440px,calc(100vw - 28px));width:100%;box-sizing:border-box;margin:auto;border:1px solid #6c8b88;border-radius:20px;padding:29px;background:linear-gradient(145deg,#203e4b,#122736);color:#f4f9fa;box-shadow:0 25px 80px #06141dd9;font:inherit}
.lab-password-dialog::backdrop{background:#050f19df;backdrop-filter:blur(8px)}
.lab-password-dialog[open]{display:block}
.lab-password-mark{font-weight:900;font-size:23px;letter-spacing:-.065em}
.lab-password-mark span{color:var(--lime)}
.lab-password-overline{font-size:10px!important;letter-spacing:.18em;color:var(--lime)!important;font-weight:850;margin:19px 0 5px!important}
.lab-password-dialog h2{margin:0 0 8px;font-size:29px;letter-spacing:-.05em}
.lab-password-dialog #lab-password-desc{margin:0 0 22px;color:#c5dbe1;line-height:1.55;font-size:14px}
.lab-password-dialog label{font-weight:700;display:block;margin-bottom:7px;font-size:13px}
.lab-password-dialog input{display:block;width:100%;background:#0c1e2a;border:1px solid #64828c;border-radius:10px;color:#fff;padding:13px 14px;font:inherit;font-size:17px}
.lab-password-dialog input:focus-visible{outline:3px solid var(--lime);outline-offset:2px}
.lab-password-dialog button{width:100%;border:0;border-radius:11px;padding:13px 16px;background:var(--lime);color:#182e31;font:800 14px system-ui;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px}
.lab-password-dialog button:hover{background:#ebffb5}
.lab-password-status{min-height:22px;color:#ffd9ba!important;font-size:12px!important;margin:6px 0 12px!important}
@media (max-width:650px){.lab-password-dialog{padding:23px}.learning-grid .learning-card{min-height:185px}}