/* Edisto Art Gallery: shared styles for every page. Tailwind (CDN) handles layout utilities;
   this file holds the theme, the paintbrush cursor, and the art-world treatments (frames, prints, posters). */
:root {
  --foam: #EEF4F5;      /* sea foam: page ground */
  --tide: #DCE8EA;      /* pale tide: walls and surfaces */
  --navy: #1E2D44;      /* deep navy: text, dark bands, buttons */
  --gold: #C9A050;      /* antique gold: highlights */
  --mist: #5E7286;      /* secondary text */
  --paper: #FBFDFD;     /* mats and printed photos */
  --poster: #FBF8EF;    /* screen-print posters */
  --card: #FBFDFD;      /* form fields, round buttons */
  --band: #1E2D44;      /* dark bands (footer, homepage About) */
  --on-band: #FBFDFD;   /* text on the dark bands */
  --btn-bg: #1E2D44;
  --btn-fg: #FBFDFD;
  --hero-top: #F7FBFC;
  --wall-glow: rgba(255,255,255,.65);
  --grain-blend: multiply;
  --grain-opacity: .07;
  --dot: #C8442F;       /* the red "sold" dot galleries stick beside a label */
  color-scheme: dark;
  --spring: cubic-bezier(.34, 1.4, .64, 1);
  /* paper grain: a PNG noise tile (iPhone Safari drew the old SVG-filter tile as one square, top left) */
  --grain: url("/assets/grain.png");
  /* the same specks pre-faded, used as a plain background layer: a blended overlay on top of the hero
     made iPhone browsers (Safari and Firefox) paint a flat box over the header text, top left */
  --grain-soft: url("/assets/grain-soft.png");
  /* layered, navy-tinted shadows for things hung on a wall */
  --hang: 0 1px 1px rgb(var(--shade-rgb) / .08), 0 4px 8px -2px rgb(var(--shade-rgb) / .12), 0 20px 40px -14px rgb(var(--shade-rgb) / .30);
  --hang-up: 0 2px 2px rgb(var(--shade-rgb) / .08), 0 10px 16px -4px rgb(var(--shade-rgb) / .14), 0 32px 56px -18px rgb(var(--shade-rgb) / .38);
}

/* The site is always dark (the artwork pops more on it): these values replace the light ones above
   whatever the visitor's device is set to. To bring back light mode for light devices, wrap this block in
   @media (prefers-color-scheme: dark) { ... } and set color-scheme back to "light dark".
   Same Tidal blue family at night: deep navy walls, sea-foam text, posters and fields as dark cards;
   mats and printed photos stay paper, a little dimmed. */
:root {
  --foam: #0E1823;
  --tide: #142230;
  --navy: #EFE8DA;      /* warm ivory, from the logo's cream paper */
  --gold: #D4AA5A;      /* antique gold, from the logo's lettering */
  --mist: #9FB2BF;
  --paper: #E0DAD0;     /* warm gallery-mat white, a step dimmer than the ivory text */
  --poster: #1A2939;
  --card: #182635;
  --band: #09111A;
  --on-band: #F3EDE1;
  --btn-bg: #EFE8DA;
  --btn-fg: #0E1823;
  --hero-top: #1A2B3C;
  --wall-glow: rgba(120,160,190,.10);
  /* tints used with an opacity: rgb(var(--gold-rgb) / .2). Themes below swap these too. */
  --gold-rgb: 212 170 90;
  --glow-1-rgb: 94 140 170;
  --glow-2-rgb: 120 170 175;
  --shade-rgb: 30 45 68;
  --font-display: 'Gloock', Georgia, serif;
  --font-body: 'Instrument Sans', system-ui, sans-serif;
  --display-weight: 400;
  --grain-blend: soft-light;
  --grain-opacity: .12;
  --hang: 0 1px 1px rgba(0,0,0,.35), 0 4px 8px -2px rgba(0,0,0,.40), 0 20px 40px -14px rgba(0,0,0,.65);
  --hang-up: 0 2px 2px rgba(0,0,0,.35), 0 10px 16px -4px rgba(0,0,0,.45), 0 32px 56px -18px rgba(0,0,0,.75);
}

html { scroll-behavior: smooth; cursor: var(--brush), auto; }
body { background: var(--foam); color: var(--navy); font-family: var(--font-body); line-height: 1.7; -webkit-font-smoothing: antialiased; }
a, button, summary, label, [role="button"] { cursor: var(--brush-loaded), pointer; }
.display { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking, -0.03em); line-height: 1.04; }
.wrap { width: min(1200px, 100% - 2.5rem); margin-inline: auto; }
.muted { color: var(--mist); }
.grain { background-image: var(--grain-soft); }
.skip { position: absolute; left: -999px; top: .5rem; z-index: 50; background: var(--btn-bg); color: var(--btn-fg); padding: .5rem 1rem; border-radius: 4px; }
.skip:focus { left: .5rem; }

/* ---------- interactive states ---------- */
.link { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: .22em; text-decoration-thickness: 1px; transition: text-decoration-color .2s ease, opacity .2s ease; }
.link:hover { text-decoration-color: currentColor; }
.link:active { opacity: .7; }
.social { display: inline-flex; padding: 2px; color: inherit; opacity: .85; transition: opacity .2s ease, transform .25s cubic-bezier(.34,1.56,.64,1); }
.social:hover { opacity: 1; transform: translateY(-2px); }
.social:active { opacity: .7; transform: translateY(0); }
.logo { display: block; width: 230px; border-radius: 1px; box-shadow: var(--hang); transition: transform .35s var(--spring); }
.logo img { display: block; width: 100%; height: auto; }
.logo:hover { transform: translateY(-2px); }
.logo:active { transform: translateY(0); }
@media (min-width: 768px) { .logo { width: 290px; } }
.badge { display: block; width: 88px; height: auto; border-radius: 50%; box-shadow: var(--hang); }
.nav a[aria-current="page"] { text-decoration-color: var(--gold); text-decoration-thickness: 2px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; border-radius: 2px; }
.on-dark a:focus-visible, .on-dark button:focus-visible { outline-color: var(--gold); }
.btn { display: inline-flex; align-items: center; gap: .5rem; padding: .85rem 1.4rem; border-radius: 999px; font-weight: 500; line-height: 1; transition: transform .35s var(--spring), opacity .2s ease; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.97); }
.btn-navy { background: var(--btn-bg); color: var(--btn-fg); box-shadow: 0 1px 2px rgb(var(--shade-rgb) / .3), 0 12px 24px -12px rgb(var(--shade-rgb) / .55); }
.btn-gold { background: var(--gold); color: var(--btn-fg); box-shadow: 0 1px 2px rgb(var(--shade-rgb) / .25), 0 10px 24px -10px rgb(var(--gold-rgb) / .6); }
.btn-line { color: var(--navy); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--navy) 35%, transparent); }
.btn-line:hover { box-shadow: inset 0 0 0 1px var(--navy); }

