:root{
  --abyss:#050310;
  --night:#0A0620;
  --temple:#120B33;
  --veil:#1B1148;
  --light:#FFF9EC;          /* чистый свет */
  --gold:#F0D48A;           /* звёздное золото */
  --gold-deep:#DDB964;
  --moon:#D9E4FF;           /* лунный опал */
  --violet:#8D6FE8;
  --lilac:#C6B3F4;
  --rose:#E4A8C8;
  --ink:#EFEBFA;
  --mist:#A69FCE;
  --dim:#6F6899;
  --line:rgba(198,179,244,.13);
  --line-2:rgba(198,179,244,.28);
  --gold-line:rgba(240,212,138,.34);
  --sans:'Manrope',system-ui,sans-serif;
  --disp:'Oranienbaum',Georgia,serif;
  --mono:'JetBrains Mono',monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--abyss);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}

/* ============ АТМОСФЕРА ============ */
.cosmos{position:fixed;inset:0;z-index:-3;
  background:
    radial-gradient(60% 42% at 50% 0%, rgba(255,249,236,.14), transparent 55%),
    radial-gradient(90% 70% at 50% 8%, rgba(141,111,232,.22), transparent 60%),
    radial-gradient(70% 60% at 12% 40%, rgba(228,168,200,.07), transparent 55%),
    radial-gradient(70% 60% at 88% 55%, rgba(141,111,232,.10), transparent 55%),
    linear-gradient(180deg,#0B0724 0%, #060312 55%, #04020C 100%);}
.rays{position:fixed;inset:-45%;z-index:-2;pointer-events:none;opacity:.5;mix-blend-mode:screen;
  background:conic-gradient(from 0deg at 50% 12%,
    transparent 0deg, rgba(255,249,236,.075) 3deg, transparent 8deg,
    transparent 40deg, rgba(240,212,138,.06) 44deg, transparent 50deg,
    transparent 88deg, rgba(255,249,236,.05) 92deg, transparent 98deg,
    transparent 130deg, rgba(240,212,138,.05) 134deg, transparent 140deg,
    transparent 218deg, rgba(255,249,236,.05) 222deg, transparent 228deg,
    transparent 268deg, rgba(240,212,138,.06) 272deg, transparent 278deg,
    transparent 318deg, rgba(255,249,236,.06) 322deg, transparent 328deg);
  animation:spin 200s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#stars{position:fixed;inset:0;z-index:-1;display:block}
.grain{position:fixed;inset:0;z-index:-1;opacity:.045;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ось света — нить, соединяющая небо и голос */
.axis{position:absolute;left:50%;top:0;bottom:0;width:1px;z-index:-1;transform:translateX(-.5px);
  background:linear-gradient(180deg,rgba(255,249,236,.5),rgba(240,212,138,.22) 12%,rgba(198,179,244,.1) 40%,rgba(198,179,244,.08) 75%,transparent);
  pointer-events:none}
@media(max-width:760px){.axis{opacity:.5}}
main{position:relative}

.wrap{max-width:1220px;margin:0 auto;padding:0 26px}
.eyebrow{font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);font-weight:600}
.mono{font-family:var(--mono)}

/* узел на оси */
.axis-node{display:flex;flex-direction:column;align-items:center;gap:10px;padding:52px 0 26px}
.axis-node .an-star{color:var(--light);font-size:15px;text-shadow:0 0 16px var(--light),0 0 34px rgba(240,212,138,.7);
  animation:breathe 7s ease-in-out infinite}
.axis-node .an-line{width:1px;height:34px;background:linear-gradient(180deg,transparent,var(--gold-line))}
@keyframes breathe{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.14)}}

/* ============ ШАПКА ============ */
header{position:sticky;top:0;z-index:60;backdrop-filter:blur(16px);
  background:linear-gradient(180deg,rgba(6,3,18,.86),rgba(6,3,18,.4));border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:20px;height:76px}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none;color:inherit}
