body{display:flex;min-height:100vh;flex-direction:column}main{flex:1}.generator-hero{padding:58px 0 76px}.intro{max-width:880px;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}
.button-studio{display:grid;grid-template-columns:minmax(330px,410px) minmax(0,1fr);max-width:1160px;margin:auto;border:1px solid var(--border);border-radius:30px;background:rgba(255,255,255,.9);box-shadow:0 28px 80px rgba(55,47,126,.17);overflow:hidden}.control-panel{padding:22px;border-right:1px solid var(--border);background:rgba(255,255,255,.96)}.panel-heading,.panel-heading>div,.preview-toolbar,.preview-toolbar>div,.code-heading,.code-heading>div,.toolbar-actions{display:flex;align-items:center}.panel-heading,.preview-toolbar,.code-heading{justify-content:space-between;gap:14px}.panel-heading>div,.preview-toolbar>div,.code-heading>div{gap:10px}.panel-heading h2{margin:0;font-size:1.22rem}.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}.reset-button{min-height:37px;padding:0 13px;border:1px solid var(--border);border-radius:10px;color:var(--muted);background:#fff;font-size:.8rem;font-weight:800}.reset-button:hover{color:var(--primary);border-color:#bcb5ef}
.presets{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:18px 0}.preset{display:grid;gap:7px;min-width:0;padding:8px 5px;border:1px solid var(--border);border-radius:12px;color:var(--muted);background:#fff;font-size:.68rem;font-weight:800;transition:.2s}.preset:hover,.preset.active{color:var(--primary);border-color:#a99fec;background:#f7f5ff}.preset-swatch{display:block;width:100%;height:30px;border-radius:8px;box-shadow:0 6px 14px rgba(42,35,104,.16)}.preset-swatch.aurora{background:linear-gradient(135deg,#6c5ce7,#8b75f6)}.preset-swatch.midnight{background:linear-gradient(135deg,#16182e,#353860)}.preset-swatch.outline{border:2px solid #6c5ce7;background:#fff;box-shadow:none}.preset-swatch.sunset{background:linear-gradient(135deg,#ff6b6b,#ff9f43)}
.state-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:5px;border-radius:13px;background:#f0f0f7}.state-tab{display:flex;align-items:center;justify-content:center;gap:8px;min-height:40px;border:0;border-radius:9px;color:var(--muted);background:transparent;font-size:.82rem;font-weight:850}.state-tab.active{color:var(--primary-dark);background:#fff;box-shadow:0 5px 14px rgba(45,43,97,.09)}.state-dot{width:8px;height:8px;border-radius:50%;background:#aaaabd}.state-tab[data-state=hover] .state-dot{background:var(--accent)}.state-tab.active .state-dot{box-shadow:0 0 0 4px rgba(108,92,231,.1)}
.controls{display:grid;gap:10px;margin-top:12px}.control-group{border:1px solid var(--border);border-radius:14px;background:#fcfcff;overflow:hidden}.group-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:43px;padding:0 13px;border:0;color:var(--text);background:transparent;font-size:.82rem;font-weight:850}.group-toggle:hover{background:#f7f5ff}.group-body{display:grid;gap:13px;padding:3px 13px 14px}.control-group.collapsed .group-body{display:none}.control-group.collapsed .group-toggle span:last-child{transform:rotate(90deg)}.text-field,.select-field,.range-field,.color-field{display:grid;gap:6px}.text-field>span,.select-field>span,.range-field>span,.color-field>span:first-child{color:var(--muted);font-size:.7rem;font-weight:800}.text-field input,.select-field select{width:100%;min-height:38px;padding:0 10px;border:1px solid var(--border);border-radius:9px;color:var(--text);background:#fff;outline:0}.text-field input:focus,.select-field select:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(108,92,231,.1)}.split-controls,.color-controls,.shadow-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.range-field>span{display:flex;justify-content:space-between;gap:8px}.range-field output{color:var(--text);font-size:.68rem}.range-field input{width:100%;accent-color:var(--primary)}.check-field{display:flex;align-items:center;justify-content:space-between;gap:14px;color:var(--muted);font-size:.73rem}.check-field strong,.check-field small{display:block}.check-field strong{color:var(--text);font-size:.76rem}.check-field small{margin-top:2px}.check-field input,.force-hover input{width:34px;height:19px;accent-color:var(--primary)}.color-field{padding:8px;border:1px solid var(--border);border-radius:10px;background:#fff}.color-field>span:last-child{display:flex;align-items:center;gap:7px}.color-field input{width:28px;height:26px;padding:0;border:0;background:none}.color-field output{color:var(--text);font:700 .65rem ui-monospace,Consolas,monospace}.shadow-grid{grid-template-columns:repeat(4,1fr);gap:7px}.number-field{position:relative;display:grid;gap:5px}.number-field span{color:var(--muted);font-size:.66rem;font-weight:800}.number-field input{width:100%;height:34px;padding:0 20px 0 7px;border:1px solid var(--border);border-radius:8px;background:#fff;font-size:.75rem;font-weight:750}.number-field small{position:absolute;right:6px;bottom:10px;color:var(--muted);font-size:.6rem}.shadow-colors{align-items:end}
.preview-workspace{display:grid;grid-template-rows:auto minmax(440px,1fr) auto;min-width:0}.preview-toolbar{min-height:75px;padding:14px 19px;border-bottom:1px solid var(--border);background:#fff}.preview-toolbar strong,.preview-toolbar small,.code-heading strong,.code-heading small{display:block}.preview-toolbar strong,.code-heading strong{font-size:.83rem}.preview-toolbar small,.code-heading small{margin-top:3px;color:var(--muted);font-size:.68rem}.toolbar-actions{gap:10px}.force-hover{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:.7rem;font-weight:800}.background-picker{display:flex;gap:5px;padding:5px;border:1px solid var(--border);border-radius:999px;background:#fff}.background-option{width:22px;height:22px;padding:0;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px var(--border)}.background-option.active{box-shadow:0 0 0 2px var(--primary)}.background-option[data-background=light]{background:#eef0fa}.background-option[data-background=dark]{background:#202237}.background-option[data-background=grid]{background:repeating-linear-gradient(45deg,#fff 0 4px,#d8d8e4 4px 8px)}
.preview-canvas{position:relative;display:grid;place-items:center;min-height:440px;padding:70px 25px;isolation:isolate;overflow:hidden;transition:.3s}.preview-canvas.light{background:linear-gradient(145deg,#f2f3fb,#e8e9f4)}.preview-canvas.dark{background:radial-gradient(circle at 72% 25%,#413c75,#202237 55%)}.preview-canvas.grid{background-color:#ececf4;background-image:linear-gradient(45deg,#dedee8 25%,transparent 25%),linear-gradient(-45deg,#dedee8 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#dedee8 75%),linear-gradient(-45deg,transparent 75%,#dedee8 75%);background-size:22px 22px;background-position:0 0,0 11px,11px -11px,-11px 0}.preview-canvas:after{content:"";position:absolute;z-index:-1;width:340px;height:180px;border-radius:50%;background:radial-gradient(ellipse,rgba(108,92,231,.16),transparent 68%);filter:blur(10px)}.canvas-hint{position:absolute;top:20px;left:22px;color:#7a7d94;font-size:.68rem;font-weight:750}.dark .canvas-hint{color:#bdbcd0}.orb{position:absolute;z-index:-1;border-radius:50%;filter:blur(1px);animation:float 6s ease-in-out infinite}.orb-one{top:18%;right:12%;width:58px;height:58px;background:linear-gradient(135deg,rgba(0,194,168,.35),rgba(108,92,231,.18))}.orb-two{bottom:14%;left:10%;width:34px;height:34px;background:linear-gradient(135deg,rgba(255,255,255,.5),rgba(108,92,231,.25));animation-delay:-2.5s}.generated-button{display:inline-flex;align-items:center;justify-content:center;gap:.65em;max-width:85%;cursor:pointer;outline-offset:5px;white-space:nowrap;will-change:transform,box-shadow}.generated-button:focus-visible{outline:3px solid rgba(0,194,168,.75)}.button-arrow{font-size:1.16em;line-height:1;transition:transform .2s}.generated-button:hover .button-arrow,.generated-button.is-hover .button-arrow,.generated-button:focus-visible .button-arrow{transform:translateX(4px)}.state-pill{position:absolute;left:50%;bottom:22px;display:flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid rgba(31,34,62,.08);border-radius:999px;color:#61647b;background:rgba(255,255,255,.78);box-shadow:0 7px 20px rgba(45,43,97,.08);font-size:.67rem;font-weight:850;transform:translateX(-50%);backdrop-filter:blur(8px)}.state-pill span{width:7px;height:7px;border-radius:50%;background:#a6a8b8}.state-pill.hover span{background:var(--accent);box-shadow:0 0 0 4px rgba(0,194,168,.13)}
.code-panel{min-width:0;padding:17px 20px 20px;border-top:1px solid #33364a;background:#191b2b;color:#e8e9f6}.code-heading{margin-bottom:12px}.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-panel pre{max-height:230px;margin:0;padding:15px;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 .76rem/1.65 ui-monospace,SFMono-Regular,Consolas,monospace}.token-selector{color:#72dfcf}.token-property{color:#a99df8}.token-value{color:#ffd480}
.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{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{margin:0 0 8px}.benefit-card p{margin:0;font-size:.87rem}.benefit-card code,.prose-content code,.faq code{padding:2px 5px;border-radius:5px;color:var(--primary-dark);background:#f0eeff;font-size:.88em}.steps{display:grid;gap:14px;padding:0;margin:28px 0 0;list-style:none}.steps li{display:flex;gap:15px;padding:18px;border:1px solid var(--border);border-radius:16px;background:#fff}.steps li>span{display:grid;place-items:center;flex:0 0 36px;height:36px;border-radius:11px;color:#fff;background:linear-gradient(135deg,var(--primary),#8b75f6);font-weight:900}.steps strong{display:block;margin:2px 0 4px}.steps p{margin:0;font-size:.86rem}.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-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;left:50%;bottom:28px;z-index:70;padding:12px 18px;border-radius:13px;color:#fff;background:#282640;font-size:.82rem;font-weight:800;opacity:0;transform:translate(-50%,14px);transition:.25s;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%,0)}@keyframes float{50%{transform:translateY(-12px) rotate(8deg)}}
@media(max-width:900px){.button-studio{grid-template-columns:1fr}.control-panel{border-right:0;border-bottom:1px solid var(--border)}.preview-workspace{grid-template-rows:auto minmax(400px,1fr) auto}.benefit-grid,.try-grid{grid-template-columns:1fr}}@media(max-width:600px){.generator-hero{padding:40px 0 54px}.control-panel{padding:15px}.preview-toolbar,.code-heading{align-items:flex-start}.preview-toolbar{padding:13px;flex-direction:column}.toolbar-actions{width:100%;justify-content:space-between}.preview-canvas{min-height:350px;padding:60px 15px}.code-panel{padding:15px}.code-heading{gap:10px}.copy-button{flex:0 0 auto}.shadow-grid{grid-template-columns:repeat(2,1fr)}.color-controls{grid-template-columns:1fr 1fr}.content-section{padding:54px 0}.preset{font-size:.6rem}}
@media(prefers-reduced-motion:reduce){.orb{animation:none}.generated-button,.button-arrow{transition-duration:.01ms!important}}