.cl-label,.cl-controls label{display:flex;align-items:center;flex-wrap:wrap;gap:12px;font-size:16px;line-height:1.7}.cl-label{margin:20px 0}.cl-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:24px 0}.cl-label select,.cl-controls select{background:var(--lp-card);color:var(--lp-ink);border:1px solid var(--lp-line);border-radius:10px;padding:10px;font:inherit;max-width:100%}.cl-controls input[type=range]{width:100%;accent-color:var(--lp-accent)}.cl-controls output{font:600 14px ui-monospace,monospace;color:var(--lp-accent)}.cl-legend{display:flex;flex-wrap:wrap;gap:18px;font-size:14px;line-height:1.7}.cl-hover-stage{display:grid;place-items:center;min-height:180px;padding:30px;border:1px dashed var(--lp-line);border-radius:16px;margin:22px 0}.cl-hover-demo{font:700 18px Arial,sans-serif;background:#155d9b;color:white;border:2px solid transparent;border-radius:12px;padding:16px 24px;cursor:pointer;transition:var(--css-hover-transition,color .4s,background-color .4s,transform .4s)}.cl-hover-demo:hover,.cl-hover-demo:focus-visible,.cl-hover-demo.is-demo{background-color:var(--css-hover-color,#7b237d);transform:scale(var(--css-hover-scale,1.05))}.cl-hover-demo:focus-visible{outline:3px solid var(--lp-accent);outline-offset:5px}.cl-hover-stage p{font-size:16px;text-align:center}.cl-motion-stage{display:grid;place-items:center;min-height:270px;padding:25px;border:1px solid var(--lp-line);border-radius:16px;margin:22px 0;overflow:hidden;background:radial-gradient(circle,#25436766,transparent)}.cl-motion-stage img{display:block;width:240px;max-width:100%;height:auto;border-radius:16px}.lp-widget[data-lp-widget=css-hover-lab]>.hp-code,.lp-widget[data-lp-widget=css-photo-motion-lab]>.hp-code{margin:24px 0}.cl-hero{padding:35px;border:1px solid var(--lp-line);border-radius:24px;background:linear-gradient(135deg,#6845a630,#155d9b22);color:var(--lp-ink)}.cl-hero>span{font:700 13px ui-monospace,monospace;color:var(--lp-accent);letter-spacing:2px}.cl-hero strong{display:block;font-size:38px;line-height:1.2;margin:20px 0}.cl-hero pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:15px;line-height:1.8;color:#c4b5fd}.cl-hero small{color:var(--lp-muted)}.cl-swatches{display:flex;gap:12px;margin:25px 0}.cl-swatches i{display:block;width:40px;height:40px;border-radius:12px;background:#b59bff}.cl-swatches i:nth-child(2){background:#62d6da}.cl-swatches i:nth-child(3){background:#f7cc89}@keyframes css-lesson-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes css-lesson-tilt{0%,100%{transform:rotate(0)}50%{transform:rotate(3deg)}}@media(max-width:650px){.cl-controls{grid-template-columns:1fr}.cl-label select,.cl-controls select{width:100%}.cl-hero strong{font-size:30px}.cl-hover-demo{font-size:16px;padding:14px 18px}}@media(prefers-reduced-motion:reduce){.cl-hover-demo{transition:none!important}.cl-hover-demo:hover,.cl-hover-demo:focus-visible,.cl-hover-demo.is-demo{transform:none!important}.cl-motion-stage img{animation:none!important}}