.mark{width:40px;height:40px;flex:none}
.mark svg{width:100%;height:100%;filter:drop-shadow(0 0 10px rgba(255,249,236,.55))}
.brand b{font-family:var(--disp);font-weight:400;font-size:21px;letter-spacing:.06em;line-height:1.05;display:block}
.brand span{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--mist)}
.bar-sp{flex:1}
.nav-link{color:var(--mist);text-decoration:none;font-size:14px;font-weight:500;letter-spacing:.02em;transition:.2s}
.nav-link:hover{color:var(--light);text-shadow:0 0 14px rgba(255,249,236,.5)}
@media(max-width:920px){.nav-link{display:none}}
.icon-btn{width:42px;height:42px;border-radius:50%;border:1px solid var(--line-2);background:rgba(255,255,255,.02);
  color:var(--ink);cursor:pointer;display:grid;place-items:center;transition:.2s}
.icon-btn:hover{border-color:var(--gold);color:var(--gold);box-shadow:0 0 20px rgba(240,212,138,.22)}
.btn{font-family:var(--sans);font-weight:600;font-size:13.5px;letter-spacing:.04em;border-radius:999px;cursor:pointer;
  padding:12px 22px;border:1px solid transparent;transition:.22s;white-space:nowrap;text-decoration:none;display:inline-block}
.btn-light{background:linear-gradient(180deg,var(--light),#F3E3BB);color:#241703;
  box-shadow:0 0 0 1px rgba(255,249,236,.25),0 8px 30px rgba(240,212,138,.3)}
.btn-light:hover{transform:translateY(-1px);box-shadow:0 0 0 1px rgba(255,249,236,.4),0 12px 40px rgba(240,212,138,.45)}
.btn-ghost{background:transparent;border-color:var(--line-2);color:var(--ink)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}

/* поиск */
.search-wrap{position:relative}
.search-field{position:absolute;right:0;top:50%;transform:translateY(-50%) scaleX(.6);transform-origin:right;
  width:0;opacity:0;pointer-events:none;transition:.32s cubic-bezier(.2,.8,.2,1)}
.search-field.open{width:min(370px,58vw);opacity:1;pointer-events:auto;transform:translateY(-50%) scaleX(1)}
.search-field input{width:100%;height:44px;border-radius:999px;padding:0 46px 0 20px;
  background:rgba(8,5,22,.94);border:1px solid var(--gold);color:var(--ink);font-family:var(--sans);font-size:14px;outline:none;
  box-shadow:0 0 30px rgba(240,212,138,.2)}
.search-field input::placeholder{color:var(--dim)}
.live{position:absolute;top:52px;right:0;width:min(370px,58vw);background:rgba(12,8,30,.98);
  border:1px solid var(--line-2);border-radius:16px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.6);display:none}
.live.show{display:block}
.live a{display:flex;gap:12px;align-items:baseline;padding:12px 16px;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--line)}
.live a:last-child{border-bottom:0}
.live a:hover{background:rgba(141,111,232,.16)}
.live .lt{font-family:var(--disp);font-size:17px;letter-spacing:.02em}
.live .lp{font-size:12px;color:var(--mist);margin-left:auto}

/* ============ ГЕРОЙ — ПОРТАЛ СВЕТА ============ */
.hero{position:relative;padding:66px 0 10px;text-align:center}
.hero .eyebrow{display:inline-flex;align-items:center;gap:12px}
.hero .eyebrow::before,.hero .eyebrow::after{content:"";width:44px;height:1px;background:linear-gradient(90deg,transparent,var(--gold-line));display:inline-block}
.hero .eyebrow::after{background:linear-gradient(90deg,var(--gold-line),transparent)}
.hero h1{font-family:var(--disp);font-weight:400;font-size:clamp(2.7rem,7vw,5.6rem);line-height:1.02;letter-spacing:.015em;margin:26px auto 0;max-width:16ch}
.hero h1 .lum{color:var(--light);text-shadow:0 0 34px rgba(255,249,236,.65),0 0 90px rgba(240,212,138,.4)}
.hero .verse{font-family:var(--disp);font-size:clamp(1.05rem,2vw,1.4rem);color:var(--mist);letter-spacing:.03em;
  max-width:52ch;margin:20px auto 0;line-height:1.6}
.hero .verse i{color:var(--gold);font-style:normal}

