@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Syne:wght@600;700;800&display=swap');

/* ============================================================ токены / сброс */
:root{
  --bg:#0a0a0c;
  --ink:#f3efe6;
  --accent:#ff5a2e;
  --accent2:#ffd23f;
  --accent-live:#ff5a2e;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --disp:'Syne','Trebuchet MS',sans-serif;
  --edge:clamp(14px,3.4vw,54px);
  --dock:clamp(58px,7vh,74px);
  --line:color-mix(in srgb, var(--ink) 14%, transparent);
}

*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;overflow:hidden;background:var(--bg);}
body{
  color:var(--ink);
  font-family:var(--mono);
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
::selection{background:var(--accent);color:#0a0a0c;}
::-webkit-scrollbar{width:0;height:0;}
*{scrollbar-width:none;}

/* ============================================================ рамка / вензель */
.frame{position:fixed;inset:var(--edge);border:1px solid color-mix(in srgb,var(--ink) 16%,transparent);z-index:40;pointer-events:none;}
.frame i{position:absolute;width:11px;height:11px;border:2px solid var(--accent-live);transition:border-color .5s ease;}
.frame i:nth-child(1){top:-1px;left:-1px;border-right:0;border-bottom:0;}
.frame i:nth-child(2){top:-1px;right:-1px;border-left:0;border-bottom:0;}
.frame i:nth-child(3){bottom:-1px;left:-1px;border-right:0;border-top:0;}
.frame i:nth-child(4){bottom:-1px;right:-1px;border-left:0;border-top:0;}

.wm{position:fixed;left:calc(var(--edge) + 12px);top:50%;transform:translateY(-50%);z-index:41;display:flex;align-items:center;gap:14px;writing-mode:vertical-rl;pointer-events:none;transition:opacity .5s ease;}
body.at-intro .wm{opacity:0;}
.wm__name{font-family:var(--disp);font-weight:800;font-size:12px;letter-spacing:.42em;text-transform:uppercase;color:color-mix(in srgb,var(--ink) 62%,transparent);}
.wm__range{font-size:9px;letter-spacing:.3em;color:var(--accent-live);transition:color .5s ease;}
.wm__prog{width:2px;height:34vh;background:color-mix(in srgb,var(--ink) 12%,transparent);position:relative;}
.wm__prog i{position:absolute;top:0;left:0;right:0;height:0;background:var(--accent-live);transition:height .25s linear,background .5s ease;}

/* ============================================================ лента / слайд */
.strip{
  display:flex;
  height:100vh;height:100svh;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  outline:none;
}
.panel{
  position:relative;
  flex:0 0 100vw;
  width:100vw;height:100vh;height:100svh;
  scroll-snap-align:start;
  overflow:hidden;
  color:var(--ink);
}

/* фон-мотив */
.panel__bg{position:absolute;inset:0;z-index:0;pointer-events:none;will-change:transform;}
.panel__bg::before{
  content:"";position:absolute;top:-32%;right:-16%;
  width:min(92vh,900px);aspect-ratio:1;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);
  box-shadow:inset 0 0 140px color-mix(in srgb,var(--accent) 12%,transparent);
}
.panel__bg::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 1px 1px, color-mix(in srgb,var(--ink) 15%,transparent) 1px, transparent 1.7px) 0 0/30px 30px,
    radial-gradient(130% 90% at 82% 2%, color-mix(in srgb,var(--accent) 20%,transparent) 0%, transparent 55%),
    radial-gradient(120% 90% at 50% 118%, rgba(0,0,0,.4) 0%, transparent 55%);
  -webkit-mask:linear-gradient(#000, #000 62%, transparent 92%);
          mask:linear-gradient(#000, #000 62%, transparent 92%);
  opacity:.55;
}

/* подсветка фона цветами обложки при наведении на трек.
   @property делает сами цвета анимируемыми — переход между двумя
   релизами идёт плавной интерполяцией, а не скачком. */
@property --alb1{syntax:'<color>';inherits:true;initial-value:rgba(0,0,0,0);}
@property --alb2{syntax:'<color>';inherits:true;initial-value:rgba(0,0,0,0);}

.panel{
  --alb1:rgba(0,0,0,0);
  --alb2:rgba(0,0,0,0);
  transition:--alb1 .75s cubic-bezier(.4,0,.2,1),--alb2 .75s cubic-bezier(.4,0,.2,1);
}
.panel__wash{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  opacity:0;transition:opacity .7s cubic-bezier(.4,0,.2,1);
  background:
    radial-gradient(75% 95% at 10% 15%, var(--alb1) 0%, transparent 66%),
    radial-gradient(85% 105% at 94% 90%, var(--alb2) 0%, transparent 62%),
    radial-gradient(140% 130% at 55% 45%, var(--alb1) 0%, transparent 72%);
  mix-blend-mode:screen;
}
.panel.is-washed .panel__wash{opacity:.68;}
.panel__bg::after{transition:opacity .7s cubic-bezier(.4,0,.2,1);}
.panel.is-washed .panel__bg::after{opacity:.3;}
.panel__bg::before{transition:border-color .7s cubic-bezier(.4,0,.2,1);}
.panel.is-washed .panel__bg::before{border-color:color-mix(in srgb,var(--alb2) 45%,transparent);}

/* сетка контента */
.panel__grid{
  position:relative;z-index:2;height:100%;
  padding:calc(var(--edge) + 30px) calc(var(--edge) + 26px) calc(var(--dock) + var(--edge) + 14px) calc(var(--edge) + 74px);
  display:grid;
  grid-template-columns:minmax(280px,430px) 1fr;
  grid-template-rows:auto 1fr;
  column-gap:clamp(28px,6vw,96px);
  row-gap:clamp(14px,3vh,30px);
  align-content:center;
}
.panel__head{grid-column:1 / -1;display:flex;justify-content:space-between;align-items:baseline;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:color-mix(in srgb,var(--ink) 55%,transparent);border-bottom:1px solid var(--line);padding-bottom:10px;}
.panel__idx i{color:var(--accent);padding:0 4px;}
.panel__range{color:var(--accent);}

.panel__id{align-self:center;}
.panel__content{align-self:center;min-height:0;max-height:100%;overflow:hidden auto;}

/* большой номер — только обводка */
.panel__num{
  font-family:var(--disp);font-weight:800;
  font-size:clamp(58px,10vw,140px);line-height:.8;letter-spacing:-.02em;
  white-space:nowrap;max-width:100%;
  color:transparent;
  -webkit-text-stroke:2px var(--accent);
  paint-order:stroke fill;
  text-shadow:0 0 34px color-mix(in srgb,var(--accent) 22%,transparent);
}
@supports not (-webkit-text-stroke:1px red){
  .panel__num{color:var(--accent);}
}

.panel__title{font-family:var(--disp);font-weight:700;font-size:clamp(19px,2.5vw,30px);letter-spacing:.01em;margin:clamp(12px,2.4vh,22px) 0 0;}
.panel__lead{font-size:clamp(12px,1.15vw,14px);line-height:1.75;color:color-mix(in srgb,var(--ink) 74%,transparent);max-width:44ch;margin:14px 0 0;}

/* мета */
.meta{display:flex;flex-wrap:wrap;gap:clamp(12px,2vw,26px);margin:clamp(16px,3vh,26px) 0 0;}
.meta div{display:flex;flex-direction:column;gap:5px;}
.meta dt{font-size:8px;letter-spacing:.2em;text-transform:uppercase;color:color-mix(in srgb,var(--ink) 45%,transparent);}
.meta dd{font-size:11px;line-height:1.4;color:color-mix(in srgb,var(--ink) 88%,transparent);max-width:22ch;}

/* жанр-чипы */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(16px,3vh,26px);}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  font-size:10px;letter-spacing:.14em;
  padding:9px 14px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--ink) 30%,transparent);
  color:color-mix(in srgb,var(--ink) 82%,transparent);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),background .3s ease,color .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.chip i{font-style:normal;opacity:.5;transition:opacity .3s ease;}
