@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,500&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root{
  --bg:#0a0908;
  --panel:#131211;
  --panel-2:#1a1917;
  --line:rgba(255,255,255,.08);
  --text:#f2ede3;
  --muted:#9d968a;
  --muted-2:#6c6659;
  --amber:#e8a35c;
  --amber-2:#f3c07c;
  --copper:#c9702f;
  --lime:#c7d05b;
  --mono:'JetBrains Mono',Consolas,monospace;
  --serif:'Fraunces','Georgia',serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  font-family:"Segoe UI",Arial,sans-serif;
  background:var(--bg);
  overflow-x:hidden;
}
.grain{
  position:fixed;inset:0;pointer-events:none;opacity:.05;z-index:1;
  background-image:radial-gradient(rgba(255,255,255,.7) .7px, transparent .7px);
  background-size:5px 5px;mix-blend-mode:overlay;
}

/* ---------- studio backdrop ---------- */
.studio-floor{
  min-height:100vh;padding:40px;position:relative;z-index:2;
  background:
    radial-gradient(ellipse 1100px 480px at 50% -6%, rgba(232,163,92,.10), transparent 62%),
    radial-gradient(ellipse 900px 500px at 100% 105%, rgba(120,70,30,.10), transparent 60%),
    linear-gradient(180deg,#111010 0%, #0a0908 55%, #060605 100%);
}
.studio-frame{position:relative;max-width:1320px;margin:auto}

.topbar{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:10px 0 26px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:baseline;gap:14px;line-height:1}
.brand b{
  font-family:var(--serif);font-weight:700;font-size:clamp(18px,2vw,22px);letter-spacing:.08em;white-space:nowrap;color:var(--text);
}
.brand small{color:var(--muted);font:11px/1.2 var(--mono);letter-spacing:.28em;white-space:nowrap}
.marquee{
  display:inline-flex;align-items:center;gap:9px;padding:8px 15px;border-radius:999px;
  background:var(--panel);border:1px solid var(--line);color:var(--muted);font:600 11px/1 var(--mono);letter-spacing:.06em;
}
.dot{width:8px;height:8px;border-radius:50%;background:#6a453d}
.dot.ok{background:var(--lime);box-shadow:0 0 9px var(--lime);animation:blink 1.9s ease-in-out infinite}
@keyframes blink{50%{opacity:.4}}

/* ---------- hero ---------- */
.hero{padding:64px 0 8px;text-align:center}
.hero-copy{max-width:720px;margin:0 auto}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:600 11px/1 var(--mono);letter-spacing:.34em;color:var(--amber-2);margin:0 0 18px;text-transform:uppercase}
.eyebrow:before{content:"";width:26px;height:1px;background:linear-gradient(90deg,var(--amber-2),transparent)}
.hero h1{
  font-family:var(--serif);font-weight:700;font-size:clamp(40px,5.2vw,64px);line-height:1.08;margin:0 0 20px;letter-spacing:-.02em;
  color:var(--text);text-wrap:balance;
}
.hero-text{max-width:620px;margin:0 auto;color:var(--muted);line-height:1.8;font-size:16px}

.analyzer-section{padding:0 0 38px;position:relative}
.analyzer-panel{
  position:relative;overflow-x:auto;overflow-y:hidden;border-radius:20px;
  filter:drop-shadow(0 22px 36px rgba(0,0,0,.5));
  scrollbar-width:thin;
}
.analyzer-svg{display:block;width:100%;height:auto;min-width:640px}
.an-needle{will-change:transform}

.warning{
  background:rgba(213,71,58,.12);border:1px solid rgba(213,71,58,.4);padding:15px 18px;border-radius:14px;margin-bottom:22px;color:#ffd8d2;
}
.warning code{background:rgba(0,0,0,.35);padding:2px 6px;border-radius:6px}

/* ---------- grid / cards ---------- */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.profile-card{
  position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(220px,250px) minmax(0,1fr);gap:26px;padding:26px;
  border-radius:22px;background:linear-gradient(165deg,#161513,#0e0d0c);
  border:1px solid var(--line);box-shadow:0 20px 44px rgba(0,0,0,.4);
  transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.profile-card:hover{border-color:rgba(232,163,92,.3);box-shadow:0 26px 58px rgba(0,0,0,.5);transform:translateY(-3px)}

/* ---------- tactile stage (cassette / turntable) ---------- */
.stage{position:relative;perspective:1000px}
.stage-spot{
  position:absolute;inset:-30px -20px auto -20px;height:140%;pointer-events:none;
  background:radial-gradient(ellipse 70% 60% at 50% 35%, rgba(232,163,92,.16), transparent 68%);
}
.stage-inner{position:relative;transition:transform .15s ease-out;will-change:transform}
.cassette-svg,.turntable-svg{width:100%;height:auto;display:block;filter:drop-shadow(0 20px 24px rgba(0,0,0,.55))}
.stage-glare{
  position:absolute;inset:0;border-radius:14px;opacity:0;pointer-events:none;transition:opacity .25s ease;
  background:radial-gradient(220px circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.55), transparent 55%);
  mix-blend-mode:overlay;
}
.stage-shadow{
  height:16px;margin:8px 18px 0;border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.6), transparent 72%);
  filter:blur(3px);
}
.reel-hub{animation:reelSpin 15s linear infinite;transform-origin:center}
.reel-hub-2{animation-duration:11s}
.platter{animation:reelSpin 3.6s linear infinite;transform-origin:center}
.power-led{animation:blink 2.6s ease-in-out infinite}
@keyframes reelSpin{to{transform:rotate(360deg)}}
.profile-card.processing .reel-hub,.profile-card.processing .platter{animation-duration:1.3s}
.tonearm{transition:transform .35s ease}
.profile-card:hover .tonearm,.profile-card.processing .tonearm{transform:rotate(-5deg)}

