/* Hueflo Screenshots design system — "Quiet workbench"
   Editorial, paper-and-ink, one coral action per screen. Matches hueflo.com.
   Production-usable: becomes public/assets/style.css (font paths below assume /assets/fonts/).
   Fonts: self-hosted woff2 (OFL): Instrument Serif (display), DM Sans variable (UI/body). Mono = system stack.
   No gradients / glow / shadow stacks in chrome. The only shadow is the 1px "lift" on dialogs & sheets. */

@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/instrument-serif.woff2") format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url("/assets/fonts/instrument-serif-italic.woff2") format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url("/assets/fonts/dm-sans-var.woff2") format("woff2")}

:root{
  /* Surfaces */
  --paper:#efe7d2;      /* page */
  --warm:#ece4cf;       /* sunken areas, table head */
  --bone:#f7f1de;       /* panels, inspector */
  --white:#fffdf6;      /* canvas surround, inputs */
  /* Text */
  --ink:#15140f;
  --muted:#5a5448;      /* 6:1 on paper */
  /* Lines */
  --line:#d4cbb6;       /* hairline */
  --line-dark:#b8ae99;  /* stronger hairline (decor) */
  --control:#857d69;    /* control borders: >=3:1 on bone/white (WCAG 1.4.11) */
  /* Accent */
  --coral:#ed6f5c;      /* primary action fill; ink text on it (6:1) */
  --coral-hover:#e45f4b;
  --coral-text:#9f3829; /* coral as text on light surfaces (6.6:1) */
  /* Support */
  --sage:#8b9a7b; --pine:#3e594a; --clay:#bc7a59; --sand:#d4af7f;
  --error:#a43c2b; --error-bg:#f6e0d8;
  --ok:#2f5a40;    --ok-bg:#e1ead6;
  --warn:#7a4b12;  --warn-bg:#f3e4c3;
  --info-bg:#e9e5d3;
  /* Type */
  --font-display:"Instrument Serif",Georgia,"Songti SC","Noto Serif CJK SC",serif;
  --font-ui:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Noto Sans CJK SC",sans-serif;
  --font-mono:"SFMono-Regular",ui-monospace,Menlo,Consolas,"Liberation Mono",monospace;
  /* Spacing (4px base) */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:72px;
  /* Shape */
  --r-sm:4px;--r:6px;--r-lg:10px;
  --wrap:1200px;--wrap-wide:1440px;--read:720px;
  --topbar-h:56px;--inspector-w:320px;--strip-w:160px;--editor-h:792px;
  --tap:44px;
  --focus:0 0 0 3px var(--white),0 0 0 5px var(--ink);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--topbar-h) + 16px)}
body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.6 var(--font-ui);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
img,svg{max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
button:disabled,.btn[aria-disabled="true"]{cursor:not-allowed;opacity:.5}
a{color:var(--coral-text);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:var(--r-sm)}
::selection{background:var(--coral);color:var(--ink)}
.skip{position:absolute;left:-9999px;top:8px;background:var(--ink);color:var(--white);padding:10px 16px;border-radius:var(--r);z-index:100}
.skip:focus{left:8px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mono{font-family:var(--font-mono);font-size:.86em;letter-spacing:0}
.muted{color:var(--muted)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--s5)}
.wrap-wide{max-width:var(--wrap-wide);margin:0 auto;padding:0 var(--s5)}
.wrap-read{max-width:var(--read)}

/* ---------- Typography ---------- */
h1,h2,h3{font-family:var(--font-display);font-weight:400;line-height:1.1;margin:0 0 var(--s3);letter-spacing:-.005em}
h1{font-size:clamp(2.4rem,1.2rem + 4.2vw,3.75rem)}
h2{font-size:clamp(1.8rem,1.2rem + 1.8vw,2.5rem)}
h3{font-size:1.5rem}
h4{font:600 .8rem/1.3 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 var(--s2)}
p{margin:0 0 var(--s4)}
.lede{font-size:1.125rem;line-height:1.55;color:var(--muted);max-width:60ch}
.eyebrow{font:500 .75rem/1 var(--font-mono);letter-spacing:.04em;color:var(--muted);text-transform:none}
.prose{font-size:1rem;line-height:1.7;max-width:var(--read)}
.prose ul,.prose ol{padding-left:1.2em;margin:0 0 var(--s4)}
.prose li{margin-bottom:var(--s2)}
.section{padding:var(--s7) 0;border-top:1px solid var(--line)}
.section>.wrap>h2{max-width:22ch}

/* ---------- Top bar ---------- */
.topbar{position:sticky;top:0;z-index:30;background:var(--paper);border-bottom:1px solid var(--line)}
.topbar-in{max-width:var(--wrap-wide);margin:0 auto;padding:0 var(--s5);min-height:var(--topbar-h);display:flex;align-items:center;gap:var(--s5)}
.brand{display:flex;align-items:baseline;gap:var(--s2);text-decoration:none;color:var(--ink);min-height:var(--tap);align-items:center}
.brand-word{font:400 1.75rem/1 var(--font-display);letter-spacing:-.01em}
.brand-label{font:500 .75rem/1 var(--font-mono);color:var(--muted);border-left:1px solid var(--line-dark);padding-left:var(--s2)}
.nav{display:flex;gap:var(--s1);margin-left:var(--s3)}
.nav a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 var(--s3);color:var(--ink);text-decoration:none;border-radius:var(--r)}
.nav a:hover{background:var(--warm)}
.nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--ink)}
.topbar-actions{margin-left:auto;display:flex;align-items:center;gap:var(--s3)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:var(--tap);padding:0 var(--s4);border:1px solid transparent;border-radius:var(--r);font-weight:600;font-size:.9375rem;line-height:1.2;text-decoration:none;white-space:nowrap;transition:background-color .12s,border-color .12s}
.btn-primary{background:var(--coral);color:var(--ink);border-color:var(--coral)}
.btn-primary:hover{background:var(--coral-hover);border-color:var(--coral-hover)}
.btn-secondary{background:var(--ink);color:var(--white);border-color:var(--ink)}
.btn-secondary:hover{background:#2b2a22}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--control)}
.btn-ghost:hover{background:var(--warm)}
.btn-link{background:none;border:0;padding:0;min-height:var(--tap);color:var(--coral-text);text-decoration:underline;font-weight:500}
.btn-sm{min-height:36px;padding:0 var(--s3);font-size:.875rem}
.btn-sm.tap{min-height:var(--tap)}
.btn-block{width:100%}
.btn-lg{min-height:52px;font-size:1rem}
.btn .ai-mark{flex:none}
.ai-mark{width:12px;height:12px;display:inline-block;vertical-align:-1px}   /* the ONE small mark, on AI actions only */
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:var(--tap);height:var(--tap);border:1px solid transparent;background:transparent;border-radius:var(--r);color:var(--ink)}
.icon-btn:hover{background:var(--warm);border-color:var(--line)}

