/* Scoped accents for the nine creative and commerce demos. */
.cc-grill { display:block; width:100%; max-height:330px; margin:0 auto 1rem; }
.cc-field { display:grid; gap:.45rem; margin:.8rem 0; font-size:.88rem; font-weight:650; }
.cc-field textarea { box-sizing:border-box; width:100%; min-height:94px; resize:vertical; border:1px solid #cdd8e6; border-radius:10px; padding:.75rem; color:#183047; background:#fff; font:inherit; font-weight:400; line-height:1.6; }
.cc-field textarea:focus-visible { outline:3px solid #84b7ff; outline-offset:2px; }
.cc-pre { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.75; }
.demo-grid .demo-panel, .demo-grid .demo-card { min-width:0; }
.demo-result ol, .demo-panel ol, .demo-panel ul { padding-left:1.25rem; line-height:1.8; }
.demo-panel .demo-toolbar { margin-top:.8rem; }
@media (max-width:640px) { .cc-grill { max-height:270px; } }