:root{--ink:#1f2925;--muted:#6b756f;--line:#d9dfdb;--surface:#fff;--soft:#f4f6f4;--primary:#355c4d;--secondary:#d99b5e;--accent:#dde8dd;--base:#f7f4ee;--radius:20px;--shadow:0 18px 48px rgba(26,42,34,.08)}*{box-sizing:border-box}html{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:#fbfcfb}body{margin:0}a{color:inherit;text-decoration:none}button,input,select{font:inherit}.site-header{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,4vw,64px);border-bottom:1px solid var(--line);background:rgba(255,255,255,.9);position:sticky;top:0;z-index:20;backdrop-filter:blur(12px)}.brand{font-weight:800;letter-spacing:-.03em}.site-nav{display:flex;gap:24px;font-size:.94rem}.site-nav a{color:var(--muted)}.site-nav a.active,.site-nav a:hover{color:var(--ink)}.home-main{min-height:calc(100vh - 72px);display:grid;place-items:center;padding:clamp(40px,8vw,100px) 24px}.hero-simple{max-width:850px;text-align:center}.eyebrow,.mini-label{font-size:.76rem;text-transform:uppercase;letter-spacing:.13em;font-weight:800;color:var(--primary)}.hero h1,.page-heading h1{letter-spacing:-.05em;line-height:.98;margin:.18em 0}.hero h1{font-size:clamp(3rem,8vw,6.2rem)}.hero-copy,.page-heading p{color:var(--muted);font-size:clamp(1.05rem,2vw,1.25rem);line-height:1.7}.hero-copy{max-width:700px;margin:24px auto}.hero-actions{margin-top:32px}.button{display:inline-flex;justify-content:center;align-items:center;gap:8px;border-radius:999px;padding:13px 20px;border:1px solid transparent;font-weight:750;cursor:pointer}.button-primary{background:var(--primary);color:white}.button-secondary{background:white;border-color:var(--line);color:var(--ink)}.button.small{padding:8px 13px;font-size:.86rem}.app-shell{max-width:1440px;margin:0 auto;padding:28px clamp(18px,3vw,48px) 70px}.progress-wrap{padding:4px 0 30px}.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(5,1fr);position:relative}.steps:before{content:"";position:absolute;left:6%;right:6%;top:16px;height:2px;background:var(--line);z-index:0}.step{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:7px;color:#8c9590;font-size:.82rem;text-align:center}.step span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#fff;border:2px solid var(--line);font-weight:800}.step strong{font-size:.94rem}.step.is-current{color:var(--ink)}.step.is-current span{background:var(--primary);color:#fff;border-color:var(--primary)}.step.is-current strong{font-size:1rem}.step.is-complete span{background:var(--accent);border-color:var(--accent);color:var(--primary)}.compact-heading{max-width:760px;margin-bottom:30px}.compact-heading h1{font-size:clamp(2.4rem,5vw,4.5rem)}.studio-grid{display:grid;grid-template-columns:minmax(320px,.72fr) minmax(0,1.28fr);gap:28px;align-items:start}.panel{background:white;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.controls-panel{padding:24px;position:sticky;top:94px}.section-title-row,.preview-label-row,.panel-actions,.split{display:flex;align-items:center;justify-content:space-between;gap:16px}.section-title-row h2{margin:3px 0 0}.field-grid{display:grid;gap:16px;margin:24px 0}.two-col{grid-template-columns:1fr 1fr}.field{display:grid;gap:8px;font-size:.9rem;font-weight:700}.field input[type=text],.field select,select{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:white}.color-field{display:grid;grid-template-columns:48px 1fr;gap:8px}.color-field input[type=color]{width:48px;height:44px;border:0;background:transparent;padding:0;cursor:pointer}.suggestion-box{border:1px solid var(--line);border-radius:16px;padding:16px;margin:18px 0}.suggestion-row{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid #edf0ee;font-size:.9rem}.suggestion-row:last-child{border-bottom:0}.resource-note{margin:18px 0;color:var(--muted);font-size:.9rem}.resource-note summary{color:var(--ink);font-weight:700;cursor:pointer}.preview-column{min-width:0}.preview-label-row{margin-bottom:10px}.status-pill{font-size:.76rem;background:var(--accent);padding:6px 9px;border-radius:999px;color:var(--primary);font-weight:800}.website-preview{--preview-primary:var(--primary);--preview-secondary:var(--secondary);--preview-accent:var(--accent);--preview-base:var(--base);background:white;border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:var(--shadow);width:100%;font-family:Arial,sans-serif}.sample-nav{display:flex;justify-content:space-between;align-items:center;padding:18px clamp(18px,3vw,34px);border-bottom:1px solid #e7ebe8}.sample-logo{font-weight:900;color:var(--preview-primary)}.sample-menu{display:flex;gap:18px;color:#68726c;font-size:.82rem}.sample-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;padding:clamp(34px,6vw,72px);background:var(--preview-base)}.sample-hero h2,.sample-section h3,.sample-cta h3,.sample-split h3,.type-preview h2{font-family:Georgia,serif;color:var(--preview-primary);letter-spacing:-.045em}.sample-hero h2{font-size:clamp(2rem,4vw,4.1rem);line-height:1.02;margin:.2em 0}.sample-hero p,.sample-section p,.sample-cards p,.sample-split p,.type-preview p{color:#616c66;line-height:1.65}.sample-kicker{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;font-weight:800;color:var(--preview-secondary)!important}.sample-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}.sample-btn,.demo-button{border-radius:999px;padding:11px 16px;font-weight:800;border:1px solid transparent}.sample-btn-primary,.demo-button.primary{background:var(--preview-primary);color:#fff}.sample-btn-secondary,.demo-button.secondary{background:var(--preview-secondary);color:#fff}.demo-button.outline{background:transparent;color:var(--preview-primary);border-color:var(--preview-primary)}.sample-art{position:relative;min-height:280px}.art-card{position:absolute;border-radius:28px}.art-one{width:72%;height:76%;right:0;top:0;background:var(--preview-accent)}.art-two{width:58%;height:62%;left:0;bottom:0;background:var(--preview-secondary);opacity:.75}.sample-section{padding:clamp(34px,6vw,72px)}.sample-section h3,.sample-cta h3,.sample-split h3{font-size:clamp(1.8rem,3vw,3rem);margin:.25em 0}.sample-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:26px}.sample-cards article{border:1px solid #dfe5e1;border-radius:18px;padding:20px}.sample-cards span{font-size:.72rem;color:var(--preview-secondary);font-weight:900}.sample-cards h4{margin:14px 0 8px}.sample-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:clamp(28px,5vw,56px);background:var(--preview-accent)}.sample-split{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:clamp(34px,6vw,72px);background:#fff}.type-preview{padding:clamp(36px,6vw,72px);min-height:520px}.type-preview h2{font-size:clamp(2.3rem,5vw,4.5rem);max-width:700px}.type-scale-list,.token-list{display:grid;gap:0;border:1px solid var(--line);border-radius:16px;overflow:hidden;margin:22px 0}.type-scale-list div,.token-list div{display:flex;justify-content:space-between;gap:18px;padding:13px 15px;border-bottom:1px solid var(--line);font-size:.88rem}.type-scale-list div:last-child,.token-list div:last-child{border-bottom:0}.builder-grid{display:grid;grid-template-columns:250px minmax(0,1fr);gap:22px}.builder-sidebar{padding:10px;align-self:start;position:sticky;top:94px}.system-tab{display:block;width:100%;text-align:left;border:0;background:transparent;padding:14px;border-radius:12px;font-weight:750;color:var(--muted);cursor:pointer}.system-tab.active{background:var(--soft);color:var(--ink)}.builder-main{padding:26px}.tab-panel{display:none}.tab-panel.active{display:block}.preset-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:24px 0}.preset-card{padding:20px;border:1px solid var(--line);border-radius:16px}.preset-card p{color:var(--muted);line-height:1.55}.section-demo{padding:28px;border-radius:16px;margin:12px 0}.section-demo.light{border:1px solid var(--line);background:#fff}.section-demo.tint{background:var(--accent)}.section-demo.dark{background:var(--primary);color:white}.preview-toolbar{padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px}.device-buttons{display:flex;gap:8px}.device-btn{border:1px solid var(--line);background:white;border-radius:999px;padding:8px 12px;cursor:pointer}.device-btn.active{background:var(--primary);color:white;border-color:var(--primary)}.full-preview-shell{display:flex;justify-content:center}.full-preview{transition:max-width .25s ease;width:100%;max-width:100%}.bottom-actions{margin-top:22px}.export-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.export-card{padding:28px}.export-card p{color:var(--muted);line-height:1.6}.export-card .button{margin-top:16px}@media(max-width:920px){.studio-grid,.builder-grid{grid-template-columns:1fr}.controls-panel,.builder-sidebar{position:static}.builder-sidebar{display:flex;overflow:auto}.system-tab{min-width:max-content}.sample-hero,.sample-split{grid-template-columns:1fr}.sample-art{min-height:210px}.sample-cards,.preset-grid{grid-template-columns:1fr 1fr}.export-grid{grid-template-columns:1fr}}@media(max-width:640px){.site-header{padding:0 16px}.site-nav{display:none}.app-shell{padding-left:12px;padding-right:12px}.progress-wrap{overflow-x:auto;padding-bottom:24px}.steps{min-width:560px}.step strong{font-size:.9rem}.step.is-current strong{font-size:1rem}.two-col{grid-template-columns:1fr}.sample-menu{display:none}.preview-column{margin-left:-2px;margin-right:-2px}.website-preview{width:calc(100% + 4px);margin-left:-2px;border-radius:18px}.sample-hero,.sample-section,.sample-split,.sample-cta,.type-preview{padding-left:22px;padding-right:22px}.sample-cards,.preset-grid{grid-template-columns:1fr}.sample-cta{align-items:flex-start;flex-direction:column}.sample-actions{flex-direction:column;align-items:stretch}.sample-actions button{width:100%}.preview-toolbar{align-items:flex-start;flex-direction:column}.device-buttons{width:100%;overflow:auto}.export-card{padding:22px}.panel-actions.split{align-items:stretch;flex-direction:column-reverse}.panel-actions.split .button{width:100%}}