/* ---------- Forms ---------- */
.field{display:grid;gap:6px;margin-bottom:var(--s3)}
.label{font-weight:600;font-size:.8125rem;color:var(--ink)}
.hint{font-size:.8125rem;color:var(--muted);line-height:1.45}
.input,.select,.textarea{width:100%;min-height:var(--tap);padding:9px 12px;background:var(--white);border:1px solid var(--control);border-radius:var(--r);color:var(--ink)}
.textarea{min-height:88px;resize:vertical;line-height:1.45}
.select{appearance:none;padding-right:34px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2315140f' stroke-width='1.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.input::placeholder,.textarea::placeholder{color:#6f685a}
.input:focus-visible,.select:focus-visible,.textarea:focus-visible{box-shadow:var(--focus);border-color:var(--ink)}
.input[aria-invalid="true"]{border-color:var(--error);box-shadow:inset 3px 0 0 var(--error)}
.input-row{display:grid;grid-template-columns:1fr auto;gap:var(--s2);align-items:end}
.field-error{color:var(--error);font-size:.8125rem;font-weight:500}
input[type="color"].color{width:var(--tap);height:var(--tap);padding:3px;background:var(--white);border:1px solid var(--control);border-radius:var(--r)}
input[type="range"]{width:100%;min-height:var(--tap);accent-color:var(--ink)}
/* checkbox / radio rows (44px hit area, native input kept for a11y) */
.check{display:flex;align-items:center;gap:var(--s3);min-height:var(--tap);padding:0 var(--s2);margin:0 calc(var(--s2) * -1);border-radius:var(--r);cursor:pointer}
.check:hover{background:var(--warm)}
.check input{appearance:none;flex:none;width:20px;height:20px;margin:0;background:var(--white);border:1.5px solid var(--control);border-radius:var(--r-sm);display:grid;place-content:center;cursor:pointer}
.check input[type="radio"]{border-radius:50%}
.check input:checked{background:var(--ink);border-color:var(--ink)}
.check input[type="checkbox"]:checked::after{content:"";width:10px;height:6px;border:solid var(--white);border-width:0 0 2px 2px;transform:rotate(-45deg) translate(1px,-1px)}
.check input[type="radio"]:checked::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--white)}
.check input:focus-visible{box-shadow:var(--focus)}
.check-text{flex:1;min-width:0;font-size:.9375rem}
.check-meta{font:.78rem/1 var(--font-mono);color:var(--muted);white-space:nowrap}
.check-group{margin-bottom:var(--s3)}

