/* The space has its own palette; article pages keep their reading styles. */
body:has(#mood-space) { background: #111820; }
body:has(#mood-space) #page-header { background: #111820; }
body:has(#mood-space) #nav { color: #dce2ea; }
body:has(#mood-space) #content-inner { max-width: 1220px; padding: 24px 20px 40px; }
body:has(#mood-space) #page { padding: 0; background: transparent; box-shadow: none; color: #dce2ea; }
body:has(#mood-space) .page-title { display: none; }
body:has(#mood-space) #post-comment { padding: 28px; border-radius: 18px; background: #f5f7fa; color: #29333d; margin-top: 32px; }
html[data-theme="dark"] body:has(#mood-space) #post-comment { background: #1b252f; color: #dce2ea; }
body:has(#mood-space) #footer { background: #111820; color: #9caab9; }
#mood-space { --space-ink: #e1e7ee; --space-muted: #a8b5c4; color: var(--space-ink); font-size: 15px; line-height: 1.8; }
#mood-space *, #mood-space *::before, #mood-space *::after { box-sizing: border-box; }
#mood-space h1, #mood-space h2, #mood-space p, #mood-space figure { margin: 0; }
#mood-space a { color: #b6cadf; text-decoration: none; border-bottom: none; }
#mood-space a:hover { color: #fff; }
#mood-space button:focus-visible, #mood-space a:focus-visible, #mood-toggle:focus-visible { outline: 2px solid #bdd8f2; outline-offset: 5px; }
#mood-space .space-hero { position: relative; min-height: 430px; border-radius: 22px; overflow: hidden; background: #202e3c; }
#mood-space .space-hero-image { position: absolute; inset: 0; background: linear-gradient(180deg, #15243555, #111820ee), url('/medias/weather1.webp') center 45% / cover; filter: saturate(.23); }
#mood-space .space-haze { position: absolute; inset: -20%; background: radial-gradient(ellipse at 35% 45%, #cedde727, transparent 55%); opacity: .65; }
html[data-mood="on"] .space-haze { animation: space-haze 18s ease-in-out infinite alternate; }
#mood-space .space-cover-note { position: relative; display: flex; justify-content: space-between; padding: 30px 36px; font-size: 11px; letter-spacing: .22em; color: #c2ceda; }
#mood-space .space-cover-note span { letter-spacing: .1em; }
#mood-space .space-profile { position: relative; display: flex; align-items: center; gap: 30px; padding: 105px 48px 66px; }
#mood-space .space-avatar { position: relative; flex: 0 0 112px; width: 112px; height: 112px; }
#mood-space .space-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 2px solid #bdc4ca; }
#mood-space .space-avatar::after { content: ''; position: absolute; inset: -23px; background: url('/medias/avatar-frame.svg') center / contain no-repeat; pointer-events: none; }
#mood-space .space-eyebrow { display: block; color: var(--space-muted); font-size: 11px; letter-spacing: .13em; }
#mood-space .space-profile h1 { color: #f5f7fa; font-size: clamp(30px, 5vw, 44px); line-height: 1.45; font-weight: 500; letter-spacing: .05em; }
#mood-space .space-profile p { margin-top: 8px; color: #c0cbd6; letter-spacing: .13em; }
#mood-space .space-hero-link { position: absolute; bottom: 24px; right: 32px; font-size: 12px; letter-spacing: .1em; }
#mood-space .space-body { display: grid; grid-template-columns: 235px minmax(0, 1fr); gap: 44px; padding: 40px 24px 12px; scroll-margin-top: 30px; }
#mood-space .space-intro { padding-top: 18px; }
#mood-space .space-intro h2 { margin: 12px 0 14px; color: #e1e7ee; font-size: 23px; font-weight: 500; }
#mood-space .space-intro p { color: var(--space-muted); font-size: 13px; }
#mood-space .space-stats { display: flex; gap: 30px; margin: 26px 0; }
#mood-space .space-stats strong { display: block; color: #e1e7ee; font-size: 23px; font-weight: 400; }
#mood-space .space-stats span { font-size: 11px; color: var(--space-muted); }
#mood-space .space-intro > a { font-size: 13px; }
#mood-space .space-intro-line { height: 1px; background: #ffffff13; margin: 28px 0 20px; }
#mood-space .space-footnote { font-size: 11px !important; }
#mood-space .space-tabs { display: flex; gap: 26px; border-bottom: 1px solid #ffffff17; margin-bottom: 22px; }
#mood-space .space-tabs button { padding: 10px 2px 15px; border: 0; border-bottom: 2px solid transparent; background: none; color: #9aabba; font: inherit; cursor: pointer; }
#mood-space .space-tabs button[aria-selected="true"] { color: #edf2f7; border-bottom-color: #b7cddd; }
#mood-space .space-tabs span { font-size: 11px; margin-left: 5px; opacity: .6; }
#mood-space [hidden] { display: none !important; }
#mood-space .space-card { background: #1b2530; border: 1px solid #ffffff0e; border-radius: 16px; padding: 26px; margin-bottom: 20px; }
#mood-space .space-card header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
#mood-space .space-card header img { border-radius: 50%; object-fit: cover; margin: 0; }
#mood-space .space-card header strong { display: block; font-size: 14px; font-weight: 500; }
#mood-space .space-card header span { display: block; color: var(--space-muted); font-size: 11px; }
#mood-space .space-card p { white-space: normal; font-size: 15px; line-height: 2; letter-spacing: .04em; }
#mood-space .space-update-image { display: block; width: 100%; max-height: 330px; object-fit: cover; border-radius: 10px; margin: 20px 0 0; filter: saturate(.5); }
#mood-space .space-read { display: inline-block; margin-top: 18px; font-size: 12px; }
#mood-space .space-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
#mood-space .space-gallery figure { overflow: hidden; border-radius: 13px; background: #1b2530; }
#mood-space .space-gallery img { display: block; width: 100%; height: 210px; object-fit: cover; margin: 0; filter: saturate(.55); transition: filter .4s; }
#mood-space .space-gallery a:hover img { filter: saturate(1); }
#mood-space .space-gallery figcaption { padding: 12px 16px; color: #b8c5d2; font-size: 12px; }
#mood-rain { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 10; pointer-events: none; }
#mood-rain[hidden] { display: none !important; }
#mood-toggle { position: fixed; bottom: 22px; left: 20px; z-index: 99; border: 1px solid #98aabd60; border-radius: 22px; padding: 9px 14px; background: #1c2735eb; color: #dbe5ef; font: 12px/1.4 inherit; font-size: 12px; cursor: pointer; box-shadow: 0 3px 16px #0002; }
#mood-toggle[aria-pressed="true"] { border-color: #b4cada; background: #273b4deb; }
@keyframes space-haze { from { transform: translate(-3%, 0); opacity: .4; } to { transform: translate(5%, 3%); opacity: .8; } }
@media (max-width: 700px) {
  body:has(#mood-space) #content-inner { padding: 16px 12px 30px; }
  #mood-space .space-hero { min-height: 370px; }
  #mood-space .space-cover-note { padding: 22px; font-size: 9px; }
  #mood-space .space-cover-note span { display: none; }
  #mood-space .space-profile { gap: 22px; padding: 100px 28px 62px; }
  #mood-space .space-avatar { flex-basis: 80px; width: 80px; height: 80px; }
  #mood-space .space-avatar::after { inset: -17px; }
  #mood-space .space-profile p { font-size: 12px; }
  #mood-space .space-body { grid-template-columns: 1fr; gap: 24px; padding: 20px 4px; }
  #mood-space .space-intro { padding: 14px 16px; }
  #mood-space .space-intro-line, #mood-space .space-footnote { display: none; }
  #mood-space .space-stats { margin: 14px 0; }
  #mood-space .space-card { padding: 20px; }
  #mood-space .space-gallery { gap: 10px; }
  #mood-space .space-gallery img { height: 160px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-mood="on"] .space-haze { animation: none; }
  #mood-space .space-gallery img { transition: none; }
}