:root {
  color-scheme: light;
  --ink: #1c2822;
  --muted: #758079;
  --line: #e5e9e4;
  --paper: #fff;
  --canvas: #f5f6f2;
  --green: #246c4c;
  --green-dark: #174f38;
  --green-soft: #eaf3ed;
  --lime: #c6eb72;
  --red: #b83b32;
  --serif: 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
  --sans: 'Aptos', 'Segoe UI', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--canvas); font-family: var(--sans); font-size: 14px; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible + span, .upload-zone:focus-visible { outline: 3px solid #82b99a; outline-offset: 3px; }
.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 3; display: flex; flex-direction: column; width: 236px; padding: 29px 18px 20px; background: #fff; border-right: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 11px; width: fit-content; margin: 0 0 57px 7px; color: inherit; text-decoration: none; }
.brand-mark { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px 12px 12px 4px; background: var(--green); color: white; font: italic 30px/1 var(--serif); }
.brand-copy { display: grid; gap: 1px; }.brand-copy strong { font: 22px/1 var(--serif); letter-spacing: -.5px; }.brand-copy small { color: var(--green); font-size: 9px; font-weight: 800; letter-spacing: 1.4px; }
.sidebar-section-label { padding: 0 12px 11px; color: #9aa29c; font-size: 10px; font-weight: 800; letter-spacing: 1.4px; }.main-nav { display: grid; gap: 5px; }
.nav-item { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: 7px; color: #58635c; font-size: 13px; font-weight: 600; text-decoration: none; }.nav-item svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }.nav-item.is-active { color: var(--green-dark); background: var(--green-soft); }
.sidebar-note { display: flex; gap: 10px; margin: auto 4px 24px; padding: 13px 12px; border: 1px solid #e7eee8; border-radius: 7px; background: #f7faf7; }.sidebar-note p { margin: 0; color: #69766d; font-size: 11px; line-height: 1.5; }.note-icon { color: var(--green); font-size: 16px; }.sidebar-footer { display: flex; align-items: center; gap: 7px; padding: 16px 7px 0; border-top: 1px solid var(--line); color: #839087; font-size: 9px; font-weight: 800; letter-spacing: .7px; }.sidebar-footer span:last-child { margin-left: auto; color: #a8b0aa; font-weight: 600; }.status-dot { display: inline-block; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: #67a87c; }
.workspace { max-width: 1580px; min-height: 100vh; margin-left: 236px; padding: 0 42px 50px; }.topbar { display: flex; align-items: center; justify-content: space-between; height: 64px; border-bottom: 1px solid #e7eae5; }.breadcrumbs { display: flex; align-items: center; gap: 10px; color: #89928b; font-size: 12px; }.breadcrumbs strong { color: #465249; font-weight: 650; }.crumb-divider { color: #c2c8c3; }.local-badge { display: flex; align-items: center; gap: 8px; color: #718077; font-size: 11px; }
.page-heading { position: relative; display: flex; justify-content: space-between; align-items: flex-end; padding: 34px 0 27px; }.eyebrow { margin: 0; color: #839087; font-size: 9px; font-weight: 800; letter-spacing: 1.45px; }.page-heading .eyebrow { display: flex; align-items: center; gap: 8px; }.page-heading .eyebrow span { width: 18px; height: 1px; background: #b6c2b9; }h1 { margin: 12px 0 8px; font: 48px/.99 var(--serif); letter-spacing: -1.7px; }.page-subtitle { margin: 0; color: #78837b; font-size: 13px; }.heading-spark { position: absolute; right: 6%; bottom: 23px; color: #d5e9b0; font-size: 57px; transform: rotate(-10deg); }.mobile-break { display: none; }
.editor-grid { display: grid; grid-template-columns: minmax(420px, 1fr) minmax(350px, .9fr); align-items: start; gap: 24px; }.form-panel, .preview-panel, .captions-panel { border: 1px solid #e5e9e4; border-radius: 8px; background: var(--paper); }.form-panel { padding: 7px 26px 23px; }.form-section { padding: 21px 0 20px; border-bottom: 1px solid #edf0ec; }.section-heading { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 16px; }.step-number { display: grid; flex: 0 0 auto; width: 25px; height: 25px; place-items: center; border-radius: 7px; background: #f0f5f0; color: var(--green); font-size: 10px; font-weight: 800; }.section-heading h2, .preview-header h2, .captions-heading h2 { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: -.1px; }.section-heading p { margin: 4px 0 0; color: #89928c; font-size: 11px; }
.upload-wrap { position: relative; }.upload-zone { display: flex; align-items: center; gap: 12px; min-height: 75px; padding: 12px 14px; border: 1px dashed #cbd5ce; border-radius: 6px; background: #fbfcfa; cursor: pointer; transition: border-color .18s ease, background .18s ease; }.upload-zone:hover, .upload-zone.is-dragging { border-color: var(--green); background: #f3f8f3; }.upload-visual { display: grid; flex: 0 0 auto; width: 38px; height: 38px; overflow: hidden; place-items: center; border-radius: 6px; background: #edf4ee; color: var(--green); }.upload-visual svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }.upload-visual img { width: 100%; height: 100%; object-fit: cover; }.upload-copy { display: grid; gap: 4px; color: #68746c; font-size: 11px; }.upload-copy strong { color: #34443a; font-size: 12px; font-weight: 650; }.text-link { color: var(--green); text-decoration: underline; text-underline-offset: 2px; }.upload-meta { margin-left: auto; color: #9aa39c; font-size: 9px; white-space: nowrap; }.replace-image { position: absolute; right: 12px; top: 50%; padding: 5px 8px; transform: translateY(-50%); border: 1px solid #dfe7e0; border-radius: 4px; background: #fff; color: var(--green); font-size: 10px; font-weight: 700; cursor: pointer; }.replace-image[hidden] { display: none; }
.field-group { min-width: 0; margin: 0 0 12px; }.field-group:last-child { margin-bottom: 0; }.field-group label { display: flex; align-items: center; gap: 5px; margin-bottom: 6px; color: #46534a; font-size: 11px; font-weight: 650; }.required-mark { color: #bd564e; }.optional { color: #9aa39c; font-size: 9px; font-weight: 500; }.field-group > input, .input-prefix { width: 100%; height: 37px; border: 1px solid #dfe5df; border-radius: 5px; background: #fff; }.field-group > input { padding: 0 10px; color: var(--ink); outline: none; }.field-group input::placeholder { color: #b2bab4; }.field-group > input:focus, .input-prefix:focus-within { border-color: #82ad91; box-shadow: 0 0 0 3px #eaf3ed; }.field-group input[aria-invalid="true"] { border-color: #c85e53; }.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.input-prefix { display: flex; align-items: center; gap: 8px; padding: 0 9px; color: #89938c; font-size: 11px; }.input-prefix input { width: 100%; height: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); }.field-error { min-height: 0; margin: 0; color: var(--red); font-size: 10px; line-height: 1.4; }.field-error:not(:empty) { margin-top: 4px; }.field-error[hidden] { display: none; }.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; clip-path: inset(50%) !important; }
.choices-section { padding-bottom: 20px; }.choice-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }.style-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }.style-option { position: relative; display: grid; justify-items: center; gap: 7px; padding: 8px 7px 9px; border: 1px solid #e5e9e4; border-radius: 6px; color: #667168; font-size: 10px; cursor: pointer; }.style-option:has(input:checked) { border-color: #72a283; background: #f5f9f5; color: var(--green-dark); }.style-option input, .format-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }.style-swatch { position: relative; display: flex; align-items: center; justify-content: center; gap: 3px; width: 100%; height: 43px; overflow: hidden; border-radius: 3px; }.style-swatch i { display: block; border-radius: 2px; }.modern-swatch { background: #e9f0e7; }.modern-swatch i:nth-child(1) { width: 13px; height: 25px; background: #fff; }.modern-swatch i:nth-child(2) { width: 13px; height: 31px; background: #91b281; }.modern-swatch i:nth-child(3) { width: 13px; height: 20px; background: #d3ddc9; }.offer-swatch { background: #2b3832; }.offer-swatch i:nth-child(1) { width: 12px; height: 20px; background: #f8c85d; }.offer-swatch i:nth-child(2) { width: 17px; height: 29px; background: #e66e4e; }.offer-swatch i:nth-child(3) { width: 12px; height: 23px; background: #f8c85d; }.elegant-swatch { background: #2d2925; }.elegant-swatch i:nth-child(1) { width: 12px; height: 20px; background: #bba67e; }.elegant-swatch i:nth-child(2) { width: 17px; height: 29px; border: 1px solid #e8dbc0; }.elegant-swatch i:nth-child(3) { width: 12px; height: 23px; background: #79684f; }
.format-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }.format-option { position: relative; display: flex; align-items: center; gap: 8px; min-height: 54px; padding: 8px; border: 1px solid #e5e9e4; border-radius: 5px; cursor: pointer; }.format-option:has(input:checked) { border-color: #72a283; background: #f5f9f5; }.format-icon { display: block; flex: 0 0 auto; width: 19px; border: 1.4px solid #819087; border-radius: 2px; }.square-icon { height: 19px; }.feed-icon { height: 24px; }.story-icon { height: 29px; }.format-option:has(input:checked) .format-icon { border-color: var(--green); }.format-option strong, .format-option small { display: block; white-space: nowrap; }.format-option strong { color: #47534a; font-size: 10px; }.format-option small { margin-top: 3px; color: #929c94; font-size: 8px; }
.form-actions { display: flex; gap: 9px; padding-top: 19px; }.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 42px; border-radius: 5px; font-size: 12px; font-weight: 700; cursor: pointer; transition: background .15s ease, transform .15s ease; }.button:active, .download-button:active { transform: translateY(1px); }.button-primary { flex: 1; border: 1px solid var(--green); background: var(--green); color: #fff; }.button-primary:hover { background: var(--green-dark); }.button-primary svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }.button-primary:disabled { opacity: .65; cursor: wait; }.button-quiet { padding: 0 17px; border: 1px solid #dfe5df; background: #fff; color: #647067; }.button-quiet:hover { background: #f7f9f6; }.form-status { min-height: 15px; margin: 8px 0 -8px; color: var(--green); font-size: 10px; }.form-status.is-error { color: var(--red); }
.preview-column { display: grid; gap: 15px; }.preview-panel { padding: 19px 18px 0; }.preview-header, .captions-heading { display: flex; align-items: center; justify-content: space-between; }.preview-header h2, .captions-heading h2 { margin-top: 5px; font-size: 15px; }.preview-format { padding: 5px 7px; border: 1px solid #e7ebe6; border-radius: 4px; color: #7b867e; font-size: 9px; font-variant-numeric: tabular-nums; }.canvas-stage { position: relative; display: grid; min-height: 370px; max-height: 570px; margin: 16px 0 0; place-items: center; overflow: hidden; border-radius: 5px 5px 0 0; background-color: #f4f5f1; background-image: radial-gradient(#dfe4dd 0.8px, transparent .8px); background-size: 13px 13px; }#ad-canvas { display: block; max-width: 100%; max-height: min(61vh, 540px); width: auto; height: auto; object-fit: contain; box-shadow: 0 8px 26px #243a2a1c; animation: canvas-in .32s ease both; }#ad-canvas[hidden] { display: none; }.empty-preview { display: grid; justify-items: center; max-width: 245px; padding: 22px; text-align: center; animation: rise-in .45s ease both; }.empty-preview strong { margin-top: 17px; color: #59655d; font: 17px var(--serif); }.empty-preview p { margin: 6px 0 0; color: #929b94; font-size: 10px; line-height: 1.5; }.empty-art { position: relative; display: flex; align-items: center; gap: 6px; width: 114px; height: 100px; justify-content: center; }.empty-art span { display: block; width: 24px; border: 1px solid #a8b9aa; border-radius: 12px 12px 4px 4px; background: linear-gradient(150deg, #e9f0e8 15%, #cad9ca 16%, #e4ebe2 70%); }.empty-art span:nth-child(1) { height: 48px; transform: rotate(-9deg); }.empty-art span:nth-child(2) { height: 67px; border-color: #839c88; background: linear-gradient(140deg,#d5e4d2 45%,#adc2a7 46%); }.empty-art span:nth-child(3) { height: 40px; transform: rotate(8deg); }.empty-art i { position: absolute; top: 4px; right: 8px; color: #91b86d; font-size: 25px; font-style: normal; }.preview-loading { display: grid; justify-items: center; gap: 8px; color: #56655a; font-size: 12px; }.preview-loading[hidden] { display: none; }.preview-loading span:last-child { color: #929b94; font-size: 10px; }.spinner { width: 27px; height: 27px; border: 2px solid #dce7dd; border-top-color: var(--green); border-radius: 50%; animation: spin .75s linear infinite; }.preview-footer { display: flex; align-items: center; justify-content: space-between; min-height: 53px; border-top: 1px solid #ebefea; color: #879189; font-size: 10px; }.preview-footer > span { display: flex; align-items: center; gap: 7px; }.preview-footer .status-dot { width: 6px; height: 6px; background: #b5beb7; }.preview-footer .status-dot.is-ready { background: #67a87c; }.download-button { display: inline-flex; align-items: center; gap: 6px; min-height: 31px; padding: 0 10px; border: 1px solid #dce5dd; border-radius: 4px; background: #f8fbf8; color: var(--green-dark); font-size: 10px; font-weight: 700; cursor: pointer; }.download-button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }.download-button:disabled { color: #aab2ab; background: #fafbfa; cursor: not-allowed; }
.captions-panel { padding: 17px 18px 14px; }.captions-heading .eyebrow { font-size: 8px; }.captions-heading h2 { font-size: 14px; }.refresh-button { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid #e3e9e3; border-radius: 5px; background: #fff; color: #718078; cursor: pointer; }.refresh-button:hover { color: var(--green); background: #f6f9f6; }.refresh-button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.4; }.caption-hint { margin: 8px 0 12px; color: #929b94; font-size: 10px; }.caption-list { display: grid; gap: 7px; }.caption-empty { margin: 0; padding: 12px; border-radius: 4px; background: #f7f9f6; color: #929b94; font-size: 10px; text-align: center; }.caption-item { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; align-items: center; padding: 9px 9px 9px 11px; border: 1px solid #edf0ec; border-radius: 5px; animation: rise-in .25s ease both; }.caption-item p { margin: 0; color: #59645c; font-size: 10px; line-height: 1.5; }.copy-caption { display: inline-flex; align-items: center; gap: 4px; min-height: 27px; padding: 0 7px; border: 1px solid #e1e8e1; border-radius: 4px; background: #fff; color: #657269; font-size: 9px; cursor: pointer; }.copy-caption:hover { border-color: #9bb9a1; color: var(--green); }.copy-caption svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.4; }.privacy-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; color: #8d978f; font-size: 9px; }.privacy-note svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.4; }
@keyframes spin { to { transform: rotate(360deg); } }@keyframes rise-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }@keyframes canvas-in { from { opacity: .65; transform: scale(.985); } to { opacity: 1; transform: scale(1); } }
@media (min-width: 1500px) { .workspace { margin-right: auto; padding-right: 55px; padding-left: 55px; }.editor-grid { grid-template-columns: minmax(500px, 1fr) minmax(430px, .9fr); gap: 30px; } }
@media (max-width: 1120px) { .sidebar { width: 204px; }.workspace { margin-left: 204px; padding-right: 27px; padding-left: 27px; }.editor-grid { grid-template-columns: minmax(375px, 1fr) minmax(320px, .86fr); gap: 16px; }.form-panel { padding-right: 20px; padding-left: 20px; }.format-option { gap: 6px; padding: 7px 5px; }.format-option small { font-size: 7px; } }
@media (max-width: 850px) { .sidebar { position: static; width: auto; height: 62px; flex-direction: row; align-items: center; justify-content: space-between; padding: 0 20px; border-right: 0; border-bottom: 1px solid var(--line); }.brand { margin: 0; }.brand-mark { width: 34px; height: 34px; font-size: 27px; }.brand-copy strong { font-size: 19px; }.sidebar-section-label, .main-nav, .sidebar-note, .sidebar-footer { display: none; }.workspace { min-height: auto; margin: 0; padding: 0 24px 38px; }.topbar { height: 52px; }.page-heading { padding: 29px 0 23px; }.editor-grid { grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: 14px; }.form-panel { padding-right: 17px; padding-left: 17px; }.upload-meta { max-width: 80px; white-space: normal; text-align: right; }.format-option { gap: 5px; }.format-icon { transform: scale(.85); }.format-option strong { font-size: 9px; }.canvas-stage { min-height: 320px; } }
@media (max-width: 650px) { .workspace { padding: 0 15px 30px; }.topbar { height: 48px; }.local-badge { font-size: 0; gap: 0; }.local-badge .status-dot { width: 8px; height: 8px; }.page-heading { padding: 25px 0 20px; }.page-heading .eyebrow { font-size: 8px; }h1 { margin-top: 10px; font-size: 39px; line-height: 1.02; letter-spacing: -1.2px; }.mobile-break { display: initial; }.page-subtitle { max-width: 290px; font-size: 12px; line-height: 1.5; }.heading-spark { right: 4px; bottom: 25px; font-size: 42px; }.editor-grid { grid-template-columns: 1fr; gap: 14px; }.form-panel { padding: 2px 18px 19px; }.form-section { padding: 19px 0; }.preview-column { grid-row: 1; }.preview-panel { padding: 15px 14px 0; }.canvas-stage { min-height: 290px; max-height: 480px; margin-top: 13px; }.preview-header h2 { font-size: 14px; }.captions-panel { padding: 15px 14px; }.preview-column { gap: 12px; }.privacy-note { padding-top: 2px; }.style-option { padding-right: 5px; padding-left: 5px; }.format-option { justify-content: center; gap: 7px; padding: 8px 5px; }.format-icon { transform: none; }.format-option strong { font-size: 10px; }.format-option small { font-size: 8px; } }
@media (max-width: 390px) { .workspace { padding-right: 11px; padding-left: 11px; }.form-panel { padding-right: 13px; padding-left: 13px; }.format-option { gap: 4px; }.format-icon { transform: scale(.78); }.format-option strong { font-size: 9px; }.format-option small { font-size: 7px; }.upload-meta { display: none; }.field-row { gap: 8px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }
.caption-item p { min-width: 0; overflow-wrap: anywhere; }
html { min-width: 0; }
.editor-grid > *, .preview-column > * { min-width: 0; }

@media (max-width: 980px) {
  .editor-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 650px) {
  .preview-column { grid-row: auto; }
}
.canvas-stage { min-width: 0; min-height: clamp(300px, 38vw, 520px); max-height: min(74vh, 720px); padding: 14px; }
#empty-preview[hidden] { display: none; }
#ad-canvas { max-width: 100%; max-height: min(70vh, 680px); }
@media (max-width: 650px) {
  .canvas-stage { min-height: clamp(280px, 82vw, 420px); max-height: min(74vh, 660px); padding: 12px; }
  #ad-canvas { max-height: min(70vh, 630px); }
}