@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@500;600&family=Tajawal:wght@400;500;600;700&display=swap');
:root{font-family:Tajawal,'DM Sans',sans-serif;color:#312820;background:#f5efe7;font-synthesis:none}
*{box-sizing:border-box}body{margin:0}button,select,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}a{color:inherit}h1,h2,p{margin-top:0}h1,h2{font-weight:500}html[lang=en]{font-family:'DM Sans',sans-serif}
.top{display:flex;align-items:center;justify-content:space-between;gap:1rem;max-width:1370px;margin:auto;padding:22px clamp(18px,4vw,54px);border-bottom:1px solid #ddcbb7}.back{text-decoration:none;color:#80674a;font-size:.95rem;min-width:130px}.brand{text-decoration:none;font:600 1.45rem 'Playfair Display',serif;letter-spacing:.16em;text-align:center;white-space:nowrap}.brand small{display:block;font:500 .52rem 'DM Sans',sans-serif;letter-spacing:.38em}.languages{display:flex;gap:4px;min-width:130px;justify-content:flex-end}.languages button{border:1px solid #cdb99f;background:transparent;padding:6px 12px;border-radius:30px}.languages button[aria-pressed=true]{background:#34281d;color:#fff}
main{max-width:1370px;margin:auto;padding:0 clamp(18px,4vw,54px)}.intro{padding:clamp(36px,6vw,80px) 0 34px;max-width:880px}.eyebrow{color:#a47b4d;letter-spacing:.19em;text-transform:uppercase;font-size:.78rem;font-weight:700}.intro h1{font:500 clamp(2.4rem,6vw,5.2rem)/1.15 'Playfair Display',Tajawal,serif;margin:.4rem 0 1rem}html[lang=ar] .intro h1{font-family:Tajawal,sans-serif;font-weight:500}.intro-copy{font-size:1.15rem;line-height:1.7;max-width:780px}.privacy{font-size:.95rem;color:#746b63;line-height:1.6;border-inline-start:2px solid #bda47f;padding-inline-start:1rem;margin:0}
.studio{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(310px,.8fr);gap:clamp(20px,3vw,44px);align-items:start}.work-area,.control-group{background:#fffaf4;border:1px solid #e1d2bf;box-shadow:0 15px 35px #4b39200b}.work-area{padding:clamp(16px,2.5vw,32px)}.controls{display:grid;gap:18px}.control-group{padding:22px}.panel-title{display:flex;align-items:baseline;gap:14px;border-bottom:1px solid #e7dacb;margin-bottom:20px}.panel-title span{font:500 .75rem 'DM Sans',sans-serif;color:#a57b50}.panel-title h2{font-size:1.35rem;margin:0 0 13px}.control-group label:not(.upload){display:block;font-weight:700;margin:14px 0 6px;font-size:.92rem}.control-group select{width:100%;border:1px solid #d6c2aa;background:#fff;padding:11px;color:#312820;min-height:44px}
.upload{display:flex;align-items:center;gap:13px;flex-wrap:wrap;border:1px dashed #b6966d;background:#f8f0e5;padding:17px 20px;cursor:pointer;transition:background .2s}.upload:hover,.upload:focus-within{background:#f0e2d1}.upload span{font-size:1.8rem;font-weight:300;line-height:1}.upload small{font-size:.82rem;color:#87766a}.upload-small{display:block;padding:14px;font-weight:700}input[type=file]{position:absolute;width:1px;height:1px;opacity:0}.canvas-wrap{position:relative;margin-top:15px;min-height:360px;background:#e8dccd;display:flex;align-items:center;justify-content:center;overflow:hidden}.canvas-wrap canvas{display:none;width:100%;height:auto;touch-action:none;cursor:crosshair}.canvas-wrap.has-image{min-height:0}.canvas-wrap.has-image canvas{display:block}.canvas-wrap.has-image .canvas-empty{display:none}.canvas-empty{text-align:center;padding:45px 20px;color:#806f5b}.empty-icon{display:block;font:500 5rem 'Playfair Display',serif;color:#b79b77}.canvas-help,.note{font-size:.9rem;line-height:1.6;color:#786b60}.canvas-help{margin:14px 0}.canvas-actions{display:flex;flex-wrap:wrap;gap:8px}.canvas-actions button,.colour-row button,.reference-box button{border:1px solid #cdb99f;background:transparent;color:#4d3b29;padding:8px 12px;min-height:42px}.canvas-actions button:hover:not(:disabled),.colour-row button:hover:not(:disabled){background:#efe3d4}
.swatches{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 15px}.swatches button{border:2px solid #fff;outline:1px solid #d5c7b6;border-radius:50%;width:34px;height:34px;background:var(--swatch)}.swatches button[aria-pressed=true]{outline:2px solid #4f3b27;outline-offset:2px}.colour-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.colour-row input{width:42px;height:42px;border:0;padding:0;background:none;cursor:pointer}.colour-row span{font:600 .84rem 'DM Sans',sans-serif}.colour-row button{margin-inline-start:auto;font-size:.86rem}.reference-box{margin-top:12px}.reference-box canvas{width:100%;height:auto;background:#eee2d6;cursor:crosshair;display:block}.reference-box button{margin-top:8px}.range-row{display:grid;grid-template-columns:92px 1fr 48px;gap:10px;align-items:center}.range-row label{margin:0!important}.range-row input{accent-color:#9b734b;width:100%}.range-row output{text-align:end;font-size:.82rem;color:#665346}
.finish-panel{margin:28px 0 30px;padding:clamp(24px,4vw,48px);background:#33271e;color:#f8eee3;display:flex;justify-content:space-between;align-items:center;gap:24px}.finish-panel h2{font-size:clamp(1.5rem,2.5vw,2.3rem);margin:.4rem 0}.finish-panel p:not(.eyebrow){line-height:1.65;max-width:680px;margin-bottom:0;color:#e3d6c6}.finish-actions{display:grid;gap:10px;min-width:220px}.finish-actions button,.finish-actions a{display:block;text-align:center;padding:13px 17px;text-decoration:none;border:1px solid #dbc4a7;background:#f0dfc8;color:#33271e;font-weight:700}.finish-actions a{background:transparent;color:#f9ead9}.finish-actions a:hover{background:#695038}.status{min-height:1.4em;color:#745739}footer{display:flex;justify-content:space-between;gap:12px;max-width:1370px;margin:auto;padding:22px clamp(18px,4vw,54px);border-top:1px solid #ddcbb7;font-size:.75rem;letter-spacing:.08em;color:#897967}
:focus-visible{outline:3px solid #a77742;outline-offset:3px}@media(max-width:900px){.studio{grid-template-columns:1fr}.controls{grid-template-columns:repeat(2,minmax(0,1fr))}.adjust-group{grid-column:1/-1}.finish-panel{flex-direction:column;align-items:stretch}}@media(max-width:600px){.top{padding:15px}.back{min-width:auto;font-size:.77rem}.languages{min-width:auto}.brand{font-size:1rem}.brand small{font-size:.4rem}.controls{grid-template-columns:1fr}.adjust-group{grid-column:auto}.canvas-wrap{min-height:260px}.finish-panel{margin-inline:-18px}.range-row{grid-template-columns:75px 1fr 43px}footer{display:block;line-height:2}}

.ai-studio{background:#33271e;color:#f8eee3;padding:clamp(22px,4vw,48px);margin:0 0 55px;box-shadow:0 20px 45px rgba(50,35,20,.15)}
.ai-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}.ai-heading h2,.manual-intro h2{font-size:clamp(1.7rem,3vw,2.7rem);margin:.3rem 0 .7rem}.ai-heading p:not(.eyebrow):not(.ai-count){line-height:1.65;color:#e0d2c1;max-width:660px;margin-bottom:0}.ai-count{flex:none;border:1px solid #b99667;color:#f7d79b;padding:8px 14px;font-weight:700;margin:0;border-radius:100px;font-size:.9rem}
.ai-uploads{display:grid;grid-template-columns:minmax(0,540px);gap:16px;margin:27px 0 18px}.ai-upload{position:relative;min-height:145px;overflow:hidden;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;text-align:center;border:1px dashed #c9aa82;background:#49372a;cursor:pointer;padding:20px}.ai-upload:hover{background:#574432}.ai-upload .ai-step{font:600 .8rem 'DM Sans',sans-serif;color:#e3bd85}.ai-upload strong{font-size:1.1rem}.ai-upload small{color:#d8c9b8}.ai-upload img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.22;pointer-events:none}.ai-upload img[hidden]{display:none}.ai-upload strong,.ai-upload small,.ai-upload .ai-step{position:relative;z-index:1;text-shadow:0 1px 8px #21130b}
.ai-look{border:1px solid #95785b;padding:16px 20px 20px;margin:0 0 20px;max-width:800px}.ai-look legend{padding:0 8px;color:#f7d79b;font-weight:700}.ai-mode-options{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}.ai-mode-options label{display:flex;align-items:center;gap:7px;border:1px solid #b59572;padding:10px 14px;cursor:pointer;min-height:46px}.ai-mode-options label:has(input:checked){background:#d2a96e;color:#241a12}.ai-mode-options input{accent-color:#563c23}.ai-look-panel[hidden]{display:none}.ai-swatches{display:flex;gap:11px;flex-wrap:wrap;margin:8px 0 18px}.ai-swatches button{width:42px;height:42px;background:var(--swatch);border:2px solid #33271e;border-radius:50%;outline:1px solid #bda78b}.ai-swatches button[aria-pressed=true]{outline:3px solid #f5d398;outline-offset:2px}.ai-custom-colour{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.ai-custom-colour input{width:48px;height:42px;padding:0;border:0;background:transparent}.ai-custom-colour output{font:600 .85rem 'DM Sans',sans-serif}.ai-reference-panel .ai-upload{max-width:540px;min-height:120px}
.ai-consent{display:flex;gap:10px;align-items:flex-start;max-width:870px;font-size:.9rem;line-height:1.6;color:#e1d4c5;cursor:pointer}.ai-consent input{width:19px;height:19px;flex:none;margin-top:3px;accent-color:#b08d57}.ai-action{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:24px}.ai-action button{border:0;background:#d2a96e;color:#241a12;font-weight:700;padding:14px 24px;min-height:50px;min-width:230px}.ai-action button:hover:not(:disabled){background:#e7bb7d}.ai-action p{font-size:.82rem;color:#d4c2ad;line-height:1.5;max-width:420px;margin:0}.ai-status{min-height:1.5em;margin:15px 0 0;color:#f0cb91;font-weight:600}.ai-result{margin-top:20px;max-width:560px}.ai-result img{display:block;width:100%;height:auto;max-height:660px;object-fit:contain;background:#ede1d3}.ai-result a{display:inline-block;margin-top:10px;background:#f0dfc8;color:#33271e;text-decoration:none;padding:12px 20px;font-weight:700}.ai-result[hidden]{display:none}
.manual-tool{margin:0 0 35px}.manual-tool summary{cursor:pointer;border:1px solid #c9ae8a;background:#eee0cf;color:#49372a;padding:17px 21px;font-weight:700;list-style-position:inside}.manual-tool[open] summary{margin-bottom:30px}.manual-intro{padding:0 0 22px}.manual-intro h2{margin:0}
@media(max-width:650px){.intro{padding:28px 0 24px}.intro h1{font-size:2.25rem}.intro-copy{font-size:1rem}.ai-studio{margin-inline:-18px;padding:25px 18px 30px;margin-bottom:40px}.ai-heading{display:block}.ai-count{display:inline-block;margin-top:16px}.ai-uploads{grid-template-columns:1fr;gap:10px;margin-top:18px}.ai-upload{min-height:118px}.ai-action button{width:100%}}