/* Follow the device immediately, including when its setting changes mid-visit. */
:root { color-scheme: light dark; --surface: #fff; --surface-soft: #f3faff; --surface-pink: #fff4fa; --accent-pink: #b34e83; }
.next-stream { position: fixed; z-index: 25; bottom: max(1rem, env(safe-area-inset-bottom)); right: max(1rem, env(safe-area-inset-right)); }
.next-stream-toggle { display: flex; align-items: center; justify-content: center; gap: .55rem; min-height: 2.75rem; padding: .65rem 1rem; border: 1px solid var(--line); border-radius: 2rem; color: var(--blue); background: var(--surface); box-shadow: 0 .3rem 1.5rem #17365418; font: 600 .875rem/1.5 var(--sans); cursor: pointer; list-style: none; }
.next-stream-toggle::-webkit-details-marker { display: none; }
.next-stream-toggle > span:not(.next-stream-chevron) { letter-spacing: .03em; }
.next-stream-toggle svg { flex-shrink: 0; }
.next-stream-chevron { font-size: 1.35rem; line-height: 1; transform: rotate(90deg); }
.next-stream[open] .next-stream-chevron { transform: rotate(-90deg); }
.next-stream-toggle:hover, .next-stream[open] .next-stream-toggle { background: var(--surface-soft); border-color: var(--blue); }
.next-stream-toggle:focus-visible, .next-stream-close:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.next-stream-panel { position: absolute; right: 0; bottom: calc(100% + .65rem); width: min(21rem, calc(100vw - 2rem - env(safe-area-inset-right))); max-height: max(5rem, calc(100vh - var(--site-header-height, 6rem) - 7rem)); max-height: max(5rem, calc(100dvh - var(--site-header-height, 6rem) - 7rem - env(safe-area-inset-bottom))); overflow-y: auto; overscroll-behavior: contain; padding: 1.1rem 1.25rem 1.25rem; border: 1px solid var(--line); border-top: 3px solid var(--blue); border-radius: 1rem; color: var(--ink); background: var(--surface); box-shadow: 0 .75rem 3rem #10294526; }
.next-stream-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.next-stream .eyebrow { color: var(--blue); font-size: .75rem; }
.next-stream-close { display: grid; place-items: center; flex-shrink: 0; width: 2.75rem; height: 2.75rem; margin: -.35rem -.5rem -.25rem 0; border: 0; border-radius: 50%; color: var(--muted); background: transparent; font: 400 1.6rem/1 var(--sans); cursor: pointer; }
.next-stream-close[hidden] { display: none; }
.next-stream-close:hover { color: var(--blue); background: var(--surface-soft); }
.next-stream h2 { font: 600 1.125rem/1.8 var(--sans); margin-top: .6rem; overflow-wrap: anywhere; }
.next-stream p:not(.eyebrow) { margin-top: .65rem; color: var(--muted); font-size: .9375rem; }
.next-stream-actions { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; margin-top: 1.15rem; }
.next-stream-actions a { max-width: 100%; font-size: .875rem; }
@media (prefers-reduced-motion: no-preference) {
  .motion-on .next-stream[open] .next-stream-panel { animation: stream-appear .18s ease-out both; }
}
@keyframes stream-appear { from { opacity: 0; translate: .5rem 0; } to { opacity: 1; translate: 0 0; } }
.support-start { padding: 1.75rem 0 2rem; border-bottom: 1px solid var(--line); }
.support-start h2 { font-size: clamp(1.45rem, 3vw, 2rem); }
.support-start > p { margin-top: .65rem; color: var(--muted); }
.support-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.support-way { padding: 1rem; border: 1px solid var(--line); border-radius: .65rem; background: var(--surface); }
.support-way strong { display: block; font-size: 1rem; color: var(--blue); }
.support-way span { display: block; margin-top: .4rem; font-size: .875rem; color: var(--muted); }
.support-way:hover { border-color: var(--accent-pink); background: var(--surface-pink); }
.feed-intro-link { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--blue); text-decoration: underline; font-size: .9375rem; }
@media (max-width: 47.5rem) { .support-ways { grid-template-columns: minmax(0, 1fr); gap: .7rem; } }

@media screen and (prefers-color-scheme: dark) {
  :root { --ink: #e8f0fa; --muted: #b2c1d3; --blue: #8fd5f0; --sky: #2e6380; --pink: #613d61; --line: #35455d; --surface: #152237; --surface-soft: #1b2d44; --surface-pink: #31253e; --accent-pink: #efaacf; }
  body, .message-page, .future-page, .gallery-page, .social-page { background: #0d1728; color: var(--ink); }
  .header, .header.nav-ready nav, .skip, .letter-paper, .calendar, .rules-welcome, .contact-options article, .feed-card, .art-viewer { background: var(--surface); border-color: var(--line); }
  .hero { background: linear-gradient(115deg, #12283b, #111d30 57%, #291e34); border-color: var(--line); }
  .rules-section { background: linear-gradient(115deg, #152a3e, #101c2e 70%); }
  footer { background: #101e30; }
  .header.nav-ready nav a, .letter-section + .letter-section, .calendar-layout, .schedule-agenda, .event-card + .event-card, .schedule-agenda .schedule-updated { border-color: var(--line); }
  .header nav .nav-support, .about-links .support-link { color: var(--accent-pink); }
  .primary, .header.nav-ready nav .nav-live, .viewer-variants button[aria-pressed="true"], .calendar-date[aria-pressed="true"] { color: #0d2031; background: #a4def3; border-color: #a4def3; box-shadow: none; }
  .primary:hover, .header.nav-ready nav .nav-live:hover { color: #0d2031; background: #c3ecfa; }
  .secondary, .nav-ready .menu-toggle, .motion-toggle, .future-page .motion-toggle, .calendar-controls button, .copy-button, .copy-fallback, .feed-jumps a, .feed-retry, .embed-load, .gallery-enlarge, .gallery-variants a, .viewer-close, .viewer-variants button { color: var(--ink); background: var(--surface-soft); border-color: #506984; }
  .secondary:hover, .nav-ready .menu-toggle:hover, .menu-toggle[aria-expanded="true"], .header.nav-ready nav a:hover, .motion-toggle:hover, .calendar-controls button:hover, .copy-button:hover, .feed-jumps a:hover, .feed-retry:hover, .embed-load:hover, .gallery-variants a:hover, .viewer-close:hover { color: var(--ink); background: #263e56; border-color: var(--blue); }
  .motion-toggle:disabled { color: var(--muted); }
  .nav-live, .text-link, .play, .section-number, .x-timeline-frame, .voice-card, .copy-button, .fan-kit { border-color: #506984; }
  .topic-row h3 a { text-decoration-color: #668aab; }
  .fan-kit, .support-note, .youtube-channel { background: linear-gradient(115deg, #1b3048, #32263f); border-color: var(--line); }
  .youtube-channel .eyebrow, .channel-letter > span { color: #e7b1d1; border-color: #765570; }
  .channel, .schedule-agenda, .goal-metrics > div, .feed-placeholder, .x-embed > blockquote { background: var(--surface-soft); border-color: var(--line); }
  .youtube, .goal-metrics > div:last-child, .tiktok-pending { background: var(--surface-pink); border-color: #574360; }
  .channel-bottom, .youtube .channel-bottom { border-color: var(--line); }
  .channel:hover { box-shadow: 0 8px 24px #0003; }
  .service-icon, .profile-icon, .feed-icon, .channel-kind .service-icon { background: #233c52; color: #b4dcf4; border-color: #42607a; }
  .icon-x { background: #293648; color: var(--ink); }
  .profile-icon.icon-birthday, .profile-icon.icon-fans, .icon-instagram, .icon-youtube, .icon-message, .feed-youtube .feed-icon, .feed-instagram .feed-icon { background: #3a2c42; color: #f0b7d5; border-color: #6b4a66; }
  .icon-iriam { background: #183c4a; color: #a0deef; border-color: #366879; }
  .calendar-table th, .calendar-table th:last-child { color: var(--muted); }
  .calendar-table th:nth-child(6) { color: var(--blue); }
  .calendar-date { color: var(--ink); }
  .calendar-date[aria-current="date"] { border-color: #83acc7; }
  .calendar-date.has-event { background: #254962; color: #c3eeff; }
  .calendar-date.has-event[aria-pressed="true"] { background: #a4def3; color: #0d2031; }
  .dream-number { color: var(--blue); background: #19364b; border-color: #557d99; }
  .dream-path li:not(:last-child)::before { background: #48627d; }
  .dream-path li:nth-child(2) .dream-number, .dream-path .live2d-goal .dream-number { background: #3b2942; color: #f0b7d5; border-color: #a76b99; }
  .dream-kind time { background: var(--surface); border-color: #4b6784; }
  .milestone-goal { --goal-glow: #bd66aa40; --goal-edge: #a76b99; --goal-light: #2f243d; }
  .milestone-goal.final-goal { --goal-glow: #68bde045; --goal-edge: #6db4d3; --goal-light: #18374b; }
  .milestone-goal > div::before { background-image: linear-gradient(120deg, var(--goal-edge), #31495e, var(--goal-edge), #345875); }
  .milestone-goal > div::after { background: linear-gradient(125deg, #152237 8%, var(--goal-light) 70%, #18263b); }
  .dream-path .live2d-goal .goal-headline { color: #f0b7d5; }
  .dream-path .final-goal .dream-number { color: #0d2031; background: #a4def3; border-color: #a4def3; }
  .letter-paper { box-shadow: .6rem .7rem 0 #091321; }
  /* Keep commissioned art, its white paper, and its original colors intact. */
  .portrait, .gallery-cover, .viewer-stage { background: #fff; border-color: #708197; color-scheme: light; }
  .portrait { box-shadow: .7rem .6rem 0 #264760, -.5rem -.4rem 0 #523653; }
  .message-portrait, .invitation-illustration { background: var(--surface); border-color: #4a617d; box-shadow: .5rem .6rem 0 #07111e; }
  .gallery-cover { box-shadow: .45rem .6rem 0 #21374e; }
  .viewer-stage .viewer-status { color: #596a7e; }
  .brand { filter: drop-shadow(0 0 .4rem #9aceee36); }
  /* Keep the signature transparent; lift only its ink for the dark paper. */
  .signature-art img { filter: brightness(2) saturate(.55); }
  .edge-butterfly { filter: saturate(1.1) drop-shadow(0 0 5px #8bdcf070); }
  .edge-star { color: #8fd5f0; }
  .edge-star-2, .edge-star-4, .edge-star-6 { color: #efaacf; }
  .ambient .glow { opacity: .18; }
  .motion-on .scene-active .glow-blue, .motion-on .scene-active .glow-pink { animation: none; }
  .halo { opacity: .18; }
  .ripple-clip { opacity: .55; }
  .channel::before { background-image: linear-gradient(120deg, transparent 25%, #bedef01a 47%, transparent 70%); }
  .feed-embed .instagram-media { color-scheme: light; background: #fff; }
  .feed-embed .instagram-media > a { color: #26789d; }
}
@media screen and (prefers-color-scheme: dark) and (max-width: 47.5rem) {
  .header.nav-ready { box-shadow: 0 3px 16px #0004; }
  .header.nav-ready nav { box-shadow: 0 14px 22px #0005; }
}
@media print { :root { color-scheme: light; } .next-stream, .support-ways { display: none; } }