.sp-tno{--u:5px;--l1: 0;--l2: 0;--fan:0;--q1: 0;--op:0;--wx:58deg;--wz:-34deg;aspect-ratio:4 / 5;cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}.sp-tno__glow{position:absolute!important;left:50%;top:54%;z-index:1!important;width:calc(var(--u) * 100);height:calc(var(--u) * 100);margin:calc(var(--u) * -50) 0 0 calc(var(--u) * -50);border-radius:50%;background:radial-gradient(circle,color-mix(in oklab,var(--sachet) 60%,#fff) 0%,transparent 62%);opacity:calc(.14 + var(--l2) * .2 + var(--q1) * .16);filter:blur(calc(var(--u) * 3));pointer-events:none}.sp-tno__scene{position:absolute!important;top:0;right:0;bottom:0;left:0;z-index:2!important;perspective:calc(var(--u) * 230);perspective-origin:50% 40%}.sp-tno__float{position:absolute;left:50%;top:58%;transform-style:preserve-3d;animation:tno-bob 7s ease-in-out infinite}@keyframes tno-bob{0%,to{transform:translateY(0)}50%{transform:translateY(calc(var(--u) * -1.2))}}.sp-tno__move{position:absolute;left:0;top:0;transform-style:preserve-3d;transform:translate3d(0,calc(var(--u) * (var(--fan) * 3 + var(--q1) * 6)),0) scale(calc(1 - var(--fan) * .03 - var(--q1) * .06))}.sp-tno__world{position:absolute;left:0;top:0;transform-style:preserve-3d;transform:rotateX(var(--wx)) rotate(calc(var(--wz) + var(--l2) * 8deg));--W: calc(var(--u) * 44);--H: calc(var(--u) * 10);--R: calc(var(--u) * 9.2);--LW: calc(var(--u) * 45.3);--LH: calc(var(--u) * 3.8);--P: calc(var(--u) * 32);--PR: calc(var(--u) * 5.5);--lx:-24;--ly:-30;--lz:9;--lrx:-26deg;--lry:10deg;--lrz:-18deg}.sp-tno__world>*{position:absolute;transform-style:preserve-3d}.tno-shadow{left:calc(var(--W) * -.7);top:calc(var(--W) * -.62);width:calc(var(--W) * 1.4);height:calc(var(--W) * 1.4);border-radius:50%;background:radial-gradient(closest-side,rgba(27,32,26,.42),rgba(27,32,26,.14) 55%,transparent);transform:translate3d(calc(var(--u) * 2),calc(var(--u) * 4),-1px);filter:blur(calc(var(--u) * 1.6))}.tno-lid-shadow{left:calc(var(--W) * -.55);top:calc(var(--W) * -.55);width:calc(var(--W) * 1.1);height:calc(var(--W) * 1.1);border-radius:30%;background:radial-gradient(closest-side,rgba(27,32,26,.3),transparent);opacity:calc((1 - var(--l2)) * var(--l1) * .9);transform:translate3d(calc(var(--l2) * var(--u) * var(--lx)),calc(var(--l2) * var(--u) * var(--ly)),0) scale(calc(1 + var(--l1) * .25));filter:blur(calc(var(--u) * 2))}.tno-floor,.tno-ring{left:calc(var(--W) / -2);top:calc(var(--W) / -2);width:var(--W);height:var(--W);border-radius:var(--R);box-sizing:border-box}.tno-floor{display:grid;place-items:center;background:radial-gradient(90% 90% at 38% 30%,#232822,#0c0e0c 70%);box-shadow:inset 0 0 calc(var(--u) * 5) #000c;transform:translateZ(1px)}.tno-floor span{font-family:var(--font-sans);font-weight:600;font-size:calc(var(--u) * 1.8);letter-spacing:.34em;color:#efe9dd14}.tno-ring{border:calc(var(--u) * 1.9) solid color-mix(in srgb,#2b312a calc(var(--k) * 6%),#050605);transform:translateZ(calc(var(--H) * var(--k) / 14))}.tno-ring--rim{border-color:#30362f;box-shadow:inset 0 0 0 1px #ffffff0f,0 0 0 1px #ffffff0d}.tno-lid{left:0;top:0;will-change:transform;transform:translate3d(calc(var(--l2) * var(--u) * var(--lx)),calc(var(--l2) * var(--u) * var(--ly)),calc(var(--H) + var(--l1) * var(--u) * 12 + var(--l2) * var(--u) * (var(--lz) - 12))) rotateX(calc(var(--l2) * var(--lrx))) rotateY(calc(var(--l2) * var(--lry))) rotate(calc(var(--l2) * var(--lrz)))}.tno-lid>*{position:absolute;left:calc(var(--LW) / -2);top:calc(var(--LW) / -2);width:var(--LW);height:var(--LW);border-radius:calc(var(--R) + var(--u) * .6);box-sizing:border-box}.tno-lid__layer{background:color-mix(in srgb,#262b25 calc(var(--k) * 12%),#080908);transform:translateZ(calc(var(--LH) * var(--k) / 7))}.tno-lid__layer[style="--k:0"]{background:#0d0f0d;box-shadow:inset 0 0 0 calc(var(--u) * 1.4) #181c17}.tno-lid__top{display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(135deg,#353b33,#1c201b 52%,#0f120e);box-shadow:inset 0 0 0 calc(var(--u) * .35) #ffffff0d,inset 0 0 0 calc(var(--u) * .9) #00000040;transform:translateZ(var(--LH));color:#efe9dd}.tno-lid__brand{margin-top:calc(var(--u) * 3);font-family:var(--font-sans);font-weight:600;font-size:calc(var(--u) * 4.1);letter-spacing:.3em;padding-left:.3em}.tno-lid__label{margin-top:calc(var(--u) * .9);font-family:var(--font-sans);font-size:calc(var(--u) * 2.3);opacity:.72}.tno-lid__line{width:calc(var(--u) * 6);height:calc(var(--u) * .36);margin-top:calc(var(--u) * 1.4);border-radius:2px;background:var(--tin-accent)}.tno-lid__count{margin-top:calc(var(--u) * 9.5);font-family:var(--font-mono);font-size:calc(var(--u) * 1.35);letter-spacing:.26em;opacity:.5;white-space:nowrap}.tno-lid__sheen{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.16) 46%,transparent 60%);transform:translate(calc(-70% + var(--l1) * 140%))}.tno-stack{left:0;top:0}.tno-sachet{position:absolute;left:calc(var(--P) / -2);top:calc(var(--P) / -2);width:var(--P);height:var(--P);border-radius:var(--PR);box-sizing:border-box;background:linear-gradient(180deg,color-mix(in oklab,var(--sachet) 78%,#fff) 0 21.6%,rgba(255,255,255,.7) 21.6% 22.2%,transparent 22.2%),radial-gradient(120% 90% at 20% 20%,rgba(255,255,255,.22),transparent 55%),linear-gradient(160deg,color-mix(in oklab,var(--sachet) 94%,#fff),color-mix(in oklab,var(--sachet) calc(68% + var(--i) * 1.1%),#1e1420));box-shadow:inset 0 0 0 1px #ffffff42,0 calc(var(--u) * .3) calc(var(--u) * .8) color-mix(in oklab,var(--sachet) 32%,transparent);transform:translate3d(calc(var(--u) * (var(--jx) * .14 + var(--fan) * var(--i) * .3)),calc(var(--u) * var(--jy) * .14),calc(var(--u) * (.6 + var(--i) * 8.4 / (var(--n) + 1)) + var(--fan) * var(--i) * var(--u) * 1.1)) rotate(calc(var(--jr) * .5deg + var(--fan) * (var(--i) - var(--n)) * 3deg))}.tno-sachet:before{content:"";position:absolute;inset:calc(var(--P) * .22 + var(--u) * .8) calc(var(--u) * .8) calc(var(--u) * .8);border:1px dashed rgba(255,255,255,.34);border-radius:0 0 calc(var(--PR) * .8) calc(var(--PR) * .8)}.sp-tno--art .tno-sachet{background:radial-gradient(120% 90% at 20% 20%,rgba(255,255,255,.18),transparent 55%),linear-gradient(135deg,var(--s-hi) 0%,var(--sachet) 55%,color-mix(in oklab,var(--s-lo) calc(88% + var(--i) * .4%),#000) 100%);box-shadow:inset 0 0 0 1px #fff3,0 calc(var(--u) * .3) calc(var(--u) * .8) #1b201a47}.sp-tno--art .tno-sachet:before{inset:calc(var(--u) * .8);border-color:#ffffff4d;border-radius:calc(var(--PR) * .8)}.sp-tno--art .sp-tno__glow{background:radial-gradient(circle,color-mix(in oklab,var(--tone) 60%,#fff) 0%,transparent 62%)}.sp-tno--art .tno-pouch__back{background:var(--s-back)}.tno-pouch{left:0;top:0;will-change:transform;transform:translate3d(calc(var(--fan) * var(--n) * var(--u) * .3),calc(var(--u) * var(--q1) * -9),calc(var(--u) * 9.3 + var(--fan) * var(--n) * var(--u) * 1.1 + var(--q1) * var(--u) * 26)) rotate(calc((var(--wz) + var(--l2) * 8deg) * -1 * var(--q1) - var(--q1) * 5deg)) rotateX(calc(var(--wx) * -.9 * var(--q1))) scale(calc(1 + var(--q1) * .1))}.tno-pouch__in{position:absolute;left:0;top:0;transform-style:preserve-3d}.tno-pouch__in>*{position:absolute;left:calc(var(--P) / -2);width:var(--P);box-sizing:border-box}.tno-pouch__back{top:calc(var(--P) / -2);height:var(--P);border-radius:var(--PR);background:color-mix(in oklab,var(--sachet) 82%,#2a1a2e)}.tno-pouch__front{top:calc(var(--P) / -2 + var(--P) * .22);height:calc(var(--P) * .78);border-radius:0 0 var(--PR) var(--PR);overflow:hidden;transform:translateZ(calc(var(--u) * .6));color:#fff;background:radial-gradient(120% 90% at 20% 0%,rgba(255,255,255,.28),transparent 55%),linear-gradient(160deg,color-mix(in oklab,var(--sachet) 88%,#fff) 0%,var(--sachet) 45%,color-mix(in oklab,var(--sachet) 86%,#2a1a2e) 100%);box-shadow:inset 0 calc(var(--u) * -.4) 0 #00000014,0 calc(var(--u) * 2.4) calc(var(--u) * 4) calc(var(--u) * -1.6) color-mix(in oklab,var(--sachet) 40%,transparent)}.tno-pouch__front:before{content:"";position:absolute;inset:calc(var(--u) * .8);top:calc(var(--u) * -2);border:1px dashed rgba(255,255,255,.45);border-radius:calc(var(--PR) * .8)}.tno-pouch__front:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:var(--grain);opacity:.14;mix-blend-mode:soft-light}.tno-p__circle{position:absolute;right:calc(var(--u) * -6);bottom:calc(var(--u) * -8);width:calc(var(--u) * 21);height:calc(var(--u) * 21);border-radius:50%;background:#ffffff24}.tno-p__oral,.tno-p__strip{position:absolute;left:calc(var(--u) * 2.8);font-family:var(--font-sans);line-height:.9;letter-spacing:-.02em}.tno-p__oral{top:calc(var(--u) * 5.6);font-size:calc(var(--u) * 6.2);font-weight:400;color:transparent;-webkit-text-stroke:calc(var(--u) * .16) #fff}.tno-p__strip{top:calc(var(--u) * 11.2);font-size:calc(var(--u) * 7);font-weight:800}.tno-p__pill{position:absolute;left:calc(var(--u) * 2.6);top:calc(var(--u) * 19.2);padding:calc(var(--u) * .7) calc(var(--u) * 1.4);border-radius:calc(var(--u) * .9);background:#fff;color:var(--sachet);font-family:var(--font-sans);font-size:calc(var(--u) * 1.6);letter-spacing:.08em;white-space:nowrap}.tno-p__pill b{font-weight:800}.tno-p__sheen{position:absolute;top:-20%;right:-40%;bottom:-20%;left:-40%;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.34) 50%,transparent 60%);transform:translate(-60%)}.tno-pouch__flap{top:calc(var(--P) / -2);height:calc(var(--P) * .22);display:flex;align-items:center;justify-content:space-between;padding:0 calc(var(--u) * 2.6);overflow:hidden;border-radius:var(--PR) var(--PR) 0 0;background:linear-gradient(170deg,color-mix(in oklab,var(--sachet) 82%,#fff),color-mix(in oklab,var(--sachet) 94%,#fff));border-bottom:1px dashed rgba(255,255,255,.55);transform:translateZ(calc(var(--u) * .6))}.tno-p__brand{font-family:var(--font-sans);font-weight:600;font-size:calc(var(--u) * 1.6);letter-spacing:.3em;color:#fff}.tno-p__peel{display:grid;place-items:center;width:calc(var(--u) * 5.6);height:calc(var(--u) * 5.6);border-radius:50%;background:#fffffff0;color:var(--sachet);font-family:var(--font-mono);font-weight:500;font-size:calc(var(--u) * 1.15);line-height:1.1;text-align:center}.sp-tno.is-open .tno-pouch__in{animation:tno-drift 6.5s ease-in-out infinite}.sp-tno.is-open .tno-p__sheen{animation:tno-sheen 5s cubic-bezier(.22,1,.36,1) 1.2s infinite}@keyframes tno-drift{0%,to{transform:translateZ(0) rotateX(0) rotateY(0)}33%{transform:translate3d(calc(var(--u) * .5),calc(var(--u) * -.8),calc(var(--u) * .6)) rotateX(4deg) rotateY(-6deg)}66%{transform:translate3d(calc(var(--u) * -.3),calc(var(--u) * -.4),calc(var(--u) * .3)) rotateX(-3deg) rotateY(4deg)}}@keyframes tno-sheen{0%{transform:translate(-60%)}60%,to{transform:translate(60%)}}.sp-tno .sp-tno__count{position:absolute!important;left:6%;bottom:6%;z-index:4!important;display:flex;align-items:center;gap:12px;opacity:var(--l2);transform:translate3d(0,calc((1 - var(--l2)) * 12px),0);pointer-events:none}.sp-tno__count b{font-family:var(--font-display);font-size:calc(var(--u) * 12);font-weight:400;line-height:.8;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--ink)}.sp-tno__count span{max-width:10em;font-family:var(--font-mono);font-size:max(9px,calc(var(--u) * 1.75));line-height:1.5;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted)}.sp-tno .sp-tno__replay{position:absolute!important;right:14px;bottom:14px;z-index:5!important;display:inline-flex;align-items:center;gap:7px;padding:8px 12px 8px 10px;margin:0;border:0;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--surface-raised) 78%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .6s cubic-bezier(.22,1,.36,1),background-color .3s;pointer-events:none}.sp-tno.is-open .sp-tno__replay{opacity:1;transform:none;pointer-events:auto}.sp-tno__replay svg{width:13px;height:13px;display:block}.sp-tno__replay:hover{background:var(--surface-raised)}.sp-tno__replay:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.sp-tno.is-static .sp-tno__replay{display:none}.sp-tno.is-static .sp-tno__float,.sp-tno:not(.is-live) .sp-tno__float,.sp-tno:not(.is-live) .tno-pouch__in,.sp-tno:not(.is-live) .tno-p__sheen{animation-play-state:paused}.sp-tno.is-static .sp-tno__float{animation:none}@media(prefers-reduced-motion:reduce){.sp-tno__float,.tno-pouch__in,.tno-p__sheen{animation:none!important}}.tno-pouch__art{top:calc(var(--P) / -2);height:var(--P);border-radius:var(--PR);overflow:hidden;transform:translateZ(calc(var(--u) * .6));box-shadow:0 calc(var(--u) * 2.4) calc(var(--u) * 4) calc(var(--u) * -1.6) #1b201a59}.tno-pouch__art .sp-art,.tno-lid__top--art .sp-art{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.tno-lid__top--art{display:block;background:#121512}
/*# sourceMappingURL=/cdn/shop/t/198/assets/suprimal-tin-open.css.map */
