body.page-poem {
  --poem-paper: #f7f2e8;
  --poem-ink: #1e2a2a;
  --poem-mist: #dfe8e4;
  --poem-cinnabar: #ad5848;
  --poem-tea: #6f8f7a;
  background:
    linear-gradient(90deg, rgba(30, 42, 42, 0.035) 1px, transparent 1px) 0 0 / 46px 46px,
    linear-gradient(180deg, var(--poem-paper), #edf4f0 62%, var(--vg-bg-2)) !important;
}
.poem-page { width: min(1160px, calc(100% - 32px)); margin: 0 auto; padding: 24px 0 168px; }
.poem-hero { min-height: 430px; display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 30px; align-items: end; padding: clamp(32px, 6vw, 70px); border: 1px solid rgba(30,42,42,.12); border-radius: 26px; background: linear-gradient(135deg, rgba(255,255,255,.52), rgba(255,255,255,.18)), var(--vg-glass); box-shadow: 0 28px 90px rgba(31, 45, 45, .12); overflow: hidden; position: relative; }
.poem-hero::before { content: "床前明月光\\A疑是地上霜\\A举头望明月\\A低头思故乡"; white-space: pre; position: absolute; right: 48%; top: 34px; color: rgba(173, 88, 72, .14); writing-mode: vertical-rl; font-family: "STKaiti", "KaiTi", "Songti SC", serif; font-size: 30px; line-height: 1.9; pointer-events: none; }
.poem-hero-copy { position: relative; z-index: 1; }
.poem-hero-copy h1 { margin: 10px 0 16px; color: var(--poem-ink); font-family: "STKaiti", "KaiTi", "Songti SC", serif; font-size: clamp(3.2rem, 5.75rem, 5.75rem); line-height: 1.03; letter-spacing: 0; }
.poem-hero-copy p { max-width: 650px; margin: 0; color: color-mix(in srgb, var(--poem-ink) 72%, transparent); font-size: 18px; line-height: 1.9; }
.poem-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.poem-primary, .poem-ghost, .poem-tool, .poem-copy { min-height: 44px; border: 1px solid rgba(30,42,42,.14); border-radius: 999px; padding: 0 18px; background: rgba(255,255,255,.36); color: var(--poem-ink); cursor: pointer; font: inherit; transition: transform .16s ease, border-color .16s ease, background .16s ease; }
.poem-cloud-link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.poem-primary { border-color: rgba(173, 88, 72, .36); background: linear-gradient(135deg, #f2e4d0, #cfe5dc); color: #162330; font-weight: 720; }
.poem-primary:hover, .poem-ghost:hover, .poem-tool:hover, .poem-copy:hover, .poem-card:hover { transform: translateY(-2px); border-color: rgba(173, 88, 72, .44); }
.poem-primary:focus-visible, .poem-ghost:focus-visible, .poem-tool:focus-visible, .poem-copy:focus-visible, .poem-card:focus-visible, .poem-cloud-bridge a:focus-visible { outline: 3px solid rgba(173, 88, 72, .36); outline-offset: 3px; }
.poem-daily-meta { position: relative; z-index: 1; padding: 24px; border: 1px solid rgba(30,42,42,.12); border-radius: 20px; background: rgba(255,255,255,.35); }
.poem-daily-meta span, .poem-daily-meta small, .poem-card-meta, .poem-status { color: color-mix(in srgb, var(--poem-ink) 60%, transparent); }
.poem-daily-meta strong { display: block; margin: 10px 0; color: var(--poem-ink); font-size: 28px; }
.poem-daily-meta a { display: inline-flex; margin-top: 16px; color: var(--poem-cinnabar); text-decoration: none; font-weight: 720; }
.poem-cloud-bridge { margin-top: 18px; display: grid; grid-template-columns: minmax(220px, .9fr) minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 18px 20px; border: 1px solid rgba(30,42,42,.12); border-radius: 22px; background: rgba(255,255,255,.42); box-shadow: 0 18px 60px rgba(31,45,45,.08); }
.poem-cloud-bridge h2 { margin: 4px 0 0; color: var(--poem-ink); font-size: 24px; letter-spacing: 0; }
.poem-cloud-bridge p { margin: 0; color: color-mix(in srgb, var(--poem-ink) 66%, transparent); line-height: 1.75; }
.poem-cloud-bridge a { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; padding: 0 16px; border: 1px solid rgba(173,88,72,.28); border-radius: 999px; background: rgba(173,88,72,.1); color: var(--poem-cinnabar); text-decoration: none; font-weight: 720; }
.poem-daily, .poem-tools { margin-top: 22px; border: 1px solid rgba(30,42,42,.12); border-radius: 24px; background: rgba(255,255,255,.38); box-shadow: 0 22px 70px rgba(31,45,45,.1); }
.poem-daily { padding: clamp(24px, 5vw, 46px); scroll-margin-top: 104px; }
.poem-card-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 24px; }
.poem-card-heading h2, .poem-section-head h2 { margin: 6px 0 0; color: var(--poem-ink); font-size: clamp(2rem, 3.25rem, 3.25rem); letter-spacing: 0; }
.poem-reader { display: grid; grid-template-columns: minmax(220px, 0.74fr) minmax(0, 1fr); gap: clamp(22px, 4vw, 48px); }
.poem-text { display: grid; place-items: center; min-height: 340px; padding: 30px; border: 1px solid rgba(30,42,42,.12); border-radius: 20px; background: linear-gradient(180deg, rgba(255,255,255,.52), rgba(247,242,232,.36)); text-align: center; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.poem-text h3 { margin: 0 0 8px; color: var(--poem-ink); font-family: "STKaiti", "KaiTi", "Songti SC", serif; font-size: 34px; }
.poem-text .poem-author { margin-bottom: 22px; color: color-mix(in srgb, var(--poem-ink) 58%, transparent); }
.poem-lines { display: grid; gap: 9px; color: var(--poem-ink); font-family: "STKaiti", "KaiTi", "Songti SC", serif; font-size: clamp(23px, 3vw, 35px); line-height: 1.78; letter-spacing: .06em; }
.poem-explain { display: grid; gap: 14px; }
.poem-explain section { padding: 18px; border: 1px solid rgba(30,42,42,.1); border-radius: 18px; background: rgba(255,255,255,.32); }
.poem-explain h4 { margin: 0 0 8px; color: var(--poem-ink); }
.poem-explain p { margin: 0; color: color-mix(in srgb, var(--poem-ink) 68%, transparent); line-height: 1.85; }
.poem-note { color: var(--poem-ink) !important; font-weight: 680; }
.poem-tools { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; }
.poem-tool.is-active { background: rgba(111,143,122,.16); border-color: rgba(111,143,122,.38); }
.poem-collection { padding: 76px 0 32px; scroll-margin-top: 104px; }
.poem-section-head { max-width: 720px; margin-bottom: 22px; }
.poem-section-head p { color: color-mix(in srgb, var(--poem-ink) 62%, transparent); }
.poem-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.poem-card { min-height: 188px; padding: 20px; border: 1px solid rgba(30,42,42,.12); border-radius: 18px; background: rgba(255,255,255,.34); box-shadow: 0 18px 55px rgba(31,45,45,.08); cursor: pointer; text-align: left; color: inherit; }
.poem-card h3 { margin: 10px 0 8px; color: var(--poem-ink); font-size: 22px; }
.poem-card p { margin: 0; color: color-mix(in srgb, var(--poem-ink) 62%, transparent); line-height: 1.7; }
.poem-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.poem-copy { min-height: 38px; padding: 0 13px; font-size: 13px; }
@media (max-width: 860px) { .poem-hero, .poem-reader, .poem-cloud-bridge { grid-template-columns: 1fr; } .poem-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .poem-card-heading { align-items: start; flex-direction: column; } .poem-hero::before { right: 24px; opacity: .6; } .poem-cloud-bridge a { justify-self: start; } }
@media (max-width: 560px) { .poem-page { width: min(100% - 20px, 1120px); padding-bottom: 188px; } .poem-hero { min-height: auto; padding: 26px 18px; border-radius: 22px; } .poem-hero::before { display: none; } .poem-hero-copy h1 { font-size: clamp(2.75rem, 18vw, 4rem); } .poem-actions { gap: 9px; } .poem-primary, .poem-ghost { flex: 1 1 auto; padding: 0 13px; } .poem-grid { grid-template-columns: 1fr; } .poem-text { min-height: 260px; padding: 22px 14px; } .poem-lines { font-size: 22px; letter-spacing: .03em; } }
@media (prefers-reduced-motion: reduce) { .poem-primary, .poem-ghost, .poem-tool, .poem-copy, .poem-card { transition: none; } }

body.page-poem {
  --poem-paper: var(--vg-bg);
  --poem-ink: var(--vg-ink);
  --poem-mist: var(--vg-mist);
  --poem-cinnabar: var(--vg-violet);
  --poem-tea: var(--vg-mist);
  color: var(--vg-ink);
  font-family: var(--vg-font);
  background:
    radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--vg-mist) 55%, transparent), transparent 32rem),
    radial-gradient(circle at 86% 12%, color-mix(in srgb, var(--vg-violet) 18%, transparent), transparent 34rem),
    radial-gradient(circle at 52% 90%, rgba(170, 212, 229, 0.18), transparent 38rem),
    linear-gradient(145deg, var(--vg-bg), var(--vg-bg-2)) !important;
  background-attachment: fixed !important;
}

