:root {
  --bg: #081824;
  --ink: #f6f4eb;
  --muted: #a9bac0;
  --panel: #102a38;
  --line: rgba(255,255,255,.12);
  --yellow: #ffd166;
  --mint: #58dfbd;
  --coral: #ff775f;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--bg); font-family: "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
.glow { position: fixed; z-index: -1; width: 520px; height: 520px; border-radius: 50%; filter: blur(100px); opacity: .12; }
.glow-a { left: -220px; top: -160px; background: var(--mint); }
.glow-b { right: -240px; top: 300px; background: var(--coral); }

.site-header { width: min(1200px, calc(100% - 40px)); height: 82px; margin: auto; display: flex; align-items: center; justify-content: space-between; }
.logo { display: flex; align-items: center; gap: 12px; font-weight: 900; letter-spacing: .04em; }
.logo-grid { width: 34px; height: 34px; padding: 6px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; border: 1px solid var(--line); border-radius: 10px; }
.logo-grid i { border-radius: 50%; background: rgba(255,255,255,.14); }.logo-grid i:nth-child(2),.logo-grid i:nth-child(4),.logo-grid i:nth-child(6),.logo-grid i:nth-child(8) { background: var(--yellow); box-shadow: 0 0 8px var(--yellow); }
.semester { padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 13px; font-weight: 800; }

main { width: min(1200px, calc(100% - 40px)); margin: auto; }
.hero { min-height: 590px; padding: 70px 0 90px; display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: 7vw; }
.eyebrow { margin: 0 0 14px; color: var(--mint); font-size: 13px; font-weight: 950; letter-spacing: .18em; }
h1 { margin: 0; max-width: 760px; font-size: clamp(56px, 8vw, 108px); line-height: .94; letter-spacing: -.065em; }
.hero-copy > p:last-child { max-width: 650px; margin: 28px 0 0; color: var(--muted); font-size: clamp(18px, 2vw, 24px); line-height: 1.75; }
.hero-board { position: relative; width: min(390px, 84vw); aspect-ratio: 1.05; padding: 55px; justify-self: end; display: grid; place-items: center; border: 1px solid rgba(255,209,102,.28); border-radius: 58px; background: linear-gradient(145deg, #17394a, #0b2230); box-shadow: 0 40px 90px rgba(0,0,0,.35), inset 0 0 0 8px rgba(255,255,255,.025); transform: rotate(3deg); }
.hero-board::before,.hero-board::after { content: ""; position: absolute; top: 42%; width: 34px; height: 34px; border: 8px solid #07131c; border-radius: 50%; }.hero-board::before { left: 16px; }.hero-board::after { right: 16px; }
.led-grid { width: 100%; aspect-ratio: 1; padding: 24px; display: grid; grid-template-columns: repeat(5,1fr); gap: 9px; border-radius: 30px; background: #101714; box-shadow: inset 0 0 30px #000; }
.led-grid i { border-radius: 50%; background: #2e2c21; box-shadow: inset 0 0 6px #000; }.led-grid i.on { background: var(--yellow); box-shadow: 0 0 14px var(--yellow); }
.board-label { position: absolute; bottom: 21px; color: var(--mint); font-size: 11px; font-weight: 950; letter-spacing: .22em; }

.course-section { padding: 30px 0 90px; }
.section-title { margin-bottom: 30px; display: flex; align-items: end; justify-content: space-between; gap: 30px; }
h2 { margin: 0; font-size: clamp(36px, 5vw, 64px); letter-spacing: -.045em; }
.section-title > p { max-width: 420px; margin: 0; color: var(--muted); line-height: 1.7; }
.topic-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.topic-card { overflow: hidden; border: 1px solid var(--line); border-radius: 30px; background: rgba(16,42,56,.82); box-shadow: 0 28px 70px rgba(0,0,0,.22); transition: transform .25s ease, border-color .25s ease; }
.topic-card:hover { transform: translateY(-8px); border-color: rgba(88,223,189,.6); }
.topic-image { position: relative; height: 330px; overflow: hidden; background: #183443; }
.topic-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }.topic-card:hover img { transform: scale(1.04); }
.topic-image > span { position: absolute; right: 18px; top: 18px; padding: 8px 12px; border-radius: 999px; color: #071824; background: var(--yellow); font-size: 13px; font-weight: 950; }
.pet-image { background: radial-gradient(circle at 50% 55%, rgba(88,223,189,.22), transparent 50%), #112b3c; }.pet-image img { object-fit: contain; padding: 15px; }
.topic-copy { padding: 28px; }
.topic-meta { display: flex; align-items: center; justify-content: space-between; }.topic-meta b { color: var(--mint); }.topic-meta span { color: var(--muted); font-size: 14px; }
h3 { margin: 12px 0 10px; font-size: clamp(26px, 3vw, 38px); letter-spacing: -.03em; }.topic-copy > p { min-height: 58px; margin: 0; color: var(--muted); line-height: 1.65; }
.skills { margin: 22px 0; display: flex; flex-wrap: wrap; gap: 8px; }.skills span { padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 13px; }
.topic-copy strong { display: flex; align-items: center; justify-content: space-between; color: var(--yellow); }.topic-copy strong i { font-style: normal; font-size: 24px; }
.topic-two { border-top: 3px solid var(--yellow); }.topic-three { border-top: 3px solid var(--mint); }

.how-to { margin-bottom: 90px; display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }.how-to > div { padding: 22px; display: flex; gap: 15px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.035); }.how-to span { color: var(--coral); font-size: 26px; font-weight: 950; }.how-to p { margin: 0; color: var(--muted); line-height: 1.55; }.how-to b { display: block; color: var(--ink); }
footer { width: min(1200px, calc(100% - 40px)); margin: auto; padding: 25px 0 36px; display: flex; justify-content: space-between; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }

@media (max-width: 820px) { .hero { grid-template-columns: 1fr; padding-top: 45px; }.hero-board { justify-self: center; }.section-title { align-items: start; flex-direction: column; }.topic-grid { grid-template-columns: 1fr; }.how-to { grid-template-columns: 1fr; } }
@media (max-width: 500px) { .semester { display: none; }.hero { min-height: auto; }.hero-board { padding: 42px; border-radius: 42px; }.topic-image { height: 250px; }.topic-copy > p { min-height: 0; } }
@media (prefers-reduced-motion: reduce) { * { transition-duration: .01ms !important; } }