/* ═══════════════════════════════════════════════════════════════════════════
 *  v427 · موسیقی استوری، تم روشن — جای شیت‌های تیرهٔ 357 (بعد از 357 بار می‌شود)
 *  درخواست مالک: «بگراند مشکی نباشد، دکمه‌ها قدرتمند، خیلی ساده، حرفه‌ای».
 *  کاغذ #FBFAFD، جوهر #1b1029، دو زبان رنگ هم‌خانوادهٔ 348/349:
 *    • اقدام (تمام، گذاشتن استوری، دوباره، رفتن به انتخاب بخش) = گرادیان صورتی←بنفش #DB2777←#7C3AED با عمق و حالت فشرده
 *    • انتخاب (سبک فعال، مدت فعال، دکمهٔ مکث در حال پخش) = سرمه‌ای-بنفش #1F1433←#4C1D95 (همان تب فعال 348)
 *  پشت شیت‌ها پردهٔ روشنِ ساده (بی blur). انتخاب بخش: کاغذ با پنجرهٔ گرد روی خودِ عکس استوری.
 *  همهٔ سلکتورها زیر #mp426 / #mc426 / #ss426 / #sc426؛ بی @keyframes تازه، بی :has، بی backdrop-filter تازه.
 *  v428 (?v=2): انتخاب بخش روی صفحهٔ کوتاه و گوشی افقی — برچسب و راهنما به اندازهٔ واقعی پنجره (بخش ۸).
 *  v429 (?v=3): جست‌وجوی آهنگ روی گوشی شیت نیمه‌صفحه (بخش ۹؛ رفتار کشیدن در 356).
 * ═══════════════════════════════════════════════════════════════════════════ */

#mp426, #mc426, #ss426, #sc426{
  --ink:#1b1029; --ink2:#3E3553; --mute:#6B6480; --faint:#8A82A0;
  --paper:#FBFAFD; --fill:#F1EEF5; --fill2:#E6E1EE; --line:#ECE8F2;
  --veil:rgba(243,241,248,.95);
  --acc:linear-gradient(135deg,#DB2777 0%,#7C3AED 100%); --acc-t:#A21CAF;
  --acc-shd:inset 0 1px 0 rgba(255,255,255,.28), inset 0 -2px 0 rgba(70,10,90,.24), 0 10px 22px -10px rgba(171,48,178,.75);
  --acc-shd-p:inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(70,10,90,.24), 0 4px 10px -6px rgba(171,48,178,.7);
  --sel:linear-gradient(135deg,#1F1433 0%,#4C1D95 100%);
  --sel-shd:inset 0 1px 0 rgba(255,255,255,.14), 0 8px 16px -10px rgba(76,29,149,.85);
}

/* ═══════════════ ۱) جست‌وجوی آهنگ (#mp426) ═══════════════ */
#mp426{ background:var(--veil) }
#mp426 .mp426-p{
  color:var(--ink); background:var(--paper); border-radius:28px 28px 0 0; padding-top:10px;
  box-shadow:0 0 0 1px rgba(27,16,41,.06), 0 -8px 28px -12px rgba(27,16,41,.2);
}
#mp426 .mp426-grab{ width:36px; height:5px; background:#DAD5E2; margin:0 auto 10px }

/* سربرگ: نشان برند + عنوان درشت؛ بستن = دایرهٔ ۴۴ */
#mp426 .mp426-hd{ padding:2px 16px 14px; padding-inline-start:18px }
#mp426 .mp426-hd b{ gap:11px; font-size:22px; font-weight:900; line-height:1.2; color:var(--ink) }
#mp426 .mp426-hd b svg{
  box-sizing:border-box; flex:0 0 auto; width:34px; height:34px; padding:8px; border-radius:11px; color:#fff; background:var(--acc);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 6px 14px -6px rgba(171,48,178,.8);
}
#mp426 .mp426-ib{ width:44px; height:44px; background:var(--fill); color:var(--ink); transition:transform .12s, background-color .12s }
#mp426 .mp426-ib svg{ width:20px; height:20px }
#mp426 .mp426-ib:active{ transform:scale(.92); background:var(--fill2) }

