.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.main{padding:56px 0 76px}.intro{max-width:900px;margin:0 auto 30px;text-align:center}.intro h1{margin:18px auto 14px}.crumbs{margin-bottom:18px;color:var(--muted);font-size:.82rem}.crumbs a{color:var(--primary);font-weight:750}
.shape-studio{display:grid;grid-template-columns:330px minmax(0,1fr);max-width:1160px;margin:0 auto;border:1px solid var(--border);border-radius:30px;background:#fff;box-shadow:var(--shadow);overflow:hidden}.shape-library{padding:22px;border-right:1px solid var(--border);background:#fbfbff}.library-heading,.customizer-head,.control-label,.code-heading,.stage-toolbar,.motion-row{display:flex;align-items:center;justify-content:space-between;gap:14px}.library-heading h2,.customizer-head h2{margin:3px 0 0;font-size:1.1rem;letter-spacing:-.02em}.panel-kicker{color:var(--primary);font-size:.64rem;font-weight:900;letter-spacing:.11em}.shape-count{display:grid;place-items:center;min-width:37px;height:30px;padding:0 8px;border-radius:10px;color:var(--primary);background:#efedff;font-size:.75rem;font-weight:900}.shape-search{display:flex;align-items:center;gap:8px;margin:16px 0 11px;padding:0 11px;border:1px solid var(--border);border-radius:12px;background:#fff}.shape-search:focus-within{border-color:#998df1;box-shadow:0 0 0 3px #6c5ce715}.shape-search svg{width:16px;fill:none;stroke:#8b8da2;stroke-width:2;stroke-linecap:round}.shape-search input{width:100%;min-height:42px;border:0;outline:0;color:var(--text);background:transparent;font-size:.8rem}.category-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:4px;border-radius:11px;background:#f0eff8}.category-tabs button{min-height:33px;padding:0 3px;border:0;border-radius:8px;color:var(--muted);background:transparent;font-size:.63rem;font-weight:850}.category-tabs button.active{color:var(--primary);background:#fff;box-shadow:0 3px 10px #35316e14}.shape-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-height:606px;margin-top:13px;padding:1px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#c9c5e8 transparent}.shape-option{display:grid;place-items:center;min-width:0;height:82px;padding:7px 4px;border:1px solid var(--border);border-radius:13px;color:var(--muted);background:#fff;transition:.18s}.shape-option:hover{border-color:#b8b0f5;background:#f8f7ff;transform:translateY(-2px)}.shape-option.active{border-color:#8f81ee;color:var(--primary);background:#f2f0ff;box-shadow:0 7px 18px #6c5ce71c}.mini-shape{width:36px;height:36px;background:currentColor}.shape-option span:last-child{max-width:78px;margin-top:5px;font-size:.61rem;font-weight:800;line-height:1.1;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.no-shapes{padding:22px 0;color:var(--muted);font-size:.78rem;text-align:center}
.creator{min-width:0}.stage-toolbar{min-height:66px;padding:10px 18px;border-bottom:1px solid var(--border)}.stage-toolbar>div:first-child{display:flex;align-items:center;gap:11px}.stage-toolbar strong{font-size:.78rem}.live-label{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:.67rem;font-weight:850;text-transform:uppercase;letter-spacing:.07em}.live-label i{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px #00c2a817;animation:livePulse 2s infinite}@keyframes livePulse{50%{box-shadow:0 0 0 8px #00c2a800}}.canvas-switcher{display:flex;gap:6px}.canvas-switcher button{width:28px;height:28px;padding:0;border:2px solid #fff;border-radius:8px;box-shadow:0 0 0 1px var(--border)}.canvas-switcher button.active{box-shadow:0 0 0 2px var(--primary)}.canvas-switcher [data-canvas="light"]{background:#f3f2fa}.canvas-switcher [data-canvas="dark"]{background:#242536}.canvas-switcher [data-canvas="grid"]{background-color:#fff;background-image:linear-gradient(45deg,#dfe0e9 25%,transparent 25%),linear-gradient(-45deg,#dfe0e9 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#dfe0e9 75%),linear-gradient(-45deg,transparent 75%,#dfe0e9 75%);background-size:10px 10px;background-position:0 0,0 5px,5px -5px,-5px 0}
.shape-stage{position:relative;display:grid;place-items:center;min-height:500px;padding:70px;overflow:hidden;transition:background .25s}.shape-stage.canvas-light{background:radial-gradient(circle at 50% 40%,#fff,#eeedf7 72%)}.shape-stage.canvas-dark{background:radial-gradient(circle at 50% 38%,#3c3e55,#1e1f2d 72%)}.shape-stage.canvas-grid{background-color:#f3f4f8;background-image:linear-gradient(45deg,#e3e4ec 25%,transparent 25%),linear-gradient(-45deg,#e3e4ec 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e3e4ec 75%),linear-gradient(-45deg,transparent 75%,#e3e4ec 75%);background-size:26px 26px;background-position:0 0,0 13px,13px -13px,-13px 0}.stage-orbit{position:absolute;border:1px solid #7469c71c;border-radius:50%;pointer-events:none}.orbit-one{width:430px;height:430px}.orbit-two{width:590px;height:590px;border-style:dashed;animation:orbitSpin 25s linear infinite}.canvas-dark .stage-orbit{border-color:#ffffff16}@keyframes orbitSpin{to{transform:rotate(360deg)}}.preview-wrap{position:relative;z-index:2;display:grid;place-items:center;transform-origin:center}.shape-preview{width:240px;height:240px;background:linear-gradient(135deg,#6c5ce7,#00c2a8);filter:drop-shadow(0 16px 24px #6c5ce761);will-change:transform,filter}.dimension{position:absolute;z-index:3;padding:5px 8px;border:1px solid #ffffff7a;border-radius:7px;color:#6d7089;background:#ffffffd9;box-shadow:0 5px 15px #35316e10;font:800 .61rem/1 ui-monospace,Consolas,monospace;pointer-events:none}.width-dimension{left:50%;bottom:20px;transform:translateX(-50%)}.height-dimension{top:50%;right:18px;transform:translateY(-50%) rotate(90deg)}.canvas-dark .dimension{border-color:#ffffff1a;color:#c9cad7;background:#292b3dd9}.spark-layer{position:absolute;inset:0;z-index:5;overflow:hidden;pointer-events:none}.spark{position:absolute;width:9px;height:9px;border-radius:3px;background:var(--spark-color);animation:sparkBurst .85s cubic-bezier(.12,.7,.3,1) forwards}@keyframes sparkBurst{from{opacity:1;transform:translate(-50%,-50%) rotate(0) scale(1)}to{opacity:0;transform:translate(calc(-50% + var(--spark-x)),calc(-50% + var(--spark-y))) rotate(240deg) scale(.1)}}
.preview-wrap.motion-float{animation:previewFloat 3s ease-in-out infinite}.preview-wrap.motion-pulse{animation:previewPulse 3s ease-in-out infinite}.preview-wrap.motion-spin{animation:previewSpin 6s linear infinite}@keyframes previewFloat{0%,100%{transform:translateY(0) rotate(var(--shape-rotation))}50%{transform:translateY(-16px) rotate(var(--shape-rotation))}}@keyframes previewPulse{0%,100%{transform:scale(1) rotate(var(--shape-rotation))}50%{transform:scale(1.08) rotate(var(--shape-rotation))}}@keyframes previewSpin{from{transform:rotate(var(--shape-rotation))}to{transform:rotate(calc(var(--shape-rotation) + 360deg))}}
.customizer{padding:22px;border-top:1px solid var(--border)}.surprise-button{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 13px;border:0;border-radius:11px;color:#fff;background:linear-gradient(135deg,var(--primary),#917ff5);box-shadow:0 8px 20px #6c5ce72d;font-size:.74rem;font-weight:850}.surprise-button:hover{transform:translateY(-1px);box-shadow:0 11px 25px #6c5ce741}.surprise-button span{font-size:1rem}.control-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-top:18px}.control-block{min-width:0;padding:12px;border:1px solid var(--border);border-radius:13px;background:#fcfcff}.fill-control{grid-row:span 2}.control-label{margin-bottom:11px;color:#51546c;font-size:.7rem;font-weight:850}.control-label output{padding:4px 6px;border-radius:6px;color:var(--primary);background:#efedff;font:800 .63rem/1 ui-monospace,Consolas,monospace}.range{width:100%;height:5px;accent-color:var(--primary);cursor:pointer}.segmented{display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:3px;border-radius:9px;background:#efeff6}.segmented button{min-height:30px;border:0;border-radius:7px;color:var(--muted);background:transparent;font-size:.68rem;font-weight:800}.segmented button.active{color:var(--primary);background:#fff;box-shadow:0 3px 9px #35316e14}.color-row{display:flex;align-items:center;gap:6px;margin-top:9px}.color-field{display:flex;min-width:0;flex:1;align-items:center;gap:5px;height:35px;padding:4px;border:1px solid var(--border);border-radius:9px;background:#fff}.color-field input{flex:0 0 26px;width:26px;height:26px;padding:0;border:0;border-radius:6px;background:transparent}.color-field input::-webkit-color-swatch-wrapper{padding:0}.color-field input::-webkit-color-swatch{border:0;border-radius:5px}.color-field span{min-width:0;color:#5f6279;font:750 .58rem/1 ui-monospace,Consolas,monospace;overflow:hidden}.swap-colors{flex:0 0 27px;width:27px;height:27px;padding:0;border:1px solid var(--border);border-radius:8px;color:var(--primary);background:#fff}.fill-solid #colorTwoField,.fill-solid .swap-colors,.fill-solid .gradient-angle-control{display:none}.motion-row{margin-top:13px;padding:13px 14px;border:1px solid var(--border);border-radius:13px;background:#fcfcff}.motion-row strong,.motion-row span{display:block}.motion-row strong{font-size:.76rem}.motion-row span{margin-top:3px;color:var(--muted);font-size:.65rem}.motion-options{display:flex;gap:4px;padding:4px;border-radius:10px;background:#efeff6}.motion-options button{min-height:31px;padding:0 10px;border:0;border-radius:7px;color:var(--muted);background:transparent;font-size:.65rem;font-weight:800}.motion-options button.active{color:var(--primary);background:#fff;box-shadow:0 3px 9px #35316e14}
.code-panel{margin:0 22px 22px;border-radius:17px;color:#e9e8f7;background:#191a28;box-shadow:0 15px 35px #1c1d3024;overflow:hidden}.code-heading{padding:14px 15px;border-bottom:1px solid #ffffff12}.light-kicker{color:#9e95ed}.code-tabs{display:flex;gap:4px;margin-top:7px}.code-tabs button{min-height:28px;padding:0 10px;border:0;border-radius:7px;color:#9798ad;background:transparent;font-size:.64rem;font-weight:850}.code-tabs button.active{color:#fff;background:#ffffff13}.copy-code{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 13px;border:0;border-radius:10px;color:#fff;background:var(--primary);font-size:.7rem;font-weight:850}.copy-code.copied{color:#082c27;background:var(--accent)}.code-panel pre{min-height:126px;max-height:270px;margin:0;padding:16px;overflow:auto}.code-panel code{color:#c9c6e8;white-space:pre;font:500 .71rem/1.65 ui-monospace,SFMono-Regular,Consolas,monospace}
.section{padding:68px 0}.section.alt{border-block:1px solid #1f223e0f;background:#ffffff6b}.content{max-width:900px;margin:auto}.content h2{margin:0 0 13px;font-size:clamp(1.75rem,4vw,2.45rem)}.content>p,.card p,.faq p,.prose-content p{color:var(--muted);line-height:1.75}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px;margin-top:25px}.card{padding:22px;border:1px solid var(--border);border-radius:19px;background:#fff}.card h3{margin:0 0 8px}.card p{margin:0;font-size:.88rem}.feature-icon{display:grid;place-items:center;width:42px;height:42px;margin-bottom:15px;border-radius:12px;color:var(--primary);background:#efedff;font-size:.8rem;font-weight:900}.prose-content h2{margin-top:45px}.prose-content h2:first-child{margin-top:0}.prose-content code,.faq code{padding:.12em .35em;border-radius:5px;color:#5142c7;background:#efedff;font-size:.88em}.tip-box{display:flex;gap:16px;margin:28px 0;padding:20px;border:1px solid #00c2a82b;border-radius:18px;background:#f0fffb}.tip-mark{display:grid;place-items:center;flex:0 0 44px;height:31px;border-radius:9px;color:#087b6c;background:#d4f8f0;font-size:.65rem;font-weight:900}.tip-box h3{margin:2px 0 6px}.tip-box p{margin:0;font-size:.86rem}.faq{display:grid;gap:11px;margin-top:23px}.faq details{border:1px solid var(--border);border-radius:15px;background:#fff}.faq summary{padding:17px 19px;cursor:pointer;font-weight:800}.faq p{margin:0;padding:0 19px 18px}.try-card{display:flex;align-items:center;gap:13px;padding:18px;border:1px solid var(--border);border-radius:17px;background:#fff;transition:.2s}.try-card:hover{transform:translateY(-3px);box-shadow:0 14px 35px #35316e1a}.try-icon{display:grid;place-items:center;flex:0 0 43px;height:43px;border-radius:13px;color:var(--primary);background:#f0eeff;font-weight:900}.try-card strong,.try-card span span{display:block}.try-card span span{margin-top:3px;color:var(--muted);font-size:.78rem}.toast{position:fixed;left:50%;bottom:28px;z-index:70;padding:12px 18px;border-radius:13px;color:#fff;background:#282640;font-size:.8rem;font-weight:800;opacity:0;pointer-events:none;transform:translate(-50%,14px);transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:960px){.shape-studio{grid-template-columns:1fr}.shape-library{border-right:0;border-bottom:1px solid var(--border)}.shape-grid{grid-template-columns:repeat(7,1fr);max-height:none}.shape-option{height:78px}.control-grid{grid-template-columns:repeat(2,1fr)}.fill-control{grid-row:span 2}.grid{grid-template-columns:1fr}}
@media(max-width:700px){.main{padding-top:40px}.shape-library,.customizer{padding:17px}.shape-grid{grid-template-columns:repeat(4,1fr)}.shape-stage{min-height:430px;padding:55px 28px}.stage-orbit.orbit-one{width:350px;height:350px}.stage-orbit.orbit-two{width:480px;height:480px}.shape-preview{max-width:66vw;max-height:280px}.control-grid{grid-template-columns:1fr 1fr}.fill-control{grid-column:1/-1;grid-row:auto}.motion-row{align-items:flex-start;flex-direction:column}.motion-options{width:100%;display:grid;grid-template-columns:repeat(4,1fr)}.code-panel{margin:0 17px 17px}.section{padding:52px 0}.height-dimension{right:5px}.width-dimension{bottom:12px}}
@media(max-width:460px){.shape-grid{grid-template-columns:repeat(3,1fr)}.shape-option{height:76px}.category-tabs{grid-template-columns:repeat(2,1fr)}.shape-stage{min-height:390px}.stage-toolbar>div:first-child{align-items:flex-start;flex-direction:column;gap:3px}.customizer-head{align-items:flex-start}.customizer-head h2{font-size:1rem}.surprise-button{padding:0 10px}.control-grid{grid-template-columns:1fr}.fill-control{grid-column:auto}.motion-options button{padding:0 4px}.code-heading{align-items:flex-start}.copy-code{margin-top:3px}.tip-box{flex-direction:column}.footer-inner{align-items:center;text-align:center}.footer-links{justify-content:center}}
@media(prefers-reduced-motion:reduce){.live-label i,.orbit-two,.preview-wrap{animation:none!important}.shape-option,.surprise-button,.try-card{transition:none}}