.article-page .playground-panes,.article-page .validation-dashboard{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.article-page .validation-form{display:grid;grid-gap:var(--cf-space-300);gap:var(--cf-space-300)}.article-page .accessible-demo label,.article-page .validation-form label{display:grid;grid-gap:var(--cf-space-100);gap:var(--cf-space-100);color:var(--cf-color-text);font-size:var(--cf-font-size-275)}.article-page .accessible-demo input,.article-page .validation-form input{width:100%;border:1px solid var(--cf-color-border-control);border-radius:var(--cf-radius-300);padding:var(--cf-space-200) var(--cf-space-300);background:var(--cf-color-surface);color:var(--cf-color-text);font:inherit}.article-page .accessible-demo input[aria-invalid=true],.article-page .validation-form input:invalid{border-color:var(--cf-color-danger-border)}.article-page .validity-grid{display:grid;grid-gap:var(--cf-space-300);gap:var(--cf-space-300);padding:var(--cf-space-300)}.article-page .validity-card{border:1px solid var(--cf-color-border-control);border-radius:var(--cf-radius-300);padding:var(--cf-space-300);background:var(--cf-color-surface-raised)}.article-page .validity-card h3,.article-page .validity-card p{margin:0 0 var(--cf-space-200)}.article-page .validity-card ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));grid-gap:var(--cf-space-100) var(--cf-space-300);gap:var(--cf-space-100) var(--cf-space-300);margin:0;padding:0;list-style:none}.article-page .validity-card li{color:var(--cf-color-text-secondary)}.article-page .validity-card li.is-on{color:var(--cf-color-text);font-weight:var(--cf-font-weight-semibold)}.article-page .browser-message,.article-page .field-error{color:var(--cf-color-danger);font-size:var(--cf-font-size-300);min-height:var(--cf-space-400)}.article-page .error-summary{display:grid;grid-gap:var(--cf-space-100);gap:var(--cf-space-100);margin-bottom:var(--cf-space-300);border:1px solid var(--cf-color-danger-border);border-radius:var(--cf-radius-300);padding:var(--cf-space-300);background:var(--cf-color-danger-subtle)}.article-page .accessible-demo{display:grid;grid-gap:var(--cf-space-200);gap:var(--cf-space-200)}@media(max-width:768px){.article-page .playground-panes,.article-page .validation-dashboard{grid-template-columns:minmax(0,1fr)}}