@import url('data:text/css,');
:root{--ink:#122a2c;--green:#205c50;--mint:#e5efdf;--paper:#f4f3ee;--muted:#60716c;--line:#dce1d8;--trace:#ff714d}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.55 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,a,input,textarea{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}button:focus-visible,a:focus-visible,textarea:focus-visible{outline:3px solid #cc601d;outline-offset:4px}[hidden]{display:none!important}header{max-width:1080px;margin:auto;padding:24px 28px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line)}.brand{text-decoration:none;color:var(--ink);font-size:16px;font-weight:650;letter-spacing:1.4px}.brand b{font-size:29px;letter-spacing:-2px;margin-left:4px}.brand b span{font-size:10px;vertical-align:top;letter-spacing:0}.lab{font-size:10px;font-weight:700;letter-spacing:1.2px;border:1px solid #bcc8bd;border-radius:20px;padding:6px 10px}main{max-width:760px;margin:auto;padding:12px 24px}.intro{padding:34px 0 24px;max-width:570px}.eyebrow,.small-label,.section-heading>span{font-size:10px;font-weight:750;letter-spacing:1.8px}.eyebrow{color:var(--green);margin:0 0 14px}h1{font-size:clamp(38px,7.2vw,57px);line-height:1.08;letter-spacing:-2.2px;margin:0 0 18px;font-weight:650}h1 em{font-family:Georgia,serif;font-weight:400;color:var(--green)}.intro>p:last-child{color:var(--muted);font-size:16px;max-width:410px}.product{border:1px solid var(--line);background:#fff;border-radius:14px;padding:17px;display:flex;gap:15px;align-items:center}.product-icon{font-size:32px;color:var(--green);background:var(--mint);border-radius:10px;width:54px;height:54px;display:grid;place-items:center;flex-shrink:0}.product h2{font-size:17px;margin:3px 0}.product p{margin:0;font-size:12px;color:var(--muted)}.product .small-label{font-size:9px;letter-spacing:1.1px}.pill{margin-left:auto;font-size:10px;background:var(--paper);padding:4px 8px;border-radius:20px}.context-note{font-size:11px;color:var(--muted);margin:10px 3px 25px}.steps{display:flex;align-items:center;justify-content:space-between;margin:22px 0 25px;gap:10px}.steps span{font-size:12px;color:#86908a;display:flex;align-items:center;gap:7px;white-space:nowrap}.steps b{width:25px;height:25px;border:1px solid #cdd5c9;border-radius:50%;display:grid;place-items:center;font-size:11px}.steps .active{color:var(--green);font-weight:650}.steps .active b{background:var(--green);color:white;border-color:var(--green)}.steps i{height:1px;background:var(--line);flex:1}.panel{background:white;border-radius:20px;border:1px solid var(--line);padding:27px}.section-heading>span{color:var(--muted);font-size:9px}.section-heading h2{font-size:25px;line-height:1.2;letter-spacing:-.7px;margin:7px 0 10px}.section-heading p{font-size:14px;color:var(--muted);margin:0 0 23px}.upload-area{border:1.5px dashed #a8bca7;border-radius:15px;background:#f5f8f1;text-align:center;padding:32px 18px}.upload-area.dragging{border-color:var(--green);background:var(--mint)}.upload-area svg{stroke:var(--green);stroke-width:1.7;fill:none;width:52px;height:52px}.upload-area h3{font-size:18px;letter-spacing:-.4px;margin:10px 0 5px}.upload-area p{font-size:13px;color:var(--muted);margin:0 0 20px}.upload-buttons{display:flex;justify-content:center;gap:9px;flex-wrap:wrap}.primary{background:var(--green);color:#fff;border:0;border-radius:9px;min-height:48px;padding:12px 20px;font-size:14px;font-weight:650;display:inline-flex;justify-content:space-between;align-items:center;gap:25px;transition:background .2s}.primary:hover:not(:disabled){background:#154438}.primary span{font-size:20px;line-height:1}.secondary{border:1px solid #c7d1c4;background:white;border-radius:9px;min-height:46px;padding:10px 15px;font-size:13px;color:var(--ink);font-weight:600}.file-hint{display:block;font-size:10px;color:var(--muted);margin-top:17px}.tip{font-size:12px;color:var(--muted);margin:21px 0 0;display:flex;flex-direction:column;gap:3px}.tip b{color:var(--ink);font-weight:600}.drawing-head{display:flex;align-items:center;justify-content:space-between;font-size:11px;margin:12px 0 9px}.line-dot{width:9px;height:9px;display:inline-block;border-radius:50%;background:var(--trace);margin-right:4px}.text-button{background:none;border:0;padding:9px 0;min-height:44px;color:var(--green);font-size:12px;text-decoration:underline;text-underline-offset:3px}.canvas-wrap{background:#e7eae3;border-radius:12px;overflow:hidden;position:relative;line-height:0}.canvas-wrap canvas{display:block;width:100%;height:auto;touch-action:none;cursor:crosshair}.draw-guide{position:absolute;bottom:15px;left:50%;transform:translateX(-50%);background:rgba(18,42,44,.85);color:white;font-size:11px;line-height:1.4;border-radius:7px;padding:9px 12px;width:max-content;max-width:85%;pointer-events:none;text-align:center}.toolbar{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}.tool{border:1px solid var(--line);border-radius:7px;min-height:44px;font-size:12px;padding:7px 11px;color:var(--ink);background:white}.tool.selected{background:var(--mint);border-color:#abc0a4}.small{font-size:11px;color:var(--muted)}.field-label{display:flex;justify-content:space-between;gap:8px;font-size:13px;font-weight:650;margin:23px 0 8px}.field-label span{font-size:11px;font-weight:400;color:var(--muted)}textarea{width:100%;border:1px solid var(--line);border-radius:9px;padding:12px;font:13px/1.5 inherit;resize:vertical;min-height:95px;color:var(--ink);background:#fcfcf9}.action-row{margin-top:18px;display:flex;justify-content:flex-end}.preview-switch{display:flex;background:var(--paper);border-radius:9px;padding:4px;margin:17px 0 13px}.preview-switch button{flex:1;min-height:40px;border:0;background:none;border-radius:6px;font-size:12px;color:var(--muted)}.preview-switch button.selected{background:#fff;box-shadow:0 1px 4px #122a2c12;color:var(--ink);font-weight:650}#reviewImage{display:block;max-width:100%;width:100%;max-height:640px;object-fit:contain;border-radius:10px;background:var(--paper)}.review-details{margin:19px 0}.review-details h3{font-size:17px;margin:3px 0 7px}.review-details p{font-size:13px;color:var(--muted);white-space:pre-wrap;overflow-wrap:anywhere}.notice{background:#f2f5ec;border-radius:10px;padding:15px;margin:20px 0;font-size:13px}.notice p{margin:4px 0 0;font-size:12px;color:var(--muted)}.wide{width:100%}.back{display:block;margin:7px auto}.downloads{display:flex;flex-wrap:wrap;gap:8px}#readyPanel{border-top:1px solid var(--line);margin-top:15px;padding-top:15px}#readyPanel h3{font-size:17px}#readyPanel p{font-size:12px;color:var(--muted)}.privacy{text-align:center;font-size:10px;color:var(--muted);max-width:420px;margin:21px auto}.error{background:#fff0ea;border:1px solid #eaa48c;border-radius:9px;padding:15px;color:#8b341a;font-size:13px}footer{text-align:center;padding:30px 0 35px;color:var(--muted)}footer>span{font-size:11px;font-weight:700;letter-spacing:2px;color:var(--ink)}footer p{font-family:Georgia,serif;font-size:17px;margin:8px 0}footer small{font-size:9px;display:block;max-width:340px;margin:auto}@media(max-width:500px){header{padding:17px 18px}.brand{font-size:12px}.brand b{font-size:25px}.lab{font-size:8px;padding:5px 7px}main{padding:5px 16px}.intro{padding-top:27px}.panel{padding:20px 16px;border-radius:15px}.section-heading h2{font-size:23px}.steps{gap:6px}.steps span{font-size:10px;gap:5px}.steps b{width:23px;height:23px}.upload-area{padding:27px 12px}.upload-buttons{flex-direction:column}.upload-buttons button{width:100%;justify-content:center}.product{gap:10px;padding:13px}.product-icon{width:42px;height:45px;font-size:27px}.product h2{font-size:15px}.product p{font-size:11px}.pill{display:none}.field-label{font-size:12px}.action-row .primary{width:100%}.toolbar{gap:5px}.tool{font-size:11px;padding:7px 9px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
/* Catalog identity: charcoal, white and signature green. */
:root{--ink:#24363d;--green:#247553;--mint:#e6f5ed;--paper:#f4f6f5;--muted:#53666d;--line:#d7e3dd;--accent:#48bf8d}
header{background:var(--ink);border-bottom:4px solid var(--accent);max-width:none;padding-left:max(22px,calc((100vw - 1024px)/2));padding-right:max(22px,calc((100vw - 1024px)/2))}.brand{color:#fff}.brand b{color:var(--accent)}.lab{color:#fff;border-color:#6d8b84}.product{border-left:4px solid var(--accent)}h1 em{font-family:inherit;font-style:normal;font-weight:750;color:var(--green)}.intro>p:last-child{font-size:16px;max-width:500px}.primary{text-decoration:none;justify-content:center;gap:14px}.primary:hover:not(:disabled){background:#1c5c42}.upload-area{background:#f1f9f5;border-color:#8bb7a0}.demo-note{background:#eaf4ef;border-left:3px solid var(--accent);padding:13px 15px;border-radius:0 9px 9px 0;font-size:12px;color:var(--ink);margin:16px 0}.demo-note b{display:block;margin-bottom:3px}.quota{font-size:12px;font-weight:650;color:var(--green);margin:12px 0}.route-note{font-size:12px;color:var(--muted);background:#f4f6f5;padding:10px 12px;border-radius:8px}.notice{background:#eaf4ef;border:1px solid #cce3d6}.tool.selected{border-color:var(--green);background:var(--mint)}.context-note{margin-bottom:10px}.result-layout{max-width:720px;margin:auto;padding:24px 18px}.result-brand{text-decoration:none;color:var(--ink);font-weight:800;letter-spacing:.06em}.result-actions{display:flex;flex-wrap:wrap;gap:10px}.result-actions .primary{flex:1;min-width:190px}#saveActions>p{font-size:13px;color:var(--muted)}@media(max-width:500px){header{padding:17px 18px}.intro{padding-top:25px}h1{font-size:42px;letter-spacing:-1.6px}.demo-note{font-size:12px}.quota{line-height:1.5}.result-layout{padding:22px 16px}.result-layout h1{font-size:34px}.result-actions .primary{width:100%}}
/* Mobile product explorer and final save experience — design review. */
body{background:#f5f7f6;background-image:radial-gradient(ellipse at 85% 5%,#dff2e880,transparent 45%)}
main{max-width:940px;padding:12px 28px}.intro{padding:52px 0 30px;max-width:730px}.intro h1{font-size:clamp(42px,7vw,72px);font-weight:780;letter-spacing:-3px;line-height:1.02}.intro>p:last-child{font-size:17px;line-height:1.65;max-width:530px}.eyebrow{letter-spacing:2px;font-size:10px}.catalog-picker{margin:8px 0 24px}.catalog-heading{display:flex;justify-content:space-between;gap:12px;align-items:center}.catalog-heading .eyebrow{margin-bottom:7px}.catalog-heading h2{font-size:27px;line-height:1.2;letter-spacing:-.8px;margin:0}.design-badge{background:#fff;border:1px solid var(--line);font-size:10px;font-weight:650;white-space:nowrap;padding:7px 10px;border-radius:99px}.catalog-help{font-size:13px;color:var(--muted);margin:12px 0 18px;max-width:540px}.catalog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.product-choice{background:#fff;border:1px solid #dce5df;border-radius:17px;padding:8px 8px 15px;text-align:left;position:relative;color:var(--ink);box-shadow:0 3px 12px #24363d05;transition:box-shadow .18s,transform .18s,border-color .18s;overflow:hidden}.product-choice:hover{transform:translateY(-2px);box-shadow:0 8px 20px #24363d12}.product-choice[aria-pressed=true]{border:2px solid var(--green);padding:7px 7px 14px;background:#f1faf5;box-shadow:0 0 0 3px #48bf8d18}.product-choice[aria-pressed=true]:after{content:'✓';position:absolute;right:15px;top:15px;color:#fff;background:var(--green);width:25px;height:25px;display:grid;place-items:center;border-radius:50%;font-size:14px}.product-choice img{width:100%;height:136px;object-fit:cover;object-position:center 54%;border-radius:11px;display:block;margin:0 0 11px}.choice-code{font-size:9px;font-weight:800;color:var(--green);letter-spacing:1px;display:block;margin:0 8px 5px}.product-choice strong{font-size:14px;line-height:1.25;display:block;margin:0 8px 5px}.product-choice small{display:block;margin:0 8px;font-size:11px;color:var(--muted)}.product{box-shadow:0 4px 20px #24363d05;border-radius:16px}.product-icon{width:60px;height:60px}.panel{box-shadow:0 10px 32px #24363d05;border-radius:22px}.upload-area{border-radius:18px;padding:40px 18px}.steps{margin:28px 0}.steps b{width:29px;height:29px}.steps span{font-size:13px}.demo-note{border-radius:0 12px 12px 0;line-height:1.6}.primary{border-radius:12px;min-height:50px;font-size:14px}.result-layout{max-width:740px;padding:34px 24px}.result-layout h1{font-size:clamp(34px,6vw,52px);margin-top:24px;font-weight:780;letter-spacing:-1.7px}.result-layout>p{color:var(--muted)}#saveActions{padding:20px;background:#fff;border:1px solid var(--line);border-radius:18px;margin-top:18px}#saveDownload{font-size:13px;display:block!important;text-align:center;margin:5px 0 12px}#saveImage{box-shadow:0 10px 40px #24363d13}#saveStatus{font-size:14px;min-height:24px}.result-brand{font-size:13px}#selectionStatus{min-height:34px;line-height:1.5}footer p{font-family:inherit;font-weight:550;font-size:15px}
@media(max-width:600px){main{padding:8px 16px}.intro{padding:32px 0 22px}.intro h1{font-size:46px;letter-spacing:-1.8px}.intro>p:last-child{font-size:15px}.catalog-heading h2{font-size:23px}.catalog-heading{align-items:flex-start}.design-badge{font-size:9px;padding:6px 8px}.catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.product-choice img{height:115px}.product-choice strong{font-size:13px;margin-left:5px;margin-right:5px}.product-choice small,.choice-code{margin-left:5px;margin-right:5px}.product-choice{border-radius:14px}.panel{padding:22px 16px}.steps span{font-size:11px;gap:5px}.steps b{width:26px;height:26px}.result-layout{padding:24px 16px}.result-layout h1{font-size:38px}#saveActions{padding:16px}}
#changeProduct{margin-left:auto;white-space:nowrap}#confirmProduct{margin-top:4px}#saveShare{font-size:16px;min-height:54px;letter-spacing:-.15px}@media(max-width:500px){#changeProduct{font-size:11px;white-space:normal;max-width:76px;text-align:right}.product h2{font-size:14px}.product-icon{width:48px;height:48px}.catalog-help{font-size:12px}}

.is-processing>:not(#processingPanel){display:none!important}.processing-state{text-align:center;padding:38px 10px;min-height:330px}.processing-clock{width:78px;height:78px;margin:0 auto 28px;border:3px solid #b6d6c7;border-radius:50%;position:relative;background:#f1f9f5;box-shadow:0 0 0 10px #eaf4ef}.processing-clock:before,.processing-clock span{content:"";position:absolute;left:50%;top:50%;height:3px;background:var(--green);border-radius:4px;transform-origin:0 50%}.processing-clock:before{width:20px;transform:rotate(-90deg)}.processing-clock span{width:28px;animation:clock-spin 6s linear infinite}.processing-state h2{font-size:clamp(24px,5vw,34px);letter-spacing:-1px;margin:10px 0 14px}#processingPhrase{font-size:17px;color:var(--green);min-height:55px;max-width:400px;margin:0 auto;line-height:1.5}.processing-time{font-variant-numeric:tabular-nums;color:var(--muted);font-size:13px}.capture-result{text-align:center;padding:16px 12px;max-width:760px}.capture-result h1{font-size:clamp(24px,5vw,36px);margin:12px 0 6px}.capture-hint{font-size:14px;margin:0 0 12px}.capture-result #saveImage{display:block;max-width:100%;max-height:calc(100svh - 130px);width:auto;height:auto;object-fit:contain;margin:0 auto;box-shadow:none}.capture-result .demo-note{text-align:left;font-size:12px;margin-top:12px;line-height:1.5}.capture-result .demo-note strong{display:inline}@keyframes clock-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.processing-clock span{animation:none;transform:rotate(-35deg)}}

/* Product-specific placement and direct generation. */
#processingPhrase{font-size:clamp(29px,6vw,42px);font-weight:800;font-style:italic;line-height:1.2;min-height:110px;max-width:560px}.processing-state h2{font-size:19px;letter-spacing:-.3px;font-weight:500}.placement-note{font-size:13px;line-height:1.55;color:var(--muted);border-left:3px solid #8ab99e;padding:8px 12px;background:#f4f8f5;border-radius:0 10px 10px 0}#placementExample{margin:6px 0 10px;color:var(--green)}

.photo-status{padding:12px 14px;border-radius:10px;background:#eaf4ef;color:var(--green);font-size:14px;font-weight:600}.photo-status.photo-failed{background:#fff0e7;color:#8b361d}

/* Gesture hints are DOM overlays, never part of the drawing canvas or AI guide. */
.draw-guide{top:50%;bottom:auto;left:50%;transform:translate(-50%,-50%);width:230px;max-width:86%;padding:13px 14px 15px;border-radius:18px;background:rgba(255,255,255,.58);border:1px solid rgba(196,221,206,.65);color:var(--ink);box-shadow:0 8px 30px #122a2c22;line-height:1.35;pointer-events:none}.gesture-label{font-size:9px;letter-spacing:1.7px;font-weight:800;color:var(--green)}.gesture-demo{width:100%;height:145px;overflow:visible;display:block}.gesture-track,.gesture-line{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:6}.gesture-track{stroke:#c8dbd1;stroke-dasharray:4 8}.gesture-line{stroke:var(--trace);stroke-dasharray:176;stroke-dashoffset:176;animation:gesture-stroke 3.6s ease-in-out infinite}.gesture-hand{transform:translate(40px,119px);animation:gesture-drag 3.6s ease-in-out infinite}.gesture-hand path{fill:white;stroke:#205c50;stroke-width:2.3;stroke-linejoin:round}.gesture-touch{fill:#9ed7bb55;stroke:#64ac88;stroke-width:2}.gesture-dots{display:none}.draw-guide strong{font-size:14px;display:block;margin:4px 0 7px}.draw-guide small{font-size:10px;display:block;color:var(--muted)}.draw-guide.is-points .gesture-dots{display:block}.tap-dot{fill:var(--trace);stroke:white;stroke-width:3;animation:gesture-tap 3.6s infinite;transform-box:fill-box;transform-origin:center}.tap-two{animation-delay:.9s}.tap-three{animation-delay:1.8s}.draw-guide.is-points .gesture-hand{animation-name:gesture-point}.draw-guide.is-points .gesture-line{display:none}@keyframes gesture-drag{0%,12%{transform:translate(40px,119px)}65%,86%{transform:translate(192px,33px)}100%{transform:translate(40px,119px)}}@keyframes gesture-stroke{0%,12%{stroke-dashoffset:176}65%,86%{stroke-dashoffset:0}100%{stroke-dashoffset:176}}@keyframes gesture-point{0%,20%{transform:translate(40px,119px)}30%,50%{transform:translate(112px,78px)}60%,85%{transform:translate(192px,33px)}100%{transform:translate(40px,119px)}}@keyframes gesture-tap{0%,15%,100%{transform:scale(1);opacity:.6}22%,30%{transform:scale(1.35);opacity:1}45%,90%{transform:scale(1);opacity:.6}}@media(prefers-reduced-motion:reduce){.gesture-hand,.gesture-line,.tap-dot{animation:none}.gesture-hand{transform:translate(112px,78px)}.gesture-line{stroke-dashoffset:0}}

/* Explicit numbered taps and a line that grows after taps 2 and 3. */
.draw-guide.is-points .gesture-line{display:block;animation:point-connections 4.8s linear infinite;stroke-dasharray:176;stroke-dashoffset:176}.draw-guide.is-points .gesture-hand{animation:gesture-point 4.8s ease-in-out infinite}.draw-guide.is-points .tap-dot{fill:#205c50;stroke:#fff;stroke-width:3;r:12;animation-duration:4.8s}.draw-guide.is-points .tap-two{animation-delay:1.25s}.draw-guide.is-points .tap-three{animation-delay:2.65s}.tap-numbers text{fill:#fff;font:800 14px system-ui;text-anchor:middle;paint-order:stroke;stroke:none}.draw-guide.is-points .gesture-touch{animation:touch-ripple 1.6s ease-out infinite}.draw-guide.is-points strong{font-size:15px}@keyframes point-connections{0%,28%{stroke-dashoffset:176}32%,58%{stroke-dashoffset:92}64%,90%{stroke-dashoffset:0}100%{stroke-dashoffset:176}}@keyframes touch-ripple{0%,60%{r:9;opacity:1}100%{r:20;opacity:0}}@media(prefers-reduced-motion:reduce){.draw-guide.is-points .gesture-line,.draw-guide.is-points .gesture-hand,.draw-guide.is-points .gesture-touch{animation:none}.draw-guide.is-points .gesture-line{stroke-dashoffset:0}}

/* Two full demonstrations per mode and photo; JS hides the card after the matching duration. */
.draw-guide .gesture-hand,.draw-guide .gesture-line,.draw-guide .tap-dot{animation-iteration-count:2}.draw-guide.is-points .gesture-hand,.draw-guide.is-points .gesture-line,.draw-guide.is-points .tap-dot{animation-iteration-count:2}.draw-guide.is-points .gesture-touch{animation-iteration-count:6}