/* Стили, которые нужны только странице «Музыкальность в паре» */
.count8{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:.35rem;margin:2.4rem 0 .6rem;padding:0;list-style:none}
.count8 li{display:grid;place-items:center;aspect-ratio:1.25;border-radius:10px;border:1.5px solid var(--line);font-family:var(--display);font-weight:800;font-size:clamp(.7rem,1.6vw,1rem);letter-spacing:-.05em;color:var(--muted);text-transform:uppercase;transition:background .08s,color .08s,border-color .08s,transform .08s}
.count8 li.tap{font-size:clamp(.5rem,1.1vw,.72rem)}
.hero .count8 li{animation:tick calc(var(--beat)*8) steps(1,end) infinite;animation-delay:calc(var(--i)*var(--beat))}
@keyframes tick{0%{background:var(--lime);color:var(--deep);border-color:var(--lime);transform:translateY(-4px)}12.5%,100%{background:transparent}}
.count8 li.on{background:var(--lime);color:var(--deep);border-color:var(--lime);transform:translateY(-4px)}
.count-cap{font-size:.78rem;color:var(--muted);margin:0}
.lanes{position:relative;margin:2rem 0 1.6rem;display:grid;gap:.5rem}
.lane-label{font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:.4rem}
.lane{display:flex;gap:4px;height:3.1rem}
.lane span{display:grid;place-items:center;border-radius:8px;font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;min-width:0;overflow:hidden;white-space:nowrap;padding-inline:.3rem}
.lane.track span:nth-child(1){flex:10;background:#3e2a5e}
.lane.track span:nth-child(2){flex:18;background:#5b3a86}
.lane.track span:nth-child(3){flex:16;background:var(--pink);color:var(--deep)}
.lane.track span:nth-child(4){flex:12;background:var(--lime);color:var(--deep)}
.lane.track span:nth-child(5){flex:16;background:var(--pink);color:var(--deep)}
.lane.track span:nth-child(6){flex:8;background:#3e2a5e}
.lane.moves span{flex:1;background:#2b2233;color:#8f8195}
.playhead{position:absolute;top:0;bottom:0;left:0;width:2px;background:#fff;box-shadow:0 0 14px 2px rgba(255,255,255,.7);animation:sweep 9s linear infinite}
@keyframes sweep{from{left:0}to{left:100%}}
.eights{display:grid;gap:.4rem;margin:1.4rem 0 .8rem}
.eights div{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:.4rem}
.eights i{aspect-ratio:1.6;border-radius:8px;background:rgba(21,13,27,.14);transition:background .2s}
.eights.go i{animation:fillcell .5s forwards;animation-delay:calc((var(--r)*8 + var(--c))*70ms)}
@keyframes fillcell{to{background:var(--deep)}}
.example{border:2px dashed var(--deep);border-radius:18px;padding:1.1rem 1.3rem;margin:1.6rem 0 0;font-size:.95rem}
.example b{display:block;font-family:var(--display);font-weight:800;letter-spacing:-.04em;text-transform:uppercase;font-size:.95rem;margin-bottom:.4rem}
.note-box{background:var(--deep);color:var(--fg);border-radius:18px;padding:1.1rem 1.3rem;margin:1rem 0 0;font-size:.95rem}
.note-box b{color:var(--lime)}
.lab{background:radial-gradient(60% 50% at 20% 0,var(--g5) 0,transparent 70%),var(--ink)}
.mixer{background:rgba(255,246,240,.05);border:1px solid var(--line);border-radius:26px;padding:clamp(1rem,2.4vw,1.8rem)}
.mixer-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.play{display:inline-flex;align-items:center;gap:.8rem;border:0;border-radius:999px;background:var(--lime);color:var(--deep);padding:.9rem 1.5rem .9rem 1rem;font-family:var(--display);font-weight:800;font-size:.8rem;letter-spacing:-.03em;text-transform:uppercase;box-shadow:5px 5px 0 var(--pink);transition:transform .2s,box-shadow .2s}
.play:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--pink)}
.play .ic{display:grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:50%;background:var(--deep);color:var(--lime)}
.play svg{width:.9rem;height:.9rem}
.play .i-stop{display:none}
.play[aria-pressed="true"] .i-play{display:none}
.play[aria-pressed="true"] .i-stop{display:block}
.bpm{font-family:var(--display);font-weight:800;letter-spacing:-.05em;color:var(--muted);font-size:.8rem;text-transform:uppercase}
.bpm b{color:var(--fg);font-size:1.5rem}
.layers{display:grid;gap:.6rem;margin:1.2rem 0 0;padding:0;list-style:none}
.layer{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.2rem 1rem;align-items:center;text-align:left;background:rgba(255,246,240,.04);border:1.5px solid var(--line);border-radius:16px;padding:.8rem 1rem;transition:background .2s,border-color .2s}
.layer:hover{border-color:var(--lime)}
.layer[aria-pressed="true"]{background:rgba(var(--lime-rgb),.1);border-color:var(--lime)}
.l-name{font-family:var(--display);font-weight:800;font-size:.9rem;letter-spacing:-.04em;text-transform:uppercase}
.l-desc{grid-column:1;font-size:.82rem;color:var(--muted)}
.seq{grid-column:2;grid-row:1/3;display:grid;grid-template-columns:repeat(16,5px);gap:2px;align-items:end}
.seq i{height:14px;border-radius:2px;background:rgba(255,246,240,.12)}
.seq i.p{background:rgba(255,246,240,.4);height:20px}
.layer[aria-pressed="true"] .seq i.p{background:var(--lime)}
.seq i.hit{background:var(--pink)!important;transform:scaleY(1.4);transform-origin:bottom}
.tog{display:none}
.lab-photo.beat .frame{animation:pulse var(--beat) ease-out}
@keyframes pulse{0%{transform:scale(1.025)}100%{transform:scale(1)}}
.lab .photo-card .sticker{right:-2%;top:6%}
.words{display:grid;gap:0;margin:2rem 0 0;padding:0;list-style:none;border-top:1.5px solid var(--line)}
.words li{display:grid;grid-template-columns:minmax(0,1fr);gap:.4rem 2rem;align-items:center;padding-block:1.1rem;border-bottom:1.5px solid var(--line)}
.words .w{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(1.4rem,4.6vw,2.8rem);letter-spacing:-.07em;line-height:1.05;display:inline-block;white-space:nowrap}
.words p{margin:0;color:var(--muted);font-size:.95rem}
.w-emo{animation:emo 2.4s ease-in-out infinite}
@keyframes emo{0%,100%{color:var(--fg);transform:scale(1)}30%{color:var(--pink);transform:scale(1.04)}60%{color:var(--lime);transform:scale(1)}}
.w-mood{background:linear-gradient(90deg,#ff3479,#ffb23d,#d9ff57,#4de1ff,#a46bff,#ff3479);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:mood 6s linear infinite}
@keyframes mood{to{background-position:300% 0}}
.w-pause{animation:pausey 3.4s steps(1,end) infinite;clip-path:inset(0 0 0 0)}
@keyframes pausey{0%{clip-path:inset(0 100% 0 0)}8%{clip-path:inset(0 76% 0 0)}16%{clip-path:inset(0 52% 0 0)}17%,48%{clip-path:inset(0 52% 0 0)}49%{clip-path:inset(0 22% 0 0)}58%,88%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 0 0)}}
.w-slow{animation:slow 5s cubic-bezier(.1,.7,.2,1) infinite}
@keyframes slow{0%{letter-spacing:-.1em}70%,100%{letter-spacing:.14em}}
.w-contrast{animation:contrast 2.6s ease-in-out infinite}
@keyframes contrast{0%,40%{font-weight:200}60%,100%{font-weight:900}}
.inst{display:grid;gap:.35rem;margin:.4rem 0 0;padding:0;list-style:none}
.inst li{margin:0;padding:.55rem .8rem;border-radius:10px;background:rgba(255,246,240,.06)}
.inst b{color:var(--lime)}
.prog-note{margin-top:1.2rem}
.styles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:2.2rem 0 1rem}
.style{position:relative;overflow:hidden;border-radius:22px;padding:1.2rem 1.3rem 1.4rem;min-height:15rem;display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate}
.style b{font-family:var(--display);font-weight:800;font-size:clamp(1.1rem,2.6vw,1.7rem);letter-spacing:-.06em;text-transform:uppercase}
.style p{margin:.3rem 0 0;font-size:.9rem;opacity:.9}
.motif{position:absolute;inset:0 0 40% 0;z-index:-1;display:flex;align-items:center;justify-content:center;overflow:hidden}
.st1{background:linear-gradient(150deg,#b4417a,#2a1740)}
.st2{background:linear-gradient(150deg,#7b4fa8,#1d1840)}
.st3{background:linear-gradient(150deg,#3f63a8,#171a3a)}
.st4{background:linear-gradient(150deg,#5f7a3a,#1d2a1a)}
.motif svg{width:78%;height:auto;overflow:visible}
.m-arc path{fill:none;stroke:#fff6f0;stroke-width:3;stroke-linecap:round;stroke-dasharray:240;animation:draw 3.6s ease-in-out infinite}
.m-arc path:nth-child(2){stroke:var(--lime);animation-delay:.3s}
@keyframes draw{0%{stroke-dashoffset:240}50%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-240}}
.m-wave path{fill:none;stroke:#fff6f0;stroke-width:3;stroke-linecap:round;animation:wavex 3s linear infinite}
@keyframes wavex{to{transform:translateX(-80px)}}
.m-inf i{position:absolute;width:20px;height:20px;border-radius:50%;background:var(--lime);left:12%;animation:stopgo 3.6s cubic-bezier(.7,0,.2,1) infinite}
.m-inf::before{content:"";position:absolute;left:12%;right:12%;height:2px;background:rgba(255,246,240,.35)}
@keyframes stopgo{0%,10%{left:12%}35%,50%{left:46%}58%,64%{left:50%}80%,100%{left:78%}}
.m-dom{gap:.9rem}
.m-dom i{width:16px;height:16px;border-radius:50%;background:#fff6f0;opacity:.35;animation:foot calc(var(--beat)/2) steps(1,end) infinite}
.m-dom i:nth-child(even){animation-delay:calc(var(--beat)/4)}
@keyframes foot{0%{opacity:1;background:var(--lime)}50%{opacity:.35;background:#fff6f0}}
.zouk{display:inline-block;margin-top:.4rem;border:1.5px solid var(--line);border-radius:999px;padding:.55rem 1.1rem;font-size:.92rem}
.mambo .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.mambo-copy{container-type:inline-size;min-width:0}
.mt{display:block;font-family:var(--display);text-transform:uppercase;letter-spacing:-.07em;line-height:1;white-space:nowrap;margin:0}
.mt.a{font-weight:900;font-size:17cqw}
.mt.b{font-weight:900;font-size:12.6cqw;color:#fff6f0;margin-bottom:1.4rem}
.mlist{display:grid;gap:.6rem;margin:1.6rem 0;padding:0;list-style:none}
.mlist li{background:var(--deep);color:var(--fg);border-radius:14px;padding:.9rem 1.1rem;font-weight:700;border-left:6px solid var(--lime)}
.mirror{display:grid;gap:.4rem;margin-top:1.4rem}
.mirror div{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:.4rem}
.mirror i{aspect-ratio:1;border-radius:50%;background:rgba(21,13,27,.2);animation:foot2 calc(var(--beat)*8) steps(1,end) infinite}
.mirror .ra i{animation-delay:calc(var(--c)*var(--beat))}
.mirror .rb i{animation-delay:calc((7 - var(--c))*var(--beat))}
@keyframes foot2{0%{background:var(--deep)}12.5%,100%{background:rgba(21,13,27,.2)}}
.mirror span{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.duo{position:relative;min-height:clamp(24rem,60vw,38rem)}
.duo .photo-card{position:absolute;width:62%;max-width:none}
.duo .p1{left:0;top:0;transform:rotate(-4deg)}
.duo .p2{right:0;bottom:0;transform:rotate(4deg)}
.duo .frame{border:4px solid var(--deep)}
.tl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin:2.4rem 0;padding:0;list-style:none;position:relative}
.tl::before{content:"";position:absolute;left:0;right:0;top:.55rem;height:2px;background:var(--line)}
.tl li{position:relative;padding-top:2rem;font-size:.9rem;color:var(--muted)}
.tl li::before{content:"";position:absolute;left:0;top:0;width:1.15rem;height:1.15rem;border-radius:50%;background:var(--ink);border:3px solid var(--pink)}
.tl li:last-child::before{background:var(--lime);border-color:var(--lime)}
.tl b{display:block;color:var(--fg);font-family:var(--display);font-weight:800;letter-spacing:-.04em;text-transform:uppercase;font-size:.9rem;margin-bottom:.2rem}
.strip{margin-top:1.6rem;overflow:hidden}
.strip-track{display:flex;gap:1rem;width:max-content;will-change:transform}
.strip figure{margin:0;flex:none;width:clamp(150px,22vw,260px);aspect-ratio:2/3;border-radius:18px;overflow:hidden;background:var(--plum)}
.strip img{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
@media (max-width:900px){
  .tl{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:1.6rem}
  .tl::before{display:none}
  .words li{grid-template-columns:minmax(0,1fr)}
  .duo{min-height:34rem}
}
@media (max-width:560px){
  .styles{grid-template-columns:minmax(0,1fr)}
  .style{min-height:13rem}
  .layer{grid-template-columns:minmax(0,1fr)}
  .seq{grid-column:1;grid-row:auto;margin-top:.4rem}
}
@media (prefers-reduced-motion:reduce){
  .w-mood{animation:none;color:var(--lime);background:none;-webkit-text-fill-color:currentColor}
  .w-pause{clip-path:none}
  .strip{overflow-x:auto}
}