/* app */
html[data-theme="dark"] { color: #e4e9f4; background: #292c32; --ink: #e4e9f4; --muted: #acb3c1; --line: #474b53; --blue: #8db3ff; --blue-dark: #9dbfff; --green: #8bc89c; --red: #f49478; --appbar: 56px; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
html[data-theme="dark"] body { background: #292c32; }
html[data-theme="dark"] button { color: inherit; border: 0; background: none; }
html[data-theme="dark"] a { color: inherit; }
html[data-theme="dark"] button:focus-visible, html[data-theme="dark"] a:focus-visible, html[data-theme="dark"] summary:focus-visible, html[data-theme="dark"] input:focus-visible, html[data-theme="dark"] select:focus-visible, html[data-theme="dark"] [tabindex]:focus-visible { outline: 3px solid #7299f0; outline-offset: 2px; }
html[data-theme="dark"] .icon { fill: none; stroke: currentColor; }
html[data-theme="dark"] kbd { border: 1px solid #4a4f59; border-bottom-width: 2px; border-radius: 4px; background: #23262c; color: #b5c2d8; }
html[data-theme="dark"] .appbar { background: #23262c; border-bottom: 1px solid var(--line); }
html[data-theme="dark"] .brand { text-decoration: none; }
html[data-theme="dark"] .appbar-divider { background: var(--line); }
html[data-theme="dark"] .lessons-button { border: 1px solid #49505a; border-radius: 8px; color: #c6d7f5; }
html[data-theme="dark"] .lessons-button:hover { background: #292d33; }
html[data-theme="dark"] .course-switch > button { border-radius: 8px; color: #d2ddf3; }
html[data-theme="dark"] .course-switch > button:hover { background: #292d33; }
html[data-theme="dark"] .course-switch > button > .icon { color: #a9b2bf; }
html[data-theme="dark"] .course-dot { border-radius: 6px; color: #9dbed7; background: #2a2e34; }
html[data-theme="dark"] .menu-label { color: #a7b2c4; }
html[data-theme="dark"] .course-menu a[aria-current] { background: #292e36; color: #accaff; }
html[data-theme="dark"] .course-menu .menu-check { color: var(--blue); }
html[data-theme="dark"] .menu-note { color: #a7b2c4; }
html[data-theme="dark"] .appbar-progress { color: #a9b5c6; }
html[data-theme="dark"] .upgrade-link { color: var(--blue); text-decoration: underline; }
html[data-theme="dark"] .upgrade-link:hover { color: var(--blue-dark); }
html[data-theme="dark"] .plan-badge { color: #acc0b3; }
html[data-theme="dark"] .plan-badge .icon { color: #91c278; }
html[data-theme="dark"] .theme-button { border-radius: 8px; color: #b5c2d8; }
html[data-theme="dark"] .theme-button:hover { background: #2b2e34; color: var(--ink); }
html[data-theme="dark"] .theme-button:hover::after, html[data-theme="dark"] .theme-button:focus-visible::after { border-radius: 6px; background: #20242c; color: #fff; }
html[data-theme="dark"] .account-button { border: 1px solid #474d59; border-radius: 999px; background: #23262c; color: #d0ddf5; }
html[data-theme="dark"] .account-button:hover { background: #292c33; }
html[data-theme="dark"] .account-button > .icon { color: #a9b2bf; }
html[data-theme="dark"] .account-avatar { border-radius: 50%; background: #2d313a; color: #b1c2e2; }
html[data-theme="dark"] .menu { background: #23262c; border: 1px solid #494f5b; border-radius: 10px; box-shadow: 0 18px 50px #121e3a26; }
html[data-theme="dark"] .menu-head { border-bottom: 1px solid var(--line); }
html[data-theme="dark"] .menu-head span { color: var(--muted); }
html[data-theme="dark"] .menu a, html[data-theme="dark"] .menu button { border-radius: 6px; color: #cbd5e8; text-decoration: none; }
html[data-theme="dark"] .menu a:hover, html[data-theme="dark"] .menu button:hover { background: #2b2e34; }
html[data-theme="dark"] .menu .icon { color: #a7b1c6; }
html[data-theme="dark"] .menu hr { border: 0; border-top: 1px solid var(--line); }
html[data-theme="dark"] .menu-switch { border-radius: 8px; background: #434752; }
html[data-theme="dark"] .menu-switch::after { border-radius: 50%; background: #23262c; }
html[data-theme="dark"] [aria-checked="true"] > .menu-switch { background: var(--blue); }
html[data-theme="dark"] .drawer { background: #20232b; color: #e1e4eb; box-shadow: 0 0 50px #0006; }
html[data-theme="dark"] .scrim { background: #15213466; }
html[data-theme="dark"] .eyebrow { color: #aeb5c5; }
html[data-theme="dark"] .drawer-progress { color: #b7becc; }
html[data-theme="dark"] .drawer-close { border-radius: 7px; color: #b7bfce; }
html[data-theme="dark"] .drawer-close:hover { background: #30343f; color: #fff; }
html[data-theme="dark"] .drawer .progress-track { background: #495161; border-radius: 3px; }
html[data-theme="dark"] .progress-fill { background: #90b2fd; }
html[data-theme="dark"] .side-search { border: 1px solid #3d424f; border-radius: 7px; background: #2a2e38; color: #9aa3b5; }
html[data-theme="dark"] .side-search input { border: 0; outline: 0; background: transparent; color: #fff; }
html[data-theme="dark"] .side-search input::placeholder { color: #a8b1c4; }
html[data-theme="dark"] .side-section summary { border-radius: 7px; color: #d5d9e2; }
html[data-theme="dark"] .side-section summary:hover { background: #2a2e38; }
html[data-theme="dark"] .side-section summary .icon { color: #a8b1c4; }
html[data-theme="dark"] .nav-count { color: #adb7cc; }
html[data-theme="dark"] .lesson-nav { border-radius: 7px; color: #b7bfce; text-decoration: none; }
html[data-theme="dark"] .lesson-nav.current { background: #324568; color: #fff; }
html[data-theme="dark"] .lesson-nav.available:hover, html[data-theme="dark"] .lesson-nav.done:hover, html[data-theme="dark"] .lesson-nav.locked:hover { background: #303e58; }
html[data-theme="dark"] .lesson-nav.locked { color: #a9b1c3; }
html[data-theme="dark"] .lesson-num { border: 1px solid #586071; border-radius: 7px; }
html[data-theme="dark"] .current .lesson-num { background: #86aafa; border-color: #86aafa; color: #192b4e; }
html[data-theme="dark"] .done .lesson-num { background: #2f4d42; border-color: #4b7b65; color: #a8e1c3; }
html[data-theme="dark"] .locked .lesson-num { border-style: dashed; color: #a9b1c3; }
html[data-theme="dark"] .lesson-name small { color: #8f9ab0; }
html[data-theme="dark"] .current .lesson-name small { color: #b9c9ec; }
html[data-theme="dark"] .drawer-foot { border-top: 1px solid #3b3f49; }
html[data-theme="dark"] .side-help { color: #bac3d3; text-decoration: none; border-radius: 7px; }
html[data-theme="dark"] .side-help:hover { color: #fff; background: #2a2e38; }
html[data-theme="dark"] .intro-kicker { color: #aab7cc; }
html[data-theme="dark"] .intro-row p { color: var(--muted); }
html[data-theme="dark"] .primary, html[data-theme="dark"] .secondary { border-radius: 7px; text-decoration: none; }
html[data-theme="dark"] .primary { background: var(--blue); border: 1px solid var(--blue); color: #fff; }
html[data-theme="dark"] .primary:hover { background: var(--blue-dark); }
html[data-theme="dark"] .primary:disabled { background: #31343b; border-color: #474d57; color: #a7b2c3; }
html[data-theme="dark"] .primary.danger-button { background: #b5472f; border-color: #b5472f; }
html[data-theme="dark"] .primary.danger-button:hover { background: #9c3c27; }
html[data-theme="dark"] .secondary { background: #23262c; border: 1px solid #475263; color: #9cc2fa; }
html[data-theme="dark"] .secondary:hover { background: #2a2d33; }
html[data-theme="dark"] .secondary:disabled { color: #a8b2c2; background: #282b31; }
html[data-theme="dark"] .text-button { color: #a6c3eb; text-decoration: none; }
html[data-theme="dark"] .text-button:hover { color: var(--blue); text-decoration: underline; }
html[data-theme="dark"] .tag { border-radius: 5px; background: #2a3039; color: #9bbaec; }
html[data-theme="dark"] .tag.muted { background: #2b2e34; color: #abb6c7; }
html[data-theme="dark"] .tag.free { background: #3a2b29; color: #fd9082; }
html[data-theme="dark"] .tag.video-tag { background: #312d3c; color: #b6afff; }
html[data-theme="dark"] .mini-track { border-radius: 2px; background: #31343a; }
html[data-theme="dark"] .mini-track i { background: #6f95e8; border-radius: 2px; }
html[data-theme="dark"] .icon-button { border-radius: 5px; color: #a6b2c5; }
html[data-theme="dark"] .icon-button:hover { color: #9bc1ff; background: #2a303a; }
html[data-theme="dark"] .home-intro { background: #23262c; border: 1px solid var(--line); border-radius: 12px; }
html[data-theme="dark"] .home-intro strong { color: var(--ink); }
html[data-theme="dark"] .block-head > p { color: var(--muted); }
html[data-theme="dark"] .course-dot.tone-violet, html[data-theme="dark"] .course-dot.tone-indigo { color: #afa6fb; background: #312d3c; }
html[data-theme="dark"] .course-dot.tone-pink { color: #ee8dc1; background: #3a2b33; }
html[data-theme="dark"] .course-dot.tone-teal { color: #6fc0ca; background: #233231; }
html[data-theme="dark"] .course-dot.tone-orange, html[data-theme="dark"] .course-dot.tone-amber { color: #e7a057; background: #372b19; }
html[data-theme="dark"] .course-dot.tone-green { color: #9bbe7d; background: #2b3024; }
html[data-theme="dark"] .search-box { border: 1px solid #49525f; border-radius: 8px; background: #23262c; color: #a9b2bf; }
html[data-theme="dark"] .search-box:focus-within { border-color: #5b82d9; box-shadow: 0 0 0 3px #3f4757; }
html[data-theme="dark"] .search-box input { border: 0; outline: 0; background: transparent; color: var(--ink); }
html[data-theme="dark"] .filter-chips { background: #2d3036; border-radius: 8px; }
html[data-theme="dark"] .filter-chips button { border-radius: 6px; color: #b7c2d6; }
html[data-theme="dark"] .filter-chips button.selected { background: #23262c; color: #a5c7ff; box-shadow: 0 1px 2px #1c315a1f; }
html[data-theme="dark"] .curriculum-notice { border: 1px solid #534868; border-radius: 10px; background: #2d2a35; }
html[data-theme="dark"] .curriculum-notice > .icon { color: #b2a2fd; }
html[data-theme="dark"] .curriculum-notice p { color: #c9c3eb; }
html[data-theme="dark"] .part-head { border-bottom: 2px solid #444b55; }
html[data-theme="dark"] .part-kicker { color: var(--blue); }
html[data-theme="dark"] .part-interview .part-kicker { color: #dfaa69; }
html[data-theme="dark"] .part-build .part-kicker { color: #78c49e; }
html[data-theme="dark"] .part-text p:not(.part-kicker) { color: var(--muted); }
html[data-theme="dark"] .part-progress strong span { color: var(--muted); }
html[data-theme="dark"] .part-progress small { color: var(--muted); }
html[data-theme="dark"] .drawer-part { color: #8f9bb3; }
html[data-theme="dark"] .part-tab { border: 1px solid #3d424f; border-radius: 9px; background: #262a33; color: #b7bfce; }
html[data-theme="dark"] .part-tab:hover { background: #2d323d; border-color: #4d5466; color: #e1e4eb; }
html[data-theme="dark"] .part-tab[aria-selected="true"] { background: #2c3a55; border-color: #86aafa; color: #fff; }
html[data-theme="dark"] .part-tab:focus-visible { outline: 2px solid #86aafa; outline-offset: 2px; }
html[data-theme="dark"] .part-tab-kicker { color: #8f9bb3; }
html[data-theme="dark"] .part-tab[aria-selected="true"] .part-tab-kicker { color: #a9c0f5; }
html[data-theme="dark"] .part-tab-count { color: #adb7cc; }
html[data-theme="dark"] .part-tab-bar { border-radius: 2px; background: #495161; }
html[data-theme="dark"] .part-tab-bar i { background: #90b2fd; }
html[data-theme="dark"] .part-blurb { color: #9aa3b5; }
html[data-theme="dark"] .part-tabs.searching .part-tab[aria-selected="true"] { background: #262a33; border-color: #3d424f; color: #b7bfce; }
html[data-theme="dark"] .part-tabs.searching .part-tab[aria-selected="true"] .part-tab-kicker { color: #8f9bb3; }
html[data-theme="dark"] .section-card { background: #23262c; border: 1px solid var(--line); border-radius: 10px; }
html[data-theme="dark"] .section-card-head { border-bottom: 1px solid var(--line); }
html[data-theme="dark"] .section-index { border-radius: 8px; border: 1px solid #475060; color: #9bbaec; }
html[data-theme="dark"] .section-index.complete { background: #263029; border-color: #3e6c51; color: #94d1a4; }
html[data-theme="dark"] .section-title p { color: var(--muted); }
html[data-theme="dark"] .lesson-row { text-decoration: none; color: #d3dcec; }
html[data-theme="dark"] .lesson-row:hover { background: #272b31; }
html[data-theme="dark"] .lesson-status { color: #a2b2cd; }
html[data-theme="dark"] .lesson-row.done .lesson-status { color: #83c394; }
html[data-theme="dark"] .lesson-row.locked { color: #a9b2c1; }
html[data-theme="dark"] .lesson-row.locked .lesson-status { color: #9aa2b1; }
html[data-theme="dark"] .lesson-row-title small { color: #a8b2c2; }
html[data-theme="dark"] .row-end { color: #a0a8b6; }
html[data-theme="dark"] .empty-filter { color: var(--muted); }
html[data-theme="dark"] .ide { --split: 44%; }
html[data-theme="dark"] .pane { background: #23262c; border: 1px solid var(--line); border-radius: 10px; }
html[data-theme="dark"] .pane-head { border-bottom: 1px solid var(--line); }
html[data-theme="dark"] .done-badge { color: #8fcca1; }
html[data-theme="dark"] .pane-tab { color: #aab4c6; }
html[data-theme="dark"] .pane-tab:hover { color: #a5c7ff; }
html[data-theme="dark"] .pane-tab.selected { color: #a5c7ff; }
html[data-theme="dark"] .pane-tab.selected:after { background: var(--blue); }
html[data-theme="dark"] .pane-wide { border-radius: 7px; color: #b3c1e0; }
html[data-theme="dark"] .pane-wide:hover { background: #2b2e35; color: #a5c7ff; }
html[data-theme="dark"] .pane-wide-title { border-right: 1px solid var(--line); color: #e3ebff; }
@media (min-width: 1001px) {
html[data-theme="dark"] .ide.lesson-max .vl-pane { --cell: 56px; --gap: 8px; }
html[data-theme="dark"] .ide.lesson-max .vl-pane .w-grid { --gc: 56px; --gg: 6px; }
}
html[data-theme="dark"] .tab-count { border-radius: 9px; background: #32353b; color: #b5c2d8; }
html[data-theme="dark"] .pane-step { border-bottom: 1px solid var(--line); }
html[data-theme="dark"] .pane-note, html[data-theme="dark"] .muted-note { color: var(--muted); }
html[data-theme="dark"] .resizer span { border-radius: 2px; background: #3b424c; }
html[data-theme="dark"] .resizer:hover span, html[data-theme="dark"] .resizer.dragging span, html[data-theme="dark"] .resizer:focus-visible span { background: #7f9fe0; }
html[data-theme="dark"] .statement { color: #c5cfde; }
html[data-theme="dark"] .statement hr { border: 0; border-top: 1px solid var(--line); }
html[data-theme="dark"] .statement img { border-radius: 6px; }
html[data-theme="dark"] .statement table { border-collapse: collapse; }
html[data-theme="dark"] .statement td, html[data-theme="dark"] .statement th { border: 1px solid var(--line); }
html[data-theme="dark"] .statement pre, html[data-theme="dark"] .source-code { background: #282b31; border: 1px solid #454951; border-radius: 7px; color: #c7d8f3; }
html[data-theme="dark"] .statement pre code { background: none; border: 0; color: inherit; }
html[data-theme="dark"] .statement code, html[data-theme="dark"] .hint-box code, html[data-theme="dark"] .message-content code { background: #2b2e35; border: 1px solid #444a54; border-radius: 4px; color: #b7d2ff; }
html[data-theme="dark"] .statement iframe { border: 0; }
html[data-theme="dark"] .statement .hl, html[data-theme="dark"] .message-content code.hl { color: #e2e9fa; }
html[data-theme="dark"] .hl .ace_keyword, html[data-theme="dark"] .hl .ace_storage, html[data-theme="dark"] .hl .ace_support.ace_function, html[data-theme="dark"] .hl .ace_constant.ace_language { color: #d7e5ff; }
html[data-theme="dark"] .hl .ace_string { color: #61cd5a; }
html[data-theme="dark"] .hl .ace_comment { color: #ffb9ad; }
html[data-theme="dark"] .hl .ace_constant.ace_numeric { color: #7fcfce; }
html[data-theme="dark"] .hl .ace_keyword.ace_operator, html[data-theme="dark"] .hl .ace_paren, html[data-theme="dark"] .hl .ace_punctuation { color: #bcbe6a; }
html[data-theme="dark"] .hl .ace_variable.ace_language, html[data-theme="dark"] .hl .ace_support.ace_type, html[data-theme="dark"] .hl .ace_storage.ace_type, html[data-theme="dark"] .hl .ace_entity.ace_name { color: #ffb9fb; }
html[data-theme="dark"] .hl .ace_meta.ace_tag, html[data-theme="dark"] .hl .ace_entity.ace_other.ace_attribute-name { color: #d7e5ff; }
html[data-theme="dark"] .statement [data-toggle="collapse"] { border: 1px solid #444b54; border-radius: 8px; background: #272a30; color: #abcbff; text-decoration: none; }
html[data-theme="dark"] .statement [data-toggle="collapse"]:hover { background: #2b2e34; border-color: #435169; }
html[data-theme="dark"] .statement [data-toggle="collapse"]:after { border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; }
html[data-theme="dark"] .statement .collapse { border-left: 2px solid #444b54; }
html[data-theme="dark"] .statement .collapse .collapse { border-left-color: #43474f; }
html[data-theme="dark"] .block-label { color: #c1bfff; }
html[data-theme="dark"] .video-group { color: #aab7cc; }
html[data-theme="dark"] .video-chip { border: 1px solid #544a72; border-radius: 6px; color: #bebaff; background: #2d2a35; }
html[data-theme="dark"] .video-chip:hover, html[data-theme="dark"] .video-chip.selected { background: #352f45; border-color: #a99ae0; }
html[data-theme="dark"] .video-frame { background: #111; border-radius: 8px; }
html[data-theme="dark"] .video-frame iframe { border: 0; }
html[data-theme="dark"] .message-avatar { background: #2b2e35; color: #91bdff; border-radius: 7px; }
html[data-theme="dark"] .message-content { color: #d2dae8; }
html[data-theme="dark"] .message-content pre { background: #282b31; border: 1px solid #454951; border-radius: 7px; }
html[data-theme="dark"] .message-content pre code { background: none; border: 0; }
html[data-theme="dark"] .chat-message.user .message-avatar { background: #2f3238; color: #bcc5d6; }
html[data-theme="dark"] .chat-message.user .message-content { background: #292c33; border-radius: 0 8px 8px 8px; }
html[data-theme="dark"] .chat-message.error .message-content { color: #f2a984; }
html[data-theme="dark"] .loading-dots i { background: #6b85b5; border-radius: 50%; animation: pulse 1.2s infinite; }
html[data-theme="dark"] .quick-prompts { border-top: 1px solid var(--line); }
html[data-theme="dark"] .quick-prompt { border: 1px solid #484e59; border-radius: 999px; color: #a7c3ea; background: #26292f; }
html[data-theme="dark"] .quick-prompt:hover { background: #2a303a; border-color: #445b87; }
html[data-theme="dark"] .composer-box { border: 1px solid #515e71; border-radius: 10px; background: #23262c; box-shadow: 0 2px 5px #172c4910; }
html[data-theme="dark"] .composer-box:focus-within { border-color: #5b82d9; box-shadow: 0 0 0 3px #3f4757; }
html[data-theme="dark"] .composer textarea { outline: none; border: 0; background: transparent; color: #d6e3f7; }
html[data-theme="dark"] .composer-note { color: #a6b2c6; }
html[data-theme="dark"] .send-button { border-radius: 7px; background: var(--blue); color: #fff; }
html[data-theme="dark"] .send-button:hover { background: var(--blue-dark); }
html[data-theme="dark"] .send-button:disabled { background: #333843; color: #a5b2c8; }
html[data-theme="dark"] .chat-caption { color: #aab1c0; }
html[data-theme="dark"] .code-pane { background: var(--code-bg); border: 1px solid #0b0e17; border-radius: 10px; color: var(--code-text); box-shadow: 0 6px 24px #0b10201f; }
html[data-theme="dark"] .code-head { background: var(--code-panel); border-bottom: 1px solid var(--code-line); }
html[data-theme="dark"] .code-tab { color: var(--code-muted); }
html[data-theme="dark"] .code-tab:hover { color: #fff; }
html[data-theme="dark"] .code-tab.selected { color: #fff; }
html[data-theme="dark"] .code-tab.selected:after { background: var(--code-accent); }
html[data-theme="dark"] .saved { color: #8fc9a4; }
html[data-theme="dark"] .font-size { color: var(--code-muted); }
html[data-theme="dark"] .font-size select { border: 0; background: transparent; color: var(--code-text); }
html[data-theme="dark"] .font-size select option { color: #eeeeee; }
html[data-theme="dark"] .dark-icon-button { border-radius: 6px; color: #9aa3b5; }
html[data-theme="dark"] .dark-icon-button:hover, html[data-theme="dark"] .dark-icon-button[aria-pressed="true"] { background: var(--code-raised); color: #fff; }
html[data-theme="dark"] .step-bar { background: #141a2b; border-bottom: 1px solid var(--code-line); }
html[data-theme="dark"] .lesson-step { color: #a9bbdf; }
html[data-theme="dark"] .lesson-step .icon { color: var(--code-accent); }
html[data-theme="dark"] .step-track li { border-radius: 6px; border: 1px solid #3a435b; color: #aab3c6; }
html[data-theme="dark"] .step-track li.done { background: #1d3a2c; border-color: #3f6f55; color: #9fe0bd; }
html[data-theme="dark"] .step-track li.current { background: #4a7cf0; border-color: #4a7cf0; color: #fff; }
html[data-theme="dark"] .bar-button { border-radius: 6px; color: var(--code-muted); }
html[data-theme="dark"] .bar-button:hover { background: var(--code-raised); color: #dbe6ff; }
html[data-theme="dark"] .mode-switch { color: #aab3c6; }
html[data-theme="dark"] .switch { border-radius: 9px; background: #3a435b; }
html[data-theme="dark"] .switch:after { border-radius: 50%; background: #23262c; }
html[data-theme="dark"] .mode-switch input:checked + .switch { background: #4a7cf0; }
html[data-theme="dark"] .mode-switch.locked { color: #a8b1c7; }
html[data-theme="dark"] .mode-switch.locked .switch { background: #3f5a99; }
html[data-theme="dark"] .mode-switch input:focus-visible + .switch { outline: 3px solid #7299f0; outline-offset: 2px; }
html[data-theme="dark"] .task-panel { background: #141a2b; border-bottom: 1px solid var(--code-line); }
html[data-theme="dark"] .task-card { border-radius: 8px; background: #18223a; border: 1px solid #2f4170; box-shadow: inset 3px 0 0 #6f95e8; color: #e6eaf2; }
html[data-theme="dark"] .task-panel:hover .task-card { border-color: #4a64a8; background: #1b2744; }
html[data-theme="dark"] .task-card.solo { box-shadow: inset 3px 0 0 #3a435b; border-color: #2c3550; background: #161d30; }
html[data-theme="dark"] .task-card.done { box-shadow: inset 3px 0 0 #5fae7f; }
html[data-theme="dark"] .task-card.done .icon { color: #8fd3a8; }
html[data-theme="dark"] .task-meta { color: #a8b1c7; }
html[data-theme="dark"] .task-num, html[data-theme="dark"] .tour-num { border-radius: 6px; background: #4a7cf0; color: #fff; }
html[data-theme="dark"] .task-card-step { color: #9fbaf6; }
html[data-theme="dark"] .step-size { border-radius: 10px; background: #51452d; color: #f4e8d1; }
html[data-theme="dark"] .task-link { color: #9fbaf6; text-decoration: underline; }
html[data-theme="dark"] .task-link:hover { color: #dbe6ff; }
html[data-theme="dark"] .task-card-tools button { border-radius: 5px; color: #9aa4ba; }
html[data-theme="dark"] .task-card-tools button:hover:not(:disabled) { background: #24314f; color: #dbe6ff; }
html[data-theme="dark"] .task-card-tools button:disabled { color: #a7b1ca; }
html[data-theme="dark"] .task-card-text { color: #eef1f7; }
html[data-theme="dark"] .task-card-text a { color: #9fbaf6; }
html[data-theme="dark"] .task-card code, html[data-theme="dark"] .task-ahead code { background: #222b42; border: 1px solid #2e3853; border-radius: 4px; color: #c4d4fb; }
html[data-theme="dark"] .task-card .hint-box { border: 1px solid #5a4a24; border-radius: 6px; background: #262113; color: #f1dfad; }
html[data-theme="dark"] .task-card .hint-box code { background: #3a3220; border-color: #5a4a24; color: #ffe6a6; }
html[data-theme="dark"] .hint-item + .hint-item { border-top: 1px dashed #5a4a24; }
html[data-theme="dark"] .hint-count { color: #d7bd77; }
html[data-theme="dark"] .task-card-note { color: #9fe0bd; }
html[data-theme="dark"] .task-ahead { border-radius: 8px; background: #2e2413; border: 1px solid #6a5322; color: #f3dfae; }
html[data-theme="dark"] .task-ahead > .icon { color: #f2c46a; }
html[data-theme="dark"] .task-ahead .task-link { color: #ffe2a3; }
html[data-theme="dark"] .task-ahead-actions button { border-radius: 5px; border: 1px solid #7a6230; background: #3a2e17; color: #ffe2a3; }
html[data-theme="dark"] .task-ahead-actions button:hover { background: #4a3a1c; }
html[data-theme="dark"] .task-ahead-actions button[data-check-all] { border-color: #34497a; background: #1f2b49; color: #c4d4fb; }
html[data-theme="dark"] .console-ahead { color: #f3dfae !important; }
html[data-theme="dark"] .console-ahead .icon { color: #f2c46a; }
html[data-theme="dark"] .step-dock .task-card { background: #282b31; border-color: #414c5f; box-shadow: inset 3px 0 0 #6f95e8; color: #cdd9ea; }
html[data-theme="dark"] .step-dock:hover .task-card { border-color: #41557c; background: #292e36; }
html[data-theme="dark"] .step-dock .task-link { color: #9fb2d6; }
html[data-theme="dark"] .step-dock .task-meta { color: #a8b1c5; }
html[data-theme="dark"] .step-dock .task-card-text { color: #dde8f8; }
html[data-theme="dark"] .step-dock .task-link:hover { color: #a9c7ff; }
html[data-theme="dark"] .step-dock .task-card-tools button { color: #aab8d3; }
html[data-theme="dark"] .step-dock .task-card-tools button:hover:not(:disabled) { background: #2d3442; color: #a9c7ff; }
html[data-theme="dark"] .step-dock .task-card-tools button:disabled { color: #a8b2c2; }
html[data-theme="dark"] .step-dock .task-card.stuck .task-card-tools button { border: 1px solid #43526f; background: #23262c; color: #a9c7ff; }
html[data-theme="dark"] .step-dock .task-card.stuck .task-card-tools button:hover:not(:disabled) { background: #292e37; }
html[data-theme="dark"] .step-dock .task-card code { background: #2b323d; border-color: #434e62; color: #b7d2ff; }
html[data-theme="dark"] .step-dock .task-card .hint-box { background: #2f291d; border-color: #614d0d; color: #d5be94; }
html[data-theme="dark"] .step-dock .task-card .hint-box code { background: #3c321a; border-color: #614d0d; color: #ddbd83; }
html[data-theme="dark"] .step-dock .hint-item + .hint-item { border-top-color: #604c10; }
html[data-theme="dark"] .step-dock .hint-count { color: #cead61; }
html[data-theme="dark"] .step-dock .task-card-note { color: #8fcca1; }
html[data-theme="dark"] .step-dock .task-card.solo { background: #282b31; border-color: #474b53; box-shadow: inset 3px 0 0 #515a6a; }
html[data-theme="dark"] .step-dock .task-card.done { box-shadow: inset 3px 0 0 #6aa47c; }
html[data-theme="dark"] .step-dock .task-card.done .icon { color: #7fc394; }
html[data-theme="dark"] .step-dock .task-ahead { background: #322a1d; border-color: #684b00; color: #ddbd83; }
html[data-theme="dark"] .step-dock .task-ahead > .icon { color: #e1a441; }
html[data-theme="dark"] .step-dock .task-ahead .task-link { color: #dfaa63; }
html[data-theme="dark"] .step-dock .task-ahead-actions button { background: #23262c; border-color: #705000; color: #deb476; }
html[data-theme="dark"] .step-dock .task-ahead-actions button:hover { background: #362b15; }
html[data-theme="dark"] .step-dock .task-ahead-actions button[data-check-all] { border-color: #43516b; background: #23262c; color: #93b8ff; }
html[data-theme="dark"] .step-dock .task-card:not(.solo) { box-shadow: inset 4px 0 0 #4a7cf0; }
html[data-theme="dark"] .step-dock .task-card:not(.solo):before, html[data-theme="dark"] .step-dock .task-card:not(.solo):after { border-style: solid; border-color: transparent; border-width: 9px 0 9px 10px; }
html[data-theme="dark"] .step-dock .task-card:not(.solo):before { border-left-color: #414c5f; }
html[data-theme="dark"] .step-dock .task-card:not(.solo):after { border-left-color: #3f434b; }
html[data-theme="dark"] .step-dock:hover .task-card:not(.solo):before { border-left-color: #41557c; }
html[data-theme="dark"] .step-dock:hover .task-card:not(.solo):after { border-left-color: #40454e; }
html[data-theme="dark"] .step-link { color: #8bafff; }
html[data-theme="dark"] .step-link-path { fill: none; stroke: currentColor; }
html[data-theme="dark"] .step-link.active { color: #8ab0ff; }
html[data-theme="dark"] .step-track li > button { border-radius: 5px; color: inherit; }
html[data-theme="dark"] .step-track li.done:hover { background: #26553e; border-color: #5fae7f; color: #c6f0d7; }
html[data-theme="dark"] .step-track li.current > button:hover { background: #5b89f5; }
html[data-theme="dark"] .step-track li.just-done { animation: dot-done .55s cubic-bezier(.3, 1.6, .5, 1); }
html[data-theme="dark"] .step-track li.just-current { animation: dot-current 1.4s ease-out; }
html[data-theme="dark"] .lesson-step.step-advance { animation: label-flash 1.2s ease-out; }
html[data-theme="dark"] .task-card.step-advance { animation: card-glow 1.5s ease-out; }
html[data-theme="dark"] .task-card.step-advance .task-card-text, html[data-theme="dark"] .task-card.step-advance .task-card-head { animation: card-in .5s cubic-bezier(.2, .8, .2, 1); }
html[data-theme="dark"] .task-card.step-advance .task-num { animation: num-pop .6s .15s cubic-bezier(.3, 1.8, .5, 1) both; }
html[data-theme="dark"] .task-panel.max-only .hint-box { box-shadow: 0 14px 34px #000b; }
html[data-theme="dark"] .tour-hole { border-radius: 10px; box-shadow: 0 0 0 9999px rgba(8, 12, 24, .62); outline: 2px solid #86aafa; }
html[data-theme="dark"] .tour-pop { border-radius: 12px; background: #23262c; color: var(--ink); box-shadow: 0 18px 60px #0007; }
html[data-theme="dark"] .tour-pop p { color: #b9c4d6; }
html[data-theme="dark"] .tour-count { color: #a8b1c3 !important; }
html[data-theme="dark"] .tour-label { color: #abcbff !important; }
html[data-theme="dark"] .tour-code { border-radius: 7px; background: #101421; color: #e6eaf2; }
html[data-theme="dark"] .tour-skip { color: #a7b1c6; }
html[data-theme="dark"] .tour-skip:hover { color: var(--ink); }
html[data-theme="dark"] .ace_marker-layer .step-line.ghost { background: rgba(134, 170, 250, .07); }
html[data-theme="dark"] .ace_marker-layer .step-line.ghost:after { color: #7f9bd6; }
html[data-theme="dark"] .ace_marker-layer .step-line.insert { background: none; }
html[data-theme="dark"] .ace_marker-layer .step-line.typed { background: rgba(134, 170, 250, .06); }
html[data-theme="dark"] .code-pane.linking .ace_marker-layer .step-line.ghost, html[data-theme="dark"] .code-pane.linking .ace_marker-layer .step-line.typed { background: rgba(134, 170, 250, .2); box-shadow: inset 2px 0 0 #86aafa; }
html[data-theme="dark"] .code-pane.linking .ace_marker-layer .step-line.insert { background: rgba(134, 170, 250, .12); }
html[data-theme="dark"] .code-pane.step-flash .ace_marker-layer .step-line { animation: step-flash 1.6s ease-out; }
html[data-theme="dark"] .ace_gutter-cell.step-here { color: #fff; }
html[data-theme="dark"] .ace_gutter-cell.step-here:before { border-radius: 4px; background: #4a7cf0; color: #fff; }
html[data-theme="dark"] .ace_marker-layer .ahead-marker { background: rgba(242, 196, 106, .13); box-shadow: inset 3px 0 0 #f2c46a; }
html[data-theme="dark"] .ace_gutter-cell.ahead-line { color: #f2c46a; background: rgba(242, 196, 106, .16); }
html[data-theme="dark"] .editor-body { background: var(--code-bg); }
html[data-theme="dark"] .preview-frame { border: 0; background: #23262c; }
html[data-theme="dark"] .ace_editor .ace_marker-layer .step-lines { background: rgba(134, 170, 250, .16); border-left: 2px solid #86aafa; }
html[data-theme="dark"] .console { border-top: 1px solid var(--code-line); background: #0c101b; }
html[data-theme="dark"] .console-head { background: var(--code-panel); color: var(--code-muted); }
html[data-theme="dark"] .console-head:hover { color: var(--code-text); }
html[data-theme="dark"] .console-title { color: #b7c2d8; }
html[data-theme="dark"] .console-status.accepted { color: #8fd3a8; }
html[data-theme="dark"] .console-status.failed, html[data-theme="dark"] .console-status.compile, html[data-theme="dark"] .console-status.runtime, html[data-theme="dark"] .console-status.timeout { color: #f2a28c; }
html[data-theme="dark"] .console-body .check-heading h3 { color: #fff; }
html[data-theme="dark"] .console-body.accepted .check-heading h3 { color: #8fd3a8; }
html[data-theme="dark"] .console-body.failed .check-heading h3, html[data-theme="dark"] .console-body.compile .check-heading h3, html[data-theme="dark"] .console-body.runtime .check-heading h3, html[data-theme="dark"] .console-body.timeout .check-heading h3 { color: #f2a28c; }
html[data-theme="dark"] .console-body .check-heading > span { color: var(--code-muted); }
html[data-theme="dark"] .console-body > p { color: #aab3c6; }
html[data-theme="dark"] .check-list li { color: #c5cad5; }
html[data-theme="dark"] .check-list .passed { color: #8fd3a8; }
html[data-theme="dark"] .check-list .failed { color: #f2a28c; }
html[data-theme="dark"] .check-list .meta { color: var(--code-muted); }
html[data-theme="dark"] .output-block h4 { color: var(--code-muted); }
html[data-theme="dark"] .console .source-code { background: #151a28; border-color: var(--code-line); color: var(--code-text); }
html[data-theme="dark"] .console .source-code.errors { color: #eef1f7; background: #1f1520; border-color: #4b2b36; }
html[data-theme="dark"] .error-message { color: #ffb6a6; }
html[data-theme="dark"] .error-line { border: 0; background: none; color: #a9c4ff; text-decoration: underline; }
html[data-theme="dark"] .error-line:hover { color: #d2e0ff; }
html[data-theme="dark"] .tests-table { border-collapse: collapse; }
html[data-theme="dark"] .tests-table th { color: var(--code-muted); border-bottom: 1px solid var(--code-line); }
html[data-theme="dark"] .tests-table td { border-bottom: 1px solid #1d2335; color: #c5cad5; }
html[data-theme="dark"] .tests-table tr.passed td:nth-child(2) { color: #8fd3a8; }
html[data-theme="dark"] .tests-table tr.failed td:nth-child(2) { color: #f2a28c; }
html[data-theme="dark"] .tests-table tr.tip td:nth-child(2) { color: #e8cf8a; }
html[data-theme="dark"] .diff-note { color: #f3dfae !important; }
html[data-theme="dark"] .console mark { border-radius: 3px; color: inherit; }
html[data-theme="dark"] .console mark.diff-yours { background: rgba(242, 120, 92, .28); }
html[data-theme="dark"] .console mark.diff-expected { background: rgba(95, 174, 127, .28); }
html[data-theme="dark"] .test-input summary { color: var(--code-muted); }
html[data-theme="dark"] .test-input summary span { color: #a7b1ca; }
html[data-theme="dark"] .test-input summary:hover { color: var(--code-text); }
html[data-theme="dark"] .failed-test h4 { color: #f2a28c; }
html[data-theme="dark"] .console .failed-test .source-code { background: #1f1520; border-color: #4b2b36; }
html[data-theme="dark"] .failed-test b { color: #f3dfae; }
html[data-theme="dark"] .failed-test.passed h4 { color: #8fd3a8; }
html[data-theme="dark"] .console .failed-test.passed .source-code { background: #151a28; border-color: var(--code-line); }
html[data-theme="dark"] .failed-test em { color: var(--code-muted); }
html[data-theme="dark"] .console-body .result-actions { background: #0c101b; border-top: 1px solid var(--code-line); }
html[data-theme="dark"] .check-button { background: #1c2336; border: 1px solid #303a54; border-radius: 6px; color: #b7cbfa; }
html[data-theme="dark"] .check-button:hover { background: #242d45; color: #dbe6ff; }
html[data-theme="dark"] .check-button.tutor-action { background: #5b47c9; border-color: #725ee6; color: #fff; }
html[data-theme="dark"] .check-button.tutor-action:hover { background: #6a56da; color: #fff; }
html[data-theme="dark"] .running { color: #aab3c6; }
html[data-theme="dark"] .running .loading-dots i { background: #86aafa; }
html[data-theme="dark"] .code-foot { background: var(--code-panel); border-top: 1px solid var(--code-line); }
html[data-theme="dark"] .code-foot kbd { background: #222b42; border-color: #34405e; color: #c5cad5; }
html[data-theme="dark"] .kbd-note { color: var(--code-muted); }
html[data-theme="dark"] .code-foot .primary { background: #3b6fe0; border-color: #3b6fe0; }
html[data-theme="dark"] .code-foot .primary:hover { background: #4d7ff0; }
html[data-theme="dark"] .code-foot .primary:disabled { background: #2a3248; border-color: #2a3248; color: #8d96ab; }
html[data-theme="dark"] .reading-video { border-bottom: 1px solid var(--line); }
html[data-theme="dark"] .reading-actions { border-top: 1px solid var(--line); }
html[data-theme="dark"] .modal-backdrop { background: #18223677; }
html[data-theme="dark"] .modal { border: 1px solid #494f5b; border-radius: 12px; background: #23262c; box-shadow: 0 24px 90px #121e3a33; }
html[data-theme="dark"] .modal > p { color: #acb8cd; }
html[data-theme="dark"] .checkpoint { border-top: 1px solid var(--line); }
html[data-theme="dark"] .checkpoint p { color: #a6b2c5; }
html[data-theme="dark"] .checkpoint button, html[data-theme="dark"] .checkpoint-link { border: 1px solid #455165; border-radius: 5px; color: #9cc2fa; background: #23262c; text-decoration: none; }
html[data-theme="dark"] .checkpoint button:hover:not(:disabled), html[data-theme="dark"] .checkpoint-link:hover { background: #2a2d33; }
html[data-theme="dark"] .checkpoint button:disabled { color: #a8b2c2; background: #282b31; }
html[data-theme="dark"] .celebration { border-radius: 50%; background: #263029; color: #7fc394; }
html[data-theme="dark"] .stat-row { border-block: 1px solid var(--line); }
html[data-theme="dark"] .stat-row span { color: #a3b2cb; }
html[data-theme="dark"] .step-code-editor { border: 1px solid #0b0e17; border-radius: 8px; }
html[data-theme="dark"] .modal-note { color: #aab4c6; }
html[data-theme="dark"] #toast { border: 1px solid #424e63; border-radius: 8px; background: #263348; color: #fff; box-shadow: 0 8px 25px #18264225; }
html[data-theme="dark"] .empty-canvas { border: 1px solid #465162; border-radius: 8px; background: #25282e; box-shadow: 7px 7px 0 #41454d; }
html[data-theme="dark"] .canvas-toolbar { border-bottom: 1px solid #434b55; }
html[data-theme="dark"] .canvas-toolbar i { border-radius: 50%; background: #3f4d62; }
html[data-theme="dark"] .canvas-content > span { background: #2f3743; border-radius: 2px; }
html[data-theme="dark"] .canvas-content > span:first-child { background: #9fb7df; }
html[data-theme="dark"] .canvas-content > div { border-radius: 8px; background: #2a313e; border: 1px solid #3f506f; color: #84b2fb; }
html[data-theme="dark"] .paywall-lead { color: #b2bfd3; }
html[data-theme="dark"] .paywall-join { color: #b2bfd3; }
html[data-theme="dark"] .paywall strong { color: var(--ink); }
html[data-theme="dark"] .paywall-benefits small { color: #a7b2c5; }
html[data-theme="dark"] .paywall-tick { border-radius: 50%; background: #28332c; color: #86ca9a; }
html[data-theme="dark"] .paywall-side { background: #292c33; border-left: 1px solid var(--line); }
html[data-theme="dark"] .paywall-video-label { color: #b2bfd3; }
html[data-theme="dark"] .paywall-video { border-radius: 10px; background: #1b2232; box-shadow: 0 10px 24px -12px #1b223288; }
html[data-theme="dark"] .paywall-video iframe { border: 0; }
html[data-theme="dark"] .paywall-quote { background: #23262c; border: 1px solid var(--line); border-radius: 10px; }
html[data-theme="dark"] .paywall-quote p { color: #becbe1; }
html[data-theme="dark"] .paywall-quote footer { color: #a7b2c5; }
html[data-theme="dark"] .paywall-done:not([hidden]) { border-bottom: 1px solid var(--line); }
html[data-theme="dark"] .paywall-complete p { color: #aab4c6; }
html[data-theme="dark"] .paywall-complete .text-button { color: var(--blue); }
html[data-theme="dark"] .booly-meme img { border-radius: 12px; box-shadow: 0 10px 26px -14px #1b223299; animation: booly-in .5s cubic-bezier(.2, .9, .3, 1.3) both; }
html[data-theme="dark"] .booly-meme figcaption { color: #c9d5e9; }
html[data-theme="dark"] .share-nudge { border: 1px solid #404f70; border-radius: 10px; background: #282c34; }
html[data-theme="dark"] .share-nudge-icon { border-radius: 50%; background: #2c3447; color: var(--blue); }
html[data-theme="dark"] .share-nudge-text strong { color: #d6e5fe; }
html[data-theme="dark"] .share-nudge-text span { color: #a6b4cf; }
html[data-theme="dark"] .trial-nudge { border: 1px solid #644900; border-radius: 10px; background: #30291d; }
html[data-theme="dark"] .trial-nudge-icon { border-radius: 50%; background: #3a2f18; color: #e5a156; }
html[data-theme="dark"] .trial-nudge-text strong { color: #f3dec0; }
html[data-theme="dark"] .trial-nudge-text span { color: #cfb890; }
html[data-theme="dark"] .paywall-trial-note { color: #aab4c6; }
html[data-theme="dark"] .share-card { border-radius: 10px; border: 1px solid var(--line); background: #292c32; animation: card-pop .45s ease-out both; }
html[data-theme="dark"] .share-name { color: #b2bfd3; }
html[data-theme="dark"] .share-button { border: 1px solid #475263; border-radius: 7px; background: #23262c; color: #b0ceff; text-decoration: none; }
html[data-theme="dark"] .share-button:hover { background: #2a2d33; }
html[data-theme="dark"] .share-button.linkedin { background: #0a66c2; border-color: #0a66c2; color: #fff; }
html[data-theme="dark"] .share-button.linkedin:hover { background: #0857a6; }
html[data-theme="dark"] .share-button.x { background: #14171a; border-color: #14171a; color: #fff; }
html[data-theme="dark"] .share-button.x:hover { background: #000; }
html[data-theme="dark"] .share-button.facebook { background: #1877f2; border-color: #1877f2; color: #fff; }
html[data-theme="dark"] .share-button.facebook:hover { background: #0f66d8; }
html[data-theme="dark"] .invite-link input { border: 1px solid #475263; border-radius: 7px; background: #272a30; color: var(--ink); }
html[data-theme="dark"] .invite-stats { color: #becbe1; }
html[data-theme="dark"] .invite-fine { color: var(--muted); }
html[data-theme="dark"] .share-page { background: #292c32; }
html[data-theme="dark"] .share-main h1 span { color: var(--blue); }
html[data-theme="dark"] .share-card-image { border-radius: 14px; border: 1px solid var(--line); box-shadow: 0 24px 60px -30px #1b223277; }
html[data-theme="dark"] .share-pitch { background: #23262c; border: 1px solid var(--line); border-radius: 12px; }
html[data-theme="dark"] .share-pitch p { color: var(--muted); }
html[data-theme="dark"] .share-pitch .share-invite { color: #becbe1; }
html[data-theme="dark"] .login-page { background: #292c32; }
html[data-theme="dark"] .login-card { background: #23262c; border: 1px solid #474d57; border-radius: 14px; box-shadow: 0 24px 70px #1c315a14; }
html[data-theme="dark"] .login-story { background: #20232b; color: #e1e4eb; }
html[data-theme="dark"] .login-story .intro-kicker { color: #9fb0cc; }
html[data-theme="dark"] .login-story h1 { color: #fff; }
html[data-theme="dark"] .login-points li { color: #c5cad5; }
html[data-theme="dark"] .login-points strong { color: #fff; }
html[data-theme="dark"] .login-points .icon { color: #90b2fd; }
html[data-theme="dark"] .login-sub { color: var(--muted); }
html[data-theme="dark"] .facebook-button { border-radius: 4px; background: #1877f2; color: #fff; }
html[data-theme="dark"] .facebook-button:hover { background: #166fe5; }
html[data-theme="dark"] .login-status { border-radius: 6px; background: #332923; border: 1px solid #704a2e; color: #f2a984; }
html[data-theme="dark"] .account-note { color: #a8b1c4; }
html[data-theme="dark"] .account-note a { color: #a6c3eb; }
html[data-theme="dark"] .guest-paths { border: 1px solid var(--line); border-radius: 10px; background: #282b31; }
html[data-theme="dark"] .guest-paths span { color: var(--muted); }
html[data-theme="dark"] .guest-paths a { border-radius: 7px; color: var(--ink); text-decoration: none; }
html[data-theme="dark"] .guest-paths a:hover { background: #23262c; }
html[data-theme="dark"] .guest-paths a[aria-current="page"] { background: var(--blue); color: #fff; }
html[data-theme="dark"] .error-card { background: #23262c; border: 1px solid var(--line); border-radius: 12px; }
html[data-theme="dark"] .error-card p:not(.intro-kicker) { color: var(--muted); }
@media (max-width: 700px) {
html[data-theme="dark"] .paywall-side { border-left: 0; border-top: 1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce) {
html[data-theme="dark"] *, html[data-theme="dark"] *::before, html[data-theme="dark"] *::after { animation: none !important; }
}
html[data-theme="dark"] .discount-pill { border: 1px solid #704633; border-radius: 999px; background: #332924; color: #fc9b7c; text-decoration: none; }
html[data-theme="dark"] .discount-pill:hover { background: #3e2b21; }
html[data-theme="dark"] .paywall-discount { border-radius: 8px; background: #332924; color: #fc9b7c; }
html[data-theme="dark"] .feedback-form label { color: #c1cde1; }
html[data-theme="dark"] .feedback-form textarea { border: 1px solid #4b515c; border-radius: 8px; }
html[data-theme="dark"] .feedback-form textarea:focus { outline: 3px solid #3f4e73; border-color: #7299f0; }
html[data-theme="dark"] .path-choice { border: 1px solid #484f5a; border-radius: 10px; background: #23262c; }
html[data-theme="dark"] .path-choice:hover, html[data-theme="dark"] .path-choice:focus-visible { border-color: var(--blue); box-shadow: 0 4px 16px #245bd61f; }
html[data-theme="dark"] .path-choice > span:last-child { color: var(--muted); }
html[data-theme="dark"] .path-icon { border-radius: 8px; background: #2a2e37; color: var(--blue); }
html[data-theme="dark"] .path-foot { color: var(--muted); }
html[data-theme="dark"] .path-login { color: var(--muted); }
html[data-theme="dark"] .path-login a { color: var(--blue); }
html[data-theme="dark"] .next-choice { border: 1px solid #484f5a; border-radius: 10px; background: #23262c; color: inherit; text-decoration: none; }
html[data-theme="dark"] .next-choice:hover, html[data-theme="dark"] .next-choice:focus-visible { border-color: var(--blue); box-shadow: 0 4px 16px #245bd61f; }
html[data-theme="dark"] .next-choice-text span { color: var(--muted); }
html[data-theme="dark"] .next-choice > .icon { color: var(--blue); }
html[data-theme="dark"] .next-choice-tag { border-radius: 99px; background: #26332a; color: #94d1a4; }
html[data-theme="dark"] .paywall-free { color: #acb8cd; }
html[data-theme="dark"] .language-choice { border: 1px solid #484f5a; border-radius: 10px; background: #23262c; color: inherit; text-decoration: none; }
html[data-theme="dark"] .language-choice:hover, html[data-theme="dark"] .language-choice:focus-visible { border-color: var(--blue); box-shadow: 0 4px 16px #245bd61f; }
html[data-theme="dark"] .restore-bar { background: #1c2a1f; border-bottom: 1px solid #2c4232; color: #cfe3d4; }
html[data-theme="dark"] .restore-bar strong { color: #fff; }
html[data-theme="dark"] .restore-bar .icon { color: #84c495; }
html[data-theme="dark"] .restore-load { border-radius: 6px; background: #3f8a55; color: #fff; }
html[data-theme="dark"] .restore-load:hover { background: #4a9a62; }
html[data-theme="dark"] .restore-dismiss { color: #9db8a4; }
html[data-theme="dark"] .quiz { border-top: 1px solid var(--line); }
html[data-theme="dark"] .quiz-option { border: 1px solid #484f5a; border-radius: 10px; background: #23262c; }
html[data-theme="dark"] .quiz-option:hover { border-color: #445c97; }
html[data-theme="dark"] .quiz-option:has(input:focus-visible) { outline: 3px solid #7299f0; outline-offset: 2px; }
html[data-theme="dark"] .quiz-letter { border-radius: 50%; border: 1px solid #4b5462; color: #b5c2d8; }
html[data-theme="dark"] .quiz-text code { border-radius: 4px; background: #2a2e34; }
html[data-theme="dark"] .quiz-option.selected { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); background: #272a30; }
html[data-theme="dark"] .quiz-option.selected .quiz-letter { background: var(--blue); border-color: var(--blue); color: #fff; }
html[data-theme="dark"] .quiz-option.wrong { border-color: #d98b74; box-shadow: 0 0 0 1px #d98b74; background: #272b31; }
html[data-theme="dark"] .quiz-option.wrong .quiz-letter { background: var(--red); border-color: var(--red); color: #fff; }
html[data-theme="dark"] .quiz-option.right, html[data-theme="dark"] .quiz-option.answer { border-color: #6aa77c; box-shadow: 0 0 0 1px #6aa77c; background: #282b31; }
html[data-theme="dark"] .quiz-option.right .quiz-letter, html[data-theme="dark"] .quiz-option.answer .quiz-letter { background: var(--green); border-color: var(--green); color: #fff; }
html[data-theme="dark"] .quiz-feedback { border-radius: 10px; }
html[data-theme="dark"] .quiz-feedback.right, html[data-theme="dark"] .quiz-feedback.reveal { background: #282b31; border: 1px solid #3a5443; }
html[data-theme="dark"] .quiz-feedback.wrong { background: #272b31; border: 1px solid #66463b; }
html[data-theme="dark"] .quiz-feedback.right .quiz-verdict, html[data-theme="dark"] .quiz-feedback.reveal .quiz-verdict { color: var(--green); }
html[data-theme="dark"] .quiz-feedback.wrong .quiz-verdict { color: var(--red); }
html[data-theme="dark"] .quiz-note { color: var(--muted); }
html[data-theme="dark"] .quiz-text pre { border-radius: 6px; background: #292c33; }
html[data-theme="dark"] .quiz-text pre code { background: none; }
html[data-theme="dark"] .quiz-option.selected .quiz-text pre { background: #2b303b; }
html[data-theme="dark"] .guest-login { color: #c6d7f5; text-decoration: none; }
html[data-theme="dark"] .guest-login:hover { color: var(--blue); }
html[data-theme="dark"] .guest-article { background: #23262c; border-top: 1px solid var(--line); }
html[data-theme="dark"] .guest-article-body p, html[data-theme="dark"] .guest-article-body li { color: #c9d2e2; }
html[data-theme="dark"] .guest-article-body pre { border-radius: 8px; background: var(--code-bg); color: var(--code-text); }
html[data-theme="dark"] .guest-article-body code { border-radius: 4px; background: #2c2f35; }
html[data-theme="dark"] .guest-article-body pre code { background: none; color: inherit; }
html[data-theme="dark"] .article-jump { border-radius: 5px; background: #292e37; color: var(--blue); text-decoration: none; }
html[data-theme="dark"] .article-jump:hover { background: #2b3446; }
html[data-theme="dark"] .guest-article-body .hl .ace_keyword, html[data-theme="dark"] .guest-article-body .hl .ace_storage, html[data-theme="dark"] .guest-article-body .hl .ace_constant.ace_language { color: #ffd242; }
html[data-theme="dark"] .guest-article-body .hl .ace_string { color: #a5e07a; }
html[data-theme="dark"] .guest-article-body .hl .ace_comment { color: var(--code-muted); }
html[data-theme="dark"] .guest-article-body .hl .ace_constant.ace_numeric { color: #ae81ff; }
html[data-theme="dark"] .guest-article-body .hl .ace_keyword.ace_operator, html[data-theme="dark"] .guest-article-body .hl .ace_paren, html[data-theme="dark"] .guest-article-body .hl .ace_punctuation { color: var(--code-text); }
html[data-theme="dark"] .guest-article-body .hl .ace_support.ace_function, html[data-theme="dark"] .guest-article-body .hl .ace_support.ace_type, html[data-theme="dark"] .guest-article-body .hl .ace_storage.ace_type, html[data-theme="dark"] .guest-article-body .hl .ace_entity.ace_name, html[data-theme="dark"] .guest-article-body .hl .ace_support.ace_class { color: #87ffaf; }
html[data-theme="dark"] .guest-article-body .hl .ace_variable.ace_language { color: #fd971f; }
html[data-theme="dark"] .guest-article-body .hl .ace_meta.ace_tag, html[data-theme="dark"] .guest-article-body .hl .ace_entity.ace_other.ace_attribute-name { color: #86aafa; }
html[data-theme="dark"] .guest-article-body .hl .hl-muted { color: var(--code-muted); }
html[data-theme="dark"] .guest-article-body a { color: var(--blue); }
html[data-theme="dark"] .guest-nav-link { border: 1px solid var(--line); border-radius: 10px; color: var(--ink); text-decoration: none; }
html[data-theme="dark"] .guest-nav-link small { color: var(--muted); }
html[data-theme="dark"] .guest-nav-link:hover { border-color: var(--blue); }
html[data-theme="dark"] .guest-cta { border: 1px solid #404c63; border-radius: 12px; background: #292c33; }
html[data-theme="dark"] .guest-cta span { color: var(--muted); }
html[data-theme="dark"] .link-overview-head { background: #23262c; border: 1px solid var(--line); border-radius: 12px; }
html[data-theme="dark"] .link-overview-lead { color: #b8c3d5; }
html[data-theme="dark"] .link-overview-meta { color: var(--muted); }
html[data-theme="dark"] .link-overview-missing { border-radius: 8px; background: #322a1b; color: #eab47c; }
html[data-theme="dark"] .link-part-blurb { color: var(--muted); }
html[data-theme="dark"] .link-chapter { background: #23262c; border: 1px solid var(--line); border-radius: 10px; }
html[data-theme="dark"] .link-lessons li { color: #a8b2c2; }
html[data-theme="dark"] .link-lessons a { color: #c6d7f5; text-decoration: none; }
html[data-theme="dark"] .link-lessons a:hover { color: var(--blue); text-decoration: underline; }
html[data-theme="dark"] .link-languages { border: 1px solid #404c63; border-radius: 12px; background: #292c33; }
html[data-theme="dark"] .link-languages a { color: var(--blue); text-decoration: none; }
html[data-theme="dark"] .link-language { background: #23262c; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); text-decoration: none; }
html[data-theme="dark"] .link-language:hover { border-color: var(--blue); }
html[data-theme="dark"] .link-language small { color: var(--muted); }
html[data-theme="dark"] .link-design-card { background: #23262c; border: 1px solid var(--line); border-left: 4px solid #3aa39a; border-radius: 12px; color: var(--ink); text-decoration: none; }
html[data-theme="dark"] .link-design-card:hover { border-color: var(--blue); border-left-color: #3aa39a; }
html[data-theme="dark"] .link-design-card-text small:last-child { color: var(--muted); }
html[data-theme="dark"] .link-design-card-meta { color: var(--blue); }
html[data-theme="dark"] .link-design-soon { color: #a8b2c2; }
html[data-theme="dark"] .link-design-soon-tag { border-radius: 4px; background: #2b2e34; color: #a8b2c3; }
html[data-theme="dark"] .link-design-free-tag { border-radius: 4px; background: #26332c; color: #7cc694; }
html[data-theme="dark"] .guest-footer { border-top: 1px solid var(--line); color: var(--muted); }
html[data-theme="dark"] .guest-footer a { color: inherit; }
html[data-theme="dark"] .guest-signin { background: rgba(15, 20, 33, .55); }
html[data-theme="dark"] .guest-signin-card { border-radius: 14px; background: #23262c; box-shadow: 0 24px 60px rgba(0, 0, 0, .25); }
html[data-theme="dark"] .guest-signin-text { color: var(--muted); }
html[data-theme="dark"] #guest-signin-title:focus { outline: none; }
html[data-theme="dark"] #pro-gate-title:focus { outline: none; }
html[data-theme="dark"] .guest-bar { border-radius: 12px; background: #1d2330; color: #fff; box-shadow: 0 12px 30px rgba(11, 29, 36, .25); }
html[data-theme="dark"] .guest-bar-close { border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; }
html[data-theme="dark"] .guest-signin.with-picture .guest-signin-picture { border-radius: 14px 0 0 14px; background: linear-gradient(160deg, #2b313d, #28373c); }
html[data-theme="dark"] .guest-signin-picture img { border: 1px solid var(--line); border-radius: 10px; background: #23262c; box-shadow: 0 16px 36px rgba(15, 20, 33, .16); }
html[data-theme="dark"] .guest-signin.with-picture .guest-signin-close { border-radius: 50%; background: #23262c; box-shadow: 0 2px 8px rgba(15, 20, 33, .12); }
@media (max-width: 760px) {
html[data-theme="dark"] .guest-signin.with-picture .guest-signin-picture { border-radius: 14px 14px 0 0; }
html[data-theme="dark"] .guest-signin.picture-top .guest-signin-picture img { border-bottom: 0; border-radius: 10px 10px 0 0; }
}
html[data-theme="dark"] .drawer.coursemap { background: #292c32; color: var(--ink); box-shadow: none; }
html[data-theme="dark"] .coursemap .cm-top { background: #23262c; border-bottom: 1px solid var(--line); }
html[data-theme="dark"] .cm-course .course-dot { border-radius: 8px; }
html[data-theme="dark"] .cm-course p { color: var(--muted); }
html[data-theme="dark"] .cm-meter { border-radius: 99px; background: #30343a; }
html[data-theme="dark"] .cm-meter i { border-radius: 99px; background: var(--blue); }
html[data-theme="dark"] .cm-search { border: 1px solid var(--line); border-radius: 10px; background: #272b31; color: #a8b1c3; }
html[data-theme="dark"] .cm-search:focus-within { border-color: #425b96; background: #23262c; box-shadow: 0 0 0 3px #245bd61a; }
html[data-theme="dark"] .cm-search input { border: 0; outline: 0; background: transparent; color: var(--ink); }
html[data-theme="dark"] .cm-next { border: 1px solid #404e6a; border-radius: 10px; background: #292b33; color: var(--ink); text-decoration: none; }
html[data-theme="dark"] .cm-next:hover { border-color: #425b96; background: #2a2f3c; }
html[data-theme="dark"] .cm-next-label { color: #abb6c9; }
html[data-theme="dark"] .cm-next > .icon { color: var(--blue); }
html[data-theme="dark"] .cm-part { border: 1px solid var(--line); border-radius: 14px; background: #23262c; }
html[data-theme="dark"] .cm-part:hover { border-color: #46536c; box-shadow: 0 8px 20px -16px #14203055; }
html[data-theme="dark"] .cm-part[aria-selected="true"] { border-color: var(--blue); background: #26292f; box-shadow: 0 0 0 3px #245bd61c; }
html[data-theme="dark"] .cm-part-num { border-radius: 50%; background: #2c2f35; color: #b5c2d8; }
html[data-theme="dark"] .cm-part[aria-selected="true"] .cm-part-num { background: var(--blue); color: #fff; }
html[data-theme="dark"] .cm-here { border-radius: 999px; background: var(--blue); color: #fff; box-shadow: 0 0 0 2px #3f434b; }
html[data-theme="dark"] .cm-part-progress { color: var(--muted); }
html[data-theme="dark"] .cm-soon { color: var(--muted); }
html[data-theme="dark"] .cm-soon-text { color: var(--muted); }
html[data-theme="dark"] .cm-about { color: var(--muted); }
html[data-theme="dark"] .cm-about strong { color: var(--ink); }
html[data-theme="dark"] .cm-mock { border: 1px solid var(--line); border-radius: 999px; background: #23262c; color: var(--ink); text-decoration: none; }
html[data-theme="dark"] .cm-mock:hover { border-color: var(--blue); color: var(--blue-dark); }
html[data-theme="dark"] .cm-mock .icon { color: var(--blue); }
html[data-theme="dark"] .cm-chapters::before { background: #33363d; }
html[data-theme="dark"] .cm-chapter { border-radius: 12px; }
html[data-theme="dark"] .cm-chapter:hover { background: #23262c; }
html[data-theme="dark"] .cm-chapter.sel { background: #23262c; box-shadow: 0 0 0 1px var(--line), 0 6px 16px -14px #14203066; }
html[data-theme="dark"] .cm-chapter > .icon { color: #a3abb8; }
html[data-theme="dark"] .cm-chapter.sel > .icon { color: var(--blue); }
html[data-theme="dark"] .cm-node { border: 2px solid #484f5a; border-radius: 50%; background: #23262c; color: #abb6c9; }
html[data-theme="dark"] .cm-chapter.started .cm-node { border: 0; background: radial-gradient(closest-side, #23262c 78%, transparent 80%), conic-gradient(var(--blue) calc(var(--p) * 1%), #313740 0); color: #9bbdff; }
html[data-theme="dark"] .cm-chapter.complete .cm-node { border-color: #2f9a5c; background: #2f9a5c; color: #fff; }
html[data-theme="dark"] .cm-chapter.has-here .cm-node { box-shadow: 0 0 0 4px #245bd626; }
html[data-theme="dark"] .cm-chapter.sel .cm-chapter-text strong { color: var(--blue); }
html[data-theme="dark"] .cm-chapter-text small { color: var(--muted); }
html[data-theme="dark"] .cm-chapter-text em { color: #9bbdff; }
html[data-theme="dark"] .cm-lessons, html[data-theme="dark"] .cm-results { border: 1px solid var(--line); border-radius: 16px; background: #23262c; }
html[data-theme="dark"] .cm-lessons-head { border: 1px solid var(--line); border-radius: 16px 16px 0 0; background: #23262c; }
html[data-theme="dark"] .cm-back { border-radius: 8px; color: var(--blue); }
html[data-theme="dark"] .cm-back:hover { background: #292d38; }
html[data-theme="dark"] .cm-lessons-kicker { color: #a8b1c3; }
html[data-theme="dark"] .cm-lessons-progress { color: var(--muted); }
html[data-theme="dark"] .cm-lesson { border-radius: 10px; color: var(--ink); text-decoration: none; }
html[data-theme="dark"] .cm-lesson:hover { background: #292c32; }
html[data-theme="dark"] .cm-lesson-mark { border: 1.5px solid #484f5a; border-radius: 50%; color: #abb6c9; }
html[data-theme="dark"] .cm-lesson-title small { color: var(--muted); }
html[data-theme="dark"] .cm-lesson.done .cm-lesson-mark { border-color: #2e5c43; background: #26332c; color: #6fc78e; }
html[data-theme="dark"] .cm-lesson.done .cm-lesson-title { color: #bac4d8; }
html[data-theme="dark"] .cm-lesson.current { background: #292d38; }
html[data-theme="dark"] .cm-lesson.current .cm-lesson-mark { border-color: var(--blue); background: var(--blue); color: #fff; }
html[data-theme="dark"] .cm-lesson.locked .cm-lesson-mark { border-style: dashed; color: #9aa3b2; }
html[data-theme="dark"] .cm-lesson.locked .cm-lesson-title { color: #abb6c9; }
html[data-theme="dark"] .cm-tag { border-radius: 999px; }
html[data-theme="dark"] .cm-tag.here { background: var(--blue); color: #fff; }
html[data-theme="dark"] .cm-tag.free { background: #26332c; color: #7cc694; }
html[data-theme="dark"] .cm-tag.pro { background: #322d3c; color: #afa4ff; }
html[data-theme="dark"] .cm-results-head { border-bottom: 1px solid var(--line); color: var(--muted); }
html[data-theme="dark"] .cm-results-head strong { color: var(--ink); }
html[data-theme="dark"] .cm-results-group { color: #a8b1c3; }
html[data-theme="dark"] .cm-results-empty { color: var(--muted); }
html[data-theme="dark"] .cm-foot { border-top: 1px solid var(--line); background: #23262c; }
html[data-theme="dark"] .cm-foot a { color: var(--blue); text-decoration: none; }
@media (max-width: 760px) {
html[data-theme="dark"] .cm-parts { background: #292c32; }
html[data-theme="dark"] .cm-parts.stuck { box-shadow: 0 1px 0 var(--line), 0 8px 14px -12px #14203040; }
}
html[data-theme="dark"] .cm-lesson.soon { color: #aab1c0; }
html[data-theme="dark"] .cm-lesson.soon:hover { background: none; }
html[data-theme="dark"] .cm-lesson.soon .cm-lesson-mark { border-style: dashed; color: #9aa3b2; }
html[data-theme="dark"] .cm-tag.soon { background: #2c2f35; color: #a8b1c5; }
html[data-theme="dark"] .cm-tag.new { background: #22352a; color: #87d29e; }
html[data-theme="dark"] .cm-chapter.soon .cm-node { border-style: dashed; color: #9aa3b2; }
html[data-theme="dark"] .cm-chapter.soon .cm-chapter-text strong { color: #bac4d8; }
html[data-theme="dark"] .design-lesson-page { background: #26292f; }
html[data-theme="dark"] .appbar-label { color: #c6d7f5; }
html[data-theme="dark"] .design-public .design-article { border-top: 1px solid var(--line); background: #23262c; }
html[data-theme="dark"] .dl-tabs { background: #23262c; border-bottom: 1px solid var(--line); }
html[data-theme="dark"] .dl-tabs button { border-bottom: 2px solid transparent; color: #abb6c9; }
html[data-theme="dark"] .dl-tabs button:hover { color: var(--ink); }
html[data-theme="dark"] .dl-tabs button[aria-selected="true"] { border-bottom-color: var(--blue); color: var(--blue); }
html[data-theme="dark"] .dl-walkthrough { background: #23262c; }
html[data-theme="dark"] .dl-head { background: #23262c; }
html[data-theme="dark"] .dl-head .lesson-pager .secondary[aria-disabled="true"] { color: #a3abb8; background: #282b31; border-color: #474c54; }
html[data-theme="dark"] .dl-walkthrough-back { border-top: 1px solid var(--line); }
html[data-theme="dark"] .dl-walkthrough-back a { color: var(--blue); text-decoration: none; }
/* visual */
html[data-theme="dark"]:has(body.visual-page), html[data-theme="dark"] .visual-page { background: #26292f; }
html[data-theme="dark"] .vl { --cell: 54px; --gap: 8px; }
html[data-theme="dark"] .vl .v-close { border-radius: 10px; color: #a8b1c5; }
html[data-theme="dark"] .vl .v-close:hover { background: #2a2d33; color: #d2ddf3; }
html[data-theme="dark"] .vl .v-progress .seg { border-radius: 5px; background: #30343a; }
html[data-theme="dark"] .vl .v-progress .seg.full { background: #3d6fe0; }
html[data-theme="dark"] .vl .v-progress .seg.now { background: #9db7ef; }
html[data-theme="dark"] .vl .v-progress .seg:not(:disabled):hover { background: #2c58c0; }
html[data-theme="dark"] .vl .v-count { color: #a8b2c2; }
html[data-theme="dark"] .vl .v-restart { border-radius: 9px; color: #a8b2c2; }
html[data-theme="dark"] .vl .v-restart:hover { background: #2a2d33; color: #d2ddf3; }
html[data-theme="dark"] .vl .v-stage.in { animation: v-in .35s ease-out; }
html[data-theme="dark"] .vl .v-intro { color: #aab1c0; }
html[data-theme="dark"] .vl .v-move { border-radius: 999px; background: #312d3d; color: #aeadff; }
html[data-theme="dark"] .vl .v-text a { color: #8db3ff; text-decoration: underline; }
html[data-theme="dark"] .vl .v-title { color: #e3ebff; }
html[data-theme="dark"] .vl .v-text { color: #c9d1e5; }
html[data-theme="dark"] .vl .v-text strong, html[data-theme="dark"] .vl .v-caption strong, html[data-theme="dark"] .vl .v-prompt strong, html[data-theme="dark"] .vl .v-fb-text strong { color: #e3ebff; }
html[data-theme="dark"] .vl .v-text code, html[data-theme="dark"] .vl .v-caption code, html[data-theme="dark"] .vl .v-prompt code, html[data-theme="dark"] .vl .v-opt code, html[data-theme="dark"] .vl .v-fb-text code { background: #2b2e35; border: 1px solid #444a54; border-radius: 5px; color: #b7d2ff; }
html[data-theme="dark"] .vl .v-board { background: #23262c; border: 1px solid #454950; border-radius: 20px; box-shadow: 0 1px 2px #14203008, 0 10px 30px -18px #14203040; }
html[data-theme="dark"] .vl .w-label { color: #a8b1c5; }
html[data-theme="dark"] .vl .w-empty { color: #9aa3b2; }
html[data-theme="dark"] .vl .land { --tb: #c5d9a0; --tbg: #2f361e; --tc: #9cbf6c; }
html[data-theme="dark"] .vl .water { --tb: #cfe0f5; --tbg: #28303a; --tc: #86a4c8; }
html[data-theme="dark"] .vl .t-active { --tb: #89b0ff; --tbg: #292f3b; --tc: #b3cdff; }
html[data-theme="dark"] .vl .t-focus { --tb: #e3a41c; --tbg: #342c14; --tc: #e0b471; }
html[data-theme="dark"] .vl .t-match, html[data-theme="dark"] .vl .chosen { --tb: #64ca89; --tbg: #22352a; --tc: #87d29e; }
html[data-theme="dark"] .vl .t-wrong, html[data-theme="dark"] .vl .nope { --tb: #ff8c71; --tbg: #3b2b27; --tc: #ffa08a; }
html[data-theme="dark"] .vl .t-done { --tb: #e6e9ee; --tbg: #292c33; --tc: #a3abb8; }
html[data-theme="dark"] .vl .t-g1 { --tb: #5bc6b7; --tbg: #1f3634; --tc: #7eccc0; }
html[data-theme="dark"] .vl .t-g2 { --tb: #b2a1ff; --tbg: #332e42; --tc: #bfbbff; }
html[data-theme="dark"] .vl .t-g3 { --tb: #e07b24; --tbg: #3d2c1a; --tc: #f29e67; }
html[data-theme="dark"] .vl .t-g4 { --tb: #ff80b8; --tbg: #3f2a35; --tc: #ff9bc2; }
html[data-theme="dark"] .vl .box { border: 2px solid var(--tb, #464d58); border-radius: 13px; background: var(--tbg, #23262c); color: var(--tc, #d8e4f8); }
html[data-theme="dark"] .vl .cell.t-active .box { box-shadow: 0 8px 16px -8px #3d6fe0aa; }
html[data-theme="dark"] .vl .ci { color: #9aa3b2; }
html[data-theme="dark"] .vl .cell.ghost .box { border-style: dashed; border-color: #49515d; background: transparent; }
html[data-theme="dark"] .vl .w-array.tight .box { border-radius: 8px; border-width: 1.5px; }
html[data-theme="dark"] .vl .arr-range { border: 2px dashed #7f9fe0; border-radius: 16px; background: #3d6fe00d; }
html[data-theme="dark"] .vl .ptr { border-radius: 7px; background: #3d6fe0; color: #fff; }
html[data-theme="dark"] .vl .ptr::before { border: 5px solid transparent; border-top: 0; }
html[data-theme="dark"] .vl .ptr[data-color="0"] { background: #3d6fe0; }
html[data-theme="dark"] .vl .ptr[data-color="0"]::before { border-bottom-color: #3d6fe0; }
html[data-theme="dark"] .vl .ptr[data-color="1"] { background: #7b61d1; }
html[data-theme="dark"] .vl .ptr[data-color="1"]::before { border-bottom-color: #7b61d1; }
html[data-theme="dark"] .vl .ptr[data-color="2"] { background: #e07b24; }
html[data-theme="dark"] .vl .ptr[data-color="2"]::before { border-bottom-color: #e07b24; }
html[data-theme="dark"] .vl .ptr[data-color="3"] { background: #2a9d8f; }
html[data-theme="dark"] .vl .ptr[data-color="3"]::before { border-bottom-color: #2a9d8f; }
html[data-theme="dark"] .vl .map { border-collapse: separate; border-spacing: 0; border: 1px solid #454a51; border-radius: 13px; }
html[data-theme="dark"] .vl .map th { background: #282b31; color: #a8b1c3; }
html[data-theme="dark"] .vl .map td { border-top: 1px solid #42464d; background: var(--tbg, #23262c); color: var(--tc, #d8e4f8); }
html[data-theme="dark"] .vl .map tr.enter td { animation: v-row-dark .55s ease-out; }
@keyframes v-row-dark {
  from { background: #352f16; opacity: 0; transform: translateY(-6px) }
}
html[data-theme="dark"] .vl .var { border: 2px solid var(--tb, #454a53); border-radius: 11px; background: var(--tbg, #23262c); }
html[data-theme="dark"] .vl .vn { color: #a8b1c5; }
html[data-theme="dark"] .vl .vn::after { color: #a3abb8; }
html[data-theme="dark"] .vl .vv { color: var(--tc, #d8e4f8); }
html[data-theme="dark"] .vl .var.enter { animation: v-pop .35s ease-out; }
html[data-theme="dark"] .vl .w-grid { --gc: 44px; --gg: 5px; }
html[data-theme="dark"] .vl .gcell { border: 2px solid var(--tb, #444b54); border-radius: 9px; background: var(--tbg, #23262c); color: var(--tc, #b5c2d8); }
html[data-theme="dark"] .vl .g-cols span, html[data-theme="dark"] .vl .g-rows span { color: #9aa3b2; }
html[data-theme="dark"] .vl .g-corner { color: #a8b2c2; }
html[data-theme="dark"] .vl .stack { border-bottom: 3px solid #464d58; }
html[data-theme="dark"] .vl .sitem { border: 2px solid var(--tb, #464d58); border-radius: 10px; background: var(--tbg, #23262c); color: var(--tc, #d8e4f8); }
html[data-theme="dark"] .vl .sitem.top::after { color: #a8b2c2; }
html[data-theme="dark"] .vl .sitem.enter { animation: v-drop .4s cubic-bezier(.3, .7, .25, 1); }
html[data-theme="dark"] .vl .shape { --size: 44px; }
html[data-theme="dark"] .vl .shape-edges line { stroke: var(--tb, #49515d); }
html[data-theme="dark"] .vl .shape-edges polygon { fill: var(--tb, #46505f); }
html[data-theme="dark"] .vl .shape-edges g.v-picked line:not(.v-hit) { stroke: #89b0ff; }
html[data-theme="dark"] .vl .shape-edges line.v-hit { stroke: transparent; }
html[data-theme="dark"] .vl .snode { border: 2px solid var(--tb, #4a5360); border-radius: 50%; background: var(--tbg, #23262c); color: var(--tc, #d8e4f8); }
html[data-theme="dark"] .vl .snode.t-active { box-shadow: 0 0 0 4px #3d6fe02e; }
html[data-theme="dark"] .vl .snode.enter { animation: v-pop .35s ease-out; }
html[data-theme="dark"] .vl .snote { border: 1.5px solid #5f4b89; border-radius: 999px; background: #2e2a36; color: #bfbbff; }
html[data-theme="dark"] .vl .code { background: #12172a; border-radius: 13px; color: #d7dce7; }
html[data-theme="dark"] .vl .cl { border-left: 3px solid transparent; }
html[data-theme="dark"] .vl .ln { color: #a9b4d0; }
html[data-theme="dark"] .vl .cl.lit { background: #86aafa24; border-left-color: #86aafa; }
html[data-theme="dark"] .vl .w-code .t-active, html[data-theme="dark"] .vl .w-code .t-focus { background: #3d6fe047; border-left-color: #86aafa; }
html[data-theme="dark"] .vl .w-code .t-match, html[data-theme="dark"] .vl .w-code .chosen { background: #2f9a5c4d; border-left-color: #267147; }
html[data-theme="dark"] .vl .w-code .t-wrong, html[data-theme="dark"] .vl .w-code .nope { background: #d0573b4d; border-left-color: #f08a70; }
html[data-theme="dark"] .vl .tk-k { color: #c792ea; }
html[data-theme="dark"] .vl .tk-s { color: #c3e88d; }
html[data-theme="dark"] .vl .tk-n { color: #f78c6c; }
html[data-theme="dark"] .vl .tk-c { color: #a6afd7; }
html[data-theme="dark"] .vl .tk-f { color: #82aaff; }
html[data-theme="dark"] .vl .console { background: #12172a; border-radius: 12px; color: #d7dce7; }
html[data-theme="dark"] .vl .console:empty::before { color: #a6afd7; }
html[data-theme="dark"] .vl .ol { border-left: 3px solid transparent; }
html[data-theme="dark"] .vl .ol.enter { animation: v-row-dark .45s ease-out; }
html[data-theme="dark"] .vl .w-output .t-active, html[data-theme="dark"] .vl .w-output .t-focus { background: #3d6fe047; border-left-color: #86aafa; }
html[data-theme="dark"] .vl .w-output .t-match { background: #2f9a5c4d; border-left-color: #267147; }
html[data-theme="dark"] .vl .w-output .t-wrong { background: #d0573b4d; border-left-color: #f08a70; }
html[data-theme="dark"] .vl .w.tappable { outline: 2px dashed #425b96; outline-offset: 6px; border-radius: 12px; }
html[data-theme="dark"] .vl .tappable .cell:hover .box, html[data-theme="dark"] .vl .tappable .gcell:hover, html[data-theme="dark"] .vl .tappable .snode:hover, html[data-theme="dark"] .vl .tappable .sitem:hover { border-color: #425b96; }
html[data-theme="dark"] .vl .tappable .cl:hover { background: #ffffff12; }
html[data-theme="dark"] .vl .tappable tbody tr:hover td { background: #282b31; }
html[data-theme="dark"] .vl .cell.picked .box, html[data-theme="dark"] .vl .gcell.picked, html[data-theme="dark"] .vl .snode.picked, html[data-theme="dark"] .vl .sitem.picked { border-color: #3d6fe0; background: #292f3b; box-shadow: 0 0 0 4px #3d6fe036; }
html[data-theme="dark"] .vl .w-map tr.picked td { background: #292f3b; }
html[data-theme="dark"] .vl .cl.picked { background: #3d6fe059; border-left-color: #86aafa; }
html[data-theme="dark"] .vl .tappable [role="button"]:focus-visible { outline: 3px solid #7299f0; outline-offset: 3px; }
html[data-theme="dark"] .vl .v-caption { border-radius: 13px; background: #292d33; color: #d0dcf2; }
html[data-theme="dark"] .vl .v-fbtn { border: 1px solid #474f5a; border-radius: 50%; background: #23262c; color: #b7cbec; }
html[data-theme="dark"] .vl .v-fbtn:hover:not(:disabled) { background: #292d33; border-color: #425b96; }
html[data-theme="dark"] .vl .v-fnum { border-radius: 6px; background: #2c3446; color: #95b8ff; }
html[data-theme="dark"] .vl .v-fnext.go { background: #3d6fe0; border-color: #3d6fe0; color: #fff; animation: v-nudge 1.8s ease-out infinite; }
html[data-theme="dark"] .vl .v-fnext.go:hover { background: #2c58c0; border-color: #2c58c0; }
html[data-theme="dark"] .vl .v-play { border: 1px solid #41506e; border-radius: 999px; background: #23262c; color: #95b8ff; }
html[data-theme="dark"] .vl .v-play:hover { background: #292d33; border-color: #425b96; }
html[data-theme="dark"] .vl .v-pause i { border-radius: 1px; background: currentColor; }
html[data-theme="dark"] .vl .v-dots button { border-radius: 4px; background: #373c46; }
html[data-theme="dark"] .vl .v-dots button.seen { background: #9db7ef; }
html[data-theme="dark"] .vl .v-dots button.on { background: #3d6fe0; }
html[data-theme="dark"] .vl .v-prompt { color: #e3ebff; }
html[data-theme="dark"] .vl .v-opt { border: 2px solid #464b54; border-radius: 15px; background: #23262c; box-shadow: 0 3px 0 #454a51; color: #d4dff5; }
html[data-theme="dark"] .vl .v-opt:hover:not(:disabled) { border-color: #475878; background: #25282e; }
html[data-theme="dark"] .vl .v-opt:active:not(:disabled) { box-shadow: 0 1px 0 #454a51; }
html[data-theme="dark"] .vl .v-key { border-radius: 9px; background: #2a2d33; color: #a8b1c5; }
html[data-theme="dark"] .vl .v-opt.picked { border-color: #3d6fe0; background: #282c34; box-shadow: 0 3px 0 #3d6fe0; }
html[data-theme="dark"] .vl .v-opt.picked .v-key { background: #3d6fe0; color: #fff; }
html[data-theme="dark"] .vl .v-opt.right { border-color: #2f9a5c; background: #25312a; box-shadow: 0 3px 0 #2f9a5c; }
html[data-theme="dark"] .vl .v-opt.right .v-key { background: #2f9a5c; color: #fff; }
html[data-theme="dark"] .vl .v-opt.wrong { border-color: #8d4738; background: #292c32; box-shadow: 0 3px 0 #e2a597; color: #e8ada0; }
html[data-theme="dark"] .vl .v-opt.wrong .v-key { background: #d0573b; color: #fff; }
html[data-theme="dark"] .vl .v-tap-note { color: #a8b1c5; }
html[data-theme="dark"] .vl .v-number { border: 2px solid #464b54; border-radius: 13px; background: #23262c; color: #e3ebff; outline: none; }
html[data-theme="dark"] .vl .v-number:focus { border-color: #3d6fe0; box-shadow: 0 0 0 4px #3d6fe024; }
html[data-theme="dark"] .vl .v-number.right { border-color: #2f9a5c; background: #25312a; color: #87d29e; }
html[data-theme="dark"] .vl .v-bar { background: #23262c; border-top: 1px solid #454950; }
html[data-theme="dark"] .vl .v-back { border: 1px solid #474f5a; border-radius: 13px; background: #23262c; color: #b5c2d8; }
html[data-theme="dark"] .vl .v-back:hover:not(:disabled) { background: #292c33; }
html[data-theme="dark"] .vl .v-fb-icon { border-radius: 50%; color: #fff; animation: v-pop .35s ease-out; }
html[data-theme="dark"] .vl .v-fb-text p { color: #c9d1e5; }
html[data-theme="dark"] .vl .v-reveal { text-decoration: underline; color: #ffa08a; }
html[data-theme="dark"] .vl .v-primary { border-radius: 15px; background: #245bd6; box-shadow: 0 4px 0 #1a45a6; color: #fff; }
html[data-theme="dark"] .vl .v-primary:hover:not(:disabled) { background: #1f52c4; }
html[data-theme="dark"] .vl .v-primary:active:not(:disabled) { box-shadow: 0 1px 0 #1a45a6; }
html[data-theme="dark"] .vl .v-primary:disabled { background: #30343a; box-shadow: 0 4px 0 #494f57; color: #a8b2c1; }
html[data-theme="dark"] .vl .v-bar[data-state="right"] { background: #25312a; border-top-color: #2f5740; }
html[data-theme="dark"] .vl .v-bar[data-state="right"] .v-fb-icon { background: #2f9a5c; }
html[data-theme="dark"] .vl .v-bar[data-state="right"] .v-fb-text > strong { color: #87d29e; }
html[data-theme="dark"] .vl .v-bar[data-state="right"] .v-primary { background: #2f9a5c; box-shadow: 0 4px 0 #237a48; }
html[data-theme="dark"] .vl .v-bar[data-state="wrong"] { background: #362a27; border-top-color: #68453a; }
html[data-theme="dark"] .vl .v-bar[data-state="wrong"] .v-fb-icon { background: #d0573b; }
html[data-theme="dark"] .vl .v-bar[data-state="wrong"] .v-fb-text > strong { color: #ffa08a; }
html[data-theme="dark"] .vl .v-bar[data-state="reveal"] { background: #302a19; border-top-color: #5c4907; }
html[data-theme="dark"] .vl .v-bar[data-state="reveal"] .v-fb-icon { background: #d39b16; }
html[data-theme="dark"] .vl .v-bar[data-state="reveal"] .v-fb-text > strong { color: #e0b471; }
html[data-theme="dark"] .vl .v-end-badge { border-radius: 50%; background: #22352a; color: #64ca89; animation: v-pop .5s cubic-bezier(.3, 1.5, .5, 1); }
html[data-theme="dark"] .vl .v-end-score { color: #b5c2d8; }
html[data-theme="dark"] .vl .v-end-score strong { color: #87d29e; }
html[data-theme="dark"] .vl .v-again { color: #a8b1c5; text-decoration: underline; }
html[data-theme="dark"] .vl .v-again:hover { color: #d2ddf3; }
html[data-theme="dark"] .vl .bump { animation: v-bump-dark .45s ease-out; }
@keyframes v-bump-dark {
  30% { transform: scale(1.18); color: #89b0ff }
}
html[data-theme="dark"] .vl .shake { animation: v-shake .4s; }
@media (prefers-reduced-motion: reduce) {
html[data-theme="dark"] .vl *, html[data-theme="dark"] .vl *::before { animation: none !important; }
}
html[data-theme="dark"] .vl-page .v-top { background: rgba(35, 38, 44, 0.94); border-bottom: 1px solid #42464e; }
html[data-theme="dark"] .vl-pane { --cell: 46px; --gap: 6px; }
html[data-theme="dark"] .vl-pane .v-top { border-bottom: 1px solid var(--line); }
html[data-theme="dark"] .vl-pane .v-board { border-radius: 16px; }
html[data-theme="dark"] .vl-pane .box { border-radius: 11px; }
html[data-theme="dark"] .vl-pane .v-opt { border-radius: 13px; }
html[data-theme="dark"] .vl-pane .v-primary { border-radius: 13px; }
html[data-theme="dark"] .step-picture { border: 1px solid #414c5f; border-radius: 10px; background: #23262c; }
html[data-theme="dark"] .step-picture-toggle { color: #c5cfde; }
html[data-theme="dark"] .step-picture-toggle:hover { background: #282b31; }
html[data-theme="dark"] .step-picture-toggle > .icon { color: #89b0ff; }
html[data-theme="dark"] .step-picture-more { color: #9cc2fa; }
html[data-theme="dark"] .step-picture-toggle .chev { color: #9cc2fa; }
html[data-theme="dark"] .step-picture-summary strong { color: #d2ddf3; }
html[data-theme="dark"] .step-picture-adds { border-radius: 999px; background: #22352a; color: #87d29e; }
html[data-theme="dark"] .start-shade { background: rgba(9, 13, 23, .62); }
html[data-theme="dark"] .start-card { border-radius: 14px; background: #23262c; color: #e4e9f4; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .7); }
html[data-theme="dark"] .start-choice { border: 1px solid #484e59; border-radius: 12px; background: #23262c; color: #d2ddf3; }
html[data-theme="dark"] .start-choice:hover { border-color: #8fa9e6; box-shadow: 0 6px 18px -12px #3d6fe080; }
html[data-theme="dark"] .start-choice.lead { border-color: #41506e; background: linear-gradient(90deg, #282c34, #2c2a32); }
html[data-theme="dark"] .start-choice:disabled { border-style: dashed; background: #26292f; color: #abb6c9; box-shadow: none; }
html[data-theme="dark"] .start-choice small { color: #abb6c9; }
html[data-theme="dark"] .start-choice > .icon { color: #89b0ff; }
html[data-theme="dark"] .start-code-icon { border-radius: 10px; background: #2c2f35; color: #bacae8; }
html[data-theme="dark"] .vl-mini { --cell: 34px; --gap: 5px; }
html[data-theme="dark"] .vl-mini .v-board { border-radius: 10px; border-color: #42464e; background: #25282e; box-shadow: none; }
html[data-theme="dark"] .vl-mini .box { border-radius: 8px; border-width: 1.5px; }
html[data-theme="dark"] .vl-mini .w-grid { --gc: 28px; --gg: 3px; }
html[data-theme="dark"] .vl-mini .gcell { border-width: 1.5px; border-radius: 7px; }
html[data-theme="dark"] .vl-mini .map { border-radius: 9px; }
html[data-theme="dark"] .vl-mini .var { border-width: 1.5px; }
html[data-theme="dark"] .vl-mini .v-mini-caption { color: #c5cfde; }
html[data-theme="dark"] .visual-invite { border: 1px solid #41506e; border-radius: 12px; background: linear-gradient(90deg, #282c34, #2c2a32); color: #d2ddf3; }
html[data-theme="dark"] .visual-invite:hover { border-color: #8fa9e6; box-shadow: 0 6px 18px -12px #3d6fe080; }
html[data-theme="dark"] .visual-invite > .icon { color: #89b0ff; }
html[data-theme="dark"] .visual-invite-art { border-radius: 10px; background: #23262c; }
html[data-theme="dark"] .visual-invite-art i { border-radius: 4px; border: 2px solid #3d6fe0; background: #292f3b; }
html[data-theme="dark"] .visual-invite-art i:nth-child(n + 3) { border-color: #2f9a5c; background: #22352a; }
html[data-theme="dark"] .visual-invite small { color: #abb6c9; }
html[data-theme="dark"] .visual-invite.compact { border-radius: 10px; }
html[data-theme="dark"] .visual-invite.compact .visual-invite-art { border-radius: 6px; }
html[data-theme="dark"] .visual-invite.compact .visual-invite-art i { border-width: 1.5px; border-radius: 2px; }
html[data-theme="dark"] .v-app-title { color: #d2ddf3; }
html[data-theme="dark"] .v-badge { border-radius: 999px; background: #312d3d; color: #aeadff; }
html[data-theme="dark"] .v-hero h1 { color: #e3ebff; }
html[data-theme="dark"] .v-hero p { color: #bac4d8; }
html[data-theme="dark"] .v-card { border: 1px solid #454a51; border-radius: 18px; background: #23262c; color: inherit; text-decoration: none; }
html[data-theme="dark"] .v-card:hover { border-color: #475878; box-shadow: 0 10px 26px -18px #14203060; }
html[data-theme="dark"] .v-card > .icon { color: #a8b2c2; }
html[data-theme="dark"] .v-card-art { border-radius: 14px; background: #292c32; }
html[data-theme="dark"] .v-card-art i { border-radius: 5px; border: 2px solid #3d6fe0; background: #292f3b; }
html[data-theme="dark"] .v-card-art i:nth-child(n + 3) { border-color: #2f9a5c; background: #22352a; }
html[data-theme="dark"] .v-card-body strong { color: #e3ebff; }
html[data-theme="dark"] .v-card-body span { color: #aeb9ce; }
html[data-theme="dark"] .v-card-body small { color: #a8b2c2; }
@media (max-width: 640px) {
html[data-theme="dark"] .vl { --cell: 42px; --gap: 6px; }
html[data-theme="dark"] .vl .v-board { border-radius: 16px; }
html[data-theme="dark"] .vl .box { border-radius: 11px; }
html[data-theme="dark"] .vl .w-grid { --gc: 34px; --gg: 4px; }
}
html[data-theme="dark"] .vl .tl-row .tl-name { color: #b5c2d8; }
html[data-theme="dark"] .vl .tl-track { border-radius: 8px; background: repeating-linear-gradient(90deg, #2c2f35 0 1px, transparent 1px 100%); background-color: #272a30; }
html[data-theme="dark"] .vl .tl-bar { border: 2px solid var(--tb, #3d6fe0); border-radius: 8px; background: var(--tbg, #2c3447); color: var(--tc, #b3cdff); }
html[data-theme="dark"] .vl .tl-tick { color: #a8b1c5; }
html[data-theme="dark"] .vl .tl-row.picked .tl-bar { --tb: #2f9a5c; --tbg: #2fb36a; --tc: #fff; box-shadow: 0 0 0 3px #2f9a5c33; }
html[data-theme="dark"] .vl .tl-row.off .tl-bar { --tb: #c8ced8; --tbg: #2f3238; --tc: #a8b2c1; }
html[data-theme="dark"] .vl .v-rules li { color: #c9d1e5; }
html[data-theme="dark"] .vl .v-rule-ic { color: #a8b2c1; }
html[data-theme="dark"] .vl .v-rules li.ok { color: #87d29e; }
html[data-theme="dark"] .vl .v-rules li.ok .v-rule-ic { color: #64ca89; animation: v-pop .3s ease-out; }
html[data-theme="dark"] .vl .v-rules li.bad { color: #ffa08a; }
html[data-theme="dark"] .vl .v-rules li.bad .v-rule-ic { color: #ff8c71; }
html[data-theme="dark"] .vl .v-opt-pic .tl-bar { border-width: 1.5px; border-radius: 5px; }
html[data-theme="dark"] .vl .v-helpbtn { border: 1px solid currentColor; border-radius: 999px; color: #b3cdff; background: transparent; }
html[data-theme="dark"] .vl .v-helpbtn { color: #ffa08a; }
html[data-theme="dark"] .vl .v-help { border: 1px solid #464b54; border-radius: 16px; background: #272a30; }
html[data-theme="dark"] .vl .v-help-title { color: #d4dff5; }
html[data-theme="dark"] .vl .v-help-msg { border-radius: 13px; }
html[data-theme="dark"] .vl .v-help-msg.user { background: #245bd6; color: #fff; }
html[data-theme="dark"] .vl .v-help-msg.bot { background: #23262c; border: 1px solid #454a51; color: #d4dff5; }
html[data-theme="dark"] .vl .v-help-msg.error { border-color: #7f4334; color: #ffa08a; }
html[data-theme="dark"] .vl .v-help-dots i { border-radius: 50%; background: #9aa3b2; animation: v-dot 1s infinite ease-in-out; }
html[data-theme="dark"] .vl .v-help-quick button { border: 1.5px solid #474f5a; border-radius: 12px; background: #23262c; color: #d4dff5; }
html[data-theme="dark"] .vl .v-help-form input { border: 1.5px solid #474f5a; border-radius: 12px; }
html[data-theme="dark"] .vl .v-help-form button { border-radius: 12px; background: #245bd6; color: #fff; }
html[data-theme="dark"] .vl .v-skill-badge { background: #332e42; color: #b2a1ff; }
html[data-theme="dark"] .vl .v-skill-retry { background: #342c14; color: #dea646; }
html[data-theme="dark"] .vl .v-opt-pic.v-board { border: 0; box-shadow: none; background: transparent; }
html[data-theme="dark"] .vl .dg-edges path { fill: none; stroke: var(--tb, #4c5664); }
html[data-theme="dark"] .vl .dg-edges polygon { fill: var(--tb, #aeb8c7); }
html[data-theme="dark"] .vl .dg-edges g.enter { animation: dg-in .45s ease-out .25s backwards; }
html[data-theme="dark"] .vl .dg-edges g.t-active path { animation: dg-flow .8s linear infinite; }
html[data-theme="dark"] .vl .dg-label { border: 1px solid #454a51; border-radius: 6px; background: #23262c; color: #b5c2d8; }
html[data-theme="dark"] .vl .dnode { border: 2px solid var(--tb, #474f5a); border-radius: 13px; background: var(--tbg, #23262c); color: var(--tc, #d8e4f8); box-shadow: 0 2px 0 #454950; }
html[data-theme="dark"] .vl .dnode.enter { animation: dg-pop .45s cubic-bezier(.3, 1.4, .5, 1); }
html[data-theme="dark"] .vl .dnode.t-match { box-shadow: 0 0 0 4px #2f9a5c22; }
html[data-theme="dark"] .vl .dnode.t-wrong { box-shadow: 0 0 0 4px #d0573b22; }
html[data-theme="dark"] .vl .dnode.t-done { box-shadow: none; }
html[data-theme="dark"] .vl .dn-ic { border-radius: 8px; background: var(--kbg, #2c2f35); color: var(--kc, #b5c2d8); }
html[data-theme="dark"] .vl .dn-ic svg { fill: none; stroke: currentColor; }
html[data-theme="dark"] .vl .dnode.dn-tight .dn-ic { border-radius: 6px; }
html[data-theme="dark"] .vl .dn-sub { color: #a8b1c3; }
html[data-theme="dark"] .vl .dnode[data-kind="service"] { --kc: #95b8ff; --kbg: #2a303d; }
html[data-theme="dark"] .vl .dnode[data-kind="db"] { --kc: #afa4ff; --kbg: #322d40; }
html[data-theme="dark"] .vl .dnode[data-kind="cache"] { --kc: #f5974c; --kbg: #392b1a; }
html[data-theme="dark"] .vl .dnode[data-kind="storage"] { --kc: #64c5b5; --kbg: #203632; }
html[data-theme="dark"] .vl .dnode[data-kind="queue"] { --kc: #f886ba; --kbg: #3d2a33; }
html[data-theme="dark"] .vl .dnode[data-kind="cdn"] { --kc: #6bb9f6; --kbg: #25323b; }
html[data-theme="dark"] .vl .dnode[data-kind="lb"] { --kc: #8fc36f; --kbg: #2c3320; }
html[data-theme="dark"] .vl .dnode[data-kind="counter"] { --kc: #dfaa63; --kbg: #342c14; }
html[data-theme="dark"] .vl .dnote { border: 1.5px solid #5f4b89; border-radius: 999px; background: #2e2a36; color: #bfbbff; }
html[data-theme="dark"] .vl .dnode.t-wrong .dnote { border-color: #854232; background: #3b2b27; color: #ffa08a; }
html[data-theme="dark"] .vl .dnode.t-match .dnote { border-color: #1e623f; background: #22352a; color: #87d29e; }
html[data-theme="dark"] .vl .tappable .dnode:hover { border-color: #425b96; }
html[data-theme="dark"] .vl .dnode.picked { border-color: #3d6fe0; background: #292f3b; box-shadow: 0 0 0 4px #3d6fe036; }
html[data-theme="dark"] .vl .v-pool { border: 2px dashed #464b54; border-radius: 15px; background: #26292f; }
html[data-theme="dark"] .vl .v-pool:empty::before { color: #a8b2c2; }
html[data-theme="dark"] .vl .v-bin { border: 2px solid #464b54; border-radius: 15px; background: #23262c; }
html[data-theme="dark"] .vl .v-bin.ready { border-color: #415580; }
html[data-theme="dark"] .vl .v-bin.ready:hover, html[data-theme="dark"] .vl .v-bin.over { border-color: #3d6fe0; background: #282c34; }
html[data-theme="dark"] .vl .v-bin-name { color: #d4dff5; }
html[data-theme="dark"] .vl .v-chip { border: 2px solid #464b54; border-radius: 12px; background: #23262c; box-shadow: 0 2px 0 #454a51; color: #d4dff5; }
html[data-theme="dark"] .vl .v-chip:hover { border-color: #475878; }
html[data-theme="dark"] .vl .v-chip.sel { border-color: #3d6fe0; background: #282c34; box-shadow: 0 0 0 4px #3d6fe024, 0 2px 0 #3d6fe0; }
html[data-theme="dark"] .vl .v-chip.dragging { box-shadow: 0 14px 26px -12px #14203070; }
html[data-theme="dark"] .vl .v-chip.ok { border-color: #2f9a5c; background: #25312a; box-shadow: 0 2px 0 #2f9a5c; color: #87d29e; }
html[data-theme="dark"] .vl .v-chip.nope { border-color: #d0573b; background: #3b2b27; box-shadow: 0 2px 0 #d0573b; color: #ffa08a; }
html[data-theme="dark"] .vl .v-seq-item { border: 2px solid #464b54; border-radius: 14px; background: #23262c; box-shadow: 0 3px 0 #454a51; color: #d4dff5; }
html[data-theme="dark"] .vl .v-seq-item:hover:not(.ok):not(.nope) { border-color: #475878; }
html[data-theme="dark"] .vl .v-seq-item:focus-visible { outline: 3px solid #7299f0; outline-offset: 2px; }
html[data-theme="dark"] .vl .v-seq-num { border-radius: 50%; background: #2b2e35; color: #b5c2d8; }
html[data-theme="dark"] .vl .v-seq-grip { border-radius: 10px; color: #a3abb8; }
html[data-theme="dark"] .vl .v-seq-grip svg { fill: currentColor; }
html[data-theme="dark"] .vl .v-seq-item:hover .v-seq-grip { background: #282c34; color: #89b0ff; }
html[data-theme="dark"] .vl .v-seq-item.dragging { border-color: #3d6fe0; background: #272a30; box-shadow: 0 18px 32px -16px #14203077, 0 3px 0 #3d6fe0; }
html[data-theme="dark"] .vl .v-seq-item.dragging .v-seq-num { background: #3d6fe0; color: #fff; }
html[data-theme="dark"] .vl .v-seq-item.ok { border-color: #2f9a5c; background: #25312a; box-shadow: 0 3px 0 #2f9a5c; color: #87d29e; }
html[data-theme="dark"] .vl .v-seq-item.ok .v-seq-num { background: #2f9a5c; color: #fff; }
html[data-theme="dark"] .vl .v-seq-item.nope { border-color: #d0573b; background: #3b2b27; box-shadow: 0 3px 0 #d0573b; color: #ffa08a; }
html[data-theme="dark"] .vl .v-seq-item.nope .v-seq-num { background: #d0573b; color: #fff; }
html[data-theme="dark"] .vl .w-diagram.dg-compact .dn-ic { border-radius: 7px; }
/* by hand */
/* Dark theme fixes by hand, after the rules assets/dark.php makes from the light stylesheets (lib/dark-theme.php). */
html[data-theme="dark"] { color-scheme: dark; }
/* The page behind the cards: darker than them, as the light page is a little darker than its white cards. The plans
   page's paper (upgrade/landing.css) too. */
html[data-theme="dark"], html[data-theme="dark"] body { background: #0f1217; }
html[data-theme="dark"] { --paper: #0f1217; }
/* Switch knobs stay light. */
html[data-theme="dark"] .switch:after, html[data-theme="dark"] .menu-switch::after { background: #e4e7ec; }
/* The logo as in its light version (images/logo-light2.png): "Algo" cyan, the mark unchanged. The plans page's logo
   is an image, so there the dark theme shows its copy in those colors (upgrade/logo-on-dark.svg). */
html[data-theme="dark"] .logo > g > .st1 { fill: #05aede; }
html[data-theme="dark"] .brand img:not(.logo-on-dark) { display: none; }
html[data-theme="dark"] .logo-on-dark { display: block; }
/* The small line in the plans page's lime box (its rule doesn't name the box). */
html[data-theme="dark"] .cta-note { color: #607444; }
/* Menus and dialogs sit above the page: a lighter grey with a clear edge. */
html[data-theme="dark"] .menu, html[data-theme="dark"] .modal, html[data-theme="dark"] .tour-pop { background: #2d3139; border-color: #4a505b; }
html[data-theme="dark"] .menu a:hover, html[data-theme="dark"] .menu button:hover { background: #383d47; }
/* The theme button's name on hover: a step lighter than the top bar. */
html[data-theme="dark"] .theme-button:hover::after, html[data-theme="dark"] .theme-button:focus-visible::after { background: #3a3f49; }