* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body { margin: 0; }

/* Squircle mask (Android 13 icon shape) */
.squircle {
  border-radius: 42%;
  clip-path: path("M 0,28 C 0,4 4,0 28,0 S 56,4 56,28 52,56 28,56 0,52 0,28");
}
/* fallback for non-56 sizes: just use big radius */
.squircle { border-radius: 45% / 45%; }

.icon-anim { transition: transform .18s cubic-bezier(.2,.8,.3,1.2), background .4s ease; }
.icon-anim:active { transform: scale(.9); }

/* Ripple */
.ripple-host { position: relative; overflow: hidden; }
.ripple-el {
  position: absolute; border-radius: 50%;
  background: rgba(255,255,255,.4);
  transform: scale(0); animation: ripple .6s ease-out;
  pointer-events: none;
}
@keyframes ripple { to { transform: scale(2.5); opacity: 0; } }

/* Device bezel */
.device-bezel {
  background: #05060a;
  border-radius: 40px;
  padding: 10px;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.6), inset 0 0 0 2px #222;
  max-width: 94vw;
}
.device-screen {
  width: 100%; height: 100%;
  border-radius: 32px;
  overflow: hidden;
  transition: background .4s ease;
}

/* color transitions everywhere */
.device-screen, .icon-anim, .media-morph { transition: background .4s ease, color .4s ease; }

.wallpaper-fade { transition: opacity .5s ease; }

.media-morph { transition: background .6s cubic-bezier(.4,0,.2,1); }

/* Animations */
.lock-clock { animation: fadeUp .5s ease; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.app-drawer-anim { animation: drawerUp .32s cubic-bezier(.2,.9,.2,1); }
@keyframes drawerUp { from { transform: translateY(70%); opacity: .3; } to { transform: none; opacity: 1; } }

.shade-down { animation: shadeDown .3s cubic-bezier(.2,.9,.2,1); transform-origin: top; }
@keyframes shadeDown { from { transform: translateY(-12%) scaleY(.85); opacity: .4; } to { transform: none; opacity: 1; } }

.sheet-up { animation: sheetUp .3s cubic-bezier(.2,.9,.2,1); }
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } }

.egg-spin { animation: eggspin 6s linear infinite; }
@keyframes eggspin { to { transform: rotate(360deg); } }

/* select styling */
select { -webkit-appearance: none; appearance: none; }

::-webkit-scrollbar { width: 0; height: 0; }
</parameter>
</invoke>