/* ==========================================================================
   SySpace site themes
   --------------------------------------------------------------------------
   A theme is the viewer's own look for SySpace's shared pages (js/site-theme.js
   sets <html data-sy-theme="...">). Classic is the default and has no rules
   here. Member profiles never load this file: their owner picks that look.

   How a theme is built:
     1. Each theme sets a small set of --t-* tokens (page, band, paper, ink...).
     2. THE ENGINE below maps those tokens onto the classic --sy-* variables
        and onto the shared pieces that use literal classic colors.
     3. A theme may add a few flourishes of its own (wallpaper, label shapes).

   Most themes use light reading surfaces. Dark changes the palette only and
   has its own color rules for shared components with hard-coded colors.
   ========================================================================== */

/* ---------- theme picker (works in Classic too) --------------------------- */

dialog.sy-theme-dialog {
  width: min(900px, calc(100vw - 20px)); max-width: none; max-height: min(82vh, 640px);
  margin: auto auto 14px; overflow: auto;
}
dialog.sy-theme-dialog::backdrop { background: transparent; } /* the page behind is the preview */
.sy-theme-intro { margin: 0 0 8px; }
.sy-theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; }
.sy-theme-card {
  display: flex; flex-direction: column; gap: 3px; align-items: stretch; min-width: 0; padding: 6px;
  text-align: left; cursor: pointer; font: inherit; color: #000; background: #fff;
  border: 2px solid #b1d0f0; border-radius: 0;
}
.sy-theme-card:hover { border-color: #6699cc; }
.sy-theme-card[aria-pressed="true"] { border-color: #ff6600; box-shadow: 0 0 0 2px #ffcc99; }
.sy-theme-card:focus-visible { outline: 2px solid #003399; outline-offset: 2px; }
.sy-theme-name { font-weight: bold; font-size: 9pt; }
.sy-theme-blurb { font-size: 7.5pt; line-height: 1.35; color: #444; }
.sy-theme-tag { align-self: flex-start; padding: 0 5px; font-size: 7pt; font-weight: bold; color: #7a3d00; background: #ffe7c7; border: 1px solid #ff9933; }
.sy-theme-tag[hidden] { display: none; }
.sy-theme-from { font-size: 7pt; font-style: italic; color: #666; }
.sy-theme-status { margin: 8px 0 0; min-height: 1.4em; font-weight: bold; }
.sy-theme-dialog .sy-dialog-foot { align-items: center; }
.sy-theme-dialog .sy-dialog-foot .sy-button { min-height: 32px; padding: .35em .9em; }
@media (max-width: 600px) {
  dialog.sy-theme-dialog { margin-bottom: 6px; max-height: 76vh; }
  .sy-theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sy-theme-dialog .sy-dialog-foot .sy-button { min-height: 44px; flex: 1 1 auto; }
}

/* The little page drawing on each card. */
.sy-theme-thumb {
  --th-page: #e5e5e5; --th-band: #003399; --th-nav: #6698cb; --th-card: #fff; --th-head: #6699cc; --th-line: #6699cc; --th-ink: #9db4d0;
  display: block; height: 78px; padding: 0 0 6px; overflow: hidden; background: var(--th-page); border: 1px solid rgba(0, 0, 0, .35);
}
.sy-theme-thumb > span, .sy-theme-thumb i, .sy-theme-thumb b { display: block; }
.sy-theme-thumb .tt-band { height: 15px; padding: 4px 6px; background: var(--th-band); }
.sy-theme-thumb .tt-band i { width: 34%; height: 7px; background: rgba(255, 255, 255, .9); }
.sy-theme-thumb .tt-nav { height: 6px; background: var(--th-nav); }
.sy-theme-thumb .tt-cols { display: grid; grid-template-columns: 2fr 3fr; gap: 5px; padding: 6px 7px 0; }
.sy-theme-thumb .tt-card { background: var(--th-card); border: 1px solid var(--th-line); border-radius: var(--th-radius, 0); overflow: hidden; }
.sy-theme-thumb .tt-card b { height: 8px; background: var(--th-head); }
.sy-theme-thumb .tt-card i { height: 3px; margin: 4px 5px; background: var(--th-ink); }
.sy-theme-thumb .tt-card i:last-child { width: 55%; }
.sy-theme-thumb[data-thumb="dark"] { --th-page: #090a0c; --th-band: #0d0f12; --th-nav: #181c22; --th-card: #12151a; --th-head: #20262e; --th-line: #475364; --th-ink: #a5c6f5; }
.sy-theme-thumb[data-thumb="repair-shop"] { --th-page: #0f1830; --th-band: #0b1224; --th-nav: #e8a13a; --th-card: #fff6e0; --th-head: #f1dcab; --th-line: #b98b3e; --th-ink: #c9a868; }
.sy-theme-thumb[data-thumb="zine"] { --th-page: #f4f1ea; --th-band: #111; --th-nav: #ff2e88; --th-card: #fff; --th-head: #111; --th-line: #111; --th-ink: #999; }
.sy-theme-thumb[data-thumb="video-store"] { --th-page: #241a52; --th-band: #1a1140; --th-nav: #2ec4b6; --th-card: #fffaf2; --th-head: #f28cb4; --th-line: #f28cb4; --th-ink: #d9b8c9; --th-radius: 4px; }
.sy-theme-thumb[data-thumb="steel-city"] { --th-page: #0c0c0d; --th-band: #000; --th-nav: #ffb612; --th-card: #fffdf6; --th-head: #111; --th-line: #ffb612; --th-ink: #c9b98a; }
.sy-theme-thumb[data-thumb="aurora"] { --th-page: linear-gradient(135deg, #1e1b4b, #0f766e 55%, #9d174d); --th-band: rgba(10, 10, 40, .65); --th-nav: rgba(255, 255, 255, .28); --th-card: rgba(255, 255, 255, .92); --th-head: #dfe3ff; --th-line: rgba(255, 255, 255, .7); --th-ink: #b9bfe6; --th-radius: 5px; }
.sy-theme-thumb[data-thumb="zine"] .tt-card { box-shadow: 2px 2px 0 #111; }
.sy-theme-thumb[data-thumb="video-store"] .tt-card { box-shadow: 2px 2px 0 #2ec4b6; }

/* ==========================================================================
   THE ENGINE: tokens -> classic variables and shared pieces
   ========================================================================== */

html[data-sy-theme] {
  /* Defaults a theme may leave alone. */
  --t-font: Verdana, Arial, Helvetica, sans-serif;
  --t-head-font: var(--t-font);
  --t-radius: 0px;
  --t-shadow: none;
  --t-muted: #5d5d5d;
  --t-wallpaper: none;
  --t-wallpaper-size: auto;
  --t-button-border: 1px solid var(--t-line);
  --t-button-radius: var(--t-radius);
  --t-band-soft: var(--t-band-ink);
  --t-nav-sep: var(--t-nav-ink);
  /* A dark, solid accent for pieces that carry light text (calendar tiles, selected days, displays). */
  --t-strong: var(--t-band);
  --t-strong-ink: var(--t-band-ink);

  --sy-page-bg: var(--t-page);
  --sy-page-bg-image: var(--t-wallpaper);
  --sy-page-bg-attachment: fixed;
  --sy-content-bg: var(--t-sheet);
  --sy-text: var(--t-ink);
  --sy-name-color: var(--t-ink);
  --sy-font: var(--t-font);
  --sy-link: var(--t-link);
  --sy-link-hover: var(--t-link-hover);
  --sy-header-bg: var(--t-band);
  --sy-nav-bg: var(--t-nav);
  --sy-nav-link: var(--t-nav-ink);
  --sy-nav-hover: var(--t-nav-hover);
  --sy-box-border: var(--t-line);
  --sy-box-head-bg: var(--t-head);
  --sy-box-head-text: var(--t-head-ink);
  --sy-label-bg: var(--t-soft);
  --sy-label-text: var(--t-soft-ink);
  --sy-value-bg: var(--t-soft-2);
  color-scheme: light;
}
html[data-sy-theme]:not(:where([data-sy-theme="dark"])) body { background-size: var(--t-wallpaper-size); }

/* header band, nav, footer */
html[data-sy-theme]:not(:where([data-sy-theme="dark"])) .sy-band,
html[data-sy-theme]:not(:where([data-sy-theme="dark"])) .sy-logo, html[data-sy-theme]:not(:where([data-sy-theme="dark"])) .sy-logo:hover, html[data-sy-theme]:not(:where([data-sy-theme="dark"])) .sy-logo:visited, html[data-sy-theme]:not(:where([data-sy-theme="dark"])) .sy-logo:focus,
html[data-sy-theme]:not(:where([data-sy-theme="dark"])) .sy-utility { color: var(--t-band-ink); }
html[data-sy-theme]:not(:where([data-sy-theme="dark"])) .sy-utility a, html[data-sy-theme]:not(:where([data-sy-theme="dark"])) .sy-utility a:visited, html[data-sy-theme]:not(:where([data-sy-theme="dark"])) .sy-utility button.linklike { color: var(--t-band-ink); }
html[data-sy-theme]:not(:where([data-sy-theme="dark"])) .sy-utility a:hover, html[data-sy-theme]:not(:where([data-sy-theme="dark"])) .sy-utility button.linklike:hover { color: var(--t-band-accent); }
html[data-sy-theme]:not(:where([data-sy-theme="dark"])) .sy-logo-tag, html[data-sy-theme]:not(:where([data-sy-theme="dark"])) .sy-search .sy-search-note { color: var(--t-band-soft); }
html[data-sy-theme]:not(:where([data-sy-theme="dark"])) .sy-nav { color: var(--t-nav-ink); font-family: var(--t-head-font); }
html[data-sy-theme]:not(:where([data-sy-theme="dark"])) .sy-nav a, html[data-sy-theme]:not(:where([data-sy-theme="dark"])) .sy-nav a:visited { font-family: var(--t-head-font); }
html[data-sy-theme]:not(:where([data-sy-theme="dark"])) .sy-nav .sep { color: var(--t-nav-sep); opacity: .55; }
html[data-sy-theme]:not(:where([data-sy-theme="dark"])) #sy-footer { margin-top: 14px; background: var(--t-band); color: var(--t-band-soft); border-radius: var(--t-radius); }
html[data-sy-theme]:not(:where([data-sy-theme="dark"])) .sy-footer a, html[data-sy-theme]:not(:where([data-sy-theme="dark"])) .sy-footer a:visited { color: var(--t-band-ink); }
html[data-sy-theme]:not(:where([data-sy-theme="dark"])) .sy-footer a:hover { color: var(--t-band-accent); }

/* paper: the content sheet and panels */
html[data-sy-theme]:not(:where([data-sy-theme="dark"])) .sy-main { color: var(--t-ink); border-radius: var(--t-radius); }
html[data-sy-theme]:not(:where([data-sy-theme="dark"])) .page-sub { color: var(--t-muted); }
html[data-sy-theme]:not(:where([data-sy-theme="dark"])) .classic-panel {
  background-color: var(--t-paper); border-color: var(--t-line); border-radius: var(--t-radius); box-shadow: var(--t-shadow);
}
html[data-sy-theme]:not(:where([data-sy-theme="dark"])) .classic-panel-head {
  font-family: var(--t-head-font);
  border-radius: calc(var(--t-radius) - 1px) calc(var(--t-radius) - 1px) 0 0;
}
html[data-sy-theme]:not(:where([data-sy-theme="dark"])) .classic-panel-head .panel-right a { color: var(--t-head-ink); }
html[data-sy-theme]:not(:where([data-sy-theme="dark"])) :is(.home-muted, .home-empty, .search-muted, .person .person-where) { color: var(--t-muted); }
html[data-sy-theme]:not(:where([data-sy-theme="dark"])) .front-hero { background: var(--t-soft-2); }
html[data-sy-theme]:not(:where([data-sy-theme="dark"])) .front-hero h1 { color: var(--t-ink); }

/* buttons, fields, dialogs */
html[data-sy-theme]:not(:where([data-sy-theme="dark"])) :is(.sy-button, button.sy-button, a.sy-button) {
  color: var(--t-button-ink); background: var(--t-button); border: var(--t-button-border); border-radius: var(--t-button-radius);
  font-family: var(--t-head-font);
}
html[data-sy-theme]:not(:where([data-sy-theme="dark"])) .sy-button:hover { color: var(--t-button-ink); background: var(--t-button-hover); }
html[data-sy-theme]:not(:where([data-sy-theme="dark"])) :is(.sy-button.is-on, .sy-button[aria-pressed="true"]) { color: var(--t-head-ink); background: var(--t-head); }
html[data-sy-theme]:not(:where([data-sy-theme="dark"])) .sy-button.sy-danger { color: #5a1400; background: #fde0d5; border-color: #cc6633; }
html[data-sy-theme]:not(:where([data-sy-theme="dark"])) dialog.sy-dialog {
  color: var(--t-ink); background: var(--t-paper); border-color: var(--t-line); border-radius: var(--t-radius);
  font-family: var(--t-font);
}
html[data-sy-theme]:not(:where([data-sy-theme="dark"])) .sy-dialog-head { color: var(--t-head-ink); background: var(--t-head); font-family: var(--t-head-font); }
html[data-sy-theme]:not(:where([data-sy-theme="dark"])) .sy-dialog-head button { color: var(--t-head-ink); }
html[data-sy-theme]:not(:where([data-sy-theme="dark"])) :is(.sy-main, dialog.sy-dialog) :is(input[type="text"], input[type="search"], input[type="email"], input[type="password"], input[type="url"], input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"], textarea, select) {
  color: #111; background-color: #fff; border: 1px solid var(--t-line); border-radius: min(var(--t-radius), 6px);
}
html[data-sy-theme]:not(:where([data-sy-theme="dark"])) :is(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--t-focus, var(--t-link-hover)); outline-offset: 2px; }
html[data-sy-theme]:not(:where([data-sy-theme="dark"])) .sx-table td, html[data-sy-theme]:not(:where([data-sy-theme="dark"])) .home-list > li { border-bottom-color: var(--t-rule, #cfcfcf); }
html[data-sy-theme]:not(:where([data-sy-theme="dark"])) .sy-theme-card { color: #111; border-color: var(--t-line); border-radius: min(var(--t-radius), 8px); }
html[data-sy-theme]:not(:where([data-sy-theme="dark"])) .sy-theme-card[aria-pressed="true"] { border-color: var(--t-link-hover); box-shadow: 0 0 0 2px var(--t-soft); }

/* Home: boxes sit straight on the wallpaper. */
html[data-sy-theme]:not(:where([data-sy-theme="dark"])) .home-page .sy-main { background: transparent; }
html[data-sy-theme]:not(:where([data-sy-theme="dark"])) .home-page :is(.home-account-column, .home-community-column, .home-top-zone) > * { background-color: var(--t-paper); border-radius: var(--t-radius); }
html[data-sy-theme]:not(:where([data-sy-theme="dark"])) .home-page :is(.home-account-column, .home-community-column, .home-top-zone) > :not(.classic-panel):not(:empty) { box-shadow: var(--t-shadow); }
html[data-sy-theme]:not(:where([data-sy-theme="dark"])) .home-page .home-alert { border-radius: var(--t-radius); }
html[data-sy-theme]:not(:where([data-sy-theme="dark"])) .fm-visual-active #sy-footer { background: var(--t-band); }
html[data-sy-theme]:not(:where([data-sy-theme="dark"])) .home-page.fm-visual-active .fm-note { background: transparent; }

/* The Lobby (Home box and full room) */
html[data-sy-theme]:not(:where([data-sy-theme="dark"])) .lb-root { color: var(--t-ink); font-family: var(--t-font); }
html[data-sy-theme]:not(:where([data-sy-theme="dark"])) .lb-root a { color: var(--t-link); }
html[data-sy-theme]:not(:where([data-sy-theme="dark"])) .lb-root a:hover { color: var(--t-link-hover); }
html[data-sy-theme]:not(:where([data-sy-theme="dark"])) .lb-header h1 { color: var(--t-ink); font-family: var(--t-head-font); }
html[data-sy-theme]:not(:where([data-sy-theme="dark"])) :is(.lb-panel, .lb-side-box, .lb-board) { border-color: var(--t-line); background: var(--t-paper); border-radius: var(--t-radius); overflow: hidden; }
html[data-sy-theme]:not(:where([data-sy-theme="dark"])) :is(.lb-section-title, .lb-conversation-head, .lb-board > summary, .lb-inline .lb-header) { color: var(--t-head-ink); background: var(--t-head); font-family: var(--t-head-font); }
html[data-sy-theme]:not(:where([data-sy-theme="dark"])) .lb-inline .lb-header :is(h2, .lb-live, .lb-header-actions a) { color: var(--t-head-ink); font-family: var(--t-head-font); }
html[data-sy-theme]:not(:where([data-sy-theme="dark"])) .lb-inline .lb-conversation-head { color: var(--t-soft-ink); background: var(--t-soft-2); }
html[data-sy-theme]:not(:where([data-sy-theme="dark"])) .lb-older { color: var(--t-head-ink) !important; }
html[data-sy-theme]:not(:where([data-sy-theme="dark"])) .lb-inline .lb-older { color: var(--t-link) !important; }
html[data-sy-theme]:not(:where([data-sy-theme="dark"])) .lb-log { scrollbar-color: var(--t-line) var(--t-soft-2); }
html[data-sy-theme]:not(:where([data-sy-theme="dark"])) .lb-message { border-color: var(--t-rule, var(--t-line)); background: var(--t-paper); }
html[data-sy-theme]:not(:where([data-sy-theme="dark"])) .lb-message-head { background: var(--t-soft); }
html[data-sy-theme]:not(:where([data-sy-theme="dark"])) .lb-message-head img { border-color: var(--t-line); }
html[data-sy-theme]:not(:where([data-sy-theme="dark"])) .lb-message-head time, html[data-sy-theme]:not(:where([data-sy-theme="dark"])) .lb-evidence, html[data-sy-theme]:not(:where([data-sy-theme="dark"])) .lb-empty strong { color: var(--t-soft-ink); }
html[data-sy-theme]:not(:where([data-sy-theme="dark"])) .lb-message-content, html[data-sy-theme]:not(:where([data-sy-theme="dark"])) .lb-footer, html[data-sy-theme]:not(:where([data-sy-theme="dark"])) .lb-reply-draft, html[data-sy-theme]:not(:where([data-sy-theme="dark"])) .lb-board-edit { background: var(--t-soft-2); }
html[data-sy-theme]:not(:where([data-sy-theme="dark"])) :is(.lb-compose, .lb-footer, .lb-receipts) { border-color: var(--t-rule, var(--t-line)); }
html[data-sy-theme]:not(:where([data-sy-theme="dark"])) .lb-compose { background: var(--t-paper); }
html[data-sy-theme]:not(:where([data-sy-theme="dark"])) :is(.lb-message-actions button, .lb-open-board) { color: var(--t-link); }
html[data-sy-theme]:not(:where([data-sy-theme="dark"])) :is(.lb-small, .lb-send, .lb-retry, .lb-new-messages) { color: var(--t-button-ink); background: var(--t-button); border: var(--t-button-border); border-radius: var(--t-button-radius); }
html[data-sy-theme]:not(:where([data-sy-theme="dark"])) .lb-agent { color: var(--t-soft-ink); border-color: var(--t-line); }
html[data-sy-theme]:not(:where([data-sy-theme="dark"])) :is(.lb-input, .lb-compose-top select, .lb-agent-select, .lb-work-fields input) { border-color: var(--t-line); border-radius: min(var(--t-radius), 6px); }
html[data-sy-theme]:not(:where([data-sy-theme="dark"])) .lb-reply-context, html[data-sy-theme]:not(:where([data-sy-theme="dark"])) .lb-reply-draft { border-left-color: var(--t-line); }

/* Home module window (Calendar, Events, Lobby... opened from Home) */
html[data-sy-theme]:not(:where([data-sy-theme="dark"])) .home-module-bar { color: var(--t-band-ink); background: var(--t-band); border-color: var(--t-line); border-radius: var(--t-radius) var(--t-radius) 0 0; }
html[data-sy-theme]:not(:where([data-sy-theme="dark"])) .home-module-bar h2 { font-family: var(--t-head-font); }
html[data-sy-theme]:not(:where([data-sy-theme="dark"])) .home-module-bar :is(button, a) { color: var(--t-button-ink); background: var(--t-button); border: var(--t-button-border); border-radius: var(--t-button-radius); }
html[data-sy-theme]:not(:where([data-sy-theme="dark"])).home-module-document body > .sy-page > #sy-main { background-color: var(--t-sheet); }

/* My Calendar (/my-calendar) keeps its own daybook layout and category colors;
   the wallpaper, the sheet it sits on and its solid accent follow the theme. */
html[data-sy-theme]:not(:where([data-sy-theme="dark"])) body.calendar-page {
  background-color: var(--t-page); background-image: var(--t-wallpaper); background-size: var(--t-wallpaper-size); background-attachment: fixed;
}
html[data-sy-theme]:not(:where([data-sy-theme="dark"])).home-module-document > body.calendar-page { background: transparent; }
html[data-sy-theme]:not(:where([data-sy-theme="dark"])) .calendar-page .cal-app {
  margin-top: 14px; padding: 20px 18px 26px; background: var(--t-sheet); border-radius: var(--t-radius); box-shadow: var(--t-shadow);
}
html[data-sy-theme]:not(:where([data-sy-theme="dark"])) :is(.cal-app, .cal-dialog) { --cal-accent: var(--t-strong); --cal-accent-ink: var(--t-strong-ink); }
html[data-sy-theme]:not(:where([data-sy-theme="dark"])) .cal-dialog { border-radius: var(--t-radius); }
html[data-sy-theme]:not(:where([data-sy-theme="dark"])) .cal-app .cal-title { color: var(--t-link); }
html[data-sy-theme]:not(:where([data-sy-theme="dark"])) .cal-btn { border-radius: min(var(--t-radius), 8px); }
html[data-sy-theme]:not(:where([data-sy-theme="dark"])).home-module-document .calendar-page .cal-app { margin-top: 0; box-shadow: none; }

/* ==========================================================================
   1. MIDNIGHT REPAIR SHOP
   Ink-blue night, warm amber lamplight, headings like parts-drawer labels.
   The mess lives at the edges; the words stay easy to read.
   ========================================================================== */
html[data-sy-theme="repair-shop"] {
  --t-page: #0f1830;
  --t-wallpaper:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220' fill='none' stroke='%23e8a13a' stroke-opacity='.22' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='34' cy='40' r='9'/%3E%3Cpath d='M28 34l12 12'/%3E%3Ccircle cx='172' cy='152' r='7'/%3E%3Cpath d='M167 152h10M172 147v10'/%3E%3Cpath d='M118 44l20 20m-25-17a9 9 0 1 1 12-12l-6 6 6 6 6-6'/%3E%3Cpath d='M40 160h30v14H40zM46 160v-8h18v8'/%3E%3Cpath d='M196 58l8 8M190 78l-7 7M96 196l8-8'/%3E%3C/svg%3E"),
    linear-gradient(rgba(126, 164, 222, .075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126, 164, 222, .075) 1px, transparent 1px),
    radial-gradient(ellipse at 50% -10%, rgba(232, 161, 58, .2), transparent 60%);
  --t-wallpaper-size: 220px 220px, 22px 22px, 22px 22px, 100% 100%;
  --t-band: #0b1224; --t-band-ink: #f6ead0; --t-band-soft: #e3b866; --t-band-accent: #ffc55c;
  --t-nav: #16223f; --t-nav-ink: #f3c877; --t-nav-hover: #ffffff; --t-nav-sep: #8fa3c8;
  --t-sheet: #fbf3df; --t-paper: #fff8e6; --t-ink: #2a2116; --t-muted: #6a5a41;
  --t-line: #b98b3e; --t-rule: #dcc79a;
  --t-head: #f1dcab; --t-head-ink: #3b2a12;
  --t-soft: #f1dfb6; --t-soft-ink: #6b4a12; --t-soft-2: #fbedc9;
  --t-link: #1d5c8a; --t-link-hover: #b3401f;
  --t-button: #f0b450; --t-button-hover: #ffc867; --t-button-ink: #2a1c05; --t-button-border: 1px solid #8a5a12;
  --t-radius: 3px; --t-shadow: 0 2px 0 rgba(0, 0, 0, .35), 0 0 0 1px rgba(232, 161, 58, .12);
  --t-head-font: "Courier New", Courier, monospace;
}
html[data-sy-theme="repair-shop"] .sy-band { border-bottom: 3px solid #e8a13a; box-shadow: inset 0 -30px 40px -30px rgba(232, 161, 58, .22); }
html[data-sy-theme="repair-shop"] .sy-nav { border-bottom: 1px solid #2b3d66; text-transform: uppercase; letter-spacing: .06em; }
html[data-sy-theme="repair-shop"] .sy-nav a, html[data-sy-theme="repair-shop"] .sy-nav a:visited { font-weight: bold; }
/* Section headings look like labels slid into a parts drawer, with two screws. */
html[data-sy-theme="repair-shop"] :is(.classic-panel-head, .sy-dialog-head, .lb-inline .lb-header, .lb-section-title) {
  text-transform: uppercase; letter-spacing: .07em; font-size: 8.5pt; padding: 5px 20px;
  border-bottom: 1px solid #b98b3e;
  background-image:
    radial-gradient(circle at 9px 50%, #7c5a1e 0 1.6px, #cfa85a 1.7px 3.4px, transparent 3.6px),
    radial-gradient(circle at calc(100% - 9px) 50%, #7c5a1e 0 1.6px, #cfa85a 1.7px 3.4px, transparent 3.6px),
    linear-gradient(#f7e7c1, #ecd49a);
}
html[data-sy-theme="repair-shop"] .classic-panel { border-width: 1px; }
html[data-sy-theme="repair-shop"] :is(.sy-button, .lb-small, .lb-send, .lb-retry) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 1px 0 rgba(60, 35, 0, .35); text-transform: uppercase; letter-spacing: .04em; }
html[data-sy-theme="repair-shop"] .sy-main:not(.home-page .sy-main) { box-shadow: 0 0 0 1px #b98b3e, 0 6px 0 rgba(0, 0, 0, .3); }
html[data-sy-theme="repair-shop"] .home-page .sy-main { box-shadow: none; }

/* ==========================================================================
   2. BEDROOM ZINE
   Photocopied paper, thick marker lines, cut-out headings, one loud accent.
   ========================================================================== */
html[data-sy-theme="zine"] {
  --t-accent: #ff2e88;
  --t-page: #f4f1ea;
  --t-wallpaper:
    radial-gradient(rgba(0, 0, 0, .13) 1.1px, transparent 1.3px),
    linear-gradient(115deg, transparent 0 62%, rgba(0, 0, 0, .045) 62% 64%, transparent 64%),
    linear-gradient(rgba(0, 0, 0, .03), rgba(0, 0, 0, 0) 30%);
  --t-wallpaper-size: 9px 9px, 100% 100%, 100% 100%;
  --t-band: #111111; --t-band-ink: #ffffff; --t-band-soft: #e9e9e9; --t-band-accent: var(--t-accent);
  --t-nav: var(--t-accent); --t-nav-ink: #111111; --t-nav-hover: #ffffff; --t-nav-sep: #111111;
  --t-sheet: #fffefb; --t-paper: #ffffff; --t-ink: #111111; --t-muted: #4a4a4a;
  --t-line: #111111; --t-rule: #111111;
  --t-head: #111111; --t-head-ink: #ffffff;
  --t-soft: #ececec; --t-soft-ink: #111111; --t-soft-2: #f6f6f3;
  --t-link: #111111; --t-link-hover: #111111;
  --t-button: #ffffff; --t-button-hover: var(--t-accent); --t-button-ink: #111111; --t-button-border: 2px solid #111111;
  --t-radius: 0px; --t-shadow: 5px 5px 0 #111111;
  --t-font: "Courier New", Courier, monospace;
  --t-head-font: Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Black", sans-serif;
  --t-focus: #ff2e88;
  --sy-font-size: 9pt;
}
html[data-sy-theme="zine"] .sy-band { border-bottom: 4px solid #111; outline: 2px dashed rgba(255, 255, 255, .5); outline-offset: -8px; }
html[data-sy-theme="zine"] .sy-utility { font-family: Arial, Helvetica, sans-serif; } /* typewriter text is too wide for the account links */
html[data-sy-theme="zine"] .sy-nav { border-block: 3px solid #111; text-transform: uppercase; letter-spacing: .05em; }
html[data-sy-theme="zine"] .sy-nav a, html[data-sy-theme="zine"] .sy-nav a:visited { font-size: 10pt; font-weight: normal; }
html[data-sy-theme="zine"] .sy-nav a:hover, html[data-sy-theme="zine"] .sy-nav a[aria-current="page"] { color: #fff; background: #111; text-decoration: none; padding: 0 4px; }
/* Links: marker underline, highlighter on hover. */
html[data-sy-theme="zine"] .sy-main a:not(.sy-button):not(.sy-banner), html[data-sy-theme="zine"] .sy-main button.linklike, html[data-sy-theme="zine"] .lb-root a {
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px; text-decoration-color: var(--t-accent);
}
html[data-sy-theme="zine"] .sy-main a:not(.sy-button):not(.sy-banner):hover, html[data-sy-theme="zine"] .sy-main button.linklike:hover, html[data-sy-theme="zine"] .lb-root a:hover { background: var(--t-accent); color: #111; }
html[data-sy-theme="zine"] .classic-panel { border-width: 2px; margin-bottom: 20px; position: relative; }
html[data-sy-theme="zine"] :is(.classic-panel-head, .sy-dialog-head, .lb-inline .lb-header, .lb-section-title) {
  text-transform: uppercase; letter-spacing: .05em; font-size: 12pt; font-weight: normal; padding: 4px 9px 3px;
}
html[data-sy-theme="zine"] .lb-inline .lb-header h2 { font: inherit; }
/* A strip of tape holds each box to the page. */
html[data-sy-theme="zine"] .classic-panel::before {
  content: ""; position: absolute; top: -9px; left: 50%; width: 74px; height: 16px; margin-left: -37px; transform: rotate(-2.5deg);
  background: rgba(255, 233, 122, .82); border-left: 1px dashed rgba(0, 0, 0, .25); border-right: 1px dashed rgba(0, 0, 0, .25); pointer-events: none;
}
html[data-sy-theme="zine"] .classic-panel:nth-of-type(even)::before { left: 22%; transform: rotate(3deg); background: rgba(255, 46, 136, .32); }
html[data-sy-theme="zine"] :is(.sy-button, .lb-small, .lb-send, .lb-retry) { box-shadow: 2px 2px 0 #111; text-transform: uppercase; font-size: 9pt; font-weight: normal; letter-spacing: .04em; }
html[data-sy-theme="zine"] :is(.sy-button, .lb-small, .lb-send, .lb-retry):active { transform: translate(2px, 2px); box-shadow: none; }
html[data-sy-theme="zine"] .sy-main:not(.home-page .sy-main) { border: 2px solid #111; box-shadow: 6px 6px 0 #111; }
html[data-sy-theme="zine"] .home-page .sy-main { border: 0; box-shadow: none; }
html[data-sy-theme="zine"] dialog.sy-dialog { border-width: 2px; box-shadow: 6px 6px 0 #111; }
html[data-sy-theme="zine"] .sx-table td, html[data-sy-theme="zine"] .home-list > li { border-bottom-style: dashed; border-bottom-color: #9a9a9a; }
html[data-sy-theme="zine"] #sy-footer { border-top: 4px solid var(--t-accent); }

/* ==========================================================================
   3. VIDEO STORE CARPET
   Friday night at the rental place: bubblegum, seaside teal, confetti carpet.
   ========================================================================== */
html[data-sy-theme="video-store"] {
  --t-page: #241a52;
  --t-wallpaper:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180' fill='none' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 34q10-14 20 0t20 0 20 0' stroke='%23F28CB4'/%3E%3Cpath d='M118 22l16 26h-32z' stroke='%232ec4b6'/%3E%3Ccircle cx='150' cy='96' r='7' fill='%23ffd166'/%3E%3Ccircle cx='40' cy='98' r='5' fill='%232ec4b6'/%3E%3Cpath d='M70 120l10-12 10 12 10-12 10 12' stroke='%23ffd166'/%3E%3Cpath d='M20 150l14-10 4 16z' fill='%23F28CB4'/%3E%3Cpath d='M130 150q8 10 16 0t16 0' stroke='%239b7bff'/%3E%3Crect x='84' y='58' width='12' height='12' transform='rotate(18 90 64)' fill='%239b7bff'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 50% 0%, rgba(242, 140, 180, .22), transparent 55%);
  --t-wallpaper-size: 180px 180px, 100% 100%;
  --t-band: #1a1140; --t-band-ink: #ffffff; --t-band-soft: #ffc9de; --t-band-accent: #ffd166;
  --t-nav: #2ec4b6; --t-nav-ink: #1a1140; --t-nav-hover: #ffffff; --t-nav-sep: #1a1140;
  --t-sheet: #fffaf2; --t-paper: #fffaf2; --t-ink: #2b1a4f; --t-muted: #6a5880;
  --t-line: #2b1a5a; --t-rule: #ecd3df;
  --t-head: #f28cb4; --t-head-ink: #2b1a5a;
  --t-soft: #ffdbe9; --t-soft-ink: #8a2e5c; --t-soft-2: #fff0f6;
  --t-link: #5a2ea6; --t-link-hover: #d93a76;
  --t-button: #ffd166; --t-button-hover: #ffe08f; --t-button-ink: #2b1a5a; --t-button-border: 2px solid #2b1a5a; --t-button-radius: 999px;
  --t-radius: 10px; --t-shadow: 4px 4px 0 #2ec4b6;
  --t-font: "Trebuchet MS", "Century Gothic", Verdana, sans-serif;
  --sy-font-size: 9pt;
}
/* Tracking stripes under the header, like the edge of a tape label. */
html[data-sy-theme="video-store"] .sy-band { border-bottom: 7px solid; border-image: linear-gradient(90deg, #f28cb4 0 25%, #ff9f43 25% 50%, #ffd166 50% 75%, #2ec4b6 75%) 1; }
html[data-sy-theme="video-store"] .sy-nav a, html[data-sy-theme="video-store"] .sy-nav a:visited { font-weight: bold; font-size: 9pt; }
html[data-sy-theme="video-store"] .classic-panel { border-width: 2px; margin-bottom: 18px; overflow: hidden; }
html[data-sy-theme="video-store"] :is(.classic-panel-head, .sy-dialog-head, .lb-inline .lb-header, .lb-section-title) {
  font-style: italic; font-size: 10.5pt; padding: 5px 12px;
  background-image: linear-gradient(90deg, transparent calc(100% - 46px), #ff9f43 0 calc(100% - 34px), #ffd166 0 calc(100% - 22px), #2ec4b6 0 calc(100% - 10px), transparent 0);
}
html[data-sy-theme="video-store"] .lb-inline .lb-header { padding-right: 56px; }
html[data-sy-theme="video-store"] .lb-inline .lb-header h2 { font: inherit; }
html[data-sy-theme="video-store"] :is(.sy-button, .lb-small, .lb-send, .lb-retry) { padding: .25em .9em; box-shadow: 2px 2px 0 #2b1a5a; }
html[data-sy-theme="video-store"] .sy-main:not(.home-page .sy-main) { border: 2px solid #2b1a5a; box-shadow: 6px 6px 0 #f28cb4; }
html[data-sy-theme="video-store"] .home-page .sy-main { border: 0; box-shadow: none; }
html[data-sy-theme="video-store"] dialog.sy-dialog { border-width: 2px; overflow: hidden; box-shadow: 6px 6px 0 #2ec4b6; }
html[data-sy-theme="video-store"] dialog.sy-theme-dialog { overflow: auto; }

/* ==========================================================================
   4. STEEL CITY
   Black and gold, bridge trusses and stadium lights.
   ========================================================================== */
html[data-sy-theme="steel-city"] {
  --t-page: #0c0c0d;
  --t-wallpaper:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='70' viewBox='0 0 120 70' fill='none' stroke='%23ffb612' stroke-opacity='.16' stroke-width='2'%3E%3Cpath d='M0 8h120M0 62h120M0 8l60 54 60-54M60 8v54M0 62V8M120 62V8'/%3E%3Ccircle cx='60' cy='8' r='2.5' fill='%23ffb612' fill-opacity='.28' stroke='none'/%3E%3Ccircle cx='0' cy='62' r='2.5' fill='%23ffb612' fill-opacity='.28' stroke='none'/%3E%3Ccircle cx='120' cy='62' r='2.5' fill='%23ffb612' fill-opacity='.28' stroke='none'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 20% -5%, rgba(255, 220, 130, .2), transparent 45%),
    radial-gradient(ellipse at 80% -5%, rgba(255, 220, 130, .2), transparent 45%);
  --t-wallpaper-size: 120px 70px, 100% 100%, 100% 100%;
  --t-band: #000000; --t-band-ink: #ffffff; --t-band-soft: #ffcf5c; --t-band-accent: #ffb612;
  --t-nav: #ffb612; --t-nav-ink: #000000; --t-nav-hover: #000000; --t-nav-sep: #000000;
  --t-sheet: #fffdf6; --t-paper: #fffdf6; --t-ink: #141414; --t-muted: #55503f;
  --t-line: #ffb612; --t-rule: #e2d6ab;
  --t-head: #121212; --t-head-ink: #ffc93c;
  --t-soft: #ffe9a8; --t-soft-ink: #5c4300; --t-soft-2: #fff6d8;
  --t-link: #7a5200; --t-link-hover: #000000;
  --t-button: #ffb612; --t-button-hover: #ffc93c; --t-button-ink: #000000; --t-button-border: 2px solid #000000;
  --t-radius: 0px; --t-shadow: 0 0 0 1px #000, 0 6px 14px rgba(0, 0, 0, .6);
  --t-font: Arial, Helvetica, sans-serif;
  --t-head-font: Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Black", sans-serif;
  --sy-font-size: 9pt;
}
html[data-sy-theme="steel-city"] .sy-band { border-bottom: 4px solid #ffb612; }
html[data-sy-theme="steel-city"] .sy-nav { text-transform: uppercase; letter-spacing: .09em; border-bottom: 3px solid #000; }
html[data-sy-theme="steel-city"] .sy-nav a, html[data-sy-theme="steel-city"] .sy-nav a:visited { font-size: 10.5pt; font-weight: normal; }
html[data-sy-theme="steel-city"] .sy-nav a:hover, html[data-sy-theme="steel-city"] .sy-nav a[aria-current="page"] { color: #ffb612; background: #000; text-decoration: none; padding: 0 5px; }
html[data-sy-theme="steel-city"] .classic-panel { border-width: 2px; }
/* Hazard stripe on the left of every heading. */
html[data-sy-theme="steel-city"] :is(.classic-panel-head, .sy-dialog-head, .lb-inline .lb-header, .lb-section-title) {
  text-transform: uppercase; letter-spacing: .08em; font-size: 11.5pt; font-weight: normal; padding: 4px 9px 3px 26px;
  background-image: repeating-linear-gradient(-45deg, #ffb612 0 6px, #121212 6px 12px); background-size: 16px 100%; background-repeat: no-repeat;
}
html[data-sy-theme="steel-city"] .lb-inline .lb-header h2 { font: inherit; }
html[data-sy-theme="steel-city"] :is(.sy-button, .lb-small, .lb-send, .lb-retry) { text-transform: uppercase; letter-spacing: .06em; font-weight: normal; font-size: 9.5pt; }
html[data-sy-theme="steel-city"] .sy-main a:not(.sy-button):not(.sy-banner), html[data-sy-theme="steel-city"] .lb-root a { text-decoration: underline; text-decoration-color: #ffb612; text-decoration-thickness: 2px; text-underline-offset: 2px; }
html[data-sy-theme="steel-city"] .sy-main:not(.home-page .sy-main) { border: 2px solid #ffb612; }
html[data-sy-theme="steel-city"] .home-page .sy-main { border: 0; }
html[data-sy-theme="steel-city"] dialog.sy-dialog { border-width: 2px; box-shadow: 0 0 0 2px #000, 0 12px 30px rgba(0, 0, 0, .6); }

/* ==========================================================================
   5. AURORA
   Soft glass cards over northern lights: the modern direction.
   ========================================================================== */
html[data-sy-theme="aurora"] {
  --t-page: #0f1030;
  --t-wallpaper:
    radial-gradient(ellipse 70% 55% at 12% 8%, rgba(45, 212, 191, .5), transparent 70%),
    radial-gradient(ellipse 60% 50% at 88% 18%, rgba(139, 92, 246, .55), transparent 70%),
    radial-gradient(ellipse 75% 55% at 55% 105%, rgba(244, 114, 182, .42), transparent 70%),
    linear-gradient(160deg, #0f1030, #171a4a 55%, #10102e);
  --t-wallpaper-size: 100% 100%;
  --t-band: rgba(13, 14, 44, .62); --t-band-ink: #ffffff; --t-band-soft: #c7d2fe; --t-band-accent: #5eead4;
  --t-nav: rgba(255, 255, 255, .12); --t-nav-ink: #ffffff; --t-nav-hover: #5eead4; --t-nav-sep: transparent;
  --t-sheet: rgba(255, 255, 255, .95); --t-paper: rgba(255, 255, 255, .95); --t-ink: #1e1b4b; --t-muted: #5b5f86;
  --t-line: rgba(255, 255, 255, .75); --t-rule: #e3e6f7;
  --t-head: transparent; --t-head-ink: #1e1b4b;
  --t-soft: #e6e9ff; --t-soft-ink: #4338ca; --t-soft-2: #f3f4ff;
  --t-link: #4f46e5; --t-link-hover: #db2777;
  --t-button: linear-gradient(135deg, #6366f1, #a855f7 55%, #ec4899); --t-button-hover: linear-gradient(135deg, #4f46e5, #9333ea 55%, #db2777);
  --t-button-ink: #ffffff; --t-button-border: 0; --t-button-radius: 999px;
  --t-radius: 16px; --t-shadow: 0 12px 34px rgba(6, 8, 40, .38);
  --t-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --t-focus: #6366f1;
  --t-strong: #4338ca; --t-strong-ink: #ffffff;
  --sy-font-size: 13px;
  --sy-page-width: 1000px;
}
html[data-sy-theme="aurora"] body { line-height: 1.5; }
html[data-sy-theme="aurora"] .sy-band { border-radius: 0 0 18px 18px; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(255, 255, 255, .14) inset, 0 10px 30px rgba(6, 8, 40, .3); }
html[data-sy-theme="aurora"] .sy-nav { margin: 10px 0 4px; padding: 7px 8px; border-radius: 999px; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, .2); line-height: 22px; }
html[data-sy-theme="aurora"] .sy-nav a, html[data-sy-theme="aurora"] .sy-nav a:visited { font-size: 13px; font-weight: 500; padding: 4px 11px; border-radius: 999px; }
html[data-sy-theme="aurora"] .sy-nav a:hover { background: rgba(255, 255, 255, .16); text-decoration: none; }
html[data-sy-theme="aurora"] .sy-nav a[aria-current="page"] { color: #1e1b4b; background: #fff; font-weight: 600; }
html[data-sy-theme="aurora"] .sy-nav .sep { display: none; }
html[data-sy-theme="aurora"] .sy-main { margin-top: 12px; box-shadow: var(--t-shadow); border: 1px solid rgba(255, 255, 255, .6); }
html[data-sy-theme="aurora"] .home-page .sy-main { border: 0; box-shadow: none; }
html[data-sy-theme="aurora"] .classic-panel { border-width: 1px; margin-bottom: 18px; overflow: hidden; }
html[data-sy-theme="aurora"] :is(.classic-panel-head, .lb-inline .lb-header, .lb-section-title) {
  font-size: 14px; font-weight: 650; letter-spacing: -.01em; padding: 12px 14px 9px;
  background-image: linear-gradient(90deg, #2dd4bf, #8b5cf6 55%, #f472b6); background-size: calc(100% - 28px) 2px; background-position: 14px 100%; background-repeat: no-repeat;
}
html[data-sy-theme="aurora"] .lb-inline .lb-header h2 { font: inherit; }
html[data-sy-theme="aurora"] .classic-panel-body { padding: 12px 14px; }
html[data-sy-theme="aurora"] .sy-dialog-head { color: #ffffff; background: linear-gradient(135deg, #312e81, #6d28d9 60%, #be185d); font-size: 14px; padding: 10px 14px; }
html[data-sy-theme="aurora"] .sy-dialog-head button { color: #ffffff; }
html[data-sy-theme="aurora"] dialog.sy-dialog { border: 0; overflow: hidden; background: #ffffff; box-shadow: 0 24px 70px rgba(6, 8, 40, .55); font-size: 13px; }
html[data-sy-theme="aurora"] dialog.sy-theme-dialog { overflow: auto; }
html[data-sy-theme="aurora"] .sy-theme-card { border-color: #d9dcf5; }
html[data-sy-theme="aurora"] :is(.sy-button, .lb-small, .lb-send, .lb-retry) { padding: .42em 1.05em; font-size: 12px; font-weight: 600; box-shadow: 0 4px 12px rgba(99, 102, 241, .35); }
html[data-sy-theme="aurora"] :is(.sy-button.is-on, .sy-button[aria-pressed="true"]) { color: #ffffff; background: #1e1b4b; }
html[data-sy-theme="aurora"] .sy-button.sy-danger { box-shadow: none; }
html[data-sy-theme="aurora"] .home-stat { border-radius: 8px; padding: 6px 9px; }
html[data-sy-theme="aurora"] :is(.home-muted, .search-muted) { font-size: 11.5px; }
html[data-sy-theme="aurora"] .home-hello h1 { font-size: 18px; letter-spacing: -.01em; }
html[data-sy-theme="aurora"] .home-hello img, html[data-sy-theme="aurora"] .home-list img, html[data-sy-theme="aurora"] .person img { border-radius: 10px; }
html[data-sy-theme="aurora"] .sx-table th { padding: 7px 9px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; }
html[data-sy-theme="aurora"] .sx-table td { padding: 8px 9px; border-bottom-style: solid; }
html[data-sy-theme="aurora"] .home-list > li { border-bottom-style: solid; }
html[data-sy-theme="aurora"] :is(.lb-message, .lb-receipts) { border-radius: 10px; overflow: hidden; }
html[data-sy-theme="aurora"] .lb-root, html[data-sy-theme="aurora"] .lb-root :is(button, input, select, textarea) { font-size: 12px; }
html[data-sy-theme="aurora"] .lb-inline :is(.lb-who, .lb-body) { font-size: 12px; }
html[data-sy-theme="aurora"] #sy-footer { margin: 18px 0 24px; border-radius: 18px; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
html[data-sy-theme="aurora"] .home-module-bar { border: 0; }
@media (prefers-reduced-motion: no-preference) {
  html[data-sy-theme="aurora"] body:not(.home-look-manim, .fm-visual-active) { animation: sy-aurora-drift 28s ease-in-out infinite alternate; }
  @keyframes sy-aurora-drift {
    from { background-position: 0% 0%, 100% 0%, 50% 100%, 0 0; background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%; }
    to { background-position: 12% 6%, 86% 10%, 40% 96%, 0 0; background-size: 130% 120%, 125% 130%, 120% 125%, 100% 100%; }
  }
}
@media (max-width: 760px) {
  html[data-sy-theme="aurora"] .sy-nav { border-radius: 16px; }
  html[data-sy-theme="aurora"] .sy-band { border-radius: 0 0 14px 14px; }
}

/* Dark uses the Classic sizing, typography and controls with a darker palette. */
html[data-sy-theme="dark"] {
  color-scheme: dark;
  --t-page: #090a0c;
  --t-sheet: #12151a;
  --t-paper: #171a20;
  --t-band: #0d0f12;
  --t-band-ink: #f1f3f6;
  --t-band-soft: #c3cbd8;
  --t-band-accent: #b8d5ff;
  --t-nav: #181c22;
  --t-nav-ink: #e3e8f0;
  --t-nav-hover: #c4dcff;
  --t-nav-sep: #b2becd;
  --t-ink: #e5e9f0;
  --t-muted: #b2bdcc;
  --t-line: #475364;
  --t-rule: #343d4b;
  --t-head: #20262e;
  --t-head-ink: #f2f5fa;
  --t-soft: #242c37;
  --t-soft-ink: #d2dded;
  --t-soft-2: #1b2028;
  --t-link: #a5c6f5;
  --t-link-hover: #d3e5ff;
  --t-button: #26313f;
  --t-button-hover: #344357;
  --t-button-ink: #edf4ff;
  --t-focus: #b8d5ff;
  --t-strong: #394a62;
  --sy-value-text: var(--t-ink);
  --sy-blurb-head-bg: #493729;
  --sy-blurb-head-text: #ffd1a2;
  --sy-comment-name-bg: #493729;
  --sy-comment-body-bg: #332b25;
  --sy-comment-frame: #685447;
  --sy-red: #ff9b96;
}

html[data-sy-theme="dark"] :is(.sy-band, .sy-logo, .sy-logo:hover, .sy-logo:visited, .sy-logo:focus, .sy-utility, .sy-utility a, .sy-utility a:visited, .sy-utility button.linklike) { color: var(--t-band-ink); }
html[data-sy-theme="dark"] :is(.sy-utility a:hover, .sy-utility button.linklike:hover) { color: var(--t-band-accent); }
html[data-sy-theme="dark"] :is(.sy-logo-tag, .sy-search .sy-search-note) { color: var(--t-band-soft); }
html[data-sy-theme="dark"] .sy-nav .sep { color: var(--t-nav-sep); }
/* Opaque so light wallpaper and Home visualizer styles stay behind the footer. */
html[data-sy-theme="dark"] #sy-footer { background: var(--t-band); color: var(--t-band-soft); }
html[data-sy-theme="dark"] .sy-footer a,
html[data-sy-theme="dark"] .sy-footer a:visited { color: var(--t-link); }
html[data-sy-theme="dark"] .sy-footer a:hover { color: var(--t-link-hover); }
html[data-sy-theme="dark"] .fm-visual-active .fm-note { background-color: var(--t-paper); color: var(--t-muted); }
html[data-sy-theme="dark"] .space-bg { filter: brightness(.48); }
html[data-sy-theme="dark"] :is(.classic-panel, .sc-card, .blog-profile, .cal-surface, .cal-toolbar, .cal-date-badge, .cal-app .classic-panel-body) { background-color: var(--t-paper); border-color: var(--t-line); }
html[data-sy-theme="dark"] :is(body.blog-page, body.calendar-page) { background-color: var(--t-page); }
html[data-sy-theme="dark"] :is(.front-hero, .home-page .home-shortcuts, .blog-header, .blog-entry, .blog-empty, .cal-filterbar, .cal-month th, .cal-agenda-day h3, .wr-desc, .wr-quote, .wr-mention, .sy-mention, .nt-list li a:hover) {
  background: var(--t-soft-2);
  border-color: var(--t-rule);
}
html[data-sy-theme="dark"] .cal-month td.is-outside { --cal-empty-day: var(--t-soft-2); color: var(--t-muted); }
html[data-sy-theme="dark"] .cal-month td[style*="--cal-day-fill"] { color: #172642; }
html[data-sy-theme="dark"] :is(.cal-app, .cal-card button.cal-title, .home-page .hc-tile span, .lb-root, .lb-header h1) { color: var(--t-ink); }
html[data-sy-theme="dark"] :is(.front-hero h1, .home-page .home-shortcuts b, .wr-box-text, .wr-box-text:visited, .nt-icon, .wb-head, .cal-hero h1, .cal-more, .lb-board-task > details > summary) { color: var(--t-link); }
html[data-sy-theme="dark"] :is(.page-sub, .home-muted, .home-empty, .home-check li.is-done, .search-muted, .person .person-where, .sx-mail-date, .sx-excerpt, .wr-desc-sub, .wr-live, .wr-when, .wr-handle, .wr-day, .wr-loading, .wr-start, .wb-date, .cal-hero p, .cal-month th, .cal-empty, .cal-meta, .cal-bottom, .cal-help, .cal-card.is-done .cal-title, .lb-footer) { color: var(--t-muted); }
html[data-sy-theme="dark"] :is(.wb-title, .wb-box-title) { color: var(--sy-blurb-head-text); }
html[data-sy-theme="dark"] :is(.home-alert, .sy-safe-bar, .cal-message, .sx-table tr.is-unread td, .nt-list li.nt-new, .home-list li.ch-winner) { color: #f8dfb0; background: #403320; border-color: #a48653; }
html[data-sy-theme="dark"] :is(.sx-table td, .home-list > li, .cal-month td, .cal-month th) { border-color: var(--t-rule); }
html[data-sy-theme="dark"] :is(.sy-button, .cal-btn, .lb-small, .lb-send, .lb-retry, .lb-new-messages) { color: var(--t-button-ink); background: var(--t-button); border-color: var(--t-line); }
html[data-sy-theme="dark"] :is(.sy-button, .cal-btn, .lb-small, .lb-send, .lb-retry, .lb-new-messages):hover { color: var(--t-button-ink); background: var(--t-button-hover); }
html[data-sy-theme="dark"] :is(.sy-button.is-on, .sy-button[aria-pressed="true"], .cal-btn-primary, .cal-views [aria-pressed="true"], .cal-day-number.is-today) { color: var(--t-strong-ink); background: var(--t-strong); }
html[data-sy-theme="dark"] :is(.sy-button.sy-danger, .cal-btn-danger) { color: #ffbbb5; background: #4e2b2a; border-color: #a1645e; }
html[data-sy-theme="dark"] :is(dialog.sy-dialog, .cal-dialog) { color: var(--t-ink); background: var(--t-paper); border-color: var(--t-line); }
html[data-sy-theme="dark"] :is(.sy-dialog-head, .cal-dialog-head, .cal-app .classic-panel-head, .cal-date-badge b, .lb-section-title, .lb-conversation-head, .lb-board > summary, .lb-inline .lb-header, .home-module-bar) { color: var(--t-head-ink); background: var(--t-head); border-color: var(--t-line); }
html[data-sy-theme="dark"] :is(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="password"], input[type="url"], input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"], textarea, select) {
  color: var(--t-ink);
  background-color: var(--t-page);
  border-color: var(--t-line);
}
html[data-sy-theme="dark"] :is(input::placeholder, textarea::placeholder) { color: var(--t-muted); }
html[data-sy-theme="dark"] .sy-theme-card { color: var(--t-ink); background: var(--t-sheet); border-color: var(--t-line); }
html[data-sy-theme="dark"] :is(.sy-theme-blurb, .sy-theme-from) { color: var(--t-muted); }
html[data-sy-theme="dark"] .sy-theme-card[aria-pressed="true"] { border-color: var(--t-focus); box-shadow: 0 0 0 2px var(--t-soft); }
html[data-sy-theme="dark"] .sy-theme-card:focus-visible { outline-color: var(--t-focus); }
html[data-sy-theme="dark"] :is(.lb-panel, .lb-side-box, .lb-board, .lb-message, .lb-compose, .lb-agent, .lb-receipts, .home-page .hc-tile) { background: var(--t-paper); border-color: var(--t-line); }
html[data-sy-theme="dark"] :is(.lb-message-head, .lb-message-content, .lb-footer, .lb-reply-draft, .lb-board-edit, .lb-inline .lb-conversation-head) { background: var(--t-soft-2); border-color: var(--t-rule); }
html[data-sy-theme="dark"] :is(.lb-root a, .lb-agent, .lb-message-actions button, .lb-open-board) { color: var(--t-link); }
html[data-sy-theme="dark"] .lb-root a:hover { color: var(--t-link-hover); }
html[data-sy-theme="dark"] :is(.lb-inline .lb-header-actions a, .lb-inline .lb-header-actions a:hover) { color: var(--t-head-ink); }
html[data-sy-theme="dark"] :is(.lb-message-head time, .lb-evidence, .lb-empty, .lb-empty strong, .lb-side-note, .lb-event, .lb-loading, .lb-message-actions, .lb-compose-bottom, .lb-receipts > span, .home-page .hc-tile i, .home-page .home-calendar-status) { color: var(--t-muted); }
html[data-sy-theme="dark"] :is(.lb-error, .lb-board-error, .lb-reply-draft button) { color: var(--sy-red); }
html[data-sy-theme="dark"] :is(.lb-live, .sx-on) { color: #a9d69a; }
html[data-sy-theme="dark"] .lb-log { scrollbar-color: var(--t-line) var(--t-soft-2); }
html[data-sy-theme="dark"] .lb-inline .lb-older { color: var(--t-link) !important; }
html[data-sy-theme="dark"] .home-page #home-calendar-slot button:not([aria-pressed="true"]):not([style*="--cal-day-fill"]) { color: var(--t-link); background: var(--t-soft-2); }

/* Themes never print: paper stays paper. */
@media print {
  html[data-sy-theme] body { background: #fff !important; animation: none !important; }
  html[data-sy-theme] .classic-panel { box-shadow: none; }
}