/* PaintFromPhoto — site styles (self-hosted fonts, no external requests) */
@font-face{font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/inter-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/playfairdisplay-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Playfair Display";font-style:italic;font-weight:400 700;font-display:swap;src:url(/assets/fonts/playfairdisplay-italic-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --canvas:#F8F4EE;--paper:#FDFAF5;--frame:#C8A96E;--frame-dark:#8B6914;--gold-inner:#D4B87A;
  --ink:#2C2218;--muted:#8C7B6B;--line:#DDD0BC;--line-soft:#EDE5D8;--sage:#4A7C6B;--rust:#C4622D;
  --serif:"Playfair Display","Noto Serif","Noto Serif KR","Noto Serif JP","Noto Serif SC","Noto Serif TC","Noto Serif Devanagari","Noto Serif Bengali","Noto Serif Arabic","Noto Naskh Arabic","Noto Serif Thai","Noto Serif Ethiopic","Hiragino Mincho ProN","Yu Mincho","Songti SC","PMingLiU",Georgia,"Times New Roman",serif;
  --sans:Inter,"Noto Sans","Noto Sans KR","Noto Sans JP","Noto Sans SC","Noto Sans TC","Noto Sans Devanagari","Noto Sans Bengali","Noto Sans Gurmukhi","Noto Sans Gujarati","Noto Sans Tamil","Noto Sans Telugu","Noto Sans Kannada","Noto Sans Arabic","Noto Sans Thai","Noto Sans Ethiopic","Apple SD Gothic Neo","Hiragino Sans","Malgun Gothic","PingFang SC","PingFang TC","Microsoft YaHei","Microsoft JhengHei","Nirmala UI","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
img,canvas,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.25;margin:0 0 .4em}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em;padding-inline-start:1.25em}
.container{max-width:1024px;margin:0 auto;padding:0 16px}
.narrow{max-width:768px;margin:0 auto}
.narrower{max-width:640px;margin:0 auto}
.skip-link{position:absolute;top:8px;inset-inline-start:8px;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;background:var(--ink);color:#fff;padding:8px 12px;border-radius:3px;z-index:100}
.skip-link:focus{width:auto;height:auto;overflow:visible;clip:auto;clip-path:none}
:focus-visible{outline:2px solid var(--sage);outline-offset:2px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Header */
.site-header{position:sticky;top:0;z-index:20;background:rgba(248,244,238,.93);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--frame)}
.site-header .container{display:flex;align-items:center;gap:12px;padding-top:10px;padding-bottom:10px}
.brand{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.brand:hover{text-decoration:none}
.brand-mark{width:36px;height:36px;border-radius:3px;background:var(--frame-dark);display:grid;place-items:center;flex-shrink:0}
.brand-name{font-family:var(--serif);font-weight:600;font-size:1rem;line-height:1.2}
.brand-tag{font-size:.72rem;color:var(--muted);line-height:1.2}
.main-nav{display:flex;align-items:center;gap:4px}
.main-nav a{font-size:.8rem;font-weight:500;padding:4px 8px}
/* Language menu */
.lang-menu{position:relative;margin-inline-start:6px}
.lang-menu summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:500;padding:6px 10px;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--ink);white-space:nowrap;max-width:11rem}
.lang-menu summary span{overflow:hidden;text-overflow:ellipsis}
.lang-menu summary::-webkit-details-marker{display:none}
.lang-menu summary:hover{border-color:var(--frame)}
.lang-menu[open] summary{border-color:var(--frame-dark)}
.lang-panel{position:absolute;inset-inline-end:0;top:calc(100% + 8px);width:min(34rem,calc(100vw - 24px));max-height:min(70vh,520px);overflow:auto;background:var(--paper);border:1px solid var(--line);border-radius:8px;box-shadow:0 12px 32px rgba(44,34,24,.16);padding:12px;z-index:30}
.lang-title{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:2px 4px 8px}
.lang-panel ul,.footer-langs ul,.lang-grid{list-style:none;margin:0;padding:0}
.lang-panel ul{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.lang-panel a,.lang-grid a{display:flex;flex-direction:column;padding:6px 8px;border-radius:5px;line-height:1.25;color:var(--ink)}
.lang-panel a:hover,.lang-grid a:hover{background:var(--line-soft);text-decoration:none}
.lang-panel a[aria-current="true"],.lang-grid a[aria-current="true"]{background:var(--frame-dark);color:#FDF6E3}
.lang-panel a[aria-current="true"] .le,.lang-grid a[aria-current="true"] .le{color:#F1E4C3}
.lang-panel .ln,.lang-grid .ln{font-size:.85rem;font-weight:500}
.lang-panel .le,.lang-grid .le{font-size:.68rem;color:var(--muted)}
.lang-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:4px;margin-top:20px}
.footer-langs{border-top:1px solid var(--line-soft);padding-top:14px!important;padding-bottom:16px!important;display:block!important;text-align:start!important}
.footer-langs ul{display:flex;flex-wrap:wrap;gap:2px 4px}
.footer-langs a{font-size:.72rem;color:var(--muted);padding:2px 6px;border-radius:3px}
.footer-langs a:hover{color:var(--ink);background:var(--line-soft);text-decoration:none}
.footer-langs a[aria-current="true"]{color:var(--frame-dark);font-weight:600}
@media (max-width:640px){.main-nav a.nav-link{display:none}.brand-tag{display:none}.lang-menu summary{max-width:8rem}.lang-panel ul{grid-template-columns:1fr 1fr}.lang-panel{position:fixed;inset-inline:12px;top:64px;width:auto}}
@media (max-width:400px){.lang-panel ul{grid-template-columns:1fr}}

/* RTL */
[dir="rtl"] .arrow{transform:scaleX(-1)}
[dir="rtl"] .breadcrumb li+li::before{content:"‹"}
[dir="rtl"] .step-card .n,[dir="rtl"] .feature .dot{margin-inline:0}
[dir="rtl"] input[type="email"],[dir="rtl"] input[type="url"],[dir="rtl"] .legend-table .hex,[dir="rtl"] .mono{direction:ltr;unicode-bidi:isolate;text-align:end}
[dir="rtl"] .brand-name,[dir="rtl"] .site-footer .copy{unicode-bidi:isolate}
[dir="rtl"] .lang-panel .le,[dir="rtl"] .lang-grid .le{text-align:start}
[dir="rtl"] .legend-table th,[dir="rtl"] .legend-table td{text-align:start}
:lang(ar) body,:lang(ur) body,:lang(fa) body,body:lang(ar),body:lang(ur),body:lang(fa){line-height:1.75}
body:lang(hi),body:lang(mr),body:lang(bn),body:lang(pa),body:lang(gu),body:lang(ta),body:lang(te),body:lang(kn),body:lang(th),body:lang(am){line-height:1.7}
:lang(ar) h1,:lang(ur) h1,:lang(fa) h1,:lang(hi) h1,:lang(mr) h1,:lang(bn) h1,:lang(pa) h1,:lang(gu) h1,:lang(ta) h1,:lang(te) h1,:lang(kn) h1,:lang(th) h1,:lang(am) h1,:lang(ko) h1,:lang(ja) h1,:lang(zh-Hans) h1,:lang(zh-Hant) h1{font-style:normal;line-height:1.35}

/* Stepper */
.stepper{background:var(--paper);border-bottom:1px solid var(--line)}
.stepper ol{display:flex;align-items:center;list-style:none;margin:0;padding:12px 16px;max-width:1024px;margin:0 auto}
.stepper li{display:flex;align-items:center;flex:1}
.stepper li:last-child{flex:0}
.step{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:.625rem;font-weight:500;color:var(--muted)}
.step-num{width:28px;height:28px;border-radius:4px;background:#E8DDD0;color:var(--muted);display:grid;place-items:center;font-size:.75rem;font-weight:700;transition:background .2s}
.step.is-active{color:var(--frame-dark)}
.step.is-active .step-num{background:var(--frame);color:#fff}
.step.is-done .step-num{background:var(--sage);color:#fff}
.step-line{flex:1;height:1px;background:#D4C4AE;margin:0 8px}
@media (max-width:640px){.step span{display:none}}

/* Hero */
.hero{padding:48px 0 40px;text-align:center}
.hero h1{font-style:italic;font-size:clamp(1.85rem,4.2vw,2.5rem);margin:0 0 12px}
.lead{max-width:36rem;margin:0 auto;color:var(--muted);font-size:1rem}
.frame-box{max-width:36rem;margin:36px auto;background:var(--paper);border:12px solid var(--frame);outline:2px solid var(--frame-dark);box-shadow:inset 0 0 0 4px var(--gold-inner),4px 8px 28px rgba(44,34,24,.18);padding:24px}
.upload-zone{position:relative;border:2px dashed var(--frame);background:var(--paper);min-height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:28px;cursor:pointer;transition:all .18s ease;text-align:center;user-select:none}
.upload-zone:hover,.upload-zone:focus-visible{border-color:var(--frame-dark);background:#F9F4EC}
.upload-zone.is-dragging{border-color:var(--sage);background:#EEF4F2;transform:scale(1.01)}
.upload-zone .uz-title{font-weight:500;margin:0}
.upload-zone .uz-sub{font-size:.85rem;color:var(--muted);margin:4px 0 0}
.upload-zone .uz-formats{font-size:.75rem;color:var(--muted);opacity:.7;margin:4px 0 0}
.upload-zone svg{color:var(--frame);opacity:.55}
.upload-preview{display:none}
.upload-preview.is-visible{display:block}
.upload-preview img{width:100%;max-height:360px;object-fit:contain;background:#fff;border:1px solid var(--line)}
.upload-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 4px 0;font-size:.85rem}
.upload-meta .name{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}
.link-btn{background:none;border:0;padding:0;cursor:pointer;color:var(--frame-dark);font-weight:500;font-size:.85rem}
.link-btn:hover{text-decoration:underline}
.upload-error{color:var(--rust);font-size:.85rem;margin:10px 0 0;text-align:center;min-height:1em}
.sample-row{margin:14px 0 0;text-align:center;font-size:.8rem;color:var(--muted)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:.875rem;padding:10px 18px;border-radius:2px;border:0;cursor:pointer;transition:all .15s ease;text-decoration:none;line-height:1.2}
.btn:hover{text-decoration:none}
.btn-gold{background:var(--frame-dark);color:#FDF6E3;font-family:var(--serif);box-shadow:0 2px 8px rgba(139,105,20,.28)}
.btn-gold:hover:not(:disabled){background:#9B7A1A;box-shadow:0 4px 12px rgba(139,105,20,.42)}
.btn-gold:disabled{background:#C4B89A;color:var(--muted);cursor:not-allowed;box-shadow:none}
.btn-outline{background:transparent;border:2px solid var(--frame);color:var(--frame-dark)}
.btn-outline:hover:not(:disabled){background:#F5EFE4;border-color:var(--frame-dark)}
.btn-outline:disabled{opacity:.45;cursor:not-allowed}
.btn-sage{background:var(--sage);color:#fff;box-shadow:0 2px 8px rgba(74,124,107,.28)}
.btn-sage:hover:not(:disabled){background:#3D6B5A}
.btn-sage:disabled{background:#C4B89A;color:var(--muted);cursor:not-allowed;box-shadow:none}
.btn-block{width:100%}
.btn-lg{padding:14px 20px;font-size:1rem}

/* Feature cards */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:42rem;margin:0 auto;text-align:start}
.feature{display:flex;gap:12px;padding:12px 16px;background:var(--canvas);border:1px solid var(--frame);border-radius:3px}
.feature .dot{width:16px;height:16px;border-radius:50%;flex-shrink:0;margin-top:3px}
.feature h3{font-family:var(--sans);font-size:.875rem;font-weight:500;margin:0}
.feature p{font-size:.75rem;color:var(--muted);margin:4px 0 0;opacity:.9}
@media (max-width:640px){.features{grid-template-columns:1fr}}

/* Sections */
.band{padding:40px 0;border-top:1px solid var(--line-soft)}
.eyebrow{font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--frame);margin:0 0 6px}
.band h2{font-size:1.5rem;margin:0 0 6px}
.band .sub{font-size:.875rem;color:var(--muted);margin:0 0 28px}
.more-link{margin-top:24px;text-align:end;font-size:.875rem;font-weight:500}
.more-link a{color:var(--frame-dark)}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.card{background:var(--paper);border:1px solid var(--line);border-inline-start:3px solid var(--frame);border-radius:3px;padding:16px}
.card h3{font-size:.95rem;margin:0 0 6px}
.card>p{font-size:.75rem;color:var(--muted);margin:0 0 12px}
.card ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.card li{font-size:.75rem;display:flex;gap:8px;line-height:1.45}
.card li b{color:var(--frame-dark);font-weight:600;flex-shrink:0}
.card li span{color:var(--muted)}
@media (max-width:640px){.cards{grid-template-columns:1fr}}

/* How it works */
.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.step-card{background:var(--paper);border:1px solid var(--line);border-radius:3px;padding:18px 16px}
.step-card .n{width:32px;height:32px;border-radius:4px;background:var(--frame);color:#fff;display:grid;place-items:center;font-weight:700;font-size:.85rem;margin-bottom:10px}
.step-card h3{font-size:1rem;margin:0 0 6px}
.step-card p{font-size:.8rem;color:var(--muted);margin:0}
@media (max-width:860px){.steps-grid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.steps-grid{grid-template-columns:1fr}}

/* Example */
.example{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.example figure{margin:0;background:var(--paper);border:1px solid var(--line);padding:10px}
.example img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--line-soft);background:#fff}
.example figcaption{font-size:.75rem;color:var(--muted);margin-top:8px;text-align:center}
@media (max-width:640px){.example{grid-template-columns:1fr}}

/* Prose (guide, faq, legal) */
.prose{max-width:768px;margin:0 auto;padding:40px 0 56px}
.prose h1{font-size:clamp(1.7rem,3.6vw,2.2rem);margin:0 0 12px}
.prose .intro{color:var(--muted);font-size:1rem;margin-bottom:32px}
.prose h2{font-size:1.4rem;margin:40px 0 12px;padding-top:8px}
.prose h3{font-size:1.05rem;margin:22px 0 6px}
.prose p,.prose li{font-size:.95rem}
.prose li{margin-bottom:6px}
.prose .tips li{list-style:none;position:relative;padding-inline-start:24px}
.prose .tips{padding-inline-start:0}
.prose .tips li::before{content:"✓";position:absolute;inset-inline-start:0;color:var(--sage);font-weight:700}
.prose table{width:100%;border-collapse:collapse;font-size:.85rem;margin:12px 0 20px;background:var(--paper)}
.prose th,.prose td{border:1px solid var(--line);padding:8px 10px;text-align:start;vertical-align:top}
.prose th{background:#F3ECDF;font-weight:600}
.prose .cta{margin-top:40px;text-align:center}
.prose .meta{font-size:.75rem;color:var(--muted);margin-bottom:24px}
.breadcrumb{font-size:.75rem;color:var(--muted);margin:24px 0 0}
.breadcrumb ol{list-style:none;padding:0;margin:0;display:flex;gap:6px;flex-wrap:wrap}
.breadcrumb li+li::before{content:"›";margin-inline-end:6px;opacity:.6}
.supplies{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:16px 0}
.supplies .card h3{font-family:var(--sans);font-size:.9rem}
.supplies .card p{font-size:.8rem;margin:0}
@media (max-width:640px){.supplies{grid-template-columns:1fr}}

/* FAQ */
.faq{border:1px solid var(--line);border-radius:3px;overflow:hidden;margin-top:24px}
.faq details{background:var(--paper);border-bottom:1px solid var(--line-soft)}
.faq details:last-child{border-bottom:0}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;font-size:.875rem;font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .2s;flex-shrink:0;margin-inline-end:4px}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .faq-a{padding:0 20px 16px;font-size:.875rem;color:var(--muted)}
.faq .faq-a p{margin:0 0 8px}
.faq .faq-a p:last-child{margin:0}

/* Footer */
.site-footer{padding:24px 0;border-top:1px solid var(--line);background:var(--paper);margin-top:24px}
.site-footer .container{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.site-footer .note{font-family:var(--serif);font-style:italic;font-size:.75rem;color:var(--muted);margin:0}
.site-footer nav{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 16px;font-size:.75rem;color:var(--muted)}
.site-footer .copy{font-size:.75rem;color:var(--muted);opacity:.7;margin:0}
@media (min-width:640px){.site-footer .container{flex-direction:row;justify-content:space-between;text-align:start}}

/* ---------- Generator app ---------- */
.app{padding:24px 0 40px}
.app-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.app-head h1{font-size:1.5rem;font-style:italic;margin:0}
.app-head p{font-size:.85rem;color:var(--muted);margin:0}
.app-grid{display:grid;grid-template-columns:330px minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:900px){.app-grid{grid-template-columns:1fr}}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:3px;padding:16px}
.panel+.panel{margin-top:16px}
.panel h2{font-size:1rem;margin:0 0 12px;display:flex;align-items:center;justify-content:space-between}
.field{margin-bottom:16px}
.field:last-child{margin-bottom:0}
.field-label{display:flex;justify-content:space-between;align-items:baseline;font-size:.75rem;font-weight:600;color:var(--ink);margin-bottom:6px}
.field-label .val{color:var(--frame-dark);font-variant-numeric:tabular-nums}
.field-help{font-size:.7rem;color:var(--muted);margin:6px 0 0}
.seg{display:flex;border:1px solid var(--line);border-radius:3px;overflow:hidden;background:#fff}
.seg button{flex:1;padding:8px 6px;font-size:.75rem;background:transparent;border:0;border-inline-end:1px solid var(--line);cursor:pointer;color:var(--muted);white-space:nowrap}
.seg button:last-child{border-inline-end:0}
.seg button[aria-pressed="true"]{background:var(--frame);color:#fff;font-weight:600}
.seg button:hover:not([aria-pressed="true"]){background:#F5EFE4}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips button{padding:6px 10px;font-size:.72rem;border:1px solid var(--line);border-radius:3px;background:#fff;cursor:pointer;color:var(--ink);line-height:1.2}
.chips button small{display:block;font-size:.6rem;color:var(--muted);font-weight:400}
.chips button[aria-pressed="true"]{border-color:var(--frame-dark);background:#F5EFE4;box-shadow:inset 0 0 0 1px var(--frame-dark)}
.chips button[aria-pressed="true"] small{color:var(--frame-dark)}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:10px}
.tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:6px 8px;font-size:.72rem;color:var(--muted);cursor:pointer;margin-bottom:-1px}
.tabs button[aria-selected="true"]{color:var(--frame-dark);border-bottom-color:var(--frame-dark);font-weight:600}
input[type=range]{width:100%;accent-color:var(--frame);margin:6px 0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--frame);cursor:pointer;box-shadow:0 1px 4px rgba(139,105,20,.35)}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border:0;border-radius:50%;background:var(--frame);cursor:pointer}
.hint{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:.7rem;padding:8px 10px;border-radius:3px;margin-top:8px}
.hint.good{background:#EEF4F2;color:#2F5A4B}
.hint.warn{background:#FBEFE7;color:#8A3D14}
.hint.info{background:#F5EFE4;color:var(--frame-dark)}
.hint button{background:none;border:1px solid currentColor;border-radius:3px;padding:2px 8px;font-size:.68rem;cursor:pointer;color:inherit;white-space:nowrap}
.crop-box{position:relative;background:#eee;border:1px solid var(--line);overflow:hidden;touch-action:none;cursor:grab;margin-top:8px}
.crop-box:active{cursor:grabbing}
.crop-box canvas{width:100%;height:auto}
.crop-tools{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:.7rem;color:var(--muted)}
.crop-tools input{flex:1;margin:0}

.preview-panel{padding:12px}
.preview-tabs{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.preview-stage{position:relative;background:#fff;border:1px solid var(--line);min-height:320px;display:grid;place-items:center;overflow:hidden}
.preview-stage canvas,.preview-stage img{max-height:78vh;width:auto;max-width:100%;object-fit:contain}
.preview-empty{text-align:center;color:var(--muted);font-size:.85rem;padding:40px 20px}
.preview-empty svg{margin:0 auto 12px;color:var(--frame);opacity:.5}
.progress{position:absolute;inset:0;background:rgba(253,250,245,.92);display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:24px}
.progress.is-active{display:flex}
.progress .bar{width:min(320px,80%);height:6px;background:#E8DDD0;border-radius:3px;overflow:hidden}
.progress .bar i{display:block;height:100%;width:0;background:var(--frame-dark);transition:width .2s}
.progress .msg{font-size:.85rem;color:var(--ink);font-weight:500}
.progress .pct{font-size:.75rem;color:var(--muted)}
.export-row{display:flex;gap:10px;flex-wrap:wrap}
.export-row .btn{flex:1;min-width:140px}
.export-opts{display:flex;flex-wrap:wrap;gap:12px 18px;font-size:.75rem;color:var(--muted);margin-top:12px}
.export-opts label{display:flex;align-items:center;gap:6px;cursor:pointer}
.export-opts select{font:inherit;font-size:.75rem;padding:2px 4px;border:1px solid var(--line);border-radius:3px;background:#fff}
.legend-summary{font-size:.75rem;color:var(--muted);margin:0 0 10px}
.legend-table{width:100%;border-collapse:collapse;font-size:.75rem}
.legend-table th{text-align:start;font-size:.65rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);padding:6px 6px;border-bottom:1px solid var(--line)}
.legend-table td{padding:5px 6px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.legend-table tr:nth-child(even) td{background:#FBF7F0}
.legend-table .num{font-weight:700;width:34px}
.legend-table .sw{width:22px;height:22px;border-radius:3px;border:1px solid rgba(0,0,0,.15);display:inline-block}
.legend-table .hex{color:var(--muted);font-variant-numeric:tabular-nums}
.legend-table .z{text-align:end;color:var(--muted)}
.legend-wrap{max-height:420px;overflow:auto}
.legend-placeholder{font-size:.8rem;color:var(--muted);text-align:center;padding:24px 8px;white-space:pre-line}
.app-note{font-size:.75rem;color:var(--muted);text-align:center;margin:24px 0 0;font-style:italic;font-family:var(--serif)}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 16px;border-radius:3px;font-size:.8rem;opacity:0;pointer-events:none;transition:opacity .2s;z-index:50;max-width:90vw}
.toast.is-visible{opacity:1}
.settings-sticky{position:sticky;bottom:0;background:var(--paper);padding-top:12px;margin-top:4px}
.stale .btn-generate::after{content:" •"}

/* Contact form */
.form-grid{display:grid;gap:14px}
.form-grid label{font-size:.8rem;font-weight:600;display:block;margin-bottom:4px}
.form-grid input,.form-grid select,.form-grid textarea{width:100%;font:inherit;font-size:.9rem;padding:9px 10px;border:1px solid var(--line);border-radius:3px;background:#fff;color:var(--ink)}
.form-grid textarea{min-height:140px;resize:vertical}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.form-row{grid-template-columns:1fr}}
.form-status{font-size:.85rem;margin-top:10px;min-height:1.2em}

@media print{.site-header,.stepper,.site-footer,.panel-settings,.export-panel{display:none!important}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}