/* landing */
html[data-theme="dark"] { --paper: #272a30; --ink: #cde9f3; --muted: #a7b9bb; --line: #484c54; --blue: #70c2f0; --lime: #d8ee98; --radius: 18px; }
html[data-theme="dark"] body { background: var(--paper); color: var(--ink); }
html[data-theme="dark"] a { color: inherit; text-decoration: none; }
html[data-theme="dark"] a:focus-visible, html[data-theme="dark"] button:focus-visible, html[data-theme="dark"] input:focus-visible, html[data-theme="dark"] summary:focus-visible { outline: 3px solid #0c84b5; outline-offset: 5px; }
html[data-theme="dark"] button { color: inherit; }
html[data-theme="dark"] .skip-link { background: #23262c; }
html[data-theme="dark"] .sr-only { border: 0; }
html[data-theme="dark"] .site-header { border-bottom: 1px solid var(--line); background: var(--paper); }
html[data-theme="dark"] .brand-divider { background: #3d463c; }
html[data-theme="dark"] .brand-dot { color: var(--blue); }
html[data-theme="dark"] nav a:hover, html[data-theme="dark"] .text-link:hover, html[data-theme="dark"] footer>a:last-child:hover { color: var(--blue); }
html[data-theme="dark"] .button { border-radius: 8px; }
html[data-theme="dark"] .button-dark { color: var(--ac-on-ink, #172e36); background: var(--ink); }
html[data-theme="dark"] .button-dark:hover { background: #28505a; }
html[data-theme="dark"] .button-blue { color: #fff; background: var(--blue); box-shadow: 0 3px 0 #004f75; }
html[data-theme="dark"] .button-blue:hover { background: #075a7d; }
html[data-theme="dark"] .eyebrow { background: #2e3129; border: 1px solid #464f3d; border-radius: 30px; }
html[data-theme="dark"] .live-dot { border-radius: 50%; background: #66853b; }
html[data-theme="dark"] .underlined { color: var(--blue); }
html[data-theme="dark"] .underlined svg { fill: none; stroke: #b3d770; }
html[data-theme="dark"] .hero-description { color: var(--muted); }
html[data-theme="dark"] .hero-notes { color: #a8b5ad; }
html[data-theme="dark"] .hero-notes b { color: #9ac06f; }
html[data-theme="dark"] .hero-spark { color: #86a756; }
html[data-theme="dark"] .spark-two { color: #e0a778; }
html[data-theme="dark"] .demo-caption>span:last-child { color: var(--muted); }
html[data-theme="dark"] .tiny-square { background: var(--blue); border-radius: 2px; }
html[data-theme="dark"] .workshop-demo { border: 1px solid #4a554f; border-radius: 14px; background: #23262c; box-shadow: 0 16px 45px -25px #233b4b44,0 4px 0 #474b40; }
html[data-theme="dark"] .demo-toolbar { border-bottom: 1px solid var(--line); background: #2a2e34; }
html[data-theme="dark"] .window-dots i { border-radius: 50%; background: #41493f; }
html[data-theme="dark"] .window-dots i:first-child { background: #d9a493; }
html[data-theme="dark"] .window-dots i:nth-child(2) { background: #4e472e; }
html[data-theme="dark"] .demo-toolbar-label { color: #a7b6ab; }
html[data-theme="dark"] .demo-lesson { border-right: 1px solid var(--line); }
html[data-theme="dark"] .step-label { color: #a6b5b0; }
html[data-theme="dark"] .demo-steps button { background: none; border: 0; color: #a6b5b4; border-radius: 4px; }
html[data-theme="dark"] .demo-steps button span { border: 1px solid #4d574c; border-radius: 50%; }
html[data-theme="dark"] .demo-steps button[aria-pressed=true] { color: var(--blue); }
html[data-theme="dark"] .demo-steps button[aria-pressed=true] span { color: white; background: var(--blue); border-color: var(--blue); }
html[data-theme="dark"] .lesson-copy>p { color: var(--muted); }
html[data-theme="dark"] .example-message p { background: #2b2e34; border-radius: 0 10px 10px 10px; }
html[data-theme="dark"] .message-avatar, html[data-theme="dark"] .coach-avatar { border-radius: 7px; background: #2f3239; color: #93c4dc; }
html[data-theme="dark"] .coach-avatar { background: #2f3522; color: #a8c87e; }
html[data-theme="dark"] .coach-message p { color: #a9b8b1; }
html[data-theme="dark"] .demo-next { border: 0; background: none; color: var(--blue); }
html[data-theme="dark"] .demo-preview { background: #25292f; }
html[data-theme="dark"] .preview-toolbar { color: #a8b5ac; }
html[data-theme="dark"] .preview-toolbar>span:first-child { color: #a5b6aa; }
html[data-theme="dark"] .empty-page { border: 1px solid #4a583a; border-radius: 7px; background: #2b2f23; box-shadow: 7px 7px 0 #444a3a; }
html[data-theme="dark"] .empty-page span { color: #a3bb80; }
html[data-theme="dark"] .preview-empty p { color: #abb4a8; }
html[data-theme="dark"] .preview-bottom { border-top: 1px dashed #495042; color: #a6b79d; background: #2b2e25; }
html[data-theme="dark"] .daylight-topline { color: #aab69f; }
html[data-theme="dark"] .daylight-symbol { color: #b89942; }
html[data-theme="dark"] .daylight-app h3>span { color: #94a471; }
html[data-theme="dark"] .daylight-description { color: #adb4a4; }
html[data-theme="dark"] .heading-note { color: #a8b891; background: #2e3025; border-radius: 8px; }
html[data-theme="dark"] #demo-task-form { border: 1px solid #4b5142; border-radius: 6px; background: #23262c; }
html[data-theme="dark"] #demo-task-input { border: 0; background: none; color: #bed4bc; }
html[data-theme="dark"] #demo-task-form>button { border: 0; background: #677b4b; color: white; border-radius: 4px; }
html[data-theme="dark"] .demo-error { color: #ff9b8b; }
html[data-theme="dark"] .demo-tasks li { border-bottom: 1px solid #494c42; }
html[data-theme="dark"] .demo-tasks input:checked+span { text-decoration: line-through; color: #aab5a6; }
html[data-theme="dark"] .demo-empty-list { color: #acb5a1; }
html[data-theme="dark"] .daylight-footer { color: #a9b69f; }
html[data-theme="dark"] .demo-disclaimer { color: #aab5a7; }
html[data-theme="dark"] .kicker { color: #a8b798; }
html[data-theme="dark"] .section-heading>p { color: var(--muted); }
html[data-theme="dark"] .step-illustration { border-bottom: 1px solid var(--line); }
html[data-theme="dark"] .step-number { color: #94a27c; }
html[data-theme="dark"] .step-illustration svg { fill: none; stroke: #9abebc; }
html[data-theme="dark"] .steps-grid p { color: var(--muted); }
html[data-theme="dark"] .projects-section { background: #2d3036; border-block: 1px solid #474c41; }
html[data-theme="dark"] .project-card { border: 1px solid #495143; border-radius: 12px; background: #25292f; }
html[data-theme="dark"] .project-art { border-bottom: 1px solid #495143; }
html[data-theme="dark"] .art-tasks { background: #313a24; }
html[data-theme="dark"] .mini-tasks { background: #26292f; border-radius: 8px; box-shadow: 0 10px 15px #40512a14; }
html[data-theme="dark"] .mini-heading span { color: #a2ba8e; }
html[data-theme="dark"] .mini-tasks>div:not(:first-child) { border-top: 1px solid #484d3e; }
html[data-theme="dark"] .mini-tasks i { border: 1px solid #556841; border-radius: 3px; color: #fff; }
html[data-theme="dark"] .mini-tasks .checked { background: #7c945b; }
html[data-theme="dark"] .mini-tasks s { color: #acb5a0; }
html[data-theme="dark"] .art-memory { background: #36343f; }
html[data-theme="dark"] .memory-board>span { border-radius: 7px; background: #272a30; color: #bca5d8; box-shadow: 0 3px 0 #5d5671; }
html[data-theme="dark"] .memory-board .card-back { background: #9389b4; color: #ded9eb; }
html[data-theme="dark"] .art-sticker { background: #37331a; box-shadow: 1px 2px 2px #00000012; }
html[data-theme="dark"] .art-studio { background: #513a2c; }
html[data-theme="dark"] .studio-slide { background: #362c1b; color: #f2b69c; box-shadow: 0 5px 10px #42200f13; }
html[data-theme="dark"] .studio-slide em { color: #f19774; }
html[data-theme="dark"] .studio-line { background: #b98164; }
html[data-theme="dark"] .studio-back { background: #b98067; }
html[data-theme="dark"] .studio-colors { background: #23262c; border-radius: 30px; }
html[data-theme="dark"] .studio-colors i { border-radius: 50%; background: #b98067; }
html[data-theme="dark"] .studio-colors i:nth-child(2) { background: #453922; }
html[data-theme="dark"] .studio-colors i:nth-child(3) { background: #724532; }
html[data-theme="dark"] .project-meta { color: #abb5a1; }
html[data-theme="dark"] .badge { border: 1px solid #4b5144; border-radius: 4px; color: #aab69f; }
html[data-theme="dark"] .badge-live { color: #aecb8c; background: #2e351f; border-color: #4b5b2b; }
html[data-theme="dark"] .project-info p { color: var(--muted); }
html[data-theme="dark"] .card-link { color: var(--blue); }
html[data-theme="dark"] .card-link:hover { text-decoration: underline; }
html[data-theme="dark"] .card-footnote { color: #abb5a0; }
html[data-theme="dark"] .own-idea { border: 1px dashed #4f5d41; border-radius: 12px; }
html[data-theme="dark"] .own-idea-icon { color: #a3bb89; }
html[data-theme="dark"] .own-idea p { color: #a9b69e; }
html[data-theme="dark"] .learning-copy>p:not(.kicker) { color: var(--muted); }
html[data-theme="dark"] .benefit-list>li>span { color: #99bf7c; }
html[data-theme="dark"] .benefit-list p { color: var(--muted); }
html[data-theme="dark"] .notebook { background: #363220; background-image: repeating-linear-gradient(transparent,transparent 31px,#ddd9c655 31px,#ddd9c655 32px); border-radius: 4px; box-shadow: 6px 12px 0 #484b40; }
html[data-theme="dark"] .notebook-pin { background: rgba(57, 64, 40, 0.667); }
html[data-theme="dark"] .notebook-label { color: #b5b399; }
html[data-theme="dark"] .notebook-quote { color: #c3c4ab; }
html[data-theme="dark"] .notebook-rule { background: #4d4b36; }
html[data-theme="dark"] .notebook-note>span { color: #9cbe7f; }
html[data-theme="dark"] .notebook-note p { color: #b3b39c; }
html[data-theme="dark"] .notebook-note strong { color: #b8c4a6; }
html[data-theme="dark"] .notebook-star { color: #9fbe73; }
html[data-theme="dark"] .faq-section { border-top: 1px solid var(--line); }
html[data-theme="dark"] .faq-section>div>p:not(.kicker) { color: var(--muted); }
html[data-theme="dark"] .faq-list details { border-bottom: 1px solid var(--line); }
html[data-theme="dark"] .faq-list details:first-child { border-top: 1px solid var(--line); }
html[data-theme="dark"] summary>span { color: #a4b998; }
html[data-theme="dark"] details p { color: var(--muted); }
html[data-theme="dark"] .final-cta { --ink: #172e36; --muted: #59696b; --blue: #076b95; --ac-on-ink: #fff; color: #172e36; background: var(--lime); border-radius: 16px; }
html[data-theme="dark"] .final-cta .kicker { color: #566c32; }
html[data-theme="dark"] .final-cta>p:not(.kicker) { color: #526637; }
html[data-theme="dark"] .cta-note { color: #a4ba87; }
html[data-theme="dark"] .cta-star { color: #b4cf7a; }
html[data-theme="dark"] .site-footer>p { color: #a9b5a8; }
html[data-theme="dark"] .site-footer>a:last-child { color: #a6b8af; }
@media(max-width:760px) {
html[data-theme="dark"] .project-art { border-bottom: 0; border-right: 1px solid #495143; }
}
@media(max-width:520px) {
html[data-theme="dark"] .demo-lesson { border-right: 0; border-bottom: 1px solid var(--line); }
html[data-theme="dark"] .step-illustration { border: 0; }
html[data-theme="dark"] .project-art { border-right: 0; border-bottom: 1px solid #495143; }
}
@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"] .catalog-links p { color: var(--muted); }
html[data-theme="dark"] .project-mini { background: rgba(35, 38, 44, 0.729); border: 1px solid #3c4047; border-radius: 12px; box-shadow: 0 12px 24px #172e3610; }
html[data-theme="dark"] .art-quiz { background: #35323f; }
html[data-theme="dark"] .quiz-mini>span { background: #2f2c35; border: 1px solid #504a5c; border-radius: 5px; }
html[data-theme="dark"] .art-pixels { background: #2f3427; }
html[data-theme="dark"] .pixel-flower .p1 { background: #df8d74; }
html[data-theme="dark"] .pixel-flower .p2 { background: #6d895c; }
html[data-theme="dark"] .pixel-flower .p3 { background: #4f462d; }
html[data-theme="dark"] .palette i { border-radius: 3px; background: #df8d74; }
html[data-theme="dark"] .palette i:nth-child(2) { background: #6d895c; }
html[data-theme="dark"] .palette i:nth-child(3) { background: #4f462d; }
html[data-theme="dark"] .palette i:nth-child(4) { background: #172e36; }
html[data-theme="dark"] .art-music { background: #3f3324; }
html[data-theme="dark"] .music-mini { background: #344f43; color: #f8f9f5; border: 0; }
html[data-theme="dark"] .music-mini small { color: #d8ee98; }
html[data-theme="dark"] .music-wave { color: #d8ee98; }
html[data-theme="dark"] .art-movies { background: #30333a; }
html[data-theme="dark"] .movie-posters span { border-radius: 3px; background: #d8aa83; color: #352c38; }
html[data-theme="dark"] .movie-posters span:nth-child(2) { background: #466b6a; color: white; }
html[data-theme="dark"] .movie-posters span:nth-child(3) { background: #3c442c; }
html[data-theme="dark"] .art-bricks { background: #3d362c; }
html[data-theme="dark"] .brick-mini { background: #253946; border: 0; color: #dbe9eb; }
html[data-theme="dark"] .brick-wall i { border-radius: 2px; background: #d9967a; }
html[data-theme="dark"] .brick-wall i:nth-child(n+7) { background: #504930; }
html[data-theme="dark"] .brick-wall i:nth-child(n+13) { background: #9fb780; }
html[data-theme="dark"] .game-ball { background: #23262c; border-radius: 50%; }
html[data-theme="dark"] .game-paddle { background: #2b383a; border-radius: 4px; }
html[data-theme="dark"] .faq-list p a { color: var(--blue); text-decoration: underline; }
/* plans */
html[data-theme="dark"] .free-intro { color: var(--muted); }
html[data-theme="dark"] .free-intro strong { color: var(--ink); }
html[data-theme="dark"] .free-intro .text-link { color: var(--blue); }
html[data-theme="dark"] .billing-switch { border: 1px solid var(--line); border-radius: 12px; background: #2e3129; }
html[data-theme="dark"] .billing-switch button { border: 0; border-radius: 8px; background: transparent; }
html[data-theme="dark"] .billing-switch button[aria-pressed=true] { background: #23262c; box-shadow: 0 2px 7px #172e3612; }
html[data-theme="dark"] .billing-switch span { --ink: #172e36; --muted: #59696b; --blue: #076b95; --ac-on-ink: #fff; color: #172e36; background: var(--lime); border-radius: 4px; }
html[data-theme="dark"] .plan-card { border: 1px solid #495548; border-radius: 20px; background: #23262c; }
html[data-theme="dark"] .starter-plan { border-top: 5px solid var(--blue); }
html[data-theme="dark"] .pro-plan { background: #2d3226; border-top: 5px solid #7b9653; }
html[data-theme="dark"] .plan-eyebrow { color: var(--muted); }
html[data-theme="dark"] .plan-card h2 span { color: var(--blue); }
html[data-theme="dark"] .plan-description { color: var(--muted); }
html[data-theme="dark"] .plan-price>span { color: var(--muted); }
html[data-theme="dark"] .billing-detail { color: var(--muted); }
html[data-theme="dark"] .renewal-note { color: var(--muted); }
html[data-theme="dark"] .plan-rule { border-top: 1px solid var(--line); }
html[data-theme="dark"] .plan-features li:before { color: #9ac274; }
html[data-theme="dark"] .plan-fit { border-top: 1px solid var(--line); color: var(--muted); }
html[data-theme="dark"] .pricing-note { color: var(--muted); }
html[data-theme="dark"] .member-note { border: 1px solid var(--line); border-radius: 12px; }
html[data-theme="dark"] .member-note>span { --ink: #172e36; --muted: #59696b; --blue: #076b95; --ac-on-ink: #fff; color: #172e36; border-radius: 50%; background: var(--lime); }
html[data-theme="dark"] .member-note p { color: var(--muted); }
html[data-theme="dark"] .member-note strong { color: var(--ink); }
html[data-theme="dark"] .path-number { color: var(--blue); border-bottom: 1px solid var(--line); }
html[data-theme="dark"] .plan-button { border: 0; }
html[data-theme="dark"] .checkout-status { border: 1px solid #495548; border-radius: 12px; background: #2d3226; }
html[data-theme="dark"] .checkout-status a { color: var(--blue); text-decoration: underline; }
html[data-theme="dark"] .checkout-status button { border: 1px solid var(--line); border-radius: 6px; background: #23262c; }
html[data-theme="dark"] .checkout-dialog { border: 1px solid var(--line); border-radius: 18px; color: var(--ink); background: var(--paper); box-shadow: 0 24px 90px #172e3633; }
html[data-theme="dark"] .checkout-dialog::backdrop { background: #172e3677; }
html[data-theme="dark"] .checkout-dialog p { color: var(--muted); }
html[data-theme="dark"] .dialog-close { border: 0; background: transparent; }
html[data-theme="dark"] .facebook-button { background: #1877f2; color: white; border: 0; }
html[data-theme="dark"] .checkout-dialog #signin-error { color: #ff9c96; }
html[data-theme="dark"] #signin-selection { color: var(--ink); }
html[data-theme="dark"] .plan-old { color: var(--muted); }
html[data-theme="dark"] .plan-old b { --ink: #172e36; --muted: #59696b; --blue: #076b95; --ac-on-ink: #fff; background: var(--lime); color: var(--ink); border-radius: 4px; }
html[data-theme="dark"] .pro-plan .plan-eyebrow b { background: var(--ink); color: var(--ac-on-ink, #172e36); border-radius: 4px; }
html[data-theme="dark"] .lifetime-card { border: 1px dashed #9eb37c; border-radius: 16px; background: #2b2e25; }
html[data-theme="dark"] .lifetime-card p { color: var(--muted); }
html[data-theme="dark"] .lifetime-price s { color: var(--muted); }
html[data-theme="dark"] .lifetime-price span { color: var(--muted); }
html[data-theme="dark"] .member-state { border: 1px solid #495548; border-radius: 12px; background: #2d3226; }
html[data-theme="dark"] .member-state>span { --ink: #172e36; --muted: #59696b; --blue: #076b95; --ac-on-ink: #fff; color: #172e36; border-radius: 50%; background: var(--lime); }
html[data-theme="dark"] .member-state a { color: var(--blue); }
html[data-theme="dark"] .results-grid article { border-top: 1px solid var(--line); }
html[data-theme="dark"] .results-grid strong { color: var(--blue); }
html[data-theme="dark"] .results-grid p { color: var(--muted); }
html[data-theme="dark"] .quote-card { background: #26292f; border: 1px solid #495041; border-radius: 10px; }
html[data-theme="dark"] .quote-mark { color: #a4b787; }
html[data-theme="dark"] .quote-card blockquote { color: #b6cdc4; }
html[data-theme="dark"] .quote-card figcaption { border-top: 1px solid #474e3e; }
html[data-theme="dark"] .quote-card img { border-radius: 50%; }
html[data-theme="dark"] .quote-card figcaption a:hover { text-decoration: underline; }
html[data-theme="dark"] .quote-card figcaption>div>span { color: #a7b79d; }
html[data-theme="dark"] .stories-intro { color: var(--muted); }
html[data-theme="dark"] .stories-intro .text-link { color: var(--blue,#72bdec); }
html[data-theme="dark"] .story-video p { color: var(--muted); }
html[data-theme="dark"] .story-frame { border-radius: 14px; background: #172e36; box-shadow: 0 16px 45px -25px #233b4b66; }
html[data-theme="dark"] .story-frame iframe { border: 0; }
html[data-theme="dark"] .plus-plan { border-top: 5px solid var(--blue); }
html[data-theme="dark"] .billing-detail { color: var(--ink); }
html[data-theme="dark"] .discount-banner { border: 1px solid #704633; border-radius: 12px; background: #332924; }
html[data-theme="dark"] .discount-banner>svg { color: #fc9b7c; }
html[data-theme="dark"] .discount-banner p { color: #f6bba5; }
html[data-theme="dark"] .discount-banner strong { color: #fc9b7c; }
html[data-theme="dark"] .plan-tag { border-radius: 20px; border: 1px solid; }
html[data-theme="dark"] .plan-tag.plus { color: var(--blue); border-color: #3a5867; background: #2a2d33; }
html[data-theme="dark"] .plan-tag.pro { color: #a5c585; border-color: #4b5a2b; background: #2d3226; }
html[data-theme="dark"] .story-poster { border: 0; }
html[data-theme="dark"] .story-play { border-radius: 50%; background: rgba(35, 38, 44, 0.941); color: var(--blue); box-shadow: 0 10px 30px #0005; }
html[data-theme="dark"] .story-time { border-radius: 6px; background: #000a; color: #fff; }
html[data-theme="dark"] .story-poster:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
html[data-theme="dark"] .offer-buy { border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
html[data-theme="dark"] .offer-details { border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
html[data-theme="dark"] .offer-switch { background: #323828; border-color: #49543c; }
html[data-theme="dark"] .offer-proof { border: 1px solid #495548; border-radius: 20px; background: #23262c; }
html[data-theme="dark"] .proof-quote blockquote { color: var(--ink); }
html[data-theme="dark"] .proof-quote img { border-radius: 50%; }
html[data-theme="dark"] .proof-quote figcaption small { color: var(--muted); }
html[data-theme="dark"] .proof-video { border: 0; border-radius: 12px; background: #172e36; }
html[data-theme="dark"] .proof-video:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
html[data-theme="dark"] .proof-video iframe { border: 0; }
html[data-theme="dark"] button.proof-video::before { border-radius: 8px; background: #e5201b; box-shadow: 0 2px 8px #0006; }
html[data-theme="dark"] button.proof-video::after { border-style: solid; border-width: 7.5px 0 7.5px 13px; border-color: transparent transparent transparent #3c4047; }
html[data-theme="dark"] .proof-more { color: var(--blue); }
html[data-theme="dark"] .plus-offer { color: var(--muted); border-top: 1px dashed #4b563b; }
html[data-theme="dark"] .plus-offer button { border: 0; background: none; color: var(--blue); text-decoration: underline; }
@media(max-width:860px) {
html[data-theme="dark"] .offer-buy { border-bottom: 1px solid #495548; border-radius: 20px; }
html[data-theme="dark"] .offer-details { border-top: 1px solid #495548; border-radius: 20px; }
}
html[data-theme="dark"] .step-shot { border: 1px solid #4a5347; border-radius: 10px; background: #23262c; box-shadow: 0 14px 32px -24px #233b4b66,0 3px 0 #474b40; }
html[data-theme="dark"] .country-price { color: #a5c585; }
html[data-theme="dark"] .country-price img { border-radius: 3px; box-shadow: 0 0 0 1px #172e361f; }
html[data-theme="dark"] .leave-offer-price s { color: var(--muted); }
html[data-theme="dark"] .leave-offer-price strong { color: var(--ink); }
html[data-theme="dark"] .leave-offer-price span { color: var(--muted); }
html[data-theme="dark"] .leave-offer .button { border: 0; }
html[data-theme="dark"] .leave-offer-keep { border: 0; background: none; color: var(--blue); text-decoration: underline; }
html[data-theme="dark"] .leave-offer-error { color: #ff9c96; }
html[data-theme="dark"] .button-quiet { color: var(--ink); background: #23262c; border: 1px solid #4b5949; }
html[data-theme="dark"] .plan-change .plan-change-note { color: var(--muted); }
html[data-theme="dark"] .plan-change .plan-change-error { color: #ff9f90; }
html[data-theme="dark"] .other-account { color: var(--muted); }
html[data-theme="dark"] .other-account strong { color: var(--ink); }
html[data-theme="dark"] .other-account button { border: 0; background: none; color: var(--blue); text-decoration: underline; }
html[data-theme="dark"] .offer-ended { color: var(--muted); }
html[data-theme="dark"] .offer-ended strong { color: var(--ink); }
html[data-theme="dark"] .paid-state [data-paid-wait] strong::after { border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: paid-spin .8s linear infinite; }
@media(prefers-reduced-motion:reduce) {
html[data-theme="dark"] .paid-state [data-paid-wait] strong::after { animation: none; }
}
/* 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; }
/* The course map's switch (11-08): the chosen group a strong blue with white text, the other blue on dark. */
html[data-theme="dark"] .cm-switch { background: #18223a; border-color: #2c3f6b; }
html[data-theme="dark"] .cm-switch-btn { color: #a9c1f7; }
html[data-theme="dark"] .cm-switch-btn:hover { background: #22325a; }
html[data-theme="dark"] .cm-switch-btn[aria-pressed="true"] { background: #2f6bf0; color: #fff; box-shadow: 0 6px 16px -6px #2f6bf099; }