.cc-tool{gap:1.25rem}.cc-top{grid-template-columns:220px minmax(0,1fr);align-items:start;gap:1.25rem;display:grid}.cc-preview{border-radius:var(--radius-lg);border:1px solid var(--border-input);background-color:var(--bg-card-solid);background-image:linear-gradient(45deg, var(--border-input) 25%, transparent 25%, transparent 75%, var(--border-input) 75%), linear-gradient(45deg, var(--border-input) 25%, transparent 25%, transparent 75%, var(--border-input) 75%);background-position:0 0,8px 8px;background-size:16px 16px;overflow:hidden}.cc-preview-fill{min-height:190px;font:700 .95rem var(--font-mono);overflow-wrap:anywhere;align-items:flex-end;padding:.75rem .9rem;display:flex}.cc-main{flex-direction:column;gap:.9rem;min-width:0;display:flex}.cc-field-row{align-items:center;gap:.5rem;min-width:0;display:flex}.cc-field-row>.ui-input{flex:1}.cc-tool .cc-mono{font-family:var(--font-mono)}.cc-tool .cc-query{padding-top:.7rem;padding-bottom:.7rem;font-size:1.05rem}.cc-mono-inline{font-family:var(--font-mono);font-size:.85em}.cc-picker{border:1px solid var(--border-input);border-radius:var(--radius-sm);background:var(--bg-input);cursor:pointer;flex-shrink:0;width:52px;height:46px;padding:3px}.cc-picker::-webkit-color-swatch-wrapper{padding:0}.cc-picker::-webkit-color-swatch{border:none;border-radius:6px}.cc-picker::-moz-color-swatch{border:none;border-radius:6px}.cc-picker:focus-visible{outline:2px solid var(--accent-indigo);outline-offset:2px}.cc-facts{flex-direction:column;align-items:flex-start;gap:.45rem;display:flex}.cc-tailwind{border:1px solid var(--border-input);border-radius:var(--radius-sm);background:var(--bg-input);max-width:100%;min-height:40px;color:var(--text-secondary);text-align:left;cursor:pointer;align-items:center;gap:.55rem;padding:.45rem .75rem;font-size:.85rem;display:inline-flex}.cc-tailwind strong{color:var(--text-primary)}.cc-tailwind:hover{border-color:var(--border-focus)}.cc-tailwind:focus-visible{outline:2px solid var(--accent-indigo);outline-offset:2px}.cc-tailwind>svg{flex-shrink:0}.cc-tailwind-dot{border-radius:50%;flex-shrink:0;width:18px;height:18px;box-shadow:inset 0 0 0 1px #7f7f7f59}.cc-formats{grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem 1rem;display:grid}.cc-field{flex-direction:column;gap:.35rem;min-width:0;display:flex}.cc-section{border:1px solid var(--border-card);border-radius:var(--radius-lg);background:var(--bg-card);flex-direction:column;gap:.6rem;min-width:0;padding:1rem 1.15rem 1.15rem;display:flex}.cc-section-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;display:flex}.cc-section-title{color:var(--text-primary);margin:0;font-size:.95rem;font-weight:700}.cc-scale{grid-template-columns:repeat(11,minmax(0,1fr));gap:.4rem;display:grid}.cc-swatch{gap:.25rem;min-width:0}.cc-swatch .tool-swatch-color{height:52px}.cc-swatch.is-base .tool-swatch-color{box-shadow:0 0 0 2px var(--bg-card-solid), 0 0 0 4px var(--accent-indigo)}.cc-swatch-label{font:600 .75rem var(--font-body);color:var(--text-secondary)}.cc-swatch.is-base .cc-swatch-label{color:var(--text-primary)}.cc-swatch-hex{color:var(--text-primary);overflow-wrap:anywhere;font-size:.72rem}.cc-swatch:hover .tool-swatch-color{transform:translateY(-1px)}.cc-harmonies{grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;display:grid}.cc-harmony{flex-direction:column;gap:.45rem;min-width:0;display:flex}.cc-harmony-title{color:var(--text-secondary);margin:0;font-size:.8rem;font-weight:600}.cc-harmony-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem;display:grid}@media (width<=1024px){.cc-formats,.cc-harmonies{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=640px){.cc-top{grid-template-columns:minmax(0,1fr)}.cc-preview-fill{min-height:110px}.cc-formats{grid-template-columns:minmax(0,1fr)}.cc-scale{grid-template-columns:repeat(4,minmax(0,1fr))}.cc-harmonies{grid-template-columns:minmax(0,1fr)}.cc-tool .ui-input{font-size:1rem}.cc-field{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.35rem .5rem;display:grid}.cc-field>.ui-label{grid-area:1/1}.cc-field-row{display:contents}.cc-field-row>button{grid-area:1/2}.cc-field-row>.ui-input,.cc-field>.ui-error{grid-column:1/-1}.cc-formats .cc-mono{letter-spacing:-.035em;padding-left:.6rem;padding-right:.6rem}}