#app{position:fixed;inset:0;background-color:#666;display:grid;grid:minmax(0,1fr) / minmax(0,1fr);place-items:center}#app>*{grid-area:1 / 1;position:relative}@property --fg{syntax: "<color>"; inherits: false; initial-value: #fff;}@property --bg{syntax: "<color>"; inherits: false; initial-value: #fff;}.cA{display:grid;grid:minmax(0,1fr) / minmax(0,1fr);gap:12px}.cB{--bg: hsl(20 40 45);background:linear-gradient(var(--bg),var(--bg)) padding-box,linear-gradient(135deg,hsl(from var(--bg) h s calc(l - 5)),hsl(from var(--bg) h s calc(l - 12))) border-box;border:8px solid transparent;box-shadow:0 0 0 1px #000;padding:12px;border-radius:18px;transform:scale(1);transition:transform 10ms,--bg 10ms}button.cB{--bg: hsl(20 42 60);transition:transform .2s,--bg .2s}button.cB:active{--bg: hsl(20 42 65);transform:scale(.95)}.cC{position:absolute;width:64px;height:64px;background:radial-gradient(var(--fg),rgb(from var(--fg) r g b / 0) 70%);opacity:0}