.lumina-nationalday-host { position: relative; }
.lumina-nationalday-banner {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  z-index: 2;
  height: 40px;
  width: 540px;
  overflow: hidden;
  background: #890e14;
  color: #fff4dd;
  border: 1px solid #d6a349;
  border-radius: 6px;
  pointer-events: none;
  box-sizing: border-box;
}
.lumina-nationalday-banner[hidden] { display: none; }
.lumina-nationalday-banner__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  margin-inline: auto;
  padding: 3px 12px;
  box-sizing: border-box;
}
.lumina-nationalday-banner__art {
  position: absolute;
  right: 0;
  top: -10px;
  height: 60px;
  width: 180px;
  object-fit: contain;
  pointer-events: none;
  mask-image: linear-gradient(to right, transparent, #000 20%, #000 92%, transparent);
}
.lumina-nationalday-banner__date {
  position: relative;
  flex: 0 0 54px;
  font: 600 24px/1 system-ui, sans-serif;
  color: #ffd989;
}
.lumina-nationalday-banner__copy {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  margin-right: 70px;
}
.lumina-nationalday-banner__copy strong { font-size: 14px; line-height: 17px; }
.lumina-nationalday-banner__subtitle { font-size: 11px; line-height: 14px; color: #ffe2a8; }
.lumina-nationalday-banner__detail { display: none; }

.lumina-midautumn-trigger[data-festival="nationalday"] .lumina-midautumn-trigger__moon {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  width: 24px;
  height: 30px;
  top: 2px;
  left: 8px;
}
.lumina-midautumn-trigger[data-festival="nationalday"] .lumina-midautumn-trigger__moon::after,
.lumina-midautumn-trigger[data-festival="nationalday"] .lumina-midautumn-trigger__branch,
.lumina-midautumn-trigger[data-festival="nationalday"] .lumina-midautumn-trigger__blossom,
.lumina-midautumn-trigger[data-festival="nationalday"] .lumina-midautumn-trigger__dots { display: none; }
.lumina-midautumn-trigger[data-festival="nationalday"] svg { width: 100%; height: 100%; }
.lumina-midautumn-caption[data-festival="nationalday"] {
  color: #aa242c;
  border-color: #e5b875;
  font: 600 15px/22px system-ui, sans-serif;
}
html.dark .lumina-midautumn-caption[data-festival="nationalday"] { color: #ffd294; }
.lumina-midautumn-effects[data-festival="nationalday"] { inset: 0 0 auto; }
.lumina-midautumn-effects[data-festival="nationalday"] .lumina-midautumn-particle[data-kind="flower"] {
  background: #e4ae45;
  width: 7px;
  height: 12px;
  border-radius: 1px;
}
.lumina-midautumn-effects[data-festival="nationalday"] .lumina-midautumn-particle[data-kind="flower"] svg { visibility: hidden; }

.lumina-midautumn-trigger {
  position: relative;
  flex: 0 0 40px;
  width: 40px;
  height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  isolation: isolate;
  touch-action: manipulation;
}

.lumina-midautumn-trigger:focus-visible {
  outline: 2px solid var(--focus-ring, #ca8d37);
  outline-offset: 2px;
  border-radius: 4px;
}

.lumina-midautumn-trigger__moon {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 29px;
  height: 29px;
  border: 1px solid #dfbd79;
  border-radius: 50%;
  background: radial-gradient(circle at 33% 29%, #fffdf2 0 10%, #fff3d4 30%, #eecb8d 100%);
  box-shadow: 0 0 11px rgb(222 167 79 / 32%);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.lumina-midautumn-trigger__moon::after {
  content: "";
  position: absolute;
  top: 13px;
  left: 14px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgb(178 138 74 / 15%);
}

.lumina-midautumn-trigger:hover .lumina-midautumn-trigger__moon,
.lumina-midautumn-trigger:focus-visible .lumina-midautumn-trigger__moon {
  transform: scale(1.08);
  box-shadow: 0 0 16px rgb(222 167 79 / 48%);
}

.lumina-midautumn-trigger__branch {
  position: absolute;
  left: 0;
  top: 22px;
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: #897b57;
  transform: rotate(-18deg);
}

.lumina-midautumn-trigger__branch::before,
.lumina-midautumn-trigger__branch::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 5px;
  border-radius: 90% 0 90% 0;
  background: #789868;
}

.lumina-midautumn-trigger__branch::before { left: 6px; top: -5px; transform: rotate(-27deg); }
.lumina-midautumn-trigger__branch::after { left: 17px; top: 2px; transform: rotate(110deg); }

.lumina-midautumn-trigger__blossom {
  position: absolute;
  left: 9px;
  top: 14px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #dfa133;
  box-shadow: 4px 1px #f2bc57, 1px 4px #e7aa3c, 5px 5px #df9831;
}

.lumina-midautumn-trigger__dots {
  position: absolute;
  left: 9px;
  bottom: 0;
  display: flex;
  gap: 3px;
}

.lumina-midautumn-trigger__dots span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgb(187 144 69 / 28%);
}

.lumina-midautumn-trigger__dots span[data-lit="true"] { background: #ce9132; }

.lumina-midautumn-effects {
  position: fixed;
  inset: 0;
  z-index: 40;
  overflow: hidden;
  pointer-events: none;
  contain: layout style;
}

.lumina-midautumn-particle {
  position: absolute;
  top: 0;
  left: 0;
  width: 19px;
  height: 19px;
  will-change: transform, opacity;
}

.lumina-midautumn-particle[data-kind="flower"] { width: 12px; height: 12px; }
.lumina-midautumn-particle[data-kind="lantern"] { width: 18px; height: 23px; }
.lumina-midautumn-particle svg { display: block; width: 100%; height: 100%; }

.lumina-midautumn-caption {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  padding: 4px 9px;
  border: 1px solid var(--warning-border, #e2b568);
  border-radius: 4px;
  background: var(--surface-panel-strong, #fffdf7);
  color: #955724;
  font: 600 16px/22px "STKaiti", "KaiTi", "Songti SC", serif;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgb(107 81 36 / 12%);
  opacity: 0;
  transform: translate(-50%, -4px);
  transition: opacity 240ms ease, transform 240ms ease;
}

.lumina-midautumn-caption[data-visible="true"] {
  opacity: 1;
  transform: translate(-50%, 0);
}

html.dark .lumina-midautumn-caption { color: #f2ca86; }

@media (prefers-reduced-motion: reduce) {
  .lumina-midautumn-trigger__moon,
  .lumina-midautumn-caption { transition: none; }
  .lumina-midautumn-particle { display: none; }
}