*{box-sizing:border-box}:root{--bg:#f6f4ef;--fg:#1c1c1c;--muted:#8c8579;--line:#e3ddd0;--accent:#111;--card:#fff}html,body,#root{background:var(--bg);height:100%;color:var(--fg);margin:0;font-family:-apple-system,Inter,system-ui,sans-serif}.page{flex-direction:column;min-height:100vh;padding:0;display:flex}.topbar{background:var(--bg);border-bottom:1px solid var(--line);align-items:center;gap:32px;padding:18px 36px;display:flex}.brand{align-items:center;gap:12px;display:flex}.brand-mark{color:#fff;background:#111;border-radius:8px;justify-content:center;align-items:center;width:38px;height:38px;font-weight:700;display:inline-flex}.brand-name{letter-spacing:.01em;font-size:18px;font-weight:700}.brand-tag{color:var(--muted);letter-spacing:.18em;font-size:10px}.nav{gap:28px;margin-left:22px;display:flex}.nav a{color:#2a2a2a;cursor:pointer;font-size:14px;text-decoration:none}.nav a.active{font-weight:600}.cta{color:#fff;cursor:pointer;background:#111;border:none;border-radius:999px;margin-left:auto;padding:12px 22px;font-size:14px;font-weight:500}.main{flex:1;grid-template-columns:1fr 1.05fr;gap:40px;width:100%;max-width:1480px;margin:0 auto;padding:32px 36px 48px;display:grid}.preview{flex-direction:column;gap:14px;display:flex}.preview-tags{letter-spacing:.16em;color:#6c655a;justify-content:space-between;align-items:center;padding:0 6px;font-size:11px;display:flex}.model-select{font:inherit;letter-spacing:.16em;color:#6c655a;cursor:pointer;text-transform:uppercase;appearance:none;background-color:#0000;background-image:linear-gradient(45deg,#0000 50%,#8b8678 50%),linear-gradient(135deg,#8b8678 50%,#0000 50%);background-position:calc(100% - 8px),calc(100% - 4px);background-repeat:no-repeat;background-size:4px 4px;background-attachment:scroll;background-origin:padding-box;background-clip:border-box;border:none;border-bottom:1px dotted #c6bea9;padding:2px 18px 2px 0;font-size:11px}.model-select:focus{border-bottom-color:#1c1c1c;outline:none}.stage{background:radial-gradient(at 50% 60%,#f4eedd 0%,#efe9d4 50%,#e6dec3 100%);border-radius:18px;flex:1;min-height:420px;position:relative;overflow:hidden}.preview-code{text-align:center;color:var(--muted);letter-spacing:.2em;font-family:SF Mono,ui-monospace,monospace;font-size:12px}.preview-stats{border-bottom:1px solid var(--line);justify-content:space-between;align-items:flex-end;padding:6px 6px 8px;display:flex}.preview-stats .right{text-align:right}.stat-label{color:var(--muted);letter-spacing:.18em;font-size:10px}.stat-value{letter-spacing:.01em;font-family:Times New Roman,Cormorant Garamond,serif;font-size:28px;font-weight:500}.lid-toggle{font:inherit;color:#1c1c1c;cursor:pointer;text-underline-offset:4px;background:0 0;border:none;padding:0;-webkit-text-decoration:underline dotted #c6bea9;text-decoration:underline dotted #c6bea9}.lid-toggle:hover{color:#4d4233}.sku{color:#f4eedd;background:#111;border-radius:10px;justify-content:space-between;align-items:center;margin-top:4px;padding:18px 22px;display:flex}.sku-label{letter-spacing:.22em;color:#8b8579;font-size:10px}.sku-code{margin-top:4px;font-family:SF Mono,ui-monospace,monospace;font-size:14px}.copy{color:#d6a85b;letter-spacing:.2em;cursor:pointer;background:0 0;border:none;font-size:12px}.controls{flex-direction:column;gap:22px;display:flex}.block-head{justify-content:space-between;align-items:baseline;margin-bottom:0;display:flex}.block-head h3{letter-spacing:.24em;color:#2c2c2c;margin:0;font-size:11px;font-weight:600}.block-head .muted{color:var(--muted);font-size:11px}.palette{margin-top:10px}.palette-title{letter-spacing:.2em;color:#aaa39b;margin-bottom:10px;font-size:10px}.swatches{grid-template-columns:repeat(8,1fr);gap:12px;max-width:460px;display:grid}.swatch{cursor:pointer;border:2px solid #0000;border-radius:50%;width:38px;height:38px;padding:0;transition:transform .12s,border-color .12s;box-shadow:0 0 0 1px #0000000f,inset 0 0 0 1px #fff6}.swatch:hover{transform:scale(1.08)}.swatch.on{border-color:#111;transform:scale(1.05)}.part-tabs{grid-template-columns:1fr 1fr;gap:10px;max-width:460px;margin:12px 0 4px;display:grid}.part-tab{border:1px solid var(--line);cursor:pointer;text-align:left;background:#fff;border-radius:10px;align-items:center;gap:10px;padding:10px 12px;transition:border-color .12s,box-shadow .12s;display:flex}.part-tab.on{border-color:#111;box-shadow:0 0 0 1px #111}.part-dot{border-radius:50%;flex:none;width:24px;height:24px;box-shadow:0 0 0 1px #0000001f,inset 0 0 0 1px #fff6}.part-meta{flex-direction:column;min-width:0;line-height:1.25;display:flex}.part-meta b{color:#1c1c1c;font-size:13px;font-weight:600}.part-meta code{color:var(--muted);font-family:SF Mono,ui-monospace,monospace;font-size:11px}.custom-color{max-width:460px;margin-top:14px}.custom-head{justify-content:space-between;align-items:baseline;margin-bottom:10px;display:flex}.link-btn{color:#8a6d2f;letter-spacing:.04em;cursor:pointer;text-underline-offset:3px;background:0 0;border:none;padding:0;font-size:11px;-webkit-text-decoration:underline dotted #c6bea9;text-decoration:underline dotted #c6bea9}.link-btn:hover{color:#5d4920}.cpicker{border:1px solid var(--line);background:#fff;border-radius:10px;align-items:center;gap:16px;padding:14px;display:flex}.cwheel-wrap{flex-direction:column;flex:none;align-items:center;gap:10px;display:flex}.cwheel{cursor:crosshair;touch-action:none;background:radial-gradient(circle,#fff 0%,#fff0 70%),conic-gradient(red,#ff0,#0f0,#0ff,#00f,#f0f,red);border-radius:50%;position:relative;box-shadow:0 0 0 1px #0000001f,0 2px 8px #0000001f}.cwheel-dim{pointer-events:none;background:#000;border-radius:50%;position:absolute;inset:0}.cwheel-handle{pointer-events:none;border:2px solid #fff;border-radius:50%;width:16px;height:16px;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #0006}.cwheel-value{appearance:none;cursor:pointer;border-radius:999px;outline:none;width:100%;height:10px;box-shadow:inset 0 0 0 1px #0000001f}.cwheel-value::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;background:#fff;border:1px solid #0000004d;border-radius:50%;width:16px;height:16px;box-shadow:0 1px 3px #0000004d}.cwheel-value::-moz-range-thumb{cursor:pointer;background:#fff;border:1px solid #0000004d;border-radius:50%;width:16px;height:16px}.cpicker-body{flex-direction:column;flex:1;gap:10px;min-width:0;display:flex}.cpicker-current{align-items:center;gap:8px;display:flex}.cpicker-chip{border-radius:6px;width:22px;height:22px;box-shadow:0 0 0 1px #0000001f,inset 0 0 0 1px #fff6}.cpicker-hexlabel{color:#1c1c1c;letter-spacing:.04em;font-family:SF Mono,ui-monospace,monospace;font-size:12px}.cpicker-modes{gap:6px;display:flex}.cmode{letter-spacing:.12em;border:1px solid var(--line);color:#6c655a;cursor:pointer;background:0 0;border-radius:7px;flex:1;padding:6px 0;font-size:11px}.cmode.on{color:#fff;background:#111;border-color:#111}.cfields{gap:8px;display:flex}.cfield.hex{border:1px solid var(--line);color:#1c1c1c;text-transform:lowercase;border-radius:7px;flex:1;padding:9px 12px;font-family:SF Mono,ui-monospace,monospace;font-size:14px}.cnum{flex-direction:column;flex:1;gap:4px;display:flex}.cnum span{letter-spacing:.12em;color:var(--muted);text-align:center;font-size:10px}.cnum input{border:1px solid var(--line);color:#1c1c1c;text-align:center;-moz-appearance:textfield;border-radius:7px;width:100%;padding:8px 6px;font-family:SF Mono,ui-monospace,monospace;font-size:13px}.cnum input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.cnum input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.cfield.hex:focus,.cnum input:focus{border-color:#111;outline:none}.presets{max-width:460px;margin-top:14px}.presets-toggle{border:1px solid var(--line);cursor:pointer;letter-spacing:.06em;color:#2c2c2c;text-transform:uppercase;background:#fff;border-radius:10px;justify-content:space-between;align-items:center;width:100%;padding:11px 14px;font-size:12px;display:flex}.presets-toggle:hover{border-color:#c9c2b4}.presets-toggle .chev{color:var(--muted);font-size:18px;line-height:1;transition:transform .18s}.presets-toggle .chev.open{transform:rotate(90deg)}.presets-body{padding:14px 4px 4px;animation:.16s presetsIn}@keyframes presetsIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.pills{flex-wrap:wrap;gap:10px;margin-top:6px;display:flex}.pill{color:#2a2a2a;border:1px solid var(--line);cursor:pointer;white-space:nowrap;background:0 0;border-radius:999px;padding:9px 14px;font-size:12.5px}.pill.on{color:#fff;background:#111;border-color:#111}.upload{border:1px solid var(--line);background:#fff;border-radius:10px;grid-template-columns:56px 1fr auto auto;align-items:center;gap:14px;margin-top:6px;padding:14px 16px;display:grid}.upload-thumb{background-color:#f0eada;background-position:50%;background-size:cover;border-radius:6px;width:56px;height:56px}.upload-info{min-width:0}.upload-name{color:#1c1c1c;white-space:nowrap;text-overflow:ellipsis;max-width:360px;font-size:13px;overflow:hidden}.upload-status{color:var(--muted);margin-top:3px;font-size:11px}.upload-action{color:#2a2a2a;letter-spacing:.2em;cursor:pointer;background:0 0;border:none;padding:6px 4px;font-size:11px}.upload-action.danger{color:#a33}@media (width<=1100px){.main{grid-template-columns:1fr}.nav{display:none}}html,body,#root{height:100%;margin:0}