/* ImageMunch editor shell — ported from mockups/image-editor-design.html */
.image-editor-page { padding: clamp(24px, 4vw, 40px) 20px 60px; }

.editor-page-intro { display: flex; justify-content: space-between; gap: 32px; align-items: flex-end; margin-bottom: 28px; }
.editor-page-intro h1 { margin: 0 0 12px; font-size: clamp(28px, 4vw, 46px); letter-spacing: -.045em; line-height: 1.05; }
.editor-page-intro p:not(.editor-eyebrow) { max-width: 760px; margin: 0; color: var(--editor-muted); font-size: 15px; }
.editor-eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; color: var(--accent-text); font-size: 12px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.editor-status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--editor-accent-bright); box-shadow: 0 0 0 4px rgba(25, 198, 177, .12); }
.editor-intro-actions { display: flex; align-items: center; gap: 14px; padding-bottom: 3px; white-space: nowrap; }
.editor-privacy-badge, .editor-help-link { display: inline-flex; align-items: center; gap: 7px; color: var(--editor-muted); font-size: 12px; font-weight: 700; }
.editor-privacy-badge { padding: 9px 12px; border: 1px solid var(--editor-line); border-radius: 999px; background: var(--badge-bg); }
.editor-privacy-badge svg { width: 16px; height: 16px; fill: none; stroke: var(--editor-accent); stroke-width: 1.8; }
.editor-help-link { color: var(--accent-text); text-decoration: none; }

