/* Starting points: editorial introduction + six living bar-built signals. */
#changes>.wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:0 80px}
#changes .section-head{align-self:start}
#changes .section-head h2{max-width:670px;font-size:clamp(44px,5.2vw,76px);line-height:1.02}
#changes .section-head h2 span{display:block;color:#3157ff}
#changes .reading{margin:8px 0 0;font-size:19px;align-self:center}
#changes .reading .support>p:last-child{font-size:14px;font-weight:700;color:#111925;margin-top:18px}
#changes .problem-grid,#changes>.wrap>details,#changes>.wrap>.fine,#changes>.wrap>.actions{grid-column:1/-1}
#changes .problem-grid{gap:18px;margin-top:48px}
#changes .problem{--accent:#3157ff;--secondary:#22cbc4;position:relative;isolation:isolate;overflow:hidden;background:#0c1118;border:1px solid #222c3a;border-radius:4px;padding:28px 28px 30px!important;display:flex;flex-direction:column;align-items:center;color:#fff;min-width:0}
#changes .problem:nth-child(2){--accent:#9969ff;--secondary:#3157ff}
#changes .problem:nth-child(3){--accent:#baff00;--secondary:#22cbc4}
#changes .problem:nth-child(4){--accent:#ff6549;--secondary:#baff00}
#changes .problem:nth-child(5){--accent:#22cbc4;--secondary:#9969ff}
#changes .problem:nth-child(6){--accent:#baff00;--secondary:#ff6549}
#changes .problem:before{content:'';height:3px;width:48px;position:absolute;top:0;left:calc(50% - 24px);background:var(--accent)}
#changes .problem svg{width:100%;max-width:240px;height:174px;margin:0 auto 24px;overflow:visible}
#changes .problem .symbol-bar{fill:var(--accent);rx:0;animation:none!important;transform-box:fill-box;transform-origin:center}
#changes .problem .symbol-bar:nth-child(4n){fill:var(--secondary)}
#changes .problem h3{font-size:28px;line-height:1.08;letter-spacing:-.04em;min-height:62px;max-width:280px;margin:0 auto 14px;color:#fff}
#changes .problem p{color:#bac5d2;font-size:15px;line-height:1.6;max-width:290px;min-height:48px;margin:0 auto;text-wrap:balance}
.signal-trace{height:30px;width:100%;margin-top:25px;border-top:1px solid #283341;display:flex;align-items:end;justify-content:center;gap:5px}
.signal-trace i{display:block;height:3px;width:18px;background:var(--accent);opacity:.25;transform-origin:left;animation:none}
#changes .problem.in-view .symbol-bar{animation:signal-breathe 5.8s ease-in-out infinite!important;animation-delay:calc(var(--delay) + var(--offset,0ms))!important}
#changes .problem:nth-child(2n){--offset:-1800ms}
#changes .problem:nth-child(3n){--offset:-3300ms}
#changes .problem:nth-child(2).in-view .symbol-bar{animation-name:signal-rest!important}
#changes .problem:nth-child(3).in-view .symbol-bar{animation-name:signal-balance!important}
#changes .problem:nth-child(4).in-view .symbol-bar{animation-name:signal-strength!important}
#changes .problem:nth-child(5).in-view .symbol-bar{animation-name:signal-focus!important}
#changes .problem:nth-child(6).in-view .symbol-bar{animation-name:signal-rest!important}
.problem.in-view .signal-trace i{animation:trace-flow 5.8s ease-in-out infinite;animation-delay:calc(var(--i)*160ms + var(--offset,0ms))}
@keyframes signal-breathe{0%,70%,100%{transform:translateY(0);opacity:1}25%{transform:translateY(-4px);opacity:.68}}
@keyframes signal-rest{0%,75%,100%{opacity:1;transform:translateX(0)}35%{opacity:.58;transform:translateX(2px)}}
@keyframes signal-balance{0%,70%,100%{transform:translateY(0)}35%{transform:translateY(3px)}}
@keyframes signal-strength{0%,70%,100%{transform:scaleX(1)}32%{transform:scaleX(1.16)}}
@keyframes signal-focus{0%,70%,100%{transform:scaleX(1);opacity:1}35%{transform:scaleX(.75);opacity:.6}}
@keyframes trace-flow{0%,65%,100%{opacity:.2;transform:scaleX(.65)}30%{opacity:1;transform:scaleX(1)}}
#changes>.wrap>details{max-width:850px;width:100%;margin-top:36px}
#changes>.wrap>.fine{margin-top:20px}
#changes>.wrap>.actions{margin-top:24px}
@media(max-width:1000px){#changes>.wrap{gap:0 36px}#changes .reading{font-size:17px}#changes .problem h3{font-size:26px}}
@media(max-width:760px){#changes>.wrap{display:block}#changes .section-head h2{font-size:44px}#changes .reading{margin-top:28px}#changes .problem-grid{margin-top:32px;gap:14px}#changes .problem{padding:24px!important}#changes .problem svg{height:158px;margin-bottom:20px}#changes .problem h3{min-height:0;font-size:27px}#changes .problem p{min-height:0}.signal-trace{margin-top:24px}}
.motion-muted #changes .problem.in-view .symbol-bar,.motion-muted .signal-trace i{animation:none!important;transform:none!important;opacity:1!important}
html[data-motion-state="paused"] #changes .problem:nth-child(n).in-view .symbol-bar,html[data-motion-state="paused"] .signal-trace i{animation:none!important}
