.qm{margin:24px 0 48px}.qm-layout{display:grid;grid-template-columns:minmax(280px,.9fr) minmax(0,1.2fr);gap:28px;align-items:start}.qm-preview{grid-column:2;grid-row:1;position:sticky;top:150px;min-width:0}.qm-editor{grid-column:1;grid-row:1;min-width:0}.qm-preview-head{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--muted);margin-bottom:10px}.qm-preview-head span:first-child{font-weight:700}.qm canvas,.qm-output,.qm #qm-output{display:block;width:100%;height:auto;border:1px solid var(--line-2);border-radius:4px}.qm canvas{box-shadow:0 8px 30px #3028380c}.qm fieldset{min-width:0;margin:0 0 22px;padding:18px;border:1px solid var(--line-2);border-radius:12px}.qm legend{padding:0 8px;font-size:17px;font-weight:700}.qm label{display:block;font-size:13px;font-weight:700;margin:0 0 6px}.qm input[type=text],.qm select{width:100%;min-width:0;padding:10px 11px;border:1px solid #b9b3bf;border-radius:7px;background:#fff;color:#302838;font:inherit;font-size:16px}.qm input[aria-invalid=true]{border-color:#b3261e;outline:1px solid #b3261e}.qm-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:16px 0 20px}.qm-note{font-size:12px;color:var(--muted);line-height:1.8;margin:8px 0 0}.qm-actions,.qm-presets,.qm-example{display:flex;flex-wrap:wrap;gap:8px}.qm-actions{margin-top:16px}.qm button{min-height:44px;padding:9px 14px;border:1px solid #c5b6d0;border-radius:8px;background:white;color:#493555;font:inherit;font-size:13px;font-weight:700;cursor:pointer}.qm button:hover{background:var(--brand-soft)}.qm button:disabled{opacity:.5;cursor:default}.qm button.qm-primary{background:var(--brand);color:white;border-color:var(--brand);flex:1}.qm button.qm-primary:hover{background:var(--brand-dark)}.qm-presets{margin-bottom:18px}.qm-presets button{flex:1;padding:8px;white-space:nowrap}.qm-presets [aria-pressed=true]{outline:2px solid var(--brand);outline-offset:1px}.qm-example{flex-wrap:nowrap}.qm-example select{flex:1}.qm-example button{flex-shrink:0}.qm-colors{display:grid;gap:14px}.qm-color{display:flex;gap:10px;align-items:center}.qm input[type=color]{width:48px;height:44px;padding:3px;border:1px solid #b9b3bf;border-radius:7px;background:white;flex-shrink:0;cursor:pointer}.qm .qm-color input[type=text]{font-family:ui-monospace,monospace}.qm-status{font-size:13px;min-height:1.8em;margin:8px 0}.qm-article{max-width:760px;margin:44px auto 0;line-height:1.9}.qm-article h2{font-size:21px;margin:32px 0 14px}.qm-article details{border-bottom:1px solid var(--line-2);padding:15px 0}.qm-article summary{font-weight:700;cursor:pointer}.qm-article a{text-decoration:underline;text-underline-offset:3px;color:var(--brand)}.qm-article ol,.qm-article ul{padding-left:1.5em}.qm-article li{margin:8px 0}@media(max-width:760px){.qm-layout{grid-template-columns:minmax(0,1fr);gap:22px}.qm-preview{grid-column:1;grid-row:1;position:static}.qm-editor{grid-column:1;grid-row:2}.qm fieldset{padding:14px}.qm-preview-head{font-size:11px}}