/* GENERATED by scripts/generate_dark_theme.py - do not edit by hand.
   Change the light stylesheets (or the tokens in the generator) and re-run it. */

@media screen {
  html[data-theme="dark"] {
    color-scheme: dark;
    --bg: #13191c;
    --surface: #1c2428;
    --text: #e6ecef;
    --muted: #a9b5bd;
    --border: #38454b;
    --accent: #236c68;
    --accent-dark: #8fd3cc;
    --accent-hover: #1b5652;
    --accent-soft: #1d3533;
    --warning-soft: #3a3220;
    --task-soft: #222c38;
    --example-soft: #302a22;
    --error: #f08a8a;
    --shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  }

  /* projects/algoritmizace_programovani/static/style.css */
  :where(html[data-theme="dark"]) body {
    background: var(--bg);
    color: var(--text);
  }
  :where(html[data-theme="dark"]) a {
    color: var(--accent-dark);
  }
  :where(html[data-theme="dark"]) a:hover, :where(html[data-theme="dark"]) a:focus {
    color: #ccf2f0;
  }
  :where(html[data-theme="dark"]) .eyebrow {
    color: var(--accent-dark);
  }
  :where(html[data-theme="dark"]) .lead {
    color: var(--muted);
  }
  :where(html[data-theme="dark"]) .notice-box, :where(html[data-theme="dark"]) .lesson-card, :where(html[data-theme="dark"]) .task-box, :where(html[data-theme="dark"]) .solution-box, :where(html[data-theme="dark"]) .plan-item {
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow);
  }
  :where(html[data-theme="dark"]) .explanation-box {
    border-left: 6px solid var(--accent);
    background: var(--accent-soft);
  }
  :where(html[data-theme="dark"]) .example-box {
    border-left: 6px solid #dac2a8;
    background: var(--example-soft);
  }
  :where(html[data-theme="dark"]) .warmup-box {
    border-left: 6px solid #f4e09e;
    background: var(--warning-soft);
  }
  :where(html[data-theme="dark"]) .teacher-note {
    border-left: 6px solid #a8c2db;
    background: #222d3c;
  }
  :where(html[data-theme="dark"]) .deep-dive {
    border: 1px solid #475d5c;
    border-left: 6px solid #b4e1df;
    background: #222d3c;
    box-shadow: var(--shadow);
  }
  :where(html[data-theme="dark"]) .deep-dive h2 {
    color: var(--accent-dark);
  }
  :where(html[data-theme="dark"]) .deep-dive-kicker {
    color: var(--accent-dark);
  }
  :where(html[data-theme="dark"]) .advanced-links a {
    border: 1px solid var(--border);
    background: var(--surface);
  }
  :where(html[data-theme="dark"]) .advanced-section {
    box-shadow: none;
  }
  :where(html[data-theme="dark"]) .box-kicker, :where(html[data-theme="dark"]) .task-number, :where(html[data-theme="dark"]) .status-label {
    color: var(--muted);
  }
  :where(html[data-theme="dark"]) .definition {
    color: var(--accent-dark);
  }
  :where(html[data-theme="dark"]) .property-item {
    box-shadow: none;
  }
  :where(html[data-theme="dark"]) .code-title {
    color: var(--muted);
  }
  :where(html[data-theme="dark"]) .pseudo-code {
    border: 1px solid #c8d0d6;
    background: #18242f;
    color: #f4f7f9;
  }
  :where(html[data-theme="dark"]) .pseudo-code code {
    background: transparent;
    color: inherit;
  }
  :where(html[data-theme="dark"]) .flow-step {
    border: 2px solid var(--accent);
    background: var(--surface);
  }
  :where(html[data-theme="dark"]) .flow-step:not(:last-child)::after {
    color: var(--accent-dark);
  }
  :where(html[data-theme="dark"]) .course-track {
    border: 1px solid var(--border);
    background: rgba(30, 40, 54, 0.72);
  }
  :where(html[data-theme="dark"]) .algorithm-track {
    border-top: 5px solid var(--accent);
  }
  :where(html[data-theme="dark"]) .python-track {
    border-top: 5px solid #dac2a8;
  }
  :where(html[data-theme="dark"]) .third-year-track {
    border-top: 5px solid #a8c2db;
  }
  :where(html[data-theme="dark"]) .third-year-card .lesson-card-number {
    background: #3f6d9a;
  }
  :where(html[data-theme="dark"]) .course-track-summary::after {
    border-right: 3px solid var(--accent-dark);
    border-bottom: 3px solid var(--accent-dark);
  }
  :where(html[data-theme="dark"]) .course-track-summary:hover h3 {
    color: var(--accent-dark);
  }
  :where(html[data-theme="dark"]) .course-track-summary:focus-visible {
    outline: 3px solid var(--accent);
  }
  :where(html[data-theme="dark"]) .course-track-count {
    color: var(--muted);
  }
  :where(html[data-theme="dark"]) .programming-world-feature {
    border: 1px solid var(--border);
    border-left: 6px solid var(--accent);
    background: var(--accent-soft);
    box-shadow: var(--shadow);
  }
  :where(html[data-theme="dark"]) .programming-world-feature-badge {
    background: var(--surface);
    color: var(--accent-dark);
  }
  :where(html[data-theme="dark"]) .programming-world-feature p {
    color: var(--muted);
  }
  :where(html[data-theme="dark"]) .track-kicker {
    color: var(--muted);
  }
  :where(html[data-theme="dark"]) .lesson-card-number {
    background: var(--accent);
    color: #ffffff;
  }
  :where(html[data-theme="dark"]) .lesson-card h3 a {
    color: var(--text);
  }
  :where(html[data-theme="dark"]) .lesson-card h3 a:hover, :where(html[data-theme="dark"]) .lesson-card h3 a:focus {
    color: var(--accent-dark);
  }
  :where(html[data-theme="dark"]) .lesson-card p {
    color: var(--muted);
  }
  :where(html[data-theme="dark"]) .status-label {
    border: 1px solid var(--border);
    background: rgba(29, 39, 52, 0.65);
  }
  :where(html[data-theme="dark"]) .breadcrumb {
    color: var(--muted);
  }
  :where(html[data-theme="dark"]) .difficulty-tag {
    border: 1px solid var(--border);
    background: #1d2734;
    color: var(--muted);
  }
  :where(html[data-theme="dark"]) .difficulty-basic {
    border-color: #476e54;
    background: #222d3d;
    color: #c3e5cf;
  }
  :where(html[data-theme="dark"]) .difficulty-medium {
    border-color: #3e4f6b;
    background: #222d3c;
    color: #c2d1df;
  }
  :where(html[data-theme="dark"]) .difficulty-challenge {
    border-color: #6b4242;
    background: #222d3c;
    color: #e0b5b5;
  }
  :where(html[data-theme="dark"]) .task-box {
    background: var(--task-soft);
    border-left: 6px solid #b9c3ce;
  }
  :where(html[data-theme="dark"]) .bonus-task {
    border-left-color: #c0accd;
    background: #222d3c;
  }
  :where(html[data-theme="dark"]) .hint, :where(html[data-theme="dark"]) .inline-note {
    border-top: 1px solid rgba(29, 39, 48, 0.16);
    color: var(--muted);
  }
  :where(html[data-theme="dark"]) .solutions-section {
    border-top: 2px solid var(--border);
  }
  :where(html[data-theme="dark"]) .primary-button, :where(html[data-theme="dark"]) .secondary-button {
    border: 0;
  }
  :where(html[data-theme="dark"]) .primary-button {
    background: var(--accent);
    color: #ffffff;
  }
  :where(html[data-theme="dark"]) .primary-button:hover, :where(html[data-theme="dark"]) .primary-button:focus, :where(html[data-theme="dark"]) .secondary-button:hover, :where(html[data-theme="dark"]) .secondary-button:focus {
    background: var(--accent-hover);
    color: #ffffff;
  }
  :where(html[data-theme="dark"]) .secondary-button {
    background: #31485d;
    color: #ffffff;
  }
  :where(html[data-theme="dark"]) .diagnostic-card, :where(html[data-theme="dark"]) .hint-card {
    box-shadow: none;
  }
  :where(html[data-theme="dark"]) .diagnostic-card {
    background: var(--surface);
  }
  :where(html[data-theme="dark"]) .diagnostic-card summary, :where(html[data-theme="dark"]) .hint-card summary {
    color: var(--accent-dark);
  }
  :where(html[data-theme="dark"]) .hint-card {
    border-left: 6px solid #f4e09e;
    background: var(--warning-soft);
  }
  :where(html[data-theme="dark"]) .answer-field textarea, :where(html[data-theme="dark"]) .answer-field input[type="text"], :where(html[data-theme="dark"]) .match-list select, :where(html[data-theme="dark"]) .ordering-list select {
    border: 1px solid #4b5762;
    background: #1d2734;
    color: var(--text);
  }
  :where(html[data-theme="dark"]) .field-prompt {
    color: var(--muted);
  }
  :where(html[data-theme="dark"]) .interactive-intro {
    border-left: 6px solid var(--accent);
  }
  :where(html[data-theme="dark"]) .choice-row .secondary-button.selected {
    outline: 3px solid rgba(35, 108, 104, 0.24);
    background: var(--accent-hover);
    color: #ffffff;
  }
  :where(html[data-theme="dark"]) .inline-feedback, :where(html[data-theme="dark"]) .local-save-status, :where(html[data-theme="dark"]) .submit-message {
    color: var(--muted);
  }
  :where(html[data-theme="dark"]) .inline-feedback.is-correct, :where(html[data-theme="dark"]) .match-list select.is-correct, :where(html[data-theme="dark"]) .ordering-list select.is-correct, :where(html[data-theme="dark"]) .submit-message.success {
    color: #b8ecd3;
  }
  :where(html[data-theme="dark"]) .inline-feedback.is-wrong, :where(html[data-theme="dark"]) .match-list select.is-wrong, :where(html[data-theme="dark"]) .ordering-list select.is-wrong, :where(html[data-theme="dark"]) .submit-message.error {
    color: var(--error);
  }
  :where(html[data-theme="dark"]) .submit-message.pending {
    color: var(--accent-dark);
  }
  :where(html[data-theme="dark"]) .submit-summary, :where(html[data-theme="dark"]) .submit-actions {
    border: 1px solid var(--border);
    background: var(--surface);
  }
  :where(html[data-theme="dark"]) .completion-list li {
    border-top: 1px solid rgba(29, 39, 48, 0.12);
  }
  :where(html[data-theme="dark"]) .completion-list li:first-child {
    border-top: 0;
  }
  :where(html[data-theme="dark"]) .completion-list strong.done {
    color: #b8ecd3;
  }
  :where(html[data-theme="dark"]) .completion-list strong.missing {
    color: var(--error);
  }
  :where(html[data-theme="dark"]) .completion-list small {
    color: var(--muted);
  }
  :where(html[data-theme="dark"]) .discussion-card, :where(html[data-theme="dark"]) .role-chip, :where(html[data-theme="dark"]) .vote-options span, :where(html[data-theme="dark"]) .it-map-branches span {
    border: 1px solid var(--border);
    background: rgba(29, 39, 52, 0.68);
  }
  :where(html[data-theme="dark"]) .discussion-note {
    border: 1px solid var(--border);
    background: rgba(30, 40, 54, 0.72);
  }
  :where(html[data-theme="dark"]) .discussion-note p {
    color: var(--muted);
  }
  :where(html[data-theme="dark"]) .discussion-note div {
    border: 2px dashed var(--border);
    background: rgba(30, 40, 54, 0.55);
    outline: 0;
  }
  :where(html[data-theme="dark"]) .discussion-note div:empty::before {
    color: var(--muted);
  }
  :where(html[data-theme="dark"]) .discussion-note div:focus {
    border-color: var(--accent);
    background: var(--surface);
    box-shadow: 0 0 0 3px rgba(35, 108, 104, 0.16);
  }
  :where(html[data-theme="dark"]) .role-chip {
    color: var(--text);
  }
  :where(html[data-theme="dark"]) .role-chip:hover, :where(html[data-theme="dark"]) .role-chip:focus, :where(html[data-theme="dark"]) .role-chip.is-selected {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent-dark);
  }
  :where(html[data-theme="dark"]) .it-map-root {
    background: var(--accent);
    color: #ffffff;
  }
  :where(html[data-theme="dark"]) .vote-card {
    background: var(--surface);
  }
  :where(html[data-theme="dark"]) .discussion-question-list article {
    border-top: 1px solid rgba(29, 39, 48, 0.16);
  }
  :where(html[data-theme="dark"]) .discussion-question-list article:first-child {
    border-top: 0;
  }
  :where(html[data-theme="dark"]) .lesson-footer-nav {
    border-top: 1px solid var(--border);
  }
  :where(html[data-theme="dark"]) .password-form {
    border: 1px solid var(--border);
    background: var(--surface);
  }
  :where(html[data-theme="dark"]) .form-row input {
    border: 1px solid #4b5762;
    background: #1d2734;
    color: var(--text);
  }
  :where(html[data-theme="dark"]) .form-error {
    color: var(--error);
  }
  :where(html[data-theme="dark"]) .solution-box {
    border-left: 6px solid #b3e2c8;
    background: #222d3d;
  }
  :where(html[data-theme="dark"]) .solution-part + .solution-part {
    border-top: 1px solid rgba(29, 39, 48, 0.14);
  }
  :where(html[data-theme="dark"]) .checklist-list span {
    border: 2px solid var(--accent);
    background: rgba(29, 39, 52, 0.65);
  }
  :where(html[data-theme="dark"]) .plan-topic {
    color: var(--accent-dark);
  }
  :where(html[data-theme="dark"]) .method-block + .method-block {
    border-top: 1px solid rgba(29, 39, 48, 0.16);
  }
  :where(html[data-theme="dark"]) .table-wrap {
    border: 1px solid var(--border);
    background: var(--surface);
  }
  :where(html[data-theme="dark"]) th, :where(html[data-theme="dark"]) td {
    border-bottom: 1px solid var(--border);
  }
  :where(html[data-theme="dark"]) th {
    background: #483d28;
  }
  :where(html[data-theme="dark"]) tr:last-child td {
    border-bottom: 0;
  }
  :where(html[data-theme="dark"]) .site-footer {
    border-top: 1px solid var(--border);
    color: var(--muted);
  }
  :where(html[data-theme="dark"]) code {
    background: #453b27;
  }
  :where(html[data-theme="dark"]) .programming-world-chapter-count {
    color: var(--muted);
  }
  :where(html[data-theme="dark"]) .programming-world-left, :where(html[data-theme="dark"]) .programming-world-right {
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow);
  }
  :where(html[data-theme="dark"]) .programming-world-badge {
    border: 1px solid var(--border);
    background: var(--accent-soft);
    color: var(--accent-dark);
  }
  :where(html[data-theme="dark"]) .programming-world-grid {
    border: 4px solid #6a865a;
    background: #436831;
    box-shadow: inset 0 0 0 1px rgba(51, 51, 51, 0.35), 0 14px 30px rgba(54, 70, 46, 0.16);
  }
  :where(html[data-theme="dark"]) .programming-world-cell {
    border-right: 1px solid rgba(91, 123, 70, 0.35);
    border-bottom: 1px solid rgba(91, 123, 70, 0.35);
    background: radial-gradient(circle at 22% 26%, rgba(255, 255, 255, 0.32) 0 8%, transparent 9%),
        radial-gradient(circle at 78% 74%, rgba(104, 142, 74, 0.24) 0 10%, transparent 11%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 45%),
        var(--world-ground);
  }
  :where(html[data-theme="dark"]) .programming-world-cell.is-start {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.28), transparent),
        linear-gradient(45deg, var(--world-ground) 0 48%, var(--world-ground-dark) 49% 52%, var(--world-ground) 53%);
  }
  :where(html[data-theme="dark"]) .programming-world-cell.is-wall {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.22), transparent 35%),
        linear-gradient(45deg, transparent 0 42%, rgba(255, 255, 255, 0.14) 43% 48%, transparent 49%),
        linear-gradient(-45deg, transparent 0 45%, rgba(0, 0, 0, 0.12) 46% 52%, transparent 53%),
        var(--world-wall);
    box-shadow: inset 0 -8px 0 rgba(0, 0, 0, 0.16);
  }
  :where(html[data-theme="dark"]) .programming-world-cell.is-goal {
    background: radial-gradient(circle at 50% 48%, #514c21 0 22%, transparent 23%),
        conic-gradient(from 45deg, var(--world-goal) 0 25%, #66562a 0 50%, var(--world-goal) 0 75%, #66562a 0),
        var(--world-goal-dark);
  }
  :where(html[data-theme="dark"]) .programming-world-cell.is-blocked::after {
    border: 3px solid #f19e98;
  }
  :where(html[data-theme="dark"]) .programming-world-cell.is-visited:not(.is-goal)::before {
    background: radial-gradient(circle, rgba(18, 60, 66, 0.32) 0 11%, transparent 12%),
        rgba(55, 166, 180, 0.2);
  }
  :where(html[data-theme="dark"]) .programming-world-brief {
    border: 1px solid #495738;
    background: #1f2937;
  }
  :where(html[data-theme="dark"]) .programming-world-icon-button {
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
  }
  :where(html[data-theme="dark"]) .programming-world-icon-button:hover:not(:disabled) {
    border-color: var(--accent);
    color: var(--accent-dark);
  }
  :where(html[data-theme="dark"]) .programming-world-legend span {
    color: var(--muted);
  }
  :where(html[data-theme="dark"]) .world-legend-tile {
    border: 1px solid var(--world-grid);
    background: var(--world-ground);
  }
  :where(html[data-theme="dark"]) .world-legend-tile.is-wall {
    background: var(--world-wall);
  }
  :where(html[data-theme="dark"]) .world-legend-tile.is-goal {
    background: var(--world-goal);
  }
  :where(html[data-theme="dark"]) .world-legend-tile.is-robot {
    background: var(--world-player);
  }
  :where(html[data-theme="dark"]) .world-legend-tile.is-visited {
    background: radial-gradient(circle, rgba(18, 60, 66, 0.32) 0 14%, transparent 15%),
        #285636;
  }
  :where(html[data-theme="dark"]) .programming-world-editor-label {
    color: var(--text);
  }
  :where(html[data-theme="dark"]) .programming-world-editor-keys {
    color: var(--muted);
  }
  :where(html[data-theme="dark"]) .programming-world-editor-wrap {
    border: 1px solid #2b3643;
    background: var(--world-code);
  }
  :where(html[data-theme="dark"]) .programming-world-gutter {
    border-right: 1px solid #2b3643;
    background: #0b111c;
    color: #6b7a90;
  }
  :where(html[data-theme="dark"]) .programming-world-gutter .is-active {
    color: #fde68a;
  }
  :where(html[data-theme="dark"]) .programming-world-gutter .is-error {
    color: #fca5a5;
  }
  :where(html[data-theme="dark"]) .programming-world-line-highlight {
    border-left: 3px solid #9b803b;
    background: rgba(251, 191, 36, 0.16);
  }
  :where(html[data-theme="dark"]) .programming-world-line-highlight.is-error {
    border-left-color: #803131;
    background: rgba(248, 113, 113, 0.2);
  }
  :where(html[data-theme="dark"]) .programming-world-editor {
    border: 0;
    background: transparent;
    color: #e5f3ff;
    caret-color: #fde68a;
  }
  :where(html[data-theme="dark"]) .programming-world-editor:focus {
    outline: none;
  }
  :where(html[data-theme="dark"]) .programming-world-editor-wrap:focus-within {
    outline: 3px solid var(--accent);
  }
  :where(html[data-theme="dark"]) .programming-world-editor.is-busy {
    color: #b9c7d8;
  }
  :where(html[data-theme="dark"]) .programming-world-speed {
    color: var(--muted);
  }
  :where(html[data-theme="dark"]) .programming-world-speed input {
    accent-color: var(--accent);
  }
  :where(html[data-theme="dark"]) .programming-world-speed output {
    color: var(--text);
  }
  :where(html[data-theme="dark"]) .programming-world-description {
    color: var(--muted);
  }
  :where(html[data-theme="dark"]) .programming-world-star-goal {
    background: #473d1d;
    color: #f7ddb3;
  }
  :where(html[data-theme="dark"]) .programming-world-hint-list li {
    border-left: 4px solid var(--accent);
    background: var(--accent-soft);
  }
  :where(html[data-theme="dark"]) .programming-world-hint-list strong {
    color: var(--accent-dark);
  }
  :where(html[data-theme="dark"]) .programming-world-status {
    border: 1px solid var(--border);
    background: #1f2937;
  }
  :where(html[data-theme="dark"]) .programming-world-status.is-success {
    border-color: #3d7e57;
    background: #222d3c;
    color: #c1f0d4;
  }
  :where(html[data-theme="dark"]) .programming-world-status.is-error {
    border-color: #73302c;
    background: #3f1c1a;
    color: var(--error);
  }
  :where(html[data-theme="dark"]) .programming-world-console pre {
    border: 1px solid #334355;
    background: #1f2937;
    color: #d2dae6;
  }
  :where(html[data-theme="dark"]) .programming-world-cheat {
    border: 1px solid var(--border);
    background: var(--surface);
  }
  :where(html[data-theme="dark"]) .programming-world-cheat p {
    color: var(--muted);
  }
  :where(html[data-theme="dark"]) .programming-world-journey {
    border: 1px solid var(--border);
    background: var(--surface);
  }
  :where(html[data-theme="dark"]) .programming-world-journey-title {
    color: var(--muted);
  }
  :where(html[data-theme="dark"]) .programming-world-journey-dot {
    border: 2px solid #4d603c;
    background: #1d2734;
    color: var(--muted);
  }
  :where(html[data-theme="dark"]) .programming-world-journey-dot:hover {
    border-color: var(--accent);
    color: var(--accent-dark);
  }
  :where(html[data-theme="dark"]) .programming-world-journey-dot.is-complete {
    border-color: #3f9d63;
    background: #3f9d63;
    color: #ffffff;
  }
  :where(html[data-theme="dark"]) .programming-world-focus {
    border-left: 4px solid var(--accent);
    background: var(--accent-soft);
    color: var(--accent-dark);
  }
  :where(html[data-theme="dark"]) .programming-world-journey-dot.is-next {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
  }
  :where(html[data-theme="dark"]) .programming-world-journey-dot.is-active {
    border-color: var(--accent-dark);
    box-shadow: 0 0 0 3px var(--accent);
  }
  :where(html[data-theme="dark"]) .programming-world-journey-dot.is-active:not(.is-complete) {
    background: var(--accent-soft);
    color: var(--accent-dark);
  }
  :where(html[data-theme="dark"]) .programming-world-maps-note {
    color: var(--muted);
  }
  :where(html[data-theme="dark"]) .programming-world-map-thumb {
    border: 2px solid var(--border);
    background: var(--surface);
    color: var(--text);
  }
  :where(html[data-theme="dark"]) .programming-world-map-thumb.is-active {
    border-color: var(--accent-dark);
  }
  :where(html[data-theme="dark"]) .programming-world-map-thumb.is-passed .programming-world-map-mark {
    background: #3f9d63;
    color: #ffffff;
  }
  :where(html[data-theme="dark"]) .programming-world-map-thumb.is-failed .programming-world-map-mark {
    background: #b42318;
    color: #ffffff;
  }
  :where(html[data-theme="dark"]) .programming-world-mini {
    background: #7e9d6d;
  }
  :where(html[data-theme="dark"]) .programming-world-mini i {
    background: var(--world-ground);
  }
  :where(html[data-theme="dark"]) .programming-world-mini i.is-wall {
    background: var(--world-wall);
  }
  :where(html[data-theme="dark"]) .programming-world-mini i.is-goal {
    background: #e5484d;
  }
  :where(html[data-theme="dark"]) .programming-world-mini i.is-start {
    background: var(--world-player);
  }
  :where(html[data-theme="dark"]) .programming-world-mini.is-hidden {
    color: #ffffff;
  }
  :where(html[data-theme="dark"]) .programming-world-map-mark {
    background: var(--accent-soft);
    color: var(--accent-dark);
  }
  :where(html[data-theme="dark"]) .programming-world-key {
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
  }
  :where(html[data-theme="dark"]) .programming-world-key:active {
    background: var(--accent-soft);
    border-color: var(--accent);
  }

  /* static/css/site-header.css */
  :where(html[data-theme="dark"]) .site-header {
    --surface: #1d2734;
    --primary: #234d8b;
    --primary-dark: #bad0ef;
    --primary-hover: #183965;
    --primary-soft: #1b2841;
    --accent: #6aa8ff;
    --text: #d5dde7;
    --muted: #b6bfca;
    --border: #2f3b4e;
    --shadow: 0 18px 35px rgba(26, 35, 56, 0.08);
    background: rgba(32, 42, 57, 0.9);
    border-bottom: 1px solid rgba(47, 59, 78, 0.9);
    color: var(--text);
  }
  :where(html[data-theme="dark"]) .site-header a {
    color: inherit;
  }
  :where(html[data-theme="dark"]) .site-header .brand {
    color: var(--primary-dark);
  }
  :where(html[data-theme="dark"]) .site-header .brand:hover, :where(html[data-theme="dark"]) .site-header .brand:focus-visible {
    color: var(--accent);
  }
  :where(html[data-theme="dark"]) .site-header .brand:focus-visible {
    outline: 3px solid rgba(15, 159, 154, 0.28);
  }
  :where(html[data-theme="dark"]) .site-header .main-nav a {
    color: var(--muted);
  }
  :where(html[data-theme="dark"]) .site-header .nav-creation-menu > summary {
    color: var(--muted);
  }
  :where(html[data-theme="dark"]) .site-header .nav-creation-menu > summary::after {
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
  }
  :where(html[data-theme="dark"]) .site-header .nav-creation-menu-panel {
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow);
  }
  :where(html[data-theme="dark"]) .site-header .nav-creation-menu-panel a:hover, :where(html[data-theme="dark"]) .site-header .nav-creation-menu-panel a:focus-visible {
    background: var(--primary-soft);
    color: var(--primary-dark);
  }
  :where(html[data-theme="dark"]) .site-header .teacher-nav-status {
    color: var(--muted);
  }
  :where(html[data-theme="dark"]) .site-header .login-btn {
    background: #1a2740;
    border: 1px solid var(--border);
    color: var(--primary-dark);
  }
  :where(html[data-theme="dark"]) .site-header .theme-toggle {
    border: 1px solid var(--border);
    background: var(--primary-soft);
    color: var(--primary-dark);
  }
  :where(html[data-theme="dark"]) .site-header .theme-toggle:hover, :where(html[data-theme="dark"]) .site-header .theme-toggle:focus-visible {
    outline: none;
    border-color: var(--accent);
    background: var(--surface);
  }
  @media (max-width: 860px), (max-height: 520px) and (orientation: landscape) {
    :where(html[data-theme="dark"]) .site-header.mobile-nav-ready .mobile-nav-toggle {
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--primary-dark);
    }
    :where(html[data-theme="dark"]) .site-header .mobile-nav-toggle:hover {
      border-color: var(--accent);
      background: var(--primary-soft);
    }
    :where(html[data-theme="dark"]) .site-header .mobile-nav-toggle:focus-visible {
      outline: 3px solid var(--accent);
    }
    :where(html[data-theme="dark"]) .site-header .nav-panel {
      border-top: 1px solid var(--border);
    }
    :where(html[data-theme="dark"]) .site-header .nav-group-teacher {
      border-top: 1px solid var(--border);
    }
    :where(html[data-theme="dark"]) .site-header .nav-creation-menu-panel {
      border: 0;
      background: transparent;
      box-shadow: none;
    }
    :where(html[data-theme="dark"]) .site-header .main-nav a:hover, :where(html[data-theme="dark"]) .site-header .main-nav a:focus-visible, :where(html[data-theme="dark"]) .site-header .teacher-nav-status:hover, :where(html[data-theme="dark"]) .site-header .teacher-nav-status:focus-visible, :where(html[data-theme="dark"]) .site-header .nav-account .login-btn:hover, :where(html[data-theme="dark"]) .site-header .nav-account .login-btn:focus-visible {
      outline: none;
      background: var(--primary-soft);
      color: var(--primary-dark);
    }
    :where(html[data-theme="dark"]) .site-header .main-nav a:focus-visible, :where(html[data-theme="dark"]) .site-header .teacher-nav-status:focus-visible, :where(html[data-theme="dark"]) .site-header .nav-account .login-btn:focus-visible {
      box-shadow: 0 0 0 3px var(--accent) inset;
    }
    :where(html[data-theme="dark"]) .site-header .nav-account {
      border-top: 1px solid var(--border);
    }
    :where(html[data-theme="dark"]) .site-header .nav-account .login-btn {
      border: 0;
      background: transparent;
    }
    :where(html[data-theme="dark"]) .site-header .nav-account .theme-toggle {
      background: var(--primary-soft);
    }
  }
  :where(html[data-theme="dark"]) .site-header .nav-badge {
    background: #d64545;
    color: #fff;
  }
  :where(html[data-theme="dark"]) .site-header .mobile-nav-badge {
    background: #d64545;
  }
  :where(html[data-theme="dark"]) .site-header .pro-badge {
    background: var(--premium-soft, #241b41);
    color: var(--premium, #8257ff);
  }
}