/* ============================================================
   MELPe vs Cybeum Vocoder — voice sample comparison
   ============================================================ */

:root{
  --bg:#070C14; --bg2:#0B1220;
  --panel:rgba(255,255,255,.045); --panel-solid:#0E1626;
  --line:rgba(255,255,255,.10); --line2:rgba(255,255,255,.06);
  --fg:#E9EEF7; --fg2:#9DAABD; --fg3:#77869C;
  --accent:#3B82F6; --cyan:#22D3EE;
  --row:rgba(255,255,255,.018); --rowAlt:rgba(255,255,255,.042);
  --wave:rgba(255,255,255,.24);
  --glow:color-mix(in oklab, var(--accent) 42%, transparent);
  --shadow:0 30px 70px -40px rgba(0,0,0,.9);
}

*{box-sizing:border-box}
/* class-level `display` below would otherwise beat the UA [hidden] rule */
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:'IBM Plex Sans',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-wrap:pretty;
}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--cyan)}
button{font:inherit}
::selection{background:var(--cyan);color:#04121b}

@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes halo{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.9;transform:scale(1.06)}}

.page{min-height:100vh;background:radial-gradient(1200px 600px at 15% -10%, var(--bg2), var(--bg) 60%)}


/* ---------------- hero ---------------- */

.hero{position:relative;overflow:hidden;background:linear-gradient(160deg,#0B1220 0%,#0F172A 45%,#101E36 100%)}
.hero-halo{
  position:absolute;inset:0;
  background:
    radial-gradient(700px 380px at 20% 15%, rgba(59,130,246,.30), transparent 70%),
    radial-gradient(620px 340px at 82% 30%, rgba(34,211,238,.22), transparent 70%);
  animation:halo 11s ease-in-out infinite;
}
.hero-dots{
  position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px);
  background-size:26px 26px;
}
.hero-wave{position:absolute;left:0;width:200%}
.hero-wave-1{bottom:70px;height:200px;animation:drift 26s linear infinite}
.hero-wave-2{bottom:30px;height:260px;animation:drift 17s linear infinite}

.hero-bars{
  position:absolute;left:0;right:0;bottom:0;height:120px;
  display:flex;align-items:flex-end;gap:4px;padding:0 12px;opacity:.55;
  -webkit-mask-image:linear-gradient(to top,#000,transparent);
  mask-image:linear-gradient(to top,#000,transparent);
}
.hero-bars span{
  flex:1 1 0;border-radius:2px 2px 0 0;transform-origin:bottom;
  background:linear-gradient(180deg,var(--cyan),rgba(59,130,246,.15));
  animation-name:eq;animation-timing-function:ease-in-out;animation-iteration-count:infinite;
}
.hero-fade{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(11,18,32,0) 40%,rgba(11,18,32,.55) 100%)}

.hero-inner{position:relative;max-width:920px;margin:0 auto;padding:110px 24px 146px;text-align:center}

.hero-title{
  margin:0;font-family:'Space Grotesk',sans-serif;font-weight:600;
  font-size:clamp(36px,6vw,68px);line-height:1.03;letter-spacing:-.035em;color:#F2F6FC;
}
.hero-sub{margin:18px auto 0;max-width:820px;font-size:clamp(15px,1.7vw,18.5px);line-height:1.62;color:#A9BCD6}

/* ---------------- samples table ---------------- */

.samples{max-width:1320px;margin:0 auto;padding:84px 24px 96px}

.table{
  border-radius:22px;border:1px solid var(--line);background:var(--panel);
  box-shadow:var(--shadow);clip-path:inset(0 round 22px);
}

.table-head{
  position:sticky;top:0;z-index:10;
  display:flex;flex-wrap:nowrap;align-items:stretch;
  background:var(--panel-solid);border-bottom:1px solid var(--line);
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg3);
}
.table-head .col-sample{flex:0 0 210px;min-width:0;padding:15px 18px;border-right:1px solid var(--line2)}
.table-head .col-original{flex:0 0 265px;min-width:0;padding:15px 18px;border-right:1px solid var(--line2)}
.table-head .col-coded{flex:1 1 auto;min-width:0;display:flex;flex-wrap:nowrap;align-items:stretch}
.table-head .col-rate{flex:0 0 84px;min-width:0;padding:15px 0 15px 18px;border-right:1px solid var(--line2)}
.table-head .col-cell{flex:1 1 0;min-width:0;padding:15px 18px;border-right:1px solid var(--line2)}
.table-head .col-cell-last{border-right:0}

/* column titles sit centred over their column */
.table-head > div,
.table-head .col-rate,
.table-head .col-cell{text-align:center}
.table-head .col-rate{padding:15px 8px}

/* Each codec column carries one colour channel (--c, an r,g,b triplet) and
   everything inside it — tint, card border, glow, play button, progress fill —
   derives from that. Codec2 blue, MELPe red, Cybeum green. */
.col-codec2{--c:96,165,250}
.col-melpe{--c:251,113,133}
.col-cybeum{--c:52,211,153}
/* the uncoded reference gets the same treatment, in white */
.speaker-original{--c:255,255,255}

.col-codec2,.col-melpe,.col-cybeum{background:rgba(var(--c),.07)}
.table-head .col-cell{color:rgb(var(--c));box-shadow:inset 0 -2px 0 rgba(var(--c),.55)}

.rate-cell .player,
.speaker-original .player{
  border-color:rgba(var(--c),.42);
  box-shadow:0 0 20px -6px rgba(var(--c),.55), inset 0 0 20px -14px rgba(var(--c),.9);
}
.rate-cell .player:hover,
.speaker-original .player:hover{
  border-color:rgba(var(--c),.85);
  box-shadow:0 0 30px -4px rgba(var(--c),.8), inset 0 0 22px -12px rgba(var(--c),1);
}
.rate-cell .player-btn,
.speaker-original .player-btn{
  background:linear-gradient(135deg, rgb(var(--c)), rgba(var(--c),.55));
  box-shadow:0 0 14px -2px rgba(var(--c),.8);
}
.rate-cell .wave-fill span,
.speaker-original .wave-fill span{background:linear-gradient(180deg, rgb(var(--c)), rgba(var(--c),.45))}
/* the white button needs a dark glyph — #fff on #fff is invisible */
.speaker-original .icon-play{border-left-color:#0B1220}
.speaker-original .icon-pause span{background:#0B1220}
.rate-cell .player-empty{border-color:rgba(var(--c),.3)}

.speaker{position:relative;z-index:0;display:flex;flex-wrap:nowrap;align-items:stretch;border-bottom:1px solid var(--line)}

.speaker-info{
  flex:0 0 210px;min-width:0;padding:22px 18px;
  display:flex;flex-direction:column;justify-content:center;gap:7px;
  border-right:1px solid var(--line2);
}
.speaker-name{display:flex;align-items:center;gap:9px}
.speaker-mark{width:8px;height:8px;border-radius:2px;transform:rotate(45deg);background:linear-gradient(135deg,var(--accent),var(--cyan))}
.speaker-title{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:17px;letter-spacing:-.015em}
.speaker-sub{font-size:13.5px;line-height:1.45;color:var(--fg2)}

.speaker-original{flex:0 0 265px;min-width:0;padding:16px 18px;display:flex;align-items:center;border-right:1px solid var(--line2)}
.speaker-coded{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}

.rate-row{flex:1 1 0;display:flex;flex-wrap:nowrap;align-items:stretch;border-bottom:1px solid var(--line2)}
.rate-row:last-child{border-bottom:0}
.rate-label{
  flex:0 0 84px;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:2px;
  padding:16px 0 16px 18px;border-right:1px solid var(--line2);
}
.rate-value{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:20px;letter-spacing:-.02em}
.rate-unit{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--fg2)}
.rate-cell{flex:1 1 0;min-width:0;padding:14px 18px;border-right:1px solid var(--line2)}
.rate-cell:last-child{border-right:0}

/* ---------------- player card ---------------- */

.player{
  display:flex;flex-direction:column;gap:9px;padding:11px 12px 12px;
  border-radius:14px;border:1px solid var(--line);background:var(--panel-solid);
  transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s,border-color .22s;
}
.player:hover{transform:translateY(-3px);box-shadow:0 16px 34px -14px var(--glow);border-color:var(--accent)}
.player-lg{width:100%;gap:10px;padding:12px 13px 13px}
.rate-cell .player{height:100%}

/* codec with no mode at this bitrate */
.player-empty{
  align-items:center;justify-content:center;gap:5px;text-align:center;
  border-style:dashed;background:transparent;
}
.player-empty:hover{transform:none;box-shadow:none;border-color:var(--line)}
.player-empty-label{
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg3);
}
.player-empty-note{font-size:12.5px;color:var(--fg3);opacity:.7}


.player-controls{display:flex;align-items:center;gap:10px}
.player-lg .player-controls{gap:11px}

.player-btn{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--cyan));
  box-shadow:0 6px 16px -6px var(--glow);transition:transform .18s;
}
.player-btn:hover{transform:scale(1.09)}
.player-lg .player-btn{width:36px;height:36px}

