/*! Music Maker by OF - premium interface */

/* ------------------------------------------------------------------
 * Tokens & accent themes
 * ---------------------------------------------------------------- */
.mmof-app {
	--a: #d4af37; --a2: #f6e27a; --a3: #8a6a12; --ar: 212, 175, 55;
	--ink: #f4efe2; --mut: #a39d8d; --line: rgba(255, 255, 255, .09);
	--serif: "Cormorant Garamond", "Playfair Display", Georgia, "Times New Roman", serif;
	--sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans Bengali", sans-serif;
}
.mmof-app.mmof-accent-ruby { --a: #e0475b; --a2: #ff9aa6; --a3: #7d1f2c; --ar: 224, 71, 91; }
.mmof-app.mmof-accent-emerald { --a: #2fbf8f; --a2: #8ff0cc; --a3: #14614a; --ar: 47, 191, 143; }
.mmof-app.mmof-accent-sapphire { --a: #4a8dff; --a2: #9ec3ff; --a3: #1c3f87; --ar: 74, 141, 255; }
.mmof-app.mmof-accent-violet { --a: #a674ff; --a2: #d3b8ff; --a3: #4c2a96; --ar: 166, 116, 255; }

/* ------------------------------------------------------------------
 * Base
 * ---------------------------------------------------------------- */
.mmof-app {
	position: relative;
	display: block;
	width: 100%;
	max-width: 1120px;
	min-height: 620px;
	margin: 24px auto;
	overflow: hidden;
	overflow: clip;
	border-radius: 28px;
	color: var(--ink);
	font-family: var(--sans);
	font-size: 15px;
	line-height: 1.5;
	text-align: left;
	background:
		radial-gradient(1100px 520px at 12% -12%, rgba(var(--ar), .16), transparent 62%),
		radial-gradient(900px 480px at 105% 112%, rgba(var(--ar), .10), transparent 60%),
		linear-gradient(180deg, #0d0c12, #07070a);
	border: 1px solid rgba(255, 255, 255, .08);
	box-shadow:
		0 50px 110px -34px rgba(0, 0, 0, .75),
		0 0 0 1px rgba(var(--ar), .06),
		inset 0 1px 0 rgba(255, 255, 255, .07);
	outline: none;
	-webkit-font-smoothing: antialiased;
	-webkit-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}
.mmof-app *, .mmof-app *::before, .mmof-app *::after { box-sizing: border-box; }

.mmof-app::after {
	content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
	opacity: .5; mix-blend-mode: overlay;
	background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 3px);
}

.mmof-app h2, .mmof-app p, .mmof-app b, .mmof-app small, .mmof-app em, .mmof-app i, .mmof-app sup {
	margin: 0; padding: 0; text-transform: none; letter-spacing: normal; font-style: normal;
}

.mmof-app button {
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}
.mmof-app button:focus-visible,
.mmof-app select:focus-visible,
.mmof-app input:focus-visible {
	outline: 2px solid var(--a2);
	outline-offset: 2px;
}
.mmof-app:focus-visible { box-shadow: 0 0 0 2px rgba(var(--ar), .55), 0 50px 110px -34px rgba(0, 0, 0, .75); }

.mmof-glow { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; z-index: 0; }
.mmof-glow-a { width: 340px; height: 340px; left: -80px; top: -90px; background: rgba(var(--ar), .18); animation: mmof-float 14s ease-in-out infinite alternate; }
.mmof-glow-b { width: 380px; height: 380px; right: -120px; bottom: -140px; background: rgba(var(--ar), .12); animation: mmof-float 18s ease-in-out infinite alternate-reverse; }
@keyframes mmof-float { from { transform: translate(0, 0); } to { transform: translate(40px, 30px); } }

.mmof-view { position: relative; z-index: 1; }
.mmof-enter { animation: mmof-rise .6s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes mmof-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------
 * Instrument chooser
 * ---------------------------------------------------------------- */
.mmof-choose { padding: clamp(26px, 5vw, 60px); text-align: center; }

.mmof-brand {
	display: inline-flex; align-items: center; gap: 12px;
	font-size: 11px; font-weight: 600; letter-spacing: .34em; text-transform: uppercase; color: var(--a2);
}
.mmof-brand em { border: 1px solid rgba(var(--ar), .45); border-radius: 999px; padding: 3px 11px; letter-spacing: .18em; color: var(--a); font-size: 10px; }
.mmof-brand-t { letter-spacing: .34em; }
.mmof-logo {
	display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
	font-size: 18px; color: #1a1405; letter-spacing: 0;
	background: linear-gradient(145deg, var(--a2), var(--a) 55%, var(--a3));
	box-shadow: 0 6px 18px -4px rgba(var(--ar), .7), inset 0 1px 0 rgba(255, 255, 255, .5);
}

.mmof-hero {
	margin: 22px 0 8px !important;
	font-family: var(--serif); font-weight: 600; font-size: clamp(42px, 7vw, 82px); line-height: 1;
	letter-spacing: -.01em !important; color: #fff;
	background: linear-gradient(180deg, #ffffff 20%, #cfc6ad 100%);
	-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.mmof-tag { color: var(--mut); font-size: clamp(14px, 2vw, 17px); letter-spacing: .02em; margin-bottom: clamp(26px, 4vw, 46px) !important; }

.mmof-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 880px; margin: 0 auto; }

.mmof-app .mmof-card {
	position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px;
	padding: 34px 28px 28px; text-align: center; overflow: hidden; border-radius: 26px;
	background: linear-gradient(160deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .015));
	border: 1px solid var(--line);
	box-shadow: 0 24px 50px -28px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .07);
	transition: transform .4s cubic-bezier(.2, .8, .2, 1), border-color .3s, box-shadow .4s;
	animation: mmof-rise .7s cubic-bezier(.2, .8, .2, 1) both;
}
.mmof-app .mmof-card:nth-child(2) { animation-delay: .12s; }
.mmof-app .mmof-card::before {
	content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
	background: radial-gradient(420px 220px at 50% -10%, rgba(var(--ar), .22), transparent 70%);
	opacity: .55; transition: opacity .4s;
}
.mmof-app .mmof-card:hover, .mmof-app .mmof-card:focus-visible {
	transform: translateY(-8px);
	border-color: rgba(var(--ar), .6);
	box-shadow: 0 34px 70px -26px rgba(var(--ar), .45), 0 0 0 1px rgba(var(--ar), .25), inset 0 1px 0 rgba(255, 255, 255, .1);
}
.mmof-app .mmof-card:hover::before { opacity: 1; }
.mmof-app .mmof-card:active { transform: translateY(-3px) scale(.99); }

.mmof-cico {
	position: relative; display: grid; place-items: center; width: 118px; height: 118px; border-radius: 50%;
	color: var(--a2);
	background: radial-gradient(circle at 50% 30%, rgba(var(--ar), .22), rgba(var(--ar), .03) 70%);
	border: 1px solid rgba(var(--ar), .35);
	box-shadow: 0 0 0 8px rgba(var(--ar), .05), 0 18px 40px -16px rgba(var(--ar), .6);
	transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.mmof-card:hover .mmof-cico { transform: scale(1.06) rotate(-4deg); }
.mmof-cico svg { width: 66px; height: 66px; filter: drop-shadow(0 4px 10px rgba(var(--ar), .45)); }

.mmof-ctitle { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 4px; }
.mmof-ctitle b { font-family: var(--serif); font-weight: 600; font-size: 34px; line-height: 1.1; color: #fff; }
.mmof-ctitle small { font-size: 13px; letter-spacing: .12em; color: var(--a); }
.mmof-cdesc { max-width: 300px; color: var(--mut); font-size: 13.5px; line-height: 1.65; }

.mmof-cta {
	display: inline-flex; align-items: center; gap: 10px; margin-top: 8px;
	padding: 11px 22px; border-radius: 999px; font-weight: 600; font-size: 13px; letter-spacing: .04em; color: #1a1405;
	background: linear-gradient(135deg, var(--a2), var(--a) 60%, var(--a3));
	box-shadow: 0 10px 24px -10px rgba(var(--ar), .8), inset 0 1px 0 rgba(255, 255, 255, .5);
	transition: gap .3s, box-shadow .3s;
}
.mmof-cta i { transition: transform .3s; }
.mmof-card:hover .mmof-cta { gap: 16px; box-shadow: 0 14px 30px -10px rgba(var(--ar), 1), inset 0 1px 0 rgba(255, 255, 255, .5); }
.mmof-card:hover .mmof-cta i { transform: translateX(3px); }

.mmof-foot { margin-top: clamp(24px, 4vw, 44px) !important; color: #6f6a5d; font-size: 12px; letter-spacing: .14em; text-transform: uppercase !important; }

/* ------------------------------------------------------------------
 * Stage shell
 * ---------------------------------------------------------------- */
.mmof-stage { display: block; }

.mmof-topbar {
	display: flex; align-items: center; flex-wrap: wrap; gap: 14px;
	padding: 14px 20px; background: rgba(0, 0, 0, .28); border-bottom: 1px solid var(--line);
	backdrop-filter: blur(8px);
}
.mmof-app .mmof-back {
	display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 9px 12px; border-radius: 999px;
	font-size: 13px; font-weight: 500; color: var(--ink);
	border: 1px solid var(--line); background: rgba(255, 255, 255, .04); transition: all .25s;
}
.mmof-back span:first-child { font-size: 20px; line-height: 1; margin-top: -2px; color: var(--a2); }
.mmof-app .mmof-back:hover { border-color: rgba(var(--ar), .5); background: rgba(var(--ar), .1); }

.mmof-seg { display: inline-flex; padding: 4px; gap: 2px; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); }
.mmof-app .mmof-segb {
	display: inline-block; padding: 8px 18px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--mut);
	transition: color .2s, background .25s, box-shadow .25s; white-space: nowrap;
}
.mmof-app .mmof-segb:hover { color: var(--ink); }
.mmof-app .mmof-segb.on {
	color: #1a1405; font-weight: 600;
	background: linear-gradient(135deg, var(--a2), var(--a));
	box-shadow: 0 6px 16px -6px rgba(var(--ar), .8), inset 0 1px 0 rgba(255, 255, 255, .45);
}

.mmof-viz { flex: 1 1 140px; min-width: 120px; height: 40px; display: block; opacity: .95; }

.mmof-instwrap { padding: 20px 20px 6px; }
.mmof-instwrap > * { animation: mmof-rise .5s cubic-bezier(.2, .8, .2, 1) both; }

.mmof-panel {
	display: flex; align-items: center; flex-wrap: wrap; gap: 14px 30px;
	margin: 14px 20px 0; padding: 14px 20px; border-radius: 18px;
	background: rgba(255, 255, 255, .035); border: 1px solid var(--line);
}
.mmof-panel-t { font-size: 11px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--a); }
.mmof-app .mmof-hint { padding: 16px 26px 24px; color: #77715f; font-size: 12px; letter-spacing: .03em; }

/* ------------------------------------------------------------------
 * Form controls
 * ---------------------------------------------------------------- */
.mmof-field { display: inline-flex; align-items: center; gap: 12px; }
.mmof-flabel { font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--mut); white-space: nowrap; }
.mmof-fval { min-width: 38px; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--a2); text-align: right; }

.mmof-app .mmof-range {
	-webkit-appearance: none; appearance: none; width: 150px; height: 6px; border-radius: 999px; outline: none; cursor: pointer;
	background: linear-gradient(90deg, var(--a2), var(--a)) 0 / var(--p, 50%) 100% no-repeat, rgba(255, 255, 255, .12);
	border: 0; padding: 0; margin: 0;
}
.mmof-app .mmof-range::-webkit-slider-thumb {
	-webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; border: 0;
	background: radial-gradient(circle at 35% 30%, #fff, var(--a2) 45%, var(--a));
	box-shadow: 0 3px 10px rgba(0, 0, 0, .6), 0 0 0 4px rgba(var(--ar), .22); transition: box-shadow .2s;
}
.mmof-app .mmof-range::-moz-range-thumb {
	width: 20px; height: 20px; border-radius: 50%; border: 0;
	background: radial-gradient(circle at 35% 30%, #fff, var(--a2) 45%, var(--a));
	box-shadow: 0 3px 10px rgba(0, 0, 0, .6), 0 0 0 4px rgba(var(--ar), .22);
}
.mmof-app .mmof-range:hover::-webkit-slider-thumb { box-shadow: 0 3px 10px rgba(0, 0, 0, .6), 0 0 0 7px rgba(var(--ar), .22); }

.mmof-app .mmof-select {
	-webkit-appearance: none; appearance: none; cursor: pointer; min-width: 120px;
	padding: 9px 36px 9px 14px; border-radius: 12px; font: 500 13px var(--sans); color: var(--ink); line-height: 1.3;
	background: rgba(255, 255, 255, .05) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23f6e27a' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 13px center;
	border: 1px solid var(--line); box-shadow: none; height: auto; margin: 0;
}
.mmof-app .mmof-select option { background: #14131a; color: #f4efe2; }
.mmof-app .mmof-select:hover { border-color: rgba(var(--ar), .5); }

.mmof-app .mmof-tog { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .04); transition: border-color .25s, background .25s; }
.mmof-knob { position: relative; width: 38px; height: 22px; border-radius: 999px; background: rgba(255, 255, 255, .14); transition: background .25s; flex: none; }
.mmof-knob::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #d9d4c4; transition: transform .28s cubic-bezier(.2, .8, .2, 1), background .25s; box-shadow: 0 2px 5px rgba(0, 0, 0, .5); }
.mmof-tlabel { font-size: 12.5px; font-weight: 500; color: var(--mut); }
.mmof-app .mmof-tog.on { border-color: rgba(var(--ar), .55); background: rgba(var(--ar), .1); }
.mmof-tog.on .mmof-knob { background: linear-gradient(90deg, var(--a), var(--a2)); }
.mmof-tog.on .mmof-knob::after { transform: translateX(16px); background: #fff; }
.mmof-tog.on .mmof-tlabel { color: var(--a2); }

.mmof-app .mmof-btn {
	display: inline-flex; align-items: center; justify-content: center; padding: 11px 20px; border-radius: 14px;
	font-size: 13.5px; font-weight: 600; color: var(--ink); border: 1px solid var(--line); background: rgba(255, 255, 255, .05);
	transition: transform .12s, background .2s, border-color .2s, box-shadow .2s;
}
.mmof-app .mmof-btn:hover { border-color: rgba(var(--ar), .55); background: rgba(var(--ar), .1); }
.mmof-app .mmof-btn:active { transform: scale(.96); }
.mmof-app .mmof-btn-primary { color: #1a1405; border-color: transparent; background: linear-gradient(135deg, var(--a2), var(--a) 60%, var(--a3)); box-shadow: 0 10px 22px -10px rgba(var(--ar), .85), inset 0 1px 0 rgba(255, 255, 255, .5); }
.mmof-app .mmof-btn-primary:hover { background: linear-gradient(135deg, #fff2a8, var(--a2) 55%, var(--a)); }

.mmof-sectitle { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.mmof-sectitle span { font-size: 11px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--a); }
.mmof-sectitle small { font-size: 11.5px; color: #77715f; }

/* ------------------------------------------------------------------
 * Guitar
 * ---------------------------------------------------------------- */
.mmof-chords { display: grid; grid-template-columns: repeat(auto-fit, minmax(66px, 1fr)); gap: 10px; }
.mmof-app .mmof-chord {
	position: relative; display: grid; place-items: center; height: 58px; border-radius: 16px;
	background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .025));
	border: 1px solid var(--line);
	box-shadow: 0 8px 18px -12px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .06);
	transition: transform .1s, border-color .2s, background .2s, box-shadow .2s;
}
.mmof-cn { font-family: var(--serif); font-weight: 700; font-size: 25px; line-height: 1; color: #fff; }
.mmof-chord sup { position: absolute; right: 8px; top: 6px; font-size: 9.5px; font-weight: 600; color: #7e7865; }
.mmof-app .mmof-chord:hover { border-color: rgba(var(--ar), .55); }
.mmof-app .mmof-chord:active { transform: scale(.93); }
.mmof-app .mmof-chord.on {
	background: linear-gradient(145deg, var(--a2), var(--a) 60%, var(--a3)); border-color: transparent;
	box-shadow: 0 12px 26px -10px rgba(var(--ar), .9), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.mmof-chord.on .mmof-cn { color: #1a1405; }
.mmof-chord.on sup { color: rgba(26, 20, 5, .6); }

.mmof-strumbar { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; margin: 18px 0 16px; }

.mmof-boardwrap {
	overflow-x: auto; border-radius: 18px; -webkit-overflow-scrolling: touch;
	border: 1px solid rgba(255, 255, 255, .08);
	background:
		repeating-linear-gradient(90deg, rgba(255, 255, 255, .012) 0 2px, transparent 2px 7px),
		linear-gradient(180deg, #22150e, #150c08 60%, #100906);
	box-shadow: inset 0 14px 34px rgba(0, 0, 0, .65), 0 24px 50px -30px rgba(0, 0, 0, .9);
}
.mmof-boardwrap::-webkit-scrollbar { height: 8px; }
.mmof-boardwrap::-webkit-scrollbar-thumb { background: rgba(var(--ar), .4); border-radius: 8px; }
.mmof-board { min-width: 780px; padding: 8px 0 4px; touch-action: pan-x; }

.mmof-brow { display: grid; grid-template-columns: 62px repeat(12, 1fr); }
.mmof-bhead span, .mmof-binlay span { text-align: center; font-size: 10.5px; font-weight: 600; color: #7e7458; padding: 2px 0; letter-spacing: .08em; }
.mmof-binlay span { color: rgba(var(--ar), .75); font-size: 11px; letter-spacing: .3em; padding: 5px 0 6px; }

.mmof-app .mmof-cell {
	position: relative; display: block; width: 100%; height: 44px;
	border-right: 2px solid rgba(206, 206, 218, .32);
	transition: background .15s;
}
.mmof-app .mmof-cell:hover { background: rgba(var(--ar), .09); }
.mmof-app .mmof-cell.mmof-open { border-right: 7px solid #d6cdb0; background: rgba(0, 0, 0, .22); box-shadow: inset -6px 0 8px -6px rgba(0, 0, 0, .7); }
.mmof-cell::before {
	content: ""; position: absolute; left: 0; right: 0; top: 50%; height: var(--th, 2px); transform: translateY(-50%);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .7); pointer-events: none;
}
.mmof-bstr.plain .mmof-cell::before { background: linear-gradient(180deg, #f2f2f8, #a6a6b6); }
.mmof-bstr.wound .mmof-cell::before { background: repeating-linear-gradient(90deg, #d2a15a 0 2px, #8a6228 2px 4px); }

.mmof-cell.mmof-open b {
	position: relative; z-index: 2; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
	font-size: 12.5px; font-weight: 700; color: var(--a2); background: #0e0806; border: 1px solid rgba(255, 255, 255, .14);
}
.mmof-cell.mmof-open.mute b { opacity: .35; text-decoration: line-through; }

.mmof-dot {
	position: absolute; left: 50%; top: 50%; z-index: 3; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #fff, var(--a2) 35%, var(--a));
	box-shadow: 0 0 16px rgba(var(--ar), .85), 0 3px 6px rgba(0, 0, 0, .6);
	transform: scale(0); transition: transform .22s cubic-bezier(.3, 1.6, .5, 1); pointer-events: none;
}
.mmof-cell.sel .mmof-dot { transform: scale(1); }
.mmof-cell.mmof-open.sel .mmof-dot { display: none; }
.mmof-cell.mmof-open.sel b { color: #1a1405; background: radial-gradient(circle at 35% 30%, #fff, var(--a2) 40%, var(--a)); border-color: transparent; box-shadow: 0 0 16px rgba(var(--ar), .85); }

.mmof-bstr.vib .mmof-cell::before { animation: mmof-vib .8s ease-out; }
@keyframes mmof-vib {
	0% { transform: translateY(-50%) scaleY(3.2); filter: brightness(1.8); }
	12% { transform: translateY(calc(-50% - 2.5px)) scaleY(2.4); }
	26% { transform: translateY(calc(-50% + 2px)) scaleY(2); }
	42% { transform: translateY(calc(-50% - 1.4px)) scaleY(1.6); }
	58% { transform: translateY(calc(-50% + 1px)) scaleY(1.35); }
	78% { transform: translateY(calc(-50% - .5px)) scaleY(1.1); }
	100% { transform: translateY(-50%) scaleY(1); filter: brightness(1); }
}

/* ------------------------------------------------------------------
 * Harmonium
 * ---------------------------------------------------------------- */
.mmof-console {
	display: flex; align-items: flex-end; flex-wrap: wrap; gap: 14px 20px; margin-bottom: 18px; padding: 16px 20px;
	border-radius: 18px; background: rgba(255, 255, 255, .035); border: 1px solid var(--line);
}
.mmof-grp { display: flex; flex-direction: column; gap: 8px; }
.mmof-grp-wide { justify-content: flex-end; }
.mmof-console .mmof-range { width: 96px; }
.mmof-console .mmof-fval { min-width: 34px; }
.mmof-console .mmof-select { min-width: 104px; }
.mmof-grp-wide .mmof-field { padding-bottom: 8px; }

.mmof-step { display: inline-flex; align-items: center; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .05); overflow: hidden; }
.mmof-app .mmof-stepb { display: grid; place-items: center; width: 38px; height: 36px; font-size: 18px; color: var(--a2); transition: background .2s; }
.mmof-app .mmof-stepb:hover { background: rgba(var(--ar), .15); }
.mmof-stepv { min-width: 40px; text-align: center; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }

.mmof-hbody {
	position: relative; border-radius: 22px; padding: 16px 16px 20px;
	background:
		repeating-linear-gradient(90deg, rgba(255, 255, 255, .014) 0 2px, transparent 2px 9px),
		linear-gradient(180deg, #2c1a11, #1a0f0a 55%, #120a06);
	border: 1px solid rgba(255, 255, 255, .09);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 -20px 40px rgba(0, 0, 0, .5), 0 30px 60px -34px rgba(0, 0, 0, .95);
}
.mmof-plate {
	display: flex; align-items: center; gap: 18px; margin: 0 4px 14px; padding: 10px 18px; border-radius: 14px;
	background: linear-gradient(180deg, rgba(0, 0, 0, .38), rgba(0, 0, 0, .18)); border: 1px solid rgba(var(--ar), .22);
}
.mmof-plate-t { font-family: var(--serif); font-weight: 600; font-size: 24px; color: var(--a2); line-height: 1; }
.mmof-plate-s { font-size: 9.5px; font-weight: 600; letter-spacing: .3em; color: #8a7f60; }
.mmof-bellows { display: flex; align-items: center; gap: 4px; height: 30px; margin-left: auto; }
.mmof-bellows i {
	width: 7px; height: 100%; border-radius: 3px; transform-origin: center;
	background: linear-gradient(180deg, var(--a2), var(--a3)); opacity: .75;
}
.mmof-bellows.pump i { animation: mmof-pump 1.3s ease-in-out infinite; }
.mmof-bellows.pump i:nth-child(2n) { animation-delay: .16s; }
.mmof-bellows.pump i:nth-child(3n) { animation-delay: .32s; }
@keyframes mmof-pump { 0%, 100% { transform: scaleY(.45); opacity: .5; } 50% { transform: scaleY(1.05); opacity: 1; } }

.mmof-kbwrap { overflow-x: auto; padding: 4px 4px 8px; -webkit-overflow-scrolling: touch; border-radius: 14px; }
.mmof-kbwrap::-webkit-scrollbar { height: 8px; }
.mmof-kbwrap::-webkit-scrollbar-thumb { background: rgba(var(--ar), .4); border-radius: 8px; }
.mmof-kb { position: relative; display: flex; min-width: 952px; height: 250px; touch-action: pan-x; }

.mmof-wk {
	position: relative; flex: 1 1 0; margin: 0 1px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 12px;
	border-radius: 0 0 11px 11px; color: #6b6140; font-size: 11px; font-weight: 600;
	background: linear-gradient(180deg, #fffdf6 0%, #f3ecd8 78%, #ddd3b6 100%);
	box-shadow: 0 7px 0 #b3a67f, 0 12px 20px rgba(0, 0, 0, .5), inset 0 -2px 0 rgba(255, 255, 255, .6);
	transition: top .06s, box-shadow .06s, background .08s;
	top: 0; cursor: pointer;
}
.mmof-wk.on {
	top: 4px; color: #3b3010;
	background: linear-gradient(180deg, #f6e9b4, #e6cd78 85%, #d3b658);
	box-shadow: 0 3px 0 #a99048, 0 5px 10px rgba(0, 0, 0, .45), inset 0 0 26px rgba(var(--ar), .55);
}
.mmof-bk {
	position: absolute; z-index: 3; top: 0; right: -30%; width: 60%; height: 63%;
	display: flex; align-items: flex-end; justify-content: center; padding-bottom: 9px;
	border-radius: 0 0 8px 8px; color: #8e8672; font-size: 9.5px; font-weight: 600;
	background: linear-gradient(180deg, #34343a, #0d0d10 85%, #000);
	box-shadow: 0 6px 0 #000, 0 10px 16px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .14);
	transition: top .06s, box-shadow .06s, background .08s; cursor: pointer;
}
.mmof-bk.on {
	top: 3px; color: #1a1405;
	background: linear-gradient(180deg, var(--a), var(--a3));
	box-shadow: 0 2px 0 #000, 0 4px 9px rgba(0, 0, 0, .6), 0 0 22px rgba(var(--ar), .75);
}
.mmof-kl { pointer-events: none; text-align: center; white-space: nowrap; }

.mmof-scrollhint { display: none; text-align: center; margin-top: 4px !important; font-size: 11px; color: #7a7058; letter-spacing: .06em; }

/* ------------------------------------------------------------------
 * Toast
 * ---------------------------------------------------------------- */
.mmof-toast {
	position: absolute; left: 50%; bottom: 18px; z-index: 20; max-width: 90%; padding: 12px 20px; border-radius: 14px;
	font-size: 13px; text-align: center; color: #fff; background: rgba(20, 18, 26, .95); border: 1px solid rgba(var(--ar), .5);
	box-shadow: 0 16px 40px -10px rgba(0, 0, 0, .8);
	transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s;
}
.mmof-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ------------------------------------------------------------------
 * Responsive
 * ---------------------------------------------------------------- */
@media (max-width: 760px) {
	.mmof-app { border-radius: 20px; margin: 14px auto; min-height: 0; }
	.mmof-cards { grid-template-columns: 1fr; gap: 16px; }
	.mmof-app .mmof-card { padding: 26px 20px 22px; }
	.mmof-cico { width: 96px; height: 96px; }
	.mmof-cico svg { width: 54px; height: 54px; }
	.mmof-topbar { padding: 12px 14px; gap: 10px; }
	.mmof-viz { flex-basis: 100%; height: 30px; order: 5; }
	.mmof-instwrap { padding: 14px 12px 4px; }
	.mmof-panel { margin: 12px 12px 0; padding: 12px 14px; gap: 12px 20px; }
	.mmof-console { padding: 14px; gap: 14px 18px; }
	.mmof-chords { grid-template-columns: repeat(5, 1fr); gap: 8px; }
	.mmof-app .mmof-chord { height: 50px; }
	.mmof-cn { font-size: 21px; }
	.mmof-kb { height: 210px; min-width: 840px; }
	.mmof-scrollhint { display: block; }
	.mmof-plate-s { display: none; }
	.mmof-hint { display: none; }
	.mmof-app .mmof-range { width: 120px; }
}

@media (prefers-reduced-motion: reduce) {
	.mmof-app *, .mmof-app *::before { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
}