.writing-jsx-lesson .compiler-controls{display:grid;grid-gap:var(--cf-space-300);gap:var(--cf-space-300);width:100%}.writing-jsx-lesson .compiler-input{display:flex;align-items:center;gap:var(--cf-space-250)}.writing-jsx-lesson .compiler-input span{color:var(--cf-color-text-secondary);font-size:var(--cf-font-size-300);white-space:nowrap}.writing-jsx-lesson .compiler-input input{flex:1 1;min-width:0;padding:var(--cf-space-150) var(--cf-space-250);border:1px solid var(--cf-color-border-control);border-radius:var(--cf-radius-100);background:var(--cf-color-surface-input);color:var(--cf-color-text);font-family:var(--cf-font-mono);font-size:var(--cf-font-size-325)}.writing-jsx-lesson .compiler-output{padding:var(--cf-space-300)}.writing-jsx-lesson .compiler-output .article-code{margin:0}.writing-jsx-lesson .compiler-message{margin:0;color:var(--cf-color-text);font-family:var(--cf-font-mono);font-size:var(--cf-font-size-300);overflow-wrap:anywhere}.writing-jsx-lesson .compiler-message.is-error{color:var(--cf-color-danger)}.writing-jsx-lesson .attribute-panes{display:grid;grid-gap:var(--cf-space-200);gap:var(--cf-space-200);padding:var(--cf-space-400)}.writing-jsx-lesson .attribute-row{display:grid;grid-template-columns:11rem 1fr;grid-gap:var(--cf-space-300);gap:var(--cf-space-300);align-items:baseline}.writing-jsx-lesson .attribute-row span{color:var(--cf-color-text-secondary);font-size:var(--cf-font-size-300)}.writing-jsx-lesson .attribute-row code{font-size:var(--cf-font-size-300);overflow-wrap:anywhere}@media(max-width:768px){.writing-jsx-lesson .attribute-row{grid-template-columns:1fr;gap:var(--cf-space-050)}}