.styling-panel{width:min(650px,100%)}.styling-panel h3{font-size:17px;margin:24px 0 12px;font-weight:500}.styling-intro,.color-disclaimer,#color-sampling p{color:var(--muted);font-size:13px;line-height:1.7}.color-disclaimer{font-size:12px}.styling-panel canvas{width:100%;height:auto;max-height:340px;object-fit:contain;background:#0c1017;cursor:crosshair;touch-action:manipulation}.styling-panel #color-sampling label{display:grid;grid-template-columns:82px 1fr;align-items:center;font-size:12px;color:var(--muted)}.sample-position{display:grid;grid-template-columns:1fr 1fr;gap:16px}.styling-panel input[type=range]{border:0;padding:7px;accent-color:#a6b9ff}.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:8px}.swatch{padding:7px;background:none;box-shadow:none;border:1px solid var(--line);border-radius:8px;display:grid;gap:4px;color:var(--paper);font-weight:400;text-align:left}.swatch i{height:32px;border-radius:4px;border:1px solid #ffffff30}.swatch span{font-size:12px}.swatch small{font-size:10px;color:var(--muted)}.swatch:hover,.swatch:focus-visible{border-color:#b4c1de}.color-role{display:flex;gap:22px;border:0;padding:0;margin:20px 0 8px;font-size:13px}.color-role legend{padding:0;margin-bottom:8px;color:var(--muted)}.color-role label{display:flex;align-items:center;gap:7px}.color-role input,.confirmation input{width:auto;accent-color:var(--blue)}.selected-color{display:flex;gap:10px;align-items:center;min-height:40px;font-size:13px}.selected-color i{width:24px;height:24px;border:1px solid var(--line);border-radius:50%}.selected-color .close{margin-left:auto;font-size:12px}.palette-details{margin-top:16px}.palette-details summary{cursor:pointer;font-size:13px;color:#c4d0e6}.palette-details .swatches{max-height:290px;overflow:auto;margin-top:14px;padding-right:6px}.form .confirmation{display:flex;align-items:flex-start;gap:10px;line-height:1.6}.color-info-entry{display:block;width:100%;margin-top:16px;background:transparent;box-shadow:none;border:1px solid #738199;border-radius:10px}.styling-summary{font-size:12px;color:var(--muted);line-height:1.7}
.styling-panel canvas{display:block;width:auto;max-width:100%;margin-inline:auto}
@media(max-width:500px){.sample-position{grid-template-columns:1fr}.styling-panel canvas{max-height:260px}.swatches{grid-template-columns:repeat(3,minmax(0,1fr))}.styling-panel .form-panel{padding:20px}}