.ct-ruler.ct-ruler{width:100%;max-width:30rem;margin:1.25rem auto}
.ct-ruler.ct-ruler .card{padding:14px 12px;border-radius:12px}
.ct-ruler.ct-ruler .head{margin-bottom:8px}
.ct-ruler.ct-ruler .head b{font-size:1.1rem}
.ct-ruler.ct-ruler .head>span{font-size:.85rem}
.ct-ruler.ct-ruler table{table-layout:fixed;font-size:.95rem}
.ct-ruler.ct-ruler th:nth-child(1){width:25%}
.ct-ruler.ct-ruler th:nth-child(2){width:28%}
.ct-ruler.ct-ruler th:nth-child(3){width:47%}
.ct-ruler.ct-ruler .hs{width:auto}
.ct-ruler.ct-ruler th.famh,.ct-ruler.ct-ruler td.fam,.ct-ruler.ct-ruler .famsub{display:none}
.ct-ruler.ct-ruler th,.ct-ruler.ct-ruler td{padding-left:5px;padding-right:5px}
.ct-ruler.ct-ruler .tag{font-size:.85rem;margin-top:10px;padding:8px}
.ruler-legend{display:flex;justify-content:center;gap:6px 12px;flex-wrap:wrap;margin:8px 0;font-size:.72rem;color:#52616b;line-height:1.3}
.ct-ruler.ct-ruler .ruler-legend span{display:inline-flex;align-items:center;gap:4px;font-size:.72rem;margin:0;line-height:1.3}
.ruler-legend i{width:9px;height:9px;border:1px solid #52616b;border-radius:3px;display:inline-block}
.ruler-legend .p i{background:var(--perfect)}.ruler-legend .M i{background:var(--major)}.ruler-legend .m i{background:var(--minor)}.ruler-legend .t i{background:var(--aug)}
@container(max-width:400px){.ct-ruler.ct-ruler th:nth-child(1){width:30%}.ct-ruler.ct-ruler th:nth-child(2){width:28%}.ct-ruler.ct-ruler th:nth-child(3){width:42%}}
.ct-ruler .ruler-controls{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;position:relative;margin:0 0 8px}
.ct-ruler.ct-ruler .bar{position:relative;box-sizing:border-box;padding-right:28px;min-height:20px}
.ct-ruler.ct-ruler .bar em{position:absolute;right:0;top:50%;transform:translateY(-50%);width:22px;text-align:right}
.ct-ruler .ruler-controls>button{font:inherit;font-size:.85rem;min-height:44px;padding:6px 10px;border:1px solid #b7c3c5;border-radius:8px;background:#faf9f5;color:#1f2933;cursor:pointer}
.ct-ruler button:disabled{opacity:.5;cursor:default}
.ct-ruler .ruler-audition{font:inherit;font-weight:850;min-width:44px;min-height:44px;border:0;border-radius:5px;background:transparent;color:inherit;padding:2px 4px;cursor:pointer;white-space:nowrap}
.ct-ruler .ruler-audition::before{content:'▶';font-size:.6em;margin-right:5px;color:#52616b}
.ct-ruler tbody tr{cursor:pointer}.ct-ruler td{padding-top:3px;padding-bottom:3px}
.ct-ruler tr.is-selected{box-shadow:inset 3px 0 #21465d;background:#e8f0ee}
.ct-ruler tr[data-playing=true] .bar i{outline:2px solid #21465d;outline-offset:2px;border-radius:4px}
.ct-ruler button:focus-visible{outline:3px solid #7ab2c9;outline-offset:2px}
.ct-ruler [data-ruler-status]{font-size:.85rem;color:#52616b}.ct-ruler [data-ruler-status]:empty{display:none}
.ct-ruler [data-ruler-panel]{position:absolute;z-index:5;top:100%;left:0;width:min(100%,28rem);padding:12px;background:#fff;border:1px solid #b7c3c5;border-radius:9px;box-shadow:0 4px 16px #1f293326;font-size:.9rem}
.ct-ruler [data-ruler-panel][hidden]{display:none}
.ct-ruler [data-ruler-panel] p{margin:0;padding-right:48px;line-height:1.45}
.ct-ruler [data-ruler-close]{float:right;min-width:44px;min-height:44px;border:0;background:transparent;color:#1f2933;font-size:1.2rem;cursor:pointer}