*{box-sizing:border-box}:root{font:16px/1.45 Inter,"Segoe UI",Arial,sans-serif;color:#253348;background:#f5f6f8}body{margin:0}button,input,select,textarea{font:inherit}button{cursor:pointer;color:inherit}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #5c872f;outline-offset:2px}button{border:1px solid #dce2e9;background:white;border-radius:7px;padding:9px 13px;font-size:14px}button:hover{border-color:#8ca96d}header{height:70px;border-bottom:1px solid #dfe3e9;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 28px;gap:16px}.brand{color:inherit;text-decoration:none;display:flex;align-items:center;gap:7px;font-size:20px;letter-spacing:-.5px}.brand small{font-size:12px;margin-left:6px;background:#edf1f5;padding:3px 6px;border-radius:4px}.mark{background:#202c3d;color:#c2ed88;font-size:26px;padding:0 11px;border-radius:8px;margin-right:6px}header nav{display:flex;gap:7px}main{display:grid;grid-template-columns:380px minmax(0,1fr);max-width:1900px;margin:auto}aside{background:white;border-right:1px solid #dfe3e9;height:calc(100vh - 70px);overflow:auto}.tabs{display:flex;gap:4px;position:sticky;top:0;z-index:2;background:white;padding:15px 16px;border-bottom:1px solid #edf0f3}.tabs button{flex:1;border:0;padding:10px 7px;white-space:nowrap;font-size:13px;color:#65748a}.tabs button.active{background:#eff7e6;color:#3b5c21;font-weight:650}#controls{padding:20px}details{border-bottom:1px solid #e3e8ee;padding:0 0 17px;margin-bottom:19px}summary{font-size:15px;font-weight:650;cursor:pointer;padding:0 0 4px;color:#26394e}summary::marker{color:#8ba76b}details[open] summary{margin-bottom:15px}label{display:block;font-size:14px;color:#546278}.field{margin:13px 0}.field>label{margin-bottom:6px}.fields{display:grid;grid-template-columns:1fr 1fr;gap:0 13px}.number{display:flex;border:1px solid #dce2e9;border-radius:6px;background:#f9fafb;overflow:hidden;align-items:center}.number input{width:100%;min-width:0;border:0;background:transparent;padding:9px 10px;color:#243348;font-weight:550}.number span{font-size:12px;padding-right:10px;color:#7b8797}select,textarea,input[type=text]{border:1px solid #dce2e9;border-radius:6px;background:#f9fafb;color:#253348;width:100%;padding:10px;font-size:14px}textarea{resize:vertical;min-height:65px}input[type=range]{width:100%;accent-color:#719b43;height:5px;margin:10px 0 7px}.range-head{display:flex;align-items:center;justify-content:space-between;font-size:14px}.range-head output{font-size:13px;color:#35472d;font-weight:600}.check{display:flex;align-items:center;gap:8px;font-size:14px;margin:12px 0}.check input{accent-color:#709a43;width:16px;height:16px;margin:0}.checks{display:flex;gap:0 17px;flex-wrap:wrap}.check small{font-size:12px}small,.note{color:#738096;font-size:12px;line-height:1.6}.note{display:block;margin:9px 0}.local-note{padding:8px 20px 22px;font-size:12px;color:#788597}.shape-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin:12px 0 21px}.shape-grid button{text-align:left;font-size:13px;padding:10px}.shape-grid button.active{background:#f0f7e8;border-color:#7da24d;color:#3a5c22}.shape-grid button span{display:inline-block;width:22px;font-size:18px}.workspace{padding:25px 30px;min-width:0;max-height:calc(100vh - 70px);overflow:auto}.workspace-top{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:20px}.eyebrow{font-size:12px;letter-spacing:1.5px;font-weight:650;color:#718097}h1{font-size:25px;letter-spacing:-.6px;margin:4px 0}h2{font-size:18px;letter-spacing:-.25px;margin:0 0 8px}h3{font-size:16px}.view-toggle{display:flex;padding:4px;background:#e8edf1;border-radius:8px;gap:2px}.view-toggle button{border:0;background:transparent;font-size:13px;padding:8px 11px;color:#68798d}.view-toggle button.active{background:white;color:#2d3e51;box-shadow:0 1px 3px #20305013}#viewer{height:clamp(300px,53vh,700px);border:1px solid #304052;border-radius:13px;position:relative;overflow:hidden;background:#162130}#viewer canvas{width:100%;height:100%;display:block;touch-action:none}.view-label{position:absolute;left:20px;top:18px;font-size:12px;color:#b5c3d1;pointer-events:none}.viewer-actions{position:absolute;right:12px;top:12px;display:flex;gap:4px}.viewer-actions button{background:#253344;border-color:#526071;color:#d0d9e3;font-size:12px;padding:6px 9px}.viewer-help{position:absolute;bottom:15px;text-align:center;left:0;right:0;color:#9eacbf;font-size:12px;pointer-events:none}#viewerror{position:absolute;inset:30%;color:white}#editor-view{background:#e6eaee;border:1px solid #d9e0e7;border-radius:12px;padding:16px;min-height:380px}.compare-head{display:grid;grid-template-columns:1fr 1fr;color:#6a7b8c;font-size:13px;text-align:center;padding:0 0 12px}.compare{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:center;min-height:300px}.compare canvas{width:100%;max-height:460px;object-fit:contain;background:#fff;border-radius:5px}#editor-view p{font-size:12px;text-align:center;color:#6a788c}.metrics{display:grid;grid-template-columns:repeat(3,1fr);background:white;border:1px solid #e0e5eb;border-radius:9px;margin-top:17px;padding:17px 0}.metrics>div{border-right:1px solid #e4e8ed;padding:0 20px}.metrics>div:last-child{border:0}.metrics small{display:block;margin-bottom:5px}.metrics strong{font-size:15px;font-weight:600;display:block}.action-row{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:24px}.action-row p{font-size:14px;color:#65758a;margin:0 0 5px}.action-buttons{display:flex;gap:8px;align-items:center;flex-shrink:0}.primary{background:#c2ed88;border-color:#acd576;color:#2b441c;font-weight:650}.primary:hover{background:#b6e679}#download{min-width:132px;padding:14px 20px;display:flex;gap:30px;justify-content:space-between}#status{font-size:13px;color:#566d44;margin-top:15px;line-height:1.5}#status.error{color:#ad3b31}.upload{display:flex;flex-direction:column;gap:6px;align-items:center;width:100%;padding:24px 12px;background:#f8fafc;border:1px dashed #acb9c8;border-radius:9px;margin:4px 0 18px}.upload.drag{background:#f0f8e5}.upload b{font-size:16px}.upload span{font-size:27px;color:#749346}.thumb-list{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}.thumb-row{display:flex;gap:10px;border:1px solid #e0e6ed;border-radius:7px;padding:8px;align-items:center}.thumb-row.selected{border-color:#81a752;background:#f5f9ef}.thumb-row img{width:58px;height:50px;object-fit:cover;border-radius:4px}.thumb-row .thumb-select{display:flex;gap:10px;align-items:center;border:0;background:none;padding:0;flex:1;min-width:0;text-align:left}.thumb-row strong{font-size:13px;overflow-wrap:anywhere;display:block}.thumb-row small{font-size:12px;display:block}.thumb-actions{display:flex;gap:3px}.thumb-actions button{font-size:12px;padding:4px;border:0;background:none}.selected-image{display:flex;gap:10px;align-items:center;margin-bottom:20px}.selected-image img{width:70px;height:58px;object-fit:cover;border-radius:5px}.selected-image strong{font-size:13px;overflow-wrap:anywhere}.inline-actions{display:flex;gap:7px;margin:15px 0;flex-wrap:wrap}.inline-actions button{font-size:13px}#profile-curve{width:100%;height:110px;background:#f5f8fb;border:1px solid #e0e6ed;border-radius:6px}.preset-row{display:flex;flex-wrap:wrap;gap:5px;margin:9px 0}.preset-row button{font-size:12px;padding:6px 8px}.color-field{display:flex;align-items:center;justify-content:space-between;margin:12px 0}.color-field input{width:46px;height:30px;border:0;padding:0;background:none}dialog{border:1px solid #dfe4eb;border-radius:14px;padding:25px;max-width:620px;width:calc(100% - 30px);max-height:85vh;color:#27374a;box-shadow:0 24px 120px #14243d4d}dialog::backdrop{background:#13203877;backdrop-filter:blur(3px)}dialog p{font-size:14px;color:#68778b;line-height:1.65}.dialog-title{display:flex;align-items:center;justify-content:space-between;gap:20px}.dialog-title button{border:0;font-size:25px;padding:0 8px}.download-choices{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}.download-choices button{padding:17px;text-align:left;display:flex;flex-direction:column;gap:7px}.download-choices strong{font-size:14px}.download-choices small{font-size:12px}.profile-save{display:flex;gap:10px;margin:20px 0}.profile-save input{flex:1}.saved-profile{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e4e8ed;padding:14px 0;gap:12px}.saved-profile strong{font-size:14px}.saved-profile div{display:flex;gap:5px}.saved-profile button{font-size:12px;padding:6px 9px}.dialog-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:20px}.dialog-actions button{font-size:13px}[hidden]{display:none!important}@media(max-width:1100px){main{grid-template-columns:330px minmax(0,1fr)}.workspace{padding:22px 18px}.workspace-top{align-items:flex-start;flex-direction:column}.action-row{align-items:flex-start;flex-direction:column}.metrics>div{padding:0 12px}.metrics strong{font-size:13px}.viewer-actions button{padding:5px}.view-label{top:52px}}@media(max-width:720px){header{padding:0 14px;height:auto;min-height:65px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}.brand{font-size:18px}header nav{gap:4px}header nav button{font-size:12px;padding:7px}main{display:flex;flex-direction:column}aside{height:auto;max-height:58vh;border-right:0;border-bottom:1px solid #dfe3e9}.tabs{position:sticky}.workspace{max-height:none;overflow:visible;padding:22px 14px}.workspace-top{gap:10px}.metrics{gap:0}.metrics>div{padding:0 8px}.metrics small{font-size:11px}.metrics strong{font-size:12px}.action-buttons{width:100%;flex-wrap:wrap}.primary{flex:1}#viewer{height:390px}.download-choices{grid-template-columns:1fr}.compare{min-height:200px}.compare canvas{max-height:300px}.thumb-list{max-height:220px;overflow:auto}}

/* Touch layout and a progressive disclosure mode. */
button,input,select,summary{min-height:44px}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #a1cfef;outline-offset:3px}.simple-mode #controls details:not(:first-of-type){display:none}.simple-mode [data-light="normal"]{display:none}.simple-mode #controls details:first-of-type{display:block}
@media(max-width:760px){body{height:auto;overflow:auto}header{position:static;flex-wrap:wrap;height:auto;gap:8px;padding:10px}header nav{flex-wrap:wrap}main{display:flex!important;flex-direction:column;height:auto!important}aside{width:100%!important;max-height:none!important;overflow:visible!important;order:0}.workspace{width:100%;min-width:0;overflow:visible!important;order:1}.tabs{position:sticky;top:0;z-index:5;background:#17212d}.tabs button{flex:1;font-size:13px;padding:8px 4px}#controls{max-height:48svh;overflow:auto;overscroll-behavior:contain}#viewer{height:360px!important;min-height:280px}.workspace-top{flex-wrap:wrap;gap:10px}.action-row{flex-direction:column;align-items:stretch}.action-buttons{display:flex;flex-wrap:wrap}.action-buttons button{flex:1}.metrics{grid-template-columns:1fr 1fr}.metrics>div:last-child{grid-column:1/-1}dialog{max-width:calc(100vw - 20px);max-height:85svh;overflow:auto}.fields{grid-template-columns:1fr 1fr}input,select{font-size:16px!important}.download-choices{grid-template-columns:1fr}.brand{font-size:16px}.viewer-help{font-size:11px}}

header .brand img{width:108px;height:auto;display:block;object-fit:contain}header .brand span{white-space:nowrap}@media(max-width:760px){header .brand img{width:78px}header .brand span{font-size:14px}}

.simple-shape-choice{display:none}.simple-mode .simple-shape-choice{display:block}.simple-mode .shape-grid{display:none}#jump-preview{display:none}@media(max-width:760px){#jump-preview{display:inline-block;margin:0 6px 8px 0}#controls{max-height:36svh}.local-note{padding:10px 16px}}
