/* =============================================================
   MANDROCK — music hub.
   Мова взята з mandrock.me (лендинг): acid green + magenta,
   fx-шари, нумеровані секції, рядки-маніфест, [AUTH]/[EXT] теги.
   Самодостатній файл — лендинговий style.css не лінкується.
   Дизайн-токени живуть у :root; решта на них.
   ============================================================= */
:root{
  --c-bg:#07080a; --c-panel:#0d1014; --c-panel-hi:#12161c;
  --c-ink:#dfe4ea; --c-ink-mute:#98a2b0;
  --c-acid:#8bff5a; --c-mag:#ff3ea5;
  --c-rule:#1c2129; --c-edge:#748094;
  --c-acid-8:rgba(139,255,90,.08); --c-acid-16:rgba(139,255,90,.16);
  --c-acid-30:rgba(139,255,90,.30); --c-mag-14:rgba(255,62,165,.14);
  --c-grid:rgba(139,255,90,.055); --c-scan:rgba(0,0,0,.38); --c-vig:rgba(0,0,0,.72);

  --ff:ui-monospace,"SF Mono","JetBrains Mono","Fira Code",Menlo,Consolas,monospace;
  --fs-2xs:.6875rem; --fs-xs:.75rem; --fs-sm:.875rem; --fs-md:1rem; --fs-lg:1.125rem;
  --fs-mark:clamp(2rem,8vw,3.5rem);
  --ls-tight:-.01em; --ls-wide:.08em; --lh-tight:1.15; --lh-body:1.5;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:72px;
  --shell-max:820px; --gutter:clamp(16px,4vw,40px); --row-min:56px;
  --r-sm:2px; --r-md:4px; --hair:1px;
  --t-fast:120ms; --t-glitch:200ms; --ease:cubic-bezier(.2,.7,.3,1);

  --px:0; --py:0; --mx:50%; --my:50%;  /* runtime channels, main.js writes them */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;background:var(--c-bg);color:var(--c-ink);
  font-family:var(--ff);font-size:var(--fs-md);line-height:var(--lh-body);
  overflow-x:clip;-webkit-font-smoothing:antialiased}
h1,h2,h3,p,dl,dd,dt,ul,ol{margin:0}
a{color:var(--c-acid)}

@media (hover:hover) and (pointer:fine){
  body,a,button,summary,input{
    cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M4 14.5V4h10.5' fill='none' stroke='%23000' stroke-width='3.5' stroke-opacity='.6' stroke-linecap='square'/%3E%3Cpath d='M4 14.5V4h10.5' fill='none' stroke='%238bff5a' stroke-width='1.5' stroke-linecap='square'/%3E%3Ccircle cx='4' cy='4' r='1.5' fill='%23ff3ea5'/%3E%3C/svg%3E") 4 4,auto;
  }
}

:focus-visible{outline:2px solid var(--c-acid);outline-offset:2px;
  border-radius:var(--r-sm);box-shadow:0 0 0 2px var(--c-bg)}
:focus:not(:focus-visible){outline:none}

.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:fixed;left:var(--sp-3);top:var(--sp-3);z-index:20;
  padding:var(--sp-2) var(--sp-3);background:var(--c-bg);
  border:var(--hair) solid var(--c-acid);color:var(--c-acid);font-size:var(--fs-xs);
  letter-spacing:var(--ls-wide);text-transform:uppercase;text-decoration:none;
  transform:translateY(-200%)}
.skip:focus,.skip:focus-visible{transform:translateY(0)}

/* ---- fx layers: fixed, pointer-events:none, never in flow ---- */
.fx{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;contain:layout paint}
.fx__grid,.fx__dots{position:absolute;inset:-8%;will-change:transform}
.fx__grid{background-image:
  repeating-linear-gradient(to right,var(--c-grid) 0 1px,transparent 1px 72px),
  repeating-linear-gradient(to bottom,var(--c-grid) 0 1px,transparent 1px 72px);
  transform:translate3d(calc(var(--px)*8px),calc(var(--py)*8px),0) skewX(calc(var(--px)*.4deg))}
.fx__dots{background-image:radial-gradient(circle,var(--c-acid-16) 0 1px,transparent 1.4px);
  background-size:144px 144px;
  transform:translate3d(calc(var(--px)*-20px),calc(var(--py)*-20px),0)}
.fx__scan{position:absolute;inset:0;
  background:repeating-linear-gradient(to bottom,var(--c-scan) 0 1px,transparent 1px 3px);
  opacity:.35;mix-blend-mode:multiply}
.fx__vig{position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 40%,transparent 40%,var(--c-vig) 100%)}

/* ---- shell ---- */
.shell{position:relative;z-index:1;max-width:var(--shell-max);margin:0 auto;
  padding:var(--sp-7) var(--gutter) var(--sp-6)}

/* ---- header ---- */
.hdr{margin-bottom:var(--sp-7)}
.hdr__eyebrow{font-size:var(--fs-xs);letter-spacing:var(--ls-wide);text-transform:uppercase;
  color:var(--c-acid);margin-bottom:var(--sp-3)}
