.cdm-player__rhythm > .cdm-player__subdiv-toggle-bar {
display: flex;
align-items: center;
padding: 0 0 0.1rem 2.1rem;
margin: 0 0 0.06rem;
min-height: 0;
}
.cdm-player__subdiv-toggle-label {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.65rem;
font-weight: 600;
color: var(--cdm-navy-soft, #2d4a6f);
margin: 0;
cursor: pointer;
touch-action: manipulation;
}
.cdm-player__subdiv-toggle-input {
width: 1rem;
height: 1rem;
margin: 0;
accent-color: var(--cdm-gold, #e8a317);
}
.cdm-player__rhythm-lane--subdivision-felt {
--cdm-subdiv-accent: var(--cdm-lane-color, #7c5cbf);
--cdm-subdiv-rail-inset: 0;
border-bottom: 1px solid rgba(30, 58, 95, 0.12);
padding-bottom: 0.08rem;
margin-bottom: 0.04rem;
}
.cdm-player__subdiv-lane.is-subdiv-lane-hidden {
display: none !important;
}
.cdm-player__subdiv-lane .cdm-player__lane-track {
display: none;
}
.cdm-player__subdiv-lane-body {
grid-column: 2 / -1;
display: flex;
flex-direction: column;
gap: 0.08rem;
min-width: 0;
}
.cdm-player__subdiv-lane-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.2rem 0.4rem;
}
.cdm-player__subdiv-preset-label {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.25rem;
font-size: 0.68rem;
margin: 0;
flex: 1 1 auto;
min-width: 0;
}
.cdm-player__subdiv-preset-label-text {
font-weight: 600;
color: var(--cdm-navy, #1e3a5f);
white-space: nowrap;
}
.cdm-player__subdiv-preset-select {
min-height: 2.1rem;
min-width: 8.5rem;
max-width: 100%;
flex: 1 1 10rem;
padding: 0.35rem 1.75rem 0.35rem 0.55rem;
border-radius: 0.35rem;
border: 1.5px solid rgba(30, 58, 95, 0.38);
background-color: var(--cdm-gold-soft, #fff3d6);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%231e3a5f' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.55rem center;
background-size: 0.55rem auto;
color: var(--cdm-navy, #1e3a5f);
font-size: 0.78rem;
font-weight: 600;
line-height: 1.3;
appearance: none;
-webkit-appearance: none;
touch-action: manipulation;
cursor: pointer;
}
.cdm-player__subdiv-preset-select:focus {
outline: 2px solid var(--cdm-gold, #e8a317);
outline-offset: 2px;
border-color: var(--cdm-gold, #e8a317);
box-shadow: 0 0 0 2px rgba(232, 163, 23, 0.25);
}
.cdm-player__subdiv-preset-select:focus-visible {
outline: 2px solid var(--cdm-gold, #e8a317);
outline-offset: 2px;
}
.cdm-player__subdiv-preset-select option {
color: var(--cdm-navy, #1e3a5f);
background: #fffef8;
font-weight: 600;
}
.cdm-player__subdiv-rail-wrap {
position: relative;
height: 1.5rem;
box-sizing: border-box;
border-radius: 0.3rem;
background: linear-gradient(
90deg,
rgba(30, 58, 95, 0.06) 0%,
rgba(124, 92, 191, 0.04) 50%,
rgba(30, 58, 95, 0.06) 100%
);
overflow: visible;
}
.cdm-player__subdiv-rail {
position: absolute;
inset: 0;
overflow: visible;
}
.cdm-player__subdiv-rail.is-silence {
background: repeating-linear-gradient(
90deg,
transparent,
transparent 12%,
rgba(30, 58, 95, 0.12) 12%,
rgba(30, 58, 95, 0.12) 12.5%
);
} .cdm-player__subdiv-hold {
position: absolute;
top: 50%;
height: 0.42rem;
transform: translateY(-50%);
border-radius: 0.2rem;
background: linear-gradient(
90deg,
rgba(124, 92, 191, 0.42) 0%,
rgba(124, 92, 191, 0.18) 85%,
rgba(124, 92, 191, 0.06) 100%
);
pointer-events: none;
z-index: 0;
}
.cdm-player__subdiv-hold--whole-hold {
height: 0.5rem;
background: linear-gradient(
90deg,
rgba(124, 92, 191, 0.55) 0%,
rgba(124, 92, 191, 0.22) 60%,
rgba(124, 92, 191, 0.08) 100%
);
animation: cdm-subdiv-breath 2.4s ease-in-out infinite;
}
@keyframes cdm-subdiv-breath {
0%,
100% {
opacity: 0.88;
}
50% {
opacity: 1;
}
}
.cdm-player__subdiv-hold--half-hold,
.cdm-player__subdiv-hold--dotted-hold {
height: 0.38rem;
background: linear-gradient(
90deg,
rgba(124, 92, 191, 0.48) 0%,
rgba(124, 92, 191, 0.14) 92%
);
}
.cdm-player__subdiv-impulse {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
background: rgba(30, 58, 95, 0.45);
transition: transform 0.07s ease, box-shadow 0.07s ease;
pointer-events: none;
z-index: 1;
}
.cdm-player__subdiv-impulse--accent {
width: 0.62rem;
height: 0.62rem;
background: var(--cdm-subdiv-accent);
box-shadow: 0 0 0 2px rgba(124, 92, 191, 0.28);
}
.cdm-player__subdiv-impulse--soft {
opacity: 0.88;
width: 0.42rem;
height: 0.42rem;
background: rgba(30, 58, 95, 0.52);
}
.cdm-player__subdiv-impulse--whole-hold.cdm-player__subdiv-impulse--accent {
width: 0.72rem;
height: 0.72rem;
box-shadow: 0 0 0 3px rgba(124, 92, 191, 0.35), 0 0 10px rgba(124, 92, 191, 0.35);
}
.cdm-player__subdiv-impulse--half-hold.cdm-player__subdiv-impulse--accent,
.cdm-player__subdiv-impulse--dotted-hold.cdm-player__subdiv-impulse--accent {
width: 0.58rem;
height: 0.58rem;
}
.cdm-player__subdiv-impulse--half-hold.cdm-player__subdiv-impulse--soft,
.cdm-player__subdiv-impulse--dotted-hold.cdm-player__subdiv-impulse--soft {
width: 0.44rem;
height: 0.44rem;
opacity: 0.9;
}
.cdm-player__subdiv-impulse.is-pulsing {
transform: translate(-50%, -50%) scale(1.35);
box-shadow: 0 0 8px rgba(124, 92, 191, 0.55);
}
.cdm-player__subdiv-impulse--silence {
width: calc(100% - 2 * var(--cdm-subdiv-rail-inset));
height: 1px;
left: 50% !important;
transform: translate(-50%, -50%);
border-radius: 0;
background: rgba(30, 58, 95, 0.22);
}
.cdm-player__subdiv-rail.is-dotted-quarter .cdm-player__subdiv-impulse--soft {
width: 0.4rem;
height: 0.4rem;
background: var(--cdm-gold, #e8a317);
opacity: 0.92;
box-shadow: 0 0 0 1px rgba(232, 163, 23, 0.35);
}
.cdm-player__subdiv-rail.is-dotted-eighth .cdm-player__subdiv-impulse--soft {
width: 0.34rem;
height: 0.34rem;
background: rgba(232, 163, 23, 0.85);
}
.cdm-player__subdiv-rail.is-triplet-feel .cdm-player__subdiv-impulse--soft {
width: 0.36rem;
height: 0.36rem;
opacity: 0.82;
}
.cdm-player__subdiv-rail.is-dense-feel .cdm-player__subdiv-impulse {
width: 0.32rem;
height: 0.32rem;
opacity: 0.72;
}
.cdm-player__subdiv-rail.is-dense-feel .cdm-player__subdiv-impulse--accent {
width: 0.4rem;
height: 0.4rem;
opacity: 0.95;
}
.cdm-player__subdiv-rail-pulse {
position: absolute;
top: 0;
bottom: 0;
width: 2px;
margin-left: -1px;
background: var(--cdm-subdiv-accent);
opacity: 0;
transition: opacity 0.06s ease;
pointer-events: none;
z-index: 2;
}
.cdm-player__subdiv-rail-pulse.is-active {
opacity: 0.85;
box-shadow: 0 0 6px rgba(124, 92, 191, 0.55);
}
.cdm-player__subdiv-feeling {
margin: 0;
font-size: 0.64rem;
line-height: 1.25;
color: var(--cdm-navy-soft, #2d4a6f);
opacity: 0.92;
font-style: italic;
}
.cdm-player__subdiv-lane.is-lane-disabled {
opacity: 0.45;
}
.cdm-player__subdiv-lane.is-lane-active .cdm-player__subdiv-rail-wrap {
box-shadow: inset 0 0 0 1px rgba(30, 58, 95, 0.2);
}
.cdm-player__subdiv-lane.is-exercise-lane-focus {
outline: 2px solid var(--cdm-gold, #e8a317);
outline-offset: 1px;
border-radius: 0.2rem;
}
.cdm-player__track--subdivision-felt .cdm-player__track-label {
font-weight: 600;
}
@media (max-width: 480px) {
.cdm-player__subdiv-preset-select {
min-width: 100%;
flex: 1 1 100%;
min-height: 2.35rem;
font-size: 0.82rem;
}
.cdm-player__subdiv-rail-wrap {
height: 1.85rem;
}
.cdm-player__subdiv-impulse--accent {
width: 0.66rem;
height: 0.66rem;
}
}