:root{--size: 80px;--bg: #404040;--border-radius: 20px;--rotation: 0deg;--shadow-size: 10px;--line-height: 1.5}*{box-sizing:border-box}a{color:inherit}body{margin:0;padding:2rem;font-family:Work Sans,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:1.125rem;font-weight:400;line-height:var(--line-height);color:#1a1a1a;background-color:#bbb;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 1500'%3E%3Cdefs%3E%3CradialGradient id='a' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%23606060'/%3E%3Cstop offset='1' stop-color='%23BBBBBB'/%3E%3C/radialGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='0' y1='750' x2='1550' y2='750'%3E%3Cstop offset='0' stop-color='%238e8e8e'/%3E%3Cstop offset='1' stop-color='%23BBBBBB'/%3E%3C/linearGradient%3E%3Cpath id='s' fill='url(%23b)' d='M1549.2 51.6c-5.4 99.1-20.2 197.6-44.2 293.6c-24.1 96-57.4 189.4-99.3 278.6c-41.9 89.2-92.4 174.1-150.3 253.3c-58 79.2-123.4 152.6-195.1 219c-71.7 66.4-149.6 125.8-232.2 177.2c-82.7 51.4-170.1 94.7-260.7 129.1c-90.6 34.4-184.4 60-279.5 76.3C192.6 1495 96.1 1502 0 1500c96.1-2.1 191.8-13.3 285.4-33.6c93.6-20.2 185-49.5 272.5-87.2c87.6-37.7 171.3-83.8 249.6-137.3c78.4-53.5 151.5-114.5 217.9-181.7c66.5-67.2 126.4-140.7 178.6-218.9c52.3-78.3 96.9-161.4 133-247.9c36.1-86.5 63.8-176.2 82.6-267.6c18.8-91.4 28.6-184.4 29.6-277.4c0.3-27.6 23.2-48.7 50.8-48.4s49.5 21.8 49.2 49.5c0 0.7 0 1.3-0.1 2L1549.2 51.6z'/%3E%3Cg id='g'%3E%3Cuse href='%23s' transform='scale(0.12) rotate(60)'/%3E%3Cuse href='%23s' transform='scale(0.2) rotate(10)'/%3E%3Cuse href='%23s' transform='scale(0.25) rotate(40)'/%3E%3Cuse href='%23s' transform='scale(0.3) rotate(-20)'/%3E%3Cuse href='%23s' transform='scale(0.4) rotate(-30)'/%3E%3Cuse href='%23s' transform='scale(0.5) rotate(20)'/%3E%3Cuse href='%23s' transform='scale(0.6) rotate(60)'/%3E%3Cuse href='%23s' transform='scale(0.7) rotate(10)'/%3E%3Cuse href='%23s' transform='scale(0.835) rotate(-40)'/%3E%3Cuse href='%23s' transform='scale(0.9) rotate(40)'/%3E%3Cuse href='%23s' transform='scale(1.05) rotate(25)'/%3E%3Cuse href='%23s' transform='scale(1.2) rotate(8)'/%3E%3Cuse href='%23s' transform='scale(1.333) rotate(-60)'/%3E%3Cuse href='%23s' transform='scale(1.45) rotate(-30)'/%3E%3Cuse href='%23s' transform='scale(1.6) rotate(10)'/%3E%3C/g%3E%3C/defs%3E%3Cg transform='translate(1580 0)'%3E%3Cg %3E%3Ccircle fill='url(%23a)' r='3000'/%3E%3Cg opacity='0.5'%3E%3Ccircle fill='url(%23a)' r='2000'/%3E%3Ccircle fill='url(%23a)' r='1800'/%3E%3Ccircle fill='url(%23a)' r='1700'/%3E%3Ccircle fill='url(%23a)' r='1651'/%3E%3Ccircle fill='url(%23a)' r='1450'/%3E%3Ccircle fill='url(%23a)' r='1250'/%3E%3Ccircle fill='url(%23a)' r='1175'/%3E%3Ccircle fill='url(%23a)' r='900'/%3E%3Ccircle fill='url(%23a)' r='750'/%3E%3Ccircle fill='url(%23a)' r='500'/%3E%3Ccircle fill='url(%23a)' r='380'/%3E%3Ccircle fill='url(%23a)' r='250'/%3E%3C/g%3E%3Cg transform=''%3E%3Cuse href='%23g' transform='rotate(10)'/%3E%3Cuse href='%23g' transform='rotate(120)'/%3E%3Cuse href='%23g' transform='rotate(240)'/%3E%3C/g%3E%3Ccircle fill-opacity='0.1' fill='url(%23a)' r='3000'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");background-attachment:fixed;background-size:cover}@media(max-width:768px){body{padding:.5rem}}.hero{background:linear-gradient(var(--rotation),#121212,var(--bg));color:#fff;border-radius:var(--border-radius);margin-block-end:4rem;box-shadow:0 40px var(--shadow-size) -30px #00000040}.hero h1,.hero p{text-align:center}.hero p{font-size:1.25rem;font-weight:300;opacity:.95;max-width:600px;margin-inline:auto}h1{margin:0 0 1rem;font-size:4rem;font-family:Plus Jakarta Sans,sans-serif;font-weight:800;letter-spacing:-.03em}h2,h3{font-family:Plus Jakarta Sans,sans-serif;font-weight:700;letter-spacing:-.02em;margin:0 0 1rem}.hero-logo{display:block;width:var(--size);aspect-ratio:1;margin:0 auto 2rem;rotate:var(--rotation)}.container{max-width:1200px;margin:0 auto}.hero,.section{padding:3rem;max-inline-size:800px;margin:0 auto 2rem}@media(max-width:768px){.hero,.section{padding:2rem 1rem}}.section{background:#fff;border-radius:var(--border-radius);box-shadow:0 40px var(--shadow-size) -30px #00000040}.section h2{margin-top:0;font-size:2.25rem}.section h3{margin-top:2rem;font-size:1.5rem}.demo-tabs{display:flex;gap:1rem;margin-bottom:2rem;border-bottom:2px solid #e9ecef}.tab-button{padding:1rem 2rem;background:none;border:none;border-bottom:3px solid transparent;cursor:pointer;font-family:Plus Jakarta Sans,sans-serif;font-size:1.125rem;font-weight:600;color:#666;transition:all .2s ease;margin-bottom:-2px;letter-spacing:-.01em}.tab-button:hover{color:#667eea}.tab-button.active{color:#667eea;border-bottom-color:#667eea}.tab-content{display:none}.tab-content.active{display:block}.demo-area{padding:2rem;background:linear-gradient(135deg,#667eea10,#764ba210);border-radius:8px;margin:2rem 0;min-height:300px;display:flex;align-items:center;justify-content:center}.demo-box{width:var(--size, 150px);height:var(--size, 150px);background:var(--bg, #764ba2);border-radius:var(--border-radius, 20px);transform:rotate(var(--rotation, 0deg));box-shadow:0 var(--shadow-size, 10px) calc(var(--shadow-size, 10px) * 2) #0000004d;transition:all var(--animation-duration, 1s) ease;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:1.5rem}.manual-demo{width:var(--width, 100px);height:var(--height, 100px);background:var(--bg, #667eea);border-radius:var(--radius, 0px);transition:all .3s ease;margin:0 auto;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}syntax-highlight,.live-css,.install-command{display:block;white-space:pre-wrap;background:#1a1a1a;border:1px solid #454545;padding:1.5rem;border-radius:8px;overflow-x:auto;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:.95rem;line-height:1.6;font-weight:400;color:#e4e4e4;margin-block-end:1rem}syntax-highlight{color-scheme:dark}.live-css{white-space:pre}.live-value{color:#4ec9b0}code{font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:.9em;font-weight:500;border-radius:3px}.code-block{position:relative}.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;margin:2rem 0}.feature{text-align:center;padding:1.5rem}.feature-icon{font-size:3rem;margin-bottom:1rem}.feature h3{margin:.5rem 0;color:#667eea}.feature p{margin:0;color:#666}table{width:100%;border-collapse:collapse;margin:1.5rem 0}th,td{padding:.75rem;text-align:left;border-bottom:1px solid #e9ecef}th{background:#f8f9fa;font-weight:600;color:#667eea}.inline-logo{display:inline-block;width:20px;height:20px;vertical-align:top;margin-inline:.2rem;margin-top:2px}