.hdr__mark{font-size:var(--fs-mark);line-height:var(--lh-tight);letter-spacing:-.02em;
  font-weight:700;color:var(--c-ink);margin-bottom:var(--sp-3);overflow-wrap:break-word}
.hdr__mark em{font-style:normal;color:var(--c-ink-mute)}
.hdr__lede{color:var(--c-ink-mute);font-size:var(--fs-sm);max-width:64ch;margin-bottom:var(--sp-5)}
.hdr__wave{display:block;width:100%;height:24px;color:var(--c-acid-30);margin-bottom:var(--sp-4);
  border-top:var(--hair) solid var(--c-rule);border-bottom:var(--hair) solid var(--c-rule)}

.readout{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4);
  font-size:var(--fs-xs);letter-spacing:var(--ls-wide)}
.readout__i{display:flex;gap:var(--sp-2);align-items:baseline;min-width:0}
.readout dt{color:var(--c-acid)}
.readout dt::after{content:":";color:var(--c-edge)}
.readout dd{color:var(--c-ink-mute);overflow-wrap:anywhere}

/* ---- stack strip: same tokens, mono readout of the stack ---- */
.stack{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:var(--hair);background:var(--c-rule);border:var(--hair) solid var(--c-rule);
  border-radius:var(--r-md);overflow:hidden;margin-top:var(--sp-4)}
.stack__i{background:var(--c-panel);padding:var(--sp-4)}
.stack__n{display:block;font-size:var(--fs-md);font-weight:700;color:var(--c-ink);
  letter-spacing:var(--ls-tight);margin-bottom:2px}
.stack__n b{color:var(--c-acid);font-weight:700}
.stack__d{color:var(--c-ink-mute);font-size:var(--fs-xs);letter-spacing:var(--ls-wide)}

/* ---- sections ---- */
.sec{position:relative;margin-bottom:var(--sp-7);padding-top:var(--sp-4);
  border-top:var(--hair) solid var(--c-rule)}
.sec::before{content:"";position:absolute;inset:-4px -12px;z-index:-1;
  background:radial-gradient(260px 200px at var(--mx) var(--my),var(--c-acid-8) 0%,transparent 70%);
  opacity:0;transition:opacity var(--t-fast) var(--ease);pointer-events:none}
.sec.is-lit::before{opacity:1}
.sec__h{display:flex;align-items:baseline;gap:var(--sp-2);font-size:var(--fs-lg);
  font-weight:700;letter-spacing:var(--ls-wide);line-height:var(--lh-tight);margin-bottom:var(--sp-2)}
.sec__n{color:var(--c-acid)}
.sec__sl{color:var(--c-edge);font-weight:400}
.sec__t{color:var(--c-ink)}
.sec__note{color:var(--c-ink-mute);font-size:var(--fs-sm);margin-bottom:var(--sp-4)}

