@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  --blue: #1745e8;
  --blue-dark: #102da8;
  --pink: #f7c4e0;
  --pink-light: #ffe9f4;
  --paper: #fffdf8;
  --ink: #17245b;
  --grid: rgba(23, 69, 232, .19);
  --orange: #f06a42;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: #3d3d40;
  font-family: 'Space Grotesk', Arial, sans-serif;
  padding: 28px 16px 48px;
}
body::before {
  content: " ";
  position: fixed; inset: 0; pointer-events: none; opacity: .15;
  background-image: radial-gradient(#fff 0.6px, transparent 0.6px);
  background-size: 5px 5px;
}
.desktop { width: min(1120px, 100%); margin: 0 auto; background: var(--paper); box-shadow: 0 22px 70px #15151580; position: relative; }
.topbar { display:flex; align-items:center; gap:14px; padding: 11px 16px; background: var(--blue); color:#fff; font: 11px 'DM Mono', monospace; }
.window-dots { display:flex; gap:5px; }
.window-dots span, .dots { color: var(--blue); }
.window-dots span { width:8px; height:8px; border-radius:50%; background:#fff; display:block; }
.browser-title { flex:1; }
.clock { letter-spacing:.05em; }
.page { padding: 25px; background-color: var(--paper); background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 25px 25px; }
.window { background: rgba(255,253,248,.97); border: 1.5px solid var(--blue); box-shadow: 5px 5px 0 var(--blue); min-width:0; }
.window-bar { display:flex; align-items:center; gap:12px; height:27px; padding: 0 9px; border-bottom:1.5px solid var(--blue); background:#fff; font:10px 'DM Mono', monospace; }
.window-bar .dots { letter-spacing:1px; font-size:12px; white-space:nowrap; }
.window-bar > span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hero { position:relative; background:var(--blue); color:white; margin-bottom:25px; overflow:hidden; }
.hero .window-bar { color:var(--ink); }
.hero-content { display:grid; grid-template-columns:1.3fr .7fr; gap:28px; align-items:center; padding: clamp(22px, 5vw, 55px); min-height:350px; position:relative; z-index:1; }
.eyebrow { font: 10px 'DM Mono', monospace; letter-spacing:.1em; margin:0 0 14px; }
h1 { font-size:clamp(48px, 8vw, 100px); line-height:.82; letter-spacing:-.075em; margin:0 0 18px; text-transform:uppercase; }
h1 span { color:var(--pink); }
.intro { font-size:16px; font-weight:600; margin:0 0 10px; }
.small-copy { max-width:430px; font-size:13px; line-height:1.65; }
.button { display:inline-block; margin-top:12px; padding:12px 15px; background:var(--pink); color:var(--blue-dark); text-decoration:none; font:11px 'DM Mono', monospace; border:1px solid white; transition:transform .2s; }
.button:hover { transform:translate(3px,-3px); }
.avatar-frame { margin:0; background:white; border:1.5px solid var(--pink); padding:0 0 8px; transform:rotate(2deg); box-shadow:7px 7px 0 #0c2eaa; max-width:280px; justify-self:center; width:100%; }
.avatar-top { font:10px 'DM Mono', monospace; color:var(--blue); padding:7px 9px; border-bottom:1px solid var(--blue); }
.avatar-top span { float:right; }
.avatar-frame img { display:block; width:100%; aspect-ratio:1; object-fit:cover; background:var(--pink); }
.avatar-frame figcaption { color:var(--blue); padding:7px 9px 0; font:9px 'DM Mono', monospace; }
.hero-stamp { position:absolute; right:17px; top:43px; font:700 clamp(22px,4vw,43px) 'DM Mono', monospace; line-height:.9; text-align:right; color:#ffffff24; transform:rotate(7deg); }
.team-nav { margin:0 0 25px; }
.nav-items { display:flex; flex-wrap:wrap; padding:9px; gap:7px; }
.nav-items a { color:var(--blue); border:1px solid var(--blue); text-decoration:none; font:11px 'DM Mono',monospace; padding:10px 12px; background:#fff; }
.nav-items a:hover, .nav-items a.active { background:var(--blue); color:#fff; }
.content-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:22px; align-items:start; }
.panel-inner { padding:22px; }
h2 { font-size:clamp(26px,4vw,44px); letter-spacing:-.06em; line-height:1; margin:0 0 10px; }
h2 span, .percent { color:var(--orange); }
.academic h2 { font-size:clamp(60px,9vw,95px); color:var(--blue); margin-top:8px; }
.percent { font-size:.45em; vertical-align:top; }
.progress-label { font:11px 'DM Mono',monospace; margin:0 0 10px; }
.progress { height:13px; border:1px solid var(--blue); padding:2px; margin-bottom:17px; }
.progress span { display:block; width:89.4%; height:100%; background:var(--orange); }
.stats { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin:20px 0; }
.stats div { background:var(--pink-light); padding:12px; display:flex; flex-direction:column; gap:5px; }
.stats strong { color:var(--blue); font:24px 'DM Mono',monospace; }
.stats span { font-size:11px; }
h3 { font-size:14px; margin:22px 0 10px; }
.subject-list { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.subject-list li { font-size:11px; line-height:1.35; padding:7px 8px; border-left:3px solid var(--blue); background:#f1f3ff; }
.subject-list.current li { background:var(--pink-light); border-color:var(--orange); }
.right-column { display:grid; gap:22px; }
.shortcut-grid { display:grid; grid-template-columns:repeat(3,1fr); padding:17px 10px; gap:10px; }
.shortcut-grid a { text-decoration:none; color:var(--blue); text-align:center; font:10px 'DM Mono',monospace; display:flex; align-items:center; flex-direction:column; gap:7px; }
.shortcut-icon { width:48px; height:48px; display:grid; place-items:center; background:var(--blue); color:white; font-size:25px; box-shadow:3px 3px 0 var(--pink); }
.shortcut-grid a:hover .shortcut-icon { background:var(--orange); }
.team-card h2 { font-size:35px; }
.member-list { padding:0; list-style:none; margin:17px 0; }
.member-list li { display:flex; align-items:center; gap:10px; border-bottom:1px solid #d4d9f5; padding:10px 0; font-size:12px; }
.member-list b { font:11px 'DM Mono',monospace; color:var(--orange); }
.member-list span { margin-left:auto; font:9px 'DM Mono',monospace; color:var(--blue); }
.topic-note { padding:13px; background:var(--pink-light); border:1px dotted var(--blue); font-size:12px; line-height:1.5; }
.topic-note strong { font:10px 'DM Mono',monospace; color:var(--blue); }
.topic-note p { margin:6px 0 0; }
.institution { margin-top:25px; }
.institution-grid { display:grid; grid-template-columns:1fr 1fr; gap:0; }
.institution-grid > div { padding:20px; border-right:1px solid #cbd2f7; border-bottom:1px solid #cbd2f7; }
.institution-grid > div:nth-child(2n) { border-right:0; }
.institution-grid h2 { font-size:38px; }
.institution-grid h3 { font-size:22px; color:var(--blue); margin:0 0 8px; }
.institution-grid p:not(.eyebrow) { font-size:11px; line-height:1.7; margin-bottom:0; }
.bottom-nav { margin:25px 0; padding:17px; background:var(--pink); border:1px solid var(--blue); display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.bottom-nav .eyebrow { width:100%; margin:0; }
.bottom-nav a { padding:8px 13px; background:var(--blue); color:#fff; text-decoration:none; font:11px 'DM Mono',monospace; }
.bottom-nav a:hover { background:var(--orange); }
.placeholder-links { width:100%; font-size:10px; margin:2px 0 0; }
footer { display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:start; background:var(--blue); color:#fff; padding:20px; }
.footer-mark { font:700 20px 'DM Mono',monospace; }
.footer-mark span { color:var(--pink); font-size:10px; vertical-align:top; }
footer p { font-size:10px; line-height:1.6; margin:0; }
.footer-year { font:9px 'DM Mono',monospace; white-space:nowrap; }
@media (max-width:760px) {
  body { padding:0; }
  .desktop { box-shadow:none; }
  .page { padding:13px; background-size:20px 20px; }
  .hero-content { grid-template-columns:1fr; gap:25px; padding:25px; }
  .avatar-frame { max-width:230px; justify-self:start; }
  .hero-stamp { top:45px; }
  .content-grid { grid-template-columns:1fr; }
  .institution-grid { grid-template-columns:1fr; }
  .institution-grid > div { border-right:0; }
  footer { grid-template-columns:1fr; gap:10px; }
}
@media (max-width:390px) {
  .subject-list { grid-template-columns:1fr; }
  .nav-items a { flex:1 1 100%; }
  .shortcut-grid { gap:5px; }
}