/* Shared site tokens. Editions still decide day/night; palettes only change color. */
:root { --chat-paper: var(--bg); --chat-border: #b9c7b4; --bubble: var(--surface); --your-bubble: var(--wash); --bubble-line: var(--line); --your-line: var(--line); }
html[data-edition="gn"] { --chat-border: #637286; }
html[data-edition="gn"][data-night-scheme="starry"] { color-scheme: dark; --bg: #080f20; --surface: #111c32; --ink: #eef2fb; --muted: #b0bed6; --accent: #b8c9f4; --line: #2d3d59; --wash: #1b2a44; --warm: #d8c493; --chat-border: #526789; color: var(--ink); background: var(--bg); }
/* One irregular, non-repeating sky stays fixed behind content. */
html[data-edition="gn"][data-night-scheme="starry"] body {
  min-height: 100svh;
  color: var(--ink);
  background-color: var(--bg);
  background-image:
    url("/assets/ef6a107687ce754d708b0330b474388dc724f3771c0f75c4840ccfbf192971ff/starry-sky.svg"),
    radial-gradient(ellipse at 65% 12%, #24385b66, transparent 65%);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
@media (prefers-reduced-motion: no-preference) {
  html[data-edition="gn"][data-night-scheme="starry"] body {
    background-image:
      url("/assets/ef6a107687ce754d708b0330b474388dc724f3771c0f75c4840ccfbf192971ff/starry-sky.svg#twinkle"),
      radial-gradient(ellipse at 65% 12%, #24385b66, transparent 65%);
  }
}
/* City Lights: the harbor skyline stays fixed at the bottom of the viewport, below the headline. */
html[data-edition="gn"][data-night-scheme="city-lights"] { color-scheme: dark; --bg: #0b1020; --surface: #151b31; --ink: #f2efe8; --muted: #bdb9cb; --accent: #f2c27b; --line: #2e3452; --wash: #1d2442; --warm: #f2c27b; --chat-border: #5a5f82; color: var(--ink); background: var(--bg); }
html[data-edition="gn"][data-night-scheme="city-lights"] body {
  min-height: 100svh;
  color: var(--ink);
  background: var(--bg) url("/assets/af41d86cb656bf71df3c42dc5c3e01a126838972d9f0eb2c0af53e9ca3343c39/city-lights.svg") center bottom / cover no-repeat fixed;
}
/* Midnight Violet: a flat Dracula-inspired palette with a pink accent. */
html[data-edition="gn"][data-night-scheme="midnight-violet"] { color-scheme: dark; --bg: #1f2029; --surface: #2a2b37; --ink: #f8f8f2; --muted: #b6bbd6; --accent: #ff79c6; --line: #3d4052; --wash: #33354a; --warm: #ffb86c; --chat-border: #6d6a9c; --your-bubble: #45304a; color: var(--ink); background: var(--bg); }
html[data-edition="gn"][data-night-scheme="midnight-violet"] body { color: var(--ink); background: var(--bg); }
html[data-edition="gn"][data-night-scheme="midnight-violet"] .weather-tile.cool { --tile-accent: #8be9fd; --tile-bg: #2b3a4a; }
html[data-edition="gn"][data-night-scheme="midnight-violet"] .weather-tile.warm { --tile-accent: #ffb86c; --tile-bg: #3d3330; }
html[data-edition="gn"][data-night-scheme="midnight-violet"] .weather-tile.precipitation { --tile-accent: #bd93f9; --tile-bg: #35304d; }
html[data-edition="gn"][data-night-scheme="midnight-violet"] .weather-tile.air { --tile-accent: #50fa7b; --tile-bg: #273d33; }
html[data-edition="gn"][data-night-scheme="midnight-violet"] .chat-page { --special-question: #f1fa8c; --special-answer: #8be9fd; --special-added: #50fa7b; --special-updated: #bd93f9; --special-cancelled: #ff5555; }
html:not([data-edition="gn"])[data-day-scheme="warm"] { color-scheme: light; --bg: #f6eee3; --surface: #fffbf5; --ink: #554032; --muted: #7d6858; --accent: #987052; --line: #e0cbb8; --wash: #f1e4d4; --warm: #d8b471; --chat-paper: #fbf4e9; --chat-border: #ceb29a; --bubble: #fffdf9; --your-bubble: #f3d7c1; --bubble-line: #ead8c5; --your-line: #e1bc9f; color: var(--ink); background: var(--bg); }
html:not([data-edition="gn"])[data-day-scheme="warm"] body { color: var(--ink); background: var(--bg); }
html:not([data-edition="gn"])[data-day-scheme="morning-sky"] { --bg: #f3f8f9; --surface: #fffdf7; --ink: #293e50; --muted: #304758; --accent: #27465e; --line: #cfdae0; --wash: #e5eef3; --warm: #d3af64; --chat-border: #9eb8c8; --your-bubble: #e2edf4; --day-scene: url("/assets/378c374f63b9dfd485703aefbcb0aa66ce52a03184c04d54c210bb953d948dcf/morning-sky.svg"), url("/assets/221e959e203c4e60a6c7ab8d24842c64e0fcef0669de5609c4353ee72485dd63/morning-clouds.webp"), url("/assets/da64ff11a7a9b7b68da13cfab5c91e887423ff4cf01d4c2169f012bbcf81034b/morning-clouds-continuation.webp"); --day-repeat: no-repeat, no-repeat, repeat-y; }
html:not([data-edition="gn"])[data-day-scheme="first-light"] { --bg: #f3ede2; --surface: #fffaf5; --ink: #48443c; --muted: #594f43; --accent: #784a30; --line: #e3d8c7; --wash: #f4ebdc; --warm: #c69c55; --chat-border: #c6b798; --your-bubble: #f5e5ce; --day-scene: url("/assets/c5f78c457fdc771ab861be09bf6b37934beb63c000bc6d350ff65540adf91334/first-light.svg"); --day-repeat: no-repeat; }
html:not([data-edition="gn"]):is([data-day-scheme="morning-sky"], [data-day-scheme="first-light"]) { color-scheme: light; color: var(--ink); background: var(--bg); }
@media screen {
  html:not([data-edition="gn"]):is([data-day-scheme="morning-sky"], [data-day-scheme="first-light"]) body {
    min-height: 100svh;
    color: var(--ink);
    background-color: var(--bg);
    background-image: var(--day-scene);
    background-position: center top;
    /* Fixed artwork scale, independent of document length; only the Morning Sky clouds repeat. */
    background-attachment: scroll;
    background-size: max(100%, 160svh) auto;
    background-repeat: var(--day-repeat);
  }
  html:not([data-edition="gn"])[data-day-scheme="morning-sky"] body {
    background-position: center top, center top, center max(62.5vw, 100svh);
  }
}
/* Keep atmospheric details in view when a portrait screen crops the wide scene. */
@media screen and (max-width: 700px) {
  html:not([data-edition="gn"]):is([data-day-scheme="morning-sky"], [data-day-scheme="first-light"]) body { background-position: right top; }
  :is(html:not([data-edition="gn"])[data-day-scheme="grass-block"], html[data-edition="gn"][data-night-scheme="grass-block"]) body { background-position: right top, right top; }
  html:not([data-edition="gn"])[data-day-scheme="morning-sky"] body { background-position: right top, right top, right max(62.5vw, 100svh); }
}
/* Grass Block: plains of grass blocks under a square sun; further down the page the ground
   turns to dirt and then stone, as if digging down. Pixel components come from pixel.css. */
html:not([data-edition="gn"])[data-day-scheme="grass-block"] { color-scheme: light; --bg: #cfe6f7; --surface: #fbf6e9; --ink: #2d2620; --muted: #5e5246; --accent: #3f7f26; --line: #c9b997; --wash: #f1e8d0; --warm: #e0a93a; --chat-paper: #fbf6e9; --chat-border: #b9a77f; --bubble: #fffdf6; --your-bubble: #e3f1d3; --bubble-line: #ddd0ad; --your-line: #b9d69f; color: var(--ink); background: var(--bg); }
html[data-edition="gn"][data-night-scheme="grass-block"] { color-scheme: dark; --bg: #141a38; --surface: #262b45; --ink: #eef0f8; --muted: #b9bfd9; --accent: #ffd166; --line: #444b70; --wash: #30365a; --warm: #ffd166; --chat-paper: #262b45; --chat-border: #4a5280; --bubble: #2c3150; --your-bubble: #3b3266; --bubble-line: #3d4468; --your-line: #54467e; color: var(--ink); background: var(--bg); }
/* Picnic: a pastel checkerboard by day, plum with sparkles at night. */
html:not([data-edition="gn"])[data-day-scheme="picnic"] { color-scheme: light; --bg: #fbe9d6; --surface: #fff7e8; --ink: #4a2f22; --muted: #73533f; --accent: #b8445f; --line: #ecd0ae; --wash: #fdeedb; --warm: #f0b443; --chat-paper: #fff7e8; --chat-border: #d4ad86; --bubble: #fffbf2; --your-bubble: #fde0e6; --bubble-line: #ecd0ae; --your-line: #f0b8c4; color: var(--ink); background: var(--bg); }
html[data-edition="gn"][data-night-scheme="picnic"] { color-scheme: dark; --bg: #271d3a; --surface: #362a4c; --ink: #f8eeff; --muted: #d2c3e4; --accent: #ffb3c7; --line: #54446e; --wash: #403257; --warm: #ffd38a; --chat-paper: #362a4c; --chat-border: #5f4b7d; --bubble: #3d3055; --your-bubble: #5a3a62; --bubble-line: #54446e; --your-line: #74507c; color: var(--ink); background: var(--bg); }
@media screen {
  html:not([data-edition="gn"])[data-day-scheme="grass-block"] body { min-height: 100svh; color: var(--ink); image-rendering: pixelated;
    background: url("/assets/6a187ec3655f793652675470135d45940d71b8c70f6af656c64cf4e42da41230/grass-block-day.svg") center top / max(100%, 160svh) auto no-repeat, #9a9a9a url("/assets/0cd12bc04509bd4ee6316ca25ad604c828e4c40552c79a34f49d939e2bfbff8a/grass-block-stone-day.svg") center top / calc(max(100%, 160svh) / 5) repeat; }
  html[data-edition="gn"][data-night-scheme="grass-block"] body { min-height: 100svh; color: var(--ink); image-rendering: pixelated;
    background: url("/assets/188f961789baf68b512fed4658deb46aeb7477ceafbb7f58436a79e9537c2271/grass-block-night.svg") center top / max(100%, 160svh) auto no-repeat, #3c3f4a url("/assets/cddc6ad40ceade23f4c82929f21154793b4694d18e95b5c5b547942017a7e1ba/grass-block-stone-night.svg") center top / calc(max(100%, 160svh) / 5) repeat; }
  html:not([data-edition="gn"])[data-day-scheme="picnic"] body { min-height: 100svh; color: var(--ink); background: var(--bg) url("/assets/c2e0083e1c9d981941c3347cf6ec11a7099ac5426b363f6cfcfa553f291b573e/picnic-day.svg") repeat fixed; image-rendering: pixelated; }
  html[data-edition="gn"][data-night-scheme="picnic"] body { min-height: 100svh; color: var(--ink); background: var(--bg) url("/assets/df77ee7b04df139ce7afe6f68c94b9e9f3c0fb41833cea8d453b45e0ba3e93a4/picnic-night.svg") repeat fixed; image-rendering: pixelated; }
}
html[data-edition="gn"][data-night-scheme="grass-block"] .weather-tile.cool { --tile-accent: #a2cde9; }
/* A square pixel sun by day and the pixel crescent moon by night replace the smooth edition artwork. */
:is(html:not([data-edition="gn"])[data-day-scheme="grass-block"], html[data-edition="gn"][data-night-scheme="grass-block"]) .orbit .celestial-art > :not(path:first-child) { display: none; }
html:not([data-edition="gn"])[data-day-scheme="grass-block"] .orbit .sun { background: url("/assets/09604a48f4bb157cbbf62222325863da90d547ebc76fca72866044fa4861e0d3/grass-block-sun.svg") center 38% / 96px no-repeat; image-rendering: pixelated; }
html[data-edition="gn"][data-night-scheme="grass-block"] .orbit .sun { background: url("/assets/0a1c259f1e7761ed156ff6aa76b0d544a61864da23905b19064d3001319220a5/pixel-moon.svg") center / 144px no-repeat; image-rendering: pixelated; }
/* Labels that sit on the hills keep a parchment chip so they stay readable. */
:is(html:not([data-edition="gn"])[data-day-scheme="grass-block"], html[data-edition="gn"][data-night-scheme="grass-block"]) .briefing-section-nav a:not(.active, [aria-current]) { background: color-mix(in srgb, var(--surface) 88%, transparent); }
@media (max-width: 700px) { :is(html:not([data-edition="gn"])[data-day-scheme="grass-block"], html[data-edition="gn"][data-night-scheme="grass-block"]) .orbit .sun { background-size: 36px; background-position: center 30%; } }
html[data-edition="gn"][data-night-scheme="picnic"] .chat-page, html[data-edition="gn"][data-night-scheme="grass-block"] .chat-page { --special-question: #ffd38a; --special-answer: #a2cde9; --special-added: #9be59b; --special-updated: #c9b6ff; --special-cancelled: #ff8a8a; }
/* Account pages retain Classic; every other day palette uses shared site tokens. */
html:not([data-edition="gn"])[data-day-scheme]:not([data-day-scheme="classic"]) .avatar-display .avatar-toggle { color: var(--ink); }
html:not([data-edition="gn"])[data-day-scheme]:not([data-day-scheme="classic"]) .avatar-display .avatar-toggle:hover:not(:disabled) { color: var(--accent); }
html:not([data-edition="gn"])[data-day-scheme]:not([data-day-scheme="classic"]) .account-card { background: var(--surface); border-color: var(--line); }
html:not([data-edition="gn"])[data-day-scheme]:not([data-day-scheme="classic"]) .account-card .eyebrow,
html:not([data-edition="gn"])[data-day-scheme]:not([data-day-scheme="classic"]) .account-card a,
html:not([data-edition="gn"])[data-day-scheme]:not([data-day-scheme="classic"]) .toolbar-row .menu > summary::after,
html:not([data-edition="gn"])[data-day-scheme]:not([data-day-scheme="classic"]) .menu-panel .language-toolbar label { color: var(--muted); }
html:not([data-edition="gn"])[data-day-scheme]:not([data-day-scheme="classic"]) .account-card input { background: var(--bubble); border-color: var(--line); color: var(--ink); }
html:not([data-edition="gn"])[data-day-scheme]:not([data-day-scheme="classic"]) .account-card button { background: var(--accent); color: var(--surface); }
html:not([data-edition="gn"])[data-day-scheme]:not([data-day-scheme="classic"]) .account-card .password-toggle { background: var(--wash); color: var(--ink); }
html:not([data-edition="gn"])[data-day-scheme]:not([data-day-scheme="classic"]) .toolbar-row .menu > summary,
html:not([data-edition="gn"])[data-day-scheme]:not([data-day-scheme="classic"]) .toolbar-row .menu-panel { background: var(--surface); border-color: var(--line); color: var(--ink); }
html:not([data-edition="gn"])[data-day-scheme]:not([data-day-scheme="classic"]) .menu-panel .language-toolbar select,
html:not([data-edition="gn"])[data-day-scheme]:not([data-day-scheme="classic"]) .menu-panel .language-toolbar button { background: var(--bg); border-color: var(--line); color: var(--ink); }
html:not([data-edition="gn"])[data-day-scheme]:not([data-day-scheme="classic"]) .account-card :focus-visible,
html:not([data-edition="gn"])[data-day-scheme]:not([data-day-scheme="classic"]) .toolbar-row .menu > summary:focus-visible { outline-color: var(--accent); }
#prefs-menu > .menu-panel { display: grid; gap: 14px; width: min(460px, calc(100vw - 32px)); padding: 18px; border-radius: 18px; }
.settings-menu-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line, #b4c7c0); padding-bottom: 12px; }
#prefs-menu .settings-close { display: grid; place-items: center; width: 28px; min-width: 28px; height: 28px; min-height: 28px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted, #56746a); }
#prefs-menu .settings-close:hover { background: var(--wash, #f2f6f5); }
.settings-menu-header h2 { display: flex; align-items: center; gap: 7px; font: 600 14px/1.4 ui-sans-serif, system-ui, sans-serif; letter-spacing: 0; margin: 0; }
.settings-menu-header h2::before { content: "⚙"; font-size: 14px; font-weight: 400; line-height: 1; }
.settings-menu-header p { font-size: 11px; line-height: 1.5; color: var(--muted, #56746a); margin: 4px 0 0; }
#prefs-menu .language-toolbar { display: grid; justify-content: stretch; align-items: stretch; gap: 6px; width: auto; margin: 0; }
#prefs-menu .language-toolbar label { font-size: 12px; line-height: 20px; }
#prefs-menu .language-toolbar select { width: 100%; min-height: 44px; padding: 8px 12px; font-size: 13px; border-radius: 10px; }
#prefs-menu #color-scheme-form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; border-top: 1px solid var(--line, #b4c7c0); padding-top: 14px; }
#prefs-menu .color-scheme-heading { grid-column: 1 / -1; color: inherit; font: 600 12px/1.5 ui-sans-serif, system-ui, sans-serif; text-transform: none; letter-spacing: 0; margin: 0 0 4px; }
#prefs-menu label[for="website-language"], #prefs-menu .color-scheme-heading, #prefs-menu .scheme-picker legend { display: flex; align-items: center; gap: 7px; }
#prefs-menu label[for="website-language"]::before, #prefs-menu .color-scheme-heading::before, #prefs-menu .scheme-picker legend::before { content: ""; flex: 0 0 20px; width: 20px; height: 20px; background: var(--settings-icon) center / contain no-repeat; }
#prefs-menu label[for="website-language"] { --settings-icon: url("/assets/91df5b2619902fa7ebcec74eeb7b67e5fc93fb4bee9a925e32002bf93885487f/icons/desk-language.svg"); }
#prefs-menu label[for="website-model"] { --settings-icon: url("/assets/6acacab58e1625663c3f09ff8674e521f0c8184e2045e04666c2fac001edaed7/icons/desk-idea.svg"); }
#prefs-menu .color-scheme-heading { --settings-icon: url("/assets/74d239530481626a50a28dc16a984df44b475d176b6700612c4b379d399f7324/icons/desk-appearance.svg"); }
#website-style > legend { --settings-icon: url("/assets/6acacab58e1625663c3f09ff8674e521f0c8184e2045e04666c2fac001edaed7/icons/desk-idea.svg"); }
#day-color-scheme > legend { --settings-icon: url("/assets/eb57e94e0a81f2abea85ffb41a0c0e0b365e301dda092b545214bf55e7563d4b/icons/desk-morning.svg"); }
#night-color-scheme > legend { --settings-icon: url("/assets/f9cf469669212b23cefa3cc17842a55b642a71811b1ac86a73eef0e2a0c45d38/icons/desk-evening.svg"); }
#color-scheme-form > * { grid-column: 1 / -1; }
/* Scene pickers: native radios as picture cards; each swatch is a tiny page drawn in that scene's colors. */
.scheme-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 8px; min-width: 0; margin: 4px 0 0; padding: 0; border: 0; }
#prefs-menu .scheme-picker legend { margin: 0 0 8px; padding: 0; font-size: 12px; line-height: 20px; }
#prefs-menu .scheme-card { position: relative; display: grid; gap: 5px; min-width: 0; font-size: 12px; line-height: 1.3; color: var(--ink); cursor: pointer; }
.scheme-card input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; }
.scheme-name { font-size: 11.5px; line-height: 1.3; color: var(--muted); overflow-wrap: anywhere; }
.scheme-card input:checked ~ .scheme-name { color: var(--ink); font-weight: 600; }
/* Each swatch is a tiny page: the scheme's real scene layers, the header, headline,
   subtitle bubble and first section card, in that scheme's colors. Shapes follow the current style. */
.scheme-swatch { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 7px; box-shadow: 0 0 0 1px var(--line);
  background-color: var(--sw-bg); background-image: var(--sw-img, none); background-size: var(--sw-size, 100% auto); background-position: var(--sw-at, center top); background-repeat: no-repeat; }
.scheme-swatch i { position: absolute; display: block; }
/* Header: wordmark and the current-page pill. */
.scheme-swatch i:nth-child(1) { top: 7%; left: 5%; right: 5%; height: 6%;
  background: linear-gradient(var(--sw-ink), var(--sw-ink)) left center / 26% 70% no-repeat, linear-gradient(var(--sw-accent), var(--sw-accent)) right center / 16% 100% no-repeat; }
/* The second piece is reserved; scenes show their own sky. */
.scheme-swatch i:nth-child(2) { display: none; }
/* Headline lines. */
.scheme-swatch i:nth-child(3) { top: 25%; left: 8%; width: 48%; height: 13%;
  background: linear-gradient(var(--sw-ink), var(--sw-ink)) left top / 100% 36% no-repeat, linear-gradient(var(--sw-ink), var(--sw-ink)) left bottom / 70% 36% no-repeat; }
/* Subtitle bubble. */
.scheme-swatch i:nth-child(4) { top: 44%; left: 8%; width: 40%; height: 7%; border-radius: 2px; background: var(--sw-surface); box-shadow: 0 1px 2px #0000001a; }
/* First section card. */
.scheme-swatch i:nth-child(5) { top: 74%; left: 5%; right: 5%; bottom: -4%; border-radius: 3px; background: var(--sw-surface); box-shadow: 0 0 0 1px var(--sw-line);
  background-image: linear-gradient(var(--sw-ink), var(--sw-ink)), linear-gradient(var(--sw-line), var(--sw-line));
  background-size: 22% 9%, 90% 1px; background-position: 6% 22%, 50% 42%; background-repeat: no-repeat; }
.scheme-card:hover .scheme-swatch { box-shadow: 0 0 0 1px var(--accent); }
.scheme-card input:checked + .scheme-swatch { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.scheme-card input:checked + .scheme-swatch::after { content: "✓"; position: absolute; top: 4px; left: 4px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); color: var(--surface); font: 700 10px/1 ui-sans-serif, system-ui, sans-serif; }
.scheme-card input:focus-visible + .scheme-swatch { outline: 2px solid var(--accent); outline-offset: 4px; }
.scheme-card input:disabled ~ * { cursor: progress; opacity: .7; }
/* Style swatches draw the current colors in each style's shapes. */
[data-swatch^="style-"] { --sw-bg: var(--bg); --sw-surface: var(--surface); --sw-ink: var(--ink); --sw-accent: var(--accent); --sw-line: var(--line); }
[data-swatch="style-pixel"] { image-rendering: pixelated; }
[data-swatch="style-pixel"], [data-swatch="style-pixel"] i { border-radius: 0; }
[data-swatch="style-pixel"] i:nth-child(4), [data-swatch="style-pixel"] i:nth-child(5) { box-shadow: 0 -2px 0 0 var(--ink), 0 2px 0 0 var(--ink), -2px 0 0 0 var(--ink), 2px 0 0 0 var(--ink), 3px 3px 0 2px color-mix(in srgb, var(--ink) 22%, transparent); }
[data-swatch="style-pixel"] i:nth-child(3) { filter: drop-shadow(2px 2px 0 color-mix(in srgb, var(--ink) 22%, transparent)); }
[data-swatch="day-classic"] { --sw-bg: #f4f2ec; --sw-surface: #fffefa; --sw-ink: #233c36; --sw-accent: #35765b; --sw-line: #d8dfd4; }
[data-swatch="day-warm"] { --sw-bg: #f6eee3; --sw-surface: #fffbf5; --sw-ink: #554032; --sw-accent: #987052; --sw-line: #e0cbb8; }
[data-swatch="day-morning-sky"] { --sw-bg: #f3f8f9; --sw-img: url("/assets/378c374f63b9dfd485703aefbcb0aa66ce52a03184c04d54c210bb953d948dcf/morning-sky.svg"), url("/assets/221e959e203c4e60a6c7ab8d24842c64e0fcef0669de5609c4353ee72485dd63/morning-clouds.webp"); --sw-size: 165% auto; --sw-at: 88% 34%; --sw-surface: #fffdf7; --sw-ink: #293e50; --sw-accent: #27465e; --sw-line: #cfdae0; }
[data-swatch="day-first-light"] { --sw-bg: #f3ede2; --sw-img: url("/assets/c5f78c457fdc771ab861be09bf6b37934beb63c000bc6d350ff65540adf91334/first-light.svg"); --sw-size: 130% auto; --sw-at: 60% 28%; --sw-surface: #fffaf5; --sw-ink: #48443c; --sw-accent: #784a30; --sw-line: #e3d8c7; }
[data-swatch="day-grass-block"] { --sw-bg: #9ccbf3; --sw-img: url("/assets/6a187ec3655f793652675470135d45940d71b8c70f6af656c64cf4e42da41230/grass-block-day.svg"); --sw-size: 100% auto; --sw-at: center 22%; --sw-surface: #fbf6e9; --sw-ink: #2d2620; --sw-accent: #3a7d22; --sw-line: #c9b997; image-rendering: pixelated; }
[data-swatch="day-picnic"] { --sw-bg: #fbe9d6; --sw-img: url("/assets/c2e0083e1c9d981941c3347cf6ec11a7099ac5426b363f6cfcfa553f291b573e/picnic-day.svg"); --sw-size: 24px; --sw-surface: #fff7e8; --sw-ink: #4a2f22; --sw-accent: #c2506a; --sw-line: #ecd0ae; background-repeat: repeat; image-rendering: pixelated; }
[data-swatch="night-classic"] { --sw-bg: #111c2a; --sw-surface: #192638; --sw-ink: #edece7; --sw-accent: #d8bd8b; --sw-line: #334156; }
[data-swatch="night-starry"] { --sw-bg: #080f20; --sw-img: radial-gradient(1px 1px at 18% 30%, #fff, transparent), radial-gradient(1px 1px at 72% 12%, #fff, transparent), radial-gradient(1px 1px at 40% 58%, #fffde8, transparent), radial-gradient(1px 1px at 88% 46%, #dbe6ff, transparent), radial-gradient(1px 1px at 60% 36%, #fff, transparent), radial-gradient(1px 1px at 8% 52%, #fff, transparent), radial-gradient(ellipse at 65% 12%, #24385b, transparent 65%); --sw-size: 100% 100%; --sw-surface: #111c32; --sw-ink: #eef2fb; --sw-accent: #b8c9f4; --sw-line: #2d3d59; }
[data-swatch="night-city-lights"] { --sw-bg: #0b1020; --sw-img: url("/assets/af41d86cb656bf71df3c42dc5c3e01a126838972d9f0eb2c0af53e9ca3343c39/city-lights.svg"); --sw-size: cover; --sw-at: center bottom; --sw-surface: #151b31; --sw-ink: #f2efe8; --sw-accent: #f2c27b; --sw-line: #2e3452; }
/* City Lights keeps its skyline in view: the section card sits lower and lighter. */
[data-swatch="night-city-lights"] i:nth-child(5) { top: 90%; }
[data-swatch="night-midnight-violet"] { --sw-bg: #1f2029; --sw-surface: #2a2b37; --sw-ink: #f8f8f2; --sw-accent: #ff79c6; --sw-line: #3d4052; }
[data-swatch="night-grass-block"] { --sw-bg: #141a38; --sw-img: url("/assets/188f961789baf68b512fed4658deb46aeb7477ceafbb7f58436a79e9537c2271/grass-block-night.svg"); --sw-size: 100% auto; --sw-at: center 22%; --sw-surface: #262b45; --sw-ink: #eef0f8; --sw-accent: #7650c4; --sw-line: #444b70; image-rendering: pixelated; }
[data-swatch="night-picnic"] { --sw-bg: #271d3a; --sw-img: url("/assets/df77ee7b04df139ce7afe6f68c94b9e9f3c0fb41833cea8d453b45e0ba3e93a4/picnic-night.svg"); --sw-size: 24px; --sw-surface: #362a4c; --sw-ink: #f8eeff; --sw-accent: #b796ec; --sw-line: #54446e; background-repeat: repeat; image-rendering: pixelated; }
#color-scheme-form noscript, #color-scheme-feedback { grid-column: 1 / -1; }
.toolbar-row .menu-panel { max-height: calc(100svh - 100px); overflow-y: auto; overscroll-behavior-y: contain; }
#color-scheme-feedback { font-size: .75rem; overflow-wrap: anywhere; }
#color-scheme-feedback:empty { display: none; }
@media (max-width: 700px) { #prefs-menu { position: static; } #prefs-menu > .menu-panel { left: 16px; right: 16px; top: calc(100% + 8px); width: auto; } }
@media (max-width: 360px) { #prefs-menu .scheme-card { font-size: 11px; } .scheme-picker { gap: 8px 6px; } }