/* ---- rows: the manifest listing ---- */
.rows{display:flex;flex-direction:column;border-top:var(--hair) solid var(--c-rule)}
.row{display:grid;grid-template-columns:auto 1fr auto;
  grid-template-areas:"idx body go" ".   tags go";
  align-items:center;column-gap:var(--sp-3);min-height:var(--row-min);
  padding:var(--sp-3) var(--sp-2);border-bottom:var(--hair) solid var(--c-rule);
  text-decoration:none;color:inherit;background:transparent;
  transition:background-color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.row__i{grid-area:idx;align-self:start;padding-top:2px;color:var(--c-ink-mute);
  font-size:var(--fs-xs);letter-spacing:var(--ls-wide);font-variant-numeric:tabular-nums}
.row__body{grid-area:body;min-width:0}
.row__name{display:inline-block;position:relative;color:var(--c-ink);font-size:var(--fs-md);
  font-weight:700;letter-spacing:var(--ls-tight);overflow-wrap:anywhere}
.row:hover .row__name,.row:focus-visible .row__name{text-decoration:underline;text-underline-offset:3px}
.row__desc{display:block;margin-top:2px;color:var(--c-ink-mute);font-size:var(--fs-sm);overflow-wrap:anywhere}
.row__tags{grid-area:tags;display:flex;gap:var(--sp-2);flex-wrap:wrap}
.row__tags:empty{display:none}
.row__go{grid-area:go;color:var(--c-ink-mute);font-size:var(--fs-md);
  transition:color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.row:hover{background:var(--c-panel-hi)}
.row:hover .row__go{color:var(--c-acid);transform:translateX(3px)}
.row:focus-visible{background:var(--c-panel)}
.row:focus-visible .row__go{color:var(--c-acid)}

/* ---- tags: word carries meaning, colour only accelerates ---- */
.tag{display:inline-block;font-size:var(--fs-2xs);font-weight:700;letter-spacing:var(--ls-wide);
  padding:1px var(--sp-2);border:var(--hair) solid currentColor;border-radius:var(--r-sm);white-space:nowrap}
.tag--auth{color:var(--c-mag);background:var(--c-mag-14)}
.tag--ext{color:var(--c-ink-mute)}
.tag--arch{color:var(--c-edge)}

.legend{color:var(--c-ink-mute);font-size:var(--fs-xs);line-height:2;
  padding-top:var(--sp-4);border-top:var(--hair) solid var(--c-rule)}

/* ---- smartlink tool: Odesli ---- */
.tool{background:var(--c-panel);border:var(--hair) solid var(--c-rule);border-radius:var(--r-md);
  padding:var(--sp-5)}
.tool__hint{color:var(--c-ink-mute);font-size:var(--fs-sm);margin-bottom:var(--sp-4)}
.tool__row{display:flex;gap:var(--sp-2)}
.tool__row input{flex:1;min-width:0;background:var(--c-bg);border:var(--hair) solid var(--c-rule);
  color:var(--c-ink);padding:11px 13px;border-radius:var(--r-md);
  font:var(--fs-sm)/1 var(--ff);outline:none}
.tool__row input:focus{border-color:var(--c-acid)}
.tool__row button{background:var(--c-acid);color:var(--c-bg);border:none;padding:11px 20px;
  border-radius:var(--r-md);font:700 var(--fs-sm)/1 var(--ff);cursor:pointer;white-space:nowrap}
.tool__row button:hover{opacity:.85}
.tool__row button:disabled{opacity:.4;cursor:not-allowed}
.res{margin-top:var(--sp-4);display:none}
.res.on{display:block}
.res__lk{display:flex;gap:var(--sp-2);align-items:center;background:var(--c-acid-8);
  border:var(--hair) solid var(--c-acid);border-radius:var(--r-md);padding:11px 13px;
  font:var(--fs-sm)/1.4 var(--ff);word-break:break-all}
.res__lk a{flex:1;color:var(--c-acid);text-decoration:none}
.res__lk button{background:none;border:var(--hair) solid var(--c-acid);color:var(--c-acid);
  border-radius:var(--r-sm);padding:4px 10px;font:var(--fs-xs) var(--ff);cursor:pointer;flex:0 0 auto}
.res__meta{color:var(--c-ink-mute);font-size:var(--fs-xs);margin-top:var(--sp-2);letter-spacing:var(--ls-wide)}
.err{color:var(--c-mag);font-size:var(--fs-sm);margin-top:var(--sp-3);display:none}
.err.on{display:block}

/* ---- footer ---- */
.ftr{margin-top:var(--sp-8)}
.ftr__rule{height:6px;border-top:var(--hair) solid var(--c-rule);border-bottom:var(--hair) solid var(--c-rule);
  background:repeating-linear-gradient(to right,var(--c-rule) 0 8px,transparent 8px 16px);margin-bottom:var(--sp-4)}
.ftr__row{display:flex;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;
  color:var(--c-ink-mute);font-size:var(--fs-xs);letter-spacing:var(--ls-wide)}
.ftr__row code{color:var(--c-ink-mute)}

/* ---- led trail: fine pointer only, transform-positioned ---- */
.trail{position:fixed;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;
  z-index:9999;pointer-events:none;will-change:transform;
  background:radial-gradient(circle,var(--c-acid-30) 0%,transparent 68%);
  box-shadow:0 0 18px 2px var(--c-acid-16);mix-blend-mode:screen}

/* ---- glitch: hover only, one shot ---- */
@keyframes glitch{
  0%{clip-path:inset(0 0 0 0);transform:translate3d(0,0,0);text-shadow:none}
  25%{clip-path:inset(38% 0 22% 0);transform:translate3d(-2px,0,0);text-shadow:2px 0 var(--c-mag),-2px 0 var(--c-acid)}
  50%{clip-path:inset(6% 0 62% 0);transform:translate3d(2px,0,0);text-shadow:-2px 0 var(--c-mag),2px 0 var(--c-acid)}
  75%{clip-path:inset(70% 0 8% 0);transform:translate3d(-1px,0,0);text-shadow:1px 0 var(--c-mag),-1px 0 var(--c-acid)}
  100%{clip-path:inset(0 0 0 0);transform:translate3d(0,0,0);text-shadow:none}
}
@media (hover:hover) and (pointer:fine){
  .row:hover .row__name[data-glitch],
  .sec__h[data-glitch]:hover,
  .hdr__mark[data-glitch]:hover{animation:glitch var(--t-glitch) steps(1,end) 1}
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .fx__grid,.fx__dots{transform:none!important}
  .trail{display:none!important}
  .sec::before{display:none}
  .row:hover .row__go{transform:none}
}
/* ---- touch / coarse pointer: no cursor, no trail, no parallax ---- */
@media not all and (hover:hover){
  .sec::before{display:none}
  .fx__grid,.fx__dots{transform:none}
  .fx__scan{opacity:.28}
}
/* ---- narrow ---- */
@media (max-width:420px){
  :root{--shell-max:100%}
  .shell{padding-top:var(--sp-6)}
  .row{grid-template-columns:1fr auto;grid-template-areas:"idx go" "body go" "tags go";
    align-items:start;row-gap:var(--sp-1)}
  .row__i{padding-top:0}
  .row__go{align-self:center}
}