/* The network theme (themes skill), generated from world/themes.js by world/themes-client.mjs: do not edit.
   Copied to every site with the `theme` capability. The inline script in each page's <head> sets
   <html data-theme data-scheme> before the first paint; Light sets nothing (each site's own :root is the brand). */

:root[data-theme="dark"] { color-scheme: dark; --paper: #171815; --ink: #f4f1e8; --muted: #b0afa4; --line: #3b3c35; --panel: #111210; --card: #22231f; --acid: #e3ff59; --on-acid: #171815; --pink: #ff8cc6; --orange: #ffa53d; --focus: #e3ff59; --ok: #9bd77f; --no: #ff9a80; --code: #0d0e0c; --code-ink: #ecebe2; --acid-on-ink: #171815; }
:root[data-theme="contrast"] { color-scheme: light; --paper: #ffffff; --ink: #000000; --muted: #333330; --line: #6e6e66; --panel: #f0f0ee; --card: #ffffff; --acid: #e3ff59; --on-acid: #000000; --pink: #ff8cc6; --orange: #ffa53d; --focus: #1f3fd6; --ok: #1d5212; --no: #8c2410; --code: #000000; --code-ink: #ffffff; --acid-on-ink: #e3ff59; }
:root[data-theme="1998"] { color-scheme: light; --paper: #d9d1bf; --ink: #1d1a14; --muted: #4a4334; --line: #a59c88; --panel: #cdc4ae; --card: #f3ecdc; --acid: #ffd23a; --on-acid: #1d1a14; --pink: #ff99cc; --orange: #ffa340; --focus: #000080; --ok: #1e5212; --no: #8c1c0c; --code: #1b1206; --code-ink: #ffd27a; --acid-on-ink: #ffd23a; }
:root[data-theme="blueprint"] { color-scheme: dark; --paper: #12396b; --ink: #ffffff; --muted: #cfe0f5; --line: #4f78a8; --panel: #0f3360; --card: #164a87; --acid: #ffd166; --on-acid: #0f3360; --pink: #ffb3d9; --orange: #ffc078; --focus: #ffd166; --ok: #b5f0a4; --no: #ffc2b3; --code: #0b2a50; --code-ink: #e8f1fb; --acid-on-ink: #0f3360; }
:root[data-theme="sardine"] { color-scheme: light; --paper: #dfe3e7; --ink: #1e2a33; --muted: #3f4b55; --line: #a9b1b9; --panel: #cfd5db; --card: #eef1f4; --acid: #ff8cc6; --on-acid: #1e2a33; --pink: #ff8cc6; --orange: #ffa53d; --focus: #0b5c73; --ok: #1f5a24; --no: #8e2a1a; --code: #1e2a33; --code-ink: #eef1f4; --acid-on-ink: #ff8cc6; }
@media (forced-colors: none) { :root[data-theme="blueprint"] body { background-image: linear-gradient(rgb(255 255 255 / .07) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .07) 1px, transparent 1px); background-size: 24px 24px; } }

/* no JavaScript (css.slopped.site), or before the script: follow the device */
@media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --paper: #171815; --ink: #f4f1e8; --muted: #b0afa4; --line: #3b3c35; --panel: #111210; --card: #22231f; --acid: #e3ff59; --on-acid: #171815; --pink: #ff8cc6; --orange: #ffa53d; --focus: #e3ff59; --ok: #9bd77f; --no: #ff9a80; --code: #0d0e0c; --code-ink: #ecebe2; --acid-on-ink: #171815; } }
@media (prefers-contrast: more) and (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme: light; --paper: #ffffff; --ink: #000000; --muted: #333330; --line: #6e6e66; --panel: #f0f0ee; --card: #ffffff; --acid: #e3ff59; --on-acid: #000000; --pink: #ff8cc6; --orange: #ffa53d; --focus: #1f3fd6; --ok: #1d5212; --no: #8c2410; --code: #000000; --code-ink: #ffffff; --acid-on-ink: #e3ff59; } }

/* the wordmark is always the drawing: on a dark page, its paper-coloured copy. Under forced colours the page is the
   system's, so the system's scheme decides, never the theme. */
@media (forced-colors: none) {
  :root[data-scheme="dark"] img[src$="/logo-sm.webp"] { content: url(/logo-sm-paper.webp); }
  :root[data-scheme="dark"] img[src$="/logo.webp"] { content: url(/logo-paper.webp); }
  :root[data-scheme="dark"] img[src$="/p-drip.webp"] { content: url(/p-drip-paper.webp); }
}
@media (forced-colors: none) and (prefers-color-scheme: dark) {
  :root:not([data-theme]) img[src$="/logo-sm.webp"] { content: url(/logo-sm-paper.webp); }
  :root:not([data-theme]) img[src$="/logo.webp"] { content: url(/logo-paper.webp); }
  :root:not([data-theme]) img[src$="/p-drip.webp"] { content: url(/p-drip-paper.webp); }
}
@media (forced-colors: active) and (prefers-color-scheme: dark) {
  :root img[src$="/logo-sm.webp"] { content: url(/logo-sm-paper.webp); }
  :root img[src$="/logo.webp"] { content: url(/logo-paper.webp); }
  :root img[src$="/p-drip.webp"] { content: url(/p-drip-paper.webp); }
}

/* the drawer's control (public/shared/theme.js adds it to #site-menu .sh-actions) */
.sh-actions > .sh-theme { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 6px 0 18px; border: 1px solid var(--ink, #171815); border-radius: 30px; color: var(--ink, #171815); font: 400 14px/1 Arial, Helvetica, sans-serif; white-space: nowrap; cursor: pointer; }
.sh-actions > .sh-theme span { color: var(--muted, #6b6b62); }
.sh-actions > .sh-theme select { min-height: 40px; max-width: 190px; margin: 0; padding: 0 30px 0 6px; border: 0; border-radius: 20px; background: transparent no-repeat right 10px center / 10px 6px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(-45deg, transparent 50%, currentColor 50%); background-size: 5px 6px, 5px 6px; background-position: right 15px center, right 10px center; color: inherit; font: 700 14px/1 Arial, Helvetica, sans-serif; -webkit-appearance: none; appearance: none; cursor: pointer; }
.sh-actions > .sh-theme select option { background: var(--paper, #f4f1e8); color: var(--ink, #171815); }
.sh-actions > .sh-theme:focus-within { outline: 3px solid var(--focus, #728600); outline-offset: 3px; }
.sh-actions > .sh-theme select:focus-visible { outline: none; }
@media (forced-colors: active) { .sh-actions > .sh-theme select { appearance: auto; -webkit-appearance: auto; background-image: none; padding-right: 6px; } }