/* Palettes inspired by the official character art: https://vedal.ai/ */
:root, :root[data-theme="light"] {
  color-scheme:light;
  --bg:#faf7ef; --ink:#424740; --muted:#787c71;
  --pink:#438a7c; --pink-dark:#306e63; --pink-light:#e2eee5;
  --line:#e6e5d9; --white:#fffdf7; --surface:#fffdf7;
  --surface-soft:#f0f0e5; --surface-glass:#fffdf7e6;
  --accent:#438a7c; --accent-soft:#e2eee5; --accent-hover:#34776b;
  --ribbon:#c77890; --ribbon-soft:#f6e5eb; --on-accent:#fff;
  --hero-glow:#e7edda; --shadow:0 8px 30px #4a5b3b08;
}
:root[data-theme="dark"] {
  color-scheme:dark;
  --bg:#171319; --ink:#f0e3e7; --muted:#baa8b1;
  --pink:#e48b9f; --pink-dark:#f0a8b7; --pink-light:#3c232e;
  --line:#44313e; --white:#251e28; --surface:#251e28;
  --surface-soft:#302430; --surface-glass:#251e28eb;
  --accent:#ac405d; --accent-soft:#3c232e; --accent-hover:#c05270;
  --ribbon:#dc7b96; --ribbon-soft:#3c2330; --on-accent:#fff1f4;
  --hero-glow:#4c2339; --shadow:0 8px 30px #0003;
}
body { background:radial-gradient(ellipse at 85% 8%,var(--hero-glow),transparent 36%),var(--bg); }
.site-header, .glass { background:var(--surface-glass); border-color:var(--line); }
.header-inner { gap:22px; }
.main-nav { margin-right:0; }
.theme-toggle {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  color:var(--pink-dark); border:1px solid var(--line); border-radius:30px;
  padding:9px 13px; white-space:nowrap; font-size:11px; background:var(--surface);
}
.theme-toggle:hover { background:var(--accent-soft); border-color:var(--accent); }
.theme-toggle .icon { width:16px; height:16px; }
.brand-symbol { background:var(--accent); color:var(--on-accent); }
.brand-symbol>span, .title-accent, .doodle-heart, .footer-brand span { color:var(--ribbon); }
.brand-symbol>span { text-shadow:none; }
h1, .card-title, .section-heading h2, .info-dialog h2, .art-details h2 { color:var(--ink); }
.eyebrow, .section-kicker, .hero-bottom, .hero-bottom a, .hero-description, .hero-credit,
.section-heading>p, .nav-link, .collection-topline>.text-button,
.results-description>span, .card-meta, .card-meta time, .card-author,
.sample-note, .site-footer p, .footer-right, .empty-state p,
.collection-end p, .detail-description, .art-metadata dd, .art-metadata dt,
.description-label, .copyright-note, .source-link, .detail-author,
.info-dialog>p, .guide-steps p, .date-panel>p, .download-help, .download-dialog>p,
#art-position, .stage-navigation, .zoom-label, .hero-separator { color:var(--muted); }
.nav-link.active, .category-tab.active, .text-button:hover, .source-link:hover { color:var(--pink-dark); }
.nav-link.active:after, .eyebrow>span, .status-dot { background:var(--accent); }
.nav-count, .category-tab.active, .category-tab:hover, .search-field kbd,
.card-tag, .author-avatar, .button.secondary, .favorite-button,
.detail-tags .card-tag, .guide-steps>li>span, .info-callout { background:var(--accent-soft); color:var(--pink-dark); }
.category-tab { color:var(--muted); }
.category-dot.pink { background:#438a7c; }
.category-dot.purple { background:#ac4364; }
.card-tag.evil { color:var(--ribbon); background:var(--ribbon-soft); }
.card-tag.twins { color:var(--pink-dark); background:var(--accent-soft); }
.search-field, .control-button, .select-control, .date-panel,
.about-button, .polaroid, .art-card, dialog, .stage-button,
.skip-link, .toast, .selection-bar { background:var(--surface); border-color:var(--line); color:var(--ink); }
.search-field input::placeholder { color:var(--muted); opacity:1; }
.control-button.active, .control-button:hover, .select-control:hover { background:var(--accent-soft); border-color:var(--accent); }
.date-panel input, .date-filter input { color:var(--ink); background:var(--surface-soft); border-color:var(--line); }
.about-button:hover, .stage-button:hover, .icon-button:hover { background:var(--surface-soft); }
.art-card { box-shadow:var(--shadow); }
.art-card.selected { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft); }
.card-favorite, .card-select { background:var(--surface-glass); border-color:var(--line); color:var(--muted); }
.card-favorite[aria-pressed="true"] { color:var(--ribbon); }
.card-select[aria-pressed="true"], .button.primary, .selection-badge { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.button.primary:hover { background:var(--accent-hover); }
.art-stage { background:radial-gradient(var(--line) 1px,transparent 1px) 0 0/17px 17px,var(--surface-soft); }
.art-metadata, .detail-bottom, .site-footer, .collection-topline { border-color:var(--line); }
.hero-orbit { border-color:var(--line); }
.hero-sticker { background:var(--surface); color:var(--pink-dark); border-color:var(--line); }
.heart-stack>span { background:var(--accent-soft); color:var(--pink-dark); border-color:var(--bg); }
.heart-stack>span:nth-child(2) { background:var(--ribbon-soft); color:var(--ribbon); }
.heart-stack>span:nth-child(3) { background:var(--surface-soft); color:var(--muted); }
.doodle-star, .doodle-cross { color:var(--accent); }
.polaroid span { color:var(--muted); }
.tape { background:var(--accent-soft); }
.info-callout span, .guide-steps h3 { color:var(--ink); }
.empty-state, .image-error { background:var(--surface-soft); color:var(--muted); }
.empty-state h3 { color:var(--ink); }
.download-dialog progress, .download-dialog progress::-webkit-progress-bar { background:var(--surface-soft); }
.download-dialog progress::-webkit-progress-value { background:var(--accent); }
.download-dialog progress::-moz-progress-bar { background:var(--accent); }
#download-failures a { color:var(--pink-dark); }
dialog::backdrop { background:#120f17a6; backdrop-filter:blur(5px); }
.gallery-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; columns:auto; align-items:start; }
.gallery-column { display:flex; flex-direction:column; gap:20px; min-width:0; }
.gallery-column .art-card { margin:0; display:block; }
.load-more-region { padding:28px 10px 38px; text-align:center; }
.load-more-region p { color:var(--muted); margin:0 0 12px; font-size:12px; }
.load-more-region small { display:block; margin-top:10px; color:var(--muted); font-size:11px; }
.download-options-dialog { max-width:520px; }
.download-options { display:grid; gap:12px; margin:24px 0 18px; }
.download-option {
  display:flex; align-items:center; gap:14px; padding:18px; width:100%;
  text-align:left; border:1px solid var(--line); border-radius:17px; background:var(--surface-soft);
}
.download-option:hover, .download-option:focus-visible { border-color:var(--accent); background:var(--accent-soft); }
.download-option>span:nth-child(2) { flex:1; min-width:0; }
.download-option strong { display:block; color:var(--ink); font-size:14px; margin-bottom:5px; }
.download-option strong small { display:inline-block; margin-left:5px; font-size:9px; color:var(--pink-dark); }
.download-option strong+span { display:block; color:var(--muted); font-size:11px; line-height:1.8; }
.download-option .option-icon { flex:0 0 32px; color:var(--pink-dark); font-size:27px; text-align:center; }
.download-option .option-icon .icon { width:26px; height:26px; }
.download-option>.icon { color:var(--accent); width:16px; }
.x-access-note { display:flex; gap:9px; align-items:flex-start; padding:13px; background:var(--ribbon-soft); border-radius:12px; font-size:11px!important; color:var(--ink)!important; }
.x-access-note>[data-icon] { margin-top:2px; color:var(--ribbon); }
@media(max-width:1100px) {
  .gallery-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
  .gallery-column { gap:18px; }
  .header-inner { gap:14px; }
}
@media(max-width:800px) {
  .header-inner { gap:10px; }
  .theme-toggle { padding:8px 10px; font-size:10px; }
  .about-button>span:last-child { display:none; }
}
@media(max-width:600px) {
  .gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .gallery-column { gap:12px; }
  .theme-toggle { padding:8px; }
  .theme-toggle>span { display:none; }
  .theme-toggle .icon { width:15px; height:15px; }
  .about-button { display:none; }
  .main-nav { gap:12px; }
  .download-option { padding:14px 12px; gap:10px; }
  .download-option strong { font-size:12px; }
  .download-option strong small { margin-left:0; }
}


.section-heading h2>span { color:var(--muted); background:var(--surface-soft); border-color:var(--line); }
.category-tab { border-color:var(--line); }
.text-button, .footer-brand, .toolbar-divider, .download-dialog #download-status, .download-dialog #download-help { color:var(--muted); }
.download-dialog #download-status { color:var(--ink); }
.download-illustration { color:var(--pink-dark); background:var(--accent-soft); }
#download-failures p { color:var(--muted); font-size:11px; margin:10px 0 3px; }

/* Compact gallery copy and X author attribution. */
.header-inner .main-nav { margin-left:auto; margin-right:0; }
.hero #hero-title { font-size:clamp(25px,2.6vw,37px); line-height:1.5; letter-spacing:-.4px; max-width:540px; margin:0; font-weight:700; overflow-wrap:break-word; }
.card-meta { flex-direction:column; align-items:flex-start; gap:5px; }
.card-author, .detail-author { display:flex; flex-wrap:wrap; gap:4px 7px; align-items:baseline; text-align:left; max-width:100%; }
.card-author>span:last-child { max-width:none; }
.card-author span, .detail-author span { white-space:normal; overflow-wrap:anywhere; }
.author-display-name { color:var(--ink); }
.author-handle { color:var(--muted); font-size:.9em; }
.card-author:hover .author-display-name, .detail-author:hover .author-display-name { color:var(--pink-dark); text-decoration:underline; }
.card-body { padding-top:12px; }
.art-details .detail-author { margin-top:18px; }
.detail-bottom .button.primary { width:100%; }
@media(max-width:600px) {
  .hero { min-height:400px; }
  .hero #hero-title { font-size:25px; max-width:100%; line-height:1.45; }
  .hero-art { bottom:20px; }
}


/* Stable header geometry and themed local filter popovers. */
.header-inner { display:grid; grid-template-columns:minmax(0,1fr) auto 104px; gap:24px; }
.header-inner .main-nav { margin:0; justify-self:end; }
#theme-toggle { width:104px; min-width:104px; justify-self:end; padding:9px 12px; }
#theme-toggle>span { display:inline; }
#discover-nav { white-space:nowrap; }
.section-heading .collection-title { font-size:13px; letter-spacing:2.6px; font-weight:700; color:var(--muted); margin:0; }
.category-tabs { flex-wrap:wrap; }
.collection-topline { gap:12px; }
.select-control { position:relative; cursor:default; }
.select-control>select { display:none; }
.select-trigger { color:var(--ink); padding:0; flex:1; text-align:left; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:inherit; }
.select-control>[data-icon]:last-of-type { pointer-events:none; }
.select-menu { position:absolute; z-index:40; right:0; top:calc(100% + 8px); width:max-content; min-width:100%; max-width:min(280px,calc(100vw - 32px)); max-height:260px; overflow:auto; padding:6px; background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:0 12px 35px #0002; }
.select-option { display:block; width:100%; border-radius:9px; text-align:left; padding:9px 12px; color:var(--ink); white-space:normal; overflow-wrap:anywhere; font-size:12px; }
.select-option:hover, .select-option:focus-visible { background:var(--surface-soft); }
.select-option[aria-selected="true"] { background:var(--accent-soft); color:var(--pink-dark); }
.select-option[aria-selected="true"]:after { content:'✓'; margin-left:15px; float:right; }
#sort-trigger { width:76px; }
#author-filter-trigger { max-width:128px; }
#date-panel { width:min(340px,calc(100vw - 32px)); padding:20px; }
#date-panel input { color:var(--ink); background:var(--surface-soft); border:1px solid var(--line); border-radius:9px; padding:8px; min-width:0; width:100%; font-size:12px; }
#date-form { gap:10px; }
.calendar-header { display:flex; justify-content:space-between; align-items:center; margin:14px 0 10px; color:var(--ink); }
.calendar-header button { width:30px; height:30px; border-radius:9px; background:var(--surface-soft); }
.calendar-header button:hover { background:var(--accent-soft); }
.calendar-weekdays, .calendar-days { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:3px; text-align:center; }
.calendar-weekdays { color:var(--muted); font-size:11px; margin-bottom:6px; }
.calendar-days { margin-bottom:16px; }
.calendar-days button { aspect-ratio:1; display:grid; place-items:center; border-radius:9px; color:var(--ink); font-size:12px; padding:0; }
.calendar-days button:hover { background:var(--surface-soft); }
.calendar-days .in-range { background:var(--accent-soft); border-radius:3px; }
.calendar-days .today { box-shadow:inset 0 0 0 1px var(--accent); }
.calendar-days button[aria-pressed="true"] { background:var(--accent); color:var(--on-accent); }
.card-author, .detail-author { display:grid; grid-template-columns:auto minmax(0,1fr); gap:2px 7px; align-items:center; }
.author-avatar-image { grid-column:1; grid-row:1 / span 2; width:26px; height:26px; border-radius:50%; object-fit:cover; background:var(--surface-soft); align-self:center; flex-shrink:0; }
.card-author:not(:has(.author-avatar-image)) { display:flex; }
.author-display-name, .author-handle { grid-column:2; }
.detail-author .author-avatar-image { width:36px; height:36px; }
@media(max-width:800px) {
  .header-inner { gap:14px; grid-template-columns:minmax(0,1fr) auto 96px; }
  #theme-toggle { min-width:96px; width:96px; }
}
@media(max-width:600px) {
  .header-inner { padding:0 15px; gap:8px; grid-template-columns:minmax(0,1fr) auto 78px; }
  #theme-toggle { width:78px; min-width:78px; padding:8px 6px; gap:4px; font-size:10px; }
  #discover-nav { font-size:10px; }
  .category-tabs { gap:5px; }
  .category-tab { padding:7px 10px; }
  #date-panel { position:fixed; left:50%; right:auto; top:110px; transform:translateX(-50%); max-height:calc(100dvh - 130px); overflow:auto; }
  .select-menu { font-size:11px; }
}


.select-trigger { order:1; }
.select-control>[data-icon]:last-of-type { order:2; }
@media(max-width:600px) {
  .site-header { height:96px; }
  .header-inner { grid-template-columns:minmax(0,1fr) 90px; grid-template-rows:42px 26px; gap:4px 12px; padding:8px 15px; }
  .header-inner .brand { grid-column:1; grid-row:1; }
  .header-inner .main-nav { grid-column:1 / -1; grid-row:2; justify-self:start; }
  #theme-toggle { grid-column:2; grid-row:1; }
  .nav-link.active:after { bottom:-1px; }
}