:root{color:#141615;background:#eceee8;font-family:Inter,SF Pro Display,SF Pro Text,system-ui,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;--paper: #eceee8;--paper-strong: #fbfaf5;--ink: #141615;--muted: #6d716b;--line: rgba(20, 22, 21, .13);--glass: rgba(250, 250, 246, .7);--teal: #0b6770;--clay: #a83f51;--moss: #66734d;--shadow-soft: 0 18px 60px rgba(30, 34, 31, .16)}*{box-sizing:border-box}html{background:var(--paper)}body{margin:0;min-width:320px;min-height:100vh;-webkit-font-smoothing:antialiased;overflow:hidden}button,input{font:inherit}button{color:inherit}#root{min-height:100vh}.app-shell{position:relative;min-height:100dvh;overflow:hidden;background:linear-gradient(105deg,#0b67702b,#eceee800 34%,#a83f511f 75%,#66734d1f),linear-gradient(180deg,#faf8f1,#eceee8 52%,#f1eee7)}.app-shell:before{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;content:"";background:linear-gradient(90deg,rgba(20,22,21,.045) 1px,transparent 1px),linear-gradient(180deg,rgba(20,22,21,.035) 1px,transparent 1px);background-size:86px 86px;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.55),transparent 78%);mask-image:linear-gradient(180deg,rgba(0,0,0,.55),transparent 78%);opacity:.52}.app-shell:after{position:fixed;right:0;bottom:84px;left:0;height:1px;pointer-events:none;content:"";background:linear-gradient(90deg,#14161500,#0b677038,#a83f512e,#14161500)}.topbar{position:fixed;z-index:30;top:18px;right:clamp(16px,3vw,34px);left:clamp(16px,3vw,34px);display:grid;grid-template-columns:minmax(220px,1fr) auto minmax(220px,1fr);align-items:center;pointer-events:none}.library-lockup{justify-self:start;display:inline-flex;align-items:center;gap:11px;min-width:0;pointer-events:auto}.brand-copy{display:grid;gap:2px}.brand-copy span{color:#141615db;font-size:.92rem;font-weight:700}.brand-copy strong{color:var(--muted);font-size:.72rem;font-weight:600;text-transform:uppercase}.icon-button,.player-icon,.play-button{display:inline-grid;place-items:center;border:1px solid rgba(20,22,21,.1);background:var(--glass);box-shadow:0 8px 26px #1e221f17;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);cursor:pointer;transition:transform .22s ease,border-color .22s ease,background .22s ease}.icon-button:hover,.player-icon:hover,.play-button:hover{transform:translateY(-1px);border-color:#1416152e;background:#fffffbe0}.icon-button:focus-visible,.player-icon:focus-visible,.play-button:focus-visible,.segmented-control button:focus-visible,.track-row:focus-visible,.back-button:focus-visible,.empty-state button:focus-visible{outline:2px solid #171615;outline-offset:3px}.icon-button{width:48px;height:48px;border-radius:50%;pointer-events:auto}.icon-button.small{width:36px;height:36px}.segmented-control{display:inline-flex;align-items:center;gap:3px;padding:4px;border:1px solid rgba(20,22,21,.1);border-radius:999px;background:#fafaf69e;box-shadow:0 12px 34px #1e221f1a;-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);pointer-events:auto}.segmented-control button{min-width:88px;height:38px;border:0;border-radius:999px;color:#4d4944;background:transparent;cursor:pointer;transition:background .22s ease,color .22s ease,box-shadow .22s ease}.segmented-control button.active{color:var(--ink);background:#fffffbf0;box-shadow:0 8px 18px #1e221f1a}.search-control{justify-self:end;display:flex;align-items:center;gap:8px;pointer-events:auto}.search-shell{display:grid;grid-template-columns:18px 0fr;align-items:center;gap:8px;height:48px;padding:0 15px;border:1px solid rgba(20,22,21,.1);border-radius:999px;background:#fafaf6ad;box-shadow:0 8px 26px #1e221f17;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);cursor:text;transition:grid-template-columns .26s ease}.search-shell:focus-within,.search-shell.open{grid-template-columns:18px minmax(118px,190px)}.search-shell input{width:100%;min-width:0;border:0;color:var(--ink);background:transparent;outline:0}.search-shell input::placeholder{color:#908b84}.browser-stage{position:relative;z-index:1;height:100dvh;min-height:640px;touch-action:none;-webkit-user-select:none;user-select:none}.album-scene{width:100%;height:100%}.album-scene canvas{display:block;width:100%;height:100%}.player-copy p,.player-copy span,.detail-info p,.detail-info h1{margin:0}.empty-state button{height:38px;padding:0 18px;border:1px solid rgba(23,22,21,.11);border-radius:999px;color:var(--ink);background:#ffffffb8;cursor:pointer}.detail-page{position:fixed;z-index:18;top:0;right:0;bottom:0;left:0;overflow:auto;padding:112px clamp(22px,5vw,76px) 132px;background:linear-gradient(120deg,rgba(11,103,112,.12),rgba(168,63,81,.07) 52%,transparent),linear-gradient(180deg,#faf8f1f5,#e8eae2fa),var(--paper)}.detail-shell{display:grid;grid-template-columns:minmax(300px,42vw) minmax(360px,1fr);gap:clamp(34px,6vw,92px);align-items:start;max-width:1220px;min-height:0;margin:0 auto;padding-top:18px}.back-button{position:fixed;top:86px;left:clamp(22px,5vw,76px);z-index:22;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border:1px solid rgba(23,22,21,.1);border-radius:999px;background:#ffffffad;box-shadow:0 8px 24px #2f2b2514;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);cursor:pointer}.detail-cover-wrap{display:grid;place-items:center;perspective:900px}.detail-cover{width:min(430px,100%);aspect-ratio:1;border-radius:8px;box-shadow:0 36px 80px #26221d38,16px 0 #191716;object-fit:cover;transform:rotateY(-8deg);transform-origin:center}.detail-content{display:grid;gap:22px}.detail-kicker{margin-bottom:18px;color:var(--muted);font-size:.78rem;font-weight:600;text-transform:uppercase}.detail-info h1{max-width:760px;font-size:clamp(2.5rem,5.8vw,5.15rem);font-weight:600;line-height:.94}.detail-artist{margin-top:16px;color:#393633;font-size:clamp(1.2rem,2vw,1.62rem);font-weight:500}.detail-meta{margin-top:9px;color:var(--muted);font-size:.98rem}.detail-description{max-width:620px;margin-top:16px;color:#5f5a53;font-size:1rem;line-height:1.55}.track-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 24px;padding:0;margin:0;list-style:none}.track-list li{min-width:0;container-type:inline-size}.track-row{display:grid;grid-template-columns:34px 24px minmax(0,1fr) minmax(34px,auto);align-items:center;width:100%;min-height:38px;gap:12px;padding:0 12px;overflow:hidden;border:1px solid transparent;border-radius:8px;color:#3e3a35;background:transparent;cursor:pointer;transition:background .18s ease,border-color .18s ease,transform .18s ease}.track-row:hover,.track-row.active{border-color:#17161514;background:#ffffff85}.track-row.active{color:var(--ink);font-weight:500}.track-number,.track-duration,.track-preview{color:#8b857c;font-size:.82rem}.track-play{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;color:#17161585;background:#1716150f}.track-row.active .track-play,.track-row:hover .track-play{color:#f8f5ee;background:#171615}.track-title{overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.track-meta{justify-self:end;display:inline-flex;align-items:center;min-width:0;max-width:100%;gap:10px}.track-preview{flex:0 1 auto;min-width:0;overflow:hidden;padding:4px 8px;border:1px solid rgba(23,22,21,.08);border-radius:999px;background:#ffffff75;text-overflow:ellipsis;white-space:nowrap}.track-duration{flex:0 0 auto;white-space:nowrap}@container (max-width: 350px){.track-preview{display:none}}.mini-player{position:fixed;z-index:40;right:auto;bottom:24px;left:50%;display:grid;grid-template-columns:42px minmax(120px,1fr) auto 86px auto auto;align-items:center;width:min(680px,calc(100vw - 28px));min-height:68px;gap:14px;padding:10px 12px;border:1px solid rgba(255,255,251,.15);border-radius:24px;color:#f9f7ef;background:#131615d1;box-shadow:0 20px 64px #12151442,inset 0 1px #fffffb14;-webkit-backdrop-filter:blur(28px);backdrop-filter:blur(28px);transform:translate(-50%)}.player-cover{width:42px;height:42px;border-radius:50%;object-fit:cover;box-shadow:0 6px 16px #080a095c}.player-copy{min-width:0}.player-copy p{overflow:hidden;color:#fffdf7;font-size:.91rem;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.player-copy span{display:block;overflow:hidden;margin-top:3px;color:#e6e8e0ad;font-size:.8rem;text-overflow:ellipsis;white-space:nowrap}.player-controls,.player-tools{display:inline-flex;align-items:center;gap:6px}.player-icon{width:34px;height:34px;border-radius:50%;color:#f9f7ef;background:#fffffb0d;box-shadow:none}.mini-player .player-icon:hover{color:#151615;background:#fffffbe6}.play-button{width:38px;height:38px;border-color:transparent;border-radius:50%;color:#151615;background:#f9f7ef;box-shadow:0 8px 20px #05060657}.play-button:hover{color:#151615;background:#fffdf7}.play-button:disabled{cursor:not-allowed;opacity:.42}.player-progress{position:relative;width:76px;height:3px;overflow:hidden;border-radius:999px;background:#fffffb2e}.player-progress span{position:absolute;inset:0 auto 0 0;width:42%;border-radius:inherit;background:linear-gradient(90deg,#6ed3dc,#f2abb6)}.preview-badge{display:inline-grid;place-items:center;height:28px;padding:0 9px;border:1px solid rgba(255,255,251,.12);border-radius:999px;color:#fffffbd1;background:#fffffb12;font-size:.76rem;font-weight:600;white-space:nowrap}.player-link{color:inherit;text-decoration:none}.empty-state{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-content:center;gap:16px;text-align:center}.empty-state p{margin:0;color:var(--muted)}@media(max-width:900px){.topbar{top:14px;grid-template-columns:auto 1fr auto;gap:10px}.brand-copy{display:none}.segmented-control{justify-self:center}.segmented-control button{min-width:82px}.search-shell{width:48px;padding:0 14px}.search-shell:focus-within,.search-shell.open{position:fixed;right:16px;left:16px;z-index:50;width:auto;grid-template-columns:18px 1fr}.detail-shell{grid-template-columns:1fr;align-items:start;max-width:680px;min-height:0;padding-top:48px}.detail-cover{width:min(390px,78vw)}.track-list{grid-template-columns:1fr}}@media(max-width:640px){.app-shell:after{bottom:82px}.topbar{left:12px;right:12px}.icon-button{width:44px;height:44px}.segmented-control{padding:3px}.segmented-control button{min-width:72px;height:35px;font-size:.88rem}.browser-stage{min-height:560px}.detail-page{padding:100px 18px 126px}.back-button{top:74px;left:18px}.detail-info h1{font-size:clamp(2.36rem,14vw,4rem)}.detail-cover{width:min(330px,84vw);box-shadow:0 24px 60px #26221d33,10px 0 #191716}.mini-player{grid-template-columns:38px minmax(0,1fr) auto;min-height:64px;gap:11px;padding:9px 10px;border-radius:24px}.player-cover{width:38px;height:38px}.player-progress,.preview-badge,.player-tools,.player-controls .player-icon{display:none}.track-row{grid-template-columns:30px 24px minmax(0,1fr) auto;gap:9px;padding:0 8px}.track-preview{display:none}}