.chip:hover,.chip:focus-visible{
  outline:none;
  transform:translateY(-3px);
  background:var(--accent);
  border-color:var(--accent);
  color:#0a0a0c;
  box-shadow:0 10px 30px color-mix(in srgb,var(--accent) 45%,transparent);
}
.chip:hover i,.chip:focus-visible i{opacity:1;}

/* записи */
.panel__content > * + *{margin-top:clamp(20px,4vh,40px);}
.records__h,.timeline__h{
  display:flex;align-items:center;gap:12px;
  font-size:9px;letter-spacing:.24em;text-transform:uppercase;
  color:color-mix(in srgb,var(--ink) 52%,transparent);
  margin-bottom:6px;
}
.records__h::after,.timeline__h::after{content:"";flex:1;height:1px;background:var(--line);}
.rec{
  display:grid;
  grid-template-columns:auto 46px 1fr auto;
  align-items:start;gap:16px;
  padding:14px 8px;
  border-top:1px solid var(--line);
  transition:background .3s ease,padding .3s ease;
}
.records .rec:last-of-type{border-bottom:1px solid var(--line);}
.rec__i{font-family:var(--disp);font-weight:700;font-size:13px;color:color-mix(in srgb,var(--ink) 30%,transparent);padding-top:2px;}
.rec__y{font-size:11px;color:var(--accent);padding-top:3px;}
.rec__body{min-width:0;}
.rec__a{display:block;font-family:var(--disp);font-weight:700;font-size:clamp(15px,1.5vw,18px);letter-spacing:.01em;}
.rec__t{display:block;font-size:12px;color:color-mix(in srgb,var(--ink) 78%,transparent);margin-top:2px;}
.rec__n{display:block;font-size:10.5px;line-height:1.6;color:color-mix(in srgb,var(--ink) 55%,transparent);margin-top:6px;max-width:52ch;}
.rec__sp{
  align-self:center;white-space:nowrap;
  font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:#1DB954;border:1px solid currentColor;border-radius:999px;
  padding:5px 11px;display:inline-flex;align-items:center;gap:5px;
  transition:background .25s ease,color .25s ease;
}
.rec__sp i{font-style:normal;}
.rec:hover{background:color-mix(in srgb,var(--accent) 9%,transparent);padding-left:16px;}
.rec:hover .rec__sp{background:#1DB954;color:#0a0a0c;}

/* хронология */
.timeline ul{list-style:none;border-left:1px solid color-mix(in srgb,var(--ink) 26%,transparent);padding-left:2px;max-width:52ch;}
.timeline li{position:relative;padding:0 0 13px 18px;}
.timeline li:last-child{padding-bottom:0;}
.timeline li::before{content:"";position:absolute;left:-4px;top:4px;width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent);}
.timeline li span{font-size:11px;font-weight:700;letter-spacing:.04em;}
.timeline li p{font-size:10.5px;line-height:1.6;color:color-mix(in srgb,var(--ink) 66%,transparent);margin-top:3px;}

