:root{color-scheme:dark;--bg:#0b0b10;--fg:#f4f4f5;--muted:#9ca3af;--accent:#7c5cff;--accent-rec:#ff4d6d;--card:#16161f;--border:#262633}*{box-sizing:border-box}body,html{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none}.wrap{min-height:100dvh;max-width:480px;margin:0 auto;justify-content:center;gap:8px;text-align:center;padding:calc(env(safe-area-inset-top) + 28px) calc(env(safe-area-inset-right) + 20px) calc(env(safe-area-inset-bottom) + 28px) calc(env(safe-area-inset-left) + 20px)}.brand,.wrap{display:flex;flex-direction:column;align-items:center}.brand{gap:10px;margin-bottom:4px}.logo{width:clamp(96px,30vw,132px);height:auto;display:block;filter:drop-shadow(0 8px 24px rgba(0,0,0,.45))}h1{margin:0;font-size:clamp(1.7rem,7vw,2.3rem);letter-spacing:-.02em;background:linear-gradient(180deg,#ffffff,#c9c2ff);-webkit-background-clip:text;background-clip:text;color:transparent}.sub{margin:0 0 22px;color:var(--muted);font-size:clamp(.9rem,3.6vw,1rem);max-width:22em}.mic{width:clamp(120px,42vw,150px);aspect-ratio:1;border-radius:50%;border:none;font-size:clamp(2.2rem,9vw,2.6rem);cursor:pointer;background:var(--accent);color:white;touch-action:manipulation;transition:transform .15s ease,background .2s ease;box-shadow:0 12px 40px rgba(124,92,255,.35)}.mic:active:not(:disabled){transform:scale(.96)}.mic:disabled{opacity:.6;cursor:default}.mic.rec{background:var(--accent-rec);box-shadow:0 12px 40px rgba(255,77,109,.4);animation:pulse 1.2s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.06)}}.hint{margin-top:18px;min-height:1.4em;font-size:clamp(.85rem,3.4vw,.95rem);padding:0 8px}.heard,.hint{color:var(--muted)}.heard{margin:4px 0 0;font-style:italic;font-size:.9rem}.results{list-style:none;padding:0;margin:16px 0 0;width:100%;display:flex;flex-direction:column;gap:10px}.card{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px 16px;text-align:left}.card .meta{display:flex;flex-direction:column;gap:2px;min-width:0}.card .meta strong{font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card .meta span{color:var(--muted);font-size:.85rem}.badges{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}.badge{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:2px 8px;border-radius:999px}.badge.melody{background:rgba(124,92,255,.18);color:#b5a4ff}.badge.lyrics{background:rgba(45,212,191,.18);color:#5eead4}.badge.both{background:rgba(250,204,21,.18);color:#fde047}.card .links{display:flex;gap:10px;flex-shrink:0}.card .links a{color:var(--accent);text-decoration:none;font-size:.85rem;font-weight:600}.card .links a:active{opacity:.7}