.pixel-showcase{background:#152b33;color:#fbf6e9;padding:58px 0 42px}.pixel-heading{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:30px}.pixel-heading .eyebrow{color:#e5ad77}.pixel-heading h2{max-width:650px;font-size:clamp(35px,4.1vw,58px);font-weight:400}.pixel-heading>p{max-width:350px;font-size:13px;color:#c2d0d0;line-height:1.8}.pixel-choices{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:24px}.pixel-choice{padding:5px;background:transparent;color:#dbe5e2;border:1px solid #52636a;border-radius:7px;text-align:left;min-width:0}.pixel-choice img{height:78px;width:100%;object-fit:cover;border-radius:3px}.pixel-choice span{display:block;font-size:11px;padding:9px 5px;line-height:1.35}.pixel-choice[aria-pressed=true]{border-color:#e3b07b;background:#e3b07b;color:#142b33}.pixel-stage{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:24px}.pixel-main{min-width:0}.pixel-compare{position:relative;height:440px;background:#0a171c;border:1px solid #405359;border-radius:8px;overflow:hidden}.pixel-compare>img,.pixel-before img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center}.pixel-compare>img{image-rendering:pixelated}.pixel-before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--px-split)) 0 0)}.pixel-label{position:absolute;top:16px;font-size:11px;background:#102027cf;border:1px solid #ffffff22;border-radius:4px;padding:7px 11px;z-index:2}.pixel-label.left{left:16px}.pixel-label.right{right:16px}.pixel-divider{position:absolute;left:var(--px-split);top:0;bottom:0;width:2px;background:#fff;pointer-events:none;z-index:3}.pixel-divider span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#fff;color:#152b33;border-radius:50%;width:44px;height:44px;display:grid;place-content:center;font-size:20px;box-shadow:0 2px 14px #0005}.pixel-compare input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;z-index:4}.pixel-compare:focus-within{outline:3px solid #e3b07b;outline-offset:4px}.pixel-caption{display:flex;justify-content:space-between;gap:15px;padding-top:14px;font-size:12px}.pixel-caption>span{color:#b9cbc7;font-size:11px}.pixel-detail{margin:0;min-width:0}.pixel-detail>div{height:340px;border-radius:8px;overflow:hidden;background:#0a171c}.pixel-detail img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated}.pixel-detail figcaption{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;margin-top:17px}.pixel-detail figcaption strong{color:#e3b07b;font:italic 32px var(--serif)}.pixel-detail p{font-size:11px;line-height:1.7;color:#b9cbc7;margin-top:8px;max-width:260px}.pixel-foot{display:flex;justify-content:space-between;gap:30px;align-items:center;margin-top:25px;padding-top:24px;border-top:1px solid #425860}.pixel-foot p{font-size:11px;color:#b9cbc7;max-width:540px;line-height:1.8}.pixel-foot .button{background:#f1e7d6;color:#152b33;white-space:nowrap}.pixel-showcase #pixelStatus{font-size:12px;margin-top:10px;color:#f4cdaa}.pixel-choice:focus-visible,.pixel-foot a:focus-visible{outline:3px solid #efcda3;outline-offset:3px}
@media(max-width:850px){.pixel-heading{display:block}.pixel-heading>p{max-width:600px;margin-top:18px}.pixel-compare{height:370px}.pixel-detail>div{height:270px}.pixel-stage{gap:16px}.pixel-choices{gap:8px}.pixel-choice img{height:65px}.pixel-choice span{font-size:10px;padding:7px 3px}.pixel-foot{align-items:flex-start}.pixel-caption{flex-wrap:wrap;gap:5px}}
@media(max-width:600px){.pixel-showcase{padding:35px 0}.pixel-heading{margin-bottom:22px}.pixel-heading>p{font-size:12px}.pixel-choices{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.pixel-choice img{height:70px}.pixel-choice span{font-size:10px}.pixel-stage{grid-template-columns:1fr;gap:21px}.pixel-compare{height:310px}.pixel-label{font-size:9px;top:10px;padding:6px 8px}.pixel-label.left{left:9px}.pixel-label.right{right:9px}.pixel-detail{display:grid;grid-template-columns:145px 1fr;column-gap:18px;align-items:center}.pixel-detail>div{height:145px;grid-row:1/3}.pixel-detail figcaption{font-size:12px;margin:0;align-items:flex-start;gap:5px;flex-direction:column}.pixel-detail figcaption strong{font-size:29px}.pixel-detail p{font-size:10px;margin:0;align-self:start}.pixel-foot{flex-direction:column;gap:18px;margin-top:21px}.pixel-foot p{font-size:10px}.pixel-foot .button{white-space:normal}.pixel-caption{font-size:11px}.pixel-caption>span{font-size:10px}}