body{display:flex;min-height:100vh;flex-direction:column}main{flex:1}.generator-hero{padding:58px 0 76px}.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}.hidden{display:none!important}
.loading-studio{max-width:1180px;margin:auto;border:1px solid var(--border);border-radius:30px;background:rgba(255,255,255,.92);box-shadow:0 28px 80px rgba(55,47,126,.17);overflow:hidden}.studio-topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:92px;padding:14px 18px;border-bottom:1px solid var(--border);background:rgba(255,255,255,.95)}.mode-switch{display:flex;gap:8px}.mode-tab{display:flex;align-items:center;gap:11px;min-width:172px;padding:10px 13px;border:1px solid transparent;border-radius:15px;color:var(--muted);background:transparent;text-align:left;transition:.2s}.mode-tab:hover{background:#f6f4ff}.mode-tab.active{color:var(--primary-dark);border-color:#dcd7fb;background:#f4f1ff;box-shadow:0 8px 20px rgba(73,61,159,.08)}.mode-tab strong,.mode-tab small{display:block}.mode-tab strong{font-size:.84rem}.mode-tab small{margin-top:3px;color:var(--muted);font-size:.66rem}.tab-art{position:relative;display:grid;place-items:center;flex:0 0 37px;width:37px;height:37px;border-radius:11px;background:#fff;box-shadow:0 6px 14px rgba(61,52,128,.1)}.spinner-art:before{content:"";width:17px;height:17px;border:3px solid #dcd8f2;border-top-color:var(--primary);border-radius:50%;animation:spin .85s linear infinite}.skeleton-art{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;padding:8px}.skeleton-art i{display:block;height:4px;border-radius:3px;background:#cbc5ed}.skeleton-art i:first-child{width:12px;height:7px}.skeleton-art i:nth-child(2){width:22px}.skeleton-art i:last-child{width:17px}.reset-button{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 13px;border:1px solid var(--border);border-radius:10px;color:var(--muted);background:#fff;font-size:.78rem;font-weight:800}.reset-button:hover{color:var(--primary);border-color:#bcb5ef}
.studio-grid{display:grid;grid-template-columns:390px minmax(0,1fr)}.control-panel{padding:22px;border-right:1px solid var(--border);background:#fcfcff}.control-heading,.toolbar-title,.code-heading>div{display:flex;align-items:center;gap:10px}.control-heading{margin-bottom:18px}.control-heading h2{margin:0;font-size:1.15rem}.control-heading p{margin:3px 0 0;color:var(--muted);font-size:.69rem}.step-label{display:grid;place-items:center;flex:0 0 auto;width:29px;height:29px;border-radius:9px;color:var(--primary);background:#f0edff;font-size:.72rem;font-weight:900}.control-section{padding:16px 0;border-top:1px solid var(--border)}.control-section:last-child{padding-bottom:0}.section-label{display:block;margin-bottom:11px;color:#818398;font-size:.66rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.preset-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}.preset{display:grid;place-items:center;gap:7px;min-width:0;height:68px;padding:7px 3px;border:1px solid var(--border);border-radius:11px;color:var(--muted);background:#fff;font-size:.63rem;font-weight:850;transition:.2s}.preset:hover,.preset.active{color:var(--primary);border-color:#aaa1ec;background:#f6f4ff;box-shadow:0 5px 13px rgba(65,54,149,.08)}.mini-loader{position:relative;display:block;width:26px;height:26px}.mini-ring{border:3px solid #ddd9f0;border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite}.mini-dual{border:3px solid transparent;border-top-color:var(--primary);border-bottom-color:#00bba3;border-radius:50%;animation:spin .9s linear infinite}.mini-dual:after{content:"";position:absolute;inset:4px;border:2px solid transparent;border-right-color:#9c8ff4;border-radius:50%;animation:spin .6s linear infinite reverse}.mini-dots{display:flex;align-items:center;justify-content:center;gap:2px}.mini-dots i{width:6px;height:6px;border-radius:50%;background:var(--primary);animation:dotBounce .7s infinite alternate}.mini-dots i:nth-child(2){animation-delay:.16s}.mini-dots i:nth-child(3){animation-delay:.32s}.mini-pulse{border-radius:50%;background:var(--primary);animation:pulse 1s ease-out infinite}.mini-bars{display:flex;align-items:center;justify-content:center;gap:2px}.mini-bars i{width:4px;height:17px;border-radius:3px;background:var(--primary);animation:barWave .8s ease-in-out infinite}.mini-bars i:nth-child(2){animation-delay:.12s}.mini-bars i:nth-child(3){animation-delay:.24s}.mini-bars i:nth-child(4){animation-delay:.36s}
.layout-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.layout-preset{display:grid;place-items:center;gap:7px;height:69px;padding:7px 4px;border:1px solid var(--border);border-radius:11px;color:var(--muted);background:#fff;font-size:.63rem;font-weight:850}.layout-preset:hover,.layout-preset.active{color:var(--primary);border-color:#aaa1ec;background:#f6f4ff}.layout-icon{position:relative;display:block;width:35px;height:26px}.layout-icon i{position:absolute;display:block;border-radius:3px;background:#c9c4e9}.article-icon i:first-child{top:0;left:0;width:35px;height:8px}.article-icon i:nth-child(2){top:12px;left:0;width:31px;height:4px}.article-icon i:last-child{top:20px;left:0;width:23px;height:4px}.card-icon i:first-child{inset:0 0 auto;height:14px}.card-icon i:last-child{bottom:2px;left:0;width:25px;height:5px}.profile-icon i:first-child{top:1px;left:0;width:16px;height:16px;border-radius:50%}.profile-icon i:last-child{top:4px;right:0;width:15px;height:9px}.dashboard-icon{display:grid;grid-template-columns:1fr 1fr;gap:3px}.dashboard-icon i{position:static}.dashboard-icon i:first-child{grid-column:1/-1}.dashboard-icon i:nth-child(2),.dashboard-icon i:nth-child(3){height:11px}
.color-row{display:grid;grid-template-columns:1fr 1fr;gap:9px}.color-field{display:grid;gap:7px;padding:9px;border:1px solid var(--border);border-radius:11px;background:#fff}.color-field>span:first-child{color:var(--muted);font-size:.66rem;font-weight:800}.color-field>span:last-child{display:flex;align-items:center;gap:7px}.color-field input{width:28px;height:27px;padding:0;border:0;border-radius:7px;background:none}.color-field output{color:var(--text);font:750 .64rem ui-monospace,Consolas,monospace}.range-field,.text-field{display:grid;gap:7px;margin-top:13px}.range-field>span{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:.69rem;font-weight:800}.range-field output{color:var(--text);font-size:.66rem}.range-field input{width:100%;accent-color:var(--primary)}.text-field>span{color:var(--muted);font-size:.69rem;font-weight:800}.text-field input{width:100%;min-height:39px;padding:0 10px;border:1px solid var(--border);border-radius:9px;color:var(--text);background:#fff;outline:0}.text-field input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(108,92,231,.1)}.switch-field{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:13px;color:var(--muted)}.switch-field strong,.switch-field small{display:block}.switch-field strong{color:var(--text);font-size:.73rem}.switch-field small{max-width:230px;margin-top:3px;font-size:.63rem;line-height:1.4}.switch-field input{width:36px;height:20px;accent-color:var(--primary)}
.preview-workspace{display:grid;grid-template-rows:auto minmax(520px,1fr) auto;min-width:0}.preview-toolbar{display:flex;align-items:center;justify-content:space-between;gap:15px;min-height:72px;padding:14px 19px;border-bottom:1px solid var(--border);background:#fff}.toolbar-title strong,.toolbar-title small,.code-heading strong,.code-heading small{display:block}.toolbar-title strong,.code-heading strong{font-size:.82rem}.toolbar-title small,.code-heading small{margin-top:3px;color:var(--muted);font-size:.67rem}.canvas-themes{display:flex;gap:5px;padding:5px;border:1px solid var(--border);border-radius:999px}.theme-dot{width:22px;height:22px;padding:0;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px var(--border)}.theme-dot.active{box-shadow:0 0 0 2px var(--primary)}.theme-dot[data-theme=light]{background:#eef0fa}.theme-dot[data-theme=dark]{background:#24253c}.theme-dot[data-theme=grid]{background:repeating-linear-gradient(45deg,#fff 0 4px,#d6d7e2 4px 8px)}
.preview-canvas{position:relative;display:grid;place-items:center;min-height:520px;padding:64px 28px 74px;isolation:isolate;overflow:hidden;transition:.3s}.preview-canvas.light{background:linear-gradient(145deg,#f2f3fb,#e7e9f3)}.preview-canvas.dark{background:radial-gradient(circle at 75% 18%,#46416f,#202135 58%)}.preview-canvas.grid{background-color:#eff0f6;background-image:linear-gradient(rgba(108,92,231,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(108,92,231,.07) 1px,transparent 1px);background-size:24px 24px}.ambient{position:absolute;z-index:-1;border-radius:50%;filter:blur(2px);animation:ambientFloat 7s ease-in-out infinite}.ambient-one{top:11%;right:8%;width:84px;height:84px;background:linear-gradient(135deg,rgba(0,194,168,.24),rgba(108,92,231,.16))}.ambient-two{bottom:12%;left:8%;width:52px;height:52px;background:linear-gradient(135deg,rgba(255,255,255,.7),rgba(108,92,231,.22));animation-delay:-3s}.preview-badge{position:absolute;top:20px;left:22px;display:flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid rgba(31,34,62,.08);border-radius:999px;color:#666980;background:rgba(255,255,255,.78);font-size:.66rem;font-weight:850;backdrop-filter:blur(8px)}.preview-badge span{width:7px;height:7px;border-radius:50%;background:#00bba3;box-shadow:0 0 0 4px rgba(0,187,163,.12)}.dark .preview-badge{color:#d3d4e2;border-color:rgba(255,255,255,.1);background:rgba(35,36,56,.72)}
.browser-card{width:min(100%,520px);min-height:295px;border:1px solid rgba(31,34,62,.1);border-radius:22px;background:#fff;box-shadow:0 26px 65px rgba(36,34,83,.2);overflow:hidden;transform:translateZ(0);animation:cardIn .4s ease}.browser-bar{display:flex;align-items:center;gap:6px;height:38px;padding:0 13px;border-bottom:1px solid #ececf2;background:#fafafd}.browser-bar span{width:7px;height:7px;border-radius:50%;background:#d7d7e2}.browser-bar span:first-child{background:#ff8e91}.browser-bar span:nth-child(2){background:#ffc465}.browser-bar span:nth-child(3){background:#69d6bc}.browser-bar i{display:block;width:35%;height:8px;margin-left:9px;border-radius:999px;background:#e8e8f0}.loader-stage{display:grid;place-items:center;min-height:257px;padding:32px}.spinner-wrap{display:grid;place-items:center;gap:18px}.loader-label{color:#73768c;font-size:.75rem;font-weight:750}.loader{--loader-size:72px;--loader-thickness:7px;--loader-speed:900ms;--loader-color:#6c5ce7;--loader-track:#e5e2f6;position:relative;width:var(--loader-size);height:var(--loader-size)}.loader-ring{border:var(--loader-thickness) solid var(--loader-track);border-top-color:var(--loader-color);border-radius:50%;animation:spin var(--loader-speed) linear infinite}.loader-dual{border:var(--loader-thickness) solid transparent;border-top-color:var(--loader-color);border-bottom-color:var(--loader-track);border-radius:50%;animation:spin var(--loader-speed) linear infinite}.loader-dual:after{content:"";position:absolute;inset:calc(var(--loader-thickness) * 1.35);border:calc(var(--loader-thickness) * .72) solid transparent;border-right-color:var(--loader-color);border-left-color:var(--loader-track);border-radius:50%;animation:spin calc(var(--loader-speed) * .68) linear infinite reverse}.loader-dots{display:flex;align-items:center;justify-content:center;gap:calc(var(--loader-size) * .09)}.loader-dots i{width:calc(var(--loader-size) * .22);height:calc(var(--loader-size) * .22);border-radius:50%;background:var(--loader-color);animation:dotBounce var(--loader-speed) ease-in-out infinite alternate}.loader-dots i:nth-child(2){animation-delay:calc(var(--loader-speed) * .16)}.loader-dots i:nth-child(3){animation-delay:calc(var(--loader-speed) * .32)}.loader-pulse{border-radius:50%;background:var(--loader-color);box-shadow:0 0 0 0 color-mix(in srgb,var(--loader-color) 35%,transparent);animation:pulse var(--loader-speed) ease-out infinite}.loader-pulse:after{content:"";position:absolute;inset:22%;border-radius:50%;background:#fff;opacity:.18}.loader-bars{display:flex;align-items:center;justify-content:center;gap:calc(var(--loader-size) * .055)}.loader-bars i{width:calc(var(--loader-size) * .12);height:70%;border-radius:999px;background:var(--loader-color);animation:barWave var(--loader-speed) ease-in-out infinite}.loader-bars i:nth-child(2){animation-delay:calc(var(--loader-speed) * .12)}.loader-bars i:nth-child(3){animation-delay:calc(var(--loader-speed) * .24)}.loader-bars i:nth-child(4){animation-delay:calc(var(--loader-speed) * .36)}
.skeleton-shell{--sk-base:#e5e2f6;--sk-shine:#f7f6ff;--sk-radius:12px;--sk-speed:1400ms;width:100%;max-width:430px}.sk{position:relative;overflow:hidden;border-radius:var(--sk-radius);background:var(--sk-base)}.sk:after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,var(--sk-shine),transparent);animation:shimmer var(--sk-speed) infinite}.sk-heading{width:62%;height:22px;margin-bottom:17px}.sk-line{height:11px;margin-top:10px}.sk-line:last-child{width:68%}.sk-media{height:130px;margin-bottom:16px}.sk-avatar{flex:0 0 72px;width:72px;height:72px;border-radius:50%}.sk-profile{display:flex;align-items:center;gap:18px}.sk-profile-copy{flex:1}.sk-dashboard{display:grid;grid-template-columns:1fr 1fr;gap:13px}.sk-stat{height:78px}.sk-dashboard .sk-wide{grid-column:1/-1;height:104px}.preview-tip{position:absolute;bottom:20px;left:50%;width:min(86%,560px);margin:0;color:#73768c;font-size:.68rem;font-weight:750;text-align:center;transform:translateX(-50%)}.dark .preview-tip{color:#b8bacd}
.code-panel{min-width:0;padding:17px 20px 20px;border-top:1px solid #34364a;color:#e7e8f4;background:#191b2b}.code-heading{display:flex;align-items:center;justify-content:space-between;gap:15px}.code-heading .step-label{color:#62e6d4;background:rgba(0,194,168,.12)}.code-heading small{color:#9da0b8}.copy-button{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 13px;border:1px solid rgba(255,255,255,.12);border-radius:10px;color:#fff;background:var(--primary);font-size:.75rem;font-weight:850}.copy-button:hover{background:#7b6bef}.code-tabs{display:flex;gap:5px;margin:14px 0 9px}.code-tab{min-height:30px;padding:0 10px;border:0;border-radius:8px;color:#989bb1;background:transparent;font-size:.68rem;font-weight:800}.code-tab.active{color:#fff;background:#2b2e44}.code-panel pre{max-height:250px;margin:0;padding:14px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:#121421;overflow:auto}.code-panel code{white-space:pre;color:#c8c9dc;font:500 .73rem/1.62 ui-monospace,SFMono-Regular,Consolas,monospace}
.content-section{padding:72px 0}.content-section.alt{border-block:1px solid rgba(31,34,62,.06);background:rgba(255,255,255,.5)}.content{max-width:940px;margin:auto}.content h2{margin:0 0 13px;font-size:clamp(1.8rem,4vw,2.5rem);letter-spacing:-.035em}.content>p,.benefit-card p,.faq p,.steps p,.guidance-grid p{color:var(--muted);line-height:1.75}.benefit-grid,.try-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px;margin-top:27px}.benefit-card{padding:23px;border:1px solid var(--border);border-radius:19px;background:#fff}.benefit-card>span{display:grid;place-items:center;width:42px;height:42px;margin-bottom:17px;border-radius:13px;color:var(--primary);background:#f0eeff;font-weight:900}.benefit-card h3,.guidance-grid h3{margin:0 0 8px;font-size:1rem}.benefit-card p,.guidance-grid p{margin:0;font-size:.86rem}.steps{display:grid;gap:13px;padding:0;margin:27px 0 0;list-style:none}.steps li{display:flex;gap:15px;padding:17px;border:1px solid var(--border);border-radius:16px;background:#fff}.steps li>span{display:grid;place-items:center;flex:0 0 34px;height:34px;border-radius:10px;color:var(--primary);background:#f0eeff;font-weight:900}.steps strong{display:block;margin:2px 0 4px}.steps p{margin:0;font-size:.86rem}.guidance-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:25px}.guidance-grid article{position:relative;padding:22px 22px 22px 64px;border:1px solid var(--border);border-radius:17px;background:#fff}.guidance-grid article>span{position:absolute;top:22px;left:20px;color:var(--primary);font-size:.72rem;font-weight:900}.faq{display:grid;gap:11px;margin-top:24px}.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 rgba(53,49,110,.1)}.try-icon{display:grid;place-items:center;flex:0 0 43px;height:43px;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:.76rem}.toast{position:fixed;left:50%;bottom:25px;z-index:80;padding:11px 17px;border-radius:12px;color:#fff;background:#282a40;box-shadow:0 14px 35px rgba(29,28,54,.25);font-size:.78rem;font-weight:850;opacity:0;pointer-events:none;transform:translate(-50%,12px);transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes dotBounce{0%{transform:translateY(26%);opacity:.45}100%{transform:translateY(-28%);opacity:1}}@keyframes pulse{0%{transform:scale(.55);opacity:1;box-shadow:0 0 0 0 color-mix(in srgb,var(--loader-color,#6c5ce7) 36%,transparent)}100%{transform:scale(1);opacity:.18;box-shadow:0 0 0 18px transparent}}@keyframes barWave{0%,100%{transform:scaleY(.42);opacity:.48}50%{transform:scaleY(1);opacity:1}}@keyframes shimmer{to{transform:translateX(100%)}}@keyframes ambientFloat{50%{transform:translateY(-13px) translateX(5px)}}@keyframes cardIn{from{opacity:.65;transform:translateY(6px) scale(.985)}to{opacity:1;transform:none}}
@media(max-width:940px){.studio-grid{grid-template-columns:1fr}.control-panel{border-right:0;border-bottom:1px solid var(--border)}.preview-workspace{grid-template-rows:auto minmax(480px,1fr) auto}.preview-canvas{min-height:480px}.preset-grid{grid-template-columns:repeat(5,1fr)}}@media(max-width:640px){.generator-hero{padding:40px 0 58px}.intro h1{font-size:clamp(2.35rem,13.5vw,3.65rem)}.loading-studio{border-radius:22px}.studio-topbar{align-items:stretch;flex-direction:column;padding:12px}.mode-switch{display:grid;grid-template-columns:1fr 1fr}.mode-tab{min-width:0;padding:9px}.mode-tab small{display:none}.reset-button{align-self:flex-end;margin-top:-4px}.control-panel{padding:18px 14px}.preset-grid{grid-template-columns:repeat(5,1fr);gap:5px}.preset{height:63px}.layout-grid{grid-template-columns:repeat(4,1fr);gap:5px}.preview-toolbar{padding:13px}.preview-canvas{min-height:420px;padding:58px 12px 70px}.browser-card{min-height:260px;border-radius:17px}.loader-stage{min-height:222px;padding:24px 18px}.preview-tip{bottom:15px}.code-panel{padding:15px 13px}.code-heading{align-items:flex-start}.copy-button{padding:0 10px}.content-section{padding:54px 0}.benefit-grid,.try-grid,.guidance-grid{grid-template-columns:1fr}.guidance-grid article{padding-left:58px}}@media(prefers-reduced-motion:reduce){.mode-tab,.preset,.layout-preset,.try-card,.toast{transition:none}.ambient,.spinner-art:before,.mini-loader,.mini-loader i{animation:none}}