/* جست‌وجو؛ پاک‌کردن = دکمهٔ ۴۴ با دایرهٔ ۲۴ و ضربدر جوهری (۱۳:۱) */
#mp426 .mp426-q{
  height:50px; margin:0 16px; padding:0 14px; padding-inline-end:3px; gap:10px; border-radius:16px;
  background:var(--fill); box-shadow:none; transition:box-shadow .15s, background-color .15s;
}
#mp426 .mp426-q:focus-within{ background:#fff; box-shadow:inset 0 0 0 2px #7C3AED, 0 0 0 4px rgba(124,58,237,.14) }
#mp426 .mp426-q > svg{ width:20px; height:20px; opacity:1; color:var(--mute) }
#mp426 .mp426-q input{ color:var(--ink); font-size:15.5px; font-weight:700; caret-color:#7C3AED }
#mp426 .mp426-q input::placeholder{ color:var(--mute); opacity:1 }
#mp426 .mp426-clr{ width:44px; height:44px; color:var(--ink); background:radial-gradient(circle, #DDD8E5 0 12px, transparent 12.5px) }
#mp426 .mp426-clr svg{ width:12px; height:12px; stroke-width:2.6 }
#mp426 .mp426-clr:active{ background:radial-gradient(circle, #CFC8DA 0 12px, transparent 12.5px) }

/* سبک‌ها: قرص یاسی؛ فعال = سرمه‌ای-بنفش (زبان «انتخاب») */
#mp426 .mp426-gen{ gap:8px; padding:14px 16px 16px; margin-bottom:-8px }
#mp426 .mp426-g{
  position:relative; height:40px; padding:0 18px; border-radius:99px; background:var(--fill); color:var(--ink2);
  font-size:13.5px; font-weight:800; transition:transform .12s, background-color .12s;
}
#mp426 .mp426-g::after{ content:""; position:absolute; inset:-2px 0 }
#mp426 .mp426-g:active{ transform:scale(.96); background:var(--fill2) }
#mp426 .mp426-g.on{ background:var(--sel); color:#fff; box-shadow:var(--sel-shd) }

/* ردیف‌ها: کاور ۵۶ با دایرهٔ پخش؛ خط مو از بعد کاور */
#mp426 .mp426-list{ padding:6px 8px 18px }
#mp426 .mp426-r{ position:relative; gap:14px; padding:10px 8px; border-radius:18px; transition:background-color .15s, box-shadow .15s }
#mp426 .mp426-r:active, #mp426 .mp426-r:focus-visible{ background:var(--fill) }
#mp426 .mp426-r + .mp426-r::before{
  content:""; position:absolute; top:0; inset-inline-start:78px; inset-inline-end:8px; height:1px; background:var(--line);
}
#mp426 .mp426-r:active::before, #mp426 .mp426-r:active + .mp426-r::before,
#mp426 .mp426-r.on::before, #mp426 .mp426-r.on + .mp426-r::before{ opacity:0 }
#mp426 .mp426-r .cv{
  flex:0 0 56px; width:56px; height:56px; border-radius:14px; background:#ECE8F2;
  box-shadow:0 0 0 1px rgba(27,16,41,.05), 0 8px 16px -10px rgba(27,16,41,.45);
}
#mp426 .mp426-r .pl{ background:transparent; color:var(--ink) }
#mp426 .mp426-r .pl::before{
  content:""; grid-area:1/1; width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.95);
  box-shadow:0 4px 10px -2px rgba(27,16,41,.35); transition:transform .15s;
}
#mp426 .mp426-r .pl svg{ position:relative; width:14px; height:14px; filter:none }
#mp426 .mp426-r .pl:active::before{ transform:scale(.88) }
#mp426 .mp426-r .tx{ gap:4px }
#mp426 .mp426-r .tx b{ font-size:15px; font-weight:800; color:var(--ink) }
#mp426 .mp426-r .tx small{ font-size:12.5px; font-weight:700; color:var(--mute) }
#mp426 .mp426-r .tx em{ font-variant-numeric:tabular-nums }
#mp426 .mp426-r .eq426{ color:var(--acc-t) }
/* جعبهٔ ۴۰ ثابت (متن با روشن شدن ردیف جابه‌جا نشود)؛ بیکار فقط پیکان کم‌رنگ */
#mp426 .mp426-r .go{ width:40px; height:40px; background:none; color:var(--faint); transition:background-color .15s, color .15s }
#mp426 .mp426-r .go svg{ width:18px; height:18px; stroke-width:2.4 }

