.puma-compare {
  --pc-ink:#ecf4ff;
  --pc-muted:#9eafc7;
  box-sizing:border-box;
  max-width:1100px;
  margin:2rem auto;
  border:1px solid #35445f;
  border-radius:24px;
  overflow:hidden;
  background:#080e20;
  color:var(--pc-ink);
  font:16px/1.6 system-ui,sans-serif;
  isolation:isolate}
.puma-compare * {
  box-sizing:border-box}
.puma-compare .pc-heading {
  padding:28px 32px 0}
.puma-compare .pc-heading>span {
  color:#55ead5;
  font-size:11px;
  letter-spacing:.24em}
.puma-compare h2 {
  color:var(--pc-ink);
  font:500 clamp(28px,5vw,46px)/1.1 system-ui,sans-serif;
  letter-spacing:-.04em;
  margin:12px 0}
.puma-compare .pc-stage {
  height:460px;
  position:relative;
  background:radial-gradient(ellipse at 25% 65%,#1c395345,transparent 60%),radial-gradient(ellipse at 80% 55%,#49328240,transparent 60%)}
.puma-compare canvas {
  display:block;
  width:100%;
  height:100%;
  touch-action:pan-y}
.puma-compare .pc-status {
  position:absolute;
  inset:45% 20px auto;
  text-align:center;
  color:var(--pc-muted)}
.puma-compare .pc-controls {
  display:flex;
  gap:8px;
  padding:0 32px 18px;
  flex-wrap:wrap}
.puma-compare [hidden] {
  display:none!important}
.puma-compare button {
  cursor:pointer;
  border:1px solid #536082;
  background:#192641;
  color:#effaff;
  border-radius:24px;
  padding:9px 18px;
  font:inherit}
.puma-compare button:hover,.puma-compare button[aria-pressed=true] {
  background:#48e0cc;
  color:#071b25}
.puma-compare button:focus-visible {
  outline:3px solid #cba8ff;
  outline-offset:3px}
.puma-compare table {
  width:calc(100% - 64px);
  margin:0 32px;
  border-collapse:collapse;
  color:var(--pc-ink);
  background:none}
.puma-compare caption {
  text-align:left;
  color:var(--pc-muted);
  font-size:13px;
  padding:8px 0}
.puma-compare th,.puma-compare td {
  padding:12px 0;
  border:0;
  border-bottom:1px solid #303c54;
  text-align:left;
  background:none;
  color:inherit}
.puma-compare td {
  text-align:right;
  font-variant-numeric:tabular-nums}
.puma-compare tbody tr:nth-child(1) {
  color:#ffb853}
.puma-compare tbody tr:nth-child(2) {
  color:#49f1d6}
.puma-compare tbody tr:nth-child(3) {
  color:#c8a4ff}
.puma-compare .pc-note {
  padding:0 32px 22px;
  font-size:12px;
  color:var(--pc-muted)}
@media(max-width:600px) {
  .puma-compare .pc-stage {
  height:350px}
.puma-compare .pc-heading {
  padding:22px 20px 0}
.puma-compare .pc-controls {
  padding:0 20px 12px}
.puma-compare table {
  width:calc(100% - 40px);
  margin:0 20px}
.puma-compare .pc-note {
  padding:0 20px 18px}
}