:root{color:#383236;font-synthesis:none;-webkit-font-smoothing:antialiased;--muted:#b6a5aa;--cursor-default:url(/cursors/cursor.png), auto;--cursor-pointer:url(/cursors/pointer.png) 10 4, pointer;background:#fdf5f3;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif}*,:before,:after{box-sizing:border-box}*{cursor:var(--cursor-default)}body{min-width:320px;margin:0}img{display:block}a{color:inherit;text-decoration:none}a,a *{cursor:var(--cursor-pointer)}a:focus-visible{outline-offset:3px;outline:2px solid #d4919a}.tracks-page{background:#fcf7f6;min-width:0;height:100svh;min-height:680px;padding:clamp(16px,2vw,32px);display:flex}.tracks-grid{flex:1;grid-template-rows:repeat(4,minmax(0,1fr));grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;min-width:0;min-height:0;display:grid}.track-card{text-align:center;background:linear-gradient(135deg,#ffffffb3,#ffffff6b);border:0;border-radius:19px;justify-content:center;align-items:center;min-width:0;min-height:0;transition:transform .25s cubic-bezier(.4,0,.2,1),box-shadow .25s cubic-bezier(.4,0,.2,1);display:flex;position:relative;overflow:hidden;box-shadow:inset 0 1px #ffffffb3,0 1px 3px #00000006}.track-card--link{cursor:var(--cursor-pointer)}.track-card--static,.track-card--static *{cursor:var(--cursor-default)}.track-card:hover,.track-card:focus-visible{z-index:1;transform:scale(1.03);box-shadow:inset 0 1px #fff9,0 4px 16px #0000000f}.track-card--link:active{transform:scale(.97)}.track-card__art{aspect-ratio:1;object-fit:cover;mix-blend-mode:multiply;opacity:.82;pointer-events:none;background:#fbf3e8;border-radius:50%;width:min(42%,132px);height:auto;transition:opacity .25s cubic-bezier(.4,0,.2,1),transform .25s cubic-bezier(.4,0,.2,1);position:absolute}.track-card:hover .track-card__art,.track-card:focus-visible .track-card__art{opacity:0;transform:scale(.95)}.track-card__info{z-index:1;opacity:0;pointer-events:none;flex-direction:column;align-items:center;gap:3px;max-width:calc(100% - 24px);max-height:0;transition:max-height .25s cubic-bezier(.4,0,.2,1),opacity .25s cubic-bezier(.4,0,.2,1),transform .25s cubic-bezier(.4,0,.2,1);display:flex;position:relative;overflow:hidden;transform:translateY(6px)}.track-card:hover .track-card__info,.track-card:focus-visible .track-card__info{opacity:1;max-height:80px;transform:translateY(0)}.track-card__name{letter-spacing:.1em;font-size:clamp(17px,1.65vw,26px);font-weight:350}.track-card__desc{text-overflow:ellipsis;white-space:nowrap;width:100%;color:var(--muted);font-size:clamp(11px,1vw,15px);overflow:hidden}@media (max-width:800px){.tracks-page{height:auto;min-height:100svh;padding:18px}.tracks-grid{grid-template-rows:none;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(170px,auto)}.track-card__art{width:min(46%,86px);transform:translateY(-17px)}.track-card__info{opacity:1;max-height:70px;margin-top:100px;transform:none}.track-card:hover .track-card__art,.track-card:focus-visible .track-card__art{opacity:.82;transform:translateY(-17px)}.track-card:hover .track-card__info,.track-card:focus-visible .track-card__info{transform:none}.track-card__name{font-size:clamp(15px,2vw,18px)}.track-card__desc{font-size:11px}}@media (max-width:480px){.tracks-page{padding:12px}.tracks-grid{grid-auto-rows:minmax(150px,auto);gap:9px}.track-card{border-radius:15px}.track-card__art{width:min(46%,86px)}}@media (hover:none){.track-card__art{opacity:.8;width:min(43%,86px);transform:translateY(-17px)}.track-card__info{opacity:1;max-height:70px;margin-top:100px;transform:none}.track-card__name{font-size:16px}.track-card__desc{font-size:10px}.track-card:hover{transform:none}.track-card:hover .track-card__art{opacity:.8;transform:translateY(-17px)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}