/* Rangooo Music Room */
.mu{--ink:#16202C;--muted:#5A6573;--line:#E7E7E1;--acc:#0E5E6F;--warm:#E3954B;max-width:1120px;margin:0 auto;padding:8px 20px 40px;color:var(--ink);font-family:Inter,system-ui,sans-serif}
.mu h1,.mu h2,.mu h3{font-family:Fraunces,Georgia,serif;font-weight:500;letter-spacing:-.01em;margin:0}
.mu .crumb{font-size:13px;color:var(--muted);margin:8px 0 6px}.mu .crumb a{color:inherit;text-decoration:none}
.mu-hero{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:24px;align-items:center;padding:28px;border-radius:30px;background:radial-gradient(80% 90% at 0% 0%,#FFE3C2,transparent 60%),radial-gradient(70% 80% at 100% 100%,#CDEDEF,transparent 60%),#FFF8EE;overflow:hidden}
.mu-kick{display:inline-block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#B5541B;margin-bottom:10px}
.mu-hero h1{font-size:clamp(34px,5vw,60px);line-height:1.04}
.mu-hero p{font-size:clamp(15px,1.3vw,18px);line-height:1.55;color:#3A4654;max-width:44ch;margin:14px 0 0}
.mu-hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.mu-hero-art svg{width:100%;height:auto;display:block}
.mu-notes{animation:muFloat 4s ease-in-out infinite alternate}
@keyframes muFloat{to{transform:translateY(-8px)}}
.mu-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:999px;border:0;background:var(--acc);color:#fff;font:600 15px/1 Inter,system-ui,sans-serif;text-decoration:none;cursor:pointer;box-shadow:0 8px 20px rgba(14,94,111,.25);transition:transform .2s cubic-bezier(.34,1.56,.64,1)}
.mu-btn:hover{transform:translateY(-2px)}.mu-btn:active{transform:scale(.96)}
.mu-btn.ghost{background:#fff;color:var(--acc);box-shadow:inset 0 0 0 1.5px rgba(14,94,111,.3)}
.mu-btn.small{min-height:44px;padding:0 18px;font-size:14px}
.mu-btn[aria-pressed="true"]{background:#16202C;color:#fff;box-shadow:none}
.mu-sec{margin-top:40px}
.mu-sec h2{font-size:clamp(26px,3vw,38px);line-height:1.1}
.mu-lead{color:var(--muted);font-size:15px;line-height:1.55;margin:8px 0 18px;max-width:62ch}
.mu-panel{padding:24px;border-radius:26px;background:#fff;border:1px solid var(--line);box-shadow:0 10px 30px rgba(22,32,44,.06)}
/* instruments */
.mu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.mu-card{position:relative;display:flex;flex-direction:column;padding:16px;border-radius:22px;background:#fff;border:1px solid var(--line);box-shadow:0 2px 6px rgba(22,32,44,.04);transition:box-shadow .25s,transform .25s}
.mu-card:hover{box-shadow:0 14px 30px rgba(22,32,44,.1);transform:translateY(-2px)}
.mu-card-top{height:96px;border-radius:16px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 22%,#fff)}
.mu-card-top svg{height:80px;width:auto}
.mu-card.hit .mu-card-top svg{animation:muHit .35s cubic-bezier(.34,1.56,.64,1)}
@keyframes muHit{40%{transform:scale(1.1) rotate(-3deg)}}
.mu-card h3{font-size:22px;margin-top:12px;display:flex;align-items:baseline;gap:8px}
.mu-alt{font-family:Inter,system-ui,sans-serif;font-size:13px;color:var(--muted)}
.mu-card p{font-size:13.5px;line-height:1.5;color:var(--muted);margin:6px 0 12px;flex:1}
.mu-pads{display:flex;flex-wrap:wrap;gap:6px}
.mu-pad{min-width:44px;min-height:44px;padding:0 12px;border-radius:14px;border:1.5px solid color-mix(in srgb,var(--c) 55%,#fff);background:color-mix(in srgb,var(--c) 12%,#fff);color:var(--ink);font:600 14px/1 Inter,system-ui,sans-serif;cursor:pointer;touch-action:manipulation;transition:transform .12s,background .12s}
.mu-pad.note{flex:1 0 calc(25% - 6px);padding:0 4px}
.mu-pad.on,.mu-pad:active{transform:scale(.92);background:var(--c);color:#fff}
.mu-pad:focus-visible,.mu-key:focus-visible,.mu-raga:focus-visible,.mu-epad:focus-visible,.mu-btn:focus-visible{outline:3px solid #FF8A3D;outline-offset:2px}
/* ragas */
.mu-ragas{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.mu-raga{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:64px;padding:12px 14px;border-radius:18px;border:1.5px solid var(--line);background:#FBFAF6;color:var(--ink);text-align:left;cursor:pointer;font-family:inherit}
.mu-raga b{font-family:Fraunces,Georgia,serif;font-weight:500;font-size:19px}
.mu-raga span{font-size:12.5px;color:var(--muted)}
.mu-raga[aria-checked="true"]{border-color:var(--acc);background:#E7F3F4;box-shadow:inset 0 0 0 1px var(--acc)}
.mu-rinfo{margin:16px 0 4px}.mu-rinfo p{margin:0 0 6px;line-height:1.55}
.mu-notes-line{font-weight:600;color:var(--acc);font-size:14px}
.mu-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px}
.mu-sel{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.mu-sel select{min-height:44px;border-radius:12px;border:1.5px solid var(--line);padding:0 12px;font:500 15px Inter,system-ui,sans-serif;background:#fff;color:var(--ink)}
.mu-keys{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.mu-key{flex:1 0 56px;min-height:72px;border-radius:16px;border:0;background:linear-gradient(#fff,#F1EEE6);box-shadow:inset 0 0 0 1.5px var(--line),0 3px 0 #DDD8CC;color:var(--ink);font:700 16px/1 Inter,system-ui,sans-serif;cursor:pointer;touch-action:manipulation;transition:transform .1s,box-shadow .1s}
.mu-key.on,.mu-key:active{transform:translateY(3px);box-shadow:inset 0 0 0 1.5px var(--acc),0 0 0 #DDD8CC;background:#E7F3F4;color:var(--acc)}
/* taal */
.mu-taal{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}
.mu-beat{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;border-radius:14px;background:#FBFAF6;border:1.5px solid var(--line);transition:background .1s,transform .1s}
.mu-beat.vib{border-color:#E8C9A6}
.mu-beat .n{font-size:11px;color:var(--muted)}.mu-beat b{font-size:15px}
.mu-beat i{font-style:normal;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#B5541B;min-height:13px}
.mu-beat i.wave{color:var(--acc)}
.mu-beat.on{background:var(--warm);border-color:var(--warm);color:#fff;transform:scale(1.06)}.mu-beat.on .n,.mu-beat.on i{color:#fff}
.mu-range{display:inline-flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.mu-range input{width:160px;accent-color:var(--acc)}.mu-range b{min-width:28px;color:var(--ink)}
/* echo */
.mu-echo{background:radial-gradient(rgba(255,255,255,.09) 1.2px,transparent 1.4px) 0 0/14px 14px,linear-gradient(160deg,#34407A,#5A68A8);color:#fff;border:0}
.mu-echo .mu-lead{color:#C9D3E0}
.mu-echo-pads{display:grid;grid-template-columns:repeat(6,minmax(0,110px));justify-content:center;gap:14px;margin-top:6px}
.mu-epad{aspect-ratio:1;min-height:56px;border-radius:50%;border:0;background:var(--c);color:#fff;font:700 15px/1 Inter,system-ui,sans-serif;opacity:.55;cursor:pointer;touch-action:manipulation;transition:opacity .15s,transform .15s,box-shadow .15s}
.mu-epad:not([disabled]){opacity:.85}
.mu-epad.on{opacity:1;transform:scale(1.1);box-shadow:0 0 0 6px rgba(255,255,255,.18),0 0 30px var(--c)}
.mu-epad[disabled]{cursor:default}
.mu-echo .mu-btn{background:#fff;color:#1B2440}
.mu-score{font-weight:700;color:#FFD58A}
.mu-emsg{min-height:22px;margin:12px 0 0;font-size:16px;font-weight:600}
/* facts and links */
.mu-facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-top:16px}
.mu-fact{padding:16px;border-radius:18px;background:#FFF4E6;border:1px solid #F3DFC4}
.mu-fact b{font-family:Fraunces,Georgia,serif;font-weight:500;font-size:18px}.mu-fact p{margin:6px 0 0;font-size:14px;line-height:1.5;color:#4A3A2A}
.mu-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.mu-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--acc);font-weight:600;text-decoration:none}
.mu-warn{color:#B42318;font-weight:600}
@media (max-width:760px){
  .mu{padding:4px 14px 28px}
  .mu-hero{grid-template-columns:1fr;padding:22px 18px;gap:8px}
  .mu-hero-art{order:-1;max-width:260px;margin:0 auto}
  .mu-panel{padding:18px 14px;border-radius:22px}
  .mu-grid{grid-template-columns:1fr 1fr;gap:10px}
  .mu-card{padding:12px;border-radius:18px}.mu-card-top{height:72px}.mu-card-top svg{height:60px}
  .mu-card h3{font-size:18px;flex-wrap:wrap;gap:2px 6px}.mu-card p{font-size:12.5px}
  .mu-pad.note{flex-basis:calc(50% - 6px)}
  .mu-taal{grid-template-columns:repeat(4,minmax(0,1fr))}
  .mu-echo-pads{grid-template-columns:repeat(3,minmax(0,96px))}
  .mu-key{min-height:60px;flex-basis:44px}
}
@media (max-width:380px){.mu-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.mu-notes,.mu-card.hit .mu-card-top svg{animation:none}.mu-btn,.mu-card{transition:none}}
.mu-legend{font-size:12.5px;color:var(--muted);margin:2px 0 0}
.mu-sleep{position:relative;overflow:hidden;background:linear-gradient(160deg,#0B1530,#22305C 70%,#3B2F6B);color:#fff;border:0}
.mu-sleep .mu-lead{color:#C9D3E0}.mu-sleep .mu-sel{color:#C9D3E0}.mu-sleep .mu-sel select{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.2)}.mu-sleep .mu-sel option{color:#16202C}
.mu-sleep .mu-btn{background:#FFD58A;color:#1B2440;box-shadow:none}
.mu-left{font-weight:600;color:#FFD58A}
.mu-moon{position:absolute;right:28px;top:22px;width:72px;height:72px;border-radius:50%;background:radial-gradient(circle at 38% 38%,#FFFDF2,#E8E2C8 70%);box-shadow:0 0 40px 10px rgba(255,248,220,.25);-webkit-mask:radial-gradient(circle at 70% 34%,transparent 26px,#000 27px);mask:radial-gradient(circle at 70% 34%,transparent 26px,#000 27px)}
.mu-sleep.on .mu-moon{animation:muBreathe 6s ease-in-out infinite}
@keyframes muBreathe{50%{box-shadow:0 0 60px 22px rgba(255,248,220,.38);transform:scale(1.04)}}
.mu-sleep h2,.mu-sleep .mu-lead{position:relative;max-width:calc(100% - 90px)}
@media (max-width:760px){.mu-moon{width:52px;height:52px;right:16px;top:16px;-webkit-mask:radial-gradient(circle at 70% 34%,transparent 19px,#000 20px);mask:radial-gradient(circle at 70% 34%,transparent 19px,#000 20px)}.mu-sleep h2,.mu-sleep .mu-lead{max-width:calc(100% - 60px)}}
@media (prefers-reduced-motion:reduce){.mu-sleep.on .mu-moon{animation:none}}

/* concert stage hero: Rangooo ink, marigold spotlights, jaali texture */
.mu-hero.mu-stage{position:relative;isolation:isolate;color:#FFF4E0;background:radial-gradient(38% 60% at 72% 0%,rgba(255,214,150,.22),transparent 70%),radial-gradient(30% 50% at 92% 10%,rgba(200,88,122,.18),transparent 70%),radial-gradient(60% 30% at 72% 100%,rgba(242,182,87,.22),transparent 70%),radial-gradient(rgba(255,255,255,.06) 1.2px,transparent 1.4px) 0 0/14px 14px,linear-gradient(160deg,#16202C,#10171F 70%);box-shadow:0 24px 60px rgba(16,23,31,.35)}
.mu-hero.mu-stage::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:conic-gradient(from 200deg at 60% -10%,transparent 0 8deg,rgba(255,230,180,.10) 12deg 22deg,transparent 26deg 40deg,rgba(255,230,180,.08) 44deg 52deg,transparent 56deg);pointer-events:none}
.mu-stage h1{color:#FFF4E0!important}
.mu-stage p{color:#E3DCCD!important}
.mu-stage .mu-kick{color:#F2B657}
.mu-stage .mu-btn{background:linear-gradient(135deg,#B8741A,#9A5410);box-shadow:0 10px 26px rgba(154,84,16,.35)}
.mu-stage .mu-btn.ghost{background:rgba(255,244,224,.08);color:#FFF4E0;box-shadow:inset 0 0 0 1.5px rgba(255,244,224,.3)}
.mu-stage .mu-hero-art{position:relative}
.mu-stage .mu-hero-art svg{position:relative;z-index:1;filter:drop-shadow(0 18px 24px rgba(0,0,0,.45))}
.mu-stage .mu-notes{fill:#F2B657}
.mu-viz{position:absolute;left:-12%;top:-18%;width:124%;height:136%;z-index:0;pointer-events:none}
@media (max-width:760px){.mu-viz{left:-20%;width:140%}}

/* Phone console (console.js adds .mu-cons on phones): one screen, a tab per mode, pads that fill the space. Wider screens keep the long page. */
.mu-modes, .mu-pick { display: none; }
@media (max-width: 760px) {
  html.mu-cons footer, html.mu-cons .dp { display: none !important; }
  .mu.mu-cons { display: flex; flex-direction: column; gap: 10px; box-sizing: border-box; min-height: var(--mu-avail, 560px); padding: 2px 12px 4px; }
  .mu.mu-cons .crumb { display: none; }
  /* stage strip: the title over the dark stage */
  .mu.mu-cons .mu-hero { display: flex; align-items: center; gap: 0; min-height: 76px; padding: 0 18px; border-radius: 22px; }
  .mu.mu-cons .mu-hero-txt { position: relative; z-index: 2; max-width: 62%; }
  .mu.mu-cons .mu-kick { margin: 0 0 3px; font-size: 10px; }
  .mu.mu-cons .mu-hero h1 { font-size: 21px; line-height: 1.1; }
  .mu.mu-cons .mu-hero p:not(.mu-warn), .mu.mu-cons .mu-hero-cta { display: none; }
  .mu.mu-cons .mu-hero-art { position: absolute; inset: 0; max-width: none; margin: 0; order: 0; }
  .mu.mu-cons .mu-hero-art > :not(canvas) { display: none !important; }
  .mu.mu-cons .mu-viz { left: auto; right: -2%; top: -75%; width: 58%; height: 250%; }
  /* mode tabs */
  .mu.mu-cons .mu-modes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 4px; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(22,32,44,.06); }
  .mu-mode { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px; border: 0; border-radius: 16px; background: transparent; color: var(--muted); font: 600 12px/1 Inter, system-ui, sans-serif; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background .15s, color .15s; }
  .mu-mode[aria-selected="true"] { background: var(--acc); color: #fff; box-shadow: 0 6px 14px rgba(14,94,111,.28); }
  .mu-mode:focus-visible { outline: 3px solid #FF8A3D; outline-offset: 1px; }
  /* only the active mode shows; its panel fills the rest of the screen */
  .mu.mu-cons > section.mu-sec { display: none; margin: 0; }
  .mu.mu-cons[data-mode="play"] > #instruments, .mu.mu-cons[data-mode="raga"] > #raga, .mu.mu-cons[data-mode="taal"] > #taal, .mu.mu-cons[data-mode="echo"] > #echo, .mu.mu-cons[data-mode="sleep"] > #sleep { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; gap: 10px; }
  .mu.mu-cons > section.mu-panel { padding: 14px 12px; border-radius: 22px; }
  .mu.mu-cons .mu-sec > h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .mu.mu-cons .mu-sec > .mu-lead { display: none; }
  .mu.mu-cons .mu-row { margin-top: 0; gap: 8px; }
  /* Play: instrument picker, then the chosen instrument with big pads */
  .mu.mu-cons .mu-pick { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
  .mu-chip { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 62px; padding: 6px 2px 5px; border-radius: 14px; border: 1.5px solid var(--line); background: #fff; color: var(--ink); font: 600 10.5px/1.1 Inter, system-ui, sans-serif; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
  .mu-chip svg { height: 30px; width: auto; max-width: 100%; }
  .mu-chip[aria-pressed="true"] { border-color: var(--c); background: color-mix(in srgb, var(--c) 24%, #fff); box-shadow: 0 4px 12px color-mix(in srgb, var(--c) 35%, transparent); }
  .mu-chip:focus-visible { outline: 3px solid #FF8A3D; outline-offset: 1px; }
  .mu.mu-cons #inst { display: flex; flex: 1 1 auto; min-height: 0; }
  .mu.mu-cons #inst .mu-card { display: none; }
  .mu.mu-cons #inst .mu-card.cur { display: flex; flex: 1 1 auto; min-height: 0; gap: 8px; padding: 12px; transform: none; box-shadow: 0 2px 6px rgba(22,32,44,.04); }
  .mu.mu-cons .mu-card-top { height: 68px; }
  .mu.mu-cons .mu-card-top svg { height: 56px; }
  .mu.mu-cons .mu-card h3 { margin: 0; font-size: 20px; }
  .mu.mu-cons .mu-card p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex: none; margin: 0; font-size: 12.5px; }
  .mu.mu-cons .mu-pads { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); grid-auto-rows: minmax(52px, 1fr); gap: 8px; }
  .mu.mu-cons .mu-pad, .mu.mu-cons .mu-pad.note { min-width: 0; min-height: 0; padding: 0 4px; border-radius: 16px; font-size: 16px; font-weight: 700; flex: none; border-width: 2px; border-color: var(--c); background: color-mix(in srgb, var(--c) 26%, #fff); box-shadow: 0 4px 0 color-mix(in srgb, var(--c) 60%, #fff); }
  .mu.mu-cons .mu-pad.on, .mu.mu-cons .mu-pad:active { transform: translateY(3px) scale(.98); box-shadow: 0 1px 0 color-mix(in srgb, var(--c) 60%, #fff); background: var(--c); color: #fff; }
  /* Raga */
  .mu.mu-cons .mu-ragas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .mu.mu-cons .mu-raga { min-height: 54px; padding: 8px 9px; border-radius: 14px; gap: 2px; }
  .mu.mu-cons .mu-raga b { font-size: 15px; }
  .mu.mu-cons .mu-raga span { font-size: 10px; line-height: 1.2; }
  .mu.mu-cons .mu-rinfo { margin: 0; }
  .mu.mu-cons .mu-rinfo p { margin: 0; font-size: 12.5px; line-height: 1.45; }
  .mu.mu-cons .mu-rinfo p:first-child { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .mu.mu-cons .mu-rinfo .mu-legend { display: none; }
  .mu.mu-cons .mu-notes-line { font-size: 12.5px; }
  .mu.mu-cons #raga .mu-row { flex-wrap: nowrap; }
  .mu.mu-cons #raga .mu-sel > span { display: none; }
  .mu.mu-cons #raga .mu-sel select { max-width: 112px; padding: 0 8px; font-size: 14px; }
  .mu.mu-cons #raga .mu-btn.small { padding: 0 12px; font-size: 13px; flex: 1 1 auto; min-width: 0; }
  .mu.mu-cons .mu-keys { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(52px, 1fr); gap: 8px; margin-top: 0; }
  .mu.mu-cons .mu-keys:has(.mu-key:nth-child(7)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mu.mu-cons .mu-key { min-height: 0; flex: none; font-size: 18px; }
  /* Taal */
  .mu.mu-cons .mu-taal { flex: 1 1 auto; min-height: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(54px, 1fr); }
  .mu.mu-cons .mu-beat { justify-content: center; }
  .mu.mu-cons .mu-beat b { font-size: 16px; }
  .mu.mu-cons #taal .mu-row { flex-wrap: nowrap; }
  .mu.mu-cons #taal .mu-range { flex: 1 1 auto; min-width: 0; }
  .mu.mu-cons #taal .mu-range input { flex: 1 1 auto; width: auto; min-width: 0; }
  /* Echo */
  .mu.mu-cons .mu-echo-pads { flex: 1 1 auto; min-height: 0; align-content: center; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-content: stretch; gap: 14px; }
  .mu.mu-cons .mu-epad { width: 100%; max-width: 104px; justify-self: center; }
  .mu.mu-cons #echo .mu-row { justify-content: center; gap: 16px; }
  .mu.mu-cons #echo #estart { min-width: 130px; min-height: 48px; }
  .mu.mu-cons #echo .mu-emsg { margin: 0; text-align: center; min-height: 40px; }
  /* Sleep */
  .mu.mu-cons #sleep { justify-content: center; }
  .mu.mu-cons #sleep .mu-row { flex-direction: column; align-items: stretch; gap: 12px; }
  .mu.mu-cons #sleep .mu-sel { justify-content: space-between; }
  .mu.mu-cons #sleep .mu-sel select { flex: 1 1 auto; max-width: 60%; }
  .mu.mu-cons #sleep .mu-left { text-align: center; }
}
/* shorter phones (iPhone SE size and similar): same console, tighter */
@media (max-width: 760px) and (max-height: 740px) {
  .mu.mu-cons { gap: 8px; }
  .mu.mu-cons .mu-hero { min-height: 54px; }
  .mu.mu-cons .mu-kick { display: none; }
  .mu.mu-cons .mu-hero h1 { font-size: 18px; }
  .mu-mode { min-height: 44px; font-size: 11px; }
  .mu-chip { min-height: 50px; padding: 4px 2px; }
  .mu-chip svg { height: 22px; }
  .mu.mu-cons .mu-card-top, .mu.mu-cons .mu-card p { display: none; }
  .mu.mu-cons .mu-card h3 { font-size: 18px; }
  .mu.mu-cons .mu-rinfo p:first-child { display: none; }
  .mu.mu-cons .mu-raga { min-height: 46px; padding: 6px 8px; }
  .mu.mu-cons > section.mu-panel { padding: 10px; }
  .mu.mu-cons .mu-keys, .mu.mu-cons .mu-pads { grid-auto-rows: minmax(44px, 1fr); }
  .mu.mu-cons .mu-taal { grid-auto-rows: minmax(46px, 1fr); gap: 6px; }
  .mu.mu-cons .mu-echo-pads { gap: 10px; }
  .mu.mu-cons .mu-epad { max-width: 88px; }
}
@media (max-width: 760px) and (max-height: 740px) {
  .mu.mu-cons .mu-beat { padding: 3px 2px; gap: 0; }
  .mu.mu-cons .mu-beat .n { font-size: 10px; }
  .mu.mu-cons .mu-beat b { font-size: 14px; }
  .mu.mu-cons .mu-beat i { min-height: 10px; font-size: 9px; }
}
@media (max-width: 760px) and (max-height: 680px) {
  .mu.mu-cons .mu-hero { min-height: 40px; }
  .mu.mu-cons .mu-hero h1 { font-size: 16px; }
}

/* Console on wider screens: the same tabs, instrument thumbnails, and the instrument beside its pads. */
@media (min-width: 761px) {
  .mu.mu-cons { display: flex; flex-direction: column; gap: 14px; padding-top: 0; }
  .mu.mu-cons .crumb { margin: 6px 0 0; }
  .mu.mu-cons .mu-hero { grid-template-columns: minmax(0, 1fr) auto; gap: 20px; padding: 16px 28px; border-radius: 26px; }
  .mu.mu-cons .mu-kick { margin-bottom: 4px; }
  .mu.mu-cons .mu-hero h1 { font-size: clamp(30px, 3.4vw, 42px); }
  .mu.mu-cons .mu-hero p { margin: 6px 0 0; max-width: 70ch; font-size: 15px; line-height: 1.5; }
  .mu.mu-cons .mu-hero-cta { display: none; }
  .mu.mu-cons .mu-hero-art { max-width: 120px; margin: 0; }
  .mu.mu-cons .mu-hero-art > img { max-height: 104px !important; border-width: 2px !important; border-radius: 14px !important; box-shadow: 0 10px 22px rgba(0,0,0,.45) !important; }
  .mu.mu-cons .mu-modes { display: flex; gap: 6px; width: max-content; max-width: 100%; padding: 5px; border-radius: 999px; background: #fff; border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(22,32,44,.06); }
  .mu-mode { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: 600 15px/1 Inter, system-ui, sans-serif; cursor: pointer; transition: background .15s, color .15s; }
  .mu-mode:hover { background: #F1EEE6; }
  .mu-mode[aria-selected="true"] { background: var(--acc); color: #fff; box-shadow: 0 6px 14px rgba(14,94,111,.28); }
  .mu-mode:focus-visible { outline: 3px solid #FF8A3D; outline-offset: 2px; }
  .mu.mu-cons > section.mu-sec { display: none; margin: 0; }
  .mu.mu-cons[data-mode="play"] > #instruments, .mu.mu-cons[data-mode="raga"] > #raga, .mu.mu-cons[data-mode="taal"] > #taal, .mu.mu-cons[data-mode="echo"] > #echo, .mu.mu-cons[data-mode="sleep"] > #sleep { display: block; }
  .mu.mu-cons > section.mu-panel { padding: 18px 22px 20px; }
  .mu.mu-cons .mu-sec h2 { font-size: 28px; }
  .mu.mu-cons .mu-lead { margin: 4px 0 14px; font-size: 14px; }
  /* Play: thumbnails, then the chosen instrument beside its pads */
  .mu.mu-cons .mu-pick { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; }
  .mu-chip { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 96px; padding: 8px 4px; border-radius: 18px; border: 1.5px solid var(--line); background: #fff; color: var(--ink); font: 600 13px/1.1 Inter, system-ui, sans-serif; cursor: pointer; transition: transform .2s, box-shadow .2s, background .2s; }
  .mu-chip svg { height: 46px; width: auto; max-width: 100%; }
  .mu-chip:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(22,32,44,.1); }
  .mu-chip[aria-pressed="true"] { border-color: var(--c); background: color-mix(in srgb, var(--c) 24%, #fff); box-shadow: 0 6px 16px color-mix(in srgb, var(--c) 35%, transparent); }
  .mu-chip:focus-visible { outline: 3px solid #FF8A3D; outline-offset: 2px; }
  .mu.mu-cons #inst { display: block; }
  .mu.mu-cons #inst .mu-card { display: none; }
  .mu.mu-cons #inst .mu-card.cur { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 24px; align-items: start; padding: 18px 20px; transform: none; box-shadow: 0 2px 6px rgba(22,32,44,.04); }
  .mu.mu-cons .mu-card.cur .mu-card-top { grid-column: 1; grid-row: 1; height: 110px; }
  .mu.mu-cons .mu-card.cur .mu-card-top svg { height: 92px; }
  .mu.mu-cons .mu-card.cur h3 { grid-column: 1; grid-row: 2; margin-top: 10px; font-size: 24px; }
  .mu.mu-cons .mu-card.cur p { grid-column: 1; grid-row: 3; margin: 6px 0 0; font-size: 14px; }
  .mu.mu-cons .mu-card.cur .mu-pads { grid-column: 2; grid-row: 1 / 4; align-self: stretch; display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); grid-auto-rows: minmax(84px, 1fr); gap: 10px; }
  .mu.mu-cons .mu-pad, .mu.mu-cons .mu-pad.note { min-width: 0; min-height: 0; padding: 0 6px; border-radius: 18px; font-size: 18px; font-weight: 700; flex: none; border-width: 2px; border-color: var(--c); background: color-mix(in srgb, var(--c) 26%, #fff); box-shadow: 0 4px 0 color-mix(in srgb, var(--c) 60%, #fff); }
  .mu.mu-cons .mu-pad:hover { background: color-mix(in srgb, var(--c) 38%, #fff); }
  .mu.mu-cons .mu-pad.on, .mu.mu-cons .mu-pad:active { transform: translateY(3px) scale(.98); box-shadow: 0 1px 0 color-mix(in srgb, var(--c) 60%, #fff); background: var(--c); color: #fff; }
  /* Raga, Taal, Echo, Sleep: the page's own layout, one at a time */
  .mu.mu-cons .mu-ragas { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .mu.mu-cons .mu-raga { min-height: 60px; padding: 10px 12px; }
  .mu.mu-cons .mu-key { min-height: 84px; font-size: 20px; }
}
@media (min-width: 761px) and (max-height: 820px) {
  .mu.mu-cons .mu-hero { padding: 10px 24px; }
  .mu.mu-cons .mu-hero p { display: none; }
  .mu.mu-cons .mu-hero-art > img { max-height: 70px !important; }
  .mu.mu-cons .mu-lead { display: none; }
  .mu.mu-cons > section.mu-panel { padding-top: 14px; }
  .mu-chip { min-height: 78px; }
  .mu-chip svg { height: 36px; }
  .mu.mu-cons .mu-card.cur .mu-card-top { height: 84px; }
  .mu.mu-cons .mu-card.cur .mu-card-top svg { height: 70px; }
  .mu.mu-cons .mu-card.cur .mu-pads { grid-auto-rows: minmax(64px, 1fr); }
  .mu.mu-cons .mu-key { min-height: 64px; }
}

/* Console theme: warm paper, hairline edges, one deep teal accent and a touch of brass. Light and quiet: no glows, textures or drop shadows. */
.mu.mu-cons { --s1: #FFFFFF; --s2: #FBF9F4; --s3: #F3EFE6; --ln: rgba(22,32,44,.10); --tx: #16202C; --mu: #6B7480; --acc: #145C63; --acc-d: rgba(20,92,99,.07); --gold: #B07F2E; }
.mu.mu-cons .mu-hero.mu-stage { background: var(--s1) !important; border: 1px solid var(--ln) !important; box-shadow: none !important; }
.mu.mu-cons .mu-hero.mu-stage::before { display: none !important; }
.mu.mu-cons .mu-stage .mu-kick { color: var(--gold) !important; letter-spacing: .18em; font-weight: 600; }
.mu.mu-cons .mu-stage h1 { color: var(--tx) !important; font-weight: 400; letter-spacing: -.015em; }
.mu.mu-cons .mu-stage p { color: var(--mu) !important; }
.mu.mu-cons .mu-hero-art > img { border: 1px solid var(--ln) !important; box-shadow: none !important; }
/* tabs: flat; the chosen one is a soft tint with a teal hairline, nothing spills onto its neighbours */
.mu.mu-cons .mu-modes { background: var(--s1) !important; border: 1px solid var(--ln) !important; box-shadow: none !important; }
.mu.mu-cons .mu-mode { color: var(--mu) !important; background: transparent !important; box-shadow: none !important; font-weight: 500; }
.mu.mu-cons .mu-mode:hover { background: var(--s2) !important; color: var(--tx) !important; }
.mu.mu-cons .mu-mode[aria-selected="true"] { background: var(--acc-d) !important; color: var(--acc) !important; box-shadow: inset 0 0 0 1px rgba(20,92,99,.45) !important; font-weight: 600; }
.mu.mu-cons .mu-mode:focus-visible, .mu.mu-cons .mu-chip:focus-visible, .mu.mu-cons .mu-pad:focus-visible, .mu.mu-cons .mu-key:focus-visible, .mu.mu-cons .mu-raga:focus-visible, .mu.mu-cons .mu-epad:focus-visible, .mu.mu-cons .mu-btn:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
/* panels */
.mu.mu-cons > section.mu-sec, .mu.mu-cons > section.mu-echo, .mu.mu-cons > section.mu-sleep { background: var(--s1) !important; border: 1px solid var(--ln) !important; box-shadow: none !important; color: var(--tx) !important; padding: 14px 12px !important; border-radius: 22px !important; }
.mu.mu-cons .mu-sec h2 { color: var(--tx) !important; font-weight: 400; }
.mu.mu-cons .mu-sec > h2::before { display: none !important; }
.mu.mu-cons .mu-lead, .mu.mu-cons .mu-echo .mu-lead, .mu.mu-cons .mu-sleep .mu-lead { color: var(--mu) !important; }
.mu.mu-cons .mu-moon { opacity: .55; box-shadow: none !important; background: var(--gold) !important; }
.mu.mu-cons .mu-sleep.on .mu-moon { animation: none; }
/* instrument picker */
.mu.mu-cons .mu-chip { background: var(--s2) !important; border: 1px solid var(--ln) !important; color: var(--tx) !important; font-weight: 600; box-shadow: none !important; transition: border-color .15s, background .15s; }
.mu.mu-cons .mu-chip:hover { transform: none; background: var(--s3) !important; }
.mu.mu-cons .mu-chip[aria-pressed="true"] { background: var(--acc-d) !important; border-color: var(--acc) !important; box-shadow: none !important; }
.mu.mu-cons #inst .mu-card.cur { background: var(--s2) !important; border: 1px solid var(--ln) !important; box-shadow: none !important; }
.mu.mu-cons .mu-card-top { background: var(--s3) !important; border-radius: 14px !important; }
.mu.mu-cons .mu-card h3 { color: var(--tx) !important; font-weight: 400; }
.mu.mu-cons .mu-alt, .mu.mu-cons .mu-card p { color: var(--mu) !important; }
/* pads: white tiles with a thin accent edge, tinted when played */
.mu.mu-cons .mu-pad, .mu.mu-cons .mu-pad.note { background: var(--s1) !important; color: var(--tx) !important; border: 1px solid var(--ln) !important; font-weight: 600; letter-spacing: .02em; box-shadow: inset 0 2px 0 color-mix(in srgb, var(--c) 70%, transparent) !important; transition: background .08s, transform .08s; }
.mu.mu-cons .mu-pad:hover { background: var(--s3) !important; }
.mu.mu-cons .mu-pad.on, .mu.mu-cons .mu-pad:active { background: color-mix(in srgb, var(--c) 18%, #fff) !important; color: var(--tx) !important; border-color: var(--c) !important; transform: scale(.985); box-shadow: inset 0 2px 0 var(--c) !important; }
/* ragas and keys */
.mu.mu-cons .mu-raga { background: var(--s2) !important; border: 1px solid var(--ln) !important; color: var(--tx) !important; }
.mu.mu-cons .mu-raga b { font-weight: 400; }
.mu.mu-cons .mu-raga span { color: var(--mu) !important; }
.mu.mu-cons .mu-raga[aria-checked="true"] { background: var(--acc-d) !important; border-color: var(--acc) !important; box-shadow: none !important; }
.mu.mu-cons .mu-rinfo p { color: var(--mu) !important; }
.mu.mu-cons .mu-notes-line { color: var(--gold) !important; }
.mu.mu-cons .mu-key { background: var(--s1) !important; color: var(--tx) !important; border: 1px solid var(--ln) !important; box-shadow: inset 0 -3px 0 var(--s3) !important; font-weight: 600; transition: background .08s, transform .08s; }
.mu.mu-cons .mu-key.on, .mu.mu-cons .mu-key:active { background: var(--acc-d) !important; color: var(--acc) !important; border-color: var(--acc) !important; transform: scale(.985); box-shadow: none !important; }
/* taal */
.mu.mu-cons .mu-beat { background: var(--s2) !important; border: 1px solid var(--ln) !important; color: var(--tx) !important; }
.mu.mu-cons .mu-beat.vib { border-color: rgba(176,127,46,.5) !important; }
.mu.mu-cons .mu-beat .n { color: var(--mu) !important; }
.mu.mu-cons .mu-beat i, .mu.mu-cons .mu-beat i.wave { color: var(--gold) !important; }
.mu.mu-cons .mu-beat.on { background: var(--acc) !important; border-color: var(--acc) !important; color: #fff !important; transform: none; }
.mu.mu-cons .mu-beat.on .n, .mu.mu-cons .mu-beat.on i { color: #fff !important; }
/* echo */
.mu.mu-cons .mu-epad { background: color-mix(in srgb, var(--c) 22%, #fff) !important; color: var(--tx) !important; border: 1px solid color-mix(in srgb, var(--c) 45%, #fff) !important; opacity: .6; box-shadow: none !important; }
.mu.mu-cons .mu-epad:not([disabled]) { opacity: 1; }
.mu.mu-cons .mu-epad.on { transform: scale(1.04); background: var(--c) !important; color: #fff !important; box-shadow: none !important; }
.mu.mu-cons .mu-score, .mu.mu-cons .mu-left { color: var(--gold) !important; }
.mu.mu-cons .mu-emsg { color: var(--tx) !important; font-weight: 500; }
/* buttons, selects, slider */
.mu.mu-cons .mu-btn, .mu.mu-cons .mu-echo .mu-btn, .mu.mu-cons .mu-sleep .mu-btn { background: var(--acc) !important; color: #fff !important; box-shadow: none !important; font-weight: 600; }
.mu.mu-cons .mu-btn:hover { transform: none; filter: brightness(1.1) !important; }
.mu.mu-cons .mu-btn.ghost, .mu.mu-cons .mu-btn[aria-pressed="false"] { background: var(--s1) !important; color: var(--tx) !important; box-shadow: inset 0 0 0 1px var(--ln) !important; }
.mu.mu-cons .mu-btn[aria-pressed="true"] { background: var(--acc-d) !important; color: var(--acc) !important; box-shadow: inset 0 0 0 1px var(--acc) !important; }
.mu.mu-cons .mu-sel, .mu.mu-cons .mu-range, .mu.mu-cons .mu-sleep .mu-sel { color: var(--mu) !important; }
.mu.mu-cons .mu-range b { color: var(--tx) !important; }
.mu.mu-cons .mu-sel select, .mu.mu-cons .mu-sleep .mu-sel select { background: var(--s1) !important; color: var(--tx) !important; border: 1px solid var(--ln) !important; }
.mu.mu-cons .mu-range input { accent-color: var(--acc); }
@media (min-width: 761px) { .mu.mu-cons .mu-sec > h2 { margin-bottom: 12px !important; } }

/* Calm layout: say each thing once, one tone for controls, generous space. */
.mu.mu-cons .mu-pad, .mu.mu-cons .mu-pad.note { box-shadow: none !important; background: var(--s2) !important; }
.mu.mu-cons .mu-pad.on, .mu.mu-cons .mu-pad:active { background: var(--acc-d) !important; border-color: var(--acc) !important; box-shadow: none !important; }
.mu.mu-cons .mu-chip { background: transparent !important; border-color: transparent !important; }
.mu.mu-cons .mu-chip[aria-pressed="true"] { background: var(--acc-d) !important; border-color: rgba(20,92,99,.45) !important; }
.mu.mu-cons .mu-key { box-shadow: none !important; background: var(--s2) !important; }
.mu.mu-cons .mu-key.on, .mu.mu-cons .mu-key:active { background: var(--acc-d) !important; }
.mu.mu-cons .mu-epad { background: var(--s2) !important; border: 1px solid var(--ln) !important; color: var(--tx) !important; opacity: 1; }
.mu.mu-cons .mu-epad[disabled] { opacity: .55; }
.mu.mu-cons .mu-epad.on { background: var(--acc) !important; border-color: var(--acc) !important; color: #fff !important; transform: scale(1.03); }
/* Sleep: one centred composition */
.mu.mu-cons #sleep .mu-moon { position: static !important; display: block; width: 64px; height: 56px; margin: 0 auto 6px; opacity: .6; flex: none; }
.mu.mu-cons #sleep > h2 { position: static !important; width: auto !important; height: auto !important; overflow: visible !important; clip: auto !important; white-space: normal !important; max-width: none !important; margin: 0 !important; text-align: center; font-size: 26px; }
.mu.mu-cons #sleep > .mu-lead { display: block !important; max-width: 30ch !important; margin: 0 auto !important; text-align: center; font-size: 13.5px; line-height: 1.5; }
.mu.mu-cons #sleep .mu-row { width: 100%; max-width: 380px; margin: 10px auto 0 !important; align-self: center; gap: 0 !important; }
.mu.mu-cons #sleep .mu-sel { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--ln); font-size: 14px; }
.mu.mu-cons #sleep .mu-sel select { flex: 0 1 62% !important; max-width: none !important; height: 40px; border-radius: 12px !important; }
.mu.mu-cons #sleep #splay { width: 100%; min-height: 50px; margin-top: 18px; border-radius: 999px; font-size: 16px; }
.mu.mu-cons #sleep .mu-left { min-height: 20px; margin-top: 10px; text-align: center; }
@media (max-width: 760px) {
  .mu.mu-cons #sleep { justify-content: center; gap: 8px; }
  /* title strip becomes one slim line */
  .mu.mu-cons .mu-hero { min-height: 46px !important; padding: 0 16px !important; border-radius: 16px !important; }
  .mu.mu-cons .mu-kick { display: none !important; }
  .mu.mu-cons .mu-hero-txt { max-width: 100% !important; }
  .mu.mu-cons .mu-hero h1 { font-size: 18px !important; white-space: nowrap; }
  /* Play: the picker already shows the art, so the card is just a name and big pads */
  .mu.mu-cons #inst .mu-card.cur { background: transparent !important; border: 0 !important; padding: 2px 0 0 !important; gap: 10px; }
  .mu.mu-cons .mu-card-top, .mu.mu-cons .mu-card p { display: none !important; }
  .mu.mu-cons .mu-card h3 { font-size: 20px; }
  /* Raga: names only, the chosen raga's story is shown below */
  .mu.mu-cons .mu-raga span { display: none !important; }
  .mu.mu-cons .mu-raga { min-height: 44px; justify-content: center; }
  .mu.mu-cons .mu-raga b { font-size: 15px; }
}
@media (min-width: 761px) {
  .mu.mu-cons #sleep { padding-top: 18px !important; padding-bottom: 26px !important; }
  .mu.mu-cons #sleep > h2 { margin-bottom: 4px !important; }
}

/* One shape language: controls are pills, instrument tiles are rounded squares. No drop-down lists: choices are rows of pills. */
.mu-hidden-sel { display: none !important; }
.mu-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.mu-opt { min-height: 38px; padding: 0 15px; border: 1px solid var(--ln, rgba(22,32,44,.1)); border-radius: 999px; background: #fff; color: #16202C; font: 600 13px/1 Inter, system-ui, sans-serif; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background .12s, border-color .12s, color .12s; }
.mu-opt:hover { background: #FBF9F4; }
.mu-opt[aria-checked="true"] { background: rgba(20,92,99,.07); border-color: #145C63; color: #145C63; }
.mu-opt:focus-visible { outline: 2px solid #145C63; outline-offset: 2px; }
.mu.mu-cons .mu-sel { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; padding: 0 !important; border: 0 !important; }
.mu.mu-cons .mu-sel > span { display: block !important; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--mu) !important; }
.mu.mu-cons .mu-sel .mu-seg { justify-content: center; }
.mu.mu-cons .mu-modes .mu-mode, .mu.mu-cons .mu-modes { border-radius: 999px !important; }
.mu.mu-cons .mu-btn, .mu.mu-cons .mu-btn.small { border-radius: 999px !important; }
.mu.mu-cons .mu-epad { border-radius: 20px !important; }
.mu.mu-cons #sleep .mu-row { gap: 16px !important; }
.mu.mu-cons #sleep .mu-sel { border-bottom: 0 !important; }
.mu.mu-cons #sleep #splay { margin-top: 6px; }
.mu.mu-cons #raga .mu-row { flex-wrap: wrap !important; }
.mu.mu-cons #raga .mu-sel { flex: 1 0 100%; align-items: flex-start; }
.mu.mu-cons #raga .mu-sel > span { display: none !important; }
.mu.mu-cons #raga .mu-sel .mu-seg { justify-content: flex-start; width: 100%; }
.mu.mu-cons #raga .mu-opt { flex: 1 1 auto; padding: 0 10px; min-height: 34px; font-size: 12.5px; }
.mu.mu-cons #raga .mu-btn.small { flex: 1 1 0 !important; min-height: 44px; }
@media (max-width: 760px) and (max-height: 740px) {
  .mu.mu-cons #sleep > .mu-lead { display: none !important; }
  .mu.mu-cons #sleep .mu-moon { width: 44px; height: 44px; }
  .mu.mu-cons #sleep > h2 { font-size: 22px; }
  .mu.mu-cons #sleep .mu-row { gap: 10px !important; }
}
.mu.mu-cons #raga .mu-sel .mu-seg { flex-wrap: nowrap; gap: 4px; }
.mu.mu-cons #raga .mu-opt { flex: 1 1 0; min-width: 0; padding: 0 4px; font-size: 12px; }
@media (max-width: 760px) {
  .mu.mu-cons #echo { justify-content: center; gap: 22px; }
  .mu.mu-cons #echo .mu-echo-pads { flex: none; }
}
@media (max-width: 760px) and (max-height: 740px) {
  .mu.mu-cons #sleep .mu-moon { width: 38px; height: 38px; margin-bottom: 0; }
  .mu.mu-cons #sleep { gap: 4px; }
  .mu.mu-cons #sleep .mu-opt { min-height: 34px; }
}
.mu.mu-cons #raga .mu-opt { flex: 1 1 auto; padding: 0 6px; font-size: 11.5px; }
.mu.mu-cons .mu-rinfo { flex: none; }
@media (max-width: 760px) and (max-height: 680px) {
  .mu.mu-cons .mu-raga { min-height: 38px; }
  .mu.mu-cons #raga .mu-opt { min-height: 30px; }
  .mu.mu-cons #sleep > h2 { font-size: 20px; }
  .mu.mu-cons #sleep .mu-row { gap: 6px !important; }
}

/* Motion: short, soft, and only where it explains something. */
@keyframes muIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes muRing { from { box-shadow: 0 0 0 0 rgba(20,92,99,.32); } to { box-shadow: 0 0 0 11px rgba(20,92,99,0); } }
@keyframes muPop { from { transform: scale(.93); } to { transform: scale(1); } }
@keyframes muBeat { from { transform: scale(1.06); } to { transform: scale(1); } }
@keyframes muMoon { 0%, 100% { transform: scale(1); opacity: .55; } 50% { transform: scale(1.07); opacity: .85; } }
@media (prefers-reduced-motion: no-preference) {
  .mu.mu-cons[data-mode="play"] > #instruments, .mu.mu-cons[data-mode="raga"] > #raga, .mu.mu-cons[data-mode="taal"] > #taal, .mu.mu-cons[data-mode="echo"] > #echo, .mu.mu-cons[data-mode="sleep"] > #sleep { animation: muIn .28s cubic-bezier(.2,.7,.2,1) both; }
  .mu.mu-cons #inst .mu-card.cur { animation: muIn .22s ease-out both; }
  .mu.mu-cons .mu-mode svg { transition: transform .2s; }
  .mu.mu-cons .mu-mode[aria-selected="true"] svg { animation: muPop .22s ease-out; }
  .mu.mu-cons .mu-chip[aria-pressed="true"] { animation: muPop .18s ease-out; }
  .mu-opt[aria-checked="true"] { animation: muPop .16s ease-out; }
  .mu.mu-cons .mu-pad, .mu.mu-cons .mu-key, .mu.mu-cons .mu-epad, .mu.mu-cons .mu-raga { position: relative; transition: background .12s, border-color .12s, transform .12s cubic-bezier(.3,1.4,.5,1); }
  .mu.mu-cons .mu-pad.on, .mu.mu-cons .mu-key.on, .mu.mu-cons .mu-epad.on { animation: muRing .45s ease-out; }
  .mu.mu-cons .mu-beat.on { animation: muBeat .22s ease-out; }
  .mu.mu-cons .mu-btn { transition: transform .12s, filter .12s, background .15s; }
  .mu.mu-cons .mu-btn:active, .mu-opt:active, .mu.mu-cons .mu-mode:active, .mu.mu-cons .mu-chip:active { transform: scale(.96); }
  .mu.mu-cons #sleep.on .mu-moon { animation: muMoon 6s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce) { .mu.mu-cons *, .mu-opt { animation: none !important; transition: none !important; } }

/* icons */
.mu.mu-cons .mu-mode[data-m="play"] svg { color: #E08A1E; } .mu.mu-cons .mu-mode[data-m="raga"] svg { color: #0E7C86; } .mu.mu-cons .mu-mode[data-m="taal"] svg { color: #5B6BC0; } .mu.mu-cons .mu-mode[data-m="echo"] svg { color: #D6456B; } .mu.mu-cons .mu-mode[data-m="sleep"] svg { color: #7A5BC7; }
.mu.mu-cons .mu-mode[aria-selected="true"] svg { color: inherit; }
.mu.mu-cons .mu-mode[data-m="play"][aria-selected="true"] svg { color: #E08A1E; } .mu.mu-cons .mu-mode[data-m="raga"][aria-selected="true"] svg { color: #0E7C86; } .mu.mu-cons .mu-mode[data-m="taal"][aria-selected="true"] svg { color: #5B6BC0; } .mu.mu-cons .mu-mode[data-m="echo"][aria-selected="true"] svg { color: #D6456B; } .mu.mu-cons .mu-mode[data-m="sleep"][aria-selected="true"] svg { color: #7A5BC7; }
.mu.mu-cons .mu-ib { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.mu.mu-cons .mu-ib .mu-ico { flex: none; color: inherit !important; }
.mu.mu-cons .mu-raga { display: flex !important; flex-direction: row !important; align-items: center; justify-content: flex-start !important; gap: 7px; }
.mu.mu-cons .mu-raga .mu-ico { flex: none; }
.mu.mu-cons .mu-raga b { font-size: 14px !important; line-height: 1.1; min-width: 0; overflow-wrap: anywhere; }
.mu.mu-cons .mu-beat i { display: inline-flex; align-items: center; justify-content: center; min-height: 14px; }
.mu.mu-cons .mu-beat.on i .mu-ico { color: #fff !important; }
.mu.mu-cons .mu-card h3 small, .mu.mu-cons .mu-card h3 .mu-alt { display: none; }
@media (max-width: 760px) {
  .mu.mu-cons .mu-raga { padding: 0 7px !important; gap: 4px; }
  .mu.mu-cons .mu-raga .mu-ico { width: 13px; height: 13px; }
  .mu.mu-cons .mu-raga b { font-size: clamp(11px, 3.3vw, 13px) !important; overflow-wrap: normal !important; word-break: keep-all; white-space: nowrap; }
}