.color-shell{max-width:760px;margin:auto;background:#151b3a;color:#fff;padding:24px;border-radius:22px;box-shadow:0 12px 0 #c7baff}.color-toolbar,.color-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:18px 0}.color-shell button,.color-shell select{min-height:46px;border:2px solid #a3b5ea;border-radius:9px;background:#fff;color:#172044;padding:9px 16px;font-weight:800}.color-shell button:focus-visible,.color-shell select:focus-visible{outline:4px solid #ffe380;outline-offset:3px}.color-board{display:grid;gap:7px;max-width:520px;margin:20px auto}.color-board .gem{aspect-ratio:1;padding:0;font-size:clamp(18px,4vw,30px);border:2px solid #fff7;box-shadow:inset 0 -5px 0 #0003}.color-board .empty{visibility:hidden}.color-board.ribbon{display:flex;flex-direction:column;align-items:center}.color-board .ribbon-tile{min-height:40px;text-shadow:0 1px 1px #0009;color:#fff;border:2px solid #fff9}.color-stats{display:flex;gap:24px;flex-wrap:wrap;font-size:18px}.color-status{min-height:3em;line-height:1.6}.color-note{color:#d6defb;line-height:1.6}.color-shell button:disabled{opacity:.5}.color-shell [hidden]{display:none}@media(max-width:500px){.color-shell{padding:15px}.color-board{gap:4px}}