.app{max-width:1200px;margin:0 auto;padding:2rem}.header{text-align:center;margin-bottom:4rem;padding:3rem 1rem}.header h1{font-size:3.5rem;font-weight:700;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:1rem}.header p{font-size:1.25rem;color:#a0a0a0;margin-bottom:1.5rem}.header a{display:inline-block;padding:.75rem 2rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;text-decoration:none;border-radius:8px;font-weight:600;transition:transform .2s,box-shadow .2s}.header a:hover{transform:translateY(-2px);box-shadow:0 10px 25px #667eea4d}.demos{display:flex;flex-direction:column;gap:4rem}.demo-section{background:#ffffff05;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:2rem;transition:transform .2s,box-shadow .2s}.demo-section:hover{transform:translateY(-4px);box-shadow:0 10px 30px #0000004d}.demo-section h2{font-size:1.75rem;margin-bottom:.5rem;background:linear-gradient(135deg,#f093fb,#f5576c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.demo-section p{color:#888;margin-bottom:1.5rem;font-size:1rem}.custom-controls{display:flex;align-items:center;justify-content:center;gap:1rem;margin-bottom:1.5rem;padding:1rem;background:#ffffff0d;border-radius:8px;border:1px solid rgba(102,126,234,.3)}.custom-controls button{padding:.5rem 1.5rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:6px;font-weight:600;cursor:pointer;transition:opacity .2s,transform .2s;font-size:.95rem}.custom-controls button:hover:not(:disabled){transform:translateY(-1px);opacity:.9;box-shadow:0 4px 12px #667eea66}.custom-controls button:disabled{opacity:.3;cursor:not-allowed}.step-counter{font-weight:600;color:#a0a0a0;min-width:140px;text-align:center;font-size:1rem}.footer{text-align:center;margin-top:6rem;padding:3rem 1rem;color:#666;border-top:1px solid rgba(255,255,255,.1)}.footer p{margin:.5rem 0}@media(max-width:768px){.app{padding:1rem}.header h1{font-size:2.5rem}.header p{font-size:1rem}.demo-section{padding:1.5rem}.demo-section h2{font-size:1.5rem}.custom-controls{flex-direction:column;gap:.75rem}.custom-controls button{width:100%}}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#0a0a0a;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{margin:0;padding:0;box-sizing:border-box}body{min-height:100vh;background:linear-gradient(135deg,#0a0a0a,#1a1a2e)}#root{width:100%}.shiki-magic-move-container{position:relative;white-space:pre}.shiki-magic-move-line-number{opacity:.3;-webkit-user-select:none;-moz-user-select:none;user-select:none}.shiki-magic-move-item{display:inline-block;transition:color var(--smm-duration,.5s) var(--smm-easing,"ease")}.shiki-magic-move-enter-active,.shiki-magic-move-leave-active,.shiki-magic-move-move{transition:all var(--smm-duration,.5s) var(--smm-easing,"ease")}.shiki-magic-move-container-resize,.shiki-magic-move-container-restyle{transition:all var(--smm-duration,.5s) var(--smm-easing,"ease");transition-delay:calc(var(--smm-duration, .5s)*var(--smm-delay-container, 1))}.shiki-magic-move-move{transition-delay:calc(var(--smm-duration, .5s)*var(--smm-delay-move, 1) + var(--smm-stagger, 0));z-index:1}.shiki-magic-move-enter-active{transition-delay:calc(var(--smm-duration, .5s)*var(--smm-delay-enter, 1) + var(--smm-stagger, 0));z-index:1}.shiki-magic-move-leave-active{transition-delay:calc(var(--smm-duration, .5s)*var(--smm-delay-leave, 1) + var(--smm-stagger, 0))}.shiki-magic-move-enter-from,.shiki-magic-move-leave-to{opacity:0}br.shiki-magic-move-leave-active{display:none}