/* Palette and pill style from the MyHub home mockup (.pill / .pill.sm): wings palette only. */
@font-face{font-family:Rajdhani;font-weight:600;font-display:swap;src:url(fonts/rajdhani-600.ttf) format('truetype')}
@font-face{font-family:'Exo 2';font-weight:400;font-display:swap;src:url(fonts/exo2-400.ttf) format('truetype')}
:root{--bd1:#262626;--bd2:#1f1f1f;--bl1:#3d3d3d;--bl2:#474747;--acc:#37aac8;--accl:#6fc3d9;--accd:#2a8aa3;--neu:#939dac;--neul:#c3c9d1;--neud:#6b7480;--spring:cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box;margin:0}
body{background:var(--bd2);color:var(--neu);font:400 1rem/1.55 'Exo 2',sans-serif;min-height:100vh;padding:16px 16px 28px}
h1,.pill,.code{font-family:Rajdhani,sans-serif;font-weight:600;text-transform:uppercase}
.top{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;margin-bottom:12px}
h1{color:var(--acc);letter-spacing:.22em;font-size:clamp(1.5rem,4vw,2.4rem);line-height:1}
.sub{color:var(--neud);font-size:.9rem}
.bar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:var(--bd1);border-left:14px solid var(--acc);border-radius:0 24px 24px 0;padding:10px 18px;margin-bottom:16px}
.vl{display:flex;align-items:center;gap:10px;font:600 .95rem Rajdhani;letter-spacing:.2em;color:var(--acc)}
.vl input{width:min(260px,40vw);accent-color:var(--acc)}
#volv{color:var(--neul);min-width:3ch;letter-spacing:.05em}
.status{margin-left:auto;color:var(--neud);font-size:.9rem}
.grid{display:grid;grid-template-columns:repeat(10,1fr);gap:8px}
/* pill button (matches .pill.sm: full pill radius, silver fill, dark Rajdhani caps, wide tracking) */
.pill{display:flex;justify-content:center;align-items:center;text-decoration:none;color:var(--bd2);background:var(--neu);border-radius:22px;border:0;cursor:pointer;letter-spacing:.2em;
  transition:background-color .3s,color .3s,box-shadow .3s,transform .35s var(--spring)}
.pill:hover{background:var(--neul);transform:scale(1.05)}
.pill:active{transform:scale(1.0)}
.pill:focus-visible{outline:2px solid var(--accl);outline-offset:2px}
.btn{flex-direction:column;gap:0;min-height:62px;padding:6px 8px;white-space:nowrap;overflow:hidden}
.btn .code{font-size:1.45rem;line-height:1.05;letter-spacing:.14em}
.btn .nm{font:600 .74rem/1.15 Rajdhani,sans-serif;letter-spacing:.1em;text-transform:uppercase;opacity:.75;max-width:100%;overflow:hidden;text-overflow:ellipsis}
/* playing: lit accent fill and glow; removed exactly at sound end (see app.js) */
.btn.lit,.btn.lit:hover{background:var(--acc);color:var(--bd2);box-shadow:0 0 0 2px var(--accl),0 0 18px 4px rgba(55,170,200,.65)}
/* blank: dimmed pill */
.btn.blank{background:var(--bl1);color:var(--neud);cursor:default;opacity:.55}
.btn.blank:hover{background:var(--bl2);transform:scale(1.05)}
.stop{background:var(--accd);color:var(--bd2);padding:8px 26px;font-size:1.1rem}
.stop:hover{background:var(--accl)}
footer{margin-top:16px;color:var(--neud);font-size:.85rem}
@media(max-width:900px){.grid{grid-template-columns:repeat(5,1fr)}.btn .code{font-size:1.2rem}}
@media(max-width:480px){.grid{grid-template-columns:repeat(3,1fr)}.status{margin-left:0}}