:root {
  color-scheme: dark; --bg: #0b1020; --panel: #121a2d; --panel-hover: #1a2945;
  --text: #f4f7ff; --muted: #aab6ce; --accent: #8bafff; --border: rgba(193, 210, 255, .15);
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(ellipse at 50% 0%, #1a2b4e 0, var(--bg) 52%); color: var(--text); font: 16px/1.6 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: var(--accent); }
.site-header { width: min(1100px, calc(100% - 40px)); margin: 0 auto; padding: 24px 0; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.brand { color: var(--text); text-decoration: none; font-weight: 800; font-size: 1.15rem; letter-spacing: -.03em; }
nav { display: flex; gap: 22px; } nav a { color: var(--muted); text-decoration: none; font-weight: 600; } nav a[aria-current="page"], nav a:hover { color: var(--text); }
.main { width: min(760px, calc(100% - 40px)); margin: 0 auto; padding: clamp(42px, 8vw, 80px) 0 60px; }
.eyebrow { margin: 0; color: var(--accent); font-size: .78rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
h1 { margin: 8px 0 10px; font-size: clamp(2.5rem, 7vw, 4.3rem); line-height: 1.05; letter-spacing: -.06em; } h1 span { color: var(--accent); }
.intro { margin: 0 0 30px; color: var(--muted); }
.search-wrap { position: relative; }
.search-wrap label { display: block; margin-bottom: 9px; font-weight: 750; }
input[type="search"] { display: block; width: 100%; height: 58px; padding: 0 18px; border: 1px solid rgba(139,175,255,.35); border-radius: 15px; background: #101a2e; color: var(--text); font: inherit; font-size: 1.05rem; box-shadow: 0 12px 35px rgba(0,0,0,.15); }
input[type="search"]:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.placeholder-rotator { position: absolute; left: 19px; right: 12px; top: 34px; height: 58px; display: flex; align-items: center; pointer-events: none; color: #8493ad; overflow: hidden; }


.placeholder-rotator span {
  position: absolute;
  left: 0;
  opacity: 0;
  white-space: nowrap;
  animation: rotate-placeholder 32s linear infinite;
}

.placeholder-rotator span:nth-child(1)  { animation-delay: 0s; }
.placeholder-rotator span:nth-child(2)  { animation-delay: 2s; }
.placeholder-rotator span:nth-child(3)  { animation-delay: 4s; }
.placeholder-rotator span:nth-child(4)  { animation-delay: 6s; }
.placeholder-rotator span:nth-child(5)  { animation-delay: 8s; }
.placeholder-rotator span:nth-child(6)  { animation-delay: 10s; }
.placeholder-rotator span:nth-child(7)  { animation-delay: 12s; }
.placeholder-rotator span:nth-child(8)  { animation-delay: 14s; }
.placeholder-rotator span:nth-child(9)  { animation-delay: 16s; }
.placeholder-rotator span:nth-child(10) { animation-delay: 18s; }
.placeholder-rotator span:nth-child(11) { animation-delay: 20s; }
.placeholder-rotator span:nth-child(12) { animation-delay: 22s; }
.placeholder-rotator span:nth-child(13) { animation-delay: 24s; }
.placeholder-rotator span:nth-child(14) { animation-delay: 26s; }
.placeholder-rotator span:nth-child(15) { animation-delay: 28s; }
.placeholder-rotator span:nth-child(16) { animation-delay: 30s; }

@keyframes rotate-placeholder {
  0%, 1%, 6.25%, 100% { opacity: 0; }
  2%, 5% { opacity: 1; }
}


input[type="search"]:focus + .placeholder-rotator,
input[type="search"].has-value + .placeholder-rotator {
  display: none;
}

.results-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 28px 0 10px; }
.results-heading h2 { margin: 0; font-size: 1.05rem; } #result-count { color: var(--muted); font-size: .85rem; }
.results { max-height: 270px; overflow-y: auto; border: 1px solid var(--border); border-radius: 15px; background: rgba(18,26,45,.8); scrollbar-color: #40577f #111a2c; scrollbar-width: thin; }
.course-option { display: block; padding: 13px 16px; color: var(--text); text-decoration: none; border-bottom: 1px solid rgba(193,210,255,.09); transition: background .15s ease; }
.course-option:last-child { border-bottom: 0; } .course-option:hover, .course-option:focus { outline: none; background: var(--panel-hover); color: #fff; }
.state-message { padding: 16px; margin: 0; color: var(--muted); }
.help-text { margin-top: 18px; color: var(--muted); font-size: .92rem; }
.site-footer { width: min(1100px, calc(100% - 40px)); margin: 20px auto 0; padding: 22px 0 30px; display: flex; justify-content: space-between; gap: 20px; color: #7887a3; font-size: .85rem; border-top: 1px solid var(--border); }
@media (max-width: 600px) { .site-header { align-items: flex-start; flex-direction: column; gap: 12px; } .site-footer { flex-direction: column; gap: 5px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } }