.changelog-main { position: relative; padding: 82px 0 118px; }
.changelog-hero { display: grid; grid-template-columns: 1.08fr .92fr; gap: 70px; align-items: end; min-width: 0; padding-bottom: 78px; }
.changelog-hero > div, .changelog-hero-note, .changelog-layout, .changelog-aside, .release-list, .release-card { min-width: 0; max-width: 100%; }
.changelog-hero h1 { margin: 21px 0 20px; font-family: var(--display); font-size: clamp(49px, 6vw, 78px); font-weight: 700; line-height: .98; letter-spacing: -.065em; overflow-wrap: anywhere; }
.changelog-hero h1 span { color: var(--grass); }
.changelog-hero > div:first-child > p { max-width: 560px; margin: 0; color: var(--ink-soft); font-size: 18px; line-height: 1.6; overflow-wrap: anywhere; }
.changelog-hero-note { padding: 25px; background: var(--paper); border: 2px solid var(--ink); box-shadow: 8px 9px 0 rgba(32,48,38,.1); }
.changelog-hero-note .item-frame { background: #eaf7e1; }
.changelog-hero-note strong { display: block; margin-top: 20px; font-family: var(--display); font-size: 22px; line-height: 1.08; overflow-wrap: anywhere; }
.changelog-hero-note p { margin: 9px 0 0; color: var(--ink-soft); font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
.changelog-layout { display: grid; grid-template-columns: .7fr 1.3fr; gap: 28px; align-items: start; }
.changelog-aside { position: sticky; top: 22px; }
.changelog-aside-card { padding: 23px; background: #fff1c8; border: 2px solid var(--ink); box-shadow: 7px 8px 0 rgba(32,48,38,.1); }
.changelog-aside-card h2 { margin: 12px 0 8px; font-family: var(--display); font-size: 29px; line-height: 1; letter-spacing: -.04em; }
.changelog-aside-card > p { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.55; }
.release-index { display: grid; gap: 5px; margin-top: 22px; padding-top: 15px; border-top: 1px dashed rgba(32,48,38,.22); }
.release-index a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 9px; color: var(--ink-soft); border-left: 3px solid transparent; font-family: var(--mono); font-size: 10px; transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease; }
.release-index a::after { content: '↗'; color: var(--grass); }
.release-index a:hover, .release-index a:focus-visible { color: var(--grass-deep); background: rgba(255,255,255,.56); }
.release-index a.is-active { color: var(--ink); background: #d9f1df; border-left-color: var(--grass); box-shadow: inset 0 0 0 1px rgba(46,139,87,.14); font-weight: 700; }
.release-index a.is-active::after { content: '●'; color: var(--grass-deep); font-size: 8px; }
.changelog-back { width: 100%; margin-top: 17px; }
.release-list { display: grid; gap: 20px; min-width: 0; }
.release-card { overflow: hidden; background: var(--paper); border: 2px solid var(--ink); box-shadow: 8px 9px 0 rgba(32,48,38,.1); }
.release-card--current { background: #e1f5fa; }
.release-card__head { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 17px 21px; background: rgba(255,255,255,.46); border-bottom: 1px dashed rgba(32,48,38,.2); }
.release-card__head h2 { margin: 0; font-family: var(--display); font-size: 27px; line-height: 1; letter-spacing: -.04em; }
.release-card__status { padding: 5px 8px; color: #8e5f15; background: var(--gold-light); border: 1px solid rgba(142,95,21,.2); font-family: var(--mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.release-card__body { padding: 21px; }
.release-group + .release-group { margin-top: 24px; padding-top: 21px; border-top: 1px dashed rgba(32,48,38,.18); }
.release-group h3 { margin: 0 0 11px; color: var(--grass-deep); font-family: var(--display); font-size: 19px; line-height: 1.1; }
.release-group ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.release-group li, .release-card__body > p { color: var(--ink-soft); font-size: 13px; line-height: 1.58; }
.release-group li { position: relative; padding-left: 19px; }
.release-group li::before { content: '✦'; position: absolute; left: 0; color: var(--grass); font-family: var(--mono); font-size: 11px; }
.release-card__body > p { margin: 0 0 12px; }
.release-card code { padding: 2px 4px; color: var(--grass-deep); background: #eaf7e1; border: 1px solid rgba(46,139,87,.16); font-family: var(--mono); font-size: .92em; }
.changelog-state { padding: 24px; color: var(--ink-soft); background: var(--paper); border: 2px solid var(--ink); font-family: var(--mono); font-size: 12px; }
.changelog-state--error { color: #8c3f2d; background: #fff1e7; }

@media (max-width: 960px) {
  .changelog-hero { grid-template-columns: 1fr; gap: 32px; padding-bottom: 58px; }
  .changelog-hero-note { max-width: 620px; }
  .changelog-layout { grid-template-columns: 1fr; }
  .changelog-aside { position: static; }
  .release-index { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .changelog-back { width: auto; }
}

@media (max-width: 720px) {
  .changelog-main { padding: 65px 0 90px; }
  .changelog-hero { padding-bottom: 48px; }
  .changelog-hero h1 { font-size: clamp(36px, 11vw, 54px); }
  .changelog-hero > div:first-child > p { font-size: 16px; }
  .release-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .release-card__head { align-items: flex-start; flex-direction: column; }
  .release-card__body { padding: 18px; }
}