:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font:16px/1.5 system-ui,Segoe UI,Roboto,sans-serif}body{color:#f2f2f2;background:#0d0d0e;min-height:100svh;margin:0}#root{min-height:100svh}.disc{aspect-ratio:1;cursor:pointer;background:radial-gradient(circle at 35% 30%, #ffffff8c, transparent 45%), conic-gradient(from 0deg, hsl(var(--disc-hue), 85%, 60%), hsl(calc(var(--disc-hue) + 60), 85%, 55%), hsl(calc(var(--disc-hue) + 120), 80%, 50%), hsl(calc(var(--disc-hue) + 180), 85%, 55%), hsl(calc(var(--disc-hue) + 240), 85%, 60%), hsl(var(--disc-hue), 85%, 60%));border:none;border-radius:50%;justify-content:center;align-items:center;width:100%;padding:0;transition:transform .2s,box-shadow .2s;display:flex;position:relative;box-shadow:0 4px 14px #00000073,inset 0 0 0 2px #ffffff26}.disc:hover{transform:scale(1.04)rotate(6deg);box-shadow:0 8px 20px #0000008c,inset 0 0 0 2px #fff3}.disc:active{transform:scale(.98)}.disc__art{object-fit:cover;border-radius:50%;width:100%;height:100%;position:absolute;inset:0}.disc__sheen{pointer-events:none;background:linear-gradient(115deg,#0000 40%,#ffffff59 48%,#0000 56%);border-radius:50%;position:absolute;inset:0}.disc__label{text-align:center;color:#000000b8;text-shadow:0 1px #ffffff40;-webkit-line-clamp:3;-webkit-box-orient:vertical;width:62%;font-family:Courier New,monospace;font-size:.7rem;font-weight:700;line-height:1.15;display:-webkit-box;position:relative;overflow:hidden}.disc__hole{aspect-ratio:1;background:#1a1a1a;border-radius:50%;width:16%;position:absolute;box-shadow:inset 0 0 0 2px #ffffff1f}.sleeve{background:linear-gradient(160deg,#ffffff17,#ffffff05);border:1px solid #ffffff1f;border-radius:14px;flex-direction:column;align-items:center;gap:.5rem;min-width:0;padding:.85rem;display:flex;box-shadow:inset 0 1px #ffffff14,0 2px 8px #00000040}.sleeve__pocket{width:100%;padding:.4rem}.sleeve__info{text-align:center;flex-direction:column;align-items:center;gap:.15rem;width:100%;min-width:0;display:flex}.sleeve__name{color:#f2f2f2;text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-size:.8rem;font-weight:600;overflow:hidden}.sleeve__meta{color:#ffffff80;align-items:center;gap:.4rem;font-size:.68rem;display:flex}.sleeve__badge{color:#ffffffa6;text-transform:uppercase;letter-spacing:.03em;background:#ffffff1a;border-radius:999px;padding:.05rem .4rem;font-size:.6rem}.page{background:linear-gradient(160deg,#1c1c1f,#131315);border-radius:10px;flex:1 1 0;min-width:0;padding:1rem;box-shadow:inset 0 0 20px #00000080}.page__grid{grid-template-columns:repeat(2,1fr);gap:1rem;display:grid}@media (width>=640px){.page__grid{grid-template-columns:repeat(3,1fr)}}.case{background:#0a0a0b;border-radius:18px;align-items:stretch;gap:.75rem;width:100%;max-width:900px;margin:0 auto;padding:1.25rem;display:flex;box-shadow:0 20px 50px #00000080,inset 0 0 0 1px #ffffff0f}.case__spine{flex:0 0 18px;justify-content:center;padding:.5rem 0;display:flex}.case__zipper{background:repeating-linear-gradient(#4a4a4a 0 4px,#2a2a2a 4px 8px);border-radius:999px;width:6px;height:100%;box-shadow:0 0 0 1px #ffffff0d}@media (width<=640px){.case{flex-direction:column}.case__spine{display:none}}.page-nav{justify-content:center;align-items:center;gap:1.25rem;margin-top:1.5rem;display:flex}.page-nav__btn{color:#f2f2f2;cursor:pointer;background:#ffffff14;border:1px solid #ffffff26;border-radius:999px;padding:.45rem .9rem;font-size:.85rem;transition:background .15s}.page-nav__btn:hover:not(:disabled){background:#ffffff29}.page-nav__btn:disabled{opacity:.3;cursor:default}.page-nav__dots{gap:.5rem;display:flex}.page-nav__dot{cursor:pointer;background:#ffffff40;border:none;border-radius:50%;width:8px;height:8px;padding:0}.page-nav__dot--active{background:#f2f2f2}.tracklist-overlay{z-index:20;background:#0009;justify-content:center;align-items:center;padding:1.5rem;display:flex;position:fixed;inset:0}.tracklist{background:#17171a;border:1px solid #ffffff1a;border-radius:16px;flex-direction:column;width:100%;max-width:460px;max-height:80vh;display:flex;overflow:hidden;box-shadow:0 24px 60px #0009}.tracklist__header{border-bottom:1px solid #ffffff14;justify-content:space-between;align-items:flex-start;gap:1rem;padding:1.25rem 1.25rem 1rem;display:flex}.tracklist__title{color:#f2f2f2;margin:0 0 .2rem;font-size:1.05rem}.tracklist__subtitle{color:#ffffff80;margin:0;font-size:.8rem}.tracklist__close{color:#fff9;cursor:pointer;background:0 0;border:none;padding:.1rem .3rem;font-size:1.5rem;line-height:1}.tracklist__close:hover{color:#fff}.tracklist__tracks{margin:0;padding:.5rem 0;list-style:none;overflow-y:auto}.tracklist__track{align-items:center;gap:.75rem;padding:.55rem 1.25rem;display:flex}.tracklist__track:hover{background:#ffffff0a}.tracklist__index{color:#ffffff59;text-align:right;flex-shrink:0;width:1.2rem;font-size:.75rem}.tracklist__track-name{flex-direction:column;flex:1;min-width:0;display:flex}.tracklist__track-title{color:#f2f2f2;text-overflow:ellipsis;white-space:nowrap;font-size:.85rem;overflow:hidden}.tracklist__track-artist{color:#ffffff73;text-overflow:ellipsis;white-space:nowrap;font-size:.72rem;overflow:hidden}.tracklist__duration{color:#fff6;flex-shrink:0;font-size:.75rem}.tracklist__loading{text-align:center;color:#ffffff80;padding:2rem 1.25rem;font-size:.85rem}.tracklist__fallback{text-align:center;color:#ffffffa6;flex-direction:column;align-items:center;gap:1rem;padding:1.5rem 1.25rem;font-size:.85rem;display:flex}.tracklist__spotify-link{color:#1db954;font-weight:600;text-decoration:none}.tracklist__spotify-link:hover{text-decoration:underline}.connect{text-align:center;background:#17171a;border:1px solid #ffffff1a;border-radius:16px;width:100%;max-width:420px;margin:0 auto;padding:2.5rem 2rem}.connect__title{margin:0 0 .75rem;font-size:1.3rem}.connect__body{color:#fff9;margin:0 0 1.5rem;font-size:.9rem;line-height:1.5}.connect__error{color:#ff6b6b;margin:0 0 1.25rem;font-size:.85rem}.connect__warning{color:#f2c94c;margin:0 0 1.25rem;font-size:.8rem;line-height:1.5}.connect__warning code{background:#ffffff14;border-radius:4px;padding:.1rem .35rem}.connect__actions{flex-direction:column;gap:.75rem;display:flex}.connect__btn{cursor:pointer;color:#f2f2f2;background:#ffffff14;border:1px solid #ffffff26;border-radius:999px;padding:.7rem 1.25rem;font-size:.9rem;font-weight:600}.connect__btn:hover:not(:disabled){background:#ffffff24}.connect__btn:disabled{opacity:.4;cursor:default}.connect__btn--primary{color:#0a0a0b;background:#1db954;border-color:#1db954}.connect__btn--primary:hover:not(:disabled){background:#1ed760}.app{flex-direction:column;align-items:center;min-height:100svh;padding:2.5rem 1.25rem 3rem;display:flex}.app__header{text-align:center;margin-bottom:2rem}.app__title{letter-spacing:-.02em;margin:0 0 .35rem;font-size:2rem;font-weight:700}.app__subtitle{color:#ffffff8c;margin:0;font-size:.95rem}.app__logout{color:#fff9;cursor:pointer;background:0 0;border:1px solid #ffffff26;border-radius:999px;margin-top:.9rem;padding:.3rem .8rem;font-size:.75rem}.app__logout:hover{color:#f2f2f2;background:#ffffff14}.app__status{color:#ffffff8c;margin-top:2rem;font-size:.9rem}