body{display:flex;min-height:100vh;flex-direction:column}main{flex:1}.generator-hero{padding:58px 0 76px}.intro{max-width:960px;margin:0 auto 32px;text-align:center}.intro h1{margin:18px auto 14px;font-size:clamp(2.6rem,7vw,4.75rem)}.crumbs{margin-bottom:18px;color:var(--muted);font-size:.82rem}.crumbs a{color:var(--primary);font-weight:750}.gradient-text{background:linear-gradient(100deg,#b95332,#e58a5f 50%,#8f4d36);-webkit-background-clip:text;background-clip:text;color:transparent}
.skeuo-studio{display:grid;grid-template-columns:minmax(330px,410px) minmax(0,1fr);max-width:1160px;margin:auto;border:1px solid #d7d3ca;border-radius:30px;background:#f8f5ef;box-shadow:0 28px 80px rgba(66,47,36,.18);overflow:hidden}.control-panel{padding:22px;border-right:1px solid #d7d3ca;background:rgba(255,255,255,.96)}.panel-heading,.panel-heading>div,.preview-toolbar,.preview-toolbar>div,.code-heading,.code-heading>div,.code-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:1px solid #e1d2c9;border-radius:9px;color:#a24d30;background:#fbede5;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:#a24d30;border-color:#d8a895}
.element-picker{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:18px 0 12px}.element-option{display:grid;gap:5px;min-height:58px;padding:7px 4px;border:1px solid var(--border);border-radius:12px;color:var(--muted);background:#fff;font-size:.67rem;font-weight:800}.element-option span{color:#9c634d;font:900 .68rem ui-monospace,Consolas,monospace}.element-option:hover,.element-option.active{color:#8d432b;border-color:#d6a38f;background:#fff4ed;box-shadow:inset 0 1px #fff}
.presets{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:12px}.preset{display:grid;gap:7px;min-width:0;padding:8px 4px;border:1px solid var(--border);border-radius:12px;color:var(--muted);background:#fff;font-size:.65rem;font-weight:800;transition:.2s}.preset:hover,.preset.active{color:#8d432b;border-color:#d6a38f;background:#fff8f4}.preset-swatch{display:block;width:100%;height:29px;border-radius:8px}.preset-swatch.clay{background:linear-gradient(145deg,#f2b18f,#c97855);box-shadow:inset 2px 2px 3px #ffd0b9,inset -2px -2px 3px #8e452e,0 4px 5px #b38f7f}.preset-swatch.ivory{background:linear-gradient(145deg,#fffdf3,#d7d0b5);box-shadow:inset 2px 2px 3px #fff,inset -2px -2px 3px #aaa082,0 4px 5px #c1bba8}.preset-swatch.retro{background:linear-gradient(145deg,#c4e1ca,#76967c);box-shadow:inset 2px 2px 3px #e8f7eb,inset -2px -2px 3px #4c6953,0 4px 5px #9aa89a}.preset-swatch.midnight{background:linear-gradient(145deg,#474b59,#1f222a);box-shadow:inset 2px 2px 3px #686d7d,inset -2px -2px 3px #0d0f14,0 4px 5px #8b8d95}
.controls{display:grid;gap:10px}.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:#fff7f1}.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,.range-field,.color-field{display:grid;gap:6px}.text-field>span,.range-field>span,.color-field>span:first-child{color:var(--muted);font-size:.7rem;font-weight:800}.text-field input{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{border-color:#bd6a4d;box-shadow:0 0 0 3px rgba(189,106,77,.12)}.split-controls,.color-controls{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:#b85b3a}.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{width:34px;height:19px;accent-color:#b85b3a}.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}
.preview-workspace{display:grid;grid-template-rows:auto minmax(500px,1fr) auto;min-width:0}.preview-toolbar{min-height:75px;padding:14px 19px;border-bottom:1px solid #d7d3ca;background:#fdfbf7}.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}.background-picker{display:flex;gap:5px;padding:5px;border:1px solid #d5d0c7;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 #c9c4bb}.background-option.active{box-shadow:0 0 0 2px #b85b3a}.background-option[data-background=warm]{background:#d7c7b0}.background-option[data-background=dark]{background:#24252b}.background-option[data-background=grid]{background:repeating-linear-gradient(45deg,#f3efe6 0 4px,#bdb7ac 4px 8px)}
.preview-canvas{position:relative;display:grid;place-items:center;min-height:500px;padding:80px 26px;isolation:isolate;overflow:hidden;transition:background .3s}.preview-canvas.warm{background:radial-gradient(circle at 68% 20%,rgba(255,249,221,.8),transparent 28%),linear-gradient(145deg,#ddd2bf,#bbaa91)}.preview-canvas.dark{background:radial-gradient(circle at 68% 20%,#555461,transparent 30%),linear-gradient(145deg,#34353d,#17181d)}.preview-canvas.grid{background-color:#d6d0c3;background-image:linear-gradient(rgba(74,65,53,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(74,65,53,.08) 1px,transparent 1px);background-size:24px 24px}.preview-canvas:before{content:"";position:absolute;z-index:-1;left:9%;right:9%;bottom:10%;height:44%;border:1px solid rgba(255,255,255,.24);border-radius:30px;background:linear-gradient(155deg,rgba(255,255,255,.14),rgba(67,49,35,.07));box-shadow:inset 0 1px rgba(255,255,255,.35),0 28px 60px rgba(59,43,30,.19);transform:perspective(500px) rotateX(7deg)}.workbench-mark{position:absolute;top:21px;left:24px;right:24px;display:flex;justify-content:space-between;color:rgba(67,53,43,.55);font:800 .62rem/1.2 ui-monospace,Consolas,monospace;letter-spacing:.16em}.dark .workbench-mark{color:rgba(255,255,255,.45)}.ambient{position:absolute;z-index:-1;border-radius:50%;filter:blur(3px);opacity:.5}.ambient-one{top:22%;right:10%;width:56px;height:56px;background:radial-gradient(circle at 30% 30%,#fff4d6,#b87b5c)}.ambient-two{bottom:18%;left:12%;width:28px;height:28px;background:radial-gradient(circle at 30% 30%,#f5ddbd,#755a47)}.material-stage{position:relative;display:grid;place-items:center;width:min(88%,480px);min-height:270px;padding:38px;border:1px solid rgba(79,58,44,.15);border-radius:34px;background:linear-gradient(145deg,rgba(255,255,255,.21),rgba(84,60,42,.08));box-shadow:inset 1px 1px rgba(255,255,255,.36),inset -1px -1px rgba(79,58,44,.12),0 28px 45px rgba(61,44,32,.15);backdrop-filter:blur(3px)}.dark .material-stage{border-color:rgba(255,255,255,.1);background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(0,0,0,.08))}
.skeuo-element{--surface:#c97855;--accent:#f2b18f;--text:#4b2116;--shadow:#71331f;--depth:12px;--blur:18px;--bevel:6px;--radius:18px;--shine:.58;position:relative;max-width:100%;border:1px solid color-mix(in srgb,var(--shadow) 54%,transparent);border-radius:var(--radius);color:var(--text);background:linear-gradient(145deg,color-mix(in srgb,var(--accent) calc(var(--shine)*100%),var(--surface)),var(--surface) 52%,color-mix(in srgb,var(--surface) 78%,var(--shadow)));box-shadow:inset var(--bevel) var(--bevel) calc(var(--bevel)*1.4) color-mix(in srgb,#fff 62%,transparent),inset calc(var(--bevel)*-1) calc(var(--bevel)*-1) calc(var(--bevel)*1.35) color-mix(in srgb,var(--shadow) 64%,transparent),0 var(--depth) var(--blur) color-mix(in srgb,var(--shadow) 58%,transparent),0 calc(var(--depth)*.55) 0 color-mix(in srgb,var(--surface) 60%,var(--shadow));text-shadow:0 1px rgba(255,255,255,.35);transition:transform .16s ease,box-shadow .16s ease;outline-offset:7px}.skeuo-element:focus-visible{outline:3px solid #7d5cff}.skeuo-element.grain:after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:.16;background-image:repeating-linear-gradient(115deg,rgba(255,255,255,.17) 0 1px,transparent 1px 4px)}.skeuo-element.no-rim{border-color:transparent}.skeuo-button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-width:230px;min-height:78px;padding:18px 26px;font:900 .82rem/1.1 ui-monospace,Consolas,monospace;letter-spacing:.12em;cursor:pointer}.indicator-light{width:9px;height:9px;border:1px solid color-mix(in srgb,var(--shadow) 60%,transparent);border-radius:50%;background:var(--accent);box-shadow:inset 0 1px 2px #fff,0 0 11px color-mix(in srgb,var(--accent) 75%,transparent)}.skeuo-button:active,.skeuo-button.is-pressed{transform:translateY(calc(var(--depth)*.7));box-shadow:inset calc(var(--bevel)*-1) calc(var(--bevel)*-1) calc(var(--bevel)*1.2) rgba(255,255,255,.38),inset var(--bevel) var(--bevel) calc(var(--bevel)*1.5) color-mix(in srgb,var(--shadow) 58%,transparent),0 calc(var(--depth)*.25) calc(var(--blur)*.55) color-mix(in srgb,var(--shadow) 46%,transparent)}
.skeuo-card{display:grid;align-content:center;gap:8px;width:min(100%,330px);min-height:190px;padding:28px}.skeuo-card .card-kicker{font:900 .62rem ui-monospace,Consolas,monospace;letter-spacing:.16em;opacity:.7}.skeuo-card .element-label{font-size:1.35rem;font-weight:900}.skeuo-card p{margin:0;opacity:.72;font-size:.78rem}.skeuo-toggle{display:flex;align-items:center;gap:14px;padding:16px 18px;cursor:pointer;user-select:none}.skeuo-toggle input{position:absolute;width:1px;height:1px;opacity:0}.toggle-track{position:relative;width:72px;height:38px;border:1px solid color-mix(in srgb,var(--shadow) 55%,transparent);border-radius:999px;background:color-mix(in srgb,var(--surface) 70%,var(--shadow));box-shadow:inset 4px 4px 8px color-mix(in srgb,var(--shadow) 52%,transparent),inset -3px -3px 6px rgba(255,255,255,.38)}.toggle-knob{position:absolute;top:4px;left:5px;width:28px;height:28px;border-radius:50%;background:linear-gradient(145deg,var(--accent),var(--surface));box-shadow:inset 2px 2px 3px rgba(255,255,255,.65),inset -2px -2px 3px color-mix(in srgb,var(--shadow) 48%,transparent),0 3px 5px color-mix(in srgb,var(--shadow) 48%,transparent);transition:left .2s}.skeuo-toggle input:checked+.toggle-track .toggle-knob{left:37px}.skeuo-toggle input:focus-visible+.toggle-track{outline:3px solid #7d5cff;outline-offset:5px}.skeuo-toggle .element-label{font-size:.78rem;font-weight:900;letter-spacing:.08em}.skeuo-input{display:flex;align-items:center;gap:10px;width:min(100%,360px);padding:10px 16px;box-shadow:inset var(--bevel) var(--bevel) calc(var(--bevel)*1.6) color-mix(in srgb,var(--shadow) 46%,transparent),inset calc(var(--bevel)*-1) calc(var(--bevel)*-1) calc(var(--bevel)*1.5) rgba(255,255,255,.5),0 calc(var(--depth)*.5) var(--blur) color-mix(in srgb,var(--shadow) 38%,transparent)}.skeuo-input span{font-weight:900;opacity:.62}.skeuo-input input{min-width:0;flex:1;padding:8px 2px;border:0;outline:0;color:var(--text);background:transparent;font:700 .86rem inherit}.skeuo-input input::placeholder{color:color-mix(in srgb,var(--text) 56%,transparent)}
.material-readout{position:absolute;bottom:21px;left:50%;display:flex;align-items:center;gap:8px;padding:7px 11px;border:1px solid rgba(65,47,34,.12);border-radius:999px;color:rgba(69,52,41,.75);background:rgba(255,255,255,.48);font:800 .59rem ui-monospace,Consolas,monospace;letter-spacing:.11em;transform:translateX(-50%);white-space:nowrap}.dark .material-readout{color:rgba(255,255,255,.72);border-color:rgba(255,255,255,.12);background:rgba(0,0,0,.18)}.readout-dot{width:7px;height:7px;border-radius:50%;background:#78a664;box-shadow:0 0 8px #a9df8e}
.code-panel{border-top:1px solid #d7d3ca;background:#1f2026}.code-heading{min-height:69px;padding:12px 16px;color:#f7f3eb;background:#292a31}.code-heading small{color:#abaeb9}.code-actions{gap:9px}.code-tabs{display:flex;padding:3px;border:1px solid #454750;border-radius:9px}.code-tab{min-height:30px;padding:0 9px;border:0;border-radius:6px;color:#aeb0ba;background:transparent;font-size:.68rem;font-weight:850}.code-tab.active{color:#fff;background:#454750}.copy-button{min-height:36px;padding:0 13px;border:1px solid #ba684b;border-radius:9px;color:#fff;background:#a95134;font-size:.72rem;font-weight:850}.copy-button:hover{background:#bd6040}.code-panel pre{min-height:155px;max-height:260px;margin:0;padding:18px;overflow:auto;color:#efdacb;background:#1f2026;font:600 .72rem/1.65 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre}.code-panel code{font:inherit}
.content-section{padding:70px 0}.content-section.alt{background:#f7f4ef}.content{max-width:980px}.content>h2{margin-bottom:12px;font-size:clamp(1.8rem,4vw,2.55rem)}.content>p{max-width:760px;color:var(--muted)}.benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}.benefit-card{padding:24px;border:1px solid var(--border);border-radius:18px;background:#fff}.benefit-card>span{display:grid;place-items:center;width:40px;height:40px;margin-bottom:16px;border-radius:12px;color:#9c4d32;background:#fff0e8;font-weight:900}.benefit-card h3{margin:0 0 8px}.benefit-card p{margin:0;color:var(--muted);font-size:.88rem}.prose-content{max-width:850px}.steps{display:grid;gap:14px;padding:0;list-style:none}.steps li{display:flex;gap:14px;padding:17px;border:1px solid var(--border);border-radius:15px}.steps li>span{display:grid;place-items:center;flex:0 0 auto;width:34px;height:34px;border-radius:10px;color:#9c4d32;background:#fff0e8;font-weight:900}.steps strong{display:block;margin:4px 0}.steps p{margin:4px 0 0;color:var(--muted);font-size:.88rem}.faq{display:grid;gap:11px;margin-top:25px}.faq details{padding:16px 18px;border:1px solid var(--border);border-radius:14px;background:#fff}.faq summary{cursor:pointer;font-weight:850}.faq p{margin:12px 0 2px;color:var(--muted)}.try-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:25px}.try-card{display:flex;align-items:center;gap:13px;padding:17px;border:1px solid var(--border);border-radius:15px;color:var(--text);background:#fff;transition:.2s}.try-card:hover{border-color:#d6a38f;transform:translateY(-2px);box-shadow:0 12px 28px rgba(85,53,39,.1)}.try-card>span:last-child,.try-card strong,.try-card span span{display:block}.try-card span span{margin-top:3px;color:var(--muted);font-size:.73rem}.try-icon{display:grid;place-items:center;flex:0 0 auto;width:42px;height:42px;border-radius:12px;color:#9c4d32;background:#fff0e8;font:900 .7rem ui-monospace,Consolas,monospace}
@media(max-width:980px){.skeuo-studio{grid-template-columns:1fr;max-width:760px}.control-panel{border-right:0;border-bottom:1px solid #d7d3ca}.preview-workspace{grid-template-rows:auto minmax(460px,1fr) auto}.preview-canvas{min-height:460px}}@media(max-width:640px){.generator-hero{padding:38px 0 54px}.intro{text-align:left}.intro h1{font-size:clamp(2.35rem,13vw,3.6rem)}.skeuo-studio{border-radius:21px}.control-panel{padding:15px}.element-picker,.presets{gap:5px}.element-option{font-size:.6rem}.preset{font-size:.58rem}.split-controls,.color-controls{grid-template-columns:1fr 1fr}.preview-toolbar{align-items:flex-start}.preview-toolbar small{max-width:165px}.preview-canvas{min-height:410px;padding:65px 12px}.material-stage{min-height:245px;padding:24px 14px}.skeuo-button{min-width:0;width:86%;font-size:.72rem}.code-heading{align-items:flex-start;flex-direction:column}.code-actions{justify-content:space-between;width:100%}.benefit-grid,.try-grid{grid-template-columns:1fr}.content-section{padding:52px 0}}@media(prefers-reduced-motion:reduce){.skeuo-element,.toggle-knob,.try-card{transition:none}}