/* در حال پخش: کارت برجسته، دکمهٔ مکث سرمه‌ای با حلقهٔ سفید، عنوان رنگی، «رفتن» = دکمهٔ گرادیانی */
#mp426 .mp426-r.on{
  background:linear-gradient(90deg, rgba(219,39,119,.05), rgba(124,58,237,.06)), #fff;
  box-shadow:inset 0 0 0 1.5px rgba(162,28,175,.26), 0 14px 28px -18px rgba(124,58,237,.6);
}
#mp426 .mp426-r.on:active{ background:var(--fill) }
#mp426 .mp426-r.on .cv{ box-shadow:0 0 0 1px rgba(27,16,41,.05), 0 10px 20px -10px rgba(124,58,237,.7) }
#mp426 .mp426-r.on .pl{ color:#fff; background:rgba(27,16,41,.14) }
#mp426 .mp426-r.on .pl::before{ background:var(--sel); box-shadow:0 0 0 2px #fff, 0 6px 14px -4px rgba(27,16,41,.6) }
#mp426 .mp426-r.on .tx b{ color:var(--acc-t) }
#mp426 .mp426-r.on .go{ background:var(--acc); color:#fff; box-shadow:var(--acc-shd) }

/* اسکلت (.sk سراسری 296 پس‌زمینهٔ !important دارد) */
#mp426 .mp426-r.sk{ background:none !important }
#mp426 .mp426-r.sk .cv{ background:#ECE8F2; box-shadow:none }
#mp426 .mp426-r.sk .tx b{ background:#ECE8F2 }
#mp426 .mp426-r.sk .tx small{ background:#F2EFF6 }

/* خالی / به‌زودی / خطا / صفحهٔ بعد */
#mp426 .mp426-none{ gap:14px; padding:56px 28px; color:var(--ink2); font-size:15px; font-weight:800 }
#mp426 .mp426-none > svg{
  box-sizing:content-box; width:28px; height:28px; padding:20px; border-radius:50%; opacity:1; color:var(--acc-t);
  background:linear-gradient(135deg, rgba(219,39,119,.10), rgba(124,58,237,.12));
}
#mp426 .mp426-retry{
  height:46px; padding:0 22px; gap:8px; background:var(--acc); color:#fff; font-size:14px; box-shadow:var(--acc-shd);
  transition:transform .12s, box-shadow .12s;
}
#mp426 .mp426-retry:active{ transform:translateY(1px) scale(.97); box-shadow:var(--acc-shd-p) }
#mp426 .mp426-more .sv109-spin{ width:28px; height:28px; border-color:rgba(124,58,237,.16); border-top-color:#7C3AED }

/* ═══════════════ ۲) انتخاب بخش (#mc426) ═══════════════ */
/* کاغذ تمام‌صفحه با یک پنجرهٔ گرد (سوراخِ box-shadow) روی خودِ عکس استوری در #sc426 — هر چهار شکل برچسب
   همان‌طور که روی استوری دیده می‌شوند خوانا می‌مانند. */
#mc426{ color:var(--ink); background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; overflow:hidden }
#mc426 .mc426-hd, #mc426 .mc426-low{ position:relative; z-index:1 }
#mc426 .mc426-hd{ gap:12px; padding:calc(10px + env(safe-area-inset-top)) 16px 12px }
#mc426 .mc426-hd b{ font-size:17px; font-weight:900; color:var(--ink) }
#mc426 .mc426-ib{
  width:44px; height:44px; background:#fff; color:var(--ink);
  box-shadow:0 0 0 1px rgba(27,16,41,.08), 0 6px 14px -8px rgba(27,16,41,.35); transition:transform .12s;
}
#mc426 .mc426-ib:active{ transform:scale(.92) }
#mc426 .mc426-done{
  height:44px; padding:0 20px; gap:6px; background:var(--acc); color:#fff; font-size:14.5px; box-shadow:var(--acc-shd);
  transition:transform .12s, box-shadow .12s;
}
#mc426 .mc426-done svg{ width:18px; height:18px; stroke-width:2.6 }
#mc426 .mc426-done:active{ transform:translateY(1px) scale(.97); box-shadow:var(--acc-shd-p) }

