:root{--tf-color-bg: transparent;--tf-color-surface: #F5F8F6;--tf-color-text-primary: #1a1a1a;--tf-color-text-on-accent: #fff;--tf-color-text-secondary: #676767;--tf-color-accent: #45785E;--tf-color-border: #e0e0e0;--tf-font-family: inherit;--tf-font-size-sm: .8125rem;--tf-font-size-base: .875rem;--tf-font-size-lg: 1rem;--tf-font-weight-normal: 400;--tf-font-weight-medium: 500;--tf-font-weight-bold: 600;--tf-space-xs: .25rem;--tf-space-sm: .5rem;--tf-space-md: .75rem;--tf-space-lg: 1rem;--tf-space-xl: 1.5rem;--tf-radius: 8px;--tf-radius-action: 64px;--tf-art-size: 48px;--tf-art-radius: 4px;--tf-grid-gap: 1rem;--tf-transition-speed: .2s;--tf-pulse-color: #92D5B3;--tf-playback-bar-height: 72px;--tf-playback-bar-bg: #fff;--tf-playback-bar-text: #111;--tf-playback-toast-width: 360px;--tf-playback-toast-shadow: 0 0px 10px rgba(0, 0, 0, .04)}[data-tf-theme=dark]{--tf-color-bg: transparent;--tf-color-surface: #2f3130;--tf-color-text-primary: #f0f0f0;--tf-color-text-on-accent: #111;--tf-color-text-secondary: #999999;--tf-color-accent: #92D5B3;--tf-color-border: #444444;--tf-playback-bar-bg: #2f3130;--tf-playback-bar-text: #fff}@media (prefers-color-scheme: dark){[data-tf-theme=auto]{--tf-color-bg: transparent;--tf-color-surface: #2f3130;--tf-color-text-primary: #f0f0f0;--tf-color-text-on-accent: #111;--tf-color-text-secondary: #999999;--tf-color-accent: #92D5B3;--tf-color-border: #444444;--tf-playback-bar-bg: #2f3130;--tf-playback-bar-text: #fff}}@keyframes tf-shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.tf-skeleton{background:linear-gradient(90deg,var(--tf-color-border) 25%,color-mix(in srgb,var(--tf-color-border) 60%,transparent) 50%,var(--tf-color-border) 75%);background-size:200% 100%;animation:tf-shimmer 1.8s ease-in-out infinite;border-radius:var(--tf-radius)}.tf-skeleton--circle{border-radius:50%}.tf-skeleton--text{height:1em;border-radius:4px}.tf-skeleton--text-sm{height:.75em;border-radius:4px;width:40%}.tf-skeleton--art{width:var(--tf-art-size);height:var(--tf-art-size);border-radius:var(--tf-art-radius);flex-shrink:0}.tf-skeleton--art-grid{width:100%;aspect-ratio:1;border-radius:var(--tf-radius)}.tf-skeleton--photo-circle{width:100%;aspect-ratio:1;border-radius:50%}.tf-skeleton--rank{width:1.5em;height:.875em;border-radius:4px;flex-shrink:0}.tf-skeleton--selector-btn{width:4.5em;height:1.75em;border-radius:var(--tf-radius)}.tf-card__skeleton,.tf-card__content{grid-area:1 / 1;min-width:0;transition:opacity .35s ease,visibility .35s}.tf-card__content{opacity:0;visibility:hidden}.tf-track-card--loaded>.tf-card__skeleton,.tf-artist-card--loaded>.tf-card__skeleton{opacity:0;visibility:hidden}.tf-track-card--loaded>.tf-card__content,.tf-artist-card--loaded>.tf-card__content{opacity:1;visibility:visible}@keyframes tf-waveform-1{0%,to{height:30%}50%{height:80%}}@keyframes tf-waveform-2{0%,to{height:50%}50%{height:100%}}@keyframes tf-waveform-3{0%,to{height:60%}50%{height:30%}}@keyframes tf-waveform-4{0%,to{height:40%}50%{height:90%}}.tf-waveform{display:flex;align-items:flex-end;gap:2px;height:16px;flex-shrink:0;padding:0 2px}.tf-waveform__bar{width:3px;border-radius:2px;height:45%;background:var(--tf-color-accent)}.tf-waveform__bar:nth-child(1){animation:tf-waveform-1 .8s ease-in-out infinite}.tf-waveform__bar:nth-child(2){animation:tf-waveform-2 .7s ease-in-out infinite .15s}.tf-waveform__bar:nth-child(3){animation:tf-waveform-3 .9s ease-in-out infinite .05s}.tf-waveform__bar:nth-child(4){animation:tf-waveform-4 .75s ease-in-out infinite .25s}.tf-waveform--paused .tf-waveform__bar{animation-play-state:paused}@keyframes tf-fade-in-up{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes tf-fade-in{0%{opacity:0}to{opacity:1}}.tf-animate-in{animation:tf-fade-in-up .35s cubic-bezier(.4,0,.2,1) both}.tf-top-tracks__list>*,.tf-top-artists__list>*,.tf-recently-played__list>*{animation:tf-fade-in-up .35s cubic-bezier(.4,0,.2,1) both}.tf-top-tracks__list>*:nth-child(1),.tf-top-artists__list>*:nth-child(1),.tf-recently-played__list>*:nth-child(1){animation-delay:0ms}.tf-top-tracks__list>*:nth-child(2),.tf-top-artists__list>*:nth-child(2),.tf-recently-played__list>*:nth-child(2){animation-delay:40ms}.tf-top-tracks__list>*:nth-child(3),.tf-top-artists__list>*:nth-child(3),.tf-recently-played__list>*:nth-child(3){animation-delay:80ms}.tf-top-tracks__list>*:nth-child(4),.tf-top-artists__list>*:nth-child(4),.tf-recently-played__list>*:nth-child(4){animation-delay:.12s}.tf-top-tracks__list>*:nth-child(5),.tf-top-artists__list>*:nth-child(5),.tf-recently-played__list>*:nth-child(5){animation-delay:.16s}.tf-top-tracks__list>*:nth-child(6),.tf-top-artists__list>*:nth-child(6),.tf-recently-played__list>*:nth-child(6){animation-delay:.2s}.tf-top-tracks__list>*:nth-child(7),.tf-top-artists__list>*:nth-child(7),.tf-recently-played__list>*:nth-child(7){animation-delay:.24s}.tf-top-tracks__list>*:nth-child(8),.tf-top-artists__list>*:nth-child(8),.tf-recently-played__list>*:nth-child(8){animation-delay:.28s}.tf-top-tracks__list>*:nth-child(n+9),.tf-top-artists__list>*:nth-child(n+9),.tf-recently-played__list>*:nth-child(n+9){animation-delay:.32s}@keyframes tf-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.tf-now-playing{display:flex;flex-direction:column;gap:var(--tf-space-sm);font-family:var(--tf-font-family);color:var(--tf-color-text-primary);transition:opacity var(--tf-transition-speed)}.tf-now-playing__header{font-size:var(--tf-font-size-lg);font-weight:var(--tf-font-weight-bold);margin:0 0 var(--tf-space-xs)}.tf-now-playing__body{position:relative;display:grid}.tf-now-playing__skeleton,.tf-now-playing__content{grid-area:1 / 1;display:flex;align-items:center;gap:var(--tf-space-sm);min-width:0;transition:opacity .35s ease,visibility .35s}.tf-now-playing:not(.tf-now-playing--loaded)>.tf-now-playing__body>.tf-now-playing__content{position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none}.tf-now-playing--loaded>.tf-now-playing__body>.tf-now-playing__skeleton{position:absolute;inset:0;z-index:0;opacity:0;visibility:hidden;pointer-events:none;max-width:10em}.tf-now-playing--loaded>.tf-now-playing__body>.tf-now-playing__content{position:relative;z-index:1;opacity:1;visibility:visible}.tf-now-playing__label{font-size:var(--tf-font-size-sm);color:var(--tf-color-text-secondary);white-space:nowrap;flex-shrink:0}.tf-now-playing--contained{padding:var(--tf-space-md) var(--tf-space-lg) var(--tf-space-md) var(--tf-space-md);background:var(--tf-color-surface);border-radius:var(--tf-radius)}.tf-now-playing--idle{opacity:.6}.tf-now-playing__art{width:var(--tf-art-size);height:var(--tf-art-size);border-radius:50%;object-fit:cover;flex-shrink:0;animation:tf-spin 4s linear infinite;-webkit-mask-image:radial-gradient(circle,transparent 10%,black 11%);mask-image:radial-gradient(circle,transparent 10%,black 11%);border:1px solid var(--tf-color-border);filter:drop-shadow(0 0 10px rgba(0,0,0,.04))}.tf-now-playing--idle .tf-now-playing__art{animation-play-state:paused}.tf-now-playing .tf-skeleton--art{border-radius:50%}.tf-now-playing__skeleton .tf-skeleton{display:block}.tf-now-playing__sk-line{max-width:100%}.tf-now-playing__skeleton .tf-now-playing__sk-line{transition:width .26s cubic-bezier(.33,1,.68,1)}@media (prefers-reduced-motion: reduce){.tf-now-playing__skeleton .tf-now-playing__sk-line{transition:none}}.tf-now-playing:not(.tf-now-playing--loaded) .tf-now-playing__sk-line[data-tf-sk=track]{width:10em}.tf-now-playing:not(.tf-now-playing--loaded) .tf-now-playing__sk-line[data-tf-sk=artist]{width:7em}.tf-now-playing:not(.tf-now-playing--loaded) .tf-now-playing__sk-line[data-tf-sk=row]{width:14em}.tf-now-playing__info{display:flex;flex-direction:column;gap:var(--tf-space-xs);flex:1;min-width:0}.tf-now-playing__track{font-size:var(--tf-font-size-base);font-weight:var(--tf-font-weight-medium);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tf-now-playing__artist{font-size:var(--tf-font-size-sm);color:var(--tf-color-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tf-now-playing--compact{width:fit-content}.tf-now-playing--playable .tf-now-playing__content{cursor:pointer;transition:background var(--tf-transition-speed),box-shadow var(--tf-transition-speed),transform var(--tf-transition-speed)}.tf-now-playing--compact.tf-now-playing--playable:hover .tf-now-playing__content{background:#00000014}.tf-now-playing--compact.tf-now-playing--playable:active .tf-now-playing__content{transform:scale(.99)}.tf-now-playing--compact.tf-now-playing--playable:focus-within .tf-now-playing__content{outline:2px solid var(--tf-color-accent);outline-offset:2px}.tf-now-playing--playable:not(.tf-now-playing--compact) .tf-now-playing__content:hover{background:#00000014}.tf-now-playing--playing .tf-now-playing__track{color:var(--tf-color-accent)}.tf-now-playing--playing>.tf-now-playing__body>.tf-now-playing__content{background:#0000001f;border-radius:var(--tf-radius)}.tf-now-playing--compact.tf-now-playing--playing>.tf-now-playing__body>.tf-now-playing__content{border-radius:999px}.tf-now-playing--compact .tf-now-playing__art,.tf-now-playing--compact .tf-skeleton--art{width:32px;height:32px}.tf-now-playing--compact .tf-now-playing__info{flex-direction:row;align-items:baseline;gap:0}.tf-now-playing--compact .tf-now-playing__track,.tf-now-playing--compact .tf-now-playing__artist{font-size:var(--tf-font-size-sm)}.tf-now-playing--compact .tf-now-playing__artist:before{content:"·";margin:0 var(--tf-space-xs)}.tf-now-playing--compact.tf-now-playing--contained{padding:var(--tf-space-xs) var(--tf-space-lg) var(--tf-space-xs) var(--tf-space-xs);border-radius:999px;overflow:hidden}.tf-now-playing--compact.tf-now-playing--contained.tf-now-playing--playable{padding:0}.tf-now-playing--compact.tf-now-playing--contained.tf-now-playing--playable>.tf-now-playing__body>.tf-now-playing__content{padding:var(--tf-space-xs) var(--tf-space-lg) var(--tf-space-xs) var(--tf-space-xs)}.tf-now-playing--compact .tf-waveform{height:11px;gap:1px;padding:0 1px}.tf-now-playing--compact .tf-waveform__bar{width:2px;border-radius:1px}.tf-track-card--list{display:grid;padding:var(--tf-space-sm) var(--tf-space-md);margin:0 calc(var(--tf-space-md) * -1);font-family:var(--tf-font-family);color:var(--tf-color-text-primary);border-radius:var(--tf-radius);transition:background var(--tf-transition-speed)}.tf-track-card--list>.tf-card__skeleton,.tf-track-card--list>.tf-card__content{display:flex;align-items:center;gap:var(--tf-space-md)}.tf-track-card__rank{width:1.5em;text-align:right;font-size:var(--tf-font-size-sm);color:var(--tf-color-text-secondary);font-weight:var(--tf-font-weight-bold);flex-shrink:0}.tf-track-card__art{width:var(--tf-art-size);height:var(--tf-art-size);border-radius:var(--tf-art-radius);object-fit:cover;flex-shrink:0}.tf-track-card__info{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.tf-track-card__name{font-size:var(--tf-font-size-base);font-weight:var(--tf-font-weight-medium);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.tf-track-card__artist{font-size:var(--tf-font-size-sm);color:var(--tf-color-text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tf-track-card--grid{display:grid;font-family:var(--tf-font-family);color:var(--tf-color-text-primary);min-width:0;overflow:hidden;padding:var(--tf-space-sm);border-radius:var(--tf-radius);transition:background var(--tf-transition-speed)}.tf-track-card--grid>.tf-card__skeleton,.tf-track-card--grid>.tf-card__content{display:flex;flex-direction:column;gap:var(--tf-space-sm)}.tf-track-card--grid .tf-track-card__art{width:100%;height:auto;aspect-ratio:1;border-radius:var(--tf-radius);object-fit:cover}.tf-track-card--grid .tf-track-card__name{-webkit-line-clamp:2}.tf-track-card--compact-grid{display:grid;padding:var(--tf-space-sm) var(--tf-space-md);font-family:var(--tf-font-family);color:var(--tf-color-text-primary);border-radius:var(--tf-radius);transition:background var(--tf-transition-speed)}.tf-track-card--compact-grid>.tf-card__skeleton,.tf-track-card--compact-grid>.tf-card__content{display:flex;align-items:center;gap:var(--tf-space-md)}.tf-time-range-selector{display:flex;gap:var(--tf-space-xs);margin-bottom:var(--tf-space-md)}.tf-time-range-selector__btn{padding:var(--tf-space-sm) var(--tf-space-md);border:1px solid var(--tf-color-border);border-radius:var(--tf-radius-action);background:transparent;color:var(--tf-color-text);font-size:var(--tf-font-size-sm);cursor:pointer;transition:all var(--tf-transition-speed)}.tf-time-range-selector__btn:hover{background:#0000001f}.tf-time-range-selector__btn--active{border-color:var(--tf-color-accent)}.tf-top-tracks{font-family:var(--tf-font-family);color:var(--tf-color-text-primary)}.tf-top-tracks__header{font-size:var(--tf-font-size-lg);font-weight:var(--tf-font-weight-bold);margin:0 0 var(--tf-space-md)}.tf-top-tracks--grid .tf-top-tracks__list{display:grid;gap:var(--tf-grid-gap);min-width:0}.tf-top-tracks--grid .tf-top-tracks__list>*{min-width:0}.tf-top-tracks--compact-grid .tf-top-tracks__list{display:grid;gap:var(--tf-grid-gap);min-width:0}.tf-top-tracks--compact-grid .tf-top-tracks__list>*{min-width:0}.tf-artist-card--grid{display:grid;text-align:center;font-family:var(--tf-font-family);color:var(--tf-color-text-primary);min-width:0;padding:var(--tf-space-sm);overflow:hidden;border-radius:var(--tf-radius);transition:background var(--tf-transition-speed)}.tf-artist-card--grid>.tf-card__skeleton,.tf-artist-card--grid>.tf-card__content{display:flex;flex-direction:column;align-items:center;gap:var(--tf-space-sm)}.tf-artist-card__photo{width:100%;aspect-ratio:1;object-fit:cover;flex-shrink:0;max-width:100%}.tf-artist-card--grid .tf-artist-card__photo{border-radius:50%}.tf-artist-card--list .tf-artist-card__photo{width:var(--tf-art-size);height:var(--tf-art-size);border-radius:50%}.tf-artist-card__name{font-size:var(--tf-font-size-base);font-weight:var(--tf-font-weight-medium);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.tf-artist-card--list{display:grid;padding:var(--tf-space-sm) var(--tf-space-md);font-family:var(--tf-font-family);color:var(--tf-color-text-primary);border-radius:var(--tf-radius);transition:background var(--tf-transition-speed)}.tf-artist-card--list>.tf-card__skeleton,.tf-artist-card--list>.tf-card__content{display:flex;align-items:center;gap:var(--tf-space-md)}.tf-artist-card--compact-grid{display:grid;padding:var(--tf-space-sm) var(--tf-space-md);font-family:var(--tf-font-family);color:var(--tf-color-text-primary);border-radius:var(--tf-radius);transition:background var(--tf-transition-speed)}.tf-artist-card--compact-grid>.tf-card__skeleton,.tf-artist-card--compact-grid>.tf-card__content{display:flex;align-items:center;gap:var(--tf-space-md)}.tf-artist-card--compact-grid .tf-artist-card__photo{width:var(--tf-art-size);height:var(--tf-art-size);border-radius:50%}.tf-artist-card__info{display:flex;flex-direction:column;gap:var(--tf-space-xs);min-width:0;flex:1}.tf-artist-card__genres{display:flex;flex-wrap:wrap;gap:var(--tf-space-xs)}.tf-artist-card__genre{font-size:var(--tf-font-size-sm);color:var(--tf-color-text-secondary);background:var(--tf-color-border);padding:2px var(--tf-space-xs);border-radius:var(--tf-radius)}.tf-top-artists{font-family:var(--tf-font-family);color:var(--tf-color-text-primary)}.tf-top-artists__header{font-size:var(--tf-font-size-lg);font-weight:var(--tf-font-weight-bold);margin:0 0 var(--tf-space-md)}.tf-top-artists--grid .tf-top-artists__list{display:grid;gap:var(--tf-grid-gap);min-width:0}.tf-top-artists--grid .tf-top-artists__list>*{min-width:0}.tf-top-artists--compact-grid .tf-top-artists__list{display:grid;gap:var(--tf-grid-gap);min-width:0}.tf-top-artists--compact-grid .tf-top-artists__list>*{min-width:0}.tf-recently-played{font-family:var(--tf-font-family);color:var(--tf-color-text-primary)}.tf-recently-played__header{font-size:var(--tf-font-size-lg);font-weight:var(--tf-font-weight-bold);margin:0 0 var(--tf-space-md)}.tf-recently-played__time{font-size:var(--tf-font-size-sm);color:var(--tf-color-text-secondary);white-space:nowrap;margin-left:auto;flex-shrink:0}.tf-recently-played__day{font-size:var(--tf-font-size-base);font-weight:var(--tf-font-weight-medium);color:var(--tf-color-text-secondary);margin:var(--tf-space-md) 0 var(--tf-space-sm);border-bottom:1px solid var(--tf-color-border);padding-bottom:var(--tf-space-xs)}.tf-recently-played__list{display:flex;flex-direction:column;gap:var(--tf-space-xs)}.tf-recently-played--grid .tf-recently-played__list,.tf-recently-played--compact-grid .tf-recently-played__list{display:grid;gap:var(--tf-grid-gap);min-width:0}.tf-recently-played--grid .tf-recently-played__list>*,.tf-recently-played--compact-grid .tf-recently-played__list>*{min-width:0}.tf-track-card--playable,.tf-artist-card--playable{cursor:pointer;transition:background var(--tf-transition-speed),transform var(--tf-transition-speed),box-shadow var(--tf-transition-speed);border-radius:var(--tf-radius)}.tf-track-card--playable:hover,.tf-artist-card--playable:hover{background:#0000001f}.tf-track-card--playable:active,.tf-artist-card--playable:active{transform:scale(.98)}.tf-track-card--playing{background:#0000001f}.tf-track-card--playing .tf-track-card__name{color:var(--tf-color-accent)}.tf-artist-card--playing{background:#0000001f}.tf-artist-card--playing .tf-artist-card__name{color:var(--tf-color-accent)}.tf-artist-card--playing .tf-artist-card__photo{box-shadow:0 0 0 2px color-mix(in srgb,var(--tf-color-accent) 50%,transparent)}.tf-playback-bar{position:fixed;bottom:0;left:0;right:0;z-index:9999;background:var(--tf-playback-bar-bg);color:var(--tf-playback-bar-text);font-family:var(--tf-font-family);transform:translateY(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);will-change:transform}.tf-playback-bar--visible{transform:translateY(0)}@keyframes tf-loading-bounce{0%{transform:translate(0)}50%{transform:translate(300%)}to{transform:translate(0)}}.tf-loading-bar{height:3px;background:#ffffff1a;position:relative;overflow:hidden;transition:opacity .3s ease}.tf-loading-bar--hidden{opacity:0;pointer-events:none}.tf-loading-bar__indicator{position:absolute;top:0;left:0;width:25%;height:100%;background:var(--tf-color-accent);border-radius:2px;animation:tf-loading-bounce 1.5s ease-in-out infinite}.tf-playback-bar__content{display:flex;align-items:center;height:var(--tf-playback-bar-height);padding:0 var(--tf-space-lg);gap:var(--tf-space-lg)}.tf-playback-bar__track{display:flex;align-items:center;gap:var(--tf-space-md);flex:1;min-width:0}.tf-playback-bar__art{width:48px;height:48px;border-radius:var(--tf-art-radius);object-fit:cover;flex-shrink:0;box-shadow:0 2px 8px #0000004d}.tf-playback-bar__info{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.tf-playback-bar__name{font-size:var(--tf-font-size-base);font-weight:var(--tf-font-weight-medium);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}.tf-playback-bar__artist{font-size:var(--tf-font-size-sm);color:#fff9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tf-playback-bar__preview-ended{font-size:var(--tf-font-size-xs, .7rem);color:#ffffff73;font-style:italic}.tf-playback-bar__controls{display:flex;align-items:center;gap:var(--tf-space-md);flex-shrink:0}.tf-playback-bar__btn{display:flex;align-items:center;justify-content:center;background:none;border:none;color:#fffc;cursor:pointer;padding:var(--tf-space-xs);border-radius:50%;transition:color var(--tf-transition-speed),transform var(--tf-transition-speed),background var(--tf-transition-speed)}.tf-playback-bar__btn:hover{color:#fff}.tf-playback-bar__btn--play{background:#fff;color:var(--tf-playback-bar-bg);width:36px;height:36px;border-radius:50%}.tf-playback-bar__btn--play:hover{transform:scale(1.06);color:var(--tf-playback-bar-bg)}.tf-playback-bar__btn--play:active{transform:scale(.95)}.tf-playback-bar__btn--close{margin-left:auto;opacity:.5}.tf-playback-bar__btn--close:hover{opacity:1}.tf-playback-toast{position:fixed;z-index:9999;width:var(--tf-playback-toast-width);max-width:calc(100vw - 2 * var(--tf-space-lg));background:var(--tf-playback-bar-bg);color:var(--tf-playback-bar-text);border-radius:12px;box-shadow:var(--tf-playback-toast-shadow);font-family:var(--tf-font-family);overflow:hidden;transition:transform .3s cubic-bezier(.4,0,.2,1);will-change:transform}.tf-playback-toast--bottom-right{bottom:var(--tf-space-xl);right:var(--tf-space-xl);transform:translateY(150%) scale(.96)}.tf-playback-toast--bottom-right.tf-playback-toast--visible{transform:translateY(0) scale(1)}.tf-playback-toast--bottom-left{bottom:var(--tf-space-xl);left:var(--tf-space-xl);transform:translateY(150%) scale(.96)}.tf-playback-toast--bottom-left.tf-playback-toast--visible{transform:translateY(0) scale(1)}.tf-playback-toast--bottom-center{bottom:var(--tf-space-xl);left:50%;transform:translate(-50%) translateY(150%) scale(.96)}.tf-playback-toast--bottom-center.tf-playback-toast--visible{transform:translate(-50%) translateY(0) scale(1)}.tf-playback-toast--top-right{top:var(--tf-space-xl);right:var(--tf-space-xl);transform:translateY(-150%) scale(.96)}.tf-playback-toast--top-right.tf-playback-toast--visible{transform:translateY(0) scale(1)}.tf-playback-toast--top-left{top:var(--tf-space-xl);left:var(--tf-space-xl);transform:translateY(-150%) scale(.96)}.tf-playback-toast--top-left.tf-playback-toast--visible{transform:translateY(0) scale(1)}.tf-playback-toast--top-center{top:var(--tf-space-xl);left:50%;transform:translate(-50%) translateY(-150%) scale(.96)}.tf-playback-toast--top-center.tf-playback-toast--visible{transform:translate(-50%) translateY(0) scale(1)}@media (max-width: 480px){.tf-playback-toast{width:calc(100vw - 2 * var(--tf-space-lg))}.tf-playback-toast--bottom-right,.tf-playback-toast--bottom-left,.tf-playback-toast--bottom-center{left:50%;right:auto;transform:translate(-50%) translateY(150%) scale(.96)}.tf-playback-toast--bottom-right.tf-playback-toast--visible,.tf-playback-toast--bottom-left.tf-playback-toast--visible,.tf-playback-toast--bottom-center.tf-playback-toast--visible{transform:translate(-50%) translateY(0) scale(1)}.tf-playback-toast--top-right,.tf-playback-toast--top-left,.tf-playback-toast--top-center{left:50%;right:auto;transform:translate(-50%) translateY(-150%) scale(.96)}.tf-playback-toast--top-right.tf-playback-toast--visible,.tf-playback-toast--top-left.tf-playback-toast--visible,.tf-playback-toast--top-center.tf-playback-toast--visible{transform:translate(-50%) translateY(0) scale(1)}}.tf-playback-toast__body{display:flex;align-items:center;gap:var(--tf-space-md);padding:var(--tf-space-lg)}.tf-playback-toast__art{width:44px;height:44px;border-radius:var(--tf-art-radius);object-fit:cover;flex-shrink:0;box-shadow:0 2px 8px #0000004d}.tf-playback-toast__info{display:flex;flex-direction:column;flex:1;min-width:0}.tf-playback-toast__name{font-size:var(--tf-font-size-base);font-weight:var(--tf-font-weight-medium);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tf-playback-toast__artist{font-size:var(--tf-font-size-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tf-playback-toast__preview-ended{font-size:var(--tf-font-size-xs, .7rem);color:#ffffff73;font-style:italic}.tf-playback-toast__controls{display:flex;align-items:center;justify-content:center;gap:var(--tf-space-sm)}.tf-playback-toast__btn{display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--tf-playback-bar-text);cursor:pointer;padding:var(--tf-space-xs);border-radius:50%;transition:color var(--tf-transition-speed),transform var(--tf-transition-speed),background var(--tf-transition-speed)}.tf-playback-toast__btn:hover{color:var(--tf-playback-bar-text)}.tf-playback-toast__btn--play{background:var(--tf-playback-bar-text);color:var(--tf-playback-bar-bg);width:32px;height:32px;border-radius:50%}.tf-playback-toast__btn--play:hover{transform:scale(1.06);color:var(--tf-playback-bar-bg)}.tf-playback-toast__btn--play:active{transform:scale(.95)}.tf-playback-toast__btn--close{opacity:.5;padding:2px}.tf-playback-toast__btn--close:hover{opacity:1}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:root{--landing-bg: #1F2120;--landing-surface: #383A39;--landing-surface-alt: #2f3130;--landing-text: #f0f0f0;--landing-text-on-accent: #111;--landing-text-muted: #999999;--landing-accent: #92D5B3;--landing-accent-hover: #4B8C6D;--landing-border: #373737;--landing-code-bg: #1a1a1a;--landing-max-width: 1100px;--landing-font: "Satoshi", sans-serif}@media (prefers-color-scheme: light){:root{--landing-bg: #F5F8F6;--landing-surface: #F5F8F6;--landing-surface-alt: #ffffff;--landing-text: #1a1a1a;--landing-text-on-accent: #fff;--landing-text-muted: #666666;--landing-accent: #45785E;--landing-accent-hover: #50A17B;--landing-border: #e0e0e0;--landing-code-bg: #E3E8E5;--tf-color-surface: #ffffff}}body{font-family:var(--landing-font);background:var(--landing-bg);color:var(--landing-text);line-height:1.6}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}.container{max-width:var(--landing-max-width);margin:0 auto;padding:0 1.5rem}.section{padding:5rem 0}.section__title{font-size:2rem;font-weight:700;text-align:center;letter-spacing:-.02em}.section__subtitle{color:var(--landing-text-muted);text-align:center;max-width:600px;margin:0 auto 3rem;font-size:1.1rem}.sticky-header{position:fixed;top:0;left:0;right:0;z-index:100;padding:2rem;transform:translateY(-10%);opacity:0;transition:transform .2s ease,opacity .3s ease;pointer-events:none}.sticky-header--visible{transform:translateY(0);opacity:1;pointer-events:auto}.sticky-header__inner{display:flex;align-items:center;justify-content:space-between}.sticky-header__logo{display:flex;align-items:center}.sticky-header__btn{padding:.5rem 1.25rem;font-size:.875rem}.sticky-header__github-icon{width:18px;height:18px;flex-shrink:0}.hero{text-align:center;padding:6rem 0 5rem}.hero__logo{width:64px;height:64px;margin:0 auto 2rem;display:flex;align-items:center;justify-content:center}.hero__logo svg{width:64px;height:64px}.hero__heading{font-size:clamp(2.5rem,6vw,4rem);font-weight:800;line-height:1.1;letter-spacing:-.03em;margin-bottom:1.5rem}.hero__description{color:var(--landing-text-muted);font-size:1.125rem;max-width:560px;margin:0 auto 2.5rem;line-height:1.7}.hero__actions{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.75rem;border-radius:999px;font-family:var(--landing-font);font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s;border:2px solid transparent}.btn--primary{background:var(--landing-accent);color:var(--landing-text-on-accent);border-color:var(--landing-accent)}.btn--primary:hover{background:var(--landing-accent-hover);border-color:var(--landing-accent-hover)}.btn--secondary{background:var(--landing-surface-alt);color:var(--landing-text)}.btn--secondary:hover{background:var(--landing-surface)}.showcase-section{padding:0 1rem 5rem;position:relative}.showcase-stack{position:relative}.showcase-annotation{position:absolute;top:4rem;left:0;right:0;max-width:var(--landing-max-width);margin:0 auto;z-index:10;pointer-events:none}.showcase-annotation__label{position:absolute;left:-1rem;top:-7rem;display:flex;flex-direction:column;align-items:center;color:var(--landing-text);font-size:1.15rem;transform:rotate(-15deg)}.showcase-annotation{animation:annotation-blur-in .25s ease-out .6s both;transform-origin:left top}.showcase-annotation__label svg{width:64px;height:72px;margin-left:3rem;margin-top:0;flex-shrink:0;opacity:.8;transform:rotate(24deg)}@keyframes annotation-blur-in{0%{filter:blur(8px);transform:scale(.96) translateY(2px);opacity:0}to{filter:blur(0);transform:scale(1) translateY(0);opacity:1}}@media (max-width: 1200px){.showcase-annotation{display:none}}.showcase-panels{position:relative;z-index:2;max-width:var(--landing-max-width);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:3rem;background:var(--landing-surface-alt);border-radius:24px;padding:2rem;filter:drop-shadow(0 0 10px rgba(0,0,0,.04))}.showcase-panel{min-width:0;display:flex;flex-direction:column;gap:1.5rem}.showcase-panel .tf-track-card:first-child{display:none}.showcase-sub-panel{background:var(--landing-surface);border-radius:16px;padding:1.5rem}@media (max-width: 768px){.showcase-panels{grid-template-columns:1fr;padding:1.25rem}.showcase-sub-panel{display:none}}.showcase-now-playing{display:flex;justify-content:center;max-width:var(--landing-max-width);margin:0 auto}.showcase-now-playing__inner{display:flex;justify-content:center;padding-bottom:1rem}#features{background:var(--landing-bg);margin-top:-20rem;padding:6rem 0;position:relative;z-index:2;border-top:solid 1px var(--landing-border)}.features-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;margin:0 8rem}.feature-card{padding:1.75rem}.feature-card__icon{width:24px;height:24px;margin-bottom:1rem;color:var(--landing-accent)}.feature-card__title{font-size:1.1rem;font-weight:700;margin-bottom:.5rem}.feature-card__description{color:var(--landing-text-muted);font-size:.925rem;line-height:1.5}@media (max-width: 900px){#features{padding:4rem 0}.features-grid{grid-template-columns:repeat(2,1fr);margin:0}}@media (max-width: 540px){.features-grid{grid-template-columns:1fr}}#get-started{margin-bottom:10rem}.get-started__steps{display:flex;flex-direction:column;gap:1.5rem;max-width:680px;margin:0 auto}.get-started__step{background:var(--landing-surface-alt);border-radius:24px;overflow:hidden;filter:drop-shadow(0 0 10px rgba(0,0,0,.04))}.get-started__step-header{padding:1rem 1.5rem;font-weight:600;font-size:.9rem;color:var(--landing-text-muted);display:flex;align-items:center;gap:.75rem}.get-started__step-number{width:24px;height:24px;border-radius:50%;background:var(--landing-accent);color:var(--landing-text-on-accent);display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;flex-shrink:0}.get-started__code{padding:1.25rem 1.5rem;background:var(--landing-code-bg);font-family:SF Mono,Fira Code,Cascadia Code,monospace;font-size:.9rem;line-height:1.7;overflow-x:auto;color:var(--landing-text)}.get-started__code .comment{color:var(--landing-text-muted)}.get-started__code .keyword{color:var(--landing-accent)}.support{text-align:center}.support__links{display:flex;gap:1.25rem;justify-content:center;flex-wrap:wrap}.support__link{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;background:var(--landing-surface);border-radius:48px;font-weight:600;font-size:.95rem;transition:background .2s}.support__link:hover{background:var(--landing-surface-alt)}.support__link svg{width:20px;height:20px}.footer{border-top:1px solid var(--landing-border);padding:2rem 0}.footer__inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}.footer__logo{font-weight:800;font-size:1.25rem;display:flex;align-items:center;gap:.5rem}.footer__logo svg{width:24px;height:24px}.footer__copyright,.footer__author{color:var(--landing-text-muted);font-size:.875rem}.footer__author a{color:var(--landing-text);font-weight:500;transition:color .2s}.footer__author a:hover{color:var(--landing-accent)}.pg-tabs{display:flex;gap:.25rem;border-bottom:1px solid var(--landing-border);padding:1rem 1rem 0;margin-bottom:0;overflow-x:auto;-webkit-overflow-scrolling:touch}.pg-tab{padding:.75rem 1.25rem;background:none;border:none;border-bottom:2px solid transparent;color:var(--landing-text-muted);font-family:var(--landing-font);font-size:.9rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:color .2s,border-color .2s}.pg-tab:hover{color:var(--landing-text)}.pg-tab--active{color:var(--landing-accent);border-bottom-color:var(--landing-accent)}.pg-body{background:var(--landing-surface-alt);border-top:none;border-radius:24px;overflow:hidden}.pg-section{display:flex;flex-direction:column}.pg-controls{display:flex;flex-wrap:wrap;gap:1rem;padding:1.25rem 1.5rem;border-bottom:1px solid var(--landing-border);background:var(--landing-code-bg);align-items:center}.pg-toggle{display:flex;align-items:center;gap:.5rem;cursor:pointer}.pg-toggle__label{font-size:.8rem;font-weight:500;font-family:SF Mono,Fira Code,monospace;color:var(--landing-text-muted)}.pg-toggle__track{position:relative;width:36px;height:20px;border-radius:999px;background:var(--landing-border);border:none;cursor:pointer;transition:background .2s;padding:0}.pg-toggle__track--on{background:var(--landing-accent)}.pg-toggle__thumb{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .2s}.pg-toggle__track--on .pg-toggle__thumb{transform:translate(16px)}.pg-select{display:flex;align-items:center;gap:.5rem}.pg-select__label{font-size:.8rem;font-weight:500;font-family:SF Mono,Fira Code,monospace;color:var(--landing-text-muted)}.pg-select select{padding:.35rem .6rem;border-radius:6px;border:1px solid var(--landing-border);background:var(--landing-surface);color:var(--landing-text);font-family:var(--landing-font);font-size:.8rem;cursor:pointer}.pg-preview{padding:2rem 1.5rem;min-height:200px}.pg-preview--playback{display:flex;align-items:center;justify-content:center;min-height:160px}.pg-fallback{color:var(--landing-text-muted);font-size:.9rem;text-align:center}.pg-fallback strong{color:var(--landing-accent)}.pg-code{padding:1rem 1.5rem;background:var(--landing-code-bg);border-top:1px solid var(--landing-border);font-family:SF Mono,Fira Code,monospace;font-size:.8rem;line-height:1.6;overflow-x:auto;color:var(--landing-accent);margin:0}@media (max-width: 640px){.pg-controls{gap:.75rem;padding:1rem}.pg-preview{padding:1.25rem 1rem}.pg-tab{padding:.6rem .85rem;font-size:.8rem}}