/* The original Celestial palette remains in styles.css and experiences.css. */
body[data-palette="patita"] {
  --paper: #fff7fa;
  --panel: #fffdfd;
  --sidebar: #fbf0f5;
  --ink: #4e303f;
  --text: #674f5b;
  --muted: #7d6371;
  --line: #ecd7e2;
  --green: #a33e69;
  --pale: #f5e2ec;
  --gold: #a26f39;
  --shadow: 0 10px 38px #71394e0b;
  --palette-on-accent: #fffafd;
  --palette-soft: #f9edf3;
  --palette-warm: #fcf0e8;
  --palette-third: #f1eaf6;
  --palette-deep: #7b3052;
  --palette-line-strong: #c999b0;
  --palette-bubble: #a33e69;
  --palette-bubble-ink: #fffafd;
  --palette-hero: 255, 243, 248;
  --palette-shadow-color: #71394e18;
  --palette-notice: #fff1e5;
  --palette-notice-line: #ead0ba;
  --palette-notice-ink: #835737;
  --palette-danger: #9c3e57;
  --palette-backdrop: #38233173;
}

body[data-palette="castor"] {
  --paper: #fbf5ed;
  --panel: #fffdf8;
  --sidebar: #f4eade;
  --ink: #503625;
  --text: #68513f;
  --muted: #7b6250;
  --line: #e6d5c2;
  --green: #9b4d24;
  --pale: #f2dfca;
  --gold: #a16527;
  --shadow: 0 10px 38px #6a41200b;
  --palette-on-accent: #fffaf2;
  --palette-soft: #f6ecdf;
  --palette-warm: #fae7d3;
  --palette-third: #eee8de;
  --palette-deep: #71472e;
  --palette-line-strong: #c29b78;
  --palette-bubble: #925025;
  --palette-bubble-ink: #fffbf4;
  --palette-hero: 251, 241, 226;
  --palette-shadow-color: #6a41201a;
  --palette-notice: #fff0d8;
  --palette-notice-line: #e6c797;
  --palette-notice-ink: #80531f;
  --palette-danger: #9b4838;
  --palette-backdrop: #35271973;
}

body.moon[data-palette="patita"] {
  --paper: #2d2029;
  --panel: #382834;
  --sidebar: #30212d;
  --ink: #fbe7f0;
  --text: #ebd1de;
  --muted: #c7a7ba;
  --line: #5a3e51;
  --green: #e9a1bf;
  --pale: #503247;
  --gold: #e0bb8a;
  --shadow: 0 10px 38px #130b151f;
  --palette-on-accent: #462237;
  --palette-soft: #432e3d;
  --palette-warm: #483336;
  --palette-third: #3e304c;
  --palette-deep: #743d60;
  --palette-line-strong: #9a6684;
  --palette-bubble: #854565;
  --palette-bubble-ink: #fff4f9;
  --palette-hero: 45, 32, 41;
  --palette-shadow-color: #160a162e;
  --palette-notice: #493530;
  --palette-notice-line: #795444;
  --palette-notice-ink: #edc5a3;
  --palette-danger: #f1aabd;
  --palette-backdrop: #160d1bb3;
}

body.moon[data-palette="castor"] {
  --paper: #2d241e;
  --panel: #382c23;
  --sidebar: #30251e;
  --ink: #fae8d5;
  --text: #e8d0b9;
  --muted: #c6aa90;
  --line: #594333;
  --green: #e9a36e;
  --pale: #503826;
  --gold: #e6b878;
  --shadow: 0 10px 38px #160d071f;
  --palette-on-accent: #422717;
  --palette-soft: #443226;
  --palette-warm: #4c3524;
  --palette-third: #3d3930;
  --palette-deep: #7e4a29;
  --palette-line-strong: #9b704c;
  --palette-bubble: #8e502d;
  --palette-bubble-ink: #fff9f0;
  --palette-hero: 45, 36, 30;
  --palette-shadow-color: #160d072e;
  --palette-notice: #493822;
  --palette-notice-line: #765a34;
  --palette-notice-ink: #f0cb96;
  --palette-danger: #f0b09b;
  --palette-backdrop: #191009b3;
}

