:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;color:#17191a;background:#f5f7f7;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{background:#f5f7f7;min-height:100vh;margin:0}main{grid-template-columns:minmax(0,1fr) 380px;gap:16px;min-height:100vh;padding:16px;display:grid}.preview{flex-direction:column;gap:12px;min-width:0;display:flex}header{border-bottom:1px solid #17191a1f;justify-content:space-between;align-items:end;gap:16px;padding-bottom:12px;display:flex}h1{letter-spacing:0;margin:0;font-size:clamp(22px,3vw,34px);line-height:1.05}.eyebrow{color:#4d6b70;text-transform:uppercase;margin:0 0 5px;font-size:12px;font-weight:800}.status{flex-wrap:wrap;justify-content:flex-end;gap:8px;font-size:12px;font-weight:700;display:flex}.pill{white-space:nowrap;background:#fff;border:1px solid #17191a1f;border-radius:999px;padding:7px 10px}.image-wrap{background:#fff;border:1px solid #00000024;border-radius:8px;flex:1;place-items:center;min-height:420px;display:grid;position:relative;overflow:hidden;box-shadow:0 18px 46px #0000001a}#render{width:100%;height:auto;display:block}.render-overlay{width:100%;height:auto;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.render-status{background:#ffffffeb;border:1px solid #17191a1f;border-radius:999px;padding:7px 12px;font-size:12px;font-weight:700;position:absolute}.render-status.error{color:#a83a44;border-color:#bd4b55}aside{background:#fff;border:1px solid #17191a1f;border-radius:8px;max-height:calc(100vh - 32px);padding:16px;overflow:auto;box-shadow:0 18px 44px #00000014}.panel-title{justify-content:space-between;align-items:start;gap:12px;display:flex}h2{letter-spacing:0;margin:2px 0 0;font-size:18px}.artwork-select{color:#17191a;width:100%;height:36px;font:inherit;background:#fff;border:1px solid #17191a2e;border-radius:8px;margin-top:14px;padding:0 10px;font-weight:700}.area{background:#fbfcfc;border:1px solid #17191a1f;border-radius:8px;margin-top:12px;padding:12px}.area-head{grid-template-columns:minmax(0,1fr) 48px;align-items:center;gap:10px;display:grid}.area-label{align-items:center;gap:9px;min-width:0;font-weight:800;display:flex}.area-label span:last-child{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.swatch{border:1px solid #0000002e;border-radius:6px;flex:none;width:30px;height:30px;box-shadow:inset 0 0 0 1px #ffffff59}input[type=color]{background:#fff;border:1px solid #17191a2e;border-radius:8px;width:48px;height:34px;padding:3px}.color-code,.opacity-number{color:#17191a;letter-spacing:0;background:#fff;border:1px solid #17191a2e;border-radius:6px;font:700 12px ui-monospace,SFMono-Regular,Menlo,monospace}.color-code{text-transform:uppercase;width:100%;height:32px;margin-top:9px;padding:0 9px}.color-code.invalid{color:#a83a44;border-color:#bd4b55}label{color:#5d6364;gap:7px;margin-top:10px;font-size:12px;font-weight:700;display:grid}.range-row{justify-content:space-between;gap:10px;display:flex}input[type=range]{accent-color:#297a86;width:100%}.opacity-control{grid-template-columns:minmax(0,1fr) 58px;align-items:center;gap:9px;display:grid}.opacity-number{width:58px;height:30px;padding:0 6px}button,a.button{color:#fff;min-height:34px;font:inherit;cursor:pointer;background:#17191a;border:1px solid #17191a24;border-radius:8px;justify-content:center;align-items:center;padding:8px 10px;font-size:13px;font-weight:800;text-decoration:none;display:inline-flex}button.secondary,a.secondary{color:#17191a;background:#fff}.actions,.preset-grid{grid-template-columns:1fr 1fr;gap:8px;margin-top:14px;display:grid}.saved-list{gap:7px;margin-top:8px;display:grid}.saved-empty{color:#73797a;border-top:1px solid #17191a1a;border-bottom:1px solid #17191a1a;margin-top:8px;padding:10px 2px;font-size:12px}.saved-item{grid-template-columns:minmax(0,1fr) auto;align-items:stretch;gap:7px;display:grid}.saved-apply{color:#17191a;text-align:left;background:#fbfcfc;border-color:#17191a1f;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:9px;min-width:0;padding:8px 9px;display:grid}.saved-swatches{grid-auto-columns:10px;grid-auto-flow:column;gap:2px;display:grid}.saved-swatch{border:1px solid #00000024;border-radius:3px;width:10px;height:28px}.saved-copy{gap:2px;min-width:0;display:grid}.saved-name{font-size:12px;font-weight:800}.saved-values{color:#686f70;text-overflow:ellipsis;white-space:nowrap;font:10px ui-monospace,SFMono-Regular,Menlo,monospace;overflow:hidden}.saved-delete{color:#8d3941;background:#fff;width:58px;min-height:46px}.check{color:#424748;align-items:center;gap:8px;margin-top:14px;display:flex}.check input{width:16px;height:16px}.hex-list{color:#fff;background:#17191a;border-radius:8px;gap:6px;margin-top:14px;padding:12px;font-size:12px;display:grid}.hex-line{justify-content:space-between;align-items:center;gap:8px;display:flex}@media (width<=980px){main{grid-template-columns:1fr}aside{order:-1;max-height:none}header{flex-direction:column;align-items:start}.status{justify-content:flex-start}}