:root{--sk-purple:#6c5ce7;--sk-ink:#24253a;--sk-muted:#696b7e;--sk-border:#e5e2ee;--sk-green:#00b894}
.skeleton-page{background:#faf9fe}.generator-hero{position:relative;padding:46px 0 76px;overflow:hidden;background:radial-gradient(circle at 15% 10%,rgba(108,92,231,.14),transparent 28%),radial-gradient(circle at 88% 14%,rgba(0,184,148,.11),transparent 24%),linear-gradient(180deg,#faf9ff,#f5f3fb 72%,#fff)}
.hero-orb{position:absolute;border-radius:50%;filter:blur(1px);pointer-events:none}.hero-orb-one{top:190px;left:-100px;width:240px;height:240px;background:linear-gradient(145deg,rgba(108,92,231,.12),rgba(108,92,231,0))}.hero-orb-two{top:360px;right:-80px;width:190px;height:190px;background:linear-gradient(145deg,rgba(0,184,148,.13),rgba(0,184,148,0))}
.intro{position:relative;z-index:1;max-width:860px;margin:0 auto 42px;text-align:center}.crumbs{margin-bottom:28px;color:#8b8c9d;font-size:.78rem;font-weight:700}.crumbs a:hover{color:var(--sk-purple)}.intro h1{max-width:900px;margin:20px auto 16px;font-size:clamp(2.7rem,6.5vw,5rem)}.intro .lead{max-width:740px}.trust-row{display:flex;justify-content:center;gap:24px;margin-top:25px;color:#616377;font-size:.79rem;font-weight:780}.trust-row span{display:inline-flex;align-items:center;gap:8px}.trust-row span:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--sk-green);box-shadow:0 0 0 5px rgba(0,184,148,.09)}
.generator-studio{position:relative;z-index:2;border:1px solid rgba(79,70,129,.13);border-radius:26px;background:#fff;box-shadow:0 28px 85px rgba(52,42,120,.15);overflow:hidden}.preset-toolbar{display:flex;align-items:center;gap:16px;padding:16px 18px;border-bottom:1px solid var(--sk-border);background:linear-gradient(180deg,#fff,#fbfaff)}.toolbar-label,.panel-heading,.export-heading{display:flex;align-items:center;gap:11px}.toolbar-label>span,.step-number{display:grid;flex:0 0 29px;height:29px;place-items:center;border-radius:9px;background:#ebe8ff;color:var(--sk-purple);font-size:.65rem;font-weight:900}.toolbar-label strong,.toolbar-label small{display:block}.toolbar-label strong{color:var(--sk-ink);font-size:.76rem}.toolbar-label small{margin-top:2px;color:#9293a2;font-size:.62rem}.preset-list{display:flex;justify-content:center;gap:7px;flex:1}.preset{display:flex;align-items:center;gap:7px;min-height:43px;padding:6px 10px;border:1px solid transparent;border-radius:11px;background:transparent;color:#66687a;font-size:.7rem;font-weight:850;transition:.2s}.preset:hover{background:#f5f3ff;color:var(--sk-purple)}.preset.active{border-color:#d3cdf9;background:#efedff;color:var(--sk-purple);box-shadow:inset 0 0 0 1px rgba(108,92,231,.03)}.preset-icon{display:grid;width:26px;height:24px;gap:2px;padding:4px;border-radius:6px;background:#fff}.preset-icon i{display:block;border-radius:2px;background:currentColor;opacity:.35}.mini-article i:first-child{width:55%;height:3px}.mini-article i:not(:first-child){height:2px}.mini-card-icon{grid-template-columns:9px 1fr}.mini-card-icon i:first-child{grid-row:1/3}.mini-card-icon i:last-child{height:7px;margin-top:2px}.mini-profile{grid-template-columns:7px 1fr;align-items:center}.mini-profile i:first-child{height:7px;border-radius:50%}.mini-profile i:last-child{height:3px}.mini-product{grid-template-columns:11px 1fr;align-items:center}.mini-product i:first-child{height:15px}.mini-product i:last-child{height:4px}.mini-dashboard{grid-template-columns:1fr 1fr}.mini-dashboard i{height:5px}.mini-dashboard i:last-child{grid-column:1/-1;height:6px}.mini-table i{height:2px}.reset-button{display:flex;align-items:center;gap:6px;min-height:39px;padding:0 12px;border:1px solid var(--sk-border);border-radius:10px;background:#fff;color:#6d6f82;font-size:.68rem;font-weight:850}.reset-button:hover{border-color:#c8c2ed;color:var(--sk-purple)}
.studio-grid{display:grid;grid-template-columns:330px minmax(0,1fr);min-height:630px}.control-panel{padding:22px;border-right:1px solid var(--sk-border);background:#fcfbfe}.panel-heading{align-items:flex-start;margin-bottom:22px}.panel-heading h2,.export-heading h2{margin:0;color:var(--sk-ink);font-size:.96rem;letter-spacing:-.02em}.panel-heading p,.export-heading p{margin:3px 0 0;color:#9293a2;font-size:.7rem}.control-group{padding:18px 0;border-top:1px solid var(--sk-border)}.control-group:first-of-type{border-top:0;padding-top:0}.control-label{display:block;margin-bottom:13px;color:#9394a4;font-size:.61rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.select-field,.range-field,.text-field{display:grid;gap:7px;margin-top:14px;color:#4f5165;font-size:.7rem;font-weight:800}.select-field:first-of-type,.range-field:first-of-type{margin-top:0}.select-field select,.text-field input{width:100%;min-height:39px;padding:0 11px;border:1px solid #dad7e5;border-radius:9px;background:#fff;color:#3b3d52;outline:none;font-size:.74rem}.select-field select:focus,.text-field input:focus{border-color:var(--sk-purple);box-shadow:0 0 0 3px rgba(108,92,231,.09)}.range-field>span{display:flex;justify-content:space-between}.range-field output{color:var(--sk-purple);font-weight:900}.range-field input{width:100%;accent-color:var(--sk-purple)}.range-field.is-disabled{opacity:.45}.range-field.is-disabled input{cursor:not-allowed}.switch-field{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:16px}.switch-field span{min-width:0}.switch-field strong,.switch-field small{display:block}.switch-field strong{color:#4f5165;font-size:.71rem}.switch-field small{margin-top:3px;color:#9899a8;font-size:.62rem}.switch-field input{position:relative;width:36px;height:20px;margin:0;appearance:none;border-radius:999px;background:#d5d3df;transition:.2s}.switch-field input:before{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(31,33,58,.2);transition:.2s}.switch-field input:checked{background:var(--sk-purple)}.switch-field input:checked:before{transform:translateX(16px)}.color-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.color-field{display:grid;gap:7px;color:#4f5165;font-size:.68rem;font-weight:800}.color-field>span:last-child{display:flex;align-items:center;gap:5px;padding:5px;border:1px solid #dad7e5;border-radius:9px;background:#fff}.color-field input[type=color]{flex:0 0 24px;width:24px;height:24px;padding:0;border:0;border-radius:6px;background:transparent;overflow:hidden}.color-field input[type=text]{min-width:0;width:100%;padding:0;border:0;outline:0;color:#5c5e70;background:transparent;font:700 .63rem ui-monospace,SFMono-Regular,Consolas,monospace}.control-note{margin:11px 0 0;color:#8a8b9c;font-size:.62rem;line-height:1.55}.control-note code{padding:1px 4px;border-radius:4px;background:#eeecf8;color:#6154c9}
.preview-panel{min-width:0;padding:22px;background:#fff}.preview-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:17px}.preview-actions{display:flex;align-items:center;gap:9px}.device-switcher{display:flex;padding:3px;border:1px solid var(--sk-border);border-radius:10px;background:#f8f7fb}.device-button{min-height:31px;padding:0 9px;border:0;border-radius:7px;background:transparent;color:#898a9a;font-size:.61rem;font-weight:850}.device-button.active{background:#fff;color:var(--sk-purple);box-shadow:0 3px 10px rgba(45,43,97,.09)}.reveal-button{display:flex;align-items:center;gap:6px;min-height:37px;padding:0 12px;border:0;border-radius:10px;background:linear-gradient(135deg,var(--sk-purple),#8878ee);color:#fff;box-shadow:0 8px 18px rgba(108,92,231,.22);font-size:.67rem;font-weight:850}.reveal-button:hover{transform:translateY(-1px);box-shadow:0 11px 22px rgba(108,92,231,.3)}
.preview-canvas{position:relative;display:grid;min-height:478px;place-items:center;padding:24px;border:1px solid #e4e1ee;border-radius:18px;background:linear-gradient(145deg,#ece9fb,#f7f6fc 50%,#e8f7f3);overflow:hidden}.canvas-glow{position:absolute;border-radius:50%;filter:blur(2px)}.canvas-glow-one{top:-80px;left:-50px;width:220px;height:220px;background:rgba(108,92,231,.12)}.canvas-glow-two{right:-70px;bottom:-80px;width:230px;height:230px;background:rgba(0,184,148,.12)}.preview-browser{position:relative;width:100%;max-width:690px;border:1px solid rgba(76,70,107,.15);border-radius:16px;background:#fff;box-shadow:0 22px 60px rgba(48,40,95,.16);overflow:hidden;transition:width .35s ease}.browser-bar{display:flex;align-items:center;gap:5px;height:32px;padding:0 11px;border-bottom:1px solid #e8e6ee;background:#f8f7fb}.browser-bar span{width:7px;height:7px;border-radius:50%;background:#ddd9eb}.browser-bar span:first-child{background:#ff8d9a}.browser-bar span:nth-child(2){background:#f5c451}.browser-bar span:nth-child(3){background:#63d6b4}.browser-bar i{width:36%;height:7px;margin-left:auto;border-radius:999px;background:#e9e7ef}.preview-viewport{padding:20px;transition:.25s}.preview-status{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;color:#838597;font-size:.61rem;font-weight:800}.preview-status span{display:flex;align-items:center;gap:6px}.preview-status span i{width:6px;height:6px;border-radius:50%;background:#00b894;box-shadow:0 0 0 4px rgba(0,184,148,.1)}.skeleton-preview{min-height:310px}.preview-layout{display:grid;gap:var(--preview-gap)}.skeleton-block{position:relative;overflow:hidden;border-radius:var(--preview-radius);background:var(--preview-base)}.skeleton-block:after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,var(--preview-shine),transparent)}.animation-shimmer .skeleton-block:after{animation:preview-shimmer var(--preview-speed) infinite}.animation-pulse .skeleton-block{animation:preview-pulse var(--preview-speed) ease-in-out infinite}.sk-heading{width:62%;height:22px}.sk-line{height:10px}.sk-line.short{width:68%}.sk-media{height:142px}.sk-avatar{width:76px;height:76px;border-radius:50%}.sk-button{width:98px;height:32px}.sk-price{width:32%;height:18px}.sk-stat{height:70px}.sk-chart{height:130px}.sk-cell{height:16px}.layout-article .sk-media{margin-top:6px}.layout-card{grid-template-columns:repeat(2,minmax(0,1fr))}.layout-card .preview-unit{display:grid;gap:var(--preview-gap);padding:12px;border:1px solid #eeecf2;border-radius:calc(var(--preview-radius) + 5px)}.layout-card .sk-media{height:108px}.layout-profile{grid-template-columns:76px 1fr;align-items:center}.profile-copy,.product-copy{display:grid;gap:var(--preview-gap)}.layout-product{grid-template-columns:minmax(120px,.8fr) 1.2fr;align-items:center}.layout-product .sk-media{height:210px}.layout-dashboard{grid-template-columns:repeat(3,1fr)}.layout-dashboard .sk-chart{grid-column:1/-1}.layout-table{grid-template-columns:1.2fr .8fr .6fr;gap:1px;padding:1px;background:#ebe9f0;border-radius:calc(var(--preview-radius) + 3px);overflow:hidden}.layout-table .table-cell{padding:11px;background:#fff}.loaded-content{animation:content-reveal .45s ease both}.real-card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.real-card{overflow:hidden;border:1px solid #eae7ef;border-radius:15px;background:#fff}.real-media{height:108px;background:linear-gradient(135deg,#dcd5ff,#b7eee0)}.real-body{padding:13px}.real-kicker{color:var(--sk-purple);font-size:.6rem;font-weight:900;text-transform:uppercase}.real-content h3{margin:5px 0 6px;color:#303247;font-size:.92rem}.real-content p{margin:0;color:#7b7d8d;font-size:.68rem;line-height:1.55}.real-article{max-width:520px}.real-article h2{margin:0 0 10px;font-size:1.45rem}.real-article p{color:#747687;font-size:.76rem;line-height:1.65}.real-cover{height:142px;margin-top:15px;border-radius:13px;background:linear-gradient(135deg,#dcd5ff,#b7eee0)}.real-profile{display:flex;align-items:center;gap:17px}.real-avatar{display:grid;flex:0 0 76px;height:76px;place-items:center;border-radius:50%;color:#fff;background:linear-gradient(135deg,var(--sk-purple),#00b894);font-size:1.2rem;font-weight:900}.real-product{display:grid;grid-template-columns:minmax(120px,.8fr) 1.2fr;gap:18px;align-items:center}.real-product-image{height:210px;border-radius:15px;background:linear-gradient(145deg,#f0edff,#c8f3e8)}.real-price{margin:10px 0 12px;color:var(--sk-purple);font-weight:900}.real-button{display:inline-flex;min-height:32px;align-items:center;padding:0 13px;border-radius:9px;background:var(--sk-purple);color:#fff;font-size:.67rem;font-weight:850}.real-dashboard{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.real-stat{padding:14px;border:1px solid #e9e6ef;border-radius:13px}.real-stat small{color:#858797;font-size:.61rem}.real-stat strong{display:block;margin-top:6px;font-size:1.15rem}.real-chart{grid-column:1/-1;height:130px;border-radius:14px;background:linear-gradient(180deg,#f4f1ff,#fff),repeating-linear-gradient(90deg,transparent 0 39px,#ece9f4 40px)}.real-table{width:100%;border-collapse:collapse;font-size:.7rem}.real-table th,.real-table td{padding:12px;border-bottom:1px solid #ebe9f0;text-align:left}.real-table th{color:#7d7f90;font-size:.62rem;text-transform:uppercase}.preview-browser.device-mobile .layout-card,.preview-browser.device-mobile .real-card-grid,.preview-browser.device-mobile .layout-product,.preview-browser.device-mobile .real-product,.preview-browser.device-mobile .layout-dashboard,.preview-browser.device-mobile .real-dashboard{grid-template-columns:1fr}.preview-browser.device-mobile .layout-card .preview-unit:nth-child(2),.preview-browser.device-mobile .real-card:nth-child(2),.preview-browser.device-mobile .layout-dashboard .sk-stat:nth-child(3),.preview-browser.device-mobile .real-stat:nth-child(3){display:none}.preview-browser.device-mobile .layout-product .sk-media,.preview-browser.device-mobile .real-product-image{height:120px}.experience-note{display:flex;align-items:center;gap:12px;margin-top:15px;padding:13px 15px;border:1px solid #e8e3ff;border-radius:13px;background:linear-gradient(90deg,#f7f5ff,#f8fffd)}.note-icon{display:grid;flex:0 0 31px;height:31px;place-items:center;border-radius:9px;color:var(--sk-purple);background:#ebe8ff}.experience-note strong{color:#46485d;font-size:.7rem}.experience-note p{margin:2px 0 0;color:#858697;font-size:.62rem;line-height:1.45}
.export-panel{display:grid;grid-template-columns:220px minmax(0,1fr) auto;gap:16px;align-items:center;padding:18px 22px;border-top:1px solid var(--sk-border);background:#fbfafe}.export-heading{align-items:flex-start}.code-card{min-width:0;border:1px solid #34354c;border-radius:12px;background:#20213a;overflow:hidden}.code-tabs{display:flex;align-items:center;gap:2px;padding:4px;background:#292a45}.code-tabs span{margin-left:auto;padding-right:7px;color:#9092a8;font-size:.56rem;font-weight:800;text-transform:uppercase}.code-tab{padding:6px 10px;border:0;border-radius:6px;background:transparent;color:#aeb0c5;font-size:.62rem;font-weight:850}.code-tab.active{background:#3a3b5a;color:#fff}.code-card pre{height:82px;margin:0;padding:10px 12px;overflow:auto;color:#b8f3dd;font:600 .6rem/1.48 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre-wrap}.export-actions{display:flex;gap:7px}.copy-button,.download-button{min-height:40px;padding:0 12px;border-radius:10px;font-size:.66rem;font-weight:850;white-space:nowrap}.copy-button{border:1px solid var(--sk-purple);background:var(--sk-purple);color:#fff;box-shadow:0 8px 18px rgba(108,92,231,.22)}.download-button{border:1px solid var(--sk-border);background:#fff;color:#505267}.privacy-note{margin:14px 0;text-align:center;color:#85869a;font-size:.69rem}
.content-section{padding:74px 0;background:#fff}.content-section.alt{background:#f8f7fc}.content{max-width:1000px}.content-intro{max-width:790px}.section-kicker{color:var(--sk-purple);font-size:.68rem;font-weight:900;letter-spacing:.11em;text-transform:uppercase}.content h2{margin:10px 0 14px;color:var(--sk-ink);font-size:clamp(1.65rem,3vw,2.35rem);letter-spacing:-.035em}.content p{color:#66687c;line-height:1.75}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}.feature-grid article,.guidance-grid article{padding:22px;border:1px solid var(--sk-border);border-radius:18px;background:#fff;box-shadow:0 10px 30px rgba(52,42,120,.06)}.feature-grid article>span,.guidance-grid article>span{display:grid;width:34px;height:34px;place-items:center;border-radius:10px;background:#efedff;color:var(--sk-purple);font-size:.69rem;font-weight:900}.feature-grid h3,.guidance-grid h3{margin:16px 0 7px;font-size:1rem}.feature-grid p,.guidance-grid p{margin:0;font-size:.86rem}.prose-content{max-width:880px}.steps{display:grid;gap:14px;margin:28px 0 0;padding:0;list-style:none}.steps li{display:flex;gap:16px;padding:18px;border:1px solid var(--sk-border);border-radius:16px;background:#fff}.steps li>span{display:grid;flex:0 0 34px;height:34px;place-items:center;border-radius:10px;background:#efedff;color:var(--sk-purple);font-weight:900}.steps strong{display:block;margin:3px 0 5px;color:#3d3f53}.steps p{margin:0;font-size:.85rem}.guidance-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:28px}.faq{display:grid;gap:10px;margin-top:24px}.faq details{border:1px solid var(--sk-border);border-radius:14px;background:#fff}.faq summary{padding:17px 20px;cursor:pointer;color:#35374d;font-size:.91rem;font-weight:800}.faq details p{margin:0;padding:0 20px 18px;font-size:.86rem}.try-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:24px}.try-heading h2{margin-bottom:5px}.try-heading p{margin:0}.try-heading>a{color:var(--sk-purple);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(--sk-border);border-radius:16px;background:#fff;color:#34364c;box-shadow:0 8px 24px rgba(52,42,120,.05);transition:.2s}.try-card:hover{border-color:#c9c3ef;transform:translateY(-3px);box-shadow:0 14px 30px rgba(52,42,120,.1)}.try-icon{display:grid;flex:0 0 47px;height:47px;place-items:center;border-radius:13px;background:#efedff;color:var(--sk-purple);font-size:.67rem;font-weight:900}.try-card strong,.try-card small{display:block}.try-card strong{font-size:.84rem}.try-card small{margin-top:4px;color:#85869a;font-size:.71rem}.toast{position:fixed;left:50%;bottom:28px;z-index:60;padding:11px 16px;border-radius:999px;background:#20213a;color:#fff;font-size:.78rem;font-weight:800;box-shadow:0 12px 35px rgba(31,33,58,.25);opacity:0;transform:translate(-50%,20px);pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}.confetti-layer{position:fixed;inset:0;z-index:55;pointer-events:none;overflow:hidden}.confetti-piece{position:absolute;top:-16px;width:8px;height:12px;border-radius:2px;animation:confetti-fall 1.2s ease-in forwards}
@keyframes preview-shimmer{to{transform:translateX(100%)}}@keyframes preview-pulse{0%,100%{opacity:.58}50%{opacity:1}}@keyframes content-reveal{from{opacity:0;transform:translateY(8px);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}@keyframes confetti-fall{to{transform:translate(var(--drift),105vh) rotate(720deg);opacity:.2}}
@media(max-width:1060px){.preset-toolbar{align-items:flex-start;flex-wrap:wrap}.preset-list{order:3;flex-basis:100%;justify-content:flex-start;overflow-x:auto}.studio-grid{grid-template-columns:1fr}.control-panel{border-right:0;border-bottom:1px solid var(--sk-border)}.color-grid{grid-template-columns:1fr 1fr}.export-panel{grid-template-columns:1fr}.export-actions{justify-content:flex-start}.guidance-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.generator-hero{padding:30px 0 54px}.trust-row{align-items:flex-start;flex-direction:column;gap:10px;width:max-content;margin:22px auto 0}.generator-studio{border-radius:20px}.preset-toolbar,.control-panel,.preview-panel,.export-panel{padding:15px}.preset{white-space:nowrap}.preview-heading{align-items:flex-start;flex-direction:column}.preview-actions{width:100%;align-items:stretch;flex-direction:column}.device-switcher{display:flex}.device-button{flex:1}.reveal-button{justify-content:center}.preview-canvas{min-height:430px;padding:10px}.preview-viewport{padding:14px}.layout-card,.real-card-grid{grid-template-columns:1fr}.layout-card .preview-unit:nth-child(2),.real-card:nth-child(2){display:none}.layout-product,.real-product{grid-template-columns:1fr}.layout-product .sk-media,.real-product-image{height:130px}.layout-dashboard,.real-dashboard{grid-template-columns:1fr}.layout-dashboard .sk-stat:nth-child(3),.real-stat:nth-child(3){display:none}.layout-table,.real-table{font-size:.6rem}.experience-note{align-items:flex-start}.feature-grid,.guidance-grid,.try-grid{grid-template-columns:1fr}.try-heading{align-items:flex-start;flex-direction:column}.content-section{padding:56px 0}.color-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.skeleton-page *{scroll-behavior:auto!important}.preset,.reveal-button,.preview-browser,.try-card,.toast{transition:none}.skeleton-block,.skeleton-block:after,.loaded-content,.confetti-piece{animation:none!important}}