/* The swatches are small paper rooms, independent of the selected palette. */
.palette-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  padding: 6px 11px 6px 8px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--panel);
  color: var(--ink);
  font-size: 10px;
  white-space: nowrap;
}
.palette-toggle:hover { background: var(--pale); }
.palette-dots { display: flex; align-items: center; padding-left: 3px; }
.palette-dots > span {
  display: block;
  width: 15px;
  height: 15px;
  margin-left: -3px;
  border: 1px solid var(--panel);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--line);
  background: var(--paper);
}
.palette-dots > span:nth-child(2) { background: var(--pale); }
.palette-dots > span:nth-child(3) { background: var(--green); }
.appearance-picker > .eyebrow { margin-bottom: 10px; }
.appearance-picker > h2 { max-width: 460px; margin: 10px 0 12px; }
.appearance-picker > p { max-width: 460px; margin: 0; line-height: 1.75; }
.appearance-picker > .button { margin-top: 0; }
.palette-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 22px 0 15px;
}
.palette-option {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  padding: 9px 9px 15px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--paper);
  color: var(--text);
  text-align: left;
  box-shadow: var(--shadow);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.palette-option:hover { transform: translateY(-3px); border-color: var(--green); }
.palette-option[aria-pressed="true"] {
  background: var(--panel);
  border-color: var(--green);
  box-shadow: inset 0 0 0 1px var(--green), var(--shadow);
}
.palette-preview {
  --preview-paper: #fff7fa;
  --preview-side: #f5dde8;
  --preview-soft: #ffffff;
  --preview-accent: #b84f7b;
  position: relative;
  display: block;
  height: 91px;
  overflow: hidden;
  border: 1px solid #6b445516;
  border-radius: 8px;
  background: var(--preview-paper);
  box-shadow: inset 0 0 20px #ffffff40;
}
.palette-preview[data-preview="castor"] {
  --preview-paper: #fbf3e9;
  --preview-side: #e9d3b9;
  --preview-soft: #fffdf8;
  --preview-accent: #aa602f;
}
.palette-preview[data-preview="celestial"] {
  --preview-paper: #f8f7f2;
  --preview-side: #dfe5d7;
  --preview-soft: #fffefb;
  --preview-accent: #566e4d;
}
.palette-preview::before {
  content: '';
  position: absolute;
  top: 12px;
  right: 12px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--preview-accent);
  box-shadow: -7px 0 0 var(--preview-side), -14px 0 0 var(--preview-side);
}
.palette-preview > span { position: absolute; display: block; }
.palette-preview > span:first-child {
  inset: 0 auto 0 0;
  width: 27%;
  background: var(--preview-side);
  border-right: 1px solid #6b44550a;
}
.palette-preview > span:nth-child(2) {
  top: 30px;
  left: 35%;
  width: 52%;
  height: 19px;
  border-radius: 5px 5px 5px 1px;
  background: var(--preview-soft);
  box-shadow: 0 3px 6px #6b44550d;
}
.palette-preview > span:nth-child(3) {
  top: 57px;
  right: 12%;
  width: 37%;
  height: 16px;
  border-radius: 5px 5px 1px 5px;
  background: var(--preview-accent);
}
.palette-name {
  display: block;
  margin: 13px 4px 5px;
  font: 21px/1.2 var(--serif);
  color: var(--ink);
}
.palette-description {
  display: block;
  margin: 0 4px 16px;
  font-size: 10px;
  line-height: 1.7;
  color: var(--muted);
}
.palette-selected {
  display: block;
  margin: auto 4px 0;
  padding-top: 11px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 9px;
  line-height: 1.6;
}
.palette-option[aria-pressed="true"] .palette-selected { color: var(--green); font-weight: 600; }
.appearance-picker .appearance-note { margin: 0 0 16px; font-size: 10px; line-height: 1.9; color: var(--muted); }

