/* Rapicorn chord finder (homepage refresh 2026-10-21) */
.rpc-cf-box{line-height:1.35;font-size:16px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:var(--mp-rail-gap,20px);background:var(--mp-surface-1);border:1px solid var(--mp-line);border-radius:var(--mp-r-lg,20px);padding:24px}
.rpc-cf-box:not(:has(.rpc-cf-ctrl:not([hidden]))){grid-template-columns:1fr}
.rpc-cf-set{border:0;margin:0 0 16px;padding:0;min-width:0}
.rpc-cf-set legend{font-family:var(--mp-font-ui);font-size:var(--mp-fs-xs,12px);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mp-muted);margin:0 0 10px;padding:0}
.rpc-cf-opts{display:flex;flex-wrap:wrap;gap:8px}
.rpc-cf-opt{position:relative;display:inline-flex}
.rpc-cf-opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.rpc-cf-opt span{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:40px;box-sizing:border-box;line-height:1;padding:0 12px;border-radius:999px;border:1px solid var(--mp-line-2,rgba(255,255,255,.16));background:var(--mp-surface-2);color:var(--mp-text-2);font-family:var(--mp-font-display);font-weight:700;font-size:var(--mp-fs-sm,14px);cursor:pointer;transition:background .15s,color .15s,border-color .15s;white-space:nowrap}
.rpc-cf-roots .rpc-cf-opt span{min-width:52px;padding:0 10px}
.rpc-cf-opt span:hover{color:var(--mp-text);border-color:var(--mp-amber-1)}
.rpc-cf-opt input:checked+span{background:var(--mp-brand-grad);color:var(--mp-on-brand);border-color:transparent}
.rpc-cf-opt input:focus-visible+span{outline:3px solid var(--mp-amber-1);outline-offset:2px}
.rpc-cf-out{min-width:0;display:flex;flex-direction:column;gap:16px}
.rpc-cf-read{background:var(--mp-surface-2);border:1px solid var(--mp-line);border-radius:var(--mp-r-md,14px);padding:16px 18px}
.rpc-cf-sym{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px;margin:0}
.rpc-cf-sym b{font-family:var(--mp-font-display);font-size:clamp(30px,3.4vw,44px);line-height:1;color:var(--mp-amber-1)}
.rpc-cf-sym span{color:var(--mp-text-2);font-size:var(--mp-fs-md,16px)}
.rpc-cf .rpc-cf-notes{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.rpc-cf .rpc-cf-notes li{display:flex;flex-direction:column;width:auto;margin:0;min-width:0;padding:8px 12px;border-radius:12px;background:var(--mp-surface-3);border:1px solid var(--mp-line)}
.rpc-cf-notes li:first-child{border-color:var(--mp-amber-1)}
.rpc-cf-notes b{font-family:var(--mp-font-display);font-size:20px;color:var(--mp-text)}
.rpc-cf-notes span{font-size:var(--mp-fs-xs,12px);color:var(--mp-muted)}
.rpc-cf-steps{margin:12px 0 0;font-size:var(--mp-fs-sm,14px);color:var(--mp-muted)}
.rpc-cf-kb{position:relative;display:grid;grid-template-columns:repeat(14,minmax(0,1fr));height:150px;border-radius:12px;overflow:hidden;background:#0b0b0d;padding:6px 6px 0;gap:3px;box-sizing:border-box}
.rpc-cf-w{position:relative;background:linear-gradient(#f4f1ea,#fff);border-radius:0 0 7px 7px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px}
.rpc-cf-w em,.rpc-cf-b em{font-style:normal;font-family:var(--mp-font-display);font-weight:800;font-size:12px;line-height:1}
.rpc-cf-w em{color:#1b1206}
.rpc-cf-w.is-on{background:linear-gradient(#ffd8a6,#ffb35c)}
.rpc-cf-w.is-root{background:linear-gradient(#ff9f43,#f0801a)}
.rpc-cf-b{position:absolute;top:6px;left:calc(6px + (100% - 12px) * var(--x) / 14);width:calc((100% - 12px) / 14 * .62);transform:translateX(-50%);height:58%;background:linear-gradient(#2a2a30,#111);border-radius:0 0 6px 6px;z-index:1;display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;box-sizing:border-box}
.rpc-cf-b em{color:#fff;font-size:10px}
.rpc-cf-b.is-on{background:linear-gradient(#ffb35c,#d9690c)}
.rpc-cf-b.is-root{background:linear-gradient(#ff8a1a,#b9530a)}
.rpc-cf-b.is-on em{color:#1b1206}
.rpc-cf-w.is-hit,.rpc-cf-b.is-hit{filter:brightness(1.18);box-shadow:inset 0 -6px 0 rgba(0,0,0,.18)}
.rpc-cf-play{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.rpc-cf-btn{font-family:var(--mp-font-display);font-weight:700;font-size:var(--mp-fs-sm,14px);padding:11px 18px;border-radius:999px;border:1px solid var(--mp-line-2,rgba(255,255,255,.16));background:var(--mp-surface-2);color:var(--mp-text);cursor:pointer}
.rpc-cf-btn:hover{border-color:var(--mp-amber-1)}
.rpc-cf-btn-main{background:var(--mp-brand-grad);color:var(--mp-on-brand);border-color:transparent}
.rpc-cf-btn:focus-visible{outline:3px solid var(--mp-amber-1);outline-offset:2px}
.rpc-cf-hint{font-size:var(--mp-fs-xs,12px);color:var(--mp-muted)}
@media (max-width:900px){.rpc-cf-box{grid-template-columns:1fr;padding:16px}}
@media (max-width:520px){.rpc-cf-kb{height:120px;padding:4px 4px 0;gap:2px}.rpc-cf-w em{font-size:10px}.rpc-cf-b em{font-size:8px}.rpc-cf-b{top:4px;left:calc(4px + (100% - 8px) * var(--x) / 14);width:calc((100% - 8px) / 14 * .66)}.rpc-cf-roots .rpc-cf-opt span{min-width:44px;padding:0 9px;font-size:13px}.rpc-cf .rpc-cf-notes{grid-template-columns:repeat(2,minmax(0,1fr))}.rpc-cf-btn{flex:1 1 100%}}
@media (prefers-reduced-motion:reduce){.rpc-cf-opt span{transition:none}.rpc-cf-w.is-hit,.rpc-cf-b.is-hit{filter:none;box-shadow:none}}