.lifecycle-page {
    --lifecycle-ink: var(--color-text, #14231b);
    --lifecycle-copy: #294138;
    --lifecycle-muted: var(--color-muted, #5d6c64);
    --lifecycle-line: rgb(47 146 107 / 17%);
    color: var(--lifecycle-copy);
    background:
        radial-gradient(ellipse 42% 20% at 6% 1%, rgb(191 234 87 / 23%), transparent 72%),
        radial-gradient(ellipse 38% 24% at 97% 12%, rgb(89 191 192 / 20%), transparent 74%),
        radial-gradient(ellipse 34% 22% at 4% 50%, rgb(132 220 101 / 12%), transparent 76%),
        radial-gradient(ellipse 36% 23% at 96% 79%, rgb(89 191 192 / 11%), transparent 76%),
        linear-gradient(135deg, #fbfdfb 0%, #f5fbf6 48%, #f1faf9 100%);
    overflow: clip;
}

.lifecycle-page .shell { width: min(calc(100% - 48px), 1320px); }
.lifecycle-page h1,
.lifecycle-page h2,
.lifecycle-page h3 { margin: 0; color: var(--lifecycle-ink); letter-spacing: -.04em; }
.lifecycle-page p,
.lifecycle-page dl { margin: 0; }
.lifecycle-page section[id] { scroll-margin-top: 11rem; }
.lifecycle-breadcrumb { padding-top: 18px; padding-bottom: 12px; }

.lifecycle-hero,
.lifecycle-definition,
.lifecycle-section,
.lifecycle-faq,
.lifecycle-final {
    border: 1px solid rgb(255 255 255 / 86%);
    background: linear-gradient(135deg, rgb(255 255 255 / 91%), rgb(248 252 249 / 78%));
    box-shadow: 0 24px 58px rgb(25 68 49 / 9%);
    backdrop-filter: blur(18px);
}

.lifecycle-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(19rem, .65fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 5rem);
    padding: clamp(2.4rem, 4.5vw, 4.5rem);
    border-radius: 32px;
}
.lifecycle-hero h1 { font-size: clamp(2.65rem, 4vw, 4rem); line-height: 1.02; }
.lifecycle-hero > div > p { max-width: 53rem; margin-top: 1rem; font-size: clamp(1.05rem, 1.45vw, 1.2rem); line-height: 1.6; }
.lifecycle-answer { padding-left: clamp(1.5rem, 3vw, 2.5rem); border-left: 1px solid rgb(47 146 107 / 25%); }
.lifecycle-answer span { display: block; margin-bottom: .55rem; color: #176d3a; font-size: .92rem; font-weight: 820; }
.lifecycle-answer p { line-height: 1.62; }

.lifecycle-definition {
    display: grid;
    grid-template-columns: minmax(15rem, .58fr) minmax(0, 1.42fr);
    gap: clamp(2.5rem, 6vw, 6rem);
    margin-top: 28px;
    padding: clamp(2rem, 4vw, 3.5rem);
    border-radius: 28px;
}
.lifecycle-definition h2,
.lifecycle-faq h2,
.lifecycle-section-heading h2 { font-size: clamp(1.9rem, 3vw, 2.75rem); line-height: 1.08; }
.lifecycle-definition dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--lifecycle-line); border-left: 1px solid var(--lifecycle-line); }
.lifecycle-definition dl > div { min-height: 8rem; padding: 1.2rem 1.35rem; border-right: 1px solid var(--lifecycle-line); border-bottom: 1px solid var(--lifecycle-line); }
.lifecycle-definition dt,
.lifecycle-history-table th { color: var(--lifecycle-ink); font-weight: 820; }
.lifecycle-definition dd { margin-top: .45rem; line-height: 1.55; }

.lifecycle-jump {
    position: sticky;
    z-index: 12;
    top: 76px;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 5px;
    margin-top: 28px;
    margin-bottom: 36px;
    padding: 5px;
    border: 1px solid rgb(255 255 255 / 88%);
    border-radius: 18px;
    background: rgb(249 252 250 / 88%);
    box-shadow: 0 16px 38px rgb(25 68 49 / 10%);
    backdrop-filter: blur(20px);
}
.lifecycle-jump a { display: flex; min-width: 0; min-height: 50px; align-items: center; gap: .7rem; padding: .55rem .65rem; border: 1px solid transparent; border-radius: 13px; color: var(--lifecycle-ink); text-decoration: none; transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.lifecycle-jump a:hover,
.lifecycle-jump a:focus-visible { border-color: rgb(47 146 107 / 18%); background: rgb(255 255 255 / 78%); }
.lifecycle-jump a.is-active { border-color: rgb(47 146 107 / 17%); background: linear-gradient(105deg, rgb(191 234 87 / 22%), rgb(89 191 192 / 14%)); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 58%); }
.lifecycle-jump span { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; border-radius: 50%; color: #176d3a; background: #edf7ef; font-size: .76rem; font-weight: 850; }
.lifecycle-jump a.is-active span { color: #fff; background: linear-gradient(135deg, #43ad73, #59bfc0); box-shadow: inset 0 0 0 1px rgb(21 103 61 / 38%); }
.lifecycle-jump strong { overflow: hidden; font-size: .8rem; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }

.lifecycle-section { margin-top: 28px; padding: clamp(2rem, 4vw, 3.5rem); border-radius: 28px; }
.lifecycle-section-current {
    border-color: rgb(47 146 107 / 19%);
    background:
        radial-gradient(circle at 96% 0%, rgb(89 191 192 / 15%), transparent 25rem),
        radial-gradient(circle at 0% 100%, rgb(191 234 87 / 12%), transparent 25rem),
        linear-gradient(135deg, rgb(255 255 255 / 94%), rgb(248 252 249 / 82%));
}
.lifecycle-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: clamp(1.6rem, 3vw, 2.5rem); }
.lifecycle-section-heading p { max-width: 52rem; margin-top: .65rem; line-height: 1.55; }
.lifecycle-version-status { border-top: 1px solid var(--lifecycle-line); }
.lifecycle-version-status details { border-bottom: 1px solid var(--lifecycle-line); }
.lifecycle-version-status summary { position: relative; display: grid; grid-template-columns: minmax(12rem, .32fr) minmax(0, .68fr); align-items: center; gap: 1.5rem; min-height: 70px; padding: 1rem 3rem 1rem .25rem; color: var(--lifecycle-ink); cursor: pointer; list-style: none; }
.lifecycle-version-status summary::-webkit-details-marker,
.lifecycle-faq summary::-webkit-details-marker { display: none; }
.lifecycle-version-status summary span { font-size: 1.08rem; font-weight: 850; }
.lifecycle-version-status summary small { color: var(--lifecycle-muted); font-size: .95rem; }
.lifecycle-version-status summary::after,
.lifecycle-faq summary::after { position: absolute; right: .3rem; color: #176d3a; content: "+"; font-size: 1.45rem; line-height: 1; }
.lifecycle-version-status details[open] summary::after,
.lifecycle-faq details[open] summary::after { content: "−"; }
.lifecycle-version-status dl { margin: 0 0 1.2rem; border: 1px solid var(--lifecycle-line); border-radius: 16px; background: rgb(255 255 255 / 62%); overflow: hidden; }
.lifecycle-version-status dl > div { display: grid; grid-template-columns: minmax(12rem, .32fr) minmax(0, .68fr); gap: 1.5rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--lifecycle-line); }
.lifecycle-version-status dl > div:last-child { border-bottom: 0; }
.lifecycle-version-status dt { color: var(--lifecycle-ink); font-weight: 800; }
.lifecycle-version-status dd { line-height: 1.58; }
.lifecycle-version-status dd a { color: #176d3a; font-weight: 760; }

.lifecycle-os-note { display: grid; grid-template-columns: minmax(13rem, .32fr) minmax(0, .68fr); gap: 2rem; margin-top: 28px; padding: 1.45rem 1.65rem; border: 1px solid rgb(47 146 107 / 18%); border-radius: 20px; background: linear-gradient(105deg, rgb(191 234 87 / 15%), rgb(89 191 192 / 10%)); }
.lifecycle-os-note strong { color: var(--lifecycle-ink); }
.lifecycle-os-note p { line-height: 1.58; }

.lifecycle-history-table-wrap { overflow-x: auto; border: 1px solid var(--lifecycle-line); border-radius: 18px; background: rgb(255 255 255 / 65%); }
.lifecycle-history-table { width: 100%; border-collapse: collapse; }
.lifecycle-history-table th,
.lifecycle-history-table td { min-width: 9.5rem; padding: 1rem 1.15rem; border-bottom: 1px solid var(--lifecycle-line); text-align: left; vertical-align: top; line-height: 1.5; }
.lifecycle-history-table th:first-child { min-width: 15rem; }
.lifecycle-history-table thead { background: linear-gradient(105deg, rgb(191 234 87 / 15%), rgb(89 191 192 / 10%)); }
.lifecycle-history-table tbody tr:last-child > * { border-bottom: 0; }

.lifecycle-faq { margin-top: 28px; padding: clamp(2rem, 4vw, 3.5rem); border-radius: 28px; }
.lifecycle-faq header { margin-bottom: 1.4rem; }
.lifecycle-faq > div { border-top: 1px solid var(--lifecycle-line); }
.lifecycle-faq details { border-bottom: 1px solid var(--lifecycle-line); }
.lifecycle-faq summary { position: relative; min-height: 64px; padding: 1.2rem 3rem 1.2rem 0; color: var(--lifecycle-ink); font-weight: 830; cursor: pointer; list-style: none; }
.lifecycle-faq summary::after { top: 1.2rem; }
.lifecycle-faq details p { width: 100%; max-width: none; padding: 0 3rem 1.3rem 0; line-height: 1.62; }

.lifecycle-final { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-top: 28px; margin-bottom: clamp(3.5rem, 6vw, 6rem); padding: clamp(1.8rem, 3vw, 2.7rem); border-color: rgb(47 146 107 / 22%); border-radius: 28px; background: linear-gradient(105deg, rgb(191 234 87 / 24%), rgb(89 191 192 / 20%)); }
.lifecycle-final h2 { font-size: clamp(1.8rem, 2.7vw, 2.65rem); }
.lifecycle-final p { margin-top: .45rem; }
.lifecycle-final > div:last-child { display: flex; flex: 0 0 auto; gap: .65rem; }
.lifecycle-button { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; padding: 10px 18px; border: 1px solid #8ab7a0; border-radius: 12px; color: #145f38; background: rgb(255 255 255 / 82%); font-size: 13px; font-weight: 800; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.lifecycle-button-light { color: #fff; border-color: #237b4c; background: linear-gradient(105deg, #55b768, #59aaa5); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 26%), 0 10px 22px rgb(38 116 76 / 12%); }
.lifecycle-button-outline { background: rgb(255 255 255 / 68%); }
.lifecycle-button:hover { transform: translateY(-2px); box-shadow: 0 12px 25px rgb(21 79 47 / 14%); }

@media (min-width: 1801px) {
    .lifecycle-jump { top: 92px; }
}

@media (max-width: 1050px) {
    .lifecycle-jump { display: flex; overflow-x: auto; scroll-padding-inline: 5px; scrollbar-width: none; }
    .lifecycle-jump::-webkit-scrollbar { display: none; }
    .lifecycle-jump a { min-width: 158px; flex: 0 0 auto; }
}

@media (max-width: 900px) {
    .lifecycle-hero,
    .lifecycle-definition { grid-template-columns: 1fr; }
    .lifecycle-hero { gap: 1.8rem; }
    .lifecycle-answer { padding-top: 1.35rem; padding-left: 0; border-top: 1px solid rgb(47 146 107 / 25%); border-left: 0; }
    .lifecycle-definition { gap: 1.8rem; }
}

@media (max-width: 760px) {
    .lifecycle-page .shell { width: min(calc(100% - 28px), 1320px); }
    .lifecycle-page section[id] { scroll-margin-top: 9rem; }
    .lifecycle-breadcrumb { padding-top: 12px; padding-bottom: 10px; }
    .lifecycle-hero,
    .lifecycle-definition,
    .lifecycle-section,
    .lifecycle-faq,
    .lifecycle-final { border-radius: 22px; }
    .lifecycle-hero,
    .lifecycle-definition,
    .lifecycle-section,
    .lifecycle-faq { padding: 1.45rem; }
    .lifecycle-hero h1 { font-size: clamp(2.25rem, 11vw, 3rem); }
    .lifecycle-definition dl { grid-template-columns: 1fr; }
    .lifecycle-definition dl > div { min-height: 0; }
    .lifecycle-jump { top: 68px; margin-top: 18px; margin-bottom: 24px; border-radius: 16px; }
    .lifecycle-jump a { min-width: 150px; min-height: 46px; }
    .lifecycle-section-heading,
    .lifecycle-final { align-items: stretch; flex-direction: column; }
    .lifecycle-section-heading--split .lifecycle-button,
    .lifecycle-final .lifecycle-button { width: 100%; }
    .lifecycle-version-status summary,
    .lifecycle-version-status dl > div,
    .lifecycle-os-note { grid-template-columns: 1fr; gap: .45rem; }
    .lifecycle-version-status summary { min-height: 68px; }
    .lifecycle-os-note { padding: 1.3rem; }
    .lifecycle-final { padding: 1.45rem; }
    .lifecycle-final > div:last-child { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    .lifecycle-button,
    .lifecycle-jump a { transition: none; }
}