:root {
  --doudou-ink: #3f4a55;
  --doudou-muted: #738292;
  --doudou-blue: #76b6e6;
  --doudou-blue-deep: #4e91c5;
  --doudou-blue-soft: #dceffc;
  --doudou-surface: rgba(255, 255, 255, 0.9);
  --doudou-line: rgba(97, 162, 211, 0.25);
  --doudou-shadow:
    0 1.1rem 2.6rem rgba(71, 126, 168, 0.11),
    0 0 0 1px rgba(175, 216, 244, 0.3),
    inset 0 1px rgba(255, 255, 255, 0.95);
}

html:has(body[data-page="doudou"]) {
  scrollbar-gutter: stable;
}

body[data-page="doudou"] {
  --appearance-control-surface: rgba(248, 252, 255, 0.92);
  --appearance-control-foreground: #4f88ad;
  --appearance-control-border: rgba(104, 167, 210, 0.3);
  --appearance-control-glow:
    0 0.4rem 1rem rgba(62, 115, 151, 0.12),
    0 0 1rem rgba(105, 181, 230, 0.2);
  --appearance-control-hover-surface: #f1f9fe;
  --appearance-control-hover-foreground: #2f79a8;
  --appearance-control-hover-border: rgba(83, 158, 208, 0.5);
  --appearance-control-hover-glow:
    0 0.4rem 1rem rgba(62, 115, 151, 0.15),
    0 0 1.3rem rgba(94, 177, 231, 0.34);
  --appearance-control-focus: #397fae;
  --appearance-control-sun: #dc9637;
  background:
    radial-gradient(circle at 14% 20%, rgba(174, 219, 248, 0.25), transparent 28rem),
    radial-gradient(circle at 86% 58%, rgba(197, 230, 251, 0.2), transparent 30rem),
    #f8fbfe;
  color: var(--doudou-ink);
}

body[data-page="doudou"] .page-shell__header {
  background: rgba(250, 253, 255, 0.93);
  border-block-end: 1px solid rgba(118, 182, 230, 0.2);
  box-shadow: 0 0.45rem 1.5rem rgba(85, 141, 184, 0.06);
}

body[data-page="doudou"] .navigation {
  background: transparent;
  border: 0;
}

body[data-page="doudou"] .navigation__link {
  color: #526372;
  font-family: var(--font-family-reading);
  font-size: 1.02rem;
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.08em;
}

body[data-page="doudou"] .navigation .navigation__link:hover,
body[data-page="doudou"] .navigation .navigation__link[aria-current="page"],
body[data-page="doudou"] .navigation .navigation__link[aria-current="page"]:hover {
  background: rgba(202, 231, 250, 0.52);
  color: #367fae;
  box-shadow:
    0 0.45rem 1.15rem rgba(76, 151, 204, 0.15),
    inset 0 0 0 1px rgba(111, 181, 227, 0.2);
}

body[data-page="doudou"] .navigation .navigation__link:focus-visible {
  outline-color: var(--doudou-blue-deep);
}

.doudou-page {
  padding-inline: clamp(1rem, 4vw, 5rem);
}

.doudou-room {
  inline-size: min(100%, 88rem);
  min-block-size: 38rem;
  margin-inline: auto;
  padding-block: clamp(2rem, 4vw, 3.5rem) clamp(7rem, 10vw, 10rem);
}

.doudou-local-navigation {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem clamp(1rem, 2.5vw, 2rem);
  inline-size: fit-content;
  margin: 0 auto clamp(4rem, 7vw, 6rem);
  padding: 0.55rem clamp(0.9rem, 2vw, 1.4rem);
  border: 1px solid rgba(130, 190, 231, 0.21);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.58);
  box-shadow: 0 0.65rem 1.8rem rgba(80, 139, 182, 0.07);
}

.doudou-local-navigation a {
  padding: 0.38rem 0.3rem;
  color: var(--doudou-muted);
  font-family: var(--font-family-reading);
  font-size: clamp(0.96rem, 1.2vw, 1.06rem);
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: color 150ms ease, text-decoration-color 150ms ease;
  text-decoration-color: transparent;
  text-underline-offset: 0.35rem;
}

.doudou-local-navigation a:hover,
.doudou-local-navigation a[aria-current="page"] {
  color: var(--doudou-blue-deep);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--doudou-blue) 64%, transparent);
}

