.changelog-page { min-height: 70vh; color: var(--guide-text); }
.changelog-page [hidden] { display: none !important; }
.changelog-shell { width: min(1160px, calc(100% - 48px)); margin: 0 auto; }
.changelog-hero { position: relative; overflow: hidden; padding: 88px 0 82px; border-bottom: 1px solid var(--guide-border); background: radial-gradient(circle at 78% 14%, rgba(241,100,106,.13), transparent 23rem), radial-gradient(circle at 88% 80%, rgba(94,168,255,.11), transparent 24rem), linear-gradient(135deg, rgba(47,143,255,.07), transparent 58%); }
.changelog-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 72px; align-items: center; }
.tutorial-page-content .changelog-eyebrow { margin: 0 0 16px; color: #7db7fb; font-size: 11px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.tutorial-page-content .changelog-hero h1 { max-width: 760px; margin: 0; color: #fff; font: 700 clamp(44px, 6vw, 66px)/1.03 "Barlow", "Roboto", Arial, sans-serif; letter-spacing: -.04em; }
.changelog-hero h1 em { color: #f1646a; font-style: normal; }
.tutorial-page-content .changelog-lead { max-width: 720px; margin: 24px 0 0; color: #b8c3d1; font-size: 18px; line-height: 1.68; }
.tutorial-page-content .changelog-rss-link, .tutorial-page-content .changelog-rss-link:visited { display: inline-flex; align-items: center; gap: 9px; margin-top: 28px; color: #95c5ff; font-size: 13px; font-weight: 800; text-decoration: none; }
.changelog-rss-link:hover { color: #fff; }
.changelog-hero-art { position: relative; width: 290px; height: 280px; justify-self: end; }
.changelog-art-rail { position: absolute; top: 22px; bottom: 22px; left: 50%; width: 3px; border-radius: 999px; background: linear-gradient(#f1646a, #7db7fb 48%, #43d29d); box-shadow: 0 0 28px rgba(94,168,255,.28); transform: translateX(-50%); }
.changelog-art-rail::before, .changelog-art-rail::after { position: absolute; left: 50%; width: 126px; height: 1px; background: linear-gradient(90deg, transparent, rgba(125,183,251,.38), transparent); content: ""; transform: translateX(-50%); }
.changelog-art-rail::before { top: 31%; }.changelog-art-rail::after { bottom: 25%; }
.changelog-art-node, .changelog-art-signal { position: absolute; display: grid; place-items: center; border: 1px solid rgba(148,180,221,.28); background: #18202c; box-shadow: 0 16px 42px rgba(0,0,0,.32), inset 0 1px rgba(255,255,255,.06); }
.changelog-art-node { left: 50%; width: 52px; height: 52px; border-radius: 17px; color: #a9d1ff; transform: translateX(-50%) rotate(45deg); }
.changelog-art-node i { transform: rotate(-45deg); }
.changelog-art-node-one { top: 4px; color: #ff8c91; }.changelog-art-node-two { top: 114px; color: #8ec4ff; }.changelog-art-node-three { bottom: 1px; color: #5de0ad; }
.changelog-art-signal { top: 50%; right: 4px; width: 86px; height: 86px; border-radius: 27px; transform: translateY(-50%); }
.changelog-art-signal::before { position: absolute; right: 100%; width: 58px; height: 1px; background: linear-gradient(90deg, rgba(125,183,251,.3), rgba(125,183,251,.8)); content: ""; }
.changelog-art-signal img { width: 48px; height: 48px; }
.changelog-content { padding-top: 38px; padding-bottom: 94px; }
.changelog-filters { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 48px; }
.tutorial-page-content .changelog-filter { min-height: 39px; margin: 0; padding: 0 15px; border: 1px solid var(--guide-border); border-radius: 999px; background: var(--guide-surface); color: var(--guide-muted); font: 700 13px/1 "Roboto", Arial, sans-serif; cursor: pointer; transition: border-color .16s ease, background-color .16s ease, color .16s ease; }
.tutorial-page-content .changelog-filter:hover, .tutorial-page-content .changelog-filter:focus-visible { border-color: rgba(94,168,255,.5); color: #fff; }
.tutorial-page-content .changelog-filter.is-active { border-color: rgba(94,168,255,.55); background: rgba(47,143,255,.12); color: #8fc5ff; }
.changelog-timeline { display: grid; }
.changelog-update { display: grid; grid-template-columns: 138px minmax(0, 1fr); }
.changelog-update-date { position: relative; display: flex; align-items: flex-start; justify-content: flex-end; padding: 31px 33px 0 0; color: #8492a5; font-size: 12px; font-weight: 700; }
.changelog-update-date::after { position: absolute; top: 0; right: 9px; bottom: 0; width: 1px; background: var(--guide-border); content: ""; }
.changelog-update-date span { position: absolute; z-index: 1; top: 35px; right: 3px; width: 13px; height: 13px; border: 3px solid #0f1217; border-radius: 50%; background: #6fb2ff; box-shadow: 0 0 0 1px rgba(111,178,255,.4), 0 0 18px rgba(111,178,255,.35); }
.tutorial-page-content .changelog-update-card, .tutorial-page-content .changelog-update-card:visited { display: grid; min-height: 236px; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: center; margin: 0 0 20px 24px; padding: 28px; border: 1px solid var(--guide-border); border-radius: 17px; background: linear-gradient(145deg, rgba(94,168,255,.05), transparent 48%), var(--guide-surface); color: #fff; text-decoration: none; transition: transform .18s ease, border-color .18s ease, background-color .18s ease; }
.tutorial-page-content .changelog-update-card:hover, .tutorial-page-content .changelog-update-card:focus { border-color: rgba(94,168,255,.48); background-color: var(--guide-raised); color: #fff; transform: translateY(-2px); }
.changelog-update-card-copy-only { grid-template-columns: minmax(0, 1fr); }
.changelog-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.changelog-badge { display: inline-flex; min-height: 25px; align-items: center; padding: 0 9px; border: 1px solid transparent; border-radius: 999px; font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.changelog-badge-new { border-color: rgba(67,210,157,.32); background: rgba(67,210,157,.09); color: #5fe0af; }
.changelog-badge-improved { border-color: rgba(94,168,255,.34); background: rgba(94,168,255,.09); color: #8fc5ff; }
.changelog-badge-fixed { border-color: rgba(242,193,78,.34); background: rgba(242,193,78,.09); color: #f5ce66; }
.changelog-product { color: #9daaba; font-size: 11px; font-weight: 800; }
.changelog-update h2 { margin: 18px 0 11px; color: #fff; font: 700 clamp(25px, 3vw, 33px)/1.16 "Barlow", "Roboto", Arial, sans-serif; letter-spacing: -.025em; }
.tutorial-page-content .changelog-update p { margin: 0; color: #a9b4c4; font-size: 15px; line-height: 1.65; }
.changelog-read-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; color: #8fc5ff; font-size: 12px; font-weight: 900; }
.changelog-update-media { overflow: hidden; display: block; aspect-ratio: 16 / 10; border: 1px solid rgba(148,163,184,.16); border-radius: 12px; background: #0b0e13; }
.changelog-update-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; opacity: .88; transition: opacity .2s ease, transform .35s ease; }
.changelog-update-card:hover .changelog-update-media img { opacity: 1; transform: scale(1.02); }
.changelog-empty { padding: 58px 24px; border: 1px dashed rgba(94,168,255,.3); border-radius: 16px; background: var(--guide-surface); text-align: center; }
.changelog-empty i { color: #7db7fb; font-size: 24px; }.changelog-empty h2 { margin: 13px 0 6px; color: #fff; font: 700 26px "Barlow", sans-serif; }.tutorial-page-content .changelog-empty p { margin: 0 0 18px; color: var(--guide-muted); }
.tutorial-page-content .changelog-empty button { min-height: 40px; padding: 0 15px; border: 1px solid rgba(94,168,255,.45); border-radius: 8px; background: rgba(47,143,255,.12); color: #8fc5ff; font: 800 13px "Roboto", sans-serif; cursor: pointer; }
.changelog-entry-hero { padding: 62px 0 58px; border-bottom: 1px solid var(--guide-border); background: radial-gradient(circle at 83% 0, rgba(94,168,255,.14), transparent 28rem), linear-gradient(135deg, rgba(47,143,255,.07), transparent 58%); }
.changelog-entry-shell { width: min(1080px, calc(100% - 48px)); margin: 0 auto; }
.tutorial-page-content .changelog-back, .tutorial-page-content .changelog-back:visited { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 36px; color: #95a3b6; font-size: 13px; font-weight: 800; text-decoration: none; }
.changelog-back:hover { color: #8fc5ff; }
.changelog-entry-hero time { color: #8996a8; font-size: 11px; font-weight: 700; }
.tutorial-page-content .changelog-entry-hero h1 { max-width: 900px; margin: 20px 0 0; color: #fff; font: 700 clamp(40px, 5.8vw, 61px)/1.06 "Barlow", "Roboto", Arial, sans-serif; letter-spacing: -.04em; }
.tutorial-page-content .changelog-entry-hero > div > p { max-width: 800px; margin: 24px 0 0; color: #b8c3d1; font-size: 19px; line-height: 1.65; }
.changelog-entry-layout { display: grid; grid-template-columns: minmax(0, 1fr) 245px; gap: 66px; align-items: start; padding-top: 54px; padding-bottom: 90px; }
.changelog-entry-main { min-width: 0; }
.changelog-entry-image { overflow: hidden; margin: 0 0 42px; padding: 7px; border: 1px solid var(--guide-border); border-radius: 16px; background: #0b0e13; box-shadow: 0 28px 68px rgba(0,0,0,.23); }
.changelog-entry-image img { display: block; width: 100%; height: auto; border-radius: 10px; }
.changelog-entry-content > p:first-child { color: #d5dce6; font-size: 20px; line-height: 1.7; }
.tutorial-page-content .changelog-entry-content p, .tutorial-page-content .changelog-entry-content li { color: var(--guide-muted); font-size: 17px; line-height: 1.76; }
.changelog-entry-content p { margin: 0 0 24px; }
.tutorial-page-content .changelog-entry-content h2 { margin: 54px 0 20px; padding-top: 50px; border-top: 1px solid var(--guide-border); color: #fff; font: 700 clamp(27px, 4vw, 36px)/1.2 "Barlow", "Roboto", Arial, sans-serif; letter-spacing: -.027em; }
.changelog-entry-content strong { color: #eef4fb; }.tutorial-page-content .changelog-entry-content a { color: #81bbff; text-underline-offset: 3px; }
.changelog-entry-actions { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-top: 62px; padding: 27px 29px; border: 1px solid rgba(94,168,255,.28); border-radius: 15px; background: radial-gradient(circle at 100% 0, rgba(47,143,255,.13), transparent 58%), var(--guide-surface) !important; }
.tutorial-page-content .changelog-entry-actions p { margin: 0 0 7px; color: #7db7fb; font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }.changelog-entry-actions h2 { margin: 0; color: #fff; font: 700 23px/1.2 "Barlow", sans-serif; }
.changelog-entry-actions > div:last-child { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
.tutorial-page-content .changelog-entry-actions a, .tutorial-page-content .changelog-entry-actions a:visited { display: inline-flex; min-height: 42px; align-items: center; gap: 8px; padding: 0 15px; border: 1px solid rgba(94,168,255,.38); border-radius: 8px; background: rgba(47,143,255,.09); color: #cfe5ff; font-size: 12px; font-weight: 900; text-decoration: none; white-space: nowrap; }
.tutorial-page-content .changelog-entry-actions a.is-primary { border-color: #5ea8ff; background: #2f8fff; color: #07111e; }
.changelog-recent { position: sticky; top: 102px; display: grid; gap: 5px; padding: 19px; border: 1px solid var(--guide-border); border-radius: 13px; background: var(--guide-surface); }
.changelog-recent > strong { margin-bottom: 8px; color: #fff; font-size: 13px; }
.tutorial-page-content .changelog-recent a, .tutorial-page-content .changelog-recent a:visited { display: grid; gap: 4px; padding: 11px 10px; border-left: 2px solid transparent; color: #e2e9f2; text-decoration: none; }
.tutorial-page-content .changelog-recent a:hover { border-left-color: #5ea8ff; background: rgba(94,168,255,.05); color: #fff; }.changelog-recent a span { color: #7f8da0; font-size: 10px; }.changelog-recent a b { font-size: 12px; line-height: 1.4; }
.tutorial-page-content .changelog-recent .changelog-recent-all { margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--guide-border); border-left: 0; color: #8fc5ff; font-size: 12px; font-weight: 800; }
@media (max-width: 900px) { .changelog-hero-grid { grid-template-columns: 1fr; }.changelog-hero-art { display: none; }.changelog-entry-layout { grid-template-columns: 1fr; gap: 42px; }.changelog-recent { position: static; } }
@media (max-width: 720px) { .changelog-shell, .changelog-entry-shell { width: min(100% - 28px, 1160px); }.changelog-hero { padding: 66px 0 64px; }.changelog-update { position: relative; grid-template-columns: 1fr; padding-left: 20px; }.changelog-update::before { position: absolute; top: 8px; bottom: 0; left: 5px; width: 1px; background: var(--guide-border); content: ""; }.changelog-update-date { position: static; justify-content: flex-start; padding: 0 0 11px; }.changelog-update-date::after { display: none; }.changelog-update-date span { top: 4px; right: auto; left: 0; }.tutorial-page-content .changelog-update-card { grid-template-columns: 1fr; margin-left: 0; padding: 23px; }.changelog-update-media { order: -1; }.changelog-entry-actions { align-items: flex-start; flex-direction: column; }.changelog-entry-actions > div:last-child { justify-content: flex-start; } }
@media (max-width: 480px) { .tutorial-page-content .changelog-hero h1 { font-size: 44px; }.changelog-filters { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; scrollbar-width: none; }.changelog-filter { flex: 0 0 auto; }.changelog-entry-actions > div:last-child, .changelog-entry-actions a { width: 100%; }.tutorial-page-content .changelog-entry-actions a { justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .changelog-update-card, .changelog-update-media img { transition: none !important; } }