.tf{display:grid;gap:16px;min-width:0}.tf-frame{position:relative;width:100%;overflow:hidden;border-radius:12px;border:1px solid hsl(var(--border-subtle,var(--border)));background:hsl(var(--background));box-shadow:0 50px 90px -60px hsl(0 0% 0%/.6)}.tf-layer{position:absolute;inset:0;transition:opacity .9s ease,transform 1.4s cubic-bezier(.2,.7,.2,1);will-change:opacity,transform}.tf-layer img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:top center;object-position:top center;vertical-align:top}.tf-song{opacity:1;transform:scale(1)}.tf-focus{opacity:0;transform:scale(1.035)}.tf[data-at="1"] .tf-song{opacity:0;transform:scale(1.75);transition:transform 1.1s cubic-bezier(.3,.6,.15,1),opacity .8s ease 1.45s}.tf[data-at="1"] .tf-focus{opacity:1;transform:scale(1);transition:opacity .8s ease 1.45s,transform 1.4s cubic-bezier(.2,.7,.2,1) 1.45s}.tf-press{position:absolute;z-index:2;width:38px;height:38px;border-radius:50%;background:hsl(var(--primary)/.35);box-shadow:0 0 0 2px hsl(var(--primary)),0 0 22px hsl(var(--primary)/.7);transform:translate(-50%,-50%) scale(.4);opacity:0;pointer-events:none}.tf[data-at="1"] .tf-press{animation:tf-press 1.1s ease-out .75s both}.tf-home{opacity:0}.tf-home img{-o-object-position:center;object-position:center}.tf-fly{opacity:0;transform-origin:0 0;will-change:transform,opacity}.tf-fly img{-o-object-fit:fill;object-fit:fill}.tf[data-at="2"] .tf-song{opacity:0;transform:scale(1.75);transition:none}.tf[data-at="2"] .tf-focus{transform-origin:0 0}.tf[data-at="2"] .tf-home{opacity:1;transition:opacity .9s ease .2s}@keyframes tf-press{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}25%{opacity:1;transform:translate(-50%,-50%) scale(.9)}45%{opacity:1;transform:translate(-50%,-50%) scale(.72)}to{opacity:0;transform:translate(-50%,-50%) scale(1.8)}}.tf-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));gap:10px}@media (min-width:1000px){.tf{grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:24px;align-items:center}.tf-steps{order:-1;grid-template-columns:1fr}}.tf-steps button{position:relative;overflow:hidden;width:100%;height:100%;display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;text-align:left;font:inherit;padding:14px 16px;border-radius:12px;border:1px solid hsl(var(--border-subtle,var(--border)));background:hsl(var(--surface));color:hsl(var(--text-secondary));cursor:pointer;transition:border-color .25s ease,background .25s ease}.tf-steps button:hover{border-color:hsl(var(--primary)/.5)}.tf-steps button:focus-visible{outline:2px solid hsl(var(--primary));outline-offset:2px}.tf-steps button[aria-selected=true]{border-color:hsl(var(--primary)/.7);background:hsl(var(--primary)/.08)}.tf-n{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;font:600 12px/1 IBM Plex Mono,ui-monospace,monospace;color:hsl(var(--text-secondary));border:1px solid hsl(var(--border));transition:background .25s ease,color .25s ease}.tf-steps button[aria-selected=true] .tf-n{background:hsl(var(--primary));border-color:hsl(var(--primary));color:hsl(var(--primary-foreground))}.tf-txt{display:grid;gap:3px}.tf-txt b{font-size:15.5px;color:hsl(var(--text-primary))}.tf-txt span{font-size:14px;line-height:1.4;text-wrap:pretty}.tf-prog{position:absolute;left:0;bottom:0;height:2px;width:100%;background:hsl(var(--primary));transform-origin:0 50%;animation:tf-prog linear both}@keyframes tf-prog{0%{transform:scaleX(0)}to{transform:scaleX(1)}}.tf[data-still] .tf-layer,.tf[data-still][data-at] .tf-layer{transition:none}.tf[data-still] .tf-press{display:none}@media (prefers-reduced-motion:reduce){.tf-layer{transition:none}.tf-press{display:none}}@media (max-width:760px){.tf-steps{grid-template-columns:1fr}.tf-steps button{padding:12px 14px}}