.character-colors{position:absolute;z-index:80;top:12%;left:calc(50% - 240px);width:min(480px,calc(100% - 24px));max-height:80%;background:#131c16f5;border:1px solid #6f7550;border-radius:10px;color:#dbdec8;box-shadow:0 12px 50px #0009}.character-colors[hidden]{display:none}.character-colors header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;cursor:move;border-bottom:1px solid #424c36}.character-colors .color-body{padding:14px;max-height:64vh;overflow:auto;font:12px Arial,sans-serif}.character-colors canvas{float:right;width:120px;height:144px;background:radial-gradient(ellipse,#29372b,#0c120e);border:1px solid #414d36;border-radius:8px}.character-colors fieldset{border:1px solid #414d36;border-radius:7px;margin:10px 0;padding:10px}.character-colors legend{color:#d6c58d}.character-colors fieldset>label{display:flex;align-items:center;gap:8px;margin:5px 0}.character-colors input[type=range]{flex:1;min-width:0;accent-color:#b9aa73}.character-colors output{width:28px;text-align:right;font-variant-numeric:tabular-nums}.character-colors input[type=color]{width:48px;height:28px;border:0;padding:0;background:transparent}.character-colors .color-actions{display:flex;gap:8px;clear:both}.character-colors button{background:#293327;color:#e5dfb4;border:1px solid #616e4b;border-radius:5px;padding:8px;cursor:pointer}.character-colors code{display:block;white-space:normal;padding:8px;font:11px monospace;color:#acc8b8}.character-colors details{padding:8px 0}.character-colors .hint{line-height:1.5;max-width:290px}@media(max-width:520px){.character-colors{left:12px;top:5%}.character-colors canvas{float:none;display:block;margin:auto}}