:root{
  --ink:#0B0716; --ink-raised:#150E26; --text:#F5EEFA; --muted:#A497BF;
  --pink:#FF3D8B; --cyan:#3CF0FF; --neon-white:#FFE3F0; --silver:#9FC4FF;
  --paper:#F2ECE1; --paper-ink:#1C1430; --paper-muted:#6B6080; --hairline:#F5EEFA1F;
  --glow-pink:0 0 6px var(--pink),0 0 20px var(--pink),0 0 48px #FF3D8B88;
  --glow-silver:0 0 6px #BFD8FF,0 0 22px #9FC4FF99,0 0 52px #9FC4FF55;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body,a,button,video{cursor:url(baton_cursor.png) 2 2,auto}
body{margin:0;background:var(--ink);color:var(--text);font:400 15px/24px 'Unbounded','Segoe UI',system-ui,sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:var(--text)}a:hover{color:var(--pink)}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
img,video{display:block;max-width:100%}
.script{font-family:'Marck Script',cursive;font-weight:400}
.caps{font-size:12px;line-height:18px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.muted{color:var(--muted)}
#trail{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:50}

/* шапка */
.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding:18px 24px}
.logo{text-decoration:none;font-size:32px;line-height:1;color:var(--neon-white);text-shadow:0 0 6px var(--pink),0 0 18px #FF3D8B99}
.logo:hover{color:var(--neon-white)}
.rec{display:flex;align-items:center;gap:10px;font-size:12px;line-height:16px;letter-spacing:.08em;font-variant-numeric:tabular-nums;color:var(--cyan)}
.rec i{display:block;width:8px;height:8px;border-radius:999px;background:var(--pink);box-shadow:0 0 10px var(--pink)}
.nav{display:flex;flex-wrap:wrap;gap:8px 28px}
.nav a{text-decoration:none}

/* имя с видео в буквах */
.name{margin:0;position:relative;overflow:hidden;background:var(--ink)}
.name video{position:absolute;top:2px;left:2px;width:calc(100% - 4px);height:calc(100% - 4px);object-fit:cover}
.name svg{position:relative;display:block;width:100%;height:auto}
.name text{font-family:'Sofia Sans Extra Condensed','Arial Narrow',sans-serif;font-weight:900}
.lead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 48px;padding:28px 24px 0}
.lead .script{margin:0;font-size:clamp(44px,5.6vw,88px);line-height:1.05;color:var(--neon-white);text-shadow:var(--glow-pink)}
.lead p:last-child{margin:0;max-width:400px;color:var(--muted)}

.full{display:block;width:100%;aspect-ratio:16/9;max-height:860px;object-fit:cover;background:var(--ink-raised)}

/* работы */
.works-head{display:flex;justify-content:space-between;gap:24px;padding:0 24px 16px;color:var(--muted);border-bottom:1px solid var(--hairline)}
.works{display:flex;flex-direction:column;gap:4px;padding-top:4px}
.work{position:relative;display:block;text-decoration:none;color:var(--text);background:var(--ink-raised)}
.work:hover{color:var(--text)}
.work-cap{position:absolute;left:0;right:0;bottom:0;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 48px;padding:180px 24px 28px;background:linear-gradient(to top,#0B0716F0 0%,#0B071600 100%)}
.artist{display:block;font-size:clamp(18px,2vw,28px);line-height:1;font-weight:800;letter-spacing:.06em}
.song{display:block;font-size:clamp(64px,9vw,140px);line-height:1}
.song.pink{color:var(--neon-white);text-shadow:var(--glow-pink)}
.song.silver{color:#F2F6FF;text-shadow:var(--glow-silver)}
.work-meta{display:flex;flex-direction:column;align-items:flex-end;gap:8px;font-size:11px;line-height:16px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;text-align:right}
.work-meta .go{color:var(--pink)}
.work:hover .go{text-shadow:0 0 10px var(--pink)}

/* сотрудничество */
.coop{position:relative;padding:140px 24px 120px;overflow:hidden;background:radial-gradient(60% 50% at 50% 60%,#FF3D8B1F 0%,#0B071600 70%),radial-gradient(40% 40% at 85% 20%,#3CF0FF14 0%,#0B071600 70%)}
.coop h2{margin:0}
.coop h2 svg{display:block;width:100%;height:auto;overflow:visible}
.coop h2 text{font-family:'Climate Crisis','Arial Black',sans-serif;fill:none;stroke:var(--pink);stroke-width:1.4;filter:drop-shadow(0 0 4px var(--pink)) drop-shadow(0 0 12px #FF3D8B99)}
.sheet{position:relative;max-width:1000px;margin:72px auto 0;padding:clamp(24px,4vw,56px) clamp(20px,4vw,64px) clamp(28px,4vw,56px);background:linear-gradient(180deg,#F6F0E6 0%,#EFE7DA 100%);color:var(--paper-ink);transform:rotate(-1.2deg);box-shadow:0 40px 90px #000000B3,0 0 140px #FF3D8B40}
.sheet-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 24px;padding-bottom:24px;border-bottom:1px solid #1C143026;font-size:13px;line-height:18px;font-weight:600;letter-spacing:.06em}
.sheet-head .who{font-size:11px;line-height:16px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-muted)}
.music{font-family:'Noto Music',serif}
.staff-row{position:relative;display:block;padding:24px 0 12px;text-decoration:none;color:var(--paper-ink)}
.staff-row:first-of-type{padding-top:36px}
.staff-row:hover{color:var(--paper-ink)}
.staff-label{display:block;padding-left:64px;font-size:11px;line-height:16px;font-weight:600;letter-spacing:.14em;color:var(--paper-muted)}
.staff{position:relative;display:block;height:72px}
.staff::before{content:"";position:absolute;left:0;right:0;top:16px;height:41px;background:repeating-linear-gradient(to bottom,#1C143066 0,#1C143066 1px,transparent 1px,transparent 10px)}
.clef{position:absolute;left:0;top:-6px;font-size:66px;line-height:1;transition:color .18s}
.handle{position:absolute;left:64px;right:32%;top:6px;font-size:clamp(30px,4vw,52px);line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.handle.small{font-size:clamp(22px,3.2vw,44px)}
.note{position:absolute;font-size:34px;line-height:1;transition:transform .18s,color .18s,text-shadow .18s}
.note.on,.staff-row:hover .note{color:var(--pink);text-shadow:0 0 10px var(--pink);transform:scale(1.25)}
.staff-row:hover .clef{color:var(--pink)}
.staff-row:hover .staff{animation:tgString .14s linear infinite}
@keyframes tgString{0%{transform:translateY(0)}25%{transform:translateY(-1.5px)}75%{transform:translateY(1.5px)}100%{transform:translateY(0)}}

.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding:22px 24px 32px;border-top:1px solid var(--hairline);font-size:11px;line-height:16px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.foot a{text-decoration:none;color:var(--muted)}

/* страница работы */
.case-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 48px;padding:48px 24px 32px}
.case-head h1{margin:0;display:flex;flex-direction:column;gap:10px;font-weight:400}
.case-head .song{font-size:clamp(84px,13vw,200px);line-height:.95}
.case-meta{display:flex;flex-direction:column;align-items:flex-end;gap:8px;font-size:11px;line-height:16px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:right}
.case-meta .rec{font-size:11px}
.player{display:block;width:100%;aspect-ratio:16/9;background:var(--ink-raised)}
.lyric{margin-top:4px;padding:36px 24px 30px;background:var(--ink-raised)}
.lyric-line{margin:0;min-height:2.3em;display:flex;flex-wrap:wrap;align-content:flex-start;gap:0 .3em;font-size:clamp(40px,5.6vw,84px);line-height:1.15}
.lyric-line span{color:#4A3F63;transition:color .12s,text-shadow .12s}
.lyric-line span.lit{color:var(--neon-white);text-shadow:0 0 6px var(--accent-soft),0 0 18px var(--accent-soft2)}
.lyric-line span.now{color:#fff;text-shadow:0 0 8px var(--accent),0 0 24px var(--accent),0 0 56px var(--accent)}
.lyric-cap{margin:0;padding-top:20px;font-size:11px;line-height:16px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.stills{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:96px 0 0}
.stills img{width:100%;aspect-ratio:16/9;object-fit:cover}
.vertical{display:flex;flex-wrap:wrap;align-items:flex-end;gap:48px;padding:96px 24px 0}
.vertical video{flex:0 1 360px;min-width:0;aspect-ratio:9/16;background:var(--ink-raised)}
.next{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 48px;margin-top:120px;padding:40px 24px 56px;border-top:1px solid var(--hairline);text-decoration:none;color:var(--text)}
.next:hover{color:var(--text)}
.next .go{font-size:11px;line-height:16px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--pink)}

@media (max-width:600px){
  .note{display:none}
  .handle{right:0}
  .stills{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .staff-row:hover .staff{animation:none}
}