.article-page .styles-control-grid{display:flex;flex-wrap:wrap;gap:var(--cf-space-150)}.article-page .custom-preview,.article-page .styles-live-card{display:grid;grid-gap:var(--cf-space-250);gap:var(--cf-space-250)}.article-page .styles-dom-host{min-height:calc(var(--cf-space-900) + var(--cf-space-400))}.article-page .computed-demo-box,.article-page .demo-card,.article-page .style-demo-box{display:grid;place-items:center;min-height:var(--cf-space-900);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);color:var(--cf-color-text);font-weight:var(--cf-font-weight-strong);transition:transform var(--cf-duration-fast) var(--cf-ease-standard),border-color var(--cf-duration-fast) var(--cf-ease-standard),background var(--cf-duration-fast) var(--cf-ease-standard)}.article-page .demo-card.is-muted{color:var(--cf-color-text-secondary)}.article-page .demo-card.is-raised{transform:translateY(calc(-1 * var(--cf-space-050)));box-shadow:var(--cf-shadow-md)}.article-page .demo-card.is-selected{border-color:var(--cf-color-primary-border);background:var(--cf-color-primary-subtle)}.article-page .demo-card.is-flat{border-style:dashed;background:var(--cf-color-surface)}.article-page .style-demo-box.from-class{color:var(--cf-color-primary)}.article-page .computed-demo-box{width:calc(var(--cf-space-900)*2);justify-items:start}.article-page .computed-demo-box:before{content:"badge";display:inline-block;margin-right:var(--cf-space-150);border:1px solid var(--cf-color-primary-border);border-radius:var(--cf-radius-full);padding:var(--cf-space-050) var(--cf-space-150);color:var(--cf-color-primary);font-size:var(--cf-font-size-200)}.article-page .computed-demo-box.is-wide{width:calc(var(--cf-space-900)*3)}.article-page .custom-controls{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cf-space-200)}.article-page .custom-controls label{display:flex;align-items:center;gap:var(--cf-space-150);color:var(--cf-color-text-secondary);font-weight:var(--cf-font-weight-strong)}.article-page .custom-preview iframe{width:100%;min-height:calc(var(--cf-space-900)*2);border:1px solid var(--cf-color-border-control);border-radius:var(--cf-radius-300);background:var(--cf-color-surface)}.article-page .tool-choice-list{display:grid;grid-gap:var(--cf-space-200);gap:var(--cf-space-200)}@media(max-width:560px){.article-page .custom-controls,.article-page .styles-control-grid{align-items:stretch}}