/* ---------- card details ---------- */
.details{overflow:hidden;display:flex;flex-direction:column;min-width:0}
.title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.details h2{margin:0 0 10px;font-family:var(--serif);font-weight:600;font-size:21px;line-height:1.18;color:var(--text)}
.details .desc{margin:0 0 18px;color:var(--muted);line-height:1.6;font-size:14px}
.badge-year{padding:6px 11px;border-radius:999px;background:var(--panel);border:1px solid var(--line);color:var(--amber-2);font:11px/1.2 var(--mono);white-space:nowrap}

/* ---------- form / dropzone ---------- */
.convert-form{display:flex;flex-direction:column;gap:12px}
.dropzone{
  position:relative;display:flex;align-items:center;gap:10px;padding:13px 14px;border-radius:13px;
  border:1px solid var(--line);background:rgba(255,255,255,.025);cursor:pointer;transition:border-color .2s ease, background .2s ease;
}
.dropzone:hover{border-color:rgba(232,163,92,.45);background:rgba(232,163,92,.05)}
.dropzone.has-file{border-color:var(--lime)}
.dropzone.disabled{opacity:.55;pointer-events:none}
.dropzone input{position:absolute;inset:0;opacity:0;cursor:pointer}
.dz-icon{width:18px;height:18px;color:var(--amber-2);flex:0 0 auto}
.dz-text{font-size:13px;color:var(--text);font-weight:600;flex:0 0 auto}
.dz-filename{font-size:12px;color:var(--muted-2);font-family:var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-left:auto}

