/* ==========================================================================
   Jolok Banarjee — Unified Production Stylesheet
   Consolidated from style.css, modern-site.css, learning-refresh.css,
   reading-redesign.css, and v43-enhancements.css
   ========================================================================== */
* { box-sizing: border-box; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--blue); }
button, input, select { font: inherit; }
button, a, input, select { outline-offset: 5px; }
.brand { font-family: Manrope,sans-serif; font-size: 38px; font-weight: 800; display: flex; align-items: center; letter-spacing: -3px; }
.brand>span { color: var(--blue); }
nav, .account { display: flex; gap: 26px; align-items: center; font-size: 14px; font-weight: 600; }
.account { gap: 18px; }
.account form { margin: 0; }
.button.small { padding: 11px 18px; font-size: 14px; }
.subtle { background: none; border: 0; cursor: pointer; }
h1 em { font-style: normal; color: var(--blue); }
.hero p { max-width: 440px; color: var(--muted); font-size: 17px; line-height: 1.8; }
.hero-note { font-size: 13px; color: var(--muted); }
.hero-note span { margin: 0 14px; color: #b2b8ca; }
.editor { background: #172135; color: #d5dfed; border-radius: 13px; box-shadow: 12px 20px 0 #eff0ff; transform: rotate(-1deg); font-size: 13px; }
.editor-bar { display: flex; justify-content: space-between; padding: 17px 21px; border-bottom: 1px solid #30394d; font-size: 11px; color: #8592aa; }
.editor-bar>span:first-child { color: #8491a8; letter-spacing: 3px; }
.editor-code { font-family: monospace; padding: 24px 16px; line-height: 2.25; font-size: 13px; overflow: auto; white-space: pre; }
.editor-code i { color: #586783; font-style: normal; margin-right: 22px; }
.purple { color: #c7a2ff; }
.blue { color: #81baff; }
.green { color: #96d9b4; }
.muted { color: #91a0b7; }
.terminal { border-top: 1px solid #30394d; padding: 17px 24px; }
.terminal>span { font-size: 10px; letter-spacing: 2px; color: #91a0b7; }
.terminal p { font-family: monospace; font-size: 13px; color: #d5dfed; margin: 10px 0; }
.terminal b, .blink { color: #96d9b4; }
.editor-label { padding: 12px 24px; background: #222e46; font-size: 12px; border-radius: 0 0 13px 13px; color: #bcc8dd; }
h2 { font-size: 32px; margin: 12px 0 0; }
h3 { font-size: 21px; margin: 13px 0; }
.course-art strong span { color: #e3b449; }
.art-1 { background: #e0f2ed; color: #286b60; }
.art-2 { background: #f0e8ff; color: #6b409d; }
.art-2 strong { font-size: 24px; }
.meta { font-size: 12px; color: var(--muted); display: flex; gap: 8px; align-items: center; }
.sample { font-size: 10px; background: #f1f2f6; padding: 2px 7px; border-radius: 4px; margin-left: auto; }
.resource-band h2 { margin-bottom: 32px; }
.three { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
.three p { font-size: 15px; }
footer>div { display: flex; gap: 22px; }
.page-title { font-size: 44px; }
.filters input { flex: 1; }
input:not([type=radio]), select { padding: 12px 14px; border: 1px solid #e5e7eb; border-radius: 5px; background: white; max-width: 100%; }
.lesson-layout aside h2 { font-size: 24px; }
.lesson-link span { color: var(--muted); }
.sample-note { font-size: 13px; padding: 14px; background: #fff7e5; border-radius: 6px; }
.empty-video>span { font-size: 40px; color: #aaaefe; }
.empty-video p { color: #b0bad0; }
.empty-video h3 { margin: 0; }
.empty-video a { font-size: 14px; color: #c5c9ff; }
.prose a, .auth a, .quiz a { color: var(--blue); text-decoration: underline; }
.prose pre { background: #18243b; color: #e5ebf6; border-radius: 8px; padding: 50px 22px 22px; position: relative; overflow: auto; font-size: 14px; }
.copy { position: absolute; right: 12px; top: 10px; background: #34425d; color: white; border: 0; border-radius: 4px; padding: 4px 12px; cursor: pointer; }
.prose table { border-collapse: collapse; width: 100%; display: block; overflow: auto; }
.prose td, .prose th { border: 1px solid var(--line); padding: 10px; }
.prose img, .content-image { max-width: 100%; height: auto; }
.quiz h2 { font-size: 25px; margin-bottom: 22px; }
fieldset { border: 0; padding: 0; margin: 0 0 25px; }
legend { font-weight: 600; margin-bottom: 12px; }
fieldset label { display: flex; gap: 12px; padding: 10px; margin: 6px 0; background: white; border: 1px solid var(--line); border-radius: 5px; }
input[type=radio] { accent-color: var(--blue); }
.reading { max-width: 880px; }
.lead { font-size: 20px; }
.tabs { display: flex; flex-wrap: wrap; gap: 24px; margin: 28px 0; }
.auth label { display: block; color: var(--ink); }
.auth input { width: 100%; }
.helptext, .auth li { font-size: 13px; color: var(--muted); }
.errorlist { color: #a72438!important; }
.empty { padding: 25px; grid-column: 1/-1; }
progress { width: 100%; accent-color: var(--blue); }
@media(max-width:1050px) {
  header { flex-wrap: wrap; gap: 15px; }
  nav { order: 3; width: 100%; justify-content: center; }
  .hero { gap: 30px; }
  h1 { font-size: 50px; }
  .editor-code { font-size: 11px; }
  .cards { gap: 15px; }
  .card-body { padding: 18px; }
  .three { gap: 16px; }
  footer { flex-wrap: wrap; }
  .lesson-layout { grid-template-columns: 230px minmax(0,1fr); gap: 25px; }
}
@media(max-width:720px) {
  header { padding: 18px 5%; }
  .brand { font-size: 30px; }
  .brand b { font-size: 15px; }
  .brand small { font-size: 8px; }
  .account { font-size: 12px; gap: 10px; }
  .button.small { padding: 8px 10px; font-size: 12px; }
  nav { gap: 19px; font-size: 12px; flex-wrap: wrap; }
  .hero { grid-template-columns: 1fr; padding: 40px 6% 50px; gap: 35px; }
  h1 { font-size: 48px; }
  .hero p { font-size: 16px; }
  .editor { transform: none; }
  .editor-code { font-size: 12px; }
  .cards, .three { grid-template-columns: 1fr; }
  .section { padding: 40px 6%; }
  .section-heading { align-items: start; }
  h2 { font-size: 27px; }
  .section-heading>a { font-size: 12px; white-space: nowrap; margin-top: 25px; }
  .resource-band { padding: 35px 6%; }
  .course-art { height: 190px; }
  .filters { flex-wrap: wrap; }
  .filters input { flex-basis: 100%; }
  .lesson-layout { grid-template-columns: 1fr; }
  .lesson-layout aside { border-bottom: 1px solid var(--line); padding-bottom: 25px; }
  .page-title { font-size: 35px; }
  .auth { margin: 30px 5%; padding: 25px; }
  .actions { gap: 17px; }
  .actions .button { padding: 13px 18px; }
  .text-link { font-size: 13px; }
  footer { padding: 30px 6%; }
  .topic-strip { font-size: 10px; }
  .quiz { padding: 20px; }
}
.brand b { letter-spacing: -.5px; line-height: 1.4; margin-left: 16px; font-size: 17px; }
nav { gap: 18px; }
.hero { margin: auto; display: grid; grid-template-columns: 1fr 1fr; align-items: center; background: #f3f7fa; max-width: none; gap: 64px; padding: 65px 6%; }
h1 { margin: 23px 0; font-weight: 800; font-size: clamp(2.5rem,4.6vw,4.2rem); letter-spacing: -2px; }
.hero>div>p { max-width: 550px; }
.research-panel { background: #0b2035; color: #fff; border-radius: 16px; padding: 34px; border-top: 4px solid #04AA6D; }
.research-panel .eyebrow, .research-panel>a { color: #04AA6D; }
.research-panel h2 { font-size: 32px; margin: 18px 0 25px; }
.research-item { display: flex; gap: 20px; border-top: 1px solid #314353; padding: 18px 0; }
.research-item>span { color: #04AA6D; font-family: monospace; }
.research-item h3 { font-size: 18px; margin: 0; }
.research-item p { font-size: 14px; color: #b9cbd8; margin: 8px 0 0; }
.topic-strip { display: flex; justify-content: space-around; flex-wrap: wrap; gap: 20px; padding: 24px 5%; border-block: 1px solid var(--line); letter-spacing: 1.7px; font-weight: 700; color: #38576b; font-size: 12px; background: white; }
.art-1, .art-2, .art-3, .art-4, .art-5 { background: #e8eff5; color: #234158; }
.lesson-layout article { min-width: 0; }
.lesson-layout .page-title { font-size: 36px; }
.video { border: 0; border-radius: 10px; background: #18243b; color: white; display: block; width: 100%; max-width: 720px; aspect-ratio: 16/9; height: auto; margin: 22px 0; }
.empty-video { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; aspect-ratio: auto; min-height: 130px; }
.prose { overflow-wrap: anywhere; font-size: 17px; line-height: 1.9; max-width: 76ch; }
.prose p { color: #304658; }
.lesson-pagination>div:last-child { text-align: right; }
.lesson-pagination small, .lesson-pagination strong { display: block; font-size: 14px; }
.lesson-pagination small { color: var(--blue); margin-bottom: 8px; }
.release-note { padding: 14px; border-left: 3px solid var(--blue); font-size: 14px; background: var(--surface); }
.downloads { margin: 30px 0; padding: 22px; border: 1px solid var(--line); border-radius: 8px; }
.downloads h2 { font-size: 22px; margin-bottom: 15px; }
.downloads>a { display: flex; justify-content: space-between; gap: 20px; padding: 10px 0; border-top: 1px solid var(--line); color: var(--blue); }
.credential { padding: 36px; border: 1px solid var(--line); border-top: 5px solid var(--blue); border-radius: 12px; background: var(--surface); }
.credential-id { overflow-wrap: anywhere; font-size: 14px; }
.actions { display: flex; align-items: center; gap: 25px; margin: 29px 0; flex-wrap: wrap; }
.secondary { margin-block: 20px; background: #e0f0f4; color: #04AA6D; }
.resource-band { padding: 54px 7%; border-block: 1px solid var(--line); background: #f3f7fa; }
.meta, .card-foot, .sample, .course-art>span, .course-art small { font-size: 12px; }
.brand small { display: block; color: var(--muted); margin-top: 4px; font-size: 12px; letter-spacing: .7px; white-space: normal; }
.quiz legend { width: 100%; }
.quiz legend .prose p { margin: 6px 0; }
.quiz legend .prose { font-weight: 400; }
mjx-container { overflow-x: auto; overflow-y: hidden; max-width: 100%; }
@media(max-width:900px) {
  header { flex-wrap: wrap; }
  header nav { order: 3; width: 100%; flex-wrap: wrap; justify-content: center; }
  .hero { gap: 30px; }
  .brand small { font-size: 12px; }
  .lesson-layout { grid-template-columns: 220px minmax(0,1fr); gap: 24px; }
}
@media(max-width:720px) {
  .hero, .lesson-layout { grid-template-columns: 1fr; }
  .hero { padding: 40px 6%; }
  .research-panel { padding: 25px; }
  .brand b { font-size: 15px; }
  .brand-logo { width: 40px; height: 40px; }
  .account, nav, .button.small { font-size: 14px; }
  .brand small { font-size: 12px; max-width: 180px; }
  .lesson-pagination { grid-template-columns: 1fr 1fr; gap: 8px; }
  .lesson-pagination>div { padding: 12px; }
  .credential { padding: 22px; }
  .lesson-layout .page-title { font-size: 30px; }
  .topic-strip { font-size: 12px; }
  .section-heading>a { white-space: normal; font-size: 14px; }
  .auth { overflow-wrap: anywhere; }
}
@media(prefers-reduced-motion:reduce) {
  * { transition: none!important; }
}
.menu-bars { width: 18px; height: 12px; border-block: 2px solid currentColor; position: relative; }
.menu-bars:after { content: ''; position: absolute; left: 0; right: 0; top: 4px; border-top: 2px solid currentColor; }
.intro-hero { display: block; text-align: center; position: relative; overflow: hidden; padding: 80px 6% 60px; background-color: #f3f8fb; background-image: linear-gradient(#dbe8f244 1px,transparent 1px),linear-gradient(90deg,#dbe8f244 1px,transparent 1px); background-size: 48px 48px; }
.intro-content { position: relative; max-width: 960px; margin: auto; }
.intro-content h1 { font-size: clamp(2.6rem,5.4vw,5rem); line-height: 1.12; letter-spacing: -2.5px; margin: 24px 0; }
.intro-content h1 em { display: inline-block; position: relative; }
.intro-content h1 em:after { content: ''; height: 3px; background: #04AA6D; position: absolute; left: 0; right: 0; bottom: -8px; transform-origin: left; animation: intro-line 1.8s ease both; }
.intro-content>p:not(.eyebrow) { max-width: 660px; margin: 26px auto; color: #42596b; }
.intro-content .actions { justify-content: center; margin: 30px 0; }
.intro-subjects { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.intro-subjects span { padding: 7px 14px; border: 1px solid #e2e8f0; border-radius: 30px; background: #fff; font-size: 14px; color: #355c71; }
.intro-reveal { animation: intro-enter .85s ease both; }
.intro-reveal:nth-child(2) { animation-delay: .12s; }
.intro-reveal:nth-child(3) { animation-delay: .24s; }
.intro-reveal:nth-child(4) { animation-delay: .36s; }
.intro-reveal:nth-child(5) { animation-delay: .48s; }
@keyframes intro-enter { from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)} }
@keyframes intro-line { from{transform:scaleX(0)}to{transform:scaleX(1)} }
.breadcrumbs { max-width: 1260px; margin: auto; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 12px; padding: 24px 4%; font-size: 14px; color: #587081; }
.lesson-layout { display: grid; justify-content: center; padding: 0 4% 50px; max-width: 1260px; grid-template-columns: 260px minmax(0,1fr); gap: 30px; align-items: start; }
.course-overview { padding: 24px 20px 18px; border-bottom: 1px solid var(--line); }
.course-overview h2 { font-size: 22px!important; line-height: 1.35; }
.course-overview p { font-size: 14px; margin: 10px 0 16px; }
.progress-label { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 6px; }
.course-overview small { font-size: 12px; color: var(--muted); }
.course-overview progress { height: 7px; display: block; margin: 8px 0; }
.course-outline summary { cursor: pointer; font-size: 14px; font-weight: 700; padding: 18px 20px; background: #fbfdff; }
.lesson-list { padding: 0 10px 12px; max-height: 50vh; overflow-y: auto; }
.lesson-link .lesson-number { font-size: 12px; min-width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.lesson-link.active>span:last-child { color: #04AA6D; font-weight: 600; }
.course-extras { padding: 0 20px 20px; }
.course-extras .button { font-size: 14px; padding: 10px 14px; }
.lesson-article { background: white; padding: 34px; border: 1px solid var(--line); border-radius: 12px; }
.lesson-heading>p { font-size: 14px; margin-bottom: 0; }
.lesson-body h2 { font-size: 26px; }
.lesson-player>a { display: block; text-align: right; margin-right: 16px; font-size: 13px; }
.download-actions .button { margin: 14px 0 0; font-size: 14px; }
.quiz-section { scroll-margin-top: 24px; }
.quiz-heading>p { font-size: 14px; }
.question-card legend+.answer-option, .question-card legend+label { clear: both; }
.question-card legend .prose { font-size: 16px; line-height: 1.7; }
.answer-option input { width: 17px; height: 17px; flex-shrink: 0; }
.quiz-result { background: #eaf7f2; border: 1px solid #acd9c6; border-radius: 10px; padding: 24px; scroll-margin-top: 20px; margin-top: 30px; }
.quiz-result.retry { background: #fff8eb; border-color: #e4cf9e; }
.quiz-result p { font-size: 15px; }
.quiz-result details { border-top: 1px solid #00000018; padding: 12px 0; }
.quiz-result summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.quiz-result:focus { outline: 2px solid #04AA6D; outline-offset: 3px; }
.quiz-error { color: #a52432!important; }
.button:disabled { opacity: .65; cursor: wait; }
.lesson-pagination { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 40px 0; align-items: stretch; margin-bottom: 0; font-size: 14px; }
.lesson-pagination>div { border: 1px solid var(--line); border-radius: 8px; padding: 18px; background: #fff; }
.credential-copy { margin: 24px 0; border: 1px solid var(--line); border-radius: 8px; padding: 16px; }
.credential-copy summary { cursor: pointer; font-weight: 600; }
.copy-field { margin: 16px 0; }
.copy-field label { display: block; font-size: 13px; margin-bottom: 5px; }
.copy-field>div { display: flex; gap: 8px; }
.copy-field input { min-width: 0; flex: 1; width: 100%; font-size: 14px; }
.copy-field button { font-size: 14px; padding: 8px 12px; border: 1px solid var(--line); background: var(--surface); border-radius: 6px; cursor: pointer; }
@media(max-width:1100px) {
  .site-header { flex-wrap: wrap; padding: 16px 5%; gap: 0; justify-content: space-between; }
  .js .menu-toggle { display: flex; }
  .site-navigation { width: 100%; flex-direction: column; align-items: stretch; gap: 0; border-top: 1px solid var(--line); margin-top: 16px; padding-top: 10px; }
  .js .site-navigation { display: none; }
  .js .site-navigation.is-open { display: flex; }
  .site-header nav { display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: 3px; font-size: 15px; order: initial; }
  .site-header nav a { padding: 12px; border-radius: 6px; }
  .site-header nav a:hover { background: var(--surface); }
  .site-header .account { display: flex; justify-content: flex-start; border-top: 1px solid var(--line); padding: 16px 12px 4px; margin-top: 8px; font-size: 15px; }
  .site-header .account>a:not(.button) { padding: 10px 0; }
  .lesson-layout { grid-template-columns: 220px minmax(0,1fr); gap: 20px; }
  .lesson-article { padding: 25px; }
  .lesson-heading .page-title { font-size: 30px; }
}
@media(max-width:760px) {
  .site-header .brand b { font-size: 16px; margin-left: 10px; }
  .site-header .brand small { font-size: 12px; max-width: none; }
  .site-header .brand-logo { width: 38px; height: 38px; }
  .site-header nav { grid-template-columns: 1fr; }
  .site-header nav a { padding: 11px 8px; min-height: 44px; }
  .intro-hero { padding: 50px 6% 38px; }
  .intro-content h1 { font-size: clamp(2.35rem,8vw,3.5rem); letter-spacing: -1.4px; }
  .intro-content .eyebrow { font-size: 12px; line-height: 1.8; }
  .intro-content>p:not(.eyebrow) { font-size: 16px; }
  .intro-subjects span { font-size: 13px; padding: 6px 10px; }
  .lesson-layout { grid-template-columns: 1fr; padding: 0 4% 25px; }
  .lesson-layout aside { position: static; padding: 0; border-bottom: 1px solid var(--line); }
  .course-overview { padding: 18px; }
  .course-overview h2 { font-size: 19px!important; }
  .course-overview p { margin-bottom: 8px; }
  .course-extras { padding: 0 18px 14px; }
  .course-extras:empty { display: none; }
  .course-extras .release-note { margin-bottom: 0; font-size: 13px; }
  .course-outline summary { padding: 16px 18px; }
  .lesson-list { max-height: 300px; }
  .lesson-article { padding: 22px 18px; }
  .lesson-heading .page-title { font-size: 28px; }
  .breadcrumbs { font-size: 13px; padding: 18px 4%; gap: 8px; }
  .lesson-body { font-size: 16px; }
  .quiz { padding: 20px 16px; }
  .quiz-result { padding: 20px 16px; }
  .question-card { margin: 18px 0; }
  .lesson-pagination { gap: 8px; }
  .lesson-pagination small, .lesson-pagination strong { font-size: 13px; }
  .lesson-pagination>div { padding: 12px 10px; }
  .download-actions .button { width: 100%; }
  footer .brand small { font-size: 12px; }
  .intro-content .actions { gap: 20px; }
}
@media(prefers-reduced-motion:reduce) {
  .intro-reveal, .intro-content h1 em:after { animation: none!important; opacity: 1; transform: none; }
  * { scroll-behavior: auto!important; }
}
.quiz.completion-only>p { font-size: 13px; margin: 10px 0 0; }
.quiz-result h2 { margin: 0 0 10px; font-size: 20px; }
.quiz-result>p { font-size: 14px; }
.home-intro { background: #102b3e; color: #fff; padding: 60px 6%; border-bottom: 4px solid #04AA6D; }
.home-intro-inner { max-width: 1180px; margin: auto; display: grid; grid-template-columns: 1.3fr 1fr; gap: 70px; align-items: center; }
.intro-byline { font-size: 15px; color: #fff; margin: 0 0 24px; font-weight: 600; }
.intro-byline span { display: block; font-size: 13px; font-weight: 400; color: #a7c5d4; margin-top: 4px; }
.home-intro h1 { font-size: clamp(2.3rem,4.2vw,3.8rem); line-height: 1.15; letter-spacing: -1.7px; margin: 0 0 23px; }
.home-intro h1 em { font-style: normal; color: #86dce5; }
.intro-description { color: #d0dfe8!important; font-size: 16px; line-height: 1.85; max-width: 570px; margin: 0 0 26px; }
.home-intro .button { background: #d5f3f6; color: #103d4b; padding: 12px 20px; font-size: 14px; }
.home-intro .button:hover { background: #b4e8ee; }
.intro-footnote { color: #a7c5d4; font-size: 12px; margin: 22px 0 0; }
.learning-paths>h2 { font-size: 15px; font-weight: 500; color: #bbd2df; letter-spacing: 0; margin: 22px 0 8px; }
.learning-path { display: flex; gap: 20px; align-items: start; border-bottom: 1px solid #476070; padding: 23px 0; color: white; transition: padding-left .2s; }
.learning-path:hover { color: #9de1ea; padding-left: 8px; }
.path-index { font-family: monospace; color: #86dce5; font-size: 13px; padding-top: 3px; }
.learning-path h3 { font-size: 20px; font-weight: 600; margin: 0 0 7px; letter-spacing: -.3px; }
.learning-path p { font-size: 14px; margin: 0; color: #bbd2df; }
.home-intro-copy { animation: intro-enter .7s ease both; }
.learning-paths { border-top: 1px solid #476070; animation: intro-enter .7s .15s ease both; }
.tutorials-page { max-width: 1250px; }
.tutorials-heading { max-width: 690px; margin-bottom: 30px; }
.tutorials-heading .page-title { margin: 16px 0; }
.tutorials-heading p { font-size: 16px; }
.tutorial-filters { display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 10px; margin: 26px 0 42px; }
.tutorial-filters a { border: 1px solid var(--line); padding: 9px 15px; border-radius: 7px; font-size: 14px; background: #fff; }
.tutorial-filters a[aria-current=page] { background: #102b3e; color: #fff; border-color: #102b3e; }
.tutorial-group { margin: 35px 0 48px; }
.tutorial-group-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); padding-bottom: 18px; margin-bottom: 20px; }
.tutorial-group-heading h2 { font-size: 25px; margin: 0; }
.tutorial-group-heading>span { font-size: 13px; color: var(--muted); }
.tutorial-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.tutorial-card { padding: 24px; border: 1px solid var(--line); border-radius: 10px; background: #fff; display: flex; flex-direction: column; transition: border-color .2s; }
.tutorial-card:hover { border-color: #04AA6D; color: var(--ink); }
.tutorial-meta { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: #536f80; }
.tutorial-card h3 { font-size: 21px; line-height: 1.35; margin: 20px 0 10px; }
.tutorial-card p { font-size: 14px; margin: 0 0 24px; }
.tutorial-open { font-size: 14px; color: #04AA6D; margin-top: auto; font-weight: 600; }
.tutorial-empty { padding: 32px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.tutorial-empty h2 { font-size: 24px; }
.tutorial-empty .text-link { display: inline-block; margin-left: 18px; }
@media(max-width:1200px) {
  .site-header { flex-wrap: wrap; padding: 16px 5%; gap: 0; justify-content: space-between; }
  .js .menu-toggle { display: flex; }
  .site-navigation { width: 100%; flex-direction: column; align-items: stretch; gap: 0; border-top: 1px solid var(--line); margin-top: 16px; padding-top: 10px; }
  .js .site-navigation { display: none; }
  .js .site-navigation.is-open { display: flex; }
  .site-header nav { display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: 3px; font-size: 15px; order: initial; }
  .site-header nav a { padding: 12px; border-radius: 6px; }
  .site-header .account { display: flex; justify-content: flex-start; border-top: 1px solid var(--line); padding: 16px 12px 4px; margin-top: 8px; font-size: 15px; }
}
@media(max-width:900px) {
  .home-intro-inner { gap: 35px; }
  .tutorial-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(max-width:760px) {
  .home-intro { padding: 38px 6%; }
  .home-intro-inner { grid-template-columns: 1fr; gap: 32px; }
  .home-intro h1 { font-size: 2.5rem; letter-spacing: -1px; }
  .learning-path { padding: 18px 0; }
  .learning-path h3 { font-size: 18px; }
  .learning-paths>h2 { margin-top: 18px; }
  .tutorial-grid { grid-template-columns: 1fr; }
  .tutorial-filters { justify-content: flex-start; }
  .tutorial-group-heading h2 { font-size: 23px; }
  .site-header nav { grid-template-columns: 1fr; }
  .quiz .completion-button { font-size: 14px; padding: 9px 14px; }
}
@media(prefers-reduced-motion:reduce) {
  .home-intro-copy, .learning-paths { animation: none!important; }
  .learning-path { transition: none; }
}
.course-overview .enrollment-badge { margin: 0 0 16px; }
.enroll-form .button { font-size: 13px; width: 100%; padding: 10px; }
.public-counts { font-size: 12px!important; line-height: 1.65; min-height: 0!important; margin: 15px 0 0!important; color: #536f80; }
.lesson-link.active.is-complete { background: #e6f2f4; border-left-color: #04AA6D; }
.lesson-link.active .lesson-number { background: #04AA6D; border-color: #04AA6D; color: #fff; }
.reference-pagination a:hover { border-color: #959fa8; }
.reference-pagination strong { display: inline; font-weight: 500; font-size: 15px; margin-left: 8px; }
.dashboard-heading .button { font-size: 14px; white-space: nowrap; }
.dashboard-main, .dashboard-aside { min-width: 0; }
.learning-course-actions .button { font-size: 14px; padding: 10px 16px; }
.dashboard-panel p { font-size: 14px; line-height: 1.8; }
.certificate-row span, .certificate-row small { display: block; font-size: 12px; color: #657d8d; margin-top: 7px; }
.dashboard-empty p { font-size: 15px; }
.dashboard-tutorials>a>span { font-size: 13px; color: #04AA6D; }
@media(max-width:1000px) {
  .dashboard-columns { grid-template-columns: minmax(0,1fr) 270px; gap: 20px; }
  .dashboard-panel { padding: 20px; }
  .dashboard-stats>div { padding: 18px; flex-direction: column; align-items: flex-start; gap: 8px; }
  .study-method { margin-inline: 4%; }
  .study-method-grid { gap: 20px; }
}
@media(max-width:760px) {
  .dashboard-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
  .dashboard-heading .button { margin: 0; }
  .dashboard-stats { gap: 8px; margin-bottom: 28px; }
  .dashboard-stats>div { padding: 14px 10px; }
  .dashboard-stats span { font-size: 12px; }
  .dashboard-stats strong { font-size: 25px; }
  .dashboard-columns { grid-template-columns: 1fr; }
  .learning-course { padding: 21px; }
  .learning-course h3 { font-size: 21px; }
  .learning-dashboard { padding-top: 30px; }
  .dashboard-aside { margin-top: 8px; }
  .reference-pagination { gap: 12px; }
  .reference-pagination a { padding: 11px 12px; gap: 10px; font-size: 13px; min-height: 48px; }
  .reference-pagination strong { font-size: 13px; margin-left: 4px; }
  .reference-pagination>div { max-width: 50%; min-width: 0; }
  .reference-pagination a>span:not(.chevron) { overflow-wrap: anywhere; }
  .study-method { padding: 30px 6%; }
  .study-method-grid { grid-template-columns: 1fr; gap: 22px; }
  .study-method-heading h2 { font-size: 27px; }
  .certificate-preview object { height: 380px; }
  .lesson-done-label { font-size: 12px; }
}
.lesson-link.is-complete { background: #f0f7f8; border-left: 3px solid #04AA6D; padding-left: 7px; }
.lesson-link-copy { display: block; flex: 1; min-width: 0; }
.lesson-done-label { color: #326c65!important; display: block; font-size: 11px; font-weight: 600; letter-spacing: .3px; margin-top: 4px; }
.lesson-link.is-complete .lesson-number { background: #dceef1; color: #286575; border-color: #bdd9df; }
.lesson-link.active { border-radius: 5px; background: #e3f2f5; color: #04AA6D; box-shadow: inset 0 0 0 1px #04AA6D; }
.lesson-player .video { max-width: none; border-radius: 0; margin: 0; }
.enroll-form { margin: 10px 0 20px; }
.course-overview .progress-label { margin-top: 15px; }
.course-overview .public-counts, .card-body .public-counts { font-size: 12px; line-height: 1.8; min-height: 0; margin: 14px 0 0; color: #496678; }
.reference-pagination { display: flex; justify-content: space-between; gap: 20px; margin-top: 35px; align-items: start; }
.reference-pagination>div { border-radius: 0; padding: 0; border: 0; background: none; max-width: 48%; text-align: left; }
.reference-pagination>div:last-child { text-align: right; margin-left: auto; }
.reference-pagination a { justify-content: center; background: #fff; display: flex; align-items: center; gap: 15px; padding: 13px 18px; border: 1px solid #e5e7eb; border-radius: 8px; color: #15171a; font-size: 15px; line-height: 1.5; min-height: 48px; }
.reference-pagination a.next-button { background: #191a1d; border-color: #191a1d; color: white; }
.reference-pagination a.previous-button:hover { background: #f5f7f9; }
.reference-pagination a.next-button:hover { background: #33373d; }
.reference-pagination a strong { display: inline; font-size: 15px; font-weight: 500; margin-left: 8px; }
.chevron { flex-shrink: 0; margin-right: 3px; display: block; flex: 0 0 7px; width: 7px; height: 7px; border-right: 1.8px solid currentColor; border-top: 1.8px solid currentColor; transform: rotate(45deg); margin-inline: 2px; }
.chevron.left { margin-left: 3px; margin-right: 0; transform: rotate(-135deg); }
.study-method { max-width: 1180px; margin: 0 auto; border-radius: 14px; padding: 55px 6%; background: #eff5f8; border-block: 1px solid #e5e7eb; }
.study-method-heading { max-width: 1180px; margin: 0 auto 30px; }
.study-method-heading h2 { line-height: 1.25; font-size: 30px; margin: 12px 0; }
.study-method-heading p { font-size: 16px; margin: 0; }
.study-method-grid { margin-top: 30px; max-width: 1180px; margin: auto; display: grid; grid-template-columns: repeat(3,1fr); gap: 25px; }
.study-method-grid>div { border-top: 1px solid #e2e8f0; padding-top: 20px; background: white; border: 1px solid #e5e7eb; border-radius: 10px; padding: 25px; }
.method-number { display: inline-block; font-family: monospace; font-size: 13px; color: #04AA6D; border-bottom: 2px solid #04AA6D; padding-bottom: 8px; margin-bottom: 4px; }
.study-method-grid h3 { margin: 12px 0; font-size: 21px; line-height: 1.3; }
.study-method-grid p { margin: 0; font-size: 15px; line-height: 1.8; margin-bottom: 0; }
.dashboard-heading p { margin: 0; font-size: 15px; }
.dashboard-heading .secondary { white-space: nowrap; font-size: 14px; background: white; border: 1px solid var(--line); color: #244c62; }
.dashboard-stats span { font-size: 14px; color: #536c7c; }
.dashboard-stats strong { font-family: Manrope,sans-serif; font-size: 30px; line-height: 1; font-weight: 600; color: #183c53; }
.dashboard-section-heading { gap: 18px; display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; }
.dashboard-section-heading h2 { font-size: 24px; margin: 0; }
.dashboard-section-heading>span { font-size: 13px; color: var(--muted); }
.learning-course-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.learning-course-top .eyebrow { font-size: 11px; letter-spacing: .7px; }
.learning-course-top .enrollment-badge { margin: 0; }
.learning-course progress { display: block; height: 8px; margin: 0 0 10px; }
.learning-course .progress-label { font-size: 13px; }
.learning-course-actions .button.small { font-size: 14px; padding: 10px 14px; }
.learning-course-actions .text-link { font-size: 13px; }
.dashboard-panel h2 { font-size: 20px; margin: 0 0 16px; }
.dashboard-panel>p, .dashboard-panel form>p { font-size: 14px; line-height: 1.8; }
.certificate-row { display: flex; flex-direction: column; gap: 7px; border-top: 1px solid var(--line); padding: 17px 0; }
.certificate-row strong { display: block; font-size: 15px; line-height: 1.5; }
.certificate-row span { font-size: 12px; color: var(--muted); }
.certificate-row small { font-size: 13px; color: #04AA6D; }
.name-settings summary { font-size: 15px; font-weight: 600; cursor: pointer; }
.name-settings label { margin-bottom: 6px; font-size: 13px; display: block; margin: 12px 0 6px; }
.name-settings input { box-sizing: border-box; min-width: 0; width: 100%; font-size: 14px; }
.name-settings .button { margin-top: 13px; font-size: 14px; }
.dashboard-empty { grid-column: 1/-1; background: white; padding: 32px; border: 1px solid var(--line); border-radius: 10px; }
.dashboard-empty h3 { margin-top: 0; }
.dashboard-tutorials { margin-top: 32px; }
.dashboard-tutorials h2 { font-size: 23px; margin-bottom: 16px; }
.dashboard-tutorials>a { border-bottom: 1px solid var(--line); background: white; border: 1px solid var(--line); padding: 16px; display: flex; justify-content: space-between; gap: 15px; border-radius: 7px; margin-bottom: 10px; font-size: 15px; }
.dashboard-tutorials>a span { color: #04AA6D; font-size: 13px; }
.certificate-preview { margin: 30px 0; }
.certificate-preview h2 { font-size: 23px; margin-bottom: 18px; }
.certificate-preview object { width: 100%; height: 560px; display: block; border: 1px solid var(--line); border-radius: 8px; background: #f0f3f6; }
.certificate-preview>.text-link { font-size: 14px; display: inline-block; margin-top: 12px; }
.certificate-preview object p { padding: 24px; }
@media(max-width:1000px) {
  .dashboard-columns { grid-template-columns: minmax(0,1fr) 260px; gap: 20px; }
  .learning-courses { grid-template-columns: 1fr; }
  .dashboard-stats>div { padding: 20px; }
  .dashboard-stats span { font-size: 13px; }
}
@media(max-width:760px) {
  .reference-pagination { gap: 10px; }
  .reference-pagination>div { max-width: 49%; }
  .reference-pagination a { padding: 11px 12px; gap: 10px; font-size: 13px; }
  .reference-pagination a strong { font-size: 13px; margin-left: 3px; }
  .study-method { padding: 35px 6%; }
  .study-method-grid { grid-template-columns: 1fr; gap: 15px; }
  .study-method-grid>div { padding: 22px; }
  .study-method-heading h2 { font-size: 27px; }
  .dashboard-heading { align-items: flex-start; flex-direction: column; gap: 10px; }
  .dashboard-heading .secondary { margin: 0; }
  .dashboard-stats { gap: 9px; }
  .dashboard-stats>div { padding: 16px 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
  .dashboard-stats span { font-size: 12px; min-height: 36px; }
  .dashboard-stats strong { font-size: 26px; }
  .dashboard-columns { grid-template-columns: 1fr; }
  .dashboard-panel { padding: 21px; }
  .learning-dashboard { padding-top: 30px; }
  .learning-course { padding: 22px; }
  .certificate-preview object { height: 400px; }
  .dashboard-tutorials>a { flex-direction: column; gap: 6px; }
}
.certificate-page { max-width: 1400px; padding-top: 38px; }
.certificate-lookup { max-width: 900px; }
.certificate-page-heading { margin-bottom: 35px; }
.certificate-page-heading h1 { font-size: clamp(1.8rem,3vw,2.5rem); line-height: 1.35; letter-spacing: -.8px; margin: 14px 0; overflow-wrap: anywhere; }
.certificate-layout { display: grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); gap: 30px; align-items: start; }
.certificate-information, .certificate-display { min-width: 0; }
.certificate-recipient { padding: 30px; background: #f3f4f6; border: 1px solid #e2e8f0; border-radius: 10px; }
.recipient-heading { display: flex; align-items: flex-start; gap: 18px; }
.recipient-initial { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: white; border: 1px solid #e2e8f0; font-size: 24px; font-weight: 600; color: #244b68; }
.credential-status { font-size: 11px; letter-spacing: .8px; color: #276078; font-weight: 700; }
.credential-status.revoked { color: #9b2e36; }
.recipient-heading h2 { font-size: 21px; line-height: 1.5; margin: 7px 0; letter-spacing: -.3px; overflow-wrap: anywhere; }
.recipient-heading p { font-size: 14px; color: #38556d; margin: 5px 0; }
.certificate-recipient>p { font-size: 15px; line-height: 1.8; color: #36536c; margin: 22px 0; }
.certificate-recipient dl { display: grid; grid-template-columns: 105px minmax(0,1fr); gap: 10px; font-size: 13px; padding-top: 18px; border-top: 1px solid #e2e8f0; }
.certificate-recipient dt { color: #516d84; }
.certificate-recipient dd { margin: 0; overflow-wrap: anywhere; color: #1e435f; }
.certificate-recipient .verification-note { font-size: 12px; color: #5c7186; margin-bottom: 0; }
.certificate-course { padding: 27px 0; }
.issuer-heading { display: flex; gap: 15px; align-items: flex-start; }
.issuer-heading h2 { font-size: 18px; line-height: 1.5; letter-spacing: 0; margin: 0; }
.issuer-heading h2 a { text-decoration: underline; text-underline-offset: 3px; }
.issuer-heading p { font-size: 13px; margin: 6px 0; }
.certificate-course h3 { font-size: 16px; letter-spacing: 0; margin: 24px 0 10px; }
.certificate-course>p { font-size: 15px; line-height: 1.8; margin: 0; }
.certificate-display .certificate-preview { margin: 0; background: #edf0f3; border: 1px solid #d1dae2; border-radius: 8px; padding: 8px; }
.certificate-display .certificate-preview object { height: clamp(360px,39vw,560px); border: 0; border-radius: 3px; width: 100%; display: block; background: white; }
.certificate-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0 14px; }
.certificate-actions .button { font-size: 14px; padding: 12px 17px; margin: 0; flex: 1; white-space: nowrap; }
.certificate-actions .secondary { background: white; border: 1px solid #04AA6D; color: #00728a; }
.certificate-secondary-actions { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 13px; color: #04AA6D; }
.certificate-information .credential-copy { margin: 0; }
.revoked-preview { background: #f7f1f2; border: 1px solid #e3ccce; border-radius: 10px; padding: 40px; }
.revoked-preview h2 { font-size: 23px; }
.signup-page { max-width: 570px; padding: 35px; }
.signup-page h1 { font-size: 31px; }
.signup-field { margin: 23px 0; }
.signup-field>label { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.signup-field input { min-height: 44px; font-size: 16px; }
.field-help { font-size: 13px; line-height: 1.7; color: #617586; margin-top: 7px; }
.field-help ul { padding-left: 18px; margin: 8px 0; }
.field-help li { font-size: 13px; margin: 4px 0; }
.signup-field .errorlist { padding-left: 18px; margin: 8px 0; }
.signup-field .errorlist li { color: #a72438; }
.username-suggestions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.username-suggestions>span { font-size: 13px; flex-basis: 100%; color: #526b7b; }
.username-suggestions button { border: 1px solid #e2e8f0; background: #f3f4f6; color: #20516c; font-size: 14px; border-radius: 6px; padding: 7px 11px; cursor: pointer; }
.username-suggestions button:hover { background: #dbeef5; }
@media(max-width:950px) {
  .certificate-layout { grid-template-columns: 1fr; gap: 24px; }
  .certificate-display { grid-row: 2; }
  .certificate-display .certificate-preview object { height: clamp(330px,65vw,650px); }
  .certificate-recipient { padding: 25px; }
  .certificate-course { padding: 22px 0; }
  .certificate-page-heading { margin-bottom: 24px; }
}
@media(max-width:600px) {
  .certificate-recipient { padding: 20px; }
  .recipient-heading { gap: 12px; }
  .recipient-initial { width: 42px; height: 42px; font-size: 20px; }
  .recipient-heading h2 { font-size: 18px; }
  .certificate-recipient dl { grid-template-columns: 1fr; gap: 5px; }
  .certificate-recipient dd { margin-bottom: 10px; }
  .certificate-actions .button { white-space: normal; min-width: 130px; }
  .certificate-display .certificate-preview object { height: 350px; }
  .signup-page { padding: 25px; }
  .signup-page h1 { font-size: 28px; }
}
.site-navigation.is-open { max-height: calc(100dvh - 100px); overflow-y: auto; }
.lesson-layout aside { background: white; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; position: sticky; padding: 0; top: calc(var(--header-height,84px) + 18px); }
#quiz-result, .quiz-section, .article-prose h2, .article-prose h3 { scroll-margin-top: calc(var(--header-height,84px) + 24px); }
.recipient-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 3px solid #fff; }
.account-avatar { display: block; width: 86px; height: 86px; object-fit: cover; border-radius: 50%; border: 1px solid var(--line); margin: 16px 0; }
.avatar-placeholder { display: flex; align-items: center; justify-content: center; background: #e7f2f8; font-size: 32px; color: #256078; }
.profile-panel form p { font-size: 13px; line-height: 1.7; }
.profile-panel input[type=file] { width: 100%; padding: 8px 0; border: 0; background: none; font-size: 13px; }
.profile-panel input[type=checkbox] { width: auto; }
.profile-panel label { font-size: 13px; }
.profile-panel .errorlist { font-size: 13px; color: #a72438; padding-left: 18px; }
.public-counts .enrolled-highlight { font-size: 13px; font-weight: 700; color: #6d3db2; background: #f0e8fc; padding: 5px 9px; border-radius: 5px; display: inline-block; margin: 3px 0; }
.code-intro-label { font-family: ui-monospace,monospace; font-size: 13px; color: #aecfdd; letter-spacing: .5px; margin: 0 0 22px; }
.code-intro-label>span { color: #7ee0cb; margin-right: 8px; }
.home-intro h1.coding-hook { font-family: ui-monospace,SFMono-Regular,Consolas,monospace; font-size: clamp(1.4rem,2.5vw,2.1rem); line-height: 1.5; letter-spacing: -.9px; }
.coding-hook .type-line { display: inline-block; white-space: nowrap; overflow: hidden; vertical-align: bottom; max-width: 100%; clip-path: inset(0 100% 0 0); animation: code-reveal 1.15s steps(17,end) .15s forwards; }
.coding-hook .type-second { animation: code-reveal 1.35s steps(23,end) 1.3s forwards; color: #7ee0cb; }
.coding-hook .type-second:after { content: '_'; color: #b8f4e8; animation: code-cursor .5s steps(1) 6; opacity: 0; }
@keyframes code-reveal { to{clip-path:inset(0 0 0 0)} }
@keyframes code-cursor { 0%,49%{opacity:1}50%,100%{opacity:0} }
.footer-top { display: flex; justify-content: space-between; align-items: center; gap: 25px; max-width: 1280px; margin: auto; }
.footer-top nav { display: flex; gap: 25px; width: auto; order: initial; font-size: 14px; }
.footer-bottom { display: flex; justify-content: space-between; gap: 25px; border-top: 1px solid var(--line); padding-top: 18px; margin: 25px auto 0; max-width: 1280px; }
.footer-bottom p { font-size: 12px; margin: 0; line-height: 1.8; }
.contact-page { max-width: 1180px; }
.contact-page h1 { font-size: clamp(2rem,4vw,3.3rem); letter-spacing: -1px; }
.contact-identity h2 { font-size: 25px; }
.contact-identity p { color: #c0d4e1; font-size: 15px; line-height: 1.8; }
.contact-identity>span { font-size: 14px; color: #80d5df; display: block; margin-top: 24px; }
.contact-methods { display: grid; gap: 15px; }
.contact-methods>a { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--line); border-radius: 9px; padding: 23px; }
.contact-methods>a:hover { border-color: #04AA6D; background: #f6fbfd; }
.contact-methods>a>span { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: #04AA6D; }
.contact-methods strong { font-size: 18px; overflow-wrap: anywhere; }
.contact-methods small { font-size: 13px; color: var(--muted); }
.editorial-index { max-width: 1260px; }
.editorial-heading { display: flex; justify-content: space-between; align-items: end; gap: 40px; border-bottom: 1px solid var(--line); padding-bottom: 28px; }
.editorial-heading h1 { font-size: clamp(2.3rem,4.4vw,3.4rem); line-height: 1.15; letter-spacing: -1.3px; margin: 16px 0 0; }
.editorial-heading>p { max-width: 340px; font-size: 16px; margin: 0; }
.article-filters { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 10px; margin: 28px 0 35px; }
.article-filters>a { border: 1px solid var(--line); padding: 9px 16px; border-radius: 30px; font-size: 14px; }
.article-filters>a[aria-current=page] { background: #102b3e; color: white; border-color: #102b3e; }
.editorial-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 25px; }
.editorial-card { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; background: #fff; transition: border-color .2s,box-shadow .2s; }
.editorial-card:hover { border-color: #04AA6D; color: var(--ink); box-shadow: 0 8px 24px #17394e0a; }
.editorial-cover { aspect-ratio: 16/9; overflow: hidden; background: #f0f5f8; }
.editorial-card p { font-size: 15px; line-height: 1.8; margin: 0 0 24px; }
.editorial-read { font-size: 14px; font-weight: 600; color: #04AA6D; margin-top: auto; border-top: 1px solid var(--line); padding-top: 18px; }
.editorial-empty { grid-column: 1/-1; padding: 30px; background: #f3f7fa; border-radius: 10px; }
.editorial-empty h2 { font-size: 23px; }
.article-detail { max-width: 1190px; margin: auto; padding: 50px 5% 65px; }
.article-title-block { display: block; padding: 0 0 30px; min-height: 0; border: 0; border-bottom: 1px solid var(--line); max-width: 920px; }
.article-meta>span:last-child { color: var(--muted); }
.article-title-block h1 { font-size: clamp(2rem,4.3vw,3.6rem); line-height: 1.2; letter-spacing: -1.2px; margin: 20px 0; }
.article-summary { font-size: 19px; line-height: 1.8; margin: 0 0 20px; color: #536c7c; max-width: 800px; }
.article-main-image { margin: 30px 0; }
.article-main-image img { display: block; width: 100%; max-height: 520px; object-fit: contain; border-radius: 10px; background: #f5f8fa; }
.article-reading-layout { display: grid; grid-template-columns: minmax(0,740px) 220px; gap: 50px; margin-top: 32px; }
.article-main-content { min-width: 0; }
.article-prose { font-size: 17px; line-height: 1.95; }
.article-prose h2 { font-size: 28px; line-height: 1.35; margin: 40px 0 18px; padding-top: 12px; border-top: 1px solid var(--line); }
.article-prose h3 { font-size: 22px; margin: 28px 0 12px; line-height: 1.4; }
.article-prose blockquote { margin: 25px 0; padding: 15px 22px; background: #edf6f9; border-left: 3px solid #04AA6D; border-radius: 0 8px 8px 0; }
.article-outline { position: sticky; top: calc(var(--header-height,84px) + 24px); align-self: start; border-left: 1px solid var(--line); padding-left: 20px; max-height: 65vh; overflow-y: auto; }
.article-outline h2 { font-size: 13px; letter-spacing: .5px; margin: 0 0 15px; }
.article-outline nav { display: flex; align-items: flex-start; flex-direction: column; gap: 13px; width: 100%; font-size: 13px; line-height: 1.6; }
.article-outline a.subheading { padding-left: 12px; color: var(--muted); }
.article-attachment { margin: 35px 0; border-top: 1px solid var(--line); padding-top: 22px; }
.article-attachment h2 { font-size: 22px; }
.article-attachment .button { font-size: 14px; }
@media(max-width:950px) {
  .editorial-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .editorial-heading { gap: 25px; }
  .article-reading-layout { grid-template-columns: minmax(0,1fr); gap: 0; }
  .article-outline { display: none; }
  .contact-layout { gap: 25px; }
  .home-intro h1.coding-hook { font-size: clamp(1.35rem,2.5vw,1.8rem); }
}
@media(max-width:760px) {
  .site-footer { padding: 28px 6% 22px; }
  .footer-top { align-items: flex-start; flex-direction: column; gap: 22px; }
  .footer-top nav { justify-content: flex-start; font-size: 14px; flex-wrap: wrap; }
  .footer-bottom { flex-direction: column; gap: 10px; }
  .contact-layout { grid-template-columns: 1fr; }
  .contact-lead { font-size: 16px; }
  .editorial-heading { align-items: flex-start; flex-direction: column; gap: 20px; }
  .editorial-heading>p { max-width: 100%; }
  .editorial-grid { grid-template-columns: 1fr; }
  .editorial-card h2 { font-size: 23px; }
  .article-filters { justify-content: flex-start; }
  .article-detail { padding: 35px 6%; }
  .article-summary { font-size: 17px; }
  .article-prose { font-size: 16px; }
  .article-prose h2 { font-size: 25px; }
  .article-title-block { padding-bottom: 24px; }
  .home-intro h1.coding-hook { font-size: clamp(1.15rem,4.5vw,1.9rem); letter-spacing: -.6px; }
  .recipient-avatar { width: 52px; height: 52px; }
  .lesson-layout aside { top: auto; }
}
@media(prefers-reduced-motion:reduce) {
  .coding-hook .type-line, .coding-hook .type-second { animation: none!important; clip-path: none; }
  .coding-hook .type-second:after { animation: none!important; opacity: 0; }
}
.lesson-finder { padding: 0 14px 12px; background: #fbfdff; border-bottom: 1px solid var(--line); }
.lesson-finder>label:not(.sr-only) { display: block; font-size: 12px; color: #536c7c; margin: 0 0 6px; }
.lesson-finder input, .lesson-finder select { width: 100%; font-size: 13px; padding: 8px 10px; border-radius: 6px; min-height: 38px; margin-bottom: 7px; }
.lesson-match-count { font-size: 12px; margin: 3px 0; color: #657e8d; }
.compact-lesson-list { padding: 6px 8px; max-height: min(50vh,520px); overflow-y: auto; overscroll-behavior: contain; }
.compact-lesson-list .lesson-link { padding: 9px 8px; margin: 0; border-radius: 0; border-bottom: 1px solid #edf1f4; gap: 9px; font-size: 13px; line-height: 1.45; min-height: 44px; }
.compact-lesson-list .lesson-number { border: 0; background: none; min-width: 25px; font-size: 11px; height: auto; }
.compact-lesson-list .lesson-done-label { font-size: 10px; letter-spacing: 0; margin-top: 2px; }
.compact-lesson-list .lesson-link.is-complete { border-left: 2px solid #04AA6D; padding-left: 6px; }
.lesson-link[hidden] { display: none!important; }
.lesson-no-results { font-size: 13px; padding: 12px; }
.profile-summary { position: relative; padding: 24px; }
.profile-summary-top { display: flex; align-items: center; gap: 14px; }
.profile-summary .account-avatar { width: 64px; height: 64px; margin: 0; flex-shrink: 0; }
.profile-summary h2 { font-size: 18px; line-height: 1.4; margin: 0; overflow-wrap: anywhere; }
.profile-summary-top p { font-size: 13px; margin: 6px 0; color: #627b8c; overflow-wrap: anywhere; }
.profile-editor { margin-top: 20px; }
.profile-editor>summary { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #246a81; cursor: pointer; list-style: none; padding: 7px 10px; border: 1px solid #e2e8f0; border-radius: 6px; }
.profile-editor>summary::-webkit-details-marker { display: none; }
.profile-editor[open]>summary { background: #f3f4f6; }
.profile-editor-body { margin-top: 18px; border-top: 1px solid var(--line); }
.profile-editor form { padding: 16px 0; border-bottom: 1px solid var(--line); }
.profile-editor form:last-child { border: 0; }
.profile-editor h3 { font-size: 16px; margin: 0 0 14px; letter-spacing: 0; }
.profile-editor p { font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.profile-editor label { display: block; font-size: 13px; margin: 8px 0 5px; }
.profile-editor input:not([type=checkbox]) { width: 100%; font-size: 14px; }
.profile-editor input[type=file] { border: 0; padding: 6px 0; font-size: 12px; background: none; }
.profile-editor .button { font-size: 13px; padding: 9px 13px; }
.profile-editor .errorlist { font-size: 13px; color: #a72438; padding-left: 17px; }
.learning-course .resume-label { margin-bottom: 5px; }
.tutorial-explorer .tutorials-heading { max-width: 780px; margin-bottom: 26px; }
.tutorial-explorer .tutorials-heading h1 { font-size: clamp(2.3rem,4vw,3.3rem); margin: 12px 0 16px; }
.tutorial-search { display: grid; grid-template-columns: minmax(180px,1.6fr) minmax(130px,1fr) minmax(130px,1fr) auto; gap: 14px; align-items: end; background: #f1f6fa; border: 1px solid #e2e8f0; border-radius: 12px; padding: 22px; }
.tutorial-search label { display: block; font-size: 12px; font-weight: 600; color: #486579; margin-bottom: 7px; }
.tutorial-search input, .tutorial-search select { width: 100%; font-size: 14px; padding: 10px 12px; min-height: 43px; }
.tutorial-search .button { font-size: 14px; padding: 11px 17px; min-height: 43px; }
.tutorial-results-bar { display: flex; justify-content: space-between; gap: 15px; padding: 17px 2px; font-size: 13px; color: #536c7c; }
.tutorial-results-bar a { color: #04AA6D; }
.tutorial-explorer .tutorial-group { margin: 22px 0 40px; }
.tutorial-explorer .tutorial-group-heading { padding-bottom: 13px; margin-bottom: 16px; }
.tutorial-explorer .tutorial-group-heading h2 { font-size: 23px; }
.tutorial-explorer .tutorial-card { border-radius: 10px; border-top: 3px solid #04AA6D; background: #fff; padding: 22px; }
.tutorial-explorer .tutorial-card:hover { box-shadow: 0 6px 22px #17394e0a; }
.tutorial-explorer .tutorial-meta span:last-child { background: #edf4f8; border-radius: 4px; padding: 3px 6px; }
.tutorial-explorer .tutorial-meta { align-items: center; font-size: 11px; }
.tutorial-explorer .tutorial-card h3 { font-size: 20px; }
.tutorial-explorer .tutorial-open { border-top: 1px solid var(--line); padding-top: 16px; }
@media(max-width:1000px) {
  .tutorial-search { grid-template-columns: 1fr 1fr; }
  .tutorial-search .button { width: 100%; }
}
@media(max-width:760px) {
  .profile-summary { padding: 20px; }
  .profile-summary .account-avatar { width: 58px; height: 58px; }
  .tutorial-search { grid-template-columns: 1fr; padding: 18px; gap: 12px; }
  .compact-lesson-list { max-height: 320px; }
  .learning-course { padding: 20px; }
  .learning-dashboard .dashboard-stats { gap: 8px; }
  .learning-dashboard .dashboard-stats>div { padding: 15px 10px; }
}
.tutorial-reader { display: grid; grid-template-columns: 280px minmax(0,1fr); border-top: 1px solid #e4e5e9; min-height: 75vh; background: #fff; }
.tutorial-outline>summary { font-size: 23px; font-weight: 750; cursor: pointer; padding: 0 12px 28px; list-style: none; color: #171923; }
.outline-hint { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: #777; margin-top: 8px; }
.tutorial-chapter { margin: 6px 0; }
.tutorial-chapter>summary { cursor: pointer; font-size: 15px; font-weight: 600; padding: 14px 12px; color: #444650; }
.tutorial-chapter a { display: block; margin: 3px 0 3px 12px; padding: 10px 13px; border-radius: 7px; color: #555861; font-size: 14px; line-height: 1.5; text-decoration: none; }
.tutorial-chapter a:hover { background: #ededf2; }
.tutorial-chapter a.current { background: #eae8f4; color: #5142a0; font-weight: 650; }
.tutorial-chapter small { display: block; font-size: 10px; color: #727079; }
.tutorial-reading-pane { min-width: 0; }
.tutorial-breadcrumbs a { color: inherit; text-decoration: none; }
.tutorial-content>h1 { font-size: clamp(30px,4vw,48px); line-height: 1.2; letter-spacing: -.035em; margin: 0 0 40px; color: #171923; }
.tutorial-content .prose { font-size: 18px; line-height: 1.9; color: #525560; }
.tutorial-content .prose p { margin: 0 0 25px; }
.tutorial-content .lesson-player { margin-bottom: 32px; }
.tutorial-content .reference-pagination { margin-top: 42px; }
@media(max-width:800px) {
  .tutorial-reader { grid-template-columns: 1fr; }
  .tutorial-rail { position: static; height: auto; max-height: 360px; border-right: 0; border-bottom: 1px solid #e4e5e9; padding: 16px; }
  .tutorial-outline>summary { font-size: 19px; padding-bottom: 10px; }
  .tutorial-breadcrumbs { padding: 17px 22px; font-size: 12px; gap: 10px; }
  .tutorial-content { padding: 30px 22px 50px; }
  .tutorial-content .prose { font-size: 16px; }
}
.guide-catalog>h1 { text-align: center; font-size: 42px; margin: 0 0 40px; }
.guide-initial { display: grid; place-items: center; background: #eeeaf8; color: #504082; font-size: 64px; font-weight: 700; }
.independent-reader { grid-template-columns: 300px minmax(0,1fr); }
.contents-toggle { background: none; border: 0; font-size: 19px; cursor: pointer; }
.independent-reader.contents-hidden { grid-template-columns: 1fr; }
.contents-hidden .tutorial-rail { display: none; }
@media(max-width:1100px) {
  .guide-cards { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(max-width:800px) {
  .independent-reader { grid-template-columns: 1fr; }
  .independent-reader .tutorial-rail { max-height: 320px; }
  .independent-reader .tutorial-rail h2 { margin: 0 0 15px; }
}
@media(max-width:500px) {
  .guide-cards { grid-template-columns: 1fr; }
  .guide-catalog { padding: 32px 20px; }
  .guide-card { min-height: 360px; }
}
.tutorial-section-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 0 0 12px; margin: -18px 0 32px; border-bottom: 1px solid #e4e5ea; }
.tutorial-section-tabs a { flex-shrink: 0; padding: 9px 14px; border-radius: 7px; font-size: 13px; text-decoration: none; color: #5c606c; background: #f5f5f8; }
.tutorial-section-tabs a[aria-current] { background: #ece8f7; color: #514187; font-weight: 650; }
.tutorial-section-tabs a:hover { background: #e7e5ee; }
.independent-reader .tutorial-content .prose h2 { margin-top: 36px; letter-spacing: -.02em; }
.independent-reader .tutorial-content .prose img { border-radius: 10px; }
.independent-reader .tutorial-content { padding-top: 36px; }
.independent-reader .tutorial-content>h1 { margin-bottom: 36px; }
.guide-icon { object-fit: contain; margin-bottom: 16px; width: 64px; height: 64px; border-radius: 13px; font-size: 30px; }
.guide-card h2 { font-size: 22px; margin: 6px 0 16px; }
.guide-card p { color: #73737a; line-height: 1.6; font-size: 15px; margin: 0 0 24px; flex: 1; }
.guide-start { color: white; padding: 12px 20px; border-radius: 7px; text-decoration: none; font-size: 14px; background: #263346; }
.sidebar-page-tab { position: absolute; left: 8px; top: 17px; width: 8px; height: 8px; border: 1px solid #a1a4ad; border-radius: 2px; }
.current .sidebar-page-tab { background: #605090; border-color: #605090; }
.read-label { display: block; font-size: 10px; color: #36816b; }
.reading-history { margin-top: 32px; border-top: 1px solid #e2e6ec; padding-top: 24px; }
.reading-history>a { display: block; padding: 12px 0; border-bottom: 1px solid #e8ebef; text-decoration: none; }
.reading-history>a span { display: inline-block; font-size: 11px; margin-right: 14px; color: #777; }
.reading-history p { color: #6c727e; font-size: 14px; }
@media(max-width:1000px) {
  .guide-cards { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(max-width:600px) {
  .guide-cards { grid-template-columns: 1fr; }
}
.independent-reader .tutorial-rail>nav { display: block; width: 100%; padding: 0; margin: 0; }
.independent-reader .tutorial-chapter { display: block; width: 100%; min-width: 0; margin: 6px 0; }
.independent-reader .tutorial-chapter>summary:after { content: '›'; position: absolute; right: 9px; top: 12px; transform: rotate(0); font-size: 20px; }
.independent-reader .tutorial-chapter[open]>summary:after { transform: rotate(90deg); }
.independent-reader .tutorial-chapter>a { position: relative; padding-left: 29px; margin-left: 20px; display: block; line-height: 1.55; padding: 10px 28px 10px 25px; margin: 2px 0 2px 10px; font-size: 13px; overflow-wrap: anywhere; }
.topic-complete { position: absolute; right: 10px; top: 16px; width: 7px; height: 7px; border-radius: 50%; background: #25866b; box-shadow: 0 0 0 3px #e1f1ea; }
.independent-reader .tutorial-rail h2 { font-size: 22px; text-align: left; margin: 4px 8px 18px; }
.reading-tally { font-size: 12px; color: #687481; padding: 0 8px 16px; margin-bottom: 12px; border-bottom: 1px solid #e4e7ec; }
.guide-catalog.section { max-width: 1240px; }
.guide-catalog-heading .page-title { font-size: clamp(32px,4vw,48px); margin: 12px 0; }
.guide-card:focus-visible { outline: 3px solid #6a5a95; outline-offset: 4px; }
.guide-catalog-heading p { color: #6a6d78; line-height: 1.7; font-size: 16px; }
.reading-guide-grid { display: grid; gap: 16px; }
.reading-guide-card h3 { margin: 9px 0 18px; }
.reading-guide-card>a { display: block; margin-top: 16px; font-size: 14px; text-decoration: none; font-weight: 600; }
.reading-history>a small { float: right; color: #777; font-size: 12px; }
.guide-catalog-heading h1 { font-size: 42px; margin: 10px 0 14px; letter-spacing: -.035em; display: block; }
.learning-content-nav a:hover { background: #e0e7f0; }
#your-courses, #your-tutorials, #your-articles, #learning-statistics { scroll-margin-top: calc(var(--header-height,80px) + 24px); }
.article-card-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: #6c7884; margin-bottom: 20px; }
.article-meta { display: flex; gap: 20px; font-size: 13px; color: #04AA6D; flex-wrap: wrap; }
@media(max-width:600px) {
  .dashboard-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
.guide-catalog-heading { padding-bottom: 28px; border-bottom: 1px solid #e2e5ec; padding: 0; border: 0; margin-bottom: 32px; display: block!important; text-align: left; max-width: none; min-height: 0; background: none; }
.guide-catalog-heading .eyebrow { display: block; margin-bottom: 24px; }
.guide-catalog-heading h1.page-title { margin: 0 0 32px; text-align: left; }
.article-share { margin-top: 18px; display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; border: 1px solid #dce2e8; border-radius: 50%; background: #fff; color: #30485b; cursor: pointer; }
.article-share:hover { background: #eef3f7; }
.dashboard-columns:has(>.dashboard-main):not(:has(>.dashboard-aside)) { grid-template-columns: 1fr; }
.guide-catalog { margin: auto; max-width: 1240px; padding: 48px 28px 80px; background: linear-gradient(180deg,#f4f7fc 0,white 310px); border-radius: 20px; }
.guide-cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.guide-card { display: flex; flex-direction: column; align-items: flex-start; text-align: left; transition: box-shadow .2s,border-color .2s; text-decoration: none; color: inherit; position: relative; overflow: hidden; border-radius: 18px; border: 1px solid #e5e7eb; box-shadow: 0 8px 28px #18385808; padding: 30px; min-height: 310px; }
.guide-card:before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg,#04AA6D,#8175bd); }
.guide-card:nth-child(3n+2):before { background: linear-gradient(90deg,#685ba6,#b3a0dd); }
.guide-card:nth-child(3n):before { background: linear-gradient(90deg,#287568,#79b4a1); }
.guide-card .guide-icon { width: 60px; height: 60px; background: #edf1fb; border-radius: 16px; }
.guide-card .guide-start { align-self: stretch; background: #f0f3f9; color: #264257; font-weight: 650; text-align: center; border-radius: 9px; }
.guide-card:hover { border-color: #afa5cb; box-shadow: 0 8px 24px #19243a0d; transform: translateY(-3px); }
.dashboard-shell { min-height: 75vh; background: #f7f8fa; }
.dashboard-heading { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-bottom: 30px; border: 0; padding-bottom: 10px; }
.dashboard-heading h1 { line-height: 1.25; margin: 12px 0; font-size: clamp(26px,3vw,38px); letter-spacing: -1px; }
.dashboard-stats { display: grid; margin-bottom: 38px; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.dashboard-stats>div { display: flex; justify-content: space-between; align-items: center; gap: 15px; background: white; border: 1px solid #e1e5ec; border-radius: 12px; padding: 20px; }
.learning-courses { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.learning-course h3 { margin: 14px 0 20px; line-height: 1.45; font-size: 21px; }
.learning-course-actions { display: flex; flex-wrap: wrap; gap: 15px; align-items: center; margin-top: auto; padding-top: 20px; }
.reading-guide-card { padding: 20px; border: 1px solid #e0e5eb; border-radius: 12px; background: #fff; box-shadow: 0 4px 16px #172e4505; }
#your-articles { margin-top: 30px; }
#your-articles>a { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 20px; margin: 10px 0; background: white; border: 1px solid #e1e6ec; border-radius: 10px; text-decoration: none; line-height: 1.6; }
#your-articles>a small { float: none; flex-shrink: 0; color: #6d7883; font-size: 12px; }
.lesson-link { display: flex; gap: 14px; border-bottom: 1px solid var(--line); font-size: 14px; border: 0; border-radius: 7px; padding: 13px 10px; margin: 3px 0; align-items: center; line-height: 1.5; position: relative; }
.lesson-finished-dot { display: inline-block; width: 7px; height: 7px; background: #318473; border-radius: 50%; margin-left: 8px; box-shadow: 0 0 0 3px #e3f0ec; }
.dashboard-panel { background: white; border: 1px solid var(--line); padding: 23px; margin-bottom: 18px; border-radius: 12px; }
@media(max-width:760px) {
  .learning-courses { grid-template-columns: 1fr; }
  .learning-content-nav { gap: 12px; }
  .learning-content-nav a { font-size: 13px; }
  #your-articles>a { align-items: flex-start; flex-direction: column; gap: 4px; }
}
.tutorial-library-index { background: transparent; }
.tutorial-collection-item:hover { background: #f5f8fb; }
.tutorial-index { font-size: 10px; letter-spacing: .12em; color: #668091; }
.tutorial-subject-copy p { font-size: 15px; color: #677787; line-height: 1.7; margin: 0 0 20px; }
.tutorial-subject-link { font-size: 13px; font-weight: 650; color: #04AA6D; }
.tutorial-subject-link>span { margin-left: 12px; }
.article-author { font-size: 14px; color: #486579; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.article-author .article-share { margin: 0; }
.dashboard-profile-edit { position: relative; }
.dashboard-profile-edit .profile-editor-body { position: absolute; right: 0; top: 48px; z-index: 20; width: 320px; max-width: 85vw; display: block; background: white; border: 1px solid #dce3eb; border-radius: 12px; padding: 22px; box-shadow: 0 12px 40px #15324b20; }
.dashboard-profile-edit summary { padding: 12px 16px; border: 1px solid #d7e0e9; border-radius: 8px; cursor: pointer; }
.article-total { font-size: 13px; color: #667787; font-weight: 500; margin-left: 12px; }
.history-order { font-size: 12px; color: #788594; }
.history-number { color: #7e8e9d; font-size: 13px; }
.history-title { flex: 1; }
.history-title small { display: block; margin-top: 5px; }
.reading-history #your-articles>a time { font-size: 12px; color: #7a8894; white-space: nowrap; }
.dashboard-columns:has(.dashboard-aside):not(:has(.profile-summary)) { display: block; }
.dashboard-columns:has(.dashboard-aside):not(:has(.profile-summary)) .dashboard-aside { max-width: 900px; width: 100%; }
@media(max-width:700px) {
  .tutorial-collection { grid-template-columns: 1fr; }
  .tutorial-collection-item { gap: 16px; }
  .dashboard-profile-edit .profile-editor-body { right: auto; left: 0; }
}
.page-title, .editorial-heading h1, .guide-catalog-heading h1.page-title, .tutorial-content>h1, .article-title-block h1, .dashboard-heading h1, .certificate-page-heading h1 { font-size: var(--page-title-size); font-weight: 800; line-height: 1.2; letter-spacing: -.035em; }
.tutorial-subject-copy p, .article-summary, .tutorial-content .prose, .article-prose, .lesson-body.prose { color: var(--muted); }
.tutorial-content .prose, .article-prose, .lesson-body.prose { font-family: var(--body-font); font-size: 17px; line-height: 1.9; }
.tutorial-subject-copy h2, .editorial-card h2, .learning-course h3, .reading-guide-card h3 { font-size: 22px; line-height: 1.4; letter-spacing: -.025em; }
.tutorial-subject-link, .editorial-read, .reading-guide-card>a { color: var(--blue); }
.learning-content-nav a[aria-current] { background: none; color: var(--blue); border-color: var(--blue); }
.dashboard-shell, .tutorial-library-index { background: #fff; }
.dashboard-panel, .learning-course, .reading-guide-card { border-color: var(--line); }
.learning-course { background: white; border: 1px solid #e5e7eb; border-radius: 12px; padding: 22px; border-top: 4px solid #31566c; display: flex; flex-direction: column; border-top-color: var(--blue); }
.tutorial-rail { border-right: 1px solid #e4e5e9; position: sticky; top: var(--header-height,80px); height: calc(100dvh - var(--header-height,80px)); overflow-y: auto; padding: 30px 16px; background: var(--surface); border-color: var(--line); }
.independent-reader .tutorial-chapter a.current { background: #e4f0f4; color: var(--blue); }
.dashboard-identity { display: flex; align-items: center; gap: 20px; min-width: 0; }
.dashboard-avatar { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 3px solid white; box-shadow: 0 0 0 1px var(--line); }
.dashboard-avatar-initial { display: grid; place-items: center; background: var(--surface); color: var(--blue); font-size: 28px; font-weight: 700; }
.dashboard-heading .dashboard-identity h1 { font-size: clamp(25px,3vw,36px); }
.tutorial-subject-icon img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 0; }
.dashboard-columns:has(>.dashboard-aside) { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 28px; }
.dashboard-columns:has(>.dashboard-main:empty) { grid-template-columns: 1fr; }
.dashboard-columns:has(>.dashboard-main:empty)>.dashboard-main { display: none; }
@media(max-width:900px) {
  .dashboard-columns:has(>.dashboard-aside) { grid-template-columns: 1fr; }
}
@media(max-width:600px) {
  .dashboard-avatar { width: 56px; height: 56px; }
  .dashboard-identity { gap: 14px; }
  .tutorial-content .prose, .article-prose, .lesson-body.prose { font-size: 16px; }
}
.contact-form label { display: block; font-size: 14px; margin-bottom: 6px; }
.contact-form input, .contact-form textarea { width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 6px; font: inherit; }
.tutorial-collection { display: grid; margin-top: 36px; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 26px; }
.tutorial-collection-item { display: flex; align-items: flex-start; border-top: 1px solid #dce4eb; color: inherit; text-decoration: none; transition: background .2s; padding: 24px 0; gap: 14px; }
.tutorial-subject-icon { flex-shrink: 0; display: grid; place-items: center; border-radius: 14px; font-size: 28px; color: #345770; background: var(--surface); overflow: hidden; width: 54px; height: 54px; padding: 6px; }
.tutorial-subject-copy h2 { margin: 9px 0 13px; margin-top: 0; font-size: 20px; }
.home-intro .coding-hook, .home-intro .learning-path h3, .home-intro .learning-paths h2 { color: var(--ink)!important; }
.home-intro .coding-hook em { color: var(--blue)!important; }
@media(max-width:1000px) {
  .tutorial-collection { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(max-width:650px) {
  .tutorial-collection { grid-template-columns: 1fr; }
}
.home-intro .coding-hook, .home-intro .coding-hook .type-line, .home-intro .learning-path h3, .home-intro .learning-paths h2 { color: #f5fbff!important; }
.home-intro .coding-hook em.type-second { color: #8ee6dc!important; }
.home-intro .intro-description, .home-intro .intro-footnote, .home-intro .learning-path p { color: #c9dce7!important; }
.home-intro .code-intro-label, .home-intro .code-intro-label span, .home-intro .path-index { color: #93dce7!important; }
.contact-identity h2, .contact-identity h3 { color: var(--ink)!important; }
.contact-identity>p, .contact-support p { color: var(--muted); }
.contact-support { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.bkash-support { background: white; border: 1px solid var(--line); border-radius: 10px; padding: 18px; margin: 18px 0; }
.bkash-support>span { font-size: 12px; color: var(--muted); }
.bkash-support>div { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 8px; }
.bkash-support strong { font-size: 22px; color: var(--ink); letter-spacing: .03em; }
.copy-bkash { padding: 7px 12px; border: 1px solid var(--line); border-radius: 6px; color: var(--blue); background: white; cursor: pointer; }
.bkash-support p { font-size: 13px; line-height: 1.6; }
.copy-result { color: var(--blue); }
.notes-intro { max-width: 640px; color: var(--muted); }
.note-category { margin-top: 42px; }
.note-category>h2 { font-size: 25px; margin-bottom: 24px; }
.notes-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.note-card { display: flex; flex-direction: column; align-items: flex-start; padding: 28px; border: 1px solid var(--line); background: white; border-radius: 14px; box-shadow: 0 5px 20px #0b203508; }
.note-icon { width: 70px; height: 70px; display: grid; place-items: center; background: var(--surface); border-radius: 14px; color: var(--blue); margin-bottom: 22px; }
.note-icon img { width: 52px; height: 52px; object-fit: contain; }
.note-format { font-size: 10px; letter-spacing: .1em; color: var(--blue); }
.note-card h3 { font-size: 22px; margin: 12px 0; }
.note-card p { font-size: 14px; color: var(--muted); line-height: 1.7; flex: 1; }
.note-card .button { align-self: stretch; margin-top: 18px; }
.support-close { text-align: right; }
.support-close button { border: 0; background: none; font-size: 26px; color: var(--muted); cursor: pointer; }
#free-note-download { width: 100%; margin-top: 12px; }
.site-navigation>nav { gap: 22px; }
.nav-verify { border-left: 1px solid var(--line); padding-left: 20px; }
@media(max-width:900px) {
  .notes-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(max-width:600px) {
  .notes-grid { grid-template-columns: 1fr; }
  .nav-verify { border: 0; padding-left: 0; }
}
.library-catalog .cards { margin-top: 30px; }
.library-card { display: flex; flex-direction: column; overflow: hidden; }
.library-card .library-art { display: flex; align-items: center; justify-content: center; padding: 28px; }
.library-card .library-art svg { width: 62px; height: 62px; }
.library-card .card-body { display: flex; flex-direction: column; flex: 1; }
.library-card .card-body h3 { font-family: var(--heading-font); color: var(--ink); }
.library-card .card-body p { color: var(--muted); }
.library-card .note-download { margin-top: auto; align-self: flex-start; }
.library-catalog .note-category { margin-top: 36px; }
.library-catalog .note-category>h2 { font-size: 24px; color: var(--ink); }
.notes-library .cards { gap: 18px; margin-top: 16px; }
.notes-library .card-body h3 { margin: 0 0 10px; font-size: 20px; }
.notes-library .notes-download-link { background: #24445a; color: white; align-self: flex-start; padding: 9px 15px; }
.notes-library .notes-download-link:hover { background: #326079; }
.note-support-panel { border: 1px solid var(--line); border-radius: 14px; padding: 26px; margin-top: 18px; background: white; }
.note-support-panel h1 { font-size: 30px; margin: 12px 0 18px; }
.note-support-panel>p { font-size: 14px; color: var(--muted); }
.note-support-panel .bkash-support { padding: 14px; margin: 16px 0; }
.free-download-line { padding-top: 16px; border-top: 1px solid var(--line); }
.free-download-line a { text-decoration: underline; color: var(--blue); font-weight: 600; }
.support-back { font-size: 13px; color: var(--muted); }
.learning-dashboard .dashboard-stats span { font-size: 12px; }
.learning-dashboard .learning-course { box-shadow: 0 3px 12px #0b203506; }
.learning-dashboard .dashboard-section-heading { margin: 22px 0 16px; }
.learning-dashboard .dashboard-section-heading h2, .learning-dashboard .reading-history h2 { font-size: 24px; }
.learning-dashboard .certificate-row { padding: 16px 0; border-bottom: 1px solid var(--line); }
.learning-content-nav { display: flex; margin: 24px 0; border-bottom: 1px solid #dce1e7; padding-bottom: 0; gap: 22px; overflow-x: auto; flex-wrap: nowrap; white-space: nowrap; }
.learning-content-nav a { text-decoration: none; font-size: 14px; color: #34495c; border-radius: 0; background: transparent; padding: 13px 2px; border-bottom: 3px solid transparent; font-weight: 600; flex-shrink: 0; }
.dashboard-main { min-width: 0; }
.tutorial-content .prose p, .tutorial-content>p, .tutorial-card p, .independent-reader .prose p { text-align: justify; hyphens: auto; }
.prose pre, .prose pre code { text-align: left; white-space: pre; overflow-x: auto; overflow-wrap: normal; word-break: normal; }
.reading-control h2 { font-size: 20px; margin: 0 0 8px; }
.reading-control p { margin: 0 0 12px; color: var(--muted); font-size: 16px; line-height: 1.6; }
.reading-control form { margin: 0; flex-shrink: 0; }
.reading-action, .quiz .completion-button { display: inline-block; background: transparent; color: inherit; border: 1px solid currentColor; border-radius: 6px; padding: 11px 18px; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; box-shadow: none; }
.reading-action:hover, .quiz .completion-button:hover { background: transparent; color: inherit; text-decoration: underline; box-shadow: none; }
.reading-action:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.completion-button:disabled { opacity: .65; cursor: default; }
.dashboard-columns { grid-template-columns: minmax(0,1fr) 300px; gap: 30px; align-items: start; display: block; }
.certificate-history .certificate-row { display: grid; grid-template-columns: 48px 1fr; gap: 6px 16px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.certificate-row .history-number { grid-row: span 3; }
.certificate-row>span:not(.history-number), .certificate-row>small { grid-column: 2; }
.article-search { flex-wrap: wrap; margin: 24px 0; }
.article-search input[type=search] { min-width: 0; flex: 1; }
.shorts-index>h1, .shorts-detail h1 { font-size: clamp(30px,5vw,48px); }
.shorts-index>.cards { margin-top: 32px; }
.shorts-detail header>p { max-width: 760px; line-height: 1.7; }
.shorts-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px; }
.short-video { min-width: 0; }
.short-video h2 { font-size: 20px; }
.short-video iframe { width: 100%; aspect-ratio: 9/16; border: 0; border-radius: 10px; background: #1e1e1e; }
.short-video p { font-size: 16px; line-height: 1.65; }
@media(max-width:900px) {
  .shorts-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(max-width:600px) {
  .shorts-grid { grid-template-columns: 1fr; }
  .short-video { max-width: 400px; width: 100%; margin: auto; }
  .reading-control { align-items: flex-start; flex-direction: column; }
  .article-search { align-items: stretch; flex-direction: column; }
}
.prose .codehilite { background: #1e1e1e; color: #d4d4d4; border-radius: 8px; overflow: auto; margin: 24px 0; }
.prose .codehilite pre { background: #1e1e1e; color: #d4d4d4; margin: 0; padding: 20px; border: 0; }
.prose .codehilite code { background: transparent; color: inherit; padding: 0; font-family: Consolas,'Liberation Mono',monospace; font-size: 14px; line-height: 1.7; }
.codehilite .k, .codehilite .kd, .codehilite .kt, .codehilite .kn { color: #569cd6; }
.codehilite .kc, .codehilite .kp, .codehilite .kr { color: #c586c0; }
.codehilite .s, .codehilite .s1, .codehilite .s2, .codehilite .sa, .codehilite .sb, .codehilite .sc, .codehilite .sd, .codehilite .se, .codehilite .sh, .codehilite .si, .codehilite .sr, .codehilite .ss { color: #ce9178; }
.codehilite .c, .codehilite .c1, .codehilite .cm, .codehilite .cs, .codehilite .ch { color: #6a9955; }
.codehilite .m, .codehilite .mi, .codehilite .mf, .codehilite .mh, .codehilite .mb, .codehilite .mo { color: #b5cea8; }
.codehilite .nf, .codehilite .fm, .codehilite .nb { color: #dcdcaa; }
.codehilite .nc, .codehilite .nn { color: #4ec9b0; }
.codehilite .na, .codehilite .nv, .codehilite .vc, .codehilite .vg, .codehilite .vi { color: #9cdcfe; }
.codehilite .o, .codehilite .p { color: #d4d4d4; }
.codehilite .err { color: #f48771; }
.tutorial-subject-copy p, .tutorial-library-index .prose p, .tutorial-collection-item p, .tutorial-reader .prose p { text-align: justify; hyphens: auto; }
.shorts-index .course-card { padding: 24px; }
.shorts-detail header { margin: 24px 0 36px; display: block; padding: 0; border: 0; min-height: 0; }
.library-catalog .library-card p { text-align: justify; hyphens: auto; }
.shorts-index .shorts-series-card { padding: 0; display: flex; flex-direction: column; }
.shorts-series-card .card-body { display: flex; flex-direction: column; flex: 1; }
.shorts-series-card .card-body h2 { font-size: 22px; line-height: 1.35; margin: 12px 0; }
.shorts-series-card .card-body p { font-weight: 400; min-height: 0; }
.shorts-series-card .card-foot { margin-top: auto; gap: 16px; }
.shorts-series-card .card-foot span { font-weight: 400; }
.shorts-series-card .card-foot b { white-space: nowrap; }
.shorts-cover { position: relative; height: 205px; min-height: 205px; padding: 24px; overflow: hidden; }
.shorts-cover>strong { font-size: clamp(24px,3vw,36px); line-height: 1.25; letter-spacing: -.04em; overflow-wrap: anywhere; }
.shorts-cover small span { font-size: 12px; letter-spacing: .08em; }
.shorts-detail .shorts-breadcrumb { justify-content: flex-start; flex-wrap: wrap; margin-bottom: 28px; font-size: 14px; gap: 12px; }
.shorts-series-intro h1 { margin: 14px 0 18px; font-size: clamp(30px,4vw,44px); line-height: 1.18; }
.shorts-series-intro>p { font-size: 16px; line-height: 1.75; max-width: 640px; margin: 0 0 22px; }
.shorts-series-meta>span { padding: 5px 10px; background: var(--surface); border-radius: 5px; }
.shorts-video-section>.section-heading { align-items: center; margin-bottom: 24px; }
.shorts-video-section>.section-heading h2 { font-size: 26px; margin: 0; }
.shorts-video-section>.section-heading>span { font-size: 14px; color: var(--muted); }
.short-video-heading { display: flex; min-height: 54px; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.short-episode { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; display: grid; place-items: center; min-width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); }
.short-player-wrap { width: min(100%,234px); margin: auto; aspect-ratio: 9/16; background: #111; border-radius: 8px; overflow: hidden; }
.shorts-detail .short-video iframe { display: block; width: 100%; height: 100%; aspect-ratio: 9/16; border: 0; border-radius: 0; }
.short-video .short-summary { font-size: 15px; line-height: 1.7; margin: 18px 0 0; font-weight: 400; }
.short-player-error { padding-top: 14px; }
.short-player-error p { font-size: 14px; line-height: 1.6; }
.short-player-error[hidden] { display: none; }
main a p, main a .meta, main a time, main a small { font-weight: 400; }
@media(max-width:1000px) {
  .shorts-detail .shorts-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .shorts-detail .shorts-series-header { gap: 24px; }
}
@media(max-width:650px) {
  .shorts-detail .shorts-series-header { grid-template-columns: 1fr; }
  .shorts-series-header .shorts-cover { height: 160px; min-height: 160px; }
  .shorts-detail .shorts-grid { grid-template-columns: 1fr; }
  .shorts-video-section>.section-heading { align-items: flex-start; flex-direction: column; gap: 10px; }
  .short-player-wrap { width: min(100%,225px); }
  .short-video-heading { min-height: 0; }
  .shorts-detail .short-video { max-width: 420px; margin: auto; }
  .shorts-index .filters { flex-wrap: wrap; }
  .shorts-index .filters input { min-width: 0; }
}
.short-play:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.short-play:has(.short-cover-image):after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg,#061623a6,#06162315); z-index: -1; }
.short-play-symbol { display: grid; place-items: center; width: 64px; height: 64px; border: 1px solid #ffffff70; border-radius: 50%; font-size: 25px; padding-left: 4px; flex-shrink: 0; background: #102b3ad9; }
.short-expand { display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: var(--ink); cursor: pointer; margin-left: auto; }
.short-expand:hover { background: var(--surface); }
.short-video-heading h3 { font-size: 18px; letter-spacing: -.02em; line-height: 1.45; margin: 0; overflow-wrap: anywhere; flex: 1; min-width: 0; }
#short-dialog { padding: 16px; border: 1px solid #304557; border-radius: 12px; background: #0d1923; color: #fff; max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); width: min(520px,calc(100vw - 24px)); overflow: auto; }
#short-dialog::backdrop { background: #05111ee6; }
.short-dialog-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.short-dialog-toolbar h2 { font-size: 17px; line-height: 1.4; color: #fff; margin: 0; flex: 1; letter-spacing: 0; }
.short-dialog-toolbar button { background: transparent; color: #fff; border: 1px solid #61717d; border-radius: 5px; min-width: 36px; height: 36px; font-size: 22px; cursor: pointer; }
.short-dialog-player { width: min(100%,calc((100dvh - 150px)*.5625)); min-width: 200px; aspect-ratio: 9/16; margin: auto; background: #000; }
.short-dialog-player iframe { display: block; width: 100%; height: 100%; border: 0; }
.short-dialog-error { color: #e2e8ed; font-size: 14px; }
#short-dialog:fullscreen { width: 100vw; max-width: none; height: 100dvh; max-height: none; border: 0; border-radius: 0; }
.short-dialog-player:empty { display: none; }
.independent-reader .tutorial-chapter>summary { display: block; position: relative; list-style: none; padding: 13px 28px 13px 8px; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; background: transparent; }
.independent-reader .tutorial-chapter .tutorial-topic-list a { margin: 3px 0; background: transparent; }
.notes-library .library-art { padding: 16px; height: 150px; min-height: 150px; }
.notes-library .library-art img { width: 100px; height: 100px; object-fit: contain; }
.notes-library .library-art>svg { width: 58px; height: 58px; }
.learning-dashboard .dashboard-stats { margin-bottom: 30px; margin: 24px 0 30px; gap: 16px; }
.learning-dashboard .dashboard-stats>div, .learning-dashboard .learning-course, .learning-dashboard .reading-guide-card, .learning-dashboard .dashboard-empty { border: 1px solid var(--line); border-radius: var(--learning-radius); background: #fff; padding: var(--learning-space); box-shadow: none; }
.learning-dashboard .learning-courses, .learning-dashboard .reading-guide-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--learning-space); }
.learning-dashboard .reading-history { margin: 32px 0 0; }
.learning-dashboard h2 { font-size: 25px; line-height: 1.35; margin: 0 0 20px; }
.learning-dashboard h3 { font-size: 21px; line-height: 1.4; margin: 14px 0; }
.learning-dashboard .progress-label { font-size: 14px; gap: 12px; }
.learning-dashboard progress { display: block; width: 100%; height: 7px; border: 0; border-radius: 8px; overflow: hidden; margin: 10px 0 20px; accent-color: var(--blue); }
.learning-dashboard progress::-webkit-progress-bar { background: var(--line); }
.learning-dashboard progress::-webkit-progress-value { background: var(--blue); }
.learning-dashboard progress::-moz-progress-bar { background: var(--blue); }
.learning-dashboard .reading-history #your-articles>a, .learning-dashboard .certificate-history .certificate-row { border: 1px solid var(--line); border-radius: var(--learning-radius); padding: 18px 20px; margin-bottom: 12px; background: #fff; }
.learning-dashboard .reading-guide-card>a { display: inline-block; font-size: 14px; margin-top: 4px; }
.learning-dashboard .dashboard-section-heading h2 { margin-bottom: 0; }
.learning-dashboard .button.small { font-size: 14px; border-radius: 6px; padding: 10px 16px; }
@media(max-width:700px) {
  .learning-dashboard .learning-courses, .learning-dashboard .reading-guide-grid { grid-template-columns: 1fr; }
  .learning-dashboard { --learning-space: 18px; }
  .learning-dashboard .dashboard-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .learning-dashboard .reading-history #your-articles>a { flex-wrap: wrap; }
  .notes-library .library-art img { width: 88px; height: 88px; }
}
.learning-dashboard .dashboard-heading { border-bottom: 1px solid var(--line); padding-bottom: 26px; position: static; top: auto; z-index: auto; }
.independent-reader .tutorial-topic-list>a { position: relative; display: flex; align-items: flex-start; flex-wrap: wrap; gap: 6px 10px; padding: 11px 10px; line-height: 1.5; }
.tutorial-topic-title { flex: 1 1 125px; min-width: 0; overflow-wrap: anywhere; }
.topic-status { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; line-height: 1.5; font-weight: 600; white-space: nowrap; padding: 2px 6px; border-radius: 4px; color: #526778; background: #ffffffb3; }
.topic-status.is-completed { color: #176449; background: #e0f1e8; }
.section-reading-status { display: block; margin-top: 4px; font-size: 12px; font-weight: 500; color: #526778; letter-spacing: 0; }
.tutorial-finished { display: block; margin-bottom: 8px; font-weight: 700; color: #176449; }
.learning-dashboard .learning-content-nav { justify-content: flex-start; flex-wrap: wrap; white-space: normal; overflow: visible; order: initial; width: 100%; gap: 8px; }
.dashboard-header-actions { display: flex; gap: 12px; align-items: flex-start; flex-wrap: nowrap; }
.dashboard-header-actions>.button, .dashboard-header-actions>.profile-editor { margin: 0; }
.dashboard-header-actions>.button, .dashboard-profile-edit>summary { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 16px; font-size: 14px; line-height: 22px; white-space: nowrap; }
.dashboard-identity, .dashboard-identity>div { min-width: 0; }
.dashboard-identity h1 { overflow-wrap: anywhere; }
.tutorial-drawer-close, .tutorial-drawer-backdrop { display: none; }
@media(max-width:800px) {
  .dashboard-header-actions { width: 100%; gap: 8px; }
  .dashboard-header-actions>.button, .dashboard-header-actions>.profile-editor { flex: 1; min-width: 0; }
  .dashboard-header-actions>.button, .dashboard-profile-edit>summary { padding: 12px 8px; font-size: 13px; }
  .dashboard-profile-edit .profile-editor-body { left: auto; right: 0; width: 320px; max-width: calc(100vw - 32px); }
  .independent-reader { grid-template-columns: minmax(0,1fr); }
  .js .independent-reader .tutorial-rail { display: block; position: fixed; inset: 0 auto 0 0; width: min(320px,85vw); height: 100dvh; max-height: none; overflow-y: auto; overscroll-behavior: contain; z-index: 102; padding: 20px 16px; transform: translateX(0); visibility: visible; transition: transform .2s ease,visibility .2s; box-shadow: 8px 0 30px #0b203526; }
  .js .independent-reader.contents-hidden .tutorial-rail { transform: translateX(-100%); visibility: hidden; pointer-events: none; }
  .tutorial-drawer-close { display: block; margin: 0 0 16px auto; border: 1px solid var(--line); border-radius: 6px; background: white; color: var(--ink); padding: 8px 12px; font: inherit; cursor: pointer; }
  .tutorial-drawer-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 101; background: #0b203580; border: 0; }
  body.tutorial-drawer-open { overflow: hidden; }
  .tutorial-breadcrumbs { justify-content: flex-start; overflow-wrap: anywhere; }
  .tutorial-reading-pane { min-width: 0; }
}
@media(prefers-reduced-motion:reduce) {
  .js .independent-reader .tutorial-rail { transition: none; }
}
h1, h2, h3 { line-height: 1.2; letter-spacing: -1px; font-family: var(--heading-font); color: var(--ink); text-wrap: balance; }
p { color: var(--muted); }
a, button { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid #04AA6D; outline-offset: 5px; }
main a, .site-footer a { font-weight: 600; }
.button { display: inline-flex; justify-content: center; align-items: center; color: white; cursor: pointer; font-weight: 600; background: var(--blue); border: 1px solid transparent; border-radius: 7px; padding: 8px 18px; min-height: 38px; gap: 8px; box-shadow: none; transition: background .2s,transform .2s; }
.button:hover { color: white; background: #085566; transform: translateY(-2px); }
.button.small, .learning-dashboard .button.small { border-radius: 7px; padding: 7px 14px; min-height: 36px; }
.button.secondary { border: 1px solid var(--line); background: transparent; border-color: var(--line); color: var(--ink); }
.button.secondary:hover { background: var(--sage); }
.eyebrow { font-family: var(--body-font); font-size: 10px; letter-spacing: .15em; color: #737b67; font-weight: 700; }
.section { margin: auto; max-width: 1280px; padding: 64px 5%; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 30px; }
.section-heading h2 { font-size: clamp(27px,3vw,36px); font-weight: 650; letter-spacing: -1.3px; }
.section-heading p { font-size: 15px; margin: 12px 0 0; }
.text-link { font-weight: 600; font-size: 13px; border-bottom: 1px solid #b4b8aa; padding-bottom: 6px; }
.page-title, .editorial-heading h1 { font-weight: 600; letter-spacing: -.045em; }
.brand-logo { flex-shrink: 0; width: 38px; height: 38px; }
.site-header a[aria-current=page] { color: var(--blue); }
.menu-toggle { display: none; align-items: center; gap: 10px; border: 1px solid var(--line); padding: 10px 13px; color: var(--ink); font-size: 14px; min-height: 44px; border-radius: 999px; background: transparent; }
.skip-link { position: fixed; top: -100px; left: 20px; z-index: 200; padding: 12px 20px; background: var(--ink); color: #fff; border-radius: 8px; }
.skip-link:focus { top: 12px; }
.welcome-section { max-width: 1280px; margin: 0 auto; padding: 76px 5% 66px; display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 72px; }
.welcome-label { display: flex; align-items: center; gap: 9px; color: #65705c; font-size: 11px; font-weight: 600; }
.welcome-label>span { height: 7px; width: 7px; background: #778862; border-radius: 50%; }
.welcome-copy h1 { font-size: clamp(52px,5.4vw,76px); font-weight: 600; letter-spacing: -4px; line-height: 1.04; margin: 27px 0 24px; }
.welcome-copy h1 em { font-family: var(--serif); font-weight: 400; font-style: italic; color: var(--blue); letter-spacing: -3px; }
.welcome-copy>p { font-size: 16px; line-height: 1.85; max-width: 440px; margin: 0 0 28px; }
.welcome-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; }
.welcome-actions .button { font-size: 12px; padding: 13px 21px; }
.welcome-link { font-size: 12px; display: flex; gap: 10px; align-items: center; }
.welcome-topics { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 27px; }
.welcome-topics span { font-size: 10px; color: #74776d; border: 1px solid #ddded2; border-radius: 99px; padding: 4px 11px; }
.curiosity-board { display: grid; grid-template-columns: 1.15fr 1fr; gap: 14px; position: relative; transform: rotate(-2deg); padding: 12px 0 12px 12px; }
.board-caption { grid-column: 1/-1; display: flex; justify-content: space-between; font-size: 9px; letter-spacing: .15em; font-weight: 600; margin: 0 0 7px; padding-inline: 6px; color: #7d8374; }
.board-caption>span { font-size: 18px; }
.idea-tile { background: #e4eacb; border-radius: 110px 110px 16px 16px; padding: 50px 22px 28px; position: relative; overflow: hidden; min-height: 320px; display: flex; flex-direction: column; justify-content: space-between; }
.tile-label { font-size: 8px; font-weight: 700; letter-spacing: .14em; text-align: center; position: relative; z-index: 1; }
.idea-tile h2 { font-size: 37px; font-weight: 500; letter-spacing: -1.8px; line-height: 1.02; position: relative; margin: 16px 0 0; }
.idea-tile h2 em { font-family: var(--serif); font-weight: 400; }
.idea-orbit { height: 115px; position: relative; width: 100%; margin-top: 16px; }
.idea-orbit i { position: absolute; inset: 20px 8px; border: 1px solid #89966f; border-radius: 50%; transform: rotate(-35deg); }
.idea-orbit i:nth-child(2) { transform: rotate(30deg); }
.idea-orbit i:nth-child(3) { transform: rotate(90deg); }
.idea-orbit b { position: absolute; inset: 0; display: grid; place-items: center; color: #5b6b47; font-size: 40px; font-weight: 400; }
.practice-tile { align-self: end; background: #ecd4c2; min-height: 275px; border-radius: 16px 16px 85px 16px; padding: 24px 20px; display: flex; flex-direction: column; transform: rotate(6deg); margin: 0 0 6px; }
.practice-tile .tile-label { text-align: left; }
.practice-tile p { font-size: 16px; line-height: 1.4; color: #684937; margin: 20px 0 8px; font-family: var(--serif); font-style: italic; }
.step-art { height: 130px; display: flex; align-items: flex-end; justify-content: center; gap: 0; padding-top: 30px; transform: rotate(-8deg); }
.step-art i { display: block; width: 30%; height: 42px; background: #a35e43; border-radius: 5px 5px 0 0; }
.step-art i:nth-child(2) { height: 70px; background: #bb7d5e; }
.step-art i:nth-child(3) { height: 100px; background: #d2a386; }
.board-note { grid-column: 1/-1; background: #fffdf8; border: 1px solid #e4e2d5; border-radius: 14px; padding: 18px 22px; display: flex; align-items: center; gap: 16px; margin: 6px 20px 0 0; transform: rotate(2deg); box-shadow: 0 10px 20px #40372404; }
.board-note>span { font-size: 36px; color: #a05f40; line-height: 1; }
.board-note p { margin: 0; font-size: 12px; color: #818275; }
.board-note strong { font-weight: 500; color: #424b3b; }
.explore-paths { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); max-width: 1152px; margin: 0 auto 18px; border-block: 1px solid var(--line); padding: 25px 0; }
.explore-paths>a { display: flex; align-items: center; gap: 15px; padding: 3px 24px; border-right: 1px solid var(--line); }
.explore-paths>a:first-child { padding-left: 0; }
.explore-paths>a:last-child { border: 0; }
.explore-paths>a>div { flex: 1; }
.explore-paths h2 { font-size: 14px; letter-spacing: -.3px; margin: 0 0 6px; }
.explore-paths p { font-size: 11px; margin: 0; }
.path-symbol { font-size: 23px; background: #edf0e5; border-radius: 50%; width: 43px; height: 43px; flex-shrink: 0; display: grid; place-items: center; color: #748060; }
.explore-paths>a:nth-child(2) .path-symbol { background: #f5e7db; color: #a76a42; }
.explore-paths>a:nth-child(3) .path-symbol { background: #e9e6ef; color: #80758d; }
.explore-paths>a>span:last-child { font-size: 16px; color: #9a9f8e; }
.home-library { padding-top: 57px; }
.home-reading { padding-top: 20px; }
.reading-card-top { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.reading-card-top>span:last-child { font-size: 10px; color: var(--muted); font-weight: 400; }
.learning-invitation { max-width: 1152px; margin: 32px auto 78px; padding: 50px 54px; background: #eaf0e2; border-radius: 22px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 70px; align-items: center; }
.learning-invitation h2 { font-size: 38px; line-height: 1.13; font-weight: 550; letter-spacing: -1.5px; margin: 18px 0; }
.learning-invitation h2 em { font-family: var(--serif); font-weight: 400; color: #6b7858; }
.learning-invitation p { font-size: 13px; line-height: 1.8; }
.learning-invitation .button { background: #3d5139; font-size: 12px; margin-top: 10px; }
.learning-invitation .button:hover { background: #2b3e27; }
.invitation-steps>div { display: flex; gap: 20px; padding: 17px 0; border-bottom: 1px solid #d4dccb; }
.invitation-steps>div:last-child { border: 0; }
.invitation-steps>div>span { font-family: var(--serif); font-style: italic; font-size: 25px; color: #9ea88e; }
.invitation-steps p { margin: 0; font-size: 12px; }
.invitation-steps strong { display: block; font-size: 13px; color: #3c4d36; margin-bottom: 4px; font-weight: 600; }
.cards, .three { gap: 24px; }
.course-card, .library-card, .editorial-card, .article-card, .tutorial-card, .guide-card { border: 1px solid var(--line); border-radius: 16px; background: #fffefb; box-shadow: none; overflow: hidden; transition: transform .2s,border-color .2s,box-shadow .2s; }
.course-card:hover, .editorial-card:hover, .article-card:hover, .tutorial-card:hover { transform: translateY(-4px); border-color: #c4c9b5; box-shadow: 0 12px 28px #343b2810; color: var(--ink); }
.course-art { display: flex; flex-direction: column; position: relative; isolation: isolate; overflow: hidden; height: 200px; background: #e9eddf; color: #4b6041; padding: 23px; }
.course-art:after { content: ''; position: absolute; width: 180px; height: 180px; border: 1px solid currentColor; border-radius: 50%; right: -44px; bottom: -85px; opacity: .15; z-index: -1; box-shadow: 0 0 0 22px #ffffff25,0 0 0 44px #ffffff20; }
.course-art>span { text-transform: uppercase; font-size: 9px; letter-spacing: .12em; position: relative; }
.course-art strong { flex: 1; display: flex; align-items: center; font-family: var(--serif); font-weight: 400; font-size: clamp(28px,3vw,43px); font-style: italic; letter-spacing: -1px; line-height: 1.1; overflow-wrap: anywhere; position: relative; animation: none; white-space: normal; }
.course-art small { display: flex; justify-content: space-between; font-size: 8px; letter-spacing: .12em; position: relative; }
.course-art i { font-style: normal; font-size: 18px; }
.art-1, .course-card:nth-child(3n+2) .course-art { background: #f2dfd1; color: #955a3c; }
.art-2, .course-card:nth-child(3n+3) .course-art { background: #e9e6ef; color: #746680; }
.art-3 { background: #e5eae0; color: #54614a; }
.art-4 { background: #f0e7d2; color: #8d7851; }
.art-5 { background: #e0eae7; color: #52786d; }
.card-body { padding: 23px; }
.card-body h3 { font-size: 20px; line-height: 1.35; letter-spacing: -.6px; font-weight: 650; margin: 12px 0; }
.card-body p { min-height: 48px; font-size: 13px; line-height: 1.75; margin-top: 12px; }
.meta, .card-foot { font-size: 11px; gap: 9px; }
.card-foot { display: flex; justify-content: space-between; border-top: 1px solid var(--line); font-size: 12px; padding-top: 16px; margin-top: 20px; }
.card-foot b { color: #7b583e; font-weight: 600; }
.sample, .enrollment-badge { border-radius: 20px; }
.article-card { border: 1px solid var(--line); border-radius: 9px; display: flex; flex-direction: column; padding: 25px; }
.article-card h3 { font-size: 22px; line-height: 1.35; font-weight: 550; letter-spacing: -.65px; margin: 22px 0 14px; }
.article-card p { font-size: 13px; line-height: 1.8; flex: 1; margin-top: 0; }
.article-card b { font-size: 12px; border-top: 1px solid var(--line); padding-top: 16px; margin-top: 12px; display: flex; justify-content: space-between; color: var(--blue); }
.editorial-card-body { flex: 1; display: flex; flex-direction: column; padding: 25px; }
.editorial-card h2 { line-height: 1.4; margin: 15px 0; font-size: 24px; font-weight: 550; letter-spacing: -.8px; }
.editorial-kind { font-size: 12px; letter-spacing: .6px; color: var(--blue); }
.editorial-card p, .library-catalog .library-card p, .tutorial-card p { text-align: left; hyphens: manual; }
.editorial-cover img { width: 100%; height: 100%; aspect-ratio: 16/10; object-fit: cover; }
.library-card .library-art>span { font-size: 54px; position: static; font-family: var(--serif); font-weight: 400; }
.library-card .library-art img { width: 88px; height: 88px; object-fit: contain; border-radius: 0; position: relative; z-index: 1; }
.empty, .editorial-empty { padding: 30px; border: 1px dashed #ccd0c0; border-radius: 16px; background: #f5f6ef; grid-column: 1/-1; }
.empty h3 { font-size: 22px; }
.empty p { font-size: 14px; }
.filters { display: flex; margin: 30px 0; padding: 16px; background: #f0f2e9; border: 1px solid #e2e5d8; border-radius: 15px; align-items: center; gap: 12px; }
.filters input:not([type=hidden]), .filters select { background: #fffefb; border: 1px solid #d9decf; border-radius: 9px; min-height: 46px; font-size: 14px; min-width: 0; }
.filters .button { font-size: 13px; }
.article-search label { font-weight: 600; font-size: 12px; }
.article-filters, .tutorial-filters { gap: 8px; flex-wrap: wrap; }
.article-filters a, .tutorial-filters a { border-radius: 999px; padding: 9px 16px; font-size: 12px; border: 1px solid var(--line); background: transparent; }
.article-filters a[aria-current], .tutorial-filters a[aria-current] { background: #e9eddf; color: #445c36; border-color: #cbd4bd; }
.tutorial-reader, .dashboard-shell, .tutorial-library-index { background: var(--paper); }
.independent-reader .tutorial-rail { position: sticky; top: var(--header-height,80px); align-self: start; height: calc(100dvh - var(--header-height,80px)); max-height: calc(100dvh - var(--header-height,80px)); overflow-y: auto; border-right: 1px solid var(--line); background: #f5f6ef; border-color: var(--line); }
.tutorial-topic-list { border-radius: 8px; padding: 5px; margin: 0 0 12px; background: #eaf0e3; }
.independent-reader .tutorial-chapter .tutorial-topic-list a:hover { background: #dfe8d6; }
.independent-reader .tutorial-chapter .tutorial-topic-list a.current { background: #d9e4cc; color: #3e5731; }
.tutorial-breadcrumbs { display: flex; flex-wrap: wrap; gap: 14px; padding: 22px 40px; border-bottom: 1px solid #e4e5e9; font-size: 14px; color: #747680; border-color: var(--line); }
.prose p, .tutorial-content .prose p, .article-prose p, .independent-reader .prose p, .tutorial-reader .prose p { text-align: left; hyphens: manual; color: #555e50; }
.prose a { color: var(--blue); }
.prose h2 { font-size: 27px; margin-top: 35px; font-weight: 600; letter-spacing: -.6px; }
.prose pre, .prose .codehilite { border-radius: 12px; }
.reading-control, .downloads, .quiz { border-color: var(--line); border-radius: 14px; }
.reading-action { border-radius: 999px; color: #3e5731; background: #edf2e6; border-color: #cfdcc2; }
.reading-action:hover { background: #e3ecd9; }
.learning-dashboard { padding-top: 45px; max-width: 1280px; --learning-space: 24px; --learning-radius: 16px; }
.learning-dashboard .dashboard-stats>div { border-left: 3px solid #04AA6D; padding: 18px; border-radius: 10px; box-shadow: none; background: #eef2e5; border-color: #dfe5d6; }
.learning-dashboard .dashboard-stats strong { font-size: 30px; line-height: 1.3; color: #546749; font-weight: 550; }
.learning-dashboard .learning-course, .learning-dashboard .reading-guide-card { margin: 0; min-width: 0; background: #fffefb; }
.learning-dashboard .learning-content-nav a { border: 1px solid var(--line); padding: 10px 12px; max-width: 100%; overflow-wrap: anywhere; border-radius: 999px; background: transparent; }
.learning-dashboard .learning-content-nav a[aria-current] { background: #e9eddf; color: #435735; border-color: #cbd4bd; }
.auth { max-width: 520px; margin: 65px auto; padding: 35px; border: 1px solid var(--line); background: #fffefb; border-radius: 22px; box-shadow: 0 16px 60px #373d2906; border-color: var(--line); }
.auth h1 { font-size: 34px; font-weight: 550; letter-spacing: -1.4px; }
.auth input:not([type=radio]), .contact-form input, .contact-form textarea { border-radius: 8px; border-color: #d9ddcf; }
.contact-form, .note-support-panel { background: #fffefb; border-radius: 18px; }
.shorts-cover>img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.short-play { width: 100%; height: 100%; border: 0; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; font: inherit; font-weight: 700; cursor: pointer; position: relative; isolation: isolate; overflow: hidden; padding: 20px; background: #344834; }
.short-play:hover { background: #263d2b; }
.short-cover-type { font-size: clamp(23px,3vw,34px); line-height: 1.25; overflow-wrap: anywhere; max-width: 100%; margin-bottom: 20px; font-family: var(--serif); font-weight: 400; }
.site-footer .brand b { font-size: 16px; }
.site-footer .brand small { font-size: 9px; font-weight: 400; }
.site-footer nav { font-size: 12px; gap: 25px; }
.footer-heart { color: #a45b42; }
@media(min-width:1440px) {
  .welcome-section { gap: 90px; }
  .welcome-copy h1 { font-size: 76px; }
}
@media(max-width:1200px) {
  .explore-paths, .learning-invitation { margin-left: 5%; margin-right: 5%; }
  .welcome-section { gap: 40px; padding-top: 55px; }
  .welcome-copy h1 { font-size: 60px; }
  .site-header .site-navigation { background: var(--paper); border-color: var(--line); }
  .curiosity-board { padding-left: 0; }
  .idea-tile { padding-inline: 18px; }
  .practice-tile { padding-inline: 17px; }
  .explore-paths>a { padding-inline: 16px; }
}
@media(max-width:900px) {
  .welcome-section { gap: 28px; }
  .welcome-copy h1 { font-size: 54px; letter-spacing: -3px; }
  .welcome-copy>p { font-size: 14px; }
  .curiosity-board { gap: 10px; }
  .idea-tile { min-height: 285px; padding: 38px 16px 22px; }
  .idea-tile h2 { font-size: 31px; }
  .practice-tile { min-height: 245px; padding: 20px 14px; }
  .practice-tile p { font-size: 15px; }
  .step-art { height: 115px; }
  .board-caption { font-size: 7px; }
  .tile-label { font-size: 7px; }
  .board-note { padding: 14px 16px; margin-right: 0; }
  .board-note p { font-size: 10px; }
  .explore-paths { gap: 0; }
  .explore-paths>a { gap: 10px; }
  .explore-paths h2 { font-size: 12px; }
  .explore-paths p { font-size: 10px; }
  .path-symbol { width: 32px; height: 32px; font-size: 19px; }
  .learning-invitation { padding: 36px; gap: 34px; }
  .learning-invitation h2 { font-size: 33px; }
}
@media(max-width:720px) {
  .welcome-section { grid-template-columns: 1fr; padding: 38px 6% 40px; gap: 34px; }
  .welcome-copy h1 { font-size: clamp(49px,12vw,70px); letter-spacing: -2.8px; margin: 23px 0; }
  .welcome-copy h1 em { letter-spacing: -2px; }
  .welcome-copy>p { font-size: 15px; max-width: 460px; }
  .welcome-label { font-size: 10px; }
  .welcome-topics { margin-top: 24px; }
  .curiosity-board { max-width: 390px; width: 100%; justify-self: center; margin: 4px 0 8px; gap: 13px; }
  .idea-tile { min-height: 300px; }
  .idea-tile h2 { font-size: 37px; }
  .practice-tile { min-height: 260px; }
  .board-caption { font-size: 8px; }
  .tile-label { font-size: 8px; }
  .board-note p { font-size: 12px; }
  .explore-paths { grid-template-columns: 1fr; padding: 0; margin-inline: 6%; }
  .explore-paths>a, .explore-paths>a:first-child { padding: 20px 0; border-right: 0; border-bottom: 1px solid var(--line); gap: 16px; }
  .explore-paths>a:last-child { border-bottom: 0; }
  .path-symbol { width: 40px; height: 40px; font-size: 23px; }
  .explore-paths h2 { font-size: 14px; }
  .explore-paths p { font-size: 12px; }
  .section { padding: 40px 6%; }
  .section-heading { align-items: flex-start; gap: 18px; flex-direction: column; }
  .section-heading h2 { font-size: 29px; }
  .section-heading>a { margin-top: 0; font-size: 12px; }
  .home-reading { padding-top: 10px; }
  .cards, .three { gap: 22px; }
  .course-art { height: 200px; }
  .course-art strong { font-size: 40px; }
  .learning-invitation { grid-template-columns: 1fr; margin: 16px 6% 45px; padding: 30px 25px; gap: 16px; }
  .learning-invitation h2 { font-size: 33px; }
  .site-header { padding: 14px 6%; min-height: 72px; }
  .site-header .brand b { font-size: 14px; }
  .site-header .brand small { font-size: 9px; }
  .site-header .brand-logo { width: 34px; height: 34px; }
  .filters { align-items: stretch; }
  .filters input:not([type=hidden]) { flex-basis: 100%; width: 100%; }
  .filters select { flex: 1; }
  .filters .button { padding: 11px 18px; }
  .site-footer .footer-top { align-items: flex-start; gap: 25px; }
  .site-footer nav { justify-content: flex-start; gap: 20px; }
  .site-footer .footer-bottom { align-items: flex-start; text-align: left; }
  .auth { margin: 30px 6%; }
  .page-title { font-size: 36px; }
  .catalog-intro { font-size: 15px; }
}
@media(prefers-reduced-motion:reduce) {
  .button, .course-card, .article-card, .editorial-card, .tutorial-card { transition: none; }
  .button:hover, .course-card:hover, .article-card:hover, .editorial-card:hover, .tutorial-card:hover { transform: none; }
}
.catalog-pagination { display: flex; justify-content: center; gap: 20px; align-items: center; flex-wrap: wrap; margin: 30px 0; font-size: 13px; }
.catalog-pagination a { padding: 10px 17px; border: 1px solid var(--line); border-radius: 30px; }
.catalog-pagination span { color: var(--muted); }
.catalog-cover-image, .library-card .library-art>img { position: absolute!important; inset: 0; width: 100%!important; height: 100%!important; max-width: none!important; max-height: none!important; object-fit: cover; border-radius: 0!important; }
.library-card .library-art strong { font-size: 36px; text-align: center; }
.lesson-shell { background: #f5f8fb; padding-bottom: 20px; max-width: 1440px; margin: auto; padding: 28px 4% 64px; }
.lesson-shell .breadcrumbs { padding: 0 0 24px; margin: 0; font-size: 12px; }
.lesson-shell .lesson-layout { display: grid; grid-template-columns: 290px minmax(0,1fr); gap: 32px; padding: 0; align-items: start; }
.modern-lesson-rail { position: sticky; top: 100px; border: 1px solid var(--line); border-radius: 18px; background: #f5f6ef; max-height: calc(100vh - 120px); overflow: auto; }
.modern-lesson-rail .course-overview { padding: 24px; border-bottom: 1px solid var(--line); }
.modern-lesson-rail h2 { font-size: 22px; line-height: 1.35; }
.modern-lesson-rail .course-outline { border: 0; background: transparent; }
.modern-lesson-rail .course-outline>summary { padding: 18px 24px; font-size: 13px; }
.modern-lesson-rail .lesson-list { padding: 0 10px 12px; }
.modern-lesson-rail .lesson-link { border: 0; border-radius: 10px; margin: 4px 0; padding: 13px; align-items: flex-start; background: transparent; gap: 12px; }
.modern-lesson-rail .lesson-link.active { background: #dfe8d6; color: #344e2d; }
.modern-lesson-rail .lesson-link:hover { background: #e8edde; }
.modern-lesson-rail .lesson-number { background: #fffefb; color: #6b785d; border-radius: 8px; flex-shrink: 0; }
.modern-lesson-rail .lesson-link-copy { font-size: 13px; line-height: 1.5; display: block; }
.modern-lesson-rail .topic-status { display: block; margin-top: 6px; font-size: 10px; }
.modern-lesson-rail .course-extras { padding: 0 24px 20px; }
.lesson-shell .lesson-article { min-width: 0; padding: 36px; background: #fffefb; border: 1px solid var(--line); border-radius: 20px; }
.lesson-heading { padding-bottom: 24px; border-bottom: 1px solid var(--line); margin-bottom: 28px; }
.lesson-heading .page-title { margin: 15px 0; font-size: clamp(28px,3vw,44px); font-weight: 550; line-height: 1.15; letter-spacing: -1.3px; }
.lesson-heading p { font-size: 14px; }
.lesson-body { margin: 30px 0; max-width: 72ch; padding-block: 20px; }
.lesson-downloads h2 { margin-top: 8px; font-size: 20px; }
.lesson-shell progress, .shorts-progress progress { display: block; width: 100%; height: 8px; accent-color: #546e45; }
.lesson-shell .quiz { background: #f8f9f3; padding: 24px; }
.lesson-shell .question-card { border-radius: 12px; background: #fffefb; }
.lesson-shell .reading-control { background: #edf2e6; padding: 24px; }
.lesson-shell .lesson-pagination { gap: 16px; }
.lesson-shell .lesson-pagination a { font-size: 12px; overflow-wrap: anywhere; }
.notes-heading { max-width: 680px; margin-bottom: 30px; }
.resource-pill { display: inline-block; padding: 8px 13px; border-radius: 99px; background: #e9eddf; color: #526846; font-size: 12px; }
.notes-library .note-category { margin-top: 40px; }
.notes-library .note-category>h2 { margin-bottom: 16px; font-size: 23px; font-weight: 550; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.note-meta { display: flex; justify-content: space-between; gap: 10px; color: #718064; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.notes-library .card-body { padding: 18px; display: flex; flex-direction: column; flex: 1; }
.notes-library .course-card { display: flex; flex-direction: column; }
.notes-library .card-body p { margin: 0 0 16px; flex: 1; }
.notes-library .card-body .button { align-self: flex-start; }
.note-support-page { max-width: 1160px; margin: auto; padding: 40px 5% 80px; }
.note-download-layout { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap: 36px; margin-top: 26px; align-items: start; }
.note-resource-panel, .note-download-layout .note-support-panel { padding: 32px; border: 1px solid var(--line); border-radius: 20px; background: #fffefb; }
.note-resource-panel h1 { font-size: 32px; letter-spacing: -1px; line-height: 1.2; }
.note-preview { height: 240px; margin: 24px 0; border-radius: 14px; background: #e9eddf; display: grid; place-items: center; overflow: hidden; }
.note-preview img { width: 100%; height: 100%; object-fit: cover; }
.note-preview strong { font: italic 38px var(--serif); padding: 24px; text-align: center; color: #526846; overflow-wrap: anywhere; }
.note-download-layout .note-support-panel { background: #f2eee4; }
.note-support-panel h2 { font-size: 30px; font-weight: 550; letter-spacing: -.8px; line-height: 1.2; }
.download-reassurance { font-size: 12px; color: var(--muted); margin-top: 18px; }
.shorts-detail .shorts-series-header { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); align-items: center; border-bottom: 1px solid var(--line); margin: 0 0 36px; padding: 32px; border: 1px solid var(--line); border-radius: 22px; background: #f0f3e8; gap: 36px; margin-top: 24px; }
.shorts-detail .shorts-series-header h1 { font-size: clamp(30px,4vw,48px); font-weight: 550; letter-spacing: -1.5px; }
.shorts-detail .short-video { overflow: hidden; max-width: none; margin: 0; width: 100%; background: #fffefb; border-radius: 16px; padding: 16px; border: 1px solid var(--line); box-shadow: 0 8px 30px #343b2805; scroll-margin-top: 100px; }
.short-cover-image { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; object-fit: cover; }
.shorts-progress { margin: 24px 0; background: #fffefb; padding: 24px; }
.shorts-progress>div { width: 100%; }
.shorts-progress h2 { font-size: 22px; font-weight: 550; margin: 8px 0 18px; }
.shorts-progress p { font-size: 12px; margin-bottom: 0; }
.short-completion { padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--line); }
.short-completion form { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.short-completion .reading-action { font-size: 11px; padding: 9px 12px; }
.short-completion .topic-status { font-size: 11px; }
.site-header .account>a[href='/dashboard/'] { padding: 9px 14px; border-radius: 99px; background: #e9eddf; color: #435735; }
@media(max-width:1000px) {
  .lesson-shell .lesson-layout { grid-template-columns: 245px minmax(0,1fr); gap: 20px; }
  .lesson-shell .lesson-article { padding: 24px; }
  .shorts-detail .shorts-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(max-width:720px) {
  .lesson-shell { padding: 22px 5% 40px; }
  .lesson-shell .lesson-layout { grid-template-columns: 1fr; }
  .modern-lesson-rail { position: static; max-height: none; }
  .modern-lesson-rail .lesson-list { max-height: 240px; overflow-y: auto; }
  .lesson-shell .lesson-article { padding: 22px 18px; }
  .note-download-layout { grid-template-columns: 1fr; gap: 22px; }
  .note-resource-panel, .note-download-layout .note-support-panel { padding: 24px; }
  .shorts-detail .shorts-series-header { padding: 24px; grid-template-columns: 1fr; }
  .shorts-detail .shorts-grid { grid-template-columns: 1fr; max-width: 420px; margin: auto; }
  .shorts-detail .short-video-heading { min-height: 56px; }
  .note-preview { height: 200px; }
}
.sr-only { margin: -1px; position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.resource-library, .resource-detail { max-width: 1180px; margin: 0 auto; padding: 52px 5% 72px; box-sizing: border-box; }
.resource-library-header { display: grid; grid-template-columns: minmax(0,1fr) 245px; gap: 64px; align-items: center; padding-bottom: 40px; }
.resource-library-header h1 { font-size: clamp(36px,4.5vw,62px); font-weight: 550; letter-spacing: -2px; line-height: 1.08; margin: 20px 0; }
.resource-library-header h1 em { font-family: var(--serif); font-weight: 400; color: #65754f; }
.resource-library-header p { max-width: 550px; line-height: 1.85; font-size: 15px; color: var(--muted); }
.resource-library-stamp { display: flex; flex-direction: column; gap: 18px; border-left: 1px solid var(--line); padding-left: 40px; }
.resource-stamp-symbol { font-size: 40px; color: #8c684b; line-height: 1; }
.resource-library-stamp strong { font-size: 18px; line-height: 1.5; font-weight: 550; }
.resource-library-stamp>span:last-child { font-size: 12px; color: var(--muted); line-height: 1.7; }
.resource-search { display: flex; gap: 12px; padding: 12px; background: #eef1e6; border: 1px solid var(--line); border-radius: 15px; }
.resource-search input[type=search] { flex: 1; min-width: 0; margin: 0; background: #fffefb; border: 1px solid #d9dece; border-radius: 9px; padding: 13px 16px; font: inherit; font-size: 14px; }
.resource-search .button { font-size: 13px; white-space: nowrap; }
.resource-tabs a[aria-current] { border-color: #cbd5bf; background: #e8eddf; color: #3d5334; }
.resource-list-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 30px 0 8px; }
.resource-list-heading h2 { font-size: 21px; font-weight: 550; letter-spacing: -.4px; margin: 0; }
.resource-list-heading>span { font-size: 11px; color: var(--muted); white-space: nowrap; }
.resource-cover { height: 170px; position: relative; overflow: hidden; background: #e4eaca; color: #526341; padding: 15px; border-radius: 5px 12px 12px 5px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: inset 5px 0 #ffffff35; }
.resource-tone-clay { background: #ecd9c8; color: #895d42; }
.resource-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.resource-cover>span { font-size: 8px; text-transform: uppercase; letter-spacing: .1em; }
.resource-cover>strong { font-family: var(--serif); font-size: 24px; line-height: 1.12; font-style: italic; font-weight: 400; overflow-wrap: anywhere; }
.resource-cover>small { font-size: 7px; letter-spacing: .08em; }
.resource-row-meta { display: flex; gap: 14px; font-size: 10px; letter-spacing: .03em; color: #79816f; }
.resource-row-meta>span:first-child { color: #8a6147; }
.resource-row-copy h3 { font-size: 23px; line-height: 1.3; font-weight: 550; letter-spacing: -.6px; margin: 12px 0; }
.resource-row-copy p { font-size: 13px; line-height: 1.8; max-width: 520px; margin: 0; color: var(--muted); overflow-wrap: anywhere; }
.resource-row-action { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; font-size: 11px; color: var(--muted); }
.resource-open { display: flex; gap: 12px; align-items: center; font-size: 12px; font-weight: 600; color: #415736; padding: 10px 0; border-bottom: 1px solid #bdc8ae; }
.resource-open:hover { color: #8a6147; border-color: #8a6147; }
.resource-unavailable { color: #886848; }
.resource-row-action p { font-size: 11px; margin: 0; line-height: 1.6; }
.resource-empty { padding: 50px 24px; text-align: center; background: #f0f3e9; border-radius: 16px; margin: 24px 0; }
.resource-empty h2 { font-size: 26px; font-weight: 550; }
.resource-empty p { font-size: 14px; }
.resource-library-footer a { color: #546a43; }
.resource-breadcrumb { display: flex; gap: 14px; font-size: 12px; color: var(--muted); margin-bottom: 40px; }
.resource-detail-grid { display: grid; grid-template-columns: 285px minmax(0,1fr); gap: 70px; align-items: start; }
.resource-book-panel { position: sticky; top: calc(var(--header-height,80px) + 30px); text-align: center; }
.resource-book { aspect-ratio: 3/4; padding: 28px 25px; border-radius: 4px 14px 14px 4px; position: relative; background: #e5ebd2; color: #50633e; display: flex; flex-direction: column; justify-content: space-between; text-align: left; box-shadow: inset 8px 0 #ffffff40,10px 14px 28px #3039210d; overflow: hidden; }
.resource-book:after { content: ''; position: absolute; inset: 0 auto 0 12px; border-left: 1px solid #52634112; pointer-events: none; }
.resource-book img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.resource-book>span { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.resource-book>strong { font: italic 39px/1.16 var(--serif); font-weight: 400; overflow-wrap: anywhere; }
.resource-book>small { font-size: 8px; line-height: 1.7; letter-spacing: .09em; }
.resource-format { display: block; font-size: 11px; color: var(--muted); padding: 20px 0; }
.resource-detail-copy { min-width: 0; }
.resource-detail-copy>h1 { font-size: clamp(30px,3.4vw,44px); letter-spacing: -1.4px; font-weight: 550; line-height: 1.15; margin: 18px 0 24px; }
.resource-detail-copy .prose { font-size: 15px; line-height: 1.85; }
.resource-download-box { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 16px; background: #edf2e5; border: 1px solid #dbe3cf; border-radius: 16px; padding: 24px; margin: 30px 0; }
.resource-download-box h2 { font-size: 19px; font-weight: 550; margin: 0 0 6px; }
.resource-download-box p { font-size: 12px; margin: 0; color: var(--muted); }
.resource-download-box .button { font-size: 12px; padding: 12px 16px; white-space: nowrap; }
.resource-download-box small { grid-column: 1/-1; font-size: 11px; color: #637557; }
.resource-support { padding: 28px 0; border-top: 1px solid var(--line); }
.resource-support h2 { font-size: 25px; font-weight: 550; letter-spacing: -.7px; margin: 14px 0; }
.resource-support>p { font-size: 13px; line-height: 1.8; color: var(--muted); }
.resource-support .bkash-support { margin: 18px 0; padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: #fffefb; }
.resource-support .bkash-support>div { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.resource-support .bkash-support strong { font-size: 21px; overflow-wrap: anywhere; }
.resource-support .bkash-support p { font-size: 12px; }
.resource-support .resource-support-note { font-size: 11px; }
.resource-back-link { display: inline-block; font-size: 12px; padding-top: 10px; color: #526946; }
.tutorial-course-card { display: flex; flex-direction: column; }
.tutorial-course-card .course-art { display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; text-align: left; flex-shrink: 0; }
.tutorial-course-card .course-art>strong { font-size: clamp(28px,3vw,43px); text-align: left; }
.tutorial-course-card .course-art>small { display: flex; justify-content: space-between; align-items: center; }
.tutorial-course-card .card-body { flex: 1; display: flex; flex-direction: column; }
.tutorial-course-card .card-body>p { flex: 1; }
.tutorial-overview-count { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border: 1px solid var(--line); border-radius: 12px; background: #edf2e5; margin: 26px 0; color: #546945; font-size: 13px; }
.tutorial-overview-count strong { font-size: 28px; font-weight: 500; }
.article-detail.reading-story { max-width: 1160px; margin: auto; padding: 36px 5% 70px; box-sizing: border-box; }
.story-breadcrumb { display: flex; gap: 12px; font-size: 11px; color: var(--muted); padding-bottom: 28px; }
.story-header .article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; font-size: 11px; color: var(--muted); margin: 0; }
.story-kind { padding: 6px 10px; background: #e9eddf; color: #536945; border-radius: 99px; }
.reading-story .story-header h1 { font-size: clamp(34px,4.3vw,58px); font-weight: 550; letter-spacing: -1.8px; line-height: 1.12; margin: 25px 0; }
.story-author>div { display: flex; flex-direction: column; gap: 5px; }
.story-author>div>span { font-size: 10px; color: var(--muted); }
.story-share { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.reading-story .article-share { display: flex; align-items: center; gap: 10px; width: auto; height: auto; border: 1px solid var(--line); border-radius: 99px; padding: 10px 15px; background: #fffefb; font: inherit; font-size: 12px; cursor: pointer; }
.story-share .share-status { font-size: 10px; color: var(--muted); }
.story-cover { margin: 0 0 40px; overflow: hidden; border-radius: 18px; background: #edf0e4; }
.story-cover img { display: block; width: 100%; max-height: 560px; object-fit: cover; }
.reading-story .story-layout { display: grid; grid-template-columns: minmax(0,1fr) 220px; gap: 55px; align-items: start; }
.reading-story .article-main-content { min-width: 0; }
.reading-story .story-prose { font-size: 16px; line-height: 1.9; max-width: 740px; overflow-wrap: anywhere; }
.story-prose>p:first-child { font-size: 18px; color: #43523b; }
.reading-story .story-prose h2 { font-size: 28px; line-height: 1.25; font-weight: 550; letter-spacing: -.7px; margin: 42px 0 20px; scroll-margin-top: 110px; }
.reading-story .story-prose h3 { font-size: 21px; font-weight: 550; line-height: 1.4; margin: 32px 0 16px; scroll-margin-top: 110px; }
.reading-story .story-prose p { margin: 0 0 23px; }
.reading-story .story-prose blockquote { margin: 30px 0; padding: 22px 25px; border-left: 3px solid #95a57f; background: #eff3e7; border-radius: 0 12px 12px 0; font-family: var(--serif); font-size: 21px; line-height: 1.7; }
.reading-story .story-prose blockquote p:last-child { margin-bottom: 0; }
.reading-story .story-prose pre { padding: 22px; max-width: 100%; overflow: auto; font-size: 13px; line-height: 1.75; border: 1px solid var(--line); border-radius: 12px; }
.reading-story .story-prose table { display: block; overflow: auto; max-width: 100%; font-size: 13px; white-space: normal; }
.reading-story .story-prose td, .reading-story .story-prose th { padding: 12px 16px; }
.reading-story .story-prose img { border-radius: 12px; max-width: 100%; height: auto; }
.reading-story .story-outline { position: sticky; top: calc(var(--header-height,80px) + 26px); border: 1px solid var(--line); border-radius: 14px; padding: 20px; background: #f2f4ec; max-height: 70vh; overflow: auto; }
.story-outline[hidden] { display: none!important; }
.reading-story .story-outline h2 { font-size: 16px; margin: 12px 0 18px; font-weight: 600; }
.story-outline .eyebrow { font-size: 8px; }
.reading-story .story-outline nav { display: flex; flex-direction: column; gap: 0; }
.reading-story .story-outline a { font-size: 12px; line-height: 1.6; padding: 10px 0; border-bottom: 1px solid var(--line); color: #68785a; }
.reading-story .story-outline a:last-child { border: 0; }
.reading-story .story-outline a:hover { color: #35512b; }
.reading-story .story-outline a.subheading { padding-left: 12px; font-size: 11px; }
.story-layout:has(.story-outline[hidden]) { grid-template-columns: minmax(0,740px); justify-content: center; }
.reading-story .reading-control { margin-top: 38px; padding: 25px; background: #edf2e5; }
.reading-story .reading-control h2 { font-size: 20px; font-weight: 550; }
.reading-story .reading-control p { font-size: 13px; line-height: 1.7; }
.story-attachment { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: #fffefb; margin-top: 30px; }
.story-attachment h2 { font-size: 19px; font-weight: 550; margin: 8px 0; }
.story-attachment .button { font-size: 12px; white-space: nowrap; }
@media(max-width:1000px) {
  .resource-row { grid-template-columns: 125px minmax(0,1fr) 140px; gap: 22px; }
  .resource-detail-grid { grid-template-columns: 235px minmax(0,1fr); gap: 35px; }
  .reading-story .story-layout { gap: 28px; grid-template-columns: minmax(0,1fr) 180px; }
  .resource-library-header { gap: 32px; grid-template-columns: minmax(0,1fr) 200px; }
  .resource-library-stamp { padding-left: 25px; }
}
@media(max-width:720px) {
  .resource-library, .resource-detail { padding: 30px 6% 45px; }
  .resource-library-header { grid-template-columns: 1fr; gap: 20px; padding-bottom: 25px; }
  .resource-library-header h1 { letter-spacing: -1.3px; font-size: 42px; }
  .resource-library-stamp { border-left: 0; border-top: 1px solid var(--line); padding: 18px 0 0; display: grid; grid-template-columns: 35px minmax(0,1fr); gap: 8px 14px; }
  .resource-stamp-symbol { grid-row: 1/3; font-size: 30px; }
  .resource-library-stamp strong { font-size: 14px; }
  .resource-library-stamp strong br { display: none; }
  .resource-library-stamp>span:last-child { grid-column: 2; font-size: 11px; }
  .resource-library-stamp>span:last-child br { display: none; }
  .resource-search { flex-wrap: wrap; gap: 8px; }
  .resource-search input[type=search] { flex-basis: 100%; width: 100%; }
  .resource-search .button { width: 100%; padding: 11px; }
  .resource-tabs { gap: 3px; padding: 18px 0; }
  .resource-tabs a { padding: 8px 10px; font-size: 11px; }
  .resource-list-heading { align-items: flex-start; flex-direction: column; gap: 8px; padding-top: 24px; }
  .resource-list-heading h2 { font-size: 20px; }
  .resource-row { grid-template-columns: 95px minmax(0,1fr); gap: 16px; padding: 24px 0; align-items: start; }
  .resource-cover { height: 130px; padding: 12px; grid-row: 1/3; }
  .resource-cover strong { font-size: 21px; }
  .resource-cover>span { font-size: 7px; }
  .resource-cover small { font-size: 6px; }
  .resource-row-copy h3 { font-size: 19px; margin: 9px 0; }
  .resource-row-copy p { font-size: 12px; line-height: 1.7; }
  .resource-row-meta { font-size: 9px; gap: 5px; flex-wrap: wrap; }
  .resource-row-action { grid-column: 2; gap: 4px; }
  .resource-row-action>span { font-size: 10px; }
  .resource-open { font-size: 11px; padding: 7px 0; }
  .resource-library-footer, .story-footer { flex-direction: column; gap: 12px; }
  .resource-detail-grid { grid-template-columns: 1fr; gap: 26px; }
  .resource-book-panel { position: static; max-width: 240px; width: 100%; margin: auto; }
  .resource-book { padding: 25px; }
  .resource-book strong { font-size: 34px; }
  .resource-breadcrumb { margin-bottom: 26px; }
  .resource-download-box { grid-template-columns: 1fr; padding: 22px; }
  .resource-download-box .button { justify-self: start; }
  .resource-detail-copy>h1 { font-size: 32px; }
  .article-detail.reading-story { padding: 28px 6% 45px; }
  .reading-story .story-header h1 { font-size: 37px; letter-spacing: -1.2px; }
  .story-deck { font-size: 19px; }
  .story-byline { padding: 18px 0; gap: 10px; }
  .story-cover { border-radius: 12px; margin-bottom: 28px; }
  .reading-story .story-layout { grid-template-columns: 1fr; gap: 26px; }
  .reading-story .story-outline { position: static; grid-row: 1; max-height: 230px; }
  .reading-story .story-prose { font-size: 15px; }
  .reading-story .story-prose h2 { font-size: 25px; margin-top: 32px; }
  .story-attachment { align-items: flex-start; flex-direction: column; }
  .reading-story .reading-control { padding: 22px; }
  .story-share { max-width: 110px; }
  .story-share .share-status { max-width: 110px; }
}
.reading-story .story-header { display: block; min-height: 0; padding: 0; border: 0; width: 100%; background: transparent; position: static; }
.resource-library .resource-library-header { padding: 0 0 40px; border: 0; min-height: 0; }
.resource-library .resource-library-footer, .reading-story .story-footer { padding: 28px 0 0; min-height: 0; background: transparent; border: 0; }
@media(max-width:720px) {
  .resource-library .resource-library-header { padding-bottom: 25px; }
}
.resource-library-footer { display: flex; justify-content: space-between; gap: 20px; font-size: 12px; color: var(--muted); padding-top: 28px; align-items: flex-start; text-align: left; }
@media(max-width:720px) {
  .resource-cover>strong { font-size: 16px; line-height: 1.2; }
  .resource-library-footer { align-items: flex-start; text-align: left; }
}
@media(max-width:720px) {
  .resource-cover>strong { font-size: 14px; line-height: 1.25; }
}
@media (max-width: 640px) {
  .global-search-btn span, .global-search-btn .search-key-badge { display: none; }
  .global-search-btn { padding: 7px 10px; margin-left: 6px; }
}
@keyframes modalFadeIn { from { opacity: 0; transform: translateY(-12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); } }
.run-code-btn:disabled, .run-python-btn:disabled { opacity: 0.7; cursor: wait !important; transform: none; }
@keyframes spin { 100% { transform: rotate(360deg); } }
@media (max-width: 600px) {
  .code-header-bar { height: 36px; padding: 0 8px; }
  .code-lang-badge { font-size: 0.68rem; }
  .code-action-bar { gap: 6px; }
  .run-code-btn, .run-python-btn, .copy-code-btn, .code-action-bar .copy { height: 24px !important; padding: 0 7px !important; font-size: 0.7rem !important; gap: 4px !important; }
}
.python-terminal-header button:hover { background: #22373e; color: #ffffff; }
@media (min-width: 901px) {
  .tutorial-reader.independent-reader { display: grid !important; grid-template-columns: 290px minmax(0, 1fr) !important; min-height: calc(100vh - var(--header-height, 80px)); position: relative; background: #fffefb; border-top: 1px solid var(--line, #e2e5ec); }
  .tutorial-reader.independent-reader.contents-hidden { grid-template-columns: 1fr !important; }
  .tutorial-reader.independent-reader.contents-hidden .tutorial-rail { display: none !important; }
  .tutorial-reader .tutorial-rail { position: sticky !important; top: var(--header-height, 80px) !important; height: calc(100dvh - var(--header-height, 80px)) !important; max-height: calc(100dvh - var(--header-height, 80px)) !important; overflow-y: auto !important; overscroll-behavior: contain; background: #fbfdfb !important; border-right: 1px solid var(--line, #e2e5ec) !important; padding: 24px 18px 48px !important; transform: none !important; visibility: visible !important; box-shadow: none !important; z-index: 10 !important; }
  .tutorial-rail-header { margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid #e6ece7; }
  .tutorial-rail-header h2 { font-size: 1.15rem; font-weight: 700; margin: 4px 0 8px; color: #172a1e; }
}
.tutorial-content-with-outline { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; max-width: 1220px; margin: 0 auto; padding: 32px 36px 80px; }
.tutorial-content { flex: 1; min-width: 0; max-width: 820px; margin: 0 !important; padding: 0 !important; }
.tutorial-topic-header { margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid var(--line, #e2e5ec); }
.tutorial-topic-header .page-title { margin: 10px 0 0; }
.tutorial-on-this-page, .lesson-on-this-page, .article-outline, .story-outline { width: 240px; flex-shrink: 0; position: sticky !important; top: calc(var(--header-height, 80px) + 24px) !important; align-self: start !important; max-height: calc(100vh - var(--header-height, 80px) - 48px); overflow-y: auto; padding-left: 20px; border-left: 1px solid #e1e8e2; box-sizing: border-box; }
.on-this-page-sticky { display: flex; flex-direction: column; }
.on-this-page-heading { font-size: 0.95rem; font-weight: 700; color: #1b3123; margin: 4px 0 14px; letter-spacing: -0.2px; }
.on-this-page-nav, .lesson-toc-nav, .article-outline nav { display: flex; flex-direction: column; gap: 8px; }
.toc-link { font-size: 0.84rem; color: #5c7263; text-decoration: none; line-height: 1.45; padding: 4px 8px; border-radius: 5px; border-left: 2px solid transparent; transition: all 0.15s ease; word-break: break-word; }
.toc-link:hover { color: #0e7065; background: #f0f6f2; }
.toc-link.is-active { color: #0e7065; font-weight: 600; background: #eef6f2; border-left-color: #0e7065; }
.toc-link.is-subheading { padding-left: 18px; font-size: 0.78rem; color: #748c7c; }
.back-to-top-btn, .back-to-top-link { display: inline-block; margin-top: 18px; font-size: 0.78rem; color: #7b9182; text-decoration: none; transition: color 0.15s; }
.back-to-top-btn:hover, .back-to-top-link:hover { color: #0e7065; }
@media (min-width: 1024px) {
  .lesson-layout { display: grid !important; grid-template-columns: 270px minmax(0, 1fr) 230px !important; gap: 36px !important; max-width: 1400px; margin: 0 auto; align-items: start !important; }
  .modern-lesson-rail, .lesson-layout aside#lesson-sidebar { position: sticky !important; top: calc(var(--header-height, 80px) + 20px) !important; max-height: calc(100vh - var(--header-height, 80px) - 36px) !important; overflow-y: auto !important; align-self: start !important; }
}
@media (max-width: 1023px) and (min-width: 761px) {
  .lesson-layout { display: grid !important; grid-template-columns: 260px minmax(0, 1fr) !important; gap: 24px !important; }
  .lesson-on-this-page { display: none !important; }
}
@media (max-width: 1100px) {
  .tutorial-content-with-outline { display: block; padding: 24px 20px 60px; }
  .tutorial-on-this-page { display: none !important; }
}
.heading-anchor { opacity: 0; margin-left: 8px; color: #0e7065; text-decoration: none; font-weight: 400; font-size: 0.85em; transition: opacity 0.15s; }
h2:hover .heading-anchor, h3:hover .heading-anchor { opacity: 0.75; }
.tutorial-prose h2, .tutorial-prose h3, .lesson-body h2, .lesson-body h3, .article-prose h2, .article-prose h3 { scroll-margin-top: calc(var(--header-height, 80px) + 24px); }
.tutorial-rail::-webkit-scrollbar, .tutorial-on-this-page::-webkit-scrollbar, .lesson-on-this-page::-webkit-scrollbar, .modern-lesson-rail::-webkit-scrollbar, .article-outline::-webkit-scrollbar { width: 5px; }
.tutorial-rail::-webkit-scrollbar-track, .tutorial-on-this-page::-webkit-scrollbar-track, .lesson-on-this-page::-webkit-scrollbar-track, .modern-lesson-rail::-webkit-scrollbar-track, .article-outline::-webkit-scrollbar-track { background: transparent; }
.tutorial-rail::-webkit-scrollbar-thumb, .tutorial-on-this-page::-webkit-scrollbar-thumb, .lesson-on-this-page::-webkit-scrollbar-thumb, .modern-lesson-rail::-webkit-scrollbar-thumb, .article-outline::-webkit-scrollbar-thumb { background: #cdd9d1; border-radius: 4px; }
.tutorial-rail::-webkit-scrollbar-thumb:hover, .tutorial-on-this-page::-webkit-scrollbar-thumb:hover, .lesson-on-this-page::-webkit-scrollbar-thumb:hover, .modern-lesson-rail::-webkit-scrollbar-thumb:hover, .article-outline::-webkit-scrollbar-thumb:hover { background: #0e7065; }
.filter-select-wrap select:focus { background: #ffffff !important; border-color: #04AA6D !important; box-shadow: 0 0 0 3px rgba(0, 119, 142, 0.15) !important; outline: none; }
.course-topic-tag { font-size: 0.72rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #174233; }
.course-price-tag { font-size: 0.82rem; color: #5d7565; font-weight: 500; }
.card-action-text { color: #0e7065; font-weight: 700; font-size: 0.88rem; transition: transform 0.15s ease; }
.course-card:hover .card-action-text { transform: translateX(3px); }
.empty-catalog-state, .empty-lesson-state { grid-column: 1 / -1; padding: 48px 24px; text-align: center; background: #fbfdfb; border: 1px dashed #d1ded5; border-radius: 14px; margin: 20px 0; }
.empty-catalog-state h3, .empty-lesson-state h2 { font-size: 1.35rem; color: #193122; margin: 0 0 10px; }
.empty-catalog-state p, .empty-lesson-state p { color: #617769; font-size: 0.95rem; max-width: 480px; margin: 0 auto 20px; }
.lesson-downloads { margin: 36px 0; padding: 24px 28px; background: #f7faf7; border: 1px solid #e1ece3; border-radius: 12px; }
.downloads-header h2 { font-size: 1.3rem; margin: 6px 0 6px; color: #172a1e; }
.downloads-header p { font-size: 0.92rem; color: #556c5d; margin: 0 0 18px; }
.download-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.download-file-btn { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 10px 18px !important; border-radius: 8px !important; font-size: 0.88rem !important; font-weight: 600 !important; background: #ffffff !important; border: 1px solid #d5ded6 !important; color: #172a1e !important; transition: all 0.15s ease !important; }
.download-file-btn:hover { background: #0e7065 !important; border-color: #0e7065 !important; color: #ffffff !important; transform: translateY(-1px); box-shadow: 0 3px 10px rgba(14, 112, 101, 0.15); }
.quiz { margin: 36px 0 0; padding: 30px; background: #fbfdfb; border: 1px solid #d5ded6; border-radius: 14px; }
.quiz-intro-text { font-size: 0.9rem; color: #5c7464; margin: 0; }
.question-card { border-top: 1px solid #e2e8f0; min-width: 0; background: #ffffff; border: 1px solid #e2ece4; border-radius: 10px; padding: 20px; margin: 20px 0; box-sizing: border-box; }
.answer-option { display: flex !important; align-items: center !important; gap: 12px !important; padding: 12px 16px !important; margin: 8px 0 !important; background: #fcfdfc !important; border: 1px solid #dce7df !important; border-radius: 8px !important; cursor: pointer !important; transition: all 0.15s ease !important; }
.text-answer-input { width: 100%; padding: 12px 14px; border: 1px solid #d5ded6; border-radius: 8px; font-size: 0.95rem; font-family: inherit; margin-top: 8px; box-sizing: border-box; }
.text-answer-input:focus { border-color: #0e7065; outline: 2px solid rgba(14, 112, 101, 0.15); }
.completion-button { padding: 12px 24px !important; border-radius: 8px !important; font-size: 0.95rem !important; font-weight: 700 !important; cursor: pointer !important; }
.completed-banner { padding: 24px 28px; background: #eef7f3; border: 1px solid #bce1ce; border-radius: 12px; margin-bottom: 28px; }
.completed-banner h2 { color: #0f5132; margin: 4px 0 8px; }
.feedback-card { background: #ffffff; border: 1px solid #d5ded6; border-radius: 8px; margin: 12px 0; padding: 14px 18px; }
.feedback-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 0.74rem; font-weight: 700; margin-right: 8px; }
.feedback-badge.correct { background: #dcfce7; color: #15803d; }
.feedback-badge.incorrect { background: #fee2e2; color: #b91c1c; }
.contact-header { margin-bottom: 32px; max-width: 720px; }
.contact-lead { max-width: 650px; font-size: 1.1rem; color: #4f6756; line-height: 1.7; }
.contact-role { font-size: 0.92rem; font-weight: 600; color: #0e7065; margin: 4px 0 8px; }
.contact-loc { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: #637b6b; margin-bottom: 20px; }
.form-desc { font-size: 0.88rem; color: #5c7464; margin: 0 0 16px; }
.active-crumb { color: #14281c; font-weight: 600; }
.previous-submission-drawer { margin: 28px 0; border: 1px solid #cce2d6; border-radius: 14px; background: #ffffff; box-shadow: 0 4px 16px rgba(16, 75, 48, 0.04); overflow: hidden; transition: all 0.2s ease; }
.previous-submission-drawer[open] { border-color: #9cd1b5; box-shadow: 0 8px 24px rgba(16, 75, 48, 0.08); }
.previous-submission-summary { display: flex !important; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px; cursor: pointer; user-select: none; background: #f4faf6; transition: background 0.15s ease; }
.previous-submission-summary:hover { background: #eaf5ee; }
.previous-submission-summary::-webkit-details-marker, .previous-submission-summary::marker { display: none !important; }
.summary-left { display: flex; align-items: center; gap: 12px; }
.summary-eye-icon { color: #177846; flex-shrink: 0; }
.summary-left strong { display: block; font-size: 0.98rem; font-weight: 650; color: #0d462a; }
.summary-left small { display: block; font-size: 0.8rem; color: #447257; margin-top: 2px; }
.submission-badge { display: inline-flex; align-items: center; font-size: 0.78rem; font-weight: 700; color: #136a3e; background: #d4f2e0; border: 1px solid #aee4c3; padding: 5px 12px; border-radius: 999px; white-space: nowrap; }
.previous-submission-content { padding: 24px; border-top: 1px solid #e0efe6; background: #fbfdfc; }
.previous-submission-content .quiz { margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
.lesson-player { padding-bottom: 0; position: relative; width: 100%; border-radius: 14px; overflow: hidden; background: #0b151e; box-shadow: 0 10px 32px rgba(11, 21, 30, 0.15); margin: 24px 0 32px; border: 1px solid #1a2f3f; }
.lesson-player iframe, .lesson-player .video { display: block; width: 100% !important; aspect-ratio: 16 / 9; border: 0; border-radius: 0; }
.reading-control { display: flex; align-items: center; justify-content: space-between; gap: 24px; border: 1px solid var(--line); border-left: 3px solid currentColor; border-radius: 8px; background: transparent; padding: 24px; color: var(--ink); margin: 40px 0 28px; }
.reading-control-card { padding: 24px 28px; border-radius: 14px; display: flex; align-items: center; justify-content: space-between; gap: 24px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03); }
.reading-control-card.completed { background: #f0faf5; border: 1px solid #bce6cf; }
.reading-control-card.uncompleted { background: #f8fbfa; border: 1px solid #dce8e0; }
.reading-control-card.unauthenticated { background: #fbfbfa; border: 1px solid #e4e7e2; }
.reading-control-icon { width: 44px; height: 44px; border-radius: 50%; background: #d4f2e0; color: #12673d; font-size: 20px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.reading-control-text { flex: 1; }
.reading-control-text h2 { font-size: 1.35rem; margin: 4px 0 6px; color: #102a3a; }
.reading-control-text p { font-size: 0.92rem; line-height: 1.6; color: #496374; margin: 0 0 10px; }
.dashboard-link { font-size: 0.88rem; font-weight: 600; color: #04AA6D; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.dashboard-link:hover { text-decoration: underline; }
.reading-action-form .button.reading-action { height: 46px; padding: 0 22px; border-radius: 10px; background: #04AA6D; color: #ffffff; border: 0; font-weight: 600; font-size: 0.92rem; cursor: pointer; white-space: nowrap; transition: all 0.2s ease; }
.reading-action-form .button.reading-action:hover { background: #04AA6D; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 119, 142, 0.25); }
.resource-library { max-width: 1240px; }
.resource-search.catalog-filters { margin: 24px 0 28px; }
.resource-tabs { justify-content: flex-start; display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 0 24px; border-bottom: 1px solid #e2e8f0; }
.resource-tabs a { display: inline-flex; align-items: center; gap: 8px; font-size: 0.86rem; font-weight: 550; color: #3b5668; padding: 8px 16px; border-radius: 999px; border: 1px solid #e2e8f0; background: #fbfdfd; text-decoration: none; transition: all 0.15s ease; }
.resource-tabs a:hover { border-color: #04AA6D; color: #04AA6D; background: #f0f8fb; }
.resource-tabs a[aria-current="page"] { background: #102a3a; color: #ffffff; border-color: #102a3a; }
.resource-tabs a>span { min-width: 18px; text-align: center; font-size: 0.75rem; font-weight: 700; background: rgba(0, 0, 0, 0.08); padding: 2px 7px; border-radius: 999px; }
.resource-tabs a[aria-current="page"]>span { background: rgba(255, 255, 255, 0.2); color: #ffffff; }
.resource-row { display: grid; grid-template-columns: 145px minmax(0,1fr) 155px; gap: 28px; align-items: center; border-bottom: 1px solid var(--line); min-width: 0; transition: transform 0.15s ease, box-shadow 0.15s ease; border-radius: 12px; padding: 20px; }
.resource-row:hover { background: #fbfdfd; box-shadow: 0 4px 16px rgba(16, 42, 58, 0.04); }
.reading-story { max-width: 1180px; }
.story-header { max-width: 830px; margin: 0 auto 36px; margin-bottom: 32px; }
.story-header h1 { font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 750; letter-spacing: -0.035em; line-height: 1.18; color: #102a3a; margin: 14px 0 16px; }
.story-deck { font-family: var(--serif); margin: 0 0 28px; font-size: 1.15rem; line-height: 1.7; color: #496374; margin-bottom: 24px; }
.story-byline { border-block: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 0; border-top: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0; }
.story-author { display: flex; align-items: center; gap: 12px; }
.story-monogram { place-items: center; font-family: var(--serif); width: 42px; height: 42px; border-radius: 50%; background: #102a3a; color: #ffffff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; letter-spacing: 1px; }
.story-author strong { font-weight: 600; display: block; font-size: 0.95rem; color: #102a3a; }
.story-author span { font-size: 0.82rem; color: #637d8f; }
.story-share .article-share { height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid #e2e8f0; background: #ffffff; color: #102a3a; font-size: 0.86rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: all 0.15s ease; }
.story-share .article-share:hover { background: #f0f6fa; border-color: #04AA6D; color: #04AA6D; }
.share-status { margin-left: 12px; font-size: 0.8rem; color: #15803d; font-weight: 600; }
.story-outline { position: sticky; top: calc(var(--header-height, 80px) + 24px); max-height: calc(100vh - 120px); overflow-y: auto; }
.story-footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 36px; margin-top: 40px; border-top: 1px solid #e2e8f0; font-size: 0.92rem; color: #637d8f; }
.story-footer a { font-weight: 600; color: #04AA6D; text-decoration: none; }
.story-footer a:hover { text-decoration: underline; }
@media (max-width: 768px) {
  .catalog-filters { padding: 14px; gap: 10px; }
  .filter-input-wrap, .filter-select-wrap { flex-basis: 100%; width: 100%; }
  .catalog-search-btn { width: 100%; }
  .reading-control-card { flex-direction: column; align-items: flex-start; padding: 20px; }
  .previous-submission-summary { flex-direction: column; align-items: flex-start; gap: 10px; }
  .story-byline { flex-direction: column; align-items: flex-start; gap: 14px; }
}
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height, 80px) + 24px); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
::selection { background: #e2e8f0; color: #0c4a6e; }
header:not(.site-header), footer:not(.site-footer), .catalog-page-header, .editorial-heading, .contact-header, .lesson-heading, .tutorial-topic-header, .story-header, .resource-library-header, .quiz-heading, .downloads-header, .concept-lab-header, .exercise-header { display: block; min-height: 0; padding: 0; border: 0; background: transparent; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--blue) !important; outline-offset: 3px !important; }
.site-messages { max-width: 1240px; margin: 16px auto 0; padding: 0 5%; }
.notice { display: flex; align-items: center; gap: 12px; max-width: 100%; margin: 10px 0; padding: 14px 20px; background: var(--success-bg); border: 1px solid var(--success-border); color: #0f5132; border-radius: 10px; font-weight: 600; font-size: 0.94rem; }
.notice-error { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger); }
.notice-icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(20, 108, 67, 0.14); font-size: 0.85rem; flex-shrink: 0; }
.reading-progress-track { position: sticky; top: var(--header-height, 80px); left: 0; width: 100%; height: 3px; background: transparent; z-index: 999; }
.reading-progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, #04AA6D, #04AA6D, #10b981); transition: width 0.08s ease-out; }
.global-search-btn .search-key-badge { background: #e2e8f0; border-radius: 5px; padding: 2px 6px; font-size: 0.72rem; font-weight: 700; color: #1e293b; letter-spacing: 0.4px; }
@media (max-width: 680px) {
  .global-search-btn span, .global-search-btn .search-key-badge { display: none; }
  .global-search-btn { padding: 8px 10px; margin-left: 6px; }
}
.global-search-modal { position: fixed; inset: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 60px 16px 20px; border: none; background: rgba(15, 23, 42, 0.65); backdrop-filter: blur(6px); z-index: 10000; display: none; box-sizing: border-box; }
.global-search-modal[open] { display: flex; justify-content: center; align-items: flex-start; }
.search-modal-box { background: #ffffff; width: 100%; max-width: 640px; border-radius: 14px; box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25); border: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column; animation: modalFadeIn 0.16s ease-out; }
@keyframes modalFadeIn { from { opacity: 0; transform: translateY(-10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); } }
.search-input-wrap { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: #f8fafc; }
.search-input-wrap .search-icon { color: var(--blue); flex-shrink: 0; }
.search-input-wrap input { flex: 1; border: none !important; outline: none !important; background: transparent !important; font-size: 1.02rem; color: var(--ink); font-family: inherit; padding: 4px 0 !important; }
.search-close-btn { transition: all 0.15s; background: none; border: none; font-size: 1.1rem; color: var(--muted); cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.search-close-btn:hover { background: #e2e8f0; color: var(--ink); }
.search-results-list { max-height: 420px; overflow-y: auto; padding: 10px; }
.search-empty-state { padding: 36px 16px; text-align: center; color: var(--muted); font-size: 0.94rem; }
.search-result-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 8px; text-decoration: none; color: inherit; transition: background 0.15s; margin-bottom: 4px; }
.search-result-item:hover, .search-result-item.is-selected { background: var(--blue-light); }
.search-result-item-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.search-result-title { font-weight: 600; color: var(--ink); font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-result-subtitle { font-size: 0.8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-category-badge { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; letter-spacing: 0.4px; flex-shrink: 0; }
.search-category-badge[data-cat="Course"] { background: #f3f4f6; color: #04AA6D; }
.search-category-badge[data-cat="Lesson"] { background: #e0f7fa; color: #00695c; }
.search-category-badge[data-cat="Tutorial"] { background: #f3e8ff; color: #7e22ce; }
.search-category-badge[data-cat="Topic"] { background: #ede9fe; color: #5b21b6; }
.search-category-badge[data-cat="Article"] { background: #fef3c7; color: #92400e; }
.search-category-badge[data-cat="Note"] { background: #dcfce7; color: #15803d; }
.search-category-badge[data-cat="Shorts"] { background: #ffe4e6; color: #be123c; }
.search-footer-hint { display: flex; align-items: center; gap: 16px; padding: 10px 18px; background: #f8fafc; border-top: 1px solid var(--line); font-size: 0.76rem; color: var(--muted); }
.search-footer-hint kbd { background: #ffffff; border: 1px solid #cbd5e1; border-radius: 3px; padding: 1px 5px; font-weight: 600; }
pre { position: relative !important; padding-top: 52px !important; border-radius: 10px !important; background: #0f172a !important; color: #e2e8f0 !important; border: 1px solid #1e293b !important; box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12) !important; overflow-x: auto !important; }
pre > button.copy { display: none !important; }
.code-header-bar { position: absolute; top: 0; left: 0; right: 0; height: 40px; background: #1e293b; border-bottom: 1px solid #334155; border-radius: 9px 9px 0 0; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; z-index: 10; box-sizing: border-box; user-select: none; }
.code-lang-badge { font-family: var(--mono-font); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: #94a3b8; display: inline-flex; align-items: center; gap: 7px; }
.code-lang-badge::before { box-shadow: 0 0 6px rgba(20, 143, 130, 0.6); content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #04AA6D; }
.code-action-bar { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 0; }
.run-code-btn, .run-python-btn, .copy-code-btn, .code-action-bar .copy { position: static !important; float: none !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; height: 27px !important; padding: 0 10px !important; font-size: 0.76rem !important; font-weight: 600 !important; font-family: inherit !important; line-height: 1 !important; border-radius: 5px !important; white-space: nowrap !important; cursor: pointer !important; transition: all 0.15s ease !important; box-sizing: border-box !important; }
.run-code-btn, .run-python-btn { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important; background: #04AA6D !important; color: #ffffff !important; border: 1px solid #04AA6D !important; }
.run-code-btn:hover, .run-python-btn:hover { border-color: #1bb0a1 !important; transform: translateY(-1px); background: #085566 !important; }
.copy-code-btn, .code-action-bar .copy { background: rgba(255, 255, 255, 0.09) !important; color: #e2e8f0 !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; }
.copy-code-btn:hover, .code-action-bar .copy:hover { border-color: rgba(255, 255, 255, 0.28) !important; transform: translateY(-1px); background: rgba(255, 255, 255, 0.18) !important; color: #ffffff !important; }
.spin-icon { animation: spin 0.8s linear infinite; }
@keyframes spin { 100% { transform: rotate(360deg); } }
.python-terminal { margin-top: -12px; margin-bottom: 24px; background: #09101d; border-radius: 0 0 8px 8px; border: 1px solid #1e293b; border-top: none; overflow: hidden; font-family: var(--mono-font); }
.python-terminal-header { display: flex; justify-content: space-between; align-items: center; padding: 6px 14px; background: #141f33; border-bottom: 1px solid #1e293b; font-size: 0.76rem; color: #94a3b8; }
.python-terminal-header .terminal-title { display: flex; align-items: center; gap: 6px; color: #34d399; font-weight: 600; }
.python-terminal-header button { background: none; border: none; color: #94a3b8; font-size: 0.74rem; cursor: pointer; padding: 2px 6px; border-radius: 3px; }
.python-terminal-output { padding: 12px 14px !important; margin: 0 !important; color: #e2e8f0 !important; font-size: 0.86rem !important; line-height: 1.55 !important; max-height: 240px; overflow-y: auto; white-space: pre-wrap; word-break: break-word; }
.python-terminal-output.is-error { color: #fca5a5 !important; }
.catalog-page-header { margin-bottom: 28px; display: block !important; max-width: 860px; margin: 0; padding: 0; border: 0; }
.catalog-header-badge .badge-dot { box-shadow: 0 0 0 3px rgba(0, 155, 184, 0.2); width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }
.catalog-page-header .page-title { font-size: clamp(2rem, 3.6vw, 2.85rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; color: var(--ink); margin: 4px 0 12px; }
.catalog-meta-strip { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 18px; }
.catalog-meta-strip .meta-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 600; color: #1e3a5f; background: #ffffff; border: 1px solid #cbd5e1; padding: 5px 12px; border-radius: 999px; }
.catalog-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 20px 0 20px; padding: 16px 18px; background: #ffffff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04); }
.filter-input-wrap { position: relative; flex: 1 1 260px; display: flex; align-items: center; min-width: 200px; }
.filter-input-wrap .filter-icon { position: absolute; left: 14px; color: var(--blue); pointer-events: none; }
.filter-input-wrap input { transition: all 0.2s ease; width: 100%; height: 46px !important; padding: 0 14px 0 40px !important; background: #f8fafc !important; border: 1px solid #cbd5e1 !important; border-radius: 10px !important; font-family: inherit; font-size: 0.93rem; color: var(--ink); box-sizing: border-box; }
.filter-input-wrap input:focus { outline: none; background: #ffffff !important; border-color: var(--blue) !important; box-shadow: 0 0 0 3px rgba(11, 110, 130, 0.14) !important; }
.filter-select-wrap { position: relative; display: inline-flex; align-items: center; min-width: 160px; }
.filter-select-wrap select { transition: all 0.2s ease; appearance: none; -webkit-appearance: none; width: 100%; height: 46px !important; padding: 0 34px 0 14px !important; background: #f8fafc !important; border: 1px solid #cbd5e1 !important; border-radius: 10px !important; font-family: inherit; font-size: 0.9rem; font-weight: 500; color: var(--ink); cursor: pointer; box-sizing: border-box; }
.filter-select-wrap .select-chevron { position: absolute; right: 12px; color: var(--muted); pointer-events: none; }
.catalog-search-btn { transition: all 0.2s ease; height: 46px !important; padding: 0 22px !important; border-radius: 10px !important; font-weight: 600; font-size: 0.92rem; background: var(--blue) !important; color: #ffffff !important; border: 0 !important; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; }
.catalog-search-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 119, 142, 0.25); background: var(--blue-hover) !important; }
.clear-filter-btn { transition: all 0.2s ease; height: 46px !important; padding: 0 16px !important; border-radius: 10px !important; font-weight: 600; font-size: 0.88rem; background: #f8fafc !important; color: var(--muted) !important; border: 1px solid #cbd5e1 !important; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; white-space: nowrap; }
.clear-filter-btn:hover { border-color: #a8c1d2 !important; background: #e2e8f0 !important; color: var(--ink) !important; }
.category-chip-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.category-chip { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 999px; font-size: 0.84rem; font-weight: 600; color: var(--muted); background: #ffffff; border: 1px solid var(--line); text-decoration: none; transition: all 0.15s ease; }
.category-chip:hover { border-color: var(--blue); color: var(--blue); }
.category-chip.is-active, .category-chip[aria-current="page"] { background: var(--ink); color: #ffffff; border-color: var(--ink); }
.catalog-status-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin: 0 0 20px; font-size: 0.9rem; color: var(--muted); }
.loading-spinner { width: 14px; height: 14px; border: 2px solid var(--blue-border); border-top-color: var(--blue); border-radius: 50%; animation: spin 0.7s linear infinite; }
.catalog-error-state { padding: 14px 18px; background: var(--danger-bg); border: 1px solid var(--danger-border); color: var(--danger); border-radius: 10px; margin-bottom: 20px; font-size: 0.9rem; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 1024px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .cards { grid-template-columns: 1fr; }
}
.course-card { border: 1px solid var(--line) !important; border-radius: 16px !important; overflow: hidden; background: #ffffff; display: flex; flex-direction: column; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04); }
.course-card:hover { color: var(--ink); transform: translateY(-4px); border-color: var(--blue) !important; box-shadow: 0 14px 30px rgba(11, 110, 130, 0.1) !important; }
.course-card .card-body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.card-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin: 10px 0 8px; }
.course-card .card-body h3 { font-size: 1.22rem; line-height: 1.35; margin: 0; color: var(--ink); font-weight: 700; }
.course-card .card-body p { font-size: 0.92rem; line-height: 1.65; color: var(--muted); margin: 0 0 16px; flex: 1; }
.course-level-badge { font-weight: 700; padding: 2px 8px; border-radius: 5px; background: #f3f4f6; color: #04AA6D; font-size: 0.74rem; }
.course-level-badge.level-intermediate { background: #fef3c7; color: #92400e; }
.course-level-badge.level-advanced { background: #fae8ff; color: #86198f; }
.course-duration-meta { color: var(--muted); font-weight: 500; }
.card-progress-block { margin: 8px 0 12px; padding: 10px 12px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; }
.card-progress-labels { display: flex; justify-content: space-between; align-items: center; font-size: 0.78rem; color: var(--muted); margin-bottom: 6px; }
.card-progress-labels strong { color: var(--ink); font-weight: 700; }
.card-progress-track { width: 100%; height: 6px; background: #e2e8f0; border-radius: 999px; overflow: hidden; }
.card-progress-fill { height: 100%; background: var(--blue); border-radius: 999px; transition: width 0.3s ease; }
.card-progress-fill.is-complete { background: var(--success); }
.enrollment-badge { line-height: 1.4; margin: 4px 0 12px; margin-bottom: 8px; width: fit-content; display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; white-space: nowrap; flex-shrink: 0; background: #f3f4f6; color: #04AA6D; border: 1px solid #e2e8f0; }
.enrollment-badge.in-progress { background: var(--warning-bg); color: var(--warning); border-color: var(--warning-border); }
.enrollment-badge.complete { background: var(--success-bg); color: var(--success); border-color: var(--success-border); }
.lesson-meta-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.lesson-badges { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.meta-badge { font-size: 0.76rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: #f1f5f9; color: #334155; border: 1px solid #cbd5e1; }
.meta-badge.status-completed, .meta-badge.status-passed { background: var(--success-bg); color: var(--success); border-color: var(--success-border); }
.meta-badge.status-submitted { background: #f3f4f6; color: #04AA6D; border-color: #e2e8f0; }
.step-progress-info { display: flex; align-items: center; gap: 12px; font-size: 0.88rem; font-weight: 700; color: var(--ink); }
.step-dots { display: inline-flex; gap: 6px; }
.step-action-buttons { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.interactive-concept-lab, .tutorial-practical-exercise { margin: 36px 0; padding: 26px 28px; background: #ffffff; border: 1px solid #cbd5e1; border-top: 4px solid var(--blue); border-radius: 16px; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05); }
.concept-lab-header { display: flex !important; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.concept-lab-title { font-size: 1.35rem; margin: 6px 0 6px; color: var(--ink); }
.concept-lab-subtitle { font-size: 0.92rem; color: var(--muted); margin: 0; }
.concept-lab-workspace { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 28px; align-items: center; }
@media (max-width: 820px) {
  .concept-lab-workspace { grid-template-columns: 1fr; }
}
.lab-control-group { margin-bottom: 16px; }
.lab-control-group label { display: flex; justify-content: space-between; align-items: center; font-size: 0.88rem; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.lab-control-group label strong { font-family: var(--mono-font); color: var(--blue); background: var(--blue-light); padding: 2px 8px; border-radius: 5px; }
.lab-control-group input[type="range"] { width: 100%; accent-color: var(--blue); cursor: pointer; padding: 0; border: 0; }
.lab-readout-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0 14px; }
.lab-metric-card { padding: 12px 14px; background: #f8fafc; border: 1px solid var(--line); border-radius: 10px; }
.metric-label { display: block; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 4px; }
.metric-value { font-family: var(--mono-font); font-size: 1.15rem; font-weight: 700; color: var(--ink); }
.lab-insight-note { font-size: 0.86rem; line-height: 1.55; color: #1e3a5f; background: #f0f9ff; border-left: 3px solid var(--blue); padding: 10px 14px; border-radius: 0 8px 8px 0; margin: 0; }
.lab-visual-pane { background: #0f172a; border-radius: 12px; padding: 18px; min-height: 210px; display: flex; align-items: center; justify-content: center; color: #e2e8f0; overflow: hidden; }
.lab-visual-pane svg { width: 100%; max-width: 300px; height: auto; display: block; }
.recall-prompt-header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.92rem; color: var(--ink); margin-bottom: 12px; }
.recall-options { display: flex; flex-wrap: wrap; gap: 10px; }
.spaced-review-header h3 { font-size: 1.15rem; margin: 4px 0 6px; }
.spaced-review-header p { font-size: 0.88rem; margin: 0 0 14px; }
.spaced-review-links { display: flex; flex-wrap: wrap; gap: 10px; }
.spaced-review-pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; background: #ffffff; border: 1px solid #cbd5e1; border-radius: 999px; font-size: 0.84rem; font-weight: 600; color: var(--blue); text-decoration: none; }
.spaced-review-pill:hover { background: var(--blue-light); border-color: var(--blue); }
.submission-status-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.submission-status-pills { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.status-pill { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px; font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.pill-submitted { background: #f3f4f6; color: #04AA6D; border: 1px solid #e2e8f0; }
.pill-passed, .pill-completed { background: var(--success-bg); color: var(--success); border: 1px solid var(--success-border); }
.pill-review { background: var(--warning-bg); color: var(--warning); border: 1px solid var(--warning-border); }
.submission-timestamp { font-size: 0.8rem; color: var(--muted); }
.saved-answers-review-list { display: grid; gap: 16px; }
.saved-answer-item { padding: 18px 20px; border-radius: 10px; background: #ffffff; border: 1px solid var(--line); border-left: 4px solid var(--success); }
.saved-answer-item.is-incorrect { border-left-color: #d97706; }
.saved-answer-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.saved-question-prompt p { margin: 4px 0 10px; font-weight: 600; color: var(--ink); }
.saved-response-comparison { display: flex; flex-wrap: wrap; gap: 12px; margin: 10px 0; }
.response-pill { font-size: 0.85rem; padding: 6px 12px; border-radius: 6px; background: #f1f5f9; color: var(--ink); }
.response-pill span { color: var(--muted); margin-right: 6px; }
.feedback-body { margin-top: 10px; padding-top: 10px; border-top: 1px solid #e2e8f0; font-size: 0.9rem; }
.retake-summary-bar { background: #f8fafc !important; }
.retake-summary-bar:hover { background: #f1f5f9 !important; }
.retake-action-pill { display: inline-flex; align-items: center; font-size: 0.8rem; font-weight: 700; color: var(--blue); background: var(--blue-light); border: 1px solid var(--blue-border); padding: 5px 12px; border-radius: 999px; }
.submission-badge.badge-retry { background: var(--warning-bg); color: var(--warning); border-color: var(--warning-border); }
.article-takeaways-box, .callout-takeaway-box { margin: 0 0 30px; padding: 20px 24px; background: #f0f9ff; border: 1px solid #e2e8f0; border-left: 4px solid var(--blue); border-radius: 12px; }
.takeaways-header h2 { font-size: 1.15rem; margin: 4px 0 8px; color: var(--ink); }
.takeaways-summary { font-size: 0.95rem; color: #1e293b; margin: 0 0 12px; }
.takeaways-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.takeaways-list li { display: flex; gap: 8px; font-size: 0.9rem; color: #1e3a5f; font-weight: 500; }
.prose blockquote.callout { margin: 24px 0; padding: 16px 20px; border-radius: 0 10px 10px 0; border-left: 4px solid var(--blue); background: #f0f9ff; font-family: var(--body-font); font-size: 0.96rem; font-style: normal; }
.prose blockquote.callout .callout-title { display: block; font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--blue); margin-bottom: 6px; }
.prose blockquote.callout-warning { background: #fffbeb; border-left-color: #d97706; }
.prose blockquote.callout-warning .callout-title { color: #b45309; }
.related-content-section { margin-top: 42px; padding-top: 32px; border-top: 1px solid var(--line); }
.related-content-section h2 { font-size: 1.4rem; margin: 6px 0 18px; }
.related-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.related-item-card { display: flex; flex-direction: column; padding: 18px 20px; background: #ffffff; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: inherit; transition: all 0.18s ease; }
.related-item-card:hover { border-color: var(--blue); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06); }
.related-item-card h3 { font-size: 1.05rem; margin: 8px 0; color: var(--ink); }
.related-item-card p { font-size: 0.86rem; color: var(--muted); margin: 0 0 12px; flex: 1; }
.related-item-card > span:last-child { font-size: 0.84rem; font-weight: 700; color: var(--blue); margin-top: auto; }
.contact-layout { display: grid; grid-template-columns: minmax(280px, 0.9fr) minmax(320px, 1.3fr); gap: 36px; align-items: start; margin-top: 28px; }
@media (max-width: 860px) {
  .contact-layout { grid-template-columns: 1fr; }
}
.contact-identity { color: var(--ink); padding: 28px; background: #ffffff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03); }
.contact-profile-card { display: flex; align-items: center; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.contact-portrait { margin-bottom: 20px; width: 76px; height: 76px; border-radius: 50%; object-fit: cover; margin: 0; border: 2px solid var(--blue-border); flex-shrink: 0; }
.contact-monogram { width: 68px; height: 68px; border-radius: 50%; background: var(--ink); color: #ffffff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.3rem; flex-shrink: 0; }
.contact-profile-card h2 { font-size: 1.35rem; margin: 0 0 4px; }
.contact-link { margin: 6px 0; font-size: 0.9rem; font-weight: 500; display: flex !important; flex-direction: row !important; align-items: center !important; gap: 14px !important; padding: 14px 16px !important; background: #f8fafc; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; color: var(--ink); transition: all 0.15s ease; }
.contact-link:hover { background: var(--blue-light); border-color: var(--blue); color: var(--blue); }
.contact-link small { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.contact-link span { font-size: 0.94rem; font-weight: 600; color: var(--ink); }
.contact-form { padding: 32px; background: #ffffff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04); }
.contact-form-header { margin-bottom: 22px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.contact-form-header h2 { font-size: 1.5rem; margin: 6px 0; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) {
  .form-grid-2 { grid-template-columns: 1fr; }
}
.form-field { margin-bottom: 18px; }
.form-field label { display: block; font-size: 0.88rem; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.req-star { color: var(--danger); }
.label-with-counter { display: flex; justify-content: space-between; align-items: baseline; }
.char-counter { font-size: 0.76rem; color: var(--muted); }
.contact-form input:not([type="hidden"]), .contact-form textarea { width: 100%; padding: 12px 14px; border: 1px solid #cbd5e1; border-radius: 8px; background: #f8fafc; font: inherit; font-size: 0.94rem; color: var(--ink); transition: all 0.15s ease; }
.contact-form input:focus, .contact-form textarea:focus { background: #ffffff; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(11, 110, 130, 0.14); }
.form-field.has-error input, .form-field.has-error textarea { border-color: var(--danger); background: #fff5f5; }
.field-error, .field-error .errorlist { color: var(--danger) !important; font-size: 0.84rem; font-weight: 600; margin: 6px 0 0; padding: 0; list-style: none; }
.form-alert-error { padding: 14px 16px; background: var(--danger-bg); border: 1px solid var(--danger-border); color: var(--danger); border-radius: 10px; margin-bottom: 18px; font-size: 0.9rem; }
.contact-form-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 20px; }
.privacy-note { font-size: 0.8rem; color: var(--muted); }
.workspace-breadcrumbs { max-width: 1400px; margin: 0 auto 18px; padding: 10px 18px; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 999px; display: inline-flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 0.84rem; color: #475569; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03); }
.lesson-shell > .workspace-breadcrumbs { display: flex; width: fit-content; margin-left: 4%; }
.workspace-breadcrumbs a { color: #334155; font-weight: 600; text-decoration: none; }
.workspace-breadcrumbs a:hover { color: var(--blue); }
.workspace-breadcrumbs .active-crumb { color: #04AA6D; font-weight: 700; }
.studio-discipline-pill { display: inline-flex; align-items: center; gap: 8px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #04AA6D; background: rgba(56, 189, 248, 0.12); border: 1px solid rgba(56, 189, 248, 0.3); padding: 5px 12px; border-radius: 999px; }
.pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: #04AA6D; box-shadow: 0 0 8px #04AA6D; }
.meta-badge.badge-dark { background: rgba(255, 255, 255, 0.1); color: #e2e8f0; border-color: rgba(255, 255, 255, 0.18); }
.meta-badge.badge-3d { background: rgba(16, 185, 129, 0.18); color: #6ee7b7; border-color: rgba(16, 185, 129, 0.35); font-weight: 700; }
.studio-mastery-tracker { display: flex; align-items: center; gap: 8px; font-size: 0.86rem; }
.tracker-label { color: #475569; font-weight: 500; }
.studio-mastery-tracker strong { color: #04AA6D; background: #f3f4f6; padding: 3px 10px; border-radius: 999px; font-size: 0.8rem; }
.studio-workspace-grid { display: flex; flex-direction: column; gap: 28px; }
@media (min-width: 1100px) {
  .studio-workspace-grid.is-split-mode { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 24px; align-items: start; }
  .studio-workspace-grid.is-split-mode .studio-lab-column { position: sticky; top: calc(var(--header-height, 80px) + 20px); }
}
.three-lab-studio { background: linear-gradient(180deg, #0f172a 0%, #131f35 100%) !important; color: #f8fafc !important; border: 1px solid #1e293b !important; border-top: 4px solid #04AA6D !important; border-radius: 18px !important; padding: 26px !important; box-shadow: 0 16px 38px rgba(15, 23, 42, 0.22) !important; }
.three-lab-studio .concept-lab-header { border-bottom-color: rgba(255, 255, 255, 0.12) !important; }
.lab-badge-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.three-lab-studio .eyebrow { color: #04AA6D !important; }
.webgl-live-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 0.7rem; font-weight: 700; color: #6ee7b7; background: rgba(16, 185, 129, 0.15); border: 1px solid rgba(16, 185, 129, 0.35); padding: 2px 9px; border-radius: 999px; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: #10b981; box-shadow: 0 0 6px #10b981; }
.three-lab-studio .concept-lab-title { color: #ffffff !important; font-size: 1.38rem !important; }
.three-lab-studio .concept-lab-subtitle { color: #94a3b8 !important; }
.three-scene-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.three-scene-select { background: #1e293b !important; color: #f8fafc !important; border: 1px solid #334155 !important; border-radius: 8px !important; padding: 7px 12px !important; font-size: 0.8rem !important; font-weight: 600 !important; cursor: pointer; }
.three-tool-btn { background: #1e293b; color: #cbd5e1; border: 1px solid #334155; border-radius: 8px; padding: 7px 12px; font-size: 0.78rem; font-weight: 600; cursor: pointer; transition: all 0.15s ease; }
.three-tool-btn:hover { background: #334155; color: #ffffff; }
.three-tool-btn.is-active { background: #04AA6D; border-color: #04AA6D; color: #ffffff; }
.three-workspace-layout { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 24px; align-items: stretch; }
@media (max-width: 900px) {
  .three-workspace-layout { grid-template-columns: 1fr; }
}
.three-viewport-container { position: relative; background: radial-gradient(circle at 50% 40%, #1e293b 0%, #090f1c 100%) !important; border: 1px solid #334155; border-radius: 14px; padding: 0 !important; min-height: 310px; overflow: hidden; cursor: grab; user-select: none; }
.three-viewport-container:active { cursor: grabbing; }
.three-webgl-canvas { width: 100% !important; height: 310px !important; display: block; }
.three-hud-overlay { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; justify-content: space-between; align-items: center; pointer-events: none; gap: 8px; }
.hud-tag, .hud-telemetry { font-family: var(--mono-font); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; padding: 4px 9px; border-radius: 6px; background: rgba(15, 23, 42, 0.78); border: 1px solid rgba(148, 163, 184, 0.25); color: #cbd5e1; }
.hud-telemetry { color: #04AA6D; }
.three-camera-controls { position: absolute; bottom: 12px; right: 12px; display: flex; gap: 6px; }
.cam-btn { width: 30px; height: 30px; border-radius: 6px; background: rgba(30, 41, 59, 0.85); border: 1px solid #475569; color: #f8fafc; font-weight: 700; font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.cam-btn:hover { background: #04AA6D; border-color: #04AA6D; }
.three-lab-studio .lab-controls-pane { background: rgba(30, 41, 59, 0.55); border: 1px solid rgba(148, 163, 184, 0.18); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; justify-content: space-between; }
.three-lab-studio .lab-control-group label { color: #e2e8f0; }
.three-lab-studio .lab-control-group label strong { background: rgba(56, 189, 248, 0.18); color: #04AA6D; }
.three-lab-studio .lab-metric-card { background: rgba(15, 23, 42, 0.75); border-color: #334155; }
.three-lab-studio .metric-label { color: #94a3b8; }
.three-lab-studio .metric-value { color: #04AA6D; }
.three-lab-studio .lab-insight-note { background: rgba(14, 165, 233, 0.12); border-left-color: #04AA6D; color: #e2e8f0; }
.three-lab-studio .recall-prompt-header { color: #f1f5f9; }
.takeaway-num { font-family: var(--mono-font); font-size: 0.74rem; font-weight: 800; color: #04AA6D; background: #f3f4f6; padding: 2px 7px; border-radius: 5px; flex-shrink: 0; }
.modern-dashboard-shell { background: #f1f5f9 !important; padding-bottom: 72px; }
.modern-dashboard-hero { background: linear-gradient(135deg, #0f172a 0%, #172e4c 60%, #0b4f60 100%); color: #ffffff; padding: 32px 36px !important; border-radius: 20px; border: 1px solid #1e3a5f !important; box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14); margin-bottom: 24px !important; }
.modern-dashboard-hero h1 { color: #ffffff !important; margin: 8px 0 8px !important; }
.modern-dashboard-hero p { color: #cbd5e1 !important; font-size: 0.98rem !important; }
.dashboard-badge-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.modern-dashboard-hero .eyebrow { color: #04AA6D !important; }
.scholar-status-pill { font-size: 0.74rem; font-weight: 700; color: #6ee7b7; background: rgba(16, 185, 129, 0.16); border: 1px solid rgba(16, 185, 129, 0.35); padding: 3px 10px; border-radius: 999px; }
.modern-dashboard-hero .button.secondary { background: rgba(255, 255, 255, 0.1) !important; color: #ffffff !important; border-color: rgba(255, 255, 255, 0.24) !important; }
.modern-dashboard-hero .button.secondary:hover { background: rgba(255, 255, 255, 0.2) !important; }
.modern-dashboard-hero .dashboard-profile-edit > summary { background: #04AA6D; color: #ffffff; border-color: #04AA6D; font-weight: 600; }
.modern-dashboard-hero .profile-editor-body { color: var(--ink); }
.modern-dashboard-hero .profile-editor-body p { color: var(--muted) !important; }
.modern-dashboard-tabs { background: #ffffff; padding: 8px 10px !important; border-radius: 14px; border: 1px solid #e5e7eb !important; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03); margin: 0 0 28px !important; gap: 8px !important; }
.modern-dashboard-tabs a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px !important; border-radius: 10px !important; border: 1px solid transparent !important; font-size: 0.88rem !important; font-weight: 600 !important; color: #475569 !important; }
.modern-dashboard-tabs a[aria-current="page"] { background: #0f172a !important; color: #ffffff !important; }
.tab-pill { font-size: 0.72rem; padding: 1px 7px; border-radius: 999px; background: rgba(100, 116, 139, 0.15); }
.modern-dashboard-tabs a[aria-current="page"] .tab-pill { background: rgba(56, 189, 248, 0.25); color: #04AA6D; }
.modern-kpi-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)) !important; gap: 14px !important; margin-bottom: 32px !important; }
.kpi-stat-card { background: #ffffff !important; border: 1px solid #e5e7eb !important; border-top: 3px solid #04AA6D !important; border-radius: 14px !important; padding: 18px 20px !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: space-between !important; gap: 6px !important; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03) !important; }
.kpi-stat-card.kpi-completed { border-top-color: #10b981 !important; }
.kpi-stat-card.kpi-certs { border-top-color: #f59e0b !important; }
.kpi-stat-card .kpi-label { font-size: 0.78rem !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0.05em; color: #475569 !important; min-height: 0 !important; }
.kpi-stat-card strong { font-size: 2rem !important; font-weight: 800 !important; color: #0f172a !important; line-height: 1.1 !important; }
.kpi-stat-card .kpi-sub { font-size: 0.75rem; color: #64748b; }
.modern-progress-card { background: #ffffff !important; border: 1px solid #e5e7eb !important; border-top: 4px solid #04AA6D !important; border-radius: 16px !important; padding: 24px !important; box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04) !important; transition: transform 0.18s ease, box-shadow 0.18s ease; }
.modern-progress-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08) !important; }
.modern-progress-card.is-completed-card { border-top-color: #10b981 !important; }
.dashboard-progress-wrap { padding: 12px 14px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; margin: 12px 0; }
.resume-label { display: flex; align-items: center; gap: 8px; font-size: 0.88rem !important; color: #1e293b !important; background: #f0f9ff; padding: 8px 12px; border-radius: 8px; margin: 10px 0 16px !important; }
.resume-label.completed-note { background: #ecfdf5; color: #065f46 !important; }
.dashboard-article-row { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; padding: 16px 20px !important; background: #ffffff !important; border: 1px solid #e5e7eb !important; border-radius: 12px !important; margin-bottom: 10px !important; transition: border-color 0.15s ease, transform 0.15s ease; }
.dashboard-article-row:hover { border-color: #04AA6D !important; transform: translateX(3px); }
.modern-cert-row { border-left: 4px solid #f59e0b !important; }
.interactive-figure-drawer { margin: 32px 0; border: 1px solid #e5e7eb; border-radius: 14px; background: #ffffff; overflow: hidden; box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03); }
.interactive-figure-summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 20px; background: #f8fafc; cursor: pointer; user-select: none; list-style: none; }
.interactive-figure-summary::-webkit-details-marker { display: none; }
.interactive-figure-summary:hover { background: #f1f5f9; }
.figure-summary-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.figure-badge { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue); background: var(--blue-light); border: 1px solid var(--blue-border); padding: 3px 8px; border-radius: 5px; }
.figure-summary-left strong { font-size: 0.94rem; color: #0f172a; }
.figure-toggle-hint { font-size: 0.8rem; font-weight: 600; color: #64748b; }
.clean-interactive-lab { margin: 0 !important; border: 0 !important; border-top: 1px solid #e2e8f0 !important; border-radius: 0 !important; box-shadow: none !important; background: #ffffff !important; padding: 22px 24px !important; }
.clean-lab-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 22px; align-items: center; }
@media (max-width: 860px) {
  .clean-lab-grid { grid-template-columns: 1fr; }
}
.clean-controls-pane { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px 18px; }
.modern-resource-list { display: grid; gap: 16px; }
.modern-resource-card { background: #ffffff !important; border: 1px solid #e5e7eb !important; border-radius: 16px !important; padding: 22px 24px !important; box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03) !important; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important; }
.modern-resource-card:hover { transform: translateY(-2px); border-color: var(--blue) !important; box-shadow: 0 10px 24px rgba(11, 110, 130, 0.08) !important; }
.modern-resource-card h3 { margin: 8px 0 8px !important; font-size: 1.25rem !important; color: #0f172a !important; }
.modern-resource-card h3 a { color: inherit; text-decoration: none; }
.modern-resource-card h3 a:hover { color: var(--blue); }
.clean-shorts-hero { background: linear-gradient(180deg, #ffffff 0%, #f3f4f6 100%) !important; border: 1px solid #e5e7eb !important; border-radius: 18px !important; padding: 32px 36px !important; margin: 16px 0 24px !important; box-shadow: 0 4px 18px rgba(15, 23, 42, 0.03) !important; }
.clean-shorts-progress { background: #ffffff !important; border: 1px solid #e5e7eb !important; border-left: 4px solid var(--blue) !important; border-radius: 14px !important; padding: 22px 26px !important; margin: 0 0 32px !important; }
.shorts-progress-copy h2 { font-size: 1.35rem !important; margin: 4px 0 6px !important; color: #0f172a !important; }
.modern-short-card { background: #ffffff !important; border: 1px solid #e5e7eb !important; border-radius: 16px !important; padding: 20px !important; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04) !important; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; }
.modern-short-card:hover { border-color: var(--blue) !important; box-shadow: 0 10px 26px rgba(11, 110, 130, 0.08) !important; }
.modern-short-card.is-completed-short { border-top: 1px solid #e5e7eb !important; }
.w3-subnav-bar { background: var(--w3-dark-bar); color: #f1f1f1; width: 100%; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid #1d1f27; position: sticky; top: var(--header-height, 80px); z-index: 95; }
.w3-subnav-bar::-webkit-scrollbar { display: none; }
.w3-subnav-links { display: flex; align-items: center; min-height: 40px; padding: 0 12px; gap: 0; white-space: nowrap; }
.w3-subnav-item, .w3-subnav-home { display: inline-flex; align-items: center; height: 40px; padding: 0 15px; color: #f1f1f1 !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0.04em; text-decoration: none !important; transition: background 0.12s ease; }
.w3-subnav-item:hover, .w3-subnav-home:hover { background: #000000; color: #ffffff !important; }
.w3-subnav-item.is-active { background: var(--w3-green) !important; color: #ffffff !important; }
.w3-mobile-menu-btn { color: #ffffff !important; background: transparent; border: 0; padding: 0 12px; height: 40px; font-size: 18px; cursor: pointer; }
@media (min-width: 801px) {
  .w3-mobile-menu-btn { display: none; }
}
.w3-workspace-shell { background: #ffffff !important; padding: 0 !important; max-width: none !important; }
.w3-workspace-shell .w3-layout { max-width: none !important; margin: 0 !important; padding: 0 !important; display: grid !important; grid-template-columns: 250px minmax(0, 1fr) 230px !important; gap: 0 !important; align-items: stretch !important; }
@media (max-width: 1120px) and (min-width: 801px) {
  .w3-workspace-shell .w3-layout { grid-template-columns: 230px minmax(0, 1fr) !important; }
  .w3-right-rail { display: none !important; }
}
@media (max-width: 800px) {
  .w3-workspace-shell .w3-layout { grid-template-columns: 1fr !important; }
  .w3-right-rail { display: none !important; }
}
.w3-tutorial-reader.independent-reader { border-top: 0 !important; background: #ffffff !important; }
@media (min-width: 901px) {
  .w3-tutorial-reader.independent-reader { grid-template-columns: 250px minmax(0, 1fr) !important; }
}
.w3-left-sidebar, .w3-tutorial-reader .tutorial-rail.w3-left-sidebar, .lesson-layout aside.w3-left-sidebar { background: var(--w3-sidebar-bg) !important; border: 0 !important; border-right: 1px solid #d4d7dc !important; border-radius: 0 !important; padding: 18px 0 40px !important; position: sticky !important; top: calc(var(--header-height, 80px) + 40px) !important; height: calc(100dvh - var(--header-height, 80px) - 40px) !important; max-height: calc(100dvh - var(--header-height, 80px) - 40px) !important; overflow-y: auto !important; }
@media (max-width: 800px) {
  .lesson-layout aside.w3-left-sidebar { position: static !important; height: auto !important; max-height: 280px !important; border-right: 0 !important; border-bottom: 1px solid #d4d7dc !important; padding: 14px 0 !important; }
}
.w3-sidebar-top { padding: 0 16px 12px !important; border-bottom: 1px solid #d4d7dc !important; margin-bottom: 8px !important; }
.w3-progress-mini { margin-top: 8px; }
.w3-progress-mini progress { height: 6px !important; accent-color: var(--w3-green) !important; }
.w3-sidebar-links, .w3-tutorial-reader .tutorial-topic-list { padding: 0 !important; margin: 0 !important; background: transparent !important; border-radius: 0 !important; max-height: none !important; }
.w3-tutorial-reader .tutorial-chapter { margin: 0 !important; }
.w3-sidebar-link, .w3-tutorial-reader .tutorial-chapter .tutorial-topic-list a.w3-sidebar-link, .compact-lesson-list .lesson-link.w3-sidebar-link { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 7px 16px 7px 20px !important; margin: 0 !important; border: 0 !important; border-left: 4px solid transparent !important; border-radius: 0 !important; font-size: 15px !important; font-weight: 400 !important; line-height: 1.45 !important; color: #000000 !important; background: transparent !important; min-height: 34px !important; text-decoration: none !important; }
.w3-sidebar-link:hover, .w3-tutorial-reader .tutorial-chapter .tutorial-topic-list a.w3-sidebar-link:hover, .compact-lesson-list .lesson-link.w3-sidebar-link:hover { background: var(--w3-sidebar-hover) !important; color: #000000 !important; }
.w3-sidebar-link.active, .w3-sidebar-link.current, .w3-tutorial-reader .tutorial-chapter .tutorial-topic-list a.w3-sidebar-link.current, .compact-lesson-list .lesson-link.w3-sidebar-link.active { background: #CCCCCC !important; border-left: 4px solid var(--w3-green) !important; color: #000000 !important; font-weight: 700 !important; box-shadow: none !important; }
.w3-sidebar-link .topic-status { font-size: 11px !important; padding: 1px 5px !important; }
.w3-video-indicator { font-size: 11px; color: var(--w3-green); margin-left: 6px; }
.w3-sidebar-extras { padding: 14px 16px 0 !important; }
.w3-main-canvas { background: #ffffff !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 32px 44px 64px !important; max-width: 980px !important; width: 100%; margin: 0 auto !important; }
@media (max-width: 768px) {
  .w3-main-canvas { padding: 22px 18px 48px !important; }
}
.w3-content-grid { padding: 0 !important; gap: 0 !important; max-width: none !important; }
.w3-page-header { border: 0 !important; padding: 0 !important; margin: 0 0 18px !important; }
.w3-title-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; }
.w3-h1 { font-size: clamp(32px, 4vw, 42px) !important; font-weight: 400 !important; letter-spacing: -0.02em !important; color: #000000 !important; margin: 0 !important; line-height: 1.2 !important; }
.w3-header-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.w3-bookmark-badge { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 6px; font-size: 18px; color: var(--w3-green); border: 1px solid #d0e8dd; background: #f2fbf7; }
.w3-bookmark-badge.is-done { background: var(--w3-green); color: #ffffff; border-color: var(--w3-green); }
.w3-studio-edit-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 5px; background: #282A35; color: #ffffff !important; font-size: 12px; font-weight: 600; text-decoration: none !important; }
.w3-studio-edit-btn:hover { background: var(--w3-green); }
.w3-top-nav-btns { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 14px 0 8px; }
.w3-btn, .w3-bottom-nav a.w3-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; padding: 10px 19px !important; min-height: 42px !important; border-radius: 5px !important; font-size: 16px !important; font-weight: 600 !important; text-decoration: none !important; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; }
.w3-btn-prev, .w3-bottom-nav a.w3-btn-prev { background: #ffffff !important; color: #000000 !important; border: 1px solid #cccccc !important; }
.w3-btn-prev:hover, .w3-bottom-nav a.w3-btn-prev:hover { background: #f1f1f1 !important; border-color: #999999 !important; }
.w3-btn-next, .w3-bottom-nav a.w3-btn-next { background: var(--w3-green) !important; color: #ffffff !important; border: 1px solid var(--w3-green) !important; }
.w3-btn-next:hover, .w3-bottom-nav a.w3-btn-next:hover { background: var(--w3-green-hover) !important; border-color: var(--w3-green-hover) !important; color: #ffffff !important; }
.w3-hr { border: 0; border-top: 1px solid #eeeeee; margin: 22px 0; }
.w3-section-share-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.w3-meta-note { font-size: 14px; color: #555555; }
.w3-share-group { display: inline-flex; align-items: center; gap: 8px; }
.w3-share-label { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: #333333; }
.w3-share-icon { width: 34px; height: 34px; border-radius: 5px; border: 1px solid #e0e0e0; background: #f1f1f1; color: #222222; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.w3-share-icon:hover { background: #e2e2e2; }
.w3-video-section, .w3-video-box { background: var(--w3-example-bg); border-radius: 6px; padding: 16px 20px 20px; margin: 22px 0 28px; border-left: 4px solid var(--w3-green); }
.w3-video-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.w3-video-badge { background: var(--w3-green); color: #ffffff; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; padding: 4px 9px; border-radius: 4px; }
.w3-video-header strong { flex: 1; font-size: 16px; color: #000000; }
.w3-yt-external { font-size: 13px; font-weight: 600; color: #04AA6D !important; text-decoration: underline !important; }
.w3-video-frame { margin: 0 !important; border-radius: 6px !important; overflow: hidden; background: #000000; }
.w3-video-caption { margin: 8px 0 0 !important; text-align: right; font-size: 13px !important; }
.w3-prose { max-width: none !important; font-size: 16.5px !important; line-height: 1.75 !important; color: #000000 !important; }
.w3-prose p { color: #111111 !important; margin: 0 0 16px !important; text-align: left !important; }
.w3-prose h2 { font-size: 30px !important; font-weight: 400 !important; color: #000000 !important; margin: 28px 0 14px !important; padding-top: 18px !important; padding-bottom: 0 !important; border-top: 1px solid #eeeeee !important; border-bottom: 0 !important; }
.w3-prose h2:first-child { border-top: 0 !important; padding-top: 4px !important; margin-top: 4px !important; }
.w3-prose h3 { font-size: 22px !important; font-weight: 500 !important; color: #000000 !important; margin: 22px 0 10px !important; }
.w3-prose code:not(pre code) { color: #d63384 !important; background: rgba(222, 222, 222, 0.35) !important; padding: 2px 5px !important; border-radius: 3px !important; font-family: Consolas, Menlo, monospace !important; font-size: 0.92em !important; }
.w3-prose .codehilite.w3-example-card { background: var(--w3-example-bg) !important; padding: 16px 20px 20px !important; border-radius: 5px !important; margin: 22px 0 !important; box-shadow: none !important; border: 0 !important; }
.w3-example-heading { font-size: 22px; font-weight: 500; color: #000000; margin: 0 0 12px; font-family: var(--heading-font); }
.w3-prose .codehilite.w3-example-card pre { background: #ffffff !important; color: #000000 !important; border: 0 !important; border-left: 4px solid var(--w3-green) !important; border-radius: 0 4px 4px 0 !important; box-shadow: none !important; padding: 48px 16px 16px !important; margin: 0 !important; }
.w3-prose .codehilite.w3-example-card pre code { color: #111111 !important; font-size: 14.5px !important; }
.w3-prose .codehilite.w3-example-card .code-header-bar { background: #f8f9fa !important; border-bottom: 1px solid #e5e7eb !important; border-radius: 0 4px 0 0 !important; }
.w3-prose .codehilite.w3-example-card .code-lang-badge { color: #333333 !important; }
.w3-prose .codehilite.w3-example-card .code-lang-badge::before { background: var(--w3-green) !important; }
.w3-prose .codehilite.w3-example-card .run-code-btn { background: var(--w3-green) !important; border-color: var(--w3-green) !important; color: #ffffff !important; font-weight: 700 !important; }
.w3-prose .codehilite.w3-example-card .run-code-btn:hover { background: var(--w3-green-hover) !important; }
.w3-prose .codehilite.w3-example-card .copy-code-btn { background: #ffffff !important; color: #333333 !important; border: 1px solid #cccccc !important; }
.w3-get-started-cta { margin: 24px 0 12px; }
.w3-get-started-btn { display: inline-block; background: #282A35; color: #ffffff !important; padding: 12px 24px; border-radius: 5px; font-size: 16px; font-weight: 600; text-decoration: none !important; }
.w3-get-started-btn:hover { background: #000000; }
.w3-bottom-nav { display: flex !important; justify-content: space-between !important; align-items: center !important; flex-wrap: wrap; gap: 14px !important; margin-top: 28px !important; padding-top: 8px; }
.w3-xp-pill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; background: #ffffff; border: 1px solid #e0e0e0; border-radius: 10px; font-size: 14px; color: #222222; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04); }
.w3-xp-pill strong { color: var(--w3-green); }
.w3-right-rail { border-left: 1px solid #eeeeee !important; padding: 24px 16px !important; background: #ffffff; }
.w3-right-promo-card { margin-top: 24px; padding: 18px 16px; background: #f8f9fa; border: 1px solid #e2e8f0; border-radius: 10px; text-align: center; }
.w3-right-promo-card h4 { font-size: 16px; margin: 6px 0 8px; color: #000000; }
.w3-right-promo-card p { font-size: 12.5px; line-height: 1.5; color: #555555; margin: 0 0 12px; }
.w3-promo-btn { width: 100%; font-size: 13px !important; padding: 8px 12px !important; min-height: 36px !important; }
:root { --page-title-size: clamp(32px,4vw,50px); --sage: #f3f4f6; --peach: #f3f4f6; --serif: Georgia,'Times New Roman',serif; --success: #146c43; --success-bg: #dcfce7; --success-border: #a7f3d0; --warning: #92400e; --warning-bg: #fef3c7; --warning-border: #fde68a; --danger: #b91c1c; --danger-bg: #fee2e2; --danger-border: #fecaca; --heading-font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --body-font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --mono-font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; --w3-dark-bar: #282A35; --w3-sidebar-bg: #E7E9EB; --w3-sidebar-hover: #CCCCCC; --w3-example-bg: #E7E9EB; --w3-border: #D9D9D9; --ink: #111827 !important; --ink-secondary: #1f2937 !important; --muted: #4b5563 !important; --blue: #04AA6D !important; --blue-hover: #059862 !important; --blue-light: #ecfdf5 !important; --blue-border: #d1fae5 !important; --line: #e5e7eb !important; --line-strong: #d1d5db !important; --surface: #f3f4f6 !important; --paper: #f9fafb !important; --card-bg: #ffffff !important; --w3-green: #04AA6D !important; --w3-green-hover: #059862 !important; }
body { margin: 0; -webkit-font-smoothing: antialiased; font-family: var(--body-font); background: #f9fafb !important; color: #111827 !important; font-size: 15.5px !important; line-height: 1.7 !important; }
.clean-shorts-progress, .shorts-progress, .reading-control, .learning-course, .modern-progress-card, .kpi-stat-card, .article-takeaways-box, .callout-takeaway-box, .lab-insight-note, .prose blockquote, .prose blockquote.callout, .release-note, .credential, .research-panel, .home-intro, .tutorial-explorer .tutorial-card { border-color: #e5e7eb !important; border-top-color: #e5e7eb !important; border-left-color: #e5e7eb !important; border-bottom-color: #e5e7eb !important; }
.clean-shorts-hero, .catalog-hero-banner { background: #ffffff !important; border: 1px solid #e5e7eb !important; border-radius: 12px !important; padding: 24px 28px !important; box-shadow: none !important; }
.clean-section-header { margin-bottom: 20px !important; }
.clean-section-header .page-title { font-size: clamp(1.75rem, 2.6vw, 2.25rem) !important; margin: 6px 0 8px !important; }
.catalog-intro { line-height: 1.7; max-width: 760px; margin: 0; font-size: 15.5px !important; color: #4b5563 !important; }
.prose, .w3-prose, .lesson-body, .lesson-body.prose, .tutorial-prose, .article-prose, .story-prose, .reading-story .story-prose, .reading-story .story-prose > p:first-child, .w3-article-lead, .quiz legend .prose, .feedback-body, .prose p, .w3-prose p, .prose li, .w3-prose li, .prose td, .prose th, .prose blockquote, .reading-story .story-prose blockquote { font-family: var(--body-font) !important; font-size: 15.5px !important; line-height: 1.75 !important; color: #1f2937 !important; font-style: normal !important; }
.w3-article-lead { color: #374151 !important; margin: 0 0 18px !important; font-weight: 500 !important; }
.w3-h1, .lesson-heading .page-title, .tutorial-topic-header .page-title, .story-header h1, .reading-story .story-header h1 { font-size: clamp(1.75rem, 2.6vw, 2.2rem) !important; font-weight: 700 !important; line-height: 1.25 !important; letter-spacing: -0.02em !important; color: #111827 !important; }
.prose h2, .w3-prose h2, .lesson-body h2, .tutorial-prose h2, .article-prose h2, .reading-story .story-prose h2 { font-size: 1.35rem !important; font-weight: 700 !important; line-height: 1.35 !important; color: #111827 !important; margin: 26px 0 12px !important; padding-top: 16px !important; border-top: 1px solid #e5e7eb !important; border-bottom: 0 !important; }
.prose h3, .w3-prose h3, .lesson-body h3, .tutorial-prose h3, .article-prose h3, .reading-story .story-prose h3 { font-size: 1.125rem !important; font-weight: 600 !important; line-height: 1.4 !important; color: #111827 !important; margin: 20px 0 8px !important; }
.w3-top-nav-btns, .w3-bottom-nav, .lesson-pagination.w3-bottom-nav, .reference-pagination.w3-bottom-nav { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; flex-wrap: nowrap !important; gap: 12px !important; width: 100% !important; margin: 16px 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
.w3-bottom-nav > div, .lesson-pagination.w3-bottom-nav > div, .reference-pagination.w3-bottom-nav > div { border: 0 !important; padding: 0 !important; margin: 0 !important; background: transparent !important; max-width: none !important; width: auto !important; flex: 0 0 auto !important; }
.w3-bottom-nav > .w3-nav-slot-next, .lesson-pagination.w3-bottom-nav > .w3-nav-slot-next, .reference-pagination.w3-bottom-nav > .w3-nav-slot-next { margin-left: auto !important; }
.w3-btn, .w3-bottom-nav a.w3-btn, .reference-pagination a, .lesson-pagination a, .previous-button, .next-button { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; white-space: nowrap !important; font-size: 14px !important; line-height: 1.35 !important; font-weight: 600 !important; padding: 8px 16px !important; min-height: 36px !important; border-radius: 6px !important; gap: 6px !important; }
.reading-control, .lesson-shell .reading-control, .compact-reading-bar { background: transparent !important; border: 0 !important; padding: 0 !important; margin: 14px 0 !important; box-shadow: none !important; }
.reading-control-card.compact-bar-row { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; flex-wrap: wrap !important; gap: 12px !important; padding: 10px 16px !important; border-radius: 8px !important; border: 1px solid #e2e8f0 !important; background: #f8fafc !important; box-shadow: none !important; margin: 0 !important; }
.reading-control-card.completed.compact-bar-row { background: #f0fdf4 !important; border-color: #bbf7d0 !important; }
.compact-bar-left { display: flex !important; align-items: center !important; gap: 10px !important; min-width: 0; }
.reading-control-card.compact-bar-row .reading-control-icon { width: 22px !important; height: 22px !important; min-width: 22px !important; border-radius: 50% !important; background: #04AA6D !important; color: #ffffff !important; font-size: 12px !important; font-weight: 700 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; }
.reading-control-card.compact-bar-row .reading-control-text { display: flex !important; align-items: baseline !important; flex-wrap: wrap !important; gap: 8px !important; margin: 0 !important; }
.reading-control-card.compact-bar-row h2 { font-size: 14.5px !important; font-weight: 700 !important; line-height: 1.35 !important; color: #111827 !important; margin: 0 !important; letter-spacing: 0 !important; }
.compact-bar-sub { font-size: 13px !important; color: #4b5563 !important; font-weight: 500 !important; }
.compact-bar-link { font-size: 13px !important; font-weight: 600 !important; color: #04AA6D !important; text-decoration: none !important; white-space: nowrap !important; }
.compact-bar-link:hover { text-decoration: underline !important; }
.reading-control-card.compact-bar-row .reading-action-form { margin: 0 !important; }
.compact-mark-btn, .reading-control-card.compact-bar-row .reading-action { font-size: 13px !important; font-weight: 600 !important; padding: 6px 14px !important; min-height: 32px !important; border-radius: 6px !important; background: #04AA6D !important; color: #ffffff !important; border: 0 !important; white-space: nowrap !important; }
.compact-mark-btn:hover, .reading-control-card.compact-bar-row .reading-action:hover { background: #059862 !important; }
.quiz-section, .w3-exercise-section { margin: 16px 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; }
.quiz, .lesson-shell .quiz, .compact-quiz-form { padding: 16px 18px !important; margin: 12px 0 !important; border-radius: 8px !important; background: #f9fafb !important; border: 1px solid #e5e7eb !important; box-shadow: none !important; }
.quiz.completion-only { border-top: 1px solid var(--line); border-radius: 0; margin-top: 24px; padding: 10px 0 !important; background: transparent !important; border: 0 !important; }
.quiz-heading { margin-bottom: 24px; padding-bottom: 14px; border-bottom: 1px solid #e2ece4; margin: 0 0 10px !important; padding: 0 !important; }
.quiz-heading h2 { font-size: 17.5px !important; font-weight: 700 !important; line-height: 1.35 !important; color: #111827 !important; margin: 0 !important; letter-spacing: -0.01em !important; }
.question-card, .lesson-shell .question-card { padding: 12px 14px !important; margin: 10px 0 !important; border-radius: 8px !important; background: #ffffff !important; border: 1px solid #e5e7eb !important; box-shadow: none !important; }
.question-card legend { padding-top: 16px; display: block; margin-bottom: 12px; padding: 0 !important; margin: 0 0 8px !important; float: none !important; width: 100% !important; }
.question-index { display: inline-block !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; color: #04AA6D !important; margin-bottom: 3px !important; }
.question-card legend .prose, .question-card legend .prose p, .saved-question-prompt, .saved-question-prompt p { font-size: 15px !important; line-height: 1.55 !important; color: #1f2937 !important; margin: 2px 0 6px !important; font-weight: 500 !important; }
.answer-option, fieldset label.answer-option { display: flex !important; align-items: center !important; gap: 10px !important; padding: 8px 12px !important; margin: 5px 0 !important; min-height: 36px !important; border-radius: 6px !important; border: 1px solid #e5e7eb !important; background: #ffffff !important; font-size: 14.5px !important; line-height: 1.45 !important; cursor: pointer !important; }
.answer-option:hover { border-color: #04AA6D !important; background: #f8fafc !important; }
.answer-option:has(input:checked) { box-shadow: 0 0 0 1px #0e7065; background: #ecfdf5 !important; border-color: #04AA6D !important; }
.answer-option input[type="radio"] { width: 15px !important; height: 15px !important; margin: 0 !important; accent-color: #04AA6D !important; }
.answer-text { font-size: 14.5px !important; line-height: 1.45 !important; color: #1f2937 !important; }
.quiz-actions { margin-top: 10px !important; }
.quiz .completion-button { gap: 8px; line-height: 1.4; font-size: 13.5px !important; font-weight: 600 !important; padding: 8px 16px !important; min-height: 36px !important; border-radius: 6px !important; background: #04AA6D !important; color: #ffffff !important; }
.quiz-result.compact-quiz-result, .completed-banner.compact-quiz-banner { padding: 12px 16px !important; margin: 12px 0 !important; border-radius: 8px !important; border: 1px solid #bbf7d0 !important; background: #f0fdf4 !important; }
.quiz-result.compact-quiz-result.retry { background: #fffbeb !important; border-color: #fde68a !important; }
.compact-banner-row { display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: wrap !important; gap: 10px !important; }
.quiz-result.compact-quiz-result h2, .completed-banner.compact-quiz-banner h2 { font-size: 15.5px !important; font-weight: 700 !important; margin: 4px 0 !important; }
.quiz-result.compact-quiz-result p { font-size: 13.5px !important; margin: 4px 0 8px !important; }
.compact-tally { font-size: 13px !important; font-weight: 500 !important; color: #4b5563 !important; }
.w3-cert-ready-card { background: #ffffff; border: 1px solid #d1fae5; border-radius: 10px; padding: 12px 14px; margin-top: 8px; box-shadow: 0 2px 8px rgba(4, 170, 109, 0.08); }
.w3-cert-tag { display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; color: #047857; background: #d1fae5; padding: 2px 8px; border-radius: 4px; margin-bottom: 5px; }
.w3-cert-copy { font-size: 13px !important; line-height: 1.45 !important; color: #374151 !important; margin: 0 0 8px !important; }
.certificate-btn.w3-cert-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; width: 100%; background: linear-gradient(135deg, #04AA6D 0%, #038e5b 100%) !important; color: #ffffff !important; border: 1px solid #037a4e !important; border-radius: 7px !important; padding: 9px 14px !important; font-size: 13.5px !important; font-weight: 700 !important; text-decoration: none !important; box-shadow: 0 2px 8px rgba(4, 170, 109, 0.18) !important; }
.certificate-btn.w3-cert-btn:hover { background: linear-gradient(135deg, #059862 0%, #026e46 100%) !important; color: #ffffff !important; }
.w3-tutorial-reader .tutorial-chapter > summary { text-transform: uppercase; letter-spacing: 0.04em; position: relative; padding: 9px 28px 9px 16px !important; font-size: 14px !important; font-weight: 700 !important; color: #1f2937 !important; cursor: pointer; user-select: none; border-radius: 4px; }
.w3-tutorial-reader .tutorial-chapter > summary:hover { background: #dcdedf !important; }
.w3-tutorial-reader .tutorial-chapter > summary::after { content: '▸' !important; position: absolute; right: 12px; top: 50%; transform: translateY(-50%) !important; font-size: 13px !important; color: #4b5563; }
.w3-tutorial-reader .tutorial-chapter[open] > summary::after { content: '▾' !important; }
.toc-section-group { border-bottom: 1px solid #f1f5f9; padding: 2px 0; }
.toc-section-header { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.toc-section-header .toc-link { flex: 1; font-size: 13.5px !important; padding: 6px 8px !important; }
.toc-subnav-toggle { background: transparent; border: 0; color: #6b7280; font-size: 12px; padding: 4px 6px; cursor: pointer; border-radius: 4px; line-height: 1; }
.toc-subnav { display: none; flex-direction: column; gap: 2px; padding: 2px 0 6px 12px; margin-left: 8px; border-left: 2px solid #e5e7eb; }
.toc-section-group.is-open .toc-subnav { display: flex; }
.toc-section-group.is-active-group > .toc-section-header .toc-link { color: #04AA6D !important; font-weight: 700 !important; background: #ecfdf5 !important; border-left-color: #04AA6D !important; }
.toc-section-group.is-active-group .toc-subnav { border-left-color: #04AA6D; }
.w3-article-workspace { max-width: none !important; margin: 0 !important; padding: 0 !important; background: #ffffff !important; }
.w3-article-grid { max-width: 1320px !important; margin: 0 auto !important; padding: 0 !important; display: grid !important; grid-template-columns: minmax(0, 1fr) 240px !important; gap: 0 !important; align-items: stretch !important; }
@media (max-width: 980px) {
  .w3-article-grid { grid-template-columns: 1fr !important; }
}
.w3-share-btn { height: 32px !important; padding: 0 12px !important; font-size: 13px !important; border-radius: 5px !important; border: 1px solid #d1d5db !important; background: #f9fafb !important; color: #1f2937 !important; font-weight: 600 !important; cursor: pointer; }
.catalog-header-badge { align-items: center; gap: 8px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); background: var(--blue-light); border: 1px solid var(--blue-border); padding: 5px 13px; border-radius: 999px; margin-bottom: 14px; display: none !important; }
.catalog-hero-banner, .editorial-heading, .catalog-page-header, .clean-section-header { padding: 14px 18px !important; margin-bottom: 14px !important; }
.catalog-intro, .editorial-heading > p, .contact-lead { font-size: 14.5px !important; line-height: 1.55 !important; margin: 0 !important; max-width: 65ch !important; }
.notes-handbook-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 20px !important; margin: 14px 0 32px !important; }
@media (max-width: 980px) {
  .notes-handbook-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 640px) {
  .notes-handbook-grid { grid-template-columns: 1fr !important; }
}
.note-handbook-card { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: space-between !important; background: #ffffff !important; border: 1px solid #e5e7eb !important; border-radius: 10px !important; padding: 18px !important; gap: 14px !important; }
.note-handbook-icon { height: 120px; border-radius: 8px; background: #f3f4f6; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 12px; }
.note-handbook-icon img { max-height: 86px; width: auto; object-fit: contain; }
.note-fallback-badge { text-align: center; }
.note-fallback-badge span { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #04AA6D; margin-bottom: 4px; }
.note-fallback-badge strong { font-size: 18px; font-weight: 700; color: #111827; }
.note-handbook-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #6b7280; margin-bottom: 6px; }
.note-type-badge { letter-spacing: 0.08em; text-transform: uppercase; background: #ecfdf5 !important; color: #047857 !important; font-size: 11px !important; font-weight: 700 !important; padding: 2px 7px !important; border-radius: 4px !important; }
.note-handbook-body h3 { font-size: 17px !important; font-weight: 700 !important; color: #111827 !important; margin: 0 0 6px !important; line-height: 1.35 !important; }
.note-handbook-body p { font-size: 13.5px !important; line-height: 1.55 !important; color: #4b5563 !important; margin: 0 !important; }
.note-handbook-footer { padding-top: 10px; border-top: 1px solid #f3f4f6; }
.note-download-trigger { width: 100%; justify-content: center !important; font-size: 13.5px !important; padding: 9px 14px !important; border-radius: 6px !important; background: #04AA6D !important; color: #ffffff !important; font-weight: 600 !important; }
.note-download-trigger:hover { background: #059862 !important; }
.contribute-modal { position: fixed; inset: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 16px; border: 0; background: rgba(15, 23, 42, 0.62); backdrop-filter: blur(3px); z-index: 10000; display: none; overflow: hidden !important; box-sizing: border-box; }
.contribute-modal[open] { display: flex; align-items: center; justify-content: center; }
.contribute-modal-box { position: relative; width: 100%; max-width: 470px; max-height: none !important; overflow: hidden !important; background: #ffffff; border-radius: 12px; border: 1px solid #d1d5db; padding: 0; text-align: left; box-shadow: 0 20px 50px rgba(15, 23, 42, 0.28); }
.contribute-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; background: #1d2a35; color: #ffffff; padding: 16px 20px; border-bottom: 3px solid #04AA6D; }
.contribute-kicker { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: 0.1em; color: #34d399; margin-bottom: 3px; }
.contribute-title { font-size: 17.5px !important; font-weight: 700 !important; color: #ffffff !important; margin: 0 !important; line-height: 1.3 !important; }
.contribute-modal-close { width: 28px; height: 28px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.08); color: #ffffff; font-size: 14px; line-height: 1; cursor: pointer; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contribute-modal-close:hover { background: #04AA6D; border-color: #04AA6D; }
.contribute-modal-body { padding: 16px 20px 18px; }
.contribute-selected-resource { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 7px; margin-bottom: 10px; font-size: 13px; }
.contribute-selected-resource strong { color: #111827; font-weight: 700; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.resource-free-tag { display: inline-block; margin-bottom: 4px; font-size: 11px; font-weight: 700; color: #047857; background: #d1fae5; padding: 2px 7px; border-radius: 4px; }
.contribute-desc { font-size: 13px !important; line-height: 1.5 !important; color: #4b5563 !important; margin: 0 0 12px !important; }
.contribute-amounts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.contribute-amount-btn { display: flex; align-items: center; justify-content: center; gap: 3px; height: 38px; border-radius: 7px; background: #f8fafc; color: #1f2937; border: 1.5px solid #cbd5e1; font-size: 14px; font-weight: 700; cursor: pointer; transition: all 0.12s ease; }
.contribute-amount-btn:hover { border-color: #04AA6D; background: #f0fdf4; }
.contribute-amount-btn.is-selected { background: #ecfdf5; color: #047857; border-color: #04AA6D; box-shadow: 0 0 0 1px #04AA6D; }
.contribute-amount-btn .bdt-currency { font-weight: 600; color: #04AA6D; }
.contribute-payment-panel { margin: 0 0 10px; padding: 0; background: transparent; border: 0; }
.contribute-pay-submit-btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 10px 14px; border-radius: 7px; background: #04AA6D; color: #ffffff !important; font-size: 13.5px; font-weight: 700; text-decoration: none !important; transition: background 0.15s ease; }
.contribute-pay-submit-btn:hover { background: #059862; }
.contribute-bkash-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; padding: 6px 10px; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 6px; font-size: 12.5px; color: #374151; }
.copy-bkash-mini { padding: 3px 8px; font-size: 11.5px; font-weight: 600; border: 1px solid #d1d5db; border-radius: 4px; background: #ffffff; color: #111827; cursor: pointer; }
.contribute-skip-wrap { text-align: center; padding-top: 6px; border-top: 1px solid #f1f5f9; }
.contribute-skip-link { font-size: 12.5px; color: #6b7280 !important; text-decoration: none !important; font-weight: 600 !important; }
.contribute-skip-link:hover { color: #111827 !important; text-decoration: underline !important; }
.short-video, .modern-short-card, .modern-short-card.is-completed-short, .modern-short-card:hover, .shorts-series-card, .clean-shorts-hero, .clean-shorts-progress, .shorts-progress, .guide-card, .tutorial-card, .tutorial-explorer .tutorial-card, .learning-course, .modern-progress-card, .kpi-stat-card { border: 1px solid #e5e7eb !important; border-top: 1px solid #e5e7eb !important; border-left: 1px solid #e5e7eb !important; border-right: 1px solid #e5e7eb !important; border-bottom: 1px solid #e5e7eb !important; }
.guide-card::before { display: none !important; }
.section.shorts-detail, .section.shorts-detail.w3-shorts-workspace { max-width: 1260px !important; margin: 0 auto !important; padding: 16px 4% 36px !important; }
.shorts-detail .shorts-series-header, .shorts-detail .shorts-series-header.clean-shorts-hero { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 18px !important; padding: 14px 18px !important; margin: 0 0 10px !important; background: #ffffff !important; border: 1px solid #e5e7eb !important; border-radius: 10px !important; box-shadow: none !important; }
.shorts-series-intro { flex: 1 1 auto; min-width: 0; }
.shorts-series-top-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; font-size: 12px; }
.shorts-back-link { color: #374151 !important; font-weight: 600 !important; text-decoration: none !important; padding: 2px 8px; background: #f3f4f6; border: 1px solid #e5e7eb; border-radius: 5px; }
.shorts-back-link:hover { background: #e5e7eb; color: #111827 !important; }
.shorts-topic-tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #047857; background: #ecfdf5; padding: 2px 8px; border-radius: 4px; }
.shorts-count-inline { font-size: 12px; color: #6b7280; font-weight: 500; }
.shorts-series-intro h1, .shorts-detail .shorts-series-header h1 { font-size: clamp(1.25rem, 2vw, 1.5rem) !important; font-weight: 700 !important; line-height: 1.25 !important; letter-spacing: -0.015em !important; color: #111827 !important; margin: 2px 0 4px !important; }
.shorts-series-intro > p, .shorts-detail header > p { font-size: 13.5px !important; line-height: 1.5 !important; color: #4b5563 !important; margin: 0 !important; max-width: 68ch !important; }
.shorts-series-meta { display: flex; align-items: center; flex-wrap: wrap; font-size: 14px; margin-top: 6px !important; gap: 10px !important; }
.shorts-course-link { font-size: 12.5px !important; font-weight: 600 !important; color: #04AA6D !important; text-decoration: none !important; }
.shorts-course-link:hover { text-decoration: underline !important; }
.shorts-series-header .shorts-cover { width: 148px !important; height: 84px !important; min-height: 84px !important; padding: 10px !important; border-radius: 8px !important; flex-shrink: 0 !important; }
.shorts-series-header .shorts-cover > strong { font-size: 16px !important; }
.shorts-progress, .clean-shorts-progress { padding: 8px 14px !important; margin: 0 0 14px !important; background: #ffffff !important; border: 1px solid #e5e7eb !important; border-radius: 8px !important; box-shadow: none !important; }
.shorts-progress-inner { width: 100%; display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: wrap !important; gap: 12px !important; }
.shorts-progress-copy { display: flex !important; align-items: baseline !important; flex-wrap: wrap !important; gap: 10px !important; flex: 0 1 auto !important; }
.shorts-progress-copy h2, .shorts-progress h2 { font-size: 13.5px !important; font-weight: 700 !important; color: #111827 !important; margin: 0 !important; }
.shorts-sync-note { font-size: 12.5px !important; color: #6b7280 !important; }
.shorts-sync-note a { color: #04AA6D !important; font-weight: 600 !important; }
.shorts-progress-meter { border-radius: 10px; display: flex !important; align-items: center !important; gap: 10px !important; flex: 0 1 320px !important; max-width: 340px !important; padding: 0 !important; background: transparent !important; border: 0 !important; }
.shorts-progress-meter .progress-label { margin: 0 !important; font-size: 12px !important; white-space: nowrap !important; gap: 6px !important; }
.shorts-progress-meter progress { width: 110px !important; height: 6px !important; margin: 0 !important; accent-color: #04AA6D !important; }
.shorts-video-section > .section-heading, .shorts-playlist-bar { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; margin: 0 0 10px !important; padding: 0 !important; }
.shorts-video-section > .section-heading h2, .shorts-playlist-bar h2 { font-size: 16px !important; font-weight: 700 !important; color: #111827 !important; margin: 0 !important; letter-spacing: -0.01em !important; }
.section-count-badge { font-size: 12px !important; font-weight: 600 !important; color: #374151 !important; background: #f3f4f6 !important; border: 1px solid #e5e7eb !important; padding: 3px 10px !important; border-radius: 6px !important; }
.shorts-detail .shorts-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 14px !important; align-items: stretch !important; }
@media (max-width: 1120px) {
  .shorts-detail .shorts-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 820px) {
  .shorts-detail .shorts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .shorts-detail .shorts-series-header.clean-shorts-hero { flex-direction: column !important; align-items: flex-start !important; }
  .shorts-series-header .shorts-cover { width: 100% !important; height: 110px !important; }
}
@media (max-width: 520px) {
  .shorts-detail .shorts-grid { grid-template-columns: 1fr !important; }
}
.shorts-detail .short-video, .shorts-detail .short-video.modern-short-card { padding: 10px 12px !important; border-radius: 10px !important; background: #ffffff !important; border: 1px solid #e5e7eb !important; box-shadow: none !important; display: flex !important; flex-direction: column !important; gap: 8px !important; margin: 0 !important; }
.shorts-detail .short-video:hover, .shorts-detail .short-video.modern-short-card:hover { border-color: #cbd5e1 !important; box-shadow: 0 4px 12px rgba(17, 24, 39, 0.05) !important; transform: none !important; }
.shorts-detail .short-video-heading { min-height: 0 !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 7px !important; }
.shorts-detail .short-episode { min-width: 24px !important; width: 24px !important; height: 24px !important; font-size: 11px !important; font-weight: 700 !important; border-radius: 5px !important; background: #f3f4f6 !important; border: 1px solid #e5e7eb !important; color: #374151 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; }
.short-video.is-completed-short .short-episode { background: #ecfdf5 !important; border-color: #a7f3d0 !important; color: #047857 !important; }
.shorts-detail .short-video-heading h3 { letter-spacing: -.3px; font-size: 13.5px !important; font-weight: 600 !important; line-height: 1.3 !important; color: #111827 !important; margin: 0 !important; flex: 1 1 auto !important; min-width: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.shorts-detail .short-expand { width: 26px !important; height: 26px !important; min-width: 26px !important; border-radius: 5px !important; border: 1px solid #e5e7eb !important; background: #f9fafb !important; color: #374151 !important; padding: 0 !important; }
.shorts-detail .short-expand:hover { background: #f3f4f6 !important; color: #111827 !important; }
.shorts-detail .short-player-wrap { width: 100% !important; max-width: none !important; margin: 0 !important; aspect-ratio: 9 / 16 !important; border-radius: 7px !important; overflow: hidden !important; background: #111827 !important; }
.shorts-detail .short-play { padding: 12px !important; gap: 8px !important; }
.shorts-detail .short-play-symbol { width: 44px !important; height: 44px !important; font-size: 18px !important; background: rgba(17, 24, 39, 0.78) !important; border: 1.5px solid rgba(255, 255, 255, 0.8) !important; }
.shorts-detail .short-play-label { font-size: 12px !important; font-weight: 600 !important; background: rgba(17, 24, 39, 0.72); padding: 3px 9px; border-radius: 999px; }
.shorts-detail .short-summary { font-size: 12.5px !important; line-height: 1.45 !important; color: #4b5563 !important; margin: 0 !important; padding: 0 !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.shorts-detail .short-completion { margin-top: auto !important; padding-top: 7px !important; border-top: 1px solid #f3f4f6 !important; }
.shorts-detail .short-completion form { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 6px !important; margin: 0 !important; }
.shorts-detail .short-completion .topic-status { font-size: 11.5px !important; font-weight: 600 !important; margin: 0 !important; color: #6b7280 !important; }
.shorts-detail .short-completion .topic-status.is-completed { color: #047857 !important; }
.shorts-detail .short-completion .reading-action { font-size: 11.5px !important; font-weight: 600 !important; padding: 4px 10px !important; min-height: 26px !important; border-radius: 5px !important; border: 1px solid #d1d5db !important; background: #f9fafb !important; color: #1f2937 !important; }
.shorts-detail .short-completion .reading-action:hover { background: #04AA6D !important; border-color: #04AA6D !important; color: #ffffff !important; text-decoration: none !important; }
.enrollment-badge.paid-badge, .enrollment-badge.paid-locked-badge { background: #fef3c7 !important; color: #92400e !important; border: 1px solid #fde68a !important; font-weight: 700 !important; }
.w3-paid-course-gate { padding: 20px 22px; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 10px; margin: 8px 0 24px; }
.paid-gate-header { border-bottom: 1px solid #e5e7eb; padding-bottom: 16px; margin-bottom: 18px; }
.paid-gate-kicker { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; color: #047857; background: #ecfdf5; border: 1px solid #a7f3d0; padding: 3px 9px; border-radius: 5px; margin-bottom: 8px; }
.paid-gate-desc { font-size: 15px !important; line-height: 1.65 !important; color: #374151 !important; margin: 8px 0 12px !important; }
.paid-gate-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: #4b5563; font-weight: 600; }
.paid-pending-alert { background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; }
.paid-pending-alert strong { display: block; font-size: 14px; color: #92400e; margin-bottom: 4px; }
.paid-pending-alert p { font-size: 13.5px !important; color: #78350f !important; margin: 0 !important; }
@media (max-width: 820px) {
  .paid-checkout-grid { grid-template-columns: 1fr; }
}
.checkout-method-tag { display: inline-block; align-self: flex-start; font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; color: #047857; background: #d1fae5; padding: 2px 8px; border-radius: 4px; margin-bottom: 6px; }
.paid-checkout-card h2 { font-size: 17px !important; font-weight: 700 !important; color: #111827 !important; margin: 0 0 6px !important; }
.paid-checkout-card p { font-size: 13.5px !important; line-height: 1.55 !important; color: #4b5563 !important; margin: 0 0 14px !important; }
@media (max-width: 540px) {
  .paid-input-row { grid-template-columns: 1fr; }
}
.paid-input-row label { display: block; font-size: 12px; font-weight: 600; color: #374151; margin-bottom: 4px; }
.paid-input-row input { width: 100%; font-size: 13.5px; padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 6px; background: #ffffff; }
.paid-web-submit-btn, .paid-trx-submit-btn { width: 100%; justify-content: center !important; font-size: 13.5px !important; font-weight: 700 !important; padding: 10px 16px !important; border-radius: 7px !important; margin: 0 !important; }
.paid-login-prompt { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 9px; padding: 20px; }
.paid-login-prompt h2 { font-size: 17.5px !important; font-weight: 700 !important; margin: 0 0 6px !important; }
.paid-login-prompt p { font-size: 14px !important; margin: 0 0 14px !important; }
.paid-login-actions .button { width: auto !important; font-size: 13.5px !important; padding: 9px 18px !important; }
.button, a.button, button.button, .button.small, a.button.small, .w3-enroll-btn, .paid-login-primary-btn, .paid-login-secondary-btn, .paid-web-submit-btn, .paid-trx-submit-btn, .auth-submit-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; border-radius: 7px !important; min-height: 38px !important; height: auto !important; padding: 8px 18px !important; font-size: 13.5px !important; font-weight: 600 !important; line-height: 1.35 !important; text-decoration: none !important; white-space: nowrap !important; box-shadow: none !important; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease !important; }
.site-header .brand-logo { width: 36px !important; height: 36px !important; }
.site-header .brand b { font-size: 15.5px !important; font-weight: 700 !important; letter-spacing: -0.02em !important; line-height: 1.25 !important; margin-left: 0 !important; color: #111827 !important; }
.site-header .brand small { font-size: 11px !important; font-weight: 500 !important; letter-spacing: 0.01em !important; color: #6b7280 !important; margin-top: 2px !important; }
.global-search-btn { display: inline-flex; align-items: center; font-family: inherit; cursor: pointer; transition: all 0.18s ease; height: 36px !important; padding: 0 12px !important; border-radius: 7px !important; background: #f9fafb !important; border: 1px solid #e5e7eb !important; color: #6b7280 !important; font-size: 13px !important; font-weight: 500 !important; margin-left: 4px !important; gap: 8px !important; }
.global-search-btn:hover { box-shadow: 0 2px 10px rgba(11, 110, 130, 0.1); border-color: #cbd5e1 !important; background: #f3f4f6 !important; color: #111827 !important; }
.search-key-badge { font-size: 11px !important; padding: 2px 6px !important; border-radius: 4px !important; background: #ffffff !important; border: 1px solid #e5e7eb !important; color: #6b7280 !important; }
.site-header nav a:hover { background: #f3f4f6 !important; color: #111827 !important; }
.site-header nav a[aria-current="page"] { color: #047857 !important; background: #ecfdf5 !important; font-weight: 700 !important; }
.site-header .nav-verify { border-left: 1px solid #e5e7eb !important; padding-left: 12px !important; margin-left: 4px !important; }
.site-header .nav-login-btn, .site-header .nav-dashboard-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 36px !important; min-height: 36px !important; padding: 0 14px !important; border-radius: 7px !important; border: 1px solid #d1d5db !important; background: #ffffff !important; color: #1f2937 !important; font-size: 13.5px !important; font-weight: 600 !important; text-decoration: none !important; white-space: nowrap !important; }
.site-header .nav-login-btn:hover, .site-header .nav-dashboard-btn:hover { background: #f3f4f6 !important; border-color: #9ca3af !important; color: #111827 !important; }
.site-header .nav-signup-btn, .site-header .account .button.small { height: 36px !important; min-height: 36px !important; padding: 0 16px !important; border-radius: 7px !important; background: #04AA6D !important; border: 1px solid #04AA6D !important; color: #ffffff !important; font-size: 13.5px !important; font-weight: 600 !important; }
.site-header .nav-signup-btn:hover, .site-header .account .button.small:hover { background: #059862 !important; border-color: #059862 !important; transform: none !important; }
.site-header .nav-logout-btn { height: 36px; padding: 0 10px; font-size: 13px; font-weight: 600; color: #6b7280; border-radius: 6px; }
.site-header .nav-logout-btn:hover { background: #f3f4f6; color: #111827; }
.w3-sidebar-top.course-overview { padding: 16px 16px 14px !important; }
.w3-sidebar-heading { font-weight: 600 !important; letter-spacing: 0.06em !important; color: #333333 !important; padding: 0 !important; margin: 0 0 8px !important; display: block !important; font-size: 15px !important; line-height: 1.35 !important; word-break: break-word !important; }
.w3-enroll-btn { width: 100% !important; height: 36px !important; min-height: 36px !important; padding: 0 14px !important; border-radius: 7px !important; background: #04AA6D !important; color: #ffffff !important; font-size: 13.5px !important; font-weight: 600 !important; margin: 6px 0 4px !important; }
.paid-checkout-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important; align-items: stretch !important; }
@media (max-width: 820px) {
  .paid-checkout-grid { grid-template-columns: 1fr !important; }
}
.paid-checkout-card { background: #f9fafb !important; border: 1px solid #e5e7eb !important; border-radius: 10px !important; padding: 18px !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; gap: 14px !important; }
.paid-card-top h2 { font-size: 16.5px !important; font-weight: 700 !important; color: #111827 !important; margin: 4px 0 6px !important; }
.paid-card-top p { font-size: 13.5px !important; line-height: 1.5 !important; color: #4b5563 !important; margin: 0 !important; }
.paid-summary-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; padding: 10px 12px; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 7px; }
.paid-summary-strip span { display: block; font-size: 11px; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.04em; }
.paid-summary-strip strong { display: block; font-size: 13.5px; font-weight: 700; color: #111827; margin-top: 2px; }
.paid-input-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; align-items: end !important; margin-bottom: 12px !important; }
.paid-input-col { display: flex; flex-direction: column; min-width: 0; }
.paid-input-col label { display: block !important; font-size: 12px !important; font-weight: 600 !important; color: #374151 !important; margin: 0 0 5px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.paid-input-col input { width: 100% !important; height: 38px !important; min-height: 38px !important; font-size: 13.5px !important; padding: 0 10px !important; border: 1px solid #d1d5db !important; border-radius: 6px !important; background: #ffffff !important; margin: 0 !important; }
.paid-web-submit-btn { width: 100% !important; height: 40px !important; min-height: 40px !important; background: #04AA6D !important; border: 1px solid #04AA6D !important; color: #ffffff !important; border-radius: 7px !important; }
.paid-web-submit-btn:hover { background: #059862 !important; }
.paid-trx-submit-btn { width: 100% !important; height: 40px !important; min-height: 40px !important; background: #1d2a35 !important; border: 1px solid #1d2a35 !important; color: #ffffff !important; border-radius: 7px !important; }
.paid-trx-submit-btn:hover { background: #04AA6D !important; border-color: #04AA6D !important; }
.paid-login-actions { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 10px !important; }
.paid-login-primary-btn { background: #04AA6D !important; border: 1px solid #04AA6D !important; color: #ffffff !important; height: 38px !important; min-height: 38px !important; padding: 0 18px !important; border-radius: 7px !important; }
.paid-login-secondary-btn { background: #ffffff !important; border: 1px solid #d1d5db !important; color: #1f2937 !important; height: 38px !important; min-height: 38px !important; padding: 0 18px !important; border-radius: 7px !important; }
.auth.modern-auth-card { max-width: 480px !important; margin: 36px auto 56px !important; padding: 28px 30px !important; background: #ffffff !important; border: 1px solid #e5e7eb !important; border-radius: 12px !important; box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04) !important; }
.auth-card-header { margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid #f1f5f9; }
.auth-kicker { display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; color: #047857; background: #ecfdf5; padding: 2px 8px; border-radius: 4px; margin-bottom: 6px; }
.auth.modern-auth-card h1 { font-size: 24px !important; font-weight: 700 !important; letter-spacing: -0.02em !important; line-height: 1.25 !important; color: #111827 !important; margin: 0 0 6px !important; }
.auth-card-header p { font-size: 14px !important; line-height: 1.5 !important; color: #4b5563 !important; margin: 0 !important; }
.modern-signup-form .signup-field, .modern-login-form .signup-field { margin: 0 0 14px !important; }
.signup-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.signup-label-row label { font-size: 13.5px !important; font-weight: 600 !important; color: #1f2937 !important; margin: 0 !important; }
.field-inline-hint { font-size: 12px; color: #6b7280; font-weight: 500; }
.field-inline-hint.is-valid-hint { color: #047857; font-weight: 600; }
.field-inline-hint.is-invalid-hint { color: #b45309; font-weight: 600; }
.forgot-pw-inline { font-size: 12.5px; font-weight: 600; color: #04AA6D !important; text-decoration: none !important; }
.forgot-pw-inline:hover { text-decoration: underline !important; }
.auth.modern-auth-card input:not([type="checkbox"]):not([type="radio"]) { width: 100% !important; height: 40px !important; min-height: 40px !important; padding: 0 12px !important; font-size: 14px !important; border: 1px solid #d1d5db !important; border-radius: 7px !important; background: #ffffff !important; color: #111827 !important; transition: border-color 0.15s ease, box-shadow 0.15s ease !important; }
.auth.modern-auth-card input:focus { border-color: #04AA6D !important; box-shadow: 0 0 0 3px rgba(4, 170, 109, 0.12) !important; outline: none !important; }
.password-input-wrap { position: relative; display: flex; align-items: center; }
.password-input-wrap input { padding-right: 58px !important; }
.pw-toggle-btn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); height: 28px; padding: 0 10px; font-size: 12px; font-weight: 600; color: #4b5563; background: #f3f4f6; border: 1px solid #e5e7eb; border-radius: 5px; cursor: pointer; }
.pw-toggle-btn:hover { background: #e5e7eb; color: #111827; }
.auth.modern-auth-card .field-help { font-size: 12px !important; line-height: 1.45 !important; color: #6b7280 !important; margin-top: 4px !important; }
.password-live-panel { margin-top: 8px; padding: 10px 12px; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; }
.pw-strength-bar-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.pw-strength-track { flex: 1; height: 5px; background: #e5e7eb; border-radius: 999px; overflow: hidden; }
.pw-strength-fill { width: 0%; height: 100%; background: #9ca3af; transition: width 0.2s ease, background-color 0.2s ease; }
.pw-strength-fill.is-weak { background: #ef4444; }
.pw-strength-fill.is-fair { background: #f59e0b; }
.pw-strength-fill.is-good { background: #10b981; }
.pw-strength-fill.is-strong { background: #04AA6D; }
.pw-strength-label { font-size: 11.5px; font-weight: 700; color: #4b5563; white-space: nowrap; }
.pw-rules-grid { list-style: none !important; padding: 0 !important; margin: 0 !important; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
@media (max-width: 480px) {
  .pw-rules-grid { grid-template-columns: 1fr; }
}
.pw-rule-item { display: flex; align-items: center; gap: 6px; font-size: 12px !important; line-height: 1.35 !important; color: #6b7280 !important; margin: 0 !important; transition: color 0.15s ease; }
.pw-rule-icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; font-size: 10px; font-weight: 800; background: #e5e7eb; color: #6b7280; flex-shrink: 0; transition: background-color 0.15s ease, color 0.15s ease; }
.pw-rule-item.is-met { color: #047857 !important; font-weight: 600 !important; }
.pw-rule-item.is-met .pw-rule-icon { background: #04AA6D; color: #ffffff; }
.pw-match-feedback { font-size: 12px; font-weight: 600; margin-top: 5px; min-height: 16px; }
.pw-match-feedback.is-match { color: #047857; }
.pw-match-feedback.is-mismatch { color: #b45309; }
.auth-submit-btn { width: 100% !important; height: 42px !important; min-height: 42px !important; margin-top: 6px !important; background: #04AA6D !important; border: 1px solid #04AA6D !important; color: #ffffff !important; font-size: 14.5px !important; font-weight: 700 !important; border-radius: 7px !important; }
.auth-submit-btn:hover { background: #059862 !important; }
.auth-card-footer { margin-top: 18px; padding-top: 14px; border-top: 1px solid #f1f5f9; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 13.5px; }
.auth-card-footer p { margin: 0 !important; font-size: 13.5px !important; color: #4b5563 !important; }
.auth-card-footer a { color: #04AA6D !important; font-weight: 600 !important; text-decoration: none !important; }
.auth-card-footer a:hover { text-decoration: underline !important; }
.auth-guest-link { color: #6b7280 !important; font-size: 13px !important; }
[hidden], .catalog-loading-state[hidden], #catalog-loading-indicator[hidden], .catalog-error-state[hidden] { display: none !important; }
.catalog-loading-state { align-items: center; gap: 8px; font-size: 0.85rem; font-weight: 600; color: var(--blue); display: none !important; }
.catalog-loading-state.is-loading:not([hidden]) { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: 12.5px !important; font-weight: 600 !important; color: #04AA6D !important; }
.section.courses-catalog-section, .section.tutorial-catalog, .section.editorial-index, .section.shorts-index, .section.notes-handbook-section { max-width: 1280px !important; margin: 0 auto !important; padding: 14px 4% 32px !important; }
.catalog-hero-banner { margin-bottom: 24px; background: #ffffff !important; border: 1px solid #e5e7eb !important; border-radius: 8px !important; padding: 12px 16px !important; margin: 0 0 8px 0 !important; box-shadow: none !important; }
.catalog-hero-banner .catalog-page-header, .catalog-hero-banner .editorial-heading, .catalog-hero-banner .clean-section-header { display: block !important; padding: 0 !important; margin: 0 !important; border: 0 !important; max-width: none !important; }
.catalog-page-header .page-title, .editorial-heading .page-title, .clean-section-header .page-title { font-size: clamp(1.22rem, 1.75vw, 1.45rem) !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: -0.02em !important; color: #0f172a !important; margin: 0 0 2px 0 !important; }
.catalog-intro, .editorial-heading > p { font-size: 13.5px !important; line-height: 1.4 !important; color: #64748b !important; margin: 0 !important; max-width: none !important; }
.filters.catalog-filters, .resource-search.catalog-filters, .article-search.catalog-filters { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px !important; margin: 0 0 8px 0 !important; padding: 8px 10px !important; background: #ffffff !important; border: 1px solid #e5e7eb !important; border-radius: 8px !important; box-shadow: none !important; }
.catalog-filters .filter-input-wrap { flex: 1 1 240px !important; min-width: 180px !important; height: auto !important; }
.catalog-filters .filter-input-wrap .filter-icon { left: 11px !important; width: 14px !important; height: 14px !important; color: #64748b !important; }
.catalog-filters .filter-input-wrap input { height: 36px !important; min-height: 36px !important; max-height: 36px !important; padding: 0 12px 0 32px !important; background: #f8fafc !important; border: 1px solid #e2e8f0 !important; border-radius: 6px !important; font-size: 13px !important; color: #0f172a !important; }
.catalog-filters .filter-input-wrap input:focus { background: #ffffff !important; border-color: #04AA6D !important; box-shadow: 0 0 0 2px rgba(4, 170, 109, 0.14) !important; }
.catalog-filters .filter-select-wrap { min-width: 136px !important; height: auto !important; }
.catalog-filters .filter-select-wrap select { height: 36px !important; min-height: 36px !important; max-height: 36px !important; padding: 0 28px 0 11px !important; background: #f8fafc !important; border: 1px solid #e2e8f0 !important; border-radius: 6px !important; font-size: 13px !important; font-weight: 500 !important; color: #1e293b !important; }
.catalog-filters .filter-select-wrap .select-chevron { right: 9px !important; width: 13px !important; height: 13px !important; }
.catalog-filters .catalog-search-btn { height: 36px !important; min-height: 36px !important; max-height: 36px !important; padding: 0 15px !important; border-radius: 6px !important; font-size: 13px !important; font-weight: 600 !important; background: #04AA6D !important; color: #ffffff !important; }
.catalog-filters .catalog-search-btn:hover { background: #038e5a !important; }
.catalog-filters .clear-filter-btn { height: 36px !important; min-height: 36px !important; max-height: 36px !important; padding: 0 12px !important; border-radius: 6px !important; font-size: 12.5px !important; font-weight: 600 !important; background: #f8fafc !important; color: #475569 !important; border: 1px solid #e2e8f0 !important; }
@media (max-width: 720px) {
  .filters.catalog-filters,
  .resource-search.catalog-filters,
  .article-search.catalog-filters {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    padding: 10px !important;
    gap: 8px !important;
  }
  .catalog-filters .filter-input-wrap,
  .catalog-filters .filter-select-wrap,
  .catalog-filters .catalog-search-btn,
  .catalog-filters .clear-filter-btn {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
  }
}
.category-chip-bar, .article-filters, .resource-tabs { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-start !important; order: initial !important; width: 100% !important; gap: 6px !important; margin: 0 0 8px 0 !important; padding: 0 !important; }
.category-chip, .article-filters > a, .resource-tabs > a { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 5px !important; height: 29px !important; min-height: 29px !important; padding: 0 11px !important; border-radius: 6px !important; font-size: 12.5px !important; font-weight: 600 !important; color: #475569 !important; background: #ffffff !important; border: 1px solid #e2e8f0 !important; text-decoration: none !important; transition: all 0.15s ease !important; }
.category-chip:hover, .article-filters > a:hover, .resource-tabs > a:hover { border-color: #cbd5e1 !important; color: #0f172a !important; background: #f8fafc !important; }
.category-chip.is-active, .category-chip[aria-current="page"], .article-filters > a[aria-current="page"], .resource-tabs > a.is-active, .resource-tabs > a[aria-current="page"] { background: #1d2a35 !important; color: #ffffff !important; border-color: #1d2a35 !important; }
.category-chip span, .resource-tabs > a span { font-size: 11px !important; padding: 1px 5px !important; border-radius: 4px !important; background: rgba(148, 163, 184, 0.18) !important; }
.category-chip.is-active span, .resource-tabs > a.is-active span { background: rgba(255, 255, 255, 0.2) !important; color: #ffffff !important; }
.catalog-status-bar, .resource-list-heading.catalog-status-bar { display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 8px !important; margin: 0 0 10px 0 !important; padding: 0 2px !important; min-height: 20px !important; font-size: 12.5px !important; color: #64748b !important; }
.catalog-result-summary { margin: 0 !important; font-size: 12.5px !important; color: #64748b !important; }
.catalog-result-summary strong { color: #0f172a !important; font-weight: 700 !important; }
.resource-list-heading.catalog-status-bar h2 { font-size: 13.5px !important; font-weight: 700 !important; color: #0f172a !important; margin: 0 !important; }
.cards, .editorial-grid, .notes-handbook-grid { gap: 16px !important; margin-top: 0 !important; }
.site-footer { font-size: 13px; display: block; gap: 20px; background: #ffffff !important; border-top: 1px solid #e5e7eb !important; padding: 16px 4% 14px !important; margin-top: 32px !important; color: #475569 !important; }
.site-footer .footer-inner { max-width: 1280px !important; margin: 0 auto !important; display: flex !important; flex-direction: column !important; gap: 12px !important; }
.site-footer .footer-top { padding-bottom: 28px; display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: wrap !important; gap: 16px 24px !important; padding: 0 !important; margin: 0 !important; width: 100% !important; }
.site-footer .footer-brand-block { display: flex !important; align-items: center !important; gap: 14px !important; flex-wrap: wrap !important; }
.site-footer .footer-brand { display: inline-flex !important; align-items: center !important; gap: 10px !important; text-decoration: none !important; }
.site-footer .footer-brand .brand-logo { width: 34px !important; height: 34px !important; border-radius: 50% !important; border: 1px solid #e2e8f0 !important; flex-shrink: 0 !important; }
.site-footer .footer-brand b { font-size: 15px !important; font-weight: 800 !important; color: #0f172a !important; letter-spacing: -0.02em !important; line-height: 1.2 !important; margin: 0 !important; }
.site-footer .footer-brand small { display: block !important; font-size: 9.5px !important; font-weight: 600 !important; letter-spacing: 0.08em !important; color: #64748b !important; margin-top: 2px !important; }
.site-footer .footer-brand-divider { width: 1px !important; height: 24px !important; background: #e2e8f0 !important; }
.site-footer .footer-tagline { margin: 0 !important; font-size: 12.5px !important; color: #64748b !important; font-weight: 400 !important; line-height: 1.4 !important; }
.site-footer .footer-nav { display: flex !important; align-items: center !important; flex-wrap: wrap !important; justify-content: flex-start !important; order: initial !important; width: auto !important; gap: 4px !important; }
.site-footer .footer-nav a { display: inline-flex !important; align-items: center !important; gap: 5px !important; padding: 5px 10px !important; border-radius: 6px !important; font-size: 13px !important; font-weight: 600 !important; color: #334155 !important; text-decoration: none !important; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease !important; }
.site-footer .footer-nav a:hover { background: #f1f5f9 !important; color: #0f172a !important; }
.site-footer .footer-nav a.footer-badge-link { background: #f8fafc !important; border: 1px solid #e2e8f0 !important; padding: 4px 10px !important; font-size: 12.5px !important; color: #0f172a !important; }
.site-footer .footer-nav a.footer-badge-link svg { color: #04AA6D !important; }
.site-footer .footer-nav a.footer-badge-link.footer-yt-link svg { color: #dc2626 !important; }
.site-footer .footer-nav a.footer-badge-link:hover { border-color: #cbd5e1 !important; background: #f1f5f9 !important; }
.site-footer .footer-bottom { border-color: #dce1d2; font-size: 10px; display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: wrap !important; gap: 10px 20px !important; padding-top: 12px !important; margin: 0 !important; border-top: 1px solid #f1f5f9 !important; width: 100% !important; }
.site-footer .footer-bottom p { margin: 0 !important; font-size: 12px !important; color: #64748b !important; line-height: 1.4 !important; }
.site-footer .footer-heart { color: #ef4444 !important; }
@media (max-width: 900px) {
  .site-footer .footer-brand-divider, .site-footer .footer-tagline { display: none !important; }
}

/* ==========================================================================
   Site Header & Responsive Main Menu Navigation Bar
   ========================================================================== */
.site-header {
  max-width: none;
  z-index: 100;
  position: sticky;
  top: 0;
  transform: none;
  backdrop-filter: blur(14px);
  min-height: 64px !important;
  background: #ffffff !important;
  border-bottom: 1px solid #e5e7eb !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 3.5% !important;
  gap: 12px !important;
}
.site-header-left {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex-shrink: 0 !important;
  min-width: 0 !important;
  white-space: nowrap !important;
}
.site-header .brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  letter-spacing: 0 !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}
.global-search-btn, #global-search-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  flex-shrink: 1 !important;
  width: auto !important;
  min-width: 220px;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 0 8px 0 11px !important;
  gap: 8px !important;
  border-radius: 7px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #64748b !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
.global-search-btn svg, #global-search-btn svg {
  width: 15px !important;
  height: 15px !important;
  flex-shrink: 0 !important;
  color: #64748b !important;
}
.global-search-btn span, #global-search-btn span {
  display: inline-block !important;
  white-space: nowrap !important;
  flex-shrink: 1 !important;
  min-width: 0 !important;
  line-height: 1 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.search-key-badge, .global-search-btn kbd, #global-search-btn kbd {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  height: 22px !important;
  min-height: 22px !important;
  padding: 0 6px !important;
  margin-left: auto !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  border-radius: 4px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #64748b !important;
}
.site-header nav a {
  font-weight: 600 !important;
  color: #374151 !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  transition: background 0.12s ease, color 0.12s ease !important;
  padding: 6px 9px !important;
  font-size: 13.5px !important;
  white-space: nowrap !important;
}

/* Desktop Header Navigation (>= 1201px) */
@media (min-width: 1201px) {
  .site-header {
    flex-wrap: nowrap !important;
  }
  .site-header .menu-toggle {
    display: none !important;
  }
  .site-header .site-navigation {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: auto !important;
    border-top: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }
  .site-header .site-navigation nav {
    order: initial !important;
    width: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }
  .site-header .site-navigation .account {
    font-size: 12px;
    border-left: 1px solid #e5e7eb !important;
    border-top: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 0 0 10px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }
}

/* Responsive / Tablet / Mobile Header Navigation (<= 1200px) */
@media (max-width: 1200px) {
  .site-header {
    flex-wrap: wrap !important;
    padding: 10px 16px !important;
    gap: 8px 10px !important;
  }
  .site-header-left {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: 10px !important;
  }
  .global-search-btn, #global-search-btn {
    min-width: 0 !important;
    flex: 0 1 220px !important;
    margin-left: auto !important;
  }
  .site-header .menu-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 12px !important;
    border-radius: 7px !important;
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
    color: #0f172a !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    box-shadow: none !important;
  }
  .site-header .menu-toggle:hover,
  .site-header .menu-toggle[aria-expanded="true"] {
    background: #f1f5f9 !important;
    border-color: #04AA6D !important;
    color: #047857 !important;
  }
  .js .site-header .site-navigation:not(.is-open) {
    display: none !important;
  }
  .js .site-header .site-navigation.is-open,
  html:not(.js) .site-header .site-navigation {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    flex: 0 0 100% !important;
    order: 3 !important;
    margin-top: 6px !important;
    padding: 12px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08) !important;
    gap: 10px !important;
    white-space: normal !important;
  }
  .site-header .site-navigation nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 6px !important;
    order: initial !important;
    justify-content: stretch !important;
  }
  .site-header .site-navigation nav a,
  .site-header .site-navigation nav a.nav-verify {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    padding: 9px 12px !important;
    margin: 0 !important;
    border: 1px solid #f1f5f9 !important;
    border-radius: 7px !important;
    background: #f8fafc !important;
    font-size: 13.5px !important;
  }
  .site-header .site-navigation nav a[aria-current="page"] {
    background: #ecfdf5 !important;
    border-color: #a7f3d0 !important;
    color: #047857 !important;
  }
  .site-header .site-navigation .account {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: stretch !important;
    width: 100% !important;
    border-left: 0 !important;
    border-top: 1px solid #e2e8f0 !important;
    padding: 10px 0 0 !important;
    margin: 2px 0 0 !important;
    gap: 8px !important;
  }
  .site-header .site-navigation .account > a,
  .site-header .site-navigation .account > form {
    flex: 1 1 0 !important;
    display: flex !important;
  }
  .site-header .site-navigation .account > form > button {
    width: 100% !important;
    justify-content: center !important;
  }
}

@media (max-width: 640px) {
  .site-header {
    padding: 8px 12px !important;
    gap: 6px 8px !important;
  }
  .site-header .brand {
    gap: 8px !important;
  }
  .site-header .brand-logo {
    width: 32px !important;
    height: 32px !important;
  }
  .site-header .brand b {
    font-size: 14.5px !important;
  }
  .site-header .brand small {
    font-size: 10px !important;
  }
  .global-search-btn, #global-search-btn {
    flex: 0 0 auto !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    padding: 0 !important;
    justify-content: center !important;
    margin-left: auto !important;
  }
  .global-search-btn span, #global-search-btn span,
  .global-search-btn kbd, #global-search-btn kbd,
  .search-key-badge {
    display: none !important;
  }
}

.paid-checkout-single { max-width: 680px !important; margin: 0 !important; }
.paid-gateway-card { background: #f8fafc !important; border: 1px solid #e5e7eb !important; border-radius: 10px !important; padding: 20px 22px !important; display: flex !important; flex-direction: column !important; gap: 16px !important; }
.paid-card-badge-row { display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: wrap !important; gap: 8px !important; margin-bottom: 4px !important; }
.gateway-secure-pill { display: inline-flex !important; align-items: center !important; gap: 4px !important; font-size: 11.5px !important; font-weight: 600 !important; color: #047857 !important; background: #ecfdf5 !important; border: 1px solid #a7f3d0 !important; padding: 2px 8px !important; border-radius: 5px !important; }
.paid-summary-strip.paid-summary-three { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px !important; margin-top: 12px !important; padding: 10px 14px !important; background: #ffffff !important; border: 1px solid #e5e7eb !important; border-radius: 7px !important; }
@media (max-width: 600px) {
  .paid-summary-strip.paid-summary-three { grid-template-columns: 1fr !important; }
}
.gateway-methods-bar { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 6px !important; margin-top: 10px !important; font-size: 12px !important; color: #64748b !important; font-weight: 500 !important; }
.gateway-chip { display: inline-flex !important; align-items: center !important; padding: 2px 8px !important; border-radius: 5px !important; background: #ffffff !important; border: 1px solid #e2e8f0 !important; font-size: 11.5px !important; font-weight: 600 !important; color: #334155 !important; }

/* ==========================================================================
   Course & Tutorial Navigation Bar, Left Sidebar & Interactive Mode
   ========================================================================== */

/* 1. Top Dark Subnav Bar & Pinned Left Sidebar Toggle Button */
nav.w3-subnav-bar,
.w3-subnav-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  order: initial !important;
  gap: 0 !important;
  width: 100% !important;
  background: var(--w3-dark-bar, #282A35) !important;
  color: #f1f1f1 !important;
  overflow: hidden !important;
  border-bottom: 1px solid #1d1f27 !important;
  position: sticky !important;
  top: var(--header-height, 64px) !important;
  z-index: 95 !important;
}
.w3-subnav-bar > .contents-toggle.w3-mobile-menu-btn,
.w3-subnav-bar .contents-toggle.w3-mobile-menu-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  gap: 6px !important;
  padding: 0 14px !important;
  height: 40px !important;
  min-height: 40px !important;
  background: #04AA6D !important;
  color: #ffffff !important;
  border: 0 !important;
  border-right: 1px solid rgba(255, 255, 255, 0.22) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  position: relative !important;
  z-index: 2 !important;
  transition: background-color 0.18s ease !important;
}
.w3-subnav-bar .contents-toggle.w3-mobile-menu-btn:hover,
.w3-subnav-bar .contents-toggle.w3-mobile-menu-btn:focus-visible {
  background: #059862 !important;
  color: #ffffff !important;
}
.w3-subnav-bar .contents-toggle .subnav-toggle-text {
  font-size: 11.5px !important;
  font-weight: 700 !important;
}
.w3-subnav-bar .w3-subnav-links {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 40px !important;
  padding: 0 8px 0 4px !important;
  gap: 0 !important;
  white-space: nowrap !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}
.w3-subnav-bar .w3-subnav-links::-webkit-scrollbar {
  display: none !important;
}
nav.w3-sidebar-nav,
.tutorial-rail nav.w3-sidebar-nav {
  display: block !important;
  width: 100% !important;
  order: initial !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 2. Desktop Smooth Collapsible Sidebar & Workspace Grid (>= 921px) */
@media (min-width: 921px) {
  .lesson-shell.w3-workspace-shell .lesson-layout.w3-layout {
    display: grid !important;
    grid-template-columns: 260px minmax(0, 1fr) 230px !important;
    transition: grid-template-columns 0.24s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .lesson-shell.w3-workspace-shell .lesson-layout.w3-layout:not(:has(.w3-right-rail:not([hidden]))) {
    grid-template-columns: 260px minmax(0, 1fr) !important;
  }
  .lesson-shell.w3-workspace-shell.contents-hidden .lesson-layout.w3-layout {
    grid-template-columns: 0px minmax(0, 1fr) 230px !important;
  }
  .lesson-shell.w3-workspace-shell.contents-hidden .lesson-layout.w3-layout:not(:has(.w3-right-rail:not([hidden]))) {
    grid-template-columns: 0px minmax(0, 1fr) !important;
  }
  .w3-tutorial-reader.independent-reader {
    display: grid !important;
    grid-template-columns: 260px minmax(0, 1fr) !important;
  }
  .w3-tutorial-reader.independent-reader.contents-hidden {
    grid-template-columns: 0px minmax(0, 1fr) !important;
  }
  .lesson-shell.w3-workspace-shell #lesson-sidebar,
  .w3-tutorial-reader.independent-reader #tutorial-contents {
    display: block !important;
    transition: width 0.24s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.18s ease;
  }
  .lesson-shell.w3-workspace-shell.contents-hidden #lesson-sidebar,
  .w3-tutorial-reader.independent-reader.contents-hidden #tutorial-contents {
    display: block !important;
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    border-right: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }
  .sidebar-close-btn.tutorial-drawer-close {
    display: none !important;
  }
}

/* 3. Mobile & Tablet Responsive Slide-Out Drawer (<= 920px) */
@media (max-width: 920px) {
  .lesson-shell.w3-workspace-shell .lesson-layout.w3-layout,
  .w3-tutorial-reader.independent-reader {
    grid-template-columns: minmax(0, 1fr) !important;
    display: block !important;
  }
  .lesson-shell.w3-workspace-shell #lesson-sidebar,
  .w3-tutorial-reader.independent-reader #tutorial-contents {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: min(320px, 86vw) !important;
    max-width: 86vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    z-index: 1300 !important;
    background: #f8fafc !important;
    border-right: 1px solid #cbd5e1 !important;
    border-bottom: 0 !important;
    box-shadow: 12px 0 32px rgba(15, 23, 42, 0.28) !important;
    overflow-y: auto !important;
    padding: 12px 0 36px !important;
    transform: translateX(0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.24s ease;
  }
  .lesson-shell.w3-workspace-shell.contents-hidden #lesson-sidebar,
  .w3-tutorial-reader.independent-reader.contents-hidden #tutorial-contents {
    display: block !important;
    transform: translateX(-104%) !important;
    visibility: hidden !important;
    pointer-events: none !important;
    box-shadow: none !important;
  }
  .tutorial-drawer-backdrop,
  .course-drawer-backdrop {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(15, 23, 42, 0.45) !important;
    backdrop-filter: blur(2px) !important;
    z-index: 1290 !important;
    display: block !important;
  }
  .tutorial-drawer-backdrop[hidden],
  .course-drawer-backdrop[hidden] {
    display: none !important;
  }
  .sidebar-close-btn.tutorial-drawer-close {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: calc(100% - 24px) !important;
    margin: 4px 12px 10px !important;
    padding: 9px 12px !important;
    background: #1d2a35 !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 6px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
  }
  .sidebar-collapse-desktop-btn {
    display: none !important;
  }
}

/* 4. Sidebar Header & Collapse Controls */
.sidebar-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.sidebar-collapse-desktop-btn {
  border: 1px solid #d1d5db;
  background: #ffffff;
  color: #475569;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.sidebar-collapse-desktop-btn:hover {
  background: #04AA6D;
  border-color: #04AA6D;
  color: #ffffff;
}

/* 5. Interactive Mode Switcher & Progressive Step-by-Step Controller Bar */
.w3-bar-RightActions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.learning-mode-controls {
  display: inline-flex;
  align-items: center;
  background: #e2e8f0;
  padding: 3px;
  border-radius: 8px;
  gap: 2px;
}
.mode-toggle-btn {
  border: 0;
  background: transparent;
  color: #475569;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}
.mode-toggle-btn:hover {
  color: #0f172a;
}
.mode-toggle-btn.is-active {
  background: #ffffff;
  color: #04AA6D;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}
.concept-step-hidden {
  display: none !important;
}
.concept-step-active {
  animation: jbStepFadeIn 0.22s ease-out;
}
@keyframes jbStepFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.progressive-step-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 14px 18px;
  margin: 20px 0 24px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-left: 4px solid #04AA6D;
  border-radius: 10px;
}
.progressive-step-bar[hidden] {
  display: none !important;
}
.step-progress-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 700;
  color: #0f172a;
}
.step-mode-badge {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 5px;
  background: #04AA6D;
  color: #ffffff;
}
.step-dots {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.step-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #cbd5e1;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.step-dot:hover {
  transform: scale(1.25);
  background: #64748b;
}
.step-dot.is-active {
  background: #04AA6D;
  transform: scale(1.28);
}
.step-dot.is-done {
  background: #10b981;
}
.step-action-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* 6. Active Recall Micro-Checks, Editable Code & 3D Scene Selector */
.active-recall-Prompt {
  margin-top: 18px;
  padding: 14px 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-left: 4px solid #04AA6D;
  border-radius: 10px;
}
.recall-prompt-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: #0f172a;
  margin-bottom: 10px;
}
.recall-badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  background: #dcfce7;
  color: #166534;
  padding: 3px 8px;
  border-radius: 4px;
}
.recall-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.recall-option-btn {
  padding: 7px 13px;
  border-radius: 7px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #0f172a;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.recall-option-btn:hover {
  border-color: #04AA6D;
  background: #f0fdf4;
}
.recall-option-btn.is-correct-choice {
  background: #dcfce7;
  border-color: #16a34a;
  color: #166534;
}
.recall-option-btn.is-wrong-choice {
  background: #fef3c7;
  border-color: #d97706;
  color: #92400e;
}
.recall-feedback-msg {
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 12px;
  border-radius: 7px;
}
.recall-feedback-msg.is-correct {
  background: #dcfce7;
  color: #166534;
}
.recall-feedback-msg.is-hint {
  background: #fef3c7;
  color: #92400e;
}
.three-scene-select {
  height: 30px !important;
  min-height: 30px !important;
  padding: 2px 10px !important;
  font-size: 12px !important;
  font-weight: 600;
  border-radius: 6px !important;
  border: 1px solid #cbd5e1 !important;
  background: #ffffff !important;
  color: #0f172a !important;
  cursor: pointer;
}
.three-webgl-canvas {
  touch-action: none;
}
.three-webgl-canvas:focus-visible {
  outline: 2px solid #04AA6D;
  outline-offset: 2px;
}
code.is-editable-code {
  display: block;
  outline: 2px dashed #04AA6D;
  outline-offset: 4px;
  border-radius: 4px;
  background: rgba(4, 170, 109, 0.06);
}
.answer-option.is-selected {
  border-color: #04AA6D !important;
  background: #f0fdf4 !important;
}
fieldset.question-card.has-unanswered-error {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.12);
}
button.is-loading {
  opacity: 0.72;
  pointer-events: none;
}