.styling-components-lesson .class-controls{display:grid;grid-gap:var(--cf-space-200);gap:var(--cf-space-200)}.styling-components-lesson .class-demo{margin:0 0 var(--cf-space-250);padding:0;list-style:none}.styling-components-lesson .class-demo li{margin:0;padding:var(--cf-space-200) var(--cf-space-300);border:2px solid var(--cf-color-border-strong);border-radius:var(--cf-radius-150);background:var(--cf-color-surface);color:var(--cf-color-text);font-weight:var(--cf-font-weight-medium)}.styling-components-lesson .class-demo .on-sale{border-color:var(--cf-color-accent)}.styling-components-lesson .class-demo .on-sale:after{content:" · Sale";color:var(--cf-color-accent)}.styling-components-lesson .class-demo .sold-out{opacity:.5;text-decoration:line-through}.styling-components-lesson .class-tokens{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cf-space-150);margin:0;color:var(--cf-color-text-secondary);font-size:var(--cf-font-size-300)}.styling-components-lesson .class-tokens code{padding:var(--cf-space-050) var(--cf-space-150);border-radius:var(--cf-radius-100);background:var(--cf-color-accent-subtle)}.styling-components-lesson .class-tokens code.is-stray{outline:1px dashed var(--cf-color-text-tertiary)}.styling-components-lesson .playground-panes.class-panes{grid-template-columns:minmax(0,1fr)}.styling-components-lesson .playground-panes.class-panes .source-pane{border-right:0;border-bottom:1px solid var(--cf-color-border)}@media(max-width:560px){.styling-components-lesson .class-controls .execution-choices{flex-wrap:wrap}}