/* мандала-созвездие */
.mandala-stage{position:relative;margin:14px auto 0;max-width:760px}
.mandala-stage svg{width:100%;height:auto;overflow:visible;display:block}
.m-ring{fill:none;stroke:rgba(198,179,244,.14)}
.m-ring.g{stroke:var(--gold-line);stroke-dasharray:1 7;stroke-linecap:round}
.m-petal{fill:none;stroke:rgba(198,179,244,.12)}
.m-tick{stroke:rgba(240,212,138,.35)}
.m-glow{animation:breathe 7s ease-in-out infinite;transform-origin:center;transform-box:fill-box}
.m-rot-slow{animation:spin 140s linear infinite;transform-origin:400px 300px}
.m-rot-rev{animation:spinRev 200s linear infinite;transform-origin:400px 300px}
@keyframes spinRev{to{transform:rotate(-360deg)}}
.c-line{stroke:rgba(240,212,138,.6);stroke-width:1.2;fill:none;filter:drop-shadow(0 0 5px rgba(240,212,138,.7))}
.c-node{cursor:pointer;outline:none}
.c-node .halo{fill:rgba(240,212,138,.1);transition:.3s}
.c-node .core{fill:var(--gold);filter:drop-shadow(0 0 9px rgba(240,212,138,1))}
.c-node:hover .halo,.c-node:focus-visible .halo{fill:rgba(255,249,236,.26)}
.c-node:hover .core{fill:var(--light)}
.c-node.source .core{fill:var(--light);
  filter:drop-shadow(0 0 14px rgba(255,249,236,1)) drop-shadow(0 0 40px rgba(240,212,138,.9)) drop-shadow(0 0 80px rgba(240,212,138,.5))}
.c-node.source .halo{fill:rgba(255,249,236,.12);animation:breathe 7s ease-in-out infinite;transform-origin:center;transform-box:fill-box}
.c-cross{stroke:rgba(255,249,236,.8);stroke-width:1}
.c-label{font-family:var(--disp);font-size:17px;fill:var(--ink);letter-spacing:.04em;transition:.25s}
.c-sub{font-family:var(--mono);font-size:9.5px;fill:var(--mist);letter-spacing:.2em;text-transform:uppercase}
.c-node .c-label,.c-node .c-sub{opacity:.85}
.c-node:hover .c-label{fill:var(--light)}
.src-title{font-family:var(--sans);font-weight:600;font-size:10.5px;letter-spacing:.32em;fill:var(--light);text-transform:uppercase;opacity:.9}

.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:8px}
.hero-foot{margin-top:22px;color:var(--dim);font-size:12.5px;letter-spacing:.06em}
.hero-foot b{color:var(--mist);font-weight:600}

/* ============ СЕКЦИИ ============ */
.sec{padding:8px 0 58px}
.sec-head{text-align:center;margin-bottom:34px}
.sec-head .eyebrow{display:inline-flex;align-items:center;gap:12px}
.sec-head .eyebrow::before,.sec-head .eyebrow::after{content:"✧";color:var(--gold);font-size:10px;opacity:.7}
.sec-head h2{font-family:var(--disp);font-weight:400;font-size:clamp(2rem,4.4vw,3.3rem);letter-spacing:.02em;margin-top:12px;line-height:1.05}
.sec-head .sub{color:var(--mist);font-size:14.5px;max-width:54ch;margin:12px auto 0}
.count{font-family:var(--mono);color:var(--dim);font-size:12.5px;letter-spacing:.08em;display:block;margin-top:10px}

/* ============ ПАНЕЛЬ ЛЕНТЫ ============ */
.toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:22px}
.tb-label{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);align-self:center}
.tb-sp{flex:1}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:999px;padding:4px;background:rgba(8,5,22,.55)}
.seg button{border:0;background:transparent;color:var(--mist);font-family:var(--sans);font-weight:600;font-size:12.5px;
  padding:8px 14px;border-radius:999px;cursor:pointer;transition:.18s;display:inline-flex;align-items:center;gap:7px;letter-spacing:.02em}