#mc426 .mc426-mid{
  position:relative; z-index:0; margin:2px 16px 0; border-radius:28px;
  box-shadow:inset 0 0 0 1px rgba(27,16,41,.08), 0 0 0 200vmax var(--paper);
}
/* عکس ۹:۱۶ روی گوشی بلندتر (object-fit:contain در 357) بالا حاشیه دارد ← پنجره از لبهٔ بالای خودِ عکس شروع شود
   (سربرگ = 10 + 44 + 12؛ بی پشتیبانی dvh همان vh می‌ماند که پنجره را فقط کمی پایین‌تر می‌برد) */
#mc426 .mc426-mid{
  margin-top:max(2px, calc((100vh - 177.78vw) / 2 - 65px - env(safe-area-inset-top, 0px)));
  margin-top:max(2px, calc((100dvh - 177.78vw) / 2 - 65px - env(safe-area-inset-top, 0px)));
}
#mc426 .mc426-tip{
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%); white-space:nowrap;
  padding:7px 14px; border-radius:99px; background:rgba(255,255,255,.94); color:var(--ink);
  font-size:12px; font-weight:800; opacity:1; box-shadow:0 6px 16px -6px rgba(27,16,41,.45);
}

#mc426 .mc426-low{ padding:20px 0 calc(16px + env(safe-area-inset-bottom)) }
/* مدت: کنترل تکه‌ای؛ فعال = سرمه‌ای-بنفش */
#mc426 .mc426-durs{
  width:min(calc(100% - 32px), 340px); margin:0 auto 20px; padding:4px; gap:0; border-radius:99px; background:var(--fill);
}
#mc426 .mc426-durs button{
  position:relative; flex:1; min-width:0; height:40px; padding:0 8px; border-radius:99px; background:transparent; color:var(--ink2);
  font-size:14px; font-weight:800; transition:background-color .15s, color .15s, transform .12s;
}
#mc426 .mc426-durs button::after{ content:""; position:absolute; inset:-4px 0 }
#mc426 .mc426-durs button:not(:disabled):active{ transform:scale(.95) }
#mc426 .mc426-durs button.on{ background:var(--sel); color:#fff; box-shadow:var(--sel-shd) }
#mc426 .mc426-durs button:disabled{ opacity:.35 }

/* موج: میلهٔ جوهری داخل پنجره، یاسی بیرون (356 یک بار می‌خواند)؛ قاب گرادیانی؛ لبه‌ها محو در کاغذ */
#mc426 .mc426-wave{ --mc-bar:#1b1029; --mc-bar-dim:#D5CFDF; height:76px; margin:0 0 16px }
#mc426 .mc426-wave::before, #mc426 .mc426-wave::after{
  content:""; position:absolute; z-index:1; top:0; bottom:0; width:28px; pointer-events:none;
}
#mc426 .mc426-wave::before{ left:0; background:linear-gradient(90deg, var(--paper), rgba(251,250,253,0)) }
#mc426 .mc426-wave::after{ right:0; background:linear-gradient(270deg, var(--paper), rgba(251,250,253,0)) }
#mc426 .mc426-win{
  top:-8px; bottom:-8px; border-radius:16px; background:rgba(171,48,178,.05);
  box-shadow:0 10px 26px -12px rgba(124,58,237,.55);
}
#mc426 .mc426-win::after{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:2.5px; background:linear-gradient(90deg,#DB2777,#7C3AED);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
#mc426 .mc426-win .ph{ background:linear-gradient(90deg, rgba(219,39,119,.06), rgba(124,58,237,.2)) }
#mc426 .mc426-t{ gap:8px; font-size:15px; font-weight:900; color:var(--ink); font-variant-numeric:tabular-nums }
#mc426 .mc426-t span{ opacity:1; color:var(--faint) }
#mc426 .mc426-t .all{
  margin-left:0; margin-inline-start:10px; padding:2px 9px; border-radius:99px; background:var(--fill); color:var(--mute);
  font-size:11.5px; opacity:1;
}
#mc426 .mc426-t .all:empty{ display:none }

