:root{--bg:#050505}
body{background-color:var(--bg);color:#e5e5e5;font-family:'Inter',sans-serif;overflow-x:hidden;
background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E")}
.font-serif-text{font-family:'Playfair Display',serif}
#board{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:2.4rem 3rem;width:100%}
.lyric{--rot:0deg;rotate:var(--rot);max-width:min(var(--mw),100%);cursor:pointer;outline:none;line-height:1.25;
 text-shadow:0 2px 12px rgba(0,0,0,.6);opacity:0;animation:in .8s ease forwards;animation-delay:var(--d);
 transition:rotate .5s cubic-bezier(.175,.885,.32,1.275),scale .4s cubic-bezier(.175,.885,.32,1.275),opacity .5s,filter .5s}
@keyframes in{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
.dim .lyric:not(.on){opacity:.15!important;filter:blur(3px);scale:.98}
.lyric.on{rotate:0deg;scale:1.08;opacity:1!important;filter:none;z-index:50;animation:none}
#card{position:fixed;left:0;top:0;z-index:100;width:min(22rem,calc(100vw - 24px));padding:1.1rem 1.2rem .8rem;
 background:rgba(18,18,18,.78);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.14);
 border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.8);opacity:0;pointer-events:none;transform:translateY(10px) scale(.97);
 transition:opacity .3s,transform .35s cubic-bezier(.175,.885,.32,1.275)}
#card.show{opacity:1;pointer-events:auto;transform:none}
#card .q{color:#fff;overflow-wrap:anywhere}
#card .meta{display:flex;align-items:center;gap:.9rem;margin-top:.9rem;padding-top:.7rem;border-top:1px solid rgba(255,255,255,.1)}
#card button{display:flex;align-items:center;gap:.4rem;color:#737373;font-size:.75rem;outline:none;transition:color .2s}
#card button:hover,#card button.liked{color:#fff}
.heart-active{animation:pulse .3s ease-in-out}
@keyframes pulse{50%{transform:scale(1.25)}}
::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:#333;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.lyric{opacity:1}}