:root {
  --hero-rain: url('/rain-pattern.svg');
  --hero-wave: url('/wave.svg');
  --cursor-default: url('/default_v2.svg');
  --cursor-text: url('/highlight.svg');
  --cursor-clickable: url('/clickable.svg');
  color-scheme: light;
  --reflection-bg: #E3E8F3;
  --reflection-water: #CFD6E6;
  --reflection-ink: #231F20;
  --reflection-muted: #203D75;
  --reflection-rain-opacity: 0.68;
}
/* Fade the whole page together, including the wave and rain artwork. */
::view-transition-old(root) {
  animation: theme-fade-out 650ms ease-in-out both;
  mix-blend-mode: normal;
}
::view-transition-new(root) {
  animation: theme-fade-in 650ms ease-in-out both;
  mix-blend-mode: normal;
}
::view-transition-group(root) { animation-duration: 650ms; }
::view-transition { pointer-events: none; }
@keyframes theme-fade-out { to { opacity: 0; } }
@keyframes theme-fade-in { from { opacity: 0; } to { opacity: 1; } }
html.theme-crossfading *,
html.theme-crossfading *::before,
html.theme-crossfading *::after { transition: none !important; }
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
  transition-property: background-color, color, border-color, filter, opacity !important;
  transition-duration: 650ms !important;
  transition-timing-function: ease-in-out !important;
  transition-delay: 0s !important;
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root), ::view-transition-group(root) {
    animation: none;
  }
}
html[data-theme="night"] {
  --hero-rain: url('/rain-night.svg');
  --hero-wave: url('/wave-night.svg');
  --cursor-default: url('/default_v2-white.svg');
  --cursor-text: url('/highlight-white.svg');
  --cursor-clickable: url('/clickable-white.svg');
  color-scheme: dark;
  --reflection-bg: #231f20;
  --reflection-water: #332d2f;
  --reflection-ink: #ffffff;
  --reflection-muted: #cccccc;
  --reflection-rain-opacity: 1;
}
.theme-switch {
  position: fixed;
  top: max(clamp(28px, 5vh, 56px), env(safe-area-inset-top));
  right: max(clamp(28px, 4vw, 64px), env(safe-area-inset-right));
  z-index: 100000;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #203D75;
  cursor: var(--cursor-clickable) 8 8, pointer;
}
.theme-switch img {
  display: block;
  width: 100%;
  height: 100%;
  filter: none !important;
  pointer-events: none;
}
body.photo-modal-open .theme-switch img { content: url('/theme-dark-borderless.svg'); }
html[data-theme="night"] body.photo-modal-open .theme-switch img { content: url('/theme-light-borderless.svg'); }
.theme-switch:hover { color: #536ca4; }
.theme-switch:focus-visible { outline: 2px solid #f58e6f; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  .theme-switch { animation: none !important; }
}
html[data-theme="night"] body {
  background-color: var(--reflection-bg);
  color: var(--reflection-ink);
  --color-text: #ffffff;
  --color-background: #231f20;
  --color-blue: #cccccc;
}
html[data-theme="night"] body::before { background-image: url("/rain-night.svg"); opacity: 1; }
html[data-theme="night"] body::after { background-image: url('/wave-night.svg'); }
html[data-theme="night"] .section,
html[data-theme="night"] .section-container { background-color: var(--reflection-water); }
html[data-theme="night"] :is(.works-section, .photography-section, .today-community-section) {
  background: var(--reflection-water);
}
html[data-theme="night"] :is(.works-shell, .photography-shell) { background: transparent; }
html[data-theme="night"] :is(p, h1, h2, h3, h4, h5, h6, time, textarea,
  .introducing-text, .story-text, .description-text, .footer-text, .about-today-series,
  .aboutme-heading, .aboutme-text, .kyo-arashi-item, .belongings-description,
  .kanji, .english, #entry-title, #question-text) { color: var(--reflection-ink); }
html[data-theme="night"] :is(a, #clickable-text, .clickable-text, .today-entry-cta,
  .today-reflection-trigger, .works-filter, .share-status, .word-count,
  .photography-intro, .works-intro, .today-community-intro, .works-empty-state, .today-community-empty, .today-community-kicker) {
  color: var(--reflection-muted);
}
html[data-theme="night"] :is(a, #clickable-text, .clickable-text, .works-filter, .today-entry-cta, .today-reflection-trigger):hover { color: #fff; }
html[data-theme="night"] .works-filters::after,
html[data-theme="night"] .works-filter.is-active::after { border-top-color: #cccccc; }
html[data-theme="night"] :is(.portfolio-title, .photo-modal-title) { color: #fff; }
html[data-theme="night"] :is(.works-cta, .photography-cta, #share-today-button) { color: #231F20; }
html[data-theme="night"] :is(.works-cta, .photography-cta, #share-today-button):hover { color: #fff; }
html[data-theme="night"] #answer-box { border-color: #ffffff; }
html[data-theme="night"] textarea::placeholder { color: #cccccc; }
/* The canvas retains dark ink internally, allowing lossless theme switching. */
html[data-theme="night"] #drawing-canvas { filter: invert(1); }
html[data-theme="night"] :is(.down-page-arrow img, #back-button img, #next-button img,
  #drawing-back-button img, .icon-button img, #download-button img) {
  filter: brightness(0) invert(0.78);
}
html[data-theme="night"] :is(.down-page-arrow:hover img, .today-series-page button:hover img,
  .today-series-page button:focus-visible img) { filter: brightness(0) invert(1); }
html[data-theme="night"] .theme-switch { background: transparent; color: #f1ce70; }
html[data-theme="night"] .theme-switch:hover { color: #fff; }
html[data-theme="night"] .icon-button.is-active { background-color: rgba(255, 255, 255, 0.18); }

/* Keep the lower water sections flat in both themes. */
:is(.works-section, .photography-section, .today-community-section) {
  background: var(--reflection-water);
}
:is(.works-section, .photography-section, .today-community-section)::before,
:is(.works-section, .photography-section, .today-community-section)::after {
  background: none;
}
html[data-theme="night"] :is(.down-page-arrow:hover img, #back-button:hover img,
  #next-button:hover img, #drawing-back-button:hover img, .icon-button:hover img,
  #download-button:hover img, .works-cta:hover img, .photography-cta:hover img) {
  filter: brightness(0) invert(1)
    drop-shadow(0.4px 0 0 white) drop-shadow(-0.4px 0 0 white)
    drop-shadow(0 0.4px 0 white) drop-shadow(0 -0.4px 0 white);
}