@font-face { font-family: 'LXGW WenKai'; src: url('/fonts/LXGWWenKai-Regular.woff2') format('woff2'); font-display: swap; }
:root { color-scheme: dark; font-family: 'LXGW WenKai', 'PingFang SC', 'Microsoft YaHei', sans-serif; color: #eef1ff; background: #080d2b; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; min-height: 100vh; background: radial-gradient(ellipse at top left, #143453, transparent 65%), linear-gradient(140deg, #080d2b, #1b1439); }
main { width: 100%; padding: 40px clamp(20px, 1.875vw, 36px); }
.brand { color: #80e8eb; letter-spacing: .12em; font-size: 15px; }
h1 { font-size: clamp(28px, 2.8vw, 56px); line-height: 1.45; margin: 20px 0; overflow-wrap: anywhere; }
.intro, footer { color: #bdc8e4; font-size: clamp(16px, 1.5vw, 28px); line-height: 1.9; }
.courses { list-style: none; padding: 0; margin: 32px 0; border-top: 1px solid #405272; }
.courses > li { border-bottom: 1px solid #405272; }
.course { display: grid; grid-template-columns: 2.5em minmax(0, 1fr) auto; align-items: center; gap: 8px 20px; padding: 24px 8px; color: inherit; text-decoration: none; }
.course:hover { background: #21304e; }
a:focus-visible { outline: 3px solid #80e8eb; outline-offset: -3px; }
.number { font: clamp(24px, 1.8vw, 40px) Georgia, serif; color: #aab9db; }
.course-copy { min-width: 0; }
h2 { font-size: clamp(20px, 1.8vw, 40px); line-height: 1.6; margin: 0; overflow-wrap: anywhere; }
.course-theme { color: #bdc8e4; font-size: clamp(16px, 1.5vw, 28px); margin: 8px 0 0; line-height: 1.6; overflow-wrap: anywhere; }
.enter { color: #80e8eb; font-size: clamp(16px, 1.5vw, 28px); white-space: nowrap; }
.enter > span { margin-left: 12px; }
.development .page-role { color: #bdc8e4; }
.development { border: 1px solid #405272; border-radius: 20px; padding: clamp(24px, 5vw, 56px); margin-top: 32px; background: #172241d9; }
.development h2 { font-size: clamp(28px, 4vw, 44px); margin-top: 24px; }
.development p { line-height: 1.9; color: #bdc8e4; }
.back { display: inline-block; color: #80e8eb; padding: 16px 0; }
@media (max-width: 1199px) { main { padding: 28px 16px; } }
@media (max-width: 720px) {
  main { padding: 24px 8px; }
  .course { grid-template-columns: 2em minmax(0, 1fr); align-items: start; gap: 8px 10px; padding: 20px 4px; }
  .enter { grid-column: 2; }
}