.seg button.on{background:linear-gradient(180deg,var(--light),#F0DEB2);color:#241703}
.seg button:hover:not(.on){color:var(--ink)}
.seg svg{width:14px;height:14px}
select.sort{appearance:none;font-family:var(--sans);font-weight:600;font-size:12.5px;color:var(--ink);letter-spacing:.02em;
  background:rgba(8,5,22,.6);border:1px solid var(--line-2);border-radius:999px;padding:10px 38px 10px 16px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23A69FCE' stroke-width='2'%3E%3Cpath d='M3 4l3 3 3-3'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center}
.filter-btn{display:inline-flex;align-items:center;gap:8px}
.filter-btn .badge{background:var(--gold);color:#241703;font-size:11px;font-weight:800;border-radius:999px;padding:1px 7px}

/* ============ ФИЛЬТР — «НАСТРОЙКА НЕБА» ============ */
.filters{border:1px solid var(--line-2);border-radius:22px;position:relative;
  background:linear-gradient(180deg,rgba(27,17,72,.5),rgba(10,6,28,.55));padding:28px;margin-bottom:26px;display:none}
.filters::before{content:"✦";position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  color:var(--gold);background:var(--abyss);padding:0 12px;font-size:13px;text-shadow:0 0 12px var(--gold)}
.filters.open{display:block;animation:fade .3s ease}
@keyframes fade{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:24px}
.fgroup h4{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:12px;font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-family:var(--sans);font-size:12.5px;color:var(--mist);border:1px solid var(--line-2);background:transparent;
  border-radius:999px;padding:7px 14px;cursor:pointer;transition:.18s;user-select:none;letter-spacing:.02em}
.chip:hover{color:var(--ink);border-color:var(--lilac)}
.chip.on{background:rgba(255,249,236,.1);border-color:var(--gold);color:var(--light);box-shadow:0 0 14px rgba(240,212,138,.2) inset}
.filters-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.link-btn{background:none;border:0;color:var(--mist);font-family:var(--sans);font-weight:600;font-size:13px;cursor:pointer;display:inline-flex;gap:7px;align-items:center;letter-spacing:.02em}
.link-btn:hover{color:var(--gold)}
.myfilters{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.myfilter-pill{font-size:12px;color:var(--lilac);border:1px dashed var(--line-2);border-radius:999px;padding:6px 14px;cursor:pointer;background:rgba(141,111,232,.08)}
.myfilter-pill:hover{border-style:solid;border-color:var(--violet);color:var(--light)}

/* ============ ЛЕНТА ============ */
.feed{display:grid;gap:20px}
.feed.vertical{grid-template-columns:repeat(auto-fill,minmax(228px,1fr))}
.feed.horizontal{grid-template-columns:1fr}
.feed.compact{grid-template-columns:1fr;gap:2px}

.card{position:relative;transition:.28s;opacity:0;transform:translateY(18px)}
.card.in{opacity:1;transform:none}

/* вертикальная карточка — арка-портал */
.feed.vertical .card{padding:10px 10px 16px;border:1px solid var(--line);border-radius:120px 120px 20px 20px;
  background:linear-gradient(180deg,rgba(24,15,60,.42),rgba(9,6,24,.5))}
.feed.vertical .card:hover{border-color:var(--gold-line);transform:translateY(-4px);
  box-shadow:0 20px 50px rgba(0,0,0,.4),0 0 34px rgba(240,212,138,.08)}
.cover{position:relative;aspect-ratio:4/4.6;overflow:hidden;border-radius:110px 110px 12px 12px;
  box-shadow:0 0 0 1px rgba(255,249,236,.09) inset}
.cover .neb{position:absolute;inset:0}
.cover .sig{position:absolute;inset:0;display:grid;place-items:center}
.cover .sig svg{width:74%;height:auto;opacity:.95}
.cover::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 55% at 50% 26%,transparent,rgba(4,2,12,.62))}
.cover .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.82);width:56px;height:56px;border-radius:50%;
  background:rgba(255,249,236,.96);color:#241703;border:0;cursor:pointer;display:grid;place-items:center;opacity:0;transition:.25s;z-index:3;
  box-shadow:0 0 0 1px rgba(255,255,255,.5),0 0 34px rgba(255,249,236,.55)}
.card:hover .cover .play{opacity:1;transform:translate(-50%,-50%) scale(1)}
.cover .play::before{content:"";position:absolute;inset:-9px;border-radius:50%;border:1px dashed rgba(240,212,138,.6);animation:spin 10s linear infinite}
.heart{position:absolute;top:14px;right:14px;z-index:4;width:36px;height:36px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(4,2,12,.5);backdrop-filter:blur(6px);color:#fff;display:grid;place-items:center;transition:.2s}
.feed.vertical .heart{top:auto;bottom:14px;right:14px}
.heart:hover{background:rgba(4,2,12,.78)}
.heart.on{color:var(--rose)}
.heart.on svg{fill:var(--rose)}

.card-body{padding:16px 10px 2px;text-align:center}
.card-title{font-family:var(--disp);font-weight:400;font-size:1.45rem;line-height:1.08;letter-spacing:.02em}
.card-perf{font-size:12px;color:var(--mist);margin-top:4px;letter-spacing:.05em}
.meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;justify-content:center}
.tag{font-size:10.5px;color:var(--mist);border:1px solid var(--line);border-radius:999px;padding:3px 10px;background:rgba(255,255,255,.02);letter-spacing:.03em}
.tag.age{color:var(--gold);border-color:var(--gold-line)}
.tag.theme{color:var(--lilac);border-color:rgba(198,179,244,.3)}
.card-foot{display:flex;align-items:center;gap:10px;margin-top:14px;justify-content:center}
.likes{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12px;color:var(--dim)}
.dots{width:34px;height:34px;border-radius:50%;border:1px solid var(--line-2);background:transparent;color:var(--mist);cursor:pointer;display:grid;place-items:center;transition:.2s}
.dots:hover{color:var(--gold);border-color:var(--gold)}

/* горизонтальная карточка */
.feed.horizontal .card{display:grid;grid-template-columns:170px 1fr;border:1px solid var(--line);border-radius:18px;overflow:hidden;
  background:linear-gradient(90deg,rgba(24,15,60,.42),rgba(9,6,24,.5))}
.feed.horizontal .card:hover{border-color:var(--gold-line);transform:translateY(-2px)}
.feed.horizontal .cover{aspect-ratio:auto;height:100%;min-height:160px;border-radius:0}
.feed.horizontal .card-body{padding:20px 24px;text-align:left;display:flex;flex-direction:column;justify-content:center}
.feed.horizontal .meta,.feed.horizontal .card-foot{justify-content:flex-start}
.feed.horizontal .card-title{font-size:1.7rem}
@media(max-width:600px){.feed.horizontal .card{grid-template-columns:110px 1fr}.feed.horizontal .cover{min-height:120px}}

/* компактная */
.feed.compact .card{display:grid;grid-template-columns:50px 1fr auto;align-items:center;gap:14px;
  border:1px solid transparent;border-bottom:1px solid var(--line);border-radius:0;padding:9px 10px;opacity:1;transform:none}
.feed.compact .card:hover{background:rgba(141,111,232,.07);border-bottom-color:var(--line-2)}
.feed.compact .cover{width:50px;height:50px;aspect-ratio:1;border-radius:50%;flex:none}
.feed.compact .cover .sig svg{width:60%}
.feed.compact .cover .play{width:32px;height:32px}
.feed.compact .cover .play::before{display:none}
.feed.compact .heart{display:none}
.feed.compact .card-body{padding:0;display:flex;align-items:baseline;gap:12px;text-align:left}
.feed.compact .card-title{font-size:1.15rem}
.feed.compact .card-perf{margin:0}
.feed.compact .meta{display:none}
.feed.compact .card-foot{margin:0}

/* ============ БЫСТРОЕ МЕНЮ ============ */
.qmenu{position:fixed;z-index:120;background:rgba(12,8,30,.98);border:1px solid var(--line-2);border-radius:14px;
  padding:6px;box-shadow:0 30px 70px rgba(0,0,0,.6);min-width:214px;display:none}
.qmenu.show{display:block;animation:fade .18s ease}
.qmenu button{width:100%;text-align:left;background:none;border:0;color:var(--ink);font-family:var(--sans);font-size:13.5px;
  padding:10px 12px;border-radius:9px;cursor:pointer;display:flex;gap:11px;align-items:center}
.qmenu button:hover{background:rgba(141,111,232,.2)}
.qmenu .sep{height:1px;background:var(--line);margin:5px 4px}
.qmenu svg{width:16px;height:16px;color:var(--mist)}

/* ============ ПОДБОРКИ — АРКИ-СОЗВЕЗДИЯ ============ */
.coll-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:20px}
.coll{position:relative;border-radius:130px 130px 16px 16px;overflow:hidden;aspect-ratio:4/5;border:1px solid var(--line);
  cursor:pointer;transition:.3s;padding:9px}