/* ============================================================ титульный слайд */
.panel--intro .hero{
  position:relative;z-index:2;height:100%;
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(300px,.78fr);
  align-items:center;column-gap:clamp(34px,6vw,110px);
  padding:calc(var(--edge) + 26px) calc(var(--edge) + 26px) calc(var(--dock) + var(--edge) + 18px) calc(var(--edge) + 74px);
}
.hero__left{min-width:0;}

.hero__bg{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(58vw 58vw at 6% 4%, color-mix(in srgb,var(--accent) 24%,transparent) 0%, transparent 58%),
    radial-gradient(46vw 46vw at 96% 96%, color-mix(in srgb,var(--accent2) 15%,transparent) 0%, transparent 58%),
    radial-gradient(circle at 1px 1px, color-mix(in srgb,var(--ink) 12%,transparent) 1px, transparent 1.7px) 0 0/34px 34px;
}

/* вращающаяся пластинка за содержанием */
.hero__disc{
  position:absolute;z-index:0;pointer-events:none;
  right:-12vw;top:50%;width:min(88vh,820px);aspect-ratio:1;
  transform:translateY(-50%);
  -webkit-mask:radial-gradient(circle,#000 34%,transparent 70%);
          mask:radial-gradient(circle,#000 34%,transparent 70%);
  opacity:.55;
}
.hero__disc i{
  position:absolute;inset:0;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);
}
.hero__disc i:nth-child(1){
  background:repeating-radial-gradient(circle at 50% 50%,
    transparent 0 9px, color-mix(in srgb,var(--accent) 13%,transparent) 9px 10px);
  animation:spin 90s linear infinite;
}
.hero__disc i:nth-child(2){inset:22%;border-color:color-mix(in srgb,var(--accent2) 26%,transparent);animation:spin 60s linear infinite reverse;}
.hero__disc i:nth-child(3){inset:42%;border-style:dashed;border-color:color-mix(in srgb,var(--ink) 16%,transparent);animation:spin 40s linear infinite;}

/* — левая колонка — */
.hero__kicker{display:flex;align-items:center;gap:11px;font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);}
.hero__kicker b{font-weight:400;opacity:.45;}
.hero__pulse{
  width:7px;height:7px;border-radius:50%;background:var(--accent);flex:0 0 auto;
  box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 70%,transparent);
  animation:pulseDot 2.4s ease-out infinite;
}
@keyframes pulseDot{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent);}
  70%{box-shadow:0 0 0 12px transparent;}
  100%{box-shadow:0 0 0 0 transparent;}
}

.hero__title{
  font-family:var(--disp);font-weight:800;
  line-height:.8;letter-spacing:-.05em;
  margin:clamp(14px,3vh,30px) 0 0;
  display:flex;flex-direction:column;
}
.hero__word{font-size:clamp(58px,10.5vw,178px);display:block;}
.hero__word--a{color:var(--ink);}
.hero__word--b{
  position:relative;margin-left:.09em;
  color:transparent;-webkit-text-stroke:2.4px var(--accent);
}
.hero__word--b::before{
  content:attr(data-t);position:absolute;inset:0;z-index:-1;
  color:transparent;-webkit-text-stroke:2.4px color-mix(in srgb,var(--accent2) 40%,transparent);
  transform:translate(.045em,.035em);
}
@supports not (-webkit-text-stroke:1px red){
  .hero__word--b{color:var(--accent);}
  .hero__word--b::before{display:none;}
}

.hero__lead{
  font-size:clamp(12px,1.2vw,14.5px);line-height:1.85;
  color:color-mix(in srgb,var(--ink) 72%,transparent);
  max-width:46ch;margin:clamp(16px,3.4vh,30px) 0 0;
}

.hero__stats{
  display:flex;flex-wrap:wrap;
  margin-top:clamp(18px,3.6vh,32px);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.hero__stats div{
  display:flex;align-items:baseline;gap:10px;
  padding:14px clamp(16px,2.4vw,30px) 14px 0;
}
.hero__stats div + div{padding-left:clamp(16px,2.4vw,30px);border-left:1px solid var(--line);}
.hero__stats b{font-family:var(--disp);font-weight:800;font-size:clamp(22px,2.6vw,34px);line-height:1;color:var(--accent2);}
.hero__stats span{font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:color-mix(in srgb,var(--ink) 50%,transparent);}

.hero__cta{display:flex;align-items:center;flex-wrap:wrap;gap:clamp(14px,2vw,26px);margin-top:clamp(18px,3.6vh,34px);}
.hero__go{
  display:inline-flex;align-items:center;gap:12px;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:#0a0a0c;background:linear-gradient(96deg,var(--accent),var(--accent2));
  padding:15px 24px;border-radius:999px;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease;
}
.hero__go i{font-style:normal;transition:transform .3s cubic-bezier(.2,.8,.2,1);}
.hero__go:hover{transform:translateY(-3px);box-shadow:0 16px 40px color-mix(in srgb,var(--accent) 40%,transparent);}
.hero__go:hover i{transform:translateX(4px);}
.hero__keys{display:flex;align-items:center;gap:7px;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,var(--ink) 38%,transparent);}
.hero__keys kbd{
  font:inherit;letter-spacing:0;padding:4px 8px;border-radius:5px;
  border:1px solid color-mix(in srgb,var(--ink) 20%,transparent);
  color:color-mix(in srgb,var(--ink) 62%,transparent);
}

