.tone-tools{flex-wrap:wrap;align-items:center;gap:22px;padding:4px 32px 14px;display:flex}.tone-tools .directions{padding:0}.tone-tools #save-state{color:#e1c891;margin-left:auto;font-size:12px}.ground{flex-direction:row;align-items:center;gap:8px}#tones{padding:0 32px}.tone{border-top:1px solid #314044;padding:22px 0}.tone-head{align-items:baseline;gap:14px;margin-bottom:12px;display:flex}.tone-head p{color:#9fb3ac;font-size:12px}.variants{grid-template-columns:repeat(auto-fill,minmax(560px,1fr));gap:12px;display:grid}.variant{text-align:left;background:#172226;border:2px solid #2c3a3d;flex-direction:column;gap:8px;padding:10px;display:flex}.variant[aria-pressed=true]{background:#2a2c22;border-color:#e4c17a}.variant canvas{width:100%;height:auto;image-rendering:pixelated;border-radius:6px}.variant .label{align-items:center;gap:10px;display:flex}.variant strong{margin-right:auto;font-size:13px}.variant[aria-pressed=true] strong:after{content:" ✓";color:#f6d794}.swatch{border:1px solid #0006;border-radius:4px;display:flex;overflow:hidden}.swatch i{width:16px;height:16px;display:block}.shine{border-top:1px solid #314044;padding:20px 32px 26px}.shine p{color:#9fb3ac;max-width:900px;margin:6px 0 12px;font-size:12px}.shine canvas{width:100%;max-width:1604px;height:auto;image-rendering:pixelated;border-radius:8px;display:block}.summary{border-top:1px solid #314044;padding:24px 32px 48px}.summary p{color:#9fb3ac;margin:6px 0 12px;font-size:12px}.summary canvas{width:100%;max-width:1500px;height:auto;image-rendering:pixelated;border-radius:8px;margin-bottom:14px;display:block}.summary label{max-width:900px}@media (width<=650px){#tones,.summary,.shine,.tone-tools{padding-left:14px;padding-right:14px}.variants{grid-template-columns:1fr}}