.doudou-local-navigation a:focus-visible {
  outline: 2px solid var(--doudou-blue-deep);
  outline-offset: 4px;
}

.doudou-home {
  display: grid;
  place-items: center;
  min-block-size: clamp(19rem, 38vw, 32rem);
}

.doudou-home__letter {
  inline-size: min(100%, 61rem);
  padding: clamp(2rem, 5vw, 4rem) clamp(1.6rem, 6vw, 5rem);
  border: 1px solid rgba(137, 195, 234, 0.3);
  border-radius: 0.85rem;
  background:
    linear-gradient(125deg, rgba(224, 242, 253, 0.18), transparent 42%),
    var(--doudou-surface);
  box-shadow: var(--doudou-shadow);
}

.doudou-home__letter h1 {
  margin: 0 0 clamp(2rem, 4vw, 3.4rem);
  color: #486276;
  font-size: clamp(1.55rem, 2.8vw, 2.15rem);
  font-weight: 500;
  letter-spacing: 0.08em;
}

.doudou-home__letter p {
  margin: 0;
  color: #566979;
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  letter-spacing: 0.035em;
  line-height: 2;
}

.doudou-home__letter p + p {
  margin-block-start: clamp(1.25rem, 2.5vw, 2rem);
}

.doudou-home__letter p:last-child {
  color: #7790a3;
  font-size: 0.94em;
}

.doudou-home__image-stage {
  inline-size: min(100%, 72rem);
  min-block-size: clamp(8rem, 16vw, 13rem);
  margin: clamp(4rem, 8vw, 7rem) auto 0;
  overflow: hidden;
  border: 1px solid rgba(132, 194, 234, 0.25);
  border-radius: 0.7rem;
  background: rgba(255, 255, 255, 0.65);
  box-shadow:
    0 0.9rem 2.25rem rgba(69, 129, 173, 0.09),
    0 0 1.5rem rgba(142, 205, 245, 0.08);
}

.doudou-home__image-stage > div {
  inline-size: 100%;
  min-block-size: inherit;
}

.doudou-space {
  inline-size: min(100%, 68rem);
  min-block-size: 27rem;
  margin-inline: auto;
}

.doudou-space--profile {
  inline-size: min(100%, 82rem);
}

.doudou-space--profile .doudou-space__heading {
  padding-inline: 0.2rem;
}

.doudou-space__heading {
  margin-block-end: clamp(2.5rem, 5vw, 4rem);
}

.doudou-space__heading h1 {
  margin: 0;
  color: #496579;
  font-family: var(--font-family-reading);
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 450;
  letter-spacing: 0.1em;
}

.doudou-space__empty {
  margin: clamp(5rem, 10vw, 9rem) auto 0;
  color: var(--doudou-muted);
  font-family: var(--font-family-reading);
  font-size: 1rem;
  line-height: 1.9;
  text-align: center;
}

.doudou-moment-list {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  inline-size: min(100%, 49rem);
  margin-inline: auto;
}

.doudou-moment {
  padding: clamp(1.6rem, 4vw, 2.8rem);
  border: 1px solid rgba(125, 186, 228, 0.27);
  border-radius: 0.85rem;
  background: var(--doudou-surface);
  box-shadow: var(--doudou-shadow);
}

.doudou-moment time {
  color: var(--doudou-blue-deep);
  font-size: 0.86rem;
  letter-spacing: 0.11em;
}

.doudou-markdown {
  color: var(--doudou-ink);
  font-family: var(--font-family-reading);
  line-height: 1.9;
}

.doudou-markdown > :first-child:not(h1) {
  margin-block-start: 0.9rem;
}

.doudou-moment .doudou-markdown em,
.doudou-profile .doudou-markdown em {
  color: #8a9aa7;
  font-size: 0.86rem;
  font-style: normal;
}

.doudou-moment__images {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0.9rem;
  margin-block-start: 1.4rem;
}

.doudou-moment__images img {
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0.6rem;
}

.doudou-profile-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.6rem, 2.8vw, 2.6rem) clamp(1.4rem, 2.4vw, 2.2rem);
  padding: 0.15rem 0.2rem 0.5rem;
}

