.demo-shell{display:grid;grid-template-columns:230px 1fr;border:1px solid var(--line);border-radius:16px;overflow:hidden;margin:32px 0;background:var(--pale)}.demo-shell aside{background:var(--ink);padding:24px 16px;display:flex;flex-direction:column;gap:12px}.demo-shell aside button{color:white;background:transparent;border:1px solid #ffffff30;border-radius:8px;padding:14px;text-align:left;font:inherit;cursor:pointer}.demo-shell aside button[aria-pressed=true]{background:var(--green)}#demo-content{padding:32px;min-height:380px}#demo-content h2{font-size:28px}.demo-row{display:flex;justify-content:space-between;gap:20px;background:white;padding:20px;border:1px solid var(--line);border-radius:10px;margin:14px 0}.demo-row span{color:var(--muted)}.demo-row strong{display:block}.demo-shell .mini-grid{gap:16px}.demo-shell .mini-grid div{background:white}.demo-shell .mini-grid strong{font-size:23px}#demo-feedback{color:var(--green);font-weight:650;margin:18px 0}.demo-warning{padding:16px;background:#fff2d7;border-radius:8px}@media(max-width:700px){.demo-shell{grid-template-columns:1fr}.demo-shell aside{display:grid;grid-template-columns:1fr 1fr;padding:16px}.demo-shell aside button{font-size:13px}#demo-content{padding:20px}.demo-row{flex-direction:column;gap:8px}.demo-shell .mini-grid{grid-template-columns:1fr}}