:root{
  --bg:#f5f1e8;--panel:#fffdf8;--ink:#24231f;--muted:#6f6a60;--line:#ded8cb;--accent:#1f5f4a;--accent2:#d87545;--soft:#ebe4d6;--shadow:0 18px 60px rgba(73,62,43,.10);--radius:26px
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.5}.wrap{width:min(1180px,calc(100% - 32px));margin-inline:auto}.hidden{display:none!important}
button,input{font:inherit}button{cursor:pointer}.site-header{position:sticky;top:0;z-index:20;background:rgba(245,241,232,.88);backdrop-filter:blur(18px);border-bottom:1px solid rgba(80,71,52,.08)}.header-inner{height:68px;display:flex;align-items:center;justify-content:space-between}.brand{text-decoration:none;color:var(--ink);font-weight:900;font-size:20px;letter-spacing:-.04em}.brand span{color:var(--accent)}.header-link{color:var(--muted);text-decoration:none;font-weight:700;font-size:14px}
.hero{padding:72px 0 48px;display:grid;grid-template-columns:1.08fr .92fr;gap:54px;align-items:center}.eyebrow,.step{text-transform:uppercase;letter-spacing:.1em;font-weight:900;font-size:11px;color:var(--accent)}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(42px,6vw,78px);line-height:.98;letter-spacing:-.065em;margin-bottom:24px}h1 span{color:var(--accent)}.lead{font-size:clamp(18px,2vw,23px);color:#4f4b43;max-width:740px}.hero-points{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}.hero-points span{background:var(--panel);border:1px solid var(--line);padding:9px 12px;border-radius:999px;font-size:13px;font-weight:800}.hero-demo{display:grid;grid-template-columns:1fr 46px 1fr;align-items:center}.demo-card{aspect-ratio:4/5;border-radius:24px;box-shadow:var(--shadow);border:8px solid var(--panel);position:relative;overflow:hidden}.demo-photo{background:linear-gradient(165deg,#d3e7db 0 34%,#d6b88a 34% 45%,#55705b 45% 58%,#374b3c 58% 70%,#c96f49 70% 100%)}.demo-photo:before{content:"";position:absolute;left:17%;top:15%;width:32%;height:32%;border-radius:50%;background:#f2dfb8;box-shadow:95px 52px 0 12px #2e493d,25px 150px 0 35px #e49d62}.demo-scheme{background:#fff}.demo-scheme:before{content:"";position:absolute;inset:-10%;background:repeating-radial-gradient(ellipse at 30% 35%,transparent 0 24px,#b8b4ab 25px 26px,transparent 27px 42px);transform:rotate(12deg);opacity:.82}.demo-arrow{text-align:center;font-size:28px;color:var(--muted)}.n{position:absolute;background:#fff;border-radius:50%;padding:2px 4px;font-weight:900;font-size:12px;z-index:2}.n1{left:24%;top:20%}.n2{left:66%;top:28%}.n3{left:47%;top:48%}.n4{left:24%;top:70%}.n5{left:69%;top:76%}
.app-shell{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:24px;align-items:start;margin-bottom:72px}.app-card{background:var(--panel);border:1px solid rgba(74,64,45,.09);border-radius:var(--radius);box-shadow:var(--shadow);padding:28px}.controls-card{position:sticky;top:88px}.section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.section-head.compact{margin-top:26px}.section-head h2,.result-topline h2{font-size:28px;letter-spacing:-.04em;margin:3px 0 18px}.text-btn{border:0;background:none;color:var(--accent);font-weight:900;padding:4px}.dropzone{border:2px dashed #c8bfaf;background:#faf7f0;border-radius:22px;min-height:190px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px;transition:.2s}.dropzone:hover,.dropzone.dragover{border-color:var(--accent);background:#f1f6f1}.dropzone input{display:none}.drop-icon{width:52px;height:52px;border-radius:18px;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:29px;margin-bottom:14px}.dropzone strong{font-size:18px}.dropzone span{color:var(--muted);font-size:13px;margin-top:5px}.source-preview{border:1px solid var(--line);border-radius:20px;overflow:hidden}.source-preview img{display:block;width:100%;max-height:270px;object-fit:cover}.source-meta{display:flex;justify-content:space-between;gap:12px;padding:10px 14px;font-size:13px;color:var(--muted)}.preset-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 18px}.preset{border:1px solid var(--line);background:#fff;border-radius:13px;padding:10px 8px;font-weight:850}.preset.active{background:var(--ink);color:#fff;border-color:var(--ink)}.control-grid{display:grid;gap:16px}.control{display:grid;gap:7px}.control>span{display:flex;justify-content:space-between;gap:12px}.control output{font-weight:900;color:var(--accent)}.control small{color:var(--muted)}input[type=range]{width:100%;accent-color:var(--accent)}.primary-btn,.secondary-btn{border:0;border-radius:15px;font-weight:900;transition:.2s}.primary-btn{width:100%;padding:15px 18px;background:var(--accent);color:#fff;margin-top:24px;font-size:16px}.primary-btn:hover{transform:translateY(-1px)}.primary-btn:disabled{opacity:.45;cursor:not-allowed;transform:none}.spinner{display:inline-block;width:18px;height:18px;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;border-radius:50%;animation:spin .75s linear infinite;margin-left:8px;vertical-align:-4px}@keyframes spin{to{transform:rotate(360deg)}}.privacy-note{font-size:12px;color:var(--muted);text-align:center;margin:10px 0 0}
.result-card{min-height:680px}.empty-state{min-height:620px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;color:var(--muted)}.empty-illustration{width:90px;height:90px;border:1px solid var(--line);border-radius:28px;display:grid;place-items:center;font-weight:950;font-size:40px;color:var(--accent);background:#f7f3ea;margin-bottom:20px}.empty-state h2{color:var(--ink);margin-bottom:8px}.empty-state p{max-width:460px}.result-topline{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.stats{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.stats span{font-size:12px;background:var(--soft);padding:7px 9px;border-radius:999px;font-weight:850}.tabs{display:flex;gap:7px;overflow:auto;margin-bottom:15px}.tab{border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 12px;font-weight:850;white-space:nowrap}.tab.active{background:var(--ink);color:#fff;border-color:var(--ink)}.canvas-stage{position:relative;border:1px solid var(--line);border-radius:20px;overflow:auto;min-height:440px;background:#e8e3da;display:flex;align-items:flex-start;justify-content:center;padding:18px}.canvas-stage canvas{display:block;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.12);max-width:none;transform-origin:top center}.zoom-controls{position:sticky;left:50%;bottom:10px;transform:translateX(-50%);display:flex;align-items:center;background:rgba(30,30,27,.9);color:#fff;border-radius:999px;overflow:hidden;width:max-content;margin-top:10px;z-index:3}.zoom-controls button{border:0;background:none;color:#fff;width:36px;height:34px;font-weight:900}.zoom-controls span{font-size:12px;width:48px;text-align:center}.palette-wrap{margin-top:18px}.palette-head{display:flex;align-items:center;justify-content:space-between}.palette-head h3{margin:0}.palette{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin-top:10px}.palette-item{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:#fff;padding:8px;border-radius:12px;text-align:left}button.palette-item{appearance:none;width:100%;cursor:pointer;font:inherit;color:inherit}.palette-item{cursor:pointer}
.palette-item.active{outline:3px solid rgba(31,95,74,.22);border-color:var(--accent)}.swatch{width:26px;height:26px;border-radius:8px;border:1px solid rgba(0,0,0,.12);flex:0 0 auto}.palette-item b{font-size:12px}.palette-item small{display:block;color:var(--muted);font-size:10px}.download-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:18px}.secondary-btn{padding:12px;background:#f1ede4;color:var(--ink);border:1px solid var(--line)}.secondary-btn:hover{background:#e9e2d6}.paint-tools{margin-top:14px}.paint-help{font-size:13px;color:var(--muted)}.progress{height:8px;background:#e9e4da;border-radius:99px;overflow:hidden;margin-top:10px}.progress span{display:block;height:100%;width:0;background:var(--accent);transition:.2s}.progress-text{font-size:12px;color:var(--muted);margin-top:5px}
.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:72px}.info-grid article,.seo-section>div{background:var(--panel);border:1px solid rgba(74,64,45,.09);border-radius:22px;padding:24px}.info-num{color:var(--accent2);font-weight:950}.info-grid h2,.seo-section h2{font-size:22px;letter-spacing:-.035em;margin-top:12px}.info-grid p,.seo-section p{color:var(--muted);margin-bottom:0}.seo-section{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:72px}.faq{max-width:900px;margin-bottom:80px}.faq>h2{font-size:34px;letter-spacing:-.045em}.faq details{border-top:1px solid var(--line);padding:16px 0}.faq summary{font-weight:900;cursor:pointer}.faq details p{margin:10px 0 0;color:var(--muted)}footer{border-top:1px solid rgba(74,64,45,.12);padding:30px 0 44px;color:var(--muted);font-size:13px}.footer-inner{display:flex;justify-content:space-between;gap:20px}
@media(max-width:920px){.hero,.app-shell{grid-template-columns:1fr}.hero{padding-top:44px}.hero-demo{max-width:620px}.controls-card{position:static}.result-card{min-height:0}.empty-state{min-height:360px}.info-grid{grid-template-columns:1fr}.seo-section{grid-template-columns:1fr}}
@media(max-width:560px){.wrap{width:min(100% - 20px,1180px)}.header-link{display:none}.hero{padding:34px 0 28px;gap:30px}h1{font-size:44px}.hero-demo{grid-template-columns:1fr 30px 1fr}.app-card{padding:18px;border-radius:20px}.section-head h2,.result-topline h2{font-size:24px}.download-grid{grid-template-columns:1fr}.palette{grid-template-columns:repeat(2,1fr)}.canvas-stage{min-height:330px;padding:10px}.footer-inner{flex-direction:column}.hero-points span{font-size:12px}}
@media print{body{background:#fff}.site-header,.hero,.controls-card,.tabs,.zoom-controls,.paint-tools,.download-grid,.palette-wrap,.info-grid,.help-hubs,.seo-section,.faq,footer,.result-topline{display:none!important}.app-shell,.wrap{width:100%;margin:0;display:block}.result-card{box-shadow:none;border:0;padding:0}.canvas-stage{border:0;background:#fff;padding:0;display:block;overflow:visible}.canvas-stage canvas{box-shadow:none;width:100%!important;height:auto!important;transform:none!important}.app-card{box-shadow:none}.result-ui{display:block!important}}


.quick-colors{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px}
.mini-chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 10px;font-size:12px;font-weight:850}
.mini-chip.active{background:var(--soft);border-color:#cabfae}
.subject-panel{margin:0 0 18px;border:1px solid var(--line);background:#faf7f0;border-radius:16px;padding:12px 14px}
.subject-panel label{display:grid;gap:6px}
.subject-panel select,.focus-grid select,.print-config select{border:1px solid var(--line);background:#fff;border-radius:10px;padding:9px 10px;color:var(--ink)}
.subject-hint{margin-top:8px;color:var(--muted);font-size:12px;line-height:1.45}
.source-image-wrap{position:relative;background:#f4f0e8;cursor:default}
.source-image-wrap.manual-focus{cursor:crosshair}
.source-preview img{display:block;width:100%;max-height:270px;object-fit:contain;background:#f4f0e8}
.focus-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.focus-marker{position:absolute;width:28px;height:28px;border:2px solid #fff;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 3px rgba(31,95,74,.7),0 6px 18px rgba(0,0,0,.22);pointer-events:none}
.focus-marker:before,.focus-marker:after{content:"";position:absolute;left:50%;top:50%;background:#fff;transform:translate(-50%,-50%)}
.focus-marker:before{width:14px;height:2px}.focus-marker:after{width:2px;height:14px}
.focus-panel{margin-top:18px;border:1px solid var(--line);background:#faf7f0;border-radius:18px;padding:14px}
.focus-panel-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:12px}
.focus-panel-head small{display:block;color:var(--muted);line-height:1.4;margin-top:3px}
.beta-badge{font-size:11px;font-weight:900;color:var(--accent);background:#eef6f1;border:1px solid rgba(31,95,74,.14);border-radius:999px;padding:5px 9px;white-space:nowrap}
.focus-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.focus-grid label,.print-config label{display:grid;gap:6px}
.focus-grid span,.print-config span{font-size:12px;font-weight:700;color:#4b463f}
.focus-options{margin-top:10px}.check-option{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);font-weight:600}.check-option input{accent-color:var(--accent);width:16px;height:16px}
.focus-status{font-size:11px;color:var(--muted);margin-top:9px;line-height:1.45}
.inline-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.secondary-btn.slim{padding:10px 12px}
.history-card{margin-top:20px}.history-note{font-size:12px;color:var(--muted);margin:2px 0 12px}.history-list{display:grid;gap:10px}.history-item{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:10px;align-items:center;border:1px solid var(--line);border-radius:14px;padding:8px;background:#fff}.history-thumb{width:64px;height:64px;object-fit:cover;border-radius:10px;background:#f3efe5}.history-body{min-width:0;display:grid;gap:2px}.history-body b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.history-body small{font-size:11px;color:var(--muted)}.history-actions{display:flex;flex-direction:column;gap:6px}.history-actions button{border:1px solid var(--line);background:#f7f3ea;color:var(--ink);border-radius:10px;padding:6px 8px;font-size:12px;font-weight:700}.history-empty{font-size:13px;color:var(--muted);padding:10px 2px}
.analysis-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0 16px}.analysis-card{border:1px solid var(--line);background:#faf7f0;border-radius:16px;padding:14px}.analysis-card b{display:block;margin-bottom:10px}.analysis-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.metric{background:#fff;border:1px solid var(--line);border-radius:12px;padding:9px 10px}.metric small{display:block;color:var(--muted);font-size:11px;margin-bottom:3px}.metric strong{font-size:14px}.print-config{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.print-hint{font-size:12px;color:var(--muted);line-height:1.45;margin-top:10px}
.paint-options{margin-top:8px;font-size:13px;color:var(--muted)}
@media(max-width:760px){.focus-grid,.analysis-grid,.print-config{grid-template-columns:1fr}.analysis-metrics{grid-template-columns:1fr 1fr}.history-item{grid-template-columns:56px minmax(0,1fr)}.history-actions{grid-column:1/-1;flex-direction:row}}
@media(max-width:560px){.analysis-metrics{grid-template-columns:1fr}.focus-panel-head{flex-direction:column}.inline-actions{flex-direction:column}}

/* Result canvas is rendered internally at a larger resolution and fitted to the preview area. */
.canvas-stage canvas{max-width:100%;height:auto;image-rendering:auto}

.focus-panel.is-disabled{background:#f6f1e6;border-style:dashed}
.focus-panel.is-disabled .hidden-controls{display:none}
.focus-panel.is-disabled .focus-status{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px;color:#5f594f;line-height:1.45}
.subject-panel .subject-hint{margin-top:8px;color:var(--muted);font-size:12px;line-height:1.45}
.print-hero-note{font-size:12px;color:var(--muted);margin-top:8px}

.settings-mode{display:flex;gap:8px;margin:0 0 14px}
.mode-pill{appearance:none;border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 12px;font:inherit;font-weight:850;cursor:pointer}
.mode-pill.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.workflow-presets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 14px}
.workflow-preset{appearance:none;text-align:left;border:1px solid var(--line);background:#fff;border-radius:16px;padding:12px;cursor:pointer;font:inherit;color:inherit}
.workflow-preset b{display:block;margin-bottom:4px;font-size:14px}
.workflow-preset small{display:block;color:var(--muted);line-height:1.35}
.workflow-preset.active{border-color:var(--accent);box-shadow:0 0 0 3px rgba(31,95,74,.12);background:#f7fbf8}
.advanced-toggle-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:0 0 12px}
.advanced-note{font-size:12px;color:var(--muted);line-height:1.4;max-width:340px;text-align:right}
.advanced-settings.collapsed{display:none}
.result-tip{margin:8px 0 14px;padding:10px 12px;border:1px solid var(--line);background:#faf7f0;border-radius:12px;color:#5f594f;font-size:13px;line-height:1.4}
@media(max-width:760px){.workflow-presets{grid-template-columns:1fr}.advanced-toggle-row{flex-direction:column}.advanced-note{text-align:left;max-width:none}}

.workflow-presets-three{grid-template-columns:repeat(3,minmax(0,1fr))}
.compact-advanced-row{margin-top:2px}
.compact-advanced-row .advanced-note{font-size:11px}
@media(max-width:900px){.workflow-presets-three{grid-template-columns:1fr}}

.help-hubs{margin:0 auto 72px}
.hub-intro{display:flex;justify-content:space-between;gap:24px;align-items:flex-end;margin-bottom:18px}
.hub-intro h2{font-size:34px;letter-spacing:-.035em;margin:5px 0 8px}
.hub-intro p{max-width:760px;color:var(--muted);line-height:1.6;margin:0}
.hub-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.hub-card{border:1px solid var(--line);background:var(--panel);border-radius:20px;padding:20px;box-shadow:0 8px 28px rgba(58,47,31,.05);display:flex;flex-direction:column;min-height:220px}
.hub-card-wide{grid-column:1/-1;min-height:auto}
.hub-kicker{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);margin-bottom:8px}
.hub-card h3{font-size:21px;letter-spacing:-.025em;margin:0 0 8px}
.hub-card p{color:var(--muted);line-height:1.55;margin:0 0 18px}
.hub-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.hub-btn,.hub-link,.hub-chip{appearance:none;border-radius:12px;font:inherit;font-weight:850;cursor:pointer}
.hub-btn{border:1px solid var(--accent);background:var(--accent);color:#fff;padding:10px 12px}
.hub-link{border:1px solid var(--line);background:#fff;color:var(--ink);padding:10px 12px}
.hub-chip{border:1px solid var(--line);background:#fff;color:var(--ink);min-width:52px;padding:9px 12px}
.hub-btn:hover,.hub-link:hover,.hub-chip:hover{transform:translateY(-1px)}
.hub-color-actions{margin-top:auto}
@media(max-width:760px){.hub-grid{grid-template-columns:1fr}.hub-card-wide{grid-column:auto}.hub-intro h2{font-size:28px}.hub-card{min-height:auto}}

/* HTML-first rendering completeness */
.noscript-note{width:min(1180px,calc(100% - 32px));margin:12px auto 0;padding:11px 14px;border:1px solid #d8cba9;background:#fff8df;color:#574d33;border-radius:12px;font-size:13px;line-height:1.45}
.static-result-demo{width:min(100%,520px);margin-top:20px;border:1px solid var(--line);background:#fff;border-radius:18px;padding:16px;text-align:left;color:var(--ink)}
.static-demo-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.static-demo-head strong{font-size:14px}.static-demo-head span{font-size:11px;color:var(--muted);font-weight:700}
.static-demo-stats{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px}.static-demo-stats span{padding:6px 8px;border-radius:999px;background:var(--soft);font-size:11px;font-weight:800;color:#504a40}
.static-demo-palette{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.static-demo-palette span{display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:10px;padding:7px 8px;font-size:10px;color:var(--muted)}.static-demo-palette i{display:inline-block;width:20px;height:20px;border:1px solid rgba(0,0,0,.14);border-radius:6px;flex:0 0 auto}.static-demo-palette b{color:var(--ink);font-size:11px}.static-demo-note{margin:12px 0 0!important;font-size:12px!important;line-height:1.45;color:var(--muted)!important;max-width:none!important}
.result-text-equivalent{margin:10px 0 0;padding:9px 11px;border:1px solid var(--line);border-radius:11px;background:#faf7f0;color:var(--muted);font-size:12px;line-height:1.45}
.palette-placeholder{grid-column:1/-1;margin:0;color:var(--muted);font-size:12px;line-height:1.45;padding:8px 2px}
@media(max-width:560px){.static-demo-palette{grid-template-columns:1fr}.static-result-demo{padding:13px}.static-demo-head{align-items:flex-start}.noscript-note{width:min(100% - 20px,1180px)}}

.generation-status{font-size:12px;color:var(--muted);line-height:1.45;margin:9px 0 0;text-align:center}