/* — содержание — */
.hero__index{
  position:relative;min-width:0;align-self:center;
  max-height:100%;overflow-y:auto;
  padding-right:4px;
}
.hero__index-h{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:9px;letter-spacing:.24em;text-transform:uppercase;
  color:color-mix(in srgb,var(--ink) 44%,transparent);
  padding-bottom:10px;border-bottom:1px solid var(--line);
}
.idx{
  position:relative;width:100%;
  display:grid;grid-template-columns:26px max-content minmax(0,1fr) 1fr 9px;
  align-items:center;gap:14px;
  padding:11px 10px 11px 4px;
  border-bottom:1px solid var(--line);
  text-align:left;
  transition:padding .3s cubic-bezier(.2,.8,.2,1),background .3s ease;
}
.idx__n{font-size:9px;color:color-mix(in srgb,var(--ink) 28%,transparent);transition:color .3s ease;}
.idx__y{font-family:var(--disp);font-weight:800;font-size:15px;letter-spacing:-.01em;color:color-mix(in srgb,var(--ink) 88%,transparent);transition:color .3s ease;}
.idx__t{font-size:11px;color:color-mix(in srgb,var(--ink) 52%,transparent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .3s ease;}
.idx__rule{height:1px;background:color-mix(in srgb,var(--ink) 12%,transparent);transform:scaleX(.35);transform-origin:right;transition:transform .4s cubic-bezier(.2,.8,.2,1),background .3s ease;}
.idx__dot{width:7px;height:7px;border-radius:50%;background:color-mix(in srgb,var(--ink) 20%,transparent);transition:background .3s ease,box-shadow .3s ease,transform .3s ease;}
.idx:hover,.idx:focus-visible{
  outline:none;
  padding-left:12px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--a) 12%,transparent),transparent 70%);
}
.idx:hover .idx__n,.idx:focus-visible .idx__n{color:var(--a);}
.idx:hover .idx__y,.idx:focus-visible .idx__y{color:var(--a);}
.idx:hover .idx__t,.idx:focus-visible .idx__t{color:color-mix(in srgb,var(--ink) 82%,transparent);}
.idx:hover .idx__rule,.idx:focus-visible .idx__rule{transform:scaleX(1);background:linear-gradient(90deg,transparent,var(--a));}
.idx:hover .idx__dot,.idx:focus-visible .idx__dot{background:var(--a);box-shadow:0 0 12px var(--a);transform:scale(1.25);}

/* ============================================================ док / скраббер */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:42;
  height:var(--dock);
  display:flex;align-items:center;gap:clamp(10px,2vw,24px);
  padding:0 calc(var(--edge) + 8px);
  background:color-mix(in srgb,#0a0a0c 82%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid color-mix(in srgb,var(--ink) 16%,transparent);
}
.dock__arrow{flex:0 0 auto;width:34px;height:34px;border-radius:50%;border:1px solid color-mix(in srgb,var(--ink) 22%,transparent);display:flex;align-items:center;justify-content:center;font-size:13px;transition:background .25s ease,color .25s ease,border-color .25s ease;}
.dock__arrow:hover{background:var(--ink);color:#0a0a0c;border-color:var(--ink);}
.dock__scrub{flex:1;position:relative;height:34px;display:flex;align-items:center;}
.dock__scrub::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:color-mix(in srgb,var(--ink) 16%,transparent);}
.dock__fill{position:absolute;left:0;top:50%;height:2px;width:0;background:var(--accent-live);transition:width .28s cubic-bezier(.2,.8,.2,1),background .5s ease;transform:translateY(-1px);}
.dock__ticks{position:relative;flex:1;display:flex;justify-content:space-between;}
.dock__tick{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;padding:6px 2px;}
.dock__tick i{width:6px;height:6px;border-radius:50%;background:color-mix(in srgb,var(--ink) 32%,transparent);transition:transform .25s ease,background .25s ease,box-shadow .25s ease;}
.dock__tick span{position:absolute;top:-18px;font-size:8.5px;letter-spacing:.12em;color:color-mix(in srgb,var(--ink) 40%,transparent);opacity:0;transition:opacity .2s ease,color .2s ease;white-space:nowrap;}
.dock__tick:hover i{transform:scale(1.5);background:var(--a);}
.dock__tick:hover span{opacity:1;color:color-mix(in srgb,var(--ink) 80%,transparent);}
.dock__tick.is-on i{background:var(--a);transform:scale(1.7);box-shadow:0 0 12px var(--a);}
.dock__tick.is-on span{opacity:1;color:var(--a);font-weight:700;}
.dock__count{flex:0 0 auto;font-size:10px;letter-spacing:.18em;color:color-mix(in srgb,var(--ink) 55%,transparent);min-width:52px;text-align:right;}
.dock__count i{font-style:normal;padding:0 4px;opacity:.5;}
.dock__count span{color:var(--ink);}

/* ============================================================ карточка жанра */
body.is-modal{overflow:hidden;}
.gcard[hidden]{display:none;}
.gcard{
  position:fixed;inset:0;z-index:120;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(14px,3vw,48px);
  --paper:#141117;
}
.gcard__scrim{
  position:absolute;inset:0;
  background:radial-gradient(120% 120% at 50% 50%, rgba(6,5,8,.62) 0%, rgba(3,3,5,.9) 100%);
  backdrop-filter:blur(9px) saturate(.7);-webkit-backdrop-filter:blur(9px) saturate(.7);
  animation:fade .4s ease;
}

