body{display:flex;min-height:100vh;flex-direction:column}main{flex:1}.hero{padding:52px 0 78px;overflow:hidden}.breadcrumbs{margin-bottom:21px;color:var(--muted);font-size:.82rem}.breadcrumbs a{color:var(--primary);font-weight:800}.breadcrumbs span{margin:0 7px}.hero-copy{max-width:920px;margin:0 auto 30px;text-align:center}.eyebrow{display:inline-flex;align-items:center;gap:9px;padding:7px 12px;border:1px solid rgba(108,92,231,.15);border-radius:999px;color:var(--primary-dark);background:rgba(255,255,255,.76);font-size:.72rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase}.eyebrow-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px rgba(0,194,168,.11)}.hero h1{max-width:900px;margin:18px auto 14px;font-size:clamp(2.65rem,7vw,5.2rem);letter-spacing:-.065em}.gradient-text{color:var(--primary);background:linear-gradient(110deg,#6c5ce7,#8d65e5 52%,#00a995);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.hero-copy p{max-width:760px;margin:auto;color:var(--muted);font-size:clamp(1rem,2vw,1.15rem);line-height:1.75}
.visualizer{position:relative;max-width:1180px;margin:auto;padding:22px;border:1px solid rgba(108,92,231,.13);border-radius:30px;background:rgba(255,255,255,.76);box-shadow:0 28px 90px rgba(52,46,121,.14);backdrop-filter:blur(18px)}.visualizer:before{content:"";position:absolute;z-index:-1;inset:-120px -90px auto auto;width:340px;height:340px;border-radius:50%;background:rgba(108,92,231,.12);filter:blur(4px)}.visualizer-topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 3px 18px}.mini-label{display:block;margin-bottom:5px;color:var(--muted);font-size:.66rem;font-weight:850;letter-spacing:.12em;text-transform:uppercase}.size-readout{display:flex;align-items:baseline;gap:5px;color:var(--muted)}.size-readout strong{color:var(--text);font-size:1.42rem;letter-spacing:-.04em}.size-readout span{font-size:.72rem;font-weight:750}.size-readout .size-by{margin:0 4px;color:#b0b0c0}.active-mode{display:flex;align-items:center;gap:11px;min-width:155px;padding:10px 14px;border:1px solid rgba(108,92,231,.12);border-radius:15px;background:#f7f5ff}.mode-dot{width:10px;height:10px;border-radius:50%;background:#6c5ce7;box-shadow:0 0 0 6px rgba(108,92,231,.1);transition:background .25s}.active-mode small,.active-mode strong{display:block}.active-mode small{color:var(--muted);font-size:.62rem;font-weight:700}.active-mode strong{margin-top:1px;font-size:.9rem}.active-mode[data-mode=mobile] .mode-dot{background:#f09a5b;box-shadow:0 0 0 6px rgba(240,154,91,.12)}.active-mode[data-mode=tablet] .mode-dot{background:#00af9d;box-shadow:0 0 0 6px rgba(0,175,157,.12)}
.preset-row{display:flex;align-items:center;gap:8px;padding:12px;border:1px solid var(--border);border-radius:17px;background:#fff}.preset-row>span{margin:0 4px;color:var(--muted);font-size:.7rem;font-weight:800}.preset-row button{min-height:37px;padding:0 11px;border:1px solid transparent;border-radius:10px;color:#5c5e75;background:#f6f6fb;font-size:.72rem;font-weight:800;transition:.2s}.preset-row button small{margin-left:4px;color:#9697aa;font-size:.62rem}.preset-row button:hover,.preset-row button.active{color:#fff;background:var(--primary);box-shadow:0 8px 19px rgba(108,92,231,.22)}.preset-row button.active small,.preset-row button:hover small{color:rgba(255,255,255,.76)}.custom-width{display:flex;align-items:center;margin-left:auto;border:1px solid rgba(108,92,231,.16);border-radius:10px;background:#fff;overflow:hidden}.custom-width input{width:67px;min-height:35px;padding:0 4px 0 10px;border:0;color:var(--text);background:transparent;font-size:.76rem;font-weight:850;outline:0}.custom-width:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px rgba(108,92,231,.1)}.custom-width span{padding-right:9px;color:var(--muted);font-size:.66rem}
.ruler-wrap{position:relative;margin:25px 9px 17px;padding-top:18px}.ruler-labels{position:absolute;inset:0 0 auto;height:15px;color:#8a8b9d;font-size:.59rem;font-weight:750}.ruler-labels span{position:absolute;transform:translateX(-50%)}.ruler-labels span:first-child{transform:none}.ruler-labels span:last-child{transform:none}.width-range{position:relative;z-index:2;width:100%;height:18px;margin:0;appearance:none;background:transparent;cursor:ew-resize}.width-range::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:linear-gradient(90deg,#f09a5b 0 26.7%,#00b3a1 26.7% 63.3%,#6c5ce7 63.3%);box-shadow:inset 0 0 0 1px rgba(31,34,62,.05)}.width-range::-moz-range-track{height:6px;border:0;border-radius:999px;background:linear-gradient(90deg,#f09a5b 0 26.7%,#00b3a1 26.7% 63.3%,#6c5ce7 63.3%)}.width-range::-webkit-slider-thumb{width:22px;height:22px;margin-top:-8px;appearance:none;border:4px solid #fff;border-radius:50%;background:var(--primary);box-shadow:0 3px 12px rgba(42,37,100,.35)}.width-range::-moz-range-thumb{width:15px;height:15px;border:4px solid #fff;border-radius:50%;background:var(--primary);box-shadow:0 3px 12px rgba(42,37,100,.35)}.ruler-breaks{position:absolute;z-index:1;inset:23px 0 auto;height:13px;pointer-events:none}.ruler-breaks i{position:absolute;width:1px;height:10px;background:rgba(31,34,62,.2)}
.canvas{position:relative;display:grid;min-height:560px;place-items:center start;padding:34px 48px;overflow:hidden;border:1px solid rgba(255,255,255,.07);border-radius:22px;background:#17192a;isolation:isolate}.canvas:before{content:"";position:absolute;inset:0;z-index:-3;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:24px 24px}.canvas-glow{position:absolute;z-index:-2;border-radius:50%;filter:blur(2px);opacity:.55}.glow-one{width:350px;height:350px;right:-150px;top:-170px;background:radial-gradient(circle,#6c5ce7,transparent 67%)}.glow-two{width:290px;height:290px;left:-120px;bottom:-150px;background:radial-gradient(circle,#00a995,transparent 67%)}.preview-frame{position:relative;width:72%;min-width:225px;max-width:100%;border:1px solid rgba(255,255,255,.3);border-radius:15px;background:#fff;box-shadow:0 25px 70px rgba(0,0,0,.38);transition:width .08s linear}.browser-bar{display:flex;align-items:center;gap:10px;height:36px;padding:0 11px;border-bottom:1px solid #e4e5ec;border-radius:14px 14px 0 0;background:#f5f5f8}.browser-dots{display:flex;gap:4px}.browser-dots i{width:6px;height:6px;border-radius:50%;background:#c8c8d2}.browser-address{flex:1;max-width:240px;padding:5px 11px;border-radius:6px;color:#9091a1;background:#fff;font-size:.52rem}.browser-width{margin-left:auto;color:#696b7e;font-size:.55rem;font-weight:850}.demo-page{min-height:420px;padding:19px;color:#25263a;background:linear-gradient(145deg,#fff,#f8f8ff)}.demo-nav{display:flex;align-items:center;gap:21px;padding-bottom:16px;border-bottom:1px solid #ececf2}.demo-logo{display:flex;align-items:center;gap:6px;margin-right:auto;font-size:.71rem;font-weight:900}.demo-logo i{width:17px;height:17px;border-radius:6px 6px 6px 2px;background:linear-gradient(135deg,#6c5ce7,#00b29f);transform:rotate(-8deg)}.demo-links{display:flex;gap:17px;color:#747589;font-size:.51rem;font-weight:750}.demo-cta{padding:7px 10px;border-radius:7px;color:#fff;background:#6c5ce7;font-size:.5rem;font-weight:850}.demo-menu{display:none;width:22px;padding:5px;border-radius:6px;background:#efedff}.demo-menu i{display:block;height:2px;border-radius:9px;background:#6c5ce7}.demo-menu i+i{margin-top:3px}.demo-content{display:grid;grid-template-columns:minmax(0,1fr) 24%;gap:15px;padding-top:20px}.demo-hero{min-height:190px;padding:22px;border-radius:13px;background:linear-gradient(135deg,#312b72,#6c5ce7 59%,#766be0);overflow:hidden;position:relative}.demo-hero:after{content:"";position:absolute;right:-45px;bottom:-75px;width:180px;height:180px;border:25px solid rgba(255,255,255,.08);border-radius:50%}.demo-kicker{color:#8cf0e4;font-size:.48rem;font-weight:900;letter-spacing:.13em}.demo-hero h2{max-width:320px;margin:10px 0 7px;color:#fff;font-size:clamp(1rem,2.4vw,1.55rem);line-height:1.05;letter-spacing:-.045em}.demo-hero p{max-width:330px;margin:0;color:rgba(255,255,255,.68);font-size:.57rem;line-height:1.55}.demo-actions{display:flex;gap:7px;margin-top:16px}.demo-actions span{padding:7px 9px;border:1px solid rgba(255,255,255,.18);border-radius:7px;color:#fff;font-size:.48rem;font-weight:800}.demo-actions span:first-child{color:#302a73;background:#fff}.demo-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}.demo-cards article{min-width:0;padding:11px;border:1px solid #e8e7f1;border-radius:9px;background:#fff}.demo-cards i,.demo-cards strong,.demo-cards span{display:block}.demo-cards i{width:22px;height:22px;padding-top:5px;border-radius:6px;color:#6c5ce7;background:#eeecff;font-size:.47rem;font-style:normal;font-weight:900;text-align:center}.demo-cards strong{margin-top:8px;font-size:.58rem}.demo-cards span{margin-top:3px;color:#8a8b9c;font-size:.44rem;line-height:1.4}.demo-aside{display:flex;min-width:0;flex-direction:column;padding:17px;border:1px solid #e7e7f0;border-radius:12px;background:#fff}.demo-aside>span{color:#9495a6;font-size:.44rem;font-weight:850;letter-spacing:.1em}.demo-aside>strong{margin-top:8px;color:#25263a;font-size:1.25rem}.mini-chart{display:flex;align-items:flex-end;gap:4px;height:100px;margin-top:auto}.mini-chart i{flex:1;border-radius:3px 3px 0 0;background:linear-gradient(#8a7af0,#6c5ce7)}.mini-chart i:nth-child(1){height:35%}.mini-chart i:nth-child(2){height:52%}.mini-chart i:nth-child(3){height:46%}.mini-chart i:nth-child(4){height:72%}.mini-chart i:nth-child(5){height:63%}.mini-chart i:nth-child(6){height:88%;background:linear-gradient(#38d1be,#00a995)}.demo-aside p{margin:8px 0 0;color:#9596a7;font-size:.45rem}.demo-footer{display:flex;gap:7px;margin-top:15px}.demo-footer span{height:5px;border-radius:10px;background:#e3e2ed}.demo-footer span:nth-child(1){width:30%}.demo-footer span:nth-child(2){width:18%}.demo-footer span:nth-child(3){width:25%}
.preview-frame.tablet .demo-content{grid-template-columns:1fr}.preview-frame.tablet .demo-aside{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:12px;padding:12px}.preview-frame.tablet .demo-aside>strong{margin:0}.preview-frame.tablet .mini-chart{height:38px;margin:0 0 0 auto;width:95px}.preview-frame.tablet .demo-aside p{display:none}.preview-frame.mobile .demo-page{padding:14px}.preview-frame.mobile .demo-links,.preview-frame.mobile .demo-cta{display:none}.preview-frame.mobile .demo-menu{display:block}.preview-frame.mobile .demo-content{grid-template-columns:1fr;padding-top:13px}.preview-frame.mobile .demo-hero{min-height:176px;padding:18px}.preview-frame.mobile .demo-hero h2{font-size:1.15rem}.preview-frame.mobile .demo-cards{grid-template-columns:1fr}.preview-frame.mobile .demo-cards article{display:grid;grid-template-columns:25px 1fr;column-gap:8px;padding:9px}.preview-frame.mobile .demo-cards i{grid-row:1/3}.preview-frame.mobile .demo-cards strong{margin:2px 0 0}.preview-frame.mobile .demo-cards span{margin:0}.preview-frame.mobile .demo-aside{display:none}.preview-frame.mobile .browser-address{max-width:100px;overflow:hidden;white-space:nowrap}.preview-frame.mobile .demo-footer{display:none}.drag-handle{position:absolute;z-index:5;top:50%;right:-25px;display:grid;width:50px;height:74px;place-items:center;border:1px solid rgba(108,92,231,.22);border-radius:15px;color:#fff;background:#6c5ce7;box-shadow:0 9px 24px rgba(57,48,130,.36);cursor:ew-resize;transform:translateY(-50%);touch-action:none}.drag-handle:hover,.drag-handle:focus-visible{background:#5749d4;outline:3px solid rgba(142,125,255,.35);outline-offset:3px}.drag-handle span{display:flex;gap:3px}.drag-handle i{display:block;width:2px;height:15px;border-radius:3px;background:rgba(255,255,255,.6)}.drag-handle em{font-size:.49rem;font-style:normal;font-weight:850;letter-spacing:.06em;text-transform:uppercase}.preview-frame.shifting .demo-page{animation:layoutPop .38s cubic-bezier(.2,.9,.3,1.2)}.shift-flash{position:absolute;z-index:10;inset:0;pointer-events:none}.shift-flash i{position:absolute;width:6px;height:6px;border-radius:50%;background:#8e7dff;animation:spark .62s ease-out forwards}
.visualizer-footer{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 3px 1px}.legend{display:flex;flex-wrap:wrap;gap:15px;color:#686a80;font-size:.66rem;font-weight:750}.legend span{display:flex;align-items:center;gap:6px}.legend i{width:7px;height:7px;border-radius:50%}.mobile-dot{background:#f09a5b}.tablet-dot{background:#00af9d}.desktop-dot{background:#6c5ce7}.tip{color:#898a9c;font-size:.64rem}.tip kbd{display:inline-grid;min-width:22px;height:22px;place-items:center;margin-right:3px;border:1px solid var(--border);border-bottom-width:2px;border-radius:5px;color:#55576c;background:#fff;font-family:inherit;font-size:.65rem}
.section{padding:76px 0}.section.alt{border-block:1px solid rgba(31,34,62,.06);background:rgba(255,255,255,.42)}.content{max-width:990px;margin:auto}.content-narrow{display:grid;max-width:1040px;grid-template-columns:.8fr 1.2fr;gap:45px;align-items:center}.section-kicker{display:block;margin-bottom:10px;color:var(--primary);font-size:.69rem;font-weight:900;letter-spacing:.13em;text-transform:uppercase}.content h2,.code-copy h2{margin:0 0 12px;font-size:clamp(1.8rem,4vw,2.7rem);letter-spacing:-.04em}.content>p,.code-copy p,.benefit-grid p,.prose-content p,.faq p{color:var(--muted);line-height:1.75}.code-card{overflow:hidden;border:1px solid rgba(255,255,255,.1);border-radius:20px;background:#1d1e30;box-shadow:0 23px 55px rgba(28,28,55,.18)}.code-card-head{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.08);color:#b8b9c8;font-size:.7rem}.code-card-head>span{display:flex;gap:5px}.code-card-head i{display:block;width:7px;height:7px;border-radius:50%;background:#5b5c6d}.code-card-head strong{font-weight:750}.code-card-head button{margin-left:auto;padding:7px 10px;border:1px solid rgba(255,255,255,.13);border-radius:8px;color:#fff;background:rgba(255,255,255,.07);font-size:.67rem;font-weight:800}.code-card-head button:hover{background:#6c5ce7}.code-card pre{min-height:146px;margin:0;padding:25px;overflow:auto;color:#e8e8ef;font-size:.77rem;line-height:1.65}.code-card code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:27px}.benefit-grid article{padding:24px;border:1px solid var(--border);border-radius:20px;background:#fff}.benefit-number{display:grid;width:39px;height:39px;place-items:center;margin-bottom:17px;border-radius:12px;color:var(--primary);background:#f0eeff;font-size:.67rem;font-weight:900}.benefit-grid h3{margin:0 0 8px;font-size:1rem}.benefit-grid p{margin:0;font-size:.86rem}.prose-content h2{margin-top:34px}.prose-content h2:first-child{margin-top:0}.faq{display:grid;gap:11px;margin-top:23px}.faq details{overflow:hidden;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-head{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:22px}.try-head h2{margin-bottom:5px}.try-head p{margin:0;color:var(--muted)}.try-head>a{color:var(--primary);font-size:.85rem;font-weight:800}.try-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.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 rgba(53,49,110,.1)}.try-icon{display:grid;flex:0 0 43px;height:43px;place-items:center;border-radius:13px;color:var(--primary);background:#f0eeff;font-size:.72rem;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;z-index:100;left:50%;bottom:24px;padding:11px 16px;border-radius:12px;color:#fff;background:#25233d;box-shadow:0 12px 34px rgba(31,30,56,.25);font-size:.82rem;font-weight:800;opacity:0;pointer-events:none;transform:translate(-50%,12px);transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@keyframes layoutPop{0%{opacity:.6;transform:scale(.985)}65%{transform:scale(1.008)}100%{opacity:1;transform:scale(1)}}@keyframes spark{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--spark-x),var(--spark-y)) scale(.2)}}@media(max-width:900px){.content-narrow{grid-template-columns:1fr}.benefit-grid,.try-grid{grid-template-columns:1fr}.canvas{min-height:520px;padding-inline:35px}.preview-frame{width:80%}.try-head{align-items:stretch;flex-direction:column}}@media(max-width:680px){.hero{padding:40px 0 55px}.visualizer{padding:13px;border-radius:23px}.visualizer-topbar{align-items:flex-start}.active-mode{min-width:135px}.preset-row{flex-wrap:wrap}.preset-row>span{width:100%}.preset-row button{flex:1}.custom-width{width:100%;margin-left:0}.custom-width input{flex:1}.canvas{min-height:510px;padding:25px 30px}.demo-page{min-height:420px}.visualizer-footer{align-items:flex-start;flex-direction:column}.section{padding:57px 0}.code-card pre{padding:19px;font-size:.68rem}}@media(max-width:420px){.size-readout strong{font-size:1.1rem}.active-mode{min-width:0;padding:9px 10px}.canvas{padding-inline:21px}.drag-handle{right:-20px;width:42px}.browser-address{display:none}.legend{gap:9px}.demo-hero p{font-size:.53rem}}@media(prefers-reduced-motion:reduce){.preview-frame{transition:none}.preview-frame.shifting .demo-page,.shift-flash i{animation:none}}