*{box-sizing:border-box}html,body{color:#fff;background:#050508;width:100%;height:100%;margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;overflow:hidden}canvas{display:block}.ui{z-index:10;pointer-events:auto;width:min(380px,100vw - 48px);position:fixed;top:32px;left:32px}.eyebrow{letter-spacing:.16em;text-transform:uppercase;color:#ffffff8c;margin:0 0 8px;font-size:12px}h1{letter-spacing:0;margin:0;font-size:clamp(40px,7vw,96px);line-height:.9}.description{color:#ffffffad;margin-top:18px;font-size:15px;line-height:1.5}.controls{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#00000047;border:1px solid #ffffff1f;border-radius:8px;gap:12px;margin-top:22px;padding:14px;display:grid;box-shadow:0 18px 60px #0000003d}.control-label,.file-name,.time-label{color:#ffffffad;font-size:12px}.control-label{letter-spacing:.12em;text-transform:uppercase;font-weight:700}input[type=file]{color:#ffffffb3;width:100%;font-size:12px}input[type=file]::file-selector-button{color:#fff;cursor:pointer;background:#ffffff1a;border:1px solid #ffffff3d;border-radius:999px;margin-right:10px;padding:8px 12px}input[type=range]{accent-color:#8ee7ff;width:100%}button{appearance:none;color:#000;cursor:pointer;background:#fff;border:0;border-radius:999px;padding:10px 16px;font-weight:700}button:disabled{opacity:.45;cursor:not-allowed}.file-name{text-overflow:ellipsis;white-space:nowrap;min-height:17px;overflow:hidden}.transport{grid-template-columns:auto 38px minmax(0,1fr) 38px;align-items:center;gap:10px;display:grid}.time-label{font-variant-numeric:tabular-nums;text-align:center}.volume-control{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px;display:grid}.meters{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#00000038;border-radius:8px;gap:10px;margin-top:14px;padding:12px;display:grid}.meters span{letter-spacing:.12em;text-transform:uppercase;color:#ffffff94;margin-bottom:5px;font-size:11px;display:block}.meter{background:#ffffff1f;border-radius:999px;width:100%;height:5px;overflow:hidden}.meter>div{border-radius:inherit;background:#fff;width:0%;height:100%}@media (width<=560px){.ui{width:calc(100vw - 40px);top:20px;left:20px}h1{font-size:44px}.transport{grid-template-columns:auto 38px 1fr 38px}}