/* — сама карточка — */
.gcard__card{
  position:relative;
  width:min(940px,100%);min-width:0;flex:0 1 auto;
  min-height:min(440px,86vh);max-height:min(640px,92vh);
  display:grid;
  grid-template-columns:66px 1fr;
  grid-template-rows:auto 1fr auto;
  grid-template-areas:"rail head" "rail body" "rail foot";
  overflow:hidden;
  border-radius:26px;
  color:var(--ink);
  background:
    linear-gradient(152deg,
      color-mix(in srgb,var(--accent) 22%,transparent) 0%,
      transparent 38%),
    linear-gradient(320deg,
      color-mix(in srgb,var(--accent2) 16%,transparent) 0%,
      transparent 42%),
    var(--paper);
  box-shadow:
    0 60px 160px rgba(0,0,0,.72),
    0 0 0 1px color-mix(in srgb,var(--accent) 34%,transparent) inset,
    0 0 120px color-mix(in srgb,var(--accent) 14%,transparent);
  animation:cardIn .5s cubic-bezier(.16,.9,.24,1) both;
}
.gcard__card > *{min-width:0;}
.gcard__body > *{min-width:0;}
@keyframes cardIn{
  from{opacity:0;transform:translateY(26px) scale(.965);}
  to{opacity:1;transform:none;}
}

/* призрачное имя жанра фоном */
.gcard__ghost{
  position:absolute;right:-4%;bottom:-14%;z-index:0;
  font-family:var(--disp);font-weight:800;
  font-size:clamp(110px,17vw,210px);line-height:.8;letter-spacing:-.05em;
  white-space:nowrap;pointer-events:none;
  color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--accent) 30%,transparent);
  opacity:.3;
  -webkit-mask:linear-gradient(292deg,#000 0%,rgba(0,0,0,.35) 46%,transparent 74%);
          mask:linear-gradient(292deg,#000 0%,rgba(0,0,0,.35) 46%,transparent 74%);
  animation:ghostIn 1s cubic-bezier(.16,.9,.24,1) both .12s;
}
@keyframes ghostIn{from{opacity:0;transform:translate(52px,18px);}to{opacity:.3;transform:none;}}

/* дуги пластинки */
.gcard__grooves{
  position:absolute;top:-42%;right:-14%;z-index:0;
  width:min(70%,460px);aspect-ratio:1;border-radius:50%;
  pointer-events:none;opacity:.5;
  background:repeating-radial-gradient(circle at 50% 50%,
    transparent 0 13px,
    color-mix(in srgb,var(--accent) 16%,transparent) 13px 14px);
  -webkit-mask:radial-gradient(circle at 50% 50%,#000 30%,transparent 72%);
          mask:radial-gradient(circle at 50% 50%,#000 30%,transparent 72%);
}

/* — вертикальный корешок — */
.gcard__rail{
  grid-area:rail;position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;
  gap:18px;padding:28px 0 24px;
  border-right:1px solid color-mix(in srgb,var(--ink) 12%,transparent);
  background:color-mix(in srgb,var(--accent) 8%,transparent);
}
.gcard__rail-era{
  writing-mode:vertical-rl;
  font-size:10px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--accent);white-space:nowrap;
  max-height:60%;overflow:hidden;
}
.gcard__rail-line{flex:1;min-height:20px;width:1px;background:linear-gradient(var(--accent),transparent);}
.gcard__rail-label{
  writing-mode:vertical-rl;
  font-family:var(--disp);font-weight:800;font-size:9px;letter-spacing:.5em;
  text-transform:uppercase;color:color-mix(in srgb,var(--ink) 26%,transparent);
}

/* — шапка — */
.gcard__head{
  grid-area:head;position:relative;z-index:2;
  padding:clamp(30px,4vw,46px) clamp(26px,4vw,52px) 0;
}
.gcard__title{
  font-family:var(--disp);font-weight:800;
  font-size:clamp(34px,5.6vw,68px);line-height:.9;letter-spacing:-.025em;
  color:transparent;-webkit-text-stroke:1.8px var(--accent);
  overflow-wrap:anywhere;
}
@supports not (-webkit-text-stroke:1px red){.gcard__title{color:var(--accent);}}
.gcard__ctx{
  margin-top:16px;padding-bottom:18px;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:color-mix(in srgb,var(--ink) 58%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--ink) 12%,transparent);
}

/* — тело — */
.gcard__body{
  grid-area:body;position:relative;z-index:2;
  padding:clamp(20px,3vw,30px) clamp(26px,4vw,52px) 0;
  overflow-y:auto;
  display:grid;grid-template-columns:1.35fr .95fr;gap:clamp(24px,4vw,54px);
  align-content:start;
}
.gcard__text{
  font-size:clamp(13px,1.15vw,15px);line-height:1.85;
  color:color-mix(in srgb,var(--ink) 88%,transparent);
  overflow-wrap:break-word;
}
.gcard__text::first-line{color:var(--ink);}
.gcard__who-h{
  font-size:9px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);margin-bottom:14px;
}
.gcard__names{list-style:none;display:flex;flex-wrap:wrap;gap:7px;}
.gcard__names li{
  font-family:var(--disp);font-weight:700;font-size:12.5px;letter-spacing:.01em;
  padding:7px 13px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--ink) 22%,transparent);
  background:color-mix(in srgb,var(--ink) 5%,transparent);
  color:color-mix(in srgb,var(--ink) 92%,transparent);
  transition:border-color .25s ease,color .25s ease,transform .25s ease;
}
.gcard__names li:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px);}

