.grid-hero{position:relative;overflow:hidden;padding:56px 0 76px;background:radial-gradient(circle at 12% 18%,rgba(108,92,231,.1),transparent 27%),radial-gradient(circle at 88% 25%,rgba(0,194,168,.08),transparent 25%),linear-gradient(180deg,#fff 0,#f8f7ff 100%)}
.grid-hero:before{position:absolute;inset:0;content:"";opacity:.22;pointer-events:none;background-image:linear-gradient(30deg,rgba(108,92,231,.1) 1px,transparent 1px),linear-gradient(150deg,rgba(108,92,231,.1) 1px,transparent 1px);background-size:52px 30px}
.grid-hero .container{position:relative}.intro{max-width:900px;margin:0 auto 34px;text-align:center}.crumbs{margin-bottom:20px;color:var(--muted);font-size:.82rem}.crumbs a{color:var(--primary);font-weight:800}.crumbs span{margin-left:8px}.intro h1{max-width:900px;margin:17px auto 14px;font-size:clamp(2.65rem,7vw,4.9rem);letter-spacing:-.055em}.intro .lead{max-width:760px;margin:0 auto;color:var(--muted);font-size:clamp(1rem,2vw,1.15rem);line-height:1.75}.trust-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;margin-top:20px;color:#62647a;font-size:.8rem;font-weight:800}.trust-row span:before{margin-right:7px;color:#00a990;content:"✓"}
.grid-studio{overflow:hidden;border:1px solid rgba(108,92,231,.16);border-radius:28px;background:rgba(255,255,255,.94);box-shadow:0 30px 90px rgba(42,37,92,.16)}.preset-toolbar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;padding:17px 20px;border-bottom:1px solid var(--border);background:#fbfaff}.preset-toolbar>div:first-child{display:grid}.toolbar-kicker,.section-kicker{color:var(--primary);font-size:.68rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.preset-toolbar strong{font-size:.9rem}.preset-list{display:flex;justify-content:center;gap:7px}.preset{display:flex;align-items:center;gap:7px;min-height:38px;padding:5px 10px;border:1px solid var(--border);border-radius:11px;color:#575a70;background:#fff;font-size:.72rem;font-weight:850;transition:.2s}.preset:hover,.preset.active{color:var(--primary);border-color:rgba(108,92,231,.45);background:#f3f0ff;transform:translateY(-1px)}.preset-swatch{width:19px;height:19px;border:1px solid rgba(0,0,0,.08);border-radius:6px;background-size:9px 5px}.preset-swatch.paper{background-color:#fbfaff;background-image:linear-gradient(30deg,#6c5ce766 1px,transparent 1px),linear-gradient(150deg,#6c5ce766 1px,transparent 1px)}.preset-swatch.blueprint{background-color:#1255a7;background-image:linear-gradient(30deg,#fff8 1px,transparent 1px),linear-gradient(150deg,#fff8 1px,transparent 1px)}.preset-swatch.midnight{background-color:#161629;background-image:linear-gradient(30deg,#55e6c180 1px,transparent 1px),linear-gradient(150deg,#55e6c180 1px,transparent 1px)}.preset-swatch.candy{background-color:#fff4f7;background-image:linear-gradient(30deg,#f55f9280 1px,transparent 1px),linear-gradient(150deg,#f55f9280 1px,transparent 1px)}.surprise-button,.motion-button,.reset-button,.swap-button,.copy-button,.download-button{border:0;font-weight:850;cursor:pointer}.surprise-button{min-height:40px;padding:0 14px;border-radius:11px;color:#fff;background:linear-gradient(135deg,var(--primary),#8d7ff2);box-shadow:0 8px 18px rgba(108,92,231,.22)}.surprise-button span{margin-right:5px}
.studio-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(330px,.65fr)}.preview-panel{min-width:0;padding:22px;border-right:1px solid var(--border)}.control-panel{padding:22px}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px}.panel-heading>div{display:flex;align-items:center;gap:11px}.panel-heading h2{margin:0;font-size:1.02rem}.panel-heading p{margin:3px 0 0;color:var(--muted);font-size:.73rem}.step-badge{display:grid;place-items:center;flex:0 0 32px;height:32px;border-radius:9px;color:var(--primary);background:#f0edff;font-size:.68rem;font-weight:900}.motion-button,.reset-button{min-height:36px;padding:0 11px;border-radius:10px;color:#61647a;background:#f4f3f9;font-size:.7rem}.motion-button span{display:inline-block;width:7px;height:7px;margin-right:5px;border-radius:50%;background:#a5a7b7}.motion-button.active{color:#077d6c;background:#e8faf6}.motion-button.active span{background:#00b99e;box-shadow:0 0 0 4px rgba(0,185,158,.12)}.reset-button{color:var(--primary)}
.preview-wrap{perspective:1000px}.preview-stage{position:relative;min-height:490px;overflow:hidden;border:1px solid rgba(108,92,231,.15);border-radius:21px;background-color:#fbfaff;background-position:center;box-shadow:inset 0 0 60px rgba(45,39,95,.06);transform-style:preserve-3d;transition:background .2s,transform .5s cubic-bezier(.2,.8,.2,1)}.preview-stage.drifting{animation:gridDrift 8s ease-in-out infinite}@keyframes gridDrift{0%,100%{transform:rotateX(0) rotateY(0)}33%{transform:rotateX(2deg) rotateY(-3deg)}66%{transform:rotateX(-2deg) rotateY(3deg)}}.preview-glow{position:absolute;inset:-30%;opacity:.42;pointer-events:none;background:radial-gradient(circle at 55% 45%,rgba(255,255,255,.8),transparent 32%);mix-blend-mode:soft-light}.preview-badge{position:absolute;top:16px;left:16px;display:flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid rgba(255,255,255,.45);border-radius:999px;color:#37384e;background:rgba(255,255,255,.78);box-shadow:0 5px 20px rgba(34,31,74,.1);backdrop-filter:blur(8px);font-size:.68rem;font-weight:900;text-transform:uppercase}.preview-badge i{width:7px;height:7px;border-radius:50%;background:#00b99e;box-shadow:0 0 0 4px rgba(0,185,158,.12)}.preview-stats{position:absolute;right:15px;bottom:15px;display:flex;gap:6px}.preview-stats span{padding:7px 9px;border:1px solid rgba(255,255,255,.55);border-radius:9px;color:#65677a;background:rgba(255,255,255,.8);backdrop-filter:blur(8px);font-size:.65rem}.preview-stats b{color:#37384e}.cube-scene{position:absolute;inset:0;transition:opacity .25s,transform .45s}.cube-scene.hidden{opacity:0;transform:translateY(8px)}.iso-cube{position:absolute;width:72px;height:72px;filter:drop-shadow(0 14px 15px rgba(40,36,83,.18));animation:cubeFloat 4s ease-in-out infinite}.iso-cube i,.iso-cube b,.iso-cube em{position:absolute;width:50px;height:50px;border:1px solid rgba(255,255,255,.42)}.iso-cube i{left:11px;top:-11px;background:rgba(147,132,255,.9);transform:rotate(30deg) skewX(-30deg) scaleY(.864)}.iso-cube b{left:-10px;top:24px;background:rgba(108,92,231,.92);transform:rotate(30deg) skewX(30deg) scaleY(.864)}.iso-cube em{left:32px;top:24px;background:rgba(65,199,183,.9);transform:rotate(-30deg) skewX(-30deg) scaleY(.864)}.cube-one{left:19%;top:36%;transform:scale(1.18)}.cube-two{left:54%;top:18%;transform:scale(.72);animation-delay:-1.2s}.cube-three{left:66%;top:59%;transform:scale(.9);animation-delay:-2.4s}@keyframes cubeFloat{0%,100%{translate:0 0}50%{translate:0 -8px}}
.demo-note{display:flex;align-items:center;gap:11px;margin-top:12px;padding:11px 13px;border-radius:13px;color:var(--muted);background:#f8f7fc;font-size:.68rem}.demo-note>span:nth-child(2){display:grid;line-height:1.45}.demo-note strong{color:#44465c}.demo-note button{margin-left:auto;border:0;color:var(--primary);background:transparent;font-size:.67rem;font-weight:850;white-space:nowrap}.cube-icon{position:relative;width:24px;height:24px;flex:0 0 24px;border-radius:7px;background:linear-gradient(135deg,#6c5ce7,#55e6c1);transform:rotate(30deg) skewX(-30deg) scaleY(.86)}
.color-grid{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:8px}.color-field{display:grid;gap:7px;color:#55576e;font-size:.72rem;font-weight:850}.color-input{display:flex;align-items:center;gap:7px;min-width:0;height:42px;padding:5px 7px;border:1px solid var(--border);border-radius:11px;background:#fff}.color-input input[type=color]{width:28px;height:28px;padding:0;border:0;border-radius:7px;background:transparent}.color-input input[type=text]{width:68px;min-width:0;border:0;outline:0;color:#484a60;background:transparent;font:700 .72rem ui-monospace,SFMono-Regular,Consolas,monospace}.swap-button{width:34px;height:34px;margin-bottom:4px;border-radius:9px;color:var(--primary);background:#f0edff}.range-list{display:grid;gap:17px;margin-top:24px}.range-field{display:grid;gap:8px}.range-field>span{display:flex;justify-content:space-between;color:#55576e;font-size:.74rem}.range-field output{color:var(--primary);font-weight:900}.range-field input{width:100%;accent-color:var(--primary)}.select-field{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:23px;padding-top:20px;border-top:1px solid var(--border);color:#55576e;font-size:.74rem}.select-field>span{display:grid;gap:3px}.select-field small{color:var(--muted);font-size:.64rem;font-weight:500}.select-field select{max-width:158px;height:40px;padding:0 9px;border:1px solid var(--border);border-radius:10px;color:#4d4f65;background:#fff;font-size:.7rem;font-weight:750}
.export-panel{display:grid;grid-template-columns:230px minmax(0,1fr) auto;align-items:center;gap:17px;padding:20px 22px;border-top:1px solid var(--border);background:#fbfaff}.export-copy{display:flex;align-items:flex-start;gap:10px}.export-copy h2{margin:1px 0 4px;font-size:.95rem}.export-copy p{margin:0;color:var(--muted);font-size:.68rem;line-height:1.45}.code-card{min-width:0;overflow:hidden;border:1px solid var(--border);border-radius:14px;background:#fff}.code-tabs{display:flex;align-items:center;gap:4px;padding:7px;border-bottom:1px solid var(--border)}.code-tab{padding:7px 9px;border:0;border-radius:8px;color:#717387;background:transparent;font-size:.65rem;font-weight:850}.code-tab.active{color:var(--primary);background:#f0edff}.code-tabs>span{margin-left:auto;color:var(--muted);font-size:.61rem}.code-card pre{max-height:110px;margin:0;padding:12px 14px;overflow:auto;color:#484477;background:#fff;font:11px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre-wrap;word-break:break-all}.export-actions{display:grid;gap:7px}.copy-button,.download-button{min-height:38px;padding:0 12px;border-radius:10px;color:#fff;background:linear-gradient(135deg,var(--primary),#8373ed);font-size:.68rem;white-space:nowrap}.download-button{color:#55586f;border:1px solid var(--border);background:#fff}.download-button.png{color:#087f6f;border-color:rgba(0,169,144,.2);background:#ebfaf7}.privacy-note{text-align:center;margin:16px 0 0;color:var(--muted);font-size:.78rem}
.content-section{padding:76px 0;background:#fff}.content{max-width:1000px}.content-intro{max-width:780px;margin-bottom:28px}.content-intro h2,.use-cases h2,.faq-block h2,.try-head h2{margin:8px 0 10px;font-size:clamp(1.75rem,4vw,2.45rem);letter-spacing:-.035em}.content-intro p{margin:0;color:var(--muted);line-height:1.8}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.feature-grid article{padding:24px;border:1px solid var(--border);border-radius:19px;background:#fff;box-shadow:0 12px 30px rgba(44,39,88,.05)}.feature-grid article>span{display:grid;place-items:center;width:34px;height:34px;margin-bottom:16px;border-radius:9px;color:var(--primary);background:#f0edff;font-size:.7rem;font-weight:900}.feature-grid h3{margin:0 0 8px;font-size:1rem}.feature-grid p,.use-case-list p,.faq p,.try-head p{margin:0;color:var(--muted);font-size:.85rem;line-height:1.7}.use-cases{display:grid;grid-template-columns:1fr 1.35fr;gap:48px;margin:72px 0}.use-case-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}.use-case-list article{padding:18px;border:1px solid var(--border);border-radius:16px;background:#faf9ff}.use-case-list strong{font-size:.87rem}.use-case-list p{margin-top:6px;font-size:.78rem}.faq-block{margin:0 0 70px}.faq{display:grid;gap:10px;margin-top:22px}.faq details{border:1px solid var(--border);border-radius:15px;background:#fff}.faq summary{padding:17px 19px;cursor:pointer;font-size:.88rem;font-weight:850}.faq p{padding:0 19px 18px}.try-section{padding-top:54px;border-top:1px solid var(--border)}.try-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:20px}.try-head a{color:var(--primary);font-size:.82rem;font-weight:850;white-space:nowrap}.try-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.try-card{display:flex;align-items:center;gap:13px;padding:17px;border:1px solid var(--border);border-radius:17px;background:#fff;transition:.2s}.try-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(45,40,90,.1)}.try-icon{display:grid;place-items:center;flex:0 0 45px;height:45px;border-radius:12px;color:var(--primary);background:#f0edff;font-size:.65rem;font-weight:900}.try-card>span:last-child{display:grid;gap:4px}.try-card strong{font-size:.84rem}.try-card small{color:var(--muted);font-size:.72rem}.toast{position:fixed;left:50%;bottom:24px;z-index:1000;opacity:0;transform:translate(-50%,18px);padding:12px 18px;border-radius:12px;color:#fff;background:#282940;box-shadow:0 14px 30px rgba(22,22,40,.25);transition:.25s;pointer-events:none;font-size:.78rem;font-weight:800}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:980px){.preset-toolbar{grid-template-columns:1fr auto}.preset-list{grid-column:1/-1;grid-row:2;justify-content:flex-start;overflow:auto}.studio-grid{grid-template-columns:1fr}.preview-panel{border-right:0;border-bottom:1px solid var(--border)}.export-panel{grid-template-columns:1fr}.export-actions{grid-template-columns:repeat(3,1fr)}.use-cases{grid-template-columns:1fr;gap:22px}}
@media(max-width:680px){.grid-hero{padding:40px 0 55px}.intro h1{font-size:clamp(2.4rem,12vw,3.5rem)}.grid-studio{border-radius:21px}.preset-toolbar,.preview-panel,.control-panel,.export-panel{padding:16px}.preset-toolbar{gap:12px}.preset-list{margin-right:-16px;padding-right:16px}.preview-stage{min-height:390px}.color-grid{grid-template-columns:1fr auto 1fr}.color-input input[type=text]{width:57px}.export-actions{grid-template-columns:1fr}.feature-grid,.use-case-list,.try-grid{grid-template-columns:1fr}.use-cases{margin:55px 0}.try-head{align-items:flex-start;flex-direction:column}.preview-stats{left:12px;right:auto}.cube-two{left:61%}.cube-three{left:58%;top:66%}}
@media(prefers-reduced-motion:reduce){.preview-stage.drifting,.iso-cube{animation:none}.preset,.try-card,.cube-scene{transition:none}}