/* segmented control (portrait/landscape, PNG/JPEG, frame mode) */
.seg{display:inline-flex;padding:2px;background:var(--warm);border:1px solid var(--control);border-radius:var(--r-lg)}
.seg.full{display:flex;width:100%}
.seg>label,.seg>button{position:relative;flex:1;display:inline-flex;align-items:center;justify-content:center;min-height:40px;min-width:var(--tap);padding:0 var(--s3);border-radius:var(--r);border:0;background:transparent;font-weight:500;font-size:.875rem;cursor:pointer;white-space:nowrap}
.seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.seg>label:has(input:checked),.seg>button[aria-pressed="true"]{background:var(--ink);color:var(--white)}
.seg>label:has(input:focus-visible),.seg>button:focus-visible{box-shadow:var(--focus)}

/* ---------- Size tabs (pixel size in mono) ---------- */
.size-tabs{display:flex;flex-wrap:wrap;gap:var(--s2);padding:2px 2px var(--s2);scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.size-tab{flex:none;display:grid;gap:2px;text-align:left;min-height:var(--tap);padding:6px 12px;background:transparent;border:1px solid var(--line-dark);border-radius:var(--r);color:var(--ink)}
.size-tab:hover{background:var(--warm)}
.size-tab .st-name{font-weight:600;font-size:.8125rem;line-height:1.2}
.size-tab .st-px{font:.78rem/1.2 var(--font-mono);color:var(--muted)}
.size-tab[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:var(--white)}
.size-tab[aria-selected="true"] .st-px{color:#d9d2bd}

/* ---------- Template thumbnails (Layout) ---------- */
.tpl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2)}
.tpl{display:grid;gap:4px;justify-items:center;padding:6px 2px 4px;background:var(--white);border:1px solid var(--line-dark);border-radius:var(--r);min-height:var(--tap);text-align:center;font-size:.6875rem;line-height:1.15;color:var(--muted);cursor:pointer}
.tpl svg{width:100%;max-width:56px;height:auto;display:block}
.tpl:hover{border-color:var(--ink)}
.tpl[aria-pressed="true"]{border:2px solid var(--ink);color:var(--ink);font-weight:600;padding:5px 1px 3px}
.tpl .tpl-name{font-size:.72rem}

/* ---------- Credits chip, chips, tags ---------- */
.chip{display:inline-flex;align-items:center;gap:var(--s2);min-height:36px;padding:0 var(--s3);border:1px solid var(--control);border-radius:999px;background:var(--bone);font-weight:600;font-size:.875rem;text-decoration:none;color:var(--ink)}
a.chip:hover,button.chip:hover{background:var(--warm)}
.chip .dot{width:8px;height:8px;border-radius:50%;background:var(--pine)}
.chip .chip-n{font-family:var(--font-mono);font-weight:500}
.chip.low .dot{background:var(--coral-text)}
.tag{display:inline-block;padding:2px 8px;border:1px solid var(--line-dark);border-radius:var(--r-sm);font:500 .75rem/1.4 var(--font-mono);color:var(--muted)}
.cost{font:500 .75rem/1 var(--font-mono);color:var(--muted)}

/* ---------- Notices ---------- */
.notice{display:flex;gap:var(--s3);padding:var(--s3) var(--s4);border:1px solid var(--line-dark);border-left-width:4px;border-radius:var(--r);background:var(--info-bg);font-size:.875rem;line-height:1.5}
.notice strong{display:block;margin-bottom:2px}
.notice p{margin:0}
.notice .notice-actions{display:flex;gap:var(--s2);margin-top:var(--s2);flex-wrap:wrap}
.notice-info{border-left-color:var(--muted)}
.notice-warn{background:var(--warn-bg);border-left-color:var(--warn)}
.notice-error{background:var(--error-bg);border-left-color:var(--error)}
.notice-ok{background:var(--ok-bg);border-left-color:var(--ok)}
.notice-soon{background:var(--bone);border-left-color:var(--sand);border-style:dashed;border-left-style:solid}
.notice-icon{flex:none;width:18px;height:18px;margin-top:2px}

/* ---------- Progress text (no percentages) ---------- */
.progress-text{display:flex;align-items:center;gap:var(--s3);min-height:var(--tap);font-weight:500}
.progress-text .spin{flex:none;width:16px;height:16px;border:2px solid var(--line-dark);border-top-color:var(--ink);border-radius:50%;animation:spin .9s linear infinite}
.progress-text .step{font:.8125rem var(--font-mono);color:var(--muted)}
@keyframes spin{to{transform:rotate(360deg)}}
.progress-count{font:.875rem var(--font-mono)}
.progress-bar{height:4px;background:var(--line);border-radius:2px;overflow:hidden}      /* determinate only: true file count, never fake % */
.progress-bar>i{display:block;height:100%;background:var(--ink)}

/* ---------- Empty / error states ---------- */
.state{display:grid;justify-items:center;gap:var(--s3);text-align:center;padding:var(--s6) var(--s5)}
.state-title{font:400 1.75rem/1.1 var(--font-display);margin:0}
.state p{margin:0;max-width:44ch;color:var(--muted)}
.dropzone{border:1.5px dashed var(--control);border-radius:var(--r-lg);background:var(--white)}
.dropzone.is-over{border-style:solid;border-color:var(--ink);background:var(--bone)}
.state-error .state-title{color:var(--error)}

