:root{
  --bg: #0c0e12;
  --bg-panel: #14171d;
  --bg-panel-2: #1b1f27;
  --line: #262b34;
  --text: #eef0f3;
  --text-dim: #8b92a1;
  --cyan: #25f4ee;
  --pink: #fe2c55;
  --mono: 'JetBrains Mono', 'Courier New', monospace;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding: 48px 20px 80px;
}

.eq-bar{
  display:flex;
  gap:3px;
  height:14px;
  margin-bottom:18px;
}
.eq-bar span{
  width:3px;
  background:var(--cyan);
  box-shadow: 2px 0 0 var(--pink);
  animation: eq 1.1s ease-in-out infinite;
}
.eq-bar span:nth-child(1){ animation-delay: 0s; }
.eq-bar span:nth-child(2){ animation-delay: .15s; }
.eq-bar span:nth-child(3){ animation-delay: .3s; }
.eq-bar span:nth-child(4){ animation-delay: .45s; }
.eq-bar span:nth-child(5){ animation-delay: .6s; }
@keyframes eq{
  0%,100%{ height:4px; }
  50%{ height:14px; }
}

h1{
  font-size: clamp(36px, 7vw, 56px);
  letter-spacing: -0.03em;
  font-weight: 800;
  text-align:center;
  line-height:1.05;
}
h1 .glitch{
  background: linear-gradient(90deg, var(--cyan), var(--pink));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.sub{
  color: var(--text-dim);
  font-size:14.5px;
  text-align:center;
  margin-top:10px;
  max-width:480px;
  line-height:1.55;
}

.card{
  width:100%;
  max-width:620px;
  background: var(--bg-panel);
  border:1px solid var(--line);
  border-radius:16px;
  padding:28px;
  margin-top:36px;
}

label{
  display:block;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color: var(--text-dim);
  margin-bottom:8px;
  font-family: var(--mono);
}

input[type=text]{
  width:100%;
  background: var(--bg-panel-2);
  border:1px solid var(--line);
  color:var(--text);
  padding:13px 14px;
  border-radius:10px;
  font-size:14.5px;
  outline:none;
  transition: border-color .15s ease;
  font-family: inherit;
}
input[type=text]:focus{
  border-color: var(--cyan);
}

select{
  width:100%;
  background: var(--bg-panel-2);
  border:1px solid var(--line);
  color:var(--text);
  padding:13px 14px;
  border-radius:10px;
  font-size:14.5px;
  outline:none;
  transition: border-color .15s ease;
  font-family: inherit;
  appearance:none;
  -webkit-appearance:none;
  background-image: linear-gradient(45deg, transparent 50%, var(--cyan) 50%), linear-gradient(135deg, var(--cyan) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% - 3px), calc(100% - 15px) calc(50% - 3px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor:pointer;
}
select:focus{
  border-color: var(--cyan);
}
select option{
  background: var(--bg-panel-2);
  color: var(--text);
}

.field{ margin-bottom:18px; }

button.primary{
  width:100%;
  padding:14px;
  border:none;
  border-radius:10px;
  font-weight:700;
  font-size:15px;
  letter-spacing:.01em;
  cursor:pointer;
  background: linear-gradient(90deg, var(--cyan), var(--pink));
  color:#0c0e12;
  transition: transform .1s ease, opacity .15s ease;
}
button.primary:hover{ opacity:.92; }
button.primary:active{ transform: scale(.99); }
button.primary:disabled{ opacity:.5; cursor:not-allowed; }

.status{
  margin-top:18px;
  font-family: var(--mono);
  font-size:12.5px;
  color: var(--text-dim);
  display:none;
  align-items:center;
  gap:8px;
}
.status.show{ display:flex; }
.dot{
  width:7px; height:7px; border-radius:50%;
  background: var(--cyan);
  animation: pulse 1s infinite;
}
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.25;} }

.error{
  margin-top:18px;
  padding:14px 16px;
  border-radius:10px;
  background: rgba(254,44,85,0.08);
  border:1px solid rgba(254,44,85,0.35);
  color:#ff8fa3;
  font-size:13.5px;
  display:none;
  white-space:pre-wrap;
}
.error.show{ display:block; }

.result{
  margin-top:24px;
  display:none;
}
.result.show{ display:block; }

.result-card{
  background: var(--bg-panel-2);
  border:1px solid var(--line);
  border-radius:12px;
  padding:20px;
  margin-bottom:14px;
}
.result-card h3{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color: var(--text-dim);
  font-family: var(--mono);
  margin-bottom:12px;
}
video{
  width:100%;
  max-height:460px;
  border-radius:8px;
  background:#000;
  display:block;
  margin-bottom:14px;
}
.meta{
  font-size:13.5px;
  color: var(--text-dim);
  margin-bottom:4px;
}
.meta b{ color:var(--text); font-weight:600; }

.dl-links{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:12px;
}
.dl-links a{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:11px 14px;
  background: var(--bg-panel);
  border:1px solid var(--line);
  border-radius:8px;
  color:var(--text);
  text-decoration:none;
  font-size:13.5px;
  transition: border-color .15s ease;
}
.dl-links a:hover{ border-color: var(--cyan); }
.dl-links a span.arrow{ color: var(--cyan); font-family: var(--mono); }

.raw-toggle summary{
  font-family: var(--mono);
  font-size:11.5px;
  color: var(--text-dim);
  cursor:pointer;
}
pre{
  margin-top:10px;
  background: var(--bg-panel);
  border:1px solid var(--line);
  border-radius:8px;
  padding:14px;
  font-size:11px;
  font-family: var(--mono);
  color: var(--text-dim);
  overflow-x:auto;
  max-height:320px;
}

.footnote{
  max-width:620px;
  margin-top:22px;
  font-size:12px;
  line-height:1.6;
  color: var(--text-dim);
  text-align:center;
}
.footnote code{
  background: var(--bg-panel);
  border:1px solid var(--line);
  border-radius:4px;
  padding:1px 6px;
  font-family: var(--mono);
}
/* ===== Footer ===== */

.footer{
    margin-top:30px;
    padding:20px;
    border-top:1px solid rgba(255,255,255,.08);
    text-align:center;
}

.footer-links{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:16px;
    margin-bottom:15px;
}

.footer-links a{
    color:#b9c0d0;
    text-decoration:none;
    font-size:14px;
}

.footer-links a:hover{
    color:#ffffff;
}

.footer p{
    margin:0;
    color:#7d8896;
    font-size:13px;
}