.preserving-and-resetting-state-lesson .preserving-demo{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)}.preserving-and-resetting-state-lesson .preserving-demo>button{margin:var(--cf-space-100) var(--cf-space-100) 0 0;padding:var(--cf-space-050) var(--cf-space-250);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;font-size:var(--cf-font-size-300);cursor:pointer}.preserving-and-resetting-state-lesson .preserving-demo>button:hover{border-color:var(--cf-color-border-hover)}.preserving-and-resetting-state-lesson .note-box{margin:0 0 var(--cf-space-100)}.preserving-and-resetting-state-lesson .note-box label{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--cf-space-150)}.preserving-and-resetting-state-lesson .note-box input,.preserving-and-resetting-state-lesson .note-box textarea{max-width:100%;padding:var(--cf-space-050) var(--cf-space-150);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}.preserving-and-resetting-state-lesson .note-box textarea{width:16rem;min-height:4rem}.preserving-and-resetting-state-lesson .switch-highlight{padding:var(--cf-space-100);border:2px solid var(--cf-color-accent-border);border-radius:var(--cf-radius-100);background:var(--cf-color-accent-subtle)}.preserving-and-resetting-state-lesson .preserving-tree{margin:var(--cf-space-250) 0 0;color:var(--cf-color-text-secondary);font-size:var(--cf-font-size-300)}.preserving-and-resetting-state-lesson .preserving-tree code{overflow-wrap:anywhere}