/* ---------- Dialogs & toasts ---------- */
dialog.dialog,.dialog{width:min(520px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:0;border:1px solid var(--ink);border-radius:var(--r-lg);background:var(--bone);color:var(--ink);box-shadow:0 1px 0 var(--ink)}
dialog.dialog::backdrop{background:rgba(21,20,15,.55)}
.dialog-head{display:flex;align-items:flex-start;gap:var(--s3);padding:var(--s5) var(--s5) var(--s3)}
.dialog-head h2,.dialog-head h3{font-size:1.75rem;margin:0;flex:1}
.dialog-body{padding:0 var(--s5) var(--s4)}
.dialog-foot{display:flex;flex-wrap:wrap;gap:var(--s2);justify-content:flex-end;padding:var(--s3) var(--s5) var(--s5)}
.packs{display:grid;gap:var(--s2);margin:var(--s3) 0}
.pack{display:grid;grid-template-columns:auto 1fr auto;gap:var(--s3);align-items:center;min-height:64px;padding:var(--s3) var(--s4);background:var(--white);border:1px solid var(--control);border-radius:var(--r);cursor:pointer}
.pack:has(input:checked){border:2px solid var(--ink);padding:calc(var(--s3) - 1px) calc(var(--s4) - 1px)}
.pack:has(input:focus-visible){box-shadow:var(--focus)}
.pack input{appearance:none;width:20px;height:20px;margin:0;border:1.5px solid var(--control);border-radius:50%;background:var(--white);display:grid;place-content:center}
.pack input:checked{background:var(--ink);border-color:var(--ink)}
.pack input:checked::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--white)}
.pack-name{font-weight:600}
.pack-sub{font-size:.8125rem;color:var(--muted)}
.pack-price{font:400 1.75rem/1 var(--font-display)}
.toasts{position:fixed;right:var(--s5);bottom:var(--s5);z-index:60;display:grid;gap:var(--s2);width:min(380px,calc(100vw - 32px))}
.toast{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s3) var(--s4);background:var(--ink);color:var(--white);border-radius:var(--r);font-size:.875rem;line-height:1.45}
.toast a,.toast .btn-link{color:#ffd0c7}
.toast-ok{border-left:4px solid var(--sage)}
.toast-error{border-left:4px solid var(--coral)}
.toast .toast-x{margin-left:auto;background:none;border:0;color:inherit;min-width:var(--tap);min-height:var(--tap);margin:-10px -12px -10px auto}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line-dark);border-radius:var(--r);background:var(--bone);-webkit-overflow-scrolling:touch}
.table{width:100%;border-collapse:collapse;font-size:.9375rem;min-width:520px}
.table caption{caption-side:top;text-align:left;padding:var(--s3) var(--s4);font-weight:600;border-bottom:1px solid var(--line-dark)}
.table th,.table td{padding:10px var(--s4);text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.table thead th{background:var(--warm);font-size:.8125rem;font-weight:600;border-bottom:1px solid var(--line-dark)}
.table tbody tr:last-child td,.table tbody tr:last-child th{border-bottom:0}
.table tbody th{font-weight:600}
.table .px,.table td.px{font-family:var(--font-mono);font-size:.875rem;white-space:nowrap}
.table-note{font-size:.8125rem;color:var(--muted);margin:var(--s2) 0 var(--s5)}
.table-note .mono{color:var(--ink)}

/* ---------- Breadcrumbs, TOC, meta ---------- */
.crumbs{padding:var(--s4) 0 var(--s2);font-size:.875rem}
.crumbs ol{display:flex;flex-wrap:wrap;gap:4px 0;list-style:none;margin:0;padding:0}
.crumbs li{display:flex;align-items:center}
.crumbs li+li::before{content:"›";margin:0 var(--s2);color:var(--muted)}
.crumbs a{display:inline-flex;align-items:center;min-height:var(--tap);color:var(--ink)}
.crumbs [aria-current]{color:var(--muted)}
.meta-line{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);font:.8125rem/1.5 var(--font-mono);color:var(--muted)}
.meta-line a{color:var(--coral-text)}
.toc{background:var(--bone);border:1px solid var(--line-dark);border-radius:var(--r);padding:var(--s4)}
.toc summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;min-height:var(--tap);font-weight:600;border-radius:var(--r-sm)}
.toc summary::-webkit-details-marker{display:none}
.toc summary::after{content:"+";font:400 1.4rem/1 var(--font-mono)}
.toc[open] summary::after{content:"–"}
.toc ol{list-style:none;margin:var(--s2) 0 0;padding:0;display:grid;gap:0}
.toc a{display:flex;align-items:center;min-height:36px;padding:2px var(--s3);margin-left:calc(var(--s3) * -1);border-left:2px solid transparent;color:var(--muted);text-decoration:none;font-size:.875rem;line-height:1.3}
.toc a:hover{color:var(--ink);background:var(--warm)}
.toc a[aria-current="true"]{color:var(--ink);font-weight:600;border-left-color:var(--coral)}
.toc-title{font:600 .8rem/1 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

/* ---------- Callout (quotes) & cards ---------- */
.callout{margin:var(--s5) 0;padding:var(--s4) var(--s5);background:var(--white);border:1px solid var(--line-dark);border-left:4px solid var(--ink);border-radius:var(--r)}
.callout blockquote{margin:0 0 var(--s2);font:400 1.375rem/1.35 var(--font-display)}
.callout cite{font:normal .8125rem/1.4 var(--font-mono);color:var(--muted)}
.callout cite a{color:var(--coral-text)}
.card{background:var(--bone);border:1px solid var(--line-dark);border-radius:var(--r-lg);padding:var(--s5)}
.card h2,.card h3{font-size:1.5rem;margin-bottom:var(--s2)}
.card p{color:var(--muted)}
.card-cta{display:grid;gap:var(--s3);justify-items:start}
.card-cta p{margin:0}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);list-style:none;margin:var(--s5) 0 0;padding:0;counter-reset:s}
.steps li{counter-increment:s;padding-top:var(--s4);border-top:2px solid var(--ink)}
.steps li::before{content:"0" counter(s);display:block;font:500 .8125rem/1 var(--font-mono);color:var(--muted);margin-bottom:var(--s3)}
.steps h3{font-size:1.5rem}
.steps p{color:var(--muted);margin:0}
.link-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s6)}
.link-list{list-style:none;margin:0;padding:0}
.link-list li{border-top:1px solid var(--line)}
.link-list a{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);min-height:var(--tap);padding:8px 0;color:var(--ink);text-decoration:none}
.link-list a:hover{color:var(--coral-text)}
.link-list a span{font:.78rem var(--font-mono);color:var(--muted)}
.price-rows{border-top:1px solid var(--ink);max-width:720px}
.price-row{display:grid;grid-template-columns:1fr auto;gap:var(--s2) var(--s4);align-items:baseline;padding:var(--s4) 0;border-bottom:1px solid var(--line-dark)}
.price-row h3{font-size:1.5rem;margin:0}
.price-row p{grid-column:1;margin:0;color:var(--muted)}
.price-amt{grid-row:1;grid-column:2;font:400 2rem/1 var(--font-display);text-align:right}
.price-amt small{display:block;font:.75rem var(--font-mono);color:var(--muted);margin-top:4px}