.coll:hover{transform:translateY(-5px);border-color:var(--gold-line);box-shadow:0 24px 50px rgba(0,0,0,.45),0 0 40px rgba(240,212,138,.08)}
.coll .inner{position:absolute;inset:9px;border-radius:122px 122px 10px 10px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,249,236,.1) inset}
.coll .cx{position:absolute;inset:0}
.coll .inner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 34%,rgba(4,2,12,.88))}
.coll .lines{position:absolute;inset:0;z-index:1;opacity:.75}
.coll .ci{position:absolute;left:16px;bottom:16px;right:16px;z-index:2;text-align:center}
.coll .ci h3{font-family:var(--disp);font-weight:400;font-size:1.5rem;line-height:1.08;letter-spacing:.02em}
.coll .ci p{font-family:var(--mono);font-size:10.5px;color:var(--gold);margin-top:5px;letter-spacing:.14em;text-transform:uppercase}

/* ============ КАБИНЕТ — СВОЯ КАРТА НЕБА ============ */
.myarea{position:relative;border:1px solid var(--line-2);border-radius:30px;padding:52px 46px;overflow:hidden;
  background:
    radial-gradient(70% 90% at 50% -20%, rgba(255,249,236,.10), transparent 55%),
    linear-gradient(160deg,rgba(141,111,232,.14),rgba(9,6,24,.55));
  display:grid;grid-template-columns:1.15fr 1fr;gap:44px;align-items:center;text-align:left}