/* آهنگ دیگر / برداشتن: دو دکمهٔ دوم هم‌پهنا و ۴۸؛ نوشته نمی‌شکند، اگر جا نشد ردیف دوم (گوشی ۳۲۰) */
#mc426 .mc426-act{ flex-wrap:wrap; gap:10px; padding:18px 16px 0 }
#mc426 .mc426-act button{
  flex:1 1 0; max-width:220px; justify-content:center; height:48px; padding:0 14px; gap:8px; border-radius:16px; white-space:nowrap;
  background:var(--fill); color:var(--ink); font-size:14px; font-weight:800; transition:transform .12s, background-color .12s;
}
#mc426 .mc426-act button svg{ width:18px; height:18px }
#mc426 .mc426-act button:active{ transform:scale(.97); background:var(--fill2) }
#mc426 .mc426-act .mc426-rm{ color:#BE123C; background:#FDEEF1 }
#mc426 .mc426-act .mc426-rm:active{ background:#FBDDE4 }

/* ═══════════════ ۳) شیت آهنگ در بیننده (#ss426 = .sh109.dark.ss426) ═══════════════ */
#ss426.sh109{ background:var(--veil) }
#ss426 .sh109-p{
  color:var(--ink); border-radius:28px 28px 0 0; padding:10px 20px calc(20px + env(safe-area-inset-bottom));
  background:radial-gradient(70% 34% at 50% 0, rgba(219,39,119,.09), transparent 72%),
             radial-gradient(60% 32% at 50% 12%, rgba(124,58,237,.09), transparent 72%), var(--paper);
  box-shadow:0 0 0 1px rgba(27,16,41,.06), 0 -8px 28px -12px rgba(27,16,41,.2);
}
#ss426 .sh109-grab{ width:36px; height:5px; background:#DAD5E2; margin:0 auto 18px }
#ss426 .ss426-h{ flex-direction:column; gap:16px; padding:6px 0 24px; text-align:center }
#ss426 .ss426-h .cv{
  flex:0 0 auto; width:112px; height:112px; border-radius:24px; background:var(--acc); color:#fff;
  box-shadow:0 0 0 1px rgba(27,16,41,.05), 0 22px 36px -18px rgba(27,16,41,.55);
}
#ss426 .ss426-h .cv svg{ width:44px; height:44px }
#ss426 .ss426-h .tx{ align-items:center; gap:6px; max-width:100% }
#ss426 .ss426-h .tx b, #ss426 .ss426-h .tx small{ max-width:100% }
#ss426 .ss426-h .tx b{ font-size:21px; font-weight:900; color:var(--ink) }
#ss426 .ss426-h .tx small{ font-size:14px; font-weight:700; color:var(--mute); opacity:1 }
#ss426 .sh109-cta{
  height:54px; margin-top:0; padding:0 18px; gap:8px; border-radius:18px; font-size:15px; font-weight:900;
  transition:transform .12s, background-color .12s, box-shadow .12s;
}
#ss426 .ss426-use{ background:var(--acc); color:#fff; box-shadow:var(--acc-shd) }
#ss426 .ss426-use svg{ width:20px; height:20px }
#ss426 .ss426-use:active{ transform:translateY(1px) scale(.98); box-shadow:var(--acc-shd-p) }
#ss426 .sh109-cta.ghost{ height:50px; margin-top:10px; background:var(--fill); color:var(--ink); box-shadow:none }
#ss426 .sh109-cta.ghost:active{ transform:scale(.98); background:var(--fill2) }

