.composition-editor{display:grid;grid-template-columns:minmax(180px,240px) minmax(0,1fr);gap:32px;align-items:start;padding:24px;border:1px solid #dcdce2;background:#fff;color:#17171a;font-family:Helvetica Neue,Arial,sans-serif}.composition-wheel{width:100%;max-width:240px}.composition-dot{width:18px;height:18px;border:2px solid white;border-radius:4px;box-shadow:0 0 0 1px #17171a}.composition-dot-text{position:absolute;left:50%;top:24px;transform:translate(-50%);font-size:11px;background:#17171a;color:#fff;padding:3px 6px;white-space:nowrap}.composition-fields{display:grid;gap:16px;min-width:0}.composition-fields label{display:grid;gap:8px;min-width:0;font-size:13px}.composition-fields input:not([type=range]){box-sizing:border-box;width:100%;min-width:0;height:40px;padding:8px 10px;border:1px solid #dcdce2;border-radius:6px;background:#fff;color:#17171a;font:inherit}.composition-fields input[aria-invalid=true]{outline:2px solid #e4002b}.composition-fields input[type=range]{width:100%;accent-color:#e4002b}.composition-channels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.composition-fields button{min-height:40px;padding:8px 12px;border:1px solid #dcdce2;border-radius:6px;background:#fff;color:#17171a;font:inherit;cursor:pointer}.composition-roles{display:flex;gap:8px;flex-wrap:wrap}.composition-roles [aria-pressed=true]{border-color:#17171a;background:#17171a;color:#fff}.composition-wheel [data-cp-part=marker]{width:26px;height:26px;padding:0;border:2px solid white;border-radius:6px;color:#fff;font-size:11px;text-shadow:0 1px 2px #000;box-shadow:0 0 0 1px #17171a}.composition-wheel [data-cp-part=marker][data-small=true]{width:14px;height:14px}.composition-preview{padding:20px;background:hsl(var(--background));color:hsl(var(--foreground));border-radius:var(--border-radius-card)}.composition-preview h3{margin:0 0 16px;font-size:18px}.composition-preview button{background:hsl(var(--primary));color:hsl(var(--primary-foreground));border:var(--border-width-button) solid hsl(var(--accent))}.composition-editor :focus-visible{outline:2px solid #e4002b;outline-offset:3px}.composition-editor :disabled{opacity:.5;cursor:default}@media(max-width:600px){.composition-editor{grid-template-columns:1fr;gap:24px;padding:16px}.composition-wheel{margin-inline:auto}}