@font-face{font-family:Studio;src:url('vendor/font.ttf')}*{box-sizing:border-box}body{margin:0;background:#faf7f3;color:#302a36;font:15px Studio,Arial,sans-serif}header{height:84px;display:flex;align-items:center;gap:20px;padding:12px 5%;border-bottom:1px solid #e3dce1;background:white}header img{width:66px;height:66px;object-fit:contain}header b{margin-right:auto;font-size:12px;color:#6d506c;background:#f4ebf3;padding:8px 12px;border-radius:20px}main{max-width:1480px;margin:auto;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(340px,1fr);gap:38px;padding:32px 4%}h1{font-size:34px;margin:7px 0}h2{font-size:21px;margin:7px 0 18px}.eyebrow{color:#7b536d;font-size:12px;letter-spacing:.6px;margin:0}.canvas-panel{position:sticky;top:20px;align-self:start;min-width:0}.canvas-heading{display:flex;align-items:center;justify-content:space-between;gap:15px}#measure{font:12px Arial;color:#605661}.view-switch{display:flex;gap:8px;margin:23px 0 10px}.view-switch button[aria-pressed=true]{background:#49334d;color:white;border-color:#49334d}button,input,select{font:inherit}button{background:white;border:1px solid #d5cbd5;color:#433646;border-radius:11px;min-height:42px;padding:8px 13px;cursor:pointer}button:hover{background:#f6edf2}button:disabled{cursor:not-allowed;opacity:.45}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #7750bc;outline-offset:3px}#preview{height:min(64vh,650px);min-height:350px;position:relative;background:radial-gradient(ellipse at center,#fffdf9,#efe8df);border:1px solid #e8ded9;border-radius:24px;overflow:hidden}#drawing,#three{width:100%;height:100%}#drawing{touch-action:none}#three canvas{display:block;width:100%;height:100%}#loading{position:absolute;top:45%;text-align:center;width:100%}.preview-hint{text-align:center;font-size:13px;color:#66596c}.swatch-line{display:flex;justify-content:center;gap:20px;font-size:12px;color:#65586a}.swatch-line span:before{content:'✓ ';color:#44765d}aside section{background:white;border:1px solid #e6dfe4;border-radius:20px;padding:24px;margin-bottom:18px}label{display:block;font-size:13px;margin:16px 0 5px}label output{float:left;color:#775b70}input[type=number],input[type=text],input:not([type]),select{width:100%;border:1px solid #cec6cf;border-radius:9px;padding:10px;background:#fff;min-height:42px;color:#352d3a;margin-top:7px}input[type=range]{width:100%;accent-color:#8b607f;margin-top:13px}input[type=color]{display:block;width:100%;height:36px;margin-top:8px;border:1px solid #ddd;border-radius:8px;background:white;padding:3px}.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}.small{font-size:12px;line-height:1.8;color:#6c6170}.check{display:flex;align-items:center;gap:9px}.check input{accent-color:#855d7a}.catalog{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.catalog button{display:flex;align-items:center;flex-direction:column;gap:6px;padding:10px;font-size:12px}.catalog svg{width:32px;height:32px}.presets{display:flex;flex-wrap:wrap;gap:7px}.presets button{font-size:12px}.primary{background:#503a54;color:white;width:100%;border:0;margin:16px 0 0}.primary:hover{background:#65496b}#issues{margin-top:16px;padding:12px 16px;border-radius:12px;color:#794123;background:#fff2df;font-size:13px;line-height:1.8}#issues:empty{display:none}.home{display:block;margin:20px 0 0;color:#67486b;text-decoration:none}#message{font-size:13px;line-height:1.7}dialog{max-width:570px;width:92%;border:0;border-radius:22px;padding:30px;line-height:1.9;color:#3e3241}dialog::backdrop{background:#28202a88}#closeGuide{float:left}#selection{margin-bottom:15px}[hidden]{display:none!important}@media(max-width:850px){header{padding:8px 16px;height:68px}header img{width:50px;height:50px}header span{font-size:12px}header b{font-size:10px;padding:6px}main{display:block;padding:15px}.canvas-panel{z-index:2;top:0;background:#faf7f3;padding:8px 0;position:sticky}h1{font-size:23px}.canvas-heading .eyebrow,.swatch-line{display:none}#preview{height:30vh;min-height:200px;border-radius:15px}.view-switch{margin:8px 0;gap:5px}.view-switch button{min-height:34px;font-size:12px;padding:5px 10px}.preview-hint{font-size:11px;margin:6px}#issues{max-height:85px;overflow:auto;margin:5px 0;font-size:11px;padding:5px 10px}aside{margin-top:12px}aside section{padding:20px}}

/* Match the established product editor: preview left, RTL controls right. */
body{background:#f5f7fb;color:#17243c}header{height:88px;border-color:#e0e5ef}header b{color:#314766;background:#eaf1ff}main{direction:ltr;grid-template-columns:minmax(0,1fr) 360px;max-width:1600px;padding:28px;gap:24px}.canvas-panel,aside{direction:rtl}.canvas-panel{top:24px;border:1px solid #dfe5ef;border-radius:24px;background:radial-gradient(ellipse at 50% 40%,#fff 0,#edf2fa 75%);padding:22px;overflow:hidden}.canvas-heading h1{font-size:26px}.canvas-heading .eyebrow{color:#397ee8}#preview{background:transparent;border:0;border-radius:0;height:calc(100vh - 360px);min-height:330px}.view-switch{justify-content:center;margin:12px 0}.view-switch button[aria-pressed=true]{background:#eaf1ff;border-color:#397ee8;color:#2262c5}button{border-color:#dce3ef;color:#314766}button:hover{background:#eef4ff}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline-color:#397ee8}input[type=range]{direction:ltr;accent-color:#397ee8}.eyebrow{color:#397ee8}aside{background:white;border:1px solid #e0e5ef;border-radius:24px;padding:22px}aside section{padding:18px 0;margin:0;border:0;border-bottom:1px solid #e0e5ef;border-radius:0}aside>.home{margin:0 0 12px}.home{color:#397ee8}.primary{background:#245dd1}.primary:hover{background:#1e50ba}.check input{accent-color:#397ee8}.view-actions{display:flex;justify-content:center;gap:7px;flex-wrap:wrap}.view-actions button{background:#ffffffdc;border:1px solid #d8e0ec;padding:10px 12px;border-radius:12px;color:#314766;font-size:13px}.swatch-line{flex-wrap:wrap;gap:6px 16px}label output{color:#65758c}.small,.preview-hint{color:#53617b}#message{color:#314766}
@media(max-width:850px){header{height:72px}main{display:flex;flex-direction:column;padding:14px;gap:14px}.canvas-panel{top:0;width:100%;padding:10px;min-height:0;z-index:15;border-radius:0 0 18px 18px;box-shadow:0 5px 18px #17243c20;background:#edf2fa}.canvas-heading h1{font-size:19px;margin:0}.canvas-heading #measure{font-size:11px}.view-switch{margin:5px 0}#preview{height:clamp(100px,23svh,200px);min-height:100px}.view-actions{gap:5px}.view-actions button{font-size:11px;min-height:32px;padding:5px 8px}.preview-hint{margin:4px 0;font-size:10px}.swatch-line{display:none}aside{margin:0;padding:20px;width:100%}aside section{padding:18px 0}#issues{max-height:55px}}