@media(max-width:840px){.myarea{grid-template-columns:1fr;padding:34px 26px}}
.myarea h2{font-family:var(--disp);font-weight:400;font-size:clamp(1.9rem,3.6vw,2.8rem);line-height:1.08;margin:14px 0 16px;letter-spacing:.02em}
.myarea p{color:var(--mist);font-size:15px;max-width:46ch}
.feat-list{display:grid;gap:14px}
.feat{display:flex;gap:14px;align-items:flex-start;padding:15px 17px;border:1px solid var(--line);border-radius:16px;background:rgba(4,2,12,.4)}
.feat .fi{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;color:var(--gold);
  background:radial-gradient(circle,rgba(240,212,138,.2),rgba(240,212,138,.04));box-shadow:0 0 16px rgba(240,212,138,.12)}
.feat b{display:block;font-size:14.5px;font-weight:700}
.feat span{font-size:12.5px;color:var(--mist)}

/* ============ МОДАЛ ПЕСНИ ============ */
.overlay{position:fixed;inset:0;z-index:200;background:rgba(3,2,10,.76);backdrop-filter:blur(10px);display:none;
  align-items:flex-start;justify-content:center;padding:40px 20px;overflow-y:auto}
.overlay.show{display:flex;animation:fade .25s ease}
.sheet{width:min(940px,100%);border:1px solid var(--line-2);border-radius:28px;overflow:hidden;position:relative;
  background:linear-gradient(180deg,rgba(21,13,54,.98),rgba(8,5,22,.99));box-shadow:0 50px 120px rgba(0,0,0,.65);margin:auto}
.sheet-top{display:grid;grid-template-columns:280px 1fr}
@media(max-width:700px){.sheet-top{grid-template-columns:1fr}}
.sheet-cover{position:relative;overflow:hidden;min-height:280px}
.sheet-cover .sig{position:absolute;inset:0;display:grid;place-items:center}
.sheet-cover .sig svg{width:64%}
.sheet-info{padding:34px 36px}
.sheet-info .eyebrow{margin-bottom:12px}
.sheet-info h2{font-family:var(--disp);font-weight:400;font-size:2.7rem;line-height:1.04;letter-spacing:.02em}
.sheet-info .perf{color:var(--mist);margin-top:6px;font-size:14.5px;letter-spacing:.04em}
.dl-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.dl{display:inline-flex;flex-direction:column;align-items:center;gap:7px;padding:15px 10px;min-width:86px;border-radius:16px;
  border:1px solid var(--line-2);background:rgba(255,255,255,.02);color:var(--ink);cursor:pointer;transition:.2s;font-size:11.5px;font-weight:600;letter-spacing:.04em}