/* Shared recolouring: scope excludes Celestial to preserve its original look. */
body:is([data-palette="patita"], [data-palette="castor"]) { accent-color: var(--green); }
body:is([data-palette="patita"], [data-palette="castor"]) :is(button, a, input, textarea):focus-visible { outline-color: var(--green); }
body:is([data-palette="patita"], [data-palette="castor"]) .sidebar { scrollbar-color: var(--palette-line-strong) transparent; }
body:is([data-palette="patita"], [data-palette="castor"]) :is(.nav-item.active, .friend-link.active, .friend-link:hover, .wish-entry, .control-nav) {
  background: var(--pale);
  border-color: var(--line);
  color: var(--ink);
}
body:is([data-palette="patita"], [data-palette="castor"]) :is(.brand-seal, .message-choice) { border-color: var(--palette-line-strong); color: var(--green); }
body:is([data-palette="patita"], [data-palette="castor"]) :is(.avatar, .portrait-wrap) { background-color: var(--palette-soft); border-color: var(--line); }
body:is([data-palette="patita"], [data-palette="castor"]) :is(.profile-avatar, .top-avatar, .avatar-symbol) { background: var(--pale); border-color: var(--palette-soft); color: var(--green); }
body:is([data-palette="patita"], [data-palette="castor"]) :is(.online-dot, .typing span) { background: var(--green); }
body:is([data-palette="patita"], [data-palette="castor"]) .online-dot.offline { background: var(--palette-line-strong); }
body:is([data-palette="patita"], [data-palette="castor"]) :is(.little-note, .section-heading .aside-note, .page-footer, .composer-note, .message-meta, .message-meta button, .companion-quote, .portrait-symbol .symbol-label, .profile svg, .story-feature p, .daily-note blockquote, .wish-aside p) { color: var(--muted); }
body:is([data-palette="patita"], [data-palette="castor"]) :is(.eyebrow, .card-bottom, .little-note span, .tiny-spark, .suggestion, .empty-state > svg, .chat-empty > svg, .connection-mark, .connection-banner.live .connection-mark, .control-metrics svg, .admin-feed-empty, .account-opening, .account-wait > svg) { color: var(--green); }
body:is([data-palette="patita"], [data-palette="castor"]) .breadcrumb-slash { color: var(--palette-line-strong); }
body:is([data-palette="patita"], [data-palette="castor"]) :is(.wish-star, .daily-note > span, .portrait-symbol .small-star) { color: var(--gold); }
body:is([data-palette="patita"], [data-palette="castor"]) :is(.button:not(.secondary), .send-button) { color: var(--palette-on-accent); box-shadow: 0 3px 10px var(--palette-shadow-color); }
body:is([data-palette="patita"], [data-palette="castor"]) .button:hover { box-shadow: 0 6px 18px var(--palette-shadow-color); }
body:is([data-palette="patita"], [data-palette="castor"]) .button.secondary { box-shadow: none; }
body:is([data-palette="patita"], [data-palette="castor"]) .text-button { color: var(--green); border-color: var(--palette-line-strong); }
body:is([data-palette="patita"], [data-palette="castor"]) :is(.character-card:hover, .suggestion:hover, .delivered-story:hover, .vaca-letter:hover, .admin-action-button:hover, .control-metrics > button:hover) { border-color: var(--palette-line-strong); }
body:is([data-palette="patita"], [data-palette="castor"]) .character-card:hover { box-shadow: 0 13px 28px var(--palette-shadow-color); }
body:is([data-palette="patita"], [data-palette="castor"]) .hero { border-color: var(--line); background: rgb(var(--palette-hero)); }
body:is([data-palette="patita"], [data-palette="castor"]) .hero::after {
  background: linear-gradient(90deg, rgb(var(--palette-hero)) 0%, rgba(var(--palette-hero), .96) 24%, rgba(var(--palette-hero), .7) 40%, rgba(var(--palette-hero), 0) 64%);
}
body:is([data-palette="patita"], [data-palette="castor"]) :is(.hero h1, .account-art-copy h2) { color: var(--ink); }
body:is([data-palette="patita"], [data-palette="castor"]) :is(.hero h1 em, .account-art-copy h2 em, .account-card h1 em, .control-hero h1 em) { color: var(--green); }
body:is([data-palette="patita"], [data-palette="castor"]) :is(.hero p, .account-art-copy p, .account-art-footer, .control-hero p) { color: var(--text); }
body:is([data-palette="patita"], [data-palette="castor"]) .hero-caption { background: rgba(var(--palette-hero), .9); border-color: var(--line); color: var(--text); }
body:is([data-palette="patita"], [data-palette="castor"]) :is(.portrait-symbol, .court-portrait) { background: radial-gradient(ellipse at 50% 60%, var(--pale), transparent 70%), var(--palette-soft); color: var(--green); }
body:is([data-palette="patita"], [data-palette="castor"]) .portrait-symbol .symbol-big { color: var(--green); text-shadow: none; }
body:is([data-palette="patita"], [data-palette="castor"]) :is(.story-feature, .daily-note, .wish-aside) { background: var(--palette-soft); border-color: var(--line); }
body:is([data-palette="patita"], [data-palette="castor"]) .daily-note { background: var(--palette-warm); }
body:is([data-palette="patita"], [data-palette="castor"]) :is(.mini-book, .story-spine) { background: var(--palette-deep); border-color: var(--green); color: #fff4df; box-shadow: 3px 3px 0 var(--palette-line-strong); }
body:is([data-palette="patita"], [data-palette="castor"]) .book-art { background: var(--pale); }
body:is([data-palette="patita"], [data-palette="castor"]) .book-art::before,
body:is([data-palette="patita"], [data-palette="castor"]) .book-art::after { color: var(--palette-line-strong); }
body:is([data-palette="patita"], [data-palette="castor"]) .book-art .mini-book { box-shadow: 5px 5px 0 var(--palette-line-strong); }
body:is([data-palette="patita"], [data-palette="castor"]) .book-card:nth-child(2) .book-art { background: var(--palette-warm); }
body:is([data-palette="patita"], [data-palette="castor"]) .book-card:nth-child(3) .book-art { background: var(--palette-third); }
body:is([data-palette="patita"], [data-palette="castor"]) .chat-messages { background: radial-gradient(ellipse at 80% 20%, var(--palette-soft), transparent 65%); }
body:is([data-palette="patita"], [data-palette="castor"]) .message { background: var(--palette-soft); color: var(--text); }
body:is([data-palette="patita"], [data-palette="castor"]) .message-row.user .message { background: var(--palette-bubble); color: var(--palette-bubble-ink); }
body:is([data-palette="patita"], [data-palette="castor"]) .composer:focus-within { border-color: var(--palette-line-strong); box-shadow: 0 0 0 2px var(--pale); }
body:is([data-palette="patita"], [data-palette="castor"]) :is(.empty-state, .connection-banner.demo) { background: var(--palette-soft); border-color: var(--line); }
body:is([data-palette="patita"], [data-palette="castor"]) :is(.connection-banner.offline, .connection-banner.degraded, .experience-notice, .admin-notice, .admin-confirm-preview, .account-error) { background: var(--palette-notice); border-color: var(--palette-notice-line); color: var(--palette-notice-ink); }
body:is([data-palette="patita"], [data-palette="castor"]) .toast { background: var(--palette-bubble); color: var(--palette-bubble-ink); border-color: var(--palette-line-strong); box-shadow: 0 8px 25px var(--palette-shadow-color); }
body:is([data-palette="patita"], [data-palette="castor"]) dialog { box-shadow: 0 35px 100px var(--palette-shadow-color); }
body:is([data-palette="patita"], [data-palette="castor"]) dialog::backdrop { background: var(--palette-backdrop); }
body:is([data-palette="patita"], [data-palette="castor"]) .mobile-shade.open { background: var(--palette-backdrop); }
body:is([data-palette="patita"], [data-palette="castor"]) dialog .story-signature { color: var(--green); }

/* The private desk and the entrance use the same paper, ink and small seals. */
body:is([data-palette="patita"], [data-palette="castor"]) .control-hero { background: radial-gradient(ellipse at 80% 0%, var(--pale), transparent 60%), var(--palette-soft); border-color: var(--line); }
body:is([data-palette="patita"], [data-palette="castor"]) .control-seal { border-color: var(--palette-line-strong); color: var(--green); box-shadow: 0 0 0 10px var(--panel), 0 0 0 11px var(--line); }
body:is([data-palette="patita"], [data-palette="castor"]) :is(.control-tabs > button.active, .account-tabs > button.active) { border-color: var(--green); }
body:is([data-palette="patita"], [data-palette="castor"]) :is(.admin-action-button, .admin-send-preview, .account-password > button) { color: var(--green); }
body:is([data-palette="patita"], [data-palette="castor"]) .admin-draft blockquote { border-color: var(--palette-line-strong); }
body:is([data-palette="patita"], [data-palette="castor"]) .admin-event.user { background: var(--palette-soft); border-color: var(--line); }
body:is([data-palette="patita"], [data-palette="castor"]) .admin-lock { box-shadow: 0 20px 70px var(--palette-shadow-color); }
body:is([data-palette="patita"], [data-palette="castor"]) .admin-lock-art { background: radial-gradient(ellipse at 65% 25%, var(--palette-warm), transparent 55%), linear-gradient(145deg, var(--pale), var(--palette-soft)); color: var(--green); }
body:is([data-palette="patita"], [data-palette="castor"]) .admin-lock-seal { border-color: var(--palette-line-strong); box-shadow: 0 0 0 10px var(--palette-soft), inset 0 0 0 8px var(--palette-soft); }
body:is([data-palette="patita"], [data-palette="castor"]) .account-gate { background: var(--paper); }
body:is([data-palette="patita"], [data-palette="castor"]) .account-layout { border-color: var(--line); box-shadow: 0 20px 70px var(--palette-shadow-color); }
body:is([data-palette="patita"], [data-palette="castor"]) .account-illustration { background-color: var(--palette-soft); }
body:is([data-palette="patita"], [data-palette="castor"]) .account-illustration::after { background: linear-gradient(180deg, rgba(var(--palette-hero), .98), rgba(var(--palette-hero), .91) 23%, rgba(var(--palette-hero), .15) 50%, rgba(var(--palette-hero), .15) 80%, rgba(var(--palette-hero), .7)); }
body:is([data-palette="patita"], [data-palette="castor"]) :is(.account-key, .invitation-emblem, .invitation-secret) { background: var(--palette-soft); border-color: var(--palette-line-strong); color: var(--green); }
body:is([data-palette="patita"], [data-palette="castor"]) :is(.invitation-secret > p, .invitation-secret > label, .invitation-secret > .invitation-dismiss) { color: var(--text); border-color: var(--line); }
body:is([data-palette="patita"], [data-palette="castor"]) .invitation-secret input { border-color: var(--palette-line-strong); }
body:is([data-palette="patita"], [data-palette="castor"]) .account-footnote { color: var(--muted); }
body:is([data-palette="patita"], [data-palette="castor"]) :is(.account-form input, .consultation-composer textarea, .wish-search input)::placeholder { color: var(--muted); opacity: 1; }

/* Salchicher's notebook and the Vaca's letters keep their own warm paper tones. */
body:is([data-palette="patita"], [data-palette="castor"]) :is(.experience-hero, .vaca-hero, .vaca-chat-intro) { background: var(--palette-soft); border-color: var(--line); }
body:is([data-palette="patita"], [data-palette="castor"]) :is(.experience-hero h1 em, .vaca-chat-intro h2 em) { color: var(--green); }
body:is([data-palette="patita"], [data-palette="castor"]) :is(.experience-hero-art, .vaca-hero .experience-hero-art) { background: radial-gradient(ellipse, var(--pale), transparent 68%); }
body:is([data-palette="patita"], [data-palette="castor"]) :is(.hero-spark, .vaca-chat-spark, .paper-pin, .care-path > div > span, .clinic-notebook > .experience-section-heading > span, .experience-empty > span, .consultation-welcome > span),
body:is([data-palette="patita"], [data-palette="castor"]) .consultation-summary li::before { color: var(--gold); }
body:is([data-palette="patita"], [data-palette="castor"]) :is(.doctor-sign, .vaca-art-label) { background: var(--panel); border-color: var(--line); color: var(--green); box-shadow: 3px 5px 0 var(--palette-shadow-color); }
body:is([data-palette="patita"], [data-palette="castor"]) .vaca-art-label em { color: var(--muted); }
body:is([data-palette="patita"], [data-palette="castor"]) :is(.care-paper, .consultation-summary) { background: var(--palette-warm); border-color: var(--line); box-shadow: 4px 7px 0 var(--palette-shadow-color); }
body:is([data-palette="patita"], [data-palette="castor"]) :is(.care-paper h3, .experience-empty h3, .consultation-summary h2, .wish-card h3, .vaca-letter h3) { color: var(--ink); }
body:is([data-palette="patita"], [data-palette="castor"]) :is(.care-paper p, .consultation-summary > p, .consultation-summary li, .summary-meta > strong, .wish-card > p) { color: var(--text); }
body:is([data-palette="patita"], [data-palette="castor"]) :is(.experience-private, .care-paper small, .summary-doctor > span, .summary-meta > span, .consultation-speaker time, .consultation-note, .experience-demo, .experience-modal-note, .consultation-summary > .text-button, .wish-card-top, .wish-card-bottom > span, .wish-card-bottom .icon-button, .vaca-promise, .letter-date) { color: var(--muted); }
body:is([data-palette="patita"], [data-palette="castor"]) :is(.care-paper small, .summary-doctor, .summary-meta, .consultation-message, .consultation-composer) { border-color: var(--line); }
body:is([data-palette="patita"], [data-palette="castor"]) :is(.consultation-mark, .consultation-status, .consultation-status.recovered, .letter-seal) { background: var(--pale); border-color: var(--line); color: var(--green); }
body:is([data-palette="patita"], [data-palette="castor"]) .consultation-status.inactive { background: var(--palette-third); border-color: var(--line); color: var(--muted); }
body:is([data-palette="patita"], [data-palette="castor"]) :is(.consultation-room-label, .consultation-speaker, .summary-doctor strong, .wish-card-top .icon-button, .wish-card-bottom > .text-button) { color: var(--green); }
body:is([data-palette="patita"], [data-palette="castor"]) .consultation-transcript { background-image: linear-gradient(transparent, var(--palette-soft)); }
body:is([data-palette="patita"], [data-palette="castor"]) .consultation-message.user { border-left-color: var(--palette-line-strong); }
body:is([data-palette="patita"], [data-palette="castor"]) .consultation-message.user .consultation-speaker { color: var(--text); }
body:is([data-palette="patita"], [data-palette="castor"]) .consultation-footer { background: var(--palette-soft); }
body:is([data-palette="patita"], [data-palette="castor"]) .consultation-consent input { accent-color: var(--green); }
body:is([data-palette="patita"], [data-palette="castor"]) .danger { color: var(--palette-danger); }
body:is([data-palette="patita"], [data-palette="castor"]) .experience-tabs > button.active { color: var(--green); border-bottom-color: var(--green); }
body:is([data-palette="patita"], [data-palette="castor"]) .wish-search input { outline-color: var(--green); }
body:is([data-palette="patita"], [data-palette="castor"]) .wish-card { background: var(--palette-warm); border-color: var(--line); }
body:is([data-palette="patita"], [data-palette="castor"]) .wish-card.tone-1 { background: var(--palette-soft); }
body:is([data-palette="patita"], [data-palette="castor"]) .wish-card.tone-2 { background: var(--palette-third); }
body:is([data-palette="patita"], [data-palette="castor"]) :is(.wish-card-top .selected, .wish-card > .wish-card-flower) { color: var(--gold); }

@media (max-width: 950px) {
  body:is([data-palette="patita"], [data-palette="castor"]) .hero::after { background: linear-gradient(90deg, rgb(var(--palette-hero)) 0%, rgba(var(--palette-hero), .96) 30%, rgba(var(--palette-hero), .55) 57%, transparent); }
}
@media (max-width: 750px) {
  body:is([data-palette="patita"], [data-palette="castor"]) .account-illustration::after { background: linear-gradient(90deg, rgba(var(--palette-hero), .98), rgba(var(--palette-hero), .85) 43%, rgba(var(--palette-hero), 0) 76%); }
  body:is([data-palette="patita"], [data-palette="castor"]) .account-layout { box-shadow: none; }
}
@media (max-width: 700px) {
  .palette-toggle { width: 40px; padding: 6px; }
  .palette-toggle-label { display: none; }
  .palette-dots > span { width: 13px; height: 13px; }
  body:is([data-palette="patita"], [data-palette="castor"]) .hero::after { background: linear-gradient(180deg, rgb(var(--palette-hero)) 0%, rgb(var(--palette-hero)) 16%, rgba(var(--palette-hero), .91) 37%, rgba(var(--palette-hero), 0) 66%); }
}
@media (max-width: 620px) {
  body:is([data-palette="patita"], [data-palette="castor"]) .admin-lock-seal { box-shadow: 0 0 0 5px var(--palette-soft), inset 0 0 0 4px var(--palette-soft); }
}
@media (max-width: 480px) {
  .palette-options { grid-template-columns: 1fr; gap: 10px; margin-top: 22px; }
  .palette-option { display: grid; grid-template-columns: 85px minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 15px; padding: 12px; }
  .palette-preview { grid-row: 1 / 4; height: 82px; align-self: center; }
  .palette-name { margin: 1px 0 3px; font-size: 22px; }
  .palette-description { margin: 0 0 8px; font-size: 11px; line-height: 1.6; }
  .palette-selected { margin: 0; padding-top: 7px; font-size: 9px; }
  .appearance-picker > h2 { font-size: 31px; }
  .appearance-picker .appearance-note { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .palette-option { transition: none; }
  .palette-option:hover { transform: none; }
}