/* — подвал — */
.gcard__foot{
  grid-area:foot;position:relative;z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px clamp(26px,4vw,52px) 22px;
  border-top:1px solid color-mix(in srgb,var(--ink) 10%,transparent);
}
.gcard__mark{font-family:var(--disp);font-weight:800;font-size:9px;letter-spacing:.44em;text-transform:uppercase;color:color-mix(in srgb,var(--ink) 24%,transparent);}
.gcard__hint{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:color-mix(in srgb,var(--ink) 34%,transparent);display:flex;align-items:center;gap:7px;}
.gcard__hint kbd{
  font:inherit;letter-spacing:.1em;
  padding:3px 7px;border-radius:5px;
  border:1px solid color-mix(in srgb,var(--ink) 22%,transparent);
  color:color-mix(in srgb,var(--ink) 60%,transparent);
}

/* — крестик — */
.gcard__x{
  position:absolute;top:18px;right:18px;z-index:4;
  width:40px;height:40px;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--ink) 20%,transparent);
  display:grid;place-items:center;
  transition:background .25s ease,border-color .25s ease,transform .35s cubic-bezier(.2,.8,.2,1);
}
.gcard__x span{position:absolute;width:13px;height:1.5px;background:var(--ink);transition:background .25s ease;}
.gcard__x span:first-child{transform:rotate(45deg);}
.gcard__x span:last-child{transform:rotate(-45deg);}
.gcard__x:hover{background:var(--accent);border-color:var(--accent);transform:rotate(90deg);}
.gcard__x:hover span{background:var(--paper);}
.gcard__x:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

@media (max-width:820px){
  .gcard__card{grid-template-columns:1fr;grid-template-areas:"head" "body" "foot";max-height:94vh;}
  .gcard__rail{display:none;}
  .gcard__body{grid-template-columns:1fr;gap:26px;}
  .gcard__head{padding-top:clamp(46px,8vw,60px);}
  .gcard__ghost{font-size:clamp(96px,30vw,180px);bottom:-8%;opacity:.3;}
}
@media (max-width:520px){
  .gcard{padding:0;}
  .gcard__card{width:100%;max-height:100vh;height:100%;border-radius:0;}
  .gcard__hint{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .gcard__card,.gcard__ghost{animation:fade .25s ease both;}
}

/* ============================================================ движение */
.panel__grid > *,.panel__num{transition:opacity .55s ease,transform .65s cubic-bezier(.2,.8,.2,1);}
.panel:not(.is-active) .panel__head{opacity:0;transform:translateY(-10px);}
.panel:not(.is-active) .panel__id{opacity:0;transform:translateY(20px);}
.panel:not(.is-active) .panel__content{opacity:0;transform:translateY(28px);}
.panel:not(.is-active) .panel__num{opacity:0;transform:translateY(22px) scale(.95);}
.panel.is-active .panel__id{transition-delay:.07s;}
.panel.is-active .panel__content{transition-delay:.15s;}
.panel.is-active .panel__num{transition-delay:.12s;}
.panel--intro .hero > *{transition:opacity .6s ease,transform .7s cubic-bezier(.2,.8,.2,1);}
.panel--intro:not(.is-active) .hero > *{opacity:0;transform:translateY(22px);}

@keyframes fade{from{opacity:0;}to{opacity:1;}}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.97);}to{opacity:1;transform:none;}}
@keyframes spin{to{transform:rotate(360deg);}}

/* ============================================================ памяти Долли Партон */
/* единственный светлый слайд за сто лет — тишина как приём */
.panel--mem{color:var(--ink);}

.mem__bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;will-change:transform;
  color:color-mix(in srgb,var(--ink) 16%,transparent);
  background:
    radial-gradient(circle at 1px 1px, color-mix(in srgb,var(--ink) 7%,transparent) 1px, transparent 1.7px) 0 0/32px 32px,
    radial-gradient(120% 90% at 82% 6%, color-mix(in srgb,var(--accent) 16%,transparent) 0%, transparent 55%),
    radial-gradient(120% 100% at 6% 100%, color-mix(in srgb,var(--accent2) 8%,transparent) 0%, transparent 55%);
}
.mem__moth{
  position:absolute;right:-9vw;top:50%;transform:translateY(-50%);
  width:min(78vh,700px);height:auto;
  opacity:.5;
  animation:memMoth 1.6s ease .2s both;
}
@keyframes memMoth{from{opacity:0;transform:translateY(-50%) scale(.97) rotate(-2deg);}to{opacity:.5;transform:translateY(-50%) scale(1) rotate(0);}}

.mem__grid{
  position:relative;z-index:2;height:100%;
  padding:calc(var(--edge) + 24px) calc(var(--edge) + 26px) calc(var(--dock) + var(--edge) + 24px) calc(var(--edge) + 74px);
  display:grid;
  grid-template-columns:minmax(270px,360px) 1fr;
  grid-auto-rows:min-content;
  column-gap:clamp(24px,4vw,56px);row-gap:clamp(12px,2vh,20px);
  align-content:safe center;
}
.mem__head{
  grid-column:1 / -1;display:flex;justify-content:space-between;align-items:baseline;
  font-size:10px;letter-spacing:.3em;text-transform:uppercase;
  color:color-mix(in srgb,var(--ink) 50%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--ink) 16%,transparent);padding-bottom:10px;
}
.mem__head span:last-child{color:var(--accent);}

.mem__id{align-self:start;}
.mem__content{
  align-self:start;
  display:grid;grid-template-columns:1.12fr 1fr;
  column-gap:clamp(22px,3.4vw,50px);align-content:start;align-items:start;
}