.btn-primary{
  display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:14px 14px;border:1px solid var(--line);
  border-radius:13px;cursor:pointer;font:800 13px/1 var(--mono);letter-spacing:.04em;color:#f3e9d1;
  background:linear-gradient(180deg,#332a22,#161210);box-shadow:0 12px 22px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 16px 28px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.08)}
.btn-primary:active:not(:disabled){transform:translateY(0)}
.btn-primary:disabled{opacity:.4;cursor:not-allowed}
.rec-dot{width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f36b5b,#b8241a);box-shadow:0 0 10px rgba(213,43,32,.55);flex:0 0 auto}

.progress-track{height:10px;background:var(--panel);margin-top:2px;border-radius:999px;overflow:hidden;box-shadow:inset 0 2px 5px rgba(0,0,0,.5)}
.progress-fill{height:100%;width:0;transition:width .4s;background:linear-gradient(90deg,var(--copper),var(--amber-2));box-shadow:0 0 14px rgba(240,177,93,.3)}
.status-line{font-size:13px;min-height:20px;margin-top:6px;color:var(--amber-2);font-family:var(--mono)}

/* ---------- players ---------- */
.players{display:grid;gap:12px;margin-top:16px}
.player{padding:14px;border-radius:16px;background:var(--panel);border:1px solid var(--line)}
.player-label{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin-bottom:10px}
.player-row{display:flex;align-items:center;gap:11px}
.play-toggle{
  flex:0 0 auto;width:38px;height:38px;border:0;border-radius:50%;cursor:pointer;
  background:linear-gradient(180deg,#f4e6c9,#d5c4a1);color:#2b2118;display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 16px rgba(0,0,0,.3);transition:transform .15s ease;
}
.play-toggle:hover{transform:translateY(-1px)}
.play-toggle svg{width:15px;height:15px}
.wave{flex:1;height:28px;display:flex;align-items:center;gap:2.5px;min-width:0}
.wave .bar{flex:1;min-width:2px;height:100%;border-radius:2px;background:linear-gradient(180deg,var(--amber-2),var(--copper));transform-origin:center;transition:transform .06s linear,opacity .08s linear;box-shadow:0 0 8px rgba(214,143,79,.2)}
.time{flex:0 0 auto;font:11px/1 var(--mono);color:var(--muted);white-space:nowrap}
.seek{-webkit-appearance:none;appearance:none;width:100%;height:6px;margin-top:11px;border-radius:999px;background:#25211c;outline:none;cursor:pointer;box-shadow:inset 0 2px 4px rgba(0,0,0,.5)}
.seek::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:15px;height:15px;border-radius:50%;background:linear-gradient(180deg,#f2dcb2,#d9b47a);border:1px solid rgba(0,0,0,.3);box-shadow:0 2px 5px rgba(0,0,0,.3);margin-top:-4.5px}
.seek::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:linear-gradient(180deg,#f2dcb2,#d9b47a);border:1px solid rgba(0,0,0,.3)}
.seek:disabled{opacity:.4;cursor:not-allowed}

.btn-download{
  margin-top:16px;display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:13px 16px;border-radius:13px;
  background:rgba(199,208,91,.14);color:var(--lime);border:1px solid rgba(199,208,91,.35);text-decoration:none;font:700 13px/1 var(--mono);
  transition:transform .18s ease, background .18s ease;
}
.btn-download:hover{transform:translateY(-2px);background:rgba(199,208,91,.2)}
.btn-download svg{width:16px;height:16px}

.signature-footer{
  margin-top:36px;padding:26px 8px 4px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:center;gap:20px;color:var(--muted);
}
.signature-footer p{margin:0;white-space:nowrap;font-family:var(--serif);font-size:clamp(15px,2vw,20px);font-style:italic;letter-spacing:.02em;color:var(--amber-2)}
.signature-line{display:block;width:min(140px,16vw);height:1px;background:linear-gradient(90deg,transparent,rgba(232,163,92,.55),transparent)}

/* ---------- responsive ---------- */
@media(max-width:1180px){.grid{grid-template-columns:1fr}}
@media(max-width:760px){
  .studio-floor{padding:14px}
  .hero{padding-top:36px}
  .brand b{font-size:19px}
  .profile-card{grid-template-columns:1fr;padding:20px}
  .stage{max-width:300px;margin:0 auto}
  .hero-copy h1{font-size:clamp(36px,10.5vw,52px);line-height:1.12}
  .dz-filename{margin-left:0;flex-basis:100%}
  .signature-footer{padding-top:22px}
  .signature-footer p{white-space:normal;text-align:center}
  .signature-line{width:44px}
}