/* ---------- FAQ (details) ---------- */
.faq{border-top:1px solid var(--ink);max-width:var(--read)}
.faq details{border-bottom:1px solid var(--line-dark)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--s4);min-height:56px;padding:var(--s3) 0;font-weight:600;font-size:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font:400 1.5rem/1 var(--font-mono);width:var(--tap);text-align:center}
.faq details[open] summary::after{content:"–"}
.faq summary:focus-visible{box-shadow:var(--focus)}
.faq .faq-a{padding:0 var(--s7) var(--s4) 0;color:var(--muted);line-height:1.65}
.faq .faq-a p:last-child{margin-bottom:0}

/* ---------- Footer ---------- */
.footer{background:var(--warm);border-top:1px solid var(--line-dark);padding:var(--s7) 0 var(--s6);margin-top:var(--s8)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--s6)}
.footer h2{font:600 .8rem/1.3 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 var(--s2)}
.footer ul{list-style:none;margin:0;padding:0}
.footer li a{display:flex;align-items:center;min-height:var(--tap);color:var(--ink)}
.footer-brand .brand-word{font-size:2rem}
.footer-brand p{color:var(--muted);max-width:34ch;margin:var(--s2) 0 0}
.legal{margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--line-dark);font-size:.75rem;line-height:1.55;color:var(--muted);max-width:92ch}   /* 12px legal line */

/* ============================================================
   EDITOR  (#editor — the hero; renders without JS)
   ============================================================ */