.mem__dates{
  font-family:var(--disp);font-weight:700;
  font-size:clamp(28px,3.4vw,50px);line-height:.9;letter-spacing:.02em;
  color:var(--accent);text-shadow:none;
  display:flex;align-items:baseline;gap:.24em;white-space:nowrap;
}
.mem__dates i{font-style:normal;font-weight:400;font-size:.5em;opacity:.55;}

.mem__name{
  font-family:var(--disp);font-weight:800;
  font-size:clamp(30px,3.6vw,46px);line-height:1;letter-spacing:-.02em;
  color:var(--ink);margin:clamp(12px,2vh,18px) 0 0;
}
.mem__lead{
  font-size:clamp(12px,1.1vw,13.5px);line-height:1.7;
  color:color-mix(in srgb,var(--ink) 78%,transparent);
  max-width:46ch;margin:clamp(10px,1.8vh,16px) 0 0;
}
.mem__meta{display:flex;flex-wrap:wrap;gap:clamp(12px,2vw,26px);margin:clamp(12px,2.2vh,18px) 0 0;}
.mem__meta div{display:flex;flex-direction:column;gap:5px;}
.mem__meta dt{font-size:8px;letter-spacing:.22em;text-transform:uppercase;color:color-mix(in srgb,var(--ink) 42%,transparent);}
.mem__meta dd{font-size:11px;line-height:1.4;color:var(--ink);max-width:22ch;}

.mem__honours{
  margin-top:clamp(12px,2.2vh,18px);
  font-size:9px;letter-spacing:.06em;
  color:color-mix(in srgb,var(--ink) 52%,transparent);
  line-height:1.85;
}

/* «Для людей и детей» — главный блок слайда */
.mem__gave{list-style:none;display:flex;flex-direction:column;gap:clamp(9px,1.5vh,14px);}
.mem__gave li{
  position:relative;padding-left:15px;
  border-left:2px solid color-mix(in srgb,var(--accent) 55%,transparent);
}
.mem__gave li::before{
  content:"✦";position:absolute;left:-8px;top:-1px;
  font-size:10px;line-height:1;color:var(--accent);
  background:#f2ebdd;padding:1px 0;
}
.mem__gave b{
  display:block;font-family:var(--disp);font-weight:700;font-size:12px;
  letter-spacing:.01em;color:var(--ink);
}
.mem__gave span{
  display:block;font-size:9.5px;line-height:1.55;margin-top:2px;
  color:color-mix(in srgb,var(--ink) 62%,transparent);
}

.mem__h{
  display:flex;align-items:center;gap:12px;
  font-size:9px;letter-spacing:.26em;text-transform:uppercase;
  color:color-mix(in srgb,var(--ink) 48%,transparent);margin-bottom:6px;
}
.mem__h::after{content:"";flex:1;height:1px;background:color-mix(in srgb,var(--ink) 14%,transparent);}

.mem__song{
  display:grid;grid-template-columns:38px 1fr;align-items:baseline;gap:3px 10px;
  padding:8px 4px 8px 0;
  border-top:1px solid color-mix(in srgb,var(--ink) 14%,transparent);
  color:inherit;transition:padding .3s ease;
}
.mem__block .mem__song:last-of-type{border-bottom:1px solid color-mix(in srgb,var(--ink) 14%,transparent);}
.mem__song-y{grid-row:1;font-size:11px;color:var(--accent);}
.mem__song-b{grid-column:2;grid-row:1;min-width:0;}
.mem__song-t{
  font-family:var(--disp);font-weight:700;font-size:clamp(14px,1.35vw,16px);
}
.mem__song-go{font-style:normal;font-size:.8em;color:#1DB954;margin-left:6px;transition:margin .25s ease;}
.mem__song-n{display:block;font-size:9.5px;line-height:1.55;color:color-mix(in srgb,var(--ink) 56%,transparent);margin-top:3px;}
.mem__song:hover{padding-left:12px;}
.mem__song:hover .mem__song-t{text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--ink) 35%,transparent);text-underline-offset:3px;}
.mem__song:hover .mem__song-go{margin-left:9px;}

/* Хроника жизни — компактная лента внизу, во всю ширину */
.mem__lifewrap{grid-column:1 / -1;}
.mem__life{
  list-style:none;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(8px,1.2vh,13px) clamp(18px,2.6vw,40px);
}
.mem__life li{position:relative;padding-left:18px;}
.mem__life li::before{
  content:"✦";position:absolute;left:0;top:1px;
  font-size:9px;line-height:1;color:var(--accent);
}
.mem__life li:last-child::before{color:var(--accent2);text-shadow:0 0 8px color-mix(in srgb,var(--accent2) 60%,transparent);}
.mem__life li span{display:block;font-family:var(--disp);font-weight:700;font-size:12px;letter-spacing:.02em;color:var(--ink);}
.mem__life li p{font-size:9.5px;line-height:1.5;color:color-mix(in srgb,var(--ink) 60%,transparent);margin-top:2px;}

.mem__quote{
  margin:clamp(16px,3vh,26px) 0 0;
  padding-top:clamp(12px,2vh,16px);
  border-top:1px solid color-mix(in srgb,var(--ink) 16%,transparent);
  font-family:var(--disp);font-weight:600;
  font-size:clamp(14px,1.35vw,18px);line-height:1.4;letter-spacing:-.01em;
  color:color-mix(in srgb,var(--ink) 82%,transparent);
}
.mem__quote span{display:block;margin-top:8px;font-family:var(--mono);font-weight:400;font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);}

