/* 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;
    --webapp-accent-text: #7fd0c8;
    --ww-ok-text: #6fd39a;
    --ww-error-text: #f59a9a;
    --ww-warn-text: #f2b35e;
  }

  /* projects/webove-aplikace/static/css/style.css */
  :where(html[data-theme="dark"]) .webapp-css-lesson .section + .section {
    border-top: 1px solid var(--webapp-line);
  }
  :where(html[data-theme="dark"]) .webapp-css-lesson .webapp-local-nav {
    border: 0;
    box-shadow: none;
    background: transparent;
  }
  :where(html[data-theme="dark"]) .webapp-css-lesson .webapp-local-nav a {
    background: transparent;
  }
  :where(html[data-theme="dark"]) .webapp-css-lesson .css03-note {
    border-left: 3px solid var(--webapp-accent);
    background: var(--webapp-accent-soft);
  }
  :where(html[data-theme="dark"]) .webapp-css-lesson .css03-demo {
    border: 1px solid var(--webapp-line);
    background: #1d2734;
  }
  :where(html[data-theme="dark"]) .webapp-css-lesson .css03-feedback {
    border-left: 3px solid var(--webapp-accent);
    background: #202b39;
    color: #dce0e4;
  }
  :where(html[data-theme="dark"]) .webapp-css-lesson .webapp-segmented button {
    background: #202b39;
    color: #dce0e4;
  }
  :where(html[data-theme="dark"]) .webapp-css-lesson .webapp-segmented button strong {
    color: inherit;
  }
  :where(html[data-theme="dark"]) .webapp-css-lesson .webapp-segmented button:hover, :where(html[data-theme="dark"]) .webapp-css-lesson .webapp-segmented button:focus-visible, :where(html[data-theme="dark"]) .webapp-css-lesson .webapp-segmented button[aria-pressed="true"] {
    background: #256f6b;
    color: #fff;
    border-color: #256f6b;
  }
  :where(html[data-theme="dark"]) .webapp-css-lesson :is(button, summary, select, input, a):focus-visible {
    outline: 3px solid #c0daee;
  }
  :where(html[data-theme="dark"]) .webapp-css-lesson select {
    border: 1px solid #5b6d79;
    background: #1d2734;
    color: #dce0e4;
  }
  :where(html[data-theme="dark"]) .webapp-css-lesson input[type="range"] {
    accent-color: #b8e7e5;
  }
  :where(html[data-theme="dark"]) .webapp-css-lesson input[type="color"] {
    border: 1px solid #5b6d79;
  }
  :where(html[data-theme="dark"]) .webapp-css-lesson input[type="checkbox"] {
    accent-color: #b8e7e5;
  }
  :where(html[data-theme="dark"]) .webapp-css-lesson .webapp-code-preview > .css03-preview {
    background: #1d2734;
    color: #dce0e4;
    border: 1px solid #2f3b4e;
  }
  :where(html[data-theme="dark"]) .webapp-css-lesson .css03-preview :is(h1, h2, p) {
    color: inherit;
  }
  :where(html[data-theme="dark"]) .webapp-css-lesson [data-class-preview] p {
    border: 1px solid #2f3b4e;
  }
  :where(html[data-theme="dark"]) .webapp-css-lesson .css03-profile-frame {
    border: 1px solid #2f3b4e;
    background: #1d2734;
  }
  :where(html[data-theme="dark"]) .webapp-css-lesson .css03-box-stage, :where(html[data-theme="dark"]) .webapp-css-lesson .css03-playground-stage {
    background: #202b39;
  }
  :where(html[data-theme="dark"]) .webapp-css-lesson .css03-margin-area {
    border: 1px dashed #f3dda8;
    background: #645d29;
  }
  :where(html[data-theme="dark"]) .webapp-css-lesson .css03-box {
    border: 3px solid #b8e7e5;
    background: #265d52;
    color: #dce0e4;
  }
  :where(html[data-theme="dark"]) .webapp-css-lesson .css03-box span {
    background: #1d2734;
  }
  :where(html[data-theme="dark"]) .webapp-css-lesson .css03-playground-box {
    border: 2px solid #c0daee;
  }
  :where(html[data-theme="dark"]) .webapp-css-lesson .css03-debug article + article {
    border-top: 1px solid var(--webapp-line);
  }
  :where(html[data-theme="dark"]) .webapp-css-lesson summary {
    color: #c0daee;
    border: 1px solid #5b6d79;
  }
  :where(html[data-theme="dark"]) .webapp-css-lesson summary:hover, :where(html[data-theme="dark"]) .webapp-css-lesson details[open] summary {
    color: #fff;
    background: #256f6b;
  }
  :where(html[data-theme="dark"]) .webapp-css-lesson .css03-reference :is(dt, dd) {
    border-bottom: 1px solid var(--webapp-line);
  }
  :where(html[data-theme="dark"]) .webapp-page, :where(html[data-theme="dark"]) .student-session-lesson {
    --webapp-ink: #dce0e4;
    --webapp-muted: #b6bfca;
    --webapp-line: #2f3b4e;
    --webapp-surface: #1d2734;
    --webapp-soft: #202b39;
    --webapp-accent: #256f6b;
    --webapp-accent-soft: #1f443e;
    --webapp-code: #15202b;
    --webapp-code-text: #eef6ff;
  }
  :where(html[data-theme="dark"]) .webapp-subnav a {
    border: 1px solid var(--webapp-line);
    background: var(--webapp-surface);
    color: var(--webapp-muted);
  }
  :where(html[data-theme="dark"]) .webapp-subnav a:hover, :where(html[data-theme="dark"]) .webapp-subnav a:focus-visible, :where(html[data-theme="dark"]) .webapp-subnav a.is-active {
    border-color: var(--webapp-accent);
    background: var(--webapp-accent-soft);
    color: var(--webapp-accent-text);
  }
  :where(html[data-theme="dark"]) .webapp-local-nav {
    border: 1px solid var(--webapp-line);
    background: rgba(29, 39, 52, 0.94);
    box-shadow: var(--shadow);
  }
  :where(html[data-theme="dark"]) .webapp-local-nav a {
    border: 1px solid transparent;
    background: var(--webapp-soft);
    color: var(--webapp-muted);
  }
  :where(html[data-theme="dark"]) .webapp-local-nav a:hover, :where(html[data-theme="dark"]) .webapp-local-nav a:focus-visible {
    border-color: var(--webapp-accent);
    background: var(--webapp-accent-soft);
    color: var(--webapp-accent-text);
  }
  :where(html[data-theme="dark"]) .webapp-breadcrumb {
    color: var(--webapp-muted);
  }
  :where(html[data-theme="dark"]) .webapp-breadcrumb a {
    color: var(--webapp-accent-text);
  }
  :where(html[data-theme="dark"]) .webapp-breadcrumb a::after {
    color: var(--webapp-muted);
  }
  :where(html[data-theme="dark"]) .webapp-browser {
    border: 1px solid var(--webapp-line);
    background: var(--webapp-code);
    box-shadow: var(--shadow);
  }
  :where(html[data-theme="dark"]) .webapp-browser-bar {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }
  :where(html[data-theme="dark"]) .webapp-browser-bar span {
    background: #6d2c2c;
  }
  :where(html[data-theme="dark"]) .webapp-browser-bar span:nth-child(2) {
    background: #e0b84d;
  }
  :where(html[data-theme="dark"]) .webapp-browser-bar span:nth-child(3) {
    background: #58b878;
  }
  :where(html[data-theme="dark"]) .webapp-browser pre, :where(html[data-theme="dark"]) .webapp-code {
    background: var(--webapp-code);
    color: var(--webapp-code-text);
  }
  :where(html[data-theme="dark"]) .webapp-section-card, :where(html[data-theme="dark"]) .webapp-library-card, :where(html[data-theme="dark"]) .webapp-track-card, :where(html[data-theme="dark"]) .webapp-filter-panel, :where(html[data-theme="dark"]) .webapp-reference-main, :where(html[data-theme="dark"]) .webapp-reference-side {
    border: 1px solid var(--webapp-line);
    background: var(--webapp-surface);
    box-shadow: var(--shadow);
  }
  :where(html[data-theme="dark"]) .webapp-lesson-card {
    border: 1px solid var(--webapp-line);
    background: var(--webapp-surface);
    box-shadow: var(--shadow);
  }
  :where(html[data-theme="dark"]) .webapp-lesson-card p {
    color: var(--webapp-muted);
  }
  :where(html[data-theme="dark"]) .webapp-section-card p, :where(html[data-theme="dark"]) .webapp-library-card p, :where(html[data-theme="dark"]) .webapp-track-card p {
    color: var(--webapp-muted);
  }
  :where(html[data-theme="dark"]) .webapp-card-index, :where(html[data-theme="dark"]) .webapp-card-header span {
    background: var(--webapp-accent-soft);
    color: var(--webapp-accent-text);
  }
  :where(html[data-theme="dark"]) .webapp-chip-list li {
    border: 1px solid var(--webapp-line);
    background: var(--webapp-soft);
    color: var(--webapp-muted);
  }
  :where(html[data-theme="dark"]) .webapp-library-tools label {
    color: var(--webapp-muted);
  }
  :where(html[data-theme="dark"]) .webapp-library-tools input, :where(html[data-theme="dark"]) .webapp-library-tools select {
    border: 1px solid var(--webapp-line);
    background: var(--webapp-surface);
    color: var(--webapp-muted);
  }
  :where(html[data-theme="dark"]) .webapp-attribute-card, :where(html[data-theme="dark"]) .webapp-example-card {
    border: 1px solid var(--webapp-line);
    background: var(--webapp-soft);
  }
  :where(html[data-theme="dark"]) .webapp-reference-card {
    border: 1px solid var(--webapp-line);
    background: var(--webapp-surface);
  }
  :where(html[data-theme="dark"]) .webapp-reference-card p {
    color: var(--webapp-muted);
  }
  :where(html[data-theme="dark"]) .webapp-preview-frame {
    border: 1px solid var(--webapp-line);
    background: var(--webapp-surface);
  }
  :where(html[data-theme="dark"]) .webapp-file-tree {
    border: 1px solid var(--webapp-line);
    background: #1d2734;
    color: var(--webapp-muted);
  }
  :where(html[data-theme="dark"]) .webapp-live-preview {
    border: 1px solid var(--webapp-line);
    background: var(--webapp-surface);
  }
  :where(html[data-theme="dark"]) .webapp-anatomy-parts span {
    border: 1px solid var(--webapp-line);
    background: var(--webapp-soft);
  }
  :where(html[data-theme="dark"]) .webapp-anatomy-labels span {
    color: var(--webapp-muted);
  }
  :where(html[data-theme="dark"]) .webapp-anatomy-grid div {
    border: 1px solid var(--webapp-line);
    background: var(--webapp-soft);
  }
  :where(html[data-theme="dark"]) .webapp-anatomy-grid span {
    color: var(--webapp-muted);
  }
  :where(html[data-theme="dark"]) .webapp-anatomy-grid code {
    color: var(--webapp-ink);
  }
  :where(html[data-theme="dark"]) .webapp-anatomy-comparison article {
    border: 1px solid var(--webapp-line);
    background: var(--webapp-soft);
  }
  :where(html[data-theme="dark"]) .webapp-mistake {
    border: 1px solid var(--webapp-line);
    border-left: 4px solid #f19e98;
    background: #1e2836;
  }
  :where(html[data-theme="dark"]) .webapp-bad-label {
    color: #f19e98;
  }
  :where(html[data-theme="dark"]) .webapp-try label, :where(html[data-theme="dark"]) .webapp-demo-fields label {
    color: var(--webapp-ink);
  }
  :where(html[data-theme="dark"]) .webapp-try input, :where(html[data-theme="dark"]) .webapp-demo-fields input, :where(html[data-theme="dark"]) .webapp-demo-fields select {
    border: 1px solid var(--webapp-line);
    background: var(--webapp-surface);
    color: var(--webapp-ink);
  }
  :where(html[data-theme="dark"]) .webapp-try input[type="range"], :where(html[data-theme="dark"]) .webapp-demo-fields input[type="range"] {
    accent-color: var(--webapp-accent-text);
  }
  :where(html[data-theme="dark"]) .webapp-try input:focus, :where(html[data-theme="dark"]) .webapp-demo-fields input:focus, :where(html[data-theme="dark"]) .webapp-demo-fields select:focus {
    border-color: var(--webapp-accent);
    box-shadow: 0 0 0 4px rgba(37, 111, 107, 0.14);
    outline: none;
  }
  :where(html[data-theme="dark"]) .webapp-demo-field-value {
    color: var(--webapp-muted);
  }
  :where(html[data-theme="dark"]) .webapp-empty-state {
    border: 1px dashed var(--webapp-line);
    background: var(--webapp-soft);
    color: var(--webapp-muted);
  }
  :where(html[data-theme="dark"]) .webapp-browser-mockup {
    background: var(--webapp-surface);
  }
  :where(html[data-theme="dark"]) .webapp-browser-address {
    background: var(--webapp-soft);
    color: var(--webapp-muted);
  }
  :where(html[data-theme="dark"]) .webapp-browser-page {
    border: 1px solid var(--webapp-line);
    background: linear-gradient(180deg, #1f454c 0%, #1d2734 82%);
  }
  :where(html[data-theme="dark"]) .webapp-flow-strip li {
    border: 1px solid var(--webapp-line);
    background: var(--webapp-surface);
    color: var(--webapp-muted);
  }
  :where(html[data-theme="dark"]) .webapp-flow-strip li:not(:last-child)::after {
    color: var(--webapp-accent-text);
  }
  :where(html[data-theme="dark"]) .webapp-lesson-panel {
    border: 1px solid var(--webapp-line);
    background: var(--webapp-surface);
    box-shadow: var(--shadow);
  }
  :where(html[data-theme="dark"]) .webapp-mini-grid div {
    border: 1px solid var(--webapp-line);
    background: var(--webapp-soft);
  }
  :where(html[data-theme="dark"]) .webapp-mini-grid strong {
    color: var(--webapp-accent-text);
  }
  :where(html[data-theme="dark"]) .webapp-mini-grid span {
    color: var(--webapp-muted);
  }
  :where(html[data-theme="dark"]) .webapp-emphasis-panel {
    border-color: #907a36;
    background: #202a38;
  }
  :where(html[data-theme="dark"]) .webapp-layer-controls label {
    border: 1px solid var(--webapp-line);
    background: var(--webapp-soft);
  }
  :where(html[data-theme="dark"]) .webapp-browser-steps li {
    border: 1px solid var(--webapp-line);
    background: var(--webapp-soft);
  }
  :where(html[data-theme="dark"]) .webapp-browser-steps li::before {
    color: var(--webapp-accent-text);
  }
  :where(html[data-theme="dark"]) .webapp-diagnostic-result {
    border: 1px solid var(--webapp-line);
    background: #202a38;
  }
  :where(html[data-theme="dark"]) .webapp-code-lines button {
    border: 0;
    background: transparent;
    color: inherit;
  }
  :where(html[data-theme="dark"]) .webapp-code-lines button:hover, :where(html[data-theme="dark"]) .webapp-code-lines button:focus-visible, :where(html[data-theme="dark"]) .webapp-code-lines button.is-active {
    background: rgba(242, 201, 76, 0.22);
    outline: none;
  }
  :where(html[data-theme="dark"]) .webapp-anatomy-detail {
    border: 1px solid var(--webapp-line);
    background: var(--webapp-soft);
  }
  :where(html[data-theme="dark"]) .webapp-tab-preview, :where(html[data-theme="dark"]) .webapp-window-preview {
    border: 1px solid var(--webapp-line);
    background: #1d2734;
  }
  :where(html[data-theme="dark"]) .webapp-tab-preview {
    color: var(--webapp-muted);
  }
  :where(html[data-theme="dark"]) .webapp-tab-preview.is-active, :where(html[data-theme="dark"]) .webapp-window-preview.is-active {
    border-color: #907a36;
    box-shadow: 0 0 0 4px rgba(242, 201, 76, 0.22);
  }
  :where(html[data-theme="dark"]) .webapp-workflow-cycle li {
    border: 1px solid var(--webapp-line);
    background: var(--webapp-soft);
    color: var(--webapp-accent-text);
  }
  :where(html[data-theme="dark"]) .webapp-task-panel {
    border-color: var(--webapp-accent);
    background: #202b3a;
  }
  :where(html[data-theme="dark"]) .webapp-profile-preview {
    border: 1px solid var(--webapp-line);
    background: #1d2734;
    box-shadow: var(--shadow);
  }
  :where(html[data-theme="dark"]) .webapp-profile-role {
    color: var(--webapp-muted);
  }
  :where(html[data-theme="dark"]) .webapp-profile-image-placeholder, :where(html[data-theme="dark"]) .webapp-radius-sample {
    border: 2px solid #48836f;
    background: #1f454c;
    color: #ccf0ee;
  }
  :where(html[data-theme="dark"]) .webapp-div-demo {
    border: 2px dashed var(--webapp-accent);
    background: var(--webapp-accent-soft);
  }
  :where(html[data-theme="dark"]) .webapp-css-load-flow div {
    border: 1px solid var(--webapp-line);
    background: var(--webapp-soft);
    color: var(--webapp-ink);
  }
  :where(html[data-theme="dark"]) .webapp-css-load-flow div:not(:last-child)::after {
    color: var(--webapp-accent-text);
  }
  :where(html[data-theme="dark"]) .webapp-tool-reference div, :where(html[data-theme="dark"]) .webapp-css-reference-grid div, :where(html[data-theme="dark"]) .webapp-css-rule-parts div, :where(html[data-theme="dark"]) .webapp-level-grid section, :where(html[data-theme="dark"]) .webapp-checklist-columns section {
    border: 1px solid var(--webapp-line);
    background: var(--webapp-soft);
  }
  :where(html[data-theme="dark"]) .webapp-css-rule-parts button {
    border: 1px solid var(--webapp-line);
    background: var(--webapp-soft);
    color: var(--webapp-ink);
  }
  :where(html[data-theme="dark"]) .webapp-css-rule-parts button:hover, :where(html[data-theme="dark"]) .webapp-css-rule-parts button:focus-visible, :where(html[data-theme="dark"]) .webapp-css-rule-parts button.is-active {
    border-color: var(--webapp-accent);
    background: var(--webapp-accent);
    color: #ffffff;
  }
  :where(html[data-theme="dark"]) .webapp-tool-reference strong, :where(html[data-theme="dark"]) .webapp-css-reference-grid code, :where(html[data-theme="dark"]) .webapp-css-rule-parts strong {
    color: var(--webapp-accent-text);
  }
  :where(html[data-theme="dark"]) .webapp-heading-hierarchy {
    border-left: 4px solid var(--webapp-accent);
  }
  :where(html[data-theme="dark"]) .webapp-heading-hierarchy .is-h2 {
    color: var(--webapp-accent-text);
  }
  :where(html[data-theme="dark"]) .webapp-heading-hierarchy .is-h3 {
    color: var(--webapp-muted);
  }
  :where(html[data-theme="dark"]) .webapp-checklist-grid label, :where(html[data-theme="dark"]) .webapp-checklist-columns label {
    border: 1px solid var(--webapp-line);
    background: #1d2734;
  }
  :where(html[data-theme="dark"]) .webapp-profile-compare {
    border: 1px dashed var(--webapp-line);
    background: #1d2734;
  }
  :where(html[data-theme="dark"]) .webapp-profile-compare.is-css-on .webapp-profile-preview {
    border: 0;
    background: #1d2734;
    box-shadow: 0 16px 42px rgba(23, 32, 42, 0.14);
  }
  :where(html[data-theme="dark"]) .webapp-profile-compare.is-css-on a {
    background: var(--webapp-accent);
    color: #ffffff;
  }
  :where(html[data-theme="dark"]) .webapp-css-before-after {
    border: 1px solid var(--webapp-line);
    background: #1d2734;
  }
  :where(html[data-theme="dark"]) .webapp-css-before-after.is-css-on {
    border: 0;
    background: #1f443e;
    color: #ccf0ee;
    box-shadow: 0 14px 36px rgba(23, 32, 42, 0.14);
  }
  :where(html[data-theme="dark"]) .webapp-css-before-after.is-css-on a {
    background: var(--webapp-accent);
    color: #ffffff;
  }
  :where(html[data-theme="dark"]) .webapp-demo-label {
    color: var(--webapp-muted);
  }
  :where(html[data-theme="dark"]) .webapp-switch-row {
    border: 1px solid var(--webapp-line);
    background: var(--webapp-soft);
  }
  :where(html[data-theme="dark"]) .webapp-switch-row input {
    accent-color: var(--webapp-accent-text);
  }
  :where(html[data-theme="dark"]) .webapp-segmented button {
    border: 1px solid var(--webapp-line);
    background: var(--webapp-soft);
    color: var(--webapp-ink);
  }
  :where(html[data-theme="dark"]) .webapp-segmented button.is-active, :where(html[data-theme="dark"]) .webapp-segmented button:hover, :where(html[data-theme="dark"]) .webapp-segmented button:focus-visible {
    border-color: var(--webapp-accent);
    background: var(--webapp-accent);
    color: #ffffff;
  }
  :where(html[data-theme="dark"]) .webapp-css-lab label {
    color: var(--webapp-ink);
  }
  :where(html[data-theme="dark"]) .webapp-css-lab input, :where(html[data-theme="dark"]) .webapp-css-lab select, :where(html[data-theme="dark"]) .webapp-demo-fields select {
    border: 1px solid var(--webapp-line);
    background: #1d2734;
    color: var(--webapp-ink);
  }
  :where(html[data-theme="dark"]) .webapp-css-lab input[type="range"] {
    accent-color: var(--webapp-accent-text);
  }
  :where(html[data-theme="dark"]) .webapp-lab-preview {
    border: 1px solid var(--webapp-line);
    background: #1d2734;
  }
  :where(html[data-theme="dark"]) .webapp-alt-preview, :where(html[data-theme="dark"]) .webapp-css-taste-preview {
    border: 1px solid var(--webapp-line);
    background: #1d2734;
  }
  :where(html[data-theme="dark"]) .webapp-alt-preview p {
    border: 1px dashed var(--webapp-accent);
    background: var(--webapp-accent-soft);
    color: var(--webapp-accent-text);
  }
  :where(html[data-theme="dark"]) .webapp-selector-stage > * {
    border: 1px solid var(--webapp-line);
    background: var(--webapp-soft);
  }
  :where(html[data-theme="dark"]) .webapp-selector-stage .is-selected {
    outline: 3px solid var(--webapp-accent);
    background: #222d3d;
  }
  :where(html[data-theme="dark"]) .webapp-size-stage {
    border: 1px dashed var(--webapp-line);
    background: #1d2734;
  }
  :where(html[data-theme="dark"]) .webapp-fixed-width, :where(html[data-theme="dark"]) .webapp-max-width {
    background: #1f443e;
    color: #ccf0ee;
  }
  :where(html[data-theme="dark"]) .webapp-box-model-stage {
    border: 1px dashed var(--webapp-line);
    background: #202a38;
  }
  :where(html[data-theme="dark"]) .webapp-box-model-box {
    border: 3px solid var(--webapp-accent);
    background: #1f443e;
    color: #ccf0ee;
  }
  :where(html[data-theme="dark"]) .webapp-box-model-visual {
    color: var(--webapp-ink);
  }
  :where(html[data-theme="dark"]) .webapp-box-model-visual .is-margin {
    border: 2px dashed #f1c992;
    background: #473a1d;
  }
  :where(html[data-theme="dark"]) .webapp-box-model-visual .is-border {
    border: 4px solid var(--webapp-accent);
    background: #1d2734;
  }
  :where(html[data-theme="dark"]) .webapp-box-model-visual .is-padding {
    background: #1f454c;
  }
  :where(html[data-theme="dark"]) .webapp-box-model-visual .is-content {
    background: #1d2734;
  }
  :where(html[data-theme="dark"]) .webapp-profile-build-preview {
    border: 1px solid #34465b;
    background: #212c3b;
    color: #e0e0e0;
  }
  :where(html[data-theme="dark"]) .webapp-profile-build-preview h3 {
    color: #89a4ef;
  }
  :where(html[data-theme="dark"]) .webapp-profile-build-preview a {
    color: #89a4ef;
  }
  :where(html[data-theme="dark"]) .webapp-playground-preview {
    border: 1px solid var(--webapp-line);
  }
  :where(html[data-theme="dark"]) .webapp-project-brief {
    border-top: 5px solid var(--webapp-accent);
  }
  :where(html[data-theme="dark"]) .webapp-hover-demo {
    border: 1px solid var(--webapp-line);
    color: blue;
  }
  :where(html[data-theme="dark"]) .webapp-hover-demo:hover, :where(html[data-theme="dark"]) .webapp-hover-demo:focus-visible {
    border-color: red;
    color: red;
  }
  :where(html[data-theme="dark"]) .webapp-reference-link-list a {
    border: 1px solid var(--webapp-line);
    background: #1d2734;
    color: var(--webapp-accent-text);
  }
  :where(html[data-theme="dark"]) .webapp-radius-demo input[type="range"] {
    accent-color: var(--webapp-accent-text);
  }
  :where(html[data-theme="dark"]) .webapp-radius-variants div {
    border: 1px solid var(--webapp-line);
    background: var(--webapp-soft);
  }
  :where(html[data-theme="dark"]) .webapp-radius-variants span {
    background: var(--webapp-accent);
  }
  :where(html[data-theme="dark"]) .webapp-cheatsheet-grid section {
    border: 1px solid var(--webapp-line);
    background: var(--webapp-soft);
  }
  :where(html[data-theme="dark"]) .webapp-cheatsheet-grid dl div {
    border-top: 1px solid var(--webapp-line);
  }
  :where(html[data-theme="dark"]) .webapp-debug-list button {
    border: 1px solid var(--webapp-line);
    background: var(--webapp-soft);
    color: var(--webapp-ink);
  }
  :where(html[data-theme="dark"]) .webapp-debug-list button.is-active, :where(html[data-theme="dark"]) .webapp-debug-list button:hover, :where(html[data-theme="dark"]) .webapp-debug-list button:focus-visible {
    border-color: var(--webapp-accent);
    background: var(--webapp-accent);
    color: #ffffff;
  }
  :where(html[data-theme="dark"]) .webapp-workshop-promo {
    border: 1px solid var(--webapp-line);
    border-left: 6px solid var(--webapp-accent);
    background: linear-gradient(120deg, var(--webapp-accent-soft), var(--webapp-surface) 70%);
    box-shadow: var(--shadow);
  }
  :where(html[data-theme="dark"]) .webapp-workshop-promo p {
    color: var(--webapp-muted);
  }
  :where(html[data-theme="dark"]) .webapp-workshop-badge {
    background: var(--webapp-accent);
    color: #fff;
  }

  /* projects/webove-aplikace/static/css/workshop.css */
  :where(html[data-theme="dark"]) .web-workshop {
    --ww-ok: #15803d;
    --ww-ok-soft: #1c452c;
    --ww-error: #b91c1c;
    --ww-error-soft: #411b1b;
    --ww-warn: #b45309;
  }
  :where(html[data-theme="dark"]) .ww-launch {
    color: var(--webapp-muted);
  }
  :where(html[data-theme="dark"]) .ww-progress {
    background: var(--webapp-accent-soft);
    color: var(--webapp-accent-text);
  }
  :where(html[data-theme="dark"]) .ww-nav-btn {
    border: 1px solid var(--webapp-line);
    background: var(--webapp-surface);
    color: var(--webapp-ink);
  }
  :where(html[data-theme="dark"]) .ww-nav-btn:hover {
    border-color: var(--webapp-accent);
  }
  :where(html[data-theme="dark"]) .ww-nav-btn[aria-current="true"] {
    border-color: var(--webapp-accent);
    background: var(--webapp-accent);
    color: #fff;
  }
  :where(html[data-theme="dark"]) .ww-nav-number {
    background: var(--webapp-soft);
    color: var(--webapp-accent-text);
  }
  :where(html[data-theme="dark"]) .ww-nav-btn[aria-current="true"] .ww-nav-number {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
  }
  :where(html[data-theme="dark"]) .ww-nav-btn.is-complete .ww-nav-number {
    background: var(--ww-ok);
    color: #fff;
  }
  :where(html[data-theme="dark"]) .ww-reset {
    border: 0;
    background: none;
    color: var(--webapp-muted);
  }
  :where(html[data-theme="dark"]) .ww-storage-note {
    color: var(--webapp-muted);
  }
  :where(html[data-theme="dark"]) .ww-station-header h2:focus {
    outline: none;
  }
  :where(html[data-theme="dark"]) .ww-lesson-badge {
    background: var(--webapp-accent-soft);
    color: var(--webapp-accent-text);
  }
  :where(html[data-theme="dark"]) .ww-station-intro {
    color: var(--webapp-muted);
  }
  :where(html[data-theme="dark"]) .ww-controls, :where(html[data-theme="dark"]) .ww-stage, :where(html[data-theme="dark"]) .ww-tasks-panel, :where(html[data-theme="dark"]) .ww-code-panel {
    border: 1px solid var(--webapp-line);
    background: var(--webapp-surface);
  }
  :where(html[data-theme="dark"]) .ww-controls {
    background: var(--webapp-soft);
  }
  :where(html[data-theme="dark"]) .ww-stage-label {
    color: var(--webapp-muted);
  }
  :where(html[data-theme="dark"]) .ww-field-value {
    color: var(--webapp-accent-text);
  }
  :where(html[data-theme="dark"]) .ww-field input[type="range"] {
    accent-color: var(--webapp-accent-text);
  }
  :where(html[data-theme="dark"]) .ww-field select, :where(html[data-theme="dark"]) .ww-field input[type="text"] {
    border: 1px solid var(--webapp-line);
    background: #1d2734;
  }
  :where(html[data-theme="dark"]) .ww-field input[type="color"] {
    border: 1px solid var(--webapp-line);
    background: #1d2734;
  }
  :where(html[data-theme="dark"]) .ww-toggle input {
    accent-color: var(--webapp-accent-text);
  }
  :where(html[data-theme="dark"]) .ww-note {
    color: var(--webapp-muted);
  }
  :where(html[data-theme="dark"]) .ww-note-strong {
    border-left: 4px solid var(--webapp-accent);
    background: #1d2734;
    color: var(--webapp-ink);
  }
  :where(html[data-theme="dark"]) .ww-note.is-error {
    color: var(--ww-error-text);
  }
  :where(html[data-theme="dark"]) .ww-task {
    border: 1px solid var(--webapp-line);
  }
  :where(html[data-theme="dark"]) .ww-task-status {
    border: 2px solid var(--webapp-line);
    color: #fff;
  }
  :where(html[data-theme="dark"]) .ww-task.is-done {
    border-color: color-mix(in srgb, var(--ww-ok) 40%, transparent);
    background: var(--ww-ok-soft);
  }
  :where(html[data-theme="dark"]) .ww-task.is-done .ww-task-status {
    border-color: var(--ww-ok);
    background: var(--ww-ok);
  }
  :where(html[data-theme="dark"]) .ww-hint summary {
    color: var(--webapp-accent-text);
  }
  :where(html[data-theme="dark"]) .ww-requirements {
    color: var(--webapp-muted);
  }
  :where(html[data-theme="dark"]) .ww-requirements .is-ok {
    color: var(--ww-ok-text);
  }
  :where(html[data-theme="dark"]) .ww-code {
    background: var(--webapp-code);
    color: var(--webapp-code-text);
  }
  :where(html[data-theme="dark"]) .ww-station-pager {
    border-top: 1px solid var(--webapp-line);
  }
  :where(html[data-theme="dark"]) .ww-badge {
    background: var(--webapp-soft);
    color: var(--webapp-muted);
  }
  :where(html[data-theme="dark"]) .ww-badge.is-ok {
    background: var(--ww-ok-soft);
    color: var(--ww-ok-text);
  }
  :where(html[data-theme="dark"]) .ww-badge.is-error {
    background: var(--ww-error-soft);
    color: var(--ww-error-text);
  }
  :where(html[data-theme="dark"]) .ww-url {
    border: 1px solid var(--webapp-line);
    background: var(--webapp-soft);
  }
  :where(html[data-theme="dark"]) .ww-url-protocol {
    color: #a275f0;
  }
  :where(html[data-theme="dark"]) .ww-url-domain {
    color: #a4d8f5;
  }
  :where(html[data-theme="dark"]) .ww-url-path {
    color: #f4c19b;
  }
  :where(html[data-theme="dark"]) .ww-request-log li {
    background: var(--webapp-soft);
  }
  :where(html[data-theme="dark"]) .ww-request-log .ww-log-idle {
    color: var(--webapp-muted);
    background: none;
  }
  :where(html[data-theme="dark"]) .ww-request-log .ww-log-ok {
    background: var(--ww-ok-soft);
  }
  :where(html[data-theme="dark"]) .ww-request-log .ww-log-error {
    background: var(--ww-error-soft);
    color: var(--ww-error-text);
  }
  :where(html[data-theme="dark"]) .ww-request-log .ww-log-warn {
    background: #43361b;
    color: var(--ww-warn-text);
  }
  :where(html[data-theme="dark"]) .ww-code-editor {
    border: 1px solid var(--webapp-line);
    background: var(--webapp-code);
    color: var(--webapp-code-text);
  }
  :where(html[data-theme="dark"]) .ww-preview-frame {
    border: 1px solid var(--webapp-line);
    background: #1d2734;
  }
  :where(html[data-theme="dark"]) .ww-spec-part {
    background: #1d2734;
  }
  :where(html[data-theme="dark"]) .ww-spec-verdict {
    color: var(--webapp-accent-text);
  }
  :where(html[data-theme="dark"]) .ww-selector-sample {
    border: 1px solid var(--webapp-line);
  }
  :where(html[data-theme="dark"]) .ww-selector-sample * {
    border: 1px dashed transparent;
  }
  :where(html[data-theme="dark"]) .ww-selector-sample nav, :where(html[data-theme="dark"]) .ww-selector-sample footer {
    background: var(--webapp-soft);
  }
  :where(html[data-theme="dark"]) .ww-selector-sample .card {
    border-color: var(--webapp-line);
  }
  :where(html[data-theme="dark"]) .ww-selector-sample .is-matched {
    outline: 3px solid #a6803f;
    background: #483d1e;
  }
  :where(html[data-theme="dark"]) .ww-box-margin {
    background: repeating-linear-gradient(45deg, #4e3b20, #4e3b20 6px, #42311b 6px, #42311b 12px);
    outline: 1px dashed #f3c48f;
  }
  :where(html[data-theme="dark"]) .ww-box {
    border-color: #d2dae6;
    background: linear-gradient(#213651, #213651) content-box, #235534 padding-box;
  }
  :where(html[data-theme="dark"]) .ww-box-content-label {
    color: #aabced;
  }
  :where(html[data-theme="dark"]) .ww-box-legend .is-margin::before {
    background: #4e3b20;
    outline: 1px dashed #f3c48f;
  }
  :where(html[data-theme="dark"]) .ww-box-legend .is-border::before {
    background: #1f2937;
  }
  :where(html[data-theme="dark"]) .ww-box-legend .is-padding::before {
    background: #235534;
  }
  :where(html[data-theme="dark"]) .ww-box-legend .is-content::before {
    background: #213651;
  }
  :where(html[data-theme="dark"]) .ww-formula {
    background: var(--webapp-soft);
  }
  :where(html[data-theme="dark"]) .ww-display-stage {
    border: 1px solid var(--webapp-line);
  }
  :where(html[data-theme="dark"]) .ww-display-item {
    border: 2px solid var(--webapp-accent);
    background: var(--webapp-accent-soft);
    color: var(--webapp-accent-text);
  }
  :where(html[data-theme="dark"]) .ww-flex-stage {
    border: 2px dashed var(--webapp-accent);
    background: var(--webapp-soft);
  }
  :where(html[data-theme="dark"]) .ww-flex-item {
    border: 2px solid #fff;
    background: var(--webapp-accent);
    color: #fff;
  }
  :where(html[data-theme="dark"]) .ww-format-feedback.is-ok {
    color: var(--ww-ok-text);
  }
  :where(html[data-theme="dark"]) .ww-format-feedback.is-error {
    color: var(--ww-error-text);
  }
  :where(html[data-theme="dark"]) .ww-media-frame {
    border: 3px solid #d2dae6;
    background: repeating-conic-gradient(#263243 0% 25%, #1d2734 0% 50%) 0 0 / 20px 20px;
  }
  :where(html[data-theme="dark"]) .ww-type-sample {
    border: 1px solid var(--webapp-line);
  }
  :where(html[data-theme="dark"]) .ww-states-stage {
    border: 1px solid var(--webapp-line);
  }
  :where(html[data-theme="dark"]) .ww-states-input {
    border: 1px solid var(--webapp-line);
  }
  :where(html[data-theme="dark"]) .ww-demo-btn {
    border: 0;
    background: #2563eb;
    color: #fff;
  }
  :where(html[data-theme="dark"]) .ww-pos-window {
    border: 2px solid #d2dae6;
  }
  :where(html[data-theme="dark"]) .ww-pos-nav {
    background: #1f2937;
    color: #fff;
  }
  :where(html[data-theme="dark"]) .ww-pos-card {
    border: 1px solid var(--webapp-line);
    background: #1d2734;
  }
  :where(html[data-theme="dark"]) .ww-pos-picture {
    background: linear-gradient(135deg, #2c496d, #34d399);
    color: #fff;
  }
  :where(html[data-theme="dark"]) .ww-pos-badge {
    background: #ea580c;
    color: #fff;
  }
  :where(html[data-theme="dark"]) .ww-pos-filler {
    background: var(--webapp-soft);
  }
  :where(html[data-theme="dark"]) .ww-resp-viewport {
    border: 2px solid #d2dae6;
    background: #1d2734;
  }
  :where(html[data-theme="dark"]) .ww-resp-header {
    background: #1f2937;
    color: #fff;
  }
  :where(html[data-theme="dark"]) .ww-resp-card {
    background: var(--webapp-accent-soft);
    color: var(--webapp-accent-text);
  }
  :where(html[data-theme="dark"]) .ww-grid-stage {
    border: 2px dashed var(--webapp-accent);
    background: var(--webapp-soft);
  }
  :where(html[data-theme="dark"]) .ww-grid-item {
    background: var(--webapp-accent);
    color: #fff;
  }
  :where(html[data-theme="dark"]) .ww-grid-area-header {
    background: #1f2937;
  }
  :where(html[data-theme="dark"]) .ww-grid-area-sidebar {
    background: #7c3aed;
  }
  :where(html[data-theme="dark"]) .ww-grid-area-main {
    background: var(--webapp-accent);
  }
  :where(html[data-theme="dark"]) .ww-grid-area-footer {
    background: #475569;
  }
  :where(html[data-theme="dark"]) .ww-editor {
    border: 1px solid var(--webapp-line);
    background: var(--webapp-code);
  }
  :where(html[data-theme="dark"]) .ww-editor:focus-within {
    outline: 3px solid var(--webapp-accent);
  }
  :where(html[data-theme="dark"]) .ww-gutter {
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    color: #adb5bf;
  }
  :where(html[data-theme="dark"]) .ww-gutter .is-marked {
    color: #fca5a5;
  }
  :where(html[data-theme="dark"]) .ww-editor .ww-code-editor {
    border: 0;
    background: transparent;
  }
  :where(html[data-theme="dark"]) .ww-editor .ww-code-editor:focus {
    outline: none;
  }
  :where(html[data-theme="dark"]) .ww-editor.is-readonly .ww-code-editor {
    color: #b9c7d8;
  }
  :where(html[data-theme="dark"]) .ww-lint-item {
    border: 1px solid color-mix(in srgb, var(--ww-error) 35%, transparent);
    background: var(--ww-error-soft);
    color: var(--ww-error-text);
  }
  :where(html[data-theme="dark"]) .ww-requirements li[tabindex]:hover, :where(html[data-theme="dark"]) .ww-requirements li[tabindex]:focus {
    outline: none;
  }
  :where(html[data-theme="dark"]) .ww-active-task {
    border-left: 4px solid var(--webapp-accent);
    background: var(--webapp-surface);
  }
  :where(html[data-theme="dark"]) .ww-probe-frame {
    border: 0;
  }
  :where(html[data-theme="dark"]) .ww-hint-btn {
    border: 0;
    background: none;
    color: var(--webapp-accent-text);
  }
  :where(html[data-theme="dark"]) .ww-hint-list li {
    border-left: 3px solid var(--webapp-accent);
    background: var(--webapp-soft);
  }
  :where(html[data-theme="dark"]) .ww-task.is-active {
    border-color: var(--webapp-accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--webapp-accent) 25%, transparent);
  }
  :where(html[data-theme="dark"]) .ww-complete {
    border: 1px solid color-mix(in srgb, var(--ww-ok) 40%, transparent);
    background: var(--ww-ok-soft);
    color: var(--ww-ok-text);
  }
  :where(html[data-theme="dark"]) .ww-focus {
    border-left: 4px solid var(--webapp-accent);
    background: var(--webapp-soft);
  }
  :where(html[data-theme="dark"]) .ww-nav-group {
    color: var(--webapp-muted);
  }
  @media (max-width: 980px) {
    :where(html[data-theme="dark"]) .ww-nav-toggle {
      border: 1px solid var(--webapp-line);
      background: var(--webapp-surface);
      color: var(--webapp-ink);
    }
    :where(html[data-theme="dark"]) .ww-nav-toggle-hint {
      color: var(--webapp-accent-text);
    }
    :where(html[data-theme="dark"]) .ww-sidebar.is-nav-open .ww-nav-panel {
      border: 1px solid var(--webapp-line);
      background: var(--webapp-surface);
      box-shadow: 0 18px 40px rgba(15, 23, 42, 0.28);
    }
    :where(html[data-theme="dark"]) .ww-nav-btn {
      border-color: transparent;
      background: transparent;
    }
    :where(html[data-theme="dark"]) .ww-nav-panel .ww-reset {
      border-top: 1px solid var(--webapp-line);
    }
  }
  @media (max-width: 760px) {
    :where(html[data-theme="dark"]) .ww-view-switch {
      border: 1px solid var(--webapp-line);
      background: var(--webapp-surface);
    }
    :where(html[data-theme="dark"]) .ww-view-tab {
      border: 0;
      background: transparent;
      color: var(--webapp-ink);
    }
    :where(html[data-theme="dark"]) .ww-view-tab[aria-pressed="true"] {
      background: var(--webapp-accent);
      color: #fff;
    }
  }
}