.tool-head{padding-top:var(--s6);padding-bottom:var(--s5)}
.tool-head h1{margin-bottom:var(--s2)}
.tool-head .lede{max-width:72ch}
.editor{max-width:var(--wrap-wide);margin:0 auto;padding:0 var(--s5)}
.editor-grid{display:grid;grid-template-columns:var(--strip-w) minmax(0,1fr) var(--inspector-w);height:var(--editor-h);border:1px solid var(--line-dark);border-radius:var(--r-lg);background:var(--bone);overflow:hidden}
.pane-title{font:600 .75rem/1 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

/* slides strip */
.slides{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s3);border-right:1px solid var(--line-dark);overflow:auto;background:var(--bone)}
.slides-head{display:flex;justify-content:space-between;align-items:center}
.slides-list{display:grid;gap:var(--s3);list-style:none;margin:0;padding:0}
.slide-thumb{position:relative;display:block;width:100%;padding:0;border:1px solid var(--line-dark);border-radius:var(--r);background:var(--white);overflow:hidden;aspect-ratio:9/19.5}
.slide-thumb svg,.slide-thumb img{display:block;width:100%;height:100%}
.slide-thumb[aria-current="true"]{border:2px solid var(--ink);outline:2px solid var(--coral);outline-offset:1px}
.slide-thumb .slide-n{position:absolute;left:4px;top:4px;min-width:20px;padding:1px 5px;background:var(--ink);color:var(--white);border-radius:3px;font:.7rem/1.3 var(--font-mono)}
.slide-item{position:relative}
.slide-tools{display:flex;justify-content:space-between;margin-top:2px}
.slide-tools .icon-btn{width:var(--tap);height:36px}
.slide-add{display:grid;place-items:center;min-height:var(--tap);border:1.5px dashed var(--control);border-radius:var(--r);background:transparent;font-weight:600;font-size:.8125rem;color:var(--ink)}
.slide-add:hover{background:var(--warm)}
.slide-count{font:.75rem var(--font-mono);color:var(--muted)}

/* canvas pane */
.canvas-pane{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--white)}
.canvas-bar{display:flex;gap:var(--s3);align-items:center;justify-content:space-between;padding:var(--s3) var(--s4) 0;border-bottom:1px solid var(--line);padding-bottom:var(--s2);min-width:0}
.canvas-bar .size-tabs{flex:1;min-width:0}
.canvas-wrap{flex:1;min-height:0;display:grid;grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr);justify-items:center;align-items:center;padding:var(--s5);background:var(--white);background-image:none}
.stage{display:block;max-width:100%;max-height:100%;height:100%;aspect-ratio:var(--ar,1320/2868);border:1px solid var(--line-dark);background:var(--paper)}
.stage>svg{display:block;width:100%;height:100%}
.canvas-foot{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);align-items:center;justify-content:space-between;padding:var(--s2) var(--s4) var(--s3);border-top:1px solid var(--line);font-size:.8125rem;color:var(--muted)}
.canvas-foot .mono{color:var(--ink)}
.guide-toggle{display:inline-flex;align-items:center;gap:var(--s2)}

/* rail = inspector + sticky export footer */
.rail{display:flex;flex-direction:column;min-height:0;border-left:1px solid var(--line-dark);background:var(--bone)}
.inspector{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.insp-sec{border-bottom:1px solid var(--line)}
.insp-sec>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:0 var(--s4);font-weight:600;font-size:.9375rem}
.insp-sec>summary::-webkit-details-marker{display:none}
.insp-sec>summary::after{content:"+";font:400 1.25rem/1 var(--font-mono);color:var(--muted)}
.insp-sec[open]>summary::after{content:"–"}
.insp-sec>summary:focus-visible{box-shadow:inset 0 0 0 3px var(--ink)}
.insp-sec>summary .sum-meta{margin-left:auto;margin-right:var(--s3);font:.75rem var(--font-mono);color:var(--muted);font-weight:400}
.insp-body{padding:0 var(--s4) var(--s4)}
.insp-body h4{margin-top:var(--s3)}
.insp-body h4:first-child{margin-top:0}
.insp-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.ai-action{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:var(--tap);padding:0 var(--s3);background:transparent;border:1px solid var(--control);border-radius:var(--r);font-weight:600;font-size:.875rem;text-align:left}
.ai-action:hover{background:var(--warm)}
.ai-action .ai-label{display:inline-flex;align-items:center;gap:var(--s2)}
.bg-swatches{display:flex;gap:var(--s2);flex-wrap:wrap}
.swatch{width:var(--tap);height:var(--tap);border-radius:var(--r);border:1px solid var(--control);padding:0}
.swatch[aria-pressed="true"]{box-shadow:0 0 0 2px var(--bone),0 0 0 4px var(--ink)}
.insp-foot{padding:var(--s3) var(--s4) var(--s4);border-top:1px solid var(--ink);background:var(--bone);display:grid;gap:var(--s2)}
.insp-foot .hint{margin:0}
.file-preview{font:.78rem/1.5 var(--font-mono);background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:var(--s2) var(--s3);word-break:break-all}
.insp-foot .file-preview{display:none}

/* mobile-only parts hidden on desktop */
.mtabs,.sheet-head,.slide-manage{display:none}
.mtabs{list-style:none}

/* mobile slide manager (inside the Slides sheet) */
.slide-row{display:grid;grid-template-columns:44px 1fr auto;gap:var(--s3);align-items:center;padding:var(--s2) 0;border-bottom:1px solid var(--line)}
.slide-row .mini{width:44px;aspect-ratio:9/19.5;border:1px solid var(--line-dark);border-radius:var(--r-sm);overflow:hidden;background:var(--white)}
.slide-row .mini svg{display:block;width:100%;height:100%}
.slide-row .tools{display:flex}