.doudou-profile {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  min-inline-size: 0;
  gap: clamp(1rem, 1.5vw, 1.35rem);
  padding: clamp(1.2rem, 1.55vw, 1.55rem);
  border: 1px solid rgba(121, 158, 184, 0.24);
  border-radius: 0.28rem;
  background:
    linear-gradient(135deg, rgba(218, 239, 252, 0.2), transparent 24%),
    #fff;
  box-shadow:
    0 0.2rem 0.55rem rgba(57, 85, 105, 0.055),
    0 0 0.22rem rgba(100, 177, 226, 0.065),
    inset 0 1px rgba(255, 255, 255, 0.98);
}

.doudou-profile__portrait {
  inline-size: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 0.16rem;
}

.doudou-profile > img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  justify-self: center;
  border-radius: 0.16rem;
  object-fit: contain;
}

.doudou-profile__portrait {
  display: grid;
  place-items: center;
  border: 1px solid rgba(121, 169, 202, 0.2);
  background:
    linear-gradient(145deg, rgba(248, 252, 255, 0.96), rgba(226, 241, 250, 0.82));
  box-shadow: inset 0 0 0.3rem rgba(105, 177, 224, 0.045);
  color: rgba(75, 123, 156, 0.4);
  font-family: var(--font-family-reading);
  font-size: clamp(2.2rem, 5vw, 4rem);
}

.doudou-profile__content {
  min-inline-size: 0;
}

.doudou-profile h2 {
  margin: 0;
  color: #466174;
  font-family: var(--font-family-reading);
  font-size: clamp(1.3rem, 2vw, 1.65rem);
  font-weight: 500;
  letter-spacing: 0.04em;
}

.doudou-gallery__grid {
  columns: 3 16rem;
  column-gap: clamp(1rem, 2.2vw, 1.65rem);
}

.doudou-gallery__grid figure {
  display: inline-block;
  inline-size: 100%;
  margin: 0 0 clamp(1.15rem, 2.2vw, 1.75rem);
  break-inside: avoid;
}

.doudou-gallery__grid img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  border: 1px solid rgba(93, 122, 143, 0.14);
  border-radius: 0.12rem;
  background: rgba(235, 244, 250, 0.52);
  box-shadow: 0 0.2rem 0.6rem rgba(57, 83, 102, 0.075);
}

.doudou-gallery__grid figcaption {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-block-start: 0.5rem;
  color: var(--doudou-muted);
  font-size: 0.78rem;
}

@media (max-width: 70rem) {
  .doudou-space--profile {
    inline-size: min(100%, 48rem);
  }

  .doudou-profile-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 34rem) {
  .doudou-page {
    padding-inline: 1rem;
  }

  .doudou-room {
    padding-block-start: 1.5rem;
  }

  .doudou-local-navigation {
    inline-size: 100%;
    margin-block-end: 3rem;
  }

  .doudou-home__letter {
    padding: 1.65rem 1.3rem;
  }

  .doudou-profile__portrait {
    aspect-ratio: 8 / 5;
  }
}

html[data-appearance="dark"] body[data-page="doudou"] {
  --doudou-ink: #d5e0e8;
  --doudou-muted: #91a6b6;
  --doudou-blue: #75b7e6;
  --doudou-blue-deep: #8ac4ed;
  --doudou-blue-soft: #263d4e;
  --doudou-surface: #1a2a35;
  --doudou-line: rgba(117, 183, 230, 0.24);
  --doudou-shadow:
    0 1.1rem 2.6rem rgba(0, 8, 14, 0.28),
    0 0 0 1px rgba(98, 161, 203, 0.2),
    inset 0 1px rgba(204, 231, 248, 0.08);
  --appearance-control-surface: #142632;
  --appearance-control-foreground: #d9efff;
  --appearance-control-border: rgba(117, 183, 230, 0.38);
  --appearance-control-glow:
    0 0.4rem 1rem rgba(0, 8, 14, 0.34),
    0 0 1.1rem rgba(75, 150, 201, 0.28);
  --appearance-control-hover-surface: #1d394b;
  --appearance-control-hover-foreground: #f0f9ff;
  --appearance-control-hover-border: rgba(144, 204, 245, 0.62);
  --appearance-control-hover-glow:
    0 0.4rem 1rem rgba(0, 8, 14, 0.36),
    0 0 1.35rem rgba(89, 171, 224, 0.44);
  --appearance-control-focus: #9bd4f7;
  --appearance-control-moon: #d9efff;
  background: #101a23;
}

