.glass-button{background-color:rgb(14 14 14/.6);border:1px solid rgb(255 255 255/.18);box-shadow:inset 0 1px 0 rgb(255 255 255/.22);color:#fff;& svg,&>span{filter:drop-shadow(0 1px 1px rgb(0 0 0/.35))}@media (min-width:768px){-webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%)}}.glass-strong{background-color:rgb(14 14 14/.8);-webkit-backdrop-filter:blur(32px) saturate(170%);backdrop-filter:blur(32px) saturate(170%);border:1px solid rgb(255 255 255/.12);box-shadow:inset 0 1px 0 rgb(255 255 255/.16);@media (max-width:767px){background-color:rgb(20 20 20/.97);-webkit-backdrop-filter:none;backdrop-filter:none}}.glass-bar{background-color:rgb(15 15 15/.62);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);border:1px solid rgb(255 255 255/.08);box-shadow:inset 0 1px 0 rgb(255 255 255/.06);@media (max-width:767px){background-color:rgb(15 15 15/.9);-webkit-backdrop-filter:none;backdrop-filter:none}}.glass-soft{background-color:rgb(255 255 255/.08);border:1px solid rgb(255 255 255/.1);box-shadow:inset 0 1px 0 rgb(255 255 255/.14)}.liquid{transition:scale .4s cubic-bezier(.34,1.56,.64,1),background-color .2s ease,color .2s ease;&:active{scale:.92}}.phone-feed{animation:phone-feed 15s cubic-bezier(.3,.9,.3,1) infinite}.offscreen,.offscreen *{animation-play-state:paused!important}.demo-pick,.demo-save,.demo-save svg,.demo-sheet,.demo-swipe-down,.demo-swipe-up,.demo-tap{animation-duration:15s;animation-iteration-count:infinite;animation-delay:calc(var(--turn, 0) * 5s + var(--at, 0s) - 15s)}@keyframes phone-feed{0%,30%{transform:translateY(0)}33.33%,63.33%{transform:translateY(-100%)}66.66%,96.66%{transform:translateY(-200%)}to{transform:translateY(-300%)}}.demo-pick{animation-name:demo-pick;animation-timing-function:step-end}@keyframes demo-pick{0%,25%,to{background-color:transparent;color:inherit}6.67%{background-color:#fff;color:#000}}.demo-sheet{transform:translateY(100%);animation-name:demo-sheet;animation-timing-function:cubic-bezier(.2,.8,.2,1)}@keyframes demo-sheet{0%,7%{transform:translateY(100%)}10%,22.5%{transform:translateY(0)}26%,to{transform:translateY(100%)}}.demo-save{background-color:rgb(255 255 255/.1);animation-name:demo-save;animation-timing-function:step-end}@keyframes demo-save{0%,30%,to{background-color:rgb(255 255 255/.1);color:inherit}16.67%{background-color:var(--accent);color:var(--accent-ink)}}.demo-save svg{animation-name:demo-save-mark;animation-timing-function:step-end}@keyframes demo-save-mark{0%,30%,to{fill:none}16.67%{fill:currentColor}}.demo-swipe-down,.demo-swipe-up,.demo-tap{opacity:0}.demo-tap{animation-name:demo-tap}@keyframes demo-tap{0%{opacity:0;scale:1.5}2.5%{opacity:1;scale:1}4%{opacity:1;scale:.65}5.5%{opacity:1;scale:1}8%,to{opacity:0;scale:1.3}}.demo-swipe-down{animation-name:demo-swipe-down}@keyframes demo-swipe-down{0%{opacity:0;transform:translateY(0)}2%{opacity:1;transform:translateY(0)}6%{opacity:1;transform:translateY(110px)}7.5%,to{opacity:0;transform:translateY(110px)}}.demo-swipe-up{animation-name:demo-swipe-up}@keyframes demo-swipe-up{0%{opacity:0;transform:translateY(0)}2%{opacity:1;transform:translateY(0)}6.5%{opacity:1;transform:translateY(-150px)}8%,to{opacity:0;transform:translateY(-150px)}}.demo-badge{animation:demo-badge 5s ease-out infinite}@keyframes demo-badge{0%,50%,64%,to{scale:1}55%{scale:1.2}}.demo-caption{opacity:0;animation:demo-caption 5s ease-out infinite;animation-delay:calc(var(--at, 0s) - 5s)}@keyframes demo-caption{0%,33%,to{opacity:0;transform:translateY(4px)}28%,4%{opacity:1;transform:translateY(0)}}.like-pop{animation:like-pop .45s cubic-bezier(.34,1.56,.64,1)}.teach-card{animation:rise .25s cubic-bezier(.2,.8,.2,1) both}@media (prefers-reduced-motion:reduce){.demo-badge,.demo-caption,.demo-pick,.demo-save,.demo-save svg,.demo-sheet,.demo-swipe-down,.demo-swipe-up,.demo-tap,.phone-feed{animation:none}.demo-caption:first-child{opacity:1}.liquid{transition:none}}