.icon-pause{display:flex;gap:3px}
.icon-pause span{width:3px;height:11px;border-radius:1px;background:#fff}
.player-lg .icon-pause span{height:12px}
.icon-play{width:0;height:0;margin-left:2px;border-left:9px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent}

.wave{position:relative;flex:1 1 auto;height:34px;cursor:pointer}
.player-lg .wave{height:38px}
.wave-layer{position:absolute;inset:0;display:flex;align-items:center;gap:1px}
.wave-layer span{flex:1 1 0;border-radius:1.5px;height:40%}
.wave-base span{background:var(--wave)}
.wave-fill{clip-path:inset(0 100% 0 0)}
.wave-fill span{background:linear-gradient(180deg,var(--cyan),var(--accent))}

.player-time{flex:0 0 auto;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--fg2);white-space:nowrap}

/* stated algorithmic delay for the mode; value picks up the column colour */
.player-metric{
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  padding:7px 0 1px;border-top:1px solid var(--line2);
}
.player-metric-label{
  font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--fg3);white-space:nowrap;
}
.player-metric-value{
  font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:13.5px;
  letter-spacing:-.01em;color:rgb(var(--c, 148,163,184));white-space:nowrap;
}

/* Three codec columns need real width. Below this the table returns to the
   stacked/wrapping layout rather than squeezing the players unusably thin. */
@media (max-width:1120px){
  .table-head,.table-head .col-coded,.speaker,.rate-row{flex-wrap:wrap}
  .table-head .col-sample,.speaker-info{flex:1 1 190px;min-width:150px}
  .table-head .col-original,.speaker-original{flex:1 1 260px;min-width:220px}
  .table-head .col-coded,.speaker-coded{flex:1 1 100%;min-width:0}
  .table-head .col-cell,.rate-cell{flex:1 1 220px;min-width:200px}
}

/* ---------------- motion preferences ---------------- */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-bars span,.hero-halo,.hero-wave{animation:none}
  .player,.player-btn{transition:none}
  .player:hover,.player-btn:hover{transform:none}
}