.learning-body { background: #f4f7f6; color: #15232c; }
.learning-topbar { align-items: center; background: #102c35; color: #fff; display: flex; justify-content: space-between; padding: 14px max(22px,7vw); }
.learning-brand { align-items: center; color: #fff; display: flex; gap: 10px; text-decoration: none; }
.learning-brand span { align-items: center; background: #0d8b7f; border-radius: 7px; display: flex; font-weight: 900; height: 36px; justify-content: center; width: 36px; }
.learning-topbar nav { display: flex; gap: 8px; }
.learning-topbar nav a { border-radius: 6px; color: #d7e7e4; padding: 8px 11px; text-decoration: none; }
.learning-topbar nav a:hover { background: rgba(255,255,255,.1); color: #fff; }
.learning-hero { background: linear-gradient(120deg,#143c43,#0d2e38 70%); color: #fff; display: grid; gap: 40px; grid-template-columns: minmax(0,1fr) 380px; min-height: 330px; overflow: hidden; padding: 54px max(22px,calc((100vw - 1220px)/2)); }
.learning-hero h1 { font-family: inherit; font-size: clamp(38px,5vw,62px); letter-spacing: -.045em; line-height: 1.02; margin: 10px 0 16px; max-width: 800px; }
.learning-hero p { color: #cbe0dc; font-size: 18px; margin: 0; max-width: 690px; }
.learning-kicker { color: #0b8479; font-size: 11px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.learning-hero .learning-kicker { color: #63e1d1; }
.learning-summary { display: flex; gap: 28px; margin-top: 28px; }
.learning-summary span { color: #b9d4d0; display: grid; font-size: 12px; text-transform: uppercase; }
.learning-summary strong { color: #fff; font-size: 22px; }
.learning-hero-visual { align-self: center; height: 230px; position: relative; }
.learning-hero-visual span { align-items: center; background: #fff; border-radius: 50%; color: #0d6f68; display: flex; font-size: 24px; font-weight: 900; height: 64px; justify-content: center; position: absolute; width: 64px; z-index: 2; }
.learning-hero-visual span:nth-child(1){left:0;top:80px}.learning-hero-visual span:nth-child(2){left:150px;top:0}.learning-hero-visual span:nth-child(3){right:0;top:125px}
.learning-hero-visual i { border: 3px solid #4cccbc; border-radius: 50%; inset: 20px 35px; position: absolute; transform: rotate(-8deg); }
.learning-hero-visual b { background: #f3c94f; border-radius: 6px; bottom: 12px; color: #17333a; left: 115px; padding: 12px 20px; position: absolute; }
.learning-wrap { margin: 0 auto; max-width: 1260px; padding: 34px 20px 60px; }
.course-selector,.lesson-catalog { margin-bottom: 42px; }
.course-selector-heading,.catalog-heading,.lesson-group-heading { align-items: end; display: flex; justify-content: space-between; }
.course-selector-heading h2,.catalog-heading h2 { font-family: inherit; font-size: 30px; letter-spacing: -.03em; margin: 4px 0 16px; }
.course-row { display: grid; gap: 12px; grid-template-columns: repeat(5,minmax(0,1fr)); }
.course-chip { align-items: center; background: #fff; border: 1px solid #dce5e2; border-radius: 9px; color: #18282f; display: flex; gap: 12px; min-height: 92px; padding: 14px; text-decoration: none; }
.course-chip:hover,.course-chip.active { border-color: #0b887d; box-shadow: 0 8px 20px rgba(16,44,53,.08); transform: translateY(-2px); }
.course-chip > span { align-items: center; background: #e5f4f1; border-radius: 7px; color: #087b71; display: flex; flex: 0 0 38px; font-weight: 900; height: 38px; justify-content: center; }
.course-chip div { display: grid; gap: 3px; }
.course-chip strong { line-height: 1.15; }
.course-chip small { color: #71807a; line-height: 1.25; }
.catalog-heading { border-bottom: 1px solid #dce5e2; margin-bottom: 22px; }
.catalog-heading p,.lesson-group-heading span { color: #71807a; }
.lesson-group-heading { margin: 26px 0 12px; }
.lesson-group-heading h3 { font-family: inherit; font-size: 21px; margin: 0; }
.lesson-grid { display: grid; gap: 14px; grid-template-columns: repeat(3,minmax(0,1fr)); }
.lesson-grid.course-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.lesson-card { background: #fff; border: 1px solid #dce5e2; border-radius: 9px; display: grid; grid-template-columns: 52px 1fr; min-height: 290px; overflow: hidden; position: relative; }
.lesson-card:hover { border-color: #8ac9c2; box-shadow: 0 12px 28px rgba(16,44,53,.09); }
.lesson-number { align-items: center; background: #edf6f4; color: #087b71; display: flex; flex-direction: column; gap: 5px; padding-top: 18px; }
.lesson-number span { font-size: 20px; font-weight: 900; }
.lesson-number small { font-size: 9px; font-weight: 800; text-transform: uppercase; writing-mode: vertical-rl; }
.lesson-card-content { padding: 18px 18px 58px; }
.lesson-area { color: #087b71; font-size: 10px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.lesson-card h3 { font-family: inherit; font-size: 20px; line-height: 1.18; margin: 8px 0 10px; }
.lesson-card h3 a { color: #17272e; text-decoration: none; }
.lesson-card p { color: #5f6d68; font-size: 14px; margin: 0 0 14px; }
.lesson-objective { border-top: 1px solid #e4eae8; display: grid; gap: 3px; padding-top: 11px; }
.lesson-objective strong { font-size: 11px; text-transform: uppercase; }
.lesson-objective span { color: #71807a; font-size: 12px; line-height: 1.35; }
.lesson-open { align-items: center; bottom: 0; color: #087b71; display: flex; font-size: 13px; font-weight: 850; justify-content: space-between; left: 52px; padding: 13px 18px; position: absolute; right: 0; text-decoration: none; }
.lesson-open span { font-size: 18px; }
.learning-error { background: #fff4ed; border: 1px solid #fed7aa; border-radius: 8px; padding: 24px; }
.tutorial-detail-body .top { box-shadow: 0 2px 10px rgba(16,44,53,.12); }
.tutorial-detail-body .tutorial-page { padding-top: 34px; }
.tutorial-detail-body .tutorial-article,
.tutorial-detail-body .tutorial-tool { border-radius: 10px; box-shadow: 0 8px 24px rgba(16,44,53,.055); }
.course-navigation { display: grid; gap: 16px; grid-template-columns: repeat(2,minmax(0,1fr)); margin: 24px 0 10px; }
.course-navigation a { background: #fff; border: 1px solid #dce5e2; border-radius: 9px; color: #17272e; display: grid; gap: 5px; padding: 18px; text-decoration: none; }
.course-navigation a:hover { border-color: #0b887d; }
.course-navigation a.next { text-align: right; }
.course-navigation small { color: #087b71; font-weight: 800; }

.tutorial-article { padding: clamp(24px,4vw,42px); }
.tutorial-article > .lead { color: #40514d; font-size: clamp(18px,2vw,21px); line-height: 1.55; max-width: 68ch; }
.tutorial-reading-meta { align-items: center; color: #5f716c; display: flex; flex-wrap: wrap; font-size: 12px; gap: 8px 16px; margin: 18px 0 4px; }
.tutorial-reading-meta > span { background: #edf6f4; border-radius: 999px; color: #176a63; font-weight: 800; padding: 6px 10px; }
.tutorial-reading-meta label { align-items: center; display: flex; font-weight: 750; gap: 8px; margin-left: auto; }
.tutorial-reading-meta progress { accent-color: #0b887d; height: 9px; width: 150px; }
.lesson-session-plan { background: #fff; border: 1px solid #d7e5e2; border-radius: 10px; margin: 22px 0; padding: 17px 19px; }
.lesson-session-plan > strong { color: #17383d; display: block; font-size: 13px; letter-spacing: .05em; margin-bottom: 12px; text-transform: uppercase; }
.lesson-session-plan ol { display: grid; gap: 10px; grid-template-columns: repeat(4,minmax(0,1fr)); list-style: none; margin: 0; padding: 0; }
.lesson-session-plan li { align-items: flex-start; display: flex; gap: 9px; min-width: 0; }
.lesson-session-plan li > span { align-items: center; background: #e5f4f1; border-radius: 50%; color: #087b71; display: flex; flex: 0 0 27px; font-size: 12px; font-weight: 900; height: 27px; justify-content: center; }
.lesson-session-plan li div { display: grid; gap: 2px; }
.lesson-session-plan b { color: #17383d; font-size: 13px; }
.lesson-session-plan small { color: #60736e; font-size: 11px; line-height: 1.35; }
.tutorial-objective { font-size: 17px; line-height: 1.55; }
.lesson-visual { background: #eef7f5; border: 1px solid #cce3de; border-radius: 10px; color: #17383d; margin: 24px 0 26px; max-width: 650px; overflow: hidden; }
.lesson-visual svg { display: block; height: auto; max-height: 245px; width: 100%; }
.lesson-visual figcaption { border-top: 1px solid #cce3de; color: #42605b; font-size: 12px; line-height: 1.4; padding: 8px 12px; }
.lesson-visual svg text { fill: #17383d; font-family: Inter,system-ui,sans-serif; font-size: 20px; font-weight: 800; }
.lesson-visual-kicker { fill: #087b71; font-family: ui-monospace,SFMono-Regular,Consolas,monospace; font-size: 25px; font-weight: 900; }
.lesson-diagram-line { fill: none; stroke: #315b60; stroke-linecap: round; stroke-linejoin: round; stroke-width: 8; }
.lesson-diagram-accent { fill: none; stroke: #0b9b8e; stroke-linecap: round; stroke-linejoin: round; stroke-width: 11; }
.lesson-diagram-fill,.lesson-sample-dots circle,.lesson-node-dots circle { fill: #f2c94c; stroke: #fff; stroke-width: 4; }
.lesson-diagram-soft { fill: #d6ebe7; stroke: #31736c; stroke-linejoin: round; stroke-width: 6; }
.lesson-diagram-screen { fill: #16383d; }
.lesson-visual svg .lesson-diagram-value { fill: #0b887d; font-family: ui-monospace,SFMono-Regular,Consolas,monospace; font-size: 33px; }
.lesson-material-bars rect,.lesson-block-chain rect { fill: #d6ebe7; stroke: #31736c; stroke-width: 5; }
.lesson-material-bars rect:nth-child(2) { fill: #fff; stroke-dasharray: 8 8; }
.lesson-material-bars rect:nth-child(3) { fill: #bfe4dd; }
.lesson-resistor-body { fill: #e5c184; stroke: #8b6b3f; stroke-width: 6; }
.lesson-resistor-static-bands rect:nth-child(1) { fill: #dc2626; }
.lesson-resistor-static-bands rect:nth-child(2) { fill: #7c3aed; }
.lesson-resistor-static-bands rect:nth-child(3) { fill: #854d0e; }
.lesson-resistor-static-bands rect:nth-child(4) { fill: #d4a017; }
.lesson-diagram-grid { fill: none; stroke: #a9c9c3; stroke-width: 2; }
.lesson-logic-bits text { fill: #087b71; font-family: ui-monospace,SFMono-Regular,Consolas,monospace; font-size: 48px; }
.lesson-magnitude-circles circle { fill: rgba(11,136,125,.12); stroke: #0b887d; stroke-width: 5; }
.lesson-magnitude-circles text { fill: #0a6e66; font-size: 45px; }
.lesson-project-nodes circle { fill: #f2c94c; stroke: #fff; stroke-width: 5; }
.lesson-project-nodes + text,.lesson-project-nodes ~ text { font-size: 20px; }
.lesson-gauges path { fill: none; stroke: #31736c; stroke-linecap: round; stroke-width: 16; }
.lesson-visual svg .lesson-ohm-letter { fill: #087b71; font-size: 48px; font-weight: 900; }
.tutorial-tool[data-tool="resistor"] .component-visual { background: linear-gradient(145deg,#f6faf9,#e6f1ef); }
.tutorial-tool[data-tool="resistor"] .resistor-bands rect { stroke: rgba(15,23,42,.55); stroke-width: 1.5; transition: fill .18s ease; }
.tutorial-tool[data-tool="resistor"] [data-resistor-value] { fill: #087b71; font-family: ui-monospace,SFMono-Regular,Consolas,monospace; font-size: 18px; font-weight: 900; }
.resistor-band-preview { align-items: center; display: flex; gap: 7px; }
.resistor-band-preview::before { background: var(--band-color,#e5e7eb); border: 1px solid #74827e; border-radius: 4px; content: ''; height: 14px; width: 28px; }
.tutorial-detail-body .lesson-content { border-top: 0; margin: 0 auto; max-width: 72ch; padding: 0; }
.lesson-reading > h2 { color: #16333a; font-family: inherit; font-size: 25px; letter-spacing: -.02em; margin: 34px 0 16px; }
.lesson-outline { background: #f7faf9; border: 1px solid #d7e5e2; border-left: 5px solid #0b887d; border-radius: 10px; margin: 0 0 32px; padding: 18px 22px; }
.lesson-outline strong { color: #17383d; display: block; font-size: 13px; letter-spacing: .05em; margin-bottom: 9px; text-transform: uppercase; }
.lesson-outline ol { columns: 2; gap: 30px; margin: 0; padding-left: 22px; }
.lesson-outline li { break-inside: avoid; color: #52706a; font-size: 14px; line-height: 1.45; margin: 5px 0; padding-left: 3px; }
.lesson-outline a { color: #176a63; font-weight: 750; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.lesson-outline a:hover { color: #064e49; }
.lesson-reading > p { color: #263a3f; font-size: 18px; line-height: 1.72; margin: 0 0 1.25em; }
.lesson-reading > .lesson-opening { color: #193239; font-size: 19px; }
.lesson-explanation { margin: 34px 0 20px; }
.lesson-explanation h2 { color: #16333a; font-family: inherit; font-size: 24px; letter-spacing: -.02em; margin: 0 0 10px; }
.lesson-explanation p { color: #263a3f; font-size: 18px; line-height: 1.72; margin: 0; }
.lesson-key-points,.lesson-review { border: 1px solid #c9e1dc; border-radius: 10px; margin: 28px 0; padding: 20px 22px; }
.lesson-key-points { background: #edf8f6; }
.lesson-review { background: #f4f1ff; border-color: #ddd6fe; }
.lesson-key-points h2,.lesson-review h2 { color: #17383d; font-family: inherit; font-size: 19px; margin: 0 0 10px; }
.lesson-key-points ul,.lesson-review ol { display: grid; gap: 8px; margin: 0; padding-left: 22px; }
.lesson-key-points li,.lesson-review li { color: #29443f; font-size: 16px; line-height: 1.55; padding-left: 4px; }
.lesson-misconception { background: #fff7ed; border: 1px solid #fed7aa; border-left: 5px solid #f97316; border-radius: 9px; margin: 26px 0; padding: 16px 18px; }
.lesson-misconception strong { color: #9a3412; display: block; font-size: 13px; letter-spacing: .04em; margin-bottom: 4px; text-transform: uppercase; }
.lesson-misconception p { color: #59351f; font-size: 16px; line-height: 1.6; margin: 0; }
.lesson-practice { align-items: flex-start; background: #eff8f5; border: 1px solid #cde4de; border-left: 5px solid #0b887d; border-radius: 9px; display: flex; gap: 13px; margin: 30px 0 4px; padding: 18px; }
.lesson-practice > span { align-items: center; background: #0b887d; border-radius: 50%; color: #fff; display: flex; flex: 0 0 30px; font-weight: 900; height: 30px; justify-content: center; }
.lesson-practice h2 { font-family: inherit; font-size: 18px; margin: 2px 0 5px; }
.lesson-practice p { color: #29443f; font-size: 17px; line-height: 1.62; margin: 0; }
.tutorial-tool { margin-left: auto; margin-right: auto; max-width: 880px; }
.lesson-resources { border-top: 1px solid #dce7e4; margin: 38px auto 0; max-width: 72ch; padding-top: 26px; }
.lesson-resources h2 { color: #17383d; font-family: inherit; font-size: 22px; margin: 5px 0 13px; }
.lesson-resources > div { display: grid; gap: 10px; }
.lesson-resources a { align-items: center; background: #edf8f6; border: 1px solid #c9e1dc; border-radius: 9px; color: #17383d; display: grid; gap: 2px; grid-template-columns: 1fr auto; padding: 15px 17px; text-decoration: none; }
.lesson-resources a:hover { border-color: #0b887d; transform: translateY(-1px); }
.lesson-resources a strong,.lesson-resources a small { grid-column: 1; }
.lesson-resources a small { color: #526b65; line-height: 1.4; }
.lesson-resources a > span { color: #087b71; font-size: 22px; grid-column: 2; grid-row: 1/3; }

@media(max-width:980px){.learning-hero{grid-template-columns:1fr}.learning-hero-visual{display:none}.course-row{grid-template-columns:repeat(2,minmax(0,1fr))}.lesson-grid,.lesson-grid.course-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.lesson-session-plan ol{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.learning-topbar{align-items:flex-start;gap:12px;overflow-x:auto}.learning-topbar nav{white-space:nowrap}.learning-hero{min-height:auto;padding-bottom:38px;padding-top:38px}.learning-hero h1{font-size:38px}.learning-summary{gap:18px}.course-selector-heading,.catalog-heading{align-items:flex-start;flex-direction:column}.course-row{display:flex;overflow-x:auto;padding-bottom:8px}.course-chip{flex:0 0 240px}.lesson-grid,.lesson-grid.course-grid{grid-template-columns:1fr}.lesson-card{min-height:270px}.learning-wrap{padding-left:14px;padding-right:14px}.course-navigation{grid-template-columns:1fr}.course-navigation a.next{text-align:left}}
@media(max-width:620px){.tutorial-detail-body .tutorial-page{padding-left:10px;padding-right:10px;padding-top:20px}.tutorial-article{padding:18px}.tutorial-article h1{font-size:clamp(32px,10vw,44px);hyphens:auto}.tutorial-reading-meta{align-items:flex-start;flex-direction:column}.tutorial-reading-meta label{margin-left:0}.tutorial-reading-meta progress{width:130px}.lesson-visual{margin-left:0;margin-right:0}.lesson-visual svg{max-height:170px}.lesson-visual-kicker{font-size:22px}.lesson-reading>h2{font-size:23px}.lesson-reading>p,.lesson-reading>.lesson-opening{font-size:17px;line-height:1.68}.lesson-practice{padding:14px}.lesson-practice p{font-size:16px}}
@media(max-width:620px){.lesson-outline{padding:15px 17px}.lesson-outline ol{columns:1}}
@media(max-width:620px){.lesson-session-plan ol{grid-template-columns:1fr}}