.cof-picker{position:relative}.cof-mode-info{margin-bottom:8px}.cof-mode-info .mode-title{font-weight:700;font-size:15px;letter-spacing:.2px;margin-bottom:4px;color:#000000de}:root.theme-dark .cof-mode-info .mode-title{color:#ffffffe6}.cof-mode-info .mode-notes{font-size:14px;color:#0000008c}:root.theme-dark .cof-mode-info .mode-notes{color:#fff9}.cof-mode-info .mode-notes span{margin-right:8px}.cof-mode-info .mode-notes .no-scale{color:#0006}:root.theme-dark .cof-mode-info .mode-notes .no-scale{color:#ffffff80}.cof-circle-container{position:relative;margin:0 auto;width:var(--cof-size, 520px);height:var(--cof-size, 520px)}.cof-circle-container svg circle{stroke:#00000024;stroke-width:2}:root.theme-dark .cof-circle-container svg circle{stroke:#ffffff29}.cof-circle-svg{position:absolute;top:0;left:0}.cof-note-bubble{position:absolute;left:var(--bubble-x);top:var(--bubble-y);width:var(--cof-bubble-size, 64px);height:var(--cof-bubble-size, 64px);background:var(--bubble-bg);border:none;border-radius:50%;box-shadow:0 2px 10px #0003;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:calc(var(--cof-bubble-size, 64px) * .344);letter-spacing:1px;-webkit-user-select:none;user-select:none;cursor:pointer;transition:transform .15s,box-shadow .15s}.cof-note-bubble:hover{transform:scale(1.05);box-shadow:0 4px 16px #0000004d}.cof-note-bubble--ringed:after{content:"";position:absolute;top:-11px;right:-11px;bottom:-11px;left:-11px;border-radius:50%;border:4px solid var(--bubble-ring-color);pointer-events:none}.cof-note-bubble .root-ring{position:absolute;top:-4px;right:-4px;bottom:-4px;left:-4px;border-radius:50%;border:3px solid rgb(0,0,0)}.cof-note-bubble .family-ring{position:absolute;top:-6px;right:-6px;bottom:-6px;left:-6px;border-radius:50%;border:3px solid rgb(25,118,210)}.cof-note-bubble .cof-home-flag{position:absolute;left:50%;top:50%;transform:translate(calc(-50% + 50% * var(--home-flag-align, 0)),-50%) translate(var(--home-flag-dx, 0),var(--home-flag-dy, -100%));padding:1px 6px;border-radius:999px;background:#0000008c;color:#ffffffd9;font-size:10px;font-weight:600;letter-spacing:.02em;white-space:nowrap;opacity:.7;pointer-events:none}:root.theme-dark .cof-note-bubble .cof-home-flag{background:#ffffff38;color:#fffffff2}.cof-hover-tooltip{position:fixed;left:var(--tooltip-x);top:var(--tooltip-y);background:#fffffffa;color:#000000de;border:1px solid rgba(0,0,0,.1);border-radius:8px;padding:8px 10px;box-shadow:0 4px 20px #0003;pointer-events:none;z-index:30;min-width:140px}:root.theme-dark .cof-hover-tooltip{background:#141416fa;color:#fffffff2;border-color:#fff3;box-shadow:0 8px 24px #00000073}.cof-hover-tooltip .tooltip-title{font-weight:700;margin-bottom:6px}.cof-hover-tooltip .tooltip-notes{display:flex;flex-wrap:wrap;gap:6px}.cof-hover-tooltip .tooltip-notes span{font-weight:600}.note-in-scale{color:#2e7d32}.note-in-chord{color:#1976d2}.note-out-of-scale{color:#c62828}.cof-mode-panel{position:absolute;top:32px;right:32px;background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:8px;box-shadow:0 4px 20px #0003;width:480px;max-width:95%;z-index:20}:root.theme-dark .cof-mode-panel{background:#1f2937;border-color:#ffffff1f;box-shadow:0 12px 28px #00000073}.cof-mode-panel .panel-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 8px 8px 14px;border-bottom:1px solid rgba(0,0,0,.08)}:root.theme-dark .cof-mode-panel .panel-header{border-bottom-color:#ffffff1a}.cof-mode-panel .panel-header .panel-title{font-weight:700;font-size:15px;color:#000000de}:root.theme-dark .cof-mode-panel .panel-header .panel-title{color:#ffffffe6}.cof-mode-panel .panel-content{max-height:360px;overflow:auto;padding:10px}.cof-mode-item{padding:10px 12px;border-radius:8px;border:1px solid rgba(0,0,0,.08);margin-bottom:8px;transition:all .15s ease;cursor:pointer}.cof-mode-item:last-child{margin-bottom:0}:root.theme-dark .cof-mode-item{border-color:#ffffff1a}.cof-mode-item:hover{background:#6366f114;border-color:#6366f159}:root.theme-dark .cof-mode-item:hover{background:#6366f12e;border-color:#6366f173}.cof-mode-item--chosen{border-color:#009688a6;background:#0096881a}:root.theme-dark .cof-mode-item--chosen{border-color:#009688cc;background:#00968833}.cof-mode-item .item-label{font-weight:600;margin-bottom:4px;color:#000000de}:root.theme-dark .cof-mode-item .item-label{color:#ffffffe6}.cof-mode-item .item-description{font-size:13px;color:#0009;margin-bottom:4px}:root.theme-dark .cof-mode-item .item-description{color:#fff9}.cof-mode-item .item-notes span{margin-right:8px;font-weight:600}:root.theme-dark .cof-mode-item .item-notes span{opacity:.9;filter:saturate(.85)}