:root {
  --app-bg: #eee9df;
  --panel: #f7f3eb;
  --surface: #fffdf8;
  --ink: #191715;
  --muted: #756f66;
  --line: rgba(27, 24, 20, .10);
  --shadow: 0 18px 52px rgba(49, 41, 30, .13);

  --art-bg: #fbf7f0;
  --art-fg: #191817;
  --art-accent: #c85b43;
  --accent-12: rgba(200,91,67,.12);
  --accent-24: rgba(200,91,67,.24);
  --accent-38: rgba(200,91,67,.38);
  --fg-72: rgba(25,24,23,.72);
  --fg-90: rgba(25,24,23,.90);
  --title-font: 'Instrument Serif', serif;
  --body-font: 'Bricolage Grotesque', sans-serif;
  --title-weight: 400;
  --body-weight: 500;
  --u: .34px;
  --type-scale: 1;
  --pad-scale: 1;
  --image-opacity: .26;

  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ink);
  background: var(--app-bg);
  font-synthesis: none;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--app-bg); }
body { margin: 0; min-height: 100vh; background: linear-gradient(180deg,#f6f1e8 0,#ebe6dc 60%,#e4ded3 100%); }
body.sheet-open { overflow: hidden; }
button, input, textarea { font: inherit; }
button, a, [contenteditable] { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, [contenteditable]:focus-visible { outline: 2px solid #171513; outline-offset: 2px; }
.app-shell { min-height: 100vh; padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
.app-header {
  position: sticky; top: 0; z-index: 30;
  min-height: 64px; padding: 10px 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border-bottom: 1px solid var(--line);
  background: rgba(247,243,235,.92); backdrop-filter: blur(20px) saturate(1.15);
}
.brand { min-width: 0; display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.brand-mark { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 14px; background: #171513; color: #fff; font-family: 'Instrument Serif',serif; font-size: 24px; }
.brand-copy { min-width: 0; display: grid; gap: 1px; }
.brand-copy strong { font-size: 14px; letter-spacing: -.025em; }
.brand-copy small { font-size: 9px; color: var(--muted); }
.header-actions { display: flex; gap: 6px; }
.primary-button,.quiet-button,.icon-button { min-height: 40px; border-radius: 13px; padding: 0 13px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; font-size: 12px; font-weight: 750; }
.primary-button { background: #171513; color: #fff; }
.quiet-button,.icon-button { background: var(--surface); border-color: #ddd5c8; color: #1c1916; }
.icon-button { width: 40px; padding: 0; font-size: 20px; }
.full { width: 100%; }
.desktop-export { display: none; }
.workspace { min-height: calc(100vh - 64px); }
.stage { padding: 12px 12px 24px; }
.mobile-format-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin-bottom: 10px; }
.mobile-format-row button,.segmented button { min-height: 44px; border: 1px solid #d7d0c4; border-radius: 14px; background: rgba(255,255,255,.72); color: #2b2824; font-size: 12px; font-weight: 750; }
.mobile-format-row button.active,.segmented button.active { border-color: #171513; background: #171513; color: #fff; }
.summary-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin: 0 2px 10px; }
.summary-row > div:first-child { display: grid; gap: 2px; }
.summary-row > div:first-child strong { font-size: 13px; }
.summary-row > div:first-child span { font-size: 10px; color: var(--muted); }
.metrics { display: flex; gap: 6px; }
.metrics span { min-width: 56px; padding: 7px 8px; border-radius: 13px; background: rgba(255,255,255,.54); border: 1px solid rgba(255,255,255,.72); display: grid; gap: 1px; }
.metrics b { font-size: 12px; }
.metrics small { font-size: 8px; color: var(--muted); }
.artboard-frame { padding: 8px; border-radius: 24px; background: rgba(255,255,255,.38); border: 1px solid rgba(255,255,255,.60); box-shadow: 0 10px 34px rgba(50,43,33,.08); }
.artboard { position: relative; width: 100%; min-height: 520px; overflow: hidden; border-radius: 20px; isolation: isolate; background: var(--art-bg); color: var(--art-fg); box-shadow: var(--shadow); }
.photo-layer { position: absolute; inset: 0; z-index: -3; background-size: cover; background-position: center; opacity: var(--image-opacity); }
.decor-layer { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.decor-layer i { position: absolute; display: block; }

.art-content { position:absolute; inset:0; min-height:0; display:block; padding:0; }
.editable { outline:none; overflow-wrap:normal; word-break:normal; }
.editable:focus { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--accent-38); }
.kicker,.headline,.body-copy,.quote-mark,.divider,.meta-row,.author,.footer { box-sizing:border-box; }
.kicker { font-family:var(--body-font); font-weight:var(--body-weight); text-transform:none; color:var(--fg-72); }
.quote-mark { display:none; margin:0; font-family:var(--title-font); color:var(--art-accent); }
.headline { margin:0; font-family:var(--title-font); font-weight:var(--title-weight); text-wrap:nowrap; }
.body-copy { margin:0; font-family:var(--body-font); font-weight:var(--body-weight); color:var(--fg-90); }
.divider { background:var(--accent-38); }
.meta-row { position:absolute; inset:0; pointer-events:none; }
.author,.footer { font-family:var(--body-font); font-weight:var(--body-weight); pointer-events:auto; }
.footer { color:var(--fg-72); }
.layout-quote .body-copy { color:var(--fg-72); }
.layout-split .body-copy { border-top:1px solid var(--accent-38); }
.layout-poster .headline { text-transform:uppercase; }
.layout-magazine .kicker { border-radius:999px; background:var(--accent-12); }
.layout-minimal .divider { display:none !important; }
.layout-spotlight .body-copy { border-radius:calc(24 * var(--u)); background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18); }
.bg-none .decor-layer { display: none; }
.bg-aurora .decor-layer i:nth-child(1) { width: 58%; aspect-ratio: 1.3; left: -24%; top: -11%; border-radius: 50%; background: radial-gradient(circle,var(--accent-24),transparent 70%); }
.bg-aurora .decor-layer i:nth-child(2) { width: 45%; aspect-ratio: 1; right: -15%; bottom: -7%; border-radius: 50%; background: radial-gradient(circle,rgba(255,255,255,.32),transparent 72%); }
.bg-aurora .decor-layer i:nth-child(3) { width: 28%; aspect-ratio: 1; right: 9%; top: 24%; border-radius: 50%; border: 1px solid var(--accent-24); }
.bg-grid .decor-layer { background-image: linear-gradient(to right,rgba(0,0,0,.055) 1px,transparent 1px),linear-gradient(to bottom,rgba(0,0,0,.055) 1px,transparent 1px); background-size: calc(74 * var(--u)) calc(74 * var(--u)); }
.bg-grid .decor-layer i { display:none; }
.bg-orb .decor-layer i:nth-child(1) { width: 46%; aspect-ratio: 1; right: -13%; top: -6%; border-radius: 50%; background: var(--accent-24); }
.bg-orb .decor-layer i:nth-child(2) { width: 30%; aspect-ratio: 1; left: -9%; bottom: 9%; border-radius: 50%; border: 1px solid var(--accent-38); }
.bg-orb .decor-layer i:nth-child(3) { width: 13%; aspect-ratio: 1; right: 17%; bottom: 17%; border-radius: 50%; background: rgba(255,255,255,.14); }
.bg-stripe .decor-layer { background: repeating-linear-gradient(135deg,transparent,transparent calc(62 * var(--u)),rgba(255,255,255,.09) calc(62 * var(--u)),rgba(255,255,255,.09) calc(124 * var(--u))); }
.bg-stripe .decor-layer i { display:none; }
.bg-grain .decor-layer { opacity:.16; background-image:radial-gradient(circle,rgba(0,0,0,.48) 0 1px,transparent 1.2px),radial-gradient(circle,rgba(0,0,0,.25) 0 1px,transparent 1.2px); background-size: 13px 13px,17px 17px; background-position:0 0,5px 7px; }
.bg-grain .decor-layer i { display:none; }
.bg-frame .decor-layer::before { content:''; position:absolute; inset:calc(48 * var(--u)); border:1px solid var(--accent-38); border-radius:calc(40 * var(--u)); }
.bg-frame .decor-layer i:nth-child(1) { width:18%; aspect-ratio:1; top:9%; right:9%; border-radius:50%; border:1px solid var(--accent-24); }
.bg-paper .decor-layer { background:radial-gradient(circle at 12% 12%,rgba(255,255,255,.22),transparent 30%),radial-gradient(circle at 78% 20%,var(--accent-12),transparent 26%),radial-gradient(circle at 35% 92%,rgba(0,0,0,.045),transparent 28%); }
.bg-paper .decor-layer i { display:none; }
.edit-hint { margin: 9px 4px 0; text-align: center; color: var(--muted); font-size: 9px; }
.desktop-creator { display:none; }
.mobile-actionbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 28; height: calc(68px + env(safe-area-inset-bottom)); padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: 1fr 1.25fr; gap: 8px; background: rgba(247,243,235,.94); backdrop-filter: blur(20px); border-top:1px solid var(--line); }
.action-button { min-height: 50px; border-radius: 16px; border:1px solid #d8d0c4; background: var(--surface); display:flex; align-items:center; justify-content:center; gap:8px; font-size:12px; color:#1f1c19; }
.action-button span { font-size:16px; }
.primary-action { background:#171513; color:#fff; border-color:#171513; }
.control-panel { position: fixed; inset: 0; z-index: 60; background: var(--panel); transform: translateY(100%); transition: transform .24s ease; }
.control-panel.open { transform: translateY(0); }
.sheet-header { height: 68px; padding: max(10px,env(safe-area-inset-top)) 14px 10px; display:flex; align-items:center; justify-content:space-between; gap:10px; border-bottom:1px solid var(--line); background:rgba(247,243,235,.96); }
.sheet-header > div { display:grid; gap:2px; }
.sheet-header strong { font-size:15px; }
.sheet-header small { font-size:9px; color:var(--muted); }
.sheet-scroll { height: calc(100dvh - 68px); overflow:auto; padding-bottom:calc(28px + env(safe-area-inset-bottom)); }
.scrim { display:none; }
.control-section { border-bottom:1px solid var(--line); }
.section-toggle { width:100%; height:52px; padding:0 14px; border:0; background:transparent; display:grid; grid-template-columns:26px 1fr auto; align-items:center; gap:8px; text-align:left; color:#25211d; }
.section-toggle span { font-size:14px; }
.section-toggle strong { font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.section-toggle i { font-style:normal; color:#7a736a; transition:transform .18s ease; }
.control-section:not(.open) .section-toggle i { transform:rotate(180deg); }
.control-section:not(.open) .section-content { display:none; }
.section-content { padding:0 13px 16px; }
.content-fields { display:grid; gap:10px; }
.content-fields label { display:grid; gap:6px; }
.content-fields label > span,.control-label { font-size:8px; text-transform:uppercase; letter-spacing:.09em; font-weight:800; color:#797168; }
.content-fields input,.content-fields textarea { width:100%; border:1px solid #ddd5c8; border-radius:13px; padding:11px 12px; background:#fff; color:#1c1916; }
.content-fields textarea { resize:vertical; line-height:1.45; }
.field-pair { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.limit-meter { display:flex; align-items:center; justify-content:space-between; padding:9px 10px; background:#ebe5da; border-radius:12px; color:#6d665e; font-size:9px; }
.pair-list { display:grid; gap:8px; }
.pair-card { width:100%; padding:11px; border:1px solid #ddd5c8; border-radius:15px; background:#fff; text-align:left; }
.pair-card.selected,.option-card.selected { border-color:#171513; box-shadow:0 0 0 1px #171513; }
.pair-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.pair-head strong { font-size:10px; }
.pair-head small { font-size:8px; color:#777068; }
.pair-title { margin-top:8px; font-size:20px; line-height:1.15; }
.pair-body { margin-top:4px; font-size:10px; line-height:1.4; color:#686158; }
.theme-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.theme-button { aspect-ratio:1; border:2px solid transparent; border-radius:14px; padding:3px; background:#fff; }
.theme-button.selected { border-color:#171513; }
.theme-swatch { width:100%; height:100%; border-radius:9px; overflow:hidden; display:grid; grid-template-columns:1.1fr .7fr .5fr; }
.theme-swatch i:nth-child(1){background:var(--c1)}.theme-swatch i:nth-child(2){background:var(--c2)}.theme-swatch i:nth-child(3){background:var(--c3)}
.option-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.option-card { min-height:78px; padding:10px; border:1px solid #ddd5c8; border-radius:14px; background:#fff; display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; text-align:left; }
.option-card b { font-family:'Instrument Serif',serif; font-size:20px; }
.option-card strong { font-size:9px; }
.option-card small { font-size:8px; color:#777068; }
.upload-row,.stack-actions { display:flex; gap:8px; margin-top:10px; }
.stack-actions { flex-direction:column; }
.upload-button { position:relative; overflow:hidden; }
.segmented { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin:7px 0 13px; }
.range-control { display:grid; gap:7px; margin-top:13px; }
.range-control > span { display:flex; justify-content:space-between; align-items:center; font-size:9px; color:#605a53; }
.range-control output { color:#7c756d; }
.range-control input { width:100%; }
.saved-list { display:grid; gap:8px; margin-top:10px; }
.saved-empty,.saved-item { border:1px solid #ddd5c8; border-radius:14px; padding:11px; background:#fff; font-size:9px; color:#716a62; }
.saved-item { display:grid; gap:8px; }
.saved-item strong { display:block; color:#27231f; font-size:10px; }
.saved-actions { display:flex; gap:7px; }
.saved-actions button { min-height:34px; border:1px solid #ded6ca; border-radius:11px; background:#f4efe6; font-size:9px; font-weight:700; padding:0 10px; }
.creator-card { margin:14px; padding:14px; border-radius:18px; background:#171513; color:#fff; display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:center; }
.creator-mark { width:38px; height:38px; border-radius:12px; background:#f3e9dc; color:#171513; display:grid; place-items:center; font-weight:800; font-size:10px; }
.creator-card strong { font-size:11px; }.creator-card p { margin:3px 0 0; font-size:8px; line-height:1.4; color:rgba(255,255,255,.68); }
.creator-card a { grid-column:1/-1; padding-top:9px; border-top:1px solid rgba(255,255,255,.14); font-size:9px; font-weight:750; text-decoration:none; }
.modal { border:0; padding:0; background:transparent; max-width:none; max-height:none; }
.modal::backdrop { background:rgba(15,13,11,.42); backdrop-filter:blur(3px); }
.modal-card { width:min(calc(100vw - 24px),420px); border-radius:22px; padding:14px; background:#f7f3eb; box-shadow:0 24px 80px rgba(0,0,0,.24); }
.modal-head { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.modal-head > div { display:grid; gap:2px; }.modal-head strong { font-size:14px; }.modal-head small { font-size:9px; color:var(--muted); }
.export-options { display:grid; gap:8px; margin-top:14px; }.export-choice { width:100%; }
.modal-note { margin:12px 2px 0; color:#706961; font-size:9px; line-height:1.5; }
.install-steps { margin:14px 0; padding-left:22px; color:#4f4942; font-size:11px; line-height:1.7; }
.toast { position:fixed; left:50%; bottom:calc(84px + env(safe-area-inset-bottom)); z-index:100; transform:translate(-50%,16px); opacity:0; pointer-events:none; padding:10px 14px; border-radius:999px; background:#171513; color:#fff; font-size:10px; font-weight:700; transition:.2s ease; white-space:nowrap; }
.toast.show { opacity:1; transform:translate(-50%,0); }
@media (min-width: 760px) {
  .app-shell { padding-bottom:0; }
  .app-header { padding:11px 18px; }
  .desktop-export { display:inline-flex; }
  .mobile-actionbar { display:none; }
  .workspace { display:grid; grid-template-columns:350px minmax(0,1fr); }
  .control-panel { position:sticky; inset:auto; top:64px; height:calc(100vh - 64px); z-index:12; transform:none; border-right:1px solid var(--line); }
  .control-panel.open { transform:none; }
  .sheet-header { display:none; }
  .sheet-scroll { height:calc(100vh - 64px); }
  .scrim { display:none !important; }
  .stage { padding:18px 26px 34px; }
  .mobile-format-row { max-width:520px; }
  .summary-row { max-width:720px; }
  .artboard-frame { width:min(100%,720px); padding:12px; border-radius:28px; }
  .artboard { border-radius:22px; }
  .edit-hint { width:min(100%,720px); }
  .desktop-creator { width:min(100%,720px); display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:12px; padding:0 3px; color:#6f685f; font-size:9px; }
  .desktop-creator a { text-decoration:none; font-weight:750; color:#413b34; }
}
@media (min-width: 1180px) {
  .workspace { grid-template-columns:380px minmax(0,1fr); }
  .stage { padding-left:34px; }
  .artboard-frame,.summary-row,.edit-hint,.desktop-creator { width:min(100%,760px); max-width:760px; }
}