:root{
  --mal-900:#083c2d;--mal-700:#0a4a38;--mal-600:#0e6b4f;--mal-500:#128a63;--mal-400:#1fae7f;--mal-200:#bfe8d6;
  --gold:#b98d4f;--gold-2:#6b4e1f;--gold-3:#8a6a35;
  --cream:#f2ead8;--cream-2:#e6dcc4;--ink:#1c2a25;--ink-2:#41544c;--line:#d8c9ab;
  --ok:#2f7d4f;--warn:#8a6d24;--danger:#a83a32;--info:#2b6f8f;
  --shadow:0 10px 30px rgba(28,42,37,.14);--player-h:112px;
  --panel:radial-gradient(120% 95% at 50% 38%,#fffdf7 0%,#f6eed9 42%,#e6d5ac 76%,#cdb47c 100%);
  --frame:
    linear-gradient(rgba(8,60,45,.5),rgba(8,60,45,.5)) border-box,
    repeating-linear-gradient(115deg,rgba(185,141,79,0) 0 9px,rgba(185,141,79,.55) 9px 11px,rgba(185,141,79,0) 11px 24px) border-box,
    url('/assets/malachite.jpg') center/cover border-box,
    repeating-linear-gradient(115deg,#083c2d 0 5px,#0e6b4f 5px 10px,#128a63 10px 14px,#083c2d 14px 20px) border-box;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font:17px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:url('/assets/bg.jpg') center/cover fixed no-repeat;min-height:100vh;padding-bottom:calc(var(--player-h) + 24px)}
h1,h2,h3,.brand-t strong{font-family:Georgia,"Times New Roman",serif;letter-spacing:.2px}
h1{font-size:clamp(2.1rem,5vw,3.5rem);line-height:1.12;margin:.2em 0}
h2{font-size:clamp(1.45rem,2.8vw,2rem);margin:.2em 0}
a{color:var(--mal-600)}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.04;
  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='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Контур — малахит с золотом; внутренняя заливка — светлая радиальная */
.top,.stone,.row,.mood-card,.clip,.lyrics,.modal-card,.player,.icon-btn,.chip,.btn{
  border:3px solid transparent;color:var(--ink);
  background:var(--panel) padding-box,var(--frame);
  box-shadow:0 0 0 1px var(--gold),inset 0 0 0 1px rgba(185,141,79,.35),var(--shadow);
  border-radius:16px}
.stone{border-width:5px;border-radius:20px}
.top{border-width:4px;border-radius:0}
.player{border-width:4px 0 0 0;border-radius:0}
.row{border-width:3px;border-radius:14px}
.mood-card{border-width:3px;border-radius:16px}
.clip{border-width:3px;border-radius:16px;overflow:hidden}
.lyrics{border-width:3px;border-radius:18px}
.modal-card{border-width:4px;border-radius:18px}
.chip{border-width:2px;border-radius:999px}
.btn{border-width:2px;border-radius:12px}
.icon-btn{border-width:2px;border-radius:12px}
#q{border:2px solid transparent;border-radius:14px;background:linear-gradient(#fff,#fff) padding-box,var(--frame);
  box-shadow:0 0 0 1px var(--gold),inset 0 0 0 1px rgba(185,141,79,.35)}

/* Секции главной без подложки: контент прямо на фоне */
.sec.plain{background:none;border:none;box-shadow:none;padding:0;margin:38px 0}
.sec.plain h1,.sec.plain h2{color:var(--mal-700)}
.sec.plain .hint{color:var(--ink-2)}
.sec.plain .sec-h a{color:var(--mal-600)}
.contacts p{color:var(--ink)}

.stone h1,.stone h2,.stone h3{color:var(--mal-700)}
.stone a{color:var(--mal-600)}
.stone .lead,.stone p{color:var(--ink-2)}
.stone .hint{color:var(--ink-2)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--cream-2)}
::-webkit-scrollbar-thumb{background:var(--mal-600);border-radius:8px;border:2px solid var(--cream-2)}
::-webkit-scrollbar-thumb:hover{background:var(--gold-3)}
html{scrollbar-color:var(--mal-600) var(--cream-2);scrollbar-width:thin}
.top{position:sticky;top:0;z-index:40}
.top-in{display:flex;align-items:center;gap:18px;min-height:68px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand-logo{width:46px;height:46px;object-fit:contain}
.brand-t{display:flex;flex-direction:column;line-height:1.15}
.brand-t strong{font-size:1.1rem;color:var(--mal-700)}
.brand-t small{color:var(--ink-2);font-size:.8rem}
.nav{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
.nav a{padding:8px 12px;border-radius:12px;text-decoration:none;color:var(--ink-2);font-weight:600;font-size:.95rem}
.nav a:hover{background:var(--cream-2);color:var(--mal-700)}
.nav a.on{background:var(--mal-600);color:#fff}
.top-act{display:flex;gap:8px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:10px 18px;font-weight:700;font-size:1rem;cursor:pointer;text-decoration:none;transition:transform .15s}
.btn:active{transform:scale(.97)}
.btn-solid{background:linear-gradient(135deg,var(--mal-500),var(--mal-700)) padding-box,var(--frame);color:#fff}
.btn-ghost,.btn-cream{color:var(--mal-700)}
.btn-cream:hover{filter:brightness(1.04)}
.hero{display:grid;grid-template-columns:minmax(180px,340px) 1fr;gap:34px;align-items:center;padding:52px 0 30px}
.hero-art{background:transparent;border:none;box-shadow:none;padding:0}
.hero-art img{width:100%;height:auto;display:block;animation:hover 7s ease-in-out infinite alternate}
@keyframes hover{from{transform:translateY(-4px)}to{transform:translateY(6px)}}
.hero-t{padding:0;background:none;border:none;box-shadow:none}
.hero-t h1{color:var(--mal-700)}
.hero-t .lead{color:var(--ink);font-weight:700}
.kicker{color:var(--gold-2);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:.82rem;margin:0 0 6px}
.lead{font-size:1.22rem;line-height:1.7;max-width:62ch}
.hero-act{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.sec{padding:26px;margin:26px 0}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.sec-h a{font-weight:700}
.hint{font-size:.9rem}
.rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:8px 10px}
.row-link{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);min-width:0}
.stone .row-link,.stone .row-title{color:var(--ink)}
.stone .row-sub{color:var(--ink-2)}
.row-cov{width:48px;height:48px;border-radius:10px;object-fit:contain;flex:none;background:transparent}
.row-t{display:flex;flex-direction:column;min-width:0}
.row-title{font-weight:700;font-size:1.06rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-sub{color:var(--ink-2);font-size:.9rem}
.row-act{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.row-lyrics{grid-column:1/-1;background:#fff;border:1px dashed var(--mal-500);border-radius:12px;padding:16px;font-size:1.1rem;line-height:1.8;max-height:320px;overflow:auto;color:var(--ink)}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:42px;height:42px;padding:0 8px;color:var(--mal-700);cursor:pointer;transition:transform .15s,color .15s}
.icon-btn:hover{transform:scale(1.05);color:var(--mal-500)}
.icon-btn svg{width:20px;height:20px;fill:currentColor}
.icon-btn.sm{min-width:38px;height:38px}
.icon-btn.sm svg{width:18px;height:18px}
.icon-btn[aria-pressed="true"],.icon-btn.on{background:linear-gradient(var(--mal-600),var(--mal-600)) padding-box,var(--frame);color:#fff}
.icon-btn .cnt,.stat .cnt{font-size:.82rem;font-weight:700}
[data-dl],[data-cdl]{color:var(--gold-2)}
[data-dl]:hover,[data-cdl]:hover{color:var(--mal-700)}
.stat{display:inline-flex;align-items:center;gap:4px;color:var(--ink-2);font-size:.85rem}
.stat svg{width:19px;height:19px;fill:currentColor;stroke:currentColor;stroke-width:2}
.moods{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.mood-card{display:flex;flex-direction:column;gap:8px;padding:20px;text-decoration:none;transition:transform .18s}
.mood-card:hover{transform:translateY(-4px)}
.mood-card h3{margin:0;color:var(--mal-700)}
.mood-card p{margin:0;color:var(--ink-2);font-size:.95rem;flex:1}
.mood-n{font-weight:700;color:var(--gold-2);font-size:.9rem}
.searchbar{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
#q{min-height:52px;padding:0 18px;font-size:1.05rem;width:100%}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{min-height:40px;padding:8px 14px;color:var(--ink-2);font-weight:700;font-size:.9rem;cursor:pointer}
.chip.on{background:linear-gradient(var(--mal-600),var(--mal-600)) padding-box,var(--frame);color:#fff}
.count{color:var(--ink-2);font-weight:700}
.clips{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.clip video{width:100%;aspect-ratio:16/9;background:#000;display:block}
.clip-bar{display:flex;align-items:center;gap:10px;padding:10px 12px;flex-wrap:wrap}
.clip-bar strong{flex:1;min-width:120px;color:var(--ink)}
.song-h{display:grid;grid-template-columns:220px 1fr;gap:26px;align-items:center;padding:26px 0}
.song-cov{width:220px;height:220px;border-radius:22px;object-fit:contain;background:transparent;border:none;box-shadow:none}
.song-act{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.song-stats{display:flex;gap:10px;align-items:center;margin-top:12px}
.lyrics{padding:26px;max-width:760px}
.stanza{font-size:1.2rem;line-height:1.85;margin:0 0 1.4em}
.empty{color:var(--ink-2);font-style:italic}
.song-nav{display:flex;justify-content:space-between;gap:14px;padding:22px 0;flex-wrap:wrap}
.about .verse{font-size:1.15rem;line-height:1.9;color:var(--ink-2)}
.about h2{color:var(--mal-700)}
.sign{color:var(--gold-2);font-weight:700}
.contacts a{color:var(--mal-600)}
.player{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-template-columns:minmax(160px,260px) auto 1fr auto;gap:16px;align-items:center;padding:12px 20px calc(12px + env(safe-area-inset-bottom))}
.p-id{display:flex;align-items:center;gap:10px;min-width:0}
#p-cover{width:52px;height:52px;border-radius:12px;object-fit:contain;background:transparent;flex:none}
.p-meta{display:flex;flex-direction:column;min-width:0;line-height:1.25}
#p-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:1rem}
#p-artist{color:var(--ink-2);font-size:.82rem}
.p-ctl{display:flex;align-items:center;gap:8px}
.play-btn{width:56px;height:56px;border-radius:50%;border:2px solid var(--gold);background:linear-gradient(135deg,var(--mal-500),var(--mal-700));color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;box-shadow:var(--shadow)}
.play-btn svg{width:26px;height:26px;fill:currentColor}
.p-seek{display:flex;align-items:center;gap:10px;min-width:0;color:var(--ink-2);font-size:.85rem}
input[type="range"]{-webkit-appearance:none;appearance:none;height:6px;border-radius:6px;background:var(--cream-2);flex:1;min-width:60px;cursor:pointer}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--mal-600);border:3px solid #fff;box-shadow:0 0 0 1px var(--gold)}
input[type="range"]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--mal-600);border:3px solid #fff}
.p-extra{display:flex;align-items:center;gap:8px}
#p-vol{max-width:90px}
#modal{position:fixed;inset:0;z-index:70;background:rgba(20,30,26,.5);display:flex;align-items:center;justify-content:center;padding:20px}
#modal[hidden]{display:none}
.modal-card{position:relative;max-width:480px;width:100%;padding:26px}
.modal-card form{display:flex;flex-direction:column;gap:12px}
.modal-card label{display:flex;flex-direction:column;gap:6px;font-weight:600;color:var(--ink)}
.modal-card input,.modal-card textarea{border-radius:12px;border:2px solid var(--gold-3);padding:10px 12px;font:inherit;background:#fff;color:var(--ink)}
#modal-close{position:absolute;top:12px;right:12px}
#toast{position:fixed;left:50%;bottom:calc(var(--player-h) + 16px);transform:translate(-50%,20px);background:var(--mal-700);color:#fff;padding:10px 18px;border-radius:12px;font-weight:700;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:80;max-width:90vw;text-align:center}
#toast.show{opacity:1;transform:translate(-50%,0)}
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s,transform .5s}
.reveal.in{opacity:1;transform:none}
:focus-visible{outline:3px solid rgba(18,138,99,.5);outline-offset:2px}
@media (max-width:900px){.moods{grid-template-columns:repeat(2,1fr)}.clips{grid-template-columns:1fr}
  .player{grid-template-columns:1fr auto;grid-template-areas:"id ctl" "seek seek" "extra extra";gap:8px}
  .p-id{grid-area:id}.p-ctl{grid-area:ctl}.p-seek{grid-area:seek}.p-extra{grid-area:extra;justify-content:flex-end}
  body{padding-bottom:170px}}
@media (max-width:640px){.hero{grid-template-columns:1fr}.hero-art{max-width:240px;margin:0 auto}
  .song-h{grid-template-columns:1fr}.song-cov{width:100%;max-width:320px;height:auto;aspect-ratio:1}
  .moods{grid-template-columns:1fr}.nav{margin-left:0;width:100%;order:3}.top-act{margin-left:auto}
  #p-vol{display:none}.row{grid-template-columns:1fr}.row-act{justify-content:flex-start}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}