/* Узория: тёплые акценты и аккуратное кадрирование примеров */
.app-shell .button.primary{
  color:#fff;
  background:linear-gradient(145deg,#efb8a8 0%,#df8d7b 62%,#cf766b 100%);
  border-color:#f8d8ce;
  box-shadow:6px 8px 16px #b9756950,-4px -4px 13px #fff9,inset 0 2px 3px #fff9d9,inset 0 -3px 5px #9e514522;
}
.app-shell .button.primary:hover:not(:disabled){
  filter:saturate(1.06) brightness(1.035);
  box-shadow:8px 11px 20px #b975695c,-4px -4px 13px #fff9,inset 0 2px 3px #fff9d9,inset 0 -3px 5px #9e514522;
}
.app-shell .button.primary:active:not(:disabled){
  box-shadow:inset 3px 4px 8px #8e514333,inset -2px -2px 6px #fff8;
}
.app-shell .button:focus-visible,.app-shell .text-link:focus-visible,.app-shell .text-button:focus-visible{
  outline:3px solid #d98172;
  outline-offset:3px;
}
.example-shell{overflow:hidden}
.comparison-pair,.comparison-pair>figure{min-width:0;max-width:100%;overflow:hidden}
.comparison-image{
  width:100%;
  min-width:0;
  contain:paint;
  isolation:isolate;
}
.comparison-image img,.comparison-image canvas{
  display:block;
  max-width:100%;
  max-height:100%;
}
@media(max-width:760px){
  .comparison-pair{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .comparison-image{height:clamp(210px,64vw,250px)}
  .example-shell{overflow:hidden}
}