body{display:flex;min-height:100vh;flex-direction:column}.main{flex:1;padding:58px 0 78px}.intro{max-width:940px;margin:0 auto 32px;text-align:center}.intro h1{margin:18px auto 14px;font-size:clamp(2.65rem,7vw,4.8rem)}.crumbs{margin-bottom:18px;color:var(--muted);font-size:.82rem}.crumbs a{color:var(--primary);font-weight:750}
.scroll-studio{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(360px,.88fr);max-width:1180px;margin:auto;border:1px solid var(--border);border-radius:30px;background:#fff;box-shadow:var(--shadow);overflow:hidden}.preview-side{min-width:0;padding:18px;background:linear-gradient(145deg,#efedf7,#e7e8f2)}.preview-toolbar{display:flex;align-items:center;justify-content:space-between;min-height:42px;padding:0 4px 12px;color:#686a7d;font-size:.74rem;font-weight:850;letter-spacing:.05em;text-transform:uppercase}.preview-toolbar>span{display:flex;align-items:center;gap:8px}.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#00c2a8;box-shadow:0 0 0 5px rgba(0,194,168,.12)}.preview-actions{display:flex;padding:3px;border-radius:10px;background:#fff}.theme-button{padding:6px 9px;border:0;border-radius:7px;color:#7b7d8f;background:transparent;font-size:.68rem;font-weight:850;text-transform:uppercase}.theme-button.active{color:var(--primary);background:#f0eeff}
.browser-stage{padding:14px;border-radius:23px;background:linear-gradient(145deg,#6c5ce7,#42348e 67%,#302660);box-shadow:inset 0 1px rgba(255,255,255,.18);transition:.25s}.browser-stage.dark{background:linear-gradient(145deg,#1f2036,#11121f 70%,#29224c)}.browser-shell{overflow:hidden;border:1px solid rgba(255,255,255,.2);border-radius:17px;background:#fff;box-shadow:0 26px 55px rgba(25,19,66,.28)}.browser-top{display:flex;align-items:center;gap:12px;height:43px;padding:0 14px;border-bottom:1px solid #e8e8ef;background:#f9f9fc}.browser-dots{display:flex;gap:5px}.browser-dots i{width:7px;height:7px;border-radius:50%;background:#ff8d86}.browser-dots i:nth-child(2){background:#f2c45c}.browser-dots i:nth-child(3){background:#5bc99a}.address-pill{flex:1;max-width:270px;padding:6px 12px;border-radius:7px;color:#9293a1;background:#eeeef4;font-size:.61rem}.secure-dot{width:8px;height:8px;margin-left:auto;border:2px solid #9b9cab;border-radius:50%}.scroll-wrap{position:relative}.preview-scroll{height:520px;overflow-y:scroll;overscroll-behavior:contain;background:#f7f3eb;outline:none;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:#6c5ce7 #e7e5f4}.preview-scroll:focus-visible{box-shadow:inset 0 0 0 3px rgba(108,92,231,.5)}.preview-scroll::-webkit-scrollbar{width:14px;height:14px}.preview-scroll::-webkit-scrollbar-track{border-radius:14px;background:#e7e5f4}.preview-scroll::-webkit-scrollbar-thumb{border:3px solid #e7e5f4;border-radius:14px;background:#6c5ce7;background-clip:padding-box;box-shadow:0 2px 8px rgba(35,27,91,.26)}.preview-scroll::-webkit-scrollbar-thumb:hover{background:#5142c7;background-clip:padding-box}.preview-scroll::-webkit-scrollbar-corner{background:#e7e5f4}
.demo-hero{position:relative;min-height:520px;padding:76px 9% 58px;color:#202030;background:radial-gradient(circle at 88% 20%,rgba(108,92,231,.14),transparent 27%),linear-gradient(135deg,#f8f4eb,#eee9df);overflow:hidden}.demo-hero:after{content:"";position:absolute;right:-60px;bottom:42px;width:250px;height:250px;border:1px solid rgba(32,32,48,.12);border-radius:50%;box-shadow:inset 0 0 0 25px rgba(255,255,255,.22),inset 0 0 0 26px rgba(32,32,48,.08)}.demo-kicker,.demo-section-head span,.demo-quote>span{display:block;color:#7a7188;font-size:.58rem;font-weight:850;letter-spacing:.18em}.demo-hero h2{position:relative;z-index:1;margin:24px 0 18px;font-family:Georgia,serif;font-size:clamp(2.8rem,6.5vw,5rem);font-weight:500;letter-spacing:-.06em;line-height:.92}.demo-hero h2 em{color:var(--primary);font-weight:500}.demo-hero p{position:relative;z-index:1;max-width:390px;margin:0;color:#656171;font-size:.83rem;line-height:1.7}.demo-button{position:relative;z-index:1;margin-top:28px;padding:12px 15px;border:0;border-radius:999px;color:#fff;background:#202030;font-size:.7rem;font-weight:800}.demo-button span{margin-left:7px}.demo-collection{padding:58px 8% 70px;background:#fff}.demo-section-head{display:flex;align-items:end;justify-content:space-between;gap:15px;margin-bottom:24px}.demo-section-head h3{margin:0;font-family:Georgia,serif;font-size:1.65rem;font-weight:500}.object-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.object-card{padding:10px;border:1px solid #ecebf0;border-radius:14px}.object-art{position:relative;display:grid;place-items:center;aspect-ratio:.9;margin-bottom:13px;border-radius:10px;background:#eee7dc;overflow:hidden}.object-art i{display:block;width:42%;height:58%;border-radius:50% 50% 16% 16%;background:#2b2938;box-shadow:0 18px 26px rgba(35,33,49,.22)}.object-one .object-art i:after{content:"";position:absolute;width:2px;height:44%;top:12%;left:50%;background:#2b2938}.object-two .object-art{background:#dfeceb}.object-two .object-art i{width:38%;height:55%;border:2px solid rgba(108,92,231,.25);border-radius:48% 48% 30% 30%;background:rgba(108,92,231,.38)}.object-three .object-art{background:#e9e0d2}.object-three .object-art i{width:56%;height:44%;border-radius:8px 8px 2px 2px;background:#936b44;transform:skewY(-5deg)}.object-card small{display:block;color:#9793a0;font-size:.48rem;letter-spacing:.12em}.object-card strong{display:block;margin-top:5px;font-family:Georgia,serif;font-size:.82rem}.demo-quote{min-height:390px;padding:76px 10%;color:#f4f0ff;background:#28233f;text-align:center}.demo-quote>span{color:#9f96bd}.demo-quote blockquote{max-width:580px;margin:30px auto 18px;font-family:Georgia,serif;font-size:clamp(1.5rem,4vw,2.5rem);font-style:italic;line-height:1.25}.demo-quote p{color:#aaa1c3;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase}.demo-end{display:grid;place-items:center;min-height:330px;padding:60px;color:#272538;background:radial-gradient(circle,#fff 0,#f0ecff 60%,#e5dffc);text-align:center}.finish-spark{display:grid;place-items:center;width:55px;height:55px;border-radius:18px;color:#fff;background:linear-gradient(135deg,var(--primary),var(--accent));box-shadow:0 14px 30px rgba(108,92,231,.28);font-size:1.5rem}.demo-end h3{margin:18px 0 6px;font-family:Georgia,serif;font-size:2.1rem}.demo-end p{margin:0;color:#706d80;font-size:.78rem}.demo-end button{margin-top:20px;padding:9px 13px;border:1px solid rgba(39,37,56,.16);border-radius:999px;color:#3e395b;background:#fff;font-size:.68rem;font-weight:800}.scroll-meter{position:absolute;z-index:4;top:0;right:0;left:0;height:3px;background:rgba(108,92,231,.12);pointer-events:none}.scroll-meter span{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--primary),var(--accent));transition:width .08s}.scroll-status{position:absolute;z-index:4;right:27px;bottom:17px;display:grid;place-items:center;width:62px;height:62px;border:1px solid rgba(255,255,255,.7);border-radius:50%;color:#fff;background:rgba(31,28,48,.82);box-shadow:0 10px 24px rgba(30,27,55,.2);backdrop-filter:blur(8px);pointer-events:none}.scroll-status span{font-size:.76rem;font-weight:900}.scroll-status small{font-size:.4rem;letter-spacing:.12em}
.preset-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:13px}.preset{display:flex;align-items:center;gap:8px;min-width:0;padding:9px;border:1px solid transparent;border-radius:12px;color:#57596d;background:rgba(255,255,255,.62);text-align:left}.preset:hover,.preset.active{border-color:rgba(108,92,231,.28);background:#fff}.preset>i{position:relative;flex:0 0 auto;width:12px;height:30px;border-radius:999px;background:var(--track)}.preset>i:after{content:"";position:absolute;top:7px;left:2px;width:8px;height:15px;border-radius:999px;background:var(--thumb)}.preset span,.preset strong,.preset small{display:block;min-width:0}.preset strong{overflow:hidden;font-size:.65rem;text-overflow:ellipsis;white-space:nowrap}.preset small{margin-top:2px;color:#8a8b9a;font-size:.51rem}
.control-panel{padding:28px 27px 24px;background:#fff}.panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:24px}.step-label,.section-label{display:block;margin-bottom:6px;color:var(--primary);font-size:.65rem;font-weight:900;letter-spacing:.14em}.panel-heading h2{margin:0;font-size:1.5rem;letter-spacing:-.035em}.surprise{padding:8px 10px;border:1px solid rgba(108,92,231,.18);border-radius:10px;color:var(--primary);background:#f7f5ff;font-size:.71rem;font-weight:850}.surprise:hover{background:#eeeaff}.color-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.color-field{display:grid;gap:7px;color:#4f5165;font-size:.72rem;font-weight:800}.color-control{display:flex;align-items:center;gap:7px;min-width:0;padding:7px;border:1px solid #e1e1e9;border-radius:11px;background:#fafafd}.color-control input{width:26px;height:26px;padding:0;border:0;border-radius:7px;background:transparent;overflow:hidden}.color-control input::-webkit-color-swatch-wrapper{padding:0}.color-control input::-webkit-color-swatch{border:0;border-radius:6px}.color-control output{min-width:0;color:#626477;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.63rem}.sliders{display:grid;gap:17px;margin:24px 0}.range-field{display:grid;gap:9px}.range-field>span{display:flex;align-items:center;justify-content:space-between;color:#4d4f62;font-size:.76rem}.range-field output{padding:4px 7px;border-radius:7px;color:var(--primary);background:#f1efff;font-size:.65rem;font-weight:850}.range-field input{width:100%;height:5px;appearance:none;border-radius:999px;background:linear-gradient(90deg,var(--primary) 0 var(--fill,50%),#e8e7ef var(--fill,50%));outline:none}.range-field input::-webkit-slider-thumb{width:17px;height:17px;appearance:none;border:3px solid #fff;border-radius:50%;background:var(--primary);box-shadow:0 2px 8px rgba(58,46,148,.3)}.range-field input::-moz-range-thumb{width:12px;height:12px;border:3px solid #fff;border-radius:50%;background:var(--primary);box-shadow:0 2px 8px rgba(58,46,148,.3)}.option-row{display:grid;grid-template-columns:.8fr 1.2fr;gap:10px}.select-field{display:grid;gap:7px;color:#4f5165;font-size:.72rem;font-weight:800}.select-field select{height:45px;padding:0 10px;border:1px solid #e1e1e9;border-radius:11px;color:#484a5d;background:#fafafd;outline:none}.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:68px;padding:11px 12px;border:1px solid #e1e1e9;border-radius:12px;background:#fafafd}.toggle-row span,.toggle-row b,.toggle-row small{display:block}.toggle-row b{color:#4f5165;font-size:.72rem}.toggle-row small{margin-top:3px;color:#9697a5;font-size:.58rem}.toggle-row input{position:absolute;opacity:0}.toggle-row i{position:relative;flex:0 0 auto;width:34px;height:20px;border-radius:999px;background:#d8d8e2;transition:.2s}.toggle-row i:after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 2px 5px #0002;transition:.2s}.toggle-row input:checked+i{background:var(--primary)}.toggle-row input:checked+i:after{transform:translateX(14px)}.toggle-row input:focus-visible+i{outline:3px solid rgba(108,92,231,.22)}
.code-card{margin-top:18px;border:1px solid #25263d;border-radius:15px;background:#17182a;overflow:hidden}.code-head{display:flex;align-items:center;justify-content:space-between;padding:8px 9px 8px 12px;border-bottom:1px solid #2d2e45}.code-tabs{display:flex;gap:3px}.code-tab{padding:6px 8px;border:0;border-radius:7px;color:#81849c;background:transparent;font-size:.62rem;font-weight:900}.code-tab.active{color:#fff;background:#2c2d47}.code-head>button{padding:7px 10px;border:0;border-radius:8px;color:#191a2c;background:#62dfcd;font-size:.65rem;font-weight:900}.code-card pre{height:214px;margin:0;padding:16px;overflow:auto;white-space:pre;color:#e9e6ff;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.68rem;line-height:1.58;tab-size:2}.support-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;color:#858797;font-size:.64rem}.support-row div{display:flex;gap:4px}.support-row b{display:grid;place-items:center;width:26px;height:26px;border:1px solid #e1e1e9;border-radius:50%;color:#616375;background:#fafafd;font-size:.5rem}.reset-button{width:100%;margin-top:14px;padding:10px;border:1px solid #e5e4eb;border-radius:10px;color:#77798a;background:#fff;font-size:.68rem;font-weight:800}.reset-button:hover{color:var(--primary);background:#f8f6ff}
.section.alt{padding:72px 0;background:rgba(255,255,255,.45);border-block:1px solid rgba(31,34,62,.06)}.content{max-width:1040px}.section-heading{text-align:center}.section-heading h2,.content>h2{margin:0 0 12px;font-size:clamp(1.8rem,4vw,2.65rem);letter-spacing:-.04em}.section-heading p,.content>p{color:var(--muted);line-height:1.72}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px;margin-top:28px}.feature-icon{display:grid;place-items:center;width:42px;height:42px;margin-bottom:18px;border-radius:13px;color:var(--primary);background:#efedff;font-size:.69rem;font-weight:900}.prose-content{max-width:820px}.prose-content h2{margin-top:32px}.prose-content h2:first-child{margin-top:0}.prose-content p{color:#5d6078;line-height:1.78}.prose-content code,.faq code{padding:2px 5px;border-radius:5px;color:#5548ba;background:#f0eeff;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.88em}.tip-box{display:flex;gap:18px;margin:28px 0;padding:22px;border:1px solid rgba(0,194,168,.18);border-radius:18px;background:rgba(0,194,168,.07)}.tip-mark{display:grid;place-items:center;flex:0 0 48px;height:31px;border-radius:9px;color:#087b6c;background:#fff;font-size:.65rem;font-weight:900}.tip-box h3{margin:0 0 6px}.tip-box p{margin:0}.faq{display:grid;gap:10px;margin-top:24px}.faq details{border:1px solid var(--border);border-radius:16px;background:#fff}.faq summary{padding:17px 20px;font-weight:800;cursor:pointer}.faq p{margin:0;padding:0 20px 18px;color:var(--muted);line-height:1.7}.try-card{display:flex;align-items:center;gap:14px;padding:19px;border:1px solid var(--border);border-radius:17px;background:#fff;transition:.2s}.try-card:hover{transform:translateY(-3px);border-color:rgba(108,92,231,.28);box-shadow:0 14px 34px rgba(53,49,110,.1)}.try-icon{display:grid;place-items:center;flex:0 0 44px;height:44px;border-radius:13px;color:var(--primary);background:#efedff;font-size:.68rem;font-weight:900}.try-card strong,.try-card span span{display:block}.try-card span span{margin-top:4px;color:var(--muted);font-size:.78rem}.toast{position:fixed;z-index:100;right:24px;bottom:24px;padding:12px 16px;border-radius:12px;color:#fff;background:#25263d;box-shadow:0 12px 30px #0003;font-size:.78rem;font-weight:800;opacity:0;transform:translateY(12px);pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:translateY(0)}
@media(max-width:980px){.scroll-studio{grid-template-columns:1fr}.preview-scroll{height:500px}.control-panel{border-top:1px solid var(--border)}}
@media(max-width:700px){.main{padding:40px 0 58px}.scroll-studio{border-radius:22px}.preview-side{padding:10px}.browser-stage{padding:8px}.preview-scroll{height:450px}.demo-hero{min-height:450px;padding:58px 8% 45px}.object-grid{grid-template-columns:1fr}.object-art{aspect-ratio:1.8}.preset-strip{grid-template-columns:repeat(2,1fr)}.control-panel{padding:23px 18px}.color-grid,.option-row,.grid{grid-template-columns:1fr}.scroll-status{right:22px;width:54px;height:54px}.tip-box{flex-direction:column}.section.alt{padding:58px 0}}
@media(max-width:430px){.preview-toolbar{align-items:flex-start}.address-pill{max-width:170px}.demo-hero h2{font-size:2.7rem}.panel-heading{flex-direction:column}.surprise{align-self:flex-start}.code-card pre{font-size:.61rem}.preset small{display:none}}
@media(prefers-reduced-motion:reduce){.preview-scroll{scroll-behavior:auto}.try-card,.toast{transition:none}}