/* ---------- Generic frame + demo figures ---------- */
.fig-row{display:flex;gap:var(--s6);align-items:flex-end;justify-content:center;padding:var(--s6);background:var(--white);border:1px solid var(--line-dark);border-radius:var(--r-lg)}
.fig-row figure{margin:0;text-align:center}
.fig-row figcaption{margin-top:var(--s3);font-size:.8125rem;color:var(--muted)}
.fig-row figcaption .mono{display:block;color:var(--ink)}
.fig-row svg{display:block;height:auto}
.two-col{display:grid;grid-template-columns:1fr 1.1fr;gap:var(--s7);align-items:center}
.guide-layout{display:grid;grid-template-columns:240px minmax(0,1fr) 280px;gap:var(--s6);align-items:start}
.guide-layout>*{min-width:0}
.card .btn{white-space:normal;text-align:center;height:auto;padding-top:10px;padding-bottom:10px}
.spec .dialog{width:100%;max-height:none}
.sticky{position:sticky;top:calc(var(--topbar-h) + 16px)}
.guide-main>section{padding-top:var(--s6);margin-top:var(--s6);border-top:1px solid var(--line)}
.guide-main>section:first-of-type{border-top:0;margin-top:0;padding-top:0}
.guide-main h2{margin-bottom:var(--s4)}
.guide-main h3{margin-top:var(--s5)}

/* ---------- States sheet helpers (mockups only) ---------- */
.spec-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--s5)}
.spec{border:1px dashed var(--line-dark);border-radius:var(--r-lg);padding:var(--s4);background:var(--paper)}
.spec>.spec-label{font:.75rem var(--font-mono);color:var(--muted);margin-bottom:var(--s3);display:block}
.frame-box{background:var(--bone);border:1px solid var(--line-dark);border-radius:var(--r)}
.swatch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--s3)}
.sw{border:1px solid var(--line-dark);border-radius:var(--r);overflow:hidden;background:var(--white)}
.sw i{display:block;height:56px}
.sw span{display:block;padding:6px 8px;font:.75rem/1.4 var(--font-mono)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1180px){
  :root{--inspector-w:296px;--strip-w:156px}
  .guide-layout{grid-template-columns:220px minmax(0,1fr)}
  .guide-aside{grid-column:1 / -1}
  .guide-aside .sticky{position:static}
}
@media (max-width:900px){
  .steps,.link-cols,.footer-grid,.two-col{grid-template-columns:1fr}
  .footer-grid{gap:var(--s5)}
  .guide-layout{grid-template-columns:minmax(0,1fr)}
  .guide-toc-col .sticky{position:static}
  .fig-row{flex-direction:column;align-items:center}
}

