.dd-card{--card-w:168px;--tilt-x:0deg;--tilt-y:0deg;--glare-x:50%;--glare-y:30%;--glare-o:0;width:var(--card-w);aspect-ratio:5/7;font-size:calc(var(--card-w) / 168 * 16px);perspective:900px;-webkit-user-select:none;user-select:none;position:relative}.dd-card[data-size=sm]{--card-w:120px}.dd-card[data-size=lg]{--card-w:232px}.dd-card__tilt{transform-style:preserve-3d;transform:rotateX(var(--tilt-x)) rotateY(var(--tilt-y));transition:transform .18s ease-out;position:absolute;inset:0}.dd-card__inner{transform-style:preserve-3d;position:absolute;inset:0}.dd-card__face{border-radius:var(--dd-card-radius);backface-visibility:hidden;position:absolute;inset:0;overflow:hidden;box-shadow:inset 0 1px #ffffff40,0 .9em 1.6em -.6em #0000008c,0 .15em .3em #0000004d}.dd-card__face--back{transform:rotateY(180deg)}.dd-card__face:after{content:"";pointer-events:none;border-radius:inherit;opacity:var(--glare-o);background:radial-gradient(circle at var(--glare-x) var(--glare-y), #ffffff8c, #ffffff1f 28%, transparent 60%);mix-blend-mode:soft-light;transition:opacity .2s;position:absolute;inset:0}.dd-card__front{background:linear-gradient(160deg, #ffffff59, transparent 40%), var(--dd-card-paper);color:var(--dd-card-ink);flex-direction:column;padding:.6em;display:flex}.dd-card__art{aspect-ratio:1;z-index:1;width:72%;position:relative}.dd-card__cover{z-index:2;background-position:50%;background-size:cover;border-radius:.35em;position:absolute;inset:0;box-shadow:.2em 0 .5em #00000059}.dd-card__disc{aspect-ratio:1;background:radial-gradient(circle, var(--dd-card-vinyl) 0 4%, var(--dd-card-label) 4.5% 26%, transparent 26.5%), repeating-radial-gradient(circle, #1b1721 0 1.2%, #0d0b10 1.2% 2.2%), var(--dd-card-vinyl);z-index:1;border-radius:50%;width:92%;transition:left .4s cubic-bezier(.2,.8,.2,1);position:absolute;top:4%;left:30%;box-shadow:0 0 0 1px #0006}.dd-card:hover .dd-card__disc,.dd-card[data-spin=true] .dd-card__disc{left:38%}.dd-card__disc:after{content:"";background:conic-gradient(from 200deg, transparent 0 20%, #ffffff24 25%, transparent 32% 70%, #ffffff14 75%, transparent 80%);border-radius:50%;position:absolute;inset:0}.dd-card__year{font-family:var(--dd-font-display);letter-spacing:-.01em;font-variant-numeric:tabular-nums;margin-top:auto;font-size:3.2em;font-weight:900;line-height:.82}.dd-card[data-size=sm] .dd-card__title{-webkit-line-clamp:1}.dd-card__title{-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-top:.3em;font-size:.82em;font-weight:700;line-height:1.15;display:-webkit-box;overflow:hidden}.dd-card__artist{color:var(--dd-card-ink-muted);white-space:nowrap;text-overflow:ellipsis;margin-top:.1em;font-size:.72em;overflow:hidden}.dd-card__back{background:linear-gradient(160deg, #ffffff14, transparent 45%), var(--dd-card-back);place-items:center;display:grid}.dd-card__window{aspect-ratio:1;background:radial-gradient(circle, var(--dd-card-back) 0 4%, var(--dd-card-label) 4.5% 30%, transparent 30.5%), repeating-radial-gradient(circle, #221d29 0 1.3%, #0d0b10 1.3% 2.4%);border-radius:50%;place-items:center;width:74%;display:grid;box-shadow:inset 0 .3em .7em #000c,0 0 0 .25em #ffffff0a}.dd-card__window span{font-family:var(--dd-font-display);color:var(--dd-accent-ink);font-size:2.2em;font-weight:900}.dd-card__spine{font-family:var(--dd-font-display);letter-spacing:.18em;color:#f1e7d366;writing-mode:vertical-rl;font-size:.8em;font-weight:700;position:absolute;bottom:.6em;left:.55em;transform:rotate(180deg)}.dd-card[data-result=correct] .dd-card__face{box-shadow:0 0 0 .2em var(--dd-success), 0 .9em 1.6em -.6em #0000008c}.dd-card[data-result=wrong] .dd-card__face{box-shadow:0 0 0 .2em var(--dd-danger), 0 .9em 1.6em -.6em #0000008c}.dd-card[data-size=compact]{--card-w:64px;aspect-ratio:9/16;font-size:16px}.dd-card[data-size=compact] .dd-card__front{align-items:center;padding:.35em .3em}.dd-card[data-size=compact] .dd-card__art{width:100%}.dd-card[data-size=compact] .dd-card__disc{display:none}.dd-card[data-size=compact] .dd-card__year{writing-mode:vertical-rl;margin:auto 0 0;font-size:1.7em;transform:rotate(180deg)}.dd-card[data-size=compact] .dd-card__title,.dd-card[data-size=compact] .dd-card__artist{display:none}.dd-card[data-size=compact] .dd-card__window{width:86%}.dd-card[data-size=compact] .dd-card__window span{font-size:1.2em}.dd-card[data-size=compact] .dd-card__spine{display:none}.dd-card[data-era="50s"] .dd-card__front{background:linear-gradient(0deg,#2ec4b6 0 .35em,#fdf6e3 .35em .55em,#e63946 .55em .9em,#0000 .9em) bottom/100% .9em no-repeat,radial-gradient(circle at 30% 20%,#fffdf5,#f6ecd2);padding-bottom:1.05em;box-shadow:inset 0 0 0 .22em #c9ccd1,inset 0 0 0 .3em #fff}.dd-card[data-era="50s"] .dd-card__year{color:#e63946;text-shadow:.04em .04em #fff,.08em .08em #2ec4b6;font-style:italic}.dd-card[data-era="70s"] .dd-card__front{color:#fff6e6;background:linear-gradient(#f4d35e 0 18%,#f4a259 18% 36%,#e76f51 36% 54%,#b5452a 54% 72%,#6b2d1a 72%)}.dd-card[data-era="70s"] .dd-card__year{color:#fff6e6;letter-spacing:.02em;text-shadow:.05em .05em #6b2d1a}.dd-card[data-era="70s"] .dd-card__artist{color:#fff6e6cc}.dd-card[data-era="80s"] .dd-card__front{color:#f5e9ff;background:repeating-linear-gradient(0deg,#0000002e 0 1px,#0000 1px 3px),linear-gradient(#0000 62%,#ff00aa8c 62.4%,#0000 63%),repeating-linear-gradient(90deg,#0000 0 1.6em,#00f0ff66 1.6em 1.68em) bottom/100% 38% no-repeat,radial-gradient(circle at 50% 62%,#ffcc4d 0 18%,#ff5f9e 26%,#0000 27%),linear-gradient(#1a0b3d,#3b0f5e 60%,#120526 61%)}.dd-card[data-era="80s"] .dd-card__year{color:#fff;text-shadow:0 0 .12em #00f0ff,0 0 .35em #f0a,.04em .04em #f0a}.dd-card[data-era="80s"] .dd-card__artist{color:#f5e9ffbf}.dd-card[data-era="90s"] .dd-card__front{color:#000;background:#c3c3c3;padding-top:1.55em;font-family:Tahoma,Verdana,Segoe UI,sans-serif;box-shadow:inset .08em .08em #fff,inset -.08em -.08em #6e6e6e,inset -.16em -.16em #3c3c3c}.dd-card__titlebar{color:#fff;background:linear-gradient(90deg,#000a7a,#1185d4);align-items:center;gap:.15em;height:1.15em;padding:0 .25em;font-size:.62em;font-weight:700;display:flex;position:absolute;inset:.2em .2em auto}.dd-card__titlebar span{white-space:nowrap;flex:1;overflow:hidden}.dd-card__titlebar i{background:#c3c3c3;width:1.1em;height:.9em;box-shadow:inset .08em .08em #fff,inset -.08em -.08em #3c3c3c}.dd-card[data-era="90s"] .dd-card__year{letter-spacing:-.06em;font-family:Courier New,ui-monospace,monospace;font-size:2.45em;font-weight:800}.dd-card[data-era="90s"] .dd-card__artist{color:#3c3c3c}.dd-card[data-era="00s"] .dd-card__front{color:#1c2533;background:linear-gradient(115deg,#0000 30%,#a0dcff73 45%,#ffaaf059 55%,#0000 70%),repeating-linear-gradient(90deg,#fff3 0 1px,#0000 1px 3px),linear-gradient(#f4f6f9,#b9c0ca 55%,#e9edf2)}.dd-card[data-era="00s"] .dd-card__year{background:linear-gradient(#fff 0 30%,#7a8796 50%,#2b3442 52%,#c8d2de 100%);color:#0000;-webkit-text-stroke:.02em #4a5565;-webkit-background-clip:text;background-clip:text}.dd-card[data-era="10s"] .dd-card__front{color:#fff;background:linear-gradient(140deg,#ff5f6d,#ffc371 40%,#3ecfaf 75%,#4f6df5)}.dd-card[data-era="10s"] .dd-card__year{color:#fff;font-weight:900}.dd-card[data-era="10s"] .dd-card__artist{color:#ffffffd9}.dd-card[data-era="20s"] .dd-card__front{color:#1d1640;background:radial-gradient(circle at 15% 85%,#7b5cff 0 25%,#0000 45%),radial-gradient(circle at 90% 75%,#ff6fb1 0 22%,#0000 42%),radial-gradient(circle at 70% 10%,#33d6ff 0 20%,#0000 40%),#e9e6ff}.dd-card[data-era="20s"] .dd-card__front:before{content:"";border-radius:calc(var(--dd-card-radius) - .25em);-webkit-backdrop-filter:blur(10px);background:#ffffff61;border:1px solid #ffffffb3;position:absolute;inset:.35em}.dd-card[data-era="20s"] .dd-card__front>*,.dd-card[data-era="20s"] .dd-card__art{position:relative}.dd-card[data-size=compact] .dd-card__titlebar{display:none}.dd-card[data-size=compact][data-era="90s"] .dd-card__front{padding-top:.35em}