/* ---------- frames ---------- */
.piece { display: flex; flex-direction: column; gap: 1rem; }
.piece img { display: block; width: 100%; height: auto; }
.frame-gilt { padding: clamp(10px, 1.4vw, 18px); background: linear-gradient(135deg, #E9D7A0 0%, #B89443 22%, #F2E3B4 40%, #9C7A2E 62%, #D4B566 82%, #85682A 100%); box-shadow: var(--hang), inset 0 0 0 1px rgb(var(--shade-rgb) / .3); }
.frame-gilt img { box-shadow: 0 0 0 3px #5E4A1E, inset 0 0 0 1px rgba(0,0,0,.2); }
.frame-mat { padding: 6px; background: #22252B; box-shadow: var(--hang); }
.frame-mat > div { padding: 14%; background: var(--paper); box-shadow: inset 1px 1px 3px rgb(var(--shade-rgb) / .25); }
.frame-float { padding: 5px; background: #23262C; box-shadow: var(--hang); }
.frame-float > div { padding: 14px; background: #15171B; }
.frame-float img { box-shadow: 0 6px 14px rgba(0,0,0,.55); }
.frame-wood { padding: clamp(8px, 1vw, 12px); background: linear-gradient(160deg, #6B5442, #463427 55%, #5C4635); box-shadow: var(--hang); }
.frame-white { padding: clamp(10px, 4%, 22px); background: var(--paper); box-shadow: var(--hang), inset 0 0 0 1px rgb(var(--shade-rgb) / .08); }
.frame-white img { box-shadow: inset 0 0 0 1px rgb(var(--shade-rgb) / .08); }
.object-hung img { filter: drop-shadow(0 2px 2px rgb(var(--shade-rgb) / .2)) drop-shadow(0 16px 20px rgb(var(--shade-rgb) / .28)); }
/* hover lift for frames that are links: shadow swap by opacity on a pseudo layer, so only opacity + transform animate */
.lift { position: relative; display: block; transition: transform .45s var(--spring); }
.lift::after { content: ""; position: absolute; inset: 0; box-shadow: var(--hang-up); opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.lift:hover, a:hover > .lift, button:hover > .lift { transform: translateY(-4px); }
.lift:hover::after, a:hover > .lift::after, button:hover > .lift::after { opacity: 1; }
a:active > .lift, button:active > .lift { transform: translateY(-1px) scale(.99); }

/* museum wall label */
.label { font-size: .875rem; line-height: 1.5; max-width: 30ch; }
.label strong { font-weight: 600; display: block; }
.label em { font-style: italic; display: block; }
.label span { color: var(--mist); display: block; }
.label .sold, .sold { display: inline-flex; align-items: center; gap: .4rem; color: var(--navy); font-weight: 500; }
.label .sold::before, .sold::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--dot); box-shadow: 0 0 0 1px rgba(0,0,0,.08); }

/* ---------- deckle-edged print and studio tape ---------- */
.deckle { position: relative; padding: 7%; }
.deckle::before { content: ""; position: absolute; inset: 0; background: var(--paper); filter: url(#deckle); box-shadow: 0 2px 4px rgb(var(--shade-rgb) / .18), 0 24px 48px -16px rgb(var(--shade-rgb) / .42); }
.deckle img { position: relative; display: block; width: 100%; height: auto; }
.tape { position: absolute; width: 34%; max-width: 120px; height: 26px; background: rgba(226,214,170,.72); box-shadow: 0 1px 2px rgb(var(--shade-rgb) / .15); z-index: 2; clip-path: polygon(2% 10%, 98% 0, 100% 88%, 0 100%); }

/* ---------- oval portrait (miniature) ---------- */
.cameo { padding: 12px; border-radius: 50%; background: linear-gradient(135deg, #E9D7A0, #B89443 30%, #F2E3B4 50%, #9C7A2E 75%, #D4B566); box-shadow: var(--hang); }
.cameo > div { border-radius: 50%; overflow: hidden; padding: 10px; background: var(--paper); }
.cameo img { border-radius: 50%; display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* ---------- screen-print posters ---------- */
.poster { position: relative; background: var(--poster); color: var(--navy); box-shadow: var(--hang); overflow: hidden; }
.poster::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: calc(var(--grain-opacity) * 2.2); mix-blend-mode: var(--grain-blend); pointer-events: none; }
.misreg { text-shadow: 3px 2px 0 rgb(var(--gold-rgb) / .95); }

/* ---------- watercolor wash ---------- */
.wash { position: absolute; inset: -10%; filter: url(#bleed); opacity: .9;
  -webkit-mask-image: linear-gradient(to bottom, transparent 8%, #000 30%, #000 85%, transparent);
          mask-image: linear-gradient(to bottom, transparent 8%, #000 30%, #000 85%, transparent);
  background:
    radial-gradient(38% 42% at 22% 35%, rgb(var(--glow-1-rgb) / .32), transparent 70%),
    radial-gradient(30% 36% at 70% 28%, rgb(var(--gold-rgb) / .26), transparent 70%),
    radial-gradient(42% 40% at 60% 78%, rgb(var(--glow-2-rgb) / .30), transparent 70%),
    radial-gradient(25% 30% at 12% 85%, rgb(var(--gold-rgb) / .16), transparent 70%); }

/* ---------- lightbox ---------- */
.lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: color-mix(in srgb, var(--foam) 97%, transparent); color: var(--navy); }
.lightbox::backdrop { background: rgb(var(--shade-rgb) / .35); }
.lightbox[open] .lb-figure { animation: lb-in .4s var(--spring); }
@keyframes lb-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.lb-figure img { max-height: calc(100dvh - 12rem); width: auto; max-width: 100%; margin-inline: auto; display: block; }
.lb-btn { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--card); color: var(--navy); box-shadow: var(--hang); transition: transform .35s var(--spring); }
.lb-btn:hover { transform: scale(1.06); }
.lb-btn:active { transform: scale(.94); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .link, .social, .lift, .lift::after, .lb-btn { transition: none; }
  .lightbox[open] .lb-figure { animation: none; }
}

/* ---------- flyers pinned to the wall ---------- */
.flyer { position: relative; display: block; padding: 10px; background: var(--paper); box-shadow: var(--hang); }
.flyer img { display: block; width: 100%; height: auto; }
.pin { position: absolute; top: -9px; left: 50%; z-index: 2; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #EED494, var(--gold) 45%, #9A7430); box-shadow: 0 3px 4px rgb(var(--shade-rgb) / .35); }
.highlights li { position: relative; padding-left: 1.4rem; }
.highlights li::before { content: ""; position: absolute; left: 0; top: .7em; width: .55rem; height: .55rem; border-radius: 50%; background: var(--gold); }
.poster { transition: transform .45s var(--spring), box-shadow .3s ease; }
.poster-link:hover .poster { transform: translateY(-4px); box-shadow: var(--hang-up); }
.poster-link:active .poster { transform: translateY(-1px) scale(.99); }
@media (prefers-reduced-motion: reduce) { .poster { transition: none; } }

/* ---------- gallery tiles ---------- */
.tile-img { transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.group:hover .tile-img { transform: scale(1.03); }
.group:active .tile-img { transform: scale(1.01); }

/* ---------- contact form ---------- */
.field { margin-top: .5rem; display: block; width: 100%; border-radius: 3px; border: 1px solid color-mix(in srgb, var(--navy) 25%, transparent); background: var(--card); padding: .75rem 1rem; font-size: 1rem; font-weight: 400; color: var(--navy); box-shadow: inset 0 1px 2px rgb(var(--shade-rgb) / .06); }
.field:hover { border-color: color-mix(in srgb, var(--navy) 45%, transparent); }
.field:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgb(var(--gold-rgb) / .45); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.btn:disabled { opacity: .6; transform: none; }
@media (prefers-reduced-motion: reduce) { .tile-img { transition: none; } }

/* ---------- shared surfaces ---------- */
.band { background: var(--band); color: color-mix(in srgb, var(--on-band) 88%, transparent); }
.on-band { color: var(--on-band); }
.bg-page { background: var(--foam); }
.rule-t { border-top: 1px solid color-mix(in srgb, var(--navy) 15%, transparent); }

/* ---------- artist sign-in editor (/artist/) ---------- */
.ed-card { background: var(--card); border-radius: 4px; box-shadow: 0 1px 2px rgb(var(--shade-rgb) / .06), 0 10px 24px -14px rgb(var(--shade-rgb) / .28); }
.ed-thumb { aspect-ratio: 4 / 3; background: var(--tide); border-radius: 4px 4px 0 0; overflow: hidden; }
.ed-thumb img { width: 100%; height: 100%; object-fit: contain; }
.ed-headshot { width: 160px; aspect-ratio: 4 / 5; border-radius: 50%; overflow: hidden; box-shadow: var(--hang); background: var(--tide); }
.ed-headshot img { width: 100%; height: 100%; object-fit: cover; }
.ed-file { position: relative; cursor: pointer; }
.ed-file input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ed-file:focus-within { outline: 2px solid var(--navy); outline-offset: 3px; }
.ed-check { width: 1.15rem; height: 1.15rem; accent-color: var(--navy); }
.ed-savebar { position: sticky; bottom: 0; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-inline: -1rem; padding: 1rem; background: color-mix(in srgb, var(--foam) 94%, transparent); backdrop-filter: blur(6px); box-shadow: 0 -1px 0 color-mix(in srgb, var(--navy) 12%, transparent); }
.btn-sm { padding: .55rem .95rem; font-size: .9rem; }
.btn:disabled { opacity: .45; transform: none; pointer-events: none; }
#signout { text-decoration-line: underline; }

/* ---------- 404: an empty frame on the wall ---------- */
.empty-frame { width: min(15rem, 36vw); aspect-ratio: 4 / 5; padding: 14px; background: linear-gradient(135deg, #B88E40, #D4AA5A 40%, #8E6A2A); box-shadow: var(--hang); transform: rotate(-2deg); }
.empty-frame span { display: block; width: 100%; height: 100%; background: var(--tide); box-shadow: inset 0 2px 10px rgba(0,0,0,.45); }

/* ---------- fall themes (trial) ----------
   Picked with the Theme button in the header (theme.js); with no data-theme the site is Tidal, as above.
   Each one is a painted gallery wall: muted, so the artwork reads first, with one fall accent for small details.
   Once Don picks a winner, move its values into :root above and delete this section, the picker and theme.js. */
html[data-mode="light"] {
  color-scheme: light;
  --grain-soft: none;   /* clean painted walls: the speckle reads as dust on a light ground */
  --wall-glow: rgba(255,255,255,.6);
  --grain-blend: multiply;
  --grain-opacity: .07;
  --hang: 0 1px 1px rgb(var(--shade-rgb) / .08), 0 4px 8px -2px rgb(var(--shade-rgb) / .12), 0 20px 40px -14px rgb(var(--shade-rgb) / .28);
  --hang-up: 0 2px 2px rgb(var(--shade-rgb) / .08), 0 10px 16px -4px rgb(var(--shade-rgb) / .14), 0 32px 56px -18px rgb(var(--shade-rgb) / .34);
}

/* Oxblood: the claret wall of an old-master painting room, brass labels */
html[data-theme="oxblood"] {
  --foam: #1C1214; --tide: #261819; --navy: #EFE6DA; --gold: #C2A06A; --mist: #B5A39D;
  --paper: #E2D9CC; --poster: #2B1B1D; --card: #251719; --band: #120B0C; --on-band: #F2EAE0;
  --btn-bg: #EFE6DA; --btn-fg: #1C1214; --hero-top: #2E1C1E; --wall-glow: rgba(210,150,130,.08);
  --gold-rgb: 194 160 106; --glow-1-rgb: 140 52 52; --glow-2-rgb: 176 120 84; --shade-rgb: 0 0 0;
  --font-display: 'Cormorant Garamond', Georgia, serif; --font-body: 'Karla', system-ui, sans-serif; --display-weight: 600;
}
/* Driftwood & Brass: a walnut-paneled study, weathered-wood browns, burnished amber */
html[data-theme="driftwood"] {
  --foam: #18130F; --tide: #211A14; --navy: #EDE3D2; --gold: #C98B4A; --mist: #B0A18D;
  --paper: #E3D9C8; --poster: #271E16; --card: #231B14; --band: #0F0B08; --on-band: #F1E8D8;
  --btn-bg: #EDE3D2; --btn-fg: #18130F; --hero-top: #2A2018; --wall-glow: rgba(220,170,110,.08);
  --gold-rgb: 201 139 74; --glow-1-rgb: 150 104 66; --glow-2-rgb: 196 160 88; --shade-rgb: 0 0 0;
  --font-display: 'Fraunces', Georgia, serif; --font-body: 'Figtree', system-ui, sans-serif; --display-weight: 400;
}
/* Live Oak & Copper: a deep live-oak green wall, copper details, a faint marsh-gold glow */
html[data-theme="liveoak"] {
  --foam: #111915; --tide: #17221C; --navy: #ECE7DC; --gold: #C8834F; --mist: #A0B1A5;
  --paper: #E0DACD; --poster: #1B2A22; --card: #19251F; --band: #0A100D; --on-band: #F0EBE0;
  --btn-bg: #ECE7DC; --btn-fg: #111915; --hero-top: #1D2B23; --wall-glow: rgba(150,190,160,.08);
  --gold-rgb: 200 131 79; --glow-1-rgb: 74 116 90; --glow-2-rgb: 200 165 90; --shade-rgb: 0 0 0;
  --font-display: 'Bodoni Moda', Georgia, serif; --font-body: 'Jost', system-ui, sans-serif; --display-weight: 500; --display-tracking: -0.01em;
}
/* Oyster Shell & Red Cedar: a cool oyster-shell white wall, pluff-mud ink, red-cedar details */
html[data-theme="oyster"] {
  --foam: #ECEAE5; --tide: #E1DED7; --navy: #2A2622; --gold: #7E3A2A; --mist: #645D56;
  --paper: #FAF9F6; --poster: #F4F2ED; --card: #F8F7F3; --band: #2A2622; --on-band: #F1EEE8;
  --btn-bg: #2A2622; --btn-fg: #F8F7F3; --hero-top: #F6F5F1;
  --gold-rgb: 126 58 42; --glow-1-rgb: 140 156 166; --glow-2-rgb: 186 150 110; --shade-rgb: 42 38 34;
  --font-display: 'DM Serif Display', Georgia, serif; --font-body: 'Manrope', system-ui, sans-serif; --display-weight: 400;
}
/* Marsh Grass: a pale sage wall, deep olive ink, the gold of the fall spartina marsh */
html[data-theme="marsh"] {
  --foam: #EEF0E8; --tide: #E2E6DA; --navy: #26301F; --gold: #8A6220; --mist: #5B6454;
  --paper: #FBFBF7; --poster: #F4F5EE; --card: #F8F9F4; --band: #26301F; --on-band: #F0F2EA;
  --btn-bg: #26301F; --btn-fg: #F8F9F4; --hero-top: #F7F8F3;
  --gold-rgb: 190 146 60; --glow-1-rgb: 128 150 108; --glow-2-rgb: 200 164 84; --shade-rgb: 38 48 31;
  --font-display: 'Newsreader', Georgia, serif; --font-body: 'Public Sans', system-ui, sans-serif; --display-weight: 500;
}
/* Gallery White & Plum: a crisp white cube, charcoal ink, aubergine details */
html[data-theme="plum"] {
  --foam: #F7F5F2; --tide: #EDEAE5; --navy: #222024; --gold: #6E3B4E; --mist: #625D66;
  --paper: #FFFFFF; --poster: #F2EFEB; --card: #FFFFFF; --band: #222024; --on-band: #F4F2EF;
  --btn-bg: #222024; --btn-fg: #FFFFFF; --hero-top: #FFFFFF; --wall-glow: rgba(255,255,255,.75);
  --gold-rgb: 110 59 78; --glow-1-rgb: 150 112 132; --glow-2-rgb: 196 168 128; --shade-rgb: 34 32 36;
  --font-display: 'Gilda Display', Georgia, serif; --font-body: 'Hanken Grotesk', system-ui, sans-serif; --display-weight: 400;
}

/* ---------- Theme picker (header) ---------- */
.theme-pick { position: absolute; top: 1.5rem; right: 0; z-index: 30; }
@media (min-width: 768px) { .theme-pick { position: relative; top: auto; right: auto; } }
.theme-btn { display: inline-flex; align-items: center; gap: .45rem; height: 2.5rem; padding: 0 .8rem; border-radius: 999px; color: var(--navy);
  font-size: .9rem; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--navy) 28%, transparent); transition: transform .35s var(--spring), opacity .2s ease; }
.theme-btn:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--navy) 60%, transparent); }
.theme-btn:active { transform: scale(.95); }
.theme-btn[aria-expanded="true"] { box-shadow: inset 0 0 0 1px var(--gold); }
@media (max-width: 767px) { .theme-btn { width: 2.5rem; padding: 0; justify-content: center; } .theme-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
.theme-menu { position: absolute; right: 0; top: calc(100% + .6rem); width: min(19rem, calc(100vw - 2.5rem)); padding: .6rem; border-radius: 10px;
  background: var(--card); color: var(--navy); box-shadow: var(--hang-up), 0 0 0 1px color-mix(in srgb, var(--navy) 10%, transparent); transform-origin: top right; }
.theme-menu:not([hidden]) { animation: theme-in .3s var(--spring); }
@keyframes theme-in { from { opacity: 0; transform: translateY(-4px) scale(.97); } to { opacity: 1; transform: none; } }
.theme-menu h3 { padding: .5rem .6rem .25rem; font-size: .8rem; color: var(--mist); }
.theme-opt { display: flex; width: 100%; align-items: center; gap: .75rem; padding: .5rem .6rem; border-radius: 6px; text-align: left; line-height: 1.2; transition: transform .25s var(--spring), opacity .2s ease; }
.theme-opt:hover { background: color-mix(in srgb, var(--navy) 7%, transparent); }
.theme-opt:active { transform: scale(.98); }
.theme-opt[aria-pressed="true"] { background: color-mix(in srgb, var(--gold) 16%, transparent); }
.theme-opt .name { flex: 1; font-size: 1.15rem; }
.theme-opt .tick { width: 1rem; color: var(--gold); opacity: 0; }
.theme-opt[aria-pressed="true"] .tick { opacity: 1; }
.chips { display: flex; flex-shrink: 0; }
.chips i { width: 1.1rem; height: 1.1rem; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--card), inset 0 0 0 1px rgba(0,0,0,.15); }
.chips i + i { margin-left: -.3rem; }
.theme-note { padding: .5rem .6rem .3rem; font-size: .78rem; line-height: 1.45; color: var(--mist); }
@media (prefers-reduced-motion: reduce) { .theme-btn, .theme-opt { transition: none; } .theme-menu:not([hidden]) { animation: none; } }

/* ---------- wall (shared) ---------- */
.wall { background: radial-gradient(70% 50% at 50% 0%, var(--wall-glow), transparent 70%), radial-gradient(50% 40% at 0% 100%, rgb(var(--glow-1-rgb) / .10), transparent 70%), var(--tide); }

:root { --brush: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2732%27 height=%2732%27 viewBox=%270 0 32 32%27%3E%3Cg transform=%27translate%282.6 29.4%29 rotate%28-45%29 scale%28.85%29%27%3E%3Cg fill=%27%23fff%27 stroke=%27%23fff%27 stroke-width=%272.6%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M17.2-2.1C24-2.6 30-3.9 36-3.7 41-3.5 44-1.6 44 0S41 3.5 36 3.7C30 3.9 24 2.6 17.2 2.1Z%27/%3E%3Cpath d=%27M13.4-3.1h2.6v6.2h-2.6Z%27/%3E%3Cpath d=%27M0 0C1.6-.9 2.6-2.6 3.6-4.2 5.6-7.2 9.8-7 12.6-4.4V4.4C9.8 7 5.2 6.6 3 3.8 2 2.4 1.2 1 0 0Z%27/%3E%3C/g%3E%3Cpath d=%27M17.2-2.1C24-2.6 30-3.9 36-3.7 41-3.5 44-1.6 44 0S41 3.5 36 3.7C30 3.9 24 2.6 17.2 2.1Z%27 fill=%27%231E2D44%27/%3E%3Cpath d=%27M13.4-3.1h2.6v6.2h-2.6Z%27 fill=%27%23A9B4BF%27/%3E%3Cpath d=%27M0 0C1.6-.9 2.6-2.6 3.6-4.2 5.6-7.2 9.8-7 12.6-4.4V4.4C9.8 7 5.2 6.6 3 3.8 2 2.4 1.2 1 0 0Z%27 fill=%27%23D8B47C%27/%3E%3Cpath d=%27M0 0C1.6-.9 2.6-2.6 3.6-4.2 4.2-5.1 5-5.8 5.8-6.2V6.1C4.6 5.7 3.7 4.9 3 3.8 2 2.4 1.2 1 0 0Z%27 fill=%27%231E2D44%27/%3E%3C/g%3E%3C/svg%3E") 3 29; --brush-loaded: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2732%27 height=%2732%27 viewBox=%270 0 32 32%27%3E%3Cg transform=%27translate%282.6 29.4%29 rotate%28-45%29 scale%28.85%29%27%3E%3Cg fill=%27%23fff%27 stroke=%27%23fff%27 stroke-width=%272.6%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M17.2-2.1C24-2.6 30-3.9 36-3.7 41-3.5 44-1.6 44 0S41 3.5 36 3.7C30 3.9 24 2.6 17.2 2.1Z%27/%3E%3Cpath d=%27M13.4-3.1h2.6v6.2h-2.6Z%27/%3E%3Cpath d=%27M0 0C1.6-.9 2.6-2.6 3.6-4.2 5.6-7.2 9.8-7 12.6-4.4V4.4C9.8 7 5.2 6.6 3 3.8 2 2.4 1.2 1 0 0Z%27/%3E%3C/g%3E%3Cpath d=%27M17.2-2.1C24-2.6 30-3.9 36-3.7 41-3.5 44-1.6 44 0S41 3.5 36 3.7C30 3.9 24 2.6 17.2 2.1Z%27 fill=%27%231E2D44%27/%3E%3Cpath d=%27M13.4-3.1h2.6v6.2h-2.6Z%27 fill=%27%23A9B4BF%27/%3E%3Cpath d=%27M0 0C1.6-.9 2.6-2.6 3.6-4.2 5.6-7.2 9.8-7 12.6-4.4V4.4C9.8 7 5.2 6.6 3 3.8 2 2.4 1.2 1 0 0Z%27 fill=%27%23D8B47C%27/%3E%3Cpath d=%27M0 0C1.6-.9 2.6-2.6 3.6-4.2 4.2-5.1 5-5.8 5.8-6.2V6.1C4.6 5.7 3.7 4.9 3 3.8 2 2.4 1.2 1 0 0Z%27 fill=%27%23D4AA5A%27/%3E%3C/g%3E%3C/svg%3E") 3 29; }

html[data-theme="oxblood"] { --brush: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2732%27 height=%2732%27 viewBox=%270 0 32 32%27%3E%3Cg transform=%27translate%282.6 29.4%29 rotate%28-45%29 scale%28.85%29%27%3E%3Cg fill=%27%23fff%27 stroke=%27%23fff%27 stroke-width=%272.6%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M17.2-2.1C24-2.6 30-3.9 36-3.7 41-3.5 44-1.6 44 0S41 3.5 36 3.7C30 3.9 24 2.6 17.2 2.1Z%27/%3E%3Cpath d=%27M13.4-3.1h2.6v6.2h-2.6Z%27/%3E%3Cpath d=%27M0 0C1.6-.9 2.6-2.6 3.6-4.2 5.6-7.2 9.8-7 12.6-4.4V4.4C9.8 7 5.2 6.6 3 3.8 2 2.4 1.2 1 0 0Z%27/%3E%3C/g%3E%3Cpath d=%27M17.2-2.1C24-2.6 30-3.9 36-3.7 41-3.5 44-1.6 44 0S41 3.5 36 3.7C30 3.9 24 2.6 17.2 2.1Z%27 fill=%27%234A1F24%27/%3E%3Cpath d=%27M13.4-3.1h2.6v6.2h-2.6Z%27 fill=%27%23A9B4BF%27/%3E%3Cpath d=%27M0 0C1.6-.9 2.6-2.6 3.6-4.2 5.6-7.2 9.8-7 12.6-4.4V4.4C9.8 7 5.2 6.6 3 3.8 2 2.4 1.2 1 0 0Z%27 fill=%27%23D8B47C%27/%3E%3Cpath d=%27M0 0C1.6-.9 2.6-2.6 3.6-4.2 4.2-5.1 5-5.8 5.8-6.2V6.1C4.6 5.7 3.7 4.9 3 3.8 2 2.4 1.2 1 0 0Z%27 fill=%27%234A1F24%27/%3E%3C/g%3E%3C/svg%3E") 3 29; --brush-loaded: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2732%27 height=%2732%27 viewBox=%270 0 32 32%27%3E%3Cg transform=%27translate%282.6 29.4%29 rotate%28-45%29 scale%28.85%29%27%3E%3Cg fill=%27%23fff%27 stroke=%27%23fff%27 stroke-width=%272.6%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M17.2-2.1C24-2.6 30-3.9 36-3.7 41-3.5 44-1.6 44 0S41 3.5 36 3.7C30 3.9 24 2.6 17.2 2.1Z%27/%3E%3Cpath d=%27M13.4-3.1h2.6v6.2h-2.6Z%27/%3E%3Cpath d=%27M0 0C1.6-.9 2.6-2.6 3.6-4.2 5.6-7.2 9.8-7 12.6-4.4V4.4C9.8 7 5.2 6.6 3 3.8 2 2.4 1.2 1 0 0Z%27/%3E%3C/g%3E%3Cpath d=%27M17.2-2.1C24-2.6 30-3.9 36-3.7 41-3.5 44-1.6 44 0S41 3.5 36 3.7C30 3.9 24 2.6 17.2 2.1Z%27 fill=%27%234A1F24%27/%3E%3Cpath d=%27M13.4-3.1h2.6v6.2h-2.6Z%27 fill=%27%23A9B4BF%27/%3E%3Cpath d=%27M0 0C1.6-.9 2.6-2.6 3.6-4.2 5.6-7.2 9.8-7 12.6-4.4V4.4C9.8 7 5.2 6.6 3 3.8 2 2.4 1.2 1 0 0Z%27 fill=%27%23D8B47C%27/%3E%3Cpath d=%27M0 0C1.6-.9 2.6-2.6 3.6-4.2 4.2-5.1 5-5.8 5.8-6.2V6.1C4.6 5.7 3.7 4.9 3 3.8 2 2.4 1.2 1 0 0Z%27 fill=%27%23C2A06A%27/%3E%3C/g%3E%3C/svg%3E") 3 29; }
html[data-theme="driftwood"] { --brush: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2732%27 height=%2732%27 viewBox=%270 0 32 32%27%3E%3Cg transform=%27translate%282.6 29.4%29 rotate%28-45%29 scale%28.85%29%27%3E%3Cg fill=%27%23fff%27 stroke=%27%23fff%27 stroke-width=%272.6%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M17.2-2.1C24-2.6 30-3.9 36-3.7 41-3.5 44-1.6 44 0S41 3.5 36 3.7C30 3.9 24 2.6 17.2 2.1Z%27/%3E%3Cpath d=%27M13.4-3.1h2.6v6.2h-2.6Z%27/%3E%3Cpath d=%27M0 0C1.6-.9 2.6-2.6 3.6-4.2 5.6-7.2 9.8-7 12.6-4.4V4.4C9.8 7 5.2 6.6 3 3.8 2 2.4 1.2 1 0 0Z%27/%3E%3C/g%3E%3Cpath d=%27M17.2-2.1C24-2.6 30-3.9 36-3.7 41-3.5 44-1.6 44 0S41 3.5 36 3.7C30 3.9 24 2.6 17.2 2.1Z%27 fill=%27%233B2A1E%27/%3E%3Cpath d=%27M13.4-3.1h2.6v6.2h-2.6Z%27 fill=%27%23A9B4BF%27/%3E%3Cpath d=%27M0 0C1.6-.9 2.6-2.6 3.6-4.2 5.6-7.2 9.8-7 12.6-4.4V4.4C9.8 7 5.2 6.6 3 3.8 2 2.4 1.2 1 0 0Z%27 fill=%27%23D8B47C%27/%3E%3Cpath d=%27M0 0C1.6-.9 2.6-2.6 3.6-4.2 4.2-5.1 5-5.8 5.8-6.2V6.1C4.6 5.7 3.7 4.9 3 3.8 2 2.4 1.2 1 0 0Z%27 fill=%27%233B2A1E%27/%3E%3C/g%3E%3C/svg%3E") 3 29; --brush-loaded: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2732%27 height=%2732%27 viewBox=%270 0 32 32%27%3E%3Cg transform=%27translate%282.6 29.4%29 rotate%28-45%29 scale%28.85%29%27%3E%3Cg fill=%27%23fff%27 stroke=%27%23fff%27 stroke-width=%272.6%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M17.2-2.1C24-2.6 30-3.9 36-3.7 41-3.5 44-1.6 44 0S41 3.5 36 3.7C30 3.9 24 2.6 17.2 2.1Z%27/%3E%3Cpath d=%27M13.4-3.1h2.6v6.2h-2.6Z%27/%3E%3Cpath d=%27M0 0C1.6-.9 2.6-2.6 3.6-4.2 5.6-7.2 9.8-7 12.6-4.4V4.4C9.8 7 5.2 6.6 3 3.8 2 2.4 1.2 1 0 0Z%27/%3E%3C/g%3E%3Cpath d=%27M17.2-2.1C24-2.6 30-3.9 36-3.7 41-3.5 44-1.6 44 0S41 3.5 36 3.7C30 3.9 24 2.6 17.2 2.1Z%27 fill=%27%233B2A1E%27/%3E%3Cpath d=%27M13.4-3.1h2.6v6.2h-2.6Z%27 fill=%27%23A9B4BF%27/%3E%3Cpath d=%27M0 0C1.6-.9 2.6-2.6 3.6-4.2 5.6-7.2 9.8-7 12.6-4.4V4.4C9.8 7 5.2 6.6 3 3.8 2 2.4 1.2 1 0 0Z%27 fill=%27%23D8B47C%27/%3E%3Cpath d=%27M0 0C1.6-.9 2.6-2.6 3.6-4.2 4.2-5.1 5-5.8 5.8-6.2V6.1C4.6 5.7 3.7 4.9 3 3.8 2 2.4 1.2 1 0 0Z%27 fill=%27%23C98B4A%27/%3E%3C/g%3E%3C/svg%3E") 3 29; }
html[data-theme="liveoak"] { --brush: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2732%27 height=%2732%27 viewBox=%270 0 32 32%27%3E%3Cg transform=%27translate%282.6 29.4%29 rotate%28-45%29 scale%28.85%29%27%3E%3Cg fill=%27%23fff%27 stroke=%27%23fff%27 stroke-width=%272.6%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M17.2-2.1C24-2.6 30-3.9 36-3.7 41-3.5 44-1.6 44 0S41 3.5 36 3.7C30 3.9 24 2.6 17.2 2.1Z%27/%3E%3Cpath d=%27M13.4-3.1h2.6v6.2h-2.6Z%27/%3E%3Cpath d=%27M0 0C1.6-.9 2.6-2.6 3.6-4.2 5.6-7.2 9.8-7 12.6-4.4V4.4C9.8 7 5.2 6.6 3 3.8 2 2.4 1.2 1 0 0Z%27/%3E%3C/g%3E%3Cpath d=%27M17.2-2.1C24-2.6 30-3.9 36-3.7 41-3.5 44-1.6 44 0S41 3.5 36 3.7C30 3.9 24 2.6 17.2 2.1Z%27 fill=%27%231F3326%27/%3E%3Cpath d=%27M13.4-3.1h2.6v6.2h-2.6Z%27 fill=%27%23A9B4BF%27/%3E%3Cpath d=%27M0 0C1.6-.9 2.6-2.6 3.6-4.2 5.6-7.2 9.8-7 12.6-4.4V4.4C9.8 7 5.2 6.6 3 3.8 2 2.4 1.2 1 0 0Z%27 fill=%27%23D8B47C%27/%3E%3Cpath d=%27M0 0C1.6-.9 2.6-2.6 3.6-4.2 4.2-5.1 5-5.8 5.8-6.2V6.1C4.6 5.7 3.7 4.9 3 3.8 2 2.4 1.2 1 0 0Z%27 fill=%27%231F3326%27/%3E%3C/g%3E%3C/svg%3E") 3 29; --brush-loaded: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2732%27 height=%2732%27 viewBox=%270 0 32 32%27%3E%3Cg transform=%27translate%282.6 29.4%29 rotate%28-45%29 scale%28.85%29%27%3E%3Cg fill=%27%23fff%27 stroke=%27%23fff%27 stroke-width=%272.6%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M17.2-2.1C24-2.6 30-3.9 36-3.7 41-3.5 44-1.6 44 0S41 3.5 36 3.7C30 3.9 24 2.6 17.2 2.1Z%27/%3E%3Cpath d=%27M13.4-3.1h2.6v6.2h-2.6Z%27/%3E%3Cpath d=%27M0 0C1.6-.9 2.6-2.6 3.6-4.2 5.6-7.2 9.8-7 12.6-4.4V4.4C9.8 7 5.2 6.6 3 3.8 2 2.4 1.2 1 0 0Z%27/%3E%3C/g%3E%3Cpath d=%27M17.2-2.1C24-2.6 30-3.9 36-3.7 41-3.5 44-1.6 44 0S41 3.5 36 3.7C30 3.9 24 2.6 17.2 2.1Z%27 fill=%27%231F3326%27/%3E%3Cpath d=%27M13.4-3.1h2.6v6.2h-2.6Z%27 fill=%27%23A9B4BF%27/%3E%3Cpath d=%27M0 0C1.6-.9 2.6-2.6 3.6-4.2 5.6-7.2 9.8-7 12.6-4.4V4.4C9.8 7 5.2 6.6 3 3.8 2 2.4 1.2 1 0 0Z%27 fill=%27%23D8B47C%27/%3E%3Cpath d=%27M0 0C1.6-.9 2.6-2.6 3.6-4.2 4.2-5.1 5-5.8 5.8-6.2V6.1C4.6 5.7 3.7 4.9 3 3.8 2 2.4 1.2 1 0 0Z%27 fill=%27%23C8834F%27/%3E%3C/g%3E%3C/svg%3E") 3 29; }
html[data-theme="oyster"] { --brush: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2732%27 height=%2732%27 viewBox=%270 0 32 32%27%3E%3Cg transform=%27translate%282.6 29.4%29 rotate%28-45%29 scale%28.85%29%27%3E%3Cg fill=%27%23fff%27 stroke=%27%23fff%27 stroke-width=%272.6%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M17.2-2.1C24-2.6 30-3.9 36-3.7 41-3.5 44-1.6 44 0S41 3.5 36 3.7C30 3.9 24 2.6 17.2 2.1Z%27/%3E%3Cpath d=%27M13.4-3.1h2.6v6.2h-2.6Z%27/%3E%3Cpath d=%27M0 0C1.6-.9 2.6-2.6 3.6-4.2 5.6-7.2 9.8-7 12.6-4.4V4.4C9.8 7 5.2 6.6 3 3.8 2 2.4 1.2 1 0 0Z%27/%3E%3C/g%3E%3Cpath d=%27M17.2-2.1C24-2.6 30-3.9 36-3.7 41-3.5 44-1.6 44 0S41 3.5 36 3.7C30 3.9 24 2.6 17.2 2.1Z%27 fill=%27%232E2723%27/%3E%3Cpath d=%27M13.4-3.1h2.6v6.2h-2.6Z%27 fill=%27%23A9B4BF%27/%3E%3Cpath d=%27M0 0C1.6-.9 2.6-2.6 3.6-4.2 5.6-7.2 9.8-7 12.6-4.4V4.4C9.8 7 5.2 6.6 3 3.8 2 2.4 1.2 1 0 0Z%27 fill=%27%23D8B47C%27/%3E%3Cpath d=%27M0 0C1.6-.9 2.6-2.6 3.6-4.2 4.2-5.1 5-5.8 5.8-6.2V6.1C4.6 5.7 3.7 4.9 3 3.8 2 2.4 1.2 1 0 0Z%27 fill=%27%232E2723%27/%3E%3C/g%3E%3C/svg%3E") 3 29; --brush-loaded: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2732%27 height=%2732%27 viewBox=%270 0 32 32%27%3E%3Cg transform=%27translate%282.6 29.4%29 rotate%28-45%29 scale%28.85%29%27%3E%3Cg fill=%27%23fff%27 stroke=%27%23fff%27 stroke-width=%272.6%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M17.2-2.1C24-2.6 30-3.9 36-3.7 41-3.5 44-1.6 44 0S41 3.5 36 3.7C30 3.9 24 2.6 17.2 2.1Z%27/%3E%3Cpath d=%27M13.4-3.1h2.6v6.2h-2.6Z%27/%3E%3Cpath d=%27M0 0C1.6-.9 2.6-2.6 3.6-4.2 5.6-7.2 9.8-7 12.6-4.4V4.4C9.8 7 5.2 6.6 3 3.8 2 2.4 1.2 1 0 0Z%27/%3E%3C/g%3E%3Cpath d=%27M17.2-2.1C24-2.6 30-3.9 36-3.7 41-3.5 44-1.6 44 0S41 3.5 36 3.7C30 3.9 24 2.6 17.2 2.1Z%27 fill=%27%232E2723%27/%3E%3Cpath d=%27M13.4-3.1h2.6v6.2h-2.6Z%27 fill=%27%23A9B4BF%27/%3E%3Cpath d=%27M0 0C1.6-.9 2.6-2.6 3.6-4.2 5.6-7.2 9.8-7 12.6-4.4V4.4C9.8 7 5.2 6.6 3 3.8 2 2.4 1.2 1 0 0Z%27 fill=%27%23D8B47C%27/%3E%3Cpath d=%27M0 0C1.6-.9 2.6-2.6 3.6-4.2 4.2-5.1 5-5.8 5.8-6.2V6.1C4.6 5.7 3.7 4.9 3 3.8 2 2.4 1.2 1 0 0Z%27 fill=%27%237E3A2A%27/%3E%3C/g%3E%3C/svg%3E") 3 29; }
html[data-theme="marsh"] { --brush: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2732%27 height=%2732%27 viewBox=%270 0 32 32%27%3E%3Cg transform=%27translate%282.6 29.4%29 rotate%28-45%29 scale%28.85%29%27%3E%3Cg fill=%27%23fff%27 stroke=%27%23fff%27 stroke-width=%272.6%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M17.2-2.1C24-2.6 30-3.9 36-3.7 41-3.5 44-1.6 44 0S41 3.5 36 3.7C30 3.9 24 2.6 17.2 2.1Z%27/%3E%3Cpath d=%27M13.4-3.1h2.6v6.2h-2.6Z%27/%3E%3Cpath d=%27M0 0C1.6-.9 2.6-2.6 3.6-4.2 5.6-7.2 9.8-7 12.6-4.4V4.4C9.8 7 5.2 6.6 3 3.8 2 2.4 1.2 1 0 0Z%27/%3E%3C/g%3E%3Cpath d=%27M17.2-2.1C24-2.6 30-3.9 36-3.7 41-3.5 44-1.6 44 0S41 3.5 36 3.7C30 3.9 24 2.6 17.2 2.1Z%27 fill=%27%232C3520%27/%3E%3Cpath d=%27M13.4-3.1h2.6v6.2h-2.6Z%27 fill=%27%23A9B4BF%27/%3E%3Cpath d=%27M0 0C1.6-.9 2.6-2.6 3.6-4.2 5.6-7.2 9.8-7 12.6-4.4V4.4C9.8 7 5.2 6.6 3 3.8 2 2.4 1.2 1 0 0Z%27 fill=%27%23D8B47C%27/%3E%3Cpath d=%27M0 0C1.6-.9 2.6-2.6 3.6-4.2 4.2-5.1 5-5.8 5.8-6.2V6.1C4.6 5.7 3.7 4.9 3 3.8 2 2.4 1.2 1 0 0Z%27 fill=%27%232C3520%27/%3E%3C/g%3E%3C/svg%3E") 3 29; --brush-loaded: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2732%27 height=%2732%27 viewBox=%270 0 32 32%27%3E%3Cg transform=%27translate%282.6 29.4%29 rotate%28-45%29 scale%28.85%29%27%3E%3Cg fill=%27%23fff%27 stroke=%27%23fff%27 stroke-width=%272.6%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M17.2-2.1C24-2.6 30-3.9 36-3.7 41-3.5 44-1.6 44 0S41 3.5 36 3.7C30 3.9 24 2.6 17.2 2.1Z%27/%3E%3Cpath d=%27M13.4-3.1h2.6v6.2h-2.6Z%27/%3E%3Cpath d=%27M0 0C1.6-.9 2.6-2.6 3.6-4.2 5.6-7.2 9.8-7 12.6-4.4V4.4C9.8 7 5.2 6.6 3 3.8 2 2.4 1.2 1 0 0Z%27/%3E%3C/g%3E%3Cpath d=%27M17.2-2.1C24-2.6 30-3.9 36-3.7 41-3.5 44-1.6 44 0S41 3.5 36 3.7C30 3.9 24 2.6 17.2 2.1Z%27 fill=%27%232C3520%27/%3E%3Cpath d=%27M13.4-3.1h2.6v6.2h-2.6Z%27 fill=%27%23A9B4BF%27/%3E%3Cpath d=%27M0 0C1.6-.9 2.6-2.6 3.6-4.2 5.6-7.2 9.8-7 12.6-4.4V4.4C9.8 7 5.2 6.6 3 3.8 2 2.4 1.2 1 0 0Z%27 fill=%27%23D8B47C%27/%3E%3Cpath d=%27M0 0C1.6-.9 2.6-2.6 3.6-4.2 4.2-5.1 5-5.8 5.8-6.2V6.1C4.6 5.7 3.7 4.9 3 3.8 2 2.4 1.2 1 0 0Z%27 fill=%27%238A6220%27/%3E%3C/g%3E%3C/svg%3E") 3 29; }
html[data-theme="plum"] { --brush: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2732%27 height=%2732%27 viewBox=%270 0 32 32%27%3E%3Cg transform=%27translate%282.6 29.4%29 rotate%28-45%29 scale%28.85%29%27%3E%3Cg fill=%27%23fff%27 stroke=%27%23fff%27 stroke-width=%272.6%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M17.2-2.1C24-2.6 30-3.9 36-3.7 41-3.5 44-1.6 44 0S41 3.5 36 3.7C30 3.9 24 2.6 17.2 2.1Z%27/%3E%3Cpath d=%27M13.4-3.1h2.6v6.2h-2.6Z%27/%3E%3Cpath d=%27M0 0C1.6-.9 2.6-2.6 3.6-4.2 5.6-7.2 9.8-7 12.6-4.4V4.4C9.8 7 5.2 6.6 3 3.8 2 2.4 1.2 1 0 0Z%27/%3E%3C/g%3E%3Cpath d=%27M17.2-2.1C24-2.6 30-3.9 36-3.7 41-3.5 44-1.6 44 0S41 3.5 36 3.7C30 3.9 24 2.6 17.2 2.1Z%27 fill=%27%233E2333%27/%3E%3Cpath d=%27M13.4-3.1h2.6v6.2h-2.6Z%27 fill=%27%23A9B4BF%27/%3E%3Cpath d=%27M0 0C1.6-.9 2.6-2.6 3.6-4.2 5.6-7.2 9.8-7 12.6-4.4V4.4C9.8 7 5.2 6.6 3 3.8 2 2.4 1.2 1 0 0Z%27 fill=%27%23D8B47C%27/%3E%3Cpath d=%27M0 0C1.6-.9 2.6-2.6 3.6-4.2 4.2-5.1 5-5.8 5.8-6.2V6.1C4.6 5.7 3.7 4.9 3 3.8 2 2.4 1.2 1 0 0Z%27 fill=%27%233E2333%27/%3E%3C/g%3E%3C/svg%3E") 3 29; --brush-loaded: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2732%27 height=%2732%27 viewBox=%270 0 32 32%27%3E%3Cg transform=%27translate%282.6 29.4%29 rotate%28-45%29 scale%28.85%29%27%3E%3Cg fill=%27%23fff%27 stroke=%27%23fff%27 stroke-width=%272.6%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M17.2-2.1C24-2.6 30-3.9 36-3.7 41-3.5 44-1.6 44 0S41 3.5 36 3.7C30 3.9 24 2.6 17.2 2.1Z%27/%3E%3Cpath d=%27M13.4-3.1h2.6v6.2h-2.6Z%27/%3E%3Cpath d=%27M0 0C1.6-.9 2.6-2.6 3.6-4.2 5.6-7.2 9.8-7 12.6-4.4V4.4C9.8 7 5.2 6.6 3 3.8 2 2.4 1.2 1 0 0Z%27/%3E%3C/g%3E%3Cpath d=%27M17.2-2.1C24-2.6 30-3.9 36-3.7 41-3.5 44-1.6 44 0S41 3.5 36 3.7C30 3.9 24 2.6 17.2 2.1Z%27 fill=%27%233E2333%27/%3E%3Cpath d=%27M13.4-3.1h2.6v6.2h-2.6Z%27 fill=%27%23A9B4BF%27/%3E%3Cpath d=%27M0 0C1.6-.9 2.6-2.6 3.6-4.2 5.6-7.2 9.8-7 12.6-4.4V4.4C9.8 7 5.2 6.6 3 3.8 2 2.4 1.2 1 0 0Z%27 fill=%27%23D8B47C%27/%3E%3Cpath d=%27M0 0C1.6-.9 2.6-2.6 3.6-4.2 4.2-5.1 5-5.8 5.8-6.2V6.1C4.6 5.7 3.7 4.9 3 3.8 2 2.4 1.2 1 0 0Z%27 fill=%27%236E3B4E%27/%3E%3C/g%3E%3C/svg%3E") 3 29; }