@property --tsbn-angle{syntax: "<angle>"; inherits: false; initial-value: 0deg;}.tsbn__inner{container-type:inline-size;min-width:0}.tsbn__panel{position:relative;display:grid;grid-template-columns:minmax(13rem,19rem) minmax(0,1fr);color:var(--tsbn-text, #e6f0fb);border:1px solid transparent;border-radius:var(--tsbn-radius, 18px);background:radial-gradient(80% 170% at 0% 0%,color-mix(in srgb,var(--tsbn-accent, #4da3ff) 22%,transparent),transparent 62%) padding-box,radial-gradient(55% 150% at 100% 100%,color-mix(in srgb,var(--tsbn-accent, #4da3ff) 12%,transparent),transparent 70%) padding-box,linear-gradient(var(--tsbn-panel, #001e3f),var(--tsbn-panel, #001e3f)) padding-box,conic-gradient(from var(--tsbn-angle),var(--tsbn-divider) 0deg,var(--tsbn-accent, #4da3ff) 28deg,#ffffff 42deg,var(--tsbn-accent, #4da3ff) 56deg,var(--tsbn-divider) 96deg,var(--tsbn-divider) 360deg) border-box;box-shadow:0 14px 34px -22px #000c1ebf;overflow:hidden}.tsbn__intro{display:flex;flex-direction:column;justify-content:center;gap:.3rem;min-width:0;padding:.85rem 1.5rem;border-inline-end:1px solid var(--tsbn-divider)}.tsbn__eyebrow{display:inline-flex;align-items:center;gap:.55em;margin:0;font-size:10.5px;font-weight:700;line-height:1.2;letter-spacing:.18em;text-transform:uppercase;color:var(--tsbn-accent, #4da3ff)}.tsbn__pulse{position:relative;flex:none;width:7px;height:7px;border-radius:50%;background:var(--tsbn-live, #3ddc97)}.tsbn__pulse:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;background:color-mix(in srgb,var(--tsbn-live, #3ddc97) 70%,transparent);opacity:0;pointer-events:none}.tsbn .tsbn__heading{margin:0;font-family:var(--font-heading--family, inherit);font-size:clamp(17px,1.55cqi,21px);font-weight:800;line-height:1.15;letter-spacing:-.01em;color:var(--tsbn-num, #fff);text-wrap:balance}.tsbn__tagline{margin:0;font-size:11.5px;line-height:1.4;opacity:.7;text-wrap:pretty}.tsbn__list{display:grid;grid-template-columns:repeat(var(--tsbn-count, 5),minmax(0,1fr));margin:0;padding:0;list-style:none}.tsbn__item{display:flex;min-width:0;margin:0}.tsbn__item+.tsbn__item{border-inline-start:1px solid var(--tsbn-divider)}.tsbn__cell{position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;gap:.15rem;min-width:0;padding:.85rem 1.25rem;color:inherit;text-decoration:none;transition:background-color .25s ease}.tsbn__cell:after{content:"";position:absolute;inset-inline:1.25rem;bottom:0;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--tsbn-accent, #4da3ff),transparent);transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.2,.8,.2,1)}a.tsbn__cell:hover,a.tsbn__cell:focus-visible{background:color-mix(in srgb,var(--tsbn-accent, #4da3ff) 9%,transparent)}a.tsbn__cell:hover:after,a.tsbn__cell:focus-visible:after{transform:scaleX(1)}a.tsbn__cell:focus-visible{outline:2px solid var(--tsbn-accent, #4da3ff);outline-offset:-2px}.tsbn__top{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .55rem;min-width:0}.tsbn__icon{flex:none;display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;color:var(--tsbn-accent, #4da3ff);background:color-mix(in srgb,var(--tsbn-accent, #4da3ff) 14%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tsbn-accent, #4da3ff) 32%,transparent)}.tsbn__icon svg{width:17px;height:17px}.tsbn__rating{display:inline-flex;align-items:center;gap:.25em;padding:.3em .55em .3em .6em;border-radius:999px;font-family:var(--font-heading--family, inherit);font-size:13px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--tsbn-num, #fff);background:color-mix(in srgb,var(--tsbn-star, #ffc857) 14%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tsbn-star, #ffc857) 38%,transparent)}.tsbn__rating svg{width:1.05em;height:1.05em;color:var(--tsbn-star, #ffc857);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--tsbn-star, #ffc857) 45%,transparent))}.tsbn__num{display:inline-flex;align-items:flex-start;font-family:var(--font-heading--family, inherit);font-size:clamp(22px,2.1cqi,31px);font-weight:800;line-height:1;font-variant-numeric:tabular-nums;color:var(--tsbn-num, #fff);white-space:nowrap;filter:drop-shadow(0 0 12px color-mix(in srgb,var(--tsbn-accent, #4da3ff) 45%,transparent))}.tsbn__d,.tsbn__sep,.tsbn__affix{display:inline-block}.tsbn__affix{margin-inline:.04em;font-size:.72em;color:var(--tsbn-accent, #4da3ff)}.tsbn__label{margin-top:.3rem;font-size:13px;font-weight:700;line-height:1.25;color:var(--tsbn-num, #fff)}.tsbn__sub{font-size:11.5px;line-height:1.3;opacity:.65}.tsbn__summary{margin:.6rem auto 0;max-width:76rem;padding-inline:1rem;font-size:12.5px;line-height:1.5;text-align:center;opacity:.75;text-wrap:pretty}.tsbn__summary strong{font-weight:700}@keyframes tsbn-roll{0%{transform:translateY(0)}}@keyframes tsbn-sheen{to{--tsbn-angle: 360deg}}@keyframes tsbn-sheen-hover{to{--tsbn-angle: 360deg}}@keyframes tsbn-pulse{0%{opacity:1;scale:1}70%{opacity:0;scale:2.5}to{opacity:0;scale:2.5}}@media(prefers-reduced-motion:no-preference){.tsbn[data-animate] .tsbn__panel{animation:tsbn-sheen 9s linear 2}.tsbn[data-animate] .tsbn__pulse:after{animation:tsbn-pulse 2.4s ease-out infinite}}@media(hover:hover)and (prefers-reduced-motion:no-preference){.tsbn[data-animate] .tsbn__panel:hover{animation:tsbn-sheen 9s linear 2,tsbn-sheen-hover 2.4s cubic-bezier(.45,0,.2,1)}a.tsbn__cell:hover .tsbn__icon{animation:tsm-pop .6s cubic-bezier(.22,1,.36,1)}a.tsbn__cell:hover .tsbn__rating svg{--tsm-pop-scale: 1.3;--tsm-pop-rotate: 14deg;animation:tsm-pop .6s cubic-bezier(.22,1,.36,1)}}@supports (content: "0" / ""){@media(prefers-reduced-motion:no-preference){.tsbn[data-animate] .tsbn__d{position:relative;height:1em;overflow:hidden;overflow:clip;color:transparent}.tsbn[data-animate] .tsbn__d:before{content:"0\a 1\a 2\a 3\a 4\a 5\a 6\a 7\a 8\a 9" / "";position:absolute;inset-inline:0;top:0;white-space:pre;text-align:center;color:var(--tsbn-num, #fff);transform:translateY(calc(var(--d) * -10%));animation:tsbn-roll 1.8s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(.15s + var(--i) * .09s)}}}@container (max-width: 1099px){.tsbn__panel{grid-template-columns:minmax(0,1fr)}.tsbn__intro{flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:.9rem;row-gap:.2rem;padding:.7rem 1.25rem;border-inline-end:0;border-block-end:1px solid var(--tsbn-divider)}.tsbn__cell{padding:.8rem 1rem}}@container (max-width: 699px){.tsbn__intro{justify-content:center;align-items:center;padding:.6rem .75rem;text-align:center}.tsbn .tsbn__heading{font-size:15px}.tsbn__tagline{display:none}.tsbn__cell{align-items:center;gap:.1rem;padding:.7rem .25rem .75rem;text-align:center}.tsbn__cell:after{inset-inline:.5rem}.tsbn__top{gap:.25rem}.tsbn__top{justify-content:center}.tsbn__icon{display:none}.tsbn__rating{font-size:10px}.tsbn__num{font-size:clamp(16px,5.4cqi,22px)}.tsbn__label{margin-top:.2rem;font-size:10.5px}.tsbn__sub{display:none}.tsbn__summary{margin-top:.5rem;font-size:11.5px}.tsbn__summary--desktop{display:none}}@container (max-width: 699px){.tsbn__eyebrow{font-size:14px;letter-spacing:.08em}.tsbn .tsbn__heading{font-size:20px}.tsbn__list{grid-template-columns:repeat(6,minmax(0,1fr))}.tsbn__item{grid-column:span 2}.tsbn__item:nth-child(3n+4):nth-last-child(2),.tsbn__item:nth-child(3n+5):last-child{grid-column:span 3}.tsbn__item:nth-child(3n+1):last-child{grid-column:1 / -1}.tsbn__item:nth-child(3n+1){border-inline-start:0}.tsbn__item:nth-child(n+4){border-block-start:1px solid var(--tsbn-divider)}.tsbn__cell{padding:.8rem .5rem .85rem}.tsbn__rating{font-size:14px}.tsbn__num{font-size:clamp(24px,7cqi,30px)}.tsbn__label{margin-top:.25rem;font-size:14px;line-height:1.25}.tsbn__summary{font-size:15px;opacity:.9}}@container (min-width: 700px){.tsbn__eyebrow{font-size:14px;letter-spacing:.1em}.tsbn__tagline{font-size:14px;opacity:.85}.tsbn__rating{font-size:14px}.tsbn__label{font-size:15px}.tsbn__sub{font-size:14px;opacity:.8}.tsbn__summary{font-size:15px;opacity:.9}}html[data-ts-theme=night] .tsbn{--tsbn-panel: var(--tsn-surface) !important}
/*# sourceMappingURL=/cdn/shop/t/220/assets/topshelf-by-the-numbers.css.map */