.poem-hero,
.poem-daily,
.poem-tools,
.poem-cloud-bridge,
.poem-card,
.poem-daily-meta,
.poem-text,
.poem-explain section {
  border-color: var(--vg-line);
  background: var(--vg-glass);
  box-shadow: var(--vg-shadow-soft);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
  backdrop-filter: blur(22px) saturate(145%);
}

.poem-hero::before {
  color: color-mix(in srgb, var(--vg-violet) 22%, transparent);
}

.poem-hero-copy h1,
.poem-card-heading h2,
.poem-section-head h2,
.poem-cloud-bridge h2 {
  color: var(--vg-ink);
  font-family: var(--vg-font) !important;
  font-weight: 760;
  letter-spacing: 0;
}

.poem-text h3,
.poem-lines {
  color: var(--vg-ink);
}

.poem-hero-copy p,
.poem-cloud-bridge p,
.poem-section-head p,
.poem-card p,
.poem-explain p,
.poem-daily-meta span,
.poem-daily-meta small,
.poem-card-meta,
.poem-status,
.poem-text .poem-author {
  color: var(--vg-muted);
}

.poem-primary,
.poem-ghost,
.poem-tool,
.poem-copy,
.poem-cloud-bridge a {
  border-color: var(--vg-line);
  background: var(--vg-glass-strong);
  color: var(--vg-ink);
}

.poem-primary,
.poem-cloud-bridge a,
.poem-tool.is-active {
  border-color: color-mix(in srgb, var(--vg-violet) 45%, var(--vg-line));
  background: linear-gradient(135deg, color-mix(in srgb, var(--vg-mist) 34%, transparent), color-mix(in srgb, var(--vg-violet) 18%, transparent)), var(--vg-glass-strong);
}

.poem-primary:hover,
.poem-ghost:hover,
.poem-tool:hover,
.poem-copy:hover,
.poem-card:hover {
  border-color: color-mix(in srgb, var(--vg-violet) 56%, var(--vg-line));
}

.poem-primary:focus-visible,
.poem-ghost:focus-visible,
.poem-tool:focus-visible,
.poem-copy:focus-visible,
.poem-card:focus-visible,
.poem-cloud-bridge a:focus-visible {
  outline-color: color-mix(in srgb, var(--vg-violet) 42%, transparent);
}