:root{color-scheme:light;--blue:#0B3D91;--ink:#1d2430;--muted:#6d7580;--paper:#f5f2ec;--line:#d8d3c9;--accent:#c8794b;--fs:1}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif}
body{overflow-x:hidden}
.course-home{width:min(1400px,calc(100% - 72px));margin:0 auto;padding:28px 0 24px}
.topbar{display:flex;align-items:center;justify-content:space-between;height:62px;border-bottom:1px solid var(--line)}
.brand-lockup{display:flex;align-items:center;gap:13px;color:var(--blue);font-size:calc(12px * var(--fs));font-weight:750;letter-spacing:.13em}
.brand-mark{font-size:calc(17px * var(--fs));letter-spacing:.05em}.brand-line{width:34px;height:1px;background:var(--blue);opacity:.45}.brand-label{font-weight:600;opacity:.68}
.jsnu-logo{width:220px;height:auto;display:block}
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(380px,.95fr);gap:80px;align-items:center;min-height:430px;padding:52px 5.5% 42px;border-bottom:1px solid var(--line)}
.eyebrow,.section-kicker{margin:0;color:var(--blue);font-size:calc(12px * var(--fs));font-weight:750;letter-spacing:.15em;text-transform:uppercase}.eyebrow{margin-bottom:20px}
h1{margin:0;color:var(--blue);font-size:clamp(52px,6vw,92px);line-height:.98;letter-spacing:-.065em;font-weight:820}h1 em{font-style:normal;color:var(--ink)}
.subtitle{max-width:650px;margin:27px 0 0;font-size:calc(24px * var(--fs));line-height:1.35;letter-spacing:-.03em;font-weight:530}.description{max-width:590px;margin:16px 0 0;color:var(--muted);font-size:calc(15px * var(--fs));line-height:1.75}
.hero-meta{display:flex;align-items:center;gap:12px;margin-top:28px;color:var(--blue);font-size:calc(12px * var(--fs));letter-spacing:.08em;font-weight:700}.meta-dot{width:4px;height:4px;border-radius:50%;background:var(--accent)}
.hero-diagram{position:relative;min-height:320px;display:grid;place-items:center}.orbit{position:absolute;border:1px solid rgba(11,61,145,.24);border-radius:50%;transform:rotate(-18deg)}.orbit-a{width:320px;height:200px}.orbit-b{width:400px;height:250px;transform:rotate(38deg);border-color:rgba(200,121,75,.32)}
.diagram-core{position:relative;z-index:2;width:132px;height:132px;border-radius:50%;display:grid;place-content:center;text-align:center;background:var(--blue);color:#fff;box-shadow:0 18px 38px rgba(11,61,145,.22)}.diagram-core span{font-size:calc(30px * var(--fs));font-weight:800;letter-spacing:-.06em}.diagram-core small{font-size:calc(9px * var(--fs));letter-spacing:.18em;opacity:.75}
.diagram-node{position:absolute;z-index:3;padding:8px 12px;border:1px solid var(--line);background:rgba(245,242,236,.9);color:var(--blue);font-size:calc(11px * var(--fs));font-weight:800;letter-spacing:.1em;box-shadow:0 5px 12px rgba(29,36,48,.05)}.node-api{top:34px;right:15%}.node-prompt{bottom:35px;left:13%}.node-agent{bottom:60px;right:10%;color:var(--accent);border-color:rgba(200,121,75,.45)}.diagram-caption{position:absolute;top:calc(50% + 96px);text-align:center;color:var(--muted);font-size:calc(12px * var(--fs));line-height:1.55;letter-spacing:.04em}
.lessons-section{padding:34px 5.5% 12px}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:18px}.section-kicker{margin-bottom:8px;color:var(--muted);font-size:calc(10px * var(--fs))}h2{margin:0;color:var(--ink);font-size:calc(26px * var(--fs));letter-spacing:-.04em}.progress{margin:0;color:var(--blue);font-size:calc(13px * var(--fs));font-weight:700;white-space:nowrap}
.lesson-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.lesson-card{position:relative;min-height:166px;padding:19px 18px 16px;border:1px solid var(--line);background:rgba(255,255,255,.34);transition:transform .2s,box-shadow .2s,border-color .2s}.lesson-card.available{border-color:rgba(11,61,145,.42);background:#fff}.lesson-card.available:hover{transform:translateY(-3px);border-color:var(--blue);box-shadow:0 12px 24px rgba(11,61,145,.11)}.lesson-number{color:var(--blue);font-size:calc(12px * var(--fs));font-weight:800;letter-spacing:.12em}.lesson-status{position:absolute;top:19px;right:16px;color:var(--muted);font-size:calc(10px * var(--fs));letter-spacing:.08em}.available .lesson-status{color:var(--accent)}.lesson-phase{margin:11px 0 0;color:var(--accent);font-size:calc(10px * var(--fs));line-height:1.3;font-weight:700}.lesson-title{margin:8px 0 9px;color:var(--ink);font-size:calc(16px * var(--fs));line-height:1.35;font-weight:750;letter-spacing:-.025em}.lesson-summary{margin:0;color:var(--muted);font-size:calc(12px * var(--fs));line-height:1.55}.lesson-link{display:block;text-decoration:none;color:inherit}.lesson-card:not(.available){opacity:.72}.lesson-card:not(.available) .lesson-title{font-weight:600}
.load-error{margin:18px 0;color:#a34532;font-size:calc(13px * var(--fs))}.footer{display:flex;justify-content:space-between;margin-top:28px;padding:18px 5.5% 0;border-top:1px solid var(--line);color:var(--muted);font-size:calc(11px * var(--fs));letter-spacing:.04em}
@media (max-width:1000px){.course-home{width:min(100% - 36px,760px)}.hero{grid-template-columns:1fr;gap:20px;padding:42px 2% 30px}.hero-diagram{min-height:255px}.lessons-section{padding-left:2%;padding-right:2%}.lesson-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.footer{padding-left:2%;padding-right:2%}}
@media (max-width:680px){.course-home{width:calc(100% - 28px);padding-top:14px}.topbar{height:52px}.jsnu-logo{width:165px}.brand-label{display:none}.hero{padding-top:34px}.subtitle{font-size:calc(19px * var(--fs))}.hero-diagram{transform:scale(.82);margin:-12px 0}.lesson-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.lesson-card{min-height:135px;padding:16px 14px}.lesson-title{font-size:calc(14px * var(--fs));margin-top:18px}.section-heading{align-items:start;flex-direction:column;gap:9px}.footer{gap:10px;flex-direction:column}}