/* ═══════════════ ۴) پیش از انتشار (#sc426): فقط دو دکمه؛ صحنهٔ عکس همان 357 ═══════════════ */
/* حاشیهٔ عکس‌های غیر ۹:۱۶ در 357 تار و تیره است (brightness .45). تا جست‌وجو/انتخاب بخش باز است (.sub) همان تار
   ولی روشن ← پشت پردهٔ روشن و درون پنجرهٔ ویرایشگر ادامهٔ نرم خود عکس دیده شود، نه نوار سیاه */
#sc426.sub .sc426-bg{ filter:blur(28px) }
#sc426 .sc426-ib{ width:44px; height:44px }
#sc426 .sc426-tool, #sc426.has .sc426-tool{
  height:44px; padding:0 5px; padding-inline-end:16px; border:0; background:#fff; color:var(--ink); font-size:13.5px;
  -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:0 10px 26px -10px rgba(0,0,0,.55); transition:transform .12s;
}
#sc426 .sc426-tool:active{ transform:scale(.96) }
#sc426 .sc426-tool .i{ flex-basis:34px; width:34px; height:34px; background:var(--acc); color:#fff }
#sc426 .sc426-share{ height:52px; transition:transform .12s }
#sc426 .sc426-share:active{ transform:scale(.97) }
#sc426 .sc426-share .av{ box-shadow:0 0 0 2px #fff, 0 0 0 4px #AB30B2 }
#sc426 .sc426-share i{ flex-basis:38px; width:38px; height:38px; background:var(--acc); color:#fff; box-shadow:var(--acc-shd) }

/* ═══════════════ ۵) صفحه‌کلید و ماوس ═══════════════ */
/* حلقهٔ جوهری ۱۷:۱ با فاصلهٔ ۲px (روی دکمه‌های گرادیانی = حلقهٔ دوگانهٔ سفید+جوهری) */
#mp426 button:focus-visible, #mc426 button:focus-visible, #ss426 button:focus-visible{ outline:2.5px solid var(--ink); outline-offset:2px }
#mp426 .mp426-r:focus-visible{ outline:2.5px solid var(--ink); outline-offset:-2.5px }
#mp426 .mp426-r:focus-visible::before, #mp426 .mp426-r:focus-visible + .mp426-r::before{ opacity:0 }
/* دکمهٔ پخش داخل کاور است (.cv overflow:hidden) ← حلقه دور خودِ دایره: سفید/جوهری/سفید، روی هر کاوری پیدا */
#mp426 .mp426-r .pl:focus-visible{ outline:0 }
#mp426 .mp426-r .pl:focus-visible::before{ box-shadow:0 0 0 2px #fff, 0 0 0 4.5px var(--ink), 0 0 0 6.5px #fff }
#sc426 .sc426-tool:focus-visible, #sc426 .sc426-share:focus-visible{ outline:2.5px solid #fff; outline-offset:3px }
@media (hover:hover){
  #mp426 .mp426-r:not(.sk):not(.on):hover{ background:#F7F5FA }
  #mp426 .mp426-r:not(.on):hover .go{ color:var(--ink) }
  #mp426 .mp426-g:not(.on):hover, #mp426 .mp426-ib:hover{ background:var(--fill2) }
  #mc426 .mc426-durs button:not(.on):not(:disabled):hover{ color:var(--ink); background:rgba(27,16,41,.05) }
  #mc426 .mc426-act button:hover, #ss426 .sh109-cta.ghost:hover{ background:var(--fill2) }
  #mc426 .mc426-act .mc426-rm:hover{ background:#FBDDE4 }
  #mp426 .mp426-retry:hover, #mc426 .mc426-done:hover, #ss426 .ss426-use:hover{ filter:brightness(1.06) saturate(1.06) }
}

