@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&display=swap');
:root{--ink:#18211d;--muted:#65716b;--paper:#f4f2e9;--panel:#fbfaf4;--line:#d8d8cc;--green:#25775e;--focus:#b36b25;--shadow:0 28px 70px rgba(37,62,50,.13)}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Outfit,sans-serif;line-height:1.55}.topbar{height:72px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 max(24px,calc((100vw - 1400px)/2));background:rgba(244,242,233,.92);position:sticky;top:0;z-index:30;backdrop-filter:blur(12px)}.brand{display:flex;gap:10px;align-items:center;color:var(--ink);text-decoration:none;font-weight:800}.brand-mark{display:grid;place-items:center;width:34px;height:34px;background:var(--green);color:#f9f8f2;border-radius:10px}.privacy{font-size:14px;color:var(--muted)}main{max-width:1400px;margin:auto;padding:64px 28px 100px}.intro{display:grid;grid-template-columns:1.25fr .75fr;align-items:end;gap:60px;margin-bottom:46px}.eyebrow{grid-column:1/-1;margin:0 0 -40px;color:var(--green);font-weight:700;text-transform:uppercase;letter-spacing:.13em;font-size:13px}.intro h1{font-size:clamp(42px,5vw,76px);line-height:.96;letter-spacing:-.055em;margin:0;max-width:850px}.intro>p:last-child{font-size:18px;color:var(--muted);max-width:48ch;margin:0}.studio{display:grid;grid-template-columns:390px minmax(0,1fr);border:1px solid var(--line);background:var(--panel);box-shadow:var(--shadow);min-height:720px}.controls{padding:28px;border-right:1px solid var(--line);background:#f9f8f1}.control-head,.preview-head,.preview-head>div{display:flex;align-items:center;gap:12px}.control-head>span,.preview-head>div>span{font:600 12px Outfit;border:1px solid var(--line);padding:5px 8px;border-radius:99px;color:var(--muted)}h2{font-size:20px;letter-spacing:-.02em;margin:0}.control-head p{margin:2px 0;color:var(--muted);font-size:13px}fieldset{border:0;padding:0;margin:26px 0}legend,.fields label{font-weight:650;font-size:13px;margin-bottom:9px}.segmented{display:grid;grid-template-columns:1fr 1fr;gap:8px}.segmented input,.swatches input[type=radio]{position:absolute;opacity:0}.segmented span{display:grid;place-items:center;min-height:44px;border:1px solid var(--line);border-radius:9px;cursor:pointer;background:var(--panel)}.segmented input:checked+span{background:var(--ink);border-color:var(--ink);color:#f8f7f0}.swatches{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.swatches span{display:block;width:34px;height:34px;border-radius:50%;background:var(--swatch);font-size:0;cursor:pointer;border:3px solid var(--panel);box-shadow:0 0 0 1px var(--line)}.swatches input:checked+span{box-shadow:0 0 0 3px var(--ink)}.custom{position:relative}.custom input{width:36px;height:36px;opacity:0;position:absolute}.custom span{background:conic-gradient(#c92d32,#d3a42c,#43a447,#087caa,#c92d32)}.fields{display:grid;gap:15px}.fields label{display:grid;gap:7px}.fields small{color:var(--muted);font-weight:400}.account-style{display:grid;gap:10px;padding:14px;border:1px solid var(--line);border-radius:9px;background:#fdfcf8}.range-head{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;font-weight:650}.range-head output{color:var(--muted);font-variant-numeric:tabular-nums;font-weight:500}.account-style input[type=range]{width:100%;accent-color:var(--green);min-height:28px}.account-color{margin:4px 0 0}.account-color legend{margin-bottom:8px}.small-swatches span{width:29px;height:29px}input[type=text],input[inputmode]{min-height:46px;border:1px solid var(--line);border-radius:9px;background:#fdfcf8;padding:0 13px;font:500 15px Outfit;color:var(--ink)}input:focus-visible,button:focus-visible,label:has(input:focus-visible) span{outline:3px solid color-mix(in srgb,var(--focus) 42%,transparent);outline-offset:2px}.toggle{display:flex;align-items:center;gap:10px;font-size:14px;cursor:pointer;margin:22px 0}.toggle input{position:absolute;opacity:0}.switch{width:42px;height:24px;background:#b8bdb8;border-radius:99px;position:relative}.switch:after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;background:#f9f8f2;left:3px;top:3px;transition:transform .22s cubic-bezier(.2,.8,.2,1)}.toggle input:checked+.switch{background:var(--green)}.toggle input:checked+.switch:after{transform:translateX(18px)}.actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}.actions button{min-height:48px;border-radius:9px;border:1px solid var(--ink);background:transparent;font:700 14px Outfit;cursor:pointer}.actions .primary{background:var(--green);border-color:var(--green);color:#f9f8f2}.actions button:hover{transform:translateY(-1px)}.status{font-size:13px;color:var(--green);min-height:20px}.preview{padding:28px 36px 36px;min-width:0}.preview-head{justify-content:space-between;margin-bottom:22px}.preview-head>span{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}.canvas-shell{background:#dfe1d9;padding:28px;display:grid;place-items:center;min-height:580px;overflow:hidden}canvas{width:100%;height:auto;display:block;box-shadow:0 18px 42px rgba(33,49,41,.16);background:#fbfaf5}.preview>p{color:var(--muted);font-size:13px;margin:14px 0 0}footer{border-top:1px solid var(--line);display:flex;justify-content:space-between;padding:24px max(28px,calc((100vw - 1400px)/2));font-size:13px;color:var(--muted)}
@media(max-width:960px){main{padding-top:44px}.intro{grid-template-columns:1fr;gap:18px}.eyebrow{margin:0}.studio{grid-template-columns:1fr}.controls{border-right:0;border-bottom:1px solid var(--line)}.preview{padding:24px}.canvas-shell{padding:14px;min-height:0}}@media(max-width:560px){.topbar{padding:0 16px}.privacy{display:none}main{padding:32px 16px 70px}.intro h1{font-size:44px}.controls,.preview{padding:20px}.actions{grid-template-columns:1fr}.canvas-shell{padding:8px}footer{padding:22px 16px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}