*,*:before,*:after{box-sizing:border-box}:root{color-scheme:light dark;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background-color:#131514;color:#fff;line-height:1.5}body{margin:0;background:#131514}.app{padding:2rem;max-width:640px;width:min(100%,640px);margin:0 auto}.hero-image{display:block;width:min(40vw,160px);height:auto;margin:0 auto 1.5rem;border-radius:0;box-shadow:0 12px 30px #0f172a73}h1{font-size:2.5rem;margin-bottom:.25rem}.subtitle{margin:0 0 2rem;color:#ffffffb3}.input-label{display:block;margin-bottom:1rem}.label-text{display:block;font-weight:600;margin-bottom:.5rem}input{width:100%;padding:.75rem 1rem;border:1px solid rgba(255,255,255,.25);border-radius:.75rem;margin-bottom:1rem;font-size:1rem;color:inherit;background-color:#ffffff0d;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.status{margin:0 0 1.5rem;color:#ffffffd9}.status.error{color:#f87171}.status.message{color:#ffffffb3}.status.request-feedback.success{color:#4ade80}.status.request-feedback.error{color:#fbbf24}.results{list-style:none;padding:0;margin:0;display:grid;gap:1rem}.results li{display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:center;padding:.75rem;border-radius:1rem;background:#ffffff0d;border:1px solid rgba(255,255,255,.12);box-shadow:0 10px 25px #0009}.results img,.artwork-placeholder{width:56px;height:56px;border-radius:.75rem;object-fit:cover;background:#ffffff14}.song-title{margin:0;font-weight:600}.song-meta{margin:.25rem 0 0;color:#ffffffa6;font-size:.95rem}.request-button{border:1px solid rgba(255,255,255,.35);background:#ffffff14;color:#fff;border-radius:999px;padding:.4rem .9rem;font-weight:600;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background .2s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.request-button:hover,.request-button:focus-visible{background:#ffffff26;box-shadow:0 8px 24px #000000b3;transform:translateY(-1px);outline:none}.request-button:active{transform:translateY(0);box-shadow:0 4px 14px #0009}.request-button:disabled{cursor:progress;opacity:.6;transform:none;box-shadow:none}@media(max-width:480px){.app{padding:1.5rem 1rem}h1{font-size:1.75rem}.subtitle{font-size:.95rem}input{padding:.65rem .85rem;font-size:.95rem}.results li{grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:.75rem}.request-button{font-size:.85rem;padding:.35rem .75rem;grid-column:1 / -1;justify-self:stretch}}