.editor-app { overflow: hidden; border: 1px solid var(--line-strong); border-radius: 18px; background: var(--editor-panel); box-shadow: var(--editor-shadow); }
.editor-app.is-fullscreen { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; width: 100vw; height: 100vh; height: 100dvh; max-width: none; border: 0; border-radius: 0; box-shadow: none; overflow: hidden; overscroll-behavior: contain; }
.editor-app.is-fullscreen .editor-toolbar { position: relative; top: auto; flex: 0 0 auto; }
.editor-app.is-fullscreen .editor-workspace { flex: 1 1 auto; min-height: 0; overflow: auto; }
.editor-app.is-fullscreen .editor-stage { min-height: 0; }
.editor-app.is-fullscreen .editor-stage-canvas { min-height: 0; }
.editor-app.is-fullscreen .editor-strip-panel, .editor-app.is-fullscreen .editor-status-bar { flex: 0 0 auto; }
body.editor-fullscreen-open { overflow: hidden; }
.editor-toolbar { display: flex; justify-content: space-between; gap: 20px; align-items: center; min-height: 66px; padding: 0 18px 0 20px; border-bottom: 1px solid #24364d; background: var(--editor-surface); color: #f4f8fc; }

/* ---- sticky actions ----
   The shell is ~900px tall and Export/Undo live only in its toolbar, so working
   at the bottom means scrolling the way out of sight. "clip" instead of "hidden"
   keeps the rounded corners without turning the shell into a scroll container,
   which is exactly what would freeze a sticky child in place. Where "clip" is
   missing the rule stays inert rather than mispositioning anything. */
/* Fallback only: image-editor.js replaces this with the measured header height. */
:root { --editor-header-h: 56px; }
@media (min-width: 721px) {
    @supports (overflow: clip) {
        .editor-app { overflow: clip; }
    }
    .editor-toolbar { position: sticky; top: var(--editor-header-h); z-index: 6; }
}

.editor-toolbar-brand, .editor-toolbar-actions { display: flex; align-items: center; gap: 11px; }
.editor-toolbar-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: rgba(25, 198, 177, .15); color: var(--editor-accent-bright); }
.editor-toolbar-mark svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.editor-toolbar-brand strong { font-size: 14px; }
.editor-toolbar-divider { width: 1px; height: 22px; background: #3a4d64; }
.editor-project-name { font-size: 13px; color: #9fb6cc; }
.editor-toolbar-button { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border: 1px solid #2b3f58; border-radius: 10px; background: transparent; color: #c6d6e6; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.editor-toolbar-button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.editor-toolbar-button:hover, .editor-toolbar-button:focus-visible { border-color: var(--editor-accent-bright); color: #fff; background: rgba(25, 198, 177, .12); }
.editor-toolbar-button:focus-visible, .editor-export-button:focus-visible { outline: 3px solid rgba(46, 201, 180, .38); outline-offset: 2px; }
.editor-toolbar-button:disabled { opacity: .45; cursor: default; }
.editor-toolbar-button:disabled:hover { border-color: #2b3f58; color: #c6d6e6; background: transparent; }
.editor-export-button { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 0; border-radius: 11px; background: var(--accent-fill); color: var(--on-accent); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.editor-export-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; }

.editor-workspace { display: grid; grid-template-columns: 292px minmax(0, 1fr) 264px; background: var(--editor-soft); }
@media (max-width: 1100px) { .editor-workspace { grid-template-columns: 1fr; } }

.editor-panel { background: var(--editor-panel); }
.editor-panel-heading { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px 12px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--editor-muted); }
.editor-panel-count { color: var(--accent-text); }
.editor-tool-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 0 14px 14px; border-bottom: 1px solid var(--editor-line); }
.editor-tool-tab { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 4px 9px; border: 1px solid transparent; border-radius: 11px; background: transparent; color: var(--editor-muted); font: inherit; font-size: 10.5px; font-weight: 700; cursor: pointer; }
.editor-tool-tab svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.editor-tool-tab.is-active { border-color: rgba(15, 157, 140, .35); background: rgba(15, 157, 140, .08); color: var(--accent-text); }
.editor-tool-content { display: none; padding: 16px 18px 20px; }
.editor-tool-content.is-active { display: block; }
.editor-tool-label { margin: 0 0 10px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--editor-muted); }
.editor-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.editor-add-media { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 14px; border: 1.5px dashed var(--line-dashed); border-radius: 13px; background: var(--editor-soft); color: var(--editor-ink); font: inherit; text-align: left; cursor: pointer; margin-bottom: 9px; }
.editor-add-media strong { display: block; font-size: 13px; }
.editor-add-media small { display: block; color: var(--editor-muted); font-size: 11px; margin-top: 2px; }
.editor-add-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: rgba(15, 157, 140, .12); color: var(--accent-text); flex: none; }
.editor-add-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.editor-tool-note { display: flex; gap: 9px; align-items: flex-start; margin-top: 14px; padding: 11px 12px; border-radius: 11px; background: rgba(15, 157, 140, .07); color: var(--accent-ink); font-size: 11px; line-height: 1.55; }
.editor-tool-note svg { flex: none; width: 15px; height: 15px; fill: none; stroke: var(--editor-accent); stroke-width: 1.8; margin-top: 1px; }
.editor-field-row { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.editor-field-row label { width: 86px; font-size: 12px; font-weight: 700; }
.editor-field-row input[type=number], .editor-field-row input[type=text] { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--editor-line); border-radius: 9px; font: inherit; font-size: 12px; }
.editor-field-row input[type=color] { width: 44px; height: 32px; border: 1px solid var(--editor-line); border-radius: 8px; padding: 2px; background: #fff; }
.editor-field-row span { font-size: 11px; color: var(--editor-muted); }
.editor-field-help { margin: 0 0 12px; color: var(--editor-muted); font-size: 11.5px; line-height: 1.6; }
.editor-secondary-button { width: 100%; padding: 9px; border: 1px solid var(--editor-line); border-radius: 10px; background: var(--panel-bg); color: var(--editor-ink); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; margin-bottom: 8px; }
.editor-canvas-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 12px; }
.editor-canvas-options button { padding: 9px 4px; border: 1px solid var(--editor-line); border-radius: 9px; background: var(--panel-bg); font: inherit; font-size: 11px; font-weight: 700; color: var(--editor-ink); cursor: pointer; }
.editor-canvas-options button.is-active { border-color: var(--editor-accent); background: rgba(15, 157, 140, .09); color: var(--accent-text); box-shadow: 0 0 0 3px rgba(15, 157, 140, .1); }
.editor-toggle-row { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 12px; font-size: 12px; cursor: pointer; }
.editor-toggle-row input { margin-top: 2px; accent-color: var(--editor-accent); }
.editor-toggle-row strong { display: block; }
.editor-toggle-row small { display: block; color: var(--editor-muted); font-size: 11px; }
.editor-range-row { display: block; margin-bottom: 14px; }
.editor-range-row > span { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; margin-bottom: 6px; }
.editor-range-row output { color: var(--accent-text); }
.editor-range-row input[type=range] { width: 100%; accent-color: var(--editor-accent); }
.filter-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.filter-chip { aspect-ratio: 1; border-radius: 9px; border: 2px solid transparent; cursor: pointer; }
.filter-chip.is-active { border-color: var(--editor-accent); box-shadow: 0 0 0 2px rgba(15, 157, 140, .25); }

