/* Aleksui 41: bendras stilius (Vinilas) */
:root{
  --bg:oklch(0.93 0.02 75);
  --card:oklch(0.965 0.012 80);
  --ink:oklch(0.2 0.01 60);
  --muted:oklch(0.45 0.02 60);
  --accent:oklch(0.553 0.195 38);
  --label:oklch(0.66 0.19 45);
  --on-accent:#fff;
  --line:oklch(0.78 0.02 70);
  --ok:oklch(0.5 0.12 150);
  --err:oklch(0.5 0.19 27);
  --display:'Syne','Arial Black',sans-serif;
  --text:'Space Grotesk',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--text);font-size:clamp(1rem,.95rem + .25vw,1.125rem);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;-webkit-appearance:none;appearance:none;border:0;background:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}

.kicker{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.3em;font-size:.76rem;color:var(--muted)}
.big{font-family:var(--display);font-weight:800;letter-spacing:-.02em;font-size:clamp(3rem,2rem + 7vw,4.6rem);line-height:1;margin:.5rem 0 .7rem}
.h{font-family:var(--display);font-weight:800;letter-spacing:-.015em;font-size:clamp(1.9rem,1.4rem + 2.6vw,2.4rem);line-height:1.08;margin:.4rem 0 1.2rem}
.sub,.hint{color:var(--muted)}
.hint{font-size:.9rem;margin-top:.6rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:54px;padding:0 2rem;background:var(--accent);color:var(--on-accent);font-weight:600;font-size:1.02rem;letter-spacing:.02em;transition:opacity .2s,transform .15s}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.35;cursor:default}
.btn.dark{background:var(--ink);color:var(--bg)}
.btn.ghost{background:none;color:var(--ink);border:1.5px solid var(--ink)}
.link{min-height:44px;color:var(--accent);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.err{color:var(--err);font-size:.95rem;margin-top:.8rem}

/* plokštelė */
.disc,.art-disc{border-radius:50%;background:
  conic-gradient(from 20deg,transparent 0 8%,rgba(255,255,255,.12) 10% 14%,transparent 16% 58%,rgba(255,255,255,.12) 60% 64%,transparent 66%),
  radial-gradient(circle,var(--bg) 0 3%,var(--label) 3.5% 30%,#111 30.5% 32%,transparent 32.5%),
  repeating-radial-gradient(circle,#161616 0 2px,#272727 2px 3.2px)}
.art-disc{position:relative;display:grid;place-items:center;width:min(12rem,58vw);aspect-ratio:1;margin:0 auto 1.6rem;box-shadow:0 20px 40px -18px rgba(0,0,0,.6)}
.art-disc span{font-family:var(--display);font-weight:800;font-size:1.5rem;color:#fff}

/* nuotrauka su plokštele */
.pw{display:block;position:relative;width:min(62%,15rem);margin:1.6rem auto 1.6rem;left:-13%}
.pw .disc{position:absolute;top:5%;left:40%;width:88%;aspect-ratio:1;box-shadow:0 12px 26px -14px rgba(0,0,0,.6);transition:left .7s cubic-bezier(.2,.7,.2,1)}
.pw .sleeve{position:relative;z-index:1;display:block;width:100%;aspect-ratio:1;overflow:hidden;background:var(--card);box-shadow:0 18px 30px -16px rgba(0,0,0,.5)}
.pw .sleeve img{display:block;width:100%;height:100%;object-fit:cover}
.pw.out .disc{left:50%}

/* balso grotuvas (blokas) */
.voice{display:flex;align-items:center;width:100%;max-width:20rem;margin:1.5rem auto 0;background:var(--ink);color:var(--bg);-webkit-user-select:none;user-select:none}
.v-ico{width:56px;height:56px;flex:none;display:grid;place-items:center;background:var(--accent)}
.v-ico svg{width:22px;height:22px;fill:#fff}
.voice .i-pause{display:none}.voice.playing .i-pause{display:inline}.voice.playing .i-play{display:none}
.v-bar{position:relative;flex:1;height:4px;margin:0 1rem;background:color-mix(in oklch,var(--bg) 25%,transparent)}
.v-bar i{position:absolute;inset:0 auto 0 0;width:calc(var(--p,0)*100%);background:var(--bg)}
.v-time{padding-right:1rem;font-variant-numeric:tabular-nums;font-size:.95rem;min-width:4.2ch;text-align:right}

@media (prefers-reduced-motion:no-preference){
  .spin{animation:spin 9s linear infinite}
  .pw.out .disc{animation:spin 1.8s linear infinite}
}
@keyframes spin{to{transform:rotate(1turn)}}