#skinColorPicker{box-sizing:border-box;max-width:420px;margin:10px auto;text-align:left;padding:10px 12px 12px;border:1px solid #53435f;border-radius:9px;background:linear-gradient(145deg,#241c2d,#15121d);box-shadow:inset 0 1px #ffffff09,0 6px 18px #0003}
.novicePickerHeading{display:flex;align-items:center;justify-content:space-between;margin:0 0 7px;color:#ddcc9f;font:600 11px Arial;letter-spacing:1.3px;text-transform:uppercase}
.novicePickerHeading span{color:#9989aa;font-size:9px;letter-spacing:.7px}
#noviceColorPreview{display:block;box-sizing:border-box;width:100%;height:auto;image-rendering:pixelated;margin:0 0 6px;border:1px solid #44364f;border-radius:6px;background:radial-gradient(ellipse at 50% 90%,#332637,#18141f 75%)}
#skinColorPicker .skinColorRow{display:grid;grid-template-columns:52px minmax(0,1fr);align-items:center;gap:8px;margin:0;min-height:32px;border-top:1px solid #ffffff06}
#skinColorPicker .skinColorRow strong{width:auto;color:#c7bdcf;font:600 11px Arial;letter-spacing:.3px}
#skinColorPicker .skinColorSwatches{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:5px;align-items:center}
#skinColorPicker .noviceSwatch{box-sizing:border-box;width:100%;max-width:25px;aspect-ratio:1;margin:0;padding:0;border:1px solid #ffffff25;border-radius:5px;cursor:pointer;background:var(--swatch);box-shadow:inset 0 1px 2px #ffffff25,inset 0 -2px 3px #0004;transition:transform .12s,box-shadow .12s}
#skinColorPicker .noviceSwatch:hover{transform:translateY(-1px);box-shadow:0 0 0 1px #d2bdd8,inset 0 1px 2px #ffffff25}
#skinColorPicker .noviceSwatch[aria-pressed=true]{outline:2px solid #e0c58d;outline-offset:2px;box-shadow:0 0 8px #e0c58d35,inset 0 1px 2px #ffffff25}
#skinColorPicker .noviceSwatch:focus-visible{outline:2px solid #c2d9ff;outline-offset:2px}