/* ---------- Mobile (<= 760px): single preview + bottom tab bar + sheets ---------- */
@media (max-width:760px){
  :root{--s7:36px;--s8:48px}
  body{font-size:15px}
  .wrap,.wrap-wide,.editor,.topbar-in{padding-left:var(--s4);padding-right:var(--s4)}
  .topbar-in{flex-wrap:wrap;gap:0 var(--s3);padding-top:4px}
  .brand-word{font-size:1.6rem}
  .topbar-actions{gap:var(--s2)}
  .nav{order:3;flex:1 0 100%;margin:0 calc(var(--s2) * -1);overflow-x:auto;gap:0;border-top:1px solid var(--line)}
  .nav a{padding:0 var(--s3);white-space:nowrap}
  .topbar-actions .btn{padding:0 var(--s3)}
  .tool-head{padding-top:var(--s5);padding-bottom:var(--s4)}
  .section{padding:var(--s6) 0}
  .price-row{grid-template-columns:1fr}
  .price-amt{grid-row:auto;grid-column:1;text-align:left}
  .faq .faq-a{padding-right:0}
  .callout{padding:var(--s4)}
  .legal{font-size:.75rem}

  /* editor: stacked column */
  .editor{padding-left:0;padding-right:0}
  .editor-grid{display:flex;flex-direction:column;height:auto;border-left:0;border-right:0;border-radius:0;overflow:visible}
  .canvas-pane{order:1;background:var(--white)}
  .canvas-bar{flex-direction:column;align-items:stretch;gap:var(--s2);padding:var(--s2) var(--s4) 0}
  .size-tabs{flex-wrap:nowrap;overflow-x:auto}
  .canvas-wrap{padding:var(--s4);min-height:0;grid-template-rows:auto}
  .stage{height:auto;width:auto;max-height:60vh;max-width:100%;width:min(100%,calc(60vh * var(--ar-n,.46)))}
  .canvas-foot{padding:var(--s2) var(--s4)}
  .slides{order:2;flex-direction:column;border-right:0;border-top:1px solid var(--line-dark);padding:var(--s3) var(--s4) var(--s4);overflow:visible}
  .slides-list{display:flex;overflow-x:auto;gap:var(--s2);padding-bottom:var(--s2)}
  .slides-list>li{flex:none;width:64px}
  .slide-tools{display:none}
  .slide-add-li{align-self:stretch}
  .rail{display:contents}
  .insp-foot{order:3;position:static;border-top:1px solid var(--line-dark);padding:var(--s3) var(--s4)}
  .insp-foot .btn{min-height:52px}
  .mtabs{order:4;display:grid;grid-template-columns:repeat(4,1fr);position:sticky;bottom:0;z-index:40;margin:0;padding:0;background:var(--paper);border-top:1px solid var(--ink)}
  .mtabs button{min-height:56px;display:grid;place-items:center;align-content:center;gap:2px;border:0;background:transparent;font-weight:600;font-size:.75rem;color:var(--muted)}
  .mtabs button svg{width:20px;height:20px}
  .mtabs button[aria-pressed="true"]{color:var(--ink);box-shadow:inset 0 3px 0 var(--coral)}
  .mtabs button:focus-visible{box-shadow:inset 0 0 0 3px var(--ink)}

  /* inspector becomes a bottom sheet */
  .inspector{position:fixed;left:0;right:0;bottom:56px;z-index:50;max-height:68dvh;background:var(--bone);border-top:1px solid var(--ink);border-radius:var(--r-lg) var(--r-lg) 0 0;box-shadow:0 -1px 0 var(--ink);display:none;overflow-y:auto}
  .editor[data-sheet] .inspector{display:block;bottom:132px;max-height:calc(100dvh - 132px - 72px)}
  .editor[data-sheet] .insp-foot{position:fixed;left:0;right:0;bottom:56px;z-index:52;border-top:1px solid var(--ink);padding:12px var(--s4)}
  .editor[data-sheet] .insp-foot .hint{display:none}
  .inspector .insp-sec{display:none}
  .sheet-head{display:flex;align-items:center;justify-content:space-between;padding:0 var(--s4);min-height:52px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bone);z-index:1}
  .sheet-head h2{font:400 1.5rem/1 var(--font-display);margin:0}
  .editor[data-sheet="text"] .insp-sec[data-g~="text"],
  .editor[data-sheet="style"] .insp-sec[data-g~="style"],
  .editor[data-sheet="export"] .insp-sec[data-g~="export"]{display:block}
  .editor[data-sheet="slides"] .slide-manage{display:block}
  .editor[data-sheet] .insp-sec>summary{display:none}
  .editor[data-sheet] .insp-sec>.insp-body{display:block;padding-top:var(--s4)}
  .tpl-grid{grid-template-columns:repeat(4,1fr)}
  .toasts{left:var(--s4);right:var(--s4);bottom:72px;width:auto}
  .dialog-head,.dialog-body,.dialog-foot{padding-left:var(--s4);padding-right:var(--s4)}
  .dialog-foot .btn{flex:1}
  .guide-main .table{min-width:480px}
  .spec-grid{grid-template-columns:minmax(0,1fr)}
  .fig-row{padding:var(--s4)}
}
@media (max-width:420px){
  .brand-label{font-size:.6875rem;padding-left:6px}
  .tpl .tpl-name{font-size:.68rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .progress-text .spin{animation:none;border-top-color:var(--line-dark);border-right-color:var(--ink)}
}
@media (forced-colors:active){
  .btn,.size-tab,.tpl,.seg>label,.pack{border:1px solid ButtonText}
  .size-tab[aria-selected="true"],.tpl[aria-pressed="true"]{outline:2px solid Highlight}
}
@media print{.topbar,.mtabs,.toasts{display:none}}
.guide-main>header{margin-bottom:var(--s6)}

/* Example output (static WebP exports from the editor) */
.examples{margin:var(--s5) 0 0}
.ex-row{display:flex;gap:var(--s4);align-items:flex-end;overflow-x:auto;padding-bottom:var(--s2);scroll-snap-type:x proximity}
.ex-item{flex:0 0 auto;display:flex;flex-direction:column;gap:var(--s2);scroll-snap-align:start}
.ex-img{display:block;height:auto;max-height:440px;width:auto;max-width:min(78vw,640px);border-radius:10px;box-shadow:0 1px 2px rgba(21,20,15,.12),0 8px 24px rgba(21,20,15,.10)}
.ex-label{font-size:.75rem;color:var(--muted)}
.examples figcaption{margin-top:var(--s3)}
.prose-list{max-width:var(--read);padding-left:1.2em;line-height:1.7;margin:var(--s4) 0}
.prose-list li{margin-bottom:var(--s2)}
.code-block{max-width:var(--read);overflow-x:auto;padding:var(--s4);border:1px solid var(--control);border-radius:8px;background:var(--bone);font-size:.8125rem;line-height:1.7;margin:var(--s4) 0}
@media (max-width:640px){.ex-img{max-height:360px}}