/* ═══════════════ ۶) دسکتاپ ═══════════════ */
/* پشت قاب گوشی 357 پردهٔ تیره دارد ← پردهٔ روشنِ پُرتر تا صفحه سفیدِ یاسی بماند، نه خاکستری */
@media (min-width:600px){
  #mp426, #ss426.sh109{ background:rgba(246,244,250,.96) }
  #mp426 .mp426-p{ border-radius:28px; box-shadow:0 0 0 1px rgba(27,16,41,.05), 0 30px 70px -24px rgba(27,16,41,.35) }
  /* انتخاب بخش تمام‌صفحه روی کاغذ؛ پنجره به پهنای قاب گوشی (--fw) تا روی عکس بنشیند، دکمه‌ها دست‌کم ۳۴۰
     (گوشی افقی: قاب ۲۰۶ است ولی سربرگ و مدت‌ها نمی‌شکنند) */
  #mc426{ --fw:min(440px, calc((100vh - 24px) * 9 / 16)); --col:max(340px, var(--fw)) }
  #mc426 .mc426-hd, #mc426 .mc426-low{ box-sizing:border-box; width:var(--col); max-width:none; margin-left:auto; margin-right:auto }
  #mc426 .mc426-hd{ padding-top:22px }
  #mc426 .mc426-mid{ width:calc(var(--fw) - 32px); margin:2px auto 0 }
  #ss426 .sh109-p{ max-width:420px; border-radius:28px; margin-bottom:24px; box-shadow:0 0 0 1px rgba(27,16,41,.05), 0 30px 70px -24px rgba(27,16,41,.35) }
}

/* ═══════════════ ۷) حرکت کم ═══════════════ */
/* انیمیشن‌های بی‌پایان (برابرساز، اسکلت) را خود 357 در reduced-motion و html.lite366 می‌بندد؛ این‌جا فقط transition */
@media (prefers-reduced-motion:reduce){
  #mp426 *, #mp426 *::before, #mc426 *, #ss426 *, #sc426 .sc426-tool, #sc426 .sc426-share{ transition:none !important }
}

/* ═══════════════ ۸) صفحهٔ کوتاه و گوشی افقی (v428) ═══════════════ */
/* با preflight تیلویند (border-box) و Vazirmatn: برچسب‌ها بی scale ‏۵۶/۴۶/۱۴۷/۴۰px (کارت/شیشه/گرامافون/متن)،
   راهنما ۳۲px در ته پنجره (bottom:14) ← گرامافون با scale(1.14) ِ 357 روی گوشی‌های کوتاه روی نام آهنگ می‌افتاد یا از پنجره
   بیرون می‌زد و بخش بیرون‌زده زیر سربرگ/دکمه‌ها لمس نمی‌شد. پله‌ها از ارتفاع محتوای خودِ پنجره (container query؛
   = پنجره − ۲۴) تا ناچ و نوار مرورگر هم حساب شود: راهنما با فاصلهٔ ≥۶px، برچسب ≥۴px داخل لبه. */