/* появление медленнее, чем на слайдах эпох — тишина */
.panel--mem .mem__grid > *{transition:opacity .95s ease,transform 1s cubic-bezier(.2,.8,.2,1);}
.panel--mem:not(.is-active) .mem__head{opacity:0;transform:translateY(-8px);}
.panel--mem:not(.is-active) .mem__id{opacity:0;transform:translateY(16px);}
.panel--mem:not(.is-active) .mem__content{opacity:0;transform:translateY(22px);}
.panel--mem:not(.is-active) .mem__lifewrap{opacity:0;transform:translateY(22px);}
.panel--mem.is-active .mem__id{transition-delay:.1s;}
.panel--mem.is-active .mem__content{transition-delay:.22s;}
.panel--mem.is-active .mem__lifewrap{transition-delay:.32s;}

/* хром страницы на светлом слайде */
body.at-memorial .frame{border-color:color-mix(in srgb,#2a211c 16%,transparent);}
body.at-memorial .wm__name{color:color-mix(in srgb,#2a211c 42%,transparent);}
body.at-memorial .wm__prog{background:color-mix(in srgb,#2a211c 12%,transparent);}

/* пункт «Долли Партон» в содержании */
.idx--mem{margin-top:12px;border-top:1px solid var(--line);border-bottom:0;}
.idx--mem .idx__n{color:#b8873f;font-size:11px;}
.idx--mem .idx__y{font-size:13px;}

/* звёздочка вместо точки в доке */
.dock__tick--mem i{
  width:auto;height:auto;border-radius:0;background:transparent;box-shadow:none;
  font-size:12px;line-height:1;
  color:color-mix(in srgb,var(--ink) 34%,transparent);
  transition:transform .25s ease,color .25s ease,text-shadow .25s ease;
}
.dock__tick--mem i::before{content:"✦";}
.dock__tick--mem:hover i,.dock__tick--mem.is-on i{background:transparent;box-shadow:none;color:var(--a);text-shadow:0 0 10px var(--a);}
.dock__tick--mem:hover i{transform:scale(1.15);}
.dock__tick--mem.is-on i{transform:scale(1.3);}

@media (prefers-reduced-motion:reduce){
  .mem__moth{animation:none;opacity:.9;}
}

/* ============================================================ адаптив */
@media (max-width:900px){
  .wm{display:none;}
  .panel__grid{
    display:flex;flex-direction:column;gap:clamp(16px,3vh,28px);
    height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding:calc(var(--edge) + 22px) var(--edge) calc(var(--dock) + var(--edge) + 20px);
  }
  .panel__grid > *{flex:0 0 auto;}
  .panel__id,.panel__content{align-self:stretch;min-width:0;max-height:none;overflow:visible;}
  .panel__content > * + *{margin-top:22px;}
  .panel__num{font-size:clamp(52px,13vw,92px);-webkit-text-stroke-width:1.5px;}
  .panel__lead,.rec__n,.timeline li p{max-width:none;}
  .panel--intro .hero{
    grid-template-columns:1fr;align-items:start;
    row-gap:clamp(22px,4vh,36px);
    height:100%;overflow-y:auto;
    padding:calc(var(--edge) + 32px) var(--edge) calc(var(--dock) + var(--edge) + 24px);
  }
  .hero__disc{right:-40vw;opacity:.3;}
  .hero__word--b{margin-left:0;}
  .hero__index{max-height:none;overflow:visible;}

  .mem__grid{
    display:flex;flex-direction:column;gap:clamp(18px,3.4vh,30px);
    height:100%;overflow-y:auto;
    padding:calc(var(--edge) + 22px) var(--edge) calc(var(--dock) + var(--edge) + 20px);
  }
  .mem__grid > *{flex:0 0 auto;}
  .mem__id,.mem__content{align-self:stretch;min-width:0;max-height:none;overflow:visible;}
  .mem__content{display:flex;flex-direction:column;gap:clamp(22px,3.8vh,34px);}
  .mem__life{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 22px;}
  .mem__moth{width:min(64vw,320px);right:-10vw;top:12%;transform:none;opacity:.32;}
  .mem__dates{font-size:clamp(26px,7vw,46px);}
  .mem__lead,.mem__song-n,.mem__gave span,.mem__life li p{max-width:none;}
}
@media (max-width:560px){
  .rec{grid-template-columns:auto 1fr;gap:6px 12px;}
  .rec__i{grid-row:1;}
  .rec__y{grid-column:2;padding-top:0;}
  .rec__body{grid-column:2;}
  .rec__sp{grid-column:2;justify-self:start;margin-top:8px;align-self:auto;}
  .dock__tick span{display:none;}
  .mem__life{grid-template-columns:1fr;}
  .hero__stats{gap:6px 22px;}
  .hero__stats div{padding:10px 0;}
  .hero__stats div + div{padding-left:0;border-left:0;}
  .hero__keys{display:none;}
  .idx{grid-template-columns:24px max-content minmax(0,1fr) 8px;gap:12px;}
  .idx__rule{display:none;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}
  .panel:not(.is-active) .panel__head,
  .panel:not(.is-active) .panel__id,
  .panel:not(.is-active) .panel__content,
  .panel:not(.is-active) .panel__num,
  .panel--intro:not(.is-active) .hero > *,
  .panel--mem:not(.is-active) .mem__grid > *,
  .panel--mem:not(.is-active) .mem__lifewrap{opacity:1;transform:none;}
  .panel__bg,.mem__bg{transform:none!important;}
}