@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;font-family:'DM Sans',system-ui,sans-serif;background:#090b13;color:#eeeef5}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-width:0;background:radial-gradient(ellipse 70% 350px at 50% -60px,rgba(87,68,134,.25),transparent),#090b13}
button,input,select,textarea{font:inherit}button{cursor:pointer}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{outline:2px solid #d3b5ff;outline-offset:3px}
a{color:inherit}
.skip-link{position:absolute;top:-80px;left:10px;z-index:10;background:#ede0ff;color:#171021;padding:10px}
.skip-link:focus{top:10px}
.site-bar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:17px max(24px,calc((100vw - 1440px)/2));border-bottom:1px solid #29283b;background:rgba(11,11,21,.87)}
.brand{display:flex;gap:10px;align-items:center;text-decoration:none}
.brand-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:linear-gradient(140deg,#dad0ef,#8168ab);color:#191326;font:800 18px 'Space Grotesk',sans-serif;letter-spacing:-.13em}.brand-mark span{font-size:12px}
.brand strong,.brand small{display:block}.brand strong{font-size:15px}.brand small{font-size:10px;color:#9c97b4}
.site-bar nav,.site-bar nav a{display:flex;gap:21px}.site-bar nav a{text-decoration:none;color:#d0cbd9;font-size:12px;font-weight:700}
.site-bar nav a:hover{color:#fff}
main{max-width:1420px;margin:auto;padding:0 25px 75px}
.intro{max-width:960px;padding:62px 0 35px}
.eyebrow{margin:0;color:#bdb0dc;font-size:10px;font-weight:800;letter-spacing:.16em}
.intro h1{margin:12px 0 15px;font:700 clamp(34px,4.8vw,70px)/1.06 'Space Grotesk',sans-serif;letter-spacing:-.05em}
.intro h1 em{display:block;font-style:normal;color:#c4b1df}
.intro>p:not(.eyebrow){max-width:780px;margin:0;color:#b6b4c3;font-size:15px;line-height:1.7}
.intro .scope{margin-top:12px!important;font-size:12px!important;color:#bca8d7!important}
.editor-shell{display:grid;grid-template-columns:minmax(320px,430px) minmax(0,1fr);gap:18px;align-items:start}
.controls,.preview-area{border:1px solid #373148;border-radius:22px;background:linear-gradient(160deg,#181522,#0e1019);min-width:0}
.controls{padding:25px;display:grid;gap:13px}
.controls label{display:block;font-size:12px;color:#d9d5e6;font-weight:700;margin-bottom:7px}
.controls input:not([type="color"]):not([type="range"]),.controls select,.controls textarea{width:100%;max-width:100%;border:1px solid #514a62;border-radius:9px;background:#0b0d17;color:#f5f0ff;padding:10px 11px;font-size:13px}
.controls textarea{resize:vertical;min-height:64px}
.controls input[type=file]{display:block;width:100%;font-size:11px;color:#a9a0c0}
.controls input[type=file]::file-selector-button{border:1px solid #595069;background:#2c253a;color:#f6efff;border-radius:8px;padding:9px 12px;margin-right:10px;cursor:pointer}
.controls input[type=color]{width:48px;height:43px;background:none;border:1px solid #554a69;padding:4px;border-radius:10px}
.controls input[type=range]{width:100%;accent-color:#c1a6ed;min-height:27px}
.section-title{display:flex;align-items:center;gap:11px;margin:9px 0 0;padding-bottom:8px;border-bottom:1px solid #373043}
.section-title span{font-size:10px;color:#c2a8f0;letter-spacing:.15em}
.section-title h2{font:700 17px 'Space Grotesk',sans-serif;margin:0}
.product-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.product-picker button{border:1px solid #464054;background:#12121d;border-radius:10px;min-height:42px;color:#c8c1d5;font-size:11px;font-weight:700}
.product-picker button[aria-pressed=true]{background:#4b3867;border-color:#b594e4;color:#fff;box-shadow:0 0 0 1px rgba(174,134,225,.3) inset}
.form-line{min-width:0}
.color-line{display:flex;align-items:center;gap:12px}
.swatches{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.swatches button{width:26px;height:26px;background:var(--swatch);border:2px solid #605a6b;border-radius:50%}
.swatches button:hover{transform:scale(1.08)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:13px;min-width:0}
.split>div{min-width:0}
.help{margin:-1px 0 3px;color:#a29bb3;font-size:11px;line-height:1.55}
.buttons-two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.buttons-two button{border-radius:11px;min-height:44px;padding:9px 11px;font-size:11px;font-weight:800;letter-spacing:.005em}
button.primary{background:#d2c0ed;color:#18111e;border:1px solid #d2c0ed}
button.secondary{background:#3a3051;color:#f7f1ff;border:1px solid #78649d}
button.subtle{background:rgba(255,255,255,.035);color:#ddd5e9;border:1px solid #50465f}
button.danger{color:#fac9cc;border-color:#6d4857}
.preview-area{padding:25px;position:sticky;top:16px}
.preview-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}
.preview-heading h2{margin:6px 0 0;font:700 22px 'Space Grotesk',sans-serif}
.preview-chip{border:1px solid #77708e;border-radius:100px;padding:6px 10px;font-size:10px;color:#d5c7e7;white-space:nowrap}
.canvas-frame{background:radial-gradient(ellipse at center,#333644 0%,#1b1f2b 50%,#11141e 100%);border:1px solid #3b3c51;border-radius:17px;margin-top:18px;overflow:hidden;display:grid;place-items:center}
#designerCanvas{display:block;width:100%;max-height:min(72vh,700px);height:auto;aspect-ratio:9/10;touch-action:none;cursor:grab}
#designerCanvas:active{cursor:grabbing}
.preview-help{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-top:11px;flex-wrap:wrap}
.preview-help span{color:#a9a5b6;font-size:11px;line-height:1.45}
.preview-help button{font-size:11px;border-radius:9px;background:#241e30;border:1px solid #61546f;color:#dbcfed;padding:9px 11px}
.preview-help button[aria-pressed=true]{background:#503865;border-color:#b49bdc}
#designerStatus{min-height:32px;margin:15px 0;color:#c2acd9;line-height:1.55;font-size:12px}
.production-steps{padding:16px 18px;border-radius:13px;background:#121421;border:1px solid #39394b}
.production-steps h3{font:700 16px 'Space Grotesk',sans-serif;margin:0 0 8px}
.production-steps ol{padding-left:18px;margin:0;color:#b4afc5;line-height:1.75;font-size:11px}
.production-steps strong{color:#e3ddec}
.production-steps a{display:inline-block;margin-top:12px;font-size:12px;font-weight:800;color:#d3b8ff;text-underline-offset:4px}
footer{padding:28px max(25px,calc((100vw - 1420px)/2));border-top:1px solid #343045;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;color:#a4a0b3;font-size:11px}
footer nav{display:flex;gap:18px}
@media(max-width:1040px){.editor-shell{grid-template-columns:minmax(290px,385px) minmax(0,1fr)}.controls,.preview-area{padding:19px}}
@media(max-width:800px){.editor-shell{grid-template-columns:minmax(0,1fr)}.preview-area{position:static;order:-1}#designerCanvas{max-height:580px}.controls{grid-template-columns:1fr}.intro{padding:38px 0 25px}}
@media(max-width:520px){main{padding:0 12px 50px}.site-bar{padding:13px}.site-bar nav{gap:10px}.site-bar nav a{font-size:10px}.site-bar nav a:nth-child(2){display:none}.intro{padding:30px 4px 21px}.intro h1{font-size:36px}.intro>p:not(.eyebrow){font-size:13px}.controls,.preview-area{padding:14px;border-radius:14px}.product-picker{grid-template-columns:repeat(3,minmax(0,1fr))}.preview-heading h2{font-size:19px}.canvas-frame{margin-top:12px}.buttons-two button{font-size:10px;padding:9px 6px}.split{gap:8px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}