/* /music — страница мода Lunify Music. Шапка и подвал из styles.css, тут только своё. */
.mu{--mu-bg:#0d0b1a;--mu-card:#17142a;--mu-card2:#1f1a38;--mu-line:rgba(160,140,255,.16);--mu-acc:#8b6cf6;--mu-acc2:#b39cff;--mu-txt:#ece8ff;--mu-mut:#a49fc2;--mu-ok:#5fd38d;
  background:radial-gradient(1200px 600px at 80% -10%,rgba(139,108,246,.22),transparent 60%),radial-gradient(900px 500px at 0% 20%,rgba(90,60,200,.14),transparent 60%),var(--mu-bg);
  color:var(--mu-txt);padding-top:72px;overflow-x:hidden}
.mu-wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.mu a{color:var(--mu-acc2)}
.mu h2{font-family:Unbounded,sans-serif;font-weight:700;font-size:clamp(24px,3.4vw,36px);margin:0 0 10px;letter-spacing:-.01em}
.mu h3{font-family:Unbounded,sans-serif;font-weight:600;font-size:17px;margin:0 0 8px}
.mu p{line-height:1.6;margin:0 0 12px}
.mu .mut{color:var(--mu-mut)}
.mu kbd,.mu .k{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;padding:0 7px;border-radius:7px;background:#2a2450;border:1px solid #463c82;border-bottom-width:3px;font:600 13px/1 Onest,sans-serif;color:#fff;vertical-align:middle}
.mu code{background:#241f42;border-radius:6px;padding:1px 6px;font-size:.92em}
.mu-sec{padding:64px 0;border-top:1px solid var(--mu-line)}
.mu-kick{font:400 10px/1 "Press Start 2P",monospace;color:var(--mu-acc2);letter-spacing:.08em;margin-bottom:14px}

/* hero */
.mu-hero{padding:56px 0 48px}
.mu-hero .mu-wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:44px;align-items:center}
.mu-title{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.mu-title img{width:72px;height:72px;image-rendering:pixelated;border-radius:16px;box-shadow:0 0 40px rgba(139,108,246,.45)}
.mu-hero h1{font-family:Unbounded,sans-serif;font-weight:800;font-size:clamp(34px,5.4vw,58px);line-height:1;margin:0}
.mu-hero h1 span{color:var(--mu-acc2)}
.mu-lead{font-size:18px;color:#d6d0f5}
.mu-dl{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:22px 0 14px}
.mu-btn{display:inline-flex;align-items:center;gap:10px;padding:15px 24px;border-radius:14px;background:linear-gradient(135deg,#9b7dff,#6c4ae6);color:#fff!important;text-decoration:none;font:700 16px/1 Onest,sans-serif;box-shadow:0 10px 30px rgba(108,74,230,.45);transition:transform .15s,box-shadow .15s}
.mu-btn:hover{transform:translateY(-2px);box-shadow:0 14px 38px rgba(108,74,230,.6)}
.mu-btn svg{width:20px;height:20px}
.mu-btn2{display:inline-flex;align-items:center;gap:8px;padding:14px 20px;border-radius:14px;border:1px solid var(--mu-line);color:var(--mu-txt)!important;text-decoration:none;font:600 15px/1 Onest,sans-serif;background:rgba(255,255,255,.03)}
.mu-btn2:hover{border-color:var(--mu-acc)}
.mu-meta{display:flex;flex-wrap:wrap;gap:8px;font-size:13px}
.mu-meta span{padding:6px 10px;border-radius:999px;background:var(--mu-card);border:1px solid var(--mu-line);color:var(--mu-mut)}
.mu-meta b{color:var(--mu-txt);font-weight:600}
.mu-shot{position:relative;margin:0;border-radius:18px;overflow:hidden;border:1px solid var(--mu-line);box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 0 6px rgba(139,108,246,.06)}
.mu-shot img{display:block;width:100%;height:auto;image-rendering:pixelated}
.mu-shot figcaption{font-size:12.5px;color:var(--mu-mut);background:var(--mu-card);padding:9px 14px;border-top:1px solid var(--mu-line)}
.mu-toc{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px}
.mu-toc a{padding:8px 14px;border-radius:999px;background:var(--mu-card);border:1px solid var(--mu-line);color:var(--mu-txt);text-decoration:none;font-size:14px}
.mu-toc a:hover{border-color:var(--mu-acc)}

/* фичи */
.mu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
.mu-card{background:linear-gradient(180deg,var(--mu-card2),var(--mu-card));border:1px solid var(--mu-line);border-radius:16px;padding:20px}
.mu-card .ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:rgba(139,108,246,.18);color:var(--mu-acc2);margin-bottom:12px;font-size:20px}
.mu-card p{font-size:14.5px;color:var(--mu-mut);margin:0}
.mu-card.big{grid-column:span 2;background:linear-gradient(135deg,#2b2160,#17142a 70%)}
.mu-tag{display:inline-block;font-size:11px;padding:3px 8px;border-radius:6px;background:rgba(95,211,141,.14);color:var(--mu-ok);margin-left:6px;vertical-align:2px;font-family:Onest,sans-serif;font-weight:600}

/* установка */
.mu-steps{counter-reset:s;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:24px;padding:0;list-style:none}
.mu-steps li{counter-increment:s;background:var(--mu-card);border:1px solid var(--mu-line);border-radius:16px;padding:20px 18px;position:relative}
.mu-steps li::before{content:counter(s);display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--mu-acc);color:#fff;font:700 15px/1 Unbounded,sans-serif;margin-bottom:12px}
.mu-steps p{font-size:14.5px;color:var(--mu-mut);margin:0}
.mu-note{margin-top:18px;padding:14px 16px;border-radius:12px;background:rgba(139,108,246,.1);border:1px solid var(--mu-line);font-size:14.5px}

/* клавиатура */
.mu-keys{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin-top:24px}
.mu-key{display:flex;align-items:center;gap:14px;background:var(--mu-card);border:1px solid var(--mu-line);border-radius:14px;padding:12px 14px;font-size:14.5px}
.mu-key .k{min-width:44px;height:44px;font-size:18px;border-radius:10px;flex:none}
.mu-key.hl{border-color:var(--mu-acc);background:linear-gradient(135deg,#2b2160,var(--mu-card))}

/* гайды */
.mu-guides{display:grid;gap:10px;margin-top:24px}
.mu-g{background:var(--mu-card);border:1px solid var(--mu-line);border-radius:16px;overflow:hidden}
.mu-g summary{cursor:pointer;list-style:none;padding:18px 20px;display:flex;align-items:center;gap:14px;font:600 16px/1.3 Onest,sans-serif}
.mu-g summary::-webkit-details-marker{display:none}
.mu-g summary .ic{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;background:rgba(139,108,246,.18);font-size:17px}
.mu-g summary::after{content:"";margin-left:auto;width:10px;height:10px;border-right:2px solid var(--mu-mut);border-bottom:2px solid var(--mu-mut);transform:rotate(45deg);transition:transform .2s;flex:none}
.mu-g[open] summary::after{transform:rotate(-135deg)}
.mu-g[open]{border-color:rgba(139,108,246,.45)}
.mu-g .bd{padding:0 20px 20px 68px;color:#d6d0f5;font-size:15px}
.mu-g ol,.mu-g ul{margin:0 0 12px;padding-left:20px;line-height:1.65}
.mu-g li{margin-bottom:4px}
.mu-g .tip{font-size:14px;color:var(--mu-mut);border-left:3px solid var(--mu-acc);padding-left:12px;margin:10px 0 0}

/* проблемы */
.mu-faq{width:100%;border-collapse:separate;border-spacing:0;margin-top:22px;background:var(--mu-card);border:1px solid var(--mu-line);border-radius:16px;overflow:hidden;font-size:14.5px}
.mu-faq td{padding:14px 16px;border-top:1px solid var(--mu-line);vertical-align:top;line-height:1.55}
.mu-faq tr:first-child td{border-top:0}
.mu-faq td:first-child{font-weight:600;width:32%;color:var(--mu-txt)}
.mu-faq td:last-child{color:var(--mu-mut)}

/* приватность + авторы */
.mu-two{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px}
.mu-two ul{margin:0;padding-left:18px;line-height:1.7;color:var(--mu-mut);font-size:14.5px}
.mu-final{text-align:center;padding:70px 0 80px}
.mu-final .mu-dl{justify-content:center}
.mu-final p{max-width:none;margin-left:auto;margin-right:auto}

@media (max-width:900px){
  .mu-hero .mu-wrap{grid-template-columns:1fr}
  .mu-grid{grid-template-columns:1fr 1fr}
  .mu-steps{grid-template-columns:1fr 1fr}
  .mu-two{grid-template-columns:1fr}
}
@media (max-width:560px){
  .mu-wrap{padding:0 16px}
  .mu-grid,.mu-steps{grid-template-columns:1fr}
  .mu-card.big{grid-column:auto}
  .mu-g .bd{padding:0 16px 18px}
  .mu-faq td{display:block;width:auto!important}
  .mu-faq td:last-child{border-top:0;padding-top:0}
  .mu-btn{width:100%;justify-content:center}
}

/* ===== v2: языки ===== */
.en{display:none!important}
html.l-en .en{display:revert!important}
html.l-en .ru{display:none!important}
.mu-lang{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:var(--mu-card);border:1px solid var(--mu-line);margin-left:12px;vertical-align:middle}
.mu-lang button{all:unset;cursor:pointer;padding:4px 10px;border-radius:999px;font:600 11px/1 Onest,sans-serif;color:var(--mu-mut);letter-spacing:.04em}
.mu-lang button[aria-pressed=true]{background:var(--mu-acc);color:#fff}
.mu-btn3{display:inline-flex;align-items:center;gap:8px;padding:14px 18px;border-radius:14px;border:1px dashed rgba(27,217,106,.45);color:#7ee2a6!important;font:600 14px/1 Onest,sans-serif;background:rgba(27,217,106,.06);text-decoration:none}
.mu-btn3 small{font-size:11px;padding:3px 7px;border-radius:6px;background:rgba(27,217,106,.15)}

/* ===== сцена «в игре» ===== */
.mu-scene{position:relative;aspect-ratio:16/9;border-radius:20px;overflow:hidden;border:1px solid var(--mu-line);background:#000 center/cover;box-shadow:0 40px 100px rgba(0,0,0,.55);margin-top:26px;user-select:none}
.mu-scene::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15),transparent 30%,transparent 60%,rgba(0,0,0,.55));pointer-events:none}
.mu-scene > *{position:absolute;z-index:2}
.hud-card{left:2.2%;top:4%;width:min(330px,40%);display:flex;gap:10px;align-items:center;padding:9px;border-radius:12px;background:rgba(18,14,36,.82);border:1px solid rgba(160,140,255,.25);backdrop-filter:blur(4px)}
.hud-card img{width:54px;height:54px;border-radius:8px;image-rendering:pixelated;flex:none}
.hud-card .t{font:700 14px/1.2 Onest,sans-serif;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hud-card .a{font-size:12px;color:#b9b1e6;margin:2px 0 6px}
.hud-card .bar{height:4px;border-radius:2px;background:rgba(255,255,255,.15);overflow:hidden}
.hud-card .bar i{display:block;height:100%;width:30%;background:linear-gradient(90deg,#9b7dff,#c9b8ff)}
.hud-card .row{display:flex;justify-content:space-between;font-size:10px;color:#a9a2d4;margin-top:4px}
.hud-card .eq{display:flex;gap:2px;align-items:flex-end;height:22px;margin-left:auto;align-self:flex-start}
.hud-card .eq b{width:3px;background:#b39cff;border-radius:1px;height:30%}
.hud-kara{left:50%;bottom:16%;transform:translateX(-50%);text-align:center;width:90%;font:800 clamp(14px,2.3vw,26px)/1.35 Onest,sans-serif;text-shadow:0 2px 0 rgba(0,0,0,.6),0 0 18px rgba(0,0,0,.6)}
.hud-kara .l1 span{color:rgba(255,255,255,.55);transition:color .15s}
.hud-kara .l1 span.on{color:#fff;text-shadow:0 0 16px rgba(179,156,255,.9),0 2px 0 rgba(0,0,0,.6)}
.hud-kara .l2{font-size:.68em;color:rgba(255,255,255,.5);font-weight:600}
.hud-viz{left:0;right:0;bottom:0;width:100%;height:13%}
.hud-world{inset:0;pointer-events:none}
.hud-world span{position:absolute;font:800 clamp(14px,2.6vw,30px)/1 "Press Start 2P",monospace;color:#d9ccff;text-shadow:0 0 14px rgba(155,125,255,.9),3px 3px 0 #2b1d66;white-space:nowrap}
.hud-vol{right:2.2%;top:4%;display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:10px;background:rgba(18,14,36,.75);font-size:12px;color:#d6d0f5}
.hud-vol i{display:block;width:70px;height:4px;border-radius:2px;background:linear-gradient(90deg,#9b7dff 72%,rgba(255,255,255,.18) 72%)}
.mu-legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:14px;font-size:13.5px;color:var(--mu-mut)}
.mu-legend b{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--mu-acc);color:#fff;font-size:11px;margin-right:6px}
.mu-pin{width:24px;height:24px;border-radius:50%;background:var(--mu-acc);color:#fff;display:grid;place-items:center;font:700 12px/1 Onest,sans-serif;box-shadow:0 0 0 4px rgba(139,108,246,.3)}

/* ===== демо-блоки ===== */
.mu-demo{display:grid;grid-template-columns:1fr 1.25fr;gap:28px;align-items:center;margin-top:30px}
.mu-demo.rev{grid-template-columns:1.25fr 1fr}
.mu-demo.rev > :first-child{order:2}
.mu-panel{background:var(--mu-card);border:1px solid var(--mu-line);border-radius:18px;padding:16px;position:relative;overflow:hidden}
.mu-chips{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0}
.mu-chips button{all:unset;cursor:pointer;padding:7px 12px;border-radius:9px;background:#221d40;border:1px solid var(--mu-line);font:600 12.5px/1 Onest,sans-serif;color:#cfc8f5}
.mu-chips button[aria-pressed=true]{background:var(--mu-acc);border-color:var(--mu-acc);color:#fff}
.mu-chips .lbl{font-size:12px;color:var(--mu-mut);align-self:center;margin-right:4px;min-width:64px}
.mu-viz{display:block;width:100%;height:220px;border-radius:12px;background:radial-gradient(120% 90% at 50% 100%,#241c4d,#0f0c20)}

/* летающий текст */
.mu-fly{position:relative;aspect-ratio:16/10;border-radius:14px;overflow:hidden;background:#000 center/cover}
.mu-fly::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,8,25,.25),rgba(10,8,25,.05) 50%,rgba(10,8,25,.4))}
.mu-fly .words{position:absolute;left:0;right:0;top:38%;display:flex;flex-wrap:wrap;justify-content:center;gap:.35em;z-index:2;padding:0 6%}
.mu-fly .words span{display:inline-block;font:800 clamp(16px,2.6vw,30px)/1.1 "Press Start 2P",monospace;color:#fff;text-shadow:0 0 16px var(--glow,#9b7dff),3px 3px 0 rgba(30,20,70,.9)}

/* радио vs наушники */
.mu-rad{position:relative;aspect-ratio:16/10;border-radius:14px;overflow:hidden;background:#000 center/cover}
.mu-rad::before{content:"";position:absolute;inset:0;background:rgba(10,8,25,.55)}
.mu-rad svg{position:absolute;inset:0;width:100%;height:100%}
.mu-meters{display:grid;gap:10px;margin-top:14px}
.mu-meter{display:grid;grid-template-columns:150px 1fr 44px;align-items:center;gap:10px;font-size:13.5px}
.mu-meter .tr{height:10px;border-radius:5px;background:#221d40;overflow:hidden}
.mu-meter .tr i{display:block;height:100%;width:100%;border-radius:5px;background:linear-gradient(90deg,#6c4ae6,#b39cff);transition:width .15s}
.mu-meter.hp .tr i{background:linear-gradient(90deg,#2fb57a,#7ee2a6)}
.mu-meter output{text-align:right;font-variant-numeric:tabular-nums;color:var(--mu-mut)}
.mu-range{width:100%;accent-color:var(--mu-acc);margin-top:12px}

/* HUD-редактор */
.mu-ed{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000 center/cover;touch-action:none}
.mu-ed::before{content:"";position:absolute;inset:0;background:rgba(8,6,20,.45);background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:5% 8.888%}
.mu-ed .w{position:absolute;cursor:grab;border:1px dashed rgba(201,184,255,.7);border-radius:10px;padding:7px 9px;background:rgba(18,14,36,.85);color:#fff;font:600 12px/1.2 Onest,sans-serif;display:flex;align-items:center;gap:8px;white-space:nowrap}
.mu-ed .w:active{cursor:grabbing;border-style:solid;box-shadow:0 0 0 3px rgba(139,108,246,.4)}
.mu-ed .w img{width:30px;height:30px;border-radius:6px;image-rendering:pixelated}
.mu-ed .w .eqm{display:flex;gap:2px;align-items:flex-end;height:22px}
.mu-ed .w .eqm b{width:4px;background:#b39cff;border-radius:1px}
.mu-ed .hint{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);font-size:11.5px;color:#cfc8f5;background:rgba(0,0,0,.45);padding:4px 10px;border-radius:7px;pointer-events:none;white-space:nowrap}

/* кинокамера */
.mu-cine{position:relative;aspect-ratio:21/9;border-radius:14px;overflow:hidden;background:#000}
.mu-cine .img{position:absolute;inset:-8%;background:center/cover;animation:cine 12s infinite steps(1)}
.mu-cine .img::after{content:"";position:absolute;inset:0;animation:cinepan 3s infinite linear}
.mu-cine::before,.mu-cine::after{content:"";position:absolute;left:0;right:0;height:11%;background:#000;z-index:2}
.mu-cine::before{top:0}.mu-cine::after{bottom:0}
.mu-cine .rec{position:absolute;z-index:3;right:14px;top:14%;font:700 11px/1 Onest,sans-serif;color:#fff;opacity:.8;letter-spacing:.1em}
@keyframes cine{0%{transform:scale(1.05) translate(0,0)}25%{transform:scale(1.35) translate(-9%,4%)}50%{transform:scale(1.15) translate(7%,-3%)}75%{transform:scale(1.5) translate(3%,6%)}}
.mu-paused .img,.mu-paused *{animation-play-state:paused!important}

/* клавиатура */
.mu-kb{display:grid;gap:6px;margin-top:24px;padding:16px;border-radius:18px;background:var(--mu-card);border:1px solid var(--mu-line);overflow-x:auto}
.mu-kb .r{display:flex;gap:6px}
.mu-kb .r:nth-child(2){padding-left:22px}.mu-kb .r:nth-child(3){padding-left:34px}.mu-kb .r:nth-child(4){padding-left:52px}
.mu-kb .c{flex:none;width:42px;height:42px;border-radius:9px;display:grid;place-items:center;background:#1c1835;border:1px solid #2c2650;border-bottom-width:3px;font:600 13px/1 Onest,sans-serif;color:#6f6a92;text-transform:uppercase;position:relative}
.mu-kb .c.b{background:linear-gradient(180deg,#8b6cf6,#6040d8);border-color:#a48cff;color:#fff;cursor:help;box-shadow:0 0 18px rgba(139,108,246,.45)}
.mu-kb .c.b.cur{outline:2px solid #fff;outline-offset:2px}
.mu-kb-cap{min-height:24px;margin-top:10px;font-size:14.5px;color:var(--mu-mut)}
.mu-kb-cap b{color:#fff}

/* дерево папок */
.mu-tree{font:500 14px/1.9 ui-monospace,Consolas,monospace;background:#0f0c20;border:1px solid var(--mu-line);border-radius:14px;padding:14px 18px;margin-top:18px;color:#a49fc2;overflow-x:auto;white-space:pre}
.mu-tree b{color:#fff}.mu-tree em{color:#b39cff;font-style:normal}

/* сравнение площадок */
.mu-plat{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:22px}
.mu-plat div{border-radius:14px;padding:14px;background:var(--mu-card);border:1px solid var(--mu-line);font-size:13px;color:var(--mu-mut)}
.mu-plat div b{display:block;color:#fff;font:700 14.5px/1.2 Onest,sans-serif;margin-bottom:6px}
.mu-plat div i{display:block;width:28px;height:4px;border-radius:2px;margin-bottom:10px}

/* сервер */
.mu-ip{display:inline-flex;align-items:center;gap:10px;margin-top:6px;padding:10px 14px;border-radius:12px;background:var(--mu-card);border:1px solid var(--mu-line);font:700 15px/1 ui-monospace,Consolas,monospace;color:#fff;cursor:pointer}
.mu-ip span{font:500 12px/1 Onest,sans-serif;color:var(--mu-mut)}

@media (max-width:900px){
  .mu-demo,.mu-demo.rev{grid-template-columns:1fr}
  .mu-demo.rev > :first-child{order:0}
  .mu-plat{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .hud-card{width:56%;padding:6px;gap:6px}.hud-card img{width:34px;height:34px}.hud-card .eq,.hud-vol{display:none}
  .hud-card .t{font-size:11px}.hud-card .a{font-size:10px;margin:1px 0 3px}
  .mu-meter{grid-template-columns:110px 1fr 40px;font-size:12.5px}
  .mu-kb .c{width:30px;height:34px;font-size:11px}
  .mu-kb .r:nth-child(2){padding-left:12px}.mu-kb .r:nth-child(3){padding-left:20px}.mu-kb .r:nth-child(4){padding-left:30px}
  .mu-viz{height:170px}
}
@media (prefers-reduced-motion:reduce){.mu-cine .img{animation:none}}