.upp-gfx{--gx: 0;--gy: 0;--ease: cubic-bezier(.22, 1, .36, 1);--spring: cubic-bezier(.34, 1.36, .64, 1);--blue: var(--accent, #2997ff);position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;container-type:size;border-radius:inherit;background:radial-gradient(70% 80% at 50% 58%,color-mix(in srgb,var(--blue) 20%,transparent),transparent 70%),linear-gradient(180deg,#16161b,#0c0c0f);color:#f5f5f7;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}:where(.upp-gfx) p{margin:0}.upp-gfx__stage{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;perspective:150cqw}.upp-gfx__rig{--rx: 0deg;--ry: 0deg;position:relative;display:grid;justify-items:center;transform-style:preserve-3d;transform:rotateX(calc(var(--rx) + var(--gy) * -9deg)) rotateY(calc(var(--ry) + var(--gx) * 14deg));transition:transform .9s var(--ease)}.upp-gfx--speed{background:radial-gradient(60% 48% at 50% 64%,color-mix(in srgb,var(--blue) 30%,transparent),transparent 72%),linear-gradient(180deg,#121219,#0a0a0d 62%,#0d1220)}.upp-gfx__floor{position:absolute;display:block;right:-45%;bottom:0;left:-45%;overflow:hidden;height:58%;transform:perspective(48cqw) rotateX(66deg);transform-origin:50% 100%;-webkit-mask-image:linear-gradient(to top,#000 0%,rgb(0 0 0 / .8) 30%,transparent 92%);mask-image:linear-gradient(to top,#000 0%,rgb(0 0 0 / .8) 30%,transparent 92%)}.upp-gfx__floor:before{position:absolute;top:-7cqw;right:0;bottom:0;left:0;background-image:linear-gradient(90deg,color-mix(in srgb,var(--blue) 55%,transparent) 1px,transparent 1px),linear-gradient(0deg,color-mix(in srgb,var(--blue) 55%,transparent) 1px,transparent 1px);background-position:50% 0;background-size:7cqw 7cqw;content:"";animation:upp-gfx-roll 1.4s linear infinite}@keyframes upp-gfx-roll{to{transform:translateY(7cqw)}}.upp-gfx__streaks i{position:absolute;top:var(--y);left:0;width:var(--w);height:max(1px,.26cqw);border-radius:2px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--blue) 75%,transparent) 72%,#fff);opacity:.28;transform:translate(-100%);transition:opacity .5s var(--ease);animation:upp-gfx-streak var(--t) linear var(--d) infinite}@keyframes upp-gfx-streak{0%{transform:translate(-100%)}to{transform:translate(100cqw)}}.upp-gfx--speed .upp-gfx__rig{--rx: 12deg;--ry: -18deg;margin-top:-3cqw}.upp-gfx__kicker{color:#a1a1a6;font-size:max(11px,2.7cqw);font-weight:600;line-height:1.1;letter-spacing:-.01em;transform:translateZ(4cqw)}.upp-gfx__ten{position:relative;display:grid;margin:.4cqw 0 .8cqw;font-size:28cqw;font-weight:800;line-height:.84;letter-spacing:-.075em;transform-style:preserve-3d;transition:transform .9s var(--spring);animation:upp-gfx-float 5s ease-in-out infinite alternate}@keyframes upp-gfx-float{0%{translate:0 -.6cqw}to{translate:0 .6cqw}}.upp-gfx__ten span{grid-area:1 / 1;padding-right:.08em;color:#1c4fb8;color:color-mix(in srgb,#06122e calc(var(--z) * 8%),#3a7df0);transform:translateZ(calc(var(--z) * -.42cqw))}.upp-gfx__ten span:last-child{background:linear-gradient(176deg,#fff 24%,#e1ecff 52%,#8fbfff);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 2.4cqw color-mix(in srgb,var(--blue) 30%,transparent));transition:filter .7s var(--ease)}.upp-gfx__caption{color:#f5f5f7;font-size:max(12px,3.6cqw);font-weight:700;line-height:1.1;letter-spacing:-.03em;transform:translateZ(4cqw)}.upp-gfx--speed[data-live] .upp-gfx__ten{transform:translateZ(6cqw)}.upp-gfx--speed[data-live] .upp-gfx__ten span:last-child{filter:drop-shadow(0 0 3.6cqw color-mix(in srgb,var(--blue) 65%,transparent))}.upp-gfx--speed[data-live] .upp-gfx__streaks i{opacity:.95}.upp-gfx--presets{background:radial-gradient(55% 60% at 50% 55%,color-mix(in srgb,#8e7cff 20%,transparent),transparent 72%),radial-gradient(40% 50% at 64% 40%,color-mix(in srgb,var(--blue) 16%,transparent),transparent 70%),linear-gradient(180deg,#16161b,#0c0c0f)}.upp-gfx--presets .upp-gfx__rig{--gap: 3.4cqw;width:25cqw;height:25cqw;transform:translate3d(-3cqw,6cqw,0) rotateX(calc(54deg + var(--gy) * -8deg)) rotate(calc(-38deg + var(--gx) * 14deg))}.upp-gfx--presets[data-live] .upp-gfx__rig{--gap: 6.4cqw}.upp-gfx__card{--u: 1cqw;--lift: 0cqw;--spin: 0deg;position:absolute;top:0;right:0;bottom:0;left:0;transform-style:preserve-3d;transform:translate3d(calc(var(--n) * 5cqw),calc(var(--n) * -1.4cqw),calc(var(--n) * var(--gap) + var(--lift))) rotate(var(--spin));transition:transform 1s var(--spring) calc(var(--n) * 50ms)}.upp-gfx--presets[data-live] .upp-gfx__card:last-child{--lift: 3cqw;--spin: 9deg}.upp-gfx--presets[data-live] .upp-gfx__card:nth-last-child(2){--spin: 4deg}.upp-gfx__edge{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:calc(var(--u) * 4.4);background:#a1a1a6;background:color-mix(in srgb,#4a4a50 calc(var(--l) * 6.5%),#c9c9ce);transform:translateZ(calc(var(--l) * var(--u) * -.25))}.upp-gfx__face{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;align-content:center;justify-items:center;gap:calc(var(--u) * 4);border-radius:calc(var(--u) * 4.4);background:linear-gradient(140deg,#fff,#f3f3f6 46%,#dedee3);box-shadow:inset 0 0 0 calc(var(--u) * .8) #0000000d,inset calc(var(--u) * .4) calc(var(--u) * .4) 0 #ffffffe6}.upp-gfx__slider{position:relative;width:calc(var(--u) * 14);height:calc(var(--u) * .9);border-radius:calc(var(--u) * 1);background:#1d1d1f}.upp-gfx__slider i{position:absolute;top:50%;left:26%;width:calc(var(--u) * 3.2);height:calc(var(--u) * 3.2);margin:calc(var(--u) * -1.6) 0 0 calc(var(--u) * -1.6);border-radius:50%;background:#fff;box-shadow:0 0 0 calc(var(--u) * .85) #1d1d1f;transition:left 1s var(--spring) .12s}.upp-gfx__slider--low i{left:72%}.upp-gfx__face b{margin-top:calc(var(--u) * .6);color:#1d1d1f;font-size:calc(var(--u) * 5.6);font-weight:800;line-height:1;letter-spacing:-.01em}.upp-gfx--presets[data-live] .upp-gfx__slider i{left:74%}.upp-gfx--presets[data-live] .upp-gfx__slider--low i{left:40%}.upp-gfx__shadow{position:absolute;top:-4%;right:-4%;bottom:-4%;left:-4%;border-radius:6cqw;background:#0009;filter:blur(2.6cqw);transform:translate3d(1.4cqw,1.4cqw,-3.4cqw);transition:transform 1s var(--ease),opacity 1s var(--ease)}.upp-gfx--presets[data-live] .upp-gfx__shadow{opacity:.75;transform:translate3d(2.6cqw,2.6cqw,-3.4cqw) scale(1.12)}.upp-gfx__chip{position:absolute;top:var(--y);left:var(--x);display:inline-flex;align-items:center;gap:max(5px,.9cqw);padding:max(5px,.95cqw) max(9px,1.7cqw);border-radius:999px;background:#ffffff14;box-shadow:inset 0 0 0 1px #ffffff21,0 1.4cqw 3.4cqw -1cqw #000000b3;-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);color:#f5f5f7;font-size:max(10px,1.85cqw);font-weight:600;line-height:1;white-space:nowrap;opacity:0;transform:translateY(2.4cqw) scale(.92);transition:opacity .5s var(--ease) calc(var(--i) * 80ms),transform .9s var(--spring) calc(var(--i) * 80ms)}.upp-gfx__chip--end{right:var(--x);left:auto}.upp-gfx__chip i{width:max(5px,.85cqw);height:max(5px,.85cqw);border-radius:50%;background:var(--blue);box-shadow:0 0 1.2cqw var(--blue)}.upp-gfx--presets[data-live] .upp-gfx__chip,.upp-gfx--pixel[data-live] .upp-gfx__chip{opacity:1;transform:none}.upp-gfx--updates{--green: #30d158;background:radial-gradient(48% 62% at 50% 56%,color-mix(in srgb,var(--green) 22%,transparent),transparent 72%),linear-gradient(180deg,#16161b,#0c0c0f)}.upp-gfx__kicker--top{position:absolute;top:7.5%;right:0;left:0;color:#f5f5f7;font-size:max(13px,3.6cqw);font-weight:700;letter-spacing:-.03em;text-align:center;transform:none}.upp-gfx--updates .upp-gfx__rig{--rx: 8deg;--ry: -26deg;margin-top:6cqw}.upp-gfx__rig>.upp-gfx__orbit,.upp-gfx__rig>.upp-gfx__shield{grid-area:1 / 1;align-self:center}.upp-gfx__shield{--shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 116'%3E%3Cpath d='M50 3c13 8.5 28 12.6 43.4 13.4A3.6 3.6 0 0 1 97 20v30c0 31.5-19.6 52-47 63C22.6 102 3 81.5 3 50V20a3.6 3.6 0 0 1 3.6-3.6C22 15.6 37 11.5 50 3Z'/%3E%3C/svg%3E");position:relative;width:25cqw;aspect-ratio:100 / 116;transform-style:preserve-3d;transition:transform 1.1s var(--spring);animation:upp-gfx-float 5s ease-in-out infinite alternate}.upp-gfx__shield>span,.upp-gfx__check{position:absolute;top:0;right:0;bottom:0;left:0}.upp-gfx__shield>span{-webkit-mask:var(--shield) center / 100% 100% no-repeat;mask:var(--shield) center / 100% 100% no-repeat}.upp-gfx__shield-layer{background:#127a2c;background:color-mix(in srgb,#03230b calc(var(--l) * 8%),#1c9c3c);transform:translateZ(calc(var(--l) * -.4cqw))}.upp-gfx__shield-face{background:linear-gradient(165deg,#3fdc66,#1fb146 60%,#179a3b)}.upp-gfx__shield-inner{background:radial-gradient(90% 55% at 32% 8%,rgb(255 255 255 / .5),transparent 62%),linear-gradient(165deg,#74f394,#39d462 46%,#20b449);transform:translateZ(.5cqw) scale(.84)}.upp-gfx__check{width:100%;height:100%;overflow:visible;transform:translateZ(1.4cqw);filter:drop-shadow(0 .5cqw .6cqw rgb(0 60 18 / .45))}.upp-gfx__check path{fill:none;stroke:#fff;stroke-dasharray:1;stroke-linecap:round;stroke-linejoin:round;stroke-width:9}.upp-gfx--updates[data-live] .upp-gfx__shield{transform:rotateY(26deg) translateZ(3cqw)}.upp-gfx--updates[data-live] .upp-gfx__check path{animation:upp-gfx-check .8s var(--ease) .35s backwards}@keyframes upp-gfx-check{0%{stroke-dashoffset:1}to{stroke-dashoffset:0}}.upp-gfx__orbit{position:relative;width:50cqw;aspect-ratio:1;border-radius:50%;box-shadow:inset 0 0 0 max(1px,.18cqw) #ffffff24,0 0 4cqw color-mix(in srgb,var(--green) 18%,transparent);transform-style:preserve-3d;transform:rotateX(76deg)}.upp-gfx__orbit-spin{position:absolute;top:0;right:0;bottom:0;left:0;transform-style:preserve-3d;animation:upp-gfx-spin 16s linear infinite}.upp-gfx__orbit-spin i{position:absolute;top:50%;left:50%;width:2.2cqw;height:2.2cqw;margin:-1.1cqw;border-radius:50%;background:#d9ffe3;box-shadow:0 0 1.6cqw .4cqw color-mix(in srgb,var(--green) 80%,transparent);transform:rotate(var(--a)) translateY(-25cqw)}.upp-gfx__orbit-spin i:nth-child(1){--a: 0deg}.upp-gfx__orbit-spin i:nth-child(2){--a: 130deg}.upp-gfx__orbit-spin i:nth-child(3){--a: 245deg}@keyframes upp-gfx-spin{to{transform:rotate(360deg)}}.upp-gfx__toast{position:absolute;right:4.5%;bottom:8%;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:1.3cqw 1.4cqw;width:26cqw;padding:1.6cqw;border-radius:2.4cqw;background:#2c2c30b8;box-shadow:inset 0 0 0 1px #ffffff1a,0 2cqw 5cqw -1cqw #000000bf;-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);opacity:0;transform:translate(5cqw) scale(.96);transition:opacity .5s var(--ease) .2s,transform .9s var(--spring) .2s}.upp-gfx__toast-icon{display:grid;width:max(22px,4.4cqw);aspect-ratio:1;border-radius:28%;background:linear-gradient(165deg,#4be26f,#1aa23c);place-items:center}.upp-gfx__toast-icon svg{width:66%;fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:2.4}.upp-gfx__toast-text{display:grid;gap:.4cqw;min-width:0;line-height:1.15}.upp-gfx__toast-text b{color:#f5f5f7;font-size:max(10px,1.9cqw);font-weight:650}.upp-gfx__toast-text small{color:#a1a1a6;font-size:max(9px,1.6cqw);white-space:nowrap}.upp-gfx__toast-bar{grid-column:1 / -1;overflow:hidden;height:max(3px,.5cqw);border-radius:9px;background:#ffffff1f}.upp-gfx__toast-bar i{display:block;height:100%;border-radius:inherit;background:var(--green);transform:scaleX(0);transform-origin:0 50%;transition:transform 1.5s cubic-bezier(.33,1,.68,1) .5s}.upp-gfx--updates[data-live] .upp-gfx__toast{opacity:1;transform:none}.upp-gfx--updates[data-live] .upp-gfx__toast-bar i{transform:none}.upp-gfx--controls{background:radial-gradient(52% 70% at 34% 52%,color-mix(in srgb,var(--blue) 30%,transparent),transparent 72%),radial-gradient(40% 60% at 74% 46%,color-mix(in srgb,#5e5ce6 22%,transparent),transparent 70%),linear-gradient(180deg,#13141c,#0b0b10)}.upp-gfx--controls .upp-gfx__rig{--rx: 8deg;--ry: -16deg;grid-template-columns:auto auto;align-items:center;gap:7cqw}.upp-gfx__count{display:grid;justify-items:center;transform-style:preserve-3d;transform:translateZ(5cqw)}.upp-gfx__ten--count{margin:.6cqw 0 1cqw;font-size:19cqw;font-variant-numeric:tabular-nums}.upp-gfx--controls[data-live] .upp-gfx__ten{transform:translateZ(4cqw)}.upp-gfx--controls[data-live] .upp-gfx__ten span:last-child{filter:drop-shadow(0 0 3.6cqw color-mix(in srgb,var(--blue) 65%,transparent))}.upp-gfx__panel{--u: 1cqw;position:relative;width:31cqw;transform-style:preserve-3d;transition:transform 1s var(--spring)}.upp-gfx--controls[data-live] .upp-gfx__panel{transform:translate3d(-1cqw,-.6cqw,3cqw)}.upp-gfx__panel-edge{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:2.6cqw;background:color-mix(in srgb,#050507 calc(var(--l) * 9%),#3a3a40);transform:translateZ(calc(var(--l) * -.32cqw))}.upp-gfx__panel-face{position:relative;display:grid;grid-auto-rows:min-content;align-content:start;gap:1.9cqw;padding:2.6cqw;border-radius:2.6cqw;background:radial-gradient(120% 60% at 20% 0%,rgb(255 255 255 / .08),transparent 60%),linear-gradient(180deg,#2a2a2f,#1f1f23);box-shadow:inset 0 0 0 max(1px,.16cqw) #ffffff1a,0 4cqw 8cqw -2cqw #000000b3}.upp-gfx__panel-tab{justify-self:start;margin-bottom:.4cqw;padding-bottom:.8cqw;border-bottom:max(1px,.3cqw) solid var(--blue);color:#f5f5f7;font-size:max(8px,1.75cqw);font-weight:600;white-space:nowrap}.upp-gfx__row{display:grid;gap:.9cqw}.upp-gfx__row-label{overflow:hidden;color:#a1a1a6;font-size:max(7px,1.5cqw);font-weight:500;line-height:1.1;white-space:nowrap;text-overflow:ellipsis}.upp-gfx__track{position:relative;display:block;height:max(2px,.4cqw);border-radius:9px;background:linear-gradient(90deg,var(--blue) var(--upp-at, 30%),rgb(255 255 255 / .16) var(--upp-at, 30%));transition:--upp-at 1s var(--spring) calc(var(--i) * 70ms)}.upp-gfx__track i{position:absolute;top:50%;left:var(--upp-at, 30%);width:2cqw;height:2cqw;margin:-1cqw 0 0 -1cqw;border-radius:50%;background:#f5f5f7;box-shadow:0 .3cqw .8cqw #00000080}.upp-gfx__row--2 .upp-gfx__track{--upp-at: 64%}.upp-gfx--controls[data-live] .upp-gfx__row--0 .upp-gfx__track{--upp-at: 78%}.upp-gfx--controls[data-live] .upp-gfx__row--2 .upp-gfx__track{--upp-at: 22%}@property --upp-at{syntax: "<percentage>"; inherits: true; initial-value: 30%;}.upp-gfx__swatches{display:flex;gap:1cqw}.upp-gfx__swatches i{width:2.6cqw;height:2.6cqw;border-radius:.7cqw;background:var(--c);box-shadow:inset 0 0 0 max(1px,.14cqw) #ffffff2e;transition:transform .7s var(--spring),box-shadow .4s var(--ease)}.upp-gfx__swatches i:nth-child(1){--c: #f5f5f7}.upp-gfx__swatches i:nth-child(2){--c: #2997ff}.upp-gfx__swatches i:nth-child(3){--c: #30d158}.upp-gfx__swatches i:nth-child(4){--c: #ff9f0a}.upp-gfx--controls[data-live] .upp-gfx__swatches i:nth-child(2){box-shadow:0 0 0 max(1px,.3cqw) #f5f5f7,0 0 2cqw color-mix(in srgb,var(--blue) 70%,transparent);transform:translateY(-.4cqw) scale(1.12)}.upp-gfx__toggle{position:relative;display:block;width:5cqw;height:2.8cqw;border-radius:9px;background:#ffffff2e;transition:background-color .5s var(--ease) .3s}.upp-gfx__toggle i{position:absolute;top:.3cqw;left:.3cqw;width:2.2cqw;height:2.2cqw;border-radius:50%;background:#fff;transition:transform .7s var(--spring) .3s}.upp-gfx--controls[data-live] .upp-gfx__toggle{background:#30d158}.upp-gfx--controls[data-live] .upp-gfx__toggle i{transform:translate(2.2cqw)}.upp-gfx__panel:has(.eg-panel){width:33cqw}.upp-gfx__panel-face:has(.eg-panel){padding:0;background:radial-gradient(120% 50% at 20% 0%,rgb(255 255 255 / .05),transparent 60%),#1e1e1e}.upp-gfx__panel-face .eg-panel{--eg-font: 1.3cqw;--eg-blue: color-mix(in srgb, var(--blue) 70%, #3e9df5);padding:2.1cqw 2.2cqw 2.4cqw;border-radius:inherit;background:transparent}.upp-gfx--sound{--pink: #e86aa6;--loop: 2.8s;background:radial-gradient(50% 60% at 50% 46%,color-mix(in srgb,var(--pink) 20%,transparent),transparent 72%),linear-gradient(180deg,#17151a,#0c0c0f)}.upp-gfx--sound .upp-gfx__rig{--rx: 22deg;--ry: -12deg;gap:3.4cqw;margin-top:5cqw}.upp-gfx__paper{position:relative;width:30cqw;transform-style:preserve-3d;transform:translateZ(6cqw) rotateX(-14deg)}.upp-gfx__paper .mpc{--mpc-loop: var(--loop);--mpc-delay: calc(var(--loop) * -.5);--mpc-count: 999;width:100%}.upp-gfx__tracks{position:relative;display:grid;gap:1.1cqw;width:54cqw;transform-style:preserve-3d}.upp-gfx__clip{position:relative;display:block;height:5.4cqw;transform-style:preserve-3d}.upp-gfx__clip--audio{height:7.6cqw}.upp-gfx__clip-edge,.upp-gfx__clip-face{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:1.1cqw}.upp-gfx__clip-edge{background:color-mix(in srgb,#2a0a1a calc(var(--l) * 12%),#b44b80);transform:translateZ(calc(var(--l) * -.3cqw))}.upp-gfx__clip-face{display:flex;align-items:center;padding:0 1.6cqw;background:linear-gradient(180deg,#f08cbc,#e06aa2);box-shadow:inset 0 0 0 max(1px,.16cqw) #ffffff59}.upp-gfx__clip-face b{color:#3a0b22;font-size:max(9px,2.1cqw);font-weight:650;letter-spacing:-.01em;white-space:nowrap}.upp-gfx__wave{position:absolute;top:12%;left:1%;width:98%;height:76%;fill:none;stroke:#5e1238;stroke-width:1.05}.upp-gfx__wave path:first-child{stroke-width:.5}.upp-gfx__wave--lit{stroke:#fff;opacity:0;filter:drop-shadow(0 0 .5cqw rgb(255 255 255 / .7))}.upp-gfx__playhead{position:absolute;top:-1.8cqw;bottom:-1.2cqw;left:50%;width:max(1px,.3cqw);background:var(--blue);box-shadow:0 0 1.4cqw var(--blue);transform:translateZ(1.2cqw)}.upp-gfx__playhead:before{position:absolute;top:0;left:50%;width:2cqw;height:2cqw;margin-left:-1cqw;border-radius:.4cqw .4cqw 50% 50%;background:var(--blue);content:""}.upp-gfx--sound[data-live] :is(.upp-gfx__playhead,.upp-gfx__wave--lit){animation:upp-gfx-play var(--loop) linear calc(var(--loop) * -.5) 999}.upp-gfx--sound[data-live] .upp-gfx__wave--lit{animation-name:upp-gfx-hit}@keyframes upp-gfx-play{0%{left:2%}to{left:98%}}@keyframes upp-gfx-hit{0%,2%{opacity:1;clip-path:inset(0 97% 0 0)}30.6%{opacity:1;clip-path:inset(0 69% 0 0)}40%{opacity:0;clip-path:inset(0 69% 0 0)}40.1%,63%{opacity:0;clip-path:inset(0 37% 0 62%)}63.3%{opacity:1;clip-path:inset(0 37% 0 62%)}95.9%{opacity:1;clip-path:inset(0 5% 0 62%)}to{opacity:0;clip-path:inset(0 5% 0 62%)}}.upp-gfx--pixel{--red: #ff453a;background:radial-gradient(50% 60% at 50% 50%,color-mix(in srgb,var(--blue) 16%,transparent),transparent 72%),linear-gradient(180deg,#1b1b1f,#0d0d10)}.upp-gfx__ruler{position:absolute;z-index:1;background-color:#232327;background-image:repeating-linear-gradient(var(--dir),rgb(255 255 255 / .4) 0 1px,transparent 1px 5cqw),repeating-linear-gradient(var(--dir),rgb(255 255 255 / .18) 0 1px,transparent 1px 1cqw);background-repeat:no-repeat}.upp-gfx__ruler--top{--dir: 90deg;top:0;right:0;left:2.4cqw;height:2.4cqw;background-size:100% 100%,100% 45%;background-position:0 0,0 100%}.upp-gfx__ruler--left{--dir: 180deg;top:2.4cqw;bottom:0;left:0;width:2.4cqw;background-size:100% 100%,45% 100%;background-position:0 0,100% 0}.upp-gfx__guide{position:absolute;background:var(--red);opacity:.4;transform:translateZ(.2cqw);transition:opacity .5s var(--ease) calc(var(--i) * 90ms),box-shadow .5s var(--ease) calc(var(--i) * 90ms)}.upp-gfx__guide--v{top:-60cqw;bottom:-60cqw;left:calc(var(--u) * var(--pos));width:max(1px,.16cqw)}.upp-gfx__guide--h{top:calc(var(--u) * var(--pos));right:-60cqw;left:-60cqw;height:max(1px,.16cqw)}.upp-gfx--pixel[data-live] .upp-gfx__guide{opacity:1;box-shadow:0 0 .8cqw color-mix(in srgb,var(--red) 60%,transparent)}.upp-gfx--pixel .upp-gfx__rig{--rx: 12deg;--ry: -16deg}.upp-gfx__note{--u: .62cqw;position:relative;width:calc(var(--u) * 100);height:calc(var(--u) * 22.3);transform-style:preserve-3d;transition:transform 1s var(--ease)}.upp-gfx--pixel[data-live] .upp-gfx__note{transform:translateZ(4cqw) rotateY(12deg) rotateX(-8deg)}.upp-gfx__note-edge{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:calc(var(--u) * 4.5);background:color-mix(in srgb,#2a2a30 calc(var(--l) * 11%),#a9a9ae);transform:translateZ(calc(var(--l) * -.3cqw))}.upp-gfx__note-face{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:calc(var(--u) * 4.5);background:#e0e0e0;box-shadow:0 4cqw 8cqw -3cqw #000000bf;color:#000;font-family:-apple-system,BlinkMacSystemFont,var(--font-body-family, Inter, sans-serif);font-size:calc(var(--u) * 3.9);font-weight:400;line-height:1.25;white-space:nowrap}.upp-gfx__note-face>*{position:absolute}.upp-gfx__note-icon{top:calc(var(--u) * 2);left:calc(var(--u) * 2.8);width:calc(var(--u) * 4.8);height:calc(var(--u) * 4.8);color:#959595}.upp-gfx__note-icon svg{display:block;width:100%;height:100%}.upp-gfx__note-app,.upp-gfx__note-time{top:calc(var(--u) * 2.06);color:gray}.upp-gfx__note-app{left:calc(var(--u) * 10)}.upp-gfx__note-time{right:calc(var(--u) * 4.6)}.upp-gfx__note-title,.upp-gfx__note-body{left:calc(var(--u) * 4)}.upp-gfx__note-title{top:calc(var(--u) * 8.56);font-weight:600}.upp-gfx__note-body{top:calc(var(--u) * 13.46)}@container (max-width: 520px){.upp-gfx__toast{width:38cqw;padding:2.2cqw;border-radius:3.4cqw}.upp-gfx__chip:nth-of-type(2),.upp-gfx__chip:nth-of-type(3){display:none}}.upp-gfx[data-asleep] *,.upp-gfx[data-asleep] *:before{animation-play-state:paused!important}@media(prefers-reduced-motion:reduce){.upp-gfx *,.upp-gfx *:before{animation:none!important;transition:none!important}.upp-gfx__streaks{display:none}}
/*# sourceMappingURL=/cdn/shop/t/224/assets/ultimate-pack-graphics.css.map */