.cpm-cpc{--cpm-primary:#5B4FE9;--cpm-primary-dark:#4639C7;--cpm-accent:#F0EEFF;--cpm-bg:#F8F8FB;--cpm-card:#fff;--cpm-text:#17171F;--cpm-muted:#686876;--cpm-border:#E3E3EA;--cpm-success:#177D55;--cpm-error:#B42318;max-width:1050px;margin:24px auto;padding:24px;background:var(--cpm-bg);border:1px solid var(--cpm-border);border-radius:24px;color:var(--cpm-text);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;box-sizing:border-box}.cpm-cpc *{box-sizing:border-box}.cpm-cpc__header{text-align:center;margin-bottom:22px}.cpm-cpc__eyebrow{display:inline-flex;padding:6px 10px;border-radius:999px;background:var(--cpm-accent);color:var(--cpm-primary-dark);font-size:13px;font-weight:700}.cpm-cpc h2{font-size:clamp(28px,4vw,42px);line-height:1.1;margin:10px 0 8px}.cpm-cpc h3{font-size:18px;margin:0}.cpm-cpc__header p,.cpm-cpc__section-head span,.cpm-cpc small,.cpm-cpc__notes{color:var(--cpm-muted)}.cpm-cpc__grid{display:grid;gap:18px}.cpm-cpc__panel{background:var(--cpm-card);border:1px solid var(--cpm-border);border-radius:18px;padding:18px;box-shadow:0 8px 24px rgba(23,23,31,.05)}.cpm-cpc__section-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin:4px 0 14px}.cpm-cpc__form-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:20px}.cpm-cpc label>span{display:block;font-size:14px;font-weight:700;margin-bottom:7px}.cpm-cpc select,.cpm-cpc input,.cpm-cpc button{font:inherit}.cpm-cpc select,.cpm-cpc input[type=number],.cpm-cpc input[type=text]{width:100%;min-height:48px;border:1px solid var(--cpm-border);border-radius:12px;padding:10px 12px;background:#fff;color:var(--cpm-text);font-size:16px}.cpm-cpc select:focus,.cpm-cpc input:focus,.cpm-cpc button:focus-visible{outline:3px solid rgba(91,79,233,.2);outline-offset:2px;border-color:var(--cpm-primary)}.cpm-cpc__preset-row,.cpm-cpc__badges,.cpm-cpc__action-row,.cpm-cpc__transpose-row{display:flex;gap:8px;flex-wrap:wrap}.cpm-cpc__preset{border:1px solid var(--cpm-border);background:#fff;border-radius:999px;padding:8px 11px;cursor:pointer}.cpm-cpc__preset:hover{border-color:var(--cpm-primary);color:var(--cpm-primary)}.cpm-cpc__builder{display:grid;gap:10px;margin:12px 0}.cpm-cpc__chord-row{display:grid;grid-template-columns:44px 1fr 1fr 72px 44px;gap:8px;align-items:end;padding:10px;border:1px solid var(--cpm-border);border-radius:14px;background:#fcfcfe}.cpm-cpc__drag{align-self:center;text-align:center;color:var(--cpm-muted);font-weight:800}.cpm-cpc__mini-label{font-size:11px;color:var(--cpm-muted);margin-bottom:4px;display:block}.cpm-cpc__remove{min-height:48px;border:0;background:#fff1f0;color:var(--cpm-error);border-radius:12px;font-weight:800;cursor:pointer}.cpm-cpc__btn{min-height:48px;border:1px solid var(--cpm-border);border-radius:12px;padding:10px 15px;background:#fff;color:var(--cpm-text);font-weight:700;cursor:pointer;transition:.15s ease}.cpm-cpc__btn:hover{transform:translateY(-1px);border-color:#c9c7d8}.cpm-cpc__btn--primary{background:var(--cpm-primary);border-color:var(--cpm-primary);color:#fff}.cpm-cpc__btn--primary:hover{background:var(--cpm-primary-dark)}.cpm-cpc__btn--ghost{width:100%;border-style:dashed;background:#faf9ff;color:var(--cpm-primary-dark)}.cpm-cpc__action-row{margin-top:14px}.cpm-cpc__check{display:flex!important;align-items:center;gap:8px;min-height:48px;padding:0 10px}.cpm-cpc__check span{margin:0!important}.cpm-cpc__analyze-box{margin-top:22px;padding-top:18px;border-top:1px solid var(--cpm-border)}.cpm-cpc__inline-form{display:grid;gap:8px}.cpm-cpc__error{color:var(--cpm-error);font-weight:600}.cpm-cpc__results{background:linear-gradient(180deg,#fff,#fbfaff)}.cpm-cpc__primary-result{font-size:clamp(25px,5vw,40px);font-weight:800;letter-spacing:-.03em;margin:12px 0 4px;word-break:break-word}.cpm-cpc__roman{font-size:20px;color:var(--cpm-primary-dark);font-weight:800;margin-bottom:12px}.cpm-cpc__badge{display:inline-flex;padding:7px 10px;border-radius:999px;background:var(--cpm-accent);color:var(--cpm-primary-dark);font-size:13px;font-weight:700}.cpm-cpc__chord-details{display:grid;gap:8px;margin:18px 0}.cpm-cpc__detail{border:1px solid var(--cpm-border);border-radius:14px;padding:12px;background:#fff;cursor:pointer}.cpm-cpc__detail[aria-selected=true]{border-color:var(--cpm-primary);box-shadow:0 0 0 2px rgba(91,79,233,.08)}.cpm-cpc__detail strong{display:block;margin-bottom:4px}.cpm-cpc__detail small{display:block}.cpm-cpc__viz-wrap{display:grid;gap:12px}.cpm-cpc__viz-card{border:1px solid var(--cpm-border);border-radius:14px;padding:12px;background:#fff}.cpm-cpc__piano{display:flex;height:104px;margin-top:10px;overflow:hidden;border:1px solid #d8d8df;border-radius:8px;background:#ddd;position:relative}.cpm-cpc__key{flex:1;background:#fff;border-right:1px solid #ddd;position:relative}.cpm-cpc__key.active{background:#ddd8ff}.cpm-cpc__key span{position:absolute;bottom:6px;left:0;right:0;text-align:center;font-size:10px}.cpm-cpc__note-cloud{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.cpm-cpc__note-pill{padding:8px 10px;border-radius:10px;background:var(--cpm-accent);font-weight:800}.cpm-cpc__status{min-height:22px;color:var(--cpm-success);font-weight:700}.cpm-cpc__history-panel{margin-top:18px}.cpm-cpc__link-btn{border:0;background:transparent;color:var(--cpm-primary);font-weight:700;cursor:pointer}.cpm-cpc__history{display:grid;gap:8px}.cpm-cpc__history-item{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--cpm-border);border-radius:12px;background:#fff}.cpm-cpc__history-item button{border:0;background:transparent;color:var(--cpm-primary);font-weight:700;cursor:pointer}.cpm-cpc__notes{margin-top:16px;font-size:13px;line-height:1.6}.cpm-cpc__notes p{margin:5px 0}.cpm-cpc button:disabled{opacity:.5;cursor:not-allowed;transform:none}@media(min-width:720px){.cpm-cpc__grid{grid-template-columns:1.05fr .95fr}.cpm-cpc__form-grid{grid-template-columns:1fr 1fr}.cpm-cpc__inline-form{grid-template-columns:1fr auto}.cpm-cpc__viz-wrap{grid-template-columns:1.4fr .6fr}.cpm-cpc__chord-details{grid-template-columns:1fr 1fr}}@media(max-width:620px){.cpm-cpc{padding:14px;border-radius:16px}.cpm-cpc__chord-row{grid-template-columns:34px 1fr 1fr}.cpm-cpc__chord-row .cpm-cpc__duration{grid-column:2/3}.cpm-cpc__remove{grid-column:3/4;grid-row:2}.cpm-cpc__action-row .cpm-cpc__btn,.cpm-cpc__result-actions .cpm-cpc__btn{flex:1 1 45%}}
.cpm-cpc__subviz-title{display:block;margin-top:16px}.cpm-cpc__guitar{display:grid;gap:4px;margin-top:8px}.cpm-cpc__string{display:grid;grid-template-columns:repeat(5,1fr);gap:3px;position:relative}.cpm-cpc__string:before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:#b8b8c2;z-index:0}.cpm-cpc__fret{min-height:28px;border-left:1px solid #d6d6df;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;position:relative;z-index:1}.cpm-cpc__fret.active{background:var(--cpm-accent);color:var(--cpm-primary-dark);border-radius:999px;border:1px solid #cfc9ff}