.ct-np{position:fixed;left:var(--sp-4);bottom:var(--sp-4);z-index:9;pointer-events:none;translate:0 calc(-1 * var(--np-lift, 0px));transition:translate .55s cubic-bezier(.22,1,.36,1)}.ct-np__in{pointer-events:auto;display:flex;align-items:center;gap:6px;max-width:min(380px,calc(100vw - 2 * var(--sp-4)));padding:5px;color:var(--fg);background:color-mix(in srgb,var(--bg) 94%,transparent);border:1px solid var(--hairline);border-radius:999px;box-shadow:0 18px 46px color-mix(in srgb,var(--fg) 13%,transparent);opacity:0;transform:translateY(18px) scale(.96);transform-origin:30px 50%;transition:opacity .3s ease,transform .5s cubic-bezier(.5,0,.75,0)}.ct-np.is-on .ct-np__in{opacity:1;transform:none;transition:opacity .4s ease,transform .7s cubic-bezier(.22,1,.36,1)}.ct-np[data-tone=dark] .ct-np__in{background:color-mix(in srgb,var(--bg-2) 80%,transparent);box-shadow:0 18px 46px #00000059}.ct-np button{display:grid;place-items:center;flex:none;padding:0;border:0;background:none;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}.ct-np button:focus-visible{outline:2px solid var(--fg);outline-offset:2px}.ct-np__disc{position:relative;width:46px;height:46px;border-radius:50%}.ct-np__ring{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;rotate:-90deg;fill:none;stroke-width:1.5}.ct-np__ring circle:first-child{stroke:color-mix(in srgb,var(--fg) 12%,transparent)}.ct-np__fill{stroke:var(--fg);stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}.ct-np__roll{position:absolute;top:5px;right:5px;bottom:5px;left:5px;border-radius:50%}.ct-np.is-on .ct-np__roll{animation:ct-np-roll .9s .12s cubic-bezier(.22,1,.36,1) backwards}@keyframes ct-np-roll{0%{transform:translate(-22px) rotate(-220deg);opacity:0}}.ct-np__rec{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background:radial-gradient(circle,#1b1a19 0 6%,var(--np-lab) 6.5% 31%,transparent 31.5%),repeating-radial-gradient(circle,#1d1c1b 0 1.1px,#2b2a28 1.1px 2.1px),#1d1c1b;box-shadow:inset 0 0 0 1px #ffffff0f,0 2px 6px #00000040;animation:ct-np-spin var(--np-turn, 1.8s) linear infinite paused}.ct-np__rec i{position:absolute;left:50%;top:23%;width:2px;height:11%;translate:-50% 0;border-radius:1px;background:var(--np-lab-ink);opacity:.55}.ct-np[data-size="7"] .ct-np__rec{background:radial-gradient(circle,#bdbdb8 0 2.6%,#0e0e0f 3.1% 9.3%,#8f8f8a 9.5% 10.3%,#0e0e0f 10.5% 15.5%,var(--np-lab) 15.9% 36%,transparent 36.5%),repeating-radial-gradient(circle,#1d1c1b 0 1.1px,#2b2a28 1.1px 2.1px),#1d1c1b}.ct-np[data-size="7"] .ct-np__rec i{top:26.5%;height:9%}.ct-np[data-size="7"] .ct-np__disc:after{-webkit-mask:radial-gradient(circle,transparent 0 36%,#000 37%);mask:radial-gradient(circle,transparent 0 36%,#000 37%)}.ct-np__disc:after{content:"";position:absolute;top:5px;right:5px;bottom:5px;left:5px;border-radius:50%;pointer-events:none;background:conic-gradient(from 20deg,transparent 0 8%,rgb(255 255 255 / .16) 12%,transparent 17% 58%,rgb(255 255 255 / .1) 62%,transparent 67%);-webkit-mask:radial-gradient(circle,transparent 0 31%,#000 32%);mask:radial-gradient(circle,transparent 0 31%,#000 32%)}.ct-np.is-playing .ct-np__rec{animation-play-state:running}@keyframes ct-np-spin{to{rotate:360deg}}@media(hover:hover){.ct-np__disc:hover .ct-np__roll{transform:scale(1.06)}.ct-np__roll{transition:transform .4s cubic-bezier(.22,1,.36,1)}}.ct-np__txt{display:grid;gap:4px;min-width:0;margin:0 6px}.ct-np__k{font:500 10px/1 "Barlow",var(--font-body);letter-spacing:.2em;text-transform:uppercase;color:var(--fg-muted);white-space:nowrap}.ct-np__t{overflow:hidden;font:500 14px/1.15 var(--font-body);white-space:nowrap;text-overflow:ellipsis;max-width:200px}.ct-np__pp{position:relative;width:44px;height:44px;border-radius:50%;background:var(--fg)!important;color:var(--bg)!important;transition:transform .25s cubic-bezier(.22,1,.36,1)}.ct-np__pp:active{transform:scale(.92)}.ct-np__pp svg{width:20px;height:20px;overflow:visible}.ct-np__pp path{transition:opacity .2s ease,transform .3s cubic-bezier(.22,1,.36,1);transform-origin:12px 12px}.ct-np__i-pause{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}.ct-np__i-play{fill:currentColor;stroke:currentColor;stroke-width:1.2;stroke-linejoin:round}.ct-np:not(.is-playing) .ct-np__i-pause,.ct-np.is-playing .ct-np__i-play{opacity:0;transform:scale(.6)}.ct-np__x{width:40px;height:40px;border-radius:50%;color:var(--fg-dim)!important;transition:color .2s,background-color .2s}.ct-np__x svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}@media(hover:hover){.ct-np__x:hover{color:var(--fg)!important;background:color-mix(in srgb,var(--fg) 6%,transparent)}}@media(max-width:900px){.ct-np{left:12px;bottom:calc(12px + env(safe-area-inset-bottom))}.ct-np__in{max-width:calc(100vw - 24px)}.ct-np__t{max-width:46vw}}@media(prefers-reduced-motion:reduce){.ct-np,.ct-np__in,.ct-np.is-on .ct-np__in{transition-duration:.01s}.ct-np__rec,.ct-np.is-on .ct-np__roll{animation:none}}@media(hover:none)and (pointer:coarse){.ct-np__rec{animation:none}}
/*# sourceMappingURL=/cdn/shop/t/14/assets/css-np.css.map */