#changelog { position: relative; }
.update-dot { position: absolute; right: 4px; top: 3px; width: 8px; height: 8px; border-radius: 50%; background: #ec765f; border: 2px solid #eff9f5; }
#changelogDialog { width: min(670px, calc(100% - 32px)); height: min(760px, calc(100dvh - 40px)); max-height: calc(100dvh - 40px); padding: 0; overflow: hidden; background: #f8fbf4; }
#changelogDialog[open] { display: flex; flex-direction: column; }
.changelog-heading { padding: 27px 28px 21px; flex-shrink: 0; border-bottom: 1px solid #dfe9dc; background: #fbfdf8; }
.changelog-heading h2 { color: #315c57; }
.changelog-heading p { margin: 7px 0 0; color: #789188; font-size: 12px; }
.changelog-timeline { position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 28px 28px 34px; scrollbar-width: thin; scrollbar-color: #b8cebe transparent; }
.changelog-timeline::before { content: ''; position: absolute; left: 53px; top: 29px; bottom: 36px; width: 2px; background: linear-gradient(#78ad87,#9cc9bd 45%,#e7c578); }
.release { --accent:#73a987; --wash:#e5f2e6; position: relative; display: grid; grid-template-columns: 52px minmax(0,1fr); gap: 14px; padding-bottom: 29px; }
.release:last-child { padding-bottom: 0; }
.release-marker { position: relative; z-index: 1; width: 36px; height: 36px; margin-left: 8px; border-radius: 50%; display: grid; place-items: center; background: var(--wash); color: var(--accent); border: 3px solid #f8fbf4; box-shadow: 0 0 0 2px var(--accent); }
.release-marker svg { width: 18px; height: 18px; stroke-width: 2.2; }
.release-body { min-width: 0; padding: 3px 0 0; }
.release-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; font-size: 10px; }
.release-meta > b { color: var(--accent); font-size: 12px; }
.release-meta time { color: #91a298; }
.latest-label { padding: 3px 6px; border-radius: 4px; color: #fff; background: var(--accent); font-size: 9px; }
.release h3 { margin: 7px 0 6px; color: #345e59; font-size: 18px; line-height: 1.35; }
.release p { margin: 0; color: #647e74; font-size: 12px; font-weight: 500; line-height: 1.7; }
.release figure { width: 100%; aspect-ratio: 16/7; margin: 14px 0 0; border-radius: 7px; overflow: hidden; background: var(--wash); border: 1px solid #dbe6da; }
.release figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
.release-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.release-tags span { padding: 4px 7px; border-radius: 4px; background: var(--wash); color: var(--accent); font-size: 9px; }
.release-mint { --accent:#58977a; --wash:#e4f2e8; }.release-coral { --accent:#d17462; --wash:#f9e8e2; }.release-sky { --accent:#4d91a4; --wash:#e2f1f4; }.release-sun { --accent:#b68b3f; --wash:#f8efd9; }.release-lavender { --accent:#8377a6; --wash:#ede9f5; }.release-ocean { --accent:#428ca4; --wash:#e0f0f4; }.release-leaf { --accent:#658c58; --wash:#e6efdf; }.release-berry { --accent:#b36379; --wash:#f6e6ec; }
.changelog-loading,.changelog-error { min-height: 180px; display: flex; align-items: center; justify-content: center; gap: 9px; color: #789188; font-size: 12px; }
.changelog-loading svg { width: 20px; animation: changelog-spin 1s linear infinite; }
@keyframes changelog-spin { to { transform: rotate(360deg); } }
@media(max-width:650px){
  #changelog { position:absolute; right:0; top:115px; width:43px; height:43px; background:#ffffffe6; }
  #changelogDialog { width: calc(100% - 24px); height: calc(100dvh - 28px); max-height: calc(100dvh - 28px); }
  .changelog-heading { padding: 21px 19px 17px; }
  .changelog-timeline { padding: 23px 18px 28px; }
  .changelog-timeline::before { left: 39px; }
  .release { grid-template-columns: 43px minmax(0,1fr); gap: 9px; }
  .release-marker { width: 32px; height: 32px; margin-left: 5px; }
  .release-marker svg { width: 16px; height: 16px; }
  .release h3 { font-size: 16px; }
  .release figure { aspect-ratio: 16/8; }
}
@media(max-height:500px){
  #changelog { top:58px; }
  #changelogDialog { height: calc(100dvh - 24px); max-height: calc(100dvh - 24px); }
  .changelog-heading { padding: 15px 20px 12px; }
  .changelog-heading .eyebrow,.changelog-heading p { display:none; }
  .changelog-timeline { padding-top: 18px; }
}
@media(prefers-reduced-motion:reduce){.changelog-loading svg{animation:none}}