.effects-lesson .effects-controls{display:grid;grid-gap:var(--cf-space-150);gap:var(--cf-space-150)}.effects-lesson .effects-demo{display:grid;grid-gap:var(--cf-space-200);gap:var(--cf-space-200);padding:var(--cf-space-250) var(--cf-space-350);border:1px solid var(--cf-color-border-control);border-radius:var(--cf-radius-150);background:var(--cf-color-surface);color:var(--cf-color-text);font-size:var(--cf-font-size-325)}.effects-lesson .effects-demo p{margin:0}.effects-lesson .effects-demo label{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cf-space-150)}.effects-lesson .effects-demo input{width:10rem;max-width:100%;padding:var(--cf-space-050) var(--cf-space-150)}.effects-lesson .effects-demo button,.effects-lesson .effects-demo input{border:1px solid var(--cf-color-border-strong);border-radius:var(--cf-radius-100);background:var(--cf-color-surface-raised);color:var(--cf-color-text);font:inherit}.effects-lesson .effects-demo button{padding:var(--cf-space-050) var(--cf-space-250);font-size:var(--cf-font-size-300);cursor:pointer}.effects-lesson .effects-demo button:hover{border-color:var(--cf-color-border-hover)}.effects-lesson .effects-buttons{display:flex;flex-wrap:wrap;gap:var(--cf-space-100)}.effects-lesson .effects-status{color:var(--cf-color-text-secondary);font-size:var(--cf-font-size-300)}.effects-lesson .effects-status strong{color:var(--cf-color-danger)}.effects-lesson .effects-log{display:grid;grid-gap:var(--cf-space-050);gap:var(--cf-space-050);min-height:2rem;margin:0;padding:0;list-style:none;font-family:var(--cf-font-mono);font-size:var(--cf-font-size-275)}.effects-lesson .effects-log li{padding:var(--cf-space-050) var(--cf-space-150);border-left:3px solid var(--cf-color-border);border-radius:var(--cf-radius-100);background:var(--cf-color-surface-raised);overflow-wrap:anywhere}.effects-lesson .effects-log li.is-new{border-left-color:var(--cf-color-primary);background:var(--cf-color-primary-subtle)}