/* Theme tokens and the simplified product surface. Layout stays in style.css. */
:root,[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0e1621;--surface:#152130;--surface-alt:#1b2a3b;--text:#edf3f8;--muted:#b0bfce;
  --line:#33465b;--navy:#edf3f8;--navy2:#d4e0ec;--orange:#ffb16d;--orange-dark:#ffb16d;
  --warm:#33291f;--green:#91d6ae;--white:#152130;--accent-soft:#33291f;
  --primary-bg:#ffb16d;--primary-fg:#1b1b1c;--focus:#ffc17f;
  --success-bg:#152f26;--success-line:#38684f;--error-bg:#35231f;--error-text:#ffbd9c;
  --code-bg:#0c1420;--code-fg:#e6edf5;--code-line:#8298ae;--code-active:#182e3d;
  --code-edit-bg:#33291d;--code-edit-border:#c28a55;--code-edit-fg:#ffcf95;
  --syntax-keyword:#d4b4fa;--syntax-string:#afdbad;--syntax-number:#ffd09d;--syntax-comment:#a3b4c5;
}
[data-theme="light"]{
  color-scheme:light;
  --bg:#f7f8fa;--surface:#fff;--surface-alt:#eef2f6;--text:#1b3044;--muted:#526577;
  --line:#d1dbe4;--navy:#142e46;--navy2:#203f58;--orange:#b85b12;--orange-dark:#a54b09;
  --warm:#fff2e5;--green:#216c47;--white:#fff;--accent-soft:#fff2e5;
  --primary-bg:#b85b12;--primary-fg:#fff;--focus:#a54b09;
  --success-bg:#e9f5ed;--success-line:#a9cdb7;--error-bg:#fff1e9;--error-text:#8f3e15;
  --code-bg:#f0f3f7;--code-fg:#1b3044;--code-line:#526577;--code-active:#e0ecf0;
  --code-edit-bg:#fff4e5;--code-edit-border:#a96324;--code-edit-fg:#804000;
  --syntax-keyword:#653691;--syntax-string:#216639;--syntax-number:#874214;--syntax-comment:#566a7e;
}
body{background:var(--bg);color:var(--text)}
p,.muted,small{color:var(--muted)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.sidebar,.topbar{background:var(--surface);border-color:var(--line)}
.sidebar{padding-top:20px}
.brand{gap:8px;margin-bottom:28px}
.brand img{width:48px;height:48px;border-radius:6px}
.brand>span{font-size:22px}
.nav-link{font-weight:500;border-radius:7px}
.nav-link:hover{background:var(--surface-alt)}
.nav-link.active{color:var(--orange-dark);background:var(--accent-soft)}
.nav-link small,.badge.neutral{background:var(--surface-alt);color:var(--muted)}
.profile-link{margin-top:auto;padding-top:18px}
.profile-link strong{font-size:13px;color:var(--text)}
.profile-link small{font-size:11px;color:var(--muted)}
.topbar .text-link,.breadcrumb span:first-child{color:var(--text)}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;min-width:44px;min-height:44px;padding:10px;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--text)}
.theme-toggle svg{display:block;width:20px;height:20px;flex-shrink:0}
[data-theme="dark"] .theme-moon,[data-theme="light"] .theme-sun{display:none}
.theme-toggle:hover{background:var(--surface-alt)}
main{padding-top:30px}
.hero{display:block;padding:0 0 28px}
.hero h1{font-size:34px;line-height:1.55;letter-spacing:0;margin:0 0 10px}
.hero-copy>p{max-width:680px;font-size:15px}
.hero .button-row{margin-top:20px}
.button{border-radius:7px;box-shadow:none;transition:background .15s}
.button:hover{transform:none}
.primary{background:var(--primary-bg);border-color:var(--primary-bg);color:var(--primary-fg)}
.primary:hover{background:var(--primary-bg);filter:brightness(.94)}
.ghost,.light,.dark{background:var(--surface);border:1px solid var(--line);color:var(--text)}
.ghost:hover,.light:hover,.dark:hover{background:var(--surface-alt)}
.text-link,.card-action{color:var(--orange-dark)}
.overview-grid{margin:0 0 30px}
.continue-card,.progress-card,.panel,.path-panel,.lecture-banner,.lesson-card,.feature-card,.stage-node,.topic-item,.stat-card{background:var(--surface);border-color:var(--line);border-radius:10px;box-shadow:none}
.continue-card{background:var(--surface)}
.continue-card h2{font-size:19px}
.progress-track{background:var(--surface-alt)}
.section-heading h2{font-size:21px}
.section-heading .eyebrow{display:none}
.feature-card{padding:22px}
.feature-card:hover,.stage-node:hover{transform:none;border-color:var(--orange-dark)}
.feature-card h3{margin:0 0 9px}
.feature-card p{font-size:13px}
.card-action{font-size:12px;margin-top:20px}
.badge.orange,.stage-bubble,.completion-medal,.teaching-number{background:var(--accent-soft);color:var(--orange-dark)}
.badge.green,.success-circle{background:var(--success-bg);color:var(--green)}
.featured-lecture{background:var(--surface);border-color:var(--line);border-radius:10px;padding:24px;margin-top:24px}
.featured-lecture h2 span{color:var(--muted)}
.featured-lecture .tags{display:none}
.signin-banner{border-top:1px solid var(--line);padding-top:20px;gap:12px}
.signin-banner p{font-size:12px}
.signin-banner .google-g{display:none}
.footer{border-color:var(--line);color:var(--muted);gap:18px}
.footer p{font-size:11px}
.footer-brand{color:var(--text)}
.footer>span:last-child{display:none}
.learning-layout,.lesson-layout{grid-template-columns:minmax(0,960px);justify-content:center}
.study-aside{display:none}
.page-heading h1{font-size:32px;letter-spacing:0}
.path-header{background:var(--surface);border-color:var(--line)}
.course-icon{background:var(--surface-alt);color:var(--text);border-radius:8px}
.path-number{background:var(--surface-alt);color:var(--muted);border-color:var(--surface);outline-color:var(--line)}
.lecture-node:after{background:var(--line)!important}
.available .path-number{background:var(--accent-soft);color:var(--orange-dark);outline-color:var(--line)}
.node-copy,.lecture-node:last-child .node-copy{border-color:var(--line)}
.node-arrow,.stage-node small,.node-copy small{color:var(--muted)}
.lecture-node.completed .path-number,.stage-node.completed .stage-bubble{background:var(--success-bg);color:var(--green);border-color:var(--success-line);outline-color:var(--success-line)}
.stage-node:after{border-color:var(--line)}
.mastery-card{background:var(--surface);border-color:var(--line);border-radius:10px}
.mastery-card>.feature-icon{display:none}
.tags span{border-color:var(--line);color:var(--muted)}
.lecture-banner h1{font-size:32px}
.lesson-tabs{background:var(--surface);border-color:var(--line)}
.lesson-tabs>button{color:var(--muted)}
.lesson-tabs>button>span{background:var(--surface-alt);color:var(--muted)}
.lesson-tabs>button[aria-selected=true]{color:var(--orange-dark)}
.lesson-tabs>button[aria-selected=true]>span{background:var(--primary-bg);color:var(--primary-fg)}
.lesson-pane{animation:none}
.lesson-pane>p,.teaching-section p,.code-walkthrough,.structure-panel>p{color:var(--muted)}
.teaching-section{border-color:var(--line)}
.teaching-section h3{color:var(--text)}
.inline-term{background:var(--surface-alt);color:var(--text)}
.lesson-bottom{border-color:var(--line)}
.hint-box,.notice{background:var(--accent-soft);border-color:var(--line);border-inline-start-color:var(--orange-dark);color:var(--text)}
.hint-box p,.hint-box strong{color:var(--text)}
.code-label{background:var(--surface-alt);color:var(--muted)}
.code-block,.code-block .hljs{background:var(--code-bg);color:var(--code-fg)}
.hljs-keyword,.hljs-literal,.hljs-type{color:var(--syntax-keyword)}
.hljs-string{color:var(--syntax-string)}
.hljs-number{color:var(--syntax-number)}
.hljs-comment{color:var(--syntax-comment)}
.answer-option,.lecture-choice{border-color:var(--line);background:var(--surface)}
.answer-option:hover{background:var(--surface-alt)}
.answer-option:has(input:checked),.lecture-choice:has(input:checked){background:var(--accent-soft);border-color:var(--orange-dark)}
.option-letter{background:var(--surface-alt);color:var(--muted)}
.answer-option:has(input:checked) .option-letter{background:var(--primary-bg);color:var(--primary-fg)}
.lecture-choice.disabled{background:var(--surface-alt);color:var(--muted)}
input:not([type=radio]):not([type=checkbox]),select,textarea{background:var(--surface);border-color:var(--line);color:var(--text)}
.feedback.success{background:var(--success-bg);border-color:var(--success-line);color:var(--green)}
.feedback.wrong,.danger{background:var(--error-bg);border-color:var(--line);color:var(--error-text)}
.feedback p,.feedback small{color:inherit}
.error-text{color:var(--error-text)}
.completion,.button,.feature-card,.stage-node{animation:none}
.completion-medal{display:none}
.completion{padding-top:22px}
.completion h2{font-size:21px}
.simulation-note{color:var(--muted)!important;border-color:var(--line);margin-top:16px}
.concept-diagram,.flow-figure{background:var(--surface-alt);border-color:var(--line);border-radius:9px}
.diagram-box,.diagram-branches>div,.flow-family{background:var(--surface);border-color:var(--line);color:var(--text)}
.flow-figure-heading h3,.flow-family h4,.flow-family p,.flow-term,.flow-symbol-key{color:var(--text)}
.flow-keywords code{background:var(--surface-alt);color:var(--text)}
.flow-tree-root{background:var(--surface);color:var(--text);border:1px solid var(--line)}
.flow-tree-root>span{color:var(--muted)}
.flow-tree-stem,.flow-tree-children:before,.flow-family:before{background:var(--muted)}
.structure-tabs button{background:var(--surface);border-color:var(--line);color:var(--muted)}
.structure-tabs button[aria-selected=true]{background:var(--accent-soft);color:var(--orange-dark);border-color:var(--orange-dark)}
.chart-label,.chart-boolean{fill:var(--text)}
.concept-diagram svg rect{fill:var(--surface);stroke:var(--muted)}
.concept-diagram svg text{fill:var(--text)}
.concept-diagram svg path[fill="#fff2e5"],.concept-diagram svg path[fill="#fff0df"]{fill:var(--accent-soft)}
.truth-table,.data-table{color:var(--text)}
.truth-table th,.data-table th{background:var(--surface-alt);color:var(--text)}
.truth-table td,.truth-table th,.data-table td,.data-table th{border-color:var(--line)}
.truth-table tr:nth-child(even){background:var(--surface-alt)}
.truth-table tr.selected{outline-color:var(--orange-dark)}
.truth-details{margin-top:20px;border-top:1px solid var(--line);padding-top:14px}
.truth-details summary{min-height:44px;cursor:pointer;font-size:13px;color:var(--muted)}
.trace-step{background:var(--surface);border-color:var(--line);color:var(--text)}
.trace-step.executed{background:var(--accent-soft);color:var(--orange-dark);border-color:var(--orange-dark)}
.trace-step.skipped{background:var(--surface-alt);color:var(--muted)}
.trace-step.final{background:var(--success-bg);border-color:var(--success-line);color:var(--green)}
.google-g,.avatar,.empty-icon{background:var(--surface-alt);border-color:var(--line);color:var(--text)}
.assessment-facts,.history-row,.review-row{border-color:var(--line)}
.question-dots button{background:var(--surface);border-color:var(--line);color:var(--muted)}
.question-dots .answered{background:var(--accent-soft);border-color:var(--orange-dark);color:var(--text)}
.review-answer>span.correct{background:var(--success-bg);border-color:var(--success-line);color:var(--green)}
.review-verdict{display:block;font-size:12px;margin:10px 0}.review-verdict.correct{color:var(--green)}.review-verdict.incorrect{color:var(--error-text)}
.question-code{display:block;font:14px/1.8 Consolas,'Courier New',monospace;white-space:pre;overflow:auto;max-width:100%;background:var(--code-bg);color:var(--code-text,var(--text));padding:16px;border:1px solid var(--line);border-radius:8px;margin:16px 0;text-align:left;direction:ltr;font-weight:400}
.question-lecture{display:table;font:600 12px/1.6 Consolas,'Courier New',monospace;padding:5px 10px;border:1px solid var(--line);border-radius:6px;background:var(--surface-alt);color:var(--muted);margin:0 0 16px}
.question-code-label{font:12px/1.6 Consolas,'Courier New',monospace;color:var(--muted);margin-top:18px}.question-code-label+.question-code{margin-top:6px}
.test-navigation{direction:ltr}.test-navigation .button{direction:rtl}
.question-dots [aria-current=true]{background:var(--primary-bg);border-color:var(--primary-bg);color:var(--primary-fg)}
.review-answer>span{background:var(--surface-alt);color:var(--text)}
.review-answer>span.incorrect{background:var(--error-bg);color:var(--error-text)}
.admin-tabs,.admin-row,.admin-form{border-color:var(--line)}
.admin-row>button:first-child{background:var(--surface);color:var(--text)}
.order-button,.admin-form .image-uploader{background:var(--surface-alt);color:var(--text);border-color:var(--line)}
.admin-row small,.admin-form .input-note{color:var(--muted)}
.toast{background:var(--surface-alt);color:var(--text);border:1px solid var(--line);box-shadow:none}
.code-edit-help{font-size:13px;margin:0 0 13px;color:var(--muted)}
.code-playground{min-width:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--code-bg)}
.playground-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 14px;border-bottom:1px solid var(--line);background:var(--surface)}
.playground-toolbar>span{font:12px Consolas,monospace;color:var(--muted)}
.reset-code{background:transparent;color:var(--muted);border:0;padding:7px 3px;min-height:36px;font-size:12px}
.reset-code:hover{color:var(--text)}
.playground-code{overflow:auto;max-height:570px;padding:14px 0;background:var(--code-bg);color:var(--code-fg);text-align:left;tab-size:4}
.playground-line{display:flex;align-items:baseline;min-width:max-content;min-height:32px;line-height:32px;border-left:3px solid transparent;padding-inline-end:20px}
.playground-line>code{white-space:pre;font:13px/32px Consolas,'Courier New',monospace;color:var(--code-fg)}
.line-number{flex:0 0 42px;padding-right:12px;text-align:right;color:var(--code-line);font:11px/32px Consolas,monospace;user-select:none}
.executed-line{background:var(--code-active);border-left-color:var(--orange-dark)}
.playground-code input.code-field,.playground-code select.code-field{display:inline-block;vertical-align:baseline;width:70px;height:32px;min-height:32px;margin:0 2px;padding:2px 5px;border:1px solid var(--code-edit-border);border-radius:4px;background:var(--code-edit-bg);color:var(--code-edit-fg);font:13px/24px Consolas,monospace;text-align:left}
.playground-code input.field-text{width:118px}
.playground-code input.field-numbers{width:210px}
.variant-control{display:flex;gap:10px;align-items:center;font-size:12px;color:var(--text)}
.variant-control select{width:auto;min-width:130px;min-height:42px;padding:6px 10px}
.output-code{max-height:280px;overflow:auto}
.iteration-details{margin-top:16px;border-top:1px solid var(--line);padding-top:12px}
.iteration-details summary{cursor:pointer;font-size:13px;min-height:44px;color:var(--muted)}
.iteration-scroll{max-height:300px;overflow:auto}
.loop-warning{font-size:12px;line-height:1.9;margin:14px 0 0}
.loop-order{display:flex;flex-wrap:wrap;gap:9px;align-items:center;justify-content:center}
.loop-order .diagram-box{font-size:12px;padding:11px}
.loop-order-arrow{color:var(--orange-dark)}
.loop-concept-label{font-size:13px;margin-bottom:15px;color:var(--text)}
.playground-code select.field-select{width:auto;min-width:62px;max-width:95px}
.playground-code input.code-field:focus,.playground-code select.code-field:focus{outline:2px solid var(--focus);outline-offset:1px}
.syntax-keyword{color:var(--syntax-keyword)}
.syntax-string{color:var(--syntax-string)}
.syntax-number{color:var(--syntax-number)}
.syntax-comment{color:var(--syntax-comment)}
.playground-actions{display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap;margin:14px 0 0}
.playground-actions .button{font-size:12px;min-height:42px;padding:9px 16px}
.execution-key{font-size:11px;color:var(--muted)}
.playground-code .field-decimal{width:90px}
.source-file-tabs{display:flex;gap:6px;overflow-x:auto;border-bottom:1px solid var(--line);padding:5px 10px;background:var(--surface)}
.source-file-tabs[hidden]{display:none}
.source-file-tabs button{flex:none;min-height:44px;padding:8px 12px;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--muted);font:13px Consolas,monospace;cursor:pointer}
.source-file-tabs button[aria-selected=true]{border-bottom-color:var(--orange);color:var(--text)}
.source-file-note{font-size:12px!important;color:var(--muted)!important;padding:0 15px}
.object-state{margin-top:20px}.object-state h3{font-size:14px}.object-state table{font-size:12px}
.traffic-panel{margin-bottom:24px}.traffic-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:18px}
.community-contact{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:18px 20px;margin:0 0 24px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.community-contact>p{margin:0;color:var(--text);font-size:14px}.community-buttons{display:flex;flex-wrap:wrap;gap:10px}.community-buttons .button{min-height:44px;font-size:13px;padding:10px 15px;gap:8px}.community-buttons svg{width:19px;height:19px;flex:none}.community-footer{margin:0 42px;max-width:1396px}
@media(max-width:650px){.community-contact{padding:16px;gap:14px}.community-buttons{width:100%}.community-buttons .button{flex:1;white-space:nowrap;font-size:12px;padding:10px}.community-footer{margin:0 18px}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.traffic-heading h2{font-size:20px;margin:0 0 6px}.traffic-heading p{margin:0}.traffic-controls{display:flex;align-items:end;gap:10px}.traffic-controls label{font-size:12px;display:grid;gap:5px}.traffic-controls select{min-height:44px;width:160px}.traffic-controls .button{min-height:44px}
.traffic-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.traffic-cards .stat-card{background:var(--surface);min-width:0}.traffic-cards small{display:block;color:var(--muted);font-size:11px;line-height:1.9}.traffic-cards strong{display:block}.traffic-panel>p{margin-top:14px;margin-bottom:0}
@media(max-width:650px){.traffic-cards{grid-template-columns:1fr}.traffic-heading{gap:14px}.traffic-controls{width:100%}.traffic-controls label{flex:1}.traffic-controls select{width:100%}.traffic-panel{padding:18px 14px}}
.example-files{min-width:0}.example-files .code-block{margin-top:0;border-radius:0 0 8px 8px}
.code-toggle{display:flex;align-items:center;gap:9px;font-size:12px;min-height:44px;color:var(--text)}
.activity-output{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:18px;margin-top:18px}
.console-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.console-heading strong{font-size:14px;margin:0;color:var(--text)}
.console-heading>span{font:11px Consolas,monospace;color:var(--muted)}
.output-code{font:14px/1.9 Consolas,monospace;color:var(--code-fg);text-align:left;margin:13px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
.execution-explanation{font-size:12px!important;margin-top:15px;padding-top:13px;border-top:1px solid var(--line);color:var(--muted)!important}
@media(max-width:900px){.sidebar{padding:9px 14px 0}.brand{margin-bottom:7px}.brand img{width:40px;height:40px}.brand>span{font-size:20px}.top-actions{gap:14px}.theme-toggle{min-height:44px}.hero h1{font-size:31px}}
@media(max-width:650px){main{padding-top:23px}.hero{padding-bottom:24px}.hero h1{font-size:29px}.hero-copy>p{font-size:14px}.hero .button-row{margin-top:18px}.overview-grid{margin:0 0 28px}.feature-card{padding:19px 15px}.feature-card h3{font-size:17px}.feature-card p{font-size:12px}.topbar{height:60px}.top-actions{gap:12px}.theme-toggle{min-width:44px}.breadcrumb{font-size:10px}.brand{height:42px}.brand img{height:38px;width:38px}.page-heading h1{font-size:28px}.playground-line>code{font-size:12px}.line-number{flex-basis:32px;font-size:10px;padding-right:8px}.playground-code input.code-field,.playground-code select.code-field{font-size:12px}.playground-code{max-height:480px}.playground-actions{gap:10px}.execution-key{font-size:10px}.code-edit-help{font-size:12px}.output-code{font-size:13px}.footer p{font-size:10px}.footer{align-items:flex-start}.flow-figure-heading h3{color:var(--text)}}