/* Online course refinement: scoped components, existing blue/violet palette. */
.hero-main-title .subtitle { margin-inline: auto; text-align: center; }
.hero-main-title { max-width: 1160px; margin-inline: auto; margin-bottom: 40px; }
.hero-main-title h1 { font-size: clamp(28px, 3.7vw, 52px); letter-spacing: .015em; text-wrap: balance; }
.course-journey { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 18px; color: #acbbd8; font-size: 13px; }
.course-journey span { color: #f472b6; }
.section.container { width: calc(100% - 64px); max-width: 1304px; }
.section > .section-title { display: block; text-align: center; }
.section > .section-title-underline { margin-inline: auto; }
.section > .subtitle { max-width: 900px; margin-inline: auto; text-align: center; }
#intro, #knowledge-visual { scroll-margin-top: 110px; }
.teaching-guide { padding: 30px; background: radial-gradient(ellipse at 100% 0,rgba(101,67,176,.12),transparent 55%),rgba(20,27,43,.75); }
.teaching-guide > .teaching-kicker, .teaching-guide > h2, .teaching-guide > .teaching-lead, .teaching-guide > .teaching-muted { text-align: center; }
.teaching-guide > .teaching-lead { max-width: 820px; margin-inline: auto; }
.teaching-guide > .teaching-links { justify-content: center; }
.course-identity { position: relative; overflow: hidden; padding: 24px; display: flex; flex-direction: column; min-height: 242px; }
.course-identity::before { content: ''; position: absolute; width: 140px; height: 140px; right: -60px; top: -65px; border-radius: 50%; background: #60a5fa; opacity: .08; pointer-events: none; }
.course-identity:nth-child(2)::before { background: #a78bfa; }
.course-identity:nth-child(3)::before { background: #f472b6; }
.course-identity .identity-icon { color: #93c5fd; font-size: 27px; margin-bottom: 18px; }
.course-identity:nth-child(2) .identity-icon { color: #c4b5fd; }
.course-identity:nth-child(3) .identity-icon { color: #f9a8d4; }
.identity-link { margin-top: auto; padding-top: 15px; color: #a9cfff; font-size: 13px; text-decoration: none; display: flex; justify-content: space-between; }
.identity-link:hover { color: #f9a8d4; }
.nav-menu { gap: clamp(14px, 2vw, 28px); }
.nav-menu a { display: inline-block; position: relative; white-space: nowrap; }
.nav-menu a.is-current { color: #f9a8d4; font-weight: 700; transform: scale(1.06); border-bottom-color: #ec4899; text-shadow: 0 0 15px rgba(236,72,153,.22); }
.nav-menu a.is-current::before { content: ''; width: 4px; height: 4px; background: #f472b6; border-radius: 50%; position: absolute; left: -9px; top: 11px; }
.mobile-nav a.is-current { color: #f9a8d4; background: rgba(236,72,153,.1); border-left: 3px solid #f472b6; }
.teaching-details summary i { margin-right: 10px; color: #b7a2fa; }
.lesson-figure { margin: 0; }
.lesson-figure img { width: 100%; height: auto; display: block; border-radius: 12px; border: 1px solid rgba(147,197,253,.25); cursor: zoom-in; }
.lesson-figure figcaption { font-size: 12px; color: #97adce; text-align: center; margin: 10px 0 16px; }
.text-companion { margin-top: 18px; border-top: 1px solid #2a354c; }
.text-companion > summary { cursor: pointer; padding: 14px 0; color: #c2d0e8; font-size: 13px; }
.text-companion[open] { padding-bottom: 10px; }
.design-check { padding: 18px; border-radius: 12px; background: rgba(59,130,246,.06); border: 1px solid rgba(96,165,250,.2); }
.design-options { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.design-options button, .light-actions button { font: inherit; font-size: 13px; background: #192337; color: #cad8ed; border: 1px solid #374463; border-radius: 9px; padding: 9px 13px; cursor: pointer; transition: background .16s,border-color .16s; }
.design-options button:hover, .light-actions button:hover:not(:disabled) { background: #25304d; border-color: #c4b5fd; }
.design-options button[aria-pressed="true"], .light-actions button[aria-pressed="true"] { border-color: #f472b6; color: #f9a8d4; background: rgba(236,72,153,.1); }
#design-feedback { min-height: 28px; color: #b5c9e9; margin-top: 14px; font-size: 13px; }
#light .lighting-scene { padding: 24px; }
#light .lighting-preview { width: min(100%, 920px); margin-inline: auto; max-height: 390px; background: #101827; transition: none; }
#lightImage, #lightTint { position: absolute; inset: 0; }
#lightImage { background-size: cover; background-position: center; }
#lightTint { pointer-events: none; mix-blend-mode: color; }
#lightTypeLabel { font-size: 13px; }
#light .lighting-scene > .tabs { justify-content: center; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
#light .tabs .tab { font: inherit; font-size: 13px; color: #b7c8e7; background: #152039; border: 1px solid #304262; border-radius: 10px; padding: 10px 17px; cursor: pointer; }
#light .tabs .tab.active { color: #f9a8d4; background: rgba(236,72,153,.12); border-color: #ed76b5; }
#light-control-dock { max-width: 920px; margin-inline: auto; }
#light .lighting-controls { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin-top: 14px; }
#light .slider-group { min-width: 0; padding: 13px 15px; background: #101a2b; border: 1px solid #2a3a54; border-radius: 12px; }
#light .slider-group label { font-size: 13px; margin-bottom: 10px; color: #c8d6eb; }
#light input.slider { height: 8px; padding: 0; border: 0; margin-block: 8px; accent-color: #bca2f9; cursor: ew-resize; }
#light .slider::-webkit-slider-thumb { width: 20px; height: 20px; background: #c4b5fd; box-shadow: 0 0 0 4px rgba(167,139,250,.1); }
#light .slider::-moz-range-thumb { width: 18px; height: 18px; background: #c4b5fd; border: 0; border-radius: 50%; }
#light .slider:disabled, #light .tab:disabled { opacity: .6; cursor: default; }
.light-sim-note { max-width: 920px; margin: 12px auto 0; color: #9caeca; font-size: 12px; }
.light-actions { max-width: 920px; margin: 18px auto 0; display: flex; flex-direction: column; gap: 12px; }
.light-presets,.light-compare-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.light-presets > span { font-size: 12px; color: #b7c8e7; margin-right: 6px; }
.light-actions button:disabled { opacity: .45; cursor: default; }
.light-feedback { max-width: 920px; margin: 14px auto 0; padding: 10px 14px; border-left: 2px solid #a78bfa; background: rgba(139,92,246,.07); color: #bbcae3; font-size: 13px; line-height: 1.8; }
.light-types-five { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 14px; }
.light-types-five > .card { min-width: 0; border-radius: 16px; padding: 18px 14px; }
.light-types-five > .card > div:first-child { flex-direction: column; align-items: flex-start !important; gap: 12px !important; }
.light-types-five > .card h5 { line-height: 1.7; }
.light-types-five > .card > div:last-child > span { padding: 4px 7px !important; }
.identity-link:focus-visible, .design-options button:focus-visible, .light-actions button:focus-visible, #light button:focus-visible, #light input:focus-visible, .nav-menu a:focus-visible { outline: 2px solid #f9a8d4; outline-offset: 4px; }
@media(max-width: 1000px) { .light-types-five { grid-template-columns: repeat(6,minmax(0,1fr)); } .light-types-five > .card { grid-column: span 2; } .light-types-five > .card:nth-child(4) { grid-column: 2/span 2; } .light-types-five > .card > div:first-child { flex-direction: row; } }
@media(max-width: 720px) { .section.container { width: calc(100% - 32px); } .teaching-guide { padding: 18px; } .course-identity { min-height: 0; padding: 20px; } .course-journey { gap: 8px; font-size: 11px; } .hero-main-title { margin-bottom: 28px; } #light .lighting-scene { padding: 14px; } #light .lighting-controls { grid-template-columns: 1fr; gap: 8px; } #light .slider-group { padding: 10px 12px; } .light-types-five { grid-template-columns: repeat(2,minmax(0,1fr)); } .light-types-five > .card,.light-types-five > .card:nth-child(4) { grid-column: auto; } .light-types-five > .card:last-child { grid-column: 1/-1; } .light-types-five > .card > div:first-child { flex-direction: column; } #light .tabs .tab { padding: 9px 11px; font-size: 12px; } .design-options { flex-direction: column; } }
@media(prefers-reduced-motion: reduce) { .nav-menu a { transition: none; } }