@import url("/style-sky-diary.css");
@import url("/style-theme-layout.css");

:root {
  --ink: #17204f;
  --navy: #17458d;
  --blue: #2e78c7;
  --sky: #9ddcf4;
  --paper: #fffdf0;
  --cream: #fff4bc;
  --pink: #f99fc4;
  --yellow: #ffe461;
  --green: #82cf79;
  --red: #dd4b53;
  --shadow: #31527b;
}

* { box-sizing: border-box; }

html { min-height: 100%; scroll-behavior: smooth; }

body {
  min-height: 100vh;
  margin: 0;
  padding: 22px 12px 80px;
  color: var(--ink);
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 13px;
  background-color: #7fc7e9;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.2) 50%, transparent 50%),
    linear-gradient(rgba(255,255,255,.18) 50%, transparent 50%),
    url("/assets/clouds.png");
  background-size: 18px 18px, 18px 18px, auto;
  background-attachment: fixed;
}

a { color: #164eb0; }
a:visited { color: #6a398e; }
a:hover { color: #e13c76; background: #fff6a8; }
a:focus-visible { outline: 2px dashed #d12266; outline-offset: 2px; }

.skip-link { position: fixed; left: 8px; top: -60px; z-index: 100; background: white; padding: 8px; border: 2px solid #111; }
.skip-link:focus { top: 8px; }

.content {
  position: relative;
  z-index: 1;
  width: min(100%, 1040px);
  margin: 0 auto;
  overflow: hidden;
  background: var(--paper);
  border: 3px ridge #d9ebff;
  outline: 2px solid #1c4d8c;
  box-shadow: 8px 8px 0 rgba(29, 66, 112, .48);
}

.site-chrome {
  min-height: 30px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: center;
  padding: 4px 8px;
  color: white;
  font-family: "Courier New", monospace;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: .04em;
  background: linear-gradient(#337dcc, #17458d);
  border-bottom: 2px solid #0c2c63;
  text-shadow: 1px 1px #08234f;
}

.site-chrome nav { display: flex; }
.site-chrome nav a { padding: 3px 9px; color: #fff; border-left: 1px solid #8fc8ff; text-decoration: none; }
.site-chrome nav a:last-child { border-right: 1px solid #8fc8ff; }
.site-chrome nav a:hover { color: #152453; background: var(--yellow); text-shadow: none; }
.site-chrome nav a.site-chrome__rss,
.site-chrome nav a.site-chrome__rss:visited {
  color: #4d2b00;
  background: linear-gradient(#fff1ad, #f5aa2a);
  border-color: #fff4c7;
  text-shadow: none;
}
.site-chrome nav a.site-chrome__rss:hover { color: #7b1740; background: #fff6c4; }
.site-chrome__status { justify-self: end; }
.site-chrome__status i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #71f879; box-shadow: 0 0 5px #9fff96; }

.masthead {
  min-height: 238px;
  display: grid;
  grid-template-columns: 46% 54%;
  align-items: center;
  padding: 18px 28px;
  background:
    radial-gradient(circle at 13px 13px, rgba(255,255,255,.72) 2px, transparent 3px) 0 0 / 26px 26px,
    linear-gradient(120deg, #fff3af, #f9abd0 48%, #a8dff4 48%, #c7edff);
  border-bottom: 4px double #1a4c8b;
}

.logo { margin: 0; text-align: center; }
.logo img { display: block; width: min(100%, 410px); height: auto; margin: auto; filter: drop-shadow(3px 4px 0 rgba(255,255,255,.8)); }
.masthead-copy { padding: 12px 18px; background: rgba(255,255,255,.82); border: 2px dashed #3675b6; box-shadow: 5px 5px 0 rgba(37,80,132,.18); }
.eyebrow { margin: 0 0 5px; color: #c12f6d; font: bold 11px "Courier New", monospace; letter-spacing: .08em; }
h1 { margin: 0 0 8px; color: #1d4d94; font: bold 25px Georgia, serif; text-shadow: 2px 2px 0 #fff, 3px 3px 0 #ef79ad; }
.masthead-copy > p:last-child { margin: 0; line-height: 1.6; }

.ticker { overflow: hidden; padding: 5px 0; color: #271d59; font-weight: bold; white-space: nowrap; background: var(--yellow); border-block: 1px solid #ba8815; }
.ticker span { display: inline-block; min-width: 100%; padding-left: 100%; animation: ticker-scroll 23s linear infinite; }
@keyframes ticker-scroll { to { transform: translateX(-100%); } }

.portal-layout { display: grid; grid-template-columns: 214px 1fr; gap: 12px; align-items: start; padding: 12px; background: #d9eff8; }
.sidebar { display: grid; gap: 10px; }
.panel, .gallery-directory { background: var(--paper); border: 2px outset #b8d4e7; box-shadow: 3px 3px 0 rgba(31,76,127,.28); }
.panel h2, .window-title { margin: 0; padding: 5px 7px; color: white; font: bold 12px Verdana, sans-serif; background: linear-gradient(90deg, #17458d, #3d8ad4 65%, #8fc9ea); border-bottom: 1px solid #102d61; text-shadow: 1px 1px #102653; }
.panel-body { padding: 9px; }
.panel p { margin: 0; line-height: 1.45; }
.disclaimer { border-color: #f09aa0; }
.disclaimer h2 { background: linear-gradient(90deg, #a9203a, #de5361 65%, #f5abb0); }
.disclaimer .panel-body { color: #6d1524; background: #ffe9e2; }

.rating-guide dl { margin: 0; }
.rating-guide dl > div { display: grid; grid-template-columns: 61px 1fr; align-items: center; gap: 5px; padding: 4px 0; border-bottom: 1px dotted #96a4b0; }
.rating-guide dl > div:last-child { border: 0; }
.rating-guide dt { padding: 3px 2px; color: #17204f; font: bold 9px Verdana, sans-serif; text-align: center; border: 1px solid #445; }
.rating-guide dd { margin: 0; font-size: 10px; }
.safe-dot { background: #bdebad; }
.ecchi-dot { background: #ffe181; }
.hentai-dot { background: #f2a1a5; }

.link-panel a { display: block; margin: 3px 0; padding: 5px; background: #e6f5ff; border: 1px solid #7cadd5; text-decoration: none; }
.link-panel a:hover { background: #fff1a8; }
.mini-copy { text-align: center; font-size: 10px; }
.site-specs-button { display: block; width: 88px; height: 31px; margin: 9px auto 0; background: transparent; }
.site-specs-button img { display: block; width: 88px; height: 31px; border: 0; image-rendering: auto; }

.booru-counter { display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 54px; padding: 4px; background: #dff3ff; border: 1px solid #72a6cf; }
.booru-counter img { width: 42px; height: 48px; object-fit: contain; }
.booru-counter > div { min-width: 108px; }
.counter-digits { display: flex; justify-content: center; gap: 1px; }
.counter-digit { display: inline-block; min-width: 15px; padding: 3px 2px; color: #fff; font: bold 15px/17px "Courier New", monospace; text-align: center; background: linear-gradient(#3c78b8, #163c78); border: 1px outset #abd8ff; text-shadow: 1px 1px #071c40; }
.booru-counter small { display: block; margin-top: 3px; color: #b12662; font: bold 8px "Courier New", monospace; letter-spacing: .14em; }
.counter-note { margin-top: 5px !important; color: #54657a; font-size: 8px; text-align: center; }

.utility-main { padding: 12px; background: #d9eff8; }
.utility-window { max-width: 820px; margin: 0 auto; background: var(--paper); border: 2px outset #b8d4e7; box-shadow: 3px 3px 0 rgba(31,76,127,.28); }
.utility-window .window-title { display: flex; justify-content: space-between; }
.utility-body { padding: 12px; }
.utility-intro { margin: 0 0 12px; padding: 8px; text-align: center; background: #fff9d9; border: 1px dashed #ad9443; }
.updates-list { display: grid; gap: 10px; }
.update-entry { display: grid; grid-template-columns: 115px 1fr; background: #f7fbff; border: 1px solid #739ec2; box-shadow: 2px 2px 0 #b1cce2; }
.update-meta { padding: 9px; color: #fff; font: bold 10px/1.5 "Courier New", monospace; text-align: center; background: #245da4; }
.update-category { display: block; margin-top: 5px; padding: 2px; color: #17204f; background: #ffe06c; border: 1px solid #c59c32; }
.update-copy { padding: 9px 12px; }
.update-copy h2 { margin: 0 0 5px; color: #c3316d; font: bold 17px Georgia, serif; }
.update-copy p { margin: 0; line-height: 1.5; }
.favorites-summary { margin: 0 0 9px; padding: 6px 8px; color: #234d82; font: bold 9px "Courier New", monospace; text-align: center; background: #eef8ff; border: 1px dashed #87a9c7; }
.favorite-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 9px; }
.favorite-card { min-width: 0; padding: 6px; background: linear-gradient(#fff,#e5f3ff); border: 1px solid #739ec2; box-shadow: 2px 2px 0 #b1cce2; }
.favorite-card img { display: block; width: 100%; aspect-ratio: 1/1; object-fit: cover; border: 1px solid #273b71; }
.favorite-card h2 { margin: 5px 0; overflow: hidden; color: #17204f; font: bold 11px Verdana, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.favorite-preview { display: block; width: 100%; margin: 0; padding: 0; background: transparent; border: 0; }
.favorite-preview:focus-visible { outline: 3px dashed #ef5c9c; outline-offset: 2px; }
.favorite-actions { display: flex; gap: 4px; }
.favorite-actions a, .favorite-actions button, .empty-action { flex: 1; padding: 5px; color: #17204f; font: bold 9px Verdana, sans-serif; text-align: center; text-decoration: none; background: #ffec97; border: 2px outset #fff; }
.favorite-actions button { background: #f3abb3; }
.empty-state { padding: 28px 12px; text-align: center; background: #fff9d9; border: 2px dashed #c59c32; }
.empty-action { display: inline-block; margin-top: 8px; }

#favorites-pagination-container { padding: 11px 4px 0; }
#favorites-pagination-heading { width: fit-content; margin: 0 auto 5px; padding: 3px 14px; color: #fff; font: bold 11px Verdana, sans-serif; background: #245da4; border: 1px solid #163b77; }
.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.pagination li button { display: block; min-width: 30px; padding: 6px 9px; color: #17204f; font: 11px Verdana, sans-serif; background: #e1eff8; border: 2px outset #fff; }
.pagination li button:hover { background: #fff1a0; }
.pagination li button.active { color: #fff; background: #d64179; border-color: #f6b4ce; }
.pagination li button:disabled { color: #888; background: #ddd; cursor: not-allowed; }

.modal { display: none; position: fixed; z-index: 10000; inset: 0; padding: 38px 18px 30px; overflow: auto; background: rgba(12,29,61,.92); }
.modal-content { position: relative; width: min(94%, 1050px); margin: 0 auto; padding: 27px 8px 8px; background: #c7dce9; border: 3px outset #e7f6ff; box-shadow: 8px 8px 0 rgba(0,0,0,.48); }
.modal-content::before { content: "Aizumanga Image Viewer"; position: absolute; left: 4px; right: 4px; top: 4px; height: 20px; padding: 3px 6px; color: #fff; font: bold 11px Verdana, sans-serif; text-align: left; background: linear-gradient(90deg, #17458d, #4d92d1); }
.close { position: fixed; z-index: 10002; top: 8px; right: 18px; width: 30px; height: 26px; padding: 0; color: #17204f; font: bold 23px/20px Arial, sans-serif; background: #ddd; border: 2px outset #fff; }
.close:hover, .close:focus { color: #fff; background: #d54458; }
.mySlides { display: none; position: relative; padding: 2px; background: #101a33; }
.mySlides.is-loading { min-height: min(60vh, 600px); }
.mySlides.is-loading::before { content: "LOADING MEDIA..."; position: absolute; left: 50%; top: 50%; color: #d8efff; font: bold 11px "Courier New", monospace; letter-spacing: 1px; transform: translate(-50%, -50%); animation: loading-blink .85s steps(2, end) infinite; }
.mySlides.is-loading img, .mySlides.is-loading video { position: relative; z-index: 1; }
@keyframes loading-blink { 50% { opacity: .35; } }
.mySlides img, .mySlides video { display: block; width: 100%; max-height: 74vh; margin: auto; object-fit: contain; background: #101a33; }
.prev, .next { position: absolute; top: 37%; width: auto; margin-top: -30px; padding: 12px 15px; color: #fff; font: bold 45px Arial, sans-serif; user-select: none; background: rgba(20,55,104,.55); border: 1px solid rgba(255,255,255,.65); }
.prev { left: 10px; }
.next { right: 10px; }
.prev:hover, .next:hover { color: #17204f; background: #ffe46a; }
.caption-container { padding: 6px 16px; color: #fff; text-align: center; background: #17458d; border-top: 2px solid #79ace0; }
.caption-container p { margin: 0; font-weight: bold; }
.modal-content > .row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 7px; }
.modal-content > .row .column { min-width: 0; padding: 3px; background: linear-gradient(#fff, #ddecf8); border: 2px outset #c8e2f3; }
.modal-content > .row img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; opacity: .62; border: 1px solid #20376b; }
.modal-content > .row img.active, .modal-content > .row img:hover { opacity: 1; outline: 2px solid #f45c9b; }

.gallery-directory { min-width: 0; }
.window-title { display: flex; justify-content: space-between; }
.window-buttons { color: #fff; letter-spacing: .2em; }
.directory-intro { padding: 8px 10px; text-align: center; background: #fff9d9; border-bottom: 1px dashed #ad9443; }
.directory-intro h2 { margin: 0; color: #c3316d; font: bold 21px Georgia, serif; }
.directory-intro p { margin: 3px 0; }
.gallery-favorites-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 172px; margin: 7px auto 2px; padding: 7px 14px; color: #17204f; font: bold 10px Verdana, sans-serif; text-decoration: none; background: linear-gradient(#fff7bb, #ffd95a); border: 2px outset #fff; box-shadow: 2px 2px 0 #9d7c27; }
.gallery-favorites-button:visited { color: #17204f; }
.gallery-favorites-button:hover { color: #8d1f59; background: #fff4a0; }
.gallery-favorites-button:active { border-style: inset; box-shadow: none; }
.gallery-quick-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.random-image-control { display: inline-flex; align-items: center; gap: 7px; margin-top: 5px; padding: 3px 6px 3px 3px; background: #e6f5ff; border: 1px solid #7ca5c3; }
.random-image-control button { min-height: 31px; padding: 6px 12px; color: #fff; font: bold 10px Verdana, sans-serif; background: linear-gradient(#ff718a,#bd1c49); border: 2px outset #ffb5c2; text-shadow: 1px 1px #7b1732; cursor: pointer; }
.random-image-control label { color: #294f71; font: bold 9px Verdana, sans-serif; white-space: nowrap; }
.random-image-note { max-width: 560px; margin: 6px auto 0 !important; color: #7d2440; font: 9px/1.35 Verdana, sans-serif; }
.random-image-status { min-height: 13px; margin: 3px 0 0 !important; color: #315b7d; font: 9px Verdana, sans-serif; }
.random-warning { position: fixed; z-index: 2147483600; inset: 0; display: grid; place-items: center; overflow: auto; padding: 16px; background: rgba(2,12,34,.9); }
.random-warning[hidden] { display: none; }
.random-warning__window { width: min(500px,100%); max-height: calc(100vh - 32px); overflow: auto; background: #f4fbff; border: 2px solid #5f9bc6; box-shadow: 0 18px 60px #000b; }
.random-warning__body { padding: 18px; text-align: center; }
.random-warning__body h2 { margin: 0 0 8px; color: #b1163a; font: bold 21px Georgia, serif; }
.random-warning__body p { margin: 7px auto; font: 11px/1.5 Verdana, sans-serif; }
.random-warning__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin-top: 15px; }
.random-warning__actions button { padding: 8px 11px; color: #17345e; font: bold 9px Verdana, sans-serif; background: linear-gradient(#fff,#cfe8f7); border: 2px outset #fff; cursor: pointer; }
.random-warning__actions button:first-child { color: #fff; background: linear-gradient(#f0667d,#ad123c); border-color: #ffadbb; text-shadow: 1px 1px #76102e; }

.character-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; padding: 10px; background: #f7fbff; }
.character-card { min-width: 0; padding: 5px; background: linear-gradient(#fff, #e5f3ff); border: 1px solid #739ec2; box-shadow: 2px 2px 0 #b1cce2; transition: transform .12s ease, background .12s ease; }
.character-card:hover { transform: translate(-1px,-1px); background: #fffce5; border-color: #d28aaf; box-shadow: 3px 3px 0 #efb7ce; }
.character-card figure { margin: 0; }
.character-card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: top center; background: #b9dff2; border: 1px solid #273b71; }
.character-card figcaption { position: relative; margin-top: 4px; padding: 4px 3px; overflow: hidden; color: #17204f; font: bold 12px Georgia, serif; text-align: center; white-space: nowrap; text-overflow: ellipsis; background: #ffec97; border: 1px solid #c59c32; }
.directory-card figcaption { background: #f7b9d4; border-color: #c47c9d; }
.character-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin-top: 5px; }
.character-links a, .character-links .locked { display: block; min-width: 0; padding: 4px 1px; overflow: hidden; color: #17204f; font: bold 9px Verdana, sans-serif; text-align: center; text-decoration: none; text-overflow: ellipsis; border: 1px outset #fff; }
.character-links a:active { border-style: inset; }
.character-links .safe { background: #aee39e; }
.character-links .ecchi { background: #ffe06c; }
.character-links .hentai { background: #ec939b; }
.character-links .locked { color: #777; background: #d6d6d6; text-decoration: line-through; border-color: #aaa; }

.site-footer { padding: 10px; color: #fff; text-align: center; background: #17458d; border-top: 4px double #fff; }
.footer-links { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.footer-links a { padding: 4px 9px; color: #142556; background: #d7ecf8; border: 2px outset #fff; font-size: 11px; text-decoration: none; }
.footer-links a:active { border-style: inset; }
.site-footer p { margin: 8px 0 0; font: 10px "Courier New", monospace; }

.sticker { position: fixed; z-index: 0; pointer-events: none; image-rendering: pixelated; transform-origin: 50% 75%; filter: drop-shadow(2px 3px 0 rgba(24,49,87,.28)); animation-duration: 3s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.sticker--bob { animation-name: sticker-bob; }
.sticker--sway { animation-name: sticker-sway; }
.sticker--wiggle { animation-name: sticker-wiggle; }
.sticker--float { animation-name: sticker-float; }
@keyframes sticker-bob { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-11px) rotate(1deg); } }
@keyframes sticker-sway { 0%,100% { transform: translateX(-4px) rotate(-3deg); } 50% { transform: translateX(5px) rotate(3deg); } }
@keyframes sticker-wiggle { 0%,100% { transform: rotate(-2deg); } 35% { transform: rotate(3deg) scale(1.02); } 70% { transform: rotate(-4deg); } }
@keyframes sticker-float { 0%,100% { transform: translate(0, 2px); } 33% { transform: translate(5px, -8px) rotate(2deg); } 66% { transform: translate(-4px, -5px) rotate(-2deg); } }

.cursor-particle { position: fixed; z-index: 9999; contain: layout paint; pointer-events: none; font-weight: bold; line-height: 1; text-shadow: 0 0 3px #fff, 1px 1px 0 #36547d; will-change: transform, opacity; animation: cursor-sparkle .95s ease-out forwards; }
@keyframes cursor-sparkle { from { opacity: 1; transform: translate3d(0,0,0) scale(.85); } 35% { opacity: 1; transform: translate3d(2px,5px,0) scale(1.2); } to { opacity: 0; transform: translate3d(var(--particle-x), var(--particle-y), 0) scale(.35) rotate(100deg); } }

@media (pointer: fine) and (min-width: 761px) {
  html, body, body * {
    cursor: url("/assets/osaka-cursor.svg?v=3") 7 9, auto !important;
  }
}

@media (max-width: 860px) {
  body { padding: 0 0 60px; }
  .content { width: 100%; border-inline: 0; outline: 0; box-shadow: none; }
  .site-chrome { grid-template-columns: 1fr auto; }
  .site-chrome__brand { display: none; }
  .masthead { grid-template-columns: 1fr; padding: 15px; }
  .logo img { max-width: 420px; }
  .portal-layout { grid-template-columns: 180px 1fr; }
  .character-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .favorite-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .sticker { display: none; }
}

@media (max-width: 600px) {
  .site-chrome { font-size: 10px; }
  .site-chrome nav a { padding-inline: 5px; }
  .masthead { min-height: 0; }
  .masthead-copy { padding: 10px; }
  h1 { font-size: 21px; }
  .portal-layout { display: flex; flex-direction: column; padding: 7px; }
  .gallery-directory, .sidebar { width: 100%; }
  .sidebar { grid-template-columns: 1fr 1fr; }
  .disclaimer, .link-panel { grid-column: 1 / -1; }
  .character-grid { gap: 6px; padding: 6px; }
  .character-links { grid-template-columns: 1fr; }
  .character-links a, .character-links .locked { padding: 5px 2px; font-size: 10px; }
  .ticker span { animation-duration: 17s; }
  .update-entry { grid-template-columns: 1fr; }
  .update-meta { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker span, .sticker, .cursor-particle { animation: none; }
  .cursor-particle { display: none; }
  .ticker span { padding-left: 8px; }
}


/* Home discovery windows, button wall, and persistent theme switcher */
.site-chrome { grid-template-columns: minmax(0, 1fr) auto auto auto; }
.theme-picker { display: inline-flex; align-items: center; gap: 5px; color: #fff; font: bold 9px "Courier New", monospace; }
.theme-picker select { max-width: 116px; padding: 2px 3px; color: #17204f; font: 10px Verdana, sans-serif; background: #fffbd1; border: 2px inset #d5e8f8; }

.main-stack { min-width: 0; display: grid; gap: 12px; }
.home-window { min-width: 0; overflow: hidden; background: var(--paper); border: 2px outset #b8d4e7; box-shadow: 3px 3px 0 rgba(31,76,127,.28); }
.home-updates-list { display: grid; gap: 5px; padding: 7px; background: #f7fbff; }
.home-update-entry { display: grid; grid-template-columns: 82px minmax(0,1fr); gap: 7px; align-items: start; padding: 6px; background: #fffdf0; border: 1px solid #87a9c7; }
.home-update-entry time { padding: 3px; color: #fff; font: bold 9px "Courier New", monospace; text-align: center; background: #2c62a4; }
.home-update-entry h3 { margin: 0 0 2px; color: #b92d68; font: bold 12px Georgia, serif; }
.home-update-entry p { margin: 0; font-size: 10px; line-height: 1.35; }
.home-update-empty { margin: 0; padding: 10px; color: #596779; font: 10px "Courier New", monospace; text-align: center; background: #fff9d9; border: 1px dashed #ad9443; }
.home-updates-more { display: table; margin: 0 7px 7px auto; padding: 5px 10px; color: #17204f; background: #ffdf72; border: 2px outset #fff; box-shadow: 1px 1px 0 #7b91a7; font: bold 9px Verdana, sans-serif; text-decoration: none; }
.home-updates-more:hover { color: #8d1f59; background: #fff0a8; }
.home-updates-more:active { border-style: inset; box-shadow: none; }
.home-updates-more:focus-visible { outline: 2px solid #b92d68; outline-offset: 2px; }

/* CRTSim_Renderer.exe: before/after showcase on the home page */
.crtsim-showcase__body { display: grid; gap: 7px; padding: 8px; background: #f7fbff; }
.crtsim-showcase__intro { margin: 0; font-size: 11px; line-height: 1.4; }
.crtsim-showcase__stage { position: relative; background: #000; border: 2px inset #c8dae7; cursor: ew-resize; touch-action: pan-y; user-select: none; }
.crtsim-showcase__canvas, .crtsim-showcase__fallback { display: block; width: 100%; height: auto; }
.crtsim-showcase__canvas { position: relative; }
.crtsim-showcase__source { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.crtsim-showcase__layers, .crtsim-showcase__half { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.crtsim-showcase__half video { position: absolute; left: 0; top: -100%; width: 100%; height: 200%; object-fit: fill; }
.crtsim-showcase__half--before video { top: 0; }
.crtsim-showcase__divider { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #fff; }
.crtsim-showcase__label { position: absolute; top: 6px; padding: 2px 6px; color: #fff; font: bold 9px "Courier New", monospace; background: rgba(16,35,62,.78); pointer-events: none; }
.crtsim-showcase__label--before { left: 6px; }
.crtsim-showcase__label--after { right: 6px; }
.crtsim-showcase__slider { width: 100%; margin: 0; accent-color: #b92d68; }
.crtsim-showcase__controls { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 7px; }
.crtsim-showcase__picker { display: flex; gap: 6px; }
.crtsim-showcase__picker button { display: grid; gap: 2px; padding: 3px; color: #17204f; font: bold 9px Verdana, sans-serif; background: #e1eff8; border: 2px outset #fff; cursor: pointer; }
.crtsim-showcase__picker button[aria-pressed="true"] { background: #ffdf72; border-style: inset; }
.crtsim-showcase__picker img { display: block; width: 72px; height: 50px; object-fit: cover; background: #000; }
.crtsim-showcase__actions { display: flex; flex-wrap: wrap; gap: 6px; }
.crtsim-showcase__button, .crtsim-showcase__play { display: inline-flex; align-items: center; min-height: 31px; padding: 5px 12px; color: #17204f; font: bold 10px Verdana, sans-serif; text-decoration: none; background: linear-gradient(#fff7bb, #ffd95a); border: 2px outset #fff; box-shadow: 2px 2px 0 #9d7c27; cursor: pointer; }
.crtsim-showcase__play { background: linear-gradient(#fff, #cfe8f7); box-shadow: 2px 2px 0 #7b91a7; }
.crtsim-showcase__button:active, .crtsim-showcase__play:active { border-style: inset; box-shadow: none; }
.crtsim-showcase :focus-visible { outline: 2px solid #b92d68; outline-offset: 2px; }
.crtsim-showcase [hidden] { display: none !important; }

.gallery-search-form { display: grid; grid-template-columns: minmax(180px, 2fr) repeat(3, minmax(105px, 1fr)) auto auto; gap: 6px; align-items: end; padding: 8px; background: #dff1fb; border-bottom: 1px solid #80a9cb; }
.gallery-search-form label { display: grid; gap: 3px; min-width: 0; color: #234d82; font: bold 9px Verdana, sans-serif; }
.gallery-search-form input, .gallery-search-form select { width: 100%; min-width: 0; height: 27px; padding: 3px 5px; color: #17204f; font: 10px Verdana, sans-serif; background: #fff; border: 2px inset #c8dae7; }
.gallery-search-form button { height: 27px; padding: 3px 8px; color: #17204f; font: bold 9px Verdana, sans-serif; background: #ffdf72; border: 2px outset #fff; }
.gallery-search-form button:active { border-style: inset; }
.search-count { font: bold 9px "Courier New", monospace; }
.gallery-search-results { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px; max-height: 420px; padding: 8px; overflow: auto; background: #f7fbff; }
.search-result-card { min-width: 0; display: grid; grid-template-columns: 58px minmax(0,1fr); gap: 6px; padding: 5px; background: #fff; border: 1px solid #86a9c7; box-shadow: 2px 2px 0 #c4d8e8; }
.search-result-thumb img { display: block; width: 58px; height: 58px; object-fit: cover; background: #b9dff2; border: 1px solid #273b71; }
.search-result-thumb-fallback { display: none; width: 58px; height: 58px; align-items: center; justify-content: center; color: #fff; background: repeating-linear-gradient(135deg, #245da4 0 7px, #3575b8 7px 14px); border: 1px solid #273b71; font: bold 8px "Courier New", monospace; letter-spacing: .5px; }
.search-result-card.is-thumb-missing .search-result-thumb img { display: none; }
.search-result-card.is-thumb-missing .search-result-thumb-fallback { display: flex; }
.search-result-copy { min-width: 0; align-self: center; }
.search-result-title { display: block; overflow: hidden; font: bold 10px Verdana, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.search-result-meta { margin: 4px 0 0; color: #5c6e80; font: 8px/1.35 "Courier New", monospace; }
.search-message, .search-limit-note { grid-column: 1 / -1; margin: 0; padding: 13px; color: #596779; font: 10px "Courier New", monospace; text-align: center; background: #fff9d9; border: 1px dashed #ad9443; }
.search-limit-note { margin-top: 3px; }

.button-wall { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.button-wall a { display: block; width: 88px; height: 31px; background: transparent; }
.button-wall img { display: block; width: 88px; height: 31px; object-fit: fill; image-rendering: auto; border: 0; }
.button-wall-note { margin: 8px 0 0 !important; color: #596779; font: 8px "Courier New", monospace; text-align: center; }

html[data-theme="strawberry"] {
  --ink: #5d2445;
  --navy: #8f2e67;
  --blue: #c84f89;
  --sky: #f5b6d0;
  --paper: #fff4f8;
  --cream: #ffe5ef;
  --pink: #f277ac;
  --yellow: #ffe58a;
  --shadow: #8f496d;
}
html[data-theme="strawberry"] body { background-color: #e995bd; background-image: radial-gradient(#fff7fb 2px, transparent 3px), url("/assets/clouds.png"); background-size: 22px 22px, auto; }
html[data-theme="strawberry"] .site-chrome,
html[data-theme="strawberry"] .panel h2,
html[data-theme="strawberry"] .window-title,
html[data-theme="strawberry"] .site-footer { background: linear-gradient(90deg, #7e295d, #d75e98 70%, #f3a9c9); }
html[data-theme="strawberry"] .portal-layout,
html[data-theme="strawberry"] .utility-main,
html[data-theme="strawberry"] .gallery-search-form { background-color: #f8d6e5; }

html[data-theme="midnight"] {
  --ink: #292550;
  --navy: #20205f;
  --blue: #5146a5;
  --sky: #6571b9;
  --paper: #f2f0ff;
  --cream: #e8e3ff;
  --pink: #d273c6;
  --yellow: #f6db68;
  --shadow: #17163f;
}
html[data-theme="midnight"] body { background-color: #090d28; background-image: radial-gradient(#d7dcff 1px, transparent 2px), linear-gradient(#121844, #090d28); background-size: 25px 25px, auto; }
html[data-theme="midnight"] .site-chrome,
html[data-theme="midnight"] .panel h2,
html[data-theme="midnight"] .window-title,
html[data-theme="midnight"] .site-footer { background: linear-gradient(90deg, #17194e, #5146a5 68%, #9169b8); }
html[data-theme="midnight"] .portal-layout,
html[data-theme="midnight"] .utility-main { background: #ccd0ee; }
html[data-theme="midnight"] .character-grid,
html[data-theme="midnight"] .gallery-search-results,
html[data-theme="midnight"] .home-updates-list { background: #e4e3f5; }


/* Frutiger Aero / Windows Vista: nature, aurora, bokeh, and Aero Glass */
html[data-theme="frutiger"] {
  --ink: #12374d;
  --navy: #075b91;
  --blue: #168fc4;
  --sky: #7bdcff;
  --paper: #f7fcff;
  --cream: #efffd8;
  --pink: #ed77ad;
  --yellow: #fff47a;
  --green: #6fce36;
  --red: #d94450;
  --shadow: #145e83;
}
html[data-theme="frutiger"] body {
  color: var(--ink);
  font-family: "Segoe UI", Tahoma, Verdana, sans-serif;
  background-color: #198fc7;
  background-image:
    radial-gradient(ellipse at 78% 8%, rgba(255,255,255,.72) 0 4%, rgba(157,238,255,.24) 12%, transparent 29%),
    linear-gradient(128deg, transparent 0 31%, rgba(104,238,255,.34) 40%, rgba(107,202,255,.08) 48%, transparent 58%),
    linear-gradient(52deg, rgba(8,70,133,.7), transparent 35%, rgba(111,219,255,.34) 66%, rgba(21,112,168,.62)),
    url("/assets/clouds.png");
  background-size: cover, cover, cover, auto;
  background-position: center, center, center, center top;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat-x;
  background-attachment: scroll;
}
html[data-theme="frutiger"] body::before,
html[data-theme="frutiger"] body::after {
  content: "";
  position: fixed;
  z-index: 0;
  pointer-events: none;
}
html[data-theme="frutiger"] body::before {
  right: 0;
  bottom: 0;
  left: 0;
  height: 36vh;
  min-height: 205px;
  background:
    radial-gradient(ellipse at 7% 110%, #2f9f25 0 35%, transparent 36%),
    radial-gradient(ellipse at 39% 118%, #79d638 0 47%, transparent 48%),
    radial-gradient(ellipse at 77% 112%, #45b52a 0 42%, transparent 43%),
    linear-gradient(to bottom, transparent 0 46%, #7cda3c 47%, #1e851f 100%);
}
html[data-theme="frutiger"] body::after {
  inset: 0;
  opacity: .46;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.68) 0 7px, rgba(196,245,255,.2) 8px 11px, transparent 12px),
    radial-gradient(circle, rgba(255,255,255,.48) 0 3px, rgba(193,242,255,.16) 4px 7px, transparent 8px);
  background-size: 260px 310px, 190px 245px;
  background-position: 28px 70px, 115px 145px;
}
html[data-theme="frutiger"] .content {
  background: linear-gradient(135deg, rgba(238,250,255,.97), rgba(216,244,250,.94));
  border: 1px solid rgba(255,255,255,.92);
  outline: 1px solid rgba(1,53,91,.74);
  border-radius: 12px;
  box-shadow:
    0 14px 36px rgba(0,38,73,.5),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 18px rgba(145,232,255,.32);
}
html[data-theme="frutiger"] .site-chrome,
html[data-theme="frutiger"] .site-footer {
  color: #fff;
  background:
    linear-gradient(to bottom, rgba(138,216,245,.78) 0, rgba(40,127,178,.86) 47%, rgba(4,54,91,.92) 51%, rgba(3,31,57,.94) 100%);
  border-color: rgba(1,40,70,.9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), inset 0 -1px 0 rgba(0,0,0,.35);
  text-shadow: 0 1px 2px #002d4a;
}
html[data-theme="frutiger"] .site-chrome nav a {
  color: #fff;
  border-color: rgba(220,248,255,.35);
  background: linear-gradient(to bottom, rgba(255,255,255,.16), rgba(255,255,255,.03));
}
html[data-theme="frutiger"] .panel h2,
html[data-theme="frutiger"] .window-title {
  color: #0c3047;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.94) 0, rgba(215,245,255,.85) 44%, rgba(99,185,226,.82) 50%, rgba(36,128,183,.88) 100%);
  border-color: rgba(17,92,135,.75);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0,58,96,.28);
  text-shadow: 0 1px 0 rgba(255,255,255,.9);
}
html[data-theme="frutiger"] .window-buttons {
  padding: 1px 5px;
  color: #fff;
  background: linear-gradient(to bottom, rgba(255,255,255,.42), rgba(9,74,117,.55));
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 0 0 6px 6px;
  text-shadow: 0 1px 2px #00385d;
}
html[data-theme="frutiger"] .disclaimer h2 {
  color: #fff;
  background: linear-gradient(to bottom, #ffadb7, #dc4d5e 49%, #a72339 52%, #7e1429);
  text-shadow: 0 1px 1px #651225;
}
html[data-theme="frutiger"] .masthead {
  background:
    radial-gradient(circle at 78% 16%, rgba(255,255,255,.96) 0 2%, rgba(171,244,255,.6) 3%, transparent 13%),
    linear-gradient(122deg, transparent 0 46%, rgba(100,239,226,.32) 52%, transparent 64%),
    linear-gradient(to top, rgba(61,166,39,.96) 0 18%, rgba(116,215,57,.84) 19%, transparent 31%),
    linear-gradient(to bottom, rgba(41,157,215,.7), rgba(210,248,255,.78));
  border-color: rgba(8,92,139,.72);
}
html[data-theme="frutiger"] .masthead-copy {
  background: linear-gradient(135deg, rgba(255,255,255,.97), rgba(213,241,250,.92));
  border: 1px solid rgba(255,255,255,.96);
  border-radius: 9px;
  box-shadow: 0 7px 18px rgba(0,64,102,.28), inset 0 1px 7px #fff;
}
html[data-theme="frutiger"] h1 {
  color: #075f96;
  font-family: "Segoe UI", Tahoma, sans-serif;
  font-weight: 600;
  text-shadow: 0 1px 0 #fff, 0 0 8px rgba(107,218,255,.65);
}
html[data-theme="frutiger"] .ticker {
  color: #213d1e;
  background: linear-gradient(to bottom, rgba(250,255,210,.94), rgba(207,234,122,.9));
  border-color: #7da64e;
  box-shadow: inset 0 1px 0 #fff;
}
html[data-theme="frutiger"] .portal-layout,
html[data-theme="frutiger"] .utility-main {
  background: rgba(221,241,246,.62);
}
html[data-theme="frutiger"] .panel,
html[data-theme="frutiger"] .gallery-directory,
html[data-theme="frutiger"] .home-window,
html[data-theme="frutiger"] .utility-window {
  overflow: hidden;
  background: rgba(248,253,255,.97);
  border: 1px solid rgba(255,255,255,.94);
  outline: 1px solid rgba(27,113,158,.58);
  border-radius: 7px;
  box-shadow: 0 7px 14px rgba(0,72,110,.23), inset 0 1px 0 #fff;
}
html[data-theme="frutiger"] .panel h2,
html[data-theme="frutiger"] .window-title { border-radius: 6px 6px 0 0; }
html[data-theme="frutiger"] .gallery-search-form,
html[data-theme="frutiger"] .home-updates-list,
html[data-theme="frutiger"] .character-grid,
html[data-theme="frutiger"] .gallery-search-results,
html[data-theme="frutiger"] .link-us-body {
  background: linear-gradient(135deg, rgba(252,255,255,.9), rgba(217,241,247,.76));
}
html[data-theme="frutiger"] .character-card,
html[data-theme="frutiger"] .search-result-card,
html[data-theme="frutiger"] .favorite-card,
html[data-theme="frutiger"] .home-update-entry {
  background: linear-gradient(to bottom, rgba(255,255,255,.98), rgba(224,242,248,.94));
  border-color: #86b9d0;
  border-radius: 5px;
  box-shadow: 0 3px 7px rgba(14,89,122,.17), inset 0 1px 0 #fff;
}
html[data-theme="frutiger"] .character-card figcaption {
  background: linear-gradient(to bottom, #fff, #d6edf5 48%, #add5e7 52%, #d9eff7);
  border-color: #79a9c1;
  border-radius: 4px;
}
html[data-theme="frutiger"] .directory-card figcaption {
  background: linear-gradient(to bottom, #edffd8, #a9dc68 48%, #69b72d 52%, #9bd85a);
  border-color: #4d9728;
}
html[data-theme="frutiger"] .link-panel a,
html[data-theme="frutiger"] .footer-links a,
html[data-theme="frutiger"] .home-updates-more,
html[data-theme="frutiger"] .gallery-search-form button,
html[data-theme="frutiger"] .character-links a,
html[data-theme="frutiger"] .character-links .locked {
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.98), 0 1px 2px rgba(0,67,103,.16);
}
html[data-theme="frutiger"] .gallery-search-form button,
html[data-theme="frutiger"] .home-updates-more,
html[data-theme="frutiger"] .footer-links a {
  color: #12384e;
  background: linear-gradient(to bottom, #fff, #e4f0f4 47%, #bfdbe7 52%, #e9f4f7);
  border: 1px solid #5e93ae;
}
html[data-theme="frutiger"] .gallery-search-form button:hover,
html[data-theme="frutiger"] .home-updates-more:hover {
  background: linear-gradient(to bottom, #fff, #e8fbff 46%, #7ed5f2 52%, #c8f1ff);
  box-shadow: 0 0 5px rgba(45,185,235,.65), inset 0 1px 0 #fff;
}
html[data-theme="frutiger"] .theme-picker select,
html[data-theme="frutiger"] .gallery-search-form input,
html[data-theme="frutiger"] .gallery-search-form select {
  color: #17394c;
  background: rgba(255,255,255,.9);
  border: 1px solid #6c9db4;
  border-radius: 3px;
  box-shadow: inset 0 1px 4px rgba(7,80,112,.12), 0 1px 0 #fff;
}
html[data-theme="frutiger"] .booru-counter {
  background: linear-gradient(135deg, rgba(248,255,255,.95), rgba(199,235,246,.88));
  border-color: #72adc5;
  border-radius: 5px;
}
html[data-theme="frutiger"] .counter-digit {
  background: linear-gradient(to bottom, #62badc, #084e80);
  border-color: #c7efff;
}
html[data-theme="frutiger"] .link-us-preview {
  border-color: #80afc2;
  border-radius: 4px;
}
html[data-theme="frutiger"] a:hover { background: #e3f8ff; }
html[data-theme="frutiger"] .gallery-search-results { scrollbar-color: #75b7d4 rgba(227,243,248,.8); }
html[data-theme="frutiger"] .gallery-favorites-button { color: #12384e; background: linear-gradient(to bottom, #fff, #e4f0f4 47%, #9fdcf0 52%, #e9f4f7); border: 1px solid #5e93ae; box-shadow: 0 2px 5px rgba(0,67,103,.24), inset 0 1px 0 #fff; }
/* Windows XP Luna: royal blue chrome, plastic controls, and a Bliss-like field */
html[data-theme="xp"] {
  --ink: #001b53;
  --navy: #003399;
  --blue: #0054e3;
  --sky: #6abbea;
  --paper: #fff;
  --cream: #ffffe1;
  --pink: #ef8c9e;
  --yellow: #fff36a;
  --green: #3caa27;
  --red: #e3422f;
  --shadow: #003c8f;
}
html[data-theme="xp"] body {
  color: #000;
  font-family: Tahoma, Verdana, Arial, sans-serif;
  background-color: #58abe0;
  background-image:
    linear-gradient(to bottom, rgba(67,154,220,.18), rgba(205,238,255,.1) 64%, rgba(255,255,255,.18)),
    url("/assets/clouds.png");
  background-size: cover, auto;
  background-position: center, center top;
  background-repeat: no-repeat, repeat-x;
  background-attachment: fixed;
}
html[data-theme="xp"] body::before {
  content: "";
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  height: 39vh;
  min-height: 220px;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 18% 115%, #3b9c16 0 40%, transparent 41%),
    radial-gradient(ellipse at 60% 123%, #75c82d 0 55%, transparent 56%),
    linear-gradient(to bottom, transparent 0 49%, #70bd2e 50%, #2c8216 100%);
}
html[data-theme="xp"] .content {
  background: #ece9d8;
  border: 3px solid #0054e3;
  outline: 1px solid #001a6e;
  border-radius: 8px 8px 2px 2px;
  box-shadow: 7px 8px 0 rgba(0,40,110,.35);
}
html[data-theme="xp"] .site-chrome,
html[data-theme="xp"] .panel h2,
html[data-theme="xp"] .window-title,
html[data-theme="xp"] .site-footer {
  color: #fff;
  font-family: Tahoma, Verdana, sans-serif;
  background:
    linear-gradient(to bottom, #3b8cf5 0, #1468e5 12%, #0054d9 48%, #0647c6 82%, #1e62e8 100%);
  border-color: #003caa;
  box-shadow: inset 0 1px 0 #75b7ff, inset 0 -2px 0 #00369b;
  text-shadow: 1px 1px 1px #002d91;
}
html[data-theme="xp"] .site-chrome {
  border-radius: 5px 5px 0 0;
}
html[data-theme="xp"] .site-chrome nav a {
  color: #fff;
  border-color: rgba(183,215,255,.55);
}
html[data-theme="xp"] .site-chrome__status i {
  background: #48be27;
  box-shadow: inset 0 1px 0 #baff93, 0 0 3px #fff;
}
html[data-theme="xp"] .window-buttons {
  padding: 1px 4px;
  color: #fff;
  background: linear-gradient(to bottom, #6ea7fa, #155bd5);
  border: 1px solid #fff;
  border-radius: 3px;
  text-shadow: 1px 1px #00399a;
}
html[data-theme="xp"] .disclaimer h2 {
  background: linear-gradient(to bottom, #ff8b78, #e3422f 45%, #bd2418 52%, #e35642);
}
html[data-theme="xp"] .masthead {
  background:
    radial-gradient(ellipse at 18% 118%, #3e9f18 0 39%, transparent 40%),
    radial-gradient(ellipse at 64% 123%, #7bca31 0 53%, transparent 54%),
    linear-gradient(to bottom, #56ace3 0 68%, #72be2f 69%, #367f17 100%);
  border-color: #0054e3;
}
html[data-theme="xp"] .masthead-copy {
  color: #000;
  background: #fff;
  border: 1px solid #7f9db9;
  border-radius: 3px;
  box-shadow: none;
}
html[data-theme="xp"] h1 {
  color: #003399;
  font-family: Tahoma, Verdana, sans-serif;
  font-weight: bold;
  text-shadow: none;
}
html[data-theme="xp"] .eyebrow { color: #008000; }
html[data-theme="xp"] .ticker {
  color: #000;
  background: #ffffe1;
  border-color: #808080;
  box-shadow: inset 1px 1px 0 #fff;
}
html[data-theme="xp"] .portal-layout,
html[data-theme="xp"] .utility-main {
  background: #ece9d8;
}
html[data-theme="xp"] .panel,
html[data-theme="xp"] .gallery-directory,
html[data-theme="xp"] .home-window,
html[data-theme="xp"] .utility-window {
  overflow: hidden;
  background: #fff;
  border: 2px solid #0054e3;
  border-radius: 7px 7px 2px 2px;
  box-shadow: 2px 2px 0 rgba(0,43,135,.22);
}
html[data-theme="xp"] .panel h2,
html[data-theme="xp"] .window-title { border-radius: 4px 4px 0 0; }
html[data-theme="xp"] .gallery-search-form,
html[data-theme="xp"] .home-updates-list,
html[data-theme="xp"] .character-grid,
html[data-theme="xp"] .gallery-search-results,
html[data-theme="xp"] .link-us-body {
  background: #fff;
}
html[data-theme="xp"] .gallery-search-form {
  border-bottom-color: #7f9db9;
}
html[data-theme="xp"] .character-card,
html[data-theme="xp"] .search-result-card,
html[data-theme="xp"] .favorite-card,
html[data-theme="xp"] .home-update-entry {
  background: linear-gradient(to bottom, #fff, #eef5ff);
  border: 1px solid #7f9db9;
  border-radius: 2px;
  box-shadow: 1px 1px 0 #d5e4f4;
}
html[data-theme="xp"] .character-card:hover {
  background: #ffffe1;
  border-color: #e68b2c;
  box-shadow: 2px 2px 0 #f5c078;
}
html[data-theme="xp"] .character-card figcaption {
  color: #003399;
  background: linear-gradient(to bottom, #fff, #d9eaff);
  border: 1px solid #7f9db9;
  border-radius: 2px;
}
html[data-theme="xp"] .directory-card figcaption {
  color: #165b0b;
  background: linear-gradient(to bottom, #f4ffe9, #c7e7a8);
  border-color: #78a850;
}
html[data-theme="xp"] .link-panel a {
  color: #003399;
  background: #fff;
  border-color: #7f9db9;
}
html[data-theme="xp"] .gallery-search-form button,
html[data-theme="xp"] .home-updates-more,
html[data-theme="xp"] .footer-links a,
html[data-theme="xp"] .favorite-actions a,
html[data-theme="xp"] .favorite-actions button,
html[data-theme="xp"] .empty-action {
  color: #000;
  background: linear-gradient(to bottom, #fff, #ece9d8);
  border: 1px solid #003c74;
  border-radius: 3px;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #aca899;
  text-shadow: none;
}
html[data-theme="xp"] .gallery-search-form button:hover,
html[data-theme="xp"] .home-updates-more:hover {
  background: linear-gradient(to bottom, #fff, #dcecff);
  box-shadow: inset 0 0 0 1px #ffcf70;
}
html[data-theme="xp"] .theme-picker select,
html[data-theme="xp"] .gallery-search-form input,
html[data-theme="xp"] .gallery-search-form select,
html[data-theme="xp"] .link-us-code-row textarea {
  color: #000;
  background: #fff;
  border: 2px inset #7f9db9;
  border-radius: 0;
  box-shadow: none;
}
html[data-theme="xp"] .safe-dot,
html[data-theme="xp"] .character-links .safe { background: #c6e7b7; }
html[data-theme="xp"] .ecchi-dot,
html[data-theme="xp"] .character-links .ecchi { background: #fff2a6; }
html[data-theme="xp"] .hentai-dot,
html[data-theme="xp"] .character-links .hentai { background: #f3b1b1; }
html[data-theme="xp"] .booru-counter {
  background: #d6e8ff;
  border: 1px solid #7f9db9;
}
html[data-theme="xp"] .counter-digit {
  background: linear-gradient(to bottom, #3b8cf5, #003caa);
  border-color: #a9d1ff;
}
html[data-theme="xp"] .gallery-search-results { scrollbar-color: #9dbce6 #ece9d8; }
html[data-theme="xp"] .gallery-favorites-button { color: #fff; background: linear-gradient(to bottom, #65c94b, #2a9a20 48%, #1f7e18 52%, #45ad30); border: 2px outset #a8e59a; box-shadow: 2px 2px 0 #1c6518; text-shadow: 1px 1px #155b10; }
@media (prefers-reduced-motion: reduce) {
  html[data-theme="frutiger"] body::after { display: none; }
  .mySlides.is-loading::before { animation: none; }
}

@media (max-width: 860px), (hover: none) {
  html[data-theme="frutiger"] body::after { display: none; }
  html[data-theme="frutiger"] body::before { position: absolute; height: 250px; min-height: 0; opacity: .78; }
  html[data-theme="frutiger"] .content,
  html[data-theme="frutiger"] .panel,
  html[data-theme="frutiger"] .gallery-directory,
  html[data-theme="frutiger"] .home-window,
  html[data-theme="frutiger"] .utility-window { box-shadow: 0 3px 8px rgba(0,62,98,.2), inset 0 1px 0 #fff; }
}

@media (max-width: 980px) {
  .gallery-search-form { grid-template-columns: 2fr 1fr 1fr; }
  .gallery-search-form label:nth-of-type(4), .gallery-search-form button { grid-row: 2; }
  .gallery-search-results { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 860px) {
  .site-chrome { grid-template-columns: minmax(0,1fr) auto auto; }
  .theme-picker span { display: none; }
}

@media (max-width: 600px) {
  .site-chrome { grid-template-columns: minmax(0,1fr) auto; }
  .site-chrome__status { display: none; }
  .theme-picker select { max-width: 92px; }
  .gallery-search-form { grid-template-columns: 1fr 1fr; }
  .gallery-search-form label, .gallery-search-form label:nth-of-type(4), .gallery-search-form button { grid-row: auto; }
  .search-query { grid-column: 1 / -1; }
  .gallery-search-results { grid-template-columns: 1fr; max-height: 520px; }
  .home-update-entry { grid-template-columns: 70px minmax(0,1fr); }
  .modal { padding: 34px 0 18px; }
  .modal-content { width: 100%; padding-inline: 4px; border-inline: 0; box-shadow: none; }
  .close { right: 6px; }
  .prev, .next { top: 34%; padding: 9px 11px; font-size: 32px; }
  .prev { left: 4px; }
  .next { right: 4px; }
}


/* Link-to-us web button */
.link-us-body { display: grid; grid-template-columns: 118px minmax(0,1fr); gap: 10px; padding: 10px; background: #f7fbff; }
.link-us-preview { display: grid; place-content: center; justify-items: center; min-height: 112px; padding: 9px; background: repeating-conic-gradient(#ddecf6 0 25%, #fff 0 50%) 0 0 / 10px 10px; border: 2px inset #c6dce9; }
.link-us-preview p { margin: 0 0 8px; padding: 2px 5px; color: #fff; background: #c12f6d; border: 1px solid #762044; font: bold 8px "Courier New", monospace; letter-spacing: .12em; }
.link-us-preview a { display: block; width: 88px; height: 31px; background: transparent; }
.link-us-preview img { display: block; width: 88px; height: 31px; border: 0; image-rendering: auto; }
.link-us-copy { min-width: 0; }
.link-us-copy h2 { margin: 0 0 4px; color: #c3316d; font: bold 17px Georgia, serif; }
.link-us-copy > p { margin: 0 0 7px; font-size: 10px; line-height: 1.45; }
.link-us-copy label { display: block; margin-bottom: 3px; color: #234d82; font: bold 9px Verdana, sans-serif; }
.link-us-code-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px; align-items: stretch; }
.link-us-code-row textarea { width: 100%; min-height: 54px; resize: vertical; padding: 5px; color: #17204f; background: #fffdf0; border: 2px inset #c8dae7; font: 9px/1.35 "Courier New", monospace; }
.link-us-code-row button { min-width: 74px; padding: 5px 7px; color: #17204f; background: #ffdf72; border: 2px outset #fff; font: bold 9px Verdana, sans-serif; }
.link-us-code-row button:active { border-style: inset; }
.copy-link-status { min-height: 14px; margin: 4px 0 0 !important; color: #596779; font: 8px "Courier New", monospace; }
@media (max-width: 600px) {
  .link-us-body { grid-template-columns: 1fr; }
  .link-us-preview { min-height: 82px; }
  .link-us-code-row { grid-template-columns: 1fr; }
  .link-us-code-row button { min-height: 31px; }
}