.product-hero-grid:has(.rgb-demo) h1{font-size:clamp(2.6rem,4.5vw,4.7rem)}
.rgb-demo{align-self:stretch;display:flex;flex-direction:column;justify-content:center}
.rgb-demo-stage{position:relative;display:grid;place-items:center;min-height:320px;margin:25px -8px 0;padding:70px 22px;border:1px solid #ffffff0e;border-radius:16px;background:radial-gradient(ellipse,#25313c,#0b1117 75%);overflow:hidden}
.rgb-stage-label,.rgb-stage-caption{position:absolute;left:18px;right:18px;font-size:8px;letter-spacing:.12em;color:#a2afaf;line-height:1.6}.rgb-stage-label{top:18px}.rgb-stage-caption{bottom:20px;text-align:center;letter-spacing:.04em}
.rgb-strip{display:grid;grid-template-columns:repeat(30,minmax(0,1fr));gap:5px 4px;width:100%;padding:13px 10px;border:1px solid #59605a;border-radius:5px;background:#070b0c;box-shadow:0 18px 32px #0009;transform:perspective(700px) rotateX(10deg)}
.rgb-strip i{display:block;aspect-ratio:1;border-radius:2px;background:var(--pixel-color);box-shadow:0 0 8px var(--pixel-color),0 0 18px var(--pixel-color);opacity:var(--pixel-opacity,1)}
.rgb-readout{display:flex;justify-content:space-between;gap:12px;margin:26px 0}.rgb-readout>div:last-child{text-align:right}.rgb-readout small{display:block;color:#a9b6b0;font-size:9px;letter-spacing:.12em;margin-bottom:8px}.rgb-readout strong{font-size:clamp(17px,2vw,22px);font-weight:500;color:#f1eadc}
.rgb-controls{display:grid;grid-template-columns:1fr 1fr;gap:14px}.rgb-controls button{display:flex;align-items:center;gap:14px;padding:16px;border:1px solid #697064;border-radius:12px;background:linear-gradient(140deg,#364039,#202725);color:#ebd39b;cursor:pointer;touch-action:manipulation}.rgb-controls b{display:grid;place-items:center;width:42px;height:42px;flex-shrink:0;border:1px solid #a99d7f;border-radius:9px;box-shadow:0 4px 0 #101613;font-size:23px}.rgb-controls span{font-size:12px;text-align:left}.rgb-controls button:active b{transform:translateY(3px);box-shadow:0 1px 0 #101613}.rgb-controls button:hover{border-color:#e2c68b}.rgb-demo button:disabled{opacity:.5;cursor:default}
.rgb-speed-track{display:flex;gap:8px;margin:21px 0}.rgb-speed-track i{height:4px;background:#414945;flex:1;border-radius:4px}.rgb-speed-track i[data-active=true]{background:#e0c48d}
.rgb-pause{align-self:flex-start;background:transparent;color:#d9c393;border:1px solid #6b6c5d;padding:9px 14px;border-radius:20px;font-size:11px;cursor:pointer;margin:10px 0 0}
.rgb-demo--three .rgb-controls{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.rgb-demo--three .rgb-controls button{flex-direction:column;padding:14px 6px;gap:10px}.rgb-demo--three .rgb-controls span{text-align:center;font-size:11px}.rgb-power-readout{display:flex;justify-content:space-between;gap:12px;color:#e0c48d;font-size:12px;margin:0 0 20px}.rgb-hold-track{height:3px;margin-top:12px;background:#35403b;border-radius:3px;overflow:hidden}.rgb-hold-track span{display:block;height:100%;width:0;background:#e0c48d}.rgb-demo[data-holding=true] .rgb-hold-track span{width:100%;transition:width 1.5s linear}.rgb-demo[data-holding=true] [data-rgb-speed-button]{outline:2px solid #e0c48d;outline-offset:2px}.rgb-demo[data-power=off] .rgb-strip{box-shadow:none}.rgb-power-accessible{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.rgb-power-accessible:focus{position:static;width:auto;height:auto;clip-path:none;padding:10px;background:#27322b;color:#eddbad}
@media(max-width:540px){.rgb-demo-stage{min-height:260px;margin-inline:0;padding-inline:10px}.rgb-strip{gap:4px 2px;padding:12px 6px}.rgb-controls button{padding:12px 9px;gap:9px}.rgb-controls span{font-size:10px}.rgb-controls b{width:35px;height:35px}.rgb-readout strong{font-size:17px}}