.demo-section{margin:2rem 0;padding:1.5rem;border:1px solid #e2e8f0;border-radius:12px;background-color:#fff;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06)}.demo-controls{margin:1.5rem 0;display:flex;gap:1.5rem;align-items:center}.demo-button{padding:.75rem 1.5rem;border:none;border-radius:8px;background-color:#4f46e5;color:#fff;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 4px rgba(79,70,229,.2)}.demo-button:hover{background-color:#4338ca;transform:translateY(-1px);box-shadow:0 4px 6px rgba(79,70,229,.3)}.demo-button.active{background-color:#059669;box-shadow:0 2px 4px rgba(5,150,105,.2)}.demo-button.active:hover{background-color:#047857;box-shadow:0 4px 6px rgba(5,150,105,.3)}.demo-box{width:120px;height:120px;background:linear-gradient(135deg,#ef4444,#dc2626);border-radius:12px;box-shadow:0 4px 6px rgba(239,68,68,.2)}.demo-code{margin-top:1.5rem;padding:1.5rem;background-color:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;overflow-x:auto}.demo-code pre{color:#334155;font-family:Fira Code,monospace;font-size:.9rem;padding:1rem}.scale-box{transition:transform .5s cubic-bezier(.4,0,.2,1)}.scale-box.scaled{transform:scale(1.5)}.translate-box{transition:transform 1s ease-in-out}.translate-box.translated{transform:translateX(10rem)}.rotate-box{transition:transform 1s ease-in-out}.rotate-box.rotated{transform:rotate(1turn)}.opacity-box{transition:opacity 1s ease-in-out}.opacity-box.faded{opacity:.5}.hover-box{transition:all .3s ease-in-out;cursor:pointer}.hover-box:hover{transform:scale(1.1) rotate(5deg);opacity:.9;box-shadow:0 8px 12px rgba(239,68,68,.3)}@media (prefers-color-scheme:dark){.demo-section{background-color:#1e293b;border-color:#334155}.demo-code{background-color:#0f172a;border-color:#334155}.demo-code pre{color:#e2e8f0}}.pulse-box{&.pulsed{animation:pulse-animation 1s ease-in-out infinite}}@keyframes pulse-animation{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.2);opacity:.7}}.bounce-box{&.bounced{animation:bounce-animation 1s ease-in-out infinite}}@keyframes bounce-animation{0%,20%,53%,80%,to{transform:translateY(0)}40%,43%{transform:translateY(-30px)}70%{transform:translateY(-15px)}90%{transform:translateY(-4px)}}.rotate-box{&.rotated{animation:rotate-animation 1s linear infinite}}@keyframes rotate-animation{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.practice-container{max-width:1200px;margin:0 auto;padding:2rem}.category-nav{display:flex;gap:1rem;margin-bottom:2rem;padding:1rem;background-color:#fff;border-radius:12px;box-shadow:0 4px 6px -1px rgba(0,0,0,.1)}.category-button{padding:.75rem 1.5rem;border:none;border-radius:8px;background-color:#6366f1;color:#fff;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 4px rgba(99,102,241,.2)}.category-button:hover{background-color:#4f46e5;transform:translateY(-1px);box-shadow:0 4px 6px rgba(99,102,241,.3)}.category-button.active{background-color:#4f46e5;box-shadow:0 2px 4px rgba(79,70,229,.2)}.practice-content{background-color:#fff;border-radius:12px;padding:2rem;box-shadow:0 4px 6px -1px rgba(0,0,0,.1)}.practice-nav{display:flex;gap:1rem;margin-bottom:2rem;padding-bottom:1rem;border-bottom:1px solid #e2e8f0}.practice-nav-button{padding:.5rem 1rem;border:none;border-radius:6px;background-color:#f3f4f6;color:#4b5563;font-weight:500;cursor:pointer;transition:all .3s ease}.practice-nav-button:hover{background-color:#e5e7eb;color:#1f2937}.practice-nav-button.active{background-color:#4f46e5;color:#fff}.content-wrapper{padding:1rem}.animation-container{min-height:400px}@media (prefers-color-scheme:dark){.category-nav,.practice-content{background-color:#1e293b;border:1px solid #334155}.practice-nav{border-bottom-color:#334155}.practice-nav-button{background-color:#334155;color:#e2e8f0}.practice-nav-button:hover{background-color:#475569;color:#f8fafc}.practice-nav-button.active{background-color:#4f46e5;color:#fff}}