.editor-stage { display: flex; flex-direction: column; min-width: 0; padding: 16px; }
.editor-stage-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.editor-stage-kicker { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--editor-muted); }
.editor-stage-title { font-size: 14px; font-weight: 800; }
.editor-engine-pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border: 1px solid rgba(15, 157, 140, .3); border-radius: 999px; background: rgba(15, 157, 140, .07); color: var(--accent-ink); font-size: 11px; font-weight: 800; }
.editor-engine-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--editor-accent-bright); box-shadow: 0 0 0 3px rgba(25, 198, 177, .15); }
.editor-stage-canvas { flex: 1; display: grid; place-items: center; min-height: 430px; padding: 22px; border-radius: 14px; border: 1px solid var(--editor-line); background: repeating-conic-gradient(#e9eff5 0% 25%, #fff 0% 50%) 50% / 22px 22px; }
#editorCanvas { max-width: 100%; height: auto; box-shadow: 0 16px 40px rgba(12, 33, 57, .25); border-radius: 8px; }
.editor-empty-preview { text-align: center; color: var(--editor-muted); display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 13px; }
.editor-empty-preview strong { color: var(--editor-ink); font-size: 15px; }
.editor-empty-icon svg { width: 44px; height: 44px; fill: none; stroke: #b9cadb; stroke-width: 1.4; }
.editor-empty-button { margin-top: 8px; padding: 10px 20px; border: 0; border-radius: 11px; background: var(--accent-fill); color: var(--on-accent); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.editor-stage-bar { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 9px 14px; border: 1px solid var(--editor-line); border-radius: 12px; background: var(--panel-bg); font-size: 12px; color: var(--editor-muted); font-weight: 700; }
.editor-stage-bar .spacer { flex: 1; }
.editor-size-separator { color: var(--editor-line); }
.zoom-btn { width: 26px; height: 26px; border: 1px solid var(--editor-line); border-radius: 8px; background: var(--panel-bg); font: inherit; font-weight: 800; cursor: pointer; }

.editor-media-panel { border-left: 1px solid var(--editor-line); }
.editor-media-list { display: flex; flex-direction: column; gap: 9px; padding: 0 14px 14px; }
.editor-media-empty { padding: 26px 14px; border: 1.5px dashed var(--editor-line); border-radius: 12px; text-align: center; color: var(--editor-muted); font-size: 11.5px; }
.editor-media-empty strong { display: block; color: var(--editor-ink); font-size: 12.5px; margin-bottom: 4px; }
.editor-media-card { position: relative; display: flex; gap: 10px; align-items: center; padding: 8px; border: 1.5px solid var(--editor-line); border-radius: 12px; background: var(--panel-bg); cursor: grab; }
.editor-media-card.is-active { border-color: var(--editor-accent); box-shadow: 0 0 0 3px rgba(15, 157, 140, .12); }
.editor-media-thumb { width: 52px; height: 40px; border-radius: 7px; flex: none; object-fit: cover; background: var(--img-a); }
.editor-media-meta strong { display: block; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 118px; }
.editor-media-meta small { color: var(--editor-muted); font-size: 10.5px; }
.editor-media-add-button { display: flex; align-items: center; justify-content: center; gap: 7px; width: calc(100% - 28px); margin: 0 14px 16px; padding: 10px; border: 1.5px dashed var(--line-dashed); border-radius: 11px; background: transparent; color: var(--editor-muted); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.editor-media-add-button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }

.editor-strip-panel { border-top: 1px solid var(--line-strong); background: var(--editor-panel); padding: 14px 16px 16px; }
.editor-strip-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 11px; gap: 12px; flex-wrap: wrap; }
.editor-strip-head strong { font-size: 13px; }
.editor-strip-hint { font-size: 11px; color: var(--editor-muted); font-weight: 700; }
.editor-strip-scroll { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 10px; }
.strip-card { position: relative; flex: none; width: 148px; border: 1.5px solid var(--editor-line); border-radius: 12px; background: var(--panel-bg); overflow: hidden; cursor: grab; }
.strip-card.is-active { border-color: var(--editor-accent); box-shadow: 0 0 0 3px rgba(15, 157, 140, .12); }
.strip-thumb { height: 74px; width: 100%; object-fit: cover; }
.strip-body { padding: 7px 9px 9px; }
.strip-body strong { display: block; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strip-body small { color: var(--editor-muted); font-size: 10px; }
.strip-order { position: absolute; left: 6px; top: 6px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 7px; background: rgba(11, 32, 56, .72); color: #fff; font-size: 10.5px; font-weight: 800; }
.strip-card.strip-add { display: grid; place-items: center; border-style: dashed; color: var(--editor-muted); font-size: 11.5px; font-weight: 700; min-height: 122px; cursor: pointer; }

.editor-status-bar { display: flex; align-items: center; gap: 9px; padding: 11px 18px; border-top: 1px solid var(--editor-line); background: var(--editor-soft); color: var(--editor-muted); font-size: 12px; font-weight: 600; }
.editor-status-bar svg { width: 15px; height: 15px; fill: none; stroke: var(--editor-accent); stroke-width: 1.8; }
.editor-draft-status { margin-left: auto; color: var(--accent-text); font-size: 11px; white-space: nowrap; }
.editor-draft-actions { display: inline-flex; align-items: center; gap: 6px; }
.editor-draft-actions button { min-height: 30px; padding: 5px 9px; border: 1px solid var(--editor-line); border-radius: 8px; background: var(--panel-bg); color: var(--editor-ink); font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; }
.editor-draft-actions button:first-child { border-color: rgba(15, 157, 140, .35); color: var(--accent-text); }
.editor-draft-actions button:hover, .editor-draft-actions button:focus-visible, .zoom-btn:hover, .zoom-btn:focus-visible { border-color: var(--editor-accent); }
.editor-draft-actions button:focus-visible, .zoom-btn:focus-visible { outline: 3px solid rgba(46, 201, 180, .28); outline-offset: 2px; }

/* SEO sections below the workspace */
.editor-how-it-works, .editor-seo-content, .editor-faq-section { margin-top: 64px; }
.editor-how-it-works h2, .editor-seo-content h2, .editor-faq-section h2 { font-size: clamp(22px, 3vw, 32px); letter-spacing: -.04em; margin: 0 0 12px; }
.editor-section-lead { color: var(--editor-muted); font-size: 15px; max-width: 720px; margin: 0 0 22px; }
.editor-step-list { padding-left: 0; list-style: decimal inside; display: grid; gap: 14px; }
.editor-step-list li { padding: 18px 20px; border: 1px solid var(--editor-line); border-radius: 14px; background: var(--panel-bg); color: var(--editor-muted); font-size: 14px; }
.editor-step-list strong { color: var(--editor-ink); }
.editor-content-heading { max-width: 780px; margin-bottom: 24px; }
.editor-content-heading p { color: var(--editor-muted); font-size: 15px; }
.editor-feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-bottom: 34px; }
.editor-feature-grid article { padding: 24px; border-radius: 16px; background: var(--panel-bg); border: 1px solid var(--editor-line); }
.editor-feature-number { color: var(--accent-text); font-size: 12px; font-weight: 800; letter-spacing: .1em; }
.editor-feature-grid h3 { margin: 8px 0; font-size: 16px; }
.editor-feature-grid p { margin: 0; color: var(--editor-muted); font-size: 13.5px; }
.editor-content-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.editor-content-columns h2 { font-size: 20px; }
.editor-content-columns p, .editor-content-columns li { color: var(--editor-muted); font-size: 14px; }
.editor-content-columns ul { padding-left: 20px; margin: 0; }
@media (max-width: 900px) { .editor-content-columns { grid-template-columns: 1fr; } }

.editor-related-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 48px; padding: 22px 24px; border-radius: 16px; background: var(--panel-bg); border: 1px solid var(--editor-line); }
.editor-related-links strong { font-size: 13px; margin-right: 6px; }
.editor-related-links a { padding: 9px 15px; border: 1px solid var(--editor-line); border-radius: 999px; color: var(--accent-text); font-size: 12.5px; font-weight: 800; text-decoration: none; }
.editor-related-links a:hover { border-color: var(--editor-accent); background: rgba(15, 157, 140, .06); }
.editor-limits-note { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 18px; padding: 14px 18px; border-radius: 12px; background: rgba(67, 137, 255, .07); color: var(--ink-soft); font-size: 12.5px; }
.editor-limits-note strong { color: var(--editor-ink); }

/* ---- M1 engine additions ---- */
.editor-export-format select { padding: 9px 10px; border: 1px solid var(--editor-line); border-radius: 10px; background: var(--panel-bg); font: inherit; font-size: 12.5px; font-weight: 700; }
.strip-card img { display: block; width: 100%; height: 96px; object-fit: cover; pointer-events: none; }
.strip-card .strip-scale { display: flex; align-items: center; gap: 6px; padding: 6px 8px; font-size: 10.5px; color: var(--editor-muted); }
.strip-card .strip-scale input[type=range] { width: 78px; accent-color: var(--editor-accent); }
.strip-card.is-dragging { opacity: .45; }
.strip-card .strip-remove { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border: 0; border-radius: 50%; background: rgba(15,17,22,.72); color: #fff; font-size: 12px; line-height: 1; cursor: pointer; }
.editor-media-item { display: flex; align-items: center; gap: 8px; padding: 7px; border: 1px solid var(--editor-line); border-radius: 10px; background: var(--panel-bg); font-size: 11px; }
.editor-media-item img { width: 40px; height: 40px; object-fit: cover; border-radius: 7px; }
.editor-media-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--editor-muted); }

/* ---- phones: the toolbar and intro row were single-line and spilled ---- */
@media (max-width: 720px) {
    .editor-page-intro { flex-wrap: wrap; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
    .editor-intro-actions { flex-wrap: wrap; gap: 10px 14px; white-space: normal; }
    .editor-toolbar { flex-wrap: wrap; align-items: flex-start; gap: 12px; min-height: 0; padding: 12px 14px; }
    .editor-toolbar-actions { flex-wrap: wrap; gap: 8px; margin-left: auto; }
    .editor-toolbar-button, .editor-export-button { min-height: 44px; }
    .editor-app.is-fullscreen .editor-toolbar { max-height: 38vh; overflow-y: auto; }
    .editor-stage { order: 1; }
    .editor-tools-panel { order: 2; border-top: 1px solid var(--editor-line); }
    .editor-media-panel { order: 3; border-top: 1px solid var(--editor-line); border-left: 0; }
    .editor-stage { padding: 12px; }
    .editor-stage-canvas { min-height: 300px; padding: 10px; }
    .editor-canvas-options button { min-height: 44px; }
    .strip-card .strip-remove { width: 30px; height: 30px; }
    .editor-stage-bar { flex-wrap: wrap; gap: 8px; }
    .editor-size-separator { display: none; }
    #editorExportEstimate { width: 100%; }
    .editor-status-bar { align-items: flex-start; flex-wrap: wrap; padding: 10px 14px; }
    .editor-draft-status { margin-left: 0; width: 100%; }
    .editor-draft-actions { width: 100%; }
    .editor-draft-actions button { flex: 1; min-height: 44px; }
    /* The workbench 44px rules never reached these editor-only controls, so a
       thumb was aiming at 19-42px boxes. */
    .editor-help-link, .editor-export-format { min-height: 44px; }
    .editor-export-format select { min-height: 44px; }
    .editor-field-row input[type=text], .editor-field-row input[type=number] { min-height: 44px; }
    .editor-field-row input[type=color] { height: 44px; }
    .editor-empty-button, .editor-media-add-button, .editor-secondary-button { min-height: 44px; }
    .editor-related-links a { min-height: 44px; }
    .editor-toggle-row { min-height: 44px; align-items: center; }
    .zoom-btn { width: 44px; height: 44px; }
    .editor-range-row input[type=range], .strip-card .strip-scale input[type=range] { min-height: 44px; margin: -6px 0; }
    .strip-card .strip-remove { width: 40px; height: 40px; }
}

/* ---- dark scheme ----
   The palette itself lives in style.css tokens; this sheet only carries the
   alpha tints it introduced, all of which were picked against white. */
@media (prefers-color-scheme: dark) {
    .editor-tool-tab.is-active { background: rgba(46, 201, 180, .14); }
    .editor-add-icon { background: rgba(46, 201, 180, .16); }
    .editor-tool-note { background: rgba(46, 201, 180, .12); }
    .editor-canvas-options button.is-active { background: rgba(46, 201, 180, .14); }
    .editor-engine-pill { background: rgba(46, 201, 180, .12); }
    .editor-related-links a:hover { background: rgba(46, 201, 180, .12); }
    .editor-limits-note { background: rgba(110, 168, 255, .12); }
}