/* Dark theme for the Darkmatter site. Every rule is keyed on html[data-theme="dark"], so the light
   pages are untouched; the attribute comes from the dark dev server (SITE_THEME=dark injects it on
   <html>) or from ?theme=dark, read by the boot script in each page's <head>. Assembled on
   2026-10-14 from three parts (page chrome and generic components; the mission and product
   sections; the Getting started picker and panels); the light values these override live in each
   page's inline <style>. The canvases read the attribute themselves (site/js/*.js). */

/* Part A: page chrome and generic components. Dark overrides for site/index.html, every rule keyed on html[data-theme="dark"]; layout, sizes, radii, blur radii and animations are the light site's. */

/* Tokens, root and body: the page palette. color-scheme turns the UA scrollbars (unstyled by hand) and form chrome dark. */
html[data-theme="dark"] { --bg: #0B0B0A; --fg: #EDEBE6; --dim: #8A8780; --line: #23221F; color-scheme: dark; background: var(--bg); }
html[data-theme="dark"] body { background: var(--bg); color: var(--fg); }
html[data-theme="dark"] a:hover { color: #B5B2AB; }

/* Header: the frosted bar over the page (with the original dark site's hairline under it) and the LinkedIn and X squares; the nav, the mobile menu and its dividers run on the tokens. */
html[data-theme="dark"] .site-header::before { background: rgba(11, 11, 10, 0.78); } /* no hairline under the bar since 2026-10-21 (Nick: "remove the horizontal line across the top of the nav bar"); the light page's bar never had one */
html[data-theme="dark"] .social { border-color: rgba(255, 255, 255, 0.10); background: rgba(20, 20, 19, 0.72); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 24px -14px rgba(0, 0, 0, 0.6); } /* the dark glass, as the cards (2026-10-22, with the light squares' liquid glass) */
html[data-theme="dark"] .social:hover { background: rgba(32, 32, 30, 0.84); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 24px -14px rgba(0, 0, 0, 0.7); }

/* Buttons: the warm-grey pill becomes a neutral wash with a light ring; the ghost pill a raised surface; the tint pill the orange wash; the beam ring breathes brighter instead of darker. */
html[data-theme="dark"] .btn { background: rgba(255, 255, 255, 0.06); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] .btn:hover { background: rgba(255, 255, 255, 0.10); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] .btn-ghost { background: #161615; box-shadow: 0 0 0 1px #2A2926; color: #EDEBE6; }
html[data-theme="dark"] .btn-ghost:hover { background: #1F1F1D; box-shadow: 0 0 0 1px #3A3935; color: #EDEBE6; }
html[data-theme="dark"] .btn-tint { background: rgba(240, 100, 43, 0.16); color: #F0642B; box-shadow: none; } /* the dark theme's orange wash, the picker pill's and the offer arrows' (Nick 2026-10-15: "change it back to the orange the dark theme uses on the other pages for the pills", after a light peach #FBD5C6 and the light pill's own #F9EDE9 each lasted minutes) */
html[data-theme="dark"] .btn-tint:hover { background: rgba(240, 100, 43, 0.24); color: #F0642B; box-shadow: none; }
/* The dark page's pills wear the orange set, as the white page's do (back on 2026-10-21: "change the pills on the dark mode to the orange ones like in light mode and make the globe accent color orange too"): the hero's See platform pill and the announcement's arrow in the terracotta #D97757 on the dark theme's orange wash (.btn-tint's, above), the picker's selected pill and the reserve card's pill in the brand orange on it, the missions' shown dot in the terracotta, and the globe's glow ending in the terracotta (horizon.js). For a day before that the whole set wore Nick's mint #9BF0A8 on a wash of itself, after the lime #C8F803 for a few minutes. */
/* The peach is the white page's pill as it renders there, 12% of #C96C4A over white = #F9EDE9 (20% on hover = #F4E2DB), laid solid here so it reads the same over black rather than as the dark wash's brown (Nick 2026-10-21: "I want the dark theme to have the same peach pills as the light theme but they look darker orange"). */
html[data-theme="dark"] .hero .btn-tint { background: #F9EDE9; color: #D97757; }
html[data-theme="dark"] .hero .btn-tint:hover { background: #F4E2DB; color: #D97757; }
@keyframes glow-dark { 50% { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16); } } /* the light keyframe breathes the ring to black, which vanishes on the dark page */
html[data-theme="dark"] .btn-glow { animation-name: glow-dark; }
@media (prefers-reduced-motion: reduce) { html[data-theme="dark"] .btn-glow { animation-name: none; } }

/* Hero: the New / Download pill, its badge and arrow circle. */
html[data-theme="dark"] .announce { background: #141413; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
html[data-theme="dark"] .announce:hover { border-color: #3A3935; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.6); }
html[data-theme="dark"] .announce-go { background: #F9EDE9; color: #D97757; } /* the arrow circle in the white page's peach with the terracotta (2026-10-21, "the same peach pills as the light theme"); the dark orange wash before, as the Now badge was until it went on 2026-10-20; a white 10% wash with an ink glyph before that */

/* Type: secondary copy and small accent text; headings, subheads, labels and captions run on the tokens. */
html[data-theme="dark"] .lede { color: #C9C6BF; }
html[data-theme="dark"] .label b { color: #E08A62; }

/* Figures: the capture frames get the hairline; the captures themselves stay as they are. */
html[data-theme="dark"] .shots img, html[data-theme="dark"] figure img { border-color: #2A2926; }

/* Step lists (.steps / .step): the card surface, the resting dot, the secondary paragraph ink. The open dot is restated so the resting rule's extra specificity does not win over it. */
html[data-theme="dark"] .steps { border-color: #2A2926; background: #141413; }
html[data-theme="dark"] .step h3 button::after { background: #3A3935; }
html[data-theme="dark"] .step.on h3 button::after { background: var(--accent); }
html[data-theme="dark"] .step p { color: #C9C6BF; }

/* Numbered steps (.panel ol / .num-list): secondary ink, the number circles and the join lines. */
html[data-theme="dark"] .panel ol li, html[data-theme="dark"] .num-list li { color: #C9C6BF; }
html[data-theme="dark"] .panel ol li::before, html[data-theme="dark"] .num-list li::before { border-color: #3A3935; background: #141413; color: #EDEBE6; }
html[data-theme="dark"] .panel ol li::after, html[data-theme="dark"] .num-list li::after { background: #2A2926; }

/* Picker: the selected pill in the orange wash; the ring and the resting pills run on the tokens. */
html[data-theme="dark"] .picker button[aria-selected="true"] { background: #F9EDE9; color: #D97757; } /* the terracotta of the dark hero's pills since 2026-10-22, as the white page's picker (Nick: "match the home page shades of orange"); the brand #F0642B before */ /* the white page's peach with the brand orange (2026-10-21, "the same peach pills as the light theme"; the dark orange wash before) */
html[data-theme="dark"] .picker button[aria-selected="true"]:hover { background: #F4E2DB; color: #D97757; }

/* Cards: the card surface and kicker; the trainer card's copy and its command in dark glass. */
html[data-theme="dark"] .card { border-color: #2A2926; background: #141413; }
html[data-theme="dark"] .card .kicker { color: #E08A62; }
html[data-theme="dark"] .trainer p { color: #C9C6BF; }

/* Install pill: dark glass, the copy control and its check mark. */
html[data-theme="dark"] .install { border-color: rgba(255, 255, 255, 0.10); background: rgba(20, 20, 19, 0.72); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 30px -14px rgba(0, 0, 0, 0.6); }
html[data-theme="dark"] .install .copy-btn { color: #8A8780; }
html[data-theme="dark"] .install .copy-btn:hover { color: var(--fg); background: rgba(255, 255, 255, 0.06); }
html[data-theme="dark"] .install .copy-btn[data-state="copied"] .ic-done { color: #8FC79A; }

/* Hint chips (.audience .hint): the card surface with the hairline and a neutral tag wash; the audience and platform-cta copy in secondary ink. */
html[data-theme="dark"] .audience .hint { border-color: #2A2926; background: #141413; }
html[data-theme="dark"] .audience .hint:hover { background: #1A1A18; }
html[data-theme="dark"] .audience .hint span { background: rgba(255, 255, 255, 0.06); }
html[data-theme="dark"] .audience p { color: #C9C6BF; }
html[data-theme="dark"] .platform-cta code { color: #C9C6BF; }

/* Code: pre in the inset surface (the window code areas keep no background of their own); the page-level and .light syntax palettes move to the original dark site's. */
html[data-theme="dark"] pre { border-color: #2A2926; background: #0F0F0E; }
html[data-theme="dark"] .win-code { background: none; }
html[data-theme="dark"] .hl-p { color: #6B6963; }
html[data-theme="dark"] .hl-c { color: #F4F2EC; }
html[data-theme="dark"] .hl-a { color: #CFCCC5; }
html[data-theme="dark"] .hl-f { color: #A99BE0; }
html[data-theme="dark"] .hl-s { color: #E6D7AE; }
html[data-theme="dark"] .hl-u { color: #8FC79A; }
html[data-theme="dark"] .hl-k, html[data-theme="dark"] .hl-kw { color: #E8865E; }
html[data-theme="dark"] .hl-fn { color: #8DB8E4; }

/* Windows (.win and .win.light): body, title bar, hairline and text; the .light text recipes; the glass variants in the getting-started and compute blocks keep their frost as dark glass. */
html[data-theme="dark"] .win { border-color: #2A2926; background: #141413; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
html[data-theme="dark"] .win-bar { background: #1A1A18; border-bottom-color: #2A2926; }
html[data-theme="dark"] .win.light { border-color: #2A2926; background: #141413; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] .light .win-bar { background: #1A1A18; border-bottom-color: #2A2926; color: #8A8780; }
html[data-theme="dark"] .light .win-code { color: #EDEBE6; }
html[data-theme="dark"] .light .win-code .ln { color: #3E3D39; }
html[data-theme="dark"] .light .win-code .str { color: #E6D7AE; }
html[data-theme="dark"] .light .accent, html[data-theme="dark"] .light .term-body b { color: #E08A62; }
html[data-theme="dark"] .light .term-body { color: #C9C6BF; }
html[data-theme="dark"] .light .term-body .me, html[data-theme="dark"] .light .term-body .say { color: #EDEBE6; }
html[data-theme="dark"] .light .term-body .dim, html[data-theme="dark"] .light .term-body .out { color: #8A8780; }
html[data-theme="dark"] .light .term-body .out::before { color: #3E3D39; }
html[data-theme="dark"] .started .win.light, html[data-theme="dark"] #compute .win.light, html[data-theme="dark"] #community .win.light { border-color: rgba(255, 255, 255, 0.10); background: rgba(20, 20, 19, 0.72); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 24px 60px -28px rgba(0, 0, 0, 0.6); } /* #community too (2026-10-22): its light rule carries the id, so the plain .win.light rule above loses to it */
html[data-theme="dark"] .started .light .win-bar, html[data-theme="dark"] #compute .light .win-bar, html[data-theme="dark"] #community .light .win-bar { background: rgba(255, 255, 255, 0.06); border-bottom-color: rgba(255, 255, 255, 0.08); }

/* Browser frames (.browser): the window body, bar and address field; the glass variants; the .light chrome's tab strip, tab, bar and address field (the default chrome is dark already). */
html[data-theme="dark"] .browser { border-color: #2A2926; background: #141413; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] .browser-bar { background: #1A1A18; border-bottom-color: #2A2926; }
html[data-theme="dark"] .browser .url { background: #0F0F0E; color: #C9C6BF; }

/* Contact and footer: the waitlist line; the section lines, the Reserve pill (.btn-glow above), the muted rows run on the tokens. */
/* The footer keeps its #222220 band and light tokens on the dark page (the pages' own footer rule turned silver on 2026-10-22, Nick: "Make the footer a grey/silver fill color instead"); its social squares wear the dark glass above. */
html[data-theme="dark"] footer { --fg: #EDEBE6; --dim: #A8A69F; --line: #3A3A38; }
html[data-theme="dark"] footer::before { background: #222220; }
html[data-theme="dark"] .waitlist-line { color: #C9C6BF; }
html[data-theme="dark"] .waitlist-line a { color: #E08A62; }

/* Part B: the mission and product sections (#use-cases, #trainers, #scale, #mesh, #cloud, #api, gyms) of site/index.html in the dark theme. Every rule is keyed on html[data-theme="dark"]; layout, radii, blur radii and animations are untouched. */

/* #use-cases: the missions are a carousel since 2026-10-21 (one mission's graphic and text at a time, four dots under them), so the dark page only sets the resting dots' colour; the shown dot keeps the terracotta. The mission titles, the paragraphs, the stats and the audio panes all read through --fg / --dim / --accent and need nothing of their own. The list was a plain accordion with white 12% rules for a few hours before, and a dark glass card (#2A2A2E, Nick's own hex, 2026-10-15, under a white 10% rim and ring) before that. */
html[data-theme="dark"] #use-cases .dots button::before { background: rgba(255, 255, 255, 0.18); }
html[data-theme="dark"] #use-cases .dots button:hover::before { background: rgba(255, 255, 255, 0.45); }
html[data-theme="dark"] #use-cases .dots button[aria-selected="true"]::before { background: #D97757; } /* the terracotta, as on the white page (back on 2026-10-21 after a day in the mint) */

/* #trainers: the three environment cards in dark glass, their descriptions in the secondary copy grey, and the command at each card's foot on the inset code background with the glass rim, ring and lift. The kicker keeps the brand orange. */
/* Community (2026-10-22): the three graphic tiles as dark glass, their scrim in the tile's dark, the connector chips and the GitHub disc on raised dark surfaces, the mark in the light ink. */
html[data-theme="dark"] #community .repo-art { border-color: rgba(255, 255, 255, 0.10); background: linear-gradient(180deg, #1C1C1A, #141413); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 0 1px rgba(255, 255, 255, 0.08), 0 24px 60px -28px rgba(0, 0, 0, 0.6); }
html[data-theme="dark"] #community .repo:hover .repo-art { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.12), 0 30px 64px -28px rgba(0, 0, 0, 0.7); }
html[data-theme="dark"] #community .repo-art::after { background: linear-gradient(180deg, rgba(22, 22, 20, 0), rgba(22, 22, 20, 0.97) 72%); }
html[data-theme="dark"] #community .repo-logos span, html[data-theme="dark"] #community .repo-mark span { background: #1F1F1D; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 6px 16px rgba(0, 0, 0, 0.5); }
html[data-theme="dark"] #community .repo-mark span { color: #EDEBE6; }
html[data-theme="dark"] #panel-env .card { border-color: rgba(255, 255, 255, 0.10); background: rgba(20, 20, 19, 0.72); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 0 1px rgba(255, 255, 255, 0.08), 0 24px 60px -28px rgba(0, 0, 0, 0.6); }
html[data-theme="dark"] #panel-env .trainer p { color: #C9C6BF; }
html[data-theme="dark"] #panel-env .trainer code { border-color: rgba(255, 255, 255, 0.10); background: #0F0F0E; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 0 1px rgba(255, 255, 255, 0.08), 0 10px 30px -14px rgba(0, 0, 0, 0.6); }

/* #scale on /site/case-study: the Overwatch browser figure's glass frame goes dark (the rim reads as the #2A2926 hairline over the body); the .browser-bar / .url rules are kept in step although this figure draws the chrome strip below instead. The home page's #scale carried the same figure until 2026-10-20 and now carries the partitions graphic below. */
html[data-theme="dark"] #scale .browser { border-color: rgba(255, 255, 255, 0.10); background: rgba(20, 20, 19, 0.72); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 0 1px rgba(255, 255, 255, 0.08), 0 24px 60px -28px rgba(0, 0, 0, 0.6); }
html[data-theme="dark"] #scale .browser-bar { background: rgba(255, 255, 255, 0.06); border-bottom-color: rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] #scale .browser .url { background: rgba(255, 255, 255, 0.06); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08); }
/* The figure's .light chrome, in the dark chrome's relationships: the tab strip and the address field inset (#0F0F0E), the active tab and the toolbar raised (#1A1A18), ink and muted glyphs; the three traffic lights stay as they are. */
html[data-theme="dark"] #scale .browser.light .chrome-tabs { background: #0F0F0E; }
html[data-theme="dark"] #scale .browser.light .chrome-tab { background: #1A1A18; color: #EDEBE6; }
html[data-theme="dark"] #scale .browser.light .chrome-tab .brand-mark { color: #EDEBE6; }
html[data-theme="dark"] #scale .browser.light .chrome-bar { background: #1A1A18; border-bottom-color: rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] #scale .browser.light .chrome-bar .nav { color: #8A8780; }
html[data-theme="dark"] #scale .browser.light .chrome-bar .nav.dim { color: #3A3935; }
html[data-theme="dark"] #scale .browser.light .chrome-url { background: #0F0F0E; color: #C9C6BF; }
html[data-theme="dark"] #scale .browser.light .chrome-url svg { color: #8A8780; }


/* #mesh: the beats' and the DarkRouter copy in the secondary grey, the small accent kickers lifted, and the two scene cards as dark cards with the hairline. The beats' hairlines and the head's subhead come from --line / --dim. */
html[data-theme="dark"] #mesh ul.mesh-beats p { color: #C9C6BF; }
html[data-theme="dark"] #mesh .mesh-agents .router-cards li { border-color: #2A2926; background: #141413; }
html[data-theme="dark"] #mesh .mesh-agents .kicker { color: #E08A62; }
html[data-theme="dark"] #mesh .mesh-agents p { color: #C9C6BF; }

/* #cloud (.api-hero): the waitlist line under the install pill. The pill itself, the notes and the download link are the generic .install / .install-note / a rules; #meshfield carries no CSS colour (the ASCII mesh is drawn by site/js/meshfield.js). The hover is restated so the scoped link colour does not outrank it. */
html[data-theme="dark"] #cloud .waitlist-line { color: #C9C6BF; }
html[data-theme="dark"] #cloud .waitlist-line a { color: #E08A62; }
html[data-theme="dark"] #cloud .waitlist-line a:hover { color: #C96C4A; }

/* #api: the audience paragraphs and the install command in the secondary grey. The .hint pills are dark by design (#111110 on a #2A2927 hairline, as the original dark site) and stay as they are. */
html[data-theme="dark"] #api .audience p { color: #C9C6BF; }
html[data-theme="dark"] #api .platform-cta code { color: #C9C6BF; }

/* Environments, at the edge (the gyms section, section[aria-labelledby="gyms-title"]): no section-scoped colour rules; its title, .accent, .subhead, .lede and link read through the generic type rules. */

/* Part C: the Getting started picker (#start / .started) and its three panels (Platform #panel-ops / #compute, Developers #panel-dev, Ecosystem #panel-agents). Every rule is keyed on html[data-theme="dark"]; light mode is untouched. */

/* The picker: the selected pill in the orange wash (0.16, hover 0.24) with the brand orange ink; its ring and the resting / hover text follow --line, --dim and --fg. */

/* The panels (.panel, .panel.enter / .leave / .back) carry no colour of their own: grid, visibility and the slide animations only, so nothing to map. */

/* The numbered steps shared by the panels' ol and the Compute .num-list: secondary text, a #141413 circle with a #3A3935 ring and near-white digits, and a #2A2926 join line. The labels (b) and descriptions (small) follow --fg and --dim. */

/* Platform panel (#panel-ops / #compute): the title, subhead and step list set no colour of their own beyond the shared rules above (they follow --fg / --dim), and the sphere's slot (.pin-list) is a layout box; the sphere script reads data-theme itself. */

/* The compute offer list and its window panes (rules kept in the stylesheet; the markup now carries the neural sphere instead): the bare list's white glass becomes dark glass, the row arrows and the back arrow take the selected pill's orange wash, and the row hairline is the glass's own. */
html[data-theme="dark"] .offer-list { border: 1px solid rgba(255, 255, 255, 0.10); background: rgba(20, 20, 19, 0.72); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 24px 60px -28px rgba(0, 0, 0, 0.6); }
html[data-theme="dark"] #use-cases .pin-copy { border: 1px solid rgba(255, 255, 255, 0.10); background: rgba(20, 20, 19, 0.72); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 24px 60px -28px rgba(0, 0, 0, 0.6); } /* the mission card's glass, dark (2026-10-22) */
html[data-theme="dark"] .offer-win .offer-list { border: 0; background: none; box-shadow: none; } /* inside a window the window carries the glass (the light .offer-win .offer-list reset, restated so the dark glass above does not outrank it) */
html[data-theme="dark"] .offer-list li + li { border-top-color: rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] .offer-list svg { background: rgba(240, 100, 43, 0.16); color: #F0642B; }
html[data-theme="dark"] .offer-list button:hover svg { background: rgba(240, 100, 43, 0.24); }
html[data-theme="dark"] .offer-back { background: rgba(240, 100, 43, 0.16); color: #F0642B; }
html[data-theme="dark"] .offer-back:hover { background: rgba(240, 100, 43, 0.24); }

/* Developers panel (#panel-dev): the drkm terminal (.mesh-term) and the harbor.py window (.win-float) are .win.light windows in the Getting started glass, so their scoped glass rule becomes dark glass (same blur, a 0.10 rim, a 0.06 inner highlight, no white caps) and the title bar a light wash over it. The same scoped rule dresses the Ecosystem panel's connectors window. The text inside (.light .win-code, .ln, the .light .hl-* palette) comes from the generic .light rules. */
html[data-theme="dark"] .mesh-term .out { color: #8A8780; }

/* Ecosystem panel (#panel-agents): the Skills capture's browser frame in the same dark glass, its bar a wash with the glass hairline, its address field (unused by this panel's markup, kept with the rule) on the inset surface, and the window-title label in muted text. The capture itself stays as it is. */
html[data-theme="dark"] .started .browser { border: 1px solid rgba(255, 255, 255, 0.10); background: rgba(20, 20, 19, 0.72); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 24px 60px -28px rgba(0, 0, 0, 0.6); }
html[data-theme="dark"] .started .browser-bar { background: rgba(255, 255, 255, 0.06); border-bottom-color: rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] .started .browser .url { background: #0F0F0E; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] #panel-agents .browser-bar .label { color: #8A8780; }

/* The connectors window's page (.mcp): near-white ink, muted secondary text, the Yours | Discover switch as a neutral wash with a raised #1A1A18 selected segment, the search field and filter button on the inset surface with the hairline border, the rows container raised with the 0.08 ring, and the row kebab in ink. The toggles keep their orange and white knob. */
html[data-theme="dark"] .mcp { color: #EDEBE6; }
html[data-theme="dark"] .mcp-head { color: #8A8780; }
html[data-theme="dark"] .mcp-add { color: #EDEBE6; }
html[data-theme="dark"] .mcp-seg { background: rgba(255, 255, 255, 0.06); color: #8A8780; }
html[data-theme="dark"] .mcp-seg .on { background: #1A1A18; color: #EDEBE6; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] .mcp-search { border-color: #2A2926; background: #0F0F0E; }
html[data-theme="dark"] .mcp-filter { border-color: #2A2926; background: #0F0F0E; color: #C9C6BF; }
html[data-theme="dark"] .mcp-filter svg circle { fill: #0F0F0E; } /* the slider knobs are filled with the field's white in the markup (fill="#FFFFFF") so they mask the lines; the field is #0F0F0E here */
html[data-theme="dark"] .mcp-rows { background: #1A1A18; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 4px 18px rgba(0, 0, 0, 0.6); }
html[data-theme="dark"] .mcp-tile { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 2px 8px rgba(0, 0, 0, 0.6); } /* the tile stays white: the Palantir, Notion and AWS marks are black on transparent and would vanish on a dark tile */
html[data-theme="dark"] .mcp-name small { color: #8A8780; }
html[data-theme="dark"] .mcp-more { color: #EDEBE6; }

/* Reviewer fixes: the Reserve pill's beam sweep in the brand orange instead of a near-white that would read as a specular cap on the dark page; the hint chips' hover border, which the prefixed resting rule would otherwise outrank. */
html[data-theme="dark"] .btn-glow::before { content: ""; position: absolute; inset: -1px; padding: 1px; border-radius: inherit; background: conic-gradient(from var(--beam), transparent 0deg 250deg, rgba(240, 100, 43, 0.85) 300deg, transparent 340deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: beam 3.6s linear infinite; pointer-events: none; }
html[data-theme="dark"] .audience .hint:hover { border-color: #3A3935; }

/* The other site pages. The waitlist form's fields sit on the raised surface with the hairline, their placeholders muted, and its orange gradient submit keeps the page's own recipe (the generic .btn wash above is the home page's warm-grey pill). The platform page's selected picker pill drops its light inset ring (the home page's pill never had one). */
html[data-theme="dark"] .wl-form input, html[data-theme="dark"] .wl-form select, html[data-theme="dark"] .wl-form textarea { background: #141413; border-color: #2A2926; color: #EDEBE6; }
html[data-theme="dark"] .wl-form input::placeholder, html[data-theme="dark"] .wl-form textarea::placeholder { color: #8A8780; }
/* The card itself (the waitlist page, and the home page's reserve card in #cloud since 2026-10-17): a raised dark glass instead of the light one, its small print and the done note in the secondary inks. */
html[data-theme="dark"] .wl-card { background: rgba(20, 20, 19, 0.82); border-color: #2A2926; box-shadow: 0 40px 100px -40px rgba(0, 0, 0, 0.8); }
/* The map card beside it (2026-10-22) is a .wl-card too, so the rule above frames it; the live map takes the Maps API's dark colour scheme, and the address strip under it wears the same glass. */
html[data-theme="dark"] #cloud .reserve-address { background: rgba(20, 20, 19, 0.86); border-top-color: #2A2926; color: #C9C6BF; }
html[data-theme="dark"] #cloud .reserve-address strong { color: #EDEBE6; }
html[data-theme="dark"] .wl-form .opt, html[data-theme="dark"] .wl-fine, html[data-theme="dark"] .wl-fine a { color: #8A8780; }
html[data-theme="dark"] .wl-done p { color: #C9C6BF; }
html[data-theme="dark"] .wl-form .btn, html[data-theme="dark"] .wl-form .btn:hover { background: linear-gradient(180deg, #DE845F 0%, #C96C4A 52%, #B45A3A 100%); color: #160A04; box-shadow: inset 0 1px 0 rgba(255, 236, 224, 0.45), inset 0 -1px 0 rgba(60, 20, 4, 0.25), 0 0 0 1px rgba(201, 108, 74, 0.6), 0 2px 6px rgba(0, 0, 0, 0.5), 0 8px 28px -8px rgba(201, 108, 74, 0.6); }
/* The home page's reserve card submits with the New pill's wash (.btn-tint) rather than the gradient above (Nick 2026-10-19: "make the reserve capacity button at the bottom in the container the same color pill and text as the 'New' pill"). */
html[data-theme="dark"] .wl-form .btn-tint, html[data-theme="dark"] .wl-form .btn-tint:hover { background: #F9EDE9; color: #F0642B; box-shadow: none; } /* the white page's peach with the brand orange (2026-10-21, "the same peach pills as the light theme"; the dark orange wash before) */
html[data-theme="dark"] .wl-form .btn-tint:hover { background: #F4E2DB; }
html[data-theme="dark"] .picker button[aria-selected="true"] { box-shadow: none; }