.sound-spectrum-keyboard,.sound-spectrum-labels{--sound-spectrum-gradient:linear-gradient(90deg, #f1b1e0 0%, #f4b1ae 7.14286%, #f4c9a4 21.4286%, #f5e49e 35.7143%, #a8e6bf 50%, #a4deea 64.2857%, #aabfee 78.5714%, #d0b5ee 92.8571%, #f1b1e0 100%)}.sound-spectrum-keyboard{padding:10px}.sound-spectrum-control{background:var(--sound-spectrum-gradient);cursor:crosshair;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;border:0;border-radius:13px;outline:none;height:103px;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #94a3b838}.sound-spectrum-labels{-webkit-user-select:none;user-select:none;grid-template-columns:repeat(3,minmax(0,1fr));margin:6px 11px 0;font-family:inherit;font-size:clamp(20px,6vw,25px);font-weight:600;line-height:1.4;display:grid}.sound-spectrum-label{color:#0000;background-image:var(--sound-spectrum-gradient);background-repeat:no-repeat;background-size:300% 100%;-webkit-background-clip:text;background-clip:text;min-width:0;transition:opacity 90ms linear}.sound-spectrum-label--lower{text-align:left;background-position:0 0;padding-left:clamp(6px,3vw,14px)}.sound-spectrum-label--lower,.sound-spectrum-label--higher{align-self:center;font-size:.8em}.sound-spectrum-label--sound{text-align:center;background-position:50% 0;transition:none}.sound-spectrum-label--higher{text-align:right;background-position:100% 0;padding-right:clamp(6px,3vw,14px)}.sound-spectrum-control:before{content:"";pointer-events:none;background:linear-gradient(#ffffff45,#0000 44%,#ffffff14);position:absolute;inset:0}.sound-spectrum-control:focus-visible{box-shadow:inset 0 0 0 1px #94a3b838,0 0 0 3px #6366f12e}.sound-spectrum-marker{z-index:1;top:0;bottom:0;left:var(--sound-spectrum-position);opacity:0;pointer-events:none;background:#ffffffe0;width:2px;position:absolute;transform:translate(-1px);box-shadow:0 0 9px #33415540}.sound-spectrum-string{z-index:1;opacity:0;pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.sound-spectrum-control.is-pressed .sound-spectrum-marker,.sound-spectrum-control.has-visible-marker .sound-spectrum-marker,.sound-spectrum-control:focus-visible .sound-spectrum-marker{opacity:1}.sound-spectrum-control.is-vibrating .sound-spectrum-marker{opacity:0}.sound-spectrum-control.is-vibrating .sound-spectrum-string{opacity:1}.sound-assignment-keyboard{padding:10px}.sound-assignment-keyboard .stepik-octave{--stepik-island-bg:#e2e8f0;--stepik-island-ink:#64748b;background:#fff;position:relative}.sound-assignment-keyboard .stepik-keys{height:103px}.sound-assignment-keyboard .stepik-keys>.sound-assignment-key{padding-bottom:20px}.sound-assignment-keyboard .stepik-keys>.sound-assignment-key:first-child{border-bottom-left-radius:13px}.sound-assignment-keyboard .stepik-keys>.sound-assignment-key:last-child{border-bottom-right-radius:13px}.sound-assignment-key{color:#64748b;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;background:#e2e8f0;border:0;justify-content:center;align-items:flex-end;min-width:0;padding:5px 0;transition:background-color 80ms,box-shadow 80ms,transform 80ms;display:flex;position:relative}.sound-assignment-key.is-assigned{color:#334155;background:var(--sound-assignment-color)}.sound-assignment-key.is-selected{z-index:1;box-shadow:inset 0 0 0 2px #475569b8}.sound-assignment-key.is-pressed{transform:translateY(2px);box-shadow:inset 0 3px 9px #4755692e,inset 0 0 0 2px #475569b8}.sound-assignment-key.is-drop-target{z-index:2;transform:translateY(2px);box-shadow:inset 0 0 0 2px #475569c7,0 0 0 2px #94a3b838}.sound-spectrum-drag-ghost{color:#0000}.sound-assignment-key strong{font-size:11px}.sound-assignment-keyboard .stepik-octave-label{background:#e2e8f0}.sound-spectrum-control.is-pressed{box-shadow:inset 0 4px 11px #33415521,inset 0 0 0 1px #64748b40}.sound-spectrum-control.is-demonstration{cursor:default;pointer-events:none}.sound-auto-drag-ghost{will-change:left, top}.sound-systematization{display:contents}:is(.sound-systematization,.stepik-shell:has(.sound-assignment-keyboard)) .stepik-play-button:disabled{color:#94a3b8;box-shadow:none;cursor:default;background:#e2e8f0;transform:none}@media (prefers-reduced-motion:reduce){.sound-spectrum-control,.sound-spectrum-marker{transition:none}}