/* Two review treatments share the existing copy, audio controls and 3 x 2 grid. */
html[data-cards] .feature-cards{width:min(100%,1600px);margin-inline:auto}
html[data-cards] .feature-trigger{--bc-copper:#ee9a63;--bc-gold:#ffcc8c;padding:20px;border-color:#ee9a6340;background:#0a101be8;color:#f4eee4;transition:border-color .2s,background .2s}
html[data-cards] .feature-trigger:hover{border-color:#ee9a6399;background:#101722}
html[data-cards] .feature-trigger.is-playing{border-color:#ffcc8c;box-shadow:inset 0 0 0 1px #ffcc8c55}
html[data-cards] .feature-name{font-size:19px;color:#f4eee4}
html[data-cards] .feature-card-heading .demo-meter{color:#ee9a63;height:15px}
html[data-cards] .feature-card .feature-short{margin-top:4px;font-size:15px;line-height:1.6;color:#c6c7cd}
html[data-cards] .feature-audio-label{padding-top:14px;color:#ee9a63}
html[data-cards] .feature-trigger.is-playing .feature-audio-label{color:#ffcc8c}
html[data-cards] .feature-audio-option{border-color:#ee9a6355;background:#0d1521;color:#d9bfa7}
html[data-cards] .feature-audio-option[aria-pressed=true]{background:#ffcc8c;color:#131820;border-color:#ffcc8c}
.bc-art{display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0;width:100%;margin:12px 0;pointer-events:none}
.bc-art [hidden]{display:none!important}
.bc-diagram{height:144px}
.bc-glyph{display:block;width:min(100%,320px);height:144px;fill:none;stroke:var(--bc-copper);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.bc-glyph path,.bc-glyph circle{vector-effect:non-scaling-stroke}
.bc-glyph .bc-guide{stroke:var(--bc-gold);opacity:.32;stroke-width:1}
.bc-glyph .bc-filament{opacity:.6}
.bc-glyph .bc-clean{stroke:var(--bc-gold)}
.bc-glyph .bc-solid{fill:var(--bc-gold);stroke:none}
.bc-arc{transform-box:fill-box;transform-origin:center}
.bc-glyph-funnel .bc-arc{--bc-animation:bc-narrow}
.bc-glyph-widen .bc-arc{--bc-animation:bc-open}
.bc-sweep-dot{--bc-animation:bc-sweep}
.bc-fray{--bc-animation:bc-fray;--bc-duration:2.8s}
.bc-spread-line{--bc-animation:bc-spread;stroke-dasharray:1;stroke-dashoffset:0}
.bc-glyph-pingpong{--bc-duration:2.8s}
.bc-bounce{--bc-animation:bc-bounce}
.bc-gold-dot{--bc-animation:bc-amber;fill:var(--bc-gold);stroke:none}
.bc-violet-dot{--bc-animation:bc-violet;fill:#b8a0f2;stroke:none;opacity:0}
.bc-glyph .bc-violet-guide{stroke:#b8a0f2;stroke-width:1;opacity:.4}
.bc-art .bc-motion{animation:none}
.bc-art[data-motion=preview] .bc-motion,.bc-art[data-motion=playing] .bc-motion{animation-name:var(--bc-animation);animation-duration:var(--bc-duration,2.6s);animation-timing-function:ease-in-out;animation-delay:var(--bc-delay,0s);animation-fill-mode:both;animation-iteration-count:1}
.bc-art[data-motion=playing] .bc-motion{animation-iteration-count:infinite}
@keyframes bc-narrow{0%,100%{transform:translateX(0) scaleY(1);opacity:1}50%{transform:translateX(7px) scaleY(.75);opacity:.5}}
@keyframes bc-open{0%,100%{transform:translateX(0) scaleY(1);opacity:1}50%{transform:translateX(5px) scaleY(1.16);opacity:.65}}
@keyframes bc-sweep{0%,10%,100%{transform:translate(112px,38px);opacity:1}70%{transform:translate(218px,106px);opacity:1}80%{transform:translate(218px,106px);opacity:0}81%{transform:translate(112px,38px);opacity:0}}
@keyframes bc-fray{0%,100%{transform:translate(0,0);opacity:.8}25%{transform:translate(1px,-1px);opacity:1}55%{transform:translate(-1px,2px);opacity:.65}75%{transform:translate(2px,0);opacity:1}}
@keyframes bc-spread{0%{stroke-dashoffset:1;opacity:.4}75%,100%{stroke-dashoffset:0;opacity:1}}
@keyframes bc-bounce{0%,100%{transform:translate(96px,72px)}50%{transform:translate(224px,72px)}}
@keyframes bc-amber{0%,49.9%,100%{opacity:1}50%,99.9%{opacity:0}}
@keyframes bc-violet{0%,49.9%,100%{opacity:0}50%,99.9%{opacity:1}}

/* C: transparent objects sit directly against the section's existing sky. */
html[data-cards=c] .feature-trigger{background:transparent;border-color:#ee9a6324;box-shadow:none}
html[data-cards=c] .feature-trigger:hover{background:#0a101b33;border-color:#ee9a6366}
html[data-cards=c] .feature-trigger.is-playing{background:#0a101b44;border-color:#ffcc8c88;box-shadow:none}
.bc-celestial{height:224px}
.bc-celestial-image{--bc-animation:bc-drift;--bc-duration:5.4s;display:block;width:210px;height:210px;object-fit:contain;opacity:0;transition:opacity .22s ease;transform-origin:center}
.bc-celestial[data-ready=true] .bc-celestial-image{opacity:.88}
.bc-celestial:not([data-ready=true]) .bc-motion{animation:none!important}
.bc-celestial[data-ready=true][data-motion=preview] .bc-celestial-image{opacity:.97}
.feature-trigger.is-playing .bc-celestial[data-ready=true] .bc-celestial-image{opacity:1}
.bc-celestial-pending{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;color:#bda68b}
.bc-celestial-pending svg{width:96px;height:96px;fill:none;stroke:#ee9a63;stroke-width:.75;opacity:.4}
.bc-celestial-pending circle{fill:#ffcc8c;stroke:none}
.bc-pending-label{font-size:10px;line-height:1.5;letter-spacing:.08em;color:#a6998b}
@keyframes bc-drift{0%,100%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(3px,-5px) rotate(2deg)}}
@media(max-width:650px){
 html[data-cards] .feature-trigger{padding:16px}
 html[data-cards] .feature-name{font-size:18px}
 .bc-diagram{height:128px}
 .bc-glyph{width:min(100%,288px);height:128px}
 .bc-celestial{height:204px}
 .bc-celestial-image{width:190px;height:190px}
}
@media(prefers-reduced-motion:reduce){
 .bc-art .bc-motion{animation:none!important;transition:none!important}
}

/* Ray 2026-10-24: celestial wins, but the cards ("chips") must be smaller. 2026-10-26: eight cards (the ramp DSP),
   Ray: smaller art, all in one row with a scroller. Wide screens fit all eight; narrower ones scroll sideways. */
html[data-cards=c] .feature-cards{width:min(100%,1600px);grid-template-columns:none;grid-auto-flow:column;
 grid-auto-columns:minmax(172px,1fr);gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
 padding:2px 2px 14px;scrollbar-width:thin;scrollbar-color:#e0408f88 #ffffff12}
html[data-cards=c] .feature-cards::-webkit-scrollbar{height:8px}
html[data-cards=c] .feature-cards::-webkit-scrollbar-track{background:#ffffff12;border-radius:4px}
html[data-cards=c] .feature-cards::-webkit-scrollbar-thumb{background:#e0408f88;border-radius:4px}
html[data-cards=c] .feature-cards::-webkit-scrollbar-thumb:hover{background:#e0408fcc}
html[data-cards=c] .feature-card{scroll-snap-align:start;min-width:0}
html[data-cards=c] .feature-trigger{padding:14px}
html[data-cards=c] .feature-name{font-size:15px}
html[data-cards=c] .feature-short{font-size:12.5px!important;margin-top:6px!important}
html[data-cards=c] .bc-celestial{height:112px}
html[data-cards=c] .bc-celestial-image{width:104px;height:104px}
@media(max-width:650px){
 html[data-cards=c] .feature-cards{grid-auto-columns:172px;gap:10px}
 html[data-cards=c] .feature-trigger{padding:12px}
 html[data-cards=c] .feature-name{font-size:14px}
 html[data-cards=c] .bc-celestial{height:92px}
 html[data-cards=c] .bc-celestial-image{width:86px;height:86px}
}