@media (max-height:520px){
  #mc426 .mc426-hd{ padding-top:calc(6px + env(safe-area-inset-top)); padding-bottom:6px }
  #mc426 .mc426-low{ padding-top:8px; padding-bottom:calc(8px + env(safe-area-inset-bottom)) }
  #mc426 .mc426-durs{ margin-bottom:8px }
  #mc426 .mc426-wave{ height:56px; margin-bottom:8px }
  #mc426 .mc426-act{ padding-top:8px }
}
/* اندروید افقی با نوار نشانی (حدود ۲۸۰): کمی کوچک‌تر از ۴۴ تا پنجره و دکمهٔ آخر جا شوند */
@media (max-height:340px){
  #mc426 .mc426-hd{ padding-top:calc(4px + env(safe-area-inset-top)); padding-bottom:4px }
  #mc426 .mc426-low{ padding-top:4px; padding-bottom:calc(4px + env(safe-area-inset-bottom)) }
  #mc426 .mc426-durs{ margin-bottom:6px }
  #mc426 .mc426-durs button{ height:32px }
  #mc426 .mc426-wave{ height:44px; margin-bottom:6px }
  #mc426 .mc426-act{ padding-top:6px }
  #mc426 .mc426-act button{ height:40px }
}
#mc426 .mc426-mid{ container-type:size }
@container (max-height:248px){ #mc426 .stk426.ed.s2{ transform:scale(.8) } }
@container (max-height:200px){ #mc426 .stk426.ed.s2 ~ .mc426-tip{ display:none } }
@container (max-height:146px){ #mc426 .mc426-tip{ display:none } }
@container (max-height:102px){ #mc426 .stk426.ed.s2{ transform:scale(.6) } }
@container (max-height:72px){ #mc426 .stk426.ed.s2{ transform:scale(.42) } }
@container (max-height:48px){ #mc426 .stk426.ed{ transform:scale(.8) } #mc426 .stk426.ed.s2{ transform:scale(.3) } }
@container (max-height:30px){ #mc426 .stk426.ed{ transform:scale(.62) } #mc426 .stk426.ed.s2{ transform:scale(.24) } }
/* مرورگر بی container query (iOS 15): همان پله‌ها با ارتفاع صفحه (کمی زودتر، چون ناچ را نمی‌داند) */
@supports not (container-type:size){
  @media (max-height:680px){ #mc426 .stk426.ed.s2{ transform:scale(.8) } }
  @media (max-height:620px){ #mc426 .stk426.ed.s2 ~ .mc426-tip{ display:none } }
  @media (max-height:460px){ #mc426 .mc426-tip{ display:none } #mc426 .stk426.ed.s2{ transform:scale(.6) } }
  @media (min-width:600px) and (max-height:550px){ #mc426 .mc426-tip{ display:none } }
  @media (max-height:380px){ #mc426 .stk426.ed.s2{ transform:scale(.42) } }
  @media (max-height:350px){ #mc426 .stk426.ed{ transform:scale(.8) } #mc426 .stk426.ed.s2{ transform:scale(.3) } }
  @media (max-height:300px){ #mc426 .stk426.ed{ transform:scale(.62) } #mc426 .stk426.ed.s2{ transform:scale(.24) } }
}

/* ═══════════════ ۹) جست‌وجوی آهنگ: شیت نیمه‌صفحه (v429، فقط گوشی) ═══════════════ */
/* 356 کلاس .sh428 را زیر پهنای ۶۰۰ می‌گذارد و شیت را فقط با transform جابه‌جا می‌کند (نیمه ← تمام‌صفحه ← بستن)؛
   پشت آن به‌جای پردهٔ روشن، سایهٔ نیمه‌شفاف (.mp426-dim) تا خودِ عکس استوری بالای شیت دیده شود. */
#mp426 .mp426-dim{ display:none }
#mp426 .mp426-grab{ border:0; padding:0; cursor:default; -webkit-tap-highlight-color:transparent }
@media (max-width:599.98px){
  #mp426.sh428{ background:transparent; animation:none }
  #mp426.sh428.out{ opacity:1 }
  #mp426.sh428 .mp426-dim{ display:block; position:absolute; inset:0; background:rgba(17,10,28,.5); opacity:0 }
  #mp426.sh428 .mp426-p{
    height:calc(100% - 44px - env(safe-area-inset-top, 0px)); padding-top:0; animation:none; will-change:transform;
    box-shadow:0 0 0 1px rgba(27,16,41,.06), 0 -16px 40px -16px rgba(17,10,28,.5);
  }
  /* دستگیره: کل پهنا و ۲۸px برای انگشت؛ خودِ نوار ۴۰×۵ */
  #mp426.sh428 .mp426-grab{ position:relative; flex:0 0 auto; width:100%; height:28px; margin:0; background:none; border-radius:28px 28px 0 0; touch-action:none; cursor:pointer }
  #mp426.sh428 .mp426-grab::before{
    content:""; position:absolute; left:50%; top:10px; width:40px; height:5px; margin-left:-20px; border-radius:99px;
    background:#D5CFDF; transition:background-color .15s, transform .15s;
  }
  #mp426.sh428 .mp426-grab:active::before{ background:#B9B0C9; transform:scaleX(1.2) }
  #mp426.sh428 .mp426-grab:focus-visible{ outline:0 }
  #mp426.sh428 .mp426-grab:focus-visible::before{ box-shadow:0 0 0 2px #fff, 0 0 0 4.5px var(--ink) }
  #mp426.sh428 .mp426-hd{ touch-action:none }
  /* کش آمدن بالاتر از تمام‌صفحه: زیر شیت هم کاغذ است، نه عکس */
  #mp426.sh428 .mp426-p::after{ content:""; position:absolute; left:0; right:0; top:100%; height:50vh; background:var(--paper); pointer-events:none }
}