.stone-demo{--panel-color:#fff4dd;align-self:stretch}
.stone-demo-stage{position:relative;display:flex;align-items:center;min-height:340px;margin:26px 0 22px;padding:65px 20px;background:radial-gradient(ellipse,#283239,#0b1115 80%);border:1px solid #ffffff12;border-radius:16px;overflow:hidden}
.stone-stage-label,.stone-stage-caption{position:absolute;left:16px;right:16px;font-size:9px;letter-spacing:.1em;color:#a3b0b2;line-height:1.5}.stone-stage-label{top:18px}.stone-stage-caption{bottom:18px;text-align:center;letter-spacing:.02em}
.stone-demo-panel{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:clamp(3px,.55vw,8px);width:100%;aspect-ratio:2;padding:14px;border-radius:5px;border:1px solid #a1a9a9;background:#273034;box-shadow:0 16px 25px #0008,0 0 35px color-mix(in srgb,var(--panel-color) 25%,transparent)}
.stone-demo-panel i{align-self:center;justify-self:center;width:70%;aspect-ratio:1;border-radius:2px;background:var(--panel-color);box-shadow:0 0 5px var(--panel-color),0 0 10px var(--panel-color)}
.stone-demo-buttons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.stone-demo-buttons button{display:flex;flex-direction:column;align-items:center;gap:9px;padding:14px 5px;background:linear-gradient(#39413e,#202725);border:1px solid #626e68;border-radius:12px;color:#c7d0ca;cursor:pointer;box-shadow:0 5px 0 #0c1111;font:inherit;touch-action:manipulation}.stone-demo-buttons b{font-size:24px;font-weight:600}.stone-demo-buttons span{font-size:11px}.stone-demo-buttons button:hover{border-color:#e0c48d}.stone-demo-buttons button[aria-pressed=true]{color:var(--panel-color);border-color:var(--panel-color);background:#303b36;box-shadow:0 3px 0 #0c1111,inset 0 0 18px #ffffff0a;transform:translateY(2px)}
.stone-demo-status{color:#e5e9e5;font-size:13px;margin:24px 0 0}
@media(max-width:540px){.stone-demo-stage{min-height:260px;padding:56px 12px}.stone-demo-panel{gap:3px;padding:8px}.stone-demo-buttons{gap:8px}}