/* UX-001: readable contrast, keyboard focus, responsive text and scroll regions. */
:root{--muted:#53634e;--a11y-muted:#4d6045;--a11y-focus:#27653b}
.skip-link{position:fixed;left:16px;top:-100px;z-index:300;padding:14px 20px;background:#fff;color:#24472f;border:2px solid #27653b;border-radius:5px;font-size:14px}
.skip-link:focus{top:12px}
:is(button,a,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid var(--a11y-focus);outline-offset:4px}
#content h1:focus-visible,#content [role="status"]:focus-visible{outline:2px solid var(--a11y-focus);outline-offset:6px;border-radius:3px}
#content :is(p,small,caption,dd,legend,label,th,td,summary,.eyebrow,.text-link,.course-tag,.course-meta,.course-chapter-progress,.chapter-reading-meta,.chapter-kicker,.chapter-link,.chapter-link small,.chapter-group>h3,.outline-header>p,.term-letter,.duration-note,.layer-badge,.small-badge,.chapter-level,.chapter-scope,.prerequisite-links>a,.prerequisite-links>span,.execution-label,.execution-banner p,.practice-field,.practice-field select,.practice-steps strong,.practice-steps small,.practice-progress,.comparison-cards span,.comparison-cards p,.comparison-bars>div>span,.comparison-bars strong,.practice-rejections li,.practice-rejections li span,.comparison-note,.practice-schema>span,.result-heading,.editor-footer,.config-row,.config-row strong,.connection-status,.step-status,.pipeline-bottom,.dataset-details,.dataset-card>code,.learning-path small,.tip-label,.hero-note){color:var(--a11y-muted)}
#content p{font-size:13px;line-height:1.85}
#content :is(.reading-section p,.lesson-text){font-size:15px;line-height:1.9}
#content :is(small,caption,.eyebrow,.course-meta,.course-tag,.course-chapter-progress,.chapter-reading-meta,.chapter-kicker,.chapter-group>h3,.small-badge,.chapter-level,.chapter-scope,.duration-note,.tip-label){font-size:11px}
#content :is(.chapter-link,.prerequisite-links>a,.text-link,.chapter-pagination strong,.chapter-pagination span){font-size:12px}
#content :is(.practice-field,.practice-field select,.quiz-options label,.chapter-checkpoint legend){font-size:14px}
#content :is(.practice-json,.chapter-code pre){color:#e0edd4;font-size:13px;line-height:1.9}
#content .hero :is(p,.hero-note,.hero-label){color:#e0ead7}
#content .hero .hero-note{font-size:11px}
#content .chapter-code button{color:#e0edd4;font-size:11px}
#content .hero-corner{color:#dae6d0}
#content .null{color:#815026}
#content .error-message,#content .error-message :is(p,strong,li,span){color:#79431f}
#content .success-message,#content .success-message :is(p,strong,li,span){color:#365c25}
#content :is(.practice-save-note,.logs,.logs p){color:#4d6045!important;font-size:11px!important}
#content .query-examples button{font-size:11px;color:#415e30;min-height:32px}
#content .query-examples>span{color:#4d6045;font-size:11px}
#content .editor-language{color:#d3e4c9}
#content .editor-gutter{color:#b5c9b2}
#content .button{font-size:12px;min-height:40px}
#content .button.primary{color:#fff}
#content .button.light{color:#34523a}
#content .button.secondary{color:#415c33}
#content .table-scroll,#content .lesson-table{max-width:100%;overscroll-behavior-x:contain;scrollbar-width:auto}
#content pre{max-width:100%;overscroll-behavior-x:contain}
#content .editor-wrap textarea{font-size:14px;line-height:1.85;min-width:0}
#content .editor-footer{font-size:11px;line-height:1.7;flex-wrap:wrap;gap:8px}
.breadcrumb>span,.search-button,.search-button kbd{color:#52614d}
.simulation-badge{color:#456136;font-size:11px}
.breadcrumb,.search-button{font-size:12px}
footer,footer span{color:#58674f;font-size:11px}
.sidebar :is(.nav-group>p,.workspace-select small,.safe-card p,.sidebar-credit){color:#bccdbf}
.sidebar .nav-group>p{font-size:10px;letter-spacing:1.3px}
.sidebar .nav-link{font-size:13px;min-height:43px}
.sidebar :is(.help-link,.sidebar-credit,.safe-card p,.safe-card>span:last-child,.workspace-select small){font-size:11px}
.sidebar :is(button,a):focus-visible{outline-color:#e4f1d6}
.sidebar .help-link{white-space:normal;line-height:1.7}
.sidebar .workspace-select span{font-size:12px}
.sidebar .safe-card strong{font-size:13px}
.sidebar .safe-card p br{display:none}
.chapter-link{min-height:44px}
.chapter-link-marker{font-size:10px}
.chapter-vocabulary dd{font-size:12px}
.chapter-reading-meta{line-height:1.8}
.chapter-kicker{flex-wrap:wrap}
.modal h2{line-height:1.4}
.modal :is(.lesson-text,.explain-list p,.muted,.notification-item p){color:#4d6045;font-size:13px}
.modal :is(.resource-links a,.search-results button,.search-results small){color:#415b33;font-size:12px}
.modal .glossary-search input{font-size:14px;color:#314b27}
.navigation-open{overflow:hidden}
@media(min-width:761px){#content .course-meta{flex-wrap:wrap}.sidebar .brand{margin-bottom:25px}}
@media(max-width:760px){
  .sidebar.open{width:min(285px,calc(100vw - 25px));padding-top:44px;box-shadow:20px 0 0 100vmax #17392f77}
  .sidebar-close{height:36px;width:36px;top:5px;right:8px}
  .sidebar .brand{margin-bottom:25px}.sidebar .nav-link{min-height:46px}
  .mobile-menu,.search-button,.avatar{min-width:36px;min-height:36px}
  .breadcrumb{min-width:0;gap:8px;flex:1}.breadcrumb strong{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .topbar-actions{gap:8px;flex-shrink:0}.topbar{gap:9px}
  #content .practice-steps strong{font-size:10px;line-height:1.5}
  #content .practice-steps>button{padding:12px 5px}
}
@media(max-width:540px){
  .topbar-actions>.simulation-badge{display:none}
  .topbar{padding:0 12px}.breadcrumb{font-size:12px}
  #content :is(.button,.outline-toggle){min-height:44px;font-size:12px}
  #content :is(input,select,textarea){font-size:16px}
  #content .editor-wrap textarea{font-size:16px;line-height:1.7}
  #content :is(.course-meta,.course-tag,.course-chapter-progress,.eyebrow,.small-badge,.tip-label){font-size:10px}
  #content .course-card{grid-template-columns:85px minmax(0,1fr)}
  #content .course-body{padding:17px 13px}
  #content .course-body h3{font-size:16px;line-height:1.45}
  #content .course-meta{flex-wrap:wrap;gap:9px;line-height:1.7}
  #content .section-heading{flex-wrap:wrap}
  #content .section-heading>.text-link{min-height:32px;white-space:normal}
  #content .chapter-heading h1{font-size:28px;overflow-wrap:anywhere}
  #content :is(.chapter-kicker,.chapter-reading-meta){font-size:11px}
  #content .chapter-pagination{gap:15px}.chapter-pagination a{min-width:0;overflow-wrap:anywhere}
  #content .notebook-toolbar{flex-wrap:wrap}
  #content .notebook-toolbar .button{flex:1}
  #content :is(.query-examples button,.filter-tabs button){min-height:36px;font-size:11px}
  #content .result-heading{flex-wrap:wrap;line-height:1.8;font-size:12px}
  #content .result-heading .text-link{margin-left:0}
  #content .practice-actions>div{flex-wrap:wrap}
  #content .execution-label{font-size:11px}
  #content .stat-card p{font-size:11px;white-space:normal}
  #content .stat-card{min-height:135px;flex-wrap:wrap}
  footer{flex-wrap:wrap;font-size:11px;line-height:1.8}
}
@media(forced-colors:active){:focus-visible{outline:3px solid Highlight!important}.button,.chapter-link,.quiz-options label{border:1px solid ButtonText!important}}