.music-guide ul{list-style:outside}.music-visual{margin:1rem 0 .25rem;overflow:hidden}.mv-rhythm{padding:.25rem 0 0;position:relative}.mv-rhythm-row{grid-template-columns:8rem 1fr;align-items:center;gap:1rem;display:grid}.mv-rhythm-row+.mv-rhythm-row{margin-top:.8rem}.mv-rhythm-row>span{font-size:.82rem;font-weight:700}.mv-time-bar{width:100%;height:22px;margin-top:.35rem;display:block;overflow:visible}.mv-time-bar path{stroke:color-mix(in oklab,var(--color-base-content) 12%,transparent);stroke-width:2px}.mv-time-bar rect{fill:color-mix(in oklab,var(--color-primary) 35%,var(--color-base-100));stroke:var(--color-base-content);stroke-width:1px}.mv-time-selected rect{fill:var(--color-primary);stroke:color-mix(in oklab,var(--color-base-content) 35%,transparent);stroke-width:1px}.mv-rhythm-row>span b{margin-left:.3rem;font-size:1.5rem;display:inline-block}.mv-rhythm-row>div>strong{font-variant-numeric:tabular-nums;font-size:.95rem}.mv-visual-value{text-align:right;margin-top:.7rem;font-size:1.25rem;display:block}.mv-duration{padding-top:.25rem}.mv-measures{border:2px solid var(--color-base-content);border-radius:.7rem;grid-template-columns:repeat(4,1fr);display:grid;overflow:hidden}.mv-measures span{border-right:1px solid color-mix(in oklab,var(--color-base-content) 40%,transparent);background:color-mix(in oklab,var(--color-primary) 7%,var(--color-base-100));gap:.25rem;padding:.7rem;display:grid}.mv-measures span:last-child{border-right:0}.mv-measures span[hidden]{display:none}.mv-caption{color:color-mix(in oklab,var(--color-base-content) 65%,transparent);margin-top:.45rem;font-size:.75rem}.mv-measures span.mv-jump{position:relative}.mv-measures span.mv-jump:before{content:"…";z-index:2;background:var(--color-base-100);padding:.1rem;font-weight:800;position:absolute;top:50%;left:-.55rem;transform:translateY(-50%)}.mv-measures small{color:color-mix(in oklab,var(--color-base-content) 62%,transparent);font-size:.7rem}.mv-measures b{font-size:1rem}.mv-measures i{white-space:nowrap;font-size:.8rem;font-style:normal}.mv-clock{justify-content:flex-end;align-items:baseline;gap:.75rem;margin-top:.8rem;display:flex}.mv-clock span{font-size:.82rem}.mv-clock strong{font-size:1.35rem}.mv-keyboard-wrap{padding-top:.25rem}.mv-keyboard{border:2px solid var(--color-base-content);background:var(--color-base-content);border-radius:.65rem;grid-template-columns:repeat(7,1fr);max-width:44rem;height:9rem;margin:0 auto;display:grid;position:relative;overflow:hidden}.mv-key{justify-content:center;align-items:flex-end;transition:background-color .16s,box-shadow .16s;display:flex}.mv-key b{font-size:.72rem;line-height:1}.mv-white{border-right:1px solid color-mix(in oklab,var(--color-base-content) 45%,transparent);background:var(--color-base-100);color:var(--color-base-content);padding-bottom:.55rem;position:relative}.mv-white:last-of-type{border-right:0}.mv-black{z-index:2;background:var(--color-base-content);width:8%;height:59%;color:var(--color-base-100);border-radius:0 0 .35rem .35rem;padding-bottom:.45rem;position:absolute;top:0;box-shadow:0 3px 5px #00000047}.mv-black[data-pitch="1"]{left:10.3%}.mv-black[data-pitch="3"]{left:24.6%}.mv-black[data-pitch="6"]{left:53.2%}.mv-black[data-pitch="8"]{left:67.5%}.mv-black[data-pitch="10"]{left:81.8%}.mv-key.mv-active,.mv-key.mv-target{background:var(--color-primary);color:var(--color-primary-content);box-shadow:inset 0 0 0 3px color-mix(in oklab,var(--color-primary-content) 45%,transparent)}.mv-key.mv-source{background:color-mix(in oklab,var(--color-primary) 35%,var(--color-base-100));color:var(--color-base-content);box-shadow:inset 0 0 0 3px var(--color-base-content)}.music-visual .mv-black.mv-source{background-color:color-mix(in oklab,var(--color-primary) 35%,var(--color-base-100));color:var(--color-base-content)}.music-visual .mv-black.mv-target{background-color:var(--color-primary);color:var(--color-primary-content)}.mv-key.mv-source.mv-target{background:linear-gradient(135deg,color-mix(in oklab,var(--color-primary) 35%,var(--color-base-100)) 0 50%,var(--color-primary) 50% 100%)}.mv-legend{flex-wrap:wrap;justify-content:center;gap:.7rem 1.25rem;margin-top:.85rem;font-size:.82rem;display:flex}.mv-legend span{align-items:center;gap:.35rem;display:flex}.mv-shift{text-align:center;min-width:3.5rem;color:color-mix(in oklab,var(--color-base-content) 70%,transparent)}.mv-swatch{border-radius:.2rem;width:.8rem;height:.8rem;display:inline-block}.mv-blue{background:color-mix(in oklab,var(--color-primary) 35%,var(--color-base-100));border:1px solid var(--color-base-content)}.mv-yellow{background:var(--color-primary);border:1px solid color-mix(in oklab,var(--color-primary-content) 35%,var(--color-primary))}@media (width<=600px){.mv-rhythm-row{grid-template-columns:1fr;gap:.35rem}.mv-measures{grid-template-columns:repeat(2,1fr)}.mv-measures span:nth-child(2){border-right:0}.mv-measures span:nth-child(-n+2){border-bottom:1px solid color-mix(in oklab,var(--color-base-content) 40%,transparent)}.mv-keyboard{height:7.25rem}.mv-key b{font-size:.65rem}.mv-legend{justify-content:flex-start}}