.microinteractions-container{margin:2rem 0;padding:2rem;background:var(--sl-color-gray-7);border-radius:12px;border:2px solid var(--sl-color-gray-5)}.microinteractions-container h3{margin:0 0 .5rem;color:var(--sl-color-text);font-size:1.25rem;font-weight:600}.microinteractions-description{margin:0 0 2rem;color:var(--sl-color-text-2);font-size:.9rem;line-height:1.5}.microinteractions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem}.microinteraction-item{display:flex;flex-direction:column;gap:1rem}.microinteraction-item h4{margin:0;color:var(--sl-color-text);font-size:1rem;font-weight:500}.micro-button{position:relative;padding:.75rem 1.5rem;background:var(--sl-color-bg);color:var(--sl-color-accent);border:2px solid var(--sl-color-accent);border-radius:8px;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);overflow:hidden;display:flex;align-items:center;gap:.5rem;max-width:200px;box-shadow:0 2px 8px rgba(var(--sl-color-accent-rgb),.1)}.micro-button:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(var(--sl-color-accent-rgb),.15);background:var(--sl-color-gray-7);color:var(--sl-color-accent);border-color:var(--sl-color-accent-high)}.micro-button:active{transform:translateY(0);transition:transform .1s}.micro-button.hovered .button-icon{transform:translate(4px)}.button-icon{transition:transform .2s ease}.micro-card{padding:1.5rem;background:var(--sl-color-bg);border:2px solid var(--sl-color-gray-4);border-radius:12px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px #0000000d}.micro-card:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(var(--sl-color-accent-rgb),.15);border-color:var(--sl-color-accent);background:var(--sl-color-gray-7)}.micro-card.clicked{transform:scale(.95);transition:transform .05s ease-out}.card-header{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}.card-avatar{width:40px;height:40px;background:linear-gradient(135deg,var(--sl-color-accent),var(--sl-color-accent-high));border-radius:50%;border:2px solid var(--sl-color-bg)}.card-title{font-weight:600;color:var(--sl-color-text);margin-bottom:.25rem}.card-subtitle{font-size:.85rem;color:var(--sl-color-text-2)}.card-content p{margin:0;color:var(--sl-color-text-2);font-size:.9rem;line-height:1.5}.input-container{position:relative;max-width:250px}.micro-input{width:100%;padding:1.25rem .75rem .5rem;border:2px solid var(--sl-color-gray-4);border-radius:8px;font-size:.9rem;background:var(--sl-color-bg);color:var(--sl-color-text);transition:all .3s cubic-bezier(.4,0,.2,1);outline:none}.micro-input:focus{border-color:var(--sl-color-accent);box-shadow:0 0 0 3px rgba(var(--sl-color-accent-rgb),.15);background:var(--sl-color-gray-7)}.input-label{position:absolute;left:.75rem;top:1rem;color:var(--sl-color-text-2);font-size:.9rem;transition:all .3s cubic-bezier(.4,0,.2,1);pointer-events:none}.micro-input:focus+.input-label,.micro-input:not(:placeholder-shown)+.input-label{top:.25rem;font-size:.75rem;color:var(--sl-color-accent)}.micro-toggle{display:flex;align-items:center;gap:1rem;cursor:pointer;max-width:200px}.toggle-slider{position:relative;width:50px;height:26px;background:var(--sl-color-gray-4);border:2px solid var(--sl-color-gray-3);border-radius:13px;transition:all .3s cubic-bezier(.4,0,.2,1)}.micro-toggle.active .toggle-slider{background:var(--sl-color-accent);border-color:var(--sl-color-accent)}.toggle-handle{position:absolute;top:2px;left:2px;width:18px;height:18px;background:var(--sl-color-bg);border:1px solid var(--sl-color-gray-2);border-radius:50%;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 4px #0000001a}.micro-toggle.active .toggle-handle{transform:translate(24px);background:var(--sl-color-white);border-color:var(--sl-color-gray-1)}.toggle-label{font-size:.9rem;color:var(--sl-color-text);font-weight:500;transition:color .3s ease}.micro-toggle.active .toggle-label{color:var(--sl-color-accent)}@media (max-width: 768px){.microinteractions-grid{grid-template-columns:1fr;gap:1.5rem}.microinteractions-container{padding:1.5rem}}