.on-back{z-index:50;pointer-events:none;padding:calc(64px + var(--safe-t,0px)) 16px calc(24px + var(--safe-b,0px));display:flex;position:fixed;inset:0;overflow-y:auto}.on-card{pointer-events:auto;flex-direction:column;align-items:center;gap:16px;width:min(400px,100%);margin:auto;padding:22px 20px 20px;animation:.55s cubic-bezier(.2,.9,.3,1) 80ms backwards on-in;display:flex}.on-back.late .on-card{animation-delay:.2s}.on-card>*{z-index:1;position:relative}.on-title{letter-spacing:.32em;color:var(--ice);text-shadow:var(--text-glow-ice);padding-left:.32em;font-size:13px}.on-you{place-items:center;height:104px;animation:.6s cubic-bezier(.2,1.3,.4,1) .2s backwards on-pop;display:grid}.on-back.late .on-you{animation-delay:.32s}.on-float{animation:3.4s ease-in-out infinite on-drift;display:block}.on-input{text-align:center;letter-spacing:.06em;width:100%;font-size:18px}.on-swatches{grid-template-columns:repeat(6,1fr);gap:6px;width:100%;display:grid}.on-swatches .pp-swatch{width:auto;height:44px;box-shadow:none;background:0 0;border-radius:3px}.on-swatches .pp-swatch:hover{background:#7fe3ff0f}.on-swatches .pp-swatch.on{box-shadow:0 0 0 1px var(--ice);background:#7fe3ff14}.on-err{color:var(--alert);letter-spacing:.06em;text-align:center;margin:-4px 0 -6px;font-size:13px}.on-go{width:100%}.on-back.out .on-card{opacity:0;transition:opacity .26s ease-in 40ms,transform .3s ease-in;transform:translateY(-10px)scale(.985)}.on-back.out .on-float{animation:none}.on-back.out .on-you{opacity:0;transition:transform .26s cubic-bezier(.5,0,.9,.4),opacity .22s ease-in;transform:translateY(-34px)}@keyframes on-in{0%{opacity:0;transform:translateY(16px)scale(.985)}}@keyframes on-pop{0%{opacity:0;transform:translateY(10px)scale(.8)}}@keyframes on-drift{0%,to{transform:translateY(0)rotate(-4deg)}50%{transform:translateY(-6px)rotate(4deg)}}@media (max-width:700px){.on-back{padding-top:calc(60px + var(--safe-t,0px))}.on-card{gap:14px;padding:18px 16px}}@media (min-width:900px){.on-card{width:420px;padding:26px 26px 24px}.on-title{font-size:14px}}@media (prefers-reduced-motion:reduce){.on-card,.on-you,.on-float{animation:none!important}.on-card{animation:.2s ease-out backwards on-fade!important}.on-back.out .on-card,.on-back.out .on-you{transition:opacity .1s linear;transform:none}}@keyframes on-fade{0%{opacity:0}}