:root{font-family:system-ui,sans-serif;color:#24364b;background:#fcfbf8}*{box-sizing:border-box}body{margin:0}body>header{display:flex;justify-content:space-between;gap:16px;max-width:1680px;margin:auto;padding:25px 32px;font-size:13px}a{color:inherit}main{display:grid;grid-template-columns:340px minmax(0,1fr);gap:36px;max-width:1680px;margin:auto;padding:10px 32px 40px}h1{font-size:29px;letter-spacing:-1px;margin:10px 0}h2{font-size:15px;margin:26px 0 12px}p{font-size:13px;line-height:1.85;color:#647184}button,input{font:inherit}button{cursor:pointer;border:1px solid #dbe1e8;background:#fcfbf8;border-radius:6px;padding:9px 12px;font-size:12px}button:disabled{opacity:.5;cursor:default}:focus-visible{outline:2px solid #425d79;outline-offset:4px}#presets{display:grid;grid-template-columns:1fr 1fr;gap:9px}#presets button{display:flex;align-items:center;gap:10px;text-align:left}#presets i{display:block;width:20px;height:20px;border-radius:50%;flex:none}#presets button[aria-pressed=true]{border-color:#24364b;box-shadow:inset 0 0 0 1px #24364b}.color-row{display:grid;grid-template-columns:1fr 42px 96px;align-items:center;gap:10px;margin:14px 0}.color-row label{font-size:13px}.color-row input[type=color]{width:42px;height:36px;padding:2px;border:1px solid #dbe1e8;background:transparent;border-radius:5px;cursor:pointer}.color-row input[type=text]{min-width:0;width:96px;border:1px solid #dbe1e8;border-radius:5px;padding:8px;font:12px monospace;background:#fff}.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}button[type=submit]{background:#24364b;color:#fff}.small{font-size:11px}#status{min-height:2em}#status[data-error=true]{color:#ab3826}.preview-panel{min-width:0}.preview-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 0 16px}.preview-toolbar h2{margin:0}.preview-toolbar button[aria-pressed=true]{background:#24364b;color:#fff}.preview-stage{padding:16px;background:#e7edf4;border-radius:10px;overflow:auto;min-height:780px}.preview-stage iframe{display:block;width:100%;height:780px;border:0;background:#fcfbf8;margin:auto;max-width:100%}.preview-stage iframe.mobile{width:390px}@media(max-width:950px){main{grid-template-columns:1fr;padding:10px 16px 30px}.editor{max-width:540px}body>header{padding:20px 16px}.preview-stage{padding:8px}.preview-toolbar h2{font-size:13px}.preview-toolbar button{padding:8px}.preview-stage iframe{height:740px}}