:root {
  --ink: #2d2440;
  --ink-soft: #4a3960;
  --ink-mute: #6b5a80;
  --paper: #fff8f0;
  --accent: #d96fa8;
  --accent-2: #6fb5d9;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
  font-family: 'Fraunces', serif;
  color: var(--ink);
}

body {
  background: #f5e8ff;
  position: relative;
  padding-bottom: 82px;
}

/* ==================== ГРАДИЕНТ-МЕШ ==================== */
.gradient-bg {
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
  background: linear-gradient(180deg, #e8f1ff 0%, #f5e6ff 50%, #fff0e8 100%);
}
.blob {
  position: absolute; border-radius: 50%;
  filter: blur(80px); opacity: 0.65; will-change: transform;
}
.blob-1 { width:60vw;height:60vw;background:radial-gradient(circle,#ffd6e8 0%,transparent 70%);top:-20vh;left:-10vw;animation:drift1 22s ease-in-out infinite; }
.blob-2 { width:55vw;height:55vw;background:radial-gradient(circle,#c9e8ff 0%,transparent 70%);top:10vh;right:-15vw;animation:drift2 28s ease-in-out infinite; }
.blob-3 { width:50vw;height:50vw;background:radial-gradient(circle,#fff4d6 0%,transparent 70%);bottom:-20vh;left:20vw;animation:drift3 25s ease-in-out infinite; }
.blob-4 { width:45vw;height:45vw;background:radial-gradient(circle,#e0d4ff 0%,transparent 70%);bottom:0;right:10vw;animation:drift4 30s ease-in-out infinite; }
@keyframes drift1 { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(15vw,10vh) scale(1.15)} 66%{transform:translate(-5vw,20vh) scale(0.9)} }
@keyframes drift2 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-20vw,25vh) scale(1.1)} }
@keyframes drift3 { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(-15vw,-10vh) scale(1.2)} 66%{transform:translate(10vw,-25vh) scale(0.95)} }
@keyframes drift4 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(15vw,-20vh) scale(1.15)} }

.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply; opacity: 0.6;
}

/* ==================== НАВИГАЦИЯ ==================== */
nav {
  position: fixed; top:0;left:0;right:0; z-index:100;
  padding: 16px 50px;
  display: flex; justify-content: center; align-items: center;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  background: rgba(255,255,255,0.68);
  border-bottom: 1px solid rgba(255,255,255,0.5);
  box-shadow: 0 2px 24px rgba(140,180,220,0.1);
}
.nav-links { display:flex; gap:4px; list-style:none; }
.nav-link {
  font-family:'DM Mono',monospace; font-size:0.7rem;
  text-transform:uppercase; letter-spacing:0.25em; color:var(--ink-soft);
  text-decoration:none; padding:10px 20px; border-radius:999px; transition:all 0.3s ease;
}
.nav-link:hover { color:var(--ink); background:rgba(255,255,255,0.5); }
.nav-link.active {
  background:rgba(255,255,255,0.7); color:var(--ink);
  box-shadow:0 4px 16px rgba(140,180,220,0.2),inset 0 1px 0 rgba(255,255,255,0.8);
}

/* ==================== МИНИ-ПЛЕЕР ==================== */
.mini-player {
  position:fixed;bottom:0;left:0;right:0;z-index:200;
  display:flex;align-items:center;gap:18px;padding:14px 36px;
  background:rgba(255,248,240,0.85);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-top:1px solid rgba(74,57,96,0.1);box-shadow:0 -12px 40px rgba(140,180,220,0.18);
}
.mini-play-btn { flex-shrink:0;width:48px;height:48px;border-radius:50%;border:none;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:white;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform 0.2s,box-shadow 0.3s;box-shadow:0 6px 18px rgba(217,111,168,0.35); }
.mini-play-btn:hover { transform:scale(1.06);box-shadow:0 10px 28px rgba(217,111,168,0.45); }
.mini-play-btn svg { width:18px;height:18px; }
.mini-info { flex-shrink:0; }
.mini-label { font-family:'DM Mono',monospace;font-size:0.55rem;text-transform:uppercase;letter-spacing:0.3em;color:var(--ink-mute);margin-bottom:2px; }
.mini-title { font-family:'Fraunces',serif;font-style:italic;font-weight:300;font-size:1.05rem;color:var(--ink);white-space:nowrap; }
.mini-viz { flex:1;max-width:100px;height:28px;display:flex;align-items:center;gap:3px; }
.viz-bar { flex:1;background:linear-gradient(180deg,var(--accent),var(--accent-2));border-radius:2px;height:3px;opacity:0.35; }
.mini-player.playing .viz-bar { opacity:0.8;animation:vizPulse 1.5s ease-in-out infinite; }
.mini-player.playing .viz-bar:nth-child(1){animation-delay:0s}
.mini-player.playing .viz-bar:nth-child(2){animation-delay:0.2s}
.mini-player.playing .viz-bar:nth-child(3){animation-delay:0.4s}
.mini-player.playing .viz-bar:nth-child(4){animation-delay:0.1s}
.mini-player.playing .viz-bar:nth-child(5){animation-delay:0.3s}
.mini-player.playing .viz-bar:nth-child(6){animation-delay:0.5s}
.mini-player.playing .viz-bar:nth-child(7){animation-delay:0.15s}
.mini-player.playing .viz-bar:nth-child(8){animation-delay:0.35s}
@keyframes vizPulse { 0%,100%{height:3px} 50%{height:22px} }

/* ==================== ОБЩЕЕ ==================== */
@keyframes fadeIn { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
@keyframes rise { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }

main { position:relative; z-index:2; min-height:100vh; }

.page-eyebrow {
  font-family:'DM Mono',monospace; font-size:0.7rem;
  text-transform:uppercase; letter-spacing:0.4em; color:var(--ink-mute); margin-bottom:16px;
}
.page-title {
  font-family:'Fraunces',serif; font-weight:200; font-style:italic;
  font-size:clamp(2.8rem,7vw,5rem); line-height:0.95;
  letter-spacing:-0.03em; color:var(--ink); margin-bottom:16px;
}

/* ==================== АДАПТИВ ==================== */
@media (max-width:720px) {
  body { padding-bottom:118px; }
  nav { padding:14px 16px; }
  .nav-link { padding:7px 10px;font-size:0.58rem;letter-spacing:0.18em; }
  .mini-player { padding:10px 16px 8px;gap:10px;flex-wrap:wrap; }
  .mini-info { flex:1;min-width:0; }
  .mini-viz { max-width:56px; }
}
@media (max-width:480px) {
  .nav-links { gap:0; }
}