.mml-wrap {
	max-width: 640px;
	margin: 2em auto;
	background: #111;
	border: 1px solid #333;
	border-radius: 12px;
	padding: 20px;
	font-family: 'Segoe UI', sans-serif;
	color: #eee;
	user-select: none;
	-webkit-user-select: none;
}
.mml-tabs {
	display: flex;
	gap: 6px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}
.mml-tab {
	flex: 1;
	padding: 10px 8px;
	border: 1px solid #333;
	border-radius: 6px;
	background: #1a1a1a;
	color: #999;
	cursor: pointer;
	font-size: 13px;
	transition: all 0.2s;
	min-width: 100px;
	text-align: center;
}
.mml-tab:hover { background: #222; color: #fff; }
.mml-tab.active { background: #333; color: #fff; border-color: #666; }
.mml-panel { display: none; }
.mml-panel.active { display: block; }

/* Терменвокс */
.mml-theremin-pad {
	width: 100%;
	height: 260px;
	background: radial-gradient(circle at 50% 50%, #1a2a1a, #0a0a0a);
	border: 1px solid #333;
	border-radius: 8px;
	position: relative;
	cursor: crosshair;
	margin-bottom: 12px;
	overflow: hidden;
	touch-action: none;
}
.mml-theremin-dot {
	width: 20px;
	height: 20px;
	background: radial-gradient(circle, #4caf50, #1b5e20);
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
	box-shadow: 0 0 20px rgba(76,175,80,0.5);
	transition: width 0.05s, height 0.05s;
}
.mml-theremin-active {
	border-color: #4caf50 !important;
	box-shadow: 0 0 25px rgba(76,175,80,0.4), inset 0 0 25px rgba(76,175,80,0.05);
}
.mml-theremin-label {
	position: absolute;
	bottom: 12px;
	left: 50%;
	transform: translateX(-50%);
	color: rgba(255,255,255,0.25);
	font-size: 12px;
	pointer-events: none;
	white-space: nowrap;
}

/* Драм-пад */
.mml-drum-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 8px;
}
.mml-drum {
	padding: 24px 8px;
	border: 1px solid #333;
	border-radius: 8px;
	background: #1a1a1a;
	color: #eee;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.1s;
	text-transform: uppercase;
	letter-spacing: 1px;
}
.mml-drum:active { transform: scale(0.93); }
.mml-drum[data-note="kick"] { border-color: #e53935; }
.mml-drum[data-note="snare"] { border-color: #fb8c00; }
.mml-drum[data-note="hihat"] { border-color: #fdd835; }
.mml-drum[data-note="clap"] { border-color: #43a047; }
.mml-drum[data-note="tom"] { border-color: #1e88e5; }
.mml-drum[data-note="ride"] { border-color: #8e24aa; }

/* Свои сэмплы */
.mml-section-title {
	margin: 18px 0 10px;
	font-size: 14px;
	color: #aaa;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 1px;
}
.mml-samples {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid #222;
}
.mml-sample-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
	font-size: 13px;
}
.mml-sample-label {
	width: 60px;
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	color: #888;
}
.mml-sample-input {
	font-size: 12px;
	color: #aaa;
	flex: 1;
}
.mml-sample-input::-webkit-file-upload-button {
	background: #222;
	color: #eee;
	border: 1px solid #444;
	border-radius: 4px;
	padding: 4px 10px;
	cursor: pointer;
	font-size: 12px;
}
.mml-sample-name {
	font-size: 11px;
	color: #888;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 180px;
}
.mml-sample-del {
	background: none;
	border: none;
	color: #e53935;
	cursor: pointer;
	font-size: 14px;
	padding: 2px 6px;
	line-height: 1;
	opacity: 0.6;
	transition: opacity 0.15s;
}
.mml-sample-del:hover { opacity: 1; }

/* Секвенсор */
.mml-sequencer {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid #222;
}
.mml-seq-grid {
	display: grid;
	grid-template-columns: 44px repeat(16, 1fr);
	gap: 2px;
	margin-bottom: 10px;
}
.mml-seq-label {
	display: flex;
	align-items: center;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.mml-seq-cell {
	width: 100%;
	aspect-ratio: 1;
	border: 1px solid #2a2a2a;
	border-radius: 2px;
	background: #111;
	cursor: pointer;
	transition: background 0.08s, border-color 0.08s;
}
.mml-seq-cell:hover { border-color: #555; }
.mml-seq-cell.active { background: var(--drum-color); border-color: var(--drum-color); }
.mml-seq-cell.active-step { border-color: #fff !important; }
.mml-seq-cell.mml-seq-col-beat { border-left-width: 2px; border-left-color: #444; }
.mml-seq-controls {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.mml-seq-play {
	min-width: 100px;
}
.mml-seq-bpm-label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: #aaa;
}
.mml-seq-bpm-label input[type="range"] {
	width: 80px;
	background: #222;
	accent-color: #eee;
}
.mml-seq-clear {
	min-width: 80px;
	font-size: 12px;
}

/* Синтезатор */
.mml-synth-keys {
	display: flex;
	position: relative;
	height: 160px;
	margin-bottom: 12px;
}
.mml-key {
	cursor: pointer;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding-bottom: 8px;
	font-size: 11px;
	font-weight: 700;
	transition: background 0.08s;
}
.mml-key.white {
	flex: 1;
	background: #f5f5f5;
	border: 1px solid #ccc;
	border-radius: 0 0 4px 4px;
	color: #333;
	z-index: 1;
}
.mml-key.white:active { background: #ddd; }
.mml-key.black {
	position: absolute;
	width: 28px;
	height: 100px;
	background: #222;
	border: 1px solid #111;
	border-radius: 0 0 3px 3px;
	color: #eee;
	z-index: 2;
	transform: translateX(-50%);
	pointer-events: auto;
}
.mml-key.black:active { background: #444; }
.mml-key.black { left: 0; }

/* Ряды */
.mml-row {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	align-items: center;
	margin-top: 8px;
	font-size: 13px;
}
.mml-row label { display: flex; align-items: center; gap: 6px; }
.mml-row select, .mml-row input[type="range"] {
	background: #222;
	color: #eee;
	border: 1px solid #444;
	border-radius: 4px;
	padding: 3px 6px;
}

/* Угадай ноту */
.mml-guess-info { text-align: center; color: #999; margin-bottom: 12px; }
.mml-btn {
	display: block;
	margin: 0 auto 12px;
	padding: 10px 24px;
	border: 1px solid #555;
	border-radius: 6px;
	background: #222;
	color: #eee;
	font-size: 14px;
	cursor: pointer;
	transition: all 0.2s;
}
.mml-btn:hover { background: #333; border-color: #777; }
.mml-guess-keys {
	display: flex;
	justify-content: center;
	gap: 4px;
	margin-bottom: 12px;
}
.mml-guess-keys .mml-key.white {
	flex: 0 0 44px;
	height: 80px;
}
.mml-guess-keys .mml-key.black {
	position: relative;
	width: 22px;
	height: 60px;
	margin-left: -13px;
	margin-right: -13px;
	transform: none;
}
.mml-guess-result { text-align: center; font-size: 18px; min-height: 1.4em; }
.mml-guess-score { text-align: center; color: #888; font-size: 13px; margin-top: 8px; }

/* Рекордер */
.mml-recorder {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid #222;
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.mml-rec-btn {
	margin: 0;
	padding: 10px 20px;
	font-weight: 700;
}
.mml-rec-btn:active { transform: scale(0.95); }
.mml-rec-time {
	font-size: 18px;
	font-family: 'Courier New', monospace;
	color: #888;
	min-width: 50px;
}
.mml-rec-status {
	font-size: 12px;
	color: #666;
}

/* Mobile */
@media (max-width: 540px) {
	.mml-wrap { padding: 12px; border-radius: 8px; }
	.mml-tab { min-width: 70px; font-size: 11px; padding: 8px 4px; }
	.mml-theremin-pad { height: 180px; }
	.mml-drum { padding: 18px 4px; font-size: 12px; }
	.mml-drum-grid { gap: 5px; }
	.mml-seq-grid { grid-template-columns: 30px repeat(16, 1fr); gap: 1px; }
	.mml-seq-label { font-size: 8px; }
	.mml-sample-label { width: 44px; font-size: 10px; }
	.mml-sample-name { max-width: 100px; }
	.mml-guess-keys { overflow-x: auto; justify-content: flex-start; }
	.mml-guess-keys .mml-key.white { flex: 0 0 32px; height: 60px; font-size: 11px; }
	.mml-guess-keys .mml-key.black { position: relative; width: 16px; height: 44px; margin-left: -10px; margin-right: -10px; transform: none; }
}