html[data-appearance="dark"] body[data-page="doudou"] .page-shell__header {
  background: rgba(21, 30, 36, 0.95);
  border-block-end-color: rgba(117, 183, 230, 0.18);
  box-shadow: 0 0.45rem 1.5rem rgba(0, 8, 14, 0.18);
}

html[data-appearance="dark"] body[data-page="doudou"] .navigation .navigation__link {
  color: #bed0dc;
}

html[data-appearance="dark"] body[data-page="doudou"] .navigation .navigation__link:hover {
  background-color: #203947;
  color: #e5f5ff;
  box-shadow:
    0 0.45rem 1rem rgba(50, 121, 167, 0.22),
    inset 0 0 0 1px rgba(117, 183, 230, 0.24);
}

html[data-appearance="dark"] body[data-page="doudou"] .navigation .navigation__link[aria-current="page"] {
  background-color: #294d62;
  color: #f0f9ff;
  box-shadow:
    0 0.4rem 0.9rem rgba(48, 119, 165, 0.24),
    inset 0 0 0 1px rgba(139, 202, 243, 0.34);
}

html[data-appearance="dark"] body[data-page="doudou"] .navigation .navigation__link[aria-current="page"]:hover {
  background-color: #315b72;
  color: #ffffff;
  box-shadow:
    0 0.45rem 1rem rgba(64, 143, 194, 0.3),
    inset 0 0 0 1px rgba(163, 218, 252, 0.44);
}

html[data-appearance="dark"] body[data-page="doudou"] .navigation .navigation__link:focus-visible {
  outline-color: #9bd4f7;
}

html[data-appearance="dark"] .doudou-local-navigation {
  border-color: rgba(117, 183, 230, 0.2);
  background: rgba(23, 38, 48, 0.86);
  box-shadow: 0 0.65rem 1.8rem rgba(0, 8, 14, 0.16);
}

html[data-appearance="dark"] .doudou-home__letter,
html[data-appearance="dark"] .doudou-moment {
  border-color: rgba(117, 183, 230, 0.24);
  background: var(--doudou-surface);
  box-shadow: var(--doudou-shadow);
}

html[data-appearance="dark"] .doudou-home__letter h1,
html[data-appearance="dark"] .doudou-space__heading h1,
html[data-appearance="dark"] .doudou-profile h2 {
  color: #bad8eb;
}

html[data-appearance="dark"] .doudou-home__letter p {
  color: #c5d4de;
}

html[data-appearance="dark"] .doudou-home__letter p:last-child,
html[data-appearance="dark"] .doudou-moment .doudou-markdown em,
html[data-appearance="dark"] .doudou-profile .doudou-markdown em {
  color: #91a7b7;
}

html[data-appearance="dark"] .doudou-home__image-stage {
  border-color: rgba(117, 183, 230, 0.2);
  background: #182731;
  box-shadow: 0 0.9rem 2.25rem rgba(0, 8, 14, 0.22);
}

html[data-appearance="dark"] .doudou-profile {
  border-color: rgba(117, 169, 204, 0.22);
  background: #1a2a35;
  box-shadow: 0 0.3rem 0.8rem rgba(0, 8, 14, 0.2), inset 0 1px rgba(205, 232, 249, 0.06);
}

html[data-appearance="dark"] .doudou-profile__portrait {
  border-color: rgba(117, 169, 202, 0.2);
  background: #1b2d39;
  color: rgba(143, 191, 223, 0.5);
}

html[data-appearance="dark"] .doudou-gallery__grid img {
  border-color: rgba(117, 169, 202, 0.18);
  background: rgba(28, 44, 55, 0.7);
  box-shadow: 0 0.25rem 0.7rem rgba(0, 8, 14, 0.22);
}

html[data-appearance="dark"] body[data-page="doudou"] .music-player {
  --music-surface: rgba(20, 38, 50, 0.96);
  --music-border: rgba(117, 183, 230, 0.3);
  --music-ink: #dcecf6;
  --music-muted: #9fb8c9;
  --music-accent: #82bee7;
  --music-accent-soft: rgba(80, 154, 204, 0.2);
  box-shadow:
    0 0.45rem 1.2rem rgba(0, 7, 14, 0.34),
    0 0 0.8rem rgba(77, 143, 187, 0.12);
}

html[data-appearance="dark"] body[data-page="doudou"] .music-player__toggle {
  background: #1d394b;
}

@media (prefers-reduced-motion: reduce) {
  .doudou-local-navigation a {
    transition: none;
  }
}