.dl:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px);box-shadow:0 10px 28px rgba(240,212,138,.16)}
.dl svg{width:22px;height:22px}
.sheet-meta{padding:26px 36px;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:20px}
.mrow h5{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-bottom:8px}
.mrow .mtags{display:flex;flex-wrap:wrap;gap:6px}
.sheet-social{padding:24px 36px 36px;border-top:1px solid var(--line)}
.social-bar{display:flex;gap:14px;align-items:center;margin-bottom:18px;flex-wrap:wrap}
.like-big{display:inline-flex;gap:9px;align-items:center;border:1px solid var(--line-2);border-radius:999px;padding:10px 18px;
  background:transparent;color:var(--ink);cursor:pointer;font-family:var(--sans);font-weight:600;font-size:14px;transition:.2s}
.like-big:hover{border-color:var(--rose);color:var(--rose)}
.like-big.on{background:rgba(228,168,200,.14);border-color:var(--rose);color:var(--rose)}
.like-big.on svg{fill:var(--rose)}
.cbox{display:flex;gap:12px;margin-bottom:16px}
.cbox .av{width:38px;height:38px;border-radius:50%;flex:none;background:radial-gradient(circle at 35% 30%,var(--light),var(--violet));display:grid;place-items:center;font-weight:700;color:#241703}
.cbox textarea{flex:1;background:rgba(4,2,12,.5);border:1px solid var(--line-2);border-radius:14px;color:var(--ink);
  font-family:var(--sans);font-size:14px;padding:12px 14px;resize:vertical;min-height:44px;outline:none}
.cbox textarea:focus{border-color:var(--violet)}
.comment{display:flex;gap:12px;padding:14px 0;border-top:1px solid var(--line)}
.comment .av{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:700;color:#241703;background:radial-gradient(circle at 35% 30%,var(--gold),var(--rose))}
.comment b{font-size:13.5px}
.comment .ct{font-size:12px;color:var(--dim);margin-left:8px;font-weight:400}
.comment p{font-size:14px;color:var(--mist);margin-top:3px}
.auth-lock{font-size:13px;color:var(--dim);padding:14px 16px;border:1px dashed var(--line-2);border-radius:12px;text-align:center}
.auth-lock button{background:none;border:0;color:var(--gold);font-weight:700;cursor:pointer;font-family:var(--sans);font-size:13px}
.modal-close{position:absolute;top:16px;right:16px;z-index:5}

/* ============ ФУТЕР ============ */
footer{border-top:1px solid var(--line);margin-top:30px;padding:64px 0 46px;position:relative;text-align:center}
.manifest{font-family:var(--disp);font-size:clamp(1.3rem,2.6vw,1.9rem);line-height:1.4;color:var(--ink);max-width:34ch;margin:0 auto;letter-spacing:.02em}
.manifest .lum{color:var(--light);text-shadow:0 0 26px rgba(255,249,236,.55)}
.foot-links{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;margin-top:32px}
.foot-links a{color:var(--mist);text-decoration:none;font-size:13.5px;letter-spacing:.03em;transition:.2s}
.foot-links a:hover{color:var(--gold)}
.foot-b{margin-top:36px;padding-top:24px;border-top:1px solid var(--line);color:var(--dim);font-size:12px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;text-align:left}

/* ============ ТОСТ ============ */
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(30px);z-index:300;
  background:rgba(16,10,40,.98);border:1px solid var(--gold);border-radius:14px;padding:14px 22px;color:var(--ink);
  font-size:14px;font-weight:600;box-shadow:0 20px 50px rgba(0,0,0,.55),0 0 30px rgba(240,212,138,.15);opacity:0;pointer-events:none;transition:.3s;display:flex;gap:10px;align-items:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast .tstar{color:var(--light);text-shadow:0 0 10px var(--light)}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.card{opacity:1;transform:none}}