*,*: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}fieldset.input-label{border:none;padding:0;margin-inline:0;margin-bottom:1rem}.label-text{display:block;font-weight:600;margin-bottom:.5rem}.link-button{display:inline-block;margin-top:-.5rem;margin-bottom:1rem;padding:0;border:none;background:transparent;color:#ffffffb3;font-size:.875rem;text-decoration:underline;cursor:pointer}.link-button:hover,.link-button:focus-visible{color:#fff}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}.artwork{position:relative;width:56px;height:56px}.results img,.artwork-placeholder{width:56px;height:56px;border-radius:.75rem;object-fit:cover;background:#ffffff14;display:block}.preview-button{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0;border:0;border-radius:inherit;background:#00000080;color:#fff;cursor:pointer;transition:background .15s ease}.preview-button:hover,.preview-button:focus-visible{background:#000000a6;outline:2px solid rgba(255,255,255,.8);outline-offset:-2px}.preview-button[data-state=playing]{background:#0f766eb3}.preview-button[data-state=error]{background:#991b1bb3;color:#fee2e2}.preview-spinner{animation:preview-spin .9s linear infinite}